dcim-topology2d 1.0.3 → 1.1.0

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

@@ -72,17 +72,14 @@ 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;
-                option.series[0].detail = node.appearance.detail;
-                //option.series[0].data = node.appearance.data;
+                if(node.appearance.detail) option.series[0].detail = node.appearance.detail;
+                if(node.appearance.data) 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)]
@@ -94,7 +91,7 @@ export function echarts(ctx, node) {
             }
             option.title = node.appearance.title;
             option.backgroundColor = node.appearance.backgroundColor;
-            echartsData[node.id].chart.clear();
+            if(window.location.pathname.includes('workspace')) echartsData[node.id].chart.clear();
             echartsData[node.id].chart.setOption(option);
             echartsData[node.id].chart.resize();
             node.elementRendered = true;

package/core/index.d.ts

@@ -6,3 +6,4 @@ 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,6 +6,7 @@ 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,15 +1,7 @@
-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 { Pen, Node, Line, Rect, Point } from './models';
 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;
@@ -26,7 +18,7 @@ export declare class ActiveLayer extends Layer {
     dockWatchers: Point[];
     topology: Topology;
     rotating: boolean;
-    constructor(options: Options, TID: String);
+    constructor(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,22 +12,16 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 import { Store } from 'le5le-store';
-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 { PenType, Node, Line, Rect, Point, Lock } from './models';
 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(options, TID) {
-        if (options === void 0) { options = {}; }
+    function ActiveLayer(TID) {
         var _this = _super.call(this, TID) || this;
-        _this.options = options;
         _this.rotateCPs = [];
         _this.sizeCPs = [];
         _this.pens = [];
@@ -42,11 +36,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();
@@ -74,7 +68,7 @@ var ActiveLayer = /** @class */ (function (_super) {
                     }
                 }
             }
-            if (this.options.hideRotateCP || this.pens[0].hideRotateCP) {
+            if (globalStore.options.hideRotateCP || this.pens[0].hideRotateCP) {
                 this.rotateCPs = [new Point(-1000, -1000), new Point(-1000, -1000)];
             }
             return;
@@ -102,9 +96,10 @@ 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 (this.options.hideRotateCP) {
+        if (globalStore.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++) {
@@ -192,10 +187,10 @@ var ActiveLayer = /** @class */ (function (_super) {
         }
         var offsetX = p2.x - p1.x;
         var offsetY = p2.y - p1.y;
-        if (this.options.onlySizeX) {
+        if (commonStore[this.TID].options.onlySizeX) {
             offsetY = 0;
         }
-        if (this.options.onlySizeY) {
+        if (commonStore[this.TID].options.onlySizeY) {
             offsetX = 0;
         }
         var lines = [];
@@ -283,6 +278,7 @@ 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];
@@ -301,7 +297,7 @@ var ActiveLayer = /** @class */ (function (_super) {
                 item.calcChildrenRect();
                 if (item.parentId && !item.locked) {
                     var parent_1 = void 0;
-                    for (var _c = 0, _d = this.data.pens; _c < _d.length; _c++) {
+                    for (var _c = 0, _d = globalStore.data.pens; _c < _d.length; _c++) {
                         var n = _d[_c];
                         if (n.id === item.parentId) {
                             parent_1 = n;
@@ -321,7 +317,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, this.data.pens);
+                    var items = find(item.parentId, globalStore.data.pens);
                     items.forEach(function (l) {
                         l.translate(offsetX_1, offsetY_1);
                     });
@@ -338,7 +334,7 @@ var ActiveLayer = /** @class */ (function (_super) {
     ActiveLayer.prototype.getLinesOfNode = function (node) {
         var result = [];
         var nodesLines = flatNodes([node]);
-        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
+        for (var _i = 0, _a = commonStore[this.TID].data.pens; _i < _a.length; _i++) {
             var pen = _a[_i];
             if (!(pen instanceof Line)) {
                 continue;
@@ -365,9 +361,10 @@ 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, this.data.pens.filter(function (pen) { return pen.type; }));
+        nodesLines.lines.push.apply(nodesLines.lines, globalStore.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++) {
@@ -383,7 +380,7 @@ var ActiveLayer = /** @class */ (function (_super) {
                     line.to.y = item.rotatedAnchors[line.to.anchorIndex].y;
                     ++cnt;
                 }
-                if (cnt && !this.data.manualCps) {
+                if (cnt && !globalStore.data.manualCps) {
                     line.calcControlPoints();
                 }
                 line.textRect = null;
@@ -392,6 +389,7 @@ var ActiveLayer = /** @class */ (function (_super) {
             }
         }
         Store.set(this.generateStoreKey('LT:updateLines'), lines);
+        globalStore = null;
     };
     ActiveLayer.prototype.offsetRotate = function (angle) {
         this.rotating = true;
@@ -492,7 +490,9 @@ var ActiveLayer = /** @class */ (function (_super) {
     };
     ActiveLayer.prototype.render = function (ctx) {
         var _this = this;
-        if (this.data.locked > Lock.Readonly) {
+        if(!commonStore || !commonStore[_this.TID]) return;
+        var globalStore = commonStore[_this.TID];
+        if (globalStore.data.locked > Lock.Readonly) {
             return;
         }
 
@@ -508,7 +508,7 @@ var ActiveLayer = /** @class */ (function (_super) {
             this.calcControlPoints();
         }
         ctx.save();
-        ctx.strokeStyle = this.options.activeColor;
+        ctx.strokeStyle = globalStore.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 = this.options.activeColor;
+                        tmp.strokeStyle = globalStore.options.activeColor;
                         tmp.lineWidth -= 2;
                     }
                 }
@@ -543,11 +543,11 @@ var ActiveLayer = /** @class */ (function (_super) {
                     bk.strokeStyle = '#ffffff';
                     bk.render(ctx);
                 }
-                tmp.strokeStyle = this.options.activeColor;
-                tmp.fromArrowColor = this.options.activeColor;
-                tmp.toArrowColor = this.options.activeColor;
+                tmp.strokeStyle = globalStore.options.activeColor;
+                tmp.fromArrowColor = globalStore.options.activeColor;
+                tmp.toArrowColor = globalStore.options.activeColor;
                 tmp.render(ctx);
-                if (!this.data.locked && !item.locked) {
+                if (!globalStore.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 (this.data.locked || this.locked()) {
+        if (globalStore.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 (!this.options.hideSizeCP && (this.pens.length > 1 || !this.pens[0].hideSizeCP)) {
+        if (!globalStore.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,6 +606,7 @@ var ActiveLayer = /** @class */ (function (_super) {
             }
         }
         ctx.restore();
+        globalStore = null;
     };
     ActiveLayer.prototype.getDockWatchers = function () {
         if (this.pens.length === 1) {
@@ -622,7 +623,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:
 
@@ -634,7 +635,7 @@ var ActiveLayer = /** @class */ (function (_super) {
 
                 }
 
-            break;
+                break;
 
             case 1:
 
@@ -646,19 +647,19 @@ var ActiveLayer = /** @class */ (function (_super) {
 
                 }
 
-            break;
+                break;
 
             case 2:
 
-                    for(let c=0, length = item.rect.circles.length; c<length; c++ ) {
+                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);
 
-                            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);
+                    item.rect.circles[c].y=item.rect.circles[c].y*sizeY+item.rect.y*(1-sizeY);
 
-                    }
+                }
 
-            break;
+                break;
 
             case 3:
 
@@ -670,10 +671,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,17 +1,13 @@
-import { Pen } from './models/pen';
-import { Line } from './models/line';
-import { TopologyData } from './models/data';
-import { Options } from './options';
+import { Pen, Line } from './models';
 import { Layer } from './layer';
 export declare class AnimateLayer extends Layer {
-    options: Options;
-    protected data: TopologyData;
+    // @ts-ignore
     pens: Map<any, any>;
     private timer;
     private lastNow;
     private subscribeUpdate;
     private subscribePlay;
-    constructor(options: Options, TID: String);
+    constructor(TID: String);
     getAnimateLine(item: Pen): Line;
     findLine(pen: Pen): Pen;
     readyPlay(tag?: string, auto?: boolean, pens?: Pen[]): void;

package/core/src/animateLayer.js

@@ -12,23 +12,19 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 import { Store } from 'le5le-store';
-import { PenType } from './models/pen';
-import { Node } from './models/node';
-import { Line } from './models/line';
+import { PenType, Node, Line } from './models';
 import { Layer } from './layer';
 import { s8 } from './utils';
+import { commonStore } from './store'
 var AnimateLayer = /** @class */ (function (_super) {
     __extends(AnimateLayer, _super);
-    function AnimateLayer(options, TID) {
-        if (options === void 0) { options = {}; }
+    function AnimateLayer(TID) {
         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 (!_this.options.animateColor) {
-            _this.options.animateColor = '#ff6600';
+        if (!commonStore[TID].options.animateColor) {
+            commonStore[TID].options.animateColor = '#ff6600';
         }
         _this.subscribeUpdate = Store.subscribe(_this.generateStoreKey('LT:updateLines'), function (lines) {
             _this.updateLines(lines);
@@ -55,7 +51,7 @@ var AnimateLayer = /** @class */ (function (_super) {
         l.animateStart = item.animateStart;
         l.lineCap = 'round';
         l.fillStyle = '#fff';
-        l.strokeStyle = l.animateColor || this.options.animateColor;
+        l.strokeStyle = l.animateColor || commonStore[this.TID].options.animateColor;
         l.length = l.getLen();
         if (!l.fromArrowColor) {
             l.fromArrowColor = l.strokeStyle || '#222';
@@ -66,7 +62,7 @@ var AnimateLayer = /** @class */ (function (_super) {
         return l;
     };
     AnimateLayer.prototype.findLine = function (pen) {
-        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
+        for (var _i = 0, _a = commonStore[this.TID].data.pens; _i < _a.length; _i++) {
             var item = _a[_i];
             if (item.id === pen.data) {
                 return item;
@@ -75,11 +71,13 @@ 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 = this.data.pens;
+            pens = commonStore[_this.TID].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,12 +2,9 @@
 import {Options, Padding} from './options';
 import { Offscreen } from './offscreen';
 import { RenderLayer } from './renderLayer';
-import { Pen, Node, Point, TopologyData, Rect } from './models';
+import { Pen, Point, 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,33 +1,29 @@
 import {Store} from 'le5le-store';
-import {DefalutOptions} from './options';
 import {Offscreen} from './offscreen';
 import {RenderLayer} from './renderLayer';
-import {Node, Point, TopologyData, Rect} from './models';
+import {Node} 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();
-        Store.set(this.generateStoreKey('topology-data'), this.data);
+        this.store = useStore(this.id);
         if (!options) {
             options = {};
         }
-        var font = Object.assign({}, DefalutOptions.font, options.font);
-        options.font = font;
-        this.options = Object.assign({}, DefalutOptions, options);
+        Object.assign(this.store.options, options);
         if (typeof parent === 'string') {
-            this.parentElem = document.getElementById(parent);
+            this.store.parentElem = document.getElementById(parent);
         } else {
-            this.parentElem = parent;
+            this.store.parentElem = parent;
         }
-        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.store.parentElem.style.position = 'relative';
+        this.store.parentElem.style.overflow = 'auto';
+        this.offscreen = new Offscreen(this.id);
+        this.canvas = new RenderLayer(this.id);
         this.subcribeImage = Store.subscribe(this.generateStoreKey('LT:imageLoaded'), function () {
             if (_this.imageTimer) {
                 clearTimeout(_this.imageTimer);
@@ -68,19 +64,19 @@ var Calling = (function () {
             data = JSON.parse(data);
         }
         this.openCount = 0
-        this.data.scale = data.scale || 1;
-        this.data.pens = [];
+        this.store.data.scale = data.scale || 1;
+        this.store.data.pens = [];
         // for old data.
         if (data.nodes) {
             for (var _i = 0, _a = data.nodes; _i < _a.length; _i++) {
                 var item = _a[_i];
                 item.rect.x = 0;
                 item.rect.y = 0;
-                this.data.pens.push(new Node(item));
+                this.store.data.pens.push(new Node(item));
             }
             for (var _b = 0, _c = data.lines; _b < _c.length; _b++) {
                 var item = _c[_b];
-                this.data.pens.push(new Line(item));
+                this.store.data.pens.push(new Line(item));
             }
         }
         // end.
@@ -88,32 +84,32 @@ var Calling = (function () {
             for (var _d = 0, _e = data.pens; _d < _e.length; _d++) {
                 var item = _e[_d];
                 if (!item.from) {
-                    this.data.pens.push(new Node(item));
+                    this.store.data.pens.push(new Node(item));
                 } else {
-                    this.data.pens.push(new Line(item));
+                    this.store.data.pens.push(new Line(item));
                 }
             }
         }
-        this.data.bkImageRect = data.bkImageRect || null;
-        this.data.bkImage = data.bkImage || '';
-        this.data.mqttOptions = data.mqttOptions || {clientId: s8()};
-        this.data.mqttTopics = data.mqttTopics || '';
+        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 || '';
         if (typeof data.data === 'object') {
-            this.data.data = data.data;
+            this.store.data.data = data.data;
         } else {
-            this.data.data = data.data || '';
+            this.store.data.data = data.data || '';
         }
-        this.parentElem.scrollLeft = 0;
-        this.parentElem.scrollTop = 0;
+        this.store.parentElem.scrollLeft = 0;
+        this.store.parentElem.scrollTop = 0;
         this.overflow();
         this.render(true);
     };
     Calling.prototype.overflow = function () {
-        this.options.isFitview ? this.fitView() : this.bottomView();
+        this.store.options.isFitview ? this.fitView() : this.bottomView();
     };
     Calling.prototype.getRect = function (pens) {
         if (!pens) {
-            pens = this.data.pens;
+            pens = this.store.data.pens;
         }
         return getRect(pens);
     };
@@ -124,7 +120,7 @@ var Calling = (function () {
         }
         var offsetX = x - this.lastTranlated.x;
         var offsetY = y - this.lastTranlated.y;
-        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
+        for (var _i = 0, _a = this.store.data.pens; _i < _a.length; _i++) {
             var item = _a[_i];
             item.translate(offsetX, offsetY);
         }
@@ -135,13 +131,13 @@ var Calling = (function () {
     //   > 1, expand
     //   < 1, reduce
     Calling.prototype.scale = function (scale, center, w, h) {
-        if (this.data.scale * scale < this.options.minScale ||
-                this.data.scale * scale > this.options.maxScale) {
+        if (this.store.data.scale * scale < this.store.options.minScale ||
+                this.store.data.scale * scale > this.store.options.maxScale) {
             return;
         }
-        this.data.scale *= scale;
+        this.store.data.scale *= scale;
         !center && (center = this.getRect().center);
-        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
+        for (var _i = 0, _a = this.store.data.pens; _i < _a.length; _i++) {
             var item = _a[_i];
             item.scale(scale, center, w, h);
         }
@@ -150,7 +146,7 @@ var Calling = (function () {
         var rect = this.getRect();
         var viewCenter = this.getViewCenter(padding);
         var center = rect.center;
-        var parentElem = this.canvas.parentElem;
+        var parentElem = this.store.parentElem;
         var x = (parentElem.offsetWidth - rect.width) / 2;
         var y = parentElem.scrollHeight - rect.height;
         var w = parentElem.offsetWidth / rect.width;
@@ -160,7 +156,7 @@ var Calling = (function () {
             ratio = h;
         }
         this.canvas.canvas.style.transform = `translate(${x}px, ${y}px)`;
-        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
+        for (var _i = 0, _a = this.store.data.pens; _i < _a.length; _i++) {
             var item = _a[_i];
             if(item.rect.x > 0) {
                 item.rect.ex = item.rect.ex - item.rect.x;
@@ -181,7 +177,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.canvas.parentElem;
+        var parentElem = this.store.parentElem;
         var x = (parentElem.scrollWidth - parentElem.offsetWidth) / 2;
         var y = (parentElem.scrollHeight - parentElem.offsetHeight) / 2;
         parentElem.scrollTo(x, y);
@@ -191,7 +187,7 @@ var Calling = (function () {
         if (!this.hasView())
             return;
         // 1. 重置画布尺寸为容器尺寸
-        var parentElem = this.canvas.parentElem;
+        var parentElem = this.store.parentElem;
         var width = parentElem.offsetWidth, height = parentElem.offsetHeight;
         this.resize({
             width: width,
@@ -200,7 +196,7 @@ var Calling = (function () {
         // 2. 图形居中
         this.centerView(viewPadding);
         // 3. 获取设置的留白值
-        var padding = formatPadding(viewPadding || this.options.viewPadding);
+        var padding = formatPadding(viewPadding || this.store.options.viewPadding);
         // 4. 获取图形尺寸
         var rect = this.getRect();
         // 6. 计算缩放比
@@ -217,7 +213,7 @@ var Calling = (function () {
         return !(rect.width === 99999 || rect.height === 99999);
     };
     Calling.prototype.getViewCenter = function (viewPadding) {
-        var padding = formatPadding(viewPadding || this.options.viewPadding);
+        var padding = formatPadding(viewPadding || this.store.options.viewPadding);
         var _a = this.canvas, width = _a.width, height = _a.height;
         return {
             x: (width - padding[1] - padding[3]) / 2 + padding[3],
@@ -228,6 +224,7 @@ 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,15 +1,10 @@
-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(parentElem: HTMLElement, options: Options, TID: String);
+    constructor(TID: String);
     resize(size?: {
         width: number;
         height: number;