@antv/g - npm Package Compare versions

Comparing version 3.1.0-beta.7 to 3.1.0-beta.8

lib/canvas.js

@@ -259,4 +259,4 @@ var Util = require('./util/index');
     return {
-      clientX: x / (el.width / width) + bbox.left,
-      clientY: y / (el.height / height) + bbox.top
+      clientX: x / (bbox.width / width) + bbox.left,
+      clientY: y / (bbox.height / height) + bbox.top
     };
@@ -263,0 +263,0 @@ },

lib/core/mixin/isPointInPath.js

@@ -333,6 +333,11 @@ var Util = require('../../util/index');
 
+var dom = function dom(x, y) {
+  var box = this._cfg.el.getBBox();
+  return Inside.box(box.minX, box.maxX, box.minY, box.maxY, x, y);
+};
+
 var shapes = {
   arc: arc,
   circle: circle,
-  dom: rect,
+  dom: dom,
   ellipse: ellipse,
@@ -339,0 +344,0 @@ fan: fan,

lib/index.js

@@ -26,3 +26,3 @@ module.exports = {
   // version, etc.
-  version: '3.1.0-beta.7'
+  version: '3.1.0-beta.8'
 };

lib/renderers/svg/painter.js

 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 var Util = require('../../util');
+
+var _require = require('../../util/format'),
+    parseRadius = _require.parseRadius;
+
 var Marker = require('../../shapes/marker');
@@ -8,3 +12,3 @@ var Defs = require('./defs');
 var SHAPE_TO_TAGS = {
-  rect: 'rect',
+  rect: 'path',
   circle: 'circle',
@@ -102,3 +106,3 @@ line: 'line',
       try {
-        self._drawChildren(model._cfg.children);
+        self._drawChildren(model._cfg.children, false);
       } catch (ev) {
@@ -119,5 +123,12 @@ // 绘制时异常，中断重绘
 
-  Painter.prototype._drawGroup = function _drawGroup(model) {
-    if (model._cfg.tobeRemoved) {
-      Util.each(model._cfg.tobeRemoved, function (item) {
+  Painter.prototype._drawGroup = function _drawGroup(model, redraw) {
+    var cfg = model._cfg;
+    /**
+     * FIXME redraw: 为了使元素置顶的临时解决方案
+     * 如果直接将dom元素重排可以解决部分问题。但是如果重排后的group中有新增的shape，置顶效果就没有了
+     * 所以只能删除原有节点，新增节点以及所有子节点。这时候哪怕shape有el，也需要判断一下是否需要重绘
+     */
+    redraw = redraw || !!cfg.el;
+    if (cfg.tobeRemoved) {
+      Util.each(cfg.tobeRemoved, function (item) {
         if (item.parentNode) {
@@ -127,11 +138,11 @@ item.parentNode.removeChild(item);
       });
-      model._cfg.tobeRemoved = [];
+      cfg.tobeRemoved = [];
     }
-    this._drawShape(model);
-    if (model._cfg.children && model._cfg.children.length > 0) {
-      this._drawChildren(model._cfg.children);
+    this._drawShape(model, redraw);
+    if (cfg.children && cfg.children.length > 0) {
+      this._drawChildren(model._cfg.children, redraw);
     }
   };
 
-  Painter.prototype._drawChildren = function _drawChildren(children) {
+  Painter.prototype._drawChildren = function _drawChildren(children, redraw) {
     var self = this;
@@ -142,5 +153,5 @@ var shape = void 0;
       if (shape.isGroup) {
-        self._drawGroup(shape);
+        self._drawGroup(shape, redraw);
       } else {
-        self._drawShape(shape);
+        self._drawShape(shape, redraw);
       }
@@ -150,10 +161,11 @@ }
 
-  Painter.prototype._drawShape = function _drawShape(model) {
+  Painter.prototype._drawShape = function _drawShape(model, redraw) {
     var self = this;
     var attrs = model._attrs;
     var cfg = model._cfg;
+    var el = cfg.el;
     // 删除
     if (cfg.removed || cfg.destroyed) {
-      if (cfg.el) {
-        cfg.el.parentNode.removeChild(cfg.el);
+      if (el) {
+        el.parentNode.removeChild(cfg.el);
       }
@@ -163,4 +175,10 @@ return;
 
+    // 重绘节点
+    if (redraw && el) {
+      el.parentNode.removeChild(el);
+      el = null;
+    }
+
     // 新增节点
-    if (!cfg.el && cfg.parent) {
+    if (!el && cfg.parent) {
       self._createDom(model);
@@ -170,7 +188,11 @@ self._updateShape(model);
 
+    el = cfg.el;
+
     if (cfg.visible === false) {
-      cfg.el.setAttribute('visibility', 'hidden');
+      el.setAttribute('visibility', 'hidden');
       return;
     }
-    cfg.el.setAttribute('visibility', 'visible');
+    if (cfg.visible && el.hasAttribute('visibility')) {
+      el.removeAttribute('visibility');
+    }
 
@@ -181,2 +203,3 @@ // 更新
     }
+
     if (attrs.clip && attrs.clip._cfg.hasUpdate) {
@@ -213,2 +236,5 @@ self._updateShape(attrs.clip);
     }
+    if (model.type === 'rect') {
+      model._cfg.el.setAttribute('d', self._assembleRect(attrs));
+    }
     for (var key in attrs) {
@@ -230,3 +256,3 @@ if (attrs[key] !== formerAttrs[key]) {
     // 计算marker路径
-    if (type === 'marker' && ~['x', 'y', 'radius', 'r'].indexOf(name)) {
+    if ((type === 'marker' || type === 'rect') && ~['x', 'y', 'radius', 'r'].indexOf(name)) {
       return;
@@ -239,8 +265,2 @@ }
     }
-    // 圆角矩形
-    if (type === 'rect' && name === 'radius') {
-      el.setAttribute('rx', value);
-      el.setAttribute('ry', value);
-      return;
-    }
     // 多边形
@@ -378,2 +398,36 @@ if (type === 'polygon' && name === 'points') {
 
+  Painter.prototype._assembleRect = function _assembleRect(attrs) {
+    var x = attrs.x;
+    var y = attrs.y;
+    var w = attrs.width;
+    var h = attrs.height;
+    var radius = attrs.radius;
+
+    if (!radius) {
+      return 'M ' + x + ',' + y + ' l ' + w + ',0 l 0,' + h + ' l' + -w + ' 0 z';
+    }
+    var r = parseRadius(radius);
+    if (Util.isArray(radius)) {
+      if (radius.length === 1) {
+        r.r1 = r.r2 = r.r3 = r.r4 = radius[0];
+      } else if (radius.length === 2) {
+        r.r1 = r.r3 = radius[0];
+        r.r2 = r.r4 = radius[1];
+      } else if (radius.length === 3) {
+        r.r1 = radius[0];
+        r.r2 = r.r4 = radius[1];
+        r.r3 = radius[2];
+      } else {
+        r.r1 = radius[0];
+        r.r2 = radius[1];
+        r.r3 = radius[2];
+        r.r4 = radius[3];
+      }
+    } else {
+      r.r1 = r.r2 = r.r3 = r.r4 = radius;
+    }
+    var d = [['M ' + (x + r.r1) + ',' + y], ['l ' + (w - r.r1 - r.r2) + ',0'], ['a ' + r.r2 + ',' + r.r2 + ',0,0,1,' + r.r2 + ',' + r.r2], ['l 0,' + (h - r.r2 - r.r3)], ['a ' + r.r3 + ',' + r.r3 + ',0,0,1,' + -r.r3 + ',' + r.r3], ['l ' + (r.r3 + r.r4 - w) + ',0'], ['a ' + r.r4 + ',' + r.r4 + ',0,0,1,' + -r.r4 + ',' + -r.r4], ['l 0,' + (r.r4 + r.r1 - h)], ['a ' + r.r1 + ',' + r.r1 + ',0,0,1,' + r.r1 + ',' + -r.r1], ['z']];
+    return d.join(' ');
+  };
+
   Painter.prototype._formatPath = function _formatPath(value) {
@@ -380,0 +434,0 @@ value = value.map(function (path) {

lib/shapes/rect.js

 var Util = require('../util/index');
+
+var _require = require('../util/format'),
+    parseRadius = _require.parseRadius;
+
 var Shape = require('../core/shape');
@@ -61,11 +65,12 @@
     } else {
-      context.moveTo(x + radius, y);
-      context.lineTo(x + width - radius, y);
-      context.arc(x + width - radius, y + radius, radius, -Math.PI / 2, 0, false);
-      context.lineTo(x + width, y + height - radius);
-      context.arc(x + width - radius, y + height - radius, radius, 0, Math.PI / 2, false);
-      context.lineTo(x + radius, y + height);
-      context.arc(x + radius, y + height - radius, radius, Math.PI / 2, Math.PI, false);
-      context.lineTo(x, y + radius);
-      context.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2, false);
+      var r = parseRadius(radius);
+      context.moveTo(x + r.r1, y);
+      context.lineTo(x + width - r.r2, y);
+      r.r2 !== 0 && context.arc(x + width - r.r2, y + r.r2, r.r2, -Math.PI / 2, 0);
+      context.lineTo(x + width, y + height - r.r3);
+      r.r3 !== 0 && context.arc(x + width - r.r3, y + height - r.r3, r.r3, 0, Math.PI / 2);
+      context.lineTo(x + r.r4, y + height);
+      r.r4 !== 0 && context.arc(x + r.r4, y + height - r.r4, r.r4, Math.PI / 2, Math.PI);
+      context.lineTo(x, y + r.r1);
+      r.r1 !== 0 && context.arc(x + r.r1, y + r.r1, r.r1, Math.PI, Math.PI * 1.5);
       context.closePath();
@@ -72,0 +77,0 @@ }

lib/util/format.js

@@ -8,2 +8,33 @@ var Util = require('../util/index');
 module.exports = {
+  parseRadius: function parseRadius(radius) {
+    var r1 = 0,
+        r2 = 0,
+        r3 = 0,
+        r4 = 0;
+    if (Util.isArray(radius)) {
+      if (radius.length === 1) {
+        r1 = r2 = r3 = r4 = radius[0];
+      } else if (radius.length === 2) {
+        r1 = r3 = radius[0];
+        r2 = r4 = radius[1];
+      } else if (radius.length === 3) {
+        r1 = radius[0];
+        r2 = r4 = radius[1];
+        r3 = radius[2];
+      } else {
+        r1 = radius[0];
+        r2 = radius[1];
+        r3 = radius[2];
+        r4 = radius[3];
+      }
+    } else {
+      r1 = r2 = r3 = r4 = radius;
+    }
+    return {
+      r1: r1,
+      r2: r2,
+      r3: r3,
+      r4: r4
+    };
+  },
   parsePath: function parsePath(path) {
@@ -10,0 +41,0 @@ path = path || [];

package.json

 {
   "name": "@antv/g",
-  "version": "3.1.0-beta.7",
+  "version": "3.1.0-beta.8",
   "description": "A canvas library which providing 2d draw for G2.",
@@ -5,0 +5,0 @@ "keywords": [

src/canvas.js

@@ -268,4 +268,4 @@ const Util = require('./util/index');
     return {
-      clientX: x / (el.width / width) + bbox.left,
-      clientY: y / (el.height / height) + bbox.top
+      clientX: x / (bbox.width / width) + bbox.left,
+      clientY: y / (bbox.height / height) + bbox.top
     };
@@ -272,0 +272,0 @@ },

src/core/mixin/isPointInPath.js

@@ -337,6 +337,11 @@ const Util = require('../../util/index');
 
+const dom = function dom(x, y) {
+  const box = this._cfg.el.getBBox();
+  return Inside.box(box.minX, box.maxX, box.minY, box.maxY, x, y);
+};
+
 const shapes = {
   arc,
   circle,
-  dom: rect,
+  dom,
   ellipse,
@@ -343,0 +348,0 @@ fan,

src/index.js

@@ -26,3 +26,3 @@ module.exports = {
   // version, etc.
-  version: '3.1.0-beta.7'
+  version: '3.1.0-beta.8'
 };

src/renderers/svg/painter.js

 const Util = require('../../util');
+const { parseRadius } = require('../../util/format');
 const Marker = require('../../shapes/marker');
@@ -6,3 +7,3 @@ const Defs = require('./defs');
 const SHAPE_TO_TAGS = {
-  rect: 'rect',
+  rect: 'path',
   circle: 'circle',
@@ -97,3 +98,3 @@ line: 'line',
       try {
-        self._drawChildren(model._cfg.children);
+        self._drawChildren(model._cfg.children, false);
       } catch (ev) { // 绘制时异常，中断重绘
@@ -112,5 +113,12 @@ console.warn('error in draw canvas, detail as:');
   }
-  _drawGroup(model) {
-    if (model._cfg.tobeRemoved) {
-      Util.each(model._cfg.tobeRemoved, item => {
+  _drawGroup(model, redraw) {
+    const cfg = model._cfg;
+    /**
+     * FIXME redraw: 为了使元素置顶的临时解决方案
+     * 如果直接将dom元素重排可以解决部分问题。但是如果重排后的group中有新增的shape，置顶效果就没有了
+     * 所以只能删除原有节点，新增节点以及所有子节点。这时候哪怕shape有el，也需要判断一下是否需要重绘
+     */
+    redraw = redraw || !!cfg.el;
+    if (cfg.tobeRemoved) {
+      Util.each(cfg.tobeRemoved, item => {
         if (item.parentNode) {
@@ -120,10 +128,10 @@ item.parentNode.removeChild(item);
       });
-      model._cfg.tobeRemoved = [];
+      cfg.tobeRemoved = [];
     }
-    this._drawShape(model);
-    if (model._cfg.children && model._cfg.children.length > 0) {
-      this._drawChildren(model._cfg.children);
+    this._drawShape(model, redraw);
+    if (cfg.children && cfg.children.length > 0) {
+      this._drawChildren(model._cfg.children, redraw);
     }
   }
-  _drawChildren(children) {
+  _drawChildren(children, redraw) {
     const self = this;
@@ -134,16 +142,17 @@ let shape;
       if (shape.isGroup) {
-        self._drawGroup(shape);
+        self._drawGroup(shape, redraw);
       } else {
-        self._drawShape(shape);
+        self._drawShape(shape, redraw);
       }
     }
   }
-  _drawShape(model) {
+  _drawShape(model, redraw) {
     const self = this;
     const attrs = model._attrs;
     const cfg = model._cfg;
+    let el = cfg.el;
     // 删除
     if (cfg.removed || cfg.destroyed) {
-      if (cfg.el) {
-        cfg.el.parentNode.removeChild(cfg.el);
+      if (el) {
+        el.parentNode.removeChild(cfg.el);
       }
@@ -153,4 +162,10 @@ return;
 
+    // 重绘节点
+    if (redraw && el) {
+      el.parentNode.removeChild(el);
+      el = null;
+    }
+
     // 新增节点
-    if (!cfg.el && cfg.parent) {
+    if (!el && cfg.parent) {
       self._createDom(model);
@@ -160,9 +175,12 @@ self._updateShape(model);
 
+    el = cfg.el;
+
     if (cfg.visible === false) {
-      cfg.el.setAttribute('visibility', 'hidden');
+      el.setAttribute('visibility', 'hidden');
       return;
     }
-    cfg.el.setAttribute('visibility', 'visible');
+    if (cfg.visible && el.hasAttribute('visibility')) {
+      el.removeAttribute('visibility');
+    }
 
-
     // 更新
@@ -172,2 +190,3 @@ if (cfg.hasUpdate) {
     }
+
     if (attrs.clip && attrs.clip._cfg.hasUpdate) {
@@ -203,2 +222,5 @@ self._updateShape(attrs.clip);
     }
+    if (model.type === 'rect') {
+      model._cfg.el.setAttribute('d', self._assembleRect(attrs));
+    }
     for (const key in attrs) {
@@ -219,3 +241,3 @@ if (attrs[key] !== formerAttrs[key]) {
     // 计算marker路径
-    if (type === 'marker' && ~[ 'x', 'y', 'radius', 'r' ].indexOf(name)) {
+    if ((type === 'marker' || type === 'rect') && ~[ 'x', 'y', 'radius', 'r' ].indexOf(name)) {
       return;
@@ -228,8 +250,2 @@ }
     }
-    // 圆角矩形
-    if (type === 'rect' && name === 'radius') {
-      el.setAttribute('rx', value);
-      el.setAttribute('ry', value);
-      return;
-    }
     // 多边形
@@ -362,2 +378,46 @@ if (type === 'polygon' && name === 'points') {
   }
+  _assembleRect(attrs) {
+    const x = attrs.x;
+    const y = attrs.y;
+    const w = attrs.width;
+    const h = attrs.height;
+    const radius = attrs.radius;
+
+    if (!radius) {
+      return `M ${x},${y} l ${w},0 l 0,${h} l${-w} 0 z`;
+    }
+    const r = parseRadius(radius);
+    if (Util.isArray(radius)) {
+      if (radius.length === 1) {
+        r.r1 = r.r2 = r.r3 = r.r4 = radius[0];
+      } else if (radius.length === 2) {
+        r.r1 = r.r3 = radius[0];
+        r.r2 = r.r4 = radius[1];
+      } else if (radius.length === 3) {
+        r.r1 = radius[0];
+        r.r2 = r.r4 = radius[1];
+        r.r3 = radius[2];
+      } else {
+        r.r1 = radius[0];
+        r.r2 = radius[1];
+        r.r3 = radius[2];
+        r.r4 = radius[3];
+      }
+    } else {
+      r.r1 = r.r2 = r.r3 = r.r4 = radius;
+    }
+    const d = [
+      [ `M ${x + r.r1},${y}` ],
+      [ `l ${w - r.r1 - r.r2},0` ],
+      [ `a ${r.r2},${r.r2},0,0,1,${r.r2},${r.r2}` ],
+      [ `l 0,${h - r.r2 - r.r3}` ],
+      [ `a ${r.r3},${r.r3},0,0,1,${-r.r3},${r.r3}` ],
+      [ `l ${r.r3 + r.r4 - w},0` ],
+      [ `a ${r.r4},${r.r4},0,0,1,${-r.r4},${-r.r4}` ],
+      [ `l 0,${r.r4 + r.r1 - h}` ],
+      [ `a ${r.r1},${r.r1},0,0,1,${r.r1},${-r.r1}` ],
+      [ 'z' ]
+    ];
+    return d.join(' ');
+  }
   _formatPath(value) {
@@ -364,0 +424,0 @@ value = value.map(path => {

src/shapes/rect.js

 const Util = require('../util/index');
+const { parseRadius } = require('../util/format');
 const Shape = require('../core/shape');
@@ -61,11 +62,12 @@
     } else {
-      context.moveTo(x + radius, y);
-      context.lineTo(x + width - radius, y);
-      context.arc(x + width - radius, y + radius, radius, -Math.PI / 2, 0, false);
-      context.lineTo(x + width, y + height - radius);
-      context.arc(x + width - radius, y + height - radius, radius, 0, Math.PI / 2, false);
-      context.lineTo(x + radius, y + height);
-      context.arc(x + radius, y + height - radius, radius, Math.PI / 2, Math.PI, false);
-      context.lineTo(x, y + radius);
-      context.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2, false);
+      const r = parseRadius(radius);
+      context.moveTo(x + r.r1, y);
+      context.lineTo(x + width - r.r2, y);
+      r.r2 !== 0 && context.arc(x + width - r.r2, y + r.r2, r.r2, -Math.PI / 2, 0);
+      context.lineTo(x + width, y + height - r.r3);
+      r.r3 !== 0 && context.arc(x + width - r.r3, y + height - r.r3, r.r3, 0, Math.PI / 2);
+      context.lineTo(x + r.r4, y + height);
+      r.r4 !== 0 && context.arc(x + r.r4, y + height - r.r4, r.r4, Math.PI / 2, Math.PI);
+      context.lineTo(x, y + r.r1);
+      r.r1 !== 0 && context.arc(x + r.r1, y + r.r1, r.r1, Math.PI, Math.PI * 1.5);
       context.closePath();
@@ -72,0 +74,0 @@ }

src/util/format.js

@@ -8,2 +8,33 @@ const Util = require('../util/index');
 module.exports = {
+  parseRadius(radius) {
+    let r1 = 0,
+      r2 = 0,
+      r3 = 0,
+      r4 = 0;
+    if (Util.isArray(radius)) {
+      if (radius.length === 1) {
+        r1 = r2 = r3 = r4 = radius[0];
+      } else if (radius.length === 2) {
+        r1 = r3 = radius[0];
+        r2 = r4 = radius[1];
+      } else if (radius.length === 3) {
+        r1 = radius[0];
+        r2 = r4 = radius[1];
+        r3 = radius[2];
+      } else {
+        r1 = radius[0];
+        r2 = radius[1];
+        r3 = radius[2];
+        r4 = radius[3];
+      }
+    } else {
+      r1 = r2 = r3 = r4 = radius;
+    }
+    return {
+      r1,
+      r2,
+      r3,
+      r4
+    };
+  },
   parsePath(path) {
@@ -10,0 +41,0 @@ path = path || [];

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1034343

increased by1.36%

Lines of code

27394

increased by0.98%

No dependency changes