dcim-topology2d 2.2.3 → 3.0.2

package/core/src/preview.js

@@ -1,9 +1,8 @@
-import { Store } from "le5le-store";
 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 +11,10 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-import { KeyType } from './options';
-import { Point } from './models';
+import {KeyType} from './options';
+import {Point} from './models';
 import { Common } from './common'
-import {
-    downDataType,
-    previewType,
-    formatPadding,
-    mousMoveFun,
-    mousDownFun,
-    omouseEventPrototDoWindowFn,
-    pageZoom
-} from './utils';
-import {
-    resetSelectInteractiveState,
-    setSelectDropdownInteractiveState
-} from './element';
+import {downDataType, formatPadding, mousMoveFun, mousDownFun, omouseEventPrototDoWindowFn} from './utils';
 
 var Preview = (function (_super) {
     __extends(Preview, _super);
@@ -35,33 +22,14 @@ var Preview = (function (_super) {
         var _this = _super.call(this, parent, options) || this;
         _this.offscreen.getRoutineLayer(['AnimateLayer']);
         _this.scheduledAnimationFrame = false;
-        _this.innerHeight = window.innerHeight || document.documentElement.clientHeight; // 初始化网页高度
-        _this.devicePixelInnerHeight = _this.innerHeight; // 初始化网页缩放高度
-        _this.devicePixelRatio = window.devicePixelRatio; // 初始化窗口分辨率
-        // 选中值发生变化时触发，目前用于日期切换
-        _this.eventChangeSubcribe = Store.subscribe(this.generateStoreKey('EVENT:change'), function (data) {
-            const { node, date } = data;
-            const pickerBindData = _this.store.pickerDataPool.bindData;
-            if (pickerBindData) {
-                // 切换显示日期文字的元件值
-                for (let value of Object.values(pickerBindData)) {
-                    if (value.dateId === node.id) {
-                        const pen = _this.store.data.pens[value.order];
-                        pen.text = date.valueStr;
-                    }
-                }
-            }
-            node.formData.realIds ? _this.dispatch('change', node, date) : _this.render(); // eventOut外部事件
-        });
         _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;
@@ -77,14 +45,14 @@ 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 (hoverNode.visible) _this.showTip(hoverNode, pos);
+                        if(eventNode) _this.divLayer.canvas.style.cursor = 'pointer';
+                        if(hoverNode.visible) _this.showTip(hoverNode, pos);
                         _this.moveIn.type = moveType;
                     }
                     _this.moveIn.eventNode = eventNode;
@@ -98,18 +66,16 @@ var Preview = (function (_super) {
             if (e.button !== 0)
                 return;
             var canvasPos = _this.divLayer.canvas.getBoundingClientRect();
-            _this.mouseDown = { x: e.x - canvasPos.x, y: e.y - canvasPos.y };
+            _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();
             }
-            // 待优化，如何跳过这个函数，影响滚动组件功能
-            resetSelectInteractiveState(_this.moveIn.hoverNode);
-            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);
@@ -118,20 +84,16 @@ 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') {
                             _this.openCount++
                         }
-                        _this.render();
                         break;
                     case downDataType.Tabswitch:
                         _this.switchStaticsCheckType(_this.moveIn.hoverNode, _this.moveIn.eventNode);
                         break;
-                    case downDataType.Formselect:
-                        setSelectDropdownInteractiveState(_this.moveIn.hoverNode, previewType.Dcim);
-                        break;
                 }
             }
         };
@@ -141,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 || _this.store.options.type === 'dialog') {
+            if (_this.options.disableScale) {
                 return;
             }
-            switch (_this.store.options.scaleKey) {
+            switch (_this.options.scaleKey) {
                 case KeyType.None:
                     break;
                 case KeyType.Ctrl:
@@ -180,16 +138,16 @@ var Preview = (function (_super) {
             event.preventDefault();
             if (event.deltaY < 0) {
                 if (event.layerX && event.layerY) {
-                    _this.scale(1.1, { x: event.layerX, y: event.layerY });
-                    _this.canvas.scale(1.1, { x: event.layerX, y: event.layerY });
+                    _this.scale(1.1, {x: event.layerX, y: event.layerY});
+                    _this.canvas.scale(1.1, {x: event.layerX, y: event.layerY});
                 } else {
                     _this.scale(1.1);
                     _this.canvas.scale(1.1);
                 }
             } else {
                 if (event.layerX && event.layerY) {
-                    _this.scale(0.9, { x: event.layerX, y: event.layerY });
-                    _this.canvas.scale(0.9, { x: event.layerX, y: event.layerY });
+                    _this.scale(0.9, {x: event.layerX, y: event.layerY});
+                    _this.canvas.scale(0.9, {x: event.layerX, y: event.layerY});
                 } else {
                     _this.scale(0.9);
                     _this.canvas.scale(0.9);
@@ -199,118 +157,56 @@ var Preview = (function (_super) {
             _this.divLayer.canvas.focus();
             return false;
         };
-        window.onresize = function () {
-            let isFullScreen = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullscreenElement;
-            if ((!isFullScreen && _this.isFullScreen) || window.keyControlFullScreen) {
-                // F11或ESC退出全屏
-                if (!window.keyControlFullScreen) _this.moveIn.hoverNode.text = '全屏';
-                _this.fitViewPreview(_this.isFullScreen);
-                _this.isFullScreen = false;
-                window.keyControlFullScreen = false;
-            } else {
-                const documentElementHeight = window.innerHeight || document.documentElement.clientHeight; // 每次窗口有变化就重新获取一次网页高度
-                if (window.devicePixelRatio !== _this.devicePixelRatio) {
-                    _this.devicePixelInnerHeight = documentElementHeight;
-                    _this.devicePixelRatio = window.devicePixelRatio;
-                }
-                if (_this.devicePixelInnerHeight < documentElementHeight && !isFullScreen) {
-                    // 按F11 全屏
-                    setTimeout(() => {
-                        _this.fitViewPreview(false);
-                        _this.isFullScreen = true;
-                    }, 200);
-                    window.keyControlFullScreen = true;
-                }
-                // topology编辑器或全屏下跳出程序
-                if (_this.store.options.type === 'topology' || window.keyControlFullScreen) return;
-                const zoom = pageZoom();
-                _this.isResize = true;
-                clearTimeout(_this.pageResizeTim);
-                _this.pageResizeTim = setTimeout(() => {
-                    if (_this.isResize) {
-                        const pageZoom = 1 / zoom;
-                        _this.store.data.pageZoom = zoom;
-                        _this.store.parentElem.style.transform = `scale(${pageZoom})`;
-                        _this.store.parentElem.style.transformOrigin = '0 0';
-                        _this.store.parentElem.parentElement.style.overflow = 'hidden';
-                        _this.store.data.dataResize = 1;
-                        _this.isResize = false;
-                        Store.set('PAGE:zoom', zoom);
-                        _this.fitView();
-                        _this.render();
-                    }
-                }, 1000);
-            }
-        };
-        _this.subcribecreateOverflow = Store.subscribe(this.generateStoreKey('LT:createOverflow'), function (node) {
-            _this.dispatch('createOverflow', node);
-        });
-        _this.subcribeconversionDataOverflow = Store.subscribe(this.generateStoreKey('LT:conversionDataOverflow'), function (data) {
-            _this.dispatch('conversionDataOverflow', data);
-        });
         return _this;
-    }
-    Preview.prototype.setAttributeForCanvasPoint = function (type) {
-
-        this.divLayer.canvas.setAttribute('class', `canvas-point ${type}`);
-
     };
-    Preview.prototype.fitViewPreview = function (restore) {
+    Preview.prototype.fitViewPreview = function (restore){
         this.fitView(null, restore);
         this.render();
     };
     // open - redraw by the data
-    Preview.prototype.open = function (topoJSon, type) {
+    Preview.prototype.open = function (topoJSon) {
         this.conversionData(topoJSon);
-        this.setBKImageRect();
+        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;
         }
-        this.store.data.scale *= scale;
+        const scaleX = w ? w : scale;
+        const scaleY = h ? h : scale;
+        this.data.scale *= scale;
+        if(this.isFullScreen) {
+            this.ratioCord.ratio *= scale;
+            this.ratioCord.scaleX *= scaleX;
+            this.ratioCord.scaleY *= scaleY;
+        }else {
+            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);
-            // 驾驶舱底部区域元件，用于控制底部区域Dom宽高等元素自由变换，后期会删除
-            if (item.tags && item.tags[0] && item.tags[0].includes('contromRoomBottom')) this.store.pens['contromRoomBottom'] = item;
         }
     };
     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 width = parentElem.offsetWidth,
-            height = parentElem.offsetHeight;
-        if (this.store.options.storeSubscribe) {
-            width = this.store.options.width;
-            height = this.store.options.height;
-        }
-        width *= this.store.data.pageZoom;
-        height *= this.store.data.pageZoom;
+        var parentElem = this.canvas.parentElem;
+        var width = parentElem.offsetWidth, height = parentElem.offsetHeight;
         this.canvasResize({
             width: width,
             height: height,
@@ -318,14 +214,9 @@ 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();
-        if (!rect.width) {
-            const bkImageRect = this.store.data.bkImageRect;
-            rect.width = bkImageRect && bkImageRect.width ? bkImageRect.width : width;
-            rect.height = bkImageRect && bkImageRect.height ? bkImageRect.height : height;
-        }
         // 6. 计算缩放比
         var w = (width - padding[1] - padding[3]) / rect.width;
         var h = (height - padding[0] - padding[2]) / rect.height;
@@ -333,42 +224,24 @@ var Preview = (function (_super) {
         if (w > h) {
             ratio = h;
         }
-        // 保持缩放后的还原度
-        if (typeof restore === 'boolean' && restore) ratio = w;
+        if(typeof restore === 'boolean' && restore) {
+            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.formOverflowOpen = function (data) {
-        this.formOverflowConversionData(data);
-        this.overflowView();
-        this.render(true);
-    }
-    Preview.prototype.overflowView = function () {
-        if (!this.hasView())
-            return;
-        var rect = this.getRect();
-        var width = rect.ex,
-            height = rect.ey
-        width *= this.store.data.pageZoom;
-        height *= this.store.data.pageZoom;
-        this.canvasResize({
-            width: width,
-            height: height,
-        });
-        this.store.parentElem.style.overflow = 'auto';
-    }
     Preview.prototype.destroy = function () {
         this.destroyStatic();
-        if (this.eventChangeSubcribe) this.eventChangeSubcribe.unsubscribe();
         this.onMouseMove = null;
         this.onmousedown = null;
         this.onmouseup = null;
-        window.onresize = null;
     };
     return Preview;
 }(Common));
 
-export { Preview };
+export {Preview};
 //# sourceMappingURL=core.js.map

package/core/src/renderLayer.d.ts

@@ -2,29 +2,27 @@ 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: {
-        center: {
-            x: number;
-            y: number;
-        },
         x: number;
         y: number;
         width: number;
         height: number;
     };
     bgRect: {
-        // center: {
-        //     x: number;
-        //     y: number;
-        // },
+        center: {
+            x: number;
+            y: number;
+        },
         x: number;
         y: number;
-        // width: number;
-        // height: number;
+        width: number;
+        height: number;
     };
-    constructor(TID: String);
+    constructor(parentElem: HTMLElement, options: Options, TID: String);
     loadBkImg(cb?: any): void;
     clearBkImg(): void;
     render: () => void;

package/core/src/renderLayer.js

@@ -13,23 +13,22 @@ var __extends = (this && this.__extends) || (function () {
 })();
 import { Store } from 'le5le-store';
 import { Canvas } from './canvas';
-import { commonStore } from './store'
+import {previewType} from './utils/construction'
 //let isQttFillStyle = false;
 var RenderLayer = /** @class */ (function (_super) {
     __extends(RenderLayer, _super);
-    function RenderLayer(TID) {
+    function RenderLayer(parentElem, options, TID) {
         //isQttFillStyle = false;
-        var _this = _super.call(this, TID) || this;
+        if (options === void 0) { options = {}; }
+        var _this = _super.call(this, parentElem, options, TID) || this;
+        _this.parentElem = parentElem;
+        _this.options = options;
         _this.bkImgRect = null;
         _this.initImage = false;
         _this.coverType = 'container';
         _this.bgRect = null;
-        _this.scaleX = 1;
-        _this.scaleY = 1;
-        _this.ratio = 1;
         _this.render = function () {
-            if(!commonStore || !commonStore[TID]) return;
-            if (commonStore[TID].data.bkImage && !_this.initImage) {
+            if (_this.data.bkImage && !_this.initImage) {
                 _this.loadBkImg(_this.render, 'pixi');
                 return;
             }
@@ -38,8 +37,12 @@ var RenderLayer = /** @class */ (function (_super) {
             }
             var ctx = _this.canvas.getContext('2d');
             ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
-            if (commonStore[TID].data.bkColor) {
-                ctx.fillStyle = commonStore[TID].data.bkColor;
+            // if (_this.data.pens && _this.data.pens.length > 0 && !isQttFillStyle) {
+            //     _this.data.pens.map((penItem) => {penItem.defaultFillStyle = penItem.fillStyle;})
+            //     isQttFillStyle = true;
+            // }
+            if (_this.data.bkColor) {
+                ctx.fillStyle = _this.data.bkColor;
                 ctx.fillRect(0, 0, _this.width, _this.height);
             }
             if (_this.bkImg && _this.bkImgRect) {
@@ -49,52 +52,53 @@ var RenderLayer = /** @class */ (function (_super) {
             ctx.drawImage(_this.offscreen, 0, 0, _this.width, _this.height);
         };
         _this.offscreen = Store.get(_this.generateStoreKey('LT:offscreen'));
-        commonStore[TID].parentElem.appendChild(_this.canvas);
+        _this.parentElem.appendChild(_this.canvas);
         return _this;
     }
     RenderLayer.prototype.scale = function (scale, center, w, h){
-        if(!this.bkImgRect) {
-            this.scaleX = w ? w : scale;
-            this.scaleY = h ? h : scale;
-            this.ratio = scale;
-            return;
-        }
+        if(!this.data.bkImage) return;
         if(!center) {
-            center = this.bkImgRect.center;
+            center = this.data.bkImageRect ? this.data.bkImageRect.center : this.bgRect.center;
         }
         if (!w) {
             w = scale;
-            this.bkImgRect.x = center.x - (center.x - this.bkImgRect.x) * scale;
-        }else {
-            this.bkImgRect.x = this.bgRect.x;
+            if(this.data.bkImageRect) {
+                this.data.bkImageRect.x = center.x - (center.x - this.data.bkImageRect.x) * w;
+            }else {
+                this.bgRect.x = center.x - (center.x - this.bgRect.x) * w;
+            }
         }
         if (!h) {
             h = scale;
-            this.bkImgRect.y = center.y - (center.y - this.bkImgRect.y) * scale;
+            if(this.data.bkImageRect){
+                this.data.bkImageRect.y = center.y - (center.y - this.data.bkImageRect.y) * h;
+            }else {
+                this.bgRect.y = center.y - (center.y - this.bgRect.y) * h;
+            }
+        }
+        if(this.data.bkImageRect) {
+            this.data.bkImageRect.width *= w;
+            this.data.bkImageRect.height *= h;
+            this.bkImgRect = this.data.bkImageRect;
         }else {
-            this.bkImgRect.y = this.bgRect.y;
+            if(this.initImage) {
+                this.bgRect.width *= w;
+                this.bgRect.height *= h;
+            }
+            this.bkImgRect = this.bgRect;
         }
-        this.bkImgRect.width *= w;
-        this.bkImgRect.height *= h;
-        this.calcCenter();
-    };
-    RenderLayer.prototype.calcCenter = function () {
-        this.bkImgRect.center.x = this.bkImgRect.x + this.bkImgRect.width / 2;
-        this.bkImgRect.center.y = this.bkImgRect.y + this.bkImgRect.height / 2;
     };
     RenderLayer.prototype.loadBkImg = function (cb, pixi) {
         var _this = this;
-        const bkImage = commonStore[_this.TID].data.bkImage;
-        if (!bkImage || this.initImage) {
+        if (!this.data.bkImage || this.initImage) {
             return;
         }
         this.bkImg = new Image();
         this.bkImg.crossOrigin = 'anonymous';
-        this.bkImg.src = bkImage;
+        this.bkImg.src = this.data.bkImage;
         this.bkImg.onload = function () {
             if(pixi && !_this.bkImgRect) {
-                _this.bkImgRectResize({width: _this.width, height: _this.height});
-                _this.scale(_this.ratio, undefined, _this.scaleX, _this.scaleY);
+                _this.bkImgRectResize({width: _this.canvas.width, height: _this.canvas.height});
             }else {
                 //_this.bkImgRect = _this.coverRect(_this.canvas.width, _this.canvas.height, _this.bkImg.width, _this.bkImg.height);
             }
@@ -102,6 +106,10 @@ var RenderLayer = /** @class */ (function (_super) {
                 cb();
             }
             _this.initImage = true;
+            _this.bgRect.center.x = _this.width / 2;
+            _this.bgRect.center.y = _this.height / 2;
+            _this.bgRect.width = _this.width;
+            _this.bgRect.height = _this.height;
         };
     };
     RenderLayer.prototype.clearBkImg = function () {
@@ -109,8 +117,14 @@ var RenderLayer = /** @class */ (function (_super) {
         this.bkImg = null;
         this.initImage = false;
         this.bgRect = {
+            center: {
+                x: this.width / 2,
+                y: this.height / 2
+            },
             x: 0,
-            y: 0
+            y: 0,
+            width: this.width,
+            height: this.height
         }
     };
     RenderLayer.prototype.coverRect = function (canvasWidth, canvasHeight, imgWidth, imgHeight) {
@@ -135,50 +149,37 @@ var RenderLayer = /** @class */ (function (_super) {
     };
 
     RenderLayer.prototype.bkImgRectResize = function (size) {
-        const bkImageRect = commonStore[this.TID].data.bkImageRect;
+        const bkImageRect = this.data.bkImageRect;
         if(!size) return;
-        const { width, height } = size;
         if(bkImageRect) {
             let x = bkImageRect.x ? Number(bkImageRect.x) : 0;
             let y = bkImageRect.y ? Number(bkImageRect.y) : 0;
+            const { width, height } = size;
             let bkWidth = bkImageRect.width ? Number(bkImageRect.width) : width;
             let bkHeight = bkImageRect.height ? Number(bkImageRect.height) : height;
             this.bkImgRect = {
-                center: {
-                    x: x + bkWidth / 2,
-                    y: y + bkHeight / 2
-                },
-                x,
-                y,
-                width: bkWidth,
-                height: bkHeight
-            };
-            this.bgRect = {
-                x,
-                y
+                x: x,
+                y: y,
+                width: bkImageRect.width ? bkImageRect.width : width,
+                height: bkImageRect.height ? bkImageRect.height : height
             };
         }else {
-            this.bkImgRect = {
-                center: {
-                    x: width / 2,
-                    y: height / 2
-                },
-                x: 0,
-                y: 0,
-                width,
-                height
-            };
+            this.bkImgRect = this.bgRect;
         }
     };
 
     RenderLayer.prototype.destroy = function() {
 
+        this.data = null;
+
         this.canvas = null;
 
         this.render = null;
 
         this.offscreen = null;
 
+        this.options = null;
+
     }
     return RenderLayer;
 }(Canvas));

package/core/src/socket.d.ts

@@ -0,0 +1,10 @@
+import { TopologyData } from './models';
+export declare class Socket {
+    url: string;
+    data: TopologyData;
+    socket: WebSocket;
+    constructor(url: string, data: TopologyData);
+    init(): void;
+    onmessage: (e: MessageEvent) => void;
+    close(): void;
+}