@ebiz/designer-components 0.0.18-tj.1

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

@@ -0,0 +1,76 @@
+/**
+ * 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 Animate from "./Animate";
+export default class Animation {
+    end = false; //是否结束
+    animate; //动画模块
+
+    constructor(element, options) {
+        this.end = false;
+        options.onUpdate = options.onUpdate || this.onUpdate;
+        this.animate = new Animate(options, element)
+    }
+
+    // 开始任务
+    start() {
+        this.animate?.start();
+        this.step();
+    }
+
+    // 结束任务
+    stop() {
+        this.animate?.stop();
+    }
+
+    // 循环
+    step(time) {
+        !this.end && requestAnimationFrame((timestamp) => {
+            this.step(timestamp);
+        });
+        !this.end && this.update(time, false)
+    }
+
+    // 调用动画模块更新
+    update(time, preserve) {
+        if (time === void 0) {
+            time = performance.now();
+        }
+        if (preserve === void 0) {
+            preserve = true;
+        }
+        this.end = !this.animate?.update(time);
+    }
+
+    // 默认更新节点方法
+    onUpdate(params, value, element) {
+        if (element) {
+            const s = element.style;
+            s.position = 'absolute';
+            let matchUnit = {
+                'font-size': 'px',
+                'line-height': 'px',
+                'rotate': 'deg',
+                'width': 'px',
+                'height': 'px',
+                'left': 'px',
+                'top': 'px',
+                'bottom': 'px',
+                'right': 'px',
+            };
+            for (const key in params) {
+                if (Object.hasOwnProperty.call(params, key)) {
+                    s[key] = matchUnit[key] ? params[key] + matchUnit[key] : params[key];
+                }
+            }
+        }
+    }
+}

package/src/components/charts/framework/module/animation/AnimationGroup.js

@@ -0,0 +1,137 @@
+/**
+ * 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 Animate from "./Animate";
+export default class AnimationGroup {
+    tasks = [];
+    end = false;
+    onFinishCallback;
+    animate;
+
+    constructor(options) {
+        this.onFinishCallback = options?.onFinish || this.onFinishCallback;
+        this.onAfterUpdate = options?.onAfterUpdate || this.onAfterUpdate;
+    }
+    // 增加任务
+    add(element, options) {
+        this.end = false;
+        options.onUpdate = options.onUpdate || this.onUpdate;
+        let animate = new Animate(options, element);
+        this.tasks[animate.getId()] = animate
+    }
+
+    // 开始任务
+    start() {
+        for (const key in this.tasks) {
+            if (Object.hasOwnProperty.call(this.tasks, key)) {
+                const element = this.tasks[key];
+                element?.start();
+            }
+        }
+        this.step();
+    }
+
+    // 结束任务
+    stop() {
+        for (const key in this.tasks) {
+            if (Object.hasOwnProperty.call(this.tasks, key)) {
+                const element = this.tasks[key];
+                element?.stop();
+            }
+        }
+    }
+
+    // 循环
+    step(time) {
+        !this.end && requestAnimationFrame((timestamp) => {
+            this.step(timestamp);
+        });
+        this.end = !this.update(time);
+    }
+
+    // 删除所有任务
+    removeAll() {
+        this.tasks = {}
+    }
+
+    // 删除任务
+    remove(tasks) {
+        for (let index = 0; index < tasks.length; index++) {
+            const task = tasks[index];
+            task.group = undefined
+            delete this.tasks[task.getId()]
+        }
+    }
+
+    // 如果组中的所有任务都未暂停或播放，则返回true
+    allStopped() {
+        return this.getAll().every(task => !task.isPlaying())
+    }
+
+    // 更新任务
+    update(time, preserve, element) {
+        if (time === void 0) {
+            time = performance.now();
+        }
+        if (preserve === void 0) {
+            preserve = true;
+        }
+        let taskIds = Object.keys(this.tasks)
+
+        if (taskIds.length === 0) return true;
+        let statusPool = [];
+        // 动画是批量更新的
+        if (taskIds.length > 0) {
+            // 循环所有动画，更新对应位置
+            for (let i = 0; i < taskIds.length; i++) {
+                const task = this.tasks[taskIds[i]]
+                const autoStart = !preserve
+                let status = task && task.update(time, autoStart) === false; // 是否已完成
+                statusPool.push(status);
+                if (status && !preserve) { // 已完成则删除当前任务
+                    this.remove(task)
+                }
+            }
+        }
+        this.onAfterUpdate();
+        let isEnd = !statusPool.includes(false);
+        isEnd && this.onFinishCallback && this.onFinishCallback();
+        // 返回该动画组任务完成状态
+        return !isEnd;
+    }
+    
+    // 更新后回调
+    onAfterUpdate = ()=>{}
+
+    // 默认更新节点方法
+    onUpdate(params, elapsed, element) {
+        if (element) {
+            const s = element.style;
+            s.position = 'absolute';
+            let matchUnit = {
+                'font-size': 'px',
+                'line-height': 'px',
+                'rotate': 'deg',
+                'width': 'px',
+                'height': 'px',
+                'left': 'px',
+                'top': 'px',
+                'bottom': 'px',
+                'right': 'px',
+            };
+            for (const key in params) {
+                if (Object.hasOwnProperty.call(params, key)) {
+                    s[key] = matchUnit[key] ? params[key] + matchUnit[key] : params[key];
+                }
+            }
+        }
+    }
+}

package/src/components/charts/framework/module/animation/Easing.js

@@ -0,0 +1,225 @@
+/**
+ * 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.
+ *
+ */
+//Linear（线性），Quadratic（二次方），Cubic（三次方），Quintic（四次方），Quintic（五次方），Sinusoidal（正弦波），Exponential（指数），Circular（圆形），
+//Elastic（弹性），Back（后退）和Bounce（反弹），然后按缓动类型：In（进），out（出）和InOut（进出）
+let Easing = Object.freeze({
+    Linear: Object.freeze({
+        None: function (percent) {
+            return percent;
+        },
+        In: function (percent) {
+            return percent;
+        },
+        Out: function (percent) {
+            return percent;
+        },
+        InOut: function (percent) {
+            return percent;
+        },
+    }),
+    Quadratic: Object.freeze({
+        In: function (percent) {
+            return percent * percent;
+        },
+        Out: function (percent) {
+            return percent * (2 - percent);
+        },
+        InOut: function (percent) {
+            if ((percent *= 2) < 1) {
+                return 0.5 * percent * percent;
+            }
+            return -0.5 * (--percent * (percent - 2) - 1);
+        },
+    }),
+    Cubic: Object.freeze({
+        In: function (percent) {
+            return percent * percent * percent;
+        },
+        Out: function (percent) {
+            return --percent * percent * percent + 1;
+        },
+        InOut: function (percent) {
+            if ((percent *= 2) < 1) {
+                return 0.5 * percent * percent * percent;
+            }
+            return 0.5 * ((percent -= 2) * percent * percent + 2);
+        },
+    }),
+    Quartic: Object.freeze({
+        In: function (percent) {
+            return percent * percent * percent * percent;
+        },
+        Out: function (percent) {
+            return 1 - --percent * percent * percent * percent;
+        },
+        InOut: function (percent) {
+            if ((percent *= 2) < 1) {
+                return 0.5 * percent * percent * percent * percent;
+            }
+            return -0.5 * ((percent -= 2) * percent * percent * percent - 2);
+        },
+    }),
+    Quintic: Object.freeze({
+        In: function (percent) {
+            return percent * percent * percent * percent * percent;
+        },
+        Out: function (percent) {
+            return --percent * percent * percent * percent * percent + 1;
+        },
+        InOut: function (percent) {
+            if ((percent *= 2) < 1) {
+                return 0.5 * percent * percent * percent * percent * percent;
+            }
+            return 0.5 * ((percent -= 2) * percent * percent * percent * percent + 2);
+        },
+    }),
+    Sinusoidal: Object.freeze({
+        In: function (percent) {
+            return 1 - Math.sin(((1.0 - percent) * Math.PI) / 2);
+        },
+        Out: function (percent) {
+            return Math.sin((percent * Math.PI) / 2);
+        },
+        InOut: function (percent) {
+            return 0.5 * (1 - Math.sin(Math.PI * (0.5 - percent)));
+        },
+    }),
+    Exponential: Object.freeze({
+        In: function (percent) {
+            return percent === 0 ? 0 : Math.pow(1024, percent - 1);
+        },
+        Out: function (percent) {
+            return percent === 1 ? 1 : 1 - Math.pow(2, -10 * percent);
+        },
+        InOut: function (percent) {
+            if (percent === 0) {
+                return 0;
+            }
+            if (percent === 1) {
+                return 1;
+            }
+            if ((percent *= 2) < 1) {
+                return 0.5 * Math.pow(1024, percent - 1);
+            }
+            return 0.5 * (-Math.pow(2, -10 * (percent - 1)) + 2);
+        },
+    }),
+    Circular: Object.freeze({
+        In: function (percent) {
+            return 1 - Math.sqrt(1 - percent * percent);
+        },
+        Out: function (percent) {
+            return Math.sqrt(1 - --percent * percent);
+        },
+        InOut: function (percent) {
+            if ((percent *= 2) < 1) {
+                return -0.5 * (Math.sqrt(1 - percent * percent) - 1);
+            }
+            return 0.5 * (Math.sqrt(1 - (percent -= 2) * percent) + 1);
+        },
+    }),
+    Elastic: Object.freeze({
+        In: function (percent) {
+            if (percent === 0) {
+                return 0;
+            }
+            if (percent === 1) {
+                return 1;
+            }
+            return -Math.pow(2, 10 * (percent - 1)) * Math.sin((percent - 1.1) * 5 * Math.PI);
+        },
+        Out: function (percent) {
+            if (percent === 0) {
+                return 0;
+            }
+            if (percent === 1) {
+                return 1;
+            }
+            return Math.pow(2, -10 * percent) * Math.sin((percent - 0.1) * 5 * Math.PI) + 1;
+        },
+        InOut: function (percent) {
+            if (percent === 0) {
+                return 0;
+            }
+            if (percent === 1) {
+                return 1;
+            }
+            percent *= 2;
+            if (percent < 1) {
+                return -0.5 * Math.pow(2, 10 * (percent - 1)) * Math.sin((percent - 1.1) * 5 * Math.PI);
+            }
+            return 0.5 * Math.pow(2, -10 * (percent - 1)) * Math.sin((percent - 1.1) * 5 * Math.PI) + 1;
+        },
+    }),
+    Back: Object.freeze({
+        In: function (percent) {
+            var s = 1.70158;
+            return percent === 1 ? 1 : percent * percent * ((s + 1) * percent - s);
+        },
+        Out: function (percent) {
+            var s = 1.70158;
+            return percent === 0 ? 0 : --percent * percent * ((s + 1) * percent + s) + 1;
+        },
+        InOut: function (percent) {
+            var s = 1.70158 * 1.525;
+            if ((percent *= 2) < 1) {
+                return 0.5 * (percent * percent * ((s + 1) * percent - s));
+            }
+            return 0.5 * ((percent -= 2) * percent * ((s + 1) * percent + s) + 2);
+        },
+    }),
+    Bounce: Object.freeze({
+        In: function (percent) {
+            return 1 - Easing.Bounce.Out(1 - percent);
+        },
+        Out: function (percent) {
+            if (percent < 1 / 2.75) {
+                return 7.5625 * percent * percent;
+            }
+            else if (percent < 2 / 2.75) {
+                return 7.5625 * (percent -= 1.5 / 2.75) * percent + 0.75;
+            }
+            else if (percent < 2.5 / 2.75) {
+                return 7.5625 * (percent -= 2.25 / 2.75) * percent + 0.9375;
+            }
+            else {
+                return 7.5625 * (percent -= 2.625 / 2.75) * percent + 0.984375;
+            }
+        },
+        InOut: function (percent) {
+            if (percent < 0.5) {
+                return Easing.Bounce.In(percent * 2) * 0.5;
+            }
+            return Easing.Bounce.Out(percent * 2 - 1) * 0.5 + 0.5;
+        },
+    }),
+    generatePow: function (power) {
+        if (power === void 0) { power = 4; }
+        power = power < Number.EPSILON ? Number.EPSILON : power;
+        power = power > 10000 ? 10000 : power;
+        return {
+            In: function (percent) {
+                    return Math.pow(percent, power);
+            },
+            Out: function (percent) {
+                    return 1 - Math.pow((1 - percent), power);
+            },
+            InOut: function (percent) {
+                    if (percent < 0.5) {
+                    return Math.pow((percent * 2), power) / 2;
+                }
+                return (1 - Math.pow((2 - percent * 2), power)) / 2 + 0.5;
+            },
+        };
+    },
+});
+export default Easing;

package/src/components/charts/framework/module/animation/Interpolation.js

@@ -0,0 +1,88 @@
+/**
+ * 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 Interpolation = {
+	Linear: function (v, k) {
+			var m = v.length - 1;
+			var f = m * k;
+			var i = Math.floor(f);
+			var fn = Interpolation.Utils.Linear;
+			if (k < 0) {
+					return fn(v[0], v[1], f);
+			}
+			if (k > 1) {
+					return fn(v[m], v[m - 1], m - f);
+			}
+			return fn(v[i], v[i + 1 > m ? m : i + 1], f - i);
+	},
+	Bezier: function (v, k) {
+			var b = 0;
+			var n = v.length - 1;
+			var pw = Math.pow;
+			var bn = Interpolation.Utils.Bernstein;
+			for (var i = 0; i <= n; i++) {
+					b += pw(1 - k, n - i) * pw(k, i) * v[i] * bn(n, i);
+			}
+			return b;
+	},
+	CatmullRom: function (v, k) {
+			var m = v.length - 1;
+			var f = m * k;
+			var i = Math.floor(f);
+			var fn = Interpolation.Utils.CatmullRom;
+			if (v[0] === v[m]) {
+					if (k < 0) {
+							i = Math.floor((f = m * (1 + k)));
+					}
+					return fn(v[(i - 1 + m) % m], v[i], v[(i + 1) % m], v[(i + 2) % m], f - i);
+			}
+			else {
+					if (k < 0) {
+							return v[0] - (fn(v[0], v[0], v[1], v[1], -f) - v[0]);
+					}
+					if (k > 1) {
+							return v[m] - (fn(v[m], v[m], v[m - 1], v[m - 1], f - m) - v[m]);
+					}
+					return fn(v[i ? i - 1 : 0], v[i], v[m < i + 1 ? m : i + 1], v[m < i + 2 ? m : i + 2], f - i);
+			}
+	},
+	Utils: {
+			Linear: function (p0, p1, t) {
+					return (p1 - p0) * t + p0;
+			},
+			Bernstein: function (n, i) {
+					var fc = Interpolation.Utils.Factorial;
+					return fc(n) / fc(i) / fc(n - i);
+			},
+			Factorial: (function () {
+					var a = [1];
+					return function (n) {
+							var s = 1;
+							if (a[n]) {
+									return a[n];
+							}
+							for (var i = n; i > 1; i--) {
+									s *= i;
+							}
+							a[n] = s;
+							return s;
+					};
+			})(),
+			CatmullRom: function (p0, p1, p2, p3, t) {
+					var v0 = (p2 - p0) * 0.5;
+					var v1 = (p3 - p1) * 0.5;
+					var t2 = t * t;
+					var t3 = t * t2;
+					return (2 * p1 - 2 * p2 + v0 + v1) * t3 + (-3 * p1 + 3 * p2 - 2 * v0 - v1) * t2 + v0 * t + p1;
+			},
+	},
+};
+export default Interpolation;

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

@@ -0,0 +1,20 @@
+/**
+ * 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 Animation from './Animation';
+import AnimationGroup from './AnimationGroup';
+import Easing from './Easing';
+
+export {
+  Animation,
+  AnimationGroup,
+  Easing
+}

package/src/components/charts/framework/module/arrow/Manager.js

@@ -0,0 +1,133 @@
+/**
+ * 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 Arrow from './index';
+import merge from '../../../util/merge';
+import { hashString } from '../../../util/math';
+import { attr } from '../../../util/dom';
+
+const DEFAULT_ARROW = {
+  size: 8,
+  type: 'block',
+  color: '#d1d1d1'
+};
+
+// 起始箭头
+const MARK_POSITION_START = 'startMarker';
+
+// 结束箭头
+const MARK_POSITION_END = 'endMarker';
+
+// 箭头的状态：默认、hover、active、disable
+const MARK_STATUS_DEFAULT = 'default';
+const MARK_STATUS_HOVER = 'hover';
+const MARK_STATUS_ACTIVE = 'active';
+const MARK_STATUS_DISABLE = 'disable';
+
+const MARK_MANAGER_DEFAULT = 'defaultArrow';
+const MARK_MANAGER_HOVER = 'hoverArrow';
+const MARK_MANAGER_ACTIVE = 'activeArrow';
+const MARK_MANAGER_DISABLE = 'disableArrow';
+
+export default class ArrowManager {
+  // 用户传进来的连线配置
+  lineOption;
+  // 是否存在起始箭头
+  hasStartMarker = false;
+  // 是否存在结束箭头
+  hasEndMarker = false;
+  // 箭头管理器
+  instance = {
+    startMarker: {
+      [MARK_MANAGER_DEFAULT]: null,
+      [MARK_MANAGER_HOVER]: null,
+      [MARK_MANAGER_ACTIVE]: null,
+      [MARK_MANAGER_DISABLE]: null
+    },
+    endMarker: {
+      [MARK_MANAGER_DEFAULT]: null,
+      [MARK_MANAGER_HOVER]: null,
+      [MARK_MANAGER_ACTIVE]: null,
+      [MARK_MANAGER_DISABLE]: null
+    }
+  };
+
+  constructor(lineOption, container) {
+    this.lineOption = lineOption;
+    this.container = container;
+    if (lineOption[MARK_POSITION_START]) {
+      this.createMarkers(MARK_POSITION_START);
+      this.hasStartMarker = true;
+    }
+    if (lineOption[MARK_POSITION_END] && lineOption[MARK_POSITION_END].type !== 'none') {
+      this.createMarkers(MARK_POSITION_END);
+      this.hasEndMarker = true;
+    }
+  }
+
+  createMarkers(markPosition) {
+    const id = hashString();
+    this.lineOption[markPosition].id = id;
+    // 创建默认箭头
+    this.createMarker(MARK_STATUS_DEFAULT, MARK_MANAGER_DEFAULT, markPosition, id)
+    // 创建hover箭头
+    this.createMarker(MARK_STATUS_HOVER, MARK_MANAGER_HOVER, markPosition, `${id}-hover`)
+    this.lineOption.style.active && this.createMarker(MARK_STATUS_ACTIVE, MARK_MANAGER_ACTIVE, markPosition, `${id}-active`)
+    this.lineOption.style.disable && this.createMarker(MARK_STATUS_DISABLE, MARK_MANAGER_DISABLE, markPosition, `${id}-disable`)
+  }
+
+  createMarker(status, statusManager, markPosition, id) {
+    let arrow = merge(DEFAULT_ARROW, this.lineOption[markPosition]);
+    arrow.id = id;
+    arrow.position = markPosition == MARK_POSITION_START ? 'start' : 'end';
+    arrow.color = status === MARK_STATUS_DEFAULT ? this.lineOption[markPosition].color : this.lineOption.style[status].color
+    this.instance[markPosition][statusManager] = new Arrow(arrow, this.container);
+    this.instance[markPosition][statusManager].render();
+  }
+
+  render(path, marker, position) {
+    const markerType = marker.type;
+    const id = marker.id;
+    attr(path, `marker-${position}`, `url(#${position}-marker-${markerType}-${id.replace(/-hover|-active|-disable/g, '')})`);
+  }
+
+  // 设置箭头到指定状态
+  // status: default / hover / active / disable
+  setMarker(path, position, status) {
+    if(path.getAttribute(`marker-${position}`)){
+      const url = path.getAttribute(`marker-${position}`).replace(/-hover|-active|-disable/g, '');
+      const markerUrl = status === MARK_STATUS_DEFAULT ? url : url.replace(')', `-${status})`);
+      attr(path, `marker-${position}`, markerUrl);
+    }
+  }
+
+  // position: startMarker / endMarker
+  getData(position) {
+    return this.instance[position];
+  }
+  
+  changeMarkerColor(path, color) {
+    const url = path.firstChild.getAttribute('marker-end');
+    if (!url) return;
+    const str = url.replace('url(#', '');
+    const markerId = str.replace(')', '')
+    const markerPath = document.getElementById(markerId);
+    let cloneNode = markerPath.cloneNode(true)
+    let defsDom = markerPath.parentNode;
+    let pathDom = cloneNode.querySelector('path');
+    attr(pathDom,'stroke',color)
+    attr(pathDom,'fill',color);
+    let id = `${markerId}-animation-${color}`;
+    cloneNode.id = id;
+    !document.getElementById(id) && defsDom.appendChild(cloneNode)
+    attr(path,'marker-end',`url(#${id})`)
+  }
+}