dcim-topology2d 2.1.0 → 3.0.2

package/chart-diagram/src/utils/surfaceParametricConversion.js

@@ -1,252 +0,0 @@
-import {echartsColorData} from '../../../static';
-
-/**
- *
- * @param startRatio 开始绘制位置
- * @param endRatio 结束绘制位置
- * @param isSelected 是否选中
- * @param isHovered 鼠标悬浮在图表之上？
- * @param k 内廷半径
- * @param h 高
- * @returns {{u: {min: number, max: number, step: number}, v: {min: number, max: number, step: number}, x: ((function(*, *): *)|*), y: ((function(*, *): *)|*), z: ((function(*, *): (number|number))|*)}}
- */
-export function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h){
-    // 计算
-    let midRatio = (startRatio + endRatio) / 2;
-    let startRadian = startRatio * Math.PI * 2;
-    let endRadian = endRatio * Math.PI * 2;
-    let midRadian = midRatio * Math.PI * 2;
-    isSelected = false;
-    // 如果只有一个扇形，则不实现选中效果。
-    if (startRatio === 0 && endRatio === 1) {
-        isSelected = true;
-    }
-    // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
-    k = typeof k !== 'undefined' ? k : 1 / 3;
-    // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
-    let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
-    let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
-    // 计算高亮效果的放大比例（未高亮，则比例为 1）
-    let hoverRate = isHovered ? 1.05 : 1;
-    // 返回曲面参数方程
-    return {
-        u: {
-            min: -Math.PI,
-            max: Math.PI * 3,
-            step: Math.PI / 32,
-        },
-        v: {
-            min: 0,
-            max: Math.PI * 2,
-            step: Math.PI / 20,
-        },
-        x: function(u, v) {
-            if (u < startRadian) {
-                return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
-            }
-            if (u > endRadian) {
-                return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
-            }
-            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
-        },
-        y: function(u, v) {
-            if (u < startRadian) {
-                return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
-            }
-            if (u > endRadian) {
-                return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
-            }
-            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
-        },
-        z: function(u, v) {
-            if (u < -Math.PI * 0.5) {
-                return Math.sin(u);
-            }
-            if (u > Math.PI * 2.5) {
-                return Math.sin(u) * h * 0.1;
-            }
-            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
-        }
-    };
-}
-/**
- * 获取3D饼图数据
- * @param internalDiameterRatio 透明的空心占比
- * @param type 'pie':饼图；'ring':环形图
- * @param appearance 配置数据
- * @param labelLineData 引线静态数据
- * @param realData 实时数据
- * @returns {{series: *[], legendData: *[]}}
- */
-export function getPie3D(internalDiameterRatio, type, appearance, labelLineData, realData){
-    const { seriesStyleData, chartData, labelLine, grid } = appearance;
-    let k = typeof internalDiameterRatio !== "undefined" ?
-            (1 - internalDiameterRatio) / (1 + internalDiameterRatio) :
-            1 / 3; // 3d 环形图
-    const pieData = realData && realData.length ? realData : chartData;
-    if(type === 'pie'){
-        // 3d 饼图
-        k = 1;
-        pieData.sort((a, b) => {
-            return b.value - a.value;
-        });
-    }
-    
-    let sumValue = pieData.reduce((total, obj) => total + obj.value, 0);
-    let startValue = 0;
-    let endValue = 0;
-    let total = 0;
-    let boxHeight = (grid.boxHeight * 25) / pieData[0].value;
-    let legendData = [];
-    let series = [];
-    let node = {};
-    const lineData = [];
-    // 为每一个饼图数据，生成一个 series-surface 配置
-    for (let i = 0; i < pieData.length; i++) {
-        const {name, value, itemColor, itemOpacity} = pieData[i];
-        const pieDataItem =  chartData[i];
-        const seriesItemColor = itemColor || pieDataItem && pieDataItem.itemColor || echartsColorData[i];
-        endValue = startValue + value;
-        let hv = seriesStyleData && seriesStyleData[i] || value;
-        let pk = 1 / 10;
-        if(type === 'pie') {
-            hv = value;
-            pk = k;
-            if(labelLine.data[i]) {
-                const lineItem = labelLine.data[i];
-                lineItem.valueColor = seriesItemColor;
-                lineItem.unitColor = seriesItemColor;
-            }
-        }else {
-            total += value;
-            node[name] = {
-                order: i,
-                value
-            };
-        }
-        const newStartRatio = startValue / sumValue;
-        const newEndRatio = endValue / sumValue;
-        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形
-        const parametricEquation = getParametricEquation(newStartRatio, newEndRatio, false, false, k, hv);
-        let seriesItem = {
-            name: typeof name === 'undefined' ? `series${i}` : name,
-            type: 'surface',
-            parametric: true,
-            wireframe: {
-                show: false,
-            },
-            pieData: {
-                name,
-                value,
-                startRatio: newStartRatio,
-                endRatio: newEndRatio
-            },
-            pieStatus: {
-                selected: false,
-                hovered: false,
-                k: pk,
-            },
-            parametricEquation,
-            itemStyle: {
-                color: seriesItemColor,
-                opacity: itemOpacity || pieDataItem && pieDataItem.itemOpacity || 1
-            }
-        };
-        startValue = endValue;
-        legendData.push(seriesItem.name);
-        series.push(seriesItem);
-        if(labelLineData) {
-            const lineStyleNode = labelLineData.data[i] || labelLineData.data[0];
-            lineStyleNode.lineStyle.color = seriesItemColor;
-            const labelLineItem = {
-                name,
-                value,
-                labelLine: {...lineStyleNode}
-            };
-            lineData.push(labelLineItem);
-        }
-    }
-    if(lineData.length) {
-        labelLineData.data = lineData;
-        series.push(labelLineData);
-    }
-    return {
-        legendData,
-        series,
-        node,
-        total,
-        boxHeight
-    };
-}
-export function set3DPieMouseHover(myChart, type, option, valueData){
-    let selectedIndex = '';
-    let hoveredIndex = '';
-    let isSelected;
-    let isHovered;
-    let startRatio;
-    let endRatio;
-    let k;
-    // 监听 mouseover，近似实现高亮（放大）效果
-    myChart.on('mouseover', function(params) {
-        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
-        if (hoveredIndex === params.seriesIndex) return;
-        // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
-        if (hoveredIndex !== '') {
-            const value = type === 'pie' ? option.series[hoveredIndex].pieData.value : valueData[hoveredIndex];
-            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
-            isSelected = option.series[hoveredIndex].pieStatus.selected;
-            isHovered = false;
-            startRatio = option.series[hoveredIndex].pieData.startRatio;
-            endRatio = option.series[hoveredIndex].pieData.endRatio;
-            k = option.series[hoveredIndex].pieStatus.k;
-
-            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
-            option.series[hoveredIndex].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, value);
-            option.series[hoveredIndex].pieStatus.hovered = isHovered;
-
-            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
-            hoveredIndex = '';
-        }
-
-        // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
-        if (params.seriesName !== 'mouseoutSeries') {
-            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
-            const pieStatus = option.series[params.seriesIndex].pieStatus;
-            if(!pieStatus) return; // 先退出，后期若有hover引线时，图形联动的需求时再做逻辑处理
-            const value = type === 'pie' ? option.series[params.seriesIndex].pieData.value : valueData[params.seriesIndex];
-            isSelected = option.series[params.seriesIndex].pieStatus.selected;
-            isHovered = true;
-            startRatio = option.series[params.seriesIndex].pieData.startRatio;
-            endRatio = option.series[params.seriesIndex].pieData.endRatio;
-            k = option.series[params.seriesIndex].pieStatus.k;
-            // 对当前点击的扇形，执行高亮操作（对 option 更新）
-            option.series[params.seriesIndex].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, value + 5);
-            option.series[params.seriesIndex].pieStatus.hovered = isHovered;
-
-            // 记录上次高亮的扇形对应的系列号 seriesIndex
-            hoveredIndex = params.seriesIndex;
-        }
-        // 使用更新后的 option，渲染图表
-        myChart.setOption(option);
-    });
-    // 修正取消高亮失败的 bug
-    myChart.on('globalout', function(params) {
-        if (hoveredIndex !== '') {
-            const value = type === 'pie' ? option.series[hoveredIndex].pieData.value : valueData[hoveredIndex];
-            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
-            isSelected = option.series[hoveredIndex].pieStatus.selected;
-            isHovered = false;
-            k = option.series[hoveredIndex].pieStatus.k;
-            startRatio = option.series[hoveredIndex].pieData.startRatio;
-            endRatio = option.series[hoveredIndex].pieData.endRatio;
-
-            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
-            option.series[hoveredIndex].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, value);
-            option.series[hoveredIndex].pieStatus.hovered = isHovered;
-            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
-            hoveredIndex = '';
-        }
-        // 使用更新后的 option，渲染图表
-        myChart.setOption(option);
-    });
-}

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

@@ -1,6 +0,0 @@
-import { Node } from '../models';
-import { visualization2DStore } from '../store';
-export declare function setStyleForElementIdDiv(node: Node, elem: HTMLElement, data: visualization2DStore): void;
-export declare function createDiv(node: Node): HTMLDivElement;
-// @ts-ignore
-export declare function loadJS(url: string): Promise;

package/core/src/element/common.js

@@ -1,54 +0,0 @@
-import {Lock} from '../models';
-import {commonStore} from '../store';
-export function setStyleForElementIdDiv(node, elem, data) {
-    if (!elem) return;
-    const store = commonStore[node.TID].data;
-    elem.style.position = 'absolute';
-    elem.style.outline = 'none';
-    elem.style.left = node.rect.x + 'px';
-    elem.style.top = node.rect.y + 'px';
-    elem.style.width = node.rect.width / store.pageZoom + 'px';
-    elem.style.height = node.rect.height / store.pageZoom + 'px';
-    if (node.rotate || node.offsetRotate) {
-        elem.style.transform = "rotate(" + (node.rotate + node.offsetRotate) + "deg)";
-    }
-    if (data && data.locked > Lock.None || node.locked > Lock.None) {
-        elem.style.userSelect = 'initial';
-        elem.style.pointerEvents = 'initial';
-    } else {
-        elem.style.userSelect = 'none';
-        elem.style.pointerEvents = 'none';
-    }
-}
-
-// 创建div
-export function createDiv(node) {
-    var div = document.createElement('div');
-    div.setAttribute('class', 'topoEchart');
-    div.style.position = 'absolute';
-    div.style.outline = 'none';
-    div.style.left = '-9999px';
-    div.style.bottom = '-9999px';
-    div.style.width = node.rect.width + 'px';
-    div.style.height = node.rect.height + 'px';
-    div.id = node.id;
-    return div;
-}
-
-export function loadJS(url) {
-    var loaderScript = document.createElement('script');
-    loaderScript.type = 'text/javascript';
-    loaderScript.src = url;
-    document.body.appendChild(loaderScript);
-    window.datePickerRegister = true;
-    return new Promise((resolve, reject) => {
-        loaderScript.onload = function () {
-            resolve(true);
-        };
-        loaderScript.onerror = (e) => {
-            reject(e);
-        };
-    });
-}
-
-//# sourceMappingURL=dom.js.map

package/core/src/element/datePicker.d.ts

@@ -1,3 +0,0 @@
-import { Node } from '../models';
-export declare function createDatePickerElement(node: Node): HTMLElement;
-export declare function setDataPickerElementStyle(node: Node): void;

package/core/src/element/datePicker.js

@@ -1,47 +0,0 @@
-import {commonStore} from "../store";
-// 创建datePicker依赖DOM
-export function createDatePickerElement(node) {
-        const pickerBarEle = document.createElement('div');
-    pickerBarEle.setAttribute('id', node.id);
-    pickerBarEle.setAttribute('class', 'topology-datePicker');
-    pickerBarEle.innerHTML = `<svg class="icon-date" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14.000000" height="14.000000" fill="none" customFrame="#000000">
-\t<path id="icon-日历" d="M13.4167 1.16667L10.5 1.16667L10.5 0L9.33333 0L9.33333 1.16667L4.66667 1.16667L4.66667 0L3.5 0L3.5 1.16667L0.583333 1.16667C0.2625 1.16667 0 1.42917 0 1.75L0 13.4167C0 13.7375 0.2625 14 0.583333 14L13.4167 14C13.7375 14 14 13.7375 14 13.4167L14 1.75C14 1.42917 13.7375 1.16667 13.4167 1.16667ZM12.8333 12.8333L1.16667 12.8333L1.16667 4.66667L12.8333 4.66667L12.8333 12.8333ZM4.66667 7L2.33333 7L2.33333 5.83333L4.66667 5.83333L4.66667 7ZM8.16667 7L5.83333 7L5.83333 5.83333L8.16667 5.83333L8.16667 7ZM11.6667 7L9.33333 7L9.33333 5.83333L11.6667 5.83333L11.6667 7ZM4.66667 9.33333L2.33333 9.33333L2.33333 8.16667L4.66667 8.16667L4.66667 9.33333ZM8.16667 9.33333L5.83333 9.33333L5.83333 8.16667L8.16667 8.16667L8.16667 9.33333ZM11.6667 9.33333L9.33333 9.33333L9.33333 8.16667L11.6667 8.16667L11.6667 9.33333ZM4.66667 11.6667L2.33333 11.6667L2.33333 10.5L4.66667 10.5L4.66667 11.6667ZM8.16667 11.6667L5.83333 11.6667L5.83333 10.5L8.16667 10.5L8.16667 11.6667Z" fill="rgb(64,244,255)" fill-rule="nonzero" />
-</svg>
-                              <svg class="icon-arrow" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="10.000000" height="6.000000" fill="none" customFrame="#000000">
-	<path id="箭头" d="M5 0C5.14734 0 5.28865 0.0632141 5.39284 0.175736L9.83728 4.97574C10.0542 5.21005 10.0542 5.58995 9.83728 5.82426C9.62032 6.05858 9.26857 6.05858 9.05161 5.82426L5 1.44853L0.948393 5.82426C0.731435 6.05858 0.379676 6.05858 0.162718 5.82426C-0.0542395 5.58995 -0.0542395 5.21005 0.162718 4.97574L4.60716 0.175736C4.71135 0.0632141 4.85266 0 5 0Z" fill="rgb(23,206,230)" fill-rule="evenodd" transform="matrix(1,0,0,-1,0,6)" />
-</svg>
-                              <input id='picker${node.id}' class="dataPickerInput" type="text" name='dataPicker${node.id}' placeholder="请选择" readonly />`;
-
-    return pickerBarEle;
-}
-
-// datePicker样式配置
-export function setDataPickerElementStyle(node) {
-    const {pickerDataPool, data} = commonStore[node.TID];
-    const pickerDom = pickerDataPool[node.id].dom;
-    
-    pickerDom.container.style.border = `${node.lineWidth}px solid ${node.strokeStyle}`;
-    pickerDom.container.style.borderRadius = `${node.borderRadius * 100}px`;
-    pickerDom.container.style.padding = `${node.paddingTop}px ${node.paddingRight}px ${node.paddingBottom}px ${node.paddingLeft}px`;
-    
-    if (!pickerDom.iconDate) pickerDom.iconDate = pickerDom.container.querySelector('.icon-date');
-    if (!pickerDom.iconArrow) pickerDom.iconArrow = pickerDom.container.querySelector('.icon-arrow');
-    if (!pickerDom.input) pickerDom.input = pickerDom.container.querySelector('.dataPickerInput');
-    
-    const round = `${node.font.fontSize + data.scale * 2}px`;
-    const parts = node.strokeStyle.match(/([\d.]+)/g);
-    const fillColor = parts ? `rgba(${parts[0]},${parts[1]},${parts[2]},1)` : node.strokeStyle;
-    
-    pickerDom.iconDate.style.width = round;
-    pickerDom.iconDate.style.height = round;
-    pickerDom.iconDate.style.left = `${node.font.fontSize}px`;
-    pickerDom.iconDate.querySelector('path').style.fill = fillColor;
-    
-    pickerDom.iconArrow.style.width = `${node.font.fontSize - data.scale * 2}px`;
-    pickerDom.iconArrow.style.height = `${node.font.fontSize - data.scale * 6}px`;
-    pickerDom.iconArrow.style.right = `${node.font.fontSize - data.scale * 2}px`;
-    pickerDom.iconArrow.querySelector('path').style.fill = fillColor;
-    
-    pickerDom.input.style.fontSize = `${node.font.fontSize}px`;
-    pickerDom.input.style.color = node.font.color;
-};

package/core/src/element/iframe.d.ts

@@ -1,3 +0,0 @@
-import { Node } from '../models';
-
-export declare function createIframeElement(node: Node): HTMLIFrameElement;

package/core/src/element/iframe.js

@@ -1,12 +0,0 @@
-// 创建iframe
-export function createIframeElement(node) {
-  const iframe = document.createElement('iframe');
-  // iframe.scrolling = 'no';
-  iframe.frameBorder = '0';
-  iframe.src = node.iframe;
-  iframe.width = node.rect.width;
-  iframe.height = node.rect.height;
-  iframe.setAttribute('id', node.id);
-  iframe.setAttribute('class', 'topology2dConfIfram');
-  return iframe;
-}

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

@@ -1,5 +0,0 @@
-export * from './common';
-export * from './iframe';
-export * from './select';
-export * from './tab';
-export * from './datePicker';

package/core/src/element/index.js

@@ -1,6 +0,0 @@
-export * from './common';
-export * from './iframe';
-export * from './select';
-export * from './tab';
-export * from './time';
-export * from './datePicker';

package/core/src/element/select.d.ts

@@ -1,11 +0,0 @@
-import { Node } from '../models';
-
-export declare function createSelectElement(node: Node): HTMLDivElement;
-export declare function createSelectDropdown(node: Node): HTMLDivElement;
-export declare function createSelectOptions(data: [], node: Node): string;
-export declare function getSelectedData(e: Event, data: any, editData: any): void;
-export declare function setSelectInteractiveState(selected: any, node: Node): void;
-export declare function resetSelectInteractiveState(node: Node): void;
-export declare function setSelectDropdownInteractiveState(node: any, staticType: any, type: any): void;
-export declare function setSelectElementPosition(node: Node, type: string): void;
-export declare function setSelectElementTheme(node: Node): void;