dcim-topology2d 2.2.0 → 3.0.2

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

@@ -1,29 +0,0 @@
-import {rectangle} from './rectangle';
-import {s8} from "../../utils";
-import {createIframeElement} from "../../element";
-import {commonStore} from "../../store";
-
-export function iframePrimeval(ctx, node) {
-    //console.log('iframePrimeval############', node)
-    // 绘制一个底图，类似于占位符。
-    rectangle(ctx, node);
-    if (!commonStore[node.TID].iframeDataPool[node.id]) {
-        node.elementId = s8();
-        commonStore[node.TID].iframeDataPool[node.id] = {
-            node: {
-                id: node.id,
-                src: node.iframe
-            }
-        };
-        const iframe = createIframeElement(node);
-        commonStore[node.TID].iframeDataPool[node.id].iframe = iframe;
-        const parentEle = window.location.pathname.includes('workspace') ? document.getElementById('topology-canvas') : document.body;
-        parentEle.appendChild(iframe);
-        // 添加当前节点到div层
-        node.addToDiv();
-    }else {
-        const iframeNode = commonStore[node.TID].iframeDataPool[node.id];
-        if(iframeNode.node.src === node.iframe) return;
-        iframeNode.iframe.src = node.iframe;
-    }
-}

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

@@ -1,51 +0,0 @@
-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';

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

@@ -1,53 +0,0 @@
-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';
-
-//# sourceMappingURL=index.js.map

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

@@ -1,2 +0,0 @@
-import { Node } from 'dcim-topology2d/core/src/models';
-export declare function switchs(ctx: CanvasRenderingContext2D, node: Node): void;

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

@@ -1,46 +0,0 @@
-export function switchs(ctx, node) {
-
-    let x = node.rect.x;
-    let y = node.rect.y;
-    let width = node.rect.width;
-    let height = node.rect.height;
-    // 绘制圆角
-    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 r = wr < hr ? wr : hr;
-    if (node.rect.width < 2 * r) {
-        r = node.rect.width / 2;
-    }
-    if (node.rect.height < 2 * r) {
-        r = node.rect.height / 2;
-    }
-    //绘制椭圆
-    ctx.fillStyle = node.fillStyle;
-    ctx.beginPath();
-    ctx.moveTo(x + r, y);
-    ctx.lineTo(x + width - r, y);
-    ctx.quadraticCurveTo(x + width, y, x + width, y + r);
-    ctx.lineTo(x + width, y + height - r);
-    ctx.quadraticCurveTo(x + width, y + height, x + width - r, y + height);
-    ctx.lineTo(x + r, y + height);
-    ctx.quadraticCurveTo(x, y + height, x, y + height - r);
-    ctx.lineTo(x, y + r);
-    ctx.quadraticCurveTo(x, y, x + r, y);
-    ctx.lineTo(x + width - r, y);
-    ctx.closePath();
-    node.fillStyle && ctx.fill();
-    ctx.stroke();
-
-    //绘制左侧 小圆 默认在右侧 isOpen:true
-    ctx.beginPath();
-    let cx = node.isOpen ? x + width - height * 0.5 : x + height * 0.5;
-    ctx.ellipse(cx, y + height * 0.5, height / 2 * 0.8, height / 2 * 0.8, 0, 0, Math.PI * 2);
-    ctx.fillStyle = '#ffffff';
-    ctx.closePath();
-    ctx.fill();
-    ctx.stroke();
-}

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

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

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

@@ -1,98 +0,0 @@
-export function time(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 r = wr < hr ? wr : hr;
-    if (node.rect.width < 2 * r) {
-        r = node.rect.width / 2;
-    }
-    if (node.rect.height < 2 * r) {
-        r = node.rect.height / 2;
-    }
-
-    // 背景
-    let x = node.rect.x;
-    let y = node.rect.y;
-    let width = node.rect.width * 0.29;
-    let height = node.rect.height;
-    let gap = node.rect.width * 0.065;
-    let {h, m, s} = node.time;
-
-    //绘制时
-    drawText(ctx, r, x, y, width, height, h, node, gap)
-
-    //绘制分
-    drawText(ctx, r, x+width+gap, y, width, height, m, node, gap)
-
-    //绘制秒
-    drawText(ctx, r, x+(width*2 + gap*2), y, width, height, s, node)
-
-    //恢复填充色
-    ctx.fillStyle = "#ffffff";
-
-
-}
-
-function drawText(ctx, r, x, y, width, height, hText, node, gap) {
-
-    //文字
-    let textfillStyle = node.font.color || "#ffffff";
-    let textBackground = node.font.background || '#ffffff1a';
-    ctx.font = '' + node.font.fontSize +"px " + node.font.fontFamily;
-    ctx.textBaseline = 'middle';
-    ctx.textAlign = 'center';
-
-    const centerX = width / 2;
-    const centerY = height / 2;
-    //绘制上半部分
-    ctx.save();
-    ctx.beginPath();
-    ctx.fillStyle = textBackground;
-    ctx.beginPath();
-    ctx.moveTo(x + r, y);
-    ctx.lineTo(x + width -r, y);
-    ctx.quadraticCurveTo(x + width, y, x+width, y+r);
-    ctx.lineTo(x+width, y + height/2 - 1);
-    ctx.lineTo(x, y + height/2 - 1);
-    ctx.lineTo(x, y+r);
-    ctx.quadraticCurveTo(x, y, x+r, y);
-    ctx.fill();
-    ctx.clip();
-
-    ctx.fillStyle = textfillStyle;
-    ctx.fillText(hText, x+centerX, y+centerY);
-    ctx.restore();
-    //绘制下半部分
-    ctx.save();
-    ctx.beginPath();
-    ctx.fillStyle = textBackground;
-    ctx.moveTo(x, y+height/2+1);
-    ctx.lineTo(x+width, y+height/2+1);
-    ctx.lineTo(x+width, y+height-r);
-    ctx.quadraticCurveTo(x+width, y+height, x+width-r, y+height);
-    ctx.lineTo(x+r, y+height);
-    ctx.quadraticCurveTo(x, y+height, x, y+height-r);
-    ctx.lineTo(x, y+height/2+2);
-    ctx.fill();
-    ctx.clip();
-    
-    ctx.fillStyle = textfillStyle;
-    ctx.fillText(hText, x+centerX, y+centerY);
-    ctx.restore();
-
-    //绘制冒号
-    if(!gap) return
-
-    ctx.fillStyle = textfillStyle;
-    ctx.textBaseline = 'middle';
-    ctx.textAlign = 'center';
-    let metricss = ctx.measureText(":");
-    const fontHeights = metricss.actualBoundingBoxAscent + metricss.actualBoundingBoxDescent;
-    const centerYY = y + (height / 2) + (metricss.actualBoundingBoxAscent - fontHeights / 2);
-    ctx.fillText(":", x+width+(gap/2), centerYY);
-    ctx.restore();
-
-}

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

@@ -1,9 +0,0 @@
-import { Pen } from '../models';
-// @ts-ignore
-export const commonStore: {
-    canvasDraws: {
-        [key: string]: (ctx: CanvasRenderingContext2D, pen: Pen) => void;
-    };
-    anchors: { [key: string]: (pen: Pen) => void }; 
-    htmlElements: { [key: string]: HTMLDivElement }; // html元素
-};

package/core/src/store/common.js

@@ -1,5 +0,0 @@
-export var commonStore = {
-    canvasDraws: {},
-    anchors: {},
-    htmlElements: {}
-};

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

@@ -1,196 +0,0 @@
-// @ts-ignore
-import { default as mitt, Emitter } from 'mitt';
-import { Pen, Lock } from '../models';
-import {Options, DefalutOptions} from '../options';
-import {s8} from '../utils';
-import { commonStore } from './common'
-// 2D可视化的data数据
-export interface visualization2DData {
-    pens: Pen[];
-    lineName: string;
-    fromArrowType: string;
-    toArrowType: string;
-    scale: number;
-    pageZoom: number,
-    locked: Lock;
-    bkImage: string;
-    bkColor: string;
-    grid?: boolean;
-    websocket?: string;
-    mqttUrl?: string;
-    mqttOptions?: {
-        clientId?: string;
-        username?: string;
-        password?: string;
-    };
-    mqttTopics?: string;
-    manualCps?: boolean;
-    dataConstruct?: any;
-    bindDataTooltipVisible?: boolean;
-    data?: any;
-    bkImageRect?: any;
-}
-export interface paramsData {
-    doorIds?: [],
-    tagIds?: [],
-    kpiAddrs?: [],
-    tagEcharts?: [],
-    assetIds?: [],
-    areaIds?: [],
-    varVaule?: [],
-    branchValue?: [],
-    echartData?: [],
-    dataConfig?: {},
-    echartAssemblyData?: [],
-    routingkey?: string,
-    pathRewrite?: string
-}
-// 2D可视化使用到的数据仓库
-export interface visualization2DStore {
-    id: string;
-    data: visualization2DData;
-    mqttData?: null; // mqtt实时数据
-    initConfNode: {}; // 初始化元件节点数据
-    mqttParams: paramsData; // mqtt参数
-    pens: { [key: string]: Pen };
-    options: Options;
-    cacheDatas?: {
-        data: visualization2DData;
-    }[];
-    elementInteractivePoor: {}; // element 交互过渡数据
-    pickerDataPool: {}; // datePicker 交互数据池
-    echartsDataPool: {}; // echarts Dom节点数据
-    echartsOptionsPool: {}; // echarts options节点数据
-    echartsRealDataPool: {}; // echarts 实时数据
-    switchTabDataPool: {}; // tabs
-    tableDataPool: {}; // form table
-    selectDataPool: {}; // form select
-    selectRealDataPool: {}; // form select
-    selectTabDataPool: {}; // form select
-    iframeDataPool: {}; // iframe
-    formoverDataPool: {}; // 滚动组件 Dom节点数据
-    formoverCanvasDataPool: {}; // 滚动组件 画布节点数据
-    emitter: Emitter;
-    dpiRatio?: number;
-    lastScale?: number; //记录上次模版的scale
-    monitorAlarm?:boolean; // 全局报警标记，代表正在访问的这个topology文件中是否有告警发生
-    parentElem: HTMLElement
-}
-// @ts-ignore
-export const createStore = () => {
-    return {
-        id: '',
-        data: {
-            pens: [],
-            lineName: 'curve',
-            fromArrowType: '',
-            toArrowType: 'triangleSolid',
-            scale: 1,
-            pageZoom: 1,
-            locked: Lock.None,
-            bkImageRect: null,
-            mqttOptions: {
-                clientId: s8()
-            },
-            dataConstruct: {},
-            bindDataTooltipVisible: true
-        },
-        mqttData: null,
-        initConfNode: {},
-        mqttParams: {
-            doorIds: [],
-            tagIds: [],
-            kpiAddrs: [],
-            tagEcharts: [],
-            assetIds: [],
-            areaIds: [],
-            varVaule: [],
-            branchValue: [],
-            echartData: [],
-            dataConfig: {},
-            echartAssemblyData: [],
-            routingkey: '',
-            pathRewrite: ''
-        },
-        pens: {},
-        options: { ...DefalutOptions },
-        elementInteractivePoor: {}, // element 交互过渡数据
-        pickerDataPool: {}, // datePicker 交互数据池
-        echartsDataPool: {}, // echarts Dom节点数据
-        echartsOptionsPool: {}, // echarts options节点数据
-        echartsRealDataPool: {}, // echarts 实时数据
-        switchTabDataPool: {}, // tabs
-        tableDataPool: {}, // form table
-        selectDataPool: {}, // form select
-        selectRealDataPool: {}, // form select
-        selectTabDataPool: {}, // form select
-        iframeDataPool: {}, // iframe
-        formoverDataPool: {}, // 滚动组件 Dom节点数据
-        formoverCanvasDataPool: {}, // 滚动组件 画布节点数据
-        emitter: mitt(),
-        cacheDatas: [],
-        dpiRatio: 1,
-        lastScale: 1,
-        monitorAlarm: false,
-        parentElem: null
-    } as visualization2DStore;
-};
-// @ts-ignore
-export const useStore = (id = 'default'): visualization2DStore => {
-    if (!commonStore[id]) {
-        // @ts-ignore
-        commonStore[id] = createStore();
-        commonStore[id].id = id;
-    }
-    return commonStore[id];
-};
-export declare function clearElementDataPool(data: {}): void;
-// @ts-ignore
-export const clearStore = (store: visualization2DStore, del: string) => {
-    store.data = {
-        bkColor: '',
-        bkImage: '',
-        data: undefined,
-        grid: false,
-        manualCps: false,
-        mqttTopics: '',
-        mqttUrl: '',
-        websocket: '',
-        pens: [],
-        lineName: 'curve',
-        fromArrowType: '',
-        toArrowType: 'triangleSolid',
-        scale: 1,
-        pageZoom: 1,
-        locked: Lock.None,
-        bkImageRect: null,
-        mqttOptions: {
-            clientId: s8()
-        },
-        dataConstruct: {},
-        bindDataTooltipVisible: true
-    };
-    store.mqttData = null;
-    store.initConfNode = {};
-    store.mqttParams = {
-        doorIds: [],
-        tagIds: [],
-        kpiAddrs: [],
-        tagEcharts: [],
-        assetIds: [],
-        areaIds: [],
-        varVaule: [],
-        branchValue: [],
-        echartData: [],
-        echartAssemblyData: [],
-        routingkey: '',
-        pathRewrite: ''
-    };
-    store.lastScale = store.data.scale;
-    store.pens = {};
-    store.options = {};
-    store.cacheDatas = [];
-    store.dpiRatio = 1;
-    store.lastScale = 1;
-    store.monitorAlarm = false;
-};

package/core/src/store/data.js

@@ -1,193 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { default as mitt } from 'mitt';
-import { Lock } from '../models';
-import {DefalutOptions} from '../options';
-import {s8} from '../utils';
-import {commonStore} from './common';
-import {removeAllElement} from '../../../store';
-export var createStore = function () {
-    return {
-        id: '',
-        data: {
-            pens: [],
-            lineName: 'curve',
-            fromArrowType: '',
-            toArrowType: 'triangleSolid',
-            scale: 1,
-            locked: Lock.None,
-            dataResize: 1, // 数据是否加载，1是，0否
-            bkImageRect: null,
-            pageZoom: 1,
-            mqttOptions: {
-                clientId: s8()
-            },
-            dataConstruct: {},
-            bindDataTooltipVisible: true
-        },
-        mqttData: null,
-        initConfNode: {},
-        mqttParams: {
-            doorIds: [],
-            tagIds: [],
-            kpiAddrs: [],
-            tagEcharts: [],
-            assetIds: [],
-            areaIds: [],
-            varVaule: [],
-            branchValue: [],
-            echartData: [],
-            dataConfig: {},
-            echartAssemblyData: [],
-            routingkey: '',
-            pathRewrite: ''
-        },
-        pens: {},
-        options: { ...DefalutOptions },
-        elementInteractivePoor: {}, // element 交互过渡数据
-        pickerDataPool: {}, // datePicker 交互数据池
-        echartsDataPool: {}, // echarts Dom节点数据
-        echartsOptionsPool: {}, // echarts options节点数据
-        echartsRealDataPool: {}, // echarts 实时数据 datePicker
-        switchTabDataPool: {}, // tabs
-        tableDataPool: {}, // form table
-        selectDataPool: {}, // form select
-        selectRealDataPool: {}, // form select
-        selectTabDataPool: {}, // form select
-        iframeDataPool: {}, // iframe
-        formoverDataPool: {}, // 滚动组件 Dom节点数据
-        formoverCanvasDataPool: {}, // 滚动组件 画布节点数据
-        emitter: mitt(),
-        cacheDatas: [],
-        dpiRatio: 1,
-        lastScale: 1,
-        monitorAlarm: false,// 全局报警标记，代表正在访问的这个topology文件中是否有告警发生
-        parentElem: null,
-        timeDataPool: {}, // time
-    };
-};
-export var useStore = function (id) {
-    if (id === void 0) { id = 'default'; }
-    if (!commonStore[id]) {
-        commonStore[id] = createStore();
-        commonStore[id].id = id;
-    }
-    return commonStore[id];
-};
-export function clearElementDataPool(data) {
-    const { echartsDataPool, selectDataPool, iframeDataPool, formoverDataPool, formoverCanvasDataPool} = data;
-    for (let [key, node] of Object.entries(echartsDataPool)) {
-        if(node) {
-            clearInterval(node.timeTicket);
-            if(node.chart) {
-                node.chart.off('mouseover');
-                node.chart.off('mouseout');
-                node.chart.off('globalout');
-                node.chart.dispose();
-            }
-            if(node.div && node.div.parentNode) node.div.parentNode.removeChild(node.div);
-        }
-        delete data.echartsDataPool[key];
-    }
-    if(Object.keys(selectDataPool).length) {
-        let dropdownEle = null,
-                dropdownListEle = null;
-        for (let [key, node] of Object.entries(selectDataPool)) {
-            if(!dropdownEle) {
-                dropdownEle = node.dom.selectDropdown;
-                dropdownListEle = node.dom.selectDropdownUl;
-            }
-            if(node.dom.selectEle && node.dom.selectEle.parentNode) node.dom.selectEle.parentNode.removeChild(node.dom.selectEle);
-            delete data.selectDataPool[key];
-        }
-        if(dropdownEle) dropdownEle.style.display = 'none';
-        if(dropdownListEle) dropdownListEle.innerHTML = '';
-    }
-    for (let [key, node] of Object.entries(iframeDataPool)) {
-        node.iframe.parentNode.removeChild(node.iframe);
-        delete data.iframeDataPool[key];
-    }
-    for (let key of Object.keys(formoverDataPool)) {
-        delete formoverDataPool[key];
-    }
-    for (let key of Object.keys(formoverCanvasDataPool)) {
-        const elementNode = document.getElementById(key);
-        if(elementNode) {
-            elementNode.parentNode.removeChild(elementNode);   
-        }
-        delete formoverCanvasDataPool[key];
-    }
-}
-export var clearStore = function (store, del) {
-    store.lastScale = store.data.scale;
-    store.data = {
-        pens: [],
-        lineName: 'curve',
-        fromArrowType: '',
-        toArrowType: 'triangleSolid',
-        scale: 1,
-        pageZoom: 1,
-        locked: Lock.None,
-        dataResize: 1, // 数据是否加载，1是，0否
-        bkImageRect: null,
-        mqttOptions: {
-            clientId: s8()
-        },
-        dataConstruct: {},
-        bindDataTooltipVisible: true
-    };
-    store.initConfNode = {};
-    store.mqttParams = {
-        doorIds: [],
-        tagIds: [],
-        kpiAddrs: [],
-        tagEcharts: [],
-        assetIds: [],
-        areaIds: [],
-        varVaule: [],
-        branchValue: [],
-        echartData: [],
-        dataConfig: store.mqttParams.dataConfig.data ? {
-            data: {},
-            picker: store.mqttParams.dataConfig.picker
-        } : {},
-        echartAssemblyData: [],
-        routingkey: '',
-        pathRewrite: ''
-    };
-    store.pens = {}; // 先保留，后期优化提取变量用
-    store.cacheDatas = [];
-    store.dpiRatio = 1;
-    store.lastScale = 1;
-    store.monitorAlarm = false;
-    store.elementInteractivePoor = {};
-    store.pickerDataPool = {};
-    store.echartsOptionsPool = {};
-    store.echartsRealDataPool = {};
-    store.switchTabDataPool = {};
-    store.tableDataPool = {};
-    store.selectRealDataPool = {};
-    store.selectTabDataPool = {};
-    clearElementDataPool({
-        echartsDataPool: store.echartsDataPool,
-        selectDataPool: store.selectDataPool,
-        iframeDataPool: store.iframeDataPool,
-        formoverDataPool: store.formoverDataPool,
-        formoverCanvasDataPool: store.formoverCanvasDataPool,
-        timeDataPool: store.timeDataPool
-    });
-    if(del) {
-        store.mqttParams.dataConfig = {};
-        delete commonStore[store.id];
-        removeAllElement();
-    }
-};