dcim-topology2d 1.1.6 → 3.0.2

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

@@ -7,12 +7,6 @@ export declare const images: {
         cnt: number;
     };
 };
-export declare const defaultImages: {
-    [key: string]: {
-        img: string;
-        status: number;
-    };
-};
 export declare class Node extends Pen {
     is3D: boolean;
     z: number;

package/core/src/models/node.js

@@ -21,8 +21,7 @@ import { defaultIconRect, defaultTextRect } from '../middles/default.rect';
 import { text, tableText, defaultText, iconfont } from '../middles/nodes/text';
 import { Store } from 'le5le-store';
 import { abs, s8, animateType, createChildrenDivByElementId } from '../utils';
-export const images = {};
-export const defaultImages = {};
+export var images = {};
 var Node = /** @class */ (function (_super) {
     __extends(Node, _super);
     function Node(json, noChild) {
@@ -36,7 +35,6 @@ var Node = /** @class */ (function (_super) {
         _this.animateDuration = 0;
         _this.animateFrames = [];
         _this.type = PenType.Node;
-        _this.TID = json.TID;
         _this.is3D = json.is3D;
         _this.z = json.z;
         _this.zRotate = json.zRotate || 0;
@@ -82,7 +80,7 @@ var Node = /** @class */ (function (_super) {
         _this.leakageFillStyle = json.leakageFillStyle || '#ff0000';
         _this.bindStaticId = json.bindStaticId || '';
         _this.buttonCheckSlide = json.buttonCheckSlide || '';
-        _this.visitStrokeStyle = json.visitStrokeStyle || '';
+        _this.activeImgeIndex = json.activeImgeIndex || false;
         _this.thBottomStrokeStyle = json.thBottomStrokeStyle || '#fff';
         _this.thBottomLineWidth = json.thBottomLineWidth || 1;
         // 兼容老数据
@@ -129,7 +127,6 @@ var Node = /** @class */ (function (_super) {
                         : '';
         _this.animateAlone = json.animateAlone;
         _this.iframe = json.iframe;
-        _this.iframePageAuto = json.iframePageAuto || false;
         _this.elementId = json.elementId;
         _this.audio = json.audio;
         _this.video = json.video;
@@ -236,16 +233,17 @@ var Node = /** @class */ (function (_super) {
         })
     };
     Node.prototype.addToDiv = function (type) {
-        if (this.iframe ||
+        if (this.audio ||
+                this.video ||
+                this.iframe ||
                 this.elementId ||
                 this.hasGif()) {
+          if(type) {
+            // 复合Echarts初始化
+            createChildrenDivByElementId(this);
+          }else {
             Store.set(this.generateStoreKey('LT:addDiv'), this);
-            // if(type || this.iframe) {
-            //     // 复合Echarts初始化
-            //     createChildrenDivByElementId(this);
-            // }else {
-            //     Store.set(this.generateStoreKey('LT:addDiv'), this);
-            // }
+          }
         }
     };
     Node.prototype.hasGif = function () {
@@ -407,10 +405,9 @@ var Node = /** @class */ (function (_super) {
             //this.drawImg(ctx);
             return;
         }
-        const defaultImageNode = defaultImages[this.id];
         var img = new Image();
         img.crossOrigin = 'anonymous';
-        img.src = defaultImageNode && defaultImageNode.status === 404 ? '' : this.image;
+        img.src = this.image;
         img.onload = function (e) {
             _this.lastImage = _this.image;
             _this.imgNaturalWidth = img.naturalWidth;
@@ -420,20 +417,12 @@ var Node = /** @class */ (function (_super) {
                 img: img,
                 cnt: 1,
             };
-            if(defaultImageNode) delete defaultImages[_this.id];
             Store.set(_this.generateStoreKey('LT:imageLoaded'), true);
             if (!_this.gif && gif) {
                 _this.gif = true;
                 Store.set(_this.generateStoreKey('LT:addDiv'), _this);
             }
         };
-        img.onerror = function(e){
-            // 图片加载失败时预留默认图为空
-            defaultImages[_this.id] = {
-                img: '',
-                status: 404
-            };
-        };
     };
     Node.prototype.initDrawImg = function (ctx){
         var _this = this;
@@ -760,13 +749,11 @@ var Node = /** @class */ (function (_super) {
         this.rect.height *= h;
         this.rect.ex = this.rect.x + this.rect.width;
         this.rect.ey = this.rect.y + this.rect.height;
-        if(!(center.type && center.type === 'bottLogo')) {
-            if (this.imageWidth) {
-                this.imageWidth *= w;
-            }
-            if (this.imageHeight) {
-                this.imageHeight *= h;
-            }
+        if (this.imageWidth) {
+            this.imageWidth *= w;
+        }
+        if (this.imageHeight) {
+            this.imageHeight *= h;
         }
         this.lastImage = null;
         this.font.fontSize *= scale;

package/core/src/models/pen.js

@@ -19,8 +19,10 @@ var Pen = /** @class */ (function () {
         this.globalAlpha = 1;
         this.dash = 0;
         this.strokeStyle = '';
-        this.visitStrokeStyle = '';
         this.fillStyle = '';
+        this.defaultFillStyle = '';
+        this.defaultFontColor = '#fff';
+        this.defaultStrokeStyle = '';
         this.font = {
             color: '',
             fontFamily: '"Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial',
@@ -45,9 +47,6 @@ var Pen = /** @class */ (function () {
         this.events = [];
         this.eventFns = ['link', 'doAnimate', 'doFn', 'doWindowFn'];
         this.floorImageIndex = false;
-        this.defaultFillStyle = '';
-        this.defaultFontColor = '';
-        this.defaultStrokeStyle = '';
         if (json) {
             this.id = json.id || s8();
             this.name = json.name || '';
@@ -72,10 +71,11 @@ var Pen = /** @class */ (function () {
             if (json.lineWidth || json.lineWidth === 0) {
                 this.lineWidth = json.lineWidth;
             }
-            this.activeImgeIndex = json.activeImgeIndex || false;
-            this.visitStrokeStyle = json.visitStrokeStyle || '';
             this.strokeStyle = json.strokeStyle || '';
             this.fillStyle = json.fillStyle || '';
+            this.defaultFillStyle = json.defaultFillStyle || '';
+            this.defaultFontColor = json.defaultFontColor || '#fff';
+            this.defaultStrokeStyle = json.defaultStrokeStyle || '';
             this.lineCap = json.lineCap;
             this.globalAlpha = (json.globalAlpha || json.globalAlpha === 0) ? json.globalAlpha : 1
             this.rotate = json.rotate || 0;
@@ -108,9 +108,6 @@ var Pen = /** @class */ (function () {
             this.tipId = json.tipId;
             this.title = json.title;
             this.visible = json.visible !== false;
-            this.defaultFillStyle = json.defaultFillStyle || '';
-            this.defaultFontColor = json.defaultFontColor || '';
-            this.defaultStrokeStyle = json.defaultStrokeStyle || '';
             if (json.rectInParent) {
                 this.rectInParent = json.rectInParent;
             }
@@ -150,13 +147,7 @@ var Pen = /** @class */ (function () {
         if (this.lineWidth > 1) {
             ctx.lineWidth = this.lineWidth;
         }
-        if(this.dash === 4) {
-            ctx.strokeStyle = 'transparent';
-        }else {
-            const staticStrokeStyle = this.strokeStyle || '#222';
-            ctx.strokeStyle = !this.activeImgeIndex ? this.visitStrokeStyle || staticStrokeStyle : this.defaultStrokeStyle || staticStrokeStyle;
-        }
-        //ctx.strokeStyle = this.dash === 4 ? 'transparent' : this.strokeStyle || '#222';
+        ctx.strokeStyle = this.dash === 4 ? 'transparent' : this.strokeStyle || '#222';
         this.fillStyle && (ctx.fillStyle = this.fillStyle);
         if (this.lineCap) {
             ctx.lineCap = this.lineCap;

package/core/src/mqtt.d.ts

@@ -0,0 +1,14 @@
+import { TopologyData } from './models';
+export declare class MQTT {
+    url: string;
+    options: any;
+    topics: string;
+    data: TopologyData;
+    client: any;
+    constructor(url: string, options: any, topics: string, data: TopologyData);
+    init(): void;
+    onmessage: (topic: string, message: any) => void;
+    publish(topic: string, message: string): void;
+    close(): void;
+    isEnd: boolean;
+}

package/core/src/mqtt.js

@@ -0,0 +1,82 @@
+import * as mqtt from './mqtt.min.js';
+import { EventType } from './models';
+import { Store } from 'le5le-store';
+var MQTT = /** @class */ (function () {
+    function MQTT(url, options, topics, data) {
+        var _this = this;
+        this.url = url;
+        this.options = options;
+        this.topics = topics;
+        this.data = data;
+        this.isEnd = false;
+        this.num = 0; // 记录推送的次数，用于判单丢失情况
+        this.onmessage = function (topic, message) {
+          if (!_this.data.pens.length || !topic || topic != _this.data.mqttTopics) {
+              return;
+          }
+          console.log((new Date()).toString().substring(16,24))
+          // 判单推送是否有失丢
+          var theNum = JSON.parse(message.toString()).pushNumber
+          if((theNum - this.num) > 1) {
+            console.log('发生丢失！')
+            console.log('上次的计数===',this.num)
+            console.log('当前的计数===',theNum)
+            // 再次主动请求
+            Store.set('mqttLostMessage', true);
+          }else{
+            Store.set('mqttLostMessage', false);
+          }
+          this.num = JSON.parse(message.toString()).pushNumber
+          console.log('已执行的计数===',this.num)
+          console.log('\n')
+
+          if(!_this.isEnd){
+              _this.getPen(_this.data.pens, topics, message)
+          }
+        };
+        //服务器连接异常的回调
+        this.onerror= function (error) {
+            console.log('服务器连接异常',error)
+           
+        };
+        this.init();
+    }
+    MQTT.prototype.init = function () {
+        this.client = mqtt.connect(this.url, this.options);
+        console.log('connect===',this.options)
+        this.client.on('message', this.onmessage);
+        if (this.topics) {
+            this.client.subscribe(this.topics.split(','));
+        }
+    };
+    MQTT.prototype.publish = function (topic, message) {
+        this.client.publish(topic, message);
+    };
+    MQTT.prototype.close = function () {
+        this.isEnd = true
+        this.client.end();
+    };
+    MQTT.prototype.getPen = function (pens, topics, message) {
+        const _this = this;
+        pens.forEach((pen)=>{
+            if(pen.children != undefined){
+            _this.getPen(pen.children, topics, message)
+            }else{
+                var item = pen;
+                for (var _b = 0, _c = item.events; _b < _c.length; _b++) {
+                    var event_1 = _c[_b];
+                    if (event_1.type === EventType.Mqtt) {
+                        event_1.name = topics;
+                        if(message){
+                            item.doSocketMqtt(event_1, message.toString(), _this.client);
+                        }
+                    }
+                }
+            }
+        })
+    };
+    return MQTT;
+}());
+
+export { MQTT };
+//# sourceMappingURL=mqtt.js.map

package/core/src/mqtt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mqtt.js","sourceRoot":"","sources":["../../../packages/core/src/mqtt.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,IAAI,MAAM,eAAe,CAAC;AAEtC,OAAO,EAAE,SAAS,EAAgB,MAAM,UAAU,CAAC;AAEnD;IAEE,cAAmB,GAAW,EAAS,OAAY,EAAS,MAAc,EAAS,IAAkB;QAArG,iBAEC;QAFkB,QAAG,GAAH,GAAG,CAAQ;QAAS,YAAO,GAAP,OAAO,CAAK;QAAS,WAAM,GAAN,MAAM,CAAQ;QAAS,SAAI,GAAJ,IAAI,CAAc;QAarG,cAAS,GAAG,UAAC,KAAa,EAAE,OAAY;YACtC,IAAI,CAAC,KAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE;gBACpC,OAAO;aACR;YAED,KAAmB,UAAc,EAAd,KAAA,KAAI,CAAC,IAAI,CAAC,IAAI,EAAd,cAAc,EAAd,IAAc,EAAE;gBAA9B,IAAM,IAAI,SAAA;gBACb,KAAoB,UAAW,EAAX,KAAA,IAAI,CAAC,MAAM,EAAX,cAAW,EAAX,IAAW,EAAE;oBAA5B,IAAM,OAAK,SAAA;oBACd,IAAI,OAAK,CAAC,IAAI,KAAK,SAAS,CAAC,IAAI,EAAE;wBACjC,IAAI,OAAK,CAAC,IAAI,IAAI,KAAK,CAAC,OAAO,CAAC,OAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE;4BAChD,IAAI,CAAC,YAAY,CAAC,OAAK,EAAE,OAAO,CAAC,QAAQ,EAAE,EAAE,KAAI,CAAC,MAAM,CAAC,CAAC;yBAC3D;qBACF;iBACF;aACF;QACH,CAAC,CAAC;QA1BA,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAED,mBAAI,GAAJ;QACE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QACnD,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QAE1C,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;SAC/C;IACH,CAAC;IAkBD,sBAAO,GAAP,UAAQ,KAAa,EAAE,OAAe;QACpC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IACtC,CAAC;IAED,oBAAK,GAAL;QACE,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC;IACpB,CAAC;IACH,WAAC;AAAD,CAAC,AAtCD,IAsCC"}

package/core/src/offscreen.d.ts

@@ -1,12 +1,15 @@
+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(TID: String);
+    constructor(parentElem: HTMLElement, options: Options, TID: String);
     getRoutineLayer(auto?:[]): void;
     render(): void;
     destroy(): void;

package/core/src/offscreen.js

@@ -13,12 +13,13 @@ 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(TID) {
-        var _this = _super.call(this, TID) || this;
+    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;
         _this.activeLayer = null;
         _this.hoverLayer = null;
         _this.animateLayer = null;
@@ -39,12 +40,9 @@ var Offscreen = /** @class */ (function (_super) {
     Offscreen.prototype.render = function () {
         _super.prototype.render.call(this);
         var ctx = this.canvas.getContext('2d');
-        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++) {
+        ctx.strokeStyle = this.options.color;
+        for (var _i = 0, _a = this.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);
             }
@@ -59,9 +57,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,6 +38,5 @@ export var DefalutOptions = {
     autoExpandDistance: 200,
     keydown: KeydownType.Document,
     viewPadding: 0,
-    interval: 50
 };
 //# sourceMappingURL=options.js.map

package/core/src/poll.js

@@ -1,3 +1,5 @@
+import { EventType } from 'dcim-topology/core/src/models';
+
 // 轮询
 var POLL = /** @class */ (function () {
     function POLL(data, message, val) {

package/core/src/preview.d.ts

@@ -1,6 +1,18 @@
 // @ts-ignore
-import {Padding, Options} from './options';
+import {Options, Padding} from './options';
+import { Pen } from './models';
+import { Node } from './models';
 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

@@ -23,14 +23,13 @@ var Preview = (function (_super) {
         _this.offscreen.getRoutineLayer(['AnimateLayer']);
         _this.scheduledAnimationFrame = false;
         _this.onMouseMove = function (e) {
-            _this.store.data.dataResize = 0;
             // https://caniuse.com/#feat=mdn-api_mouseevent_buttons
             if (_this.mouseDown && !_this.mouseDown.restore && e.buttons !== 1) {
                 // 防止异常情况导致mouseup事件没有触发
                 _this.onmouseup(e);
                 return;
             }
-            if (_this.store.data.locked && _this.mouseDown) {
+            if (_this.data.locked && _this.mouseDown) {
                 return;
             }
             _this.scheduledAnimationFrame = true;
@@ -46,13 +45,13 @@ var Preview = (function (_super) {
                         hoverNode,
                         moveType,
                         eventNode
-                    } = mousMoveFun(_this.store.options.type, pos, _this.store.data.pens);
+                    } = mousMoveFun(_this.options.type, pos, _this.data.pens);
                     _this.moveIn.type = _this.moveInType.None;
                     _this.scheduledAnimationFrame = false;
                     _this.hideTip();
-                    _this.setAttributeForCanvasPoint('default');
+                    _this.divLayer.canvas.style.cursor = 'default';
                     if (hoverNode) {
-                        if(eventNode) _this.setAttributeForCanvasPoint('pointer');
+                        if(eventNode) _this.divLayer.canvas.style.cursor = 'pointer';
                         if(hoverNode.visible) _this.showTip(hoverNode, pos);
                         _this.moveIn.type = moveType;
                     }
@@ -69,14 +68,14 @@ var Preview = (function (_super) {
             var canvasPos = _this.divLayer.canvas.getBoundingClientRect();
             _this.mouseDown = {x: e.x - canvasPos.x, y: e.y - canvasPos.y};
             if (e.altKey) {
-                _this.setAttributeForCanvasPoint('pointer');
+                _this.divLayer.canvas.style.cursor = 'pointer';
             }
             if (_this.inputObj) {
                 _this.setNodeText();
             }
-            const {eventType, value} = mousDownFun(_this.store.options.type, _this.moveIn.eventNode);
+            const {eventType, value} = mousDownFun(_this.options.type, _this.moveIn.eventNode);
             if (_this.moveIn.type == _this.moveInType.Nodes) {
-                _this.setAttributeForCanvasPoint('pointer');
+                _this.divLayer.canvas.style.cursor = 'pointer';
                 switch (eventType) {
                     case downDataType.Window:
                         omouseEventPrototDoWindowFn(_this.moveIn.eventNode, _this.moveIn.hoverNode);
@@ -85,7 +84,7 @@ var Preview = (function (_super) {
                         _this.dispatch('node', _this.moveIn.hoverNode);
                         break;
                     case downDataType.Showhide:
-                        _this.hidePenByTag(_this.store.data.pens, value);
+                        _this.hidePenByTag(_this.data.pens, value);
                         const obj = value ? JSON.parse(value) : {}
                         const visibleRange = obj.visibleRange
                         if (visibleRange == '1') {
@@ -104,20 +103,16 @@ var Preview = (function (_super) {
             _this.mouseDown = null;
             _this.lastTranlated.x = 0;
             _this.lastTranlated.y = 0;
-            if(_this.moveIn.eventNode) {
-                _this.setAttributeForCanvasPoint('pointer');
-            }else {
-                _this.setAttributeForCanvasPoint('default');
-            }
+            _this.divLayer.canvas.style.cursor = _this.moveIn.eventNode ? 'pointer' : 'default';
         };
         _this.divLayer.canvas.onmousemove = this.onMouseMove;
         _this.divLayer.canvas.onmousedown = this.onmousedown;
         _this.divLayer.canvas.onmouseup = this.onmouseup;
         _this.divLayer.canvas.onwheel = function (event) {
-            if (_this.store.options.disableScale) {
+            if (_this.options.disableScale) {
                 return;
             }
-            switch (_this.store.options.scaleKey) {
+            switch (_this.options.scaleKey) {
                 case KeyType.None:
                     break;
                 case KeyType.Ctrl:
@@ -163,71 +158,54 @@ var Preview = (function (_super) {
             return false;
         };
         return _this;
-    }
-    Preview.prototype.setAttributeForCanvasPoint = function (type){
-
-        this.divLayer.canvas.setAttribute('class', `canvas-point ${type}`);
-
     };
     Preview.prototype.fitViewPreview = function (restore){
         this.fitView(null, restore);
         this.render();
     };
     // open - redraw by the data
-    Preview.prototype.open = function (topoJSon, type) {
-        this.conversionData(topoJSon, type);
-        this.setBKImageRect();
+    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.setBKImageRect = function () {
-      if (this.store.data.bkImageRect) {
-        this.store.data.bkImageRect.x = this.store.data.bkImageRect.x ? Number(this.store.data.bkImageRect.x) : 0;
-        this.store.data.bkImageRect.y = this.store.data.bkImageRect.y ? Number(this.store.data.bkImageRect.y) : 0;
-        this.store.data.bkImageRect.width = this.store.data.bkImageRect.width ? Number(this.store.data.bkImageRect.width) : this.canvas.width;
-        this.store.data.bkImageRect.height = this.store.data.bkImageRect.height ? Number(this.store.data.bkImageRect.height) : this.canvas.height;
-        this.store.data.bkImageRect.center = {
-          x: this.store.data.bkImageRect.x + this.store.data.bkImageRect.width / 2,
-          y: this.store.data.bkImageRect.y + this.store.data.bkImageRect.height / 2
-        }
-      }
-    };
     Preview.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;
         }
         const scaleX = w ? w : scale;
         const scaleY = h ? h : scale;
-        this.store.data.scale *= scale;
+        this.data.scale *= scale;
         if(this.isFullScreen) {
-            this.store.ratioCord.ratio *= scale;
-            this.store.ratioCord.scaleX *= scaleX;
-            this.store.ratioCord.scaleY *= scaleY;
+            this.ratioCord.ratio *= scale;
+            this.ratioCord.scaleX *= scaleX;
+            this.ratioCord.scaleY *= scaleY;
         }else {
-            this.store.ratioCord = {
-                ratio: 1,
-                scaleX: 1,
-                scaleY: 1
-            }
+            this.ratioCord.ratio = 1;
+            this.ratioCord.scaleX = 1;
+            this.ratioCord.scaleY = 1;
         }
         !center && (center = this.getRect().center);
-        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);
         }
     };
     Preview.prototype.scaleTo = function (scale) {
-        this.scale(scale / this.store.data.scale);
-        this.store.data.scale = scale;
+        this.scale(scale / this.data.scale);
+        this.data.scale = scale;
     };
     // scale for origin canvas:
     Preview.prototype.fitView = function (viewPadding, restore) {
         if (!this.hasView())
             return;
         // 1. 重置画布尺寸为容器尺寸
-        var parentElem = this.store.parentElem;
+        var parentElem = this.canvas.parentElem;
         var width = parentElem.offsetWidth, height = parentElem.offsetHeight;
         this.canvasResize({
             width: width,
@@ -236,7 +214,7 @@ var Preview = (function (_super) {
         // 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. 计算缩放比
@@ -247,14 +225,14 @@ var Preview = (function (_super) {
             ratio = h;
         }
         if(typeof restore === 'boolean' && restore) {
-            ratio = 1 / this.store.ratioCord.ratio;
-            w = 1 / this.store.ratioCord.scaleX;
-            h = 1 / this.store.ratioCord.scaleY;
+            ratio = 1 / this.ratioCord.ratio;
+            w = 1 / this.ratioCord.scaleX;
+            h = 1 / this.ratioCord.scaleY;
         }
         this.scale(ratio, undefined, w, h);
         this.canvas.scale(ratio, undefined, w, h);
         // 7. X抽滚动条隐藏
-        this.store.parentElem.style.overflow = 'hidden auto';
+        this.parentElem.style.overflow = 'hidden auto';
     };
     Preview.prototype.destroy = function () {
         this.destroyStatic();

package/core/src/renderLayer.d.ts

@@ -2,6 +2,8 @@ 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: {
@@ -20,7 +22,7 @@ export declare class RenderLayer extends Canvas {
         width: number;
         height: number;
     };
-    constructor(TID: String);
+    constructor(parentElem: HTMLElement, options: Options, TID: String);
     loadBkImg(cb?: any): void;
     clearBkImg(): void;
     render: () => void;