@visactor/vrender 0.22.9-alpha.2 → 0.22.10

package/dist/index.js

@@ -580,48 +580,6 @@
     const VGlobal = Symbol.for("VGlobal");
     const DEFAULT_TEXT_FONT_FAMILY = "PingFang SC,Helvetica Neue,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol";
 
-    class EventListenerManager {
-      constructor() {
-        this._listenerMap = new Map(), this._eventListenerTransformer = event => event;
-      }
-      setEventListenerTransformer(transformer) {
-        this._eventListenerTransformer = transformer || (event => event);
-      }
-      addEventListener(type, listener, options) {
-        if (!listener) return;
-        const wrappedListener = event => {
-          const transformedEvent = this._eventListenerTransformer(event);
-          "function" == typeof listener ? listener(transformedEvent) : listener.handleEvent && listener.handleEvent(transformedEvent);
-        };
-        this._listenerMap.has(type) || this._listenerMap.set(type, new Map()), this._listenerMap.get(type).set(listener, wrappedListener), this._nativeAddEventListener(type, wrappedListener, options);
-      }
-      removeEventListener(type, listener, options) {
-        var _a;
-        if (!listener) return;
-        const wrappedListener = null === (_a = this._listenerMap.get(type)) || void 0 === _a ? void 0 : _a.get(listener);
-        wrappedListener && (this._nativeRemoveEventListener(type, wrappedListener, options), this._listenerMap.get(type).delete(listener), 0 === this._listenerMap.get(type).size && this._listenerMap.delete(type));
-      }
-      dispatchEvent(event) {
-        return this._nativeDispatchEvent(event);
-      }
-      clearAllEventListeners() {
-        this._listenerMap.forEach((listenersMap, type) => {
-          listenersMap.forEach((wrappedListener, originalListener) => {
-            this._nativeRemoveEventListener(type, wrappedListener, void 0);
-          });
-        }), this._listenerMap.clear();
-      }
-      _nativeAddEventListener(type, listener, options) {
-        throw new Error("_nativeAddEventListener must be implemented by derived classes");
-      }
-      _nativeRemoveEventListener(type, listener, options) {
-        throw new Error("_nativeRemoveEventListener must be implemented by derived classes");
-      }
-      _nativeDispatchEvent(event) {
-        throw new Error("_nativeDispatchEvent must be implemented by derived classes");
-      }
-    }
-
     var __decorate$1N = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
@@ -662,7 +620,7 @@
           step((generator = generator.apply(thisArg, _arguments || [])).next());
         });
       };
-    exports.DefaultGlobal = class DefaultGlobal extends EventListenerManager {
+    exports.DefaultGlobal = class DefaultGlobal {
       get env() {
         return this._env;
       }
@@ -706,19 +664,10 @@
         this._env || this.setEnv("browser"), this.envContribution.applyStyles = support;
       }
       constructor(contributions) {
-        super(), this.contributions = contributions, this._isImageAnonymous = !0, this.eventListenerTransformer = event => event, this.id = Generator.GenAutoIncrementId(), this.hooks = {
+        this.contributions = contributions, this._isImageAnonymous = !0, this.id = Generator.GenAutoIncrementId(), this.hooks = {
           onSetEnv: new SyncHook(["lastEnv", "env", "global"])
         }, this.measureTextMethod = "native", this.optimizeVisible = !1;
       }
-      _nativeAddEventListener(type, listener, options) {
-        return this._env || this.setEnv("browser"), this.envContribution.addEventListener(type, listener, options);
-      }
-      _nativeRemoveEventListener(type, listener, options) {
-        return this._env || this.setEnv("browser"), this.envContribution.removeEventListener(type, listener, options);
-      }
-      _nativeDispatchEvent(event) {
-        return this._env || this.setEnv("browser"), this.envContribution.dispatchEvent(event);
-      }
       bindContribution(params) {
         const promiseArr = [];
         if (this.contributions.getContributions().forEach(contribution => {
@@ -759,6 +708,15 @@
       releaseCanvas(canvas) {
         return this._env || this.setEnv("browser"), this.envContribution.releaseCanvas(canvas);
       }
+      addEventListener(type, listener, options) {
+        return this._env || this.setEnv("browser"), this.envContribution.addEventListener(type, listener, options);
+      }
+      removeEventListener(type, listener, options) {
+        return this._env || this.setEnv("browser"), this.envContribution.removeEventListener(type, listener, options);
+      }
+      dispatchEvent(event) {
+        return this._env || this.setEnv("browser"), this.envContribution.dispatchEvent(event);
+      }
       getRequestAnimationFrame() {
         return this._env || this.setEnv("browser"), this.envContribution.getRequestAnimationFrame();
       }
@@ -1220,14 +1178,14 @@
     };
     var isArrayLike$1 = isArrayLike;
 
-    const isNumber$1 = function (value) {
+    const isNumber = function (value) {
       let fuzzy = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
       const type = typeof value;
       return fuzzy ? "number" === type : "number" === type || isType$1(value, "Number");
     };
-    var isNumber$2 = isNumber$1;
+    var isNumber$1 = isNumber;
 
-    const isValidNumber = value => isNumber$2(value) && Number.isFinite(value);
+    const isValidNumber = value => isNumber$1(value) && Number.isFinite(value);
     var isValidNumber$1 = isValidNumber;
 
     const isValidUrl = value => new RegExp(/^(http(s)?:\/\/)\w+[^\s]+(\.[^\s]+){1,}$/).test(value);
@@ -1310,7 +1268,7 @@
     }(LoggerLevel || (LoggerLevel = {}));
     class Logger {
       static getInstance(level, method) {
-        return Logger._instance && isNumber$2(level) ? Logger._instance.level(level) : Logger._instance || (Logger._instance = new Logger(level, method)), Logger._instance;
+        return Logger._instance && isNumber$1(level) ? Logger._instance.level(level) : Logger._instance || (Logger._instance = new Logger(level, method)), Logger._instance;
       }
       static setInstance(logger) {
         return Logger._instance = logger;
@@ -1454,10 +1412,10 @@
         return this.x = x, this.y = y, this;
       }
       add(point) {
-        return isNumber$2(point) ? (this.x += point, void (this.y += point)) : (this.x += point.x, this.y += point.y, this);
+        return isNumber$1(point) ? (this.x += point, void (this.y += point)) : (this.x += point.x, this.y += point.y, this);
       }
       sub(point) {
-        return isNumber$2(point) ? (this.x -= point, void (this.y -= point)) : (this.x -= point.x, this.y -= point.y, this);
+        return isNumber$1(point) ? (this.x -= point, void (this.y -= point)) : (this.x -= point.x, this.y -= point.y, this);
       }
       multi(point) {
         throw new Error("暂不支持");
@@ -2518,10 +2476,10 @@
       return ((value = Math.max(0, Math.min(255, Math.round(value) || 0))) < 16 ? "0" : "") + value.toString(16);
     }
     function rgb(value) {
-      return isNumber$2(value) ? new RGB(value >> 16, value >> 8 & 255, 255 & value, 1) : isArray$1(value) ? new RGB(value[0], value[1], value[2]) : new RGB(255, 255, 255);
+      return isNumber$1(value) ? new RGB(value >> 16, value >> 8 & 255, 255 & value, 1) : isArray$1(value) ? new RGB(value[0], value[1], value[2]) : new RGB(255, 255, 255);
     }
     function rgba(value) {
-      return isNumber$2(value) ? new RGB(value >>> 24, value >>> 16 & 255, value >>> 8 & 255, 255 & value) : isArray$1(value) ? new RGB(value[0], value[1], value[2], value[3]) : new RGB(255, 255, 255, 1);
+      return isNumber$1(value) ? new RGB(value >>> 24, value >>> 16 & 255, value >>> 8 & 255, 255 & value) : isArray$1(value) ? new RGB(value[0], value[1], value[2], value[3]) : new RGB(255, 255, 255, 1);
     }
     function SRGBToLinear(c) {
       return c < .04045 ? .0773993808 * c : Math.pow(.9478672986 * c + .0521327014, 2.4);
@@ -3559,6 +3517,11 @@
         return this.context.tryUpdateLength();
       }
     };
+    class StepClosed extends Step$1 {
+      lineEnd() {
+        this.context.closePath();
+      }
+    }
     function genStepSegments(points, t) {
       let params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
       const {
@@ -3572,6 +3535,16 @@
     function genStepTypeSegments(path, points) {
       return genCurveSegments(path, points);
     }
+    function genStepClosedSegments(points, t) {
+      let params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      const {
+        direction: direction,
+        startPoint: startPoint
+      } = params;
+      if (points.length < 2 - Number(!!startPoint)) return null;
+      const segContext = new SegContext("step", null != direction ? direction : abs(points[points.length - 1].x - points[0].x) > abs(points[points.length - 1].y - points[0].y) ? exports.Direction.ROW : exports.Direction.COLUMN);
+      return genStepTypeSegments(new StepClosed(segContext, t, startPoint), points), segContext;
+    }
 
     class LinearClosed extends Linear {
       lineEnd() {
@@ -3801,6 +3774,8 @@
           return genMonotoneYSegments(points, params);
         case "step":
           return genStepSegments(points, .5, params);
+        case "stepClosed":
+          return genStepClosedSegments(points, .5, params);
         case "stepBefore":
           return genStepSegments(points, 0, params);
         case "stepAfter":
@@ -4683,7 +4658,7 @@
     function createColor(context, c, params) {
       let offsetX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
       let offsetY = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
-      var _a, _b;
+      var _a, _b, _c, _d;
       if (!c || !0 === c) return "black";
       let result, color;
       if (isArray$1(c)) for (let i = 0; i < c.length && (color = c[i], !color); i++);else color = c;
@@ -4700,7 +4675,7 @@
             scaleY = 1,
             angle = 0
           } = params.attribute;
-          w /= scaleX, h /= scaleY, x /= scaleX, y /= scaleY, (angle || 1 !== scaleX || 1 !== scaleY) && (x = 0, y = 0, w = null !== (_a = params.widthWithoutTransform) && void 0 !== _a ? _a : w, h = null !== (_b = params.heightWithoutTransform) && void 0 !== _b ? _b : h);
+          w /= scaleX, h /= scaleY, x /= scaleX, y /= scaleY, (angle || 1 !== scaleX || 1 !== scaleY) && (x = null !== (_a = params.x1WithoutTransform) && void 0 !== _a ? _a : 0, y = null !== (_b = params.y1WithoutTransform) && void 0 !== _b ? _b : 0, w = null !== (_c = params.widthWithoutTransform) && void 0 !== _c ? _c : w, h = null !== (_d = params.heightWithoutTransform) && void 0 !== _d ? _d : h);
         }
         "linear" === color.gradient ? result = createLinearGradient(context, color, x, y, w, h) : "conical" === color.gradient ? result = createConicGradient(context, color, x, y, w, h) : "radial" === color.gradient && (result = createRadialGradient(context, color, x, y, w, h));
       }
@@ -4725,7 +4700,7 @@
       const canvasGradient = context.createConicGradient(x + (null !== (_a = color.x) && void 0 !== _a ? _a : 0) * w, y + (null !== (_b = color.y) && void 0 !== _b ? _b : 0) * h, color.startAngle, color.endAngle);
       return color.stops.forEach(stop => {
         canvasGradient.addColorStop(stop.offset, stop.color);
-      }), canvasGradient.GetPattern(w + x, h + y, undefined);
+      }), canvasGradient.GetPattern ? canvasGradient.GetPattern(w + x, h + y, undefined) : canvasGradient;
     }
 
     const DIRECTION_KEY = {
@@ -5290,9 +5265,6 @@
     function isNotAroundZero(val) {
       return val > EPSILON || val < -EPSILON;
     }
-    function isNumber(data) {
-      return "number" == typeof data && Number.isFinite(data);
-    }
     const _v0 = [0, 0],
       _v1 = [0, 0],
       _v2 = [0, 0];
@@ -5697,7 +5669,7 @@
       };
     const VWindow = Symbol.for("VWindow");
     const WindowHandlerContribution = Symbol.for("WindowHandlerContribution");
-    exports.DefaultWindow = class DefaultWindow extends EventListenerManager {
+    exports.DefaultWindow = class DefaultWindow {
       get width() {
         if (this._handler) {
           const wh = this._handler.getWH();
@@ -5716,7 +5688,7 @@
         return this._handler.getDpr();
       }
       constructor() {
-        super(), this.hooks = {
+        this.hooks = {
           onChange: new SyncHook(["x", "y", "width", "height"])
         }, this.active = () => {
           const global = this.global;
@@ -5724,15 +5696,6 @@
           container.getNamed(WindowHandlerContribution, global.env).configure(this, global), this.actived = !0;
         }, this._uid = Generator.GenAutoIncrementId(), this.global = application.global, this.postInit();
       }
-      _nativeAddEventListener(type, listener, options) {
-        return this._handler.addEventListener(type, listener, options);
-      }
-      _nativeRemoveEventListener(type, listener, options) {
-        return this._handler.removeEventListener(type, listener, options);
-      }
-      _nativeDispatchEvent(event) {
-        return this._handler.dispatchEvent(event);
-      }
       postInit() {
         this.global.hooks.onSetEnv.tap("window", this.active), this.active();
       }
@@ -5772,7 +5735,7 @@
         throw new Error("暂不支持");
       }
       release() {
-        return this.global.hooks.onSetEnv.unTap("window", this.active), this.clearAllEventListeners(), this._handler.releaseWindow();
+        return this.global.hooks.onSetEnv.unTap("window", this.active), this._handler.releaseWindow();
       }
       getContext() {
         return this._handler.getContext();
@@ -5783,6 +5746,15 @@
       getImageBuffer(type) {
         return this._handler.getImageBuffer ? this._handler.getImageBuffer(type) : null;
       }
+      addEventListener(type, listener, options) {
+        return this._handler.addEventListener(type, listener, options);
+      }
+      removeEventListener(type, listener, options) {
+        return this._handler.removeEventListener(type, listener, options);
+      }
+      dispatchEvent(event) {
+        return this._handler.dispatchEvent(event);
+      }
       getBoundingClientRect() {
         return this._handler.getBoundingClientRect();
       }
@@ -6991,17 +6963,19 @@
           globalObj: globalObj,
           domElement: domElement
         } = this;
-        this.supportsPointerEvents ? (globalObj.getDocument() ? (globalObj.addEventListener("pointermove", this.onPointerMove, !0), globalObj.addEventListener("pointerup", this.onPointerUp, !0)) : (domElement.addEventListener("pointermove", this.onPointerMove, !0), domElement.addEventListener("pointerup", this.onPointerUp, !0)), domElement.addEventListener("pointerdown", this.onPointerDown, !0), domElement.addEventListener("pointerleave", this.onPointerOverOut, !0), domElement.addEventListener("pointerover", this.onPointerOverOut, !0)) : (globalObj.getDocument() ? (globalObj.addEventListener("mousemove", this.onPointerMove, !0), globalObj.addEventListener("mouseup", this.onPointerUp, !0)) : (domElement.addEventListener("mousemove", this.onPointerMove, !0), domElement.addEventListener("mouseup", this.onPointerUp, !0)), domElement.addEventListener("mousedown", this.onPointerDown, !0), domElement.addEventListener("mouseout", this.onPointerOverOut, !0), domElement.addEventListener("mouseover", this.onPointerOverOut, !0)), this.supportsTouchEvents && (domElement.addEventListener("touchstart", this.onPointerDown, !0), domElement.addEventListener("touchend", this.onPointerUp, !0), domElement.addEventListener("touchmove", this.onPointerMove, !0)), domElement.addEventListener("wheel", this.onWheel, {
+        this.supportsPointerEvents ? (globalObj.getDocument() ? (globalObj.getDocument().addEventListener("pointermove", this.onPointerMove, !0), globalObj.getDocument().addEventListener("pointerup", this.onPointerUp, !0)) : (domElement.addEventListener("pointermove", this.onPointerMove, !0), domElement.addEventListener("pointerup", this.onPointerUp, !0)), domElement.addEventListener("pointerdown", this.onPointerDown, !0), domElement.addEventListener("pointerleave", this.onPointerOverOut, !0), domElement.addEventListener("pointerover", this.onPointerOverOut, !0)) : (globalObj.getDocument() ? (globalObj.getDocument().addEventListener("mousemove", this.onPointerMove, !0), globalObj.getDocument().addEventListener("mouseup", this.onPointerUp, !0)) : (domElement.addEventListener("mousemove", this.onPointerMove, !0), domElement.addEventListener("mouseup", this.onPointerUp, !0)), domElement.addEventListener("mousedown", this.onPointerDown, !0), domElement.addEventListener("mouseout", this.onPointerOverOut, !0), domElement.addEventListener("mouseover", this.onPointerOverOut, !0)), this.supportsTouchEvents && (domElement.addEventListener("touchstart", this.onPointerDown, !0), domElement.addEventListener("touchend", this.onPointerUp, !0), domElement.addEventListener("touchmove", this.onPointerMove, !0)), domElement.addEventListener("wheel", this.onWheel, {
           capture: !0
         }), this.eventsAdded = !0;
       }
       removeEvents() {
+        var _a;
         if (!this.eventsAdded || !this.domElement) return;
         const {
-          globalObj: globalObj,
-          domElement: domElement
-        } = this;
-        this.supportsPointerEvents ? (globalObj.getDocument() ? (globalObj.removeEventListener("pointermove", this.onPointerMove, !0), globalObj.removeEventListener("pointerup", this.onPointerUp, !0)) : (domElement.removeEventListener("pointermove", this.onPointerMove, !0), domElement.removeEventListener("pointerup", this.onPointerUp, !0)), domElement.removeEventListener("pointerdown", this.onPointerDown, !0), domElement.removeEventListener("pointerleave", this.onPointerOverOut, !0), domElement.removeEventListener("pointerover", this.onPointerOverOut, !0)) : (globalObj.getDocument() ? (globalObj.removeEventListener("mousemove", this.onPointerMove, !0), globalObj.removeEventListener("mouseup", this.onPointerUp, !0)) : (domElement.removeEventListener("mousemove", this.onPointerMove, !0), domElement.removeEventListener("mouseup", this.onPointerUp, !0)), domElement.removeEventListener("mousedown", this.onPointerDown, !0), domElement.removeEventListener("mouseout", this.onPointerOverOut, !0), domElement.removeEventListener("mouseover", this.onPointerOverOut, !0)), this.supportsTouchEvents && (domElement.removeEventListener("touchstart", this.onPointerDown, !0), domElement.removeEventListener("touchend", this.onPointerUp, !0), domElement.removeEventListener("touchmove", this.onPointerMove, !0)), domElement.removeEventListener("wheel", this.onWheel, !0), this.domElement = null, this.eventsAdded = !1;
+            globalObj: globalObj,
+            domElement: domElement
+          } = this,
+          globalDocument = null !== (_a = globalObj.getDocument()) && void 0 !== _a ? _a : domElement;
+        this.supportsPointerEvents ? (globalDocument.removeEventListener("pointermove", this.onPointerMove, !0), globalDocument.removeEventListener("pointerup", this.onPointerUp, !0), domElement.removeEventListener("pointerdown", this.onPointerDown, !0), domElement.removeEventListener("pointerleave", this.onPointerOverOut, !0), domElement.removeEventListener("pointerover", this.onPointerOverOut, !0)) : (globalDocument.removeEventListener("mousemove", this.onPointerMove, !0), globalDocument.removeEventListener("mouseup", this.onPointerUp, !0), domElement.removeEventListener("mousedown", this.onPointerDown, !0), domElement.removeEventListener("mouseout", this.onPointerOverOut, !0), domElement.removeEventListener("mouseover", this.onPointerOverOut, !0)), this.supportsTouchEvents && (domElement.removeEventListener("touchstart", this.onPointerDown, !0), domElement.removeEventListener("touchend", this.onPointerUp, !0), domElement.removeEventListener("touchmove", this.onPointerMove, !0)), domElement.removeEventListener("wheel", this.onWheel, !0), this.domElement = null, this.eventsAdded = !1;
       }
       mapToViewportPoint(event) {
         return this.domElement.pointTransform ? this.domElement.pointTransform(event.x, event.y) : event;
@@ -7995,7 +7969,7 @@
       }
       onBind() {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        this.fromNumber = isNumber$2(null === (_a = this.from) || void 0 === _a ? void 0 : _a.text) ? null === (_b = this.from) || void 0 === _b ? void 0 : _b.text : Number.parseFloat(null === (_c = this.from) || void 0 === _c ? void 0 : _c.text), this.toNumber = isNumber$2(null === (_d = this.to) || void 0 === _d ? void 0 : _d.text) ? null === (_e = this.to) || void 0 === _e ? void 0 : _e.text : Number.parseFloat(null === (_f = this.to) || void 0 === _f ? void 0 : _f.text), Number.isFinite(this.toNumber) || (this.fromNumber = 0), Number.isFinite(this.toNumber) || (this.valid = !1), !1 !== this.valid && (this.decimalLength = null !== (_h = null === (_g = this.params) || void 0 === _g ? void 0 : _g.fixed) && void 0 !== _h ? _h : Math.max(getDecimalPlaces(this.fromNumber), getDecimalPlaces(this.toNumber)));
+        this.fromNumber = isNumber$1(null === (_a = this.from) || void 0 === _a ? void 0 : _a.text) ? null === (_b = this.from) || void 0 === _b ? void 0 : _b.text : Number.parseFloat(null === (_c = this.from) || void 0 === _c ? void 0 : _c.text), this.toNumber = isNumber$1(null === (_d = this.to) || void 0 === _d ? void 0 : _d.text) ? null === (_e = this.to) || void 0 === _e ? void 0 : _e.text : Number.parseFloat(null === (_f = this.to) || void 0 === _f ? void 0 : _f.text), Number.isFinite(this.toNumber) || (this.fromNumber = 0), Number.isFinite(this.toNumber) || (this.valid = !1), !1 !== this.valid && (this.decimalLength = null !== (_h = null === (_g = this.params) || void 0 === _g ? void 0 : _g.fixed) && void 0 !== _h ? _h : Math.max(getDecimalPlaces(this.fromNumber), getDecimalPlaces(this.toNumber)));
       }
       onEnd() {}
       onUpdate(end, ratio, out) {
@@ -9138,7 +9112,7 @@
       return res;
     };
     const samplingPoints = (points, count) => {
-      const validatePoints = points.filter(point => !1 !== point.defined && isNumber$2(point.x) && isNumber$2(point.y));
+      const validatePoints = points.filter(point => !1 !== point.defined && isNumber$1(point.x) && isNumber$1(point.y));
       if (0 === validatePoints.length) return [];
       if (1 === validatePoints.length) return new Array(count).fill(0).map(i => validatePoints[0]);
       const res = [];
@@ -9174,7 +9148,7 @@
         var _a;
         return res.concat(null !== (_a = seg.points) && void 0 !== _a ? _a : []);
       }, []));
-      const validatePoints = points.filter(point => !1 !== point.defined && isNumber$2(point.x) && isNumber$2(point.y));
+      const validatePoints = points.filter(point => !1 !== point.defined && isNumber$1(point.x) && isNumber$1(point.y));
       if (!validatePoints.length) return [];
       const allPoints = [];
       validatePoints.forEach(point => {
@@ -9380,10 +9354,10 @@
 
     function colorArrayToString(color) {
       let alphaChannel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
-      return Array.isArray(color) && isNumber$2(color[0]) ? alphaChannel ? `rgb(${Math.round(color[0])},${Math.round(color[1])},${Math.round(color[2])},${color[3].toFixed(2)})` : `rgb(${Math.round(color[0])},${Math.round(color[1])},${Math.round(color[2])})` : color;
+      return Array.isArray(color) && isNumber$1(color[0]) ? alphaChannel ? `rgb(${Math.round(color[0])},${Math.round(color[1])},${Math.round(color[2])},${color[3].toFixed(2)})` : `rgb(${Math.round(color[0])},${Math.round(color[1])},${Math.round(color[2])})` : color;
     }
     function interpolateColor(from, to, ratio, alphaChannel, cb) {
-      if (Array.isArray(from) && !isNumber$2(from[0]) || Array.isArray(to) && !isNumber$2(to[0])) {
+      if (Array.isArray(from) && !isNumber$1(from[0]) || Array.isArray(to) && !isNumber$1(to[0])) {
         return new Array(4).fill(0).map((_, index) => _interpolateColor(isArray$1(from) ? from[index] : from, isArray$1(to) ? to[index] : to, ratio, alphaChannel));
       }
       return _interpolateColor(from, to, ratio, alphaChannel, cb);
@@ -9911,13 +9885,13 @@
 
     class BaseSymbol {
       bounds(size, bounds) {
-        if (isNumber$2(size)) {
+        if (isNumber$1(size)) {
           const halfS = size / 2;
           bounds.x1 = -halfS, bounds.x2 = halfS, bounds.y1 = -halfS, bounds.y2 = halfS;
         } else bounds.x1 = -size[0] / 2, bounds.x2 = size[0] / 2, bounds.y1 = -size[1] / 2, bounds.y2 = size[1] / 2;
       }
       parseSize(size) {
-        return isNumber$2(size) ? size : Math.min(size[0], size[1]);
+        return isNumber$1(size) ? size : Math.min(size[0], size[1]);
       }
     }
 
@@ -10336,10 +10310,10 @@
         super(...arguments), this.type = "rect", this.pathStr = "M -0.5,0.25 L 0.5,0.25 L 0.5,-0.25,L -0.5,-0.25 Z";
       }
       draw(ctx, size, x, y) {
-        return isNumber$2(size) ? rectSize(ctx, size, x, y) : rectSizeArray(ctx, size, x, y);
+        return isNumber$1(size) ? rectSize(ctx, size, x, y) : rectSizeArray(ctx, size, x, y);
       }
       drawWithClipRange(ctx, size, x, y, clipRange, z, cb) {
-        isNumber$2(size) && (size = [size, size / 2]);
+        isNumber$1(size) && (size = [size, size / 2]);
         const drawLength = 2 * (size[0] + size[1]) * clipRange,
           points = [{
             x: x + size[0] / 2,
@@ -10371,12 +10345,12 @@
         return !1;
       }
       drawOffset(ctx, size, x, y, offset) {
-        return isNumber$2(size) ? rectSize(ctx, size + 2 * offset, x, y) : rectSizeArray(ctx, [size[0] + 2 * offset, size[1] + 2 * offset], x, y);
+        return isNumber$1(size) ? rectSize(ctx, size + 2 * offset, x, y) : rectSizeArray(ctx, [size[0] + 2 * offset, size[1] + 2 * offset], x, y);
       }
     }
     var rect = new RectSymbol();
 
-    const tempBounds$1 = new AABBBounds();
+    const tempBounds = new AABBBounds();
     class CustomSymbolClass {
       constructor(type, path) {
         let isSvg = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !1;
@@ -10391,7 +10365,7 @@
         return size = this.parseSize(size), this.drawOffset(ctx, size, x, y, 0, z, cb);
       }
       parseSize(size) {
-        return isNumber$2(size) ? size : Math.min(size[0], size[1]);
+        return isNumber$1(size) ? size : Math.min(size[0], size[1]);
       }
       drawWithClipRange(ctx, size, x, y, clipRange, z, cb) {
         return size = this.parseSize(size), this.isSvg ? !!this.svgCache && (this.svgCache.forEach(item => {
@@ -10405,7 +10379,7 @@
             let {
               path: path
             } = _ref;
-            tempBounds$1.x1 = path.bounds.x1 * size, tempBounds$1.y1 = path.bounds.y1 * size, tempBounds$1.x2 = path.bounds.x2 * size, tempBounds$1.y2 = path.bounds.y2 * size, bounds.union(tempBounds$1);
+            tempBounds.x1 = path.bounds.x1 * size, tempBounds.y1 = path.bounds.y1 * size, tempBounds.x2 = path.bounds.x2 * size, tempBounds.y2 = path.bounds.y2 * size, bounds.union(tempBounds);
           });
         }
         this.path.bounds && (bounds.x1 = this.path.bounds.x1 * size, bounds.y1 = this.path.bounds.y1 * size, bounds.x2 = this.path.bounds.x2 * size, bounds.y2 = this.path.bounds.y2 * size);
@@ -10801,8 +10775,8 @@
     const SVG_PARSE_ATTRIBUTE_MAP_KEYS = Object.keys(SVG_PARSE_ATTRIBUTE_MAP);
 
     const _tempBounds$1 = new AABBBounds(),
-      tempMatrix = new Matrix(),
-      tempBounds = new AABBBounds();
+      tempMatrix = new Matrix();
+      new AABBBounds();
     const PURE_STYLE_KEY = ["stroke", "opacity", "strokeOpacity", "lineDash", "lineDashOffset", "lineCap", "lineJoin", "miterLimit", "fill", "fillOpacity"];
     const GRAPHIC_UPDATE_TAG_KEY = ["lineWidth", "scaleX", "scaleY", "angle", "anchor", "visible"];
     const tempConstantXYKey = ["x", "y"],
@@ -11322,25 +11296,12 @@
       needUpdateLayout() {
         return !!(this._updateTag & exports.UpdateTag.UPDATE_LAYOUT);
       }
-      getAnchor(anchor, params) {
+      getAnchor(anchor, params, resetScale) {
         const _anchor = [0, 0],
           getBounds = () => {
             if (params.b) return params.b;
-            const {
-              scaleX: scaleX,
-              scaleY: scaleY,
-              angle: angle,
-              scaleCenter: scaleCenter
-            } = this.attribute;
-            return tempBounds.copy(this._AABBBounds), this.setAttributes({
-              angle: 0,
-              scaleCenter: null
-            }), params.b = this.AABBBounds.clone(), this._AABBBounds.copy(tempBounds), this.setAttributes({
-              scaleX: scaleX,
-              scaleY: scaleY,
-              angle: angle,
-              scaleCenter: scaleCenter
-            }), params.b;
+            const graphic = this.clone();
+            return graphic.attribute.angle = 0, graphic.attribute.scaleCenter = null, resetScale && (graphic.attribute.scaleX = 1, graphic.attribute.scaleY = 1), params.b = graphic.AABBBounds, params.b;
           };
         if ("string" == typeof anchor[0]) {
           const ratio = parseFloat(anchor[0]) / 100,
@@ -11369,7 +11330,7 @@
         const params = {};
         if (anchor && angle && (_anchor = this.getAnchor(anchor, params)), !scaleCenter || 1 === scaleX && 1 === scaleY) normalTransform(this._transMatrix, this._transMatrix.reset(), x, y, scaleX, scaleY, angle, anchor && _anchor);else {
           const m = this._transMatrix;
-          m.reset(), m.translate(_anchor[0], _anchor[1]), m.rotate(angle), m.translate(-_anchor[0], -_anchor[1]), m.translate(x, y), _anchor = this.getAnchor(scaleCenter, params), application.transformUtil.fromMatrix(m, m).scale(scaleX, scaleY, {
+          m.reset(), m.translate(_anchor[0], _anchor[1]), m.rotate(angle), m.translate(-_anchor[0], -_anchor[1]), m.translate(x, y), _anchor = this.getAnchor(scaleCenter, params, !0), application.transformUtil.fromMatrix(m, m).scale(scaleX, scaleY, {
             x: _anchor[0],
             y: _anchor[1]
           });
@@ -12647,12 +12608,12 @@
           textBaseline: textBaseline
         } = attribute;
         if (null != attribute.forceBoundsHeight) {
-          const h = isNumber$2(attribute.forceBoundsHeight) ? attribute.forceBoundsHeight : attribute.forceBoundsHeight(),
+          const h = isNumber$1(attribute.forceBoundsHeight) ? attribute.forceBoundsHeight : attribute.forceBoundsHeight(),
             dy = textLayoutOffsetY(textBaseline, h, h);
           aabbBounds.set(aabbBounds.x1, dy, aabbBounds.x2, dy + h);
         }
         if (null != attribute.forceBoundsWidth) {
-          const w = isNumber$2(attribute.forceBoundsWidth) ? attribute.forceBoundsWidth : attribute.forceBoundsWidth(),
+          const w = isNumber$1(attribute.forceBoundsWidth) ? attribute.forceBoundsWidth : attribute.forceBoundsWidth(),
             dx = textDrawOffsetX(textAlign, w);
           aabbBounds.set(dx, aabbBounds.y1, dx + w, aabbBounds.y2);
         }
@@ -13533,7 +13494,7 @@
           tb1: tb1,
           tb2: tb2
         } = application.graphicService.updateTempAABBBounds(aabbBounds);
-        updateBoundsOfSymbolOuterBorder(attribute, symbolTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1;
+        updateBoundsOfSymbolOuterBorder(attribute, symbolTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1, this.x1WithoutTransform = aabbBounds.x1, this.y1WithoutTransform = aabbBounds.y1;
         const {
           lineJoin = symbolTheme.lineJoin
         } = attribute;
@@ -14751,7 +14712,7 @@
           }
         } else {
           const richTextConfig = this.combinedStyleToCharacter(textConfig[i]);
-          if (isNumber$2(richTextConfig.text) && (richTextConfig.text = `${richTextConfig.text}`), richTextConfig.text && richTextConfig.text.includes("\n")) {
+          if (isNumber$1(richTextConfig.text) && (richTextConfig.text = `${richTextConfig.text}`), richTextConfig.text && richTextConfig.text.includes("\n")) {
             const textParts = richTextConfig.text.split("\n");
             for (let j = 0; j < textParts.length; j++) if (0 === j) paragraphs.push(new Paragraph(textParts[j], !1, richTextConfig, ascentDescentMode));else if (textParts[j] || i === textConfig.length - 1) paragraphs.push(new Paragraph(textParts[j], !0, richTextConfig, ascentDescentMode));else {
               const nextRichTextConfig = this.combinedStyleToCharacter(textConfig[i + 1]);
@@ -15038,7 +14999,7 @@
         } = this.attribute;
         if (outerRadius += outerPadding, innerRadius -= innerPadding, 0 === cornerRadius || "0%" === cornerRadius) return 0;
         const deltaRadius = Math.abs(outerRadius - innerRadius),
-          parseCR = cornerRadius => Math.min(isNumber$2(cornerRadius, !0) ? cornerRadius : deltaRadius * parseFloat(cornerRadius) / 100, deltaRadius / 2);
+          parseCR = cornerRadius => Math.min(isNumber$1(cornerRadius, !0) ? cornerRadius : deltaRadius * parseFloat(cornerRadius) / 100, deltaRadius / 2);
         if (isArray$1(cornerRadius)) {
           const crList = cornerRadius.map(cr => parseCR(cr) || 0);
           return 0 === crList.length ? [crList[0], crList[0], crList[0], crList[0]] : 2 === crList.length ? [crList[0], crList[1], crList[0], crList[1]] : (3 === crList.length && crList.push(0), crList);
@@ -16040,7 +16001,7 @@
       let roundCorner = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : !0;
       let edgeCb = arguments.length > 7 ? arguments[7] : undefined;
       let cornerRadius;
-      if (Array.isArray(roundCorner) && (edgeCb = roundCorner, roundCorner = !0), width < 0 && (x += width, width = -width), height < 0 && (y += height, height = -height), isNumber$2(rectCornerRadius, !0)) cornerRadius = [rectCornerRadius = abs(rectCornerRadius), rectCornerRadius, rectCornerRadius, rectCornerRadius];else if (Array.isArray(rectCornerRadius)) {
+      if (Array.isArray(roundCorner) && (edgeCb = roundCorner, roundCorner = !0), width < 0 && (x += width, width = -width), height < 0 && (y += height, height = -height), isNumber$1(rectCornerRadius, !0)) cornerRadius = [rectCornerRadius = abs(rectCornerRadius), rectCornerRadius, rectCornerRadius, rectCornerRadius];else if (Array.isArray(rectCornerRadius)) {
         const cornerRadiusArr = rectCornerRadius;
         let cr0, cr1;
         switch (cornerRadiusArr.length) {
@@ -20637,80 +20598,6 @@
       return points = highestQuality ? points : simplifyRadialDist(points, void 0 !== tolerance ? tolerance * tolerance : 1);
     }
 
-    function isIdentityMatrix(matrix) {
-      return 1 === matrix.a && 0 === matrix.b && 0 === matrix.c && 1 === matrix.d && 0 === matrix.e && 0 === matrix.f;
-    }
-    function createEventTransformer(containerElement, getMatrix, getRect, transformPoint) {
-      return event => {
-        if (!(event instanceof MouseEvent || event instanceof TouchEvent || event instanceof PointerEvent)) return event;
-        const transformMatrix = getMatrix();
-        if (isIdentityMatrix(transformMatrix)) return event;
-        const containerRect = getRect(),
-          transformedEvent = new event.constructor(event.type, event);
-        if (Object.defineProperties(transformedEvent, {
-          target: {
-            value: event.target
-          },
-          currentTarget: {
-            value: event.currentTarget
-          }
-        }), event instanceof MouseEvent || event instanceof PointerEvent) transformPoint(event.clientX, event.clientY, transformMatrix, containerRect, transformedEvent);else if (event instanceof TouchEvent) {
-          if (event.touches.length > 0) {
-            const touch = transformedEvent.touches[0];
-            transformPoint(touch.clientX, touch.clientY, transformMatrix, containerRect, touch);
-          }
-          if (event.changedTouches.length > 0) {
-            const touch = transformedEvent.changedTouches[0];
-            transformPoint(touch.clientX, touch.clientY, transformMatrix, containerRect, touch);
-          }
-        }
-        return transformedEvent;
-      };
-    }
-    function createCanvasEventTransformer(canvasElement, getMatrix, getRect, transformPoint) {
-      return createEventTransformer(canvasElement.parentElement || canvasElement, getMatrix, getRect, transformPoint);
-    }
-    function registerWindowEventTransformer(window, container, getMatrix, getRect, transformPoint) {
-      const transformer = createEventTransformer(container, getMatrix, getRect, transformPoint);
-      window.setEventListenerTransformer(transformer);
-    }
-    function registerGlobalEventTransformer(global, container, getMatrix, getRect, transformPoint) {
-      const transformer = createEventTransformer(container, getMatrix, getRect, transformPoint);
-      global.setEventListenerTransformer(transformer);
-    }
-    function transformPointForCanvas(clientX, clientY, matrix, rect, transformedEvent) {
-      const transformedPoint = {
-        x: clientX,
-        y: clientY
-      };
-      matrix.transformPoint(transformedPoint, transformedPoint), Object.defineProperties(transformedEvent, {
-        _canvasX: {
-          value: transformedPoint.x
-        },
-        _canvasY: {
-          value: transformedPoint.y
-        }
-      });
-    }
-    function mapToCanvasPointForCanvas(nativeEvent) {
-      var _a;
-      if (isNumber(nativeEvent._canvasX) && isNumber(nativeEvent._canvasY)) return {
-        x: nativeEvent._canvasX,
-        y: nativeEvent._canvasY
-      };
-      if (nativeEvent.changedTouches) {
-        const data = null !== (_a = nativeEvent.changedTouches[0]) && void 0 !== _a ? _a : {};
-        return {
-          x: data._canvasX,
-          y: data._canvasY
-        };
-      }
-      return {
-        x: nativeEvent._canvasX || 0,
-        y: nativeEvent._canvasY || 0
-      };
-    }
-
     var __rest$1 = undefined && undefined.__rest || function (s, e) {
       var t = {};
       for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
@@ -25880,6 +25767,7 @@
         return this.nativeContext.createRadialGradient(x0, y0, r0, x1, y1, r1);
       }
       createConicGradient(x, y, startAngle, endAngle) {
+        if (this.nativeContext.createConicGradient && Math.abs(endAngle - startAngle - 2 * Math.PI) < .001) return this.nativeContext.createConicGradient(startAngle, x, y);
         let pattern,
           edit = !1;
         const ctx = this;
@@ -27268,7 +27156,7 @@
           x += point.x, y += point.y, pickContext.setTransformForCurrent();
         } else x = 0, y = 0, onlyTranslate = !1, pickContext.transformFromMatrix(rect.transMatrix, !0);
         let picked = !0;
-        if (!onlyTranslate || rect.shadowRoot || isNumber$2(cornerRadius, !0) && 0 !== cornerRadius || isArray$1(cornerRadius) && cornerRadius.some(num => 0 !== num)) picked = !1, this.canvasRenderer.drawShape(rect, pickContext, x, y, {}, null, (context, rectAttribute, themeAttribute) => !!picked || (picked = context.isPointInPath(point.x, point.y), picked), (context, rectAttribute, themeAttribute) => {
+        if (!onlyTranslate || rect.shadowRoot || isNumber$1(cornerRadius, !0) && 0 !== cornerRadius || isArray$1(cornerRadius) && cornerRadius.some(num => 0 !== num)) picked = !1, this.canvasRenderer.drawShape(rect, pickContext, x, y, {}, null, (context, rectAttribute, themeAttribute) => !!picked || (picked = context.isPointInPath(point.x, point.y), picked), (context, rectAttribute, themeAttribute) => {
           if (picked) return !0;
           const lineWidth = rectAttribute.lineWidth || themeAttribute.lineWidth,
             pickStrokeBuffer = rectAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer,
@@ -32008,7 +31896,7 @@
 
     const roughModule = _roughModule;
 
-    const version = "0.22.9-alpha.2";
+    const version = "0.22.10";
     preLoadAllModule();
     if (isBrowserEnv()) {
         loadBrowserEnv(container);
@@ -32304,6 +32192,7 @@
     exports.StarRenderContribution = StarRenderContribution;
     exports.StaticLayerHandlerContribution = StaticLayerHandlerContribution;
     exports.Step = Step$1;
+    exports.StepClosed = StepClosed;
     exports.StreamLight = StreamLight;
     exports.SubAnimate = SubAnimate;
     exports.Symbol = Symbol$1;
@@ -32394,11 +32283,9 @@
     exports.createArc = createArc;
     exports.createArc3d = createArc3d;
     exports.createArea = createArea;
-    exports.createCanvasEventTransformer = createCanvasEventTransformer;
     exports.createCircle = createCircle;
     exports.createColor = createColor;
     exports.createConicalGradient = createConicalGradient;
-    exports.createEventTransformer = createEventTransformer;
     exports.createGifImage = createGifImage;
     exports.createGlyph = createGlyph;
     exports.createGroup = createGroup;
@@ -32487,6 +32374,7 @@
     exports.genMonotoneYSegments = genMonotoneYSegments;
     exports.genMonotoneYTypeSegments = genMonotoneYTypeSegments;
     exports.genNumberType = genNumberType;
+    exports.genStepClosedSegments = genStepClosedSegments;
     exports.genStepSegments = genStepSegments;
     exports.genStepTypeSegments = genStepTypeSegments;
     exports.generatorPathEasingFunc = generatorPathEasingFunc;
@@ -32557,7 +32445,6 @@
     exports.lottieCanvasPickModule = lottieCanvasPickModule;
     exports.lottieModule = lottieModule;
     exports.lynxEnvModule = lynxEnvModule;
-    exports.mapToCanvasPointForCanvas = mapToCanvasPointForCanvas;
     exports.mat3Tomat4 = mat3Tomat4;
     exports.mat4Allocate = mat4Allocate;
     exports.matrixAllocate = matrixAllocate;
@@ -32617,7 +32504,6 @@
     exports.registerFlexLayoutPlugin = registerFlexLayoutPlugin;
     exports.registerGifGraphic = registerGifGraphic;
     exports.registerGifImage = registerGifImage;
-    exports.registerGlobalEventTransformer = registerGlobalEventTransformer;
     exports.registerGlyph = registerGlyph;
     exports.registerGlyphGraphic = registerGlyphGraphic;
     exports.registerGroup = registerGroup;
@@ -32650,7 +32536,6 @@
     exports.registerText = registerText;
     exports.registerTextGraphic = registerTextGraphic;
     exports.registerViewTransform3dPlugin = registerViewTransform3dPlugin;
-    exports.registerWindowEventTransformer = registerWindowEventTransformer;
     exports.registerWrapText = registerWrapText;
     exports.registerWrapTextGraphic = registerWrapTextGraphic;
     exports.renderCommandList = renderCommandList;
@@ -32701,7 +32586,6 @@
     exports.textModule = textModule;
     exports.transformKeys = transformKeys;
     exports.transformMat4 = transformMat4;
-    exports.transformPointForCanvas = transformPointForCanvas;
     exports.transformUtil = transformUtil;
     exports.translate = translate;
     exports.ttEnvModule = ttEnvModule;