dcim-topology2d 1.0.3 → 1.1.1

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;

package/core/src/renderLayer.js

@@ -13,22 +13,20 @@ var __extends = (this && this.__extends) || (function () {
 })();
 import { Store } from 'le5le-store';
 import { Canvas } from './canvas';
-import {previewType} from './utils/construction'
+import { commonStore } from './store'
 //let isQttFillStyle = false;
 var RenderLayer = /** @class */ (function (_super) {
     __extends(RenderLayer, _super);
-    function RenderLayer(parentElem, options, TID) {
+    function RenderLayer(TID) {
         //isQttFillStyle = false;
-        if (options === void 0) { options = {}; }
-        var _this = _super.call(this, parentElem, options, TID) || this;
-        _this.parentElem = parentElem;
-        _this.options = options;
+        var _this = _super.call(this, TID) || this;
         _this.bkImgRect = null;
         _this.initImage = false;
         _this.coverType = 'container';
         _this.bgRect = null;
         _this.render = function () {
-            if (_this.data.bkImage && !_this.initImage) {
+            if(!commonStore || !commonStore[TID]) return;
+            if (commonStore[TID].data.bkImage && !_this.initImage) {
                 _this.loadBkImg(_this.render, 'pixi');
                 return;
             }
@@ -37,12 +35,8 @@ var RenderLayer = /** @class */ (function (_super) {
             }
             var ctx = _this.canvas.getContext('2d');
             ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
-            // 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;
+            if (commonStore[TID].data.bkColor) {
+                ctx.fillStyle = commonStore[TID].data.bkColor;
                 ctx.fillRect(0, 0, _this.width, _this.height);
             }
             if (_this.bkImg && _this.bkImgRect) {
@@ -52,34 +46,38 @@ var RenderLayer = /** @class */ (function (_super) {
             ctx.drawImage(_this.offscreen, 0, 0, _this.width, _this.height);
         };
         _this.offscreen = Store.get(_this.generateStoreKey('LT:offscreen'));
-        _this.parentElem.appendChild(_this.canvas);
+        commonStore[TID].parentElem.appendChild(_this.canvas);
         return _this;
     }
     RenderLayer.prototype.scale = function (scale, center, w, h){
-        if(!this.data.bkImage) return;
+        const TID = this.TID;
+        if(!commonStore || !commonStore[TID]) return;
+        const bkImage = commonStore[TID].data.bkImage;
+        const bkImageRect = commonStore[TID].data.bkImageRect;
+        if(!bkImage) return;
         if(!center) {
-            center = this.data.bkImageRect ? this.data.bkImageRect.center : this.bgRect.center;
+            center = bkImageRect ? bkImageRect.center : this.bgRect.center;
         }
         if (!w) {
             w = scale;
-            if(this.data.bkImageRect) {
-                this.data.bkImageRect.x = center.x - (center.x - this.data.bkImageRect.x) * w;
+            if(bkImageRect) {
+                bkImageRect.x = center.x - (center.x - bkImageRect.x) * w;
             }else {
                 this.bgRect.x = center.x - (center.x - this.bgRect.x) * w;
             }
         }
         if (!h) {
             h = scale;
-            if(this.data.bkImageRect){
-                this.data.bkImageRect.y = center.y - (center.y - this.data.bkImageRect.y) * h;
+            if(bkImageRect){
+                bkImageRect.y = center.y - (center.y - 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;
+        if(bkImageRect) {
+            bkImageRect.width *= w;
+            bkImageRect.height *= h;
+            this.bkImgRect = bkImageRect;
         }else {
             if(this.initImage) {
                 this.bgRect.width *= w;
@@ -90,12 +88,13 @@ var RenderLayer = /** @class */ (function (_super) {
     };
     RenderLayer.prototype.loadBkImg = function (cb, pixi) {
         var _this = this;
-        if (!this.data.bkImage || this.initImage) {
+        const bkImage = commonStore[_this.TID].data.bkImage;
+        if (!bkImage || this.initImage) {
             return;
         }
         this.bkImg = new Image();
         this.bkImg.crossOrigin = 'anonymous';
-        this.bkImg.src = this.data.bkImage;
+        this.bkImg.src = bkImage;
         this.bkImg.onload = function () {
             if(pixi && !_this.bkImgRect) {
                 _this.bkImgRectResize({width: _this.canvas.width, height: _this.canvas.height});
@@ -149,7 +148,7 @@ var RenderLayer = /** @class */ (function (_super) {
     };
 
     RenderLayer.prototype.bkImgRectResize = function (size) {
-        const bkImageRect = this.data.bkImageRect;
+        const bkImageRect = commonStore[this.TID].bkImageRect;
         if(!size) return;
         if(bkImageRect) {
             let x = bkImageRect.x ? Number(bkImageRect.x) : 0;
@@ -170,16 +169,12 @@ var RenderLayer = /** @class */ (function (_super) {
 
     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/store/common.d.ts

@@ -0,0 +1,9 @@
+import { Pen } from '../models';
+// @ts-ignore
+export const commonStore: {
+    canvasDraws: {
+        [key: string]: (ctx: CanvasRenderingContext2D, pen: Pen) => void;
+    };
+    anchors: { [key: string]: (pen: Pen) => void }; 
+    htmlElements: { [key: string]: HTMLDivElement }; // html元素
+};

package/core/src/store/common.js

@@ -0,0 +1,5 @@
+export var commonStore = {
+    canvasDraws: {},
+    anchors: {},
+    htmlElements: {}
+};

package/core/src/store/data.d.ts

@@ -0,0 +1,126 @@
+// @ts-ignore
+import { default as mitt, Emitter } from 'mitt';
+import { Pen, Lock } from '../models';
+import {Options, DefalutOptions} from '../options';
+import {s8} from '../utils';
+import { commonStore } from './common'
+// 2D可视化的data数据
+export interface visualization2DData {
+    pens: Pen[];
+    lineName: string;
+    fromArrowType: string;
+    toArrowType: string;
+    scale: number;
+    locked: Lock;
+    bkImage: string;
+    bkColor: string;
+    grid?: boolean;
+    websocket?: string;
+    mqttUrl?: string;
+    mqttOptions?: {
+        clientId?: string;
+        username?: string;
+        password?: string;
+    };
+    mqttTopics?: string;
+    manualCps?: boolean;
+    dataConstruct?: any;
+    data?: any;
+    bkImageRect?: any;
+}
+// 2D可视化使用到的数据仓库
+export interface visualization2DStore {
+    id: string;
+    data: visualization2DData;
+    pens: { [key: string]: Pen };
+    options: Options;
+    cacheDatas?: {
+        data: visualization2DData;
+    }[];
+    emitter: Emitter;
+    dpiRatio?: number;
+    lastScale?: number; //记录上次模版的scale
+    ratioCord: {
+        ratio?: number;
+        scaleX?: number;
+        scaleY?: number;
+    },
+    parentElem: HTMLElement
+}
+
+// @ts-ignore
+export const createStore = () => {
+    return {
+        id: '',
+        data: {
+            pens: [],
+            lineName: 'curve',
+            fromArrowType: '',
+            toArrowType: 'triangleSolid',
+            scale: 1,
+            locked: Lock.None,
+            bkImageRect: null,
+            mqttOptions: {
+                clientId: s8()
+            },
+            dataConstruct: {}
+        },
+        pens: {},
+        options: { ...DefalutOptions },
+        emitter: mitt(),
+        cacheDatas: [],
+        dpiRatio: 1,
+        lastScale: 1,
+        ratioCord: {
+            ratio: 1,
+            scaleX: 1,
+            scaleY: 1
+        },
+        parentElem: null
+    } as visualization2DStore;
+};
+// @ts-ignore
+export const useStore = (id = 'default'): visualization2DStore => {
+    if (!commonStore[id]) {
+        // @ts-ignore
+        commonStore[id] = createStore();
+        commonStore[id].id = id;
+    }
+    return commonStore[id];
+};
+
+// @ts-ignore
+export const clearStore = (store: visualization2DStore) => {
+    store.data = {
+        bkColor: '',
+        bkImage: '',
+        data: undefined,
+        grid: false,
+        manualCps: false,
+        mqttTopics: '',
+        mqttUrl: '',
+        websocket: '',
+        pens: [],
+        lineName: 'curve',
+        fromArrowType: '',
+        toArrowType: 'triangleSolid',
+        scale: 1,
+        locked: Lock.None,
+        bkImageRect: null,
+        mqttOptions: {
+            clientId: s8()
+        },
+        dataConstruct: {}
+    };
+    store.lastScale = store.data.scale;
+    store.pens = {};
+    store.options = {};
+    store.cacheDatas = [];
+    store.dpiRatio = 1;
+    store.lastScale = 1;
+    store.ratioCord = {
+        ratio: 1,
+        scaleX: 1,
+        scaleY: 1
+    }
+};

package/core/src/store/data.js

@@ -0,0 +1,80 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { default as mitt } from 'mitt';
+import { Lock } from '../models';
+import {DefalutOptions} from '../options';
+import {s8} from '../utils';
+import { commonStore } from './common'
+export var createStore = function () {
+    return {
+        id: '',
+        data: {
+            pens: [],
+            lineName: 'curve',
+            fromArrowType: '',
+            toArrowType: 'triangleSolid',
+            scale: 1,
+            locked: Lock.None,
+            bkImageRect: null,
+            mqttOptions: {
+                clientId: s8()
+            },
+            dataConstruct: {}
+        },
+        pens: {},
+        options: { ...DefalutOptions },
+        emitter: mitt(),
+        cacheDatas: [],
+        dpiRatio: 1,
+        lastScale: 1,
+        ratioCord: {
+            ratio: 1,
+            scaleX: 1,
+            scaleY: 1
+        },
+        parentElem: null
+    };
+};
+export var useStore = function (id) {
+    if (id === void 0) { id = 'default'; }
+    if (!commonStore[id]) {
+        commonStore[id] = createStore();
+        commonStore[id].id = id;
+    }
+    return commonStore[id];
+};
+export var clearStore = function (store, del) {
+    store.lastScale = store.data.scale;
+    store.data = {
+        pens: [],
+        lineName: 'curve',
+        fromArrowType: '',
+        toArrowType: 'triangleSolid',
+        scale: 1,
+        locked: Lock.None,
+        bkImageRect: null,
+        mqttOptions: {
+            clientId: s8()
+        },
+        dataConstruct: {}
+    };
+    store.pens = {};
+    store.cacheDatas = [];
+    store.dpiRatio = 1;
+    store.lastScale = 1;
+    store.ratioCord = {
+        ratio: 1,
+        scaleX: 1,
+        scaleY: 1
+    };
+    if(del) delete commonStore[store.id];
+};

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

@@ -0,0 +1,2 @@
+export * from './data'
+export * from './common'

package/core/src/store/index.js

@@ -0,0 +1,2 @@
+export * from './data'
+export * from './common'

package/core/src/utils/conversion.d.ts

@@ -0,0 +1,7 @@
+import {Node} from "../models";
+
+export declare function setTagIdData(data: any): [];
+export declare function setKpiAddrData(data: any): [];
+export declare function setAssetIdData(data: any): [];
+export declare function setAreaIdData(data: any): [];
+export declare function setThreeCategoryIdData(pen: Node, data: any): [];

package/core/src/utils/conversion.js

@@ -0,0 +1,54 @@
+export function setTagIdData(data) {
+    return [{
+        "key": "tagId",
+        "value": data.tagId,
+        "isControlDis": data.isControlDis,
+        "type": data.tagType,
+        "tagVal": data.value,
+        "valExplain": data.valExplain,
+        "tagId": data.tagId
+    }, {
+        "key": "测点名称",
+        "value": data.tagName
+    }];
+}
+export function setKpiAddrData(data) {
+    return [{
+        "key": "kpiAddr",
+        "value": data.kpiId + '_' + data.kpiAddr,
+        "isControlDis": data.isControlDis,
+        "type": data.tagType
+    }, {
+        "key": "指标名称",
+        "value": data.kpiName
+    }];
+}
+export function setAssetIdData(data) {
+    return [{
+        "key": "assetId",
+        "value": data.id
+    }, {
+        "key": "资产名称",
+        "value": data.name
+    }];
+}
+export function setAreaIdData(data) {
+    return [{
+        "key": "areaId",
+        "value": data.id
+    }, {
+        "key": "区域名称",
+        "value": data.name
+    }];
+}
+export function setThreeCategoryIdData(pen, data) {
+    let params = [];
+    const hasThreeCategoryId = pen.data.find((tc) => {
+        return tc.key === 'threeCategoryId' && tc.value.includes(data.threeCategoryId);
+    });
+    if(!hasThreeCategoryId) params = [{
+        "key": "threeCategoryId",
+        "value": data.threeCategoryId
+    }];
+    return params;
+}

package/core/src/utils/dom.d.ts

@@ -1,6 +1,7 @@
-import { Node, TopologyData } from '../models';
+import { Node } from '../models';
+import { visualization2DStore } from '../store';
 export declare let DomElements: {};
-export declare function createChildrenDivByElementId(node: Node, data?: TopologyData): HTMLDivElement;
-export declare function setStyleForElementIdDiv(node: Node, elem: HTMLElement, data: TopologyData): void;
+export declare function createChildrenDivByElementId(node: Node, data?: visualization2DStore): HTMLDivElement;
+export declare function setStyleForElementIdDiv(node: Node, elem: HTMLElement, data: visualization2DStore): void;
 export declare function createDiv(node: Node): HTMLDivElement;
 export declare function loadJS(url: string, callback?: () => void, render?: boolean): void;

package/core/src/utils/dom.js

@@ -1,7 +1,9 @@
 import { Store } from 'le5le-store';
 import { Lock } from '../models'
+import {commonStore} from '../store';
 export let DomElements = {};
 export function createChildrenDivByElementId(node, data) {
+  if(!data) data = commonStore[node.TID].data;
   if (!DomElements[node.id]) {
     DomElements[node.id] = document.getElementById(node.id);
     if (DomElements[node.id]) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dcim-topology2d",
-  "version": "1.0.3",
+  "version": "1.1.1",
   "description": "",
   "main": "-",
   "scripts": {

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

@@ -1,26 +0,0 @@
-import { Pen } from './pen';
-import { Lock } from './status';
-export declare class TopologyData {
-    pens: Pen[];
-    lineName: string;
-    fromArrowType: string;
-    toArrowType: string;
-    scale: number;
-    locked: Lock;
-    bkImage: string;
-    bkColor: string;
-    grid?: boolean;
-    websocket?: string;
-    mqttUrl?: string;
-    mqttOptions?: {
-        clientId?: string;
-        username?: string;
-        password?: string;
-    };
-    mqttTopics?: string;
-    manualCps?: boolean;
-    dataConstruct?: any;
-    data?: any;
-    bkImageRect?: any;
-    constructor(json?: any);
-}