@ebiz/designer-components 0.0.18-tj.1

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

@@ -0,0 +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 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 CustomizeChart extends Relation {
+  static name = CHART_TYPE.CUSTOMIZE
+  // 图表渲染容器
+  dom;
+  // 图表外部传入数据
+  optionData;
+  // 图表nodes+edges格式数据
+  relationData;
+  // 图表容器边距
+  padding = 30;
+  // 图表最外层容器
+  container;
+  // 图表svg元素容器
+  svgContainer;
+  // 图表二次连线svg元素容器
+  secondSvgContainer;
+  secondlineGContainer;
+  // 图表html元素容器
+  htmlContainer;
+  // 图表容器的宽高变化监听器
+  resizeObserver = null;
+  // 连线管理器
+  lineManager;
+  // 节点管理器
+  nodeManager;
+
+  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);
+    this.createNodes();
+    this.createLines();
+    this.setResizeObserver();
+    this.renderCallBack && this.renderCallBack(this);
+  }
+
+  // 设置默认布局
+  setDefaultLayout(option) {
+    option.layout = merge({
+      nodeShape: 'circle',
+    }, option.layout);
+  }
+
+  // 根据节点大小和关系，计算布局，创建和渲染节点
+  createNodes() {
+    this.nodeManager = new NodeManager(this.option, this.htmlContainer);
+    this.setNodeSize(this.option);
+    this.nodeManager.layout();
+    this.nodeManager.render();
+    this.relationData = this.nodeManager.getData();
+  }
+
+  // 补充宽高信息到节点数据上
+  setNodeSize(option) {
+    option.data.nodes.forEach(node => {
+      node.width = node.width || option?.node?.width || NODE_WIDTH;
+      node.height = node.height || option?.node?.height || NODE_HEIGHT;
+    })
+  }
+
+  // 创建连线
+  createLines() {
+    this.lineManager = new LineManager(this.option, this.svgContainer,this);
+    this.lineManager.layout(this.nodeManager);
+    this.lineManager.render();
+  }
+
+  createCustomizeLines(option) {
+    let svgRect = this.secondSvgContainer.getBoundingClientRect();
+    let canvas = this.canvas;
+  
+    option.data.nodes.forEach(node => {
+      let nodeId = node.id;
+      let domRect = document.getElementById(nodeId).getBoundingClientRect();
+      node.x = svgRect.width/2 + ((domRect.left - canvas.nodeOrigin.x)/canvas.scale);
+      node.y = svgRect.height/2 + ((domRect.top - canvas.nodeOrigin.y)/canvas.scale);
+
+    })
+    this.lineManager.renderCustom(option, this.secondlineGContainer);
+
+    // 1. 由于需要连线的node分布在不同的图层中，需要查找到分布到各个图层中node，计算他们相对于最外层的x,y
+
+    // 2. 根据1生成一个新的relationData
+
+    // 3. 执行LineLayout算法
+
+    // 4. 绘制连线
+    // render
+  }
+
+
+  // 图表渲染完成时回调
+  onRendered(callback) {
+    this.renderCallBack = callback;
+  }
+
+  // 图表刷新，刷新配置项
+  refresh(option) {
+    option.layout = merge({ type: '', nodeShape: 'circle' }, option.layout);
+    this.setDefaultLayout(option);
+    this.setNodeSize(option);
+    this.nodeManager.relayout(option);
+    this.nodeManager.refresh(option);
+    this.lineManager.refresh(option);
+    // Connector 位移最后再做
+  }
+
+
+
+  // 图表刷新，仅刷新数据
+  refreshData() {
+    // this.refresh()
+  }
+
+  // 刷新图表自适应宽度
+  resize() {
+
+  }
+
+  setResizeObserver() {
+
+  }
+
+  // 销毁图表
+  uninstall() {
+    this.resizeObserver.disconnect();
+  }
+}
+

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

@@ -0,0 +1,141 @@
+/**
+ * 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 Relation from '../../core/Relation';
+
+import {initContainer} from './initDom';
+
+import { CHART_TYPE } from '../../../util/constants';
+import Node from './libs/Node.js';
+
+export default class ForceDirectedChart extends Relation {
+
+    static name = CHART_TYPE.FORCE_DIRECTED
+
+    // 图表渲染容器
+    dom;
+    // 图表所需数据
+    data;
+    // 图表容器边距
+    padding = 30;
+    // 图表最外层容器
+    container;
+    // 生成节点和计算位置
+    Node
+
+    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.createDom();
+        this.setResizeObserver();
+        this.renderCallBack && this.renderCallBack(this);
+    }
+
+    // 创建渲染容器
+    createDom() {
+      this.dom.innerHTML = '';
+      initContainer(this.dom, this.option);
+      this.data = this.option.data;
+      const container = this.dom.getElementsByClassName('fd-container')[0];
+      this.Node = new Node(this.data, this.option, container);
+      this.Node.create(this.data, this.option);
+    }
+
+
+    // 图表渲染完成时回调
+    onRendered(callback) {
+        this.renderCallBack = callback;
+    }
+
+    // 图表刷新，刷新配置项
+    refresh() {
+
+    }
+
+    // 图表刷新，仅刷新数据
+    refreshData() {
+
+    }
+
+    // 刷新图表自适应宽度
+    resize() {
+
+    }
+
+    setResizeObserver() {
+
+    }
+
+    // 销毁图表
+    uninstall() {
+        this.resizeObserver.disconnect();
+        this.dom.innerHTML = '';
+    }
+
+    // 绑定事件
+    initEvent() {
+        let self = this;
+        let onClick = this.option.onClick && this.option.onClick;
+        // 鼠标按下节点，后续如果情况复杂，可能改为绑定在document上
+        self.htmlContainer.childNodes.forEach((item) => {
+            let dom = item;
+            let domId = dom.id;
+            dom.onmousedown = (mousedownEvent) => {
+                mousedownEvent.stopPropagation();
+                self.nodeManager.getNode(self.data, domId, (data) => {
+                    onClick && onClick(dom, data);
+                });
+            }
+        })
+        let list = self.htmlContainer.getElementsByClassName('mmc-node-btn');
+        Array.prototype.forEach.call(list,(item) => {
+            let domId = item.parentNode.id;
+            item.onmousedown = (mousedownEvent) => {
+                mousedownEvent.stopPropagation();
+                this.mousedownNode = mousedownEvent;
+                // 鼠标移动
+                document.onmouseup = (mousemoveEvent) => {
+                    if (this.mousedownNode) {
+                        let moveX = Math.abs(mousemoveEvent.clientX - this.mousedownNode.clientX);
+                        let moveY = Math.abs(mousemoveEvent.clientY - this.mousedownNode.clientY);
+                        // 点击后移动小于5才触发
+                        if (moveX < 5 || moveY < 5) {
+                            self.nodeManager.updateNode(self.data, domId, self.svgContainer);
+                            this.mousedownNode = null;
+                        }
+                    }
+                }
+
+            }
+        })
+    }
+
+}

package/src/components/charts/framework/charts/ForceDirectedChart/initDom.js

@@ -0,0 +1,20 @@
+/**
+ * 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 { appendHTML } from '../../../util/dom';
+
+export function initContainer(dom,option) {
+    let container = `
+    <div class="fd-container con" id="fd-container">
+    
+    </div>`;
+    appendHTML(dom, container);
+}

package/src/components/charts/framework/charts/ForceDirectedChart/libs/Node.js

@@ -0,0 +1,148 @@
+/**
+ * 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 forceCenter from './center';
+import forceLink from './link';
+import forceManyBody from './manyBody';
+import forceCollide from './collide';
+import forceSimulation from './simulation';
+
+const initialRadius = 10;
+const initialSize = 2 * initialRadius;
+export default class NodeManager {
+  // 节点数据
+  data;
+  layoutNodes;
+  dom;
+
+  constructor(data, option, container) {
+    this.option = option;
+    this.dom = container;
+    this.render = option.render;
+  }
+
+  //调用动画函数
+
+  /**
+   * 创建节点
+   */
+  create() {
+    const { data, width, height, strength, distance, key, symbolSize } =
+      this.option;
+    let simulation = forceSimulation(data.nodes, this.option);
+    // 节点相互吸引（正值）或排斥(负值),默认的strength是-30
+    simulation.force('charge', forceManyBody().strength(strength));
+    // 节点往中心点吸引
+    simulation.force('center', forceCenter(width / 2, height / 2));
+    // 连接节点,创建固定距离
+    const forceLinkIns = forceLink(data.links);
+    if (key) {
+      // 没有唯一的值，就以下标索引作为连接关系
+      forceLinkIns.id((d) => d[key]);
+    }
+    // forceLink将链接的节点移动到一个固定的距离(distance)
+    simulation.force('link', forceLinkIns.distance(distance));
+    // 避免节点(circle)重叠,返回节点半径
+    simulation.force(
+      'collision',
+      forceCollide().radius((node,index,nodes) => {
+        return node.radius || node.symbolSize / 2 || symbolSize / 2 || initialRadius;
+      })
+    );
+    simulation.on('tick', this.ticked);
+    // simulation.alphaTarget(0.3).restart();
+    // simulation.alphaDecay(1);
+
+    let nodeDom = this.createNode(this.option, data.nodes);
+    let linkDom = this.createLine(this.option, data.links);
+    this.dom.appendChild(nodeDom);
+    this.dom.appendChild(linkDom);
+  }
+
+  /*
+   * 创建nodedom
+   *
+   */
+  createNode(option, nodes) {
+    let dom = document.createElement('div');
+    dom.classList = ['fd-node-con'];
+    nodes.forEach((item, index) => {
+      // 节点信息
+      let itemDom = document.createElement('div');
+      itemDom.classList = ['fd-node'];
+      itemDom.style.width =
+        (item.symbolSize || option.symbolSize || initialSize) + 'px';
+      itemDom.style.height =
+        (item.symbolSize || option.symbolSize || initialSize) + 'px';
+      let renderFun = item.render || option.render;
+      renderFun && renderFun(itemDom, item, index);
+      dom.appendChild(itemDom);
+    });
+    return dom;
+  }
+
+  /*
+   * 创建lineDom
+   *
+   */
+  createLine(option, links) {
+    let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.style.width = option.width;
+    svg.style.height = option.height;
+    let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    links.forEach((res, index) => {
+      let line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+      line.setAttribute('data-index', index);
+      line.setAttribute('class', 'line');
+      line.setAttribute(
+        'stroke',
+        res.lineColor || option.lineStyle.color || '#000'
+      );
+      option.lineStyle.style == 'dotted'
+        ? line.setAttribute('stroke-dasharray', '2 2')
+        : '';
+      line.setAttribute(
+        'stroke-width',
+        option.lineStyle ? option.lineStyle.height + 'px' : '1px'
+      );
+      g.appendChild(line);
+    });
+    svg.appendChild(g);
+    return svg;
+  }
+
+  // 迭代更新位置
+  ticked() {
+    let nodes = this.nodes(); // 此处的this是simulation
+    let option = this.option();
+    window.requestAnimationFrame(animate);
+
+    function animate() {
+      const $node = document.getElementsByClassName('fd-node');
+      const $lines = document.getElementsByClassName('line');
+
+      if ($node.length > 1) {
+        nodes.forEach((res, index) => {
+          const diff = res.radius || res.symbolSize / 2 || option.symbolSize / 2 || initialRadius;
+          $node[index].style.transform = `translate(${res.x - diff}px, ${res.y - diff}px)`;
+        });
+        option.data.links.forEach((res, index) => {
+          if ($lines[index]) {
+            $lines[index].setAttribute('x1', res.source.x);
+            $lines[index].setAttribute('y1', res.source.y);
+            $lines[index].setAttribute('x2', res.target.x);
+            $lines[index].setAttribute('y2', res.target.y);
+          }
+        });
+      }
+    }
+  }
+}

package/src/components/charts/framework/charts/ForceDirectedChart/libs/center.js

@@ -0,0 +1,71 @@
+/**
+ * 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.
+ *
+ */
+// 设置点阵中心 
+export default function(x, y) {
+  var nodes, strength = 1;
+
+  if (x == null) x = 0;
+  if (y == null) y = 0;
+
+  // （单例对象模式）
+  function force() {
+    let n = nodes.length,
+        node,
+        sx = 0,
+        sy = 0;
+
+    for (let i = 0; i < n; ++i) {
+      node = nodes[i];
+      sx += node.x; // 节点x之和
+      sy += node.y; // 节点y之和
+    }
+    // sx/n是点阵的中心x坐标， sy/n是点阵的中心y坐标，
+    sx = (sx / n - x) * strength;
+    sy = (sy / n - y) * strength;
+    for (let i = 0; i < n; ++i) {
+      node = nodes[i]; 
+      node.x -= sx; // node.x = node.x + (x - sy/n)*strength
+      node.y -= sy;
+    }
+  }
+
+  // 初始化，为nodes赋值
+  force.initialize = function(_) {
+    nodes = _;
+  };
+
+  force.x = function(_) {
+    if (arguments.length) {
+      x = +_;
+      return force;
+    }
+    return x;
+  };
+
+  force.y = function(_) {
+    if (arguments.length) {
+      y = +_;
+      return force;
+    }
+    return y;
+  };
+
+  force.strength = function(_) {
+    if (arguments.length) {
+      strength = +_;
+      return force;
+    }
+    return strength;
+  };
+
+  return force;
+}

package/src/components/charts/framework/charts/ForceDirectedChart/libs/collide.js

@@ -0,0 +1,151 @@
+/**
+ * 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 quadtree from "./quadtree.js";
+import constant from "./constant.js";
+import jiggle from "./jiggle.js";
+
+// vx/vy是当前节点的运动速度
+function x(d) {
+  return d.x + d.vx; // 运动一步 x + vx
+}
+
+function y(d) {
+  return d.y + d.vy;
+}
+
+// 防止重叠
+export default function(radius) {
+  let nodes,
+      radii,
+      random,
+      strength = 1, // 力度
+      iterations = 1;
+
+  if (typeof radius !== "function") { // radius不是方法时，转数字常量或默认为1
+    radius = constant(radius == null ? 1 : +radius);
+  }
+
+  function force() {
+  
+    let i, 
+        tree,
+        node,
+        xi,
+        yi,
+        ri, // 半径
+        ri2; // 半径平方
+
+    const n = nodes.length;
+    for (let k = 0; k < iterations; ++k) {
+      // 以x,y访问器构建一个四叉树，即节点运动到下一步位置为坐标
+      // visitAfter是后序遍历树的节点，执行prepare为每个节点求半径r,参数为各个节点，
+      tree = quadtree(nodes, x, y).visitAfter(prepare);
+      for (i = 0; i < n; ++i) {
+        node = nodes[i];
+        ri = radii[node.index];
+        ri2 = ri * ri;
+        xi = node.x + node.vx;
+        yi = node.y + node.vy;
+        // 前序遍历所有节点，apply返回true则不访问其子节点
+        tree.visit(apply);
+      }
+    }
+
+    // 为每个节点求半径r,参数为各个节点，返回true节点不可见
+    function prepare(quad) {
+      // 是否存在叶子节点 
+      if (quad.data) return quad.r = radii[quad.data.index];
+      quad.r = 0;
+      for (let i = 0; i < 4; ++i) {
+        // 取最大r值
+        if (quad[i] && quad[i].r > quad.r) {
+          quad.r = quad[i].r;
+        }
+      }
+    }
+
+    function apply(quad, x0, y0, x1, y1) {
+      let data = quad.data;
+      let rj = quad.r;
+      let r = ri + rj; // 两个点与其作用域构成两个圆
+      if (data) { // 叶子节点
+        if (data.index > node.index) {
+          // 设第一重循环nodes[i]为节点A（xi,yi） 第二重循环为节点B(data.x,data.y)下一步运动(+=vx,+=vy)
+          let x = xi - (data.x + data.vx), // B到A的水平距离
+              y = yi - (data.y + data.vy),
+              l = x * x + y * y;
+          if (l < r * r) { // 发生了碰撞
+            if (x === 0) x = jiggle(random), l += x * x; // 避免x=0
+            if (y === 0) y = jiggle(random), l += y * y; // 避免y=0
+            // 斥力 = 重叠长度/实际距离 * 碰撞力度
+            l = (r - (l = Math.sqrt(l))) / l * strength;
+            // 计算AB节点新的运动速度和方向，AB点往相反方向运动
+            node.vx += (x *= l) * (r = (rj *= rj) / (ri2 + rj));
+            node.vy += (y *= l) * r;
+            data.vx -= x * (r = 1 - r);
+            data.vy -= y * r;
+          }
+        }
+        return;
+      }
+      // 非叶子节点
+      return x0 > xi + r || x1 < xi - r || y0 > yi + r || y1 < yi - r;
+    }
+  }
+
+
+  // 初始化
+  function initialize() {
+    if (!nodes) return;
+    const n = nodes.length;
+    radii = new Array(n);
+    for (let i = 0; i < n; ++i) {
+      let node = nodes[i];
+      radii[node.index] = +radius(node, i, nodes); // 收集所有节点的半径
+    }
+  }
+
+  force.initialize = function(_nodes, _random) {
+    nodes = _nodes;
+    random = _random;
+    initialize();
+  };
+
+  // 设置或读取半径
+  force.radius = function(_) {
+    if(arguments.length) { // set
+      radius = typeof _ === "function" ? _ : constant(+_);
+      initialize();
+      return force;
+    }
+    return radius; // get
+  };
+
+  // 设置或读取迭代次数
+  force.iterations = function(_) {
+    if (arguments.length) { // set
+      iterations = +_;
+      return force;
+    }
+    return iterations; // get
+  };
+
+  force.strength = function(_) {
+    if (arguments.length) { // set
+      strength = +_;
+      return force;
+    }
+    return strength; // get
+  };
+
+  return force;
+}