@ebiz/designer-components 0.0.18-beta.1

package/src/components/charts/framework/module/nodeLayout/nonLayeredTidyTree/algorithm.js

@@ -0,0 +1,261 @@
+/**
+ * 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.
+ *
+ */
+// wrap tree node
+function WrappedTree(w, h, y, c = []) {
+    const me = this;
+      // size
+    me.w = w || 0;
+    me.h = h || 0;
+  
+      // position
+    me.y = y || 0;
+    me.x = 0;
+  
+      // children
+    me.c = c || [];
+    me.cs = c.length;
+  
+      // modified
+    me.prelim = 0;
+    me.mod = 0;
+    me.shift = 0;
+    me.change = 0;
+  
+      // left/right tree
+    me.tl = null;
+    me.tr = null;
+  
+      // extreme left/right tree
+    me.el = null;
+    me.er = null;
+  
+      // modified left/right tree
+    me.msel = 0;
+    me.mser = 0;
+  }
+
+WrappedTree.fromNode = (root, isHorizontal) => {
+  if (!root) return null;
+  const children = [];
+  root.children.forEach(child => {
+    children.push(WrappedTree.fromNode(child, isHorizontal));
+  });
+  if (isHorizontal) return new WrappedTree(root.height, root.width, root.x, children);
+  return new WrappedTree(root.width, root.height, root.y, children);
+};
+
+// node utils
+function moveRight(node, move, isHorizontal) {
+  if (isHorizontal) {
+    node.y += move;
+  } else {
+    node.x += move;
+  }
+  node.children.forEach(child => {
+    moveRight(child, move, isHorizontal);
+  });
+}
+
+function getMin(node, isHorizontal) {
+  let res = isHorizontal ? node.y : node.x;
+  node.children.forEach(child => {
+    res = Math.min(getMin(child, isHorizontal), res);
+  });
+  return res;
+}
+
+function normalize(node, isHorizontal) {
+  const min = getMin(node, isHorizontal);
+  moveRight(node, -min, isHorizontal);
+}
+
+function convertBack(converted/* WrappedTree */, root/* TreeNode */, isHorizontal) {
+  if (isHorizontal) {
+    root.y = converted.x;
+  } else {
+    root.x = converted.x;
+  }
+  converted.c.forEach((child, i) => {
+    convertBack(child, root.children[i], isHorizontal);
+  });
+}
+
+function layer(node, isHorizontal, d = 0) {
+  if (isHorizontal) {
+    node.x = d;
+    d += node.width;
+  } else {
+    node.y = d;
+    d += node.height;
+  }
+  node.children.forEach(child => {
+    layer(child, isHorizontal, d);
+  });
+}
+
+export default (root, options = {}) => {
+  const isHorizontal = options.isHorizontal;
+  function firstWalk(t) {
+    if (t.cs === 0) {
+      setExtremes(t);
+      return;
+    }
+    firstWalk(t.c[0]);
+    let ih = updateIYL(bottom(t.c[0].el), 0, null);
+    for (let i = 1; i < t.cs; ++i) {
+      firstWalk(t.c[i]);
+      const min = bottom(t.c[i].er);
+      separate(t, i, ih);
+      ih = updateIYL(min, i, ih);
+    }
+    positionRoot(t);
+    setExtremes(t);
+  }
+
+  function setExtremes(t) {
+    if (t.cs === 0) {
+      t.el = t;
+      t.er = t;
+      t.msel = t.mser = 0;
+    } else {
+      t.el = t.c[0].el;
+      t.msel = t.c[0].msel;
+      t.er = t.c[t.cs - 1].er;
+      t.mser = t.c[t.cs - 1].mser;
+    }
+  }
+
+  function separate(t, i, ih) {
+    let sr = t.c[i - 1];
+    let mssr = sr.mod;
+    let cl = t.c[i];
+    let mscl = cl.mod;
+    while (sr !== null && cl !== null) {
+      if (bottom(sr) > ih.low) ih = ih.nxt;
+      const dist = (mssr + sr.prelim + sr.w) - (mscl + cl.prelim);
+      if (dist > 0) {
+        mscl += dist;
+        moveSubtree(t, i, ih.index, dist);
+      }
+      const sy = bottom(sr);
+      const cy = bottom(cl);
+      if (sy <= cy) {
+        sr = nextRightContour(sr);
+        if (sr !== null) mssr += sr.mod;
+      }
+      if (sy >= cy) {
+        cl = nextLeftContour(cl);
+        if (cl !== null) mscl += cl.mod;
+      }
+    }
+    if (!sr && !!cl) {
+      setLeftThread(t, i, cl, mscl);
+    } else if (!!sr && !cl) {
+      setRightThread(t, i, sr, mssr);
+    }
+  }
+
+  function moveSubtree(t, i, si, dist) {
+    t.c[i].mod += dist;
+    t.c[i].msel += dist;
+    t.c[i].mser += dist;
+    distributeExtra(t, i, si, dist);
+  }
+
+  function nextLeftContour(t) {
+    return t.cs === 0 ? t.tl : t.c[0];
+  }
+
+  function nextRightContour(t) {
+    return t.cs === 0 ? t.tr : t.c[t.cs - 1];
+  }
+
+  function bottom(t) {
+    return t.y + t.h;
+  }
+
+  function setLeftThread(t, i, cl, modsumcl) {
+    const li = t.c[0].el;
+    li.tl = cl;
+    const diff = (modsumcl - cl.mod) - t.c[0].msel;
+    li.mod += diff;
+    li.prelim -= diff;
+    t.c[0].el = t.c[i].el;
+    t.c[0].msel = t.c[i].msel;
+  }
+
+  function setRightThread(t, i, sr, modsumsr) {
+    const ri = t.c[i].er;
+    ri.tr = sr;
+    const diff = (modsumsr - sr.mod) - t.c[i].mser;
+    ri.mod += diff;
+    ri.prelim -= diff;
+    t.c[i].er = t.c[i - 1].er;
+    t.c[i].mser = t.c[i - 1].mser;
+  }
+
+  function positionRoot(t) {
+    t.prelim = (
+      t.c[0].prelim + t.c[0].mod + t.c[t.cs - 1].mod +
+      t.c[t.cs - 1].prelim + t.c[t.cs - 1].w
+    ) / 2 - t.w / 2;
+  }
+
+  function secondWalk(t, modsum) {
+    modsum += t.mod;
+    t.x = t.prelim + modsum;
+    addChildSpacing(t);
+    for (let i = 0; i < t.cs; i++) {
+      secondWalk(t.c[i], modsum);
+    }
+  }
+
+  function distributeExtra(t, i, si, dist) {
+    if (si !== i - 1) {
+      const nr = i - si;
+      t.c[si + 1].shift += dist / nr;
+      t.c[i].shift -= dist / nr;
+      t.c[i].change -= dist - dist / nr;
+    }
+  }
+
+  function addChildSpacing(t) {
+    let d = 0;
+    let modsumdelta = 0;
+    for (let i = 0; i < t.cs; i++) {
+      d += t.c[i].shift;
+      modsumdelta += d + t.c[i].change;
+      t.c[i].mod += modsumdelta;
+    }
+  }
+
+  function updateIYL(low, index, ih) {
+    while (ih !== null && low >= ih.low) {
+      ih = ih.nxt;
+    }
+    return {
+      low,
+      index,
+      nxt: ih
+    };
+  }
+
+  // do layout
+  layer(root, isHorizontal);
+  const wt = WrappedTree.fromNode(root, isHorizontal);
+  firstWalk(wt);
+  secondWalk(wt, 0);
+  convertBack(wt, root, isHorizontal);
+  normalize(root, isHorizontal);
+
+  return root;
+};

package/src/components/charts/framework/module/nodeLayout/nonLayeredTidyTree/index.js

@@ -0,0 +1,278 @@
+/**
+ * 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 NodeBox from './NodeBox';
+import nonLayeredTidyTree from './algorithm';
+
+// 布局方向
+const VALID_DIRECTIONS = ['LR','RL', 'TB', 'BT', 'H', 'V'];
+
+// 横向布局方向
+const HORIZONTAL_DIRECTIONS = ['LR', 'RL', 'H'];
+
+// 默认布局方向
+const DEFAULT_DIRECTION = VALID_DIRECTIONS[0];
+
+// 默认间距
+const DEFAULT_GAP = 30;
+
+export default class Layout {
+    // 树形结构数据
+    data;
+    // 最大深度，默认根节点深度为0
+    maxDepth = 0;
+    // 每层深度的宽度
+    depthWidth = [];
+
+    constructor(data, containerSize, option) {
+        this.data = data;
+        this.direction = option.layout.direction || VALID_DIRECTIONS[0];
+        // H结构设置左节点
+        this.oneSide = option.layout.oneSide;
+        // V结构设置上节点
+        this.upSide = option.layout.upSide;
+        // 容器大小
+        this.containerSize = containerSize;
+        // 计算每个节点层级
+        this.depth(this.data);
+        // 节点间的横向距离
+        this.xSpace = option.layout.hGap || DEFAULT_GAP;
+        // 节点间的纵向距离
+        this.ySpace = option.layout.vGap || DEFAULT_GAP;
+        // 盒模型计算算法配置
+        this.options = {
+            direction: this.direction,
+            getHGap: (d) => {
+                return this.xSpace / 2;
+            },
+            getVGap: (d) => {
+                return this.ySpace;
+            },
+            getHeight: (d) => {
+                return d.height;
+            },
+            getWidth: (d) => {
+                return d.width;
+            },
+            getSide: (d) => {
+                if (this.oneSide.indexOf(d.id) > -1) {
+                    return 'left';
+                }
+                return 'right';
+            },
+        }
+        // 计算每个节点盒模型
+        this.setNodeBox();
+        // 计算节点位置
+        this.doLayout(this.box, this.options, nonLayeredTidyTree);
+        // 将整个节点树，移动到container中心, 将节点位置同步到this.data中
+        this.revisePosn();
+    }
+
+    /**
+     * 生成所有节点的盒模型
+     * 根据 this.data 生成 this.box
+     * this.data 和 this.box 结构一样
+     * this.data 存储了真正用到的数据，包括：dom, width, height, x, y
+     * this.box 存储了盒模型的数据，其中的 width, height 是dom width/height 和hgap/vgap 之和
+     */
+    setNodeBox() {
+        let rdata = this.data;
+        let rootBox = new NodeBox(rdata, this.options);
+        let createBox = (data, box) => {
+            if (data.children && data.children.length > 0) {
+                for (let i = 0; i < data.children.length; i++) {
+                    let childData = data.children[i];
+                    let childBox = new NodeBox(childData, this.options);
+                    box.children[i] = childBox;
+                    childBox.parent = box;
+                    createBox(childData, childBox);
+                }
+            }
+            return
+        };
+        createBox(rdata, rootBox);
+        this.box = rootBox;
+    }
+
+    // 开始执行位置算法
+    doLayout(root, options, layoutAlgrithm) {
+        const direction = options.direction || DEFAULT_DIRECTION;
+        options.isHorizontal = this.isHorizontal(direction);
+        if (direction && VALID_DIRECTIONS.indexOf(direction) === -1) {
+            throw new TypeError(`Invalid direction: ${direction}`);
+        }
+        if (direction === VALID_DIRECTIONS[0]) {  // LR
+            layoutAlgrithm(root, options);
+        } else if (direction === VALID_DIRECTIONS[1]) { // RL
+            layoutAlgrithm(root, options);
+            root.right2left();
+        } else if (direction === VALID_DIRECTIONS[2]) { // TB
+            layoutAlgrithm(root, options);
+        } else if (direction === VALID_DIRECTIONS[3]) { // BT
+            layoutAlgrithm(root, options);
+            root.bottom2top();
+        } else if (direction === VALID_DIRECTIONS[4] || direction === VALID_DIRECTIONS[5]) { // H or V
+            // separate into left and right trees
+            const { left, right } = this.separateTree(root, options);
+            // do layout for left and right trees
+            layoutAlgrithm(left, options);
+            layoutAlgrithm(right, options);
+            options.isHorizontal ? (left.right2left()) : (left.bottom2top());
+            // combine left and right trees
+            right.translate(left.x - right.x, left.y - right.y);
+            // translate root
+            root.x = left.x;
+            root.y = right.y;
+            const bb = root.getBoundingBox();
+            if (options.isHorizontal) {
+                if (bb.top < 0) {
+                    root.translate(0, -bb.top);
+                }
+            } else {
+                if (bb.left < 0) {
+                    root.translate(-bb.left, 0);
+                }
+            }
+        }
+        // fixed root position, default value is true
+        let fixedRoot = options.fixedRoot;
+        if (fixedRoot === undefined) fixedRoot = true;
+        if (fixedRoot) {
+            root.translate(-(root.x + root.width / 2 + root.hgap), -(root.y + root.height / 2 + root.vgap));
+        }
+        return root;
+    };
+
+
+    isHorizontal(direction) {
+        return HORIZONTAL_DIRECTIONS.indexOf(direction) > -1;
+    }
+
+    separateTree(root, options) {
+        // 初始化左右两棵树
+        const left = new NodeBox(this.data, options);
+        const right = new NodeBox(this.data, options);
+        // automatically
+        const treeSize = root.children.length;
+        const rightTreeSize = Math.round(treeSize / 2);
+        // separate left and right tree by meta data
+        const getSide = options.getSide || function (child, index) {
+            if (index < rightTreeSize) {
+                return 'right';
+            }
+            return 'left';
+        };
+        for (let i = 0; i < treeSize; i++) {
+            const child = root.children[i];
+            const side = getSide(child, i);
+            if (side === 'right') {
+                right.children.push(child);
+            } else {
+                left.children.push(child);
+            }
+        }
+        left.eachNode(node => {
+            if (!node.isRoot()) {
+                node.side = 'left';
+            }
+        });
+        right.eachNode(node => {
+            if (!node.isRoot()) {
+                node.side = 'right';
+            }
+        });
+        return {
+            left,
+            right
+        };
+    };
+
+    // 计算每层节点之间的间距
+    getXpace() {
+        this.depthWidth = new Array(this.maxDepth + 1).fill(0);
+        let setDepthWidth = (node) => {
+            if (this.depthWidth[node.depth] < node.width) {
+                this.depthWidth[node.depth] = node.width;
+            }
+            if (node.children && node.children.length > 0) {
+                node.children.forEach(child => {
+                    setDepthWidth(child);
+                });
+            }
+        }
+        setDepthWidth(this.data);
+        let sumWidth = this.depthWidth.reduce((a, b) => a + b);
+        return Math.abs((this.containerSize.width - 30 * 2 - sumWidth) / this.maxDepth);
+    }
+
+    // 计算每个节点的层级,增加depth和parent属性
+    depth(root) {
+        let setDepth = (node, parent) => {
+            node.depth = parent.depth + 1;
+            node.parent = parent.id;
+            if (this.maxDepth < node.depth) {
+                this.maxDepth = node.depth;
+            }
+            if (node.children && node.children.length > 0) {
+                node.children.forEach(child => {
+                    setDepth(child, node);
+                });
+            }
+        };
+        setDepth(root, { id: null, depth: -1 });
+    }
+
+    /**
+     * 1. 将节点树移动到container中心
+     * 2. 将节点位置同步到this.data中
+     */
+    revisePosn() {
+        let minX = 99999;
+        let maxX = -99999;
+        let minY = 99999;
+        let maxY = -99999;
+        let getTreeBounding = (box, data) => {
+            if (minX > box.x) {
+                minX = box.x
+            };
+            if (minY > box.y) {
+                minY = box.y
+            };
+            if (maxX < (box.x + data.width)) {
+                maxX = box.x + data.width
+            };
+            if (maxY < (box.y + data.height)) {
+                maxY = box.y + data.height
+            };
+            if (box.children && box.children.length > 0) {
+                box.children.forEach((child, index) => {
+                    getTreeBounding(child, data.children[index])
+                });
+            }
+        }
+        getTreeBounding(this.box, this.data);
+        let revise = {
+            x: this.containerSize.width / 2 - (maxX + minX) / 2,
+            y: this.containerSize.height / 2 - (maxY + minY) / 2
+        }
+        let copyPosition = (box, data) => {
+            data.x = box.x + revise.x;
+            data.y = box.y + revise.y;
+            if (box.children && box.children.length > 0) {
+                box.children.forEach((child, index) => {
+                    copyPosition(child, data.children[index]);
+                });
+            }
+        }
+        copyPosition(this.box, this.data);
+    }
+}

package/src/components/charts/framework/module/readme.js

@@ -0,0 +1,127 @@
+/**
+ * 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.
+ *
+ */
+// 线的相关 入参
+// 参数1
+const edges = [{
+  direction: 'LR', // LR RL TB BT TT BB LL RR 
+  startPoint: {
+    x: 0,
+    y: 0,
+    id: 'node-1'
+  },
+  endPoint: {
+    x: 100,
+    y: 100,
+    id: 'node-2'
+  },
+  startNode: {
+    width: 100,
+    height: 100,
+  },
+  endNode: {
+    width: 100,
+    height: 100,
+  },
+  lineStyle: { //单独设置线的样式
+    width: 1,
+    color: 'red',
+    type: 'Round',
+    mode: 'solid'
+  },
+  id: 'line-1'
+}]
+
+// 参数2: 线的样式
+const lineStyle = {
+  width: 1,
+  color: 'red',
+  type: 'Round',
+  mode: 'solid'
+}
+
+
+
+// 连接点相关 入参
+// 参数1 节点信息
+const nodeData = {
+  "id": "root",
+  "dom": {},
+  "width": 342.015625,
+  "height": 56,
+  "x": 4871.9609375,
+  "y": 4811.5
+}
+// 参数2 连接点的信息
+const pointsData = [{
+  position: 'top', // 连接点的位置信息
+  attrs: { // 连接点的样式信息
+    cicle: {
+      r: 6,
+      magnet: true,
+      stroke: '#C2C8D5',
+      strokeWidth: 1,
+      fill: '#fff',
+    }
+  },
+  parentId:"root",
+  isSeparate: false, // 连接点数量大于1，是否分离显示，默认值false,非必填,
+}, {
+  position: 'bottom',
+  attrs: {
+    cicle: {
+      r: 6,
+      magnet: true,
+      stroke: '#C2C8D5',
+      strokeWidth: 1,
+      fill: '#fff',
+    }
+  },
+  parentId:"root",
+  isSeparate: false,
+}]
+
+// 返回
+[{
+    position: "top",
+    attrs: {
+      "cicle": {
+        "r": 6,
+        "magnet": true,
+        "stroke": "#C2C8D5",
+        "strokeWidth": 1,
+        "fill": "#fff"
+      }
+    },
+    isSeparate: false,
+    x: 150,
+    y: 0,
+    parentId:"root",
+    pointId: "root-top-1"
+  },
+  {
+    position: "bottom",
+    attrs: {
+      "cicle": {
+        "r": 6,
+        "magnet": true,
+        "stroke": "#C2C8D5",
+        "strokeWidth": 1,
+        "fill": "#fff"
+      }
+    },
+    parentId:"root" ,
+    isSeparate: false,
+    x: 150,
+    y: 0,
+    pointId: "root-bottom-2"
+  }
+]