@ebiz/designer-components 0.0.47 → 0.0.49

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

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

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

@@ -1,29 +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';
-// 自定义渲染线
-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

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

@@ -1,24 +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.
- *
- */
-.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
-}