refact: replace jquery

package.json

@@ -54,7 +54,6 @@
     "webpack-cli": "~4.8.0"
   },
   "peerDependencies": {
-    "jquery": ">=2.0.0",
     "lodash": ">=4.0.0"
   },
   "dependencies": {

src/canvas/baseCanvas.js

@@ -1,7 +1,7 @@
 'use strict';
 
-const $ = require('jquery');
-const _ = require('lodash');
+const $ = require('../utils/tiny-jquery');
+const _ = require('../utils/tiny-lodash');
 const domtoimage = require('dom-to-image');
 
 import Canvas from "../interface/canvas";
@@ -190,14 +190,15 @@ class BaseCanvas extends Canvas {
     this._guideObj = undefined;
     this._guideTimer = undefined;
 
-
+    let rootNode = $(this.root)
+    let rootOffset = rootNode.offset()
     // 坐标转换服务
     this._coordinateService = new CoordinateService({
       canvas: this,
-      terOffsetX: $(this.root).offset().left,
-      terOffsetY: $(this.root).offset().top,
-      terWidth: $(this.root).width(),
-      terHeight: $(this.root).height(),
+      terOffsetX: rootOffset.left,
+      terOffsetY: rootOffset.top,
+      terWidth: rootNode.width(),
+      terHeight: rootNode.height(),
       canOffsetX: this._moveData[0],
       canOffsetY: this._moveData[1],
       scale: this._zoomData
@@ -419,13 +420,14 @@ class BaseCanvas extends Canvas {
 
     // 生成svg的wrapper
     const svg = $(document.createElementNS('http://www.w3.org/2000/svg', 'svg'))
-      .attr('class', 'butterfly-svg')
-      .attr('width', _SVGWidth)
-      .attr('height', _SVGHeight)
-      .attr('version', '1.1')
-      .attr('xmlns', 'http://www.w3.org/2000/svg')
-      .css('z-index', this._dragEdgeZindex)
-      .appendTo(this.wrapper);
+      .attr({
+        'class': 'butterfly-svg',
+        'width': _SVGWidth,
+        'height': _SVGHeight,
+        'version': '1.1',
+        'xmlns': 'http://www.w3.org/2000/svg'
+      }).css('z-index', this._dragEdgeZindex)
+        .appendTo(this.wrapper);
 
     if(!_isMobi) {
       // hack 监听浏览器的缩放比例并适配
@@ -476,13 +478,17 @@ class BaseCanvas extends Canvas {
     if (_isHightVerChrome && window.ResizeObserver && this.theme.autoResizeRootSize) {
       // 监听某个dom的resize事件
       const _resizeObserver = new ResizeObserver(entries => {
-        this._rootWidth = $(this.root).width();
-        this._rootHeight = $(this.root).height();
+        let rootN = $(this.root)
+        let rootOffset = rootN.offset();
+        let rootW = rootN.width();
+        let rootH = rootN.height();
+        this._rootWidth = rootW;
+        this._rootHeight = rootH;
         this._coordinateService._changeCanvasInfo({
-          terOffsetX: $(this.root).offset().left,
-          terOffsetY: $(this.root).offset().top,
-          terWidth: $(this.root).width(),
-          terHeight: $(this.root).height()
+          terOffsetX: rootOffset.left,
+          terOffsetY: rootOffset.top,
+          terWidth: rootW,
+          terHeight: rootH
         });
         this.canvasWrapper.resize({root: this.root});
         this.setGridMode(true, undefined , true);
@@ -491,13 +497,17 @@ class BaseCanvas extends Canvas {
     } else {
       //  降级处理，监控窗口的resize事件
       window.addEventListener('resize', () => {
-        this._rootWidth = $(this.root).width();
-        this._rootHeight = $(this.root).height();
+        let rootN = $(this.root)
+        let rootOffset = rootN.offset();
+        let rootW = rootN.width();
+        let rootH = rootN.height();
+        this._rootWidth = rootW;
+        this._rootHeight = rootH;
         this._coordinateService._changeCanvasInfo({
-          terOffsetX: $(this.root).offset().left,
-          terOffsetY: $(this.root).offset().top,
-          terWidth: $(this.root).width(),
-          terHeight: $(this.root).height()
+          terOffsetX: rootOffset.left,
+          terOffsetY: rootOffset.top,
+          terWidth: rootW,
+          terHeight: rootH
         });
         this.canvasWrapper.resize({root: this.root});
         this.setGridMode(true, undefined, true);
@@ -2933,7 +2943,7 @@ class BaseCanvas extends Canvas {
               );
           }
         });
-      } else if (_.isString(_edge)) {
+      } else if (typeof _edge === 'string') {
         edgeIndex = _.findIndex(this.edges, (item) => {
           return _edge === item.id;
         });
@@ -3118,7 +3128,7 @@ class BaseCanvas extends Canvas {
     } else {
       // 重力布局
       if (_.get(this.layout, 'type') === 'forceLayout') {
-        const _opts = $.extend({
+        const _opts = _.merge({
           // 布局画布总宽度
           width,
           // 布局画布总长度
@@ -3253,7 +3263,7 @@ class BaseCanvas extends Canvas {
           }
         });
       } else if(_.get(this.layout, 'type') === 'gridLayout') {
-        const _opts = $.extend({
+        const _opts = _.merge({
           // 布局画布总宽度
           width:  _.get(this.layout, 'width') || 150,
           // 布局画布总长度
@@ -3297,7 +3307,7 @@ class BaseCanvas extends Canvas {
           })
         }
       } else if(_.get(this.layout, 'type') === 'fruchterman') {
-        const _opts = $.extend({
+        const _opts = _.merge({
            // 布局画布总宽度
            width,
            // 布局画布总长度
@@ -3340,7 +3350,7 @@ class BaseCanvas extends Canvas {
           })
         }
       } else if(_.get(this.layout, 'type') === 'radial') {
-        const _opts = $.extend({
+        const _opts = _.merge({
           // 布局画布总宽度
           width: _.get(this.layout, 'options.width') || 500,
           // 布局画布总长度
@@ -3835,26 +3845,23 @@ class BaseCanvas extends Canvas {
     let _data = this._unionData[name];
     if (obj.nodes) {
       obj.nodes.forEach((item) => {
-        let isId = _.isString(item);
-        let node = isId ? this.getNode(item) : item;
+        let node = typeof item === 'string' ? this.getNode(item) : item;
         _data.nodes.push(node);
       });
       _data.nodes = _.uniqBy(_data.nodes, 'id');
     }
 
     if (obj.groups) {
       obj.groups.forEach((item) => {
-        let isId = _.isString(item);
-        let group = isId ? this.getGroup(item) : item;
+        let group = typeof item === 'string' ? this.getGroup(item) : item;
         _data.groups.push(group);
       });
       _data.groups = _.uniqBy(_data.groups, 'id');
     }
 
     if (obj.edges) {
       obj.edges.forEach((item) => {
-        let isId = _.isString(item);
-        let edge = isId ? this.getEdge(item) : item;
+        let edge = typeof item === 'string' ? this.getEdge(item) : item;
         _data.edges.push(edge);
       });
       _data.edges = _.uniqBy(_data.edges, 'id');
@@ -4175,9 +4182,10 @@ class BaseCanvas extends Canvas {
     }
   }
   move(position) {
-    $(this.wrapper)
-      .css('left', position[0])
-      .css('top', position[1]);
+    $(this.wrapper).css({
+      'left': position[0],
+      'top': position[1]
+    });
     this._coordinateService._changeCanvasInfo({
       canOffsetX: position[0],
       canOffsetY: position[1]

src/canvas/treeCanvas.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import Canvas from "./baseCanvas";
-const _ = require('lodash');
+const _ = require('../utils/tiny-lodash');
 import TreeNode from '../node/treeNode';
 import Node from '../node/baseNode';
 import Hierarchy from '../utils/layout/hierarchy';

src/edge/baseEdge.js

@@ -1,7 +1,7 @@
 'use strict';
 
-const _ = require('lodash');
-const $ = require('jquery');
+const _ = require('../utils/tiny-lodash');
+const $ = require('../utils/tiny-jquery');
 
 import ArrowUtil from '../utils/arrow';
 import * as DrawUtil from '../utils/link';
@@ -181,9 +181,10 @@ class BaseEdge extends Edge {
     }
     let labelLenth = length * this.labelPosition + this.labelOffset;
     let point = this.dom.getPointAtLength(labelLenth);
-    $(this.labelDom)
-      .css('left', point.x - this.labelDom.offsetWidth / 2)
-      .css('top', point.y - this.labelDom.offsetHeight / 2);
+    $(this.labelDom).css({
+      'left': point.x - this.labelDom.offsetWidth / 2,
+      'top': point.y - this.labelDom.offsetHeight / 2
+    });
   }
   drawLabel(label) {
     let isDom = typeof HTMLElement === 'object' ? (obj) => {

src/endpoint/baseEndpoint.js

@@ -1,7 +1,7 @@
 
 
-const $ = require('jquery');
-const _ = require('lodash');
+const $ = require('../utils/tiny-jquery');
+const _ = require('../utils/tiny-lodash');
 
 import './baseEndpoint.less';
 
@@ -88,7 +88,13 @@ class BaseEndpoint extends Endpoint {
   draw(obj) {
     let _dom = obj.dom;
     if (!_dom) {
-      _dom = $('<div class="butterflie-circle-endpoint"></div>').attr('id', this.id);
+      _dom = $.create({
+        tag: 'div',
+        classNames: ['butterflie-circle-endpoint'],
+        attr: {
+          id: this.id
+        }
+      });
     } else {
       _dom = $(_dom);
     }
@@ -182,9 +188,7 @@ class BaseEndpoint extends Endpoint {
         this._posTop += _groupPos.top;
         this._posLeft += _groupPos.left;
       }
-      $(dom)
-        .css('top', this._top)
-        .css('left', this._left);
+      $(dom).css({'top': this._top, 'left': this._left});
 
       this.updated && this.updated();
     }

src/group/baseGroup.js

@@ -2,8 +2,8 @@
 
 import './baseGroup.less';
 
-const $ = require('jquery');
-const _ = require('lodash');
+const $ = require('../utils/tiny-jquery');
+const _ = require('../utils/tiny-lodash');
 
 import Group from '../interface/group';
 import Endpoint from '../endpoint/baseEndpoint';
@@ -97,8 +97,10 @@ class BaseGroup extends Group {
     }
     let group = $(_dom);
 
-    let titleDom = $('<div></div>')
-      .attr('class', 'title');
+    let titleDom = $.create({
+      tag: 'div',
+      classNames: ['title']
+    });
 
     if (_.get(this, 'options.title')) {
       titleDom.text(_.get(this, 'options.title'));
@@ -232,7 +234,7 @@ class BaseGroup extends Group {
   }
   _moveTo(x, y) {
     // 自身移动
-    $(this.dom).css('top', y).css('left', x);
+    $(this.dom).css({top: y, left: x});
     // 节点组的锚点移动
     this.endpoints.forEach((item) => {
       item.moveTo(x - this.left + item._left, y - this.top + item._top);

src/node/baseNode.js

@@ -1,5 +1,5 @@
-const $ = require('jquery');
-const _ = require('lodash');
+const $ = require('../utils/tiny-jquery');
+const _ = require('../utils/tiny-lodash');
 
 import Node from '../interface/node';
 import Endpoint from '../endpoint/baseEndpoint';
@@ -77,7 +77,7 @@ class BaseNode extends Node {
       data: endpoint
     });
 
-    let nodeZindex = $(this.dom).css('z-index');
+    let nodeZindex = $(this.dom).style('z-index');
 
     if (nodeZindex !== 'auto') {
       $(endpoint.dom).css('z-index', Number(nodeZindex) + 1);
@@ -151,7 +151,7 @@ class BaseNode extends Node {
   // drag的时候移动的api
   _moveTo(x, y) {
     // 自身移动
-    $(this.dom).css('top', y).css('left', x);
+    $(this.dom).css({top: y, left: x});
     // 所在的点移动
     this.endpoints.forEach((item) => {
       item.moveTo(x - this.left + item._left, y - this.top + item._top);

src/utils/arrow.js

@@ -1,5 +1,5 @@
 'use strict';
-import _ from 'lodash';
+import _ from './tiny-lodash';
 
 // todo:丰富箭头样式
 let ARROW_TYPE = {

src/utils/coordinate.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const _ = require('lodash');
+const _ = require('./tiny-lodash');
 
 class CoordinateService {
   constructor(opts) {

src/utils/gridService.js

@@ -1,7 +1,7 @@
 'use strict';
 
-const $ = require('jquery');
-const _ = require('lodash');
+const $ = require('./tiny-jquery');
+const _ = require('./tiny-lodash');
 
 class GridService {
   constructor(opts) {

src/utils/guidelineService.js

@@ -1,7 +1,7 @@
 'use strict';
 
-const $ = require('jquery');
-const _ = require('lodash');
+const $ = require('./tiny-jquery');
+const _ = require('./tiny-lodash');
 
 class GuidelineService {
   constructor(opts) {
@@ -251,9 +251,10 @@ class GuidelineService {
     this.clearCanvas();
   }
   move(x, y) {
-    $(this.dom)
-      .css('left', x)
-      .css('top', y);
+    $(this.dom).css({
+      left: x,
+      top: y
+    });
     this.clearCanvas();
   }
   setOrigin(x, y) {

src/utils/layout/dagreLayout.js

@@ -1,4 +1,5 @@
 const dagre = require('dagre');
+const _ = require('../tiny-lodash');
 //drage布局
 function dagreLayout(param) {
     const {nodeSize, rankdir, nodesepFunc, ranksepFunc, nodesep, ranksep, controlPoints} = param;
@@ -20,14 +21,14 @@ function dagreLayout(param) {
     if (!nodeSize) {
       nodeSizeFunc = (d) => {
         if (d.size) {
-          if (_.isArray(d.size)) {
+          if (Array.isArray(d.size)) {
             return d.size;
           }
           return [d.size, d.size];
         }
         return [40, 40];
       };
-    } else if (_.isArray(nodeSize)) {
+    } else if (Array.isArray(nodeSize)) {
       nodeSizeFunc = () => nodeSize;
     } else {
       nodeSizeFunc = () => [nodeSize, nodeSize];