dcim-topology2d 2.2.3 → 3.0.2

package/core/src/models/pen.js

@@ -3,6 +3,7 @@ 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";
@@ -18,12 +19,14 @@ var Pen = /** @class */ (function () {
         this.globalAlpha = 1;
         this.dash = 0;
         this.strokeStyle = '';
-        this.visitStrokeStyle = '';
         this.fillStyle = '';
+        this.defaultFillStyle = '';
+        this.defaultFontColor = '#fff';
+        this.defaultStrokeStyle = '';
         this.font = {
             color: '',
             fontFamily: '"Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial',
-            fontSize: json.name === 'select' ? 14 : 12,
+            fontSize: 12,
             lineHeight: 1.5,
             fontStyle: 'normal',
             fontWeight: 'normal',
@@ -44,9 +47,6 @@ var Pen = /** @class */ (function () {
         this.events = [];
         this.eventFns = ['link', 'doAnimate', 'doFn', 'doWindowFn'];
         this.floorImageIndex = false;
-        this.defaultFillStyle = '';
-        this.defaultFontColor = '';
-        this.defaultStrokeStyle = '';
         if (json) {
             this.id = json.id || s8();
             this.name = json.name || '';
@@ -71,10 +71,11 @@ var Pen = /** @class */ (function () {
             if (json.lineWidth || json.lineWidth === 0) {
                 this.lineWidth = json.lineWidth;
             }
-            this.activeImgeIndex = json.activeImgeIndex || false;
-            this.visitStrokeStyle = json.visitStrokeStyle || '';
             this.strokeStyle = json.strokeStyle || '';
             this.fillStyle = json.fillStyle || '';
+            this.defaultFillStyle = json.defaultFillStyle || '';
+            this.defaultFontColor = json.defaultFontColor || '#fff';
+            this.defaultStrokeStyle = json.defaultStrokeStyle || '';
             this.lineCap = json.lineCap;
             this.globalAlpha = (json.globalAlpha || json.globalAlpha === 0) ? json.globalAlpha : 1
             this.rotate = json.rotate || 0;
@@ -107,17 +108,6 @@ 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 || '';
-
-            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;
             }
@@ -138,7 +128,7 @@ var Pen = /** @class */ (function () {
         }
     }
     Pen.prototype.render = function (ctx) {
-        if (!this.visible && !this.visibleSwitch) {
+        if (!this.visible && !window.location.pathname.includes('workspace')){
             return;
         }
         if (this.from && !this.to) {
@@ -157,16 +147,8 @@ var Pen = /** @class */ (function () {
         if (this.lineWidth > 1) {
             ctx.lineWidth = this.lineWidth;
         }
-        if (this.dash === 4) {
-            ctx.strokeStyle = 'transparent';
-        } else {
-            const staticStrokeStyle = this.strokeStyle || '#222';
-            ctx.strokeStyle = !this.activeImgeIndex ? this.visitStrokeStyle || staticStrokeStyle : this.defaultStrokeStyle || staticStrokeStyle;
-        }
-        //ctx.strokeStyle = this.dash === 4 ? 'transparent' : this.strokeStyle || '#222';
-        //背景聚焦色 
-        this.focusFillStyle && !this.activeImgeIndex ? ctx.fillStyle = this.focusFillStyle : (this.fillStyle && (ctx.fillStyle = this.fillStyle));
-
+        ctx.strokeStyle = this.dash === 4 ? 'transparent' : this.strokeStyle || '#222';
+        this.fillStyle && (ctx.fillStyle = this.fillStyle);
         if (this.lineCap) {
             ctx.lineCap = this.lineCap;
         }
@@ -228,19 +210,19 @@ var Pen = /** @class */ (function () {
         }
         for (var _i = 0, _a = this.events; _i < _a.length; _i++) {
             var item = _a[_i];
-            if (item.type !== EventType.Click) {
+            if (item.type !== EventType.Click ) {
                 continue;
             }
             // 画布页面，单击跳转链接事件屏蔽
-            if (item.action === EventAction.Link && window.location.pathname.includes('workspace')) {
+            if(item.action === EventAction.Link && window.location.pathname.includes('workspace')){
                 continue
             }
-            if (item.action === EventAction.Link) {
+            if(item.action === EventAction.Link){
                 this[this.eventFns[item.action]](item.value, item.dcimMenuForType);
-            } else {
+            }else{
                 this[this.eventFns[item.action]] && this[this.eventFns[item.action]](item.value, item.params);
             }
-            if (item.action === 7) {
+            if(item.action === 7){
                 Store.set(this.generateStoreKey('LT:hidePen'), item.value);
             }
         }
@@ -257,6 +239,55 @@ 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;
@@ -279,10 +310,10 @@ var Pen = /** @class */ (function () {
         // window.open(url, params === undefined ? '_blank' : params);
         var port = window.location.port;
         var href = window.location.href;
-        if (!url.includes("http") && port.includes("3000") && url.includes("id")) {
-            url = '/workspace?id=' + url.split('id=')[1]
+        if(!url.includes("http") && port.includes("3000") && url.includes("id")){
+            url= '/workspace?id=' + url.split('id=')[1]
             // console.log('url:3000===',url)
-        } else if (!url.includes("http://") && href.includes("topologyDetail")) {
+        }else if(!url.includes("http://") && href.includes("topologyDetail")){
             switch (params) {
                 case '1': // 返回上一页
                     let str = href.replace(/\/topologyDetail/g, "")

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) {
-            this.width = 0;
+            width = 0;
         }
         if (height < 0) {
-            this.height = 0;
+            height = 0;
         }
         this.init();
     }

package/core/src/mqtt.d.ts

@@ -0,0 +1,14 @@
+import { TopologyData } from './models';
+export declare class MQTT {
+    url: string;
+    options: any;
+    topics: string;
+    data: TopologyData;
+    client: any;
+    constructor(url: string, options: any, topics: string, data: TopologyData);
+    init(): void;
+    onmessage: (topic: string, message: any) => void;
+    publish(topic: string, message: string): void;
+    close(): void;
+    isEnd: boolean;
+}

package/core/src/mqtt.js

@@ -0,0 +1,82 @@
+import * as mqtt from './mqtt.min.js';
+import { EventType } from './models';
+import { Store } from 'le5le-store';
+var MQTT = /** @class */ (function () {
+    function MQTT(url, options, topics, data) {
+        var _this = this;
+        this.url = url;
+        this.options = options;
+        this.topics = topics;
+        this.data = data;
+        this.isEnd = false;
+        this.num = 0; // 记录推送的次数，用于判单丢失情况
+        this.onmessage = function (topic, message) {
+          if (!_this.data.pens.length || !topic || topic != _this.data.mqttTopics) {
+              return;
+          }
+          console.log((new Date()).toString().substring(16,24))
+          // 判单推送是否有失丢
+          var theNum = JSON.parse(message.toString()).pushNumber
+          if((theNum - this.num) > 1) {
+            console.log('发生丢失！')
+            console.log('上次的计数===',this.num)
+            console.log('当前的计数===',theNum)
+            // 再次主动请求
+            Store.set('mqttLostMessage', true);
+          }else{
+            Store.set('mqttLostMessage', false);
+          }
+          this.num = JSON.parse(message.toString()).pushNumber
+          console.log('已执行的计数===',this.num)
+          console.log('\n')
+
+          if(!_this.isEnd){
+              _this.getPen(_this.data.pens, topics, message)
+          }
+        };
+        //服务器连接异常的回调
+        this.onerror= function (error) {
+            console.log('服务器连接异常',error)
+           
+        };
+        this.init();
+    }
+    MQTT.prototype.init = function () {
+        this.client = mqtt.connect(this.url, this.options);
+        console.log('connect===',this.options)
+        this.client.on('message', this.onmessage);
+        if (this.topics) {
+            this.client.subscribe(this.topics.split(','));
+        }
+    };
+    MQTT.prototype.publish = function (topic, message) {
+        this.client.publish(topic, message);
+    };
+    MQTT.prototype.close = function () {
+        this.isEnd = true
+        this.client.end();
+    };
+    MQTT.prototype.getPen = function (pens, topics, message) {
+        const _this = this;
+        pens.forEach((pen)=>{
+            if(pen.children != undefined){
+            _this.getPen(pen.children, topics, message)
+            }else{
+                var item = pen;
+                for (var _b = 0, _c = item.events; _b < _c.length; _b++) {
+                    var event_1 = _c[_b];
+                    if (event_1.type === EventType.Mqtt) {
+                        event_1.name = topics;
+                        if(message){
+                            item.doSocketMqtt(event_1, message.toString(), _this.client);
+                        }
+                    }
+                }
+            }
+        })
+    };
+    return MQTT;
+}());
+
+export { MQTT };
+//# sourceMappingURL=mqtt.js.map

package/core/src/mqtt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mqtt.js","sourceRoot":"","sources":["../../../packages/core/src/mqtt.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,IAAI,MAAM,eAAe,CAAC;AAEtC,OAAO,EAAE,SAAS,EAAgB,MAAM,UAAU,CAAC;AAEnD;IAEE,cAAmB,GAAW,EAAS,OAAY,EAAS,MAAc,EAAS,IAAkB;QAArG,iBAEC;QAFkB,QAAG,GAAH,GAAG,CAAQ;QAAS,YAAO,GAAP,OAAO,CAAK;QAAS,WAAM,GAAN,MAAM,CAAQ;QAAS,SAAI,GAAJ,IAAI,CAAc;QAarG,cAAS,GAAG,UAAC,KAAa,EAAE,OAAY;YACtC,IAAI,CAAC,KAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE;gBACpC,OAAO;aACR;YAED,KAAmB,UAAc,EAAd,KAAA,KAAI,CAAC,IAAI,CAAC,IAAI,EAAd,cAAc,EAAd,IAAc,EAAE;gBAA9B,IAAM,IAAI,SAAA;gBACb,KAAoB,UAAW,EAAX,KAAA,IAAI,CAAC,MAAM,EAAX,cAAW,EAAX,IAAW,EAAE;oBAA5B,IAAM,OAAK,SAAA;oBACd,IAAI,OAAK,CAAC,IAAI,KAAK,SAAS,CAAC,IAAI,EAAE;wBACjC,IAAI,OAAK,CAAC,IAAI,IAAI,KAAK,CAAC,OAAO,CAAC,OAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE;4BAChD,IAAI,CAAC,YAAY,CAAC,OAAK,EAAE,OAAO,CAAC,QAAQ,EAAE,EAAE,KAAI,CAAC,MAAM,CAAC,CAAC;yBAC3D;qBACF;iBACF;aACF;QACH,CAAC,CAAC;QA1BA,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAED,mBAAI,GAAJ;QACE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QACnD,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QAE1C,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;SAC/C;IACH,CAAC;IAkBD,sBAAO,GAAP,UAAQ,KAAa,EAAE,OAAe;QACpC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IACtC,CAAC;IAED,oBAAK,GAAL;QACE,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC;IACpB,CAAC;IACH,WAAC;AAAD,CAAC,AAtCD,IAsCC"}

package/core/src/offscreen.d.ts

@@ -1,12 +1,15 @@
+import { Options } from './options';
 import { Canvas } from './canvas';
 import { ActiveLayer } from './activeLayer';
 import { HoverLayer } from './hoverLayer';
 import { AnimateLayer } from './animateLayer';
 export declare class Offscreen extends Canvas {
+    parentElem: HTMLElement;
+    options: Options;
     activeLayer: ActiveLayer;
     hoverLayer: HoverLayer;
     animateLayer: AnimateLayer;
-    constructor(TID: String);
+    constructor(parentElem: HTMLElement, options: Options, TID: String);
     getRoutineLayer(auto?:[]): void;
     render(): void;
     destroy(): void;

package/core/src/offscreen.js

@@ -1,8 +1,8 @@
 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) {
@@ -13,55 +13,53 @@ var __extends = (this && this.__extends) || (function () {
 })();
 import { Store } from 'le5le-store';
 import { Canvas } from './canvas';
-import { Node, Line } from './models'
-import { commonStore } from './store'
 var Offscreen = /** @class */ (function (_super) {
     __extends(Offscreen, _super);
-    function Offscreen(TID) {
-        var _this = _super.call(this, TID) || this;
+    function Offscreen(parentElem, options, TID) {
+        if (options === void 0) { options = {}; }
+        var _this = _super.call(this, parentElem, options, TID) || this;
+        _this.parentElem = parentElem;
+        _this.options = options;
         _this.activeLayer = null;
         _this.hoverLayer = null;
         _this.animateLayer = null;
         Store.set(_this.generateStoreKey('LT:offscreen'), _this.canvas);
         return _this;
     }
-    Offscreen.prototype.getRoutineLayer = function (auto) {
-        if (!auto || auto.includes('ActiveLayer')) {
-            this.activeLayer = Store.get(this.generateStoreKey('LT:ActiveLayer'));
-        }
-        if (!auto || auto.includes('HoverLayer')) {
-            this.hoverLayer = Store.get(this.generateStoreKey('LT:HoverLayer'));
-        }
-        if (!auto || auto.includes('AnimateLayer')) {
-            this.animateLayer = Store.get(this.generateStoreKey('LT:AnimateLayer'));
-        }
+    Offscreen.prototype.getRoutineLayer = function(auto) {
+      if(!auto || auto.includes('ActiveLayer')) {
+        this.activeLayer = Store.get(this.generateStoreKey('LT:ActiveLayer'));
+      }
+      if(!auto || auto.includes('HoverLayer')) {
+        this.hoverLayer = Store.get(this.generateStoreKey('LT:HoverLayer'));
+      }
+      if(!auto || auto.includes('AnimateLayer')) {
+        this.animateLayer = Store.get(this.generateStoreKey('LT:AnimateLayer'));
+      }
     };
     Offscreen.prototype.render = function () {
         _super.prototype.render.call(this);
         var ctx = this.canvas.getContext('2d');
-        if (!commonStore || !commonStore[this.TID]) return;
-        let store = commonStore[this.TID];
-        ctx.strokeStyle = store.options.color;
-        for (var _i = 0, _a = store.data.pens; _i < _a.length; _i++) {
+        ctx.strokeStyle = this.options.color;
+        for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
             var item = _a[_i];
-            if (!(item instanceof Node) && !(item instanceof Line)) item = new Node(item);
             if (!item.getTID()) {
                 item.setTID(this.TID);
             }
             item.render(ctx);
         }
-        if (this.activeLayer) {
+        if(this.activeLayer) {
             this.activeLayer.render(ctx);
         }
-        if (this.hoverLayer) {
-            this.hoverLayer.render(ctx);
+        if(this.hoverLayer) {
+          this.hoverLayer.render(ctx);
         }
-        if (this.animateLayer) {
+        if(this.animateLayer) {
             this.animateLayer.render(ctx);
         }
-        store = null;
     };
     Offscreen.prototype.destroy = function () {
+        this.options = null;
         this.activeLayer = null;
         this.hoverLayer = null;
         this.animateLayer = null;

package/core/src/options.d.ts

@@ -11,7 +11,6 @@ export declare enum KeydownType {
     Canvas = 1
 }
 export interface Options {
-    type?: string;
     cacheLen?: number;
     extDpiRatio?: number;
     width?: string | number;
@@ -45,7 +44,7 @@ export interface Options {
     alwaysAnchor?: boolean;
     disableEmptyLine?: boolean;
     disableRepeatLine?: boolean;
-    disableScale?: boolean; // 禁止缩放
+    disableScale?: boolean;
     disableMoveOutParent?: boolean;
     disableDockLine?: boolean;
     playIcon?: string;
@@ -60,7 +59,6 @@ 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,7 +38,5 @@ export var DefalutOptions = {
     autoExpandDistance: 200,
     keydown: KeydownType.Document,
     viewPadding: 0,
-    interval: 50,
-    storeSubscribe: false
 };
 //# sourceMappingURL=options.js.map

package/core/src/poll.js

@@ -0,0 +1,39 @@
+import { EventType } from 'dcim-topology/core/src/models';
+
+// 轮询
+var POLL = /** @class */ (function () {
+    function POLL(data, message, val) {
+        this.data = data;
+        this.client = message;
+        this.val = val;
+        this.init();
+    };
+    POLL.prototype.init = function () {
+        let topics = ''
+        this.getPen(this.data.pens, topics, JSON.stringify(this.client))
+    };
+    POLL.prototype.getPen = function (pens, topics, message) {
+        const _this = this;
+        pens.forEach((pen)=>{
+            if(pen.children != undefined){
+            _this.getPen(pen.children, topics, message)
+            }else{
+                var item = pen;
+                for (var _b = 0, _c = item.events; _b < _c.length; _b++) {
+                    var event_1 = _c[_b];
+                    // if (event_1.type === EventType.Poll) {
+                    if ((event_1.type ===3 && this.val === 'Mqtt') || (event_1.type ===4 && this.val === 'Poll')
+                    || (event_1.type ===5 && this.val === 'Poll1') || (event_1.type ===6 && this.val === 'Poll2')) {
+                        event_1.name = topics;
+                        if(message){
+                            item.doSocketMqtt(event_1, message.toString());
+                        }
+                    }
+                }
+            }
+        })
+    };
+    return POLL;
+}());
+export { POLL };
+//# sourceMappingURL=mqtt.js.map

package/core/src/preview.d.ts

@@ -1,10 +1,21 @@
 // @ts-ignore
-import {Padding, Options} from './options';
+import {Options, Padding} from './options';
+import { Pen } from './models';
+import { Node } from './models';
 import { Point } from './models';
+import { Line } from './models';
+import { TopologyData } from './models';
+import { Lock } from './models';
+import { Offscreen } from './offscreen';
+import { RenderLayer } from './renderLayer';
+import { AnimateLayer } from './animateLayer';
+import { DivLayer } from './divLayer';
+import { Rect } from './models';
+import { Socket } from './socket';
+import { MQTT } from './mqtt';
 import {Common} from './common';
 export declare class Preview extends Common{
     constructor(parent: string | HTMLElement, options?: Options);
-    private eventChangeSubcribe;
     private scheduledAnimationFrame;
     private onMouseMove;
     private onmousedown;