dcim-topology2d 1.1.3 → 3.0.2

package/activity-diagram/src/final/final.d.ts

@@ -1,2 +1,2 @@
-import { Node } from '../../../core';
+import { Node } from 'dcim-topology/core';
 export declare function activityFinal(ctx: CanvasRenderingContext2D, node: Node): void;

package/activity-diagram/src/final/final.rect.d.ts

@@ -1,3 +1,3 @@
-import { Node } from '../../../core';
+import { Node } from 'dcim-topology/core';
 export declare function activityFinalIconRect(node: Node): void;
 export declare function activityFinalTextRect(node: Node): void;

package/activity-diagram/src/final/final.rect.js

@@ -1,4 +1,4 @@
-import { Rect } from '../../../core';
+import { Rect } from 'dcim-topology/core';
 export function activityFinalIconRect(node) {
     node.iconRect = new Rect(0, 0, 0, 0);
 }

package/activity-diagram/src/fork/fork.anchor.d.ts

@@ -1,3 +1,3 @@
-import { Node } from '../../../core';
+import { Node } from 'dcim-topology/core';
 export declare function forkHAnchors(node: Node): void;
 export declare function forkVAnchors(node: Node): void;

package/activity-diagram/src/fork/fork.anchor.js

@@ -1,4 +1,4 @@
-import { Point, Direction } from '../../../core';
+import { Point, Direction } from 'dcim-topology/core';
 export function forkHAnchors(node) {
     node.anchors.push(new Point(node.rect.x, node.rect.y + node.rect.height / 2, Direction.Left));
     node.anchors.push(new Point(node.rect.ex, node.rect.y + node.rect.height / 2, Direction.Right));

package/activity-diagram/src/fork/fork.d.ts

@@ -1,2 +1,2 @@
-import { Node } from '../../../core';
+import { Node } from 'dcim-topology/core';
 export declare function fork(ctx: CanvasRenderingContext2D, node: Node): void;

package/activity-diagram/src/fork/fork.rect.d.ts

@@ -1,3 +1,3 @@
-import { Node } from '../../../core';
+import { Node } from 'dcim-topology/core';
 export declare function forkIconRect(node: Node): void;
 export declare function forkTextRect(node: Node): void;

package/activity-diagram/src/fork/fork.rect.js

@@ -1,4 +1,4 @@
-import { Rect } from '../../../core';
+import { Rect } from 'dcim-topology/core';
 export function forkIconRect(node) {
     node.iconRect = new Rect(0, 0, 0, 0);
 }

package/activity-diagram/src/register.js

@@ -1,4 +1,4 @@
-import { registerNode } from '../../core';
+import { registerNode } from 'dcim-topology/core';
 import { activityFinal, activityFinalIconRect, activityFinalTextRect } from './final';
 import { fork, forkHAnchors, forkVAnchors, forkIconRect, forkTextRect } from './fork';
 import { swimlaneH, swimlaneHIconRect, swimlaneHTextRect } from './swimlaneH';

package/activity-diagram/src/swimlaneH/swimlaneH.d.ts

@@ -1,2 +1,2 @@
-import { Node } from '../../../core';
+import { Node } from 'dcim-topology/core';
 export declare function swimlaneH(ctx: CanvasRenderingContext2D, node: Node): void;

package/activity-diagram/src/swimlaneH/swimlaneH.rect.d.ts

@@ -1,3 +1,3 @@
-import { Node } from '../../../core';
+import { Node } from 'dcim-topology/core';
 export declare function swimlaneHIconRect(node: Node): void;
 export declare function swimlaneHTextRect(node: Node): void;

package/activity-diagram/src/swimlaneH/swimlaneH.rect.js

@@ -1,4 +1,4 @@
-import { Rect } from '../../../core';
+import { Rect } from 'dcim-topology/core';
 export function swimlaneHIconRect(node) {
     node.iconRect = new Rect(0, 0, 0, 0);
 }

package/activity-diagram/src/swimlaneV/swimlaneV.d.ts

@@ -1,2 +1,2 @@
-import { Node } from '../../../core';
+import { Node } from 'dcim-topology/core';
 export declare function swimlaneV(ctx: CanvasRenderingContext2D, node: Node): void;

package/activity-diagram/src/swimlaneV/swimlaneV.rect.d.ts

@@ -1,3 +1,3 @@
-import { Node } from '../../../core';
+import { Node } from 'dcim-topology/core';
 export declare function swimlaneVIconRect(node: Node): void;
 export declare function swimlaneVTextRect(node: Node): void;

package/activity-diagram/src/swimlaneV/swimlaneV.rect.js

@@ -1,4 +1,4 @@
-import { Rect } from '../../../core';
+import { Rect } from 'dcim-topology/core';
 export function swimlaneVIconRect(node) {
     node.iconRect = new Rect(0, 0, 0, 0);
 }

package/chart-diagram/src/echarts/index.d.ts

@@ -1,4 +1,4 @@
 // @ts-ignore
-import { Node } from '../../../core';
+import { Node } from 'dcim-topology/core';
 export declare const echartsData: any;
 export declare function echarts(ctx: CanvasRenderingContext2D, node: Node): void;

package/chart-diagram/src/echarts/index.js

@@ -1,4 +1,4 @@
-import { s8, createDiv, rectangle } from '../../../core';
+import { s8, createDiv, rectangle } from 'dcim-topology/core';
 export let echartsData = {};
 export function echarts(ctx, node) {
     //console.log('echarts绘制-----node', node);
@@ -62,12 +62,6 @@ export function echarts(ctx, node) {
                         return '';
                     }
                 }
-                if(option.series.length < 2) {
-                    option.tooltip.formatter = function(params) {
-                        const item = params[0];
-                        return item.name + ' : ' + item.value;
-                    }
-                }
                 // if(option.series.length >= 2) {
 
                 //     for(let i=0; i<option.series.length-1 ; i++){
@@ -78,14 +72,17 @@ export function echarts(ctx, node) {
                 option.yAxis[0].splitLine = node.appearance.splitLine;
 
             }else if(node.appearance.type === 'gauge') {
+                const pointerColor = node.appearance.pointerColor;
+                node.appearance.pointer.length = `${node.appearance.pointer.length}%`;
                 option.series[0].min = node.appearance.min;
                 option.series[0].max = node.appearance.max;
+                option.series[0].itemStyle.color = pointerColor ? pointerColor : node.appearance.axisLabel.color;
                 option.series[0].splitNumber = node.appearance.splitNumber;
                 option.series[0].pointer = node.appearance.pointer;
                 option.series[0].axisLabel = node.appearance.axisLabel;
                 option.series[0].axisLine.lineStyle = node.appearance.axisLine.lineStyle;
-                if(node.appearance.detail) option.series[0].detail = node.appearance.detail;
-                if(node.appearance.data) option.series[0].data = node.appearance.data;
+                option.series[0].detail = node.appearance.detail;
+                //option.series[0].data = node.appearance.data;
                 if(option.isGaugeLinear) {
                     option.series[0].axisLine.lineStyle.color = [
                         [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, option.linearColors)]
@@ -97,7 +94,7 @@ export function echarts(ctx, node) {
             }
             option.title = node.appearance.title;
             option.backgroundColor = node.appearance.backgroundColor;
-            if(window.location.pathname.includes('workspace')) echartsData[node.id].chart.clear();
+            echartsData[node.id].chart.clear();
             echartsData[node.id].chart.setOption(option);
             echartsData[node.id].chart.resize();
             node.elementRendered = true;

package/chart-diagram/src/register.js

@@ -1,4 +1,4 @@
-import { registerNode, loadJS } from '../../core';
+import { registerNode, loadJS } from 'dcim-topology/core';
 import { echarts, echartsData } from './echarts';
 import './echarts/echarts.min.js';
 export function register(_echarts) {

package/class-diagram/src/class/class.d.ts

@@ -1,3 +1,3 @@
-import { Node } from '../../../core';
+import { Node } from 'dcim-topology/core';
 export declare function simpleClass(ctx: CanvasRenderingContext2D, node: Node): void;
 export declare function interfaceClass(ctx: CanvasRenderingContext2D, node: Node): void;

package/class-diagram/src/class/class.rect.d.ts

@@ -1,4 +1,4 @@
-import { Node } from '../../../core';
+import { Node } from 'dcim-topology/core';
 export declare function simpleClassIconRect(node: Node): void;
 export declare function simpleClassTextRect(node: Node): void;
 export declare function interfaceClassIconRect(node: Node): void;

package/class-diagram/src/class/class.rect.js

@@ -1,4 +1,4 @@
-import { Rect } from '../../../core';
+import { Rect } from 'dcim-topology/core';
 export function simpleClassIconRect(node) {
     node.iconRect = new Rect(0, 0, 0, 0);
 }

package/class-diagram/src/register.js

@@ -1,4 +1,4 @@
-import { registerNode } from '../../core';
+import { registerNode } from 'dcim-topology/core';
 import { simpleClass, simpleClassIconRect, simpleClassTextRect, interfaceClass, interfaceClassIconRect, interfaceClassTextRect } from './class';
 export function register() {
     registerNode('simpleClass', simpleClass, null, simpleClassIconRect, simpleClassTextRect);

package/core/index.d.ts

@@ -6,4 +6,3 @@ export * from './src/utils';
 export * from './src/models';
 export * from './src/middles';
 export * from './src/healps';
-export * from './src/store';

package/core/index.js

@@ -6,7 +6,6 @@ export * from './src/utils';
 export * from './src/models';
 export * from './src/middles';
 export * from './src/healps';
-export * from './src/store';
 //# sourceMappingURL=index.js.map
 import axios from 'axios'
 if(axios.defaults.headers.common) axios.defaults.headers.common['Authorization'] = getToken();

package/core/src/activeLayer.d.ts

@@ -1,7 +1,15 @@
-import { Pen, Node, Line, Rect, Point } from './models';
+import { Options } from './options';
+import { Pen } from './models/pen';
+import { Node } from './models/node';
+import { Line } from './models/line';
+import { Rect } from './models/rect';
+import { Point } from './models/point';
+import { TopologyData } from './models/data';
 import { Layer } from './layer';
 import { Topology } from './core';
 export declare class ActiveLayer extends Layer {
+    options: Options;
+    protected data: TopologyData;
     rotateCPs: Point[];
     sizeCPs: Point[];
     rect: Rect;
@@ -18,7 +26,7 @@ export declare class ActiveLayer extends Layer {
     dockWatchers: Point[];
     topology: Topology;
     rotating: boolean;
-    constructor(TID: String);
+    constructor(options: Options, TID: String);
     calcControlPoints(): void;
     locked(): boolean;
     getPoints(): Point[];

package/core/src/activeLayer.js

@@ -1,8 +1,8 @@
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
-                ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-                function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
@@ -12,16 +12,22 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 import { Store } from 'le5le-store';
-import { PenType, Node, Line, Rect, Point, Lock } from './models';
+import { PenType } from './models/pen';
+import { Node } from './models/node';
+import { Line } from './models/line';
+import { Rect } from './models/rect';
+import { Point } from './models/point';
+import { Lock } from './models/status';
 import { drawLineFns } from './middles';
 import { getBezierPoint } from './middles/lines/curve';
 import { Layer } from './layer';
 import { flatNodes } from './utils';
-import { commonStore } from './store'
 var ActiveLayer = /** @class */ (function (_super) {
     __extends(ActiveLayer, _super);
-    function ActiveLayer(TID) {
+    function ActiveLayer(options, TID) {
+        if (options === void 0) { options = {}; }
         var _this = _super.call(this, TID) || this;
+        _this.options = options;
         _this.rotateCPs = [];
         _this.sizeCPs = [];
         _this.pens = [];
@@ -36,11 +42,11 @@ var ActiveLayer = /** @class */ (function (_super) {
         // nodes移动时，停靠点的参考位置
         _this.dockWatchers = [];
         _this.rotating = false;
+        _this.data = Store.get(_this.generateStoreKey('topology-data'));
         Store.set(_this.generateStoreKey('LT:ActiveLayer'), _this);
         return _this;
     }
     ActiveLayer.prototype.calcControlPoints = function () {
-        var globalStore = commonStore[this.TID];
         if (this.pens.length === 1 && this.pens[0] instanceof Node) {
             this.rect = this.pens[0].rect;
             this.sizeCPs = this.pens[0].rect.toPoints();
@@ -68,7 +74,7 @@ var ActiveLayer = /** @class */ (function (_super) {
                     }
                 }
             }
-            if (globalStore.options.hideRotateCP || this.pens[0].hideRotateCP) {
+            if (this.options.hideRotateCP || this.pens[0].hideRotateCP) {
                 this.rotateCPs = [new Point(-1000, -1000), new Point(-1000, -1000)];
             }
             return;
@@ -96,10 +102,9 @@ var ActiveLayer = /** @class */ (function (_super) {
         this.rect = new Rect(x1, y1, x2 - x1, y2 - y1);
         this.sizeCPs = [new Point(x1, y1), new Point(x2, y1), new Point(x2, y2), new Point(x1, y2)];
         this.rotateCPs = [new Point(x1 + (x2 - x1) / 2, y1 - 35), new Point(x1 + (x2 - x1) / 2, y1)];
-        if (globalStore.options.hideRotateCP) {
+        if (this.options.hideRotateCP) {
             this.rotateCPs = [new Point(-1000, -1000), new Point(-1000, -1000)];
         }
-        globalStore = null;
     };
     ActiveLayer.prototype.locked = function () {
         for (var _i = 0, _a = this.pens; _i < _a.length; _i++) {
@@ -187,10 +192,10 @@ var ActiveLayer = /** @class */ (function (_super) {
         }
         var offsetX = p2.x - p1.x;
         var offsetY = p2.y - p1.y;
-        if (commonStore[this.TID].options.onlySizeX) {
+        if (this.options.onlySizeX) {
             offsetY = 0;
         }
-        if (commonStore[this.TID].options.onlySizeY) {
+        if (this.options.onlySizeY) {
             offsetX = 0;
         }
         var lines = [];
@@ -278,7 +283,6 @@ var ActiveLayer = /** @class */ (function (_super) {
         if (this.nodeRects.length !== this.pens.length) {
             return;
         }
-        var globalStore = commonStore[this.TID];
         var i = 0;
         for (var _i = 0, _a = this.pens; _i < _a.length; _i++) {
             var item = _a[_i];
@@ -297,7 +301,7 @@ var ActiveLayer = /** @class */ (function (_super) {
                 item.calcChildrenRect();
                 if (item.parentId && !item.locked) {
                     var parent_1 = void 0;
-                    for (var _c = 0, _d = globalStore.data.pens; _c < _d.length; _c++) {
+                    for (var _c = 0, _d = this.data.pens; _c < _d.length; _c++) {
                         var n = _d[_c];
                         if (n.id === item.parentId) {
                             parent_1 = n;
@@ -317,7 +321,7 @@ var ActiveLayer = /** @class */ (function (_super) {
                 var offsetX_1 = this.nodeRects[i].x + x - item.from.x;
                 var offsetY_1 = this.nodeRects[i].y + y - item.from.y;
                 if (item.parentId) {
-                    var items = find(item.parentId, globalStore.data.pens);
+                    var items = find(item.parentId, this.data.pens);
                     items.forEach(function (l) {
                         l.translate(offsetX_1, offsetY_1);
                     });
@@ -334,7 +338,7 @@ var ActiveLayer = /** @class */ (function (_super) {
     ActiveLayer.prototype.getLinesOfNode = function (node) {
         var result = [];
         var nodesLines = flatNodes([node]);
-        for (var _i = 0, _a = commonStore[this.TID].data.pens; _i < _a.length; _i++) {
+        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
             var pen = _a[_i];
             if (!(pen instanceof Line)) {
                 continue;
@@ -361,10 +365,9 @@ var ActiveLayer = /** @class */ (function (_super) {
         if (!pens) {
             pens = this.pens;
         }
-        var globalStore = commonStore[this.TID];
         var nodesLines = flatNodes(pens);
         var lines = [];
-        nodesLines.lines.push.apply(nodesLines.lines, globalStore.data.pens.filter(function (pen) { return pen.type; }));
+        nodesLines.lines.push.apply(nodesLines.lines, this.data.pens.filter(function (pen) { return pen.type; }));
         for (var _i = 0, _a = nodesLines.lines; _i < _a.length; _i++) {
             var line = _a[_i];
             for (var _b = 0, _c = nodesLines.nodes; _b < _c.length; _b++) {
@@ -380,7 +383,7 @@ var ActiveLayer = /** @class */ (function (_super) {
                     line.to.y = item.rotatedAnchors[line.to.anchorIndex].y;
                     ++cnt;
                 }
-                if (cnt && !globalStore.data.manualCps) {
+                if (cnt && !this.data.manualCps) {
                     line.calcControlPoints();
                 }
                 line.textRect = null;
@@ -389,7 +392,6 @@ var ActiveLayer = /** @class */ (function (_super) {
             }
         }
         Store.set(this.generateStoreKey('LT:updateLines'), lines);
-        globalStore = null;
     };
     ActiveLayer.prototype.offsetRotate = function (angle) {
         this.rotating = true;
@@ -490,9 +492,7 @@ var ActiveLayer = /** @class */ (function (_super) {
     };
     ActiveLayer.prototype.render = function (ctx) {
         var _this = this;
-        if(!commonStore || !commonStore[_this.TID]) return;
-        var globalStore = commonStore[_this.TID];
-        if (globalStore.data.locked > Lock.Readonly) {
+        if (this.data.locked > Lock.Readonly) {
             return;
         }
 
@@ -508,7 +508,7 @@ var ActiveLayer = /** @class */ (function (_super) {
             this.calcControlPoints();
         }
         ctx.save();
-        ctx.strokeStyle = globalStore.options.activeColor;
+        ctx.strokeStyle = this.options.activeColor;
         ctx.fillStyle = '#fff';
         ctx.lineWidth = 1;
         var TID = this.TID;
@@ -528,7 +528,7 @@ var ActiveLayer = /** @class */ (function (_super) {
                         tmp.strokeStyle = '#ffffff';
                         tmp.lineWidth += 2;
                         tmp.render(ctx);
-                        tmp.strokeStyle = globalStore.options.activeColor;
+                        tmp.strokeStyle = this.options.activeColor;
                         tmp.lineWidth -= 2;
                     }
                 }
@@ -543,11 +543,11 @@ var ActiveLayer = /** @class */ (function (_super) {
                     bk.strokeStyle = '#ffffff';
                     bk.render(ctx);
                 }
-                tmp.strokeStyle = globalStore.options.activeColor;
-                tmp.fromArrowColor = globalStore.options.activeColor;
-                tmp.toArrowColor = globalStore.options.activeColor;
+                tmp.strokeStyle = this.options.activeColor;
+                tmp.fromArrowColor = this.options.activeColor;
+                tmp.toArrowColor = this.options.activeColor;
                 tmp.render(ctx);
-                if (!globalStore.data.locked && !item.locked) {
+                if (!this.data.locked && !item.locked) {
                     drawLineFns[item.name].drawControlPointsFn(ctx, item);
                 }
             }
@@ -573,7 +573,7 @@ var ActiveLayer = /** @class */ (function (_super) {
         ctx.closePath();
         ctx.stroke();
         ctx.restore();
-        if (globalStore.data.locked || this.locked()) {
+        if (this.data.locked || this.locked()) {
             ctx.restore();
             return;
         }
@@ -589,7 +589,7 @@ var ActiveLayer = /** @class */ (function (_super) {
         ctx.fill();
         ctx.stroke();
         // Draw size control points.绘制拖拽框四角的点
-        if (!globalStore.options.hideSizeCP && (this.pens.length > 1 || !this.pens[0].hideSizeCP)) {
+        if (!this.options.hideSizeCP && (this.pens.length > 1 || !this.pens[0].hideSizeCP)) {
             ctx.lineWidth = 1;
             for (var _b = 0, _c = this.sizeCPs; _b < _c.length; _b++) {
                 var item = _c[_b];
@@ -606,7 +606,6 @@ var ActiveLayer = /** @class */ (function (_super) {
             }
         }
         ctx.restore();
-        globalStore = null;
     };
     ActiveLayer.prototype.getDockWatchers = function () {
         if (this.pens.length === 1) {
@@ -623,7 +622,7 @@ var ActiveLayer = /** @class */ (function (_super) {
     ActiveLayer.prototype.handleArbitrayGraphSize = function (type,item, offsetX, offsetY, l, sizeX, sizeY, nodeRectsCircles) {
         if(item.name !== 'arbitraryGraph') return
 
-        switch (type) {
+       switch (type) {
 
             case 0:
 
@@ -635,7 +634,7 @@ var ActiveLayer = /** @class */ (function (_super) {
 
                 }
 
-                break;
+            break;
 
             case 1:
 
@@ -647,19 +646,19 @@ var ActiveLayer = /** @class */ (function (_super) {
 
                 }
 
-                break;
+            break;
 
             case 2:
 
-                for(let c=0, length = item.rect.circles.length; c<length; c++ ) {
-
-                    item.rect.circles[c].x=item.rect.circles[c].x*sizeX+item.rect.x*(1-sizeX);
+                    for(let c=0, length = item.rect.circles.length; c<length; c++ ) {
 
-                    item.rect.circles[c].y=item.rect.circles[c].y*sizeY+item.rect.y*(1-sizeY);
+                            item.rect.circles[c].x=item.rect.circles[c].x*sizeX+item.rect.x*(1-sizeX);
+                        
+                            item.rect.circles[c].y=item.rect.circles[c].y*sizeY+item.rect.y*(1-sizeY);
 
-                }
+                    }
 
-                break;
+            break;
 
             case 3:
 
@@ -671,10 +670,10 @@ var ActiveLayer = /** @class */ (function (_super) {
 
                 }
 
-                break
+            break
         }
     };
     return ActiveLayer;
 }(Layer));
 export { ActiveLayer };
-//# sourceMappingURL=activeLayer.js.map
+//# sourceMappingURL=activeLayer.js.map

package/core/src/animateLayer.d.ts

@@ -1,13 +1,17 @@
-import { Pen, Line } from './models';
+import { Pen } from './models/pen';
+import { Line } from './models/line';
+import { TopologyData } from './models/data';
+import { Options } from './options';
 import { Layer } from './layer';
 export declare class AnimateLayer extends Layer {
-    // @ts-ignore
+    options: Options;
+    protected data: TopologyData;
     pens: Map<any, any>;
     private timer;
     private lastNow;
     private subscribeUpdate;
     private subscribePlay;
-    constructor(TID: String);
+    constructor(options: Options, TID: String);
     getAnimateLine(item: Pen): Line;
     findLine(pen: Pen): Pen;
     readyPlay(tag?: string, auto?: boolean, pens?: Pen[]): void;

package/core/src/animateLayer.js

@@ -12,19 +12,23 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 import { Store } from 'le5le-store';
-import { PenType, Node, Line } from './models';
+import { PenType } from './models/pen';
+import { Node } from './models/node';
+import { Line } from './models/line';
 import { Layer } from './layer';
 import { s8 } from './utils';
-import { commonStore } from './store'
 var AnimateLayer = /** @class */ (function (_super) {
     __extends(AnimateLayer, _super);
-    function AnimateLayer(TID) {
+    function AnimateLayer(options, TID) {
+        if (options === void 0) { options = {}; }
         var _this = _super.call(this, TID) || this;
+        _this.options = options;
         _this.pens = new Map();
         _this.lastNow = 0;
+        _this.data = Store.get(_this.generateStoreKey('topology-data'));
         Store.set(_this.generateStoreKey('LT:AnimateLayer'), _this);
-        if (!commonStore[TID].options.animateColor) {
-            commonStore[TID].options.animateColor = '#ff6600';
+        if (!_this.options.animateColor) {
+            _this.options.animateColor = '#ff6600';
         }
         _this.subscribeUpdate = Store.subscribe(_this.generateStoreKey('LT:updateLines'), function (lines) {
             _this.updateLines(lines);
@@ -51,7 +55,7 @@ var AnimateLayer = /** @class */ (function (_super) {
         l.animateStart = item.animateStart;
         l.lineCap = 'round';
         l.fillStyle = '#fff';
-        l.strokeStyle = l.animateColor || commonStore[this.TID].options.animateColor;
+        l.strokeStyle = l.animateColor || this.options.animateColor;
         l.length = l.getLen();
         if (!l.fromArrowColor) {
             l.fromArrowColor = l.strokeStyle || '#222';
@@ -62,7 +66,7 @@ var AnimateLayer = /** @class */ (function (_super) {
         return l;
     };
     AnimateLayer.prototype.findLine = function (pen) {
-        for (var _i = 0, _a = commonStore[this.TID].data.pens; _i < _a.length; _i++) {
+        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
             var item = _a[_i];
             if (item.id === pen.data) {
                 return item;
@@ -71,13 +75,11 @@ var AnimateLayer = /** @class */ (function (_super) {
     };
     AnimateLayer.prototype.readyPlay = function (tag, auto, pens) {
         var _this = this;
-        if(!commonStore || !commonStore[_this.TID]) return;
         var readyPens = new Map();
         if (!pens) {
-            pens = commonStore[_this.TID].data.pens;
+            pens = this.data.pens;
         }
         pens.forEach(function (pen) {
-            if(!(pen instanceof Node)) pen = new Node(pen);
             pen.setTID(_this.TID);
             if (!pen.visible || readyPens.get(pen.id)) {
                 return;

package/core/src/calling.d.ts

@@ -2,9 +2,12 @@
 import {Options, Padding} from './options';
 import { Offscreen } from './offscreen';
 import { RenderLayer } from './renderLayer';
-import { Pen, Point, Rect } from './models';
+import { Pen, Node, Point, TopologyData, Rect } from './models';
 export declare class Calling {
     id: String;
+    data: TopologyData;
+    options: Options;
+    parentElem: HTMLElement;
     canvas: RenderLayer;
     offscreen: Offscreen;
     private subcribeImage;