@ebiz/designer-components 0.0.19-beta.1 → 0.0.19

package/src/components/charts/framework/charts/MindmapChart/index.js

@@ -1,166 +1,166 @@
-/**
- * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
- * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-import merge from '../../../util/merge';
-import Relation from '../../core/Relation';
-import LineLayout from '../../module/lineLayout';
-import LineManager from '../../module/line/Manager';
-import NodeManager from '../../module/node/Manager';
-import { CHART_TYPE } from '../../../util/constants';
-
-const NODE_WIDTH = 100;
-const NODE_HEIGHT = 50;
-
-export default class MindmapChart extends Relation {
-    static name = CHART_TYPE.MINDMAP
-    // 图表渲染容器
-    dom;
-    // 图表外部传入数据
-    optionData;
-    // 图表nodes+edges格式数据
-    relationData;
-    // 图表最外层容器
-    container;
-    // 图表svg元素容器
-    svgContainer;
-    // 图表html元素容器
-    htmlContainer;
-    // 图表容器的宽高变化监听器
-    resizeObserver = null;
-    // 连线管理器
-    lineManager;
-    // 节点管理器
-    nodeManager;
-    // 连接点管理器
-    connectorManager;
-
-    constructor() {
-        super();
-        this.dom = null;
-        this.option = null;
-        this.resizeObserver = null;
-    }
-
-    // 初始化图表渲染容器
-    init(dom) {
-        this.dom = dom;
-    }
-
-    // 初始化图表渲染配置
-    setOption(option) {
-        super.setOption(option);
-    }
-
-    // 图表渲染
-    render() {
-        super.render();
-        this.setDefaultLayout(this.option);
-        console.log("render")
-
-        this.createNodes();
-
-        this.createLines();
-
-        this.onBufferRender();
-        this.setResizeObserver();
-        this.renderCallBack && this.renderCallBack(this);
-
-    }
-
-    // 设置默认布局
-    setDefaultLayout(option) {
-        option.layout = merge({
-            direction: 'LR'
-        }, option.layout);
-    }
-
-    // 根据节点大小和关系，计算布局，创建和渲染节点
-    createNodes() {
-        console.log("createNodes")
-        this.optionData = this.option.data;
-        this.nodeManager = new NodeManager(this.option, this.htmlContainer);
-        this.setNodeSize(this.optionData);
-        this.nodeManager.layout();
-        console.log("createNodes")
-
-        this.nodeManager.render();
-        console.log("createNodes")
-
-        this.relationData = this.nodeManager.getData();
-    }
-
-    // 补充宽高信息到节点数据上
-    setNodeSize(node) {
-        node.width = node.width || this.option?.node?.width || NODE_WIDTH;
-        node.height = node.height || this.option?.node?.height || NODE_HEIGHT;
-        if (node.children && node.children.length > 0) {
-            node.children.forEach(child => {
-                this.setNodeSize(child);
-            })
-        }
-    }
-
-    // 创建连线
-    createLines() {
-        new LineLayout(this.relationData, this.option);
-        this.option.data = { ...this.option.data, ...this.relationData };
-        // 绘制连线
-        this.lineManager = new LineManager(this.option, this.svgContainer, this);
-        this.lineManager.layout(this.nodeManager);
-        this.lineManager.render();
-    }
-
-    // 鼠标缩放移动的回调进行局部渲染
-    onBufferRender() {
-        this.canvas.onMove = (params) => {
-            this.nodeManager.onBufferRender(params);
-            this.lineManager.onBufferRender(params);
-        };
-    }
-
-    // 图表渲染完成时回调
-    onRendered(callback) {
-        this.renderCallBack = callback;
-    }
-
-    // 图表刷新，刷新配置项
-    refresh(option) {
-      this.setDefaultLayout(option);
-      this.setNodeSize(option.data);
-      this.nodeManager.relayout(option);
-      this.nodeManager.refresh(option);
-      // this.relationData = this.nodeManager.getData();
-
-      // 线随着node节点时刻变化位置
-      this.lineManager.refresh(option);
-    }
-
-    // 图表刷新，仅刷新数据
-    refreshData() {
-
-    }
-
-    // 刷新图表自适应宽度
-    resize() {
-
-    }
-
-    setResizeObserver() {
-
-    }
-
-    // 销毁图表
-    uninstall() {
-        super.uninstall();
-        this.resizeObserver.disconnect();
-    }
-}
-
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import merge from '../../../util/merge';
+import Relation from '../../core/Relation';
+import LineLayout from '../../module/lineLayout';
+import LineManager from '../../module/line/Manager';
+import NodeManager from '../../module/node/Manager';
+import { CHART_TYPE } from '../../../util/constants';
+
+const NODE_WIDTH = 100;
+const NODE_HEIGHT = 50;
+
+export default class MindmapChart extends Relation {
+    static name = CHART_TYPE.MINDMAP
+    // 图表渲染容器
+    dom;
+    // 图表外部传入数据
+    optionData;
+    // 图表nodes+edges格式数据
+    relationData;
+    // 图表最外层容器
+    container;
+    // 图表svg元素容器
+    svgContainer;
+    // 图表html元素容器
+    htmlContainer;
+    // 图表容器的宽高变化监听器
+    resizeObserver = null;
+    // 连线管理器
+    lineManager;
+    // 节点管理器
+    nodeManager;
+    // 连接点管理器
+    connectorManager;
+
+    constructor() {
+        super();
+        this.dom = null;
+        this.option = null;
+        this.resizeObserver = null;
+    }
+
+    // 初始化图表渲染容器
+    init(dom) {
+        this.dom = dom;
+    }
+
+    // 初始化图表渲染配置
+    setOption(option) {
+        super.setOption(option);
+    }
+
+    // 图表渲染
+    render() {
+        super.render();
+        this.setDefaultLayout(this.option);
+        console.log("render")
+
+        this.createNodes();
+
+        this.createLines();
+
+        this.onBufferRender();
+        this.setResizeObserver();
+        this.renderCallBack && this.renderCallBack(this);
+
+    }
+
+    // 设置默认布局
+    setDefaultLayout(option) {
+        option.layout = merge({
+            direction: 'LR'
+        }, option.layout);
+    }
+
+    // 根据节点大小和关系，计算布局，创建和渲染节点
+    createNodes() {
+        console.log("createNodes")
+        this.optionData = this.option.data;
+        this.nodeManager = new NodeManager(this.option, this.htmlContainer);
+        this.setNodeSize(this.optionData);
+        this.nodeManager.layout();
+        console.log("createNodes")
+
+        this.nodeManager.render();
+        console.log("createNodes")
+
+        this.relationData = this.nodeManager.getData();
+    }
+
+    // 补充宽高信息到节点数据上
+    setNodeSize(node) {
+        node.width = node.width || this.option?.node?.width || NODE_WIDTH;
+        node.height = node.height || this.option?.node?.height || NODE_HEIGHT;
+        if (node.children && node.children.length > 0) {
+            node.children.forEach(child => {
+                this.setNodeSize(child);
+            })
+        }
+    }
+
+    // 创建连线
+    createLines() {
+        new LineLayout(this.relationData, this.option);
+        this.option.data = { ...this.option.data, ...this.relationData };
+        // 绘制连线
+        this.lineManager = new LineManager(this.option, this.svgContainer, this);
+        this.lineManager.layout(this.nodeManager);
+        this.lineManager.render();
+    }
+
+    // 鼠标缩放移动的回调进行局部渲染
+    onBufferRender() {
+        this.canvas.onMove = (params) => {
+            this.nodeManager.onBufferRender(params);
+            this.lineManager.onBufferRender(params);
+        };
+    }
+
+    // 图表渲染完成时回调
+    onRendered(callback) {
+        this.renderCallBack = callback;
+    }
+
+    // 图表刷新，刷新配置项
+    refresh(option) {
+      this.setDefaultLayout(option);
+      this.setNodeSize(option.data);
+      this.nodeManager.relayout(option);
+      this.nodeManager.refresh(option);
+      // this.relationData = this.nodeManager.getData();
+
+      // 线随着node节点时刻变化位置
+      this.lineManager.refresh(option);
+    }
+
+    // 图表刷新，仅刷新数据
+    refreshData() {
+
+    }
+
+    // 刷新图表自适应宽度
+    resize() {
+
+    }
+
+    setResizeObserver() {
+
+    }
+
+    // 销毁图表
+    uninstall() {
+        super.uninstall();
+        this.resizeObserver.disconnect();
+    }
+}
+

package/src/components/charts/framework/charts/MindmapChart/index.less

@@ -1,85 +1,85 @@
-/**
- * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
- * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-// 图例样式
-.huicharts-legend-container {
-    position: absolute;
-    z-index: 9999;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-items: flex-start;
-    align-content: flex-start;
-    box-sizing: border-box;
-
-    .huicharts-legend-itemContainer {
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        flex: none;
-        box-sizing: border-box;
-        cursor: pointer;
-    }
-
-    .huicharts-legend-itemContainer.inactive{
-        .huicharts-legend-markerContainer,.huicharts-legend-labelContainer {
-            color: var(--huicharts-legend-inactiveColor) !important 
-        }
-    }
-
-    .huicharts-legend-markerContainer {
-        box-sizing: border-box;
-        flex: none;
-    }
-
-    .huicharts-legend-labelContainer {
-        box-sizing: border-box;
-        flex: none;
-    }
-
-    .huicharts-legend-symbol {
-        width: 100%;
-        height: 100%;
-        display: block;
-    }
-
-
-    .demo-legend-container {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        gap: 16px;
-    }
-
-    .demo-legend-icon {
-        width: 24px;
-        height: 20px;
-        background-color: #f0f0f0;
-        border: 1px solid #ccc;
-        border-radius: 2px;
-        box-sizing: border-box;
-    }
-
-    .demo-legend-state {
-        width: 24px;
-        height: 8px;
-        border-radius: 2px 2px 0 0;
-        margin: -1px -1px 0 -1px;
-        box-sizing: border-box;
-    }
-
-    .demo-legend-label {
-        color: #191919;
-        font-size: .875rem;
-    }
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+// 图例样式
+.huicharts-legend-container {
+    position: absolute;
+    z-index: 9999;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+    align-content: flex-start;
+    box-sizing: border-box;
+
+    .huicharts-legend-itemContainer {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex: none;
+        box-sizing: border-box;
+        cursor: pointer;
+    }
+
+    .huicharts-legend-itemContainer.inactive{
+        .huicharts-legend-markerContainer,.huicharts-legend-labelContainer {
+            color: var(--huicharts-legend-inactiveColor) !important 
+        }
+    }
+
+    .huicharts-legend-markerContainer {
+        box-sizing: border-box;
+        flex: none;
+    }
+
+    .huicharts-legend-labelContainer {
+        box-sizing: border-box;
+        flex: none;
+    }
+
+    .huicharts-legend-symbol {
+        width: 100%;
+        height: 100%;
+        display: block;
+    }
+
+
+    .demo-legend-container {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 16px;
+    }
+
+    .demo-legend-icon {
+        width: 24px;
+        height: 20px;
+        background-color: #f0f0f0;
+        border: 1px solid #ccc;
+        border-radius: 2px;
+        box-sizing: border-box;
+    }
+
+    .demo-legend-state {
+        width: 24px;
+        height: 8px;
+        border-radius: 2px 2px 0 0;
+        margin: -1px -1px 0 -1px;
+        box-sizing: border-box;
+    }
+
+    .demo-legend-label {
+        color: #191919;
+        font-size: .875rem;
+    }
 }

package/src/components/charts/framework/core/Base.js

@@ -1,53 +1,53 @@
-/**
- * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
- * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-// base lifecycle
-export default class Base {
-    // chart render container
-    dom;
-    // chart render option
-    option;
-
-    constructor() {
-        // You must override the 'init' method， this method's target is to set chart container.  
-        if (this.init === undefined) {
-            throw new Error('This chart has not override "init" callback!');
-        }
-        // You must override the 'setOption' method， this method's target is to set chart option.  
-        if (this.setOption === undefined) {
-            throw new Error('This chart has not override "setOption" callback!');
-        }
-        // You must override the 'render' method， this method's target is to render chart dom.  
-        if (this.render === undefined) {
-            throw new Error('This chart has not override "render" callback!');
-        }
-        // You must override the 'onRenderReady' method， this method's run after the render callback.  
-        if (this.onRendered === undefined) {
-            throw new Error('This chart has not override "onRendered" callback!');
-        }
-        // You must override the 'refresh' method， this method's target is to refresh the chart dom .
-        if (this.refresh === undefined) {
-            throw new Error('This chart has not override "refresh" callback!');
-        }
-        // You must override the 'refreshData' method， this method's target is to refresh the chart dom with new data.
-        if (this.refreshData === undefined) {
-            throw new Error('This chart has not override "refreshData" callback!');
-        }
-        // You must override the 'resize' method， this method's target is to adaptive chart container width.
-        if (this.resize === undefined) {
-            throw new Error('This chart has not override "resize" callback!');
-        }
-        // You must override the 'uninstall' method， this method's target is to empty the chart container, and uninstall all listening events.
-        if (this.uninstall === undefined) {
-            throw new Error('This chart has not override "uninstall" callback!');
-        }
-    }
-}
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+// base lifecycle
+export default class Base {
+    // chart render container
+    dom;
+    // chart render option
+    option;
+
+    constructor() {
+        // You must override the 'init' method， this method's target is to set chart container.  
+        if (this.init === undefined) {
+            throw new Error('This chart has not override "init" callback!');
+        }
+        // You must override the 'setOption' method， this method's target is to set chart option.  
+        if (this.setOption === undefined) {
+            throw new Error('This chart has not override "setOption" callback!');
+        }
+        // You must override the 'render' method， this method's target is to render chart dom.  
+        if (this.render === undefined) {
+            throw new Error('This chart has not override "render" callback!');
+        }
+        // You must override the 'onRenderReady' method， this method's run after the render callback.  
+        if (this.onRendered === undefined) {
+            throw new Error('This chart has not override "onRendered" callback!');
+        }
+        // You must override the 'refresh' method， this method's target is to refresh the chart dom .
+        if (this.refresh === undefined) {
+            throw new Error('This chart has not override "refresh" callback!');
+        }
+        // You must override the 'refreshData' method， this method's target is to refresh the chart dom with new data.
+        if (this.refreshData === undefined) {
+            throw new Error('This chart has not override "refreshData" callback!');
+        }
+        // You must override the 'resize' method， this method's target is to adaptive chart container width.
+        if (this.resize === undefined) {
+            throw new Error('This chart has not override "resize" callback!');
+        }
+        // You must override the 'uninstall' method， this method's target is to empty the chart container, and uninstall all listening events.
+        if (this.uninstall === undefined) {
+            throw new Error('This chart has not override "uninstall" callback!');
+        }
+    }
+}