dcim-topology2d 2.2.4 → 2.2.5

package/core/src/middles/nodes/{progress.d.ts → form/progress.d.ts}

@@ -1,2 +1,2 @@
-import { Node } from "../../models";
+import { Node } from "../../../models";
 export default function progress(ctx: CanvasRenderingContext2D, node: Node): void;

package/core/src/middles/nodes/{tablePagination.d.ts → form/tablePagination.d.ts}

@@ -1,2 +1,2 @@
-import { Node } from '../../models';
+import { Node } from '../../../models';
 export declare function tablePagination(ctx: CanvasRenderingContext2D, node: Node): void;

package/core/src/middles/nodes/{time.d.ts → form/time.d.ts}

@@ -1,2 +1,2 @@
-import { Node } from '../../models';
+import { Node } from '../../../models';
 export declare function time(ctx: CanvasRenderingContext2D, node: Node): void;

package/core/src/middles/nodes/icon/echartLine.d.ts

@@ -0,0 +1,2 @@
+import { Node } from '../../../models';
+export declare function svgEchartsLine(ctx: CanvasRenderingContext2D, node: Node): void;

package/core/src/middles/nodes/icon/echartLine.js

@@ -0,0 +1,99 @@
+import {svgPathInstance} from "../../../../../store";
+
+export function svgEchartsLine(ctx, node) {
+    // 将 SVG 中的路径坐标等比缩放到相应尺寸的画布上
+    // SVG 范围: x: 0~1024, y: 0~1024
+    try {
+        let path1 = null;
+        let path2 = null;
+        if(svgPathInstance.has(node.id)) {
+            const pathData = svgPathInstance.get(node.id);
+            path1 = pathData.path1;
+            path2 = pathData.path2;
+        }else {
+            // 创建两个 Path2D 对象
+            path1 = new Path2D(node.path[0]);
+            path2 = new Path2D(node.path[1]);
+            svgPathInstance.set(node.id, {
+                path1,
+                path2
+            })
+        }
+        //console.log('path1====', path1, path2)
+        // 保存当前状态
+        ctx.save();
+        ctx.translate(node.rect.x, node.rect.y);
+        // 应用缩放变换: 将 SVG 坐标系 (0~1024) 缩放到 canvas 上
+        ctx.scale(node.rect.width / 1024, node.rect.height / 1024);
+        // 绘制第一个路径 （坐标轴）
+        ctx.fillStyle = node.strokeStyle; // 双坐标轴颜色
+        ctx.lineWidth = node.lineWidth;
+        ctx.fill(path1);
+        // 绘制第二个路径 (折线趋势)
+        ctx.fillStyle = node.strokeStyle; // 折线颜色
+        ctx.lineWidth = node.lineWidth;
+        ctx.fill(path2);
+        // 恢复变换
+        ctx.restore();
+    } catch (error) {
+        // 降级方案 手动绘制相似形状 (确保兼容性)
+        //console.info('Path2D 解析失败，使用备用手动绘制>>>', error);
+        ctx.save();
+        ctx.beginPath();
+        ctx.strokeStyle = node.strokeStyle;
+        ctx.lineWidth = node.lineWidth;
+        ctx.lineCap = 'round';
+
+        // X轴 (水平)
+        ctx.moveTo(node.rect.x, node.rect.y + node.rect.height);
+        ctx.lineTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height);
+        ctx.stroke();
+
+        // Y轴 (垂直)
+        ctx.moveTo(node.rect.x, node.rect.y + node.rect.height / 5);
+        ctx.lineTo(node.rect.x, node.rect.y + node.rect.height);
+        ctx.stroke();
+
+        // 起点坐标
+        const startX = node.rect.x + node.rect.width / 10;
+        const startY = node.rect.y + node.rect.height * (5/6);
+
+        // 第一个折角
+        const x2 = node.rect.x + node.rect.width / 4 ;
+        const y2 = startY - node.rect.height / 3;
+
+        // 第二个折点: 离X轴的距离 
+        const x3 = node.rect.x + node.rect.width * 3 / 5;
+        const y3 = node.rect.y + node.rect.height / 1.3;
+
+        // 终点: 在X轴末端附近，向上收尾
+        const xEnd = node.rect.x + node.rect.width;
+        const yEnd = startY - node.rect.height * 3 / 5;
+
+        // 收集所有点
+        const points = [
+            { x: startX, y: startY },
+            { x: x2, y: y2 },
+            { x: x3, y: y3 },
+            { x: xEnd, y: yEnd }
+        ];
+        // 边界保护 (确保点在画布内)
+        for (let p of points) {
+            p.y = Math.min(node.rect.y + node.rect.height - 2, Math.max(node.rect.y + 2, p.y));
+            p.x = Math.min(node.rect.x + node.rect.width + 2, Math.max( node.rect.x - 2, p.x));
+        }
+        // ---------- 绘制折线 ----------
+        ctx.beginPath();
+        ctx.lineWidth = node.lineWidth;
+        ctx.strokeStyle = node.strokeStyle;
+        ctx.lineJoin = 'round';
+        ctx.lineCap = 'round';
+
+        ctx.moveTo(points[0].x, points[0].y);
+        for (let i = 1; i < points.length; i++) {
+            ctx.lineTo(points[i].x, points[i].y);
+        }
+        ctx.stroke();
+        ctx.restore();
+    }
+}

package/core/src/middles/nodes/index.d.ts

@@ -1,52 +1,54 @@
-export * from './arbitrarygraph';
-export * from './arbitrarygraph.anchor';
-export * from './arrow';
-export * from './arrow.rect';
-export * from './arrow.anchor';
-export * from './circle';
-export * from './circle.rect';
-export * from './circle.anchor';
-export * from './cloud';
-export * from './cloud.rect';
-export * from './cloud.anchor';
-export * from './cube';
-export * from './cube.rect';
-export * from './cube.anchor';
-export * from './cube.model';
-export * from './diamond';
-export * from './diamond.rect';
-export * from './file';
-export * from './formtable';
-export * from './formselect';
-export * from './hexagon';
-export * from './hexagon.anchor';
-export * from './hexagon.rect';
-export * from './image.rect';
-export * from './image.anchor';
-export * from './iframe';
-export * from './line';
-export * from './line.anchor';
-export * from './line.rect';
-export * from './message';
-export * from './message.anchor';
-export * from './message.rect';
-export * from './pentagon';
-export * from './pentagon.anchor';
-export * from './pentagon.rect';
-export * from './pentagram';
-export * from './pentagram.anchor';
-export * from './pentagram.rect';
-export * from './people';
-export * from './people.rect';
-export * from './rectangle';
-export * from './rectangle.rect';
-export * from './tablePagination';
-export * from './text';
-export * from './triangle';
-export * from './triangle.anchor';
-export * from './triangle.rect';
-export * from './formoverflow';
-export * from './time';
-export * from './formDatePicker';
-export * from './switchs';
-export * from './progress';
+export * from './basic/arbitrarygraph';
+export * from './basic/arbitrarygraph.anchor';
+export * from './basic/arrow';
+export * from './basic/arrow.rect';
+export * from './basic/arrow.anchor';
+export * from './basic/circle';
+export * from './basic/circle.rect';
+export * from './basic/circle.anchor';
+export * from './basic/cloud';
+export * from './basic/cloud.rect';
+export * from './basic/cloud.anchor';
+export * from './basic/cube';
+export * from './basic/cube.rect';
+export * from './basic/cube.anchor';
+export * from './basic/cube.model';
+export * from './basic/diamond';
+export * from './basic/diamond.rect';
+export * from './basic/file';
+export * from './basic/image.rect';
+export * from './basic/image.anchor';
+export * from './basic/iframe';
+export * from './basic/line';
+export * from './basic/line.anchor';
+export * from './basic/line.rect';
+export * from './basic/message';
+export * from './basic/message.anchor';
+export * from './basic/message.rect';
+export * from './basic/pentagon';
+export * from './basic/pentagon.anchor';
+export * from './basic/pentagon.rect';
+export * from './basic/pentagram';
+export * from './basic/pentagram.anchor';
+export * from './basic/pentagram.rect';
+export * from './basic/people';
+export * from './basic/people.rect';
+export * from './basic/rectangle';
+export * from './basic/rectangle.rect';
+export * from './basic/text';
+export * from './basic/triangle';
+export * from './basic/triangle.anchor';
+export * from './basic/triangle.rect';
+export * from './icon/echartLine';
+export * from './flow/hexagon';
+export * from './flow/hexagon.anchor';
+export * from './flow/hexagon.rect';
+export * from './form/formtable';
+export * from './form/formselect';
+export * from './form/tablePagination';
+export * from './form/formoverflow';
+export * from './form/time';
+export * from './form/formDatePicker';
+export * from './form/switchs';
+export * from './form/progress';
+export * from './custom/humiture';

package/core/src/middles/nodes/index.js

@@ -1,54 +1,55 @@
-export * from './arbitrarygraph';
-export * from './arbitrarygraph.anchor';
-export * from './arrow';
-export * from './arrow.rect';
-export * from './arrow.anchor';
-export * from './circle';
-export * from './circle.rect';
-export * from './circle.anchor';
-export * from './cloud';
-export * from './cloud.rect';
-export * from './cloud.anchor';
-export * from './cube';
-export * from './cube.rect';
-export * from './cube.anchor';
-export * from './cube.model';
-export * from './diamond';
-export * from './diamond.rect';
-export * from './file';
-export * from './formtable';
-export * from './formselect';
-export * from './hexagon';
-export * from './hexagon.anchor';
-export * from './hexagon.rect';
-export * from './image.rect';
-export * from './image.anchor';
-export * from './iframe';
-export * from './line';
-export * from './line.anchor';
-export * from './line.rect';
-export * from './message';
-export * from './message.anchor';
-export * from './message.rect';
-export * from './pentagon';
-export * from './pentagon.anchor';
-export * from './pentagon.rect';
-export * from './pentagram';
-export * from './pentagram.anchor';
-export * from './pentagram.rect';
-export * from './people';
-export * from './people.rect';
-export * from './rectangle';
-export * from './rectangle.rect';
-export * from './tablePagination';
-export * from './text';
-export * from './triangle';
-export * from './triangle.anchor';
-export * from './triangle.rect';
-export * from './formoverflow';
-export * from './time';
-export * from './formDatePicker';
-export * from './switchs';
-export * from './progress';
-
+export * from './basic/arbitrarygraph';
+export * from './basic/arbitrarygraph.anchor';
+export * from './basic/arrow';
+export * from './basic/arrow.rect';
+export * from './basic/arrow.anchor';
+export * from './basic/circle';
+export * from './basic/circle.rect';
+export * from './basic/circle.anchor';
+export * from './basic/cloud';
+export * from './basic/cloud.rect';
+export * from './basic/cloud.anchor';
+export * from './basic/cube';
+export * from './basic/cube.rect';
+export * from './basic/cube.anchor';
+export * from './basic/cube.model';
+export * from './basic/diamond';
+export * from './basic/diamond.rect';
+export * from './basic/file';
+export * from './basic/image.rect';
+export * from './basic/image.anchor';
+export * from './basic/iframe';
+export * from './basic/line';
+export * from './basic/line.anchor';
+export * from './basic/line.rect';
+export * from './basic/message';
+export * from './basic/message.anchor';
+export * from './basic/message.rect';
+export * from './basic/pentagon';
+export * from './basic/pentagon.anchor';
+export * from './basic/pentagon.rect';
+export * from './basic/pentagram';
+export * from './basic/pentagram.anchor';
+export * from './basic/pentagram.rect';
+export * from './basic/people';
+export * from './basic/people.rect';
+export * from './basic/rectangle';
+export * from './basic/rectangle.rect';
+export * from './basic/text';
+export * from './basic/triangle';
+export * from './basic/triangle.anchor';
+export * from './basic/triangle.rect';
+export * from './icon/echartLine';
+export * from './flow/hexagon';
+export * from './flow/hexagon.anchor';
+export * from './flow/hexagon.rect';
+export * from './form/formtable';
+export * from './form/formselect';
+export * from './form/tablePagination';
+export * from './form/formoverflow';
+export * from './form/time';
+export * from './form/formDatePicker';
+export * from './form/switchs';
+export * from './form/progress';
+export * from './custom/humiture';
 //# sourceMappingURL=index.js.map

package/core/src/models/line.js

@@ -17,7 +17,7 @@ import { drawLineFns, drawArrowFns } from '../middles';
 import { getBezierPoint } from '../middles/lines/curve';
 import { Store } from 'le5le-store';
 import { lineLen, curveLen } from '../utils/canvas';
-import { text } from '../middles/nodes/text';
+import { text } from '../middles/nodes/basic/text';
 import { Rect } from './rect';
 import { abs } from '../utils/math';
 var Line = /** @class */ (function (_super) {

package/core/src/models/node.js

@@ -90,6 +90,7 @@ var Node = /** @class */ (function (_super) {
         _this.leakageStart = json.leakageStart || 0;
         _this.leakageEnd = json.leakageEnd || 0;
         _this.leakageFillStyle = json.leakageFillStyle || '#ff0000';
+        _this.lineOffsetSpeed = json.lineOffsetSpeed || 1;
         _this.bindStaticId = json.bindStaticId || '';
         //_this.buttonCheckSlide = json.buttonCheckSlide || '';
         _this.visitStrokeStyle = json.visitStrokeStyle || '';
@@ -98,6 +99,7 @@ var Node = /** @class */ (function (_super) {
         _this.focusFillStyle = json.focusFillStyle;
         _this.hoverFillStyle = json.hoverFillStyle;
         _this.defaultText = json.defaultText || json.text;
+        if(_this.name.startsWith('svg')) _this.path = json.path || [];
         // 兼容老数据
         if (json.children && json.children[0] && json.children[0].parentRect) {
             _this.paddingLeft = json.children[0].parentRect.offsetX;
@@ -151,6 +153,7 @@ var Node = /** @class */ (function (_super) {
         _this.time = json.time;
         _this.isOpen = json.isOpen;
         _this.isAlias = json.isAlias || false;
+        _this.isPointMonitor = json.isPointMonitor || false;
         _this.isShowPercent = json.isShowPercent || false;
         _this.maxValue = json.maxValue || 100;
         _this.retationDecimalPlaces = json.retationDecimalPlaces;
@@ -334,9 +337,7 @@ var Node = /** @class */ (function (_super) {
         }
     };
     Node.prototype.draw = function (ctx) {
-        if (!drawNodeFns[this.name]) {
-            return;
-        }
+        if (!drawNodeFns[this.name]) return;
         // DrawBk
         switch (this.bkType) {
             case 1:
@@ -682,17 +683,17 @@ var Node = /** @class */ (function (_super) {
                     // 线条左右流动动画
                     if ([animateType.LeftFlow, animateType.RightFlow].includes(this.animateType) && item.state.lineDashOffset) {
                         let o = item.state.lineDashOffset;
+                        let s = this.lineOffsetSpeed;
                         switch (this.animateType) {
                             case animateType.LeftFlow:
                                 o = Math.abs(o)
                                 if (o > 100) o = 1;
-                                o++
-
+                                o = o + 1*s
                                 break;
                             case animateType.RightFlow:
                                 o = Math.abs(o) * -1
                                 if (o < -100) o = -1;
-                                o--
+                                o = o - 1*s
                                 break;
                         }
                         item.state.lineDashOffset = o

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

@@ -11,6 +11,7 @@ export declare abstract class Pen {
     id: string;
     type: PenType;
     name: string;
+    subName: string;
     tags: string[];
     rect: Rect;
     lineWidth: number;
@@ -67,6 +68,11 @@ export declare abstract class Pen {
         value: string;
         params: string;
         name?: string;
+        data: {
+            name: string,
+            id: string,
+            type: number
+        }
     }[];
     private eventFns;
     parentId: string;

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

@@ -9,6 +9,7 @@ export declare class Rect {
     center: Point;
     constructor(x: number, y: number, width: number, height: number);
     init(): void;
+    calcOffset(): void;
     floor(): void;
     round(): void;
     clone(): Rect;

package/core/src/models/rect.js

@@ -1,18 +1,18 @@
 import { Point } from './point';
 import { pointInRect } from '../utils/canvas';
 var Rect = /** @class */ (function () {
-    function Rect(x, y, width, height, offset) {
+    function Rect(x, y, width, height) {
         this.x = x;
         this.y = y;
         this.width = width;
         this.height = height;
         this.center = new Point(0, 0);
-        if (width < 0) {
-            this.width = 0;
-        }
-        if (height < 0) {
-            this.height = 0;
-        }
+        // if (width < 0) {
+        //     this.width = 0;
+        // }
+        // if (height < 0) {
+        //     this.height = 0;
+        // }
         this.init();
     }
     Rect.prototype.init = function () {
@@ -20,6 +20,12 @@ var Rect = /** @class */ (function () {
         this.ey = this.y + this.height;
         this.calcCenter();
     };
+    Rect.prototype.calcOffset = function () {
+        this.x = this.center.x - this.width / 2;
+        this.y = this.center.y - this.height / 2;
+        this.ex = this.x + this.width;
+        this.ey = this.y + this.height;
+    };
     Rect.prototype.floor = function () {
         this.x |= 0;
         this.y |= 0;

package/core/src/options.js

@@ -42,6 +42,7 @@ export var DefalutOptions = {
     viewPadding: 0,
     interval: 50,
     storeSubscribe: false,
-    isAlias: false, // 元件绑数据是否带上数据名称
+    isAlias: false, // 元件绑数据是否带上数据名称 type
+    isPointMonitor: false, // 点位监控
 };
 //# sourceMappingURL=options.js.map

package/core/src/preview.js

@@ -234,18 +234,17 @@ var Preview = (function (_super) {
                 _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();
-                    }
+                    if(!_this.isResize) return;
+                    const pageZoom = 1 / zoom;
+                    _this.store.data.pageZoom = zoom;
+                    _this.store.parentElem.style.transform = `scale(${pageZoom})`;
+                    _this.store.parentElem.style.transformOrigin = '0 0';
+                    if(_this.store.parentElem.parentElement) _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);
             }
         };

package/core/src/utils/assignment.js

@@ -17,7 +17,7 @@ export function setInitNodeDataValidat(node, TID, type, order, options) {
 
     node.TID = TID;
 
-    if(options.pageId){
+    if(options && options.pageId){
         // tabs页面元件偏移量计算
         node.rect.x += options.x;
         node.rect.y += options.y;
@@ -56,10 +56,8 @@ export function setInitNodeDataValidat(node, TID, type, order, options) {
 // 初始化默认节点值
 export function initDefaultValidat(node, retData) {
     node.defaultFillStyle = node.fillStyle;
-    node.defaultFontColor = node.font.color;
-    if (node.name === 'line') {
-        node.defaultStrokeStyle = node.strokeStyle;
-    }
+    node.defaultFontColor = node.font && node.font.color;
+    node.defaultStrokeStyle = node.strokeStyle;
     setPickerDateConnectData(node);
     setVarBranchData(node, retData);
 }
@@ -80,51 +78,51 @@ function setPickerDateConnectData(node) {
 }
 // 设置变量类型和支路地址的异步数据
 function setVarBranchData(node, retData) {
-    if(!retData) return;
-    const componentData = retData.componentData;
-    let varData = null;
-    let branchNameData = null;
-    if(componentData && Object.keys(componentData).length) {
-        varData = componentData[node.id] || {};
-        branchNameData = componentData[node.id] || {};
-    }else {
-        varData = retData.varData;
-        branchNameData = retData.branchNameData;
-    }
-    const dataDictionary = {...varData, ...branchNameData};
+    if(!retData || !Array.isArray(node.data)) return;
     // 变量类型数据展示，不需要实时更新
-    if(Array.isArray(node.data) && Object.keys(dataDictionary).length) {
-        let typeName = '';
-        let imgs = '';
-        const assetId = retData.asset && retData.asset.assetId;
-        node.data.map((vd) => {
-            const varNode = dataDictionary[vd.value] || dataDictionary[`${assetId}_${vd.value}`];
-            if((vd.key.includes('varValue') || vd.key.includes('branchVal')) && varNode){
-                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;
+    let varData = retData.varData || {};
+    let branchNameData = retData.branchNameData || {};
+    const dataDictionary = {...varData, ...branchNameData};
+    if(!Object.keys(dataDictionary).length) return;
+    let typeName = '';
+    let imgs = '';
+    const assetId = retData.asset && retData.asset.assetId;
+    node.data.forEach((vd) => {
+        const varNode = dataDictionary[vd.value] || dataDictionary[`${assetId}_${vd.value}`];
+        if(!varNode || !varNode.value || !['varValue', 'branchVal'].includes(vd.key)) return;
+        const showType = varNode.showType ? parseInt(varNode.showType) : 1;
+        if(showType === 1) {
+
+            typeName += typeName ? `,${varNode.value}` : varNode.value;
+
+        } else if(showType === 2) {
+
+            console.log('显示图标>>>');
+
+        } else if(showType === 3) {
+
+            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.events.length || !retData) return;
+    if (!node.events || !node.events.length || !retData) return;
     //const node = detailData.length > 0 ? detailData : syncData
     const functionData = node.events.filter((ev) => {
         return ev.action === EventAction.Function