@ebiz/designer-components 0.0.48 → 0.0.50

package/src/components/charts/components/RiverChart/Belt.js

@@ -1,181 +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 { renderSvgDom, getPathD, getSmoothPathD } from './util.js';
-
-// 河流的连接带
-export default class Belt {
-  // 连接带的名字
-  name;
-  //  起点信息
-  start;
-  // 终点信息
-  end;
-  // 当前连接带的位置
-  isLeft;
-  颜色;
-  color;
-  // 归属节点是否有子节点
-  hasNodes;
-  // 图表配置
-  config;
-  // 归属节点
-  belongNode;
-
-  constructor(node, config, isLeft) {
-    this.belongNode = node;
-    this.config = config;
-    this.isLeft = isLeft;
-    this.hasNodes = !!(node.initalNode.nodes && node.initalNode.nodes.length > 0);
-  }
-
-  init(name, start, end) {
-    this.setName(name);
-    this.setStart(start);
-    this.setEnd(end);
-  }
-
-  setName(name) {
-    this.name = name;
-  }
-
-  setStart(start) {
-    this.start = start;
-  }
-
-  setEnd(end) {
-    this.end = end;
-  }
-
-  //  当前的belongNode没有父子节点，颜色取决于当前belongNode.nodes的首尾node颜色
-  setCommonColor() {
-    const { statusColor, background } = this.config;
-    let color = background;
-    if (this.hasNodes) {
-      const len = this.belongNode.initalNode.nodes.length;
-      const itemNode = this.isLeft ? this.belongNode.initalNode.nodes[0] : this.belongNode.initalNode.nodes[len - 1];
-      color = statusColor[itemNode.status];
-    }
-    this.color = color;
-  }
-
-  setGradientColor(parentNode) {
-    const { statusColor, background } = this.config;
-    const colorList = [];
-    const initalNode = this.belongNode.initalNode;
-    let startColor = background,
-      endColor = background;
-    if (initalNode.nodes && initalNode.nodes.length !== 0) {
-      const itemNode = initalNode.nodes[0];
-      endColor = statusColor[itemNode.status];
-    }
-    const parentInitalNode = parentNode.initalNode;
-    if (parentInitalNode.nodes && parentInitalNode.nodes.length !== 0) {
-      const len = parentInitalNode.nodes.length;
-      const itemNode = parentInitalNode.nodes[len - 1];
-      startColor = statusColor[itemNode.status];
-    }
-    const start = {
-      percent: '0%',
-      color: startColor,
-    };
-    const end = {
-      percent: '100%',
-      color: endColor,
-    };
-    colorList.push(start);
-    colorList.push(end);
-    this.color = colorList;
-  }
-
-  getBeltPoint(startLen) {
-    const endLen = this.end.value;
-    // 绘画的坐标点
-    let point;
-    if (this.config.smoothingCurves) {
-      point = {
-        // 连线的起点
-        x1: this.start.x,
-        y1: this.start.y + startLen / 2,
-        // 连线的终点
-        x3: this.end.x,
-        y3: this.end.y + endLen / 2,
-      };
-    } else {
-      point = {
-        // 前置节点起点坐标
-        x1: this.start.x,
-        y1: this.start.y,
-        // 前置节点终点坐标
-        x2: this.start.x,
-        y2: this.start.y + startLen,
-        // 后置节点终点坐标
-        x3: this.end.x,
-        y3: this.end.y,
-        // 后置节点终点坐标
-        x4: this.end.x,
-        y4: this.end.y + endLen,
-      };
-    }
-    return point;
-  }
-
-  getLinearGradientfillColor(svgBeltGradientDefs) {
-    // 渐变的属性
-    const lineGradientAttributes = {
-      id: `linearGradient_${this.name}_node`,
-      x2: '100%',
-      y2: '0%',
-			x1: '0%',
-      y1: '0%',
-    };
-    const lineGradientDom = renderSvgDom('linearGradient', lineGradientAttributes);
-    // 生成stop
-    this.color.forEach(el => {
-      const stopAttributes = {
-        offset: el.percent,
-        'stop-opacity': 0.2,
-				'stop-color': el.color,
-      };
-      const stopDom = renderSvgDom('stop', stopAttributes);
-      lineGradientDom.appendChild(stopDom);
-    });
-    svgBeltGradientDefs.appendChild(lineGradientDom);
-    return `url(#linearGradient_${this.name}_node)`;
-  }
-
-  render(svgBeltPathGroup, svgBeltGradientDefs) {
-    const startLen = this.start.value;
-    const { smoothingCurves } = this.config;
-    const point = this.getBeltPoint(startLen);
-    // 获取路径
-    const path = smoothingCurves ? getSmoothPathD(point, startLen) : getPathD(point);
-    const isNotgarident = typeof this.color === 'string';
-    let fillColor = this.color;
-    if (!isNotgarident) {
-      fillColor = this.getLinearGradientfillColor(svgBeltGradientDefs);
-    }
-    // 不是渐变色
-    const pathAttributes = {
-      id: `link_${this.name}_${this.isLeft ? 'left' : 'right'}`,
-      fill: fillColor,
-      d: path,
-      opacity: isNotgarident ? 0.2 : 1,
-    };
-    if (smoothingCurves && !(point.y1 === point.y3)) {
-      pathAttributes['fill'] = 'none';
-      pathAttributes['stroke'] = fillColor;
-      pathAttributes['stroke-width'] = startLen;
-    }
-    const pathDom = renderSvgDom('path', pathAttributes);
-    svgBeltPathGroup.appendChild(pathDom);
-  }
-}

package/src/components/charts/components/RiverChart/Manager.js

@@ -1,173 +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 Node from './Node';
-import { renderSvgDom } from './util.js';
-
-export default class Manager {
-  // svg容器
-  svgContainer;
-  // 节点的容器
-  nodeContainer;
-  //   配置项
-  config;
-  //  节点数据
-  initalData;
-  //   河流节点
-  nodes;
-  //   连接带节点
-  belts;
-  // 数据是否合法
-  legal = true;
-  // svg节点容器
-  svgNodeGroup;
-  // svg渐变色容器
-  svgNodeGradientDefs;
-  // svg连接带容器
-  svgBeltPathGroup;
-  // svg连接带渐变色容器
-  svgBeltGradientDefs;
-
-  constructor(svgContainer, nodeContainer, config, initalData) {
-    this.svgContainer = svgContainer;
-    this.nodeContainer = nodeContainer;
-    this.config = config;
-    this.initalData = initalData;
-    this.nodes = [];
-    this.belts = [];
-    this.checkInitalData();
-    this.initSvgGroupContainer();
-  }
-
-  initSvgGroupContainer() {
-    if (!this.legal) return;
-    // 节点组
-    const nodeGroup = renderSvgDom('g', { id: 'rc_nodeGroup' });
-    // 用来包裹path的组
-    const pathGroup = renderSvgDom('g', { id: 'rc_pathGroup' });
-    // 用来包裹node渐变色的组
-    const nodeGradientGroup = renderSvgDom('g', { id: 'rc_nodeGradientGroup' });
-    // 用来包裹link渐变色的组
-    const linkGradientGroup = renderSvgDom('g', { id: 'rc_linkGradientGroup' });
-    // 放置node渐变色def
-    const nodeGradientDefs = renderSvgDom('defs');
-    // 放置link渐变色def
-    const linkGradientDefs = renderSvgDom('defs');
-    nodeGradientGroup.appendChild(nodeGradientDefs);
-    linkGradientGroup.appendChild(linkGradientDefs);
-    this.svgContainer.appendChild(nodeGroup);
-    this.svgContainer.appendChild(pathGroup);
-    this.svgContainer.appendChild(nodeGradientGroup);
-    this.svgContainer.appendChild(linkGradientGroup);
-    this.svgNodeGroup = nodeGroup;
-    this.svgNodeGradientDefs = nodeGradientDefs;
-    this.svgBeltPathGroup = pathGroup;
-    this.svgBeltGradientDefs = linkGradientDefs;
-  }
-
-  // 检查数据是否合规
-  checkInitalData() {
-    if (!this.initalData) return (this.legal = false);
-    const { nodes, links } = this.initalData;
-    if (!nodes || !links) return (this.legal = false);
-    if ((nodes && nodes.length === 0) || (links && links.length === 0)) this.legal = false;
-  }
-
-  createNode(initialNode) {
-    return new Node(initialNode, this.config, this.initalData, this.belts);
-  }
-
-  addNode(node) {
-    this.nodes.push(node);
-  }
-
-  findInitalNode(name) {
-    return this.initalData.nodes.find(item => item.name === name);
-  }
-
-  findNode(name) {
-    return this.nodes.find(item => item.name === name);
-  }
-
-  // 检查节点是否已存在this.nodes,没有就新建节点
-  checkNodeExist(name, initalNode) {
-    let targetNode = this.findNode(name);
-    if (!targetNode) {
-      const initNode = initalNode ? initalNode : this.findInitalNode(name);
-      const newNode = this.createNode(initNode);
-      this.addNode(newNode);
-      targetNode = newNode;
-    }
-    return targetNode;
-  }
-
-  // 增加节点的依赖关系
-  addNodeDependency(dependency, node, isParent = true) {
-    if (dependency && dependency.length > 0) {
-      dependency.forEach(name => {
-        const targetNode = this.checkNodeExist(name);
-        isParent ? node.setParent(targetNode) : node.setChildren(targetNode);
-      });
-    }
-  }
-
-  addNodeParent(parentName, node) {
-    this.addNodeDependency(parentName, node);
-  }
-
-  addNodeChildren(childrenName, node) {
-    this.addNodeDependency(childrenName, node, false);
-  }
-
-  init() {
-    if (!this.legal) return;
-    this.initNodes();
-    this.initBelts();
-  }
-
-  initNodes() {
-    this.initalData.nodes.forEach(initialNode => {
-      const node = this.checkNodeExist(initialNode.name, initialNode);
-      const parentName = [];
-      const childrenName = [];
-      this.initalData.links.forEach(link => {
-        if (link.target === initialNode.name) {
-          parentName.push(link.source);
-        }
-        if (link.source === initialNode.name) {
-          childrenName.push(link.target);
-        }
-      });
-      this.addNodeParent(parentName, node);
-      this.addNodeChildren(childrenName, node);
-    });
-  }
-
-  initBelts() {
-    this.nodes.forEach(node => {
-      node.initBelts();
-    });
-  }
-
-  renderNodes() {
-    this.nodes.forEach(node => node.render(this.nodeContainer, this.svgNodeGroup, this.svgNodeGradientDefs));
-  }
-
-  renderBelts() {
-    this.belts.forEach(belt => belt.render(this.svgBeltPathGroup, this.svgBeltGradientDefs));
-  }
-
-  // 绘制节点和连接带
-  render() {
-    this.renderNodes();
-    this.renderBelts();
-  }
-}