@ebiz/designer-components 0.0.18-tj.1

package/src/components/charts/framework/charts/ForceDirectedChart/libs/timer.js

@@ -0,0 +1,121 @@
+/**
+ * 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.
+ *
+ */
+var frame = 0, // is an animation frame pending?
+    timeout = 0, // is a timeout pending?
+    interval = 0, // are any timers active?
+    pokeDelay = 1000, // how frequently we check for clock skew
+    taskHead,
+    taskTail,
+    clockLast = 0,
+    clockNow = 0,
+    clockSkew = 0,
+    clock = typeof performance === "object" && performance.now ? performance : Date,
+    setFrame = typeof window === "object" && window.requestAnimationFrame ? window.requestAnimationFrame.bind(window) : function(f) { setTimeout(f, 17); };
+
+export function now() {
+  return clockNow || (setFrame(clearNow), clockNow = clock.now() + clockSkew);
+}
+
+function clearNow() {
+  clockNow = 0;
+}
+
+export function Timer() {
+  this._call =
+  this._time =
+  this._next = null;
+}
+
+Timer.prototype = timer.prototype = {
+  constructor: Timer,
+  restart: function(callback, delay, time) {
+    if (typeof callback !== "function") throw new TypeError("callback is not a function");
+    time = (time == null ? now() : +time) + (delay == null ? 0 : +delay);
+    if (!this._next && taskTail !== this) {
+      if (taskTail) taskTail._next = this;
+      else taskHead = this;
+      taskTail = this;
+    }
+    this._call = callback;
+    this._time = time;
+    sleep();
+  },
+  stop: function() {
+    if (this._call) {
+      this._call = null;
+      this._time = Infinity;
+      sleep();
+    }
+  }
+};
+
+export function timer(callback, delay, time) {
+  var t = new Timer;
+  t.restart(callback, delay, time);
+  return t;
+}
+
+export function timerFlush() {
+  now(); // Get the current time, if not already set.
+  ++frame; // Pretend we’ve set an alarm, if we haven’t already.
+  var t = taskHead, e;
+  while (t) {
+    if ((e = clockNow - t._time) >= 0) t._call.call(undefined, e);
+    t = t._next;
+  }
+  --frame;
+}
+
+function wake() {
+  clockNow = (clockLast = clock.now()) + clockSkew;
+  frame = timeout = 0;
+  try {
+    timerFlush();
+  } finally {
+    frame = 0;
+    nap();
+    clockNow = 0;
+  }
+}
+
+function poke() {
+  var now = clock.now(), delay = now - clockLast;
+  if (delay > pokeDelay) clockSkew -= delay, clockLast = now;
+}
+
+function nap() {
+  var t0, t1 = taskHead, t2, time = Infinity;
+  while (t1) {
+    if (t1._call) {
+      if (time > t1._time) time = t1._time;
+      t0 = t1, t1 = t1._next;
+    } else {
+      t2 = t1._next, t1._next = null;
+      t1 = t0 ? t0._next = t2 : taskHead = t2;
+    }
+  }
+  taskTail = t0;
+  sleep(time);
+}
+
+function sleep(time) {
+  if (frame) return; // Soonest alarm already set, or will be.
+  if (timeout) timeout = clearTimeout(timeout);
+  var delay = time - clockNow; // Strictly less than if we recomputed clockNow.
+  if (delay > 24) {
+    if (time < Infinity) timeout = setTimeout(wake, time - clock.now() - clockSkew);
+    if (interval) interval = clearInterval(interval);
+  } else {
+    if (!interval) clockLast = clock.now(), interval = setInterval(poke, pokeDelay);
+    frame = 1, setFrame(wake);
+  }
+}

package/src/components/charts/framework/charts/ForceDirectedChart/libs/x.js

@@ -0,0 +1,52 @@
+/**
+ * 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 constant from "./constant.js";
+
+export default function(x) {
+  var strength = constant(0.1),
+      nodes,
+      strengths,
+      xz;
+
+  if (typeof x !== "function") x = constant(x == null ? 0 : +x);
+
+  function force(alpha) {
+    for (var i = 0, n = nodes.length, node; i < n; ++i) {
+      node = nodes[i], node.vx += (xz[i] - node.x) * strengths[i] * alpha;
+    }
+  }
+
+  function initialize() {
+    if (!nodes) return;
+    var i, n = nodes.length;
+    strengths = new Array(n);
+    xz = new Array(n);
+    for (i = 0; i < n; ++i) {
+      strengths[i] = isNaN(xz[i] = +x(nodes[i], i, nodes)) ? 0 : +strength(nodes[i], i, nodes);
+    }
+  }
+
+  force.initialize = function(_) {
+    nodes = _;
+    initialize();
+  };
+
+  force.strength = function(_) {
+    return arguments.length ? (strength = typeof _ === "function" ? _ : constant(+_), initialize(), force) : strength;
+  };
+
+  force.x = function(_) {
+    return arguments.length ? (x = typeof _ === "function" ? _ : constant(+_), initialize(), force) : x;
+  };
+
+  return force;
+}

package/src/components/charts/framework/charts/ForceDirectedChart/libs/y.js

@@ -0,0 +1,52 @@
+/**
+ * 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 constant from "./constant.js";
+
+export default function(y) {
+  var strength = constant(0.1),
+      nodes,
+      strengths,
+      yz;
+
+  if (typeof y !== "function") y = constant(y == null ? 0 : +y);
+
+  function force(alpha) {
+    for (var i = 0, n = nodes.length, node; i < n; ++i) {
+      node = nodes[i], node.vy += (yz[i] - node.y) * strengths[i] * alpha;
+    }
+  }
+
+  function initialize() {
+    if (!nodes) return;
+    var i, n = nodes.length;
+    strengths = new Array(n);
+    yz = new Array(n);
+    for (i = 0; i < n; ++i) {
+      strengths[i] = isNaN(yz[i] = +y(nodes[i], i, nodes)) ? 0 : +strength(nodes[i], i, nodes);
+    }
+  }
+
+  force.initialize = function(_) {
+    nodes = _;
+    initialize();
+  };
+
+  force.strength = function(_) {
+    return arguments.length ? (strength = typeof _ === "function" ? _ : constant(+_), initialize(), force) : strength;
+  };
+
+  force.y = function(_) {
+    return arguments.length ? (y = typeof _ === "function" ? _ : constant(+_), initialize(), force) : y;
+  };
+
+  return force;
+}

package/src/components/charts/framework/charts/GridChart/index.js

@@ -0,0 +1,174 @@
+/**
+ * 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 merge from '../../../util/merge';
+import Relation from '../../core/Relation';
+import LineManager from '../../module/line/Manager';
+import NodeManager from '../../module/node/Manager';
+import { CHART_TYPE } from '../../../util/constants';
+
+const NODE_WIDTH = 100;
+const NODE_HEIGHT = 50;
+
+export default class GridChart extends Relation {
+    static name = CHART_TYPE.GRID
+    // 图表渲染容器
+    dom;
+    // 图表外部传入数据
+    optionData;
+    // 图表nodes+edges格式数据
+    relationData;
+    // 图表容器边距
+    padding = 30;
+    // 图表最外层容器
+    container;
+    // 图表svg元素容器
+    svgContainer;
+    // 图表html元素容器
+    htmlContainer;
+    // 图表容器的宽高变化监听器
+    resizeObserver = null;
+    // 连线管理器
+    lineManager;
+    // 节点管理器
+    nodeManager;
+    // 连接点管理器
+    connectorManager;
+
+    constructor() {
+        super();
+        this.dom = null;
+        this.option = null;
+        this.resizeObserver = null;
+    }
+
+    // 初始化图表渲染容器
+    init(dom) {
+        this.dom = dom;
+    }
+
+    // 初始化图表渲染配置
+    setOption(option) {
+        super.setOption(option);
+    }
+
+    // 图表渲染
+    render() {
+        super.render();
+        this.setDefaultLayout(this.option);
+        this.createNodes();
+        this.createLines();
+        this.onBufferRender();
+        this.setResizeObserver();
+        this.renderCallBack && this.renderCallBack(this);
+    }
+
+    // 设置默认布局
+    setDefaultLayout(option) {
+        option.layout = merge({
+            nodeShape: 'circle',
+        }, option.layout);
+    }
+
+    // 根据节点大小和关系，计算布局，创建和渲染节点
+    createNodes() {
+        this.nodeManager = new NodeManager(this.option, this.htmlContainer);
+        this.setNodeSize(this.option);
+        this.nodeManager.layout();
+        this.nodeManager.render();
+        this.relationData = this.nodeManager.getData();
+    }
+
+    // 补充宽高信息到节点数据上
+    setNodeSize(option) {
+        option.data.nodes.forEach(node => {
+            node.width = node.width || option?.node?.width || NODE_WIDTH;
+            node.height = node.height || option?.node?.height || NODE_HEIGHT;
+        })
+    }
+
+    // 创建连线
+    createLines() {
+        this.lineManager = new LineManager(this.option, this.svgContainer, this);
+        this.lineManager.layout(this.nodeManager);
+        this.lineManager.render();
+
+    }
+
+    // 图表渲染完成时回调
+    onRendered(callback) {
+        this.renderCallBack = callback;
+    }
+
+    // 图表刷新，刷新配置项
+    refresh(option) {
+        // TODO 图例的重新渲染还没做  
+        // TODO 节点的数据变化还没做
+        option.layout = merge({ nodeShape: 'circle' }, option.layout);
+        this.setDefaultLayout(option);
+        this.setNodeSize(option);
+        this.nodeManager.relayout(option);
+        this.nodeManager.refresh(option);
+
+        // 线随着node节点时刻变化位置
+        // this.lineManager.refresh(option);
+
+        // 连线删除后重新绘制
+        this.lineManager.reCreate(this.nodeManager,option);
+
+        // 每一帧需要刷新连线的时候，调用 this.nodeManagerget.CurrentPosition（）；
+        // option.animation.duration
+
+
+
+
+
+        // 如果节点的大小已经改变了，那就需要重新计算
+
+
+
+
+        // 先不考虑样式的变化，仅作位移
+
+
+
+        // Connector 位移最后再做
+
+    }
+
+    // 鼠标缩放移动的回调进行局部渲染
+    onBufferRender() {
+        this.canvas.onMove = (params) => {
+            this.nodeManager.onBufferRender(params);
+            this.lineManager.onBufferRender(params);
+        };
+    }
+
+    // 图表刷新，仅刷新数据
+    refreshData() {
+        // this.refresh()
+    }
+
+    // 刷新图表自适应宽度
+    resize() {
+
+    }
+
+    setResizeObserver() {
+
+    }
+
+    // 销毁图表
+    uninstall() {
+        this.resizeObserver.disconnect();
+    }
+}
+

package/src/components/charts/framework/charts/LinearArcChart/index.js

@@ -0,0 +1,143 @@
+/**
+ * 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 merge from '../../../util/merge';
+import Relation from '../../core/Relation';
+import LineManager from '../../module/line/Manager';
+import NodeManager from '../../module/node/Manager';
+import { CHART_TYPE } from '../../../util/constants';
+import ConnectorManager from '../../module/connector/Manager';
+
+const NODE_WIDTH = 100;
+const NODE_HEIGHT = 50;
+
+export default class LinearArcChart extends Relation {
+    static name = CHART_TYPE.GRID
+    // 图表渲染容器
+    dom;
+    // 图表外部传入数据
+    optionData;
+    // 图表nodes+edges格式数据
+    relationData;
+    // 图表容器边距
+    padding = 30;
+    // 图表最外层容器
+    container;
+    // 图表svg元素容器
+    svgContainer;
+    // 图表html元素容器
+    htmlContainer;
+    // 图表容器的宽高变化监听器
+    resizeObserver = null;
+    // 连线管理器
+    lineManager;
+    // 节点管理器
+    nodeManager;
+    // 连接点管理器
+    connectorManager;
+
+    constructor() {
+        super();
+        this.dom = null;
+        this.option = null;
+        this.resizeObserver = null;
+    }
+
+    // 初始化图表渲染容器
+    init(dom) {
+        this.dom = dom;
+    }
+
+    // 初始化图表渲染配置
+    setOption(option) {
+        super.setOption(option);
+    }
+
+    // 图表渲染
+    render() {
+        super.render();
+        // this.createContainer();
+        this.setDefaultLayout();
+        this.createNodes();
+        this.createLines();
+        this.setResizeObserver();
+        this.renderCallBack && this.renderCallBack(this);
+
+    }
+
+
+    // 设置默认布局
+    setDefaultLayout(){
+        this.option.layout = merge({
+            nodeShape: 'circle',
+            rows:1
+        },this.option.layout);
+    }
+
+    // 根据节点大小和关系，计算布局，创建和渲染节点
+    createNodes() {
+        this.optionData = this.option.data;
+        this.nodeManager = new NodeManager(this.option, this.htmlContainer);
+        this.setNodeSize(this.optionData);
+        this.nodeManager.layout();
+        this.nodeManager.render();
+        this.relationData = this.nodeManager.getData();
+    }
+
+    // 补充宽高信息到节点数据上
+    setNodeSize(optionData) {
+        optionData.nodes.forEach(child => {
+            child.width = child.width || this.option?.node?.width || NODE_WIDTH;
+            child.height = child.height || this.option?.node?.height || NODE_HEIGHT;
+        }) 
+    }
+
+    // 创建连线
+    createLines() {
+        // 绘制连线
+
+        this.lineManager = new LineManager(this.option,this.svgContainer,this);
+        this.lineManager.layout(this.nodeManager);        
+        this.lineManager.render(); 
+        // 绘制连接点
+        this.connectorManager = new ConnectorManager(this, this.relationData.edges,this.option);
+    }
+
+    // 图表渲染完成时回调
+    onRendered(callback) {
+        this.renderCallBack = callback;
+    }
+
+    // 图表刷新，刷新配置项
+    refresh() {
+
+    }
+
+    // 图表刷新，仅刷新数据
+    refreshData() {
+
+    }
+
+    // 刷新图表自适应宽度
+    resize() {
+
+    }
+
+    setResizeObserver() {
+
+    }
+
+    // 销毁图表
+    uninstall() {
+        this.resizeObserver.disconnect();
+    }
+}
+

package/src/components/charts/framework/charts/MindmapChart/index.js

@@ -0,0 +1,166 @@
+/**
+ * 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 merge from '../../../util/merge';
+import Relation from '../../core/Relation';
+import LineLayout from '../../module/lineLayout';
+import LineManager from '../../module/line/Manager';
+import NodeManager from '../../module/node/Manager';
+import { CHART_TYPE } from '../../../util/constants';
+
+const NODE_WIDTH = 100;
+const NODE_HEIGHT = 50;
+
+export default class MindmapChart extends Relation {
+    static name = CHART_TYPE.MINDMAP
+    // 图表渲染容器
+    dom;
+    // 图表外部传入数据
+    optionData;
+    // 图表nodes+edges格式数据
+    relationData;
+    // 图表最外层容器
+    container;
+    // 图表svg元素容器
+    svgContainer;
+    // 图表html元素容器
+    htmlContainer;
+    // 图表容器的宽高变化监听器
+    resizeObserver = null;
+    // 连线管理器
+    lineManager;
+    // 节点管理器
+    nodeManager;
+    // 连接点管理器
+    connectorManager;
+
+    constructor() {
+        super();
+        this.dom = null;
+        this.option = null;
+        this.resizeObserver = null;
+    }
+
+    // 初始化图表渲染容器
+    init(dom) {
+        this.dom = dom;
+    }
+
+    // 初始化图表渲染配置
+    setOption(option) {
+        super.setOption(option);
+    }
+
+    // 图表渲染
+    render() {
+        super.render();
+        this.setDefaultLayout(this.option);
+        console.log("render")
+
+        this.createNodes();
+
+        this.createLines();
+
+        this.onBufferRender();
+        this.setResizeObserver();
+        this.renderCallBack && this.renderCallBack(this);
+
+    }
+
+    // 设置默认布局
+    setDefaultLayout(option) {
+        option.layout = merge({
+            direction: 'LR'
+        }, option.layout);
+    }
+
+    // 根据节点大小和关系，计算布局，创建和渲染节点
+    createNodes() {
+        console.log("createNodes")
+        this.optionData = this.option.data;
+        this.nodeManager = new NodeManager(this.option, this.htmlContainer);
+        this.setNodeSize(this.optionData);
+        this.nodeManager.layout();
+        console.log("createNodes")
+
+        this.nodeManager.render();
+        console.log("createNodes")
+
+        this.relationData = this.nodeManager.getData();
+    }
+
+    // 补充宽高信息到节点数据上
+    setNodeSize(node) {
+        node.width = node.width || this.option?.node?.width || NODE_WIDTH;
+        node.height = node.height || this.option?.node?.height || NODE_HEIGHT;
+        if (node.children && node.children.length > 0) {
+            node.children.forEach(child => {
+                this.setNodeSize(child);
+            })
+        }
+    }
+
+    // 创建连线
+    createLines() {
+        new LineLayout(this.relationData, this.option);
+        this.option.data = { ...this.option.data, ...this.relationData };
+        // 绘制连线
+        this.lineManager = new LineManager(this.option, this.svgContainer, this);
+        this.lineManager.layout(this.nodeManager);
+        this.lineManager.render();
+    }
+
+    // 鼠标缩放移动的回调进行局部渲染
+    onBufferRender() {
+        this.canvas.onMove = (params) => {
+            this.nodeManager.onBufferRender(params);
+            this.lineManager.onBufferRender(params);
+        };
+    }
+
+    // 图表渲染完成时回调
+    onRendered(callback) {
+        this.renderCallBack = callback;
+    }
+
+    // 图表刷新，刷新配置项
+    refresh(option) {
+      this.setDefaultLayout(option);
+      this.setNodeSize(option.data);
+      this.nodeManager.relayout(option);
+      this.nodeManager.refresh(option);
+      // this.relationData = this.nodeManager.getData();
+
+      // 线随着node节点时刻变化位置
+      this.lineManager.refresh(option);
+    }
+
+    // 图表刷新，仅刷新数据
+    refreshData() {
+
+    }
+
+    // 刷新图表自适应宽度
+    resize() {
+
+    }
+
+    setResizeObserver() {
+
+    }
+
+    // 销毁图表
+    uninstall() {
+        super.uninstall();
+        this.resizeObserver.disconnect();
+    }
+}
+