@ebiz/designer-components 0.0.47 → 0.0.49

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

@@ -1,125 +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 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

@@ -1,299 +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 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

@@ -1,61 +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 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

@@ -1,74 +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.
- *
- */
-// 局部渲染方法
-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;