@ebiz/designer-components 0.0.48 → 0.0.49

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

@@ -1,166 +0,0 @@
-/**
- * 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

@@ -1,141 +0,0 @@
-/**
- * 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

@@ -1,20 +0,0 @@
-/**
- * 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

@@ -1,148 +0,0 @@
-/**
- * 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

@@ -1,71 +0,0 @@
-/**
- * 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

@@ -1,151 +0,0 @@
-/**
- * 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;
-}