dcim-topology2d 1.1.5 → 2.0.2

package/core/src/preview.js

@@ -14,7 +14,18 @@ var __extends = (this && this.__extends) || (function () {
 import {KeyType} from './options';
 import {Point} from './models';
 import { Common } from './common'
-import {downDataType, formatPadding, mousMoveFun, mousDownFun, omouseEventPrototDoWindowFn} from './utils';
+import {
+    downDataType,
+    previewType,
+    formatPadding,
+    mousMoveFun,
+    mousDownFun,
+    omouseEventPrototDoWindowFn
+} from './utils';
+import {
+    resetSelectInteractiveState,
+    setSelectDropdownInteractiveState
+} from './element';
 
 var Preview = (function (_super) {
     __extends(Preview, _super);
@@ -74,7 +85,8 @@ var Preview = (function (_super) {
             if (_this.inputObj) {
                 _this.setNodeText();
             }
-            const {eventType, value} = mousDownFun(_this.store.options.type, _this.moveIn.eventNode);
+            resetSelectInteractiveState(_this.moveIn.hoverNode);
+            const {eventType, value, staticType} = mousDownFun(_this.store.options.type, _this.moveIn.eventNode);
             if (_this.moveIn.type == _this.moveInType.Nodes) {
                 _this.setAttributeForCanvasPoint('pointer');
                 switch (eventType) {
@@ -91,10 +103,14 @@ var Preview = (function (_super) {
                         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, staticType, previewType.Dcim);
+                        break;
                 }
             }
         };
@@ -114,7 +130,7 @@ var Preview = (function (_super) {
         _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.store.options.disableScale || _this.store.options.type === 'dialog') {
                 return;
             }
             switch (_this.store.options.scaleKey) {
@@ -162,6 +178,14 @@ var Preview = (function (_super) {
             _this.divLayer.canvas.focus();
             return false;
         };
+        window.onresize = function () {
+            const isFullScreen = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullscreenElement;
+            if(!isFullScreen && _this.isFullScreen){
+                _this.moveIn.hoverNode.text = '全屏';
+                _this.fitViewPreview(_this.isFullScreen);
+                _this.isFullScreen = false;
+            }
+        };
         return _this;
     }
     Preview.prototype.setAttributeForCanvasPoint = function (type){
@@ -175,43 +199,30 @@ var Preview = (function (_super) {
     };
     // open - redraw by the data
     Preview.prototype.open = function (topoJSon, type) {
-        this.conversionData(topoJSon, type);
+        this.conversionData(topoJSon);
         this.setBKImageRect();
         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
+        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) {
             return;
         }
-        const scaleX = w ? w : scale;
-        const scaleY = h ? h : scale;
         this.store.data.scale *= scale;
-        if(this.isFullScreen) {
-            this.store.ratioCord.ratio *= scale;
-            this.store.ratioCord.scaleX *= scaleX;
-            this.store.ratioCord.scaleY *= scaleY;
-        }else {
-            this.store.ratioCord = {
-                ratio: 1,
-                scaleX: 1,
-                scaleY: 1
-            }
-        }
         !center && (center = this.getRect().center);
         for (var _i = 0, _a = this.store.data.pens; _i < _a.length; _i++) {
             var item = _a[_i];
@@ -239,6 +250,11 @@ var Preview = (function (_super) {
         var padding = formatPadding(viewPadding || this.store.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;
@@ -246,11 +262,8 @@ var Preview = (function (_super) {
         if (w > h) {
             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;
-        }
+        // 保持缩放后的还原度
+        if(typeof restore === 'boolean' && restore)  ratio = w;
         this.scale(ratio, undefined, w, h);
         this.canvas.scale(ratio, undefined, w, h);
         // 7. X抽滚动条隐藏
@@ -261,6 +274,7 @@ var Preview = (function (_super) {
         this.onMouseMove = null;
         this.onmousedown = null;
         this.onmouseup = null;
+        window.onresize = null;
     };
     return Preview;
 }(Common));

package/core/src/renderLayer.d.ts

@@ -5,12 +5,6 @@ export declare class RenderLayer extends Canvas {
     offscreen: any;
     bkImg: HTMLImageElement;
     bkImgRect: {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-    };
-    bgRect: {
         center: {
             x: number;
             y: number;
@@ -20,6 +14,16 @@ export declare class RenderLayer extends Canvas {
         width: number;
         height: number;
     };
+    bgRect: {
+        // center: {
+        //     x: number;
+        //     y: number;
+        // },
+        x: number;
+        y: number;
+        // width: number;
+        // height: number;
+    };
     constructor(TID: String);
     loadBkImg(cb?: any): void;
     clearBkImg(): void;

package/core/src/renderLayer.js

@@ -24,6 +24,9 @@ var RenderLayer = /** @class */ (function (_super) {
         _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) {
@@ -50,41 +53,34 @@ var RenderLayer = /** @class */ (function (_super) {
         return _this;
     }
     RenderLayer.prototype.scale = function (scale, center, w, h){
-        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(!this.bkImgRect) {
+            this.scaleX = w ? w : scale;
+            this.scaleY = h ? h : scale;
+            this.ratio = scale;
+            return;
+        }
         if(!center) {
-            center = bkImageRect ? bkImageRect.center : this.bgRect.center;
+            center = this.bkImgRect.center;
         }
         if (!w) {
             w = scale;
-            if(bkImageRect) {
-                bkImageRect.x = center.x - (center.x - bkImageRect.x) * w;
-            }else {
-                this.bgRect.x = center.x - (center.x - this.bgRect.x) * w;
-            }
+            this.bkImgRect.x = center.x - (center.x - this.bkImgRect.x) * scale;
+        }else {
+            this.bkImgRect.x = this.bgRect.x;
         }
         if (!h) {
             h = scale;
-            if(bkImageRect){
-                bkImageRect.y = center.y - (center.y - bkImageRect.y) * h;
-            }else {
-                this.bgRect.y = center.y - (center.y - this.bgRect.y) * h;
-            }
-        }
-        if(bkImageRect) {
-            bkImageRect.width *= w;
-            bkImageRect.height *= h;
-            this.bkImgRect = bkImageRect;
+            this.bkImgRect.y = center.y - (center.y - this.bkImgRect.y) * scale;
         }else {
-            if(this.initImage) {
-                this.bgRect.width *= w;
-                this.bgRect.height *= h;
-            }
-            this.bkImgRect = this.bgRect;
+            this.bkImgRect.y = this.bgRect.y;
         }
+        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;
@@ -98,6 +94,7 @@ var RenderLayer = /** @class */ (function (_super) {
         this.bkImg.onload = function () {
             if(pixi && !_this.bkImgRect) {
                 _this.bkImgRectResize({width: _this.canvas.width, height: _this.canvas.height});
+                _this.scale(_this.ratio, undefined, _this.scaleX, _this.scaleY);
             }else {
                 //_this.bkImgRect = _this.coverRect(_this.canvas.width, _this.canvas.height, _this.bkImg.width, _this.bkImg.height);
             }
@@ -105,10 +102,6 @@ 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 () {
@@ -116,14 +109,8 @@ 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,
-            width: this.width,
-            height: this.height
+            y: 0
         }
     };
     RenderLayer.prototype.coverRect = function (canvasWidth, canvasHeight, imgWidth, imgHeight) {
@@ -157,13 +144,19 @@ var RenderLayer = /** @class */ (function (_super) {
             let bkWidth = bkImageRect.width ? Number(bkImageRect.width) : width;
             let bkHeight = bkImageRect.height ? Number(bkImageRect.height) : height;
             this.bkImgRect = {
-                x: x,
-                y: y,
-                width: bkImageRect.width ? bkImageRect.width : width,
-                height: bkImageRect.height ? bkImageRect.height : height
+                center: {
+                    x: x + bkWidth / 2,
+                    y: y + bkHeight / 2
+                },
+                x,
+                y,
+                width: bkWidth,
+                height: bkHeight
+            };
+            this.bgRect = {
+                x,
+                y
             };
-        }else {
-            this.bkImgRect = this.bgRect;
         }
     };
 

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

@@ -40,14 +40,26 @@ export interface visualization2DStore {
     emitter: Emitter;
     dpiRatio?: number;
     lastScale?: number; //记录上次模版的scale
-    ratioCord: {
-        ratio?: number;
-        scaleX?: number;
-        scaleY?: number;
-    },
     parentElem: HTMLElement
 }
-
+export interface mqttData {
+    data: null,
+    initData: {},
+    params: {
+        tagIds?: [],
+        kpiAddrs?: [],
+        tagEcharts?: [],
+        assetIds?: [],
+        areaIds?: [],
+        varVaule?: [],
+        echartData?: [],
+        echartAssemblyData?: [],
+        routingkey?: string,
+        pathRewrite?: string
+    }
+}
+export const syncMqttData: mqttData;
+export declare function clearMqttParams(): void;
 // @ts-ignore
 export const createStore = () => {
     return {
@@ -71,11 +83,6 @@ export const createStore = () => {
         cacheDatas: [],
         dpiRatio: 1,
         lastScale: 1,
-        ratioCord: {
-            ratio: 1,
-            scaleX: 1,
-            scaleY: 1
-        },
         parentElem: null
     } as visualization2DStore;
 };
@@ -90,7 +97,7 @@ export const useStore = (id = 'default'): visualization2DStore => {
 };
 
 // @ts-ignore
-export const clearStore = (store: visualization2DStore) => {
+export const clearStore = (store: visualization2DStore, del: string) => {
     store.data = {
         bkColor: '',
         bkImage: '',
@@ -118,9 +125,4 @@ export const clearStore = (store: visualization2DStore) => {
     store.cacheDatas = [];
     store.dpiRatio = 1;
     store.lastScale = 1;
-    store.ratioCord = {
-        ratio: 1,
-        scaleX: 1,
-        scaleY: 1
-    }
 };

package/core/src/store/data.js

@@ -14,6 +14,35 @@ import { Lock } from '../models';
 import {DefalutOptions} from '../options';
 import {s8} from '../utils';
 import { commonStore } from './common'
+import { clearDataPool, removeAllElement } from '../../../store';
+export const syncMqttData = {
+    data: null, // 实时值
+    initData: {}, // 初始值
+    params: {
+        tagIds: [],
+        kpiAddrs: [],
+        tagEcharts: [],
+        assetIds: [],
+        areaIds: [],
+        varVaule: [],
+        echartData: [],
+        echartAssemblyData: [],
+        routingkey: '',
+        pathRewrite: ''
+    }
+}
+export const clearMqttParams = function () {
+    syncMqttData.params.tagIds = [];
+    syncMqttData.params.kpiAddrs = [];
+    syncMqttData.params.tagEcharts = [];
+    syncMqttData.params.assetIds = [];
+    syncMqttData.params.areaIds = [];
+    syncMqttData.params.varVaule = [];
+    syncMqttData.params.echartData = [];//统计图表组件类型ID
+    syncMqttData.params.echartAssemblyData = [];//统计图表组件类型ID
+    syncMqttData.params.routingkey = '';
+    syncMqttData.params.pathRewrite = '';
+}
 export var createStore = function () {
     return {
         id: '',
@@ -37,11 +66,6 @@ export var createStore = function () {
         cacheDatas: [],
         dpiRatio: 1,
         lastScale: 1,
-        ratioCord: {
-            ratio: 1,
-            scaleX: 1,
-            scaleY: 1
-        },
         parentElem: null
     };
 };
@@ -69,14 +93,16 @@ export var clearStore = function (store, del) {
         },
         dataConstruct: {}
     };
-    store.pens = {};
+    store.pens = {}; // 先保留，后期优化提取变量用
     store.cacheDatas = [];
     store.dpiRatio = 1;
     store.lastScale = 1;
-    store.ratioCord = {
-        ratio: 1,
-        scaleX: 1,
-        scaleY: 1
-    };
-    if(del) delete commonStore[store.id];
+    clearDataPool();
+    if(del) {
+        syncMqttData.data = null;
+        syncMqttData.initData = {};
+        clearMqttParams();
+        delete commonStore[store.id];
+        removeAllElement();
+    }
 };

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

@@ -0,0 +1,6 @@
+import {Node} from '../models';
+
+export declare function setInitNodeDataValidat(node: any, TID: string, type: string, order: number): void;
+export declare function initDefaultValidat(node: any, retData: any): void;
+export declare function setDefaultNodeValidat(node: any, retData: any): any;
+export declare function initSwitchTabData(node: Node): void;

package/core/src/utils/assignment.js

@@ -0,0 +1,138 @@
+// 变量赋值操作
+import {syncMqttData} from '../store';
+import { setConfItemNode } from '../healps';
+import { EventAction } from '../models';
+import {switchTabDataPool} from "../../../store";
+
+/**
+ * 在节点注册前初始化node数据
+ * @param node 节点数据
+ * @param TID 数据键
+ * @param type topology类型
+ * @param order 节点序列
+ */
+export function setInitNodeDataValidat(node, TID, type, order) {
+
+    const syncData = syncMqttData.data;
+
+    node.TID = TID;
+
+    if(typeof order === "number") node.order = order;
+    if(type !== 'topology') node.selectDropdown = false;
+
+    initDefaultValidat(node, syncData);
+
+    setDefaultNodeValidat(node, syncData);
+
+    if (node.children && node.children.length) {
+
+        node.children.map((_item) => {
+
+            setInitNodeDataValidat(_item, TID, type);
+
+        })
+
+    }
+}
+// 初始化默认节点值
+export function initDefaultValidat(node, retData) {
+    node.defaultFillStyle = node.fillStyle;
+    node.defaultFontColor = node.font.color;
+    if (node.name === 'line') {
+        node.defaultStrokeStyle = node.strokeStyle;
+    }
+    // 变量类型数据展示，不需要实时更新
+    if(Array.isArray(node.data) && retData && retData.varData) {
+        let typeName = '';
+        let imgs = '';
+        const varData = retData.varData;
+        node.data.map((vd) => {
+            if(vd.key.includes('varValue') && varData[vd.value]){
+                const varNode = varData[vd.value];
+                const showType = varNode.showType ? parseInt(varNode.showType) : 1;
+                if(showType === 1 && varNode.value) typeName += typeName ? `,${varNode.value}` : varNode.value;
+                if(showType === 2 && varNode.value) console.log('显示图标>>>');
+                if(showType === 3 && varNode.value) imgs = `/dcim-api${varNode.value}`; //imgs += imgs ? `,${varData.value}` : varData.value;
+            }
+        });
+        if(typeName) node.text = typeName;
+        if(imgs) {
+            node.text = '';
+            node.image = imgs;
+            node.paddingBottom = 0;
+            node.paddingBottomNum = 0;
+            node.paddingLeft = 0;
+            node.paddingLeftNum = 0;
+            node.paddingRight = 0;
+            node.paddingRightNum = 0;
+            node.paddingTop = 0;
+            node.paddingTopNum = 0;
+        }
+    }
+}
+// 初始化mqtt实时值
+export function setDefaultNodeValidat(node, retData) {
+    //const item = JSON.parse(JSON.stringify(node));
+    if (!node.data || !retData) return;
+    //const node = detailData.length > 0 ? detailData : syncData
+    const functionData = node.events.filter((ev) => {
+        return ev.action === EventAction.Function
+    });
+    const dataValue = functionData[0]
+    if (functionData.length > 0 && dataValue.value && retData) {
+        node.data.map((d) => {
+            const {kpiData, tagData} = retData;
+            const key = d.key;
+            const value = d.value;
+            const _syncItem = key === 'tagId' ? tagData[value] : kpiData[value];
+            if ((key === 'tagId' || key === 'kpiAddr') && _syncItem) {
+                const isControl = parseInt(_syncItem.isControlDis); // 是否可控，0可控，1不可控
+                if (!isControl) {
+                    d.tagVal = value
+                    d.controlParams = _syncItem
+                    // delete _syncItem[value]
+                    // Object.assign(d, _syncItem)
+                }
+            }
+        })
+        // console.log('定制函数=====')
+        try {
+            const func = new Function('pen', 'params', dataValue.value);
+            func(node, JSON.stringify(retData));
+        }catch (e) {
+            console.log(`自定义函数出错>>>`,);
+            console.log(`目标元件：${node.id}>>>`,);
+            console.log(`目标元件方位：X->${node.rect.x}，Y->${node.rect.y}>>>`,);
+        }
+    } else {
+        // console.log('默认函数')
+        setConfItemNode(node, retData);
+    }
+    if (node.animateFrames && node.animateFrames.length) {
+        for (var _a = 0, _af = node.animateFrames; _a < _af.length; _a++) {
+            var ani = _af[_a];
+            ani.state.strokeStyle = node.strokeStyle;
+            ani.state.fillStyle = node.fillStyle;
+        }
+    }
+    //return node;
+}
+// 初始化tab节点数据
+export function initSwitchTabData(node) {
+    if (node.tags && node.tags.length > 0) {
+        const tagTypeData = node.tags.find((t) => {
+            return t === 'statisticType' || t.includes('switchTabType');
+        });
+        if (tagTypeData) {
+            let topologyChangeData = switchTabDataPool;
+            let keyName = node.bindStaticId ? `${tagTypeData}Data` : `${tagTypeData}AreaData`;
+            if (!topologyChangeData[keyName]) topologyChangeData[keyName] = {};
+            topologyChangeData[keyName][node.id] = node;
+        }else {
+            const isTabs = node.events && node.events.find((ev) => ev.action === 8);
+            if(isTabs) {
+                console.log('>>>未能找到绑定的标签数据，请检查绑定的Tabs标签是否包含switchTabType前缀>>>')
+            }
+        }
+    }
+}

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

@@ -12,20 +12,18 @@ export interface MoveDataType {
     HoverAnchors?: string | number;
     Rotate?: string | number;
 }
-export const moveDataType: MoveDataType;
 export interface DownDataType {
     Window?: string | number;
     Target?: string | number;
     Showhide?: string | number;
     Tabswitch?: string | number;
+    Formselect?: string | number;
 }
-export const downDataType: DownDataType;
 export interface PreviewType {
     Dcim?: string;
     Topology?: string;
     Logo?: string;
 }
-export const previewType: PreviewType;
 export interface AnimateType {
   LeftFlow?: string;
   RightFlow?: string;
@@ -38,4 +36,12 @@ export interface AnimateType {
   Show?: string;
   Rotate?: string;
 }
+export interface SelectStaticType {
+    static?:number;
+    show?:number;
+}
+export const moveDataType: MoveDataType;
+export const downDataType: DownDataType;
+export const previewType: PreviewType;
 export const animateType: AnimateType;
+export const selectStaticType: SelectStaticType;

package/core/src/utils/construction.js

@@ -15,7 +15,8 @@ export const downDataType = {
     Window: 'window',
     Target: 'target',
     Showhide: 'showhide',
-    Tabswitch: 'Tabswitch'
+    Tabswitch: 'Tabswitch',
+    Formselect: 'Formselect'
 };
 export const previewType = {
     Dcim: 'dcim',
@@ -33,4 +34,8 @@ export const animateType = {
   Error: 'error',
   Show: 'show',
   Rotate: 'rotate'
+};
+export const selectStaticType = {
+    static: 1,
+    show: 2
 };

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

@@ -1,7 +1,10 @@
 import {Node} from "../models";
 
+export declare function getEchartsRealData(node: {}, data: []): void;
+export declare function setInitConfData(data: object): void;
 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 setVarValueData(data: any): [];
 export declare function setThreeCategoryIdData(pen: Node, data: any): [];