dcim-topology2d 2.0.7 → 3.0.2

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

@@ -1,61 +0,0 @@
-// import {} from './rectangle';
-import {rectangle, createDiv, s8, Topology} from  '../../../../core';
-import {commonStore} from "../../store";
-
-export async function formOverflow(ctx, node) {
-    // 绘制一个底图，类似于占位符。
-    rectangle(ctx, node)
-    console.log('绘制滚动组件--')
-    // 添加当前节点到div层
-    if (!node.elementId) {
-        node.elementId = s8()
-    }
-    let formoverData = commonStore[node.TID].formoverDataPool[node.id];
-    let id = node.formData.detailPageId
-    const color = node.formData.scrollbarColor? node.formData.scrollbarColor: 'auto'
-    const colorBg =  node.formData.scrollbarColorBg? node.formData.scrollbarColorBg: 'auto'
-    const scrollbarColor = color + ' ' + colorBg
-
-    if (!node.elementLoaded && !formoverData) {
-        console.log('是否存在--formoverData--0-',formoverData)
-        if(!formoverData) {
-            formoverData = {
-                div: createDiv(node)
-            };
-        }else {
-            formoverData.div = createDiv(node);
-        }
-        formoverData.div.setAttribute('class', 'topoOverflow');
-        formoverData.div.style.setProperty('scrollbar-color', scrollbarColor);
-        formoverData.div.style.setProperty('scrollbar-width', 'thin');
-
-        node.elementLoaded = true
-        document.body.appendChild(formoverData.div)
-        // 添加当前节点到div层
-        node.addToDiv()
-        commonStore[node.TID].formoverDataPool[node.id] = formoverData;
-
-
-        console.log('请求子页面接口-----id =',id)
-        let canvas = new Topology(node.id, {
-            rotateCursor: '/img/rotate.cur',
-        })
-        canvas.formOverflowOpen(node.formData.detailPageData)
-        commonStore[node.TID].formoverCanvasDataPool[node.id]  = canvas
-    }else if(formoverData && id){
-        console.log('是否存在--formoverData--1-',formoverData)
-        formoverData.div.style.setProperty('scrollbar-color', scrollbarColor);
-        formOverflowChange(node)
-    }
-}
-
-// 更新滚动组件中子页面
-export function formOverflowChange(node) {
-        //绘制画布
-        console.log('更新滚动组件中子页面-',node)
-        let canvas = commonStore[node.TID].formoverCanvasDataPool[node.id] 
-        let data =  node.formData.detailPageData
-        console.log('改变滚动组件中子页面-',data)
-        canvas.formOverflowOpen(data)
-}
-

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

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

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

@@ -1,95 +0,0 @@
-import {rectangle} from './rectangle';
-import {
-    createSelectElement,
-    createSelectDropdown} from '../../element';
-import {
-    setEventListener,
-    s8} from '../../utils';
-import {selectDefaultData} from '../../../../static';
-import {commonStore} from "../../store";
-
-export function formSelect(ctx, node) {
-    // 绘制一个底图，类似于占位符。
-    rectangle(ctx, node);
-    if (!commonStore[node.TID].selectDataPool[node.id]) {
-        const currentStore = commonStore[node.TID];
-        node.elementId = s8();
-        node.dash = 4;
-        currentStore.selectDataPool[node.id] = {
-            slideState: node.selectDropdown,
-            node: {
-                id: node.id,
-                color: node.font.color,
-                fontSize: node.font.fontSize,
-                selected: node.formData.selected || null
-            },
-            dom: {}
-        };
-        let bindBlockId = '';
-        if(node.formData.bindBlockId) {
-            // 去空格重新赋值
-            bindBlockId = node.formData.bindBlockId.trim();
-            node.formData.bindBlockId = bindBlockId;
-        }
-        if(node.formData.bindBlockTag) {
-            // 去空格重新赋值
-            node.formData.bindBlockTag = node.formData.bindBlockTag.trim();
-        }
-        let selectRealData = bindBlockId && currentStore.selectRealDataPool[bindBlockId];
-        if(bindBlockId && selectRealData) {
-            // select与echarts互相关联
-            currentStore.selectDataPool[node.id].data = selectRealData;
-            const echartsData = currentStore.echartsDataPool[bindBlockId];
-            echartsData ? echartsData.bindId = node.id : currentStore.echartsDataPool[bindBlockId] = {
-                bindId: node.id
-            };
-            // select与Tab关联
-            const bindBlockTagData = currentStore.switchTabDataPool[`${node.formData.bindBlockTag}Data`];
-            if(bindBlockTagData) currentStore.echartsDataPool[bindBlockId].tabCorrelationType = 'select';
-        }else {
-            if(node.formData.ids) {
-                const optionIds = node.formData.ids.split(',');
-                const optionNames = node.formData.names.split(',');
-                const optionsData = [];
-                for (let i = 0; i < optionIds.length; i++) {
-                    optionsData.push({
-                        id: optionIds[i],
-                        name: optionNames[i]
-                    });
-                }
-                currentStore.selectDataPool[node.id].data = optionsData;
-            }else {
-                currentStore.selectDataPool[node.id].data = JSON.parse(JSON.stringify(selectDefaultData));
-            }
-        }
-        const select = createSelectElement(node);
-        currentStore.selectDataPool[node.id].dom.selectEle = select;
-        document.body.appendChild(select);
-        let selectDropdownEle = document.querySelector('.topology-select-dropdown');
-        if(!selectDropdownEle) {
-            selectDropdownEle = createSelectDropdown(node);
-            const parentEle = window.location.pathname.includes('workspace') ? document.getElementById('topology-canvas') : document.body;
-            parentEle.appendChild(selectDropdownEle);
-            // 鼠标按下
-            selectDropdownEle.addEventListener('mousedown', (e) => {
-                setEventListener(e, node.TID);
-            });
-        }
-        // 添加当前节点到div层
-        node.addToDiv();
-    }else {
-        const selectNode = commonStore[node.TID].selectDataPool[node.id];
-        if(selectNode.node.color === node.font.color && selectNode.node.fontSize === node.font.fontSize) return;
-        const selectDom = selectNode.dom;
-        if(!selectDom.selectInput) selectDom.selectInput = selectDom.selectEle.querySelector('.topology-select-input');
-        selectDom.selectInput.style.color = node.font.color;
-        selectDom.selectInput.style.fontSize = `${node.font.fontSize}px`;
-        if(node.selectDropdown) {
-            const liEle = selectDom.selectDropdownUl.querySelectorAll('.topology-select-dropdown-item');
-            liEle.forEach(function(element) {
-                element.style.color = node.font.color;
-                element.style.fontSize = `${node.font.fontSize}px`;
-            });
-        }
-    }
-}

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

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

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,48 +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';

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

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

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,186 +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;
-    data?: any;
-    bkImageRect?: any;
-}
-export interface paramsData {
-    doorIds?: [],
-    tagIds?: [],
-    kpiAddrs?: [],
-    tagEcharts?: [],
-    assetIds?: [],
-    areaIds?: [],
-    varVaule?: [],
-    echartData?: [],
-    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 交互过渡数据
-    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: {}
-        },
-        mqttData: null,
-        initConfNode: {},
-        mqttParams: {
-            doorIds: [],
-            tagIds: [],
-            kpiAddrs: [],
-            tagEcharts: [],
-            assetIds: [],
-            areaIds: [],
-            varVaule: [],
-            echartData: [],
-            echartAssemblyData: [],
-            routingkey: '',
-            pathRewrite: ''
-        },
-        pens: {},
-        options: { ...DefalutOptions },
-        elementInteractivePoor: {}, // element 交互过渡数据
-        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: {}
-    };
-    store.mqttData = null;
-    store.initConfNode = {};
-    store.mqttParams = {
-        doorIds: [],
-        tagIds: [],
-        kpiAddrs: [],
-        tagEcharts: [],
-        assetIds: [],
-        areaIds: [],
-        varVaule: [],
-        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,178 +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: {}
-        },
-        mqttData: null,
-        initConfNode: {},
-        mqttParams: {
-            doorIds: [],
-            tagIds: [],
-            kpiAddrs: [],
-            tagEcharts: [],
-            assetIds: [],
-            areaIds: [],
-            varVaule: [],
-            echartData: [],
-            echartAssemblyData: [],
-            routingkey: '',
-            pathRewrite: ''
-        },
-        pens: {},
-        options: { ...DefalutOptions },
-        elementInteractivePoor: {}, // element 交互过渡数据
-        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,// 全局报警标记，代表正在访问的这个topology文件中是否有告警发生
-        parentElem: null
-    };
-};
-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.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: {}
-    };
-    store.initConfNode = {};
-    store.mqttParams = {
-        doorIds: [],
-        tagIds: [],
-        kpiAddrs: [],
-        tagEcharts: [],
-        assetIds: [],
-        areaIds: [],
-        varVaule: [],
-        echartData: [],
-        echartAssemblyData: [],
-        routingkey: '',
-        pathRewrite: ''
-    };
-    store.pens = {}; // 先保留，后期优化提取变量用
-    store.cacheDatas = [];
-    store.dpiRatio = 1;
-    store.lastScale = 1;
-    store.monitorAlarm = false;
-    store.elementInteractivePoor = {};
-    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,
-    });
-    if(del) {
-        delete commonStore[store.id];
-        removeAllElement();
-    }
-};

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

@@ -1,2 +0,0 @@
-export * from './data'
-export * from './common'

package/core/src/store/index.js

@@ -1,2 +0,0 @@
-export * from './data'
-export * from './common'