dcim-topology2d 1.0.3 → 1.1.0

package/core/src/divLayer.d.ts

@@ -1,11 +1,6 @@
-import { Options } from './options';
-import { Node } from './models/node';
-import { TopologyData } from './models/data';
+import { Node } from './models';
 import { Layer } from './layer';
 export declare class DivLayer extends Layer {
-    parentElem: HTMLElement;
-    options: Options;
-    protected data: TopologyData;
     canvas: HTMLDivElement;
     player: HTMLDivElement;
     curNode: Node;
@@ -40,7 +35,7 @@ export declare class DivLayer extends Layer {
     };
     private subcribe;
     private subcribeNode;
-    constructor(parentElem: HTMLElement, options: Options, TID: String);
+    constructor(TID: String);
     addDiv: (node: Node) => void;
     createPlayer(): void;
     getMediaCurrent(): void;

package/core/src/divLayer.js

@@ -25,16 +25,12 @@ import {Lock} from './models/status';
 import {PenType} from './models/pen';
 import {Layer} from './layer';
 import { setStyleForElementIdDiv, DomElements } from './utils'
+import { commonStore } from './store'
 var DivLayer = /** @class */ (function (_super) {
     __extends(DivLayer, _super);
 
-    function DivLayer(parentElem, options, TID) {
-        if (options === void 0) {
-            options = {};
-        }
+    function DivLayer(TID) {
         var _this = _super.call(this, TID) || this;
-        _this.parentElem = parentElem;
-        _this.options = options;
         _this.canvas = document.createElement('div');
         // _this.player = document.createElement('div');
         // _this.videos = {};
@@ -95,7 +91,6 @@ var DivLayer = /** @class */ (function (_super) {
                 }
             }
         };
-        _this.data = Store.get(_this.generateStoreKey('topology-data'));
         // if (!_this.options.playIcon) {
         //     _this.options.playIcon = 'iconfont icon-play';
         // }
@@ -114,7 +109,7 @@ var DivLayer = /** @class */ (function (_super) {
         _this.canvas.style.outline = 'none';
         _this.canvas.style.background = 'transparent';
         _this.canvas.setAttribute('class', 'canvas-point');
-        parentElem.appendChild(_this.canvas);
+        commonStore[TID].parentElem.appendChild(_this.canvas);
         // parentElem.appendChild(_this.player);
         //_this.createPlayer();
         _this.subcribe = Store.subscribe(_this.generateStoreKey('LT:addDiv'), _this.addDiv);
@@ -164,6 +159,7 @@ var DivLayer = /** @class */ (function (_super) {
 
     DivLayer.prototype.createPlayer = function () {
         var _this = this;
+        let options = commonStore[_this.TID].options;
         this.player.style.position = 'fixed';
         this.player.style.outline = 'none';
         this.player.style.top = '-99999px';
@@ -181,7 +177,7 @@ var DivLayer = /** @class */ (function (_super) {
         this.progressCurrent = document.createElement('div');
         this.loop = document.createElement('i');
         var fullScreen = document.createElement('i');
-        this.playBtn.className = this.options.playIcon;
+        this.playBtn.className = options.playIcon;
         this.playBtn.style.fontSize = '18px';
         this.playBtn.style.lineHeight = '20px';
         this.playBtn.style.cursor = 'pointer';
@@ -204,11 +200,11 @@ var DivLayer = /** @class */ (function (_super) {
         this.loop.style.margin = '0 10px';
         this.loop.style.padding = '2px 5px';
         this.loop.style.borderRadius = '2px';
-        this.loop.className = this.options.loopIcon;
+        this.loop.className = options.loopIcon;
         this.loop.style.fontSize = '18px';
         this.loop.style.lineHeight = '20px';
         this.loop.style.cursor = 'pointer';
-        fullScreen.className = this.options.fullScreenIcon;
+        fullScreen.className = options.fullScreenIcon;
         fullScreen.style.fontSize = '17px';
         fullScreen.style.lineHeight = '20px';
         fullScreen.style.cursor = 'pointer';
@@ -221,10 +217,10 @@ var DivLayer = /** @class */ (function (_super) {
         this.playBtn.onclick = function () {
             if (_this.media.paused) {
                 _this.media.play();
-                _this.playBtn.className = _this.options.pauseIcon;
+                _this.playBtn.className = options.pauseIcon;
             } else {
                 _this.media.pause();
-                _this.playBtn.className = _this.options.playIcon;
+                _this.playBtn.className = options.playIcon;
             }
         };
         this.progress.onclick = function (e) {
@@ -242,6 +238,7 @@ var DivLayer = /** @class */ (function (_super) {
         fullScreen.onclick = function () {
             _this.media.requestFullscreen();
         };
+        options = null;
     };
     DivLayer.prototype.getMediaCurrent = function () {
         if (!this.media) {
@@ -294,7 +291,7 @@ var DivLayer = /** @class */ (function (_super) {
         media.onended = function () {
             Store.set(_this.generateStoreKey('mediaEnd'), node);
             if (_this.media === media) {
-                _this.playBtn.className = _this.options.playIcon;
+                _this.playBtn.className = commonStore[_this.TID].options.playIcon;
             }
             _this.playNext(node.nextPlay);
         };
@@ -316,7 +313,7 @@ var DivLayer = /** @class */ (function (_super) {
         if (!next) {
             return;
         }
-        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 instanceof Node)) {
                 continue;
@@ -345,7 +342,7 @@ var DivLayer = /** @class */ (function (_super) {
         return node.img;
     };
     DivLayer.prototype.setElemPosition = function (node, elem) {
-      setStyleForElementIdDiv(node, elem, this.data);
+      setStyleForElementIdDiv(node, elem, commonStore[this.TID].data);
     };
     DivLayer.prototype.removeDiv = function (item) {
         if (this.curNode && item.id === this.curNode.id) {
@@ -416,25 +413,30 @@ var DivLayer = /** @class */ (function (_super) {
         return txt;
     };
     DivLayer.prototype.resize = function (size) {
+        let store = commonStore[this.TID];
+        if(!store || !store.options) return;
         if (size) {
             this.canvas.style.width = size.width + 'px';
             this.canvas.style.height = size.height + 'px';
         } else {
-            if (this.options.width && this.options.width !== 'auto') {
-                this.canvas.style.width = this.options.width + 'px';
+            if (store.options.width && store.options.width !== 'auto') {
+                this.canvas.style.width = store.options.width + 'px';
             } else {
-                this.canvas.style.width = this.parentElem.clientWidth + 'px';
+                this.canvas.style.width = store.parentElem.clientWidth + 'px';
             }
-            if (this.options.height && this.options.height !== 'auto') {
-                this.canvas.style.height = this.options.height + 'px';
+            if (store.options.height && store.options.height !== 'auto') {
+                this.canvas.style.height = store.options.height + 'px';
             } else {
-                this.canvas.style.height = this.parentElem.clientHeight - 8 + 'px';
+                this.canvas.style.height = store.parentElem.clientHeight - 8 + 'px';
             }
         }
+        store = null;
     };
     DivLayer.prototype.render = function () {
-        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
+        if(commonStore[this.TID] || !commonStore[this.TID].data) return;
+        for (var _i = 0, _a = commonStore[this.TID].data.pens; _i < _a.length; _i++) {
             var item = _a[_i];
+            if(!(item instanceof Node)) item = new Node(item);
             if (!item.getTID()) {
                 item.setTID(this.TID);
             }
@@ -457,8 +459,6 @@ var DivLayer = /** @class */ (function (_super) {
         this.canvas.ondragover = null;
         this.canvas.ondrop = null;
         this.canvas.onwheel = null;
-
-        this.data = null;
         //end
     };
 

package/core/src/healps/changeData.js

@@ -137,7 +137,23 @@ export function setStatisticalData(pen, echartData) {
             }
         }
     }
-    if (displayMode === 5 && chartData){ // 饼图
+    if(displayMode === 4 && chartData) { // 电量图
+        const staticForType = node.data.params.staticForType ? node.data.params.staticForType : '';//统计类型：日，周，月，年
+        const chartOptions = staticForType ? chartData[`${staticForType}_Data`] : chartData;
+        node.data.echarts.option.yAxis[0].data = chartOptions.XData;
+        node.data.echarts.option.yAxis[1].data = chartOptions.seriesData;
+        node.data.echarts.option.series[0].data = chartOptions.seriesData;
+        if(!chartOptions.seriesData.length) {
+            node.data.echarts.option.series[1].data = [];
+        }else {
+            let barData = [];
+            for (let sd = 0; sd < chartOptions.seriesData.length; sd++) {
+                barData.push(100);
+            }
+            node.data.echarts.option.series[1].data = barData;
+        }
+    }
+    if (displayMode === 5 && chartData && Array.isArray(chartData)){ // 饼图
         const colors = node.data.echarts.option.color;
         const seriesData = [];
         chartData.map((chd, index) => {
@@ -150,8 +166,9 @@ export function setStatisticalData(pen, echartData) {
         node.data.echarts.option.series[0].data = seriesData;
     }
     if(displayMode === 6 && chartData){ // 仪表盘
-        node.appearance.title.text = chartData.name;
-        node.data.echarts.option.title.text = chartData.name;
+        // 仪表盘分两种，分别有不同的取值方式，下面两行先注释掉
+        // node.appearance.title.text = chartData.name;
+        // node.data.echarts.option.title.text = chartData.name;
         node.data.echarts.option.series[0].data[0].value = chartData.value;
     }
     return node.data.echarts;

package/core/src/hoverLayer.d.ts

@@ -1,13 +1,6 @@
-import { TopologyData } from './models/data';
-import { Rect } from './models/rect';
-import { Point } from './models/point';
-import { Line } from './models/line';
-import { Node } from './models/node';
-import { Options } from './options';
+import { Rect, Point, Line, Node } from './models';
 import { Layer } from './layer';
 export declare class HoverLayer extends Layer {
-    options: Options;
-    protected data: TopologyData;
     line: Line;
     initLine: Line;
     node: Node;
@@ -19,7 +12,7 @@ export declare class HoverLayer extends Layer {
     dockLineY: number;
     root: Node;
     dragRect: Rect;
-    constructor(options: Options, TID: String);
+    constructor(TID: String);
     lineTo(to: Point, toArrow?: string): void;
     lineFrom(from: Point): void;
     lineMove(pt: Point, initPos: {

package/core/src/hoverLayer.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) {
@@ -11,22 +11,17 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-import { Point } from './models/point';
-import { Node } from './models/node';
-import { PenType } from './models/pen';
+import { Point, Node, PenType, Lock } from './models';
 import { Store } from 'le5le-store';
-import { Lock } from './models/status';
 import { Layer } from './layer';
+import { commonStore } from './store'
 var HoverLayer = /** @class */ (function (_super) {
     __extends(HoverLayer, _super);
-    function HoverLayer(options, TID) {
-        if (options === void 0) { options = {}; }
+    function HoverLayer(TID) {
         var _this = _super.call(this, TID) || this;
-        _this.options = options;
         _this.hoverAnchorIndex = -1;
         _this.dockLineX = 0;
         _this.dockLineY = 0;
-        _this.data = Store.get(_this.generateStoreKey('topology-data'));
         Store.set(_this.generateStoreKey('LT:HoverLayer'), _this);
         return _this;
     }
@@ -70,14 +65,16 @@ var HoverLayer = /** @class */ (function (_super) {
     };
     HoverLayer.prototype.render = function (ctx) {
         var _this = this;
-        if (this.data.locked === Lock.NoEvent) {
+        if(!commonStore || !commonStore[_this.TID]) return;
+        var globalStore = commonStore[_this.TID];
+        if (globalStore.data.locked === Lock.NoEvent) {
             return;
         }
-        ctx.fillStyle = this.options.hoverColor;
+        ctx.fillStyle = globalStore.options.hoverColor;
         ctx.save();
         // anchors
-        if (this.options.alwaysAnchor) {
-            this.data.pens.forEach(function (pen) {
+        if (globalStore.options.alwaysAnchor) {
+            globalStore.data.pens.forEach(function (pen) {
                 if (pen.type === PenType.Line) {
                     return;
                 }
@@ -90,23 +87,23 @@ var HoverLayer = /** @class */ (function (_super) {
                         continue;
                     }
                     ctx.beginPath();
-                    ctx.arc(anchor.x, anchor.y, anchor.radius || _this.options.anchorRadius, 0, Math.PI * 2);
-                    ctx.strokeStyle = anchor.strokeStyle || _this.options.hoverColor;
-                    ctx.fillStyle = anchor.fillStyle || _this.options.anchorFillStyle;
+                    ctx.arc(anchor.x, anchor.y, anchor.radius || globalStore.options.anchorRadius, 0, Math.PI * 2);
+                    ctx.strokeStyle = anchor.strokeStyle || globalStore.options.hoverColor;
+                    ctx.fillStyle = anchor.fillStyle || globalStore.options.anchorFillStyle;
                     ctx.fill();
                     ctx.stroke();
                 }
             });
         }
         ctx.restore();
-        if (this.node && !this.data.locked) {
+        if (this.node && !globalStore.data.locked) {
             if (!this.node.getTID()) {
                 this.node.setTID(this.TID);
             }
             this.root = this.getRoot(this.node) || this.node;
             if (this.root) {
                 ctx.save();
-                ctx.strokeStyle = this.options.dragColor;
+                ctx.strokeStyle = globalStore.options.dragColor;
                 ctx.globalAlpha = 0.2;
                 if (this.root.rotate) {
                     ctx.translate(this.root.rect.center.x, this.root.rect.center.y);
@@ -117,20 +114,20 @@ var HoverLayer = /** @class */ (function (_super) {
                 ctx.strokeRect(this.root.rect.x, this.root.rect.y, this.root.rect.width, this.root.rect.height);
                 ctx.restore();
             }
-            if (!this.options.hideAnchor) {
+            if (!globalStore.options.hideAnchor) {
                 for (var i = 0; i < this.node.rotatedAnchors.length; ++i) {
                     if (this.node.locked ||
-                        this.node.hideAnchor ||
-                        (this.node.rotatedAnchors[i].hidden && this.hoverAnchorIndex !== i)) {
+                            this.node.hideAnchor ||
+                            (this.node.rotatedAnchors[i].hidden && this.hoverAnchorIndex !== i)) {
                         continue;
                     }
                     ctx.beginPath();
-                    ctx.arc(this.node.rotatedAnchors[i].x, this.node.rotatedAnchors[i].y, this.node.rotatedAnchors[i].radius || this.options.anchorRadius, 0, Math.PI * 2);
+                    ctx.arc(this.node.rotatedAnchors[i].x, this.node.rotatedAnchors[i].y, this.node.rotatedAnchors[i].radius || globalStore.options.anchorRadius, 0, Math.PI * 2);
                     ctx.strokeStyle =
-                        this.node.rotatedAnchors[i].strokeStyle || this.options.hoverColor;
+                            this.node.rotatedAnchors[i].strokeStyle || globalStore.options.hoverColor;
                     ctx.fillStyle =
-                        this.node.rotatedAnchors[i].fillStyle ||
-                            this.options.anchorFillStyle;
+                            this.node.rotatedAnchors[i].fillStyle ||
+                            globalStore.options.anchorFillStyle;
                     ctx.fill();
                     ctx.stroke();
                 }
@@ -139,9 +136,9 @@ var HoverLayer = /** @class */ (function (_super) {
         if (this.dockAnchor) {
             ctx.save();
             ctx.beginPath();
-            ctx.arc(this.dockAnchor.x, this.dockAnchor.y, this.dockAnchor.radius || this.options.anchorRadius, 0, Math.PI * 2);
-            ctx.strokeStyle = this.options.dockStrokeStyle;
-            ctx.fillStyle = this.options.dockFillStyle;
+            ctx.arc(this.dockAnchor.x, this.dockAnchor.y, this.dockAnchor.radius || globalStore.options.anchorRadius, 0, Math.PI * 2);
+            ctx.strokeStyle = globalStore.options.dockStrokeStyle;
+            ctx.fillStyle = globalStore.options.dockFillStyle;
             ctx.fill();
             ctx.stroke();
             ctx.restore();
@@ -151,7 +148,7 @@ var HoverLayer = /** @class */ (function (_super) {
             ctx.arc(this.hoverLineCP.x, this.hoverLineCP.y, 5, 0, Math.PI * 2);
             ctx.fill();
         }
-        ctx.strokeStyle = this.options.hoverColor + '80';
+        ctx.strokeStyle = globalStore.options.hoverColor + '80';
         ctx.lineWidth = 1;
         if (this.dockLineX > 0) {
             var size = Store.get(this.generateStoreKey('LT:size'));
@@ -169,8 +166,8 @@ var HoverLayer = /** @class */ (function (_super) {
         }
         // Select nodes by drag.
         if (this.dragRect) {
-            ctx.fillStyle = this.options.dragColor + '30';
-            ctx.strokeStyle = this.options.dragColor;
+            ctx.fillStyle = globalStore.options.dragColor + '30';
+            ctx.strokeStyle = globalStore.options.dragColor;
             ctx.beginPath();
             ctx.strokeRect(this.dragRect.x, this.dragRect.y, this.dragRect.width, this.dragRect.height);
             ctx.fillRect(this.dragRect.x, this.dragRect.y, this.dragRect.width, this.dragRect.height);
@@ -180,7 +177,7 @@ var HoverLayer = /** @class */ (function (_super) {
         if (!node.parentId) {
             return null;
         }
-        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 instanceof Node && item.id === node.parentId) {
                 var n = this.getRoot(item);
@@ -196,4 +193,4 @@ var HoverLayer = /** @class */ (function (_super) {
     return HoverLayer;
 }(Layer));
 export { HoverLayer };
-//# sourceMappingURL=hoverLayer.js.map
+//# sourceMappingURL=hoverLayer.js.map

package/core/src/models/index.d.ts

@@ -1,4 +1,3 @@
-export * from './data';
 export * from './pen';
 export * from './node';
 export * from './line';

package/core/src/models/index.js

@@ -1,4 +1,3 @@
-export * from './data';
 export * from './pen';
 export * from './node';
 export * from './line';

package/core/src/offscreen.d.ts

@@ -1,15 +1,12 @@
-import { Options } from './options';
 import { Canvas } from './canvas';
 import { ActiveLayer } from './activeLayer';
 import { HoverLayer } from './hoverLayer';
 import { AnimateLayer } from './animateLayer';
 export declare class Offscreen extends Canvas {
-    parentElem: HTMLElement;
-    options: Options;
     activeLayer: ActiveLayer;
     hoverLayer: HoverLayer;
     animateLayer: AnimateLayer;
-    constructor(parentElem: HTMLElement, options: Options, TID: String);
+    constructor(TID: String);
     getRoutineLayer(auto?:[]): void;
     render(): void;
     destroy(): void;

package/core/src/offscreen.js

@@ -13,13 +13,12 @@ var __extends = (this && this.__extends) || (function () {
 })();
 import { Store } from 'le5le-store';
 import { Canvas } from './canvas';
+import { Node } from './models'
+import { commonStore } from './store'
 var Offscreen = /** @class */ (function (_super) {
     __extends(Offscreen, _super);
-    function Offscreen(parentElem, options, TID) {
-        if (options === void 0) { options = {}; }
-        var _this = _super.call(this, parentElem, options, TID) || this;
-        _this.parentElem = parentElem;
-        _this.options = options;
+    function Offscreen(TID) {
+        var _this = _super.call(this, TID) || this;
         _this.activeLayer = null;
         _this.hoverLayer = null;
         _this.animateLayer = null;
@@ -40,9 +39,12 @@ var Offscreen = /** @class */ (function (_super) {
     Offscreen.prototype.render = function () {
         _super.prototype.render.call(this);
         var ctx = this.canvas.getContext('2d');
-        ctx.strokeStyle = this.options.color;
-        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
+        if(!commonStore || !commonStore[this.TID]) return;
+        let store = commonStore[this.TID];
+        ctx.strokeStyle = store.options.color;
+        for (var _i = 0, _a = store.data.pens; _i < _a.length; _i++) {
             var item = _a[_i];
+            if(!(item instanceof Node)) item = new Node(item);
             if (!item.getTID()) {
                 item.setTID(this.TID);
             }
@@ -57,9 +59,9 @@ var Offscreen = /** @class */ (function (_super) {
         if(this.animateLayer) {
             this.animateLayer.render(ctx);
         }
+        store = null;
     };
     Offscreen.prototype.destroy = function () {
-        this.options = null;
         this.activeLayer = null;
         this.hoverLayer = null;
         this.animateLayer = null;

package/core/src/options.js

@@ -38,5 +38,6 @@ export var DefalutOptions = {
     autoExpandDistance: 200,
     keydown: KeydownType.Document,
     viewPadding: 0,
+    interval: 50
 };
 //# sourceMappingURL=options.js.map

package/core/src/preview.d.ts

@@ -1,18 +1,6 @@
 // @ts-ignore
-import {Options, Padding} from './options';
-import { Pen } from './models';
-import { Node } from './models';
+import {Padding, Options} from './options';
 import { Point } from './models';
-import { Line } from './models';
-import { TopologyData } from './models';
-import { Lock } from './models';
-import { Offscreen } from './offscreen';
-import { RenderLayer } from './renderLayer';
-import { AnimateLayer } from './animateLayer';
-import { DivLayer } from './divLayer';
-import { Rect } from './models';
-import { Socket } from './socket';
-import { MQTT } from './mqtt';
 import {Common} from './common';
 export declare class Preview extends Common{
     constructor(parent: string | HTMLElement, options?: Options);

package/core/src/preview.js

@@ -29,7 +29,7 @@ var Preview = (function (_super) {
                 _this.onmouseup(e);
                 return;
             }
-            if (_this.data.locked && _this.mouseDown) {
+            if (_this.store.data.locked && _this.mouseDown) {
                 return;
             }
             _this.scheduledAnimationFrame = true;
@@ -45,7 +45,7 @@ var Preview = (function (_super) {
                         hoverNode,
                         moveType,
                         eventNode
-                    } = mousMoveFun(_this.options.type, pos, _this.data.pens);
+                    } = mousMoveFun(_this.store.options.type, pos, _this.store.data.pens);
                     _this.moveIn.type = _this.moveInType.None;
                     _this.scheduledAnimationFrame = false;
                     _this.hideTip();
@@ -73,7 +73,7 @@ var Preview = (function (_super) {
             if (_this.inputObj) {
                 _this.setNodeText();
             }
-            const {eventType, value} = mousDownFun(_this.options.type, _this.moveIn.eventNode);
+            const {eventType, value} = mousDownFun(_this.store.options.type, _this.moveIn.eventNode);
             if (_this.moveIn.type == _this.moveInType.Nodes) {
                 _this.divLayer.canvas.style.cursor = 'pointer';
                 switch (eventType) {
@@ -84,7 +84,7 @@ var Preview = (function (_super) {
                         _this.dispatch('node', _this.moveIn.hoverNode);
                         break;
                     case downDataType.Showhide:
-                        _this.hidePenByTag(_this.data.pens, value);
+                        _this.hidePenByTag(_this.store.data.pens, value);
                         const obj = value ? JSON.parse(value) : {}
                         const visibleRange = obj.visibleRange
                         if (visibleRange == '1') {
@@ -109,10 +109,10 @@ var Preview = (function (_super) {
         _this.divLayer.canvas.onmousedown = this.onmousedown;
         _this.divLayer.canvas.onmouseup = this.onmouseup;
         _this.divLayer.canvas.onwheel = function (event) {
-            if (_this.options.disableScale) {
+            if (_this.store.options.disableScale) {
                 return;
             }
-            switch (_this.options.scaleKey) {
+            switch (_this.store.options.scaleKey) {
                 case KeyType.None:
                     break;
                 case KeyType.Ctrl:
@@ -166,46 +166,45 @@ var Preview = (function (_super) {
     // open - redraw by the data
     Preview.prototype.open = function (topoJSon) {
         this.conversionData(topoJSon);
-        this.parentElem.scrollLeft = 0;
-        this.parentElem.scrollTop = 0;
-        this.divLayer.clear();
         this.fitView();
         this.render(true);
         this.animate(true);
     };
     Preview.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;
         }
         const scaleX = w ? w : scale;
         const scaleY = h ? h : scale;
-        this.data.scale *= scale;
+        this.store.data.scale *= scale;
         if(this.isFullScreen) {
-            this.ratioCord.ratio *= scale;
-            this.ratioCord.scaleX *= scaleX;
-            this.ratioCord.scaleY *= scaleY;
+            this.store.ratioCord.ratio *= scale;
+            this.store.ratioCord.scaleX *= scaleX;
+            this.store.ratioCord.scaleY *= scaleY;
         }else {
-            this.ratioCord.ratio = 1;
-            this.ratioCord.scaleX = 1;
-            this.ratioCord.scaleY = 1;
+            this.store.ratioCord = {
+                ratio: 1,
+                scaleX: 1,
+                scaleY: 1
+            }
         }
         !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);
         }
     };
     Preview.prototype.scaleTo = function (scale) {
-        this.scale(scale / this.data.scale);
-        this.data.scale = scale;
+        this.scale(scale / this.store.data.scale);
+        this.store.data.scale = scale;
     };
     // scale for origin canvas:
     Preview.prototype.fitView = function (viewPadding, restore) {
         if (!this.hasView())
             return;
         // 1. 重置画布尺寸为容器尺寸
-        var parentElem = this.canvas.parentElem;
+        var parentElem = this.store.parentElem;
         var width = parentElem.offsetWidth, height = parentElem.offsetHeight;
         this.canvasResize({
             width: width,
@@ -214,7 +213,7 @@ var Preview = (function (_super) {
         // 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. 计算缩放比
@@ -225,14 +224,14 @@ var Preview = (function (_super) {
             ratio = h;
         }
         if(typeof restore === 'boolean' && restore) {
-            ratio = 1 / this.ratioCord.ratio;
-            w = 1 / this.ratioCord.scaleX;
-            h = 1 / this.ratioCord.scaleY;
+            ratio = 1 / this.store.ratioCord.ratio;
+            w = 1 / this.store.ratioCord.scaleX;
+            h = 1 / this.store.ratioCord.scaleY;
         }
         this.scale(ratio, undefined, w, h);
         this.canvas.scale(ratio, undefined, w, h);
         // 7. X抽滚动条隐藏
-        this.parentElem.style.overflow = 'hidden auto';
+        this.store.parentElem.style.overflow = 'hidden auto';
     };
     Preview.prototype.destroy = function () {
         this.destroyStatic();

package/core/src/renderLayer.d.ts

@@ -2,8 +2,6 @@ import { Options } from './options';
 import { Canvas } from './canvas';
 import {Point} from './models';
 export declare class RenderLayer extends Canvas {
-    parentElem: HTMLElement;
-    options: Options;
     offscreen: any;
     bkImg: HTMLImageElement;
     bkImgRect: {
@@ -22,7 +20,7 @@ export declare class RenderLayer extends Canvas {
         width: number;
         height: number;
     };
-    constructor(parentElem: HTMLElement, options: Options, TID: String);
+    constructor(TID: String);
     loadBkImg(cb?: any): void;
     clearBkImg(): void;
     render: () => void;