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

package/dist/index.js

@@ -2732,11 +2732,12 @@
       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);
@@ -3985,6 +3986,7 @@
       zIndex: 0,
       layout: null,
       boundsPadding: 0,
+      fillStrokeOrder: 0,
       renderStyle: "default",
       pickMode: "accurate",
       customPickShape: null,
@@ -4063,6 +4065,7 @@
     });
     const DefaultPathAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
       path: new CustomPath2D(),
+      fillStrokeOrder: 1,
       customPath: () => {
         Logger.getInstance().warn("空函数");
       }
@@ -4375,6 +4378,14 @@
         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);
@@ -4408,7 +4419,7 @@
       }
       _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) {
@@ -4416,18 +4427,18 @@
             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
@@ -5088,7 +5099,7 @@
       }
       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);
@@ -6012,7 +6023,7 @@
               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) => {
@@ -6229,7 +6240,8 @@
           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"
@@ -9088,7 +9100,7 @@
       }
       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));
@@ -12352,8 +12364,9 @@
       constructor() {
         super(...arguments), this.time = exports.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();
@@ -12506,7 +12519,8 @@
             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;
@@ -12542,7 +12556,17 @@
           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());
@@ -12560,14 +12584,20 @@
                 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);
@@ -12605,7 +12635,8 @@
             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;
@@ -12615,7 +12646,14 @@
           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;
@@ -13056,7 +13094,7 @@
         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;
@@ -13080,28 +13118,31 @@
           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;
@@ -13266,23 +13307,24 @@
           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 === exports.Direction.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 === exports.Direction.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;
       }
     };
     exports.DefaultCanvasAreaRender = __decorate$1v([injectable(), __param$N(0, inject(ContributionProvider)), __param$N(0, named(AreaRenderContribution)), __metadata$19("design:paramtypes", [Object])], exports.DefaultCanvasAreaRender);
@@ -13314,7 +13356,8 @@
         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);
@@ -13329,7 +13372,14 @@
           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;
@@ -13373,7 +13423,8 @@
             x1: x1,
             y1: y1,
             x: originX = rectAttribute.x,
-            y: originY = rectAttribute.y
+            y: originY = rectAttribute.y,
+            fillStrokeOrder = rectAttribute.fillStrokeOrder
           } = rect.attribute;
         let {
           width: width,
@@ -13392,7 +13443,14 @@
           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;
@@ -13428,7 +13486,8 @@
             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;
@@ -13451,14 +13510,27 @@
             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;
@@ -13845,7 +13917,8 @@
             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;
@@ -13855,7 +13928,14 @@
           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;
@@ -13898,7 +13978,10 @@
             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),
@@ -13924,7 +14007,14 @@
         };
         this._groupRenderContribitions.forEach(c => {
           c.time === exports.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 === exports.BaseRenderContributionTime.afterFillStroke && c.drawShape(group, context, x, y, doFill, doStroke, fVisible, sVisible, groupAttribute, drawContext, fillCb, strokeCb);
         });
       }
@@ -13990,6 +14080,7 @@
             x: originX = imageAttribute.x,
             y: originY = imageAttribute.y,
             cornerRadius = imageAttribute.cornerRadius,
+            fillStrokeOrder = imageAttribute.fillStrokeOrder,
             image: url
           } = image.attribute,
           data = this.valid(image, imageAttribute, fillCb);
@@ -14000,29 +14091,37 @@
           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;
@@ -18278,6 +18377,42 @@
       }
     }
 
+    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;
@@ -18480,7 +18615,7 @@
           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
         });
       }
@@ -18615,6 +18750,14 @@
           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()));
       }
@@ -19621,27 +19764,9 @@
       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) {
@@ -23527,9 +23652,11 @@
           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 = [];
@@ -23538,7 +23665,13 @@
       }
       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,
@@ -23678,7 +23811,7 @@
         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
@@ -23698,7 +23831,7 @@
           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 => {
@@ -23761,10 +23894,10 @@
                   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);
@@ -23840,6 +23973,7 @@
           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,
@@ -23847,7 +23981,7 @@
             } = emitThrottles[i];
             this.emitEvent(type, ev);
           }
-          this.throttleTimer = 0, this.emitThrottles.length = 0;
+          this.emitThrottles.length = 0;
         }));
       }
       triggerStartEvent(type, ev) {
@@ -28483,7 +28617,7 @@
 
     const roughModule = _roughModule;
 
-    const version = "0.21.0-alpha.2";
+    const version = "0.21.0-alpha.4";
     preLoadAllModule();
     if (isBrowserEnv()) {
         loadBrowserEnv(container);