@ebiz/designer-components 0.0.18

package/src/components/charts/framework/module/line/cross/pathPoints.js

@@ -0,0 +1,233 @@
+/**
+ * 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 { add, offset, vectorFromPoints, isParallel, dot, getUnitVector, anotherOne, isOrthogonalLine } from "./vectorUtil";
+
+/*
+* 矩形节点延伸线方向，top:x坐标不变，y坐标减少延伸线的一个距离，定义为[0,-1]
+* 描述方向 使用svg 平面轴 上：[0,-1] 右：[1,0] 下 [0,1] 左 [-1,0]
+*/
+const DIRECTION_TYPE = {
+  top: [0, -1],
+  right: [1, 0],
+  bottom: [0, 1],
+  left: [-1, 0],
+}
+
+// 点的矢量方向，转成top等语义化方向
+const DIRECTION_NAME = {
+  '0,-1': 'top',
+  '1,0': 'right',
+  '0,1': 'bottom',
+  '-1,0': 'left',
+  '0,0': 'right'
+}
+
+// 画圆弧拐点时的矢量
+const OFFSET_RADIUS = {
+  top: [0, 1],
+  right: [-1, 0],
+  bottom: [0, -1],
+  left: [1, 0],
+}
+
+// 默认连线数据
+const DEFAULT_OPTION = {
+  startPoint: [0, 0],
+  startDirection: 'right',
+  startDistance: 10,
+  endPoint: [100, 100],
+  endDirection: 'left',
+  endDistance: 10,
+}
+//中线智能 路由-遗留
+
+// path 指除了延申线之外的连接线
+function setPoints(data, option = { turnRatio: 0.5, radius: 0 }) {
+  let lineData = Object.assign({}, DEFAULT_OPTION, data);
+  let { startPoint, startDistance, endPoint, endDistance } = lineData;
+  let startDirection = DIRECTION_TYPE[lineData.startDirection];
+  let endDirection = DIRECTION_TYPE[lineData.endDirection];
+  let points = [];
+  
+  // 起点和终点的x或者y轴相同时，只需要画一条线
+  if (isOrthogonalLine(startPoint, endPoint)) {
+    points.push({
+      position: startPoint,
+      direction: 'start'
+    }, {
+      position: endPoint,
+      direction: 'end'
+    })
+  } else {
+    
+    // 1. 获得入方向和出方向 ——参数中已获得; 当endDirection 未定义时
+    if (!endDirection) {
+      let startToEnd = vectorFromPoints(startPoint, endPoint)
+      if (Math.abs(startToEnd[0]) > Math.abs(startToEnd[1])) {
+        endDirection = [startToEnd[0] / Math.abs(startToEnd[0]), 0]
+      } else {
+        endDirection = [0, startToEnd[1] / Math.abs(startToEnd[1])]
+      }
+    }
+    
+    // 起点和终点偏移量（延伸的x和y轴距离）
+    let startOffset = offset(startDirection, startDistance);
+    let endOffset = offset(endDirection, endDistance);
+    
+    // 2. 正交线起点和终点
+    let pathStartPoint = add(startPoint, startOffset);
+    let pathEndPoint = add(endPoint, endOffset);
+
+    // 入口方向需要取反（入口方向例如是right:[1,0],计算偏移量时，应该是从右到左进入，所以应该是[-1,0]）
+    endDirection = offset(endDirection, -1);
+
+    // path的水平向量
+    let pathHorizenVec = [pathEndPoint[0] - pathStartPoint[0], 0];
+    
+    // path的竖直向量
+    let pathVerticalVec = [0, pathEndPoint[1] - pathStartPoint[1]];
+
+    // 3.计算path 的起始方向：起点延伸方向，若与垂直向量或者水平向量当中的一项，同方向，则以起点延伸线方向画线，否则取垂直方向为起始方向。
+    let comp = [pathHorizenVec, pathVerticalVec]
+    let pathStart;
+
+    // 正交线起点的平行向量
+    let startParallelVec = comp.find(vec => isParallel(vec, startDirection));
+
+    // 如果点积为正，则两向量同向；如果为负，则反向；如果为零，则两向量正交
+    if (dot(startParallelVec, startDirection) > 0) {
+      
+      // 延伸线同方向继续延伸
+      pathStart = startParallelVec
+    } else {
+      
+      // 延伸线垂直方向开始画线
+      pathStart = anotherOne(comp, startParallelVec);
+    }
+
+    // 4.计算path 的末方向： 两方向与末方向平行的一项，如果是同向则取之，反之则取垂直方向的一项
+    let pathEnd;
+    let endParallelVec = comp.find(vec => isParallel(vec, endDirection));
+    if (dot(endParallelVec, endDirection) > 0) {
+      pathEnd = endParallelVec
+    } else {
+      pathEnd = anotherOne(comp, endParallelVec);
+
+    }
+    
+    // 5.如果path的起末为同方向，则分为2个拐角，否则为1个拐角，即出和入平行分为2个拐角，垂直需要1个拐角
+    let splitNum = dot(pathStart, pathEnd) > 0 ? 2 : 1;
+
+    // 中间连线的向量
+    let pathMiddle = anotherOne(comp, pathEnd);
+
+    // 6.计算path中的转折点 返回数据中加入了单位向量
+    points.push({
+      position: startPoint,
+      direction: 'start'
+    }, {
+      position: pathStartPoint,
+      direction: directionText(startDirection)
+    });
+    if (splitNum == 1) {
+      let point1 = add(pathStartPoint, pathStart)
+      let dir1 = getUnictVecByStraight(pathStart)
+      let point2 = add(point1, pathEnd)
+      let dir2 = getUnictVecByStraight(pathEnd)
+      points.push({
+        position: point1,
+        direction: directionText(dir1)
+      }, {
+        position: point2,
+        direction: directionText(dir2)
+      })
+    } else {
+      let point1 = add(pathStartPoint, offset(pathStart, option.turnRatio));
+      let dir1 = getUnictVecByStraight(pathStart);
+      let point2 = add(point1, pathMiddle);
+      let dir2 = getUnictVecByStraight(pathMiddle);
+      let point3 = add(point2, offset(pathEnd, 1 - option.turnRatio));
+      let dir3 = getUnictVecByStraight(pathEnd)
+      if (option.radius) {
+        let directionVector1 = OFFSET_RADIUS[directionText(dir1)];
+        let directionVector2 = OFFSET_RADIUS[directionText(dir2)];
+        point1 = add(point1, offset(directionVector1, option.radius))
+        point2 = add(point2, offset(directionVector2, option.radius))
+        points.push({
+          position: point1,
+          direction: directionText(dir1)
+        }, {
+          
+          // 增加的圆弧点
+          position: point1,
+          direction: getCorner(dir1, dir2)
+        }, {
+          position: point2,
+          direction: directionText(dir2),
+        }, {
+          
+          // 增加的圆弧点
+          position: point2,
+          direction: getCorner(dir2, dir3),
+        }, {
+          position: point3,
+          direction: directionText(dir3)
+        })
+      } else {
+        points.push({
+          position: point1,
+          direction: directionText(dir1)
+        }, {
+          position: point2,
+          direction: directionText(dir2),
+        }, {
+          position: point3,
+          direction: directionText(dir3)
+        })
+      }
+    }
+    points.push({
+      position: endPoint,
+      direction: 'end'
+    });
+  }
+  
+  // 返回path所需要的所有点的坐标信息
+  return points.filter(v => v.direction !== false);
+}
+
+// 获取竖直和水平向量的单位向量
+function getUnictVecByStraight(vector) {
+  if (vector[0] == 0 && vector[1] == 0)
+    return [0, 0]
+  else if (vector[0] == 0)
+    return [0, vector[1] / Math.abs(vector[1])]
+  else if (vector[1] == 0)
+    return [vector[0] / Math.abs(vector[0]), 0]
+  else
+    return getUnitVector(vector)
+}
+
+// 将向量坐标转成语义化的方向信息
+function directionText(vector) {
+  let text = vector.join(',').replace('-0', '0');
+  return DIRECTION_NAME[text]
+}
+
+// 拐点方向
+function getCorner(startDir, endDir) {
+  const startStr = directionText(startDir).charAt(0).toUpperCase();
+  const endStr = directionText(endDir).charAt(0).toUpperCase();
+  return startStr + endStr
+}
+
+export default setPoints;

package/src/components/charts/framework/module/line/cross/vectorUtil.js

@@ -0,0 +1,67 @@
+/**
+ * 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 const add = function (vectorA, vectorB) {
+  return [vectorA[0] + vectorB[0], vectorA[1] + vectorB[1]]
+}
+
+// 向量乘以常量系数
+export const offset = function (vector, k) {
+  return [vector[0] * k, vector[1] * k]
+}
+
+// 两点之间的向量，a点指向b点
+export const vectorFromPoints = function (pointA, pointB) {
+  return [pointB[0] - pointA[0], pointB[1] - pointA[1]]
+}
+
+// 判断向量是否平行
+export const isParallel = function (vectorA, vectorB) {
+  if (vectorA[0] * vectorB[1] === vectorA[1] * vectorB[0]) return true;
+  return false;
+}
+
+// 向量点积
+export const dot = function (vectorA, vectorB) {
+  return vectorA[0] * vectorB[0] + vectorA[1] * vectorB[1];
+}
+
+// 向量叉乘
+export const cross = function (vectorA, vectorB) {
+  return vectorA[0] * vectorB[1] - vectorA[1] * vectorB[0];
+}
+
+// 向量夹角
+export const angleFrom = function (vector) {
+  return Math.acos(vector[0] / Math.sqrt(vector[0] * vector[0] + vector[1] * vector[1]))
+}
+
+// 获取向量的单位向量
+export const getUnitVector = function (vector) {
+  var m = Math.sqrt(vector[0] * vector[0] + vector[1] * vector[1])
+  return [vector[0] / m, vector[1] / m]
+}
+
+// 判断向量 x,y 坐标相等
+export const equals = function (vector, target) {
+  return vector[0] === target[0] && vector[1] === target[1]
+}
+
+// 判断向量 x或者y 坐标相等，即垂直线或者水平线
+export const isOrthogonalLine = function (vector, target) {
+  return vector[0] === target[0] || vector[1] === target[1]
+}
+
+// 两个元素的数组中的另一个
+export const anotherOne = function (comp, a) {
+  return comp.find(v => v != a)
+}

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

@@ -0,0 +1,29 @@
+/**
+ * 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';
+// 自定义渲染线
+function Customize(params) {
+  const { data, option, ArrowManager, svgContainer } = params
+  data.edges.forEach(edge => {
+    const lineInstance = new Line(edge, ArrowManager, option);
+    let path = lineInstance.render();
+    // 绑定连线由短变长的动效
+    lineInstance.animation({
+      type: 'grow',
+      duration: option.duration || 500,
+      path
+    });
+    svgContainer.appendChild(path);
+  })
+};
+
+export default Customize;

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

@@ -0,0 +1,260 @@
+/**
+ * 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 Tag from './Tag.js';
+import Round from './type/Round.js';
+import Direct from './type/Direct.js';
+import Bezier from './type/Bezier.js';
+import Circle from './type/Circle.js';
+import Ellipse from './type/Ellipse.js';
+import Animation from './Animation.js';
+import { attr, addClass, createDom } from '../../../util/dom.js';
+
+const TYPE_ROUND = 'Round';// 折线
+const TYPE_BEZIER = 'Bezier';// 贝塞尔曲线
+const TYPE_DIRECT = 'Direct'; // 直线
+const TYPE_CIRCLE = 'Circle'; // 半圆
+const TYPE_ELLIPSE = 'Ellipse'; // 椭圆
+
+const EVENT_CLICK = 'click';// 点击事件
+const EVENT_HOVER = 'hover'; // hover事件
+const EVENT_MOUSEENTER = 'mouseenter'; // 鼠标移入事件
+const EVENT_MOUSELEAVE = 'mouseleave'; // 鼠标移出事件
+
+const LINE_STATUS_DEFAULT = 'default';
+const LINE_STATUS_HOVER = 'hover';
+const LINE_STATUS_ACTIVE = 'active';
+const LINE_STATUS_DISABLE = 'disable';
+const TAG_DEFAULT = {
+  background: '#656565',
+  color: '#fff',
+  radius: '3',
+  position: 0.5
+};
+
+const LineFactory = {
+  [TYPE_ROUND]: Round,
+  [TYPE_DIRECT]: Direct,
+  [TYPE_BEZIER]: Bezier,
+  [TYPE_CIRCLE]: Circle,
+  [TYPE_ELLIPSE]: Ellipse
+}
+
+export default class Line {
+  // 标签管理器
+  TagManager;
+  // 线动效管理器
+  AnimationManager = {};
+  // 连线是否已渲染
+  hasRender;
+
+  constructor(data, ArrowManager, option) {
+    this.data = data;
+    this.lineOption = data.lineOption;
+    this.style = data.lineOption.style;
+    this.ArrowManager = ArrowManager;
+    this.option = option;
+    this.hasRender = false;
+  }
+
+  // 创建连线dom
+  create(d) {
+    let g = createDom('g');
+    let path = createDom('path');
+    let id = this.data.id;
+    attr(path, 'startNode', this.data.start);
+    attr(path, 'endNode', this.data.end);
+    attr(path, 'd', d);
+    attr(path, 'id', id);
+    attr(path, 'stroke', this.style.color);
+    addClass(path, 'huicharts-line');
+    addClass(g, 'huicharts-line-wrap');
+    if (this.style.mode === 'dash') {
+      attr(path, 'stroke-dasharray', 5);
+    }
+    attr(path, 'stroke-width', this.style.width + 'px');
+    g.appendChild(path);
+    // 线动效需要1s的时间，延时生成箭头(虚线无生长动效，无需延时生成箭头)
+    if (this.style.mode === 'dash') {
+      this.creatMarker(path);
+    }else{
+      setTimeout(() => {
+        this.creatMarker(path);
+      }, 1000);
+    }
+    // 创建线的热区，便于hover、click触发
+    this.createTriggerPath(path, g);
+    // 创建tag标签
+    this.createTag(this.data, g);
+    return g;
+  }
+
+  createTriggerPath(path, g) {
+    let triggerPath = path.cloneNode(true);
+    let removeAttr = ['id', 'stroke', 'stroke-width', 'marker-end', 'marker-start'];
+    // 循环遍历并删除属性
+    removeAttr.forEach(function (attr) {
+      triggerPath.removeAttribute(attr);
+    });
+    addClass(triggerPath, 'huicharts-line-trigger');
+    g.appendChild(triggerPath);
+  }
+
+  // 创建Tag标签
+  createTag(edge, g) {
+    if (!edge.tag) return;
+    let defaultStyle = Object.assign({}, this.lineOption.style.tag, edge.tag);
+    edge.tag.style = Object.assign({}, TAG_DEFAULT, defaultStyle);
+    this.TagManager = new Tag(edge);
+    let tagDom = this.TagManager.render();
+    g.appendChild(tagDom);
+    this.TagManager.setPosition(g, edge);
+  }
+
+  // 创建首尾箭头
+  creatMarker(path) {
+    // 用户配置了startMarker，则给path增加marker-start标签，并使用对应的url
+    const startMarker = this.ArrowManager.lineOption.startMarker;
+    // 用户配置了endMarker，则给path增加marker-end标签，并使用对应的url
+    const endMarker = this.ArrowManager.lineOption.endMarker;
+    this.ArrowManager.hasStartMarker && this.ArrowManager.render(path, startMarker, 'start');
+    this.ArrowManager.hasEndMarker && this.ArrowManager.render(path, endMarker, 'end');
+  }
+
+  // 拼接连线信息
+  render() {
+    const CreatorClass = LineFactory[this.lineOption.type || TYPE_DIRECT];
+    this.lineCreator = new CreatorClass(this.data)
+    const path = this.lineCreator.creatPath(this.data, this.option);
+    // 设置节点为已渲染
+    this.hasRender = true;
+    this.AnimationManager = new Animation();
+    this.path = this.create(path)
+    return this.path;
+  }
+
+  // 连线绑定事件
+  bindEvent(path, event, callback) {
+    let linePath = path.firstChild;
+    let self = this;
+    if (event === EVENT_CLICK) {
+      path.addEventListener(EVENT_CLICK, function () {
+        if (self.style.active) {
+          self.isClick = true;
+          self.setActiveStatus(linePath);
+        }
+        callback && callback(linePath)
+      });
+    } else if (event === EVENT_HOVER) {
+      path.addEventListener(EVENT_MOUSEENTER, function () {
+        if (self.style.hover && !self.isClick) {
+          self.setHoverStatus(linePath);
+        }
+        callback && callback(linePath)
+      });
+      path.addEventListener(EVENT_MOUSELEAVE, function () {
+        if (self.style.hover && !self.isClick) {
+          self.setDefaultStatus(linePath);
+        }
+      });
+    }
+  }
+
+  setDefaultStatus(path) {
+    this.setStatus(path, LINE_STATUS_DEFAULT);
+  }
+
+  setActiveStatus(path) {
+    this.setStatus(path, LINE_STATUS_ACTIVE);
+  }
+
+  setHoverStatus(path) {
+    this.setStatus(path, LINE_STATUS_HOVER);
+  }
+
+  setDisableStatus(path) {
+    this.setStatus(path, LINE_STATUS_DISABLE);
+  }
+
+  // 设定连线到指定状态
+  setStatus(path, status) {
+    if (status === LINE_STATUS_DEFAULT) {
+      attr(path, 'stroke', this.style.color);
+      attr(path, 'stroke-width', this.style.width + 'px');
+    } else {
+      this.style[status].color && attr(path, 'stroke', this.style[status].color);
+      this.style[status].width && attr(path, 'stroke-width', this.style[status].width + 'px');
+    }
+    this.ArrowManager.hasStartMarker && this.ArrowManager.setMarker(path, 'start', status);
+    this.ArrowManager.hasEndMarker && this.ArrowManager.setMarker(path, 'end', status);
+  }
+
+  // 连线动效
+  animation(option) {
+    option.color && this.ArrowManager.changeMarkerColor(option.path, option.color);
+    this.AnimationManager.start(option);
+  }
+
+  // 更新连线
+  update(line) {
+    const lineDom = document.getElementById(line.id);
+    if (!lineDom) return;
+    let dasharray = lineDom.getTotalLength();
+    const triggerLine = lineDom.nextSibling;
+    const CreatorClass = LineFactory[line.lineOption.type || TYPE_DIRECT];
+    this.lineCreator = new CreatorClass(this.data)
+    const path = this.lineCreator.creatPath(line, this.option);
+    attr(lineDom, 'd', path);
+    attr(lineDom, 'stroke-dasharray', dasharray);
+    attr(lineDom, 'stroke', line.lineOption.style.color);
+    if (line.lineOption.style.mode === 'dash') {
+      attr(lineDom, 'stroke-dasharray', 5);
+    }
+    attr(lineDom, 'stroke-width', line.lineOption.style.width + 'px');
+    attr(triggerLine, 'd', path);
+    this.updateTransPath(line, path);
+    this.updateTag(lineDom,line);
+  }
+  
+  // 隐藏连线,一般用于折叠后，终点折叠到起点的另一边后，线仍然显示在页面中的问题
+  hide(line) {
+    const lineDom = document.getElementById(line.id);
+    if (!lineDom) return;
+    const triggerLine = lineDom.nextSibling;
+    attr(lineDom, 'd', '');
+    attr(triggerLine, 'd', '');
+  }
+  
+  // 更新流光的路径
+  updateTransPath(line, path) {
+    let transDom = document.getElementById(`${line.id}-trans-streamer`);
+    if (!transDom) return;
+    for (var i = 0; i < transDom.children.length; i++) {
+      var child = transDom.children[i];
+      child.style.offsetPath = `path("${path}")`;
+    }
+  }
+
+  // 更新tag标签位置
+  updateTag(line, lineData) {
+    const g = line.parentNode;
+    this.TagManager?.setPosition(g, lineData);
+  }
+
+  // 删除连线
+  unmount(id) {
+    const line = document.getElementById(id);
+    if (line) {
+      line.parentNode.remove();
+      this.AnimationManager.unmount()
+    }
+  }
+}

package/src/components/charts/framework/module/line/index.less

@@ -0,0 +1,24 @@
+/**
+ * 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.
+ *
+ */
+.huicharts-line{
+  fill: transparent;
+  stroke-linejoin: round;
+  pointer-events: stroke;
+  stroke-dashoffset: 0;
+}
+
+.huicharts-line-trigger {
+  cursor: pointer;
+  stroke: transparent;
+  stroke-linecap: round;
+  stroke-width: 10
+}