@visactor/vrender 0.21.0-alpha.2 → 0.21.0-alpha.4

package/dist/index.es.js

@@ -2726,11 +2726,12 @@ function parseSvgPath(str) {
   for (let i = 0, len = paths.length; i < len; i++) if (currPath = paths[i], coordsStr = currPath.slice(1), commandChar = currPath[0], currCommandData = [commandChar], coordsStrArr = coordsStr.match(rePathCommand), null !== coordsStrArr) {
     for (let i = 0, len = coordsStrArr.length; i < len; i++) coordStr = coordsStrArr[i], coordNumber = parseFloat(coordStr), Number.isNaN(coordNumber) || currCommandData.push(coordNumber);
     if (standardCommandLen = commandLengths[commandChar], currCommandData.length - 1 > standardCommandLen) {
-      let subCommand;
+      let subCommand,
+        bestCommandChar = commandChar;
       for (let i = 1, len = currCommandData.length; i < len; i += standardCommandLen) {
-        subCommand = [commandChar];
+        subCommand = [bestCommandChar];
         for (let j = i, subLen = i + standardCommandLen; j < subLen; j++) subCommand.push(currCommandData[j]);
-        result.push(subCommand);
+        result.push(subCommand), "m" === bestCommandChar ? bestCommandChar = "l" : "M" === bestCommandChar && (bestCommandChar = "L");
       }
     } else result.push(currCommandData);
   } else result.push(currCommandData);
@@ -3979,6 +3980,7 @@ const DefaultAttribute = Object.assign(Object.assign(Object.assign({
   zIndex: 0,
   layout: null,
   boundsPadding: 0,
+  fillStrokeOrder: 0,
   renderStyle: "default",
   pickMode: "accurate",
   customPickShape: null,
@@ -4057,6 +4059,7 @@ const DefaultLineAttribute = Object.assign(Object.assign(Object.assign({}, Defau
 });
 const DefaultPathAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
   path: new CustomPath2D(),
+  fillStrokeOrder: 1,
   customPath: () => {
     Logger.getInstance().warn("空函数");
   }
@@ -4369,6 +4372,14 @@ let ATextMeasure = class {
     return data;
   }
   _clipTextEnd(text, options, width, leftIdx, rightIdx) {
+    if (leftIdx === rightIdx) {
+      Logger.getInstance().warn(`【_clipTextEnd】不应该走到这里${text}, ${leftIdx}, ${rightIdx}`);
+      const subText = text.substring(0, rightIdx + 1);
+      return {
+        str: subText,
+        width: this.measureTextWidth(subText, options)
+      };
+    }
     const middleIdx = Math.floor((leftIdx + rightIdx) / 2),
       subText = text.substring(0, middleIdx + 1),
       strWidth = this.measureTextWidth(subText, options);
@@ -4402,7 +4413,7 @@ let ATextMeasure = class {
   }
   _clipTextStart(text, options, width, leftIdx, rightIdx) {
     const middleIdx = Math.ceil((leftIdx + rightIdx) / 2),
-      subText = text.substring(middleIdx - 1, text.length - 1),
+      subText = text.substring(middleIdx - 1, text.length),
       strWidth = this.measureTextWidth(subText, options);
     let length;
     if (strWidth > width) {
@@ -4410,18 +4421,18 @@ let ATextMeasure = class {
         str: "",
         width: 0
       };
-      const str = text.substring(middleIdx, text.length - 1);
+      const str = text.substring(middleIdx, text.length);
       return length = this.measureTextWidth(str, options), length <= width ? {
         str: str,
         width: length
-      } : this._clipTextStart(text, options, width, middleIdx, text.length - 1);
+      } : this._clipTextStart(text, options, width, middleIdx, text.length);
     }
     if (strWidth < width) {
       if (middleIdx <= 0) return {
         str: text,
         width: this.measureTextWidth(text, options)
       };
-      const str = text.substring(middleIdx - 2, text.length - 1);
+      const str = text.substring(middleIdx - 2, text.length);
       return length = this.measureTextWidth(str, options), length >= width ? {
         str: subText,
         width: strWidth
@@ -5082,7 +5093,7 @@ let DefaultWindow = class {
   }
   hasSubView() {
     const viewBox = this._handler.getViewBox();
-    return !(0 === viewBox.x1 && 0 === viewBox.y1 && this.width === viewBox.width() && this.height === viewBox.height());
+    return !(0 === viewBox.x1 && 0 === viewBox.y1 && isNumberClose(this.width, viewBox.width()) && isNumberClose(this.height, viewBox.height()));
   }
   isVisible(bbox) {
     return this._handler.isVisible(bbox);
@@ -6006,7 +6017,7 @@ class EventManager {
           timeStamp: now
         });
         const clickHistory = trackingData.clicksByButton[from.button];
-        clickHistory.target === clickEvent.target && now - clickHistory.timeStamp < (null !== (_a = this._config.clickInterval) && void 0 !== _a ? _a : 200) ? ++clickHistory.clickCount : clickHistory.clickCount = 1, clickHistory.target = clickEvent.target, clickHistory.timeStamp = now, clickEvent.detail = clickHistory.clickCount, isMouseLike(clickEvent.pointerType) ? (this.dispatchEvent(clickEvent, "click"), 2 === clickHistory.clickCount && this.dispatchEvent(clickEvent, "dblclick")) : "touch" === clickEvent.pointerType && (this.dispatchEvent(clickEvent, "tap"), 2 === clickHistory.clickCount && this.dispatchEvent(clickEvent, "dbltap")), this.dispatchEvent(clickEvent, "pointertap"), this.freeEvent(clickEvent);
+        clickHistory.target === clickEvent.target && now - clickHistory.timeStamp < (null !== (_a = this._config.clickInterval) && void 0 !== _a ? _a : 200) ? ++clickHistory.clickCount : clickHistory.clickCount = 1, clickHistory.target = clickEvent.target, clickHistory.timeStamp = now, clickEvent.detail = clickHistory.clickCount, isMouseLike(clickEvent.pointerType) ? (this.dispatchEvent(clickEvent, "click"), 2 === clickHistory.clickCount && this.dispatchEvent(clickEvent, "dblclick")) : "touch" === clickEvent.pointerType && this._config.supportsTouchEvents && (this.dispatchEvent(clickEvent, "tap"), 2 === clickHistory.clickCount && this.dispatchEvent(clickEvent, "dbltap")), this.dispatchEvent(clickEvent, "pointertap"), this.freeEvent(clickEvent);
       }
       this.freeEvent(e);
     }, this.onPointerUpOutside = (from, target) => {
@@ -6223,7 +6234,8 @@ class EventSystem {
       supportsPointerEvents = global.supportsPointerEvents
     } = params;
     this.manager = new EventManager(rootNode, {
-      clickInterval: clickInterval
+      clickInterval: clickInterval,
+      supportsTouchEvents: supportsTouchEvents
     }), this.globalObj = global, this.supportsPointerEvents = supportsPointerEvents, this.supportsTouchEvents = supportsTouchEvents, this.supportsMouseEvents = global.supportsMouseEvents, this.applyStyles = global.applyStyles, this.autoPreventDefault = autoPreventDefault, this.eventsAdded = !1, this.rootPointerEvent = new FederatedPointerEvent(), this.rootWheelEvent = new FederatedWheelEvent(), this.cursorStyles = {
       default: "inherit",
       pointer: "pointer"
@@ -9082,7 +9094,7 @@ class ResourceLoader {
   }
   static GetFile(url, type) {
     let data = ResourceLoader.cache.get(url);
-    return data ? "init" === data.loadState || "fail" === data.loadState ? Promise.reject() : "loading" === data.loadState ? data.dataPromise.then(data => data.data) : Promise.resolve(data.data) : (data = {
+    return data ? "fail" === data.loadState ? Promise.reject() : "init" === data.loadState || "loading" === data.loadState ? data.dataPromise.then(data => data.data) : Promise.resolve(data.data) : (data = {
       type: type,
       loadState: "init"
     }, ResourceLoader.cache.set(url, data), "arrayBuffer" === type ? data.dataPromise = application.global.loadArrayBuffer(url) : "blob" === type ? data.dataPromise = application.global.loadBlob(url) : "json" === type && (data.dataPromise = application.global.loadJson(url)), data.dataPromise.then(data => data.data));
@@ -12346,8 +12358,9 @@ class DefaultImageRenderContribution extends DefaultRectRenderContribution {
   constructor() {
     super(...arguments), this.time = BaseRenderContributionTime.afterFillStroke, this.useStyle = !0, this.order = 0;
   }
-  drawShape(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb) {
-    return super.drawShape(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb);
+  drawShape(image, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb) {
+    if (!(image.isGifImage && image.renderFrame && image.playing)) return super.drawShape(image, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb);
+    image.renderFrame(context, x, y);
   }
 }
 const defaultImageRenderContribution = new DefaultImageRenderContribution();
@@ -12500,7 +12513,8 @@ let DefaultCanvasArcRender = class extends BaseRender {
         fill = arcAttribute.fill,
         stroke = arcAttribute.stroke,
         x: originX = arcAttribute.x,
-        y: originY = arcAttribute.y
+        y: originY = arcAttribute.y,
+        fillStrokeOrder = arcAttribute.fillStrokeOrder
       } = arc.attribute,
       data = this.valid(arc, arcAttribute, fillCb, strokeCb);
     if (!data) return;
@@ -12536,7 +12550,17 @@ let DefaultCanvasArcRender = class extends BaseRender {
       isFullStroke: isFullStroke,
       stroke: arrayStroke
     } = parseStroke(stroke);
-    if ((doFill || isFullStroke) && (context.beginPath(), drawArcPath$1(arc, context, x, y, outerRadius, innerRadius), beforeRenderContribitionsRuned = !0, context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute), this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb), doFill && (fillCb ? fillCb(context, arc.attribute, arcAttribute) : fVisible && (context.setCommonStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute), context.fill())), doStroke && isFullStroke && (strokeCb ? strokeCb(context, arc.attribute, arcAttribute) : sVisible && (context.setStrokeStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute), context.stroke()))), !isFullStroke && doStroke) {
+    if (doFill || isFullStroke) {
+      context.beginPath(), drawArcPath$1(arc, context, x, y, outerRadius, innerRadius), beforeRenderContribitionsRuned = !0, context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute), this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb);
+      const _runFill = () => {
+          doFill && (fillCb ? fillCb(context, arc.attribute, arcAttribute) : fVisible && (context.setCommonStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute), context.fill()));
+        },
+        _runStroke = () => {
+          doStroke && isFullStroke && (strokeCb ? strokeCb(context, arc.attribute, arcAttribute) : sVisible && (context.setStrokeStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute), context.stroke()));
+        };
+      fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke());
+    }
+    if (!isFullStroke && doStroke) {
       context.beginPath();
       drawArcPath$1(arc, context, x, y, outerRadius, innerRadius, arrayStroke);
       beforeRenderContribitionsRuned || this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb), strokeCb ? strokeCb(context, arc.attribute, arcAttribute) : sVisible && (context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute), context.stroke());
@@ -12554,14 +12578,20 @@ let DefaultCanvasArcRender = class extends BaseRender {
             fill = arcAttribute.fill
           } = arc.attribute,
           startAngle = endAngle;
-        if (this.drawArcTailCapPath(arc, context, x, y, outerRadius, innerRadius, startAngle, startAngle + capAngle), beforeRenderContribitionsRuned || this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb), doFill) {
-          const color = fill;
-          if ("conical" === color.gradient) {
-            const lastColor = getConicGradientAt(0, 0, endAngle, color);
-            fillCb || fillVisible && (context.setCommonStyle(arc, arc.attribute, x, y, arcAttribute), context.fillStyle = lastColor, context.fill());
-          }
-        }
-        doStroke && (strokeCb || sVisible && (context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute), context.stroke()));
+        this.drawArcTailCapPath(arc, context, x, y, outerRadius, innerRadius, startAngle, startAngle + capAngle), beforeRenderContribitionsRuned || this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb);
+        const _runFill = () => {
+            if (doFill) {
+              const color = fill;
+              if ("conical" === color.gradient) {
+                const lastColor = getConicGradientAt(0, 0, endAngle, color);
+                fillCb || fillVisible && (context.setCommonStyle(arc, arc.attribute, x, y, arcAttribute), context.fillStyle = lastColor, context.fill());
+              }
+            }
+          },
+          _runStroke = () => {
+            doStroke && (strokeCb || sVisible && (context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute), context.stroke()));
+          };
+        _runFill(), _runStroke();
       }
     }
     this.afterRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb), tempChangeConicalColor && (fill.startAngle += conicalOffset, fill.endAngle += conicalOffset);
@@ -12599,7 +12629,8 @@ let DefaultCanvasCircleRender = class extends BaseRender {
         startAngle = circleAttribute.startAngle,
         endAngle = circleAttribute.endAngle,
         x: originX = circleAttribute.x,
-        y: originY = circleAttribute.y
+        y: originY = circleAttribute.y,
+        fillStrokeOrder = circleAttribute.fillStrokeOrder
       } = circle.attribute,
       data = this.valid(circle, circleAttribute, fillCb, strokeCb);
     if (!data) return;
@@ -12609,7 +12640,14 @@ let DefaultCanvasCircleRender = class extends BaseRender {
       doFill: doFill,
       doStroke: doStroke
     } = data;
-    context.beginPath(), context.arc(x, y, radius, startAngle, endAngle), context.closePath(), context.setShadowBlendStyle && context.setShadowBlendStyle(circle, circle.attribute, circleAttribute), this.beforeRenderStep(circle, context, x, y, doFill, doStroke, fVisible, sVisible, circleAttribute, drawContext, fillCb, strokeCb), doFill && (fillCb ? fillCb(context, circle.attribute, circleAttribute) : fVisible && (context.setCommonStyle(circle, circle.attribute, originX - x, originY - y, circleAttribute), context.fill())), doStroke && (strokeCb ? strokeCb(context, circle.attribute, circleAttribute) : sVisible && (context.setStrokeStyle(circle, circle.attribute, originX - x, originY - y, circleAttribute), context.stroke())), this.afterRenderStep(circle, context, x, y, doFill, doStroke, fVisible, sVisible, circleAttribute, drawContext, fillCb, strokeCb);
+    context.beginPath(), context.arc(x, y, radius, startAngle, endAngle), context.closePath(), context.setShadowBlendStyle && context.setShadowBlendStyle(circle, circle.attribute, circleAttribute), this.beforeRenderStep(circle, context, x, y, doFill, doStroke, fVisible, sVisible, circleAttribute, drawContext, fillCb, strokeCb);
+    const _runFill = () => {
+        doFill && (fillCb ? fillCb(context, circle.attribute, circleAttribute) : fVisible && (context.setCommonStyle(circle, circle.attribute, originX - x, originY - y, circleAttribute), context.fill()));
+      },
+      _runStroke = () => {
+        doStroke && (strokeCb ? strokeCb(context, circle.attribute, circleAttribute) : sVisible && (context.setStrokeStyle(circle, circle.attribute, originX - x, originY - y, circleAttribute), context.stroke()));
+      };
+    fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(circle, context, x, y, doFill, doStroke, fVisible, sVisible, circleAttribute, drawContext, fillCb, strokeCb);
   }
   draw(circle, renderService, drawContext, params) {
     const circleAttribute = getTheme(circle, null == params ? void 0 : params.theme).circle;
@@ -13050,7 +13088,7 @@ let DefaultCanvasAreaRender = class extends BaseRender {
     super(), this.areaRenderContribitions = areaRenderContribitions, this.numberType = AREA_NUMBER_TYPE, this.builtinContributions = [defaultAreaTextureRenderContribution, defaultAreaBackgroundRenderContribution], this.init(areaRenderContribitions);
   }
   drawLinearAreaHighPerformance(area, context, fill, stroke, fillOpacity, strokeOpacity, offsetX, offsetY, areaAttribute, drawContext, params, fillCb, strokeCb) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c;
     const {
       points: points
     } = area.attribute;
@@ -13074,28 +13112,31 @@ let DefaultCanvasAreaRender = class extends BaseRender {
       x: originX = 0,
       x: originY = 0
     } = area.attribute;
-    if (!1 !== fill && (fillCb ? fillCb(context, area.attribute, areaAttribute) : fillOpacity && (context.setCommonStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute), context.fill())), this.afterRenderStep(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, areaAttribute, drawContext, fillCb, null, {
+    !1 !== fill && (fillCb ? fillCb(context, area.attribute, areaAttribute) : fillOpacity && (context.setCommonStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute), context.fill())), this.afterRenderStep(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, areaAttribute, drawContext, fillCb, null, {
       attribute: area.attribute
-    }), stroke) {
-      const {
-        stroke = areaAttribute && areaAttribute.stroke
-      } = area.attribute;
-      if (isArray$1(stroke) && (stroke[0] || stroke[2]) && !1 === stroke[1]) if (context.beginPath(), stroke[0]) {
-        context.moveTo(startP.x + offsetX, startP.y + offsetY, z);
-        for (let i = 1; i < points.length; i++) {
-          const p = points[i];
-          context.lineTo(p.x + offsetX, p.y + offsetY, z);
-        }
-      } else if (stroke[2]) {
-        const endP = points[points.length - 1];
-        context.moveTo(endP.x + offsetX, endP.y + offsetY, z);
-        for (let i = points.length - 2; i >= 0; i--) {
-          const p = points[i];
-          context.lineTo((null !== (_d = p.x1) && void 0 !== _d ? _d : p.x) + offsetX, (null !== (_e = p.y1) && void 0 !== _e ? _e : p.y) + offsetY, z);
+    }), (() => {
+      var _a, _b;
+      if (stroke) {
+        const {
+          stroke = areaAttribute && areaAttribute.stroke
+        } = area.attribute;
+        if (isArray$1(stroke) && (stroke[0] || stroke[2]) && !1 === stroke[1]) if (context.beginPath(), stroke[0]) {
+          context.moveTo(startP.x + offsetX, startP.y + offsetY, z);
+          for (let i = 1; i < points.length; i++) {
+            const p = points[i];
+            context.lineTo(p.x + offsetX, p.y + offsetY, z);
+          }
+        } else if (stroke[2]) {
+          const endP = points[points.length - 1];
+          context.moveTo(endP.x + offsetX, endP.y + offsetY, z);
+          for (let i = points.length - 2; i >= 0; i--) {
+            const p = points[i];
+            context.lineTo((null !== (_a = p.x1) && void 0 !== _a ? _a : p.x) + offsetX, (null !== (_b = p.y1) && void 0 !== _b ? _b : p.y) + offsetY, z);
+          }
         }
+        strokeCb ? strokeCb(context, area.attribute, areaAttribute) : (context.setStrokeStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute), context.stroke());
       }
-      strokeCb ? strokeCb(context, area.attribute, areaAttribute) : (context.setStrokeStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute), context.stroke());
-    }
+    })();
   }
   drawShape(area, context, x, y, drawContext, params, fillCb, strokeCb) {
     var _a, _b, _c, _d, _e, _f;
@@ -13260,23 +13301,24 @@ let DefaultCanvasAreaRender = class extends BaseRender {
       x: originX = 0,
       x: originY = 0
     } = attribute;
-    if (!1 !== fill && (fillCb ? fillCb(context, attribute, defaultAttribute) : fillOpacity && (context.setCommonStyle(area, connect ? connectedStyle : attribute, originX - offsetX, originY - offsetY, connect ? da : defaultAttribute), context.fill())), this.afterRenderStep(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, defaultAttribute, drawContext, fillCb, null, {
+    return !1 !== fill && (fillCb ? fillCb(context, attribute, defaultAttribute) : fillOpacity && (context.setCommonStyle(area, connect ? connectedStyle : attribute, originX - offsetX, originY - offsetY, connect ? da : defaultAttribute), context.fill())), this.afterRenderStep(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, defaultAttribute, drawContext, fillCb, null, {
       attribute: attribute
-    }), !1 !== stroke) if (strokeCb) strokeCb(context, attribute, defaultAttribute);else {
-      const {
-        stroke = defaultAttribute && defaultAttribute[1] && defaultAttribute[1].stroke
-      } = attribute;
-      isArray$1(stroke) && (stroke[0] || stroke[2]) && !1 === stroke[1] && (context.beginPath(), drawSegments(context.camera ? context : context.nativeContext, stroke[0] ? cache.top : cache.bottom, clipRange, direction === Direction$1.ROW ? "x" : "y", {
-        offsetX: offsetX,
-        offsetY: offsetY,
-        offsetZ: offsetZ,
-        drawConnect: connect,
-        mode: connectedType,
-        zeroX: connectedX,
-        zeroY: connectedY
-      })), context.setStrokeStyle(area, connect ? connectedStyle : attribute, originX - offsetX, originY - offsetY, connect ? da : defaultAttribute), context.stroke();
-    }
-    return !1;
+    }), (() => {
+      if (!1 !== stroke) if (strokeCb) strokeCb(context, attribute, defaultAttribute);else {
+        const {
+          stroke = defaultAttribute && defaultAttribute[1] && defaultAttribute[1].stroke
+        } = attribute;
+        isArray$1(stroke) && (stroke[0] || stroke[2]) && !1 === stroke[1] && (context.beginPath(), drawSegments(context.camera ? context : context.nativeContext, stroke[0] ? cache.top : cache.bottom, clipRange, direction === Direction$1.ROW ? "x" : "y", {
+          offsetX: offsetX,
+          offsetY: offsetY,
+          offsetZ: offsetZ,
+          drawConnect: connect,
+          mode: connectedType,
+          zeroX: connectedX,
+          zeroY: connectedY
+        })), context.setStrokeStyle(area, connect ? connectedStyle : attribute, originX - offsetX, originY - offsetY, connect ? da : defaultAttribute), context.stroke();
+      }
+    })(), !1;
   }
 };
 DefaultCanvasAreaRender = __decorate$1v([injectable(), __param$N(0, inject(ContributionProvider)), __param$N(0, named(AreaRenderContribution)), __metadata$19("design:paramtypes", [Object])], DefaultCanvasAreaRender);
@@ -13308,7 +13350,8 @@ let DefaultCanvasPathRender = class extends BaseRender {
     const pathAttribute = null !== (_a = this.tempTheme) && void 0 !== _a ? _a : getTheme(path, null == params ? void 0 : params.theme).path,
       {
         x: originX = pathAttribute.x,
-        y: originY = pathAttribute.y
+        y: originY = pathAttribute.y,
+        fillStrokeOrder = pathAttribute.fillStrokeOrder
       } = path.attribute,
       z = null !== (_b = this.z) && void 0 !== _b ? _b : 0,
       data = this.valid(path, pathAttribute, fillCb, strokeCb);
@@ -13323,7 +13366,14 @@ let DefaultCanvasPathRender = class extends BaseRender {
       const path2D = null !== (_c = path.attribute.path) && void 0 !== _c ? _c : pathAttribute.path;
       renderCommandList(path2D.commandList, context, x, y, 1, 1, z);
     }
-    context.setShadowBlendStyle && context.setShadowBlendStyle(path, path.attribute, pathAttribute), this.beforeRenderStep(path, context, x, y, doFill, doStroke, fVisible, sVisible, pathAttribute, drawContext, fillCb, strokeCb), doStroke && (strokeCb ? strokeCb(context, path.attribute, pathAttribute) : sVisible && (context.setStrokeStyle(path, path.attribute, originX - x, originY - y, pathAttribute), context.stroke())), doFill && (fillCb ? fillCb(context, path.attribute, pathAttribute) : fVisible && (context.setCommonStyle(path, path.attribute, originX - x, originY - y, pathAttribute), context.fill())), this.afterRenderStep(path, context, x, y, doFill, doStroke, fVisible, sVisible, pathAttribute, drawContext, fillCb, strokeCb);
+    context.setShadowBlendStyle && context.setShadowBlendStyle(path, path.attribute, pathAttribute), this.beforeRenderStep(path, context, x, y, doFill, doStroke, fVisible, sVisible, pathAttribute, drawContext, fillCb, strokeCb);
+    const _runStroke = () => {
+        doStroke && (strokeCb ? strokeCb(context, path.attribute, pathAttribute) : sVisible && (context.setStrokeStyle(path, path.attribute, originX - x, originY - y, pathAttribute), context.stroke()));
+      },
+      _runFill = () => {
+        doFill && (fillCb ? fillCb(context, path.attribute, pathAttribute) : fVisible && (context.setCommonStyle(path, path.attribute, originX - x, originY - y, pathAttribute), context.fill()));
+      };
+    fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(path, context, x, y, doFill, doStroke, fVisible, sVisible, pathAttribute, drawContext, fillCb, strokeCb);
   }
   draw(path, renderService, drawContext, params) {
     const pathAttribute = getTheme(path, null == params ? void 0 : params.theme).path;
@@ -13367,7 +13417,8 @@ let DefaultCanvasRectRender = class extends BaseRender {
         x1: x1,
         y1: y1,
         x: originX = rectAttribute.x,
-        y: originY = rectAttribute.y
+        y: originY = rectAttribute.y,
+        fillStrokeOrder = rectAttribute.fillStrokeOrder
       } = rect.attribute;
     let {
       width: width,
@@ -13386,7 +13437,14 @@ let DefaultCanvasRectRender = class extends BaseRender {
       doFill: doFill,
       doStroke: doStroke
     };
-    context.setShadowBlendStyle && context.setShadowBlendStyle(rect, rect.attribute, rectAttribute), this.beforeRenderStep(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb, doFillOrStroke), doFillOrStroke.doFill && (fillCb ? fillCb(context, rect.attribute, rectAttribute) : fVisible && (context.setCommonStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute), context.fill())), doFillOrStroke.doStroke && (strokeCb ? strokeCb(context, rect.attribute, rectAttribute) : sVisible && (context.setStrokeStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute), context.stroke())), this.afterRenderStep(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb);
+    context.setShadowBlendStyle && context.setShadowBlendStyle(rect, rect.attribute, rectAttribute), this.beforeRenderStep(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb, doFillOrStroke);
+    const _runFill = () => {
+        doFillOrStroke.doFill && (fillCb ? fillCb(context, rect.attribute, rectAttribute) : fVisible && (context.setCommonStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute), context.fill()));
+      },
+      _runStroke = () => {
+        doFillOrStroke.doStroke && (strokeCb ? strokeCb(context, rect.attribute, rectAttribute) : sVisible && (context.setStrokeStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute), context.stroke()));
+      };
+    fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb);
   }
   draw(rect, renderService, drawContext, params) {
     const rectAttribute = getTheme(rect, null == params ? void 0 : params.theme).rect;
@@ -13422,7 +13480,8 @@ let DefaultCanvasSymbolRender = class extends BaseRender {
         x: originX = symbolAttribute.x,
         y: originY = symbolAttribute.y,
         scaleX = symbolAttribute.scaleX,
-        scaleY = symbolAttribute.scaleY
+        scaleY = symbolAttribute.scaleY,
+        fillStrokeOrder = symbolAttribute.fillStrokeOrder
       } = symbol.attribute,
       data = this.valid(symbol, symbolAttribute, fillCb, strokeCb);
     if (!data) return;
@@ -13445,14 +13504,27 @@ let DefaultCanvasSymbolRender = class extends BaseRender {
         const obj = Object.assign({}, a);
         obj.fill = null !== (_a = a.fill) && void 0 !== _a ? _a : symbol.attribute.fill, obj.opacity = null !== (_b = a.opacity) && void 0 !== _b ? _b : symbol.attribute.opacity, obj.fillOpacity = symbol.attribute.fillOpacity, obj.stroke = null !== (_c = a.stroke) && void 0 !== _c ? _c : symbol.attribute.stroke, a = obj;
       }
-      a.fill && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : (context.setCommonStyle(symbol, a, originX - x, originY - y, symbolAttribute), context.fill())), a.stroke && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : (context.setStrokeStyle(symbol, a, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke()));
+      const _runFill = () => {
+          a.fill && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : (context.setCommonStyle(symbol, a, originX - x, originY - y, symbolAttribute), context.fill()));
+        },
+        _runStroke = () => {
+          a.stroke && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : (context.setStrokeStyle(symbol, a, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke()));
+        };
+      fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke());
     };
     if (keepDirIn3d && context.camera && context.project) {
       const p = context.project(x, y, z),
         camera = context.camera;
       context.camera = null, !1 === parsedPath.draw(context, isArray$1(size) ? [size[0] * scaleX, size[1] * scaleY] : size * scaleX, p.x, p.y, void 0, callback) && context.closePath(), context.camera = camera;
     } else !1 === parsedPath.draw(context, size, x, y, z, callback) && context.closePath();
-    context.setShadowBlendStyle && context.setShadowBlendStyle(symbol, symbol.attribute, symbolAttribute), this.beforeRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb), doFill && !parsedPath.isSvg && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : fVisible && (context.setCommonStyle(symbol, symbol.attribute, originX - x, originY - y, symbolAttribute), context.fill())), doStroke && !parsedPath.isSvg && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : sVisible && (context.setStrokeStyle(symbol, symbol.attribute, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke())), this.afterRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb);
+    context.setShadowBlendStyle && context.setShadowBlendStyle(symbol, symbol.attribute, symbolAttribute), this.beforeRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb);
+    const _runFill = () => {
+        doFill && !parsedPath.isSvg && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : fVisible && (context.setCommonStyle(symbol, symbol.attribute, originX - x, originY - y, symbolAttribute), context.fill()));
+      },
+      _runStroke = () => {
+        doStroke && !parsedPath.isSvg && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : sVisible && (context.setStrokeStyle(symbol, symbol.attribute, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke()));
+      };
+    fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb);
   }
   draw(symbol, renderService, drawContext, params) {
     const symbolAttribute = getTheme(symbol, null == params ? void 0 : params.theme).symbol;
@@ -13839,7 +13911,8 @@ let DefaultCanvasPolygonRender = class extends BaseRender {
         cornerRadius = polygonAttribute.cornerRadius,
         x: originX = polygonAttribute.x,
         y: originY = polygonAttribute.y,
-        closePath = polygonAttribute.closePath
+        closePath = polygonAttribute.closePath,
+        fillStrokeOrder = polygonAttribute.fillStrokeOrder
       } = polygon.attribute,
       data = this.valid(polygon, polygonAttribute, fillCb, strokeCb);
     if (!data) return;
@@ -13849,7 +13922,14 @@ let DefaultCanvasPolygonRender = class extends BaseRender {
       doFill: doFill,
       doStroke: doStroke
     } = data;
-    context.beginPath(), cornerRadius <= 0 || isArray$1(cornerRadius) && cornerRadius.every(num => 0 === num) ? drawPolygon(context.camera ? context : context.nativeContext, points, x, y) : drawRoundedPolygon(context.camera ? context : context.nativeContext, points, x, y, cornerRadius, closePath), closePath && context.closePath(), context.setShadowBlendStyle && context.setShadowBlendStyle(polygon, polygon.attribute, polygonAttribute), this.beforeRenderStep(polygon, context, x, y, doFill, doStroke, fVisible, sVisible, polygonAttribute, drawContext, fillCb, strokeCb), doFill && (fillCb ? fillCb(context, polygon.attribute, polygonAttribute) : fVisible && (context.setCommonStyle(polygon, polygon.attribute, originX - x, originY - y, polygonAttribute), context.fill())), doStroke && (strokeCb ? strokeCb(context, polygon.attribute, polygonAttribute) : sVisible && (context.setStrokeStyle(polygon, polygon.attribute, originX - x, originY - y, polygonAttribute), context.stroke())), this.afterRenderStep(polygon, context, x, y, doFill, doStroke, fVisible, sVisible, polygonAttribute, drawContext, fillCb, strokeCb);
+    context.beginPath(), cornerRadius <= 0 || isArray$1(cornerRadius) && cornerRadius.every(num => 0 === num) ? drawPolygon(context.camera ? context : context.nativeContext, points, x, y) : drawRoundedPolygon(context.camera ? context : context.nativeContext, points, x, y, cornerRadius, closePath), closePath && context.closePath(), context.setShadowBlendStyle && context.setShadowBlendStyle(polygon, polygon.attribute, polygonAttribute), this.beforeRenderStep(polygon, context, x, y, doFill, doStroke, fVisible, sVisible, polygonAttribute, drawContext, fillCb, strokeCb);
+    const _runFill = () => {
+        doFill && (fillCb ? fillCb(context, polygon.attribute, polygonAttribute) : fVisible && (context.setCommonStyle(polygon, polygon.attribute, originX - x, originY - y, polygonAttribute), context.fill()));
+      },
+      _runStroke = () => {
+        doStroke && (strokeCb ? strokeCb(context, polygon.attribute, polygonAttribute) : sVisible && (context.setStrokeStyle(polygon, polygon.attribute, originX - x, originY - y, polygonAttribute), context.stroke()));
+      };
+    fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(polygon, context, x, y, doFill, doStroke, fVisible, sVisible, polygonAttribute, drawContext, fillCb, strokeCb);
   }
   draw(polygon, renderService, drawContext, params) {
     const polygonAttribute = getTheme(polygon, null == params ? void 0 : params.theme).polygon;
@@ -13892,7 +13972,10 @@ let DefaultCanvasGroupRender = class {
         cornerRadius = groupAttribute.cornerRadius,
         path = groupAttribute.path,
         lineWidth = groupAttribute.lineWidth,
-        visible = groupAttribute.visible
+        visible = groupAttribute.visible,
+        fillStrokeOrder = groupAttribute.fillStrokeOrder,
+        x: originX = groupAttribute.x,
+        y: originY = groupAttribute.y
       } = group.attribute,
       fVisible = rectFillVisible(opacity, fillOpacity, width, height, fill),
       sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height),
@@ -13918,7 +14001,14 @@ let DefaultCanvasGroupRender = class {
     };
     this._groupRenderContribitions.forEach(c => {
       c.time === BaseRenderContributionTime.beforeFillStroke && c.drawShape(group, context, x, y, doFill, doStroke, fVisible, sVisible, groupAttribute, drawContext, fillCb, strokeCb, doFillOrStroke);
-    }), clip && context.clip(), context.setShadowBlendStyle && context.setShadowBlendStyle(group, group.attribute, groupAttribute), doFillOrStroke.doFill && (fillCb ? fillCb(context, group.attribute, groupAttribute) : fVisible && (context.setCommonStyle(group, group.attribute, x, y, groupAttribute), context.fill())), doFillOrStroke.doStroke && (strokeCb ? strokeCb(context, group.attribute, groupAttribute) : sVisible && (context.setStrokeStyle(group, group.attribute, x, y, groupAttribute), context.stroke())), this._groupRenderContribitions.forEach(c => {
+    }), clip && context.clip(), context.setShadowBlendStyle && context.setShadowBlendStyle(group, group.attribute, groupAttribute);
+    const _runFill = () => {
+        doFillOrStroke.doFill && (fillCb ? fillCb(context, group.attribute, groupAttribute) : fVisible && (context.setCommonStyle(group, group.attribute, originX - x, originY - y, groupAttribute), context.fill()));
+      },
+      _runStroke = () => {
+        doFillOrStroke.doStroke && (strokeCb ? strokeCb(context, group.attribute, groupAttribute) : sVisible && (context.setStrokeStyle(group, group.attribute, originX - x, originY - y, groupAttribute), context.stroke()));
+      };
+    fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this._groupRenderContribitions.forEach(c => {
       c.time === BaseRenderContributionTime.afterFillStroke && c.drawShape(group, context, x, y, doFill, doStroke, fVisible, sVisible, groupAttribute, drawContext, fillCb, strokeCb);
     });
   }
@@ -13984,6 +14074,7 @@ let DefaultCanvasImageRender = class extends BaseRender {
         x: originX = imageAttribute.x,
         y: originY = imageAttribute.y,
         cornerRadius = imageAttribute.cornerRadius,
+        fillStrokeOrder = imageAttribute.fillStrokeOrder,
         image: url
       } = image.attribute,
       data = this.valid(image, imageAttribute, fillCb);
@@ -13994,29 +14085,37 @@ let DefaultCanvasImageRender = class extends BaseRender {
       doFill: doFill,
       doStroke: doStroke
     } = data;
-    if (context.setShadowBlendStyle && context.setShadowBlendStyle(image, imageAttribute), this.beforeRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb), doFill) if (fillCb) fillCb(context, image.attribute, imageAttribute);else if (fVisible) {
-      if (!url || !image.resources) return;
-      const res = image.resources.get(url);
-      if ("success" !== res.state) return;
-      let needRestore = !1;
-      0 === cornerRadius || isArray$1(cornerRadius) && cornerRadius.every(num => 0 === num) || (context.beginPath(), createRectPath(context, x, y, width, height, cornerRadius), context.save(), context.clip(), needRestore = !0), context.setCommonStyle(image, image.attribute, x, y, imageAttribute);
-      let repeat = 0;
-      if ("repeat" === repeatX && (repeat |= 1), "repeat" === repeatY && (repeat |= 2), repeat) {
-        const pattern = context.createPattern(res.data, repeatStr[repeat]);
-        context.fillStyle = pattern, context.translate(x, y, !0), context.fillRect(0, 0, width, height), context.translate(-x, -y, !0);
-      } else context.drawImage(res.data, x, y, width, height);
-      needRestore && context.restore();
-    }
-    doStroke && (strokeCb ? strokeCb(context, image.attribute, imageAttribute) : sVisible && (context.setStrokeStyle(image, image.attribute, originX - x, originY - y, imageAttribute), context.stroke())), this.afterRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb);
+    context.setShadowBlendStyle && context.setShadowBlendStyle(image, imageAttribute), this.beforeRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb);
+    const _runFill = () => {
+        if (doFill) if (fillCb) fillCb(context, image.attribute, imageAttribute);else if (fVisible) {
+          if (!url || !image.resources) return;
+          const res = image.resources.get(url);
+          if ("success" !== res.state) return;
+          let needRestore = !1;
+          0 === cornerRadius || isArray$1(cornerRadius) && cornerRadius.every(num => 0 === num) || (context.beginPath(), createRectPath(context, x, y, width, height, cornerRadius), context.save(), context.clip(), needRestore = !0), context.setCommonStyle(image, image.attribute, x, y, imageAttribute);
+          let repeat = 0;
+          if ("repeat" === repeatX && (repeat |= 1), "repeat" === repeatY && (repeat |= 2), repeat) {
+            const pattern = context.createPattern(res.data, repeatStr[repeat]);
+            context.fillStyle = pattern, context.translate(x, y, !0), context.fillRect(0, 0, width, height), context.translate(-x, -y, !0);
+          } else context.drawImage(res.data, x, y, width, height);
+          needRestore && context.restore();
+        }
+      },
+      _runStroke = () => {
+        doStroke && (strokeCb ? strokeCb(context, image.attribute, imageAttribute) : sVisible && (context.setStrokeStyle(image, image.attribute, originX - x, originY - y, imageAttribute), context.stroke()));
+      };
+    fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb);
   }
   draw(image, renderService, drawContext) {
     const {
       image: url
     } = image.attribute;
-    if (!url || !image.resources) return;
-    const res = image.resources.get(url);
-    if ("loading" === res.state && isString$1(url)) return void ResourceLoader.improveImageLoading(url);
-    if ("success" !== res.state) return;
+    if (!image.isGifImage) {
+      if (!url || !image.resources) return;
+      const res = image.resources.get(url);
+      if ("loading" === res.state && isString$1(url)) return void ResourceLoader.improveImageLoading(url);
+      if ("success" !== res.state) return;
+    }
     const {
       context: context
     } = renderService.drawParams;
@@ -18272,6 +18371,42 @@ class AutoRenderPlugin {
   }
 }
 
+class AutoRefreshPlugin {
+  constructor() {
+    this.name = "AutoRefreshPlugin", this.activeEvent = "onRegister", this._uid = Generator.GenAutoIncrementId(), this.key = this.name + this._uid, this.handleChange = graphic => {
+      graphic.glyphHost && (graphic = graphic.glyphHost), graphic.stage === this.pluginService.stage && null != graphic.stage && graphic.stage.renderNextFrame();
+    };
+  }
+  activate(context) {
+    this.pluginService = context, this.dpr = application.global.devicePixelRatio, this.refresh();
+  }
+  refresh() {
+    this._refreshByMediaQuery() || this._refreshByRaf();
+  }
+  _refreshByRaf() {
+    const raf = application.global.getRequestAnimationFrame();
+    this.rafId = raf(() => {
+      application.global.devicePixelRatio !== this.dpr && (this.dpr = application.global.devicePixelRatio, this.pluginService.stage.setDpr(this.dpr, !0)), this.refresh();
+    });
+  }
+  _refreshByMediaQuery() {
+    try {
+      const mqString = `(resolution: ${window.devicePixelRatio}dppx)`,
+        updatePixelRatio = () => {
+          window.devicePixelRatio !== this.dpr && (this.dpr = window.devicePixelRatio, this.pluginService.stage.setDpr(this.dpr, !0));
+        };
+      matchMedia(mqString).addEventListener("change", updatePixelRatio);
+    } catch (err) {
+      return !1;
+    }
+    return !0;
+  }
+  deactivate(context) {
+    const craf = application.global.getCancelAnimationFrame();
+    craf && this.rafId && craf(this.rafId);
+  }
+}
+
 class IncrementalAutoRenderPlugin {
   constructor() {
     this.name = "IncrementalAutoRenderPlugin", this.activeEvent = "onRegister", this.nextFrameRenderGroupSet = new Set(), this.willNextFrameRender = !1, this.nextUserParams = {}, this._uid = Generator.GenAutoIncrementId(), this.key = this.name + this._uid;
@@ -18474,7 +18609,7 @@ class Stage extends Group {
       canvas: params.canvas
     }), this.state = "normal", this.renderCount = 0, this.tryInitEventSystem(), this._background = null !== (_a = params.background) && void 0 !== _a ? _a : DefaultConfig$1.BACKGROUND, this.appendChild(this.layerService.createLayer(this, {
       main: !0
-    })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.stage = this, this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), params.ReactDOM && this.enableReactAttribute(params.ReactDOM), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), this._beforeRender = params.beforeRender, this._afterRender = params.afterRender, this.ticker = params.ticker || defaultTicker, this.supportInteractiveLayer = !1 !== params.interactiveLayer, this.timeline = new DefaultTimeline(), this.ticker.addTimeline(this.timeline), this.timeline.pause(), params.optimize || (params.optimize = {}), this.optmize(params.optimize), params.background && isString$1(this._background) && this._background.includes("/") && this.setAttributes({
+    })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.stage = this, this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), params.autoRefresh && this.enableAutoRefresh(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), params.ReactDOM && this.enableReactAttribute(params.ReactDOM), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), this._beforeRender = params.beforeRender, this._afterRender = params.afterRender, this.ticker = params.ticker || defaultTicker, this.supportInteractiveLayer = !1 !== params.interactiveLayer, this.timeline = new DefaultTimeline(), this.ticker.addTimeline(this.timeline), this.timeline.pause(), params.optimize || (params.optimize = {}), this.optmize(params.optimize), params.background && isString$1(this._background) && this._background.includes("/") && this.setAttributes({
       background: this._background
     });
   }
@@ -18609,6 +18744,14 @@ class Stage extends Group {
       this.pluginService.unRegister(plugin);
     }));
   }
+  enableAutoRefresh() {
+    this.autoRefresh || (this.autoRefresh = !0, this.pluginService.register(new AutoRefreshPlugin()));
+  }
+  disableAutoRefresh() {
+    this.autoRefresh && (this.autoRefresh = !1, this.pluginService.findPluginsByName("AutoRefreshPlugin").forEach(plugin => {
+      this.pluginService.unRegister(plugin);
+    }));
+  }
   enableIncrementalAutoRender() {
     this.increaseAutoRender || (this.increaseAutoRender = !0, this.pluginService.register(new IncrementalAutoRenderPlugin()));
   }
@@ -19615,27 +19758,9 @@ function simplifyRadialDist(points, sqTolerance) {
   for (let i = 1, len = points.length; i < len; i++) deltaX = points[i].x - lastX, deltaY = points[i].y - lastY, deltaX * deltaX + deltaY * deltaY > sqTolerance && (lastX = points[i].x, lastY = points[i].y, newPoints.push(points[i]));
   return points[points.length - 1].x === lastX && points[points.length - 1].y === lastY || newPoints.push(points[points.length - 1]), newPoints;
 }
-function simplifyDPStep(points, startIdx, endIdx, sqTolerance, simplified) {
-  let maxSqDist = sqTolerance,
-    nextIdx = startIdx;
-  const startX = points[startIdx].x,
-    startY = points[startIdx].y,
-    vecX2 = points[endIdx].x - startX,
-    vecY2 = points[endIdx].y - startY,
-    sqLength = vecX2 * vecX2 + vecY2 * vecY2;
-  let area, sqArea, sqDistance, vecX1, vecY1;
-  for (let i = startIdx + 1, len = endIdx - 1; i < len; i++) vecX1 = points[i].x - startX, vecY1 = points[i].y - startY, area = vecX1 * vecY2 - vecX2 * vecY1, sqArea = area * area, sqDistance = sqArea / sqLength, sqDistance > maxSqDist && (maxSqDist = sqDistance, nextIdx = i);
-  maxSqDist > sqTolerance && (nextIdx - startIdx > 2 && simplifyDPStep(points, startIdx, nextIdx, sqTolerance, simplified), simplified.push(points[nextIdx], points[nextIdx + 1]), endIdx - nextIdx > 2 && simplifyDPStep(points, nextIdx, endIdx, sqTolerance, simplified));
-}
-function simplifyDouglasPeucker(points, sqTolerance) {
-  const lastIdx = points.length - 1,
-    simplified = [points[0]];
-  return simplifyDPStep(points, 0, lastIdx, sqTolerance, simplified), simplified.push(points[lastIdx]), simplified;
-}
 function flatten_simplify(points, tolerance, highestQuality) {
   if (points.length <= 10) return points;
-  const sqTolerance = void 0 !== tolerance ? tolerance * tolerance : 1;
-  return points = simplifyDouglasPeucker(points = highestQuality ? points : simplifyRadialDist(points, sqTolerance), sqTolerance);
+  return points = highestQuality ? points : simplifyRadialDist(points, void 0 !== tolerance ? tolerance * tolerance : 1);
 }
 
 function findCursorIndexIgnoreLinebreak(textConfig, cursorIndex) {
@@ -23521,9 +23646,11 @@ function jsx(type, config) {
       name: name,
       id: id,
       attribute: attribute,
-      stateProxy: stateProxy
+      stateProxy: stateProxy,
+      animation: animation,
+      timeline: timeline
     } = _a,
-    props = __rest(_a, ["key", "name", "id", "attribute", "stateProxy"]);
+    props = __rest(_a, ["key", "name", "id", "attribute", "stateProxy", "animation", "timeline"]);
   let c = type;
   isString$1(type) && (c = graphicCreator[type]);
   const childrenList = [];
@@ -23532,7 +23659,13 @@ function jsx(type, config) {
   }
   children.length && flatten(1 === children.length ? children[0] : children, childrenList);
   const g = "Group" === c.name ? new c(attribute) : c(config);
-  return parseToGraphic$1(g, childrenList, props), stateProxy && (g.stateProxy = stateProxy), g;
+  if (parseToGraphic$1(g, childrenList, props), stateProxy && (g.stateProxy = stateProxy), name && (g.name = name), isArray$1(animation)) {
+    const animate = g.animate();
+    timeline && animate.setTimeline(timeline), animation.forEach(item => {
+      animate[item[0]](...item.slice(1));
+    });
+  }
+  return g;
 }
 function parseToGraphic$1(g, childrenList, props) {
   let out,
@@ -23672,7 +23805,7 @@ class Gesture extends EventEmitter {
     let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     super(), this.cachedEvents = [], this.startPoints = [], this.processEvent = {}, this.throttleTimer = 0, this.emitThrottles = [], this.lastTapTarget = null, this.onStart = ev => {
-      this.reset(), this.startTime = clock.now();
+      this.cachedEvents = [], this.startPoints = [], this.reset(), this.startTime = clock.now();
       const {
         cachedEvents: cachedEvents,
         startPoints: startPoints
@@ -23692,7 +23825,7 @@ class Gesture extends EventEmitter {
       if (1 !== startPoints.length) this.startDistance = calcDistance(startPoints[0], startPoints[1]), this.center = getCenter([startPoints[0], startPoints[1]]);else {
         const event = cachedEvents[0];
         this.pressTimeout = setTimeout(() => {
-          event.direction = "none", event.deltaX = 0, event.deltaY = 0, event.points = startPoints, this.triggerStartEvent("press", event), this.triggerEvent("press", event), this.eventType = "press", this.direction = "none";
+          event.direction = "none", event.deltaX = 0, event.deltaY = 0, event.points = startPoints, this.triggerStartEvent("press", event), this.triggerEvent("press", event), this.eventType = "press", this.direction = "none", this.pressTimeout = null;
         }, this.config.press.time);
       }
     }, this.onMove = ev => {
@@ -23755,10 +23888,10 @@ class Gesture extends EventEmitter {
               lastMovePoint = this.lastMovePoint || startPoints[0],
               distance = calcDistance(prevMovePoint, lastMovePoint),
               velocity = distance / intervalTime;
-            velocity > this.config.swipe.velocity && distance > this.config.swipe.threshold && (endEvent.velocity = velocity, endEvent.direction = calcDirection(prevMovePoint, lastMovePoint), this.triggerEvent("swipe", endEvent));
+            if (velocity > this.config.swipe.velocity && distance > this.config.swipe.threshold) return endEvent.velocity = velocity, endEvent.direction = calcDirection(prevMovePoint, lastMovePoint), this.triggerEvent("swipe", endEvent), this.cachedEvents = [], this.startPoints = [], void this.reset();
           }
         }
-        now - this.lastTapTime < this.config.tap.interval && ev.target === this.lastTapTarget ? this.tapCount++ : this.tapCount = 1, this.lastTapTime = now, this.lastTapTarget = ev.target, 1 === this.tapCount ? this.triggerEvent("tap", endEvent) : 2 === this.tapCount && (this.triggerEvent("doubletap", endEvent), this.tapCount = 0);
+        now - this.startTime < this.config.press.time && (now - this.lastTapTime < this.config.tap.interval && ev.target === this.lastTapTarget ? this.tapCount++ : this.tapCount = 1, this.lastTapTime = now, this.lastTapTarget = ev.target, 1 === this.tapCount ? this.triggerEvent("tap", endEvent) : 2 === this.tapCount && (this.triggerEvent("doubletap", endEvent), this.tapCount = 0));
       }
       for (let i = 0, len = cachedEvents.length; i < len; i++) if (cachedEvents[i].pointerId === endEvent.pointerId) {
         cachedEvents.splice(i, 1), startPoints.splice(i, 1);
@@ -23834,6 +23967,7 @@ class Gesture extends EventEmitter {
       emitThrottles: emitThrottles
     } = this;
     throttleTimer || (this.throttleTimer = application.global.getRequestAnimationFrame()(() => {
+      application.global.getCancelAnimationFrame()(this.throttleTimer), this.throttleTimer = null;
       for (let i = 0, len = emitThrottles.length; i < len; i++) {
         const {
           type: type,
@@ -23841,7 +23975,7 @@ class Gesture extends EventEmitter {
         } = emitThrottles[i];
         this.emitEvent(type, ev);
       }
-      this.throttleTimer = 0, this.emitThrottles.length = 0;
+      this.emitThrottles.length = 0;
     }));
   }
   triggerStartEvent(type, ev) {
@@ -28477,7 +28611,7 @@ const registerWrapText = _registerWrapText;
 
 const roughModule = _roughModule;
 
-const version = "0.21.0-alpha.2";
+const version = "0.21.0-alpha.4";
 preLoadAllModule();
 if (isBrowserEnv()) {
     loadBrowserEnv(container);