dcim-topology2d 2.0.7 → 3.0.2

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;
@@ -306,12 +310,18 @@ var ActiveLayer = /** @class */ (function (_super) {
                         }
                     }
                 }
+                if(item.name == 'arbitraryGraph') {
+                    for(let i = 0, circles = item.rect.circles; i<circles.length; i++) {
+                        circles[i].x = circles[i].x + offsetX;
+                        circles[i].y = circles[i].y + offsetY;
+                    }
+                }
             }
             if (item instanceof Line && item.from) {
                 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);
                     });
@@ -328,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;
@@ -355,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++) {
@@ -374,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;
@@ -383,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;
@@ -484,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;
         }
 
@@ -502,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;
@@ -522,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;
                     }
                 }
@@ -537,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);
                 }
             }
@@ -567,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;
         }
@@ -583,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];
@@ -600,7 +606,6 @@ var ActiveLayer = /** @class */ (function (_super) {
             }
         }
         ctx.restore();
-        globalStore = null;
     };
     ActiveLayer.prototype.getDockWatchers = function () {
         if (this.pens.length === 1) {
@@ -617,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:
 
@@ -629,7 +634,7 @@ var ActiveLayer = /** @class */ (function (_super) {
 
                 }
 
-                break;
+            break;
 
             case 1:
 
@@ -641,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:
 
@@ -665,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;

package/core/src/calling.js

@@ -1,30 +1,33 @@
 import {Store} from 'le5le-store';
+import {DefalutOptions} from './options';
 import {Offscreen} from './offscreen';
 import {RenderLayer} from './renderLayer';
-import {Node} from './models';
+import {Node, Point, TopologyData, Rect} from './models';
 import {s8, getRect, formatPadding} from './utils';
-import { useStore, clearStore } from './store'
 var Calling = (function () {
     function Calling(parent, options) {
         var _this = this;
+        this.data = new TopologyData();
         this.lastTranlated = {x: 0, y: 0};
         this.rendering = false;
         this.id = s8();
-        this.store = useStore(this.id);
+        Store.set(this.generateStoreKey('topology-data'), this.data);
         if (!options) {
             options = {};
         }
-        options.type = this.store.options.isFitview ? 'titLogo' : 'bottLogo';
-        Object.assign(this.store.options, options);
+        var font = Object.assign({}, DefalutOptions.font, options.font);
+        options.font = font;
+        this.options = Object.assign({}, DefalutOptions, options);
         if (typeof parent === 'string') {
-            this.store.parentElem = document.getElementById(parent);
+            this.parentElem = document.getElementById(parent);
         } else {
-            this.store.parentElem = parent;
+            this.parentElem = parent;
         }
-        this.store.parentElem.style.position = 'relative';
-        this.store.parentElem.style.overflow = 'auto';
-        this.offscreen = new Offscreen(this.id);
-        this.canvas = new RenderLayer(this.id);
+        this.parentElem.style.position = 'relative';
+        this.parentElem.style.overflow = 'auto';
+        var id = this.id;
+        this.offscreen = new Offscreen(this.parentElem, this.options, id);
+        this.canvas = new RenderLayer(this.parentElem, this.options, id);
         this.subcribeImage = Store.subscribe(this.generateStoreKey('LT:imageLoaded'), function () {
             if (_this.imageTimer) {
                 clearTimeout(_this.imageTimer);
@@ -65,55 +68,52 @@ var Calling = (function () {
             data = JSON.parse(data);
         }
         this.openCount = 0
-        this.store.data.scale = data.scale || 1;
-        this.store.data.pens = [];
+        this.data.scale = data.scale || 1;
+        this.data.pens = [];
         // for old data.
         if (data.nodes) {
             for (var _i = 0, _a = data.nodes; _i < _a.length; _i++) {
                 var item = _a[_i];
-                item.TID = this.id;
                 item.rect.x = 0;
                 item.rect.y = 0;
-                this.store.data.pens.push(new Node(item));
+                this.data.pens.push(new Node(item));
             }
             for (var _b = 0, _c = data.lines; _b < _c.length; _b++) {
                 var item = _c[_b];
-                item.TID = this.id;
-                this.store.data.pens.push(new Line(item));
+                this.data.pens.push(new Line(item));
             }
         }
         // end.
         if (data.pens) {
             for (var _d = 0, _e = data.pens; _d < _e.length; _d++) {
                 var item = _e[_d];
-                item.TID = this.id;
                 if (!item.from) {
-                    this.store.data.pens.push(new Node(item));
+                    this.data.pens.push(new Node(item));
                 } else {
-                    this.store.data.pens.push(new Line(item));
+                    this.data.pens.push(new Line(item));
                 }
             }
         }
-        this.store.data.bkImageRect = data.bkImageRect || null;
-        this.store.data.bkImage = data.bkImage || '';
-        this.store.data.mqttOptions = data.mqttOptions || {clientId: s8()};
-        this.store.data.mqttTopics = data.mqttTopics || '';
+        this.data.bkImageRect = data.bkImageRect || null;
+        this.data.bkImage = data.bkImage || '';
+        this.data.mqttOptions = data.mqttOptions || {clientId: s8()};
+        this.data.mqttTopics = data.mqttTopics || '';
         if (typeof data.data === 'object') {
-            this.store.data.data = data.data;
+            this.data.data = data.data;
         } else {
-            this.store.data.data = data.data || '';
+            this.data.data = data.data || '';
         }
-        this.store.parentElem.scrollLeft = 0;
-        this.store.parentElem.scrollTop = 0;
+        this.parentElem.scrollLeft = 0;
+        this.parentElem.scrollTop = 0;
         this.overflow();
         this.render(true);
     };
     Calling.prototype.overflow = function () {
-        this.store.options.isFitview ? this.fitView() : this.bottomView();
+        this.options.isFitview ? this.fitView() : this.bottomView();
     };
     Calling.prototype.getRect = function (pens) {
         if (!pens) {
-            pens = this.store.data.pens;
+            pens = this.data.pens;
         }
         return getRect(pens);
     };
@@ -124,7 +124,7 @@ var Calling = (function () {
         }
         var offsetX = x - this.lastTranlated.x;
         var offsetY = y - this.lastTranlated.y;
-        for (var _i = 0, _a = this.store.data.pens; _i < _a.length; _i++) {
+        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
             var item = _a[_i];
             item.translate(offsetX, offsetY);
         }
@@ -135,14 +135,13 @@ var Calling = (function () {
     //   > 1, expand
     //   < 1, reduce
     Calling.prototype.scale = function (scale, center, w, h) {
-        if (this.store.data.scale * scale < this.store.options.minScale ||
-                this.store.data.scale * scale > this.store.options.maxScale) {
+        if (this.data.scale * scale < this.options.minScale ||
+                this.data.scale * scale > this.options.maxScale) {
             return;
         }
-        this.store.data.scale *= scale;
+        this.data.scale *= scale;
         !center && (center = this.getRect().center);
-        center.type = this.store.options.type;
-        for (var _i = 0, _a = this.store.data.pens; _i < _a.length; _i++) {
+        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
             var item = _a[_i];
             item.scale(scale, center, w, h);
         }
@@ -151,7 +150,7 @@ var Calling = (function () {
         var rect = this.getRect();
         var viewCenter = this.getViewCenter(padding);
         var center = rect.center;
-        var parentElem = this.store.parentElem;
+        var parentElem = this.canvas.parentElem;
         var x = (parentElem.offsetWidth - rect.width) / 2;
         var y = parentElem.scrollHeight - rect.height;
         var w = parentElem.offsetWidth / rect.width;
@@ -161,7 +160,7 @@ var Calling = (function () {
             ratio = h;
         }
         this.canvas.canvas.style.transform = `translate(${x}px, ${y}px)`;
-        for (var _i = 0, _a = this.store.data.pens; _i < _a.length; _i++) {
+        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
             var item = _a[_i];
             if(item.rect.x > 0) {
                 item.rect.ex = item.rect.ex - item.rect.x;
@@ -182,7 +181,7 @@ var Calling = (function () {
         var viewCenter = this.getViewCenter(padding);
         var center = rect.center;
         this.translate(viewCenter.x - center.x, viewCenter.y - center.y);
-        var parentElem = this.store.parentElem;
+        var parentElem = this.canvas.parentElem;
         var x = (parentElem.scrollWidth - parentElem.offsetWidth) / 2;
         var y = (parentElem.scrollHeight - parentElem.offsetHeight) / 2;
         parentElem.scrollTo(x, y);
@@ -192,7 +191,7 @@ var Calling = (function () {
         if (!this.hasView())
             return;
         // 1. 重置画布尺寸为容器尺寸
-        var parentElem = this.store.parentElem;
+        var parentElem = this.canvas.parentElem;
         var width = parentElem.offsetWidth, height = parentElem.offsetHeight;
         this.resize({
             width: width,
@@ -201,7 +200,7 @@ var Calling = (function () {
         // 2. 图形居中
         this.centerView(viewPadding);
         // 3. 获取设置的留白值
-        var padding = formatPadding(viewPadding || this.store.options.viewPadding);
+        var padding = formatPadding(viewPadding || this.options.viewPadding);
         // 4. 获取图形尺寸
         var rect = this.getRect();
         // 6. 计算缩放比
@@ -218,7 +217,7 @@ var Calling = (function () {
         return !(rect.width === 99999 || rect.height === 99999);
     };
     Calling.prototype.getViewCenter = function (viewPadding) {
-        var padding = formatPadding(viewPadding || this.store.options.viewPadding);
+        var padding = formatPadding(viewPadding || this.options.viewPadding);
         var _a = this.canvas, width = _a.width, height = _a.height;
         return {
             x: (width - padding[1] - padding[3]) / 2 + padding[3],
@@ -229,7 +228,6 @@ var Calling = (function () {
         return this.id + "-" + key;
     };
     Calling.prototype.destroy = function () {
-        clearStore(this.store);
         this.subcribeImage.unsubscribe();
         this.canvas.destroy();
         //优化

package/core/src/canvas.d.ts

@@ -1,10 +1,15 @@
+import { TopologyData } from './models/data';
+import { Options } from './options';
 import { Layer } from './layer';
 export declare class Canvas extends Layer {
+    parentElem: HTMLElement;
+    options: Options;
     static dpiRatio: number;
+    protected data: TopologyData;
     canvas: HTMLCanvasElement;
     width: number;
     height: number;
-    constructor(TID: String);
+    constructor(parentElem: HTMLElement, options: Options, TID: String);
     resize(size?: {
         width: number;
         height: number;

package/core/src/canvas.js

@@ -13,51 +13,51 @@ var __extends = (this && this.__extends) || (function () {
 })();
 import { Store } from 'le5le-store';
 import { Layer } from './layer';
-import { commonStore } from './store'
 var Canvas = /** @class */ (function (_super) {
     __extends(Canvas, _super);
-    function Canvas(TID) {
+    function Canvas(parentElem, options, TID) {
+        if (options === void 0) { options = {}; }
         var _this = _super.call(this, TID) || this;
+        _this.parentElem = parentElem;
+        _this.options = options;
         _this.canvas = document.createElement('canvas');
-        _this.canvas.setAttribute('class', 'canvas-draw');
-        _this.width = commonStore[TID].parentElem.clientWidth;
-        _this.height = commonStore[TID].parentElem.clientHeight;
+        _this.width = parentElem.clientWidth;
+        _this.height = parentElem.clientHeight;
+        _this.data = Store.get(_this.generateStoreKey('topology-data'));
         _this.canvas.style.position = 'absolute';
         _this.canvas.style.left = '0';
         _this.canvas.style.top = '0';
         _this.canvas.style.outline = 'none';
         if (!Canvas.dpiRatio) {
-            if (!commonStore[TID].options.extDpiRatio && commonStore[TID].options.extDpiRatio !== 0) {
+            if (!options.extDpiRatio && options.extDpiRatio !== 0) {
                 if (window.devicePixelRatio > 1) {
-                    commonStore[TID].options.extDpiRatio = 0.25;
+                    options.extDpiRatio = 0.25;
                 }
                 else {
-                    commonStore[TID].options.extDpiRatio = 0;
+                    options.extDpiRatio = 0;
                 }
             }
-            Canvas.dpiRatio = window.devicePixelRatio + commonStore[TID].options.extDpiRatio;
+            Canvas.dpiRatio = window.devicePixelRatio + options.extDpiRatio;
         }
         return _this;
     }
     Canvas.prototype.resize = function (size) {
         if (size) {
-            this.width = size.width  | 0;
+            this.width = size.width | 0;
             this.height = size.height | 0;
         }
         else {
-            const TID = this.TID;
-            if(!commonStore[TID] || !commonStore[TID].options) return;
-            if (commonStore[TID].options.width && commonStore[TID].options.width !== 'auto') {
-                this.width = commonStore[TID].options.width;
+            if (this.options.width && this.options.width !== 'auto') {
+                this.width = this.options.width;
             }
             else {
-                this.width = commonStore[TID].parentElem.clientWidth;
+                this.width = this.parentElem.clientWidth;
             }
-            if (commonStore[TID].options.height && commonStore[TID].options.height !== 'auto') {
-                this.height = commonStore[TID].options.height;
+            if (this.options.height && this.options.height !== 'auto') {
+                this.height = this.options.height;
             }
             else {
-                this.height = commonStore[TID].parentElem.clientHeight;
+                this.height = this.parentElem.clientHeight;
             }
         }
         this.canvas.style.width = this.width + 'px';