dcim-topology2d 1.1.6 → 2.0.5

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

@@ -58,6 +58,10 @@ export declare class Node extends Pen {
         linear: boolean;
         state: Node;
     }[];
+    formData: {
+        bindBlockId: string;
+        theme: number;
+    };
     animateAlone: boolean;
     gif: boolean;
     video: string;

package/core/src/models/node.js

@@ -20,7 +20,7 @@ import { defaultAnchors } from '../middles/default.anchor';
 import { defaultIconRect, defaultTextRect } from '../middles/default.rect';
 import { text, tableText, defaultText, iconfont } from '../middles/nodes/text';
 import { Store } from 'le5le-store';
-import { abs, s8, animateType, createChildrenDivByElementId } from '../utils';
+import { abs, s8, animateType } from '../utils';
 export const images = {};
 export const defaultImages = {};
 var Node = /** @class */ (function (_super) {
@@ -37,8 +37,10 @@ var Node = /** @class */ (function (_super) {
         _this.animateFrames = [];
         _this.type = PenType.Node;
         _this.TID = json.TID;
+        _this.selectDropdown = json.selectDropdown || false;
         _this.is3D = json.is3D;
         _this.z = json.z;
+        _this.order = json.order;
         _this.zRotate = json.zRotate || 0;
         _this.borderRadius = +json.borderRadius || 0;
         _this.icon = json.icon;
@@ -81,7 +83,7 @@ var Node = /** @class */ (function (_super) {
         _this.leakageEnd = json.leakageEnd || 0;
         _this.leakageFillStyle = json.leakageFillStyle || '#ff0000';
         _this.bindStaticId = json.bindStaticId || '';
-        _this.buttonCheckSlide = json.buttonCheckSlide || '';
+        //_this.buttonCheckSlide = json.buttonCheckSlide || '';
         _this.visitStrokeStyle = json.visitStrokeStyle || '';
         _this.thBottomStrokeStyle = json.thBottomStrokeStyle || '#fff';
         _this.thBottomLineWidth = json.thBottomLineWidth || 1;
@@ -235,17 +237,11 @@ var Node = /** @class */ (function (_super) {
             data: tableData
         })
     };
-    Node.prototype.addToDiv = function (type) {
+    Node.prototype.addToDiv = function () {
         if (this.iframe ||
                 this.elementId ||
                 this.hasGif()) {
             Store.set(this.generateStoreKey('LT:addDiv'), this);
-            // if(type || this.iframe) {
-            //     // 复合Echarts初始化
-            //     createChildrenDivByElementId(this);
-            // }else {
-            //     Store.set(this.generateStoreKey('LT:addDiv'), this);
-            // }
         }
     };
     Node.prototype.hasGif = function () {
@@ -275,6 +271,7 @@ var Node = /** @class */ (function (_super) {
         this.children = [];
         for (var _i = 0, children_1 = children; _i < children_1.length; _i++) {
             var item = children_1[_i];
+            item.visible = this.visible;
             var child = void 0;
             switch (item.type) {
                 case PenType.Line:
@@ -620,8 +617,8 @@ var Node = /** @class */ (function (_super) {
                     this.dash = item.state.dash;
                     this.strokeStyle = item.state.strokeStyle;
                     this.fillStyle = item.state.fillStyle;
-                    this.text = item.state.text;
-                    this.font = item.state.font;
+                    //this.text = item.state.text;
+                    //this.font = item.state.font;
                     this.lineWidth = item.state.lineWidth;
                     this.rotate = item.state.rotate;
                     this.globalAlpha = item.state.globalAlpha;
@@ -647,8 +644,8 @@ var Node = /** @class */ (function (_super) {
                 this.dash = item.state.dash;
                 this.strokeStyle = item.state.strokeStyle;
                 this.fillStyle = item.state.fillStyle;
-                this.text = item.state.text;
-                this.font = item.state.font;
+                //this.text = item.state.text;
+                //this.font = item.state.font;
                 var rate = (timeline - item.start) / item.duration;
                 if (item.linear) {
                     // 线条左右流动动画
@@ -745,21 +742,20 @@ var Node = /** @class */ (function (_super) {
         this['oldRect'] = this.rect.clone();
         if(this.rect.circles) {
             for(let c=0, circles= this.rect.circles; c<circles.length; c++) {
-                circles[c].x = (center.x - (center.x - circles[c].x)) * w;
-                circles[c].y = (center.y - (center.y - circles[c].y)) * h + 15;
+                circles[c].x = center.x - (center.x - circles[c].x) * w;
+                circles[c].y = center.y - (center.y - circles[c].y) * h;
             }
-        }else {
-            this.rect.x = center.x - (center.x - this.rect.x) * w;
-            if(this.rotate % 180) {
-                this.rect.x = this.rect.x + (this.rect.width * w - this.rect.width * h) / 2;
-            }
-            this.rect.y = center.y - (center.y - this.rect.y) * h;
         }
-        this.z *= scale;
+        this.rect.x = center.x - (center.x - this.rect.x) * w;
+        if(this.rotate % 180) {
+            this.rect.x = this.rect.x + (this.rect.width * w - this.rect.width * h) / 2;
+        }
+        this.rect.y = center.y - (center.y - this.rect.y) * h;
         this.rect.width *= this.rotate % 180 ? h : w;
         this.rect.height *= h;
         this.rect.ex = this.rect.x + this.rect.width;
         this.rect.ey = this.rect.y + this.rect.height;
+        this.z *= scale;
         if(!(center.type && center.type === 'bottLogo')) {
             if (this.imageWidth) {
                 this.imageWidth *= w;
@@ -864,6 +860,12 @@ var Node = /** @class */ (function (_super) {
         }
     };
     Node.prototype.translate = function (x, y) {
+        if(this.rect.circles) {
+            for(let c=0, circles= this.rect.circles; c<circles.length; c++) {
+                circles[c].x += x;
+                circles[c].y += y;
+            }
+        }
         this.rect.x += x;
         this.rect.y += y;
         this.rect.ex = this.rect.x + this.rect.width;

package/core/src/models/pen.js

@@ -3,7 +3,6 @@ import { s8 } from '../utils/uuid';
 import { Rect } from './rect';
 import { pointInRect } from '../utils/canvas';
 import { EventType, EventAction } from './event';
-import { setConfItemNode } from '../healps/changeData';
 export var PenType;
 (function (PenType) {
     PenType[PenType["Node"] = 0] = "Node";
@@ -24,7 +23,7 @@ var Pen = /** @class */ (function () {
         this.font = {
             color: '',
             fontFamily: '"Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial',
-            fontSize: 12,
+            fontSize: json.name === 'select' ? 14 : 12,
             lineHeight: 1.5,
             fontStyle: 'normal',
             fontWeight: 'normal',
@@ -108,6 +107,7 @@ var Pen = /** @class */ (function () {
             this.tipId = json.tipId;
             this.title = json.title;
             this.visible = json.visible !== false;
+            this.visibleSwitch = !!json.visibleSwitch; // 元件显示隐藏的开关量
             this.defaultFillStyle = json.defaultFillStyle || '';
             this.defaultFontColor = json.defaultFontColor || '';
             this.defaultStrokeStyle = json.defaultStrokeStyle || '';
@@ -131,7 +131,7 @@ var Pen = /** @class */ (function () {
         }
     }
     Pen.prototype.render = function (ctx) {
-        if (!this.visible && !window.location.pathname.includes('workspace')){
+        if (!this.visible && !this.visibleSwitch){
             return;
         }
         if (this.from && !this.to) {
@@ -248,55 +248,6 @@ var Pen = /** @class */ (function () {
             this[this.eventFns[item.action]] && this[this.eventFns[item.action]](item.value, item.params);
         }
     };
-    Pen.prototype.doSocketMqtt = function (item, msg, client) {
-        if (item.action < EventAction.Function) {
-            this[this.eventFns[item.action]](msg.value || msg || item.value, msg.params || item.params, client);
-        }
-        else if (item.action < EventAction.SetProps) {
-            if (item.action === EventAction.Function && item.value) return this[this.eventFns[item.action]](item.value, msg || item.params, client);
-            let jsonNode = msg;
-            if (typeof msg === 'string') {
-                try {
-                    jsonNode = JSON.parse(msg);
-                }catch (error) { }
-            }
-            console.log('doSocketMqtt-------------', jsonNode)
-            Store.set('mqtt:responseData', jsonNode)
-            //const { areaData, assetData, data } = jsonNode
-            if (!this.data && this.data.length <= 0 && typeof this.data !== 'object') return
-            // const subscribeObj = {
-            //     areaData, assetData, data,
-            //     asset: ''
-            // }
-            jsonNode.asset = ''
-            Object.assign(this, setConfItemNode(this, jsonNode))
-        }
-        else if (item.action === EventAction.SetProps) {
-            var props = [];
-            var data = msg;
-            if (typeof msg === 'string') {
-                try {
-                    data = JSON.parse(msg);
-                }
-                catch (error) { }
-            }
-            if (Array.isArray(data)) {
-                props = data;
-            }
-            for (var _i = 0, props_1 = props; _i < props_1.length; _i++) {
-                var prop = props_1[_i];
-                if (prop.key) {
-                    if (typeof prop.value === 'object') {
-                        this[prop.key] = Object.assign(this[prop.key], prop.value);
-                    }
-                    else {
-                        this[prop.key] = prop.value;
-                    }
-                }
-            }
-            Store.set(this.generateStoreKey('LT:render'), true);
-        }
-    };
     Pen.prototype.show = function () {
         this.visible = true;
         return this;

package/core/src/models/rect.js

@@ -8,10 +8,10 @@ var Rect = /** @class */ (function () {
         this.height = height;
         this.center = new Point(0, 0);
         if (width < 0) {
-            width = 0;
+            this.width = 0;
         }
         if (height < 0) {
-            height = 0;
+            this.height = 0;
         }
         this.init();
     }

package/core/src/options.d.ts

@@ -11,6 +11,7 @@ export declare enum KeydownType {
     Canvas = 1
 }
 export interface Options {
+    type?: string;
     cacheLen?: number;
     extDpiRatio?: number;
     width?: string | number;
@@ -59,6 +60,7 @@ export interface Options {
     keydown?: KeydownType;
     viewPadding?: Padding;
     on?: (event: string, data: any) => void;
+    storeSubscribe?: boolean
 }
 export declare const DefalutOptions: Options;
 

package/core/src/options.js

@@ -38,6 +38,7 @@ export var DefalutOptions = {
     autoExpandDistance: 200,
     keydown: KeydownType.Document,
     viewPadding: 0,
-    interval: 50
+    interval: 50,
+    storeSubscribe: false
 };
 //# sourceMappingURL=options.js.map

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];
@@ -228,7 +239,12 @@ var Preview = (function (_super) {
             return;
         // 1. 重置画布尺寸为容器尺寸
         var parentElem = this.store.parentElem;
-        var width = parentElem.offsetWidth, height = parentElem.offsetHeight;
+        var width = parentElem.offsetWidth,
+            height = parentElem.offsetHeight;
+        if(this.store.options.storeSubscribe) {
+            width = this.store.options.width;
+            height = this.store.options.height;
+        }
         this.canvasResize({
             width: width,
             height: height,
@@ -239,6 +255,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 +267,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 +279,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;
         }
     };