dcim-topology2d 2.2.0 → 2.2.2

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

@@ -1,23 +1,62 @@
 export function rectangle(ctx, node) {
-    var wr = node.borderRadius;
-    var hr = node.borderRadius;
-    if (node.borderRadius < 1) {
-        wr = node.rect.width * node.borderRadius;
-        hr = node.rect.height * node.borderRadius;
+
+    var topLeftR = node.borderRadiusTopLeft;
+    var topRightR = node.borderRadiusTopRight;
+    var bottomLeftR = node.borderRadiusBottomLeft;
+    var bottomRightR = node.borderRadiusBottomRight;
+
+
+    var w = node.rect.width > node.rect.height ? node.rect.height : node.rect.width;
+
+
+    if (node.borderRadiusTopLeft < 1) {
+
+        topLeftR = w * node.borderRadiusTopLeft;
+
     }
-    var r = wr < hr ? wr : hr;
-    if (node.rect.width < 2 * r) {
-        r = node.rect.width / 2;
+    if (node.borderRadiusTopRight < 1) {
+
+        topRightR = w * node.borderRadiusTopRight;
+
     }
-    if (node.rect.height < 2 * r) {
-        r = node.rect.height / 2;
+    if (node.borderRadiusBottomLeft < 1) {
+
+        bottomLeftR = w * node.borderRadiusBottomLeft;
+
     }
+    if (node.borderRadiusBottomRight < 1) {
+
+        bottomRightR = w * node.borderRadiusBottomRight;
+
+    }
+
+    var tlr = topLeftR;
+    if (w < 2 * tlr) {
+        tlr = w / 2
+    }
+
+    var trr = topRightR;
+    if (w < 2 * trr) {
+        trr = w / 2
+    }
+
+    var blr = bottomLeftR;
+    if (w < 2 * blr) {
+        blr = w / 2
+    }
+
+    var brr = bottomRightR;
+    if (w < 2 * brr) {
+        brr = w / 2
+    }
+
     ctx.beginPath();
-    ctx.moveTo(node.rect.x + r, node.rect.y);
-    ctx.arcTo(node.rect.x + node.rect.width, node.rect.y, node.rect.x + node.rect.width, node.rect.y + node.rect.height, r);
-    ctx.arcTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height, node.rect.x, node.rect.y + node.rect.height, r);
-    ctx.arcTo(node.rect.x, node.rect.y + node.rect.height, node.rect.x, node.rect.y, r);
-    ctx.arcTo(node.rect.x, node.rect.y, node.rect.x + node.rect.width, node.rect.y, r);
+
+    ctx.moveTo(node.rect.x + tlr, node.rect.y);
+    ctx.arcTo(node.rect.x + node.rect.width, node.rect.y, node.rect.x + node.rect.width, node.rect.y + node.rect.height, trr);
+    ctx.arcTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height, node.rect.x, node.rect.y + node.rect.height, brr);
+    ctx.arcTo(node.rect.x, node.rect.y + node.rect.height, node.rect.x, node.rect.y, blr);
+    ctx.arcTo(node.rect.x, node.rect.y, node.rect.x + node.rect.width, node.rect.y, tlr);
     ctx.closePath();
     (node.fillStyle || node.bkType) && ctx.fill();
     ctx.stroke();

package/core/src/models/node.js

@@ -96,6 +96,7 @@ var Node = /** @class */ (function (_super) {
         _this.visitStrokeStyle = json.visitStrokeStyle || '';
         _this.thBottomStrokeStyle = json.thBottomStrokeStyle || '#fff';
         _this.thBottomLineWidth = json.thBottomLineWidth || 1;
+        _this.focusFillStyle = json.focusFillStyle;
         // 兼容老数据
         if (json.children && json.children[0] && json.children[0].parentRect) {
             _this.paddingLeft = json.children[0].parentRect.offsetX;
@@ -148,6 +149,9 @@ var Node = /** @class */ (function (_super) {
         _this.nextPlay = json.nextPlay;
         _this.time = json.time;
         _this.isOpen = json.isOpen;
+        _this.isShowPercent = json.isShowPercent || false;
+        _this.maxValue = json.maxValue || 100;
+        _this.retationDecimalPlaces = json.retationDecimalPlaces;
         if (json.elementLoaded !== undefined) {
             _this.elementId = null;
             _this.elementLoaded = false;
@@ -265,6 +269,9 @@ var Node = /** @class */ (function (_super) {
             Store.set(this.generateStoreKey('LT:addDiv'), this);
         }
     };
+    Node.prototype.createOverflow = function () {
+        Store.set(this.generateStoreKey('LT:createOverflow'), this);
+    };
     Node.prototype.hasGif = function () {
         if (this.gif) {
             return true;

package/core/src/models/pen.js

@@ -111,6 +111,13 @@ var Pen = /** @class */ (function () {
             this.defaultFillStyle = json.defaultFillStyle || '';
             this.defaultFontColor = json.defaultFontColor || '';
             this.defaultStrokeStyle = json.defaultStrokeStyle || '';
+
+            this.borderRadiusTopLeft = json.borderRadiusTopLeft || 0;
+            this.borderRadiusTopRight = json.borderRadiusTopRight || 0;
+            this.borderRadiusBottomLeft = json.borderRadiusBottomLeft || 0;
+            this.borderRadiusBottomRight = json.borderRadiusBottomRight || 0;
+
+            this.focusFillStyle = json.focusFillStyle || '';
             if (json.rectInParent) {
                 this.rectInParent = json.rectInParent;
             }
@@ -157,7 +164,9 @@ var Pen = /** @class */ (function () {
             ctx.strokeStyle = !this.activeImgeIndex ? this.visitStrokeStyle || staticStrokeStyle : this.defaultStrokeStyle || staticStrokeStyle;
         }
         //ctx.strokeStyle = this.dash === 4 ? 'transparent' : this.strokeStyle || '#222';
-        this.fillStyle && (ctx.fillStyle = this.fillStyle);
+        //背景聚焦色 
+        this.focusFillStyle && !this.activeImgeIndex ? ctx.fillStyle = this.focusFillStyle : (this.fillStyle && (ctx.fillStyle = this.fillStyle));
+
         if (this.lineCap) {
             ctx.lineCap = this.lineCap;
         }

package/core/src/preview.js

@@ -1,9 +1,9 @@
-import {Store} from "le5le-store";
+import { Store } from "le5le-store";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
-                ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-                function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
@@ -12,8 +12,8 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-import {KeyType} from './options';
-import {Point} from './models';
+import { KeyType } from './options';
+import { Point } from './models';
 import { Common } from './common'
 import {
     downDataType,
@@ -40,12 +40,12 @@ var Preview = (function (_super) {
         _this.devicePixelRatio = window.devicePixelRatio; // 初始化窗口分辨率
         // 选中值发生变化时触发，目前用于日期切换
         _this.eventChangeSubcribe = Store.subscribe(this.generateStoreKey('EVENT:change'), function (data) {
-            const {node, date} = data;
+            const { node, date } = data;
             const pickerBindData = _this.store.pickerDataPool.bindData;
-            if(pickerBindData) {
+            if (pickerBindData) {
                 // 切换显示日期文字的元件值
-                for (let value of Object.values(pickerBindData)){
-                    if(value.dateId === node.id) {
+                for (let value of Object.values(pickerBindData)) {
+                    if (value.dateId === node.id) {
                         const pen = _this.store.data.pens[value.order];
                         pen.text = date.valueStr;
                     }
@@ -83,8 +83,8 @@ var Preview = (function (_super) {
                     _this.hideTip();
                     _this.setAttributeForCanvasPoint('default');
                     if (hoverNode) {
-                        if(eventNode) _this.setAttributeForCanvasPoint('pointer');
-                        if(hoverNode.visible) _this.showTip(hoverNode, pos);
+                        if (eventNode) _this.setAttributeForCanvasPoint('pointer');
+                        if (hoverNode.visible) _this.showTip(hoverNode, pos);
                         _this.moveIn.type = moveType;
                     }
                     _this.moveIn.eventNode = eventNode;
@@ -98,15 +98,16 @@ var Preview = (function (_super) {
             if (e.button !== 0)
                 return;
             var canvasPos = _this.divLayer.canvas.getBoundingClientRect();
-            _this.mouseDown = {x: e.x - canvasPos.x, y: e.y - canvasPos.y};
+            _this.mouseDown = { x: e.x - canvasPos.x, y: e.y - canvasPos.y };
             if (e.altKey) {
                 _this.setAttributeForCanvasPoint('pointer');
             }
             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.store.options.type, _this.moveIn.eventNode);
             if (_this.moveIn.type == _this.moveInType.Nodes) {
                 _this.setAttributeForCanvasPoint('pointer');
                 switch (eventType) {
@@ -140,9 +141,9 @@ var Preview = (function (_super) {
             _this.mouseDown = null;
             _this.lastTranlated.x = 0;
             _this.lastTranlated.y = 0;
-            if(_this.moveIn.eventNode) {
+            if (_this.moveIn.eventNode) {
                 _this.setAttributeForCanvasPoint('pointer');
-            }else {
+            } else {
                 _this.setAttributeForCanvasPoint('default');
             }
         };
@@ -179,16 +180,16 @@ var Preview = (function (_super) {
             event.preventDefault();
             if (event.deltaY < 0) {
                 if (event.layerX && event.layerY) {
-                    _this.scale(1.1, {x: event.layerX, y: event.layerY});
-                    _this.canvas.scale(1.1, {x: event.layerX, y: event.layerY});
+                    _this.scale(1.1, { x: event.layerX, y: event.layerY });
+                    _this.canvas.scale(1.1, { x: event.layerX, y: event.layerY });
                 } else {
                     _this.scale(1.1);
                     _this.canvas.scale(1.1);
                 }
             } else {
                 if (event.layerX && event.layerY) {
-                    _this.scale(0.9, {x: event.layerX, y: event.layerY});
-                    _this.canvas.scale(0.9, {x: event.layerX, y: event.layerY});
+                    _this.scale(0.9, { x: event.layerX, y: event.layerY });
+                    _this.canvas.scale(0.9, { x: event.layerX, y: event.layerY });
                 } else {
                     _this.scale(0.9);
                     _this.canvas.scale(0.9);
@@ -200,19 +201,19 @@ var Preview = (function (_super) {
         };
         window.onresize = function () {
             let isFullScreen = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullscreenElement;
-            if((!isFullScreen && _this.isFullScreen) || window.keyControlFullScreen){
+            if ((!isFullScreen && _this.isFullScreen) || window.keyControlFullScreen) {
                 // F11或ESC退出全屏
-                if(!window.keyControlFullScreen) _this.moveIn.hoverNode.text = '全屏';
+                if (!window.keyControlFullScreen) _this.moveIn.hoverNode.text = '全屏';
                 _this.fitViewPreview(_this.isFullScreen);
                 _this.isFullScreen = false;
                 window.keyControlFullScreen = false;
-            }else {
+            } else {
                 const documentElementHeight = window.innerHeight || document.documentElement.clientHeight; // 每次窗口有变化就重新获取一次网页高度
-                if(window.devicePixelRatio !== _this.devicePixelRatio) {
+                if (window.devicePixelRatio !== _this.devicePixelRatio) {
                     _this.devicePixelInnerHeight = documentElementHeight;
                     _this.devicePixelRatio = window.devicePixelRatio;
                 }
-                if(_this.devicePixelInnerHeight < documentElementHeight && !isFullScreen) {
+                if (_this.devicePixelInnerHeight < documentElementHeight && !isFullScreen) {
                     // 按F11 全屏
                     setTimeout(() => {
                         _this.fitViewPreview(false);
@@ -221,13 +222,13 @@ var Preview = (function (_super) {
                     window.keyControlFullScreen = true;
                 }
                 // topology编辑器或全屏下跳出程序
-                if(_this.store.options.type === 'topology' || window.keyControlFullScreen) return;
+                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;
+                    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';
@@ -241,14 +242,20 @@ var Preview = (function (_super) {
                 }, 1000);
             }
         };
+        _this.subcribecreateOverflow = Store.subscribe(this.generateStoreKey('LT:createOverflow'), function (node) {
+            _this.dispatch('createOverflow', node);
+        });
+        _this.subcribeconversionDataOverflow = Store.subscribe(this.generateStoreKey('LT:conversionDataOverflow'), function (data) {
+            _this.dispatch('conversionDataOverflow', data);
+        });
         return _this;
     }
-    Preview.prototype.setAttributeForCanvasPoint = function (type){
+    Preview.prototype.setAttributeForCanvasPoint = function (type) {
 
         this.divLayer.canvas.setAttribute('class', `canvas-point ${type}`);
 
     };
-    Preview.prototype.fitViewPreview = function (restore){
+    Preview.prototype.fitViewPreview = function (restore) {
         this.fitView(null, restore);
         this.render();
     };
@@ -274,7 +281,7 @@ var Preview = (function (_super) {
     };
     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) {
+            this.store.data.scale * scale > this.store.options.maxScale) {
             return;
         }
         this.store.data.scale *= scale;
@@ -283,7 +290,7 @@ var Preview = (function (_super) {
             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;
+            if (item.tags && item.tags[0] && item.tags[0].includes('contromRoomBottom')) this.store.pens['contromRoomBottom'] = item;
         }
     };
     Preview.prototype.scaleTo = function (scale) {
@@ -298,7 +305,7 @@ var Preview = (function (_super) {
         var parentElem = this.store.parentElem;
         var width = parentElem.offsetWidth,
             height = parentElem.offsetHeight;
-        if(this.store.options.storeSubscribe) {
+        if (this.store.options.storeSubscribe) {
             width = this.store.options.width;
             height = this.store.options.height;
         }
@@ -314,28 +321,47 @@ var Preview = (function (_super) {
         var padding = formatPadding(viewPadding || this.store.options.viewPadding);
         // 4. 获取图形尺寸
         var rect = this.getRect();
-        if(!rect.width) {
+        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 = w;
         this.scale(ratio, undefined, w, h);
         this.canvas.scale(ratio, undefined, w, h);
         // 7. X抽滚动条隐藏
         this.store.parentElem.style.overflow = 'hidden auto';
     };
+    Preview.prototype.formOverflowOpen = function (data) {
+        this.formOverflowConversionData(data);
+        this.overflowView();
+        this.render(true);
+    }
+    Preview.prototype.overflowView = function () {
+        if (!this.hasView())
+            return;
+        var rect = this.getRect();
+        var width = rect.ex,
+            height = rect.ey
+        width *= this.store.data.pageZoom;
+        height *= this.store.data.pageZoom;
+        this.canvasResize({
+            width: width,
+            height: height,
+        });
+        this.store.parentElem.style.overflow = 'auto';
+    }
     Preview.prototype.destroy = function () {
         this.destroyStatic();
-        if(this.eventChangeSubcribe) this.eventChangeSubcribe.unsubscribe();
+        if (this.eventChangeSubcribe) this.eventChangeSubcribe.unsubscribe();
         this.onMouseMove = null;
         this.onmousedown = null;
         this.onmouseup = null;
@@ -344,5 +370,5 @@ var Preview = (function (_super) {
     return Preview;
 }(Common));
 
-export {Preview};
+export { Preview };
 //# sourceMappingURL=core.js.map

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

@@ -12,12 +12,14 @@ export interface visualization2DData {
     toArrowType: string;
     scale: number;
     pageZoom: number,
+    pageType: number,
     locked: Lock;
     bkImage: string;
     bkColor: string;
     grid?: boolean;
     websocket?: string;
     mqttUrl?: string;
+    tabsContentOptions?: {},
     mqttOptions?: {
         clientId?: string;
         username?: string;
@@ -57,6 +59,8 @@ export interface visualization2DStore {
     cacheDatas?: {
         data: visualization2DData;
     }[];
+    // @ts-ignore
+    tabsPageMasterData: Map<string, any>;
     elementInteractivePoor: {}; // element 交互过渡数据
     pickerDataPool: {}; // datePicker 交互数据池
     echartsDataPool: {}; // echarts Dom节点数据
@@ -78,6 +82,8 @@ export interface visualization2DStore {
 }
 // @ts-ignore
 export const createStore = () => {
+    // @ts-ignore
+    // @ts-ignore
     return {
         id: '',
         data: {
@@ -87,6 +93,8 @@ export const createStore = () => {
             toArrowType: 'triangleSolid',
             scale: 1,
             pageZoom: 1,
+            pageType: 0,
+            tabsContentOptions: {},
             locked: Lock.None,
             bkImageRect: null,
             mqttOptions: {
@@ -162,6 +170,7 @@ export const clearStore = (store: visualization2DStore, del: string) => {
         toArrowType: 'triangleSolid',
         scale: 1,
         pageZoom: 1,
+        pageType: 0,
         locked: Lock.None,
         bkImageRect: null,
         mqttOptions: {

package/core/src/store/data.js

@@ -28,6 +28,8 @@ export var createStore = function () {
             dataResize: 1, // 数据是否加载，1是，0否
             bkImageRect: null,
             pageZoom: 1,
+            pageType: 0, // 0-默认：1-tabs切换
+            tabsContentOptions: {}, // tabs内容区域配置属性
             mqttOptions: {
                 clientId: s8()
             },
@@ -53,6 +55,7 @@ export var createStore = function () {
         },
         pens: {},
         options: { ...DefalutOptions },
+        tabsPageMasterData: new Map(),
         elementInteractivePoor: {}, // element 交互过渡数据
         pickerDataPool: {}, // datePicker 交互数据池
         echartsDataPool: {}, // echarts Dom节点数据
@@ -136,6 +139,8 @@ export var clearStore = function (store, del) {
         toArrowType: 'triangleSolid',
         scale: 1,
         pageZoom: 1,
+        pageType: 0, // 0-默认：1-tabs切换
+        tabsContentOptions: {},
         locked: Lock.None,
         dataResize: 1, // 数据是否加载，1是，0否
         bkImageRect: null,

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

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

package/core/src/utils/assignment.js

@@ -9,13 +9,20 @@ import {confAssociateDateValueShowType, datePickerValueFormatting} from '../util
  * @param TID 数据键
  * @param type topology类型
  * @param order 节点序列
+ * @param options 配置数据
  */
-export function setInitNodeDataValidat(node, TID, type, order) {
+export function setInitNodeDataValidat(node, TID, type, order, options) {
 
-    const syncData = commonStore[TID].mqttData;
+    const syncData = node.PTID? commonStore[node.PTID].mqttData: commonStore[TID].mqttData;
 
     node.TID = TID;
 
+    if(options.pageId){
+        // tabs页面元件偏移量计算
+        node.rect.x += options.x;
+        node.rect.y += options.y;
+    }
+
     if(typeof node.visibleSwitch !== 'boolean') {
         // 兼容旧版显示隐藏属性值设置
         node.visibleSwitch = type === 'topology';
@@ -33,12 +40,18 @@ export function setInitNodeDataValidat(node, TID, type, order) {
     if (node.children && node.children.length) {
 
         node.children.map((_item) => {
-
-            setInitNodeDataValidat(_item, TID, type);
+            _item.PTID = node.PTID;
+            setInitNodeDataValidat(_item, TID, type, null, options);
 
         })
 
     }
+
+    if (node.formData && node.formData.detailPageData && node.formData.detailPageData.pens && node.formData.detailPageData.pens.length) {
+        // PTID为滚动组件子页面的父级节点的TID
+        node.formData.detailPageData.pens.forEach(pen => pen.PTID = TID);
+    }
+
 }
 // 初始化默认节点值
 export function initDefaultValidat(node, retData) {
@@ -71,7 +84,7 @@ function setVarBranchData(node, retData) {
     const componentData = retData.componentData;
     let varData = null;
     let branchNameData = null;
-    if(componentData) {
+    if(componentData && Object.keys(componentData).length) {
         varData = componentData[node.id] || {};
         branchNameData = componentData[node.id] || {};
     }else {

package/package.json

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