@ebiz/designer-components 0.0.18-tj.1

package/src/components/charts/framework/module/line/Animation.js

@@ -0,0 +1,125 @@
+/**
+ * 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 class Animation {
+
+  constructor() {
+  }
+
+  start(option) {
+    this.unmount();
+    option.type && this[option.type](option)
+  }
+
+  grow(option) {
+    // 虚线不支持生长动效，stroke-dasharray属性会被覆盖
+    if(option.lineMode === 'dash') return;
+    let path = option.path;
+    let linePath = path.firstChild;
+    linePath.setAttribute('style', '');
+    let dasharray = linePath.getTotalLength();
+    const animationName = `grow-${linePath.id}`;
+    const style = document.createElement('style');
+    let styleHtml = `
+    @keyframes ${animationName} {
+      from {
+        stroke-dashoffset: ${dasharray};
+      }
+      to {
+        stroke-dashoffset: 0;
+      }
+    }`;
+    style.id = `style-grow-${linePath.id}`;
+    style.innerHTML = styleHtml;
+    linePath.style.cssText += `animation-name: ${animationName};animation-duration: 1s; animation-timing-function:linear;`;
+    linePath.setAttribute('stroke-dasharray', dasharray);
+    this.styleDom = style;
+    document.head.appendChild(style);
+  }
+
+  dash(option) {
+    let path = option.path;
+    let linePath = path.firstChild;
+    linePath.setAttribute('style', '');
+    const animationName = `dash-${linePath.id}`;
+    const style = document.createElement('style');
+    let styleHtml = `
+    @keyframes ${animationName} {
+      from {
+        stroke-dashoffset: 8%;
+      }
+      to {
+        stroke-dashoffset: 0;
+      }
+    }`;
+    style.id = `style-dash-${linePath.id}`;
+    style.innerHTML = styleHtml;
+    linePath.style.cssText += `animation-name: ${animationName};animation-duration: 2s; animation-timing-function:linear;animation-iteration-count:infinite;`;
+    linePath.setAttribute('stroke-dasharray', 10);
+    option.color && linePath.setAttribute('stroke', option.color);
+    this.styleDom = style;
+    document.head.appendChild(style);
+  }
+
+  streamer(option) {
+    let path = option.path;
+    let linePath = path.firstChild;
+    let dasharray = linePath.getTotalLength();
+    linePath.setAttribute('style', '');
+    linePath.setAttribute('stroke-dasharray', '');
+    option.color && linePath.setAttribute('stroke', option.color);
+    let d = linePath.getAttribute('d');
+    let trans = document.createElement('div');
+    trans.setAttribute('id',`${linePath.id}-trans-streamer`)
+    let str = '';
+    for (let i = 0; i < Math.floor(dasharray / 50); i++) {
+      str += `<div class="fc-trans-point" style="offset-path:path('${d}');
+      offset-distance:${Number(25 * i)}%;
+      animation-delay:-${i * 1}s;
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 8px;
+                height: 3px;
+                offset-distance: 0%;
+                background-image: linear-gradient(to right, rgba(255, 255, 255, 0.2) 10%, rgba(255, 255, 255,0.8));"></div>`
+    }
+    trans.insertAdjacentHTML('beforeend', str);
+    let canvasContainer = path.closest(".huicharts-canvas-container").getElementsByClassName("huicharts-animation-container")[0];
+    canvasContainer?.appendChild(trans);
+    const animationName = `streamer-${linePath.id}`;
+    const style = document.createElement('style');
+    let styleHtml = `
+    @keyframes ${animationName} {
+      from {
+        offset-distance: 0;
+      }
+      to {
+        offset-distance: 90%;
+      }
+    }`;
+    style.id = `style-streamer-${linePath.id}`;
+    style.innerHTML = styleHtml;
+    for (var i = 0; i < trans.children.length; i++) {
+      var child = trans.children[i];
+      child.style.cssText += `animation-name: ${animationName};animation-duration: 2s; animation-timing-function:linear;animation-iteration-count:infinite;`;
+    }
+    this.styleDom = style;
+    document.head.appendChild(style);
+  }
+
+  // 清空动效  ，在这里把 style 给删除掉
+  unmount() {
+    this.styleDom && document.head.removeChild(this.styleDom);
+  }
+
+}

package/src/components/charts/framework/module/line/Manager.js

@@ -0,0 +1,299 @@
+/**
+ * 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 Line from "./index";
+import Customize from "./customize";
+import LineLayout from '../lineLayout';
+import merge from '../../../util/merge';
+import bufferRender from './bufferRender';
+import ArrowManager from '../arrow/Manager';
+import ConnectorManager from '../connector/Manager';
+import { Animation } from '../animation';
+
+const DEFAULT_LINE = {
+  type: 'Round',
+  style: {
+    width: 1,
+    radius: 0,
+    mode: 'solid',
+    color: '#c2c2c2',
+    hover: {
+      color: '#2070F3'
+    },
+    active: {},
+    disable: {}
+  },
+  endMarker: {
+    size: 8,
+    type: 'block',
+    color: '#c2c2c2'
+  }
+};
+
+export default class LineManager {
+  // 线管理器工厂
+  instance = {};
+  canvasContainter;
+  
+  // 再次全部渲染线的延迟时间（等待节点渲染动效完成）
+  RE_CREATE_TIME = 500;
+
+  constructor(option, container, chartInstance) {
+    this.option = option;
+    this.container = container;
+    this.chartInstance = chartInstance;
+    this.gContainer = this.getGContainer();
+    this.canvasContainter = this.container.parentNode;
+    this.animationContainter = this.getAnimationContainer();
+  }
+
+  init(option) {
+    const lineOpt = merge(DEFAULT_LINE, option.line);
+    this.lineOption = lineOpt;
+    this.onClick = lineOpt.onClick;
+    this.onHover = lineOpt.onHover;
+    this.ArrowManager = new ArrowManager(lineOpt, this.container)
+  }
+
+  // 根据edges生成连接点
+  layout(nodeManager) {
+    this.nodeManager = nodeManager;
+    this.relationData = nodeManager.getData();
+    new LineLayout(this.relationData, this.option);
+    this.connectorManager = new ConnectorManager(this.chartInstance, this.relationData.edges, this.option);
+    this.init(this.option);
+    this.createLineData(this.option.data, this.option);
+  }
+
+  // 刷新连线
+  relayout(option) {
+    // 此时的节点数据中，x,y.width,height为最新值，其他数据是老的，数量也是最新的（经过了增删改查）
+    let currentNodePosition = this.nodeManager.getCurrentPosition();
+    this.currentRelationData = {
+      nodes: [],
+      edges: this.nodeManager.getData().edges
+    }
+    let newNodeIds = [];
+    for (let i in currentNodePosition) {
+      this.currentRelationData.nodes.push(currentNodePosition[i]);
+      newNodeIds.push(i)
+    }
+    // this.nodeManager.getData(); 要加id
+    this.relationData.edges.forEach(line => {
+      this.currentRelationData.edges.forEach((edge, i) => {
+        if (edge.start == line.start && edge.end == line.end) {
+          this.currentRelationData.edges[i] = line
+        }
+      })
+    })
+    new LineLayout(this.currentRelationData, option);
+    // this.init(option);
+    this.connectorManager.refresh(this, this.currentRelationData.edges, option)
+    this.createLineData(this.currentRelationData, option);
+  }
+
+  // 绘制自定义连线
+  renderCustom(option, svgContainer) {
+    // nodeManager 好像没用了
+    new LineLayout(option.data, option);
+    this.customizeData = option.data;
+    // customizeData 就是自定义的连线的数据,nodes和edges
+    this.createLineData(this.customizeData, option);
+    // render
+    const lineOpt = merge(DEFAULT_LINE, option.line);
+    option.duration = this.RE_CREATE_TIME;
+    const customizeArrow = new ArrowManager(lineOpt, this.container)
+    Customize({
+      data: this.customizeData,
+      option,
+      ArrowManager: customizeArrow,
+      svgContainer
+    });
+  }
+
+  // 将点的原始数据，转换成线的数据格式
+  createLineData(data, option) {
+    let nodeData = {};
+    data.nodes.forEach(node => {
+      nodeData[node.id] = node
+    })
+    data.edges.forEach((edge, i) => {
+      const { startConnector, endConnector, end, start } = edge;
+      if (!nodeData[start] || !nodeData[end]) {
+        delete data.edges[i]
+      }
+      const id = `${startConnector.id}-to-${endConnector.id}`;
+      edge.id = id;
+      edge.startConnector.absolute = {
+        x: startConnector.x + nodeData[start]?.x,
+        y: startConnector.y + nodeData[start]?.y,
+      };
+      edge.endConnector.absolute = {
+        x: endConnector.x + nodeData[end]?.x,
+        y: endConnector.y + nodeData[end]?.y,
+      };
+      const lineStyle = merge(DEFAULT_LINE, option.line);
+      edge.lineOption = lineStyle;
+    })
+  }
+
+  render() {
+    let containerRect = this.container.getBoundingClientRect();
+    this.canvasContainterRect = this.canvasContainter.getBoundingClientRect();
+    this.containerCenter = {
+      x: containerRect.width / 2,
+      y: containerRect.height / 2
+    };
+    if (this.option.layout?.bufferRender) {
+      // 执行局部渲染方法
+      this.relationData.edges.forEach((edge) => {
+        this.bufferRenderLine(edge, this.option);
+      })
+    } else {
+      // 执行全局渲染方法
+      this.relationData.edges.forEach((edge) => {
+        this.renderLine(edge, this.option);
+      })
+    }
+  }
+
+  // 局部渲染连线方法
+  bufferRenderLine(edge, option) {
+    // edge里会配置单根线MergeOption，需要合并一下 todo
+    this.instance[edge.id] = new Line(edge, this.ArrowManager, option);
+    // 使用初始偏移 (0, 0) 进行首次渲染
+    const path = bufferRender(this.instance[edge.id], {
+      scale: 1,
+      lastScale: 1,
+      offset: { x: 0, y: 0 },
+      center: this.containerCenter
+    }, this.gContainer, this.canvasContainterRect);// TODO 初始渲染可能缩放值不是1
+    if (this.instance[edge.id].hasRender) {
+      this.bindEvent(this.instance[edge.id], path);
+    }
+  }
+
+  // 全局渲染连线方法
+  renderLine(line, option) {
+    this.instance[line.id] = new Line(line, this.ArrowManager, option);
+    let path = this.instance[line.id].render();
+    this.bindEvent(this.instance[line.id], path);
+    this.gContainer.appendChild(path);
+  }
+
+  bindEvent(lineInstance, path) {
+    if (this.onClick || this.lineOption.active) {
+      lineInstance.bindEvent(path, 'click', this.onClick);
+    }
+    if (this.onHover || this.lineOption.hover) {
+      lineInstance.bindEvent(path, 'hover', this.onHover);
+    }
+    // 绑定连线由短变长的动效
+    lineInstance.animation({
+      type: 'grow',
+      duration: this.RE_CREATE_TIME,
+      path,
+      lineMode: lineInstance.style?.mode
+    });
+  }
+
+  // 外部触发局部渲染回调
+  onBufferRender(params) {
+    if (!this.option.layout?.bufferRender) return;
+    for (let id in this.instance) {
+      bufferRender(this.instance[id], params, this.gContainer, this.canvasContainterRect);
+    };
+  };
+
+  // 重新刷新连线，伴随动画
+  refresh(option) {
+    let self = this;
+    let animation = new Animation(null, {
+      start: { x: 0, y: 0 },
+      end: { x: 100, y: 100 },
+      duration: 600,
+      onUpdate: function () {
+        self.relayout(option);
+        self.reUpdate(option);
+      }
+    })
+    animation.start();
+  }
+
+  // 对比前后差异，重新刷新连线, this.currentRelationData 是新数据， this.instance是老线数据
+  reUpdate(option) {
+    let newIds = [];
+    let oldIds = [];
+    this.currentRelationData.edges.forEach(edge => {
+      newIds.push(edge.id);
+      if (this.isExist(edge.id)) {
+        this.update(edge);
+      } else {
+        this.renderLine(edge, option);
+      }
+    });
+    oldIds = Object.keys(this.instance);
+    oldIds.forEach(id => {
+      if (newIds.indexOf(id) == -1) {
+        this.unmount(id);
+      }
+    })
+  }
+
+  // 全部删除旧连线，创建新的连线
+  reCreate(nodeManager, option) {
+    for (let i in this.instance) {
+      this.unmount(i);
+    }
+    this.instance = {};
+    setTimeout(() => {
+      this.relationData = nodeManager.getData();
+      new LineLayout(this.relationData, option);
+      this.createLineData(this.relationData, option);
+      this.connectorManager.reCreate(this, this.relationData.edges, option);
+      this.render();
+    }, this.RE_CREATE_TIME);
+  }
+
+  // 是否在原线管理器中
+  isExist(id) {
+    return this.instance[id];
+  }
+
+  getLine(id) {
+    return this.instance[id];
+  }
+
+  getData = function () {
+    return this.instance;
+  }
+
+  update = function (line) {
+    this.instance[line.id]?.update(line);
+  }
+
+  hide = function (line) {
+    this.instance[line.id]?.hide(line);
+  }
+
+  getGContainer() {
+    return this.container.getElementsByClassName("huicharts-lines-g")[0];
+  }
+
+  getAnimationContainer() {
+    return this.container.parentNode.getElementsByClassName("huicharts-animation-container")[0];
+  }
+
+  unmount(id) {
+    this.instance[id].unmount(id);
+    delete this.instance[id]
+  }
+}

package/src/components/charts/framework/module/line/Tag.js

@@ -0,0 +1,61 @@
+/**
+ * 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 defendXSS from '../../../util/defendXSS';
+import { attr, addClass, createDom } from '../../../util/dom';
+export default class Tag {
+
+  constructor(data) {
+    this.tag = data.tag || { text: '' };
+  }
+
+  render() {
+    let text = defendXSS(this.tag.text);
+    let { background, color, radius } = this.tag.style;
+    let g = createDom('g');
+    let width = this.measureTextWidth(text);
+    addClass(g, 'huicharts-line-tag');
+    g.innerHTML =
+      `<rect fill="${background}" x="-${width/2}" y="-15" rx="${radius}" ry="${radius}" width="${width+10}" height="20""></rect>
+        <text font-size="14" xml:space="preserve" fill="${color}" text-anchor="middle" pointer-events="none">
+          <tspan>${text}</tspan>
+        </text>`;
+    return g;
+  }
+
+  setPosition(path, edge) {
+    let g = path.getElementsByTagName("g");
+    let { position } = this.tag.style;
+    if (g.length) {
+      const startX = edge.startConnector.absolute.x;
+      const endX = edge.endConnector.absolute.x;
+      const startY = edge.startConnector.absolute.y;
+      const endY = edge.endConnector.absolute.y;
+      let xPos = startX + (endX - startX)*position;
+      let yPos = startY + (endY - startY)*position;
+      attr(g[0], 'transform', `translate(${xPos}, ${yPos})`)
+      attr(g[0], 'display', 'block')
+    }
+  }
+  
+  measureTextWidth(text, font) {
+    // 创建一个canvas元素用于测量文本
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+ 
+    // 设置文本的样式
+    context.font = font || '16px Arial';
+ 
+    // 测量文本
+    const metrics = context.measureText(text);
+    return metrics.width;
+}
+}

package/src/components/charts/framework/module/line/bufferRender.js

@@ -0,0 +1,74 @@
+/**
+ * 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.
+ *
+ */
+// 局部渲染方法
+function bufferRender(lineInstance, params, gContainer, canvasContainterRect) {
+  let lineDom;
+  if (lineInstance.hasRender) return;
+  if (isInBuffer(lineInstance, params, canvasContainterRect)) {
+    lineDom = lineInstance.render();
+    gContainer.appendChild(lineDom);
+  };
+  return lineDom;
+};
+
+// 判断节点是否在缓冲区内
+function isInBuffer(line, params, canvasContainterRect) {
+  let { offset, scale, lastScale, center, type } = params;
+  // TODO 之后可以放到option里面
+  const buffer = 1; // 缓冲区是容器大小的1.5倍 
+  // 缓冲区的长宽
+  const bufferWidth = canvasContainterRect.width * buffer;
+  const bufferHeight = canvasContainterRect.height * buffer;
+
+  // 缓冲区的边界
+  const bufferLeft = (canvasContainterRect.width - bufferWidth) / 2;
+  const bufferTop = (canvasContainterRect.height - bufferHeight) / 2;
+  const bufferRight = bufferLeft + bufferWidth;
+  const bufferBottom = bufferTop + bufferHeight;
+
+  let { startConnector, endConnector, lineRealX, lineRealY } = line.data;
+  // 连线起始点坐标算出长宽
+  const startPoint = startConnector.absolute;
+  const endPoint = endConnector.absolute;
+  const width = endPoint.x - startPoint.x;
+  const height = endPoint.y - startPoint.y;
+
+  if (type === 'move') lastScale = scale;
+
+  // 计算连线初始点相当于上一次点的偏移量
+  let lineOffset = {
+    x: offset.x + ((lineRealX || startPoint.x) - center.x) / lastScale * (scale - lastScale),
+    y: offset.y + ((lineRealY || startPoint.y) - center.y) / lastScale * (scale - lastScale),
+  };
+
+  lineRealX = (lineRealX || startPoint.x) + lineOffset.x;
+  lineRealY = (lineRealY || startPoint.y) + lineOffset.y;
+
+  //  存储连线起始坐标 方便下次使用
+  line.data.lineRealX = lineRealX;
+  line.data.lineRealY = lineRealY;
+
+  // 连线的起始点坐标
+  const startPointX = lineRealX;
+  const startPointY = lineRealY;
+  const endPointX = lineRealX + width * scale;
+  const endPointY = lineRealY + height * scale;
+
+  // 检查起始点是不是都在缓冲区
+  const allCornersOutside = (
+    (startPointX < bufferLeft || startPointX > bufferRight || startPointY < bufferTop || startPointY > bufferBottom) &&
+    (endPointX < bufferLeft || endPointX > bufferRight || endPointY < bufferTop || endPointY > bufferBottom)
+  );
+  return !allCornersOutside;
+}
+
+export default bufferRender;