dcim-topology2d 2.2.0 → 3.0.2

package/core/src/preview.js

@@ -1,4 +1,3 @@
-import {Store} from "le5le-store";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -15,19 +14,7 @@ var __extends = (this && this.__extends) || (function () {
 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,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;
                     }
@@ -100,15 +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();
             }
-            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);
@@ -117,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;
                 }
             }
         };
@@ -140,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:
@@ -198,112 +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);
-            }
-        };
         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) {
+    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,
@@ -311,35 +214,31 @@ 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 w = (width - padding[1] - padding[3]) / rect.width;
         var h = (height - padding[0] - padding[2]) / rect.height;
         var ratio = w;
         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.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));

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;
+}

package/core/src/socket.js

@@ -0,0 +1,51 @@
+import { EventType } from './models';
+var Socket = /** @class */ (function () {
+    function Socket(url, data) {
+        var _this = this;
+        this.url = url;
+        this.data = data;
+        this.onmessage = function (e) {
+            if (!_this.data.pens.length || !e || !e.data) {
+                return;
+            }
+            var msg;
+            try {
+                msg = JSON.parse(e.data);
+            }
+            catch (error) {
+                msg = e.data;
+            }
+            for (var _i = 0, _a = _this.data.pens; _i < _a.length; _i++) {
+                var item = _a[_i];
+                for (var _b = 0, _c = item.events; _b < _c.length; _b++) {
+                    var event_1 = _c[_b];
+                    if (event_1.type === EventType.WebSocket) {
+                        if (event_1.name && event_1.name === msg.event) {
+                            item.doSocketMqtt(event_1, msg.data, _this.socket);
+                        }
+                        else if (!event_1.name && msg) {
+                            item.doSocketMqtt(event_1, msg, _this.socket);
+                        }
+                    }
+                }
+            }
+        };
+        this.init();
+    }
+    Socket.prototype.init = function () {
+        var _this = this;
+        this.socket = new WebSocket(this.url);
+        this.socket.onmessage = this.onmessage;
+        this.socket.onclose = function () {
+            console.log('Canvas websocket closed and reconneting...');
+            _this.init();
+        };
+    };
+    Socket.prototype.close = function () {
+        this.socket.onclose = null;
+        this.socket.close();
+    };
+    return Socket;
+}());
+export { Socket };
+//# sourceMappingURL=socket.js.map

package/core/src/socket.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"socket.js","sourceRoot":"","sources":["../../../packages/core/src/socket.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAgB,MAAM,UAAU,CAAC;AAEnD;IAEE,gBAAmB,GAAW,EAAS,IAAkB;QAAzD,iBAEC;QAFkB,QAAG,GAAH,GAAG,CAAQ;QAAS,SAAI,GAAJ,IAAI,CAAc;QAczD,cAAS,GAAG,UAAC,CAAe;YAC1B,IAAI,CAAC,KAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE;gBAC3C,OAAO;aACR;YAED,IAAI,GAAkC,CAAC;YACvC,IAAI;gBACF,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;aAC1B;YAAC,OAAO,KAAK,EAAE;gBACd,GAAG,GAAG,CAAC,CAAC,IAAI,CAAC;aACd;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,SAAS,EAAE;wBACtC,IAAI,OAAK,CAAC,IAAI,IAAI,OAAK,CAAC,IAAI,KAAK,GAAG,CAAC,KAAK,EAAE;4BAC1C,IAAI,CAAC,YAAY,CAAC,OAAK,EAAE,GAAG,CAAC,IAAI,EAAE,KAAI,CAAC,MAAM,CAAC,CAAC;yBACjD;6BAAM,IAAI,CAAC,OAAK,CAAC,IAAI,IAAI,GAAG,EAAE;4BAC7B,IAAI,CAAC,YAAY,CAAC,OAAK,EAAE,GAAG,EAAE,KAAI,CAAC,MAAM,CAAC,CAAC;yBAC5C;qBACF;iBACF;aACF;QACH,CAAC,CAAC;QApCA,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAED,qBAAI,GAAJ;QAAA,iBAQC;QAPC,IAAI,CAAC,MAAM,GAAG,IAAI,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACtC,IAAI,CAAC,MAAM,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QAEvC,IAAI,CAAC,MAAM,CAAC,OAAO,GAAG;YACpB,OAAO,CAAC,GAAG,CAAC,4CAA4C,CAAC,CAAC;YAC1D,KAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC,CAAC;IACJ,CAAC;IA2BD,sBAAK,GAAL;QACE,IAAI,CAAC,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC;QAC3B,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;IACtB,CAAC;IACH,aAAC;AAAD,CAAC,AA7CD,IA6CC"}

package/core/src/utils/canvas.js

@@ -1,4 +1,4 @@
-import { Point } from '../models';
+import { Point } from '../models/point';
 export function flatNodes(nodes) {
     var result = {
         nodes: [],