@visactor/vrender 0.21.0-alpha.1 → 0.21.0-alpha.3

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);
@@ -3918,6 +3919,7 @@
     const DefaultTextStyle = {
       text: "",
       maxLineWidth: 1 / 0,
+      maxWidth: 1 / 0,
       textAlign: "left",
       textBaseline: "alphabetic",
       fontSize: 16,
@@ -3985,6 +3987,7 @@
       zIndex: 0,
       layout: null,
       boundsPadding: 0,
+      fillStrokeOrder: 0,
       renderStyle: "default",
       pickMode: "accurate",
       customPickShape: null,
@@ -4063,6 +4066,7 @@
     });
     const DefaultPathAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
       path: new CustomPath2D(),
+      fillStrokeOrder: 1,
       customPath: () => {
         Logger.getInstance().warn("空函数");
       }
@@ -4268,10 +4272,32 @@
       configure(service, env) {
         this.canvas = service.canvas, this.context = service.context, service.bindTextMeasure(this);
       }
-      measureTextWidth(text, options) {
-        if (!this.context) return this.estimate(text, options).width;
+      _measureTextWithoutAlignBaseline(text, options, compatible) {
         this.context.setTextStyleWithoutAlignBaseline(options);
-        return this.context.measureText(text).width;
+        const metrics = this.context.measureText(text);
+        return compatible ? this.compatibleMetrics(metrics, options) : metrics;
+      }
+      _measureTextWithAlignBaseline(text, options, compatible) {
+        this.context.setTextStyle(options);
+        const metrics = this.context.measureText(text);
+        return compatible ? this.compatibleMetrics(metrics, options) : metrics;
+      }
+      compatibleMetrics(metrics, options) {
+        if (null == metrics.actualBoundingBoxAscent || null == metrics.actualBoundingBoxDescent || null == metrics.fontBoundingBoxAscent || null == metrics.fontBoundingBoxDescent) {
+          const {
+            ascent: ascent,
+            descent: descent
+          } = this.measureTextBoundADscentEstimate(options);
+          metrics.actualBoundingBoxAscent = ascent, metrics.actualBoundingBoxDescent = descent, metrics.fontBoundingBoxAscent = ascent, metrics.fontBoundingBoxDescent = descent;
+        }
+        if (null == metrics.actualBoundingBoxLeft || null == metrics.actualBoundingBoxRight) {
+          const {
+            left: left,
+            right: right
+          } = this.measureTextBoundLeftRightEstimate(options);
+          metrics.actualBoundingBoxLeft = left, metrics.actualBoundingBoxRight = right;
+        }
+        return metrics;
       }
       estimate(text, _ref) {
         let {
@@ -4285,19 +4311,85 @@
           height: fontSize
         };
       }
-      measureTextPixelHeight(text, options) {
+      measureTextWidth(text, options, textMeasure) {
+        return this.context ? (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithoutAlignBaseline(text, options)).width : this.estimate(text, options).width;
+      }
+      measureTextBoundsWidth(text, options, textMeasure) {
+        return this.context ? (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithoutAlignBaseline(text, options)).width : this.estimate(text, options).width;
+      }
+      measureTextBoundsLeftRight(text, options, textMeasure) {
+        return this.context ? {
+          left: (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithAlignBaseline(text, options, !0)).actualBoundingBoxLeft,
+          right: textMeasure.actualBoundingBoxRight
+        } : this.measureTextBoundLeftRightEstimate(options);
+      }
+      measureTextPixelHeight(text, options, textMeasure) {
         var _a;
-        if (!this.context) return null !== (_a = options.fontSize) && void 0 !== _a ? _a : DefaultTextStyle.fontSize;
-        this.context.setTextStyleWithoutAlignBaseline(options);
-        const textMeasure = this.context.measureText(text);
-        return Math.abs(textMeasure.actualBoundingBoxAscent - textMeasure.actualBoundingBoxDescent);
+        return this.context ? (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithoutAlignBaseline(text, options, !0), Math.abs(textMeasure.actualBoundingBoxAscent - textMeasure.actualBoundingBoxDescent)) : null !== (_a = options.fontSize) && void 0 !== _a ? _a : DefaultTextStyle.fontSize;
+      }
+      measureTextPixelADscent(text, options, textMeasure) {
+        return this.context ? {
+          ascent: (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithAlignBaseline(text, options, !0)).actualBoundingBoxAscent,
+          descent: textMeasure.actualBoundingBoxDescent
+        } : this.measureTextBoundADscentEstimate(options);
       }
-      measureTextBoundHieght(text, options) {
+      measureTextBoundHieght(text, options, textMeasure) {
         var _a;
-        if (!this.context) return null !== (_a = options.fontSize) && void 0 !== _a ? _a : DefaultTextStyle.fontSize;
-        this.context.setTextStyleWithoutAlignBaseline(options);
-        const textMeasure = this.context.measureText(text);
-        return Math.abs(textMeasure.fontBoundingBoxAscent - textMeasure.fontBoundingBoxDescent);
+        return this.context ? (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithoutAlignBaseline(text, options, !0), Math.abs(textMeasure.fontBoundingBoxAscent - textMeasure.fontBoundingBoxDescent)) : null !== (_a = options.fontSize) && void 0 !== _a ? _a : DefaultTextStyle.fontSize;
+      }
+      measureTextBoundADscent(text, options, textMeasure) {
+        return this.context ? {
+          ascent: (textMeasure = null != textMeasure ? textMeasure : this._measureTextWithAlignBaseline(text, options, !0)).fontBoundingBoxAscent,
+          descent: textMeasure.fontBoundingBoxDescent
+        } : this.measureTextBoundADscentEstimate(options);
+      }
+      measureTextBoundADscentEstimate(options) {
+        var _a;
+        const fontSize = null !== (_a = options.fontSize) && void 0 !== _a ? _a : DefaultTextStyle.fontSize,
+          {
+            textBaseline: textBaseline
+          } = options;
+        return "bottom" === textBaseline ? {
+          ascent: fontSize,
+          descent: 0
+        } : "middle" === textBaseline ? {
+          ascent: fontSize / 2,
+          descent: fontSize / 2
+        } : "alphabetic" === textBaseline ? {
+          ascent: .79 * fontSize,
+          descent: .21 * fontSize
+        } : {
+          ascent: 0,
+          descent: fontSize
+        };
+      }
+      measureTextBoundLeftRightEstimate(options) {
+        var _a;
+        const fontSize = null !== (_a = options.fontSize) && void 0 !== _a ? _a : DefaultTextStyle.fontSize,
+          {
+            textAlign: textAlign
+          } = options;
+        return "center" === textAlign ? {
+          left: fontSize / 2,
+          right: fontSize / 2
+        } : "right" === textAlign || "end" === textAlign ? {
+          left: fontSize,
+          right: 0
+        } : {
+          left: 0,
+          right: fontSize
+        };
+      }
+      measureTextPixelADscentAndWidth(text, options) {
+        if (!this.context) return Object.assign(Object.assign({}, this.measureTextBoundADscentEstimate(options)), {
+          width: this.estimate(text, options).width
+        });
+        const out = this._measureTextWithoutAlignBaseline(text, options, !0);
+        return {
+          ascent: out.actualBoundingBoxAscent,
+          descent: out.actualBoundingBoxDescent,
+          width: out.width
+        };
       }
       measureText(text, options) {
         return this.context ? (this.context.setTextStyleWithoutAlignBaseline(options), this.context.measureText(text)) : this.estimate(text, options);
@@ -4375,6 +4467,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 +4508,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 +4516,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 +5188,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 +6112,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 +6329,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"
@@ -12506,7 +12607,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 +12644,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 +12672,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 +12723,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 +12734,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 +13182,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 +13206,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 +13395,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 +13444,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 +13460,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 +13511,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 +13531,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 +13574,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 +13598,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;
@@ -13636,77 +13796,50 @@
           }
           doStroke && (strokeCb ? strokeCb(context, text.attribute, textAttribute) : sVisible && (context.setStrokeStyle(text, text.attribute, originX - x, originY - y, textAttribute), context.strokeText(t, _x, _y, z))), doFill && (fillCb ? fillCb(context, text.attribute, textAttribute) : fVisible && (context.setCommonStyle(text, text.attribute, originX - x, originY - y, textAttribute), context.fillText(t, _x, _y, z), this.drawUnderLine(underline, lineThrough, text, _x, _y, z, textAttribute, context))), direction && (context.highPerformanceRestore(), context.setTransformForCurrent());
         };
-        if (text.isMultiLine) {
-          if (context.setTextStyleWithoutAlignBaseline(text.attribute, textAttribute, z), "horizontal" === direction) {
-            const {
-              multilineLayout: multilineLayout
-            } = text;
-            if (!multilineLayout) return void context.highPerformanceRestore();
-            const {
-              xOffset: xOffset,
-              yOffset: yOffset
-            } = multilineLayout.bbox;
-            doStroke && (strokeCb ? strokeCb(context, text.attribute, textAttribute) : sVisible && (context.setStrokeStyle(text, text.attribute, originX - x, originY - y, textAttribute), multilineLayout.lines.forEach(line => {
-              context.strokeText(line.str, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y, z);
-            }))), doFill && (fillCb ? fillCb(context, text.attribute, textAttribute) : fVisible && (context.setCommonStyle(text, text.attribute, originX - x, originY - y, textAttribute), multilineLayout.lines.forEach(line => {
-              context.fillText(line.str, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y, z), this.drawUnderLine(underline, lineThrough, text, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y - textDrawOffsetY("bottom", fontSize) - .05 * fontSize, z, textAttribute, context, {
-                width: line.width
-              });
-            })));
-          } else {
-            text.tryUpdateAABBBounds();
-            const cache = text.cache,
-              {
-                verticalList: verticalList
-              } = cache;
-            context.textAlign = "left", context.textBaseline = "top";
-            const totalHeight = lineHeight * verticalList.length;
-            let totalW = 0;
-            verticalList.forEach(verticalData => {
-              const _w = verticalData.reduce((a, b) => a + (b.width || 0), 0);
-              totalW = max(_w, totalW);
-            });
-            let offsetY = 0,
-              offsetX = 0;
-            "bottom" === textBaseline ? offsetX = -totalHeight : "middle" === textBaseline && (offsetX = -totalHeight / 2), "center" === textAlign ? offsetY -= totalW / 2 : "right" === textAlign && (offsetY -= totalW), verticalList.forEach((verticalData, i) => {
-              const currentW = verticalData.reduce((a, b) => a + (b.width || 0), 0),
-                dw = totalW - currentW;
-              let currentOffsetY = offsetY;
-              "center" === textAlign ? currentOffsetY += dw / 2 : "right" === textAlign && (currentOffsetY += dw), verticalData.forEach(item => {
-                const {
-                  text: text,
-                  width: width,
-                  direction: direction
-                } = item;
-                drawText(text, totalHeight - (i + 1) * lineHeight + offsetX, currentOffsetY, direction), currentOffsetY += width;
-              });
+        if (context.setTextStyleWithoutAlignBaseline(text.attribute, textAttribute, z), "horizontal" === direction) {
+          const {
+            multilineLayout: multilineLayout
+          } = text;
+          if (!multilineLayout) return void context.highPerformanceRestore();
+          const {
+            xOffset: xOffset,
+            yOffset: yOffset
+          } = multilineLayout.bbox;
+          doStroke && (strokeCb ? strokeCb(context, text.attribute, textAttribute) : sVisible && (context.setStrokeStyle(text, text.attribute, originX - x, originY - y, textAttribute), multilineLayout.lines.forEach(line => {
+            context.strokeText(line.str, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y, z);
+          }))), doFill && (fillCb ? fillCb(context, text.attribute, textAttribute) : fVisible && (context.setCommonStyle(text, text.attribute, originX - x, originY - y, textAttribute), multilineLayout.lines.forEach(line => {
+            context.fillText(line.str, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y, z), this.drawUnderLine(underline, lineThrough, text, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y - textDrawOffsetY("bottom", fontSize) - .05 * fontSize, z, textAttribute, context, {
+              width: line.width
             });
-          }
-        } else if ("horizontal" === direction) {
-          context.setTextStyle(text.attribute, textAttribute, z);
-          const t = text.clipedText;
-          let dy = 0;
-          lineHeight !== fontSize && ("top" === textBaseline ? dy = (lineHeight - fontSize) / 2 : "middle" === textBaseline || "bottom" === textBaseline && (dy = -(lineHeight - fontSize) / 2)), drawText(t, 0, dy, 0);
+          })));
         } else {
           text.tryUpdateAABBBounds();
-          const cache = text.cache;
-          if (cache) {
-            context.setTextStyleWithoutAlignBaseline(text.attribute, textAttribute, z);
-            const {
+          const cache = text.cache,
+            {
               verticalList: verticalList
             } = cache;
-            let offsetY = 0;
-            const totalW = verticalList[0].reduce((a, b) => a + (b.width || 0), 0);
-            let offsetX = 0;
-            "bottom" === textBaseline ? offsetX = -lineHeight : "middle" === textBaseline && (offsetX = -lineHeight / 2), "center" === textAlign ? offsetY -= totalW / 2 : "right" === textAlign && (offsetY -= totalW), context.textAlign = "left", context.textBaseline = "top", verticalList[0].forEach(item => {
+          context.textAlign = "left", context.textBaseline = "top";
+          const totalHeight = lineHeight * verticalList.length;
+          let totalW = 0;
+          verticalList.forEach(verticalData => {
+            const _w = verticalData.reduce((a, b) => a + (b.width || 0), 0);
+            totalW = max(_w, totalW);
+          });
+          let offsetY = 0,
+            offsetX = 0;
+          "bottom" === textBaseline ? offsetX = -totalHeight : "middle" === textBaseline && (offsetX = -totalHeight / 2), "center" === textAlign ? offsetY -= totalW / 2 : "right" === textAlign && (offsetY -= totalW), verticalList.forEach((verticalData, i) => {
+            const currentW = verticalData.reduce((a, b) => a + (b.width || 0), 0),
+              dw = totalW - currentW;
+            let currentOffsetY = offsetY;
+            "center" === textAlign ? currentOffsetY += dw / 2 : "right" === textAlign && (currentOffsetY += dw), verticalData.forEach(item => {
               const {
                 text: text,
                 width: width,
                 direction: direction
               } = item;
-              drawText(text, offsetX, offsetY, direction), offsetY += width;
+              drawText(text, totalHeight - (i + 1) * lineHeight + offsetX, currentOffsetY, direction), currentOffsetY += width;
             });
-          }
+          });
         }
         transform3dMatrixToContextMatrix && this.restoreTransformUseContext2d(text, textAttribute, z, context), this.afterRenderStep(text, context, x, y, doFill, doStroke, fVisible, sVisible, textAttribute, drawContext, fillCb, strokeCb);
       }
@@ -13845,7 +13978,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 +13989,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 +14039,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 +14068,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 +14141,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,20 +14152,26 @@
           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 {
@@ -14414,28 +14572,6 @@
         }
         return bbox.yOffset = "top" === textBaseline ? 0 : "middle" === textBaseline ? bbox.height / -2 : "alphabetic" === textBaseline ? -.79 * bbox.height : -bbox.height, bbox;
       }
-      GetLayout(str, width, height, textAlign, textBaseline, lineHeight, suffix, wordBreak, suffixPosition) {
-        const linesLayout = [],
-          bboxWH = [width, height],
-          bboxOffset = [0, 0];
-        for (; str.length > 0;) {
-          const {
-            str: clipText
-          } = this.textMeasure.clipTextWithSuffix(str, this.textOptions, width, suffix, wordBreak, suffixPosition);
-          linesLayout.push({
-            str: clipText,
-            width: this.textMeasure.measureTextWidth(clipText, this.textOptions)
-          }), str = str.substring(clipText.length);
-        }
-        "left" === textAlign || "start" === textAlign || ("center" === textAlign ? bboxOffset[0] = bboxWH[0] / -2 : "right" !== textAlign && "end" !== textAlign || (bboxOffset[0] = -bboxWH[0])), "top" === textBaseline || ("middle" === textBaseline ? bboxOffset[1] = bboxWH[1] / -2 : "bottom" === textBaseline && (bboxOffset[1] = -bboxWH[1]));
-        const bbox = {
-          xOffset: bboxOffset[0],
-          yOffset: bboxOffset[1],
-          width: bboxWH[0],
-          height: bboxWH[1]
-        };
-        return this.layoutWithBBox(bbox, linesLayout, textAlign, textBaseline, lineHeight);
-      }
       GetLayoutByLines(lines, textAlign, textBaseline, lineHeight) {
         let suffix = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : "";
         let wordBreak = arguments.length > 5 ? arguments[5] : undefined;
@@ -14446,18 +14582,29 @@
           bboxWH = [0, 0];
         if ("number" == typeof lineWidth && lineWidth !== 1 / 0) {
           let width;
-          for (let i = 0, len = lines.length; i < len; i++) width = Math.min(this.textMeasure.measureTextWidth(lines[i], this.textOptions), lineWidth), linesLayout.push({
-            str: this.textMeasure.clipTextWithSuffix(lines[i], this.textOptions, width, suffix, wordBreak, suffixPosition).str,
-            width: width
-          });
+          for (let i = 0, len = lines.length; i < len; i++) {
+            const metrics = this.textMeasure.measureTextPixelADscentAndWidth(lines[i], this.textOptions);
+            width = Math.min(metrics.width, lineWidth), linesLayout.push({
+              str: this.textMeasure.clipTextWithSuffix(lines[i], this.textOptions, width, suffix, wordBreak, suffixPosition).str,
+              width: width,
+              ascent: metrics.ascent,
+              descent: metrics.descent
+            });
+          }
           bboxWH[0] = lineWidth;
         } else {
           let width, text;
           lineWidth = 0;
-          for (let i = 0, len = lines.length; i < len; i++) text = lines[i], width = this.textMeasure.measureTextWidth(text, this.textOptions), lineWidth = Math.max(lineWidth, width), linesLayout.push({
-            str: text,
-            width: width
-          });
+          for (let i = 0, len = lines.length; i < len; i++) {
+            text = lines[i];
+            const metrics = this.textMeasure.measureTextPixelADscentAndWidth(lines[i], this.textOptions);
+            width = metrics.width, lineWidth = Math.max(lineWidth, width), linesLayout.push({
+              str: text,
+              width: width,
+              ascent: metrics.ascent,
+              descent: metrics.descent
+            });
+          }
           bboxWH[0] = lineWidth;
         }
         bboxWH[1] = linesLayout.length * lineHeight, bboxWH[0] = linesLayout.reduce((a, b) => Math.max(a, b.width), 0);
@@ -14486,11 +14633,11 @@
         };
       }
       lineOffset(bbox, line, textAlign, textBaseline, lineHeight, origin) {
-        return "left" === textAlign || "start" === textAlign ? line.leftOffset = 0 : "center" === textAlign ? line.leftOffset = (bbox.width - line.width) / 2 : "right" !== textAlign && "end" !== textAlign || (line.leftOffset = bbox.width - line.width), line.topOffset = (lineHeight - this.textOptions.fontSize) / 2 + .79 * this.textOptions.fontSize + origin[1], origin[1] += lineHeight, line;
+        return "left" === textAlign || "start" === textAlign ? line.leftOffset = 0 : "center" === textAlign ? line.leftOffset = (bbox.width - line.width) / 2 : "right" !== textAlign && "end" !== textAlign || (line.leftOffset = bbox.width - line.width), line.topOffset = lineHeight / 2 + (line.ascent - line.descent) / 2 + origin[1], origin[1] += lineHeight, line;
       }
     }
 
-    const TEXT_UPDATE_TAG_KEY = ["text", "maxLineWidth", "textAlign", "textBaseline", "heightLimit", "lineClamp", "fontSize", "fontFamily", "fontWeight", "ellipsis", "lineHeight", "direction", "wordBreak", "heightLimit", "lineClamp", ...GRAPHIC_UPDATE_TAG_KEY];
+    const TEXT_UPDATE_TAG_KEY = ["text", "maxLineWidth", "maxWidth", "textAlign", "textBaseline", "heightLimit", "lineClamp", "fontSize", "fontFamily", "fontWeight", "ellipsis", "lineHeight", "direction", "wordBreak", "heightLimit", "lineClamp", ...GRAPHIC_UPDATE_TAG_KEY];
     class Text extends Graphic {
       get font() {
         const textTheme = this.getGraphicTheme();
@@ -14499,26 +14646,22 @@
       get clipedText() {
         var _a;
         const attribute = this.attribute,
-          textTheme = this.getGraphicTheme();
-        if (!this.isSimplify()) return;
-        const {
-          maxLineWidth = textTheme.maxLineWidth
-        } = attribute;
-        return Number.isFinite(maxLineWidth) ? (this.tryUpdateAABBBounds(), this.cache.clipedText) : (null !== (_a = attribute.text) && void 0 !== _a ? _a : textTheme.text).toString();
+          textTheme = this.getGraphicTheme(),
+          maxWidth = this.getMaxWidth(textTheme);
+        return Number.isFinite(maxWidth) ? (this.tryUpdateAABBBounds(), this.cache.clipedText) : (null !== (_a = attribute.text) && void 0 !== _a ? _a : textTheme.text).toString();
       }
       get clipedWidth() {
-        if (this.isSimplify()) return this.tryUpdateAABBBounds(), this.cache.clipedWidth;
+        return this.tryUpdateAABBBounds(), this.cache.clipedWidth;
       }
       get cliped() {
         var _a, _b;
         const textTheme = this.getGraphicTheme(),
           attribute = this.attribute,
-          {
-            maxLineWidth = textTheme.maxLineWidth,
-            text: text,
-            whiteSpace = textTheme.whiteSpace
-          } = attribute;
-        if (!Number.isFinite(maxLineWidth)) return !1;
+          maxWidth = this.getMaxWidth(textTheme);
+        if (!Number.isFinite(maxWidth)) return !1;
+        const {
+          text: text
+        } = this.attribute;
         if (this.tryUpdateAABBBounds(), null === (_b = null === (_a = this.cache) || void 0 === _a ? void 0 : _a.layoutData) || void 0 === _b ? void 0 : _b.lines) {
           let mergedText = "";
           this.cache.layoutData.lines.forEach(item => {
@@ -14529,10 +14672,7 @@
         return "vertical" === attribute.direction && this.cache.verticalList && this.cache.verticalList[0] ? this.cache.verticalList[0].map(item => item.text).join("") !== attribute.text.toString() : null != this.clipedText && this.clipedText !== attribute.text.toString();
       }
       get multilineLayout() {
-        if (this.isMultiLine) return this.tryUpdateAABBBounds(), this.cache.layoutData;
-      }
-      isSimplify() {
-        return !this.isMultiLine && "vertical" !== this.attribute.direction;
+        return this.tryUpdateAABBBounds(), this.cache.layoutData;
       }
       get isMultiLine() {
         return Array.isArray(this.attribute.text) || "normal" === this.attribute.whiteSpace;
@@ -14605,8 +14745,63 @@
         }
         return application.graphicService.combindShadowAABBBounds(aabbBounds, this), null == attribute.forceBoundsHeight && null == attribute.forceBoundsWidth || application.graphicService.updateHTMLTextAABBBounds(attribute, textTheme, aabbBounds), transformBoundsWithMatrix(aabbBounds, aabbBounds, this.transMatrix), aabbBounds;
       }
+      updateSingallineAABBBounds(text) {
+        this.updateMultilineAABBBounds([text]);
+        const layoutData = this.cache.layoutData;
+        if (layoutData) {
+          const line = layoutData.lines[0];
+          this.cache.clipedText = line.str, this.cache.clipedWidth = line.width;
+        }
+        return this._AABBBounds;
+      }
+      updateMultilineAABBBounds(text) {
+        const textTheme = this.getGraphicTheme(),
+          {
+            direction = textTheme.direction,
+            underlineOffset = textTheme.underlineOffset
+          } = this.attribute,
+          b = "horizontal" === direction ? this.updateHorizontalMultilineAABBBounds(text) : this.updateVerticalMultilineAABBBounds(text);
+        return "horizontal" === direction && underlineOffset && this._AABBBounds.add(this._AABBBounds.x1, this._AABBBounds.y2 + underlineOffset), b;
+      }
+      updateHorizontalMultilineAABBBounds(text) {
+        var _a;
+        const textTheme = this.getGraphicTheme(),
+          attribute = this.attribute,
+          {
+            fontFamily = textTheme.fontFamily,
+            textAlign = textTheme.textAlign,
+            textBaseline = textTheme.textBaseline,
+            fontSize = textTheme.fontSize,
+            fontWeight = textTheme.fontWeight,
+            ellipsis = textTheme.ellipsis,
+            maxLineWidth: maxLineWidth,
+            stroke = textTheme.stroke,
+            wrap = textTheme.wrap,
+            ignoreBuf = textTheme.ignoreBuf,
+            lineWidth = textTheme.lineWidth,
+            whiteSpace = textTheme.whiteSpace,
+            suffixPosition = textTheme.suffixPosition
+          } = attribute,
+          buf = ignoreBuf ? 0 : 2,
+          lineHeight = this.getLineHeight(attribute, textTheme) + buf;
+        if ("normal" === whiteSpace || wrap) return this.updateWrapAABBBounds(text);
+        if (!this.shouldUpdateShape() && (null === (_a = this.cache) || void 0 === _a ? void 0 : _a.layoutData)) {
+          const bbox = this.cache.layoutData.bbox;
+          return this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+        }
+        const textMeasure = application.graphicUtil.textMeasure,
+          layoutData = new CanvasTextLayout(fontFamily, {
+            fontSize: fontSize,
+            fontWeight: fontWeight,
+            fontFamily: fontFamily
+          }, textMeasure).GetLayoutByLines(text, textAlign, textBaseline, lineHeight, !0 === ellipsis ? textTheme.ellipsis : ellipsis || void 0, !1, maxLineWidth, suffixPosition),
+          {
+            bbox: bbox
+          } = layoutData;
+        return this.cache.layoutData = layoutData, this.clearUpdateShapeTag(), this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+      }
       updateWrapAABBBounds(text) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         const textTheme = this.getGraphicTheme(),
           {
             fontFamily = textTheme.fontFamily,
@@ -14624,18 +14819,19 @@
             heightLimit = 0,
             lineClamp: lineClamp
           } = this.attribute,
-          lineHeight = null !== (_a = calculateLineHeight(this.attribute.lineHeight, this.attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : this.attribute.fontSize || textTheme.fontSize,
-          buf = ignoreBuf ? 0 : 2;
-        if (!this.shouldUpdateShape() && (null === (_b = this.cache) || void 0 === _b ? void 0 : _b.layoutData)) {
+          buf = ignoreBuf ? 0 : 2,
+          lineHeight = this.getLineHeight(this.attribute, textTheme) + buf;
+        if (!this.shouldUpdateShape() && (null === (_a = this.cache) || void 0 === _a ? void 0 : _a.layoutData)) {
           const bbox = this.cache.layoutData.bbox;
           return this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
         }
         const textMeasure = application.graphicUtil.textMeasure,
-          layoutObj = new CanvasTextLayout(fontFamily, {
+          textOptions = {
             fontSize: fontSize,
             fontWeight: fontWeight,
             fontFamily: fontFamily
-          }, textMeasure),
+          },
+          layoutObj = new CanvasTextLayout(fontFamily, textOptions, textMeasure),
           lines = isArray$1(text) ? text.map(l => l.toString()) : [text.toString()],
           linesLayout = [],
           bboxWH = [0, 0];
@@ -14645,29 +14841,33 @@
             const str = lines[i];
             let needCut = !0;
             if (i === lineCountLimit - 1) {
-              const clip = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition, i !== lines.length - 1);
+              const clip = textMeasure.clipTextWithSuffix(str, textOptions, maxLineWidth, ellipsis, !1, suffixPosition, i !== lines.length - 1),
+                matrics = textMeasure.measureTextPixelADscentAndWidth(clip.str, textOptions);
               linesLayout.push({
                 str: clip.str,
-                width: clip.width
+                width: clip.width,
+                ascent: matrics.ascent,
+                descent: matrics.descent
               });
               break;
             }
-            const clip = layoutObj.textMeasure.clipText(str, layoutObj.textOptions, maxLineWidth, "break-all" !== wordBreak, "keep-all" === wordBreak);
-            if ("" !== str && "" === clip.str || clip.wordBreaked) {
+            const clip = textMeasure.clipText(str, textOptions, maxLineWidth, "break-word" === wordBreak);
+            if ("" !== str && "" === clip.str) {
               if (ellipsis) {
-                const clipEllipsis = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
-                clip.str = null !== (_c = clipEllipsis.str) && void 0 !== _c ? _c : "", clip.width = null !== (_d = clipEllipsis.width) && void 0 !== _d ? _d : 0;
+                const clipEllipsis = textMeasure.clipTextWithSuffix(str, textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
+                clip.str = null !== (_b = clipEllipsis.str) && void 0 !== _b ? _b : "", clip.width = null !== (_c = clipEllipsis.width) && void 0 !== _c ? _c : 0;
               } else clip.str = "", clip.width = 0;
               needCut = !1;
             }
-            linesLayout.push({
+            const matrics = textMeasure.measureTextPixelADscentAndWidth(clip.str, textOptions);
+            if (linesLayout.push({
               str: clip.str,
-              width: clip.width
-            });
-            let cutLength = clip.str.length;
-            if (!clip.wordBreaked || "" !== str && "" === clip.str || (needCut = !0, cutLength = clip.wordBreaked), clip.str.length === str.length) ;else if (needCut) {
-              let newStr = str.substring(cutLength);
-              "keep-all" === wordBreak && (newStr = newStr.replace(/^\s+/g, "")), lines.splice(i + 1, 0, newStr);
+              width: clip.width,
+              ascent: matrics.ascent,
+              descent: matrics.descent
+            }), clip.str.length === str.length) ;else if (needCut) {
+              const newStr = str.substring(clip.str.length);
+              lines.splice(i + 1, 0, newStr);
             }
           }
           let maxWidth = 0;
@@ -14680,21 +14880,28 @@
             lineWidth = 0;
           for (let i = 0, len = lines.length; i < len; i++) {
             if (i === lineCountLimit - 1) {
-              const clip = layoutObj.textMeasure.clipTextWithSuffix(lines[i], layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
+              const clip = textMeasure.clipTextWithSuffix(lines[i], textOptions, maxLineWidth, ellipsis, !1, suffixPosition),
+                matrics = textMeasure.measureTextPixelADscentAndWidth(clip.str, textOptions);
               linesLayout.push({
                 str: clip.str,
-                width: clip.width
+                width: clip.width,
+                ascent: matrics.ascent,
+                descent: matrics.descent
               }), lineWidth = Math.max(lineWidth, clip.width);
               break;
             }
-            text = lines[i], width = layoutObj.textMeasure.measureTextWidth(text, layoutObj.textOptions, "break-word" === wordBreak), lineWidth = Math.max(lineWidth, width), linesLayout.push({
+            text = lines[i], width = textMeasure.measureTextWidth(text, textOptions), lineWidth = Math.max(lineWidth, width);
+            const matrics = textMeasure.measureTextPixelADscentAndWidth(text, textOptions);
+            linesLayout.push({
               str: text,
-              width: width
+              width: width,
+              ascent: matrics.ascent,
+              descent: matrics.descent
             });
           }
           bboxWH[0] = lineWidth;
         }
-        bboxWH[1] = linesLayout.length * (lineHeight + buf);
+        bboxWH[1] = linesLayout.length * lineHeight;
         const bbox = {
           xOffset: 0,
           yOffset: 0,
@@ -14705,210 +14912,12 @@
         const layoutData = layoutObj.layoutWithBBox(bbox, linesLayout, textAlign, textBaseline, lineHeight);
         return this.cache.layoutData = layoutData, this.clearUpdateShapeTag(), this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
       }
-      updateSingallineAABBBounds(text) {
-        const textTheme = this.getGraphicTheme(),
-          {
-            direction = textTheme.direction,
-            underlineOffset = textTheme.underlineOffset
-          } = this.attribute,
-          b = "horizontal" === direction ? this.updateHorizontalSinglelineAABBBounds(text) : this.updateVerticalSinglelineAABBBounds(text);
-        return "horizontal" === direction && underlineOffset && this._AABBBounds.add(this._AABBBounds.x1, this._AABBBounds.y2 + underlineOffset), b;
-      }
-      updateMultilineAABBBounds(text) {
-        const textTheme = this.getGraphicTheme(),
-          {
-            direction = textTheme.direction,
-            underlineOffset = textTheme.underlineOffset
-          } = this.attribute,
-          b = "horizontal" === direction ? this.updateHorizontalMultilineAABBBounds(text) : this.updateVerticalMultilineAABBBounds(text);
-        return "horizontal" === direction && underlineOffset && this._AABBBounds.add(this._AABBBounds.x1, this._AABBBounds.y2 + underlineOffset), b;
-      }
-      updateHorizontalSinglelineAABBBounds(text) {
-        var _a, _b;
-        const textTheme = this.getGraphicTheme(),
-          {
-            wrap = textTheme.wrap
-          } = this.attribute;
-        if (wrap) return this.updateWrapAABBBounds([text]);
-        const textMeasure = application.graphicUtil.textMeasure;
-        let width, str;
-        const attribute = this.attribute,
-          {
-            maxLineWidth = textTheme.maxLineWidth,
-            ellipsis = textTheme.ellipsis,
-            textAlign = textTheme.textAlign,
-            textBaseline = textTheme.textBaseline,
-            fontFamily = textTheme.fontFamily,
-            fontSize = textTheme.fontSize,
-            fontWeight = textTheme.fontWeight,
-            stroke = textTheme.stroke,
-            lineWidth = textTheme.lineWidth,
-            ignoreBuf = textTheme.ignoreBuf,
-            whiteSpace = textTheme.whiteSpace,
-            suffixPosition = textTheme.suffixPosition
-          } = attribute;
-        if ("normal" === whiteSpace) return this.updateWrapAABBBounds(text);
-        const buf = ignoreBuf ? 0 : Math.max(2, .075 * fontSize),
-          textFontSize = attribute.fontSize || textTheme.fontSize,
-          lineHeight = null !== (_a = calculateLineHeight(attribute.lineHeight, textFontSize)) && void 0 !== _a ? _a : textFontSize + buf;
-        if (!this.shouldUpdateShape() && this.cache) {
-          width = null !== (_b = this.cache.clipedWidth) && void 0 !== _b ? _b : 0;
-          const dx = textDrawOffsetX(textAlign, width),
-            dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize);
-          return this._AABBBounds.set(dx, dy, dx + width, dy + lineHeight), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
-        }
-        if (Number.isFinite(maxLineWidth)) {
-          if (ellipsis) {
-            const strEllipsis = !0 === ellipsis ? textTheme.ellipsis : ellipsis,
-              data = textMeasure.clipTextWithSuffix(text.toString(), {
-                fontSize: fontSize,
-                fontWeight: fontWeight,
-                fontFamily: fontFamily
-              }, maxLineWidth, strEllipsis, !1, suffixPosition);
-            str = data.str, width = data.width;
-          } else {
-            const data = textMeasure.clipText(text.toString(), {
-              fontSize: fontSize,
-              fontWeight: fontWeight,
-              fontFamily: fontFamily
-            }, maxLineWidth, !1);
-            str = data.str, width = data.width;
-          }
-          this.cache.clipedText = str, this.cache.clipedWidth = width;
-        } else width = textMeasure.measureTextWidth(text.toString(), {
-          fontSize: fontSize,
-          fontWeight: fontWeight,
-          fontFamily: fontFamily
-        }), this.cache.clipedText = text.toString(), this.cache.clipedWidth = width;
-        this.clearUpdateShapeTag();
-        const dx = textDrawOffsetX(textAlign, width);
-        let lh = lineHeight;
-        application.global && application.global.isSafari() && (lh += .2 * fontSize);
-        const dy = textLayoutOffsetY(textBaseline, lh, fontSize, buf);
-        return this._AABBBounds.set(dx, dy, dx + width, dy + lh), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
-      }
-      getBaselineMapAlign() {
-        return Text.baselineMapAlign;
-      }
-      getAlignMapBaseline() {
-        return Text.alignMapBaseline;
-      }
-      updateVerticalSinglelineAABBBounds(text) {
-        var _a, _b, _c;
-        const textTheme = this.getGraphicTheme(),
-          textMeasure = application.graphicUtil.textMeasure;
-        let width;
-        const attribute = this.attribute,
-          {
-            ignoreBuf = textTheme.ignoreBuf
-          } = attribute,
-          buf = ignoreBuf ? 0 : 2,
-          {
-            maxLineWidth = textTheme.maxLineWidth,
-            ellipsis = textTheme.ellipsis,
-            fontSize = textTheme.fontSize,
-            fontWeight = textTheme.fontWeight,
-            fontFamily = textTheme.fontFamily,
-            stroke = textTheme.stroke,
-            lineWidth = textTheme.lineWidth,
-            verticalMode = textTheme.verticalMode,
-            suffixPosition = textTheme.suffixPosition
-          } = attribute,
-          lineHeight = null !== (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf;
-        let {
-          textAlign = textTheme.textAlign,
-          textBaseline = textTheme.textBaseline
-        } = attribute;
-        if (!verticalMode) {
-          const t = textAlign;
-          textAlign = null !== (_b = Text.baselineMapAlign[textBaseline]) && void 0 !== _b ? _b : "left", textBaseline = null !== (_c = Text.alignMapBaseline[t]) && void 0 !== _c ? _c : "top";
-        }
-        if (!this.shouldUpdateShape() && this.cache) {
-          width = this.cache.clipedWidth;
-          const dx = textDrawOffsetX(textAlign, width),
-            dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize);
-          return this._AABBBounds.set(dy, dx, dy + lineHeight, dx + width), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
-        }
-        let verticalList = [verticalLayout(text.toString())];
-        if (Number.isFinite(maxLineWidth)) {
-          if (ellipsis) {
-            const strEllipsis = !0 === ellipsis ? textTheme.ellipsis : ellipsis,
-              data = textMeasure.clipTextWithSuffixVertical(verticalList[0], {
-                fontSize: fontSize,
-                fontWeight: fontWeight,
-                fontFamily: fontFamily
-              }, maxLineWidth, strEllipsis, !1, suffixPosition);
-            verticalList = [data.verticalList], width = data.width;
-          } else {
-            const data = textMeasure.clipTextVertical(verticalList[0], {
-              fontSize: fontSize,
-              fontWeight: fontWeight,
-              fontFamily: fontFamily
-            }, maxLineWidth, !1);
-            verticalList = [data.verticalList], width = data.width;
-          }
-          this.cache.verticalList = verticalList, this.cache.clipedWidth = width;
-        } else width = 0, verticalList[0].forEach(t => {
-          const w = t.direction === exports.TextDirection.HORIZONTAL ? fontSize : textMeasure.measureTextWidth(t.text, {
-            fontSize: fontSize,
-            fontWeight: fontWeight,
-            fontFamily: fontFamily
-          });
-          width += w, t.width = w;
-        }), this.cache.verticalList = verticalList, this.cache.clipedWidth = width;
-        this.clearUpdateShapeTag();
-        const dx = textDrawOffsetX(textAlign, width),
-          dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize);
-        return this._AABBBounds.set(dy, dx, dy + lineHeight, dx + width), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
-      }
-      updateHorizontalMultilineAABBBounds(text) {
-        var _a, _b;
-        const textTheme = this.getGraphicTheme(),
-          {
-            wrap = textTheme.wrap
-          } = this.attribute;
-        if (wrap) return this.updateWrapAABBBounds(text);
-        const attribute = this.attribute,
-          {
-            fontFamily = textTheme.fontFamily,
-            textAlign = textTheme.textAlign,
-            textBaseline = textTheme.textBaseline,
-            fontSize = textTheme.fontSize,
-            fontWeight = textTheme.fontWeight,
-            ellipsis = textTheme.ellipsis,
-            maxLineWidth: maxLineWidth,
-            stroke = textTheme.stroke,
-            lineWidth = textTheme.lineWidth,
-            whiteSpace = textTheme.whiteSpace,
-            suffixPosition = textTheme.suffixPosition
-          } = attribute,
-          lineHeight = null !== (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : attribute.fontSize || textTheme.fontSize;
-        if ("normal" === whiteSpace) return this.updateWrapAABBBounds(text);
-        if (!this.shouldUpdateShape() && (null === (_b = this.cache) || void 0 === _b ? void 0 : _b.layoutData)) {
-          const bbox = this.cache.layoutData.bbox;
-          return this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
-        }
-        const textMeasure = application.graphicUtil.textMeasure,
-          layoutData = new CanvasTextLayout(fontFamily, {
-            fontSize: fontSize,
-            fontWeight: fontWeight,
-            fontFamily: fontFamily
-          }, textMeasure).GetLayoutByLines(text, textAlign, textBaseline, lineHeight, !0 === ellipsis ? textTheme.ellipsis : ellipsis || void 0, !1, maxLineWidth, suffixPosition),
-          {
-            bbox: bbox
-          } = layoutData;
-        return this.cache.layoutData = layoutData, this.clearUpdateShapeTag(), this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
-      }
       updateVerticalMultilineAABBBounds(text) {
-        var _a, _b, _c;
+        var _a, _b;
         const textTheme = this.getGraphicTheme(),
           textMeasure = application.graphicUtil.textMeasure;
         let width;
         const attribute = this.attribute,
-          {
-            ignoreBuf = textTheme.ignoreBuf
-          } = attribute,
-          buf = ignoreBuf ? 0 : 2,
           {
             maxLineWidth = textTheme.maxLineWidth,
             ellipsis = textTheme.ellipsis,
@@ -14920,14 +14929,14 @@
             verticalMode = textTheme.verticalMode,
             suffixPosition = textTheme.suffixPosition
           } = attribute,
-          lineHeight = null !== (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf;
+          lineHeight = this.getLineHeight(attribute, textTheme);
         let {
           textAlign = textTheme.textAlign,
           textBaseline = textTheme.textBaseline
         } = attribute;
         if (!verticalMode) {
           const t = textAlign;
-          textAlign = null !== (_b = Text.baselineMapAlign[textBaseline]) && void 0 !== _b ? _b : "left", textBaseline = null !== (_c = Text.alignMapBaseline[t]) && void 0 !== _c ? _c : "top";
+          textAlign = null !== (_a = Text.baselineMapAlign[textBaseline]) && void 0 !== _a ? _a : "left", textBaseline = null !== (_b = Text.alignMapBaseline[t]) && void 0 !== _b ? _b : "top";
         }
         if (width = 0, !this.shouldUpdateShape() && this.cache) {
           this.cache.verticalList.forEach(item => {
@@ -14975,6 +14984,15 @@
           dy = textLayoutOffsetY(textBaseline, height, fontSize);
         return this._AABBBounds.set(dy, dx, dy + height, dx + width), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
       }
+      getMaxWidth(theme) {
+        var _a, _b;
+        const attribute = this.attribute;
+        return null !== (_b = null !== (_a = attribute.maxLineWidth) && void 0 !== _a ? _a : attribute.maxWidth) && void 0 !== _b ? _b : theme.maxWidth;
+      }
+      getLineHeight(attribute, textTheme) {
+        var _a;
+        return null !== (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : attribute.fontSize || textTheme.fontSize;
+      }
       needUpdateTags(keys) {
         let k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : TEXT_UPDATE_TAG_KEY;
         return super.needUpdateTags(keys, k);
@@ -14989,6 +15007,12 @@
       getNoWorkAnimateAttr() {
         return Text.NOWORK_ANIMATE_ATTR;
       }
+      getBaselineMapAlign() {
+        return Text.baselineMapAlign;
+      }
+      getAlignMapBaseline() {
+        return Text.alignMapBaseline;
+      }
     }
     Text.NOWORK_ANIMATE_ATTR = Object.assign({
       ellipsis: 1,
@@ -15067,7 +15091,9 @@
               const clip = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
               linesLayout.push({
                 str: clip.str,
-                width: clip.width
+                width: clip.width,
+                ascent: 0,
+                descent: 0
               });
               break;
             }
@@ -15081,7 +15107,9 @@
             }
             if (linesLayout.push({
               str: clip.str,
-              width: clip.width
+              width: clip.width,
+              ascent: 0,
+              descent: 0
             }), clip.str.length === str.length) ;else if (needCut) {
               const newStr = str.substring(clip.str.length);
               lines.splice(i + 1, 0, newStr);
@@ -15100,13 +15128,17 @@
               const clip = layoutObj.textMeasure.clipTextWithSuffix(lines[i], layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
               linesLayout.push({
                 str: clip.str,
-                width: clip.width
+                width: clip.width,
+                ascent: 0,
+                descent: 0
               }), lineWidth = Math.max(lineWidth, clip.width);
               break;
             }
             text = lines[i], width = layoutObj.textMeasure.measureTextWidth(text, layoutObj.textOptions, "break-word" === wordBreak), lineWidth = Math.max(lineWidth, width), linesLayout.push({
               str: text,
-              width: width
+              width: width,
+              ascent: 0,
+              descent: 0
             });
           }
           bboxWH[0] = lineWidth;
@@ -18278,6 +18310,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 +18548,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 +18683,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 +19697,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) {
@@ -23678,7 +23736,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 +23756,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 +23819,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 +23898,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 +23906,7 @@
             } = emitThrottles[i];
             this.emitEvent(type, ev);
           }
-          this.throttleTimer = 0, this.emitThrottles.length = 0;
+          this.emitThrottles.length = 0;
         }));
       }
       triggerStartEvent(type, ev) {
@@ -28140,10 +28199,8 @@
             } = text.attribute,
             bounds = text.AABBBounds,
             height = bounds.height(),
-            width = bounds.width(),
-            offsetY = textLayoutOffsetY(textBaseline, height, fontSize),
-            offsetX = textDrawOffsetX(textAlign, width);
-          return context.rect(offsetX + x, offsetY + y, width, height, z), picked = context.isPointInPath(pickPoint.x, pickPoint.y), picked;
+            width = bounds.width();
+          return context.rect(bounds.x1, bounds.y1, width, height, z), picked = context.isPointInPath(pickPoint.x, pickPoint.y), picked;
         }, (context, symbolAttribute, themeAttribute) => picked), this.canvasRenderer.z = 0, pickContext.modelMatrix !== lastModelMatrix && mat4Allocate.free(pickContext.modelMatrix), pickContext.modelMatrix = lastModelMatrix, pickContext.highPerformanceRestore(), picked;
       }
     };
@@ -28483,7 +28540,7 @@
 
     const roughModule = _roughModule;
 
-    const version = "0.21.0-alpha.1";
+    const version = "0.21.0-alpha.3";
     preLoadAllModule();
     if (isBrowserEnv()) {
         loadBrowserEnv(container);