@antv/g-base - npm Package Compare versions

Comparing version 0.1.0-beta.2 to 0.1.0-beta.3

esm/abstract/container.d.ts

@@ -16,3 +16,5 @@ import { IContainer, ICtor, IShape, IGroup, IElement } from '../interfaces';
     addGroup(...args: any[]): IGroup;
+    getCanvas(): any;
     getShape(x: number, y: number): IShape;
+    _findShape(children: IElement[], x: number, y: number): any;
     add(element: IElement): void;
@@ -19,0 +21,0 @@ _applyElementMatrix(element: any): void;

esm/abstract/container.js

 import { __extends } from "tslib";
 import BBox from '../bbox';
 import Element from './element';
-import ContainerUtil from '../util/container';
-import { isObject, each } from '../util/util';
+import { isFunction, isObject, each, removeFromArray, upperFirst } from '../util/util';
+var SHAPE_MAP = {};
+var INDEX = '_INDEX';
 function afterAdd(element) {
@@ -16,2 +17,59 @@ if (element.isGroup()) {
 }
+/**
+ * 设置 canvas
+ * @param {IElement} element 元素
+ * @param {ICanvas}  canvas  画布
+ */
+function setCanvas(element, canvas) {
+    element.set('canvas', canvas);
+    if (element.isGroup()) {
+        var children = element.get('children');
+        if (children.length) {
+            children.forEach(function (child) {
+                setCanvas(child, canvas);
+            });
+        }
+    }
+}
+/**
+ * 设置 timeline
+ * @param {IElement} element  元素
+ * @param {Timeline} timeline 时间轴
+ */
+function setTimeline(element, timeline) {
+    element.set('timeline', timeline);
+    if (element.isGroup()) {
+        var children = element.get('children');
+        if (children.length) {
+            children.forEach(function (child) {
+                setTimeline(child, timeline);
+            });
+        }
+    }
+}
+function contains(container, element) {
+    var children = container.getChildren();
+    return children.indexOf(element) >= 0;
+}
+function removeChild(container, element, destroy) {
+    if (destroy === void 0) { destroy = true; }
+    // 不再调用 element.remove() 方法，会出现循环调用
+    if (destroy) {
+        element.destroy();
+    }
+    else {
+        element.set('parent', null);
+        element.set('canvas', null);
+    }
+    removeFromArray(container.getChildren(), element);
+}
+function getComparer(compare) {
+    return function (left, right) {
+        var result = compare(left, right);
+        return result === 0 ? left[INDEX] - right[INDEX] : result;
+    };
+}
+function isAllowCapture(element) {
+    return element.get('visible') && element.get('capture');
+}
 var Container = /** @class */ (function (_super) {
@@ -127,6 +185,10 @@ __extends(Container, _super);
         }
-        var shape = ContainerUtil.addShape(this, cfg);
-        // 调用 shape 的变化事件，而不是 container 的
-        afterAdd(shape);
-        this._applyElementMatrix(shape);
+        var shapeType = SHAPE_MAP[cfg.type];
+        if (!shapeType) {
+            shapeType = upperFirst(cfg.type);
+            SHAPE_MAP[cfg.type] = shapeType;
+        }
+        var ShapeBase = this.getShapeBase();
+        var shape = new ShapeBase[shapeType](cfg);
+        this.add(shape);
         return shape;
@@ -140,13 +202,87 @@ };
         var groupClass = args[0], cfg = args[1];
-        var group = ContainerUtil.addGroup(this, groupClass, cfg);
-        // Group maybe a real element
-        afterAdd(group);
-        this._applyElementMatrix(group);
+        var group;
+        if (isFunction(groupClass)) {
+            if (cfg) {
+                group = new groupClass(cfg);
+            }
+            else {
+                group = new groupClass({
+                    // canvas,
+                    parent: this,
+                });
+            }
+        }
+        else {
+            var tmpCfg = groupClass || {};
+            var TmpGroupClass = this.getGroupBase();
+            group = new TmpGroupClass(tmpCfg);
+        }
+        this.add(group);
         return group;
     };
+    Container.prototype.getCanvas = function () {
+        var canvas;
+        if (this.isCanvas()) {
+            canvas = this;
+        }
+        else {
+            canvas = this.get('canvas');
+        }
+        return canvas;
+    };
     Container.prototype.getShape = function (x, y) {
-        return ContainerUtil.getShape(this, x, y);
+        // 如果不支持拾取，则直接返回
+        if (!isAllowCapture(this)) {
+            return null;
+        }
+        var children = this.getChildren();
+        var shape;
+        // 如果容器是 group
+        if (!this.isCanvas()) {
+            var v = [x, y, 1];
+            // 将 x, y 转换成对应于 group 的局部坐标
+            this.invertFromMatrix(v);
+            if (!this.isClipped(v[0], v[1])) {
+                shape = this._findShape(children, v[0], v[1]);
+            }
+        }
+        else {
+            shape = this._findShape(children, x, y);
+        }
+        return shape;
     };
+    Container.prototype._findShape = function (children, x, y) {
+        var shape = null;
+        for (var i = children.length - 1; i >= 0; i--) {
+            var child = children[i];
+            if (isAllowCapture(child)) {
+                if (child.isGroup()) {
+                    shape = child.getShape(x, y);
+                }
+                else if (child.isHit(x, y)) {
+                    shape = child;
+                }
+            }
+            if (shape) {
+                break;
+            }
+        }
+        return shape;
+    };
     Container.prototype.add = function (element) {
-        ContainerUtil.add(this, element);
+        var canvas = this.getCanvas();
+        var children = this.getChildren();
+        var timeline = this.get('timeline');
+        var preParent = element.getParent();
+        if (preParent) {
+            removeChild(preParent, element, false);
+        }
+        element.set('parent', this);
+        if (canvas) {
+            setCanvas(element, canvas);
+        }
+        if (timeline) {
+            setTimeline(element, timeline);
+        }
+        children.push(element);
         afterAdd(element);
@@ -167,3 +303,11 @@ this._applyElementMatrix(element);
     Container.prototype.sort = function () {
-        ContainerUtil.sort(this);
+        var children = this.getChildren();
+        // 稳定排序
+        each(children, function (child, index) {
+            child[INDEX] = index;
+            return child;
+        });
+        children.sort(getComparer(function (obj1, obj2) {
+            return obj1.get('zIndex') - obj2.get('zIndex');
+        }));
         this.onCanvasChange('sort');
@@ -173,3 +317,10 @@ };
         this.set('clearing', true);
-        ContainerUtil.clear(this);
+        if (this.destroyed) {
+            return;
+        }
+        var children = this.getChildren();
+        for (var i = children.length - 1; i >= 0; i--) {
+            children[i].destroy(); // 销毁子元素
+        }
+        this.set('children', []);
         this.onCanvasChange('clear');
@@ -176,0 +327,0 @@ this.set('clearing', false);

esm/abstract/element.js

@@ -58,3 +58,4 @@ import { __extends } from "tslib";
     each(animations, function (item) {
-        if (startTime > item.startTime && delay + duration < item.delay + item.duration) {
+        // 后一个动画开始执行的时间 < 前一个动画的结束时间 && 后一个动画的执行时间 > 前一个动画的延迟
+        if (startTime + delay < item.startTime + item.delay + item.duration && duration > item.delay) {
             each(animation.toAttrs, function (v, k) {
@@ -61,0 +62,0 @@ if (hasOwnProperty.call(item.toAttrs, k)) {

esm/index.d.ts

@@ -5,10 +5,8 @@ /**
  */
-import * as Interfaces from './interfaces';
-import * as Types from './types';
-declare const version: any;
-export { Interfaces, Types, version };
+export declare const version: any;
 export { default as BBox } from './bbox';
+export { default as Event } from './event/graph-event';
+export { default as Base } from './abstract/base';
 export { default as AbstractCanvas } from './abstract/canvas';
 export { default as AbstractGroup } from './abstract/group';
 export { default as AbstractShape } from './abstract/shape';
-export { default as Base } from './abstract/base';

esm/index.js

@@ -5,12 +5,10 @@ /**
  */
-import * as Interfaces from './interfaces';
-import * as Types from './types';
 var pkg = require('../package.json');
-var version = pkg.version;
-export { Interfaces, Types, version };
+export var version = pkg.version;
 export { default as BBox } from './bbox';
+export { default as Event } from './event/graph-event';
+export { default as Base } from './abstract/base';
 export { default as AbstractCanvas } from './abstract/canvas';
 export { default as AbstractGroup } from './abstract/group';
 export { default as AbstractShape } from './abstract/shape';
-export { default as Base } from './abstract/base';
 //# sourceMappingURL=index.js.map

esm/interfaces.d.ts

@@ -102,3 +102,3 @@ import { ShapeCfg, GroupCfg, ClipCfg, Point, ChangeType, AnimateCfg, ElementAttrs, OnFrame } from './types';
      */
-    remove(destroy: any): any;
+    remove(destroy?: boolean): any;
     /**
@@ -105,0 +105,0 @@ * 获取全量的图形属性

esm/types.d.ts

@@ -70,5 +70,5 @@ export declare type Point = {
      * 容器
-     * @type {string|HtmlElement}
+     * @type {string|HTMLElement}
      */
-    container: string;
+    container: string | HTMLElement;
     /**
@@ -75,0 +75,0 @@ * 画布宽度

lib/abstract/container.d.ts

@@ -16,3 +16,5 @@ import { IContainer, ICtor, IShape, IGroup, IElement } from '../interfaces';
     addGroup(...args: any[]): IGroup;
+    getCanvas(): any;
     getShape(x: number, y: number): IShape;
+    _findShape(children: IElement[], x: number, y: number): any;
     add(element: IElement): void;
@@ -19,0 +21,0 @@ _applyElementMatrix(element: any): void;

lib/abstract/container.js

@@ -6,4 +6,5 @@ "use strict";
 var element_1 = require("./element");
-var container_1 = require("../util/container");
 var util_1 = require("../util/util");
+var SHAPE_MAP = {};
+var INDEX = '_INDEX';
 function afterAdd(element) {
@@ -19,2 +20,59 @@ if (element.isGroup()) {
 }
+/**
+ * 设置 canvas
+ * @param {IElement} element 元素
+ * @param {ICanvas}  canvas  画布
+ */
+function setCanvas(element, canvas) {
+    element.set('canvas', canvas);
+    if (element.isGroup()) {
+        var children = element.get('children');
+        if (children.length) {
+            children.forEach(function (child) {
+                setCanvas(child, canvas);
+            });
+        }
+    }
+}
+/**
+ * 设置 timeline
+ * @param {IElement} element  元素
+ * @param {Timeline} timeline 时间轴
+ */
+function setTimeline(element, timeline) {
+    element.set('timeline', timeline);
+    if (element.isGroup()) {
+        var children = element.get('children');
+        if (children.length) {
+            children.forEach(function (child) {
+                setTimeline(child, timeline);
+            });
+        }
+    }
+}
+function contains(container, element) {
+    var children = container.getChildren();
+    return children.indexOf(element) >= 0;
+}
+function removeChild(container, element, destroy) {
+    if (destroy === void 0) { destroy = true; }
+    // 不再调用 element.remove() 方法，会出现循环调用
+    if (destroy) {
+        element.destroy();
+    }
+    else {
+        element.set('parent', null);
+        element.set('canvas', null);
+    }
+    util_1.removeFromArray(container.getChildren(), element);
+}
+function getComparer(compare) {
+    return function (left, right) {
+        var result = compare(left, right);
+        return result === 0 ? left[INDEX] - right[INDEX] : result;
+    };
+}
+function isAllowCapture(element) {
+    return element.get('visible') && element.get('capture');
+}
 var Container = /** @class */ (function (_super) {
@@ -130,6 +188,10 @@ tslib_1.__extends(Container, _super);
         }
-        var shape = container_1.default.addShape(this, cfg);
-        // 调用 shape 的变化事件，而不是 container 的
-        afterAdd(shape);
-        this._applyElementMatrix(shape);
+        var shapeType = SHAPE_MAP[cfg.type];
+        if (!shapeType) {
+            shapeType = util_1.upperFirst(cfg.type);
+            SHAPE_MAP[cfg.type] = shapeType;
+        }
+        var ShapeBase = this.getShapeBase();
+        var shape = new ShapeBase[shapeType](cfg);
+        this.add(shape);
         return shape;
@@ -143,13 +205,87 @@ };
         var groupClass = args[0], cfg = args[1];
-        var group = container_1.default.addGroup(this, groupClass, cfg);
-        // Group maybe a real element
-        afterAdd(group);
-        this._applyElementMatrix(group);
+        var group;
+        if (util_1.isFunction(groupClass)) {
+            if (cfg) {
+                group = new groupClass(cfg);
+            }
+            else {
+                group = new groupClass({
+                    // canvas,
+                    parent: this,
+                });
+            }
+        }
+        else {
+            var tmpCfg = groupClass || {};
+            var TmpGroupClass = this.getGroupBase();
+            group = new TmpGroupClass(tmpCfg);
+        }
+        this.add(group);
         return group;
     };
+    Container.prototype.getCanvas = function () {
+        var canvas;
+        if (this.isCanvas()) {
+            canvas = this;
+        }
+        else {
+            canvas = this.get('canvas');
+        }
+        return canvas;
+    };
     Container.prototype.getShape = function (x, y) {
-        return container_1.default.getShape(this, x, y);
+        // 如果不支持拾取，则直接返回
+        if (!isAllowCapture(this)) {
+            return null;
+        }
+        var children = this.getChildren();
+        var shape;
+        // 如果容器是 group
+        if (!this.isCanvas()) {
+            var v = [x, y, 1];
+            // 将 x, y 转换成对应于 group 的局部坐标
+            this.invertFromMatrix(v);
+            if (!this.isClipped(v[0], v[1])) {
+                shape = this._findShape(children, v[0], v[1]);
+            }
+        }
+        else {
+            shape = this._findShape(children, x, y);
+        }
+        return shape;
     };
+    Container.prototype._findShape = function (children, x, y) {
+        var shape = null;
+        for (var i = children.length - 1; i >= 0; i--) {
+            var child = children[i];
+            if (isAllowCapture(child)) {
+                if (child.isGroup()) {
+                    shape = child.getShape(x, y);
+                }
+                else if (child.isHit(x, y)) {
+                    shape = child;
+                }
+            }
+            if (shape) {
+                break;
+            }
+        }
+        return shape;
+    };
     Container.prototype.add = function (element) {
-        container_1.default.add(this, element);
+        var canvas = this.getCanvas();
+        var children = this.getChildren();
+        var timeline = this.get('timeline');
+        var preParent = element.getParent();
+        if (preParent) {
+            removeChild(preParent, element, false);
+        }
+        element.set('parent', this);
+        if (canvas) {
+            setCanvas(element, canvas);
+        }
+        if (timeline) {
+            setTimeline(element, timeline);
+        }
+        children.push(element);
         afterAdd(element);
@@ -170,3 +306,11 @@ this._applyElementMatrix(element);
     Container.prototype.sort = function () {
-        container_1.default.sort(this);
+        var children = this.getChildren();
+        // 稳定排序
+        util_1.each(children, function (child, index) {
+            child[INDEX] = index;
+            return child;
+        });
+        children.sort(getComparer(function (obj1, obj2) {
+            return obj1.get('zIndex') - obj2.get('zIndex');
+        }));
         this.onCanvasChange('sort');
@@ -176,3 +320,10 @@ };
         this.set('clearing', true);
-        container_1.default.clear(this);
+        if (this.destroyed) {
+            return;
+        }
+        var children = this.getChildren();
+        for (var i = children.length - 1; i >= 0; i--) {
+            children[i].destroy(); // 销毁子元素
+        }
+        this.set('children', []);
         this.onCanvasChange('clear');
@@ -179,0 +330,0 @@ this.set('clearing', false);

lib/abstract/element.js

@@ -60,3 +60,4 @@ "use strict";
     util_1.each(animations, function (item) {
-        if (startTime > item.startTime && delay + duration < item.delay + item.duration) {
+        // 后一个动画开始执行的时间 < 前一个动画的结束时间 && 后一个动画的执行时间 > 前一个动画的延迟
+        if (startTime + delay < item.startTime + item.delay + item.duration && duration > item.delay) {
             util_1.each(animation.toAttrs, function (v, k) {
@@ -63,0 +64,0 @@ if (hasOwnProperty.call(item.toAttrs, k)) {

lib/index.d.ts

@@ -5,10 +5,8 @@ /**
  */
-import * as Interfaces from './interfaces';
-import * as Types from './types';
-declare const version: any;
-export { Interfaces, Types, version };
+export declare const version: any;
 export { default as BBox } from './bbox';
+export { default as Event } from './event/graph-event';
+export { default as Base } from './abstract/base';
 export { default as AbstractCanvas } from './abstract/canvas';
 export { default as AbstractGroup } from './abstract/group';
 export { default as AbstractShape } from './abstract/shape';
-export { default as Base } from './abstract/base';

lib/index.js

@@ -7,11 +7,10 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var Interfaces = require("./interfaces");
-exports.Interfaces = Interfaces;
-var Types = require("./types");
-exports.Types = Types;
 var pkg = require('../package.json');
-var version = pkg.version;
-exports.version = version;
+exports.version = pkg.version;
 var bbox_1 = require("./bbox");
 exports.BBox = bbox_1.default;
+var graph_event_1 = require("./event/graph-event");
+exports.Event = graph_event_1.default;
+var base_1 = require("./abstract/base");
+exports.Base = base_1.default;
 var canvas_1 = require("./abstract/canvas");
@@ -23,4 +22,2 @@ exports.AbstractCanvas = canvas_1.default;
 exports.AbstractShape = shape_1.default;
-var base_1 = require("./abstract/base");
-exports.Base = base_1.default;
 //# sourceMappingURL=index.js.map

lib/interfaces.d.ts

@@ -102,3 +102,3 @@ import { ShapeCfg, GroupCfg, ClipCfg, Point, ChangeType, AnimateCfg, ElementAttrs, OnFrame } from './types';
      */
-    remove(destroy: any): any;
+    remove(destroy?: boolean): any;
     /**
@@ -105,0 +105,0 @@ * 获取全量的图形属性

lib/types.d.ts

@@ -70,5 +70,5 @@ export declare type Point = {
      * 容器
-     * @type {string|HtmlElement}
+     * @type {string|HTMLElement}
      */
-    container: string;
+    container: string | HTMLElement;
     /**
@@ -75,0 +75,0 @@ * 画布宽度

package.json

 {
   "name": "@antv/g-base",
-  "version": "0.1.0-beta.2",
+  "version": "0.1.0-beta.3",
   "description": "A common util collection for antv projects",
@@ -59,3 +59,3 @@ "main": "lib/index.js",
   "__npminstall_done": false,
-  "gitHead": "9dd7de0c2d2d3779413c0169c312c86775524a82"
+  "gitHead": "5d89418d9eb942862fb9582a325dd833f7054d84"
 }

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

Worsened metrics

Total package byte prevSize

538783

decreased by-1.7%

Number of package files

104

decreased by-5.45%

Lines of code

9373

decreased by-2.49%

No dependency changes