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

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { tau, halfPi as halfPi$1, AABBBounds, degreeToRadian, PointService, Point, abs, max, min, atan2, epsilon, Matrix, pi2, Logger, isPointInLine, pi, TextMeasure, EventEmitter, isBoolean, isObject, isFunction, isString, has, isUndefined, isArray, cos, sin, pointAt, isNumber, getDecimalPlaces, isValidNumber, clamp, getAngleByPoint, isNumberClose, isNil, Bounds, getIntersectPoint, Color, DEFAULT_COLORS, OBBBounds, normalTransform, isValidUrl, isBase64, acos, sqrt, LRU, lowerCamelCaseToMiddle, isValid, transformBoundsWithMatrix, arrayEqual, getContextFont, rotatePoint, clampAngleByRadian, asin, getRectIntersect, isRectIntersect, merge, calculateAnchorOfBounds, styleStringToObject } from '@visactor/vutils';
+import { tau, halfPi as halfPi$1, AABBBounds, degreeToRadian, PointService, Point, abs, max, min, atan2, epsilon, Matrix, pi2, Logger, isPointInLine, pi, isNumberClose, TextMeasure, EventEmitter, isBoolean, isObject, isFunction, isString, has, isUndefined, isArray, cos, sin, pointAt, isNumber, getDecimalPlaces, isValidNumber, clamp, getAngleByPoint, isNil, Bounds, getIntersectPoint, Color, DEFAULT_COLORS, OBBBounds, normalTransform, isValidUrl, isBase64, acos, sqrt, LRU, lowerCamelCaseToMiddle, isValid, transformBoundsWithMatrix, arrayEqual, getContextFont, rotatePoint, clampAngleByRadian, asin, getRectIntersect, isRectIntersect, merge, calculateAnchorOfBounds, styleStringToObject } from '@visactor/vutils';
 
 class Generator {
     static GenAutoIncrementId() {
@@ -1351,12 +1351,19 @@ function parseSvgPath(str) {
         standardCommandLen = commandLengths[commandChar];
         if (currCommandData.length - 1 > standardCommandLen) {
             let subCommand;
+            let 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);
+                if (bestCommandChar === 'm') {
+                    bestCommandChar = 'l';
+                }
+                else if (bestCommandChar === 'M') {
+                    bestCommandChar = 'L';
+                }
             }
         }
         else {
@@ -3009,6 +3016,7 @@ const DefaultStrokeStyle = Object.assign({ outerBorder: Object.assign(Object.ass
 const DefaultTextStyle = {
     text: '',
     maxLineWidth: Infinity,
+    maxWidth: Infinity,
     textAlign: 'left',
     textBaseline: 'alphabetic',
     fontSize: 16,
@@ -3048,7 +3056,7 @@ const DefaultConnectAttribute = {
 const DefaultDebugAttribute = {
     _debug_bounds: false
 };
-const DefaultAttribute = Object.assign(Object.assign(Object.assign({ strokeSeg: null, renderable: true, pickable: true, shadowGraphic: undefined, childrenPickable: true, fillPickable: true, strokePickable: true, visible: true, zIndex: 0, layout: null, boundsPadding: 0, renderStyle: 'default', pickMode: 'accurate', customPickShape: null, boundsMode: 'accurate', keepDirIn3d: true, shadowRootIdx: 1, globalZIndex: 1, globalCompositeOperation: '', overflow: 'hidden', shadowPickMode: 'graphic' }, DefaultDebugAttribute), DefaultStyle), DefaultTransform);
+const DefaultAttribute = Object.assign(Object.assign(Object.assign({ strokeSeg: null, renderable: true, pickable: true, shadowGraphic: undefined, childrenPickable: true, fillPickable: true, strokePickable: true, visible: true, zIndex: 0, layout: null, boundsPadding: 0, fillStrokeOrder: 0, renderStyle: 'default', pickMode: 'accurate', customPickShape: null, boundsMode: 'accurate', keepDirIn3d: true, shadowRootIdx: 1, globalZIndex: 1, globalCompositeOperation: '', overflow: 'hidden', shadowPickMode: 'graphic' }, DefaultDebugAttribute), DefaultStyle), DefaultTransform);
 function addAttributeToPrototype(obj, c, keys) {
     keys.forEach(key => {
         c.prototype[key] = obj[key];
@@ -3063,7 +3071,7 @@ const DefaultCircleAttribute = Object.assign(Object.assign({}, DefaultAttribute)
 const DefaultGroupAttribute = Object.assign(Object.assign({}, DefaultAttribute), { width: 0, height: 0, cornerRadius: 0, path: [], clip: false, visibleAll: true, display: 'relative', flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'flex-start', alignItems: 'flex-start', alignContent: 'flex-start', baseOpacity: 1 });
 const DefaultGlyphAttribute = Object.assign(Object.assign({}, DefaultAttribute), { path: '', width: 0, height: 0, cornerRadius: 0, clip: false });
 const DefaultLineAttribute = Object.assign(Object.assign(Object.assign({}, DefaultAttribute), DefaultConnectAttribute), { points: [], segments: [], curveType: 'linear', clipRange: 1, clipRangeByDimension: 'default', closePath: false, curveTension: 1 });
-const DefaultPathAttribute = Object.assign(Object.assign({}, DefaultAttribute), { path: new CustomPath2D(), customPath: () => {
+const DefaultPathAttribute = Object.assign(Object.assign({}, DefaultAttribute), { path: new CustomPath2D(), fillStrokeOrder: 1, customPath: () => {
         Logger.getInstance().warn('空函数');
     } });
 const DefaultPolygonAttribute = Object.assign(Object.assign({}, DefaultAttribute), { points: [], cornerRadius: 0, closePath: true });
@@ -3242,13 +3250,33 @@ let ATextMeasure = class ATextMeasure {
         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);
-        const textMeasure = this.context.measureText(text);
-        return textMeasure.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 (metrics.actualBoundingBoxAscent == null ||
+            metrics.actualBoundingBoxDescent == null ||
+            metrics.fontBoundingBoxAscent == null ||
+            metrics.fontBoundingBoxDescent == null) {
+            const { ascent, descent } = this.measureTextBoundADscentEstimate(options);
+            metrics.actualBoundingBoxAscent = ascent;
+            metrics.actualBoundingBoxDescent = descent;
+            metrics.fontBoundingBoxAscent = ascent;
+            metrics.fontBoundingBoxDescent = descent;
+        }
+        if (metrics.actualBoundingBoxLeft == null || metrics.actualBoundingBoxRight == null) {
+            const { left, right } = this.measureTextBoundLeftRightEstimate(options);
+            metrics.actualBoundingBoxLeft = left;
+            metrics.actualBoundingBoxRight = right;
+        }
+        return metrics;
     }
     estimate(text, { fontSize = DefaultTextAttribute.fontSize }) {
         let eCharLen = 0;
@@ -3261,24 +3289,125 @@ let ATextMeasure = class ATextMeasure {
             height: fontSize
         };
     }
-    measureTextPixelHeight(text, options) {
+    measureTextWidth(text, options, textMeasure) {
+        if (!this.context) {
+            return this.estimate(text, options).width;
+        }
+        textMeasure = textMeasure !== null && textMeasure !== void 0 ? textMeasure : this._measureTextWithoutAlignBaseline(text, options);
+        return textMeasure.width;
+    }
+    measureTextBoundsWidth(text, options, textMeasure) {
+        if (!this.context) {
+            return this.estimate(text, options).width;
+        }
+        textMeasure = textMeasure !== null && textMeasure !== void 0 ? textMeasure : this._measureTextWithoutAlignBaseline(text, options);
+        return textMeasure.width;
+    }
+    measureTextBoundsLeftRight(text, options, textMeasure) {
+        if (!this.context) {
+            return this.measureTextBoundLeftRightEstimate(options);
+        }
+        textMeasure = textMeasure !== null && textMeasure !== void 0 ? textMeasure : this._measureTextWithAlignBaseline(text, options, true);
+        return {
+            left: textMeasure.actualBoundingBoxLeft,
+            right: textMeasure.actualBoundingBoxRight
+        };
+    }
+    measureTextPixelHeight(text, options, textMeasure) {
         var _a;
         if (!this.context) {
             return (_a = options.fontSize) !== null && _a !== void 0 ? _a : DefaultTextStyle.fontSize;
         }
-        this.context.setTextStyleWithoutAlignBaseline(options);
-        const textMeasure = this.context.measureText(text);
+        textMeasure = textMeasure !== null && textMeasure !== void 0 ? textMeasure : this._measureTextWithoutAlignBaseline(text, options, true);
         return Math.abs(textMeasure.actualBoundingBoxAscent - textMeasure.actualBoundingBoxDescent);
     }
-    measureTextBoundHieght(text, options) {
+    measureTextPixelADscent(text, options, textMeasure) {
+        if (!this.context) {
+            return this.measureTextBoundADscentEstimate(options);
+        }
+        textMeasure = textMeasure !== null && textMeasure !== void 0 ? textMeasure : this._measureTextWithAlignBaseline(text, options, true);
+        return {
+            ascent: textMeasure.actualBoundingBoxAscent,
+            descent: textMeasure.actualBoundingBoxDescent
+        };
+    }
+    measureTextBoundHieght(text, options, textMeasure) {
         var _a;
         if (!this.context) {
             return (_a = options.fontSize) !== null && _a !== void 0 ? _a : DefaultTextStyle.fontSize;
         }
-        this.context.setTextStyleWithoutAlignBaseline(options);
-        const textMeasure = this.context.measureText(text);
+        textMeasure = textMeasure !== null && textMeasure !== void 0 ? textMeasure : this._measureTextWithoutAlignBaseline(text, options, true);
         return Math.abs(textMeasure.fontBoundingBoxAscent - textMeasure.fontBoundingBoxDescent);
     }
+    measureTextBoundADscent(text, options, textMeasure) {
+        if (!this.context) {
+            return this.measureTextBoundADscentEstimate(options);
+        }
+        textMeasure = textMeasure !== null && textMeasure !== void 0 ? textMeasure : this._measureTextWithAlignBaseline(text, options, true);
+        return {
+            ascent: textMeasure.fontBoundingBoxAscent,
+            descent: textMeasure.fontBoundingBoxDescent
+        };
+    }
+    measureTextBoundADscentEstimate(options) {
+        var _a;
+        const fontSize = (_a = options.fontSize) !== null && _a !== void 0 ? _a : DefaultTextStyle.fontSize;
+        const { textBaseline } = options;
+        if (textBaseline === 'bottom') {
+            return {
+                ascent: fontSize,
+                descent: 0
+            };
+        }
+        else if (textBaseline === 'middle') {
+            return {
+                ascent: fontSize / 2,
+                descent: fontSize / 2
+            };
+        }
+        else if (textBaseline === 'alphabetic') {
+            return {
+                ascent: 0.79 * fontSize,
+                descent: 0.21 * fontSize
+            };
+        }
+        return {
+            ascent: 0,
+            descent: fontSize
+        };
+    }
+    measureTextBoundLeftRightEstimate(options) {
+        var _a;
+        const fontSize = (_a = options.fontSize) !== null && _a !== void 0 ? _a : DefaultTextStyle.fontSize;
+        const { textAlign } = options;
+        if (textAlign === 'center') {
+            return {
+                left: fontSize / 2,
+                right: fontSize / 2
+            };
+        }
+        else if (textAlign === 'right' || textAlign === 'end') {
+            return {
+                left: fontSize,
+                right: 0
+            };
+        }
+        return {
+            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, true);
+        return {
+            ascent: out.actualBoundingBoxAscent,
+            descent: out.actualBoundingBoxDescent,
+            width: out.width
+        };
+    }
     measureText(text, options) {
         if (!this.context) {
             return this.estimate(text, options);
@@ -3376,6 +3505,11 @@ let ATextMeasure = class ATextMeasure {
         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);
         const subText = text.substring(0, middleIdx + 1);
         const strWidth = this.measureTextWidth(subText, options);
@@ -3406,25 +3540,25 @@ let ATextMeasure = class ATextMeasure {
     }
     _clipTextStart(text, options, width, leftIdx, rightIdx) {
         const middleIdx = Math.ceil((leftIdx + rightIdx) / 2);
-        const subText = text.substring(middleIdx - 1, text.length - 1);
+        const subText = text.substring(middleIdx - 1, text.length);
         const strWidth = this.measureTextWidth(subText, options);
         let length;
         if (strWidth > width) {
             if (subText.length <= 1) {
                 return { str: '', width: 0 };
             }
-            const str = text.substring(middleIdx, text.length - 1);
+            const str = text.substring(middleIdx, text.length);
             length = this.measureTextWidth(str, options);
             if (length <= width) {
                 return { str, width: length };
             }
-            return this._clipTextStart(text, options, width, middleIdx, text.length - 1);
+            return this._clipTextStart(text, options, width, middleIdx, text.length);
         }
         else 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);
             length = this.measureTextWidth(str, options);
             if (length >= width) {
                 return { str: subText, width: strWidth };
@@ -4446,8 +4580,8 @@ let DefaultWindow = class DefaultWindow {
         const viewBox = this._handler.getViewBox();
         return !(viewBox.x1 === 0 &&
             viewBox.y1 === 0 &&
-            this.width === viewBox.width() &&
-            this.height === viewBox.height());
+            isNumberClose(this.width, viewBox.width()) &&
+            isNumberClose(this.height, viewBox.height()));
     }
     isVisible(bbox) {
         return this._handler.isVisible(bbox);
@@ -5944,7 +6078,7 @@ class EventManager {
                         this.dispatchEvent(clickEvent, 'dblclick');
                     }
                 }
-                else if (clickEvent.pointerType === 'touch') {
+                else if (clickEvent.pointerType === 'touch' && this._config.supportsTouchEvents) {
                     this.dispatchEvent(clickEvent, 'tap');
                     if (clickHistory.clickCount === 2) {
                         this.dispatchEvent(clickEvent, 'dbltap');
@@ -6403,7 +6537,8 @@ class EventSystem {
         };
         const { targetElement, resolution, rootNode, global, autoPreventDefault = false, clickInterval, supportsTouchEvents = global.supportsTouchEvents, supportsPointerEvents = global.supportsPointerEvents } = params;
         this.manager = new EventManager(rootNode, {
-            clickInterval
+            clickInterval,
+            supportsTouchEvents: supportsTouchEvents
         });
         this.globalObj = global;
         this.supportsPointerEvents = supportsPointerEvents;
@@ -16010,7 +16145,7 @@ let DefaultCanvasArcRender = class DefaultCanvasArcRender extends BaseRender {
     }
     drawShape(arc, context, x, y, drawContext, params, fillCb, strokeCb) {
         const arcAttribute = getTheme(arc, params === null || params === void 0 ? void 0 : params.theme).arc;
-        const { fill = arcAttribute.fill, stroke = arcAttribute.stroke, x: originX = arcAttribute.x, y: originY = arcAttribute.y } = arc.attribute;
+        const { fill = arcAttribute.fill, stroke = arcAttribute.stroke, x: originX = arcAttribute.x, y: originY = arcAttribute.y, fillStrokeOrder = arcAttribute.fillStrokeOrder } = arc.attribute;
         const data = this.valid(arc, arcAttribute, fillCb, strokeCb);
         if (!data) {
             return;
@@ -16038,23 +16173,35 @@ let DefaultCanvasArcRender = class DefaultCanvasArcRender extends BaseRender {
             beforeRenderContribitionsRuned = true;
             context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute);
             this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb);
-            if (doFill) {
-                if (fillCb) {
-                    fillCb(context, arc.attribute, arcAttribute);
+            const _runFill = () => {
+                if (doFill) {
+                    if (fillCb) {
+                        fillCb(context, arc.attribute, arcAttribute);
+                    }
+                    else if (fVisible) {
+                        context.setCommonStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute);
+                        context.fill();
+                    }
                 }
-                else if (fVisible) {
-                    context.setCommonStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute);
-                    context.fill();
+            };
+            const _runStroke = () => {
+                if (doStroke && isFullStroke) {
+                    if (strokeCb) {
+                        strokeCb(context, arc.attribute, arcAttribute);
+                    }
+                    else if (sVisible) {
+                        context.setStrokeStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute);
+                        context.stroke();
+                    }
                 }
+            };
+            if (!fillStrokeOrder) {
+                _runFill();
+                _runStroke();
             }
-            if (doStroke && isFullStroke) {
-                if (strokeCb) {
-                    strokeCb(context, arc.attribute, arcAttribute);
-                }
-                else if (sVisible) {
-                    context.setStrokeStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute);
-                    context.stroke();
-                }
+            else {
+                _runStroke();
+                _runFill();
             }
         }
         if (!isFullStroke && doStroke) {
@@ -16084,24 +16231,36 @@ let DefaultCanvasArcRender = class DefaultCanvasArcRender extends BaseRender {
                 if (!beforeRenderContribitionsRuned) {
                     this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb);
                 }
-                if (doFill) {
-                    const color = fill;
-                    if (color.gradient === 'conical') {
-                        const lastColor = getConicGradientAt(0, 0, endAngle, color);
-                        if (fillCb) ;
-                        else if (fillVisible) {
-                            context.setCommonStyle(arc, arc.attribute, x, y, arcAttribute);
-                            context.fillStyle = lastColor;
-                            context.fill();
+                const _runFill = () => {
+                    if (doFill) {
+                        const color = fill;
+                        if (color.gradient === 'conical') {
+                            const lastColor = getConicGradientAt(0, 0, endAngle, color);
+                            if (fillCb) ;
+                            else if (fillVisible) {
+                                context.setCommonStyle(arc, arc.attribute, x, y, arcAttribute);
+                                context.fillStyle = lastColor;
+                                context.fill();
+                            }
                         }
                     }
-                }
-                if (doStroke) {
-                    if (strokeCb) ;
-                    else if (sVisible) {
-                        context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute);
-                        context.stroke();
+                };
+                const _runStroke = () => {
+                    if (doStroke) {
+                        if (strokeCb) ;
+                        else if (sVisible) {
+                            context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute);
+                            context.stroke();
+                        }
                     }
+                };
+                if (!fillStrokeOrder) {
+                    _runFill();
+                    _runStroke();
+                }
+                else {
+                    _runFill();
+                    _runStroke();
                 }
             }
         }
@@ -16137,7 +16296,7 @@ let DefaultCanvasCircleRender = class DefaultCanvasCircleRender extends BaseRend
     }
     drawShape(circle, context, x, y, drawContext, params, fillCb, strokeCb) {
         const circleAttribute = getTheme(circle, params === null || params === void 0 ? void 0 : params.theme).circle;
-        const { radius = circleAttribute.radius, startAngle = circleAttribute.startAngle, endAngle = circleAttribute.endAngle, x: originX = circleAttribute.x, y: originY = circleAttribute.y } = circle.attribute;
+        const { radius = circleAttribute.radius, startAngle = circleAttribute.startAngle, endAngle = circleAttribute.endAngle, x: originX = circleAttribute.x, y: originY = circleAttribute.y, fillStrokeOrder = circleAttribute.fillStrokeOrder } = circle.attribute;
         const data = this.valid(circle, circleAttribute, fillCb, strokeCb);
         if (!data) {
             return;
@@ -16148,23 +16307,35 @@ let DefaultCanvasCircleRender = class DefaultCanvasCircleRender extends BaseRend
         context.closePath();
         context.setShadowBlendStyle && context.setShadowBlendStyle(circle, circle.attribute, circleAttribute);
         this.beforeRenderStep(circle, context, x, y, doFill, doStroke, fVisible, sVisible, circleAttribute, drawContext, fillCb, strokeCb);
-        if (doFill) {
-            if (fillCb) {
-                fillCb(context, circle.attribute, circleAttribute);
+        const _runFill = () => {
+            if (doFill) {
+                if (fillCb) {
+                    fillCb(context, circle.attribute, circleAttribute);
+                }
+                else if (fVisible) {
+                    context.setCommonStyle(circle, circle.attribute, originX - x, originY - y, circleAttribute);
+                    context.fill();
+                }
             }
-            else if (fVisible) {
-                context.setCommonStyle(circle, circle.attribute, originX - x, originY - y, circleAttribute);
-                context.fill();
+        };
+        const _runStroke = () => {
+            if (doStroke) {
+                if (strokeCb) {
+                    strokeCb(context, circle.attribute, circleAttribute);
+                }
+                else if (sVisible) {
+                    context.setStrokeStyle(circle, circle.attribute, originX - x, originY - y, circleAttribute);
+                    context.stroke();
+                }
             }
+        };
+        if (!fillStrokeOrder) {
+            _runFill();
+            _runStroke();
         }
-        if (doStroke) {
-            if (strokeCb) {
-                strokeCb(context, circle.attribute, circleAttribute);
-            }
-            else if (sVisible) {
-                context.setStrokeStyle(circle, circle.attribute, originX - x, originY - y, circleAttribute);
-                context.stroke();
-            }
+        else {
+            _runStroke();
+            _runFill();
         }
         this.afterRenderStep(circle, context, x, y, doFill, doStroke, fVisible, sVisible, circleAttribute, drawContext, fillCb, strokeCb);
     }
@@ -16922,7 +17093,7 @@ let DefaultCanvasAreaRender = class DefaultCanvasAreaRender extends BaseRender {
         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 } = area.attribute;
         if (points.length < 2) {
             return;
@@ -16943,44 +17114,51 @@ let DefaultCanvasAreaRender = class DefaultCanvasAreaRender extends BaseRender {
         context.setShadowBlendStyle && context.setShadowBlendStyle(area, area.attribute, areaAttribute);
         this.beforeRenderStep(area, context, offsetX, offsetY, !!fillOpacity, false, fill, false, areaAttribute, drawContext, fillCb, null, { attribute: area.attribute });
         const { x: originX = 0, x: originY = 0 } = area.attribute;
-        if (fill !== false) {
-            if (fillCb) {
-                fillCb(context, area.attribute, areaAttribute);
-            }
-            else if (fillOpacity) {
-                context.setCommonStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute);
-                context.fill();
+        const _runFill = () => {
+            if (fill !== false) {
+                if (fillCb) {
+                    fillCb(context, area.attribute, areaAttribute);
+                }
+                else if (fillOpacity) {
+                    context.setCommonStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute);
+                    context.fill();
+                }
             }
-        }
-        this.afterRenderStep(area, context, offsetX, offsetY, !!fillOpacity, false, fill, false, areaAttribute, drawContext, fillCb, null, { attribute: area.attribute });
-        if (stroke) {
-            const { stroke = areaAttribute && areaAttribute.stroke } = area.attribute;
-            if (isArray(stroke) && (stroke[0] || stroke[2]) && stroke[1] === false) {
-                context.beginPath();
-                if (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);
+        };
+        const _runStroke = () => {
+            var _a, _b;
+            if (stroke) {
+                const { stroke = areaAttribute && areaAttribute.stroke } = area.attribute;
+                if (isArray(stroke) && (stroke[0] || stroke[2]) && stroke[1] === false) {
+                    context.beginPath();
+                    if (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(((_d = p.x1) !== null && _d !== void 0 ? _d : p.x) + offsetX, ((_e = p.y1) !== null && _e !== void 0 ? _e : 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(((_a = p.x1) !== null && _a !== void 0 ? _a : p.x) + offsetX, ((_b = p.y1) !== null && _b !== void 0 ? _b : p.y) + offsetY, z);
+                        }
                     }
                 }
+                if (strokeCb) {
+                    strokeCb(context, area.attribute, areaAttribute);
+                }
+                else {
+                    context.setStrokeStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute);
+                    context.stroke();
+                }
             }
-            if (strokeCb) {
-                strokeCb(context, area.attribute, areaAttribute);
-            }
-            else {
-                context.setStrokeStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute);
-                context.stroke();
-            }
-        }
+        };
+        _runFill();
+        this.afterRenderStep(area, context, offsetX, offsetY, !!fillOpacity, false, fill, false, areaAttribute, drawContext, fillCb, null, { attribute: area.attribute });
+        _runStroke();
     }
     drawShape(area, context, x, y, drawContext, params, fillCb, strokeCb) {
         var _a, _b, _c, _d, _e, _f;
@@ -17210,38 +17388,44 @@ let DefaultCanvasAreaRender = class DefaultCanvasAreaRender extends BaseRender {
         this.beforeRenderStep(area, context, offsetX, offsetY, !!fillOpacity, false, fill, false, defaultAttribute, drawContext, fillCb, null, { attribute });
         context.setShadowBlendStyle && context.setShadowBlendStyle(area, attribute, defaultAttribute);
         const { x: originX = 0, x: originY = 0 } = attribute;
-        if (fill !== false) {
-            if (fillCb) {
-                fillCb(context, attribute, defaultAttribute);
-            }
-            else if (fillOpacity) {
-                context.setCommonStyle(area, connect ? connectedStyle : attribute, originX - offsetX, originY - offsetY, connect ? da : defaultAttribute);
-                context.fill();
-            }
-        }
-        this.afterRenderStep(area, context, offsetX, offsetY, !!fillOpacity, false, fill, false, defaultAttribute, drawContext, fillCb, null, { attribute });
-        if (stroke !== false) {
-            if (strokeCb) {
-                strokeCb(context, attribute, defaultAttribute);
+        const _runFill = () => {
+            if (fill !== false) {
+                if (fillCb) {
+                    fillCb(context, attribute, defaultAttribute);
+                }
+                else if (fillOpacity) {
+                    context.setCommonStyle(area, connect ? connectedStyle : attribute, originX - offsetX, originY - offsetY, connect ? da : defaultAttribute);
+                    context.fill();
+                }
             }
-            else {
-                const { stroke = defaultAttribute && defaultAttribute[1] && defaultAttribute[1].stroke } = attribute;
-                if (isArray(stroke) && (stroke[0] || stroke[2]) && stroke[1] === false) {
-                    context.beginPath();
-                    drawSegments(context.camera ? context : context.nativeContext, stroke[0] ? cache.top : cache.bottom, clipRange, direction === Direction$1.ROW ? 'x' : 'y', {
-                        offsetX,
-                        offsetY,
-                        offsetZ,
-                        drawConnect: connect,
-                        mode: connectedType,
-                        zeroX: connectedX,
-                        zeroY: connectedY
-                    });
+        };
+        const _runStroke = () => {
+            if (stroke !== false) {
+                if (strokeCb) {
+                    strokeCb(context, attribute, defaultAttribute);
+                }
+                else {
+                    const { stroke = defaultAttribute && defaultAttribute[1] && defaultAttribute[1].stroke } = attribute;
+                    if (isArray(stroke) && (stroke[0] || stroke[2]) && stroke[1] === false) {
+                        context.beginPath();
+                        drawSegments(context.camera ? context : context.nativeContext, stroke[0] ? cache.top : cache.bottom, clipRange, direction === Direction$1.ROW ? 'x' : 'y', {
+                            offsetX,
+                            offsetY,
+                            offsetZ,
+                            drawConnect: connect,
+                            mode: connectedType,
+                            zeroX: connectedX,
+                            zeroY: connectedY
+                        });
+                    }
+                    context.setStrokeStyle(area, connect ? connectedStyle : attribute, originX - offsetX, originY - offsetY, connect ? da : defaultAttribute);
+                    context.stroke();
                 }
-                context.setStrokeStyle(area, connect ? connectedStyle : attribute, originX - offsetX, originY - offsetY, connect ? da : defaultAttribute);
-                context.stroke();
             }
-        }
+        };
+        _runFill();
+        this.afterRenderStep(area, context, offsetX, offsetY, !!fillOpacity, false, fill, false, defaultAttribute, drawContext, fillCb, null, { attribute });
+        _runStroke();
         return ret;
     }
 };
@@ -17266,7 +17450,7 @@ let DefaultCanvasPathRender = class DefaultCanvasPathRender extends BaseRender {
     drawShape(path, context, x, y, drawContext, params, fillCb, strokeCb) {
         var _a, _b, _c;
         const pathAttribute = (_a = this.tempTheme) !== null && _a !== void 0 ? _a : getTheme(path, params === null || params === void 0 ? void 0 : params.theme).path;
-        const { x: originX = pathAttribute.x, y: originY = pathAttribute.y } = path.attribute;
+        const { x: originX = pathAttribute.x, y: originY = pathAttribute.y, fillStrokeOrder = pathAttribute.fillStrokeOrder } = path.attribute;
         const z = (_b = this.z) !== null && _b !== void 0 ? _b : 0;
         const data = this.valid(path, pathAttribute, fillCb, strokeCb);
         if (!data) {
@@ -17283,23 +17467,35 @@ let DefaultCanvasPathRender = class DefaultCanvasPathRender extends BaseRender {
         }
         context.setShadowBlendStyle && context.setShadowBlendStyle(path, path.attribute, pathAttribute);
         this.beforeRenderStep(path, context, x, y, doFill, doStroke, fVisible, sVisible, pathAttribute, drawContext, fillCb, strokeCb);
-        if (doStroke) {
-            if (strokeCb) {
-                strokeCb(context, path.attribute, pathAttribute);
+        const _runStroke = () => {
+            if (doStroke) {
+                if (strokeCb) {
+                    strokeCb(context, path.attribute, pathAttribute);
+                }
+                else if (sVisible) {
+                    context.setStrokeStyle(path, path.attribute, originX - x, originY - y, pathAttribute);
+                    context.stroke();
+                }
             }
-            else if (sVisible) {
-                context.setStrokeStyle(path, path.attribute, originX - x, originY - y, pathAttribute);
-                context.stroke();
+        };
+        const _runFill = () => {
+            if (doFill) {
+                if (fillCb) {
+                    fillCb(context, path.attribute, pathAttribute);
+                }
+                else if (fVisible) {
+                    context.setCommonStyle(path, path.attribute, originX - x, originY - y, pathAttribute);
+                    context.fill();
+                }
             }
+        };
+        if (!fillStrokeOrder) {
+            _runFill();
+            _runStroke();
         }
-        if (doFill) {
-            if (fillCb) {
-                fillCb(context, path.attribute, pathAttribute);
-            }
-            else if (fVisible) {
-                context.setCommonStyle(path, path.attribute, originX - x, originY - y, pathAttribute);
-                context.fill();
-            }
+        else {
+            _runStroke();
+            _runFill();
         }
         this.afterRenderStep(path, context, x, y, doFill, doStroke, fVisible, sVisible, pathAttribute, drawContext, fillCb, strokeCb);
     }
@@ -17333,7 +17529,7 @@ let DefaultCanvasRectRender = class DefaultCanvasRectRender extends BaseRender {
     drawShape(rect, context, x, y, drawContext, params, fillCb, strokeCb) {
         var _a;
         const rectAttribute = (_a = this.tempTheme) !== null && _a !== void 0 ? _a : getTheme(rect, params === null || params === void 0 ? void 0 : params.theme).rect;
-        const { fill = rectAttribute.fill, background, stroke = rectAttribute.stroke, cornerRadius = rectAttribute.cornerRadius, opacity = rectAttribute.opacity, fillOpacity = rectAttribute.fillOpacity, lineWidth = rectAttribute.lineWidth, strokeOpacity = rectAttribute.strokeOpacity, visible = rectAttribute.visible, x1, y1, x: originX = rectAttribute.x, y: originY = rectAttribute.y } = rect.attribute;
+        const { fill = rectAttribute.fill, background, stroke = rectAttribute.stroke, cornerRadius = rectAttribute.cornerRadius, opacity = rectAttribute.opacity, fillOpacity = rectAttribute.fillOpacity, lineWidth = rectAttribute.lineWidth, strokeOpacity = rectAttribute.strokeOpacity, visible = rectAttribute.visible, x1, y1, x: originX = rectAttribute.x, y: originY = rectAttribute.y, fillStrokeOrder = rectAttribute.fillStrokeOrder } = rect.attribute;
         let { width, height } = rect.attribute;
         width = (width !== null && width !== void 0 ? width : x1 - originX) || 0;
         height = (height !== null && height !== void 0 ? height : y1 - originY) || 0;
@@ -17364,23 +17560,35 @@ let DefaultCanvasRectRender = class DefaultCanvasRectRender extends BaseRender {
         };
         context.setShadowBlendStyle && context.setShadowBlendStyle(rect, rect.attribute, rectAttribute);
         this.beforeRenderStep(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb, doFillOrStroke);
-        if (doFillOrStroke.doFill) {
-            if (fillCb) {
-                fillCb(context, rect.attribute, rectAttribute);
+        const _runFill = () => {
+            if (doFillOrStroke.doFill) {
+                if (fillCb) {
+                    fillCb(context, rect.attribute, rectAttribute);
+                }
+                else if (fVisible) {
+                    context.setCommonStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute);
+                    context.fill();
+                }
             }
-            else if (fVisible) {
-                context.setCommonStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute);
-                context.fill();
+        };
+        const _runStroke = () => {
+            if (doFillOrStroke.doStroke) {
+                if (strokeCb) {
+                    strokeCb(context, rect.attribute, rectAttribute);
+                }
+                else if (sVisible) {
+                    context.setStrokeStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute);
+                    context.stroke();
+                }
             }
+        };
+        if (!fillStrokeOrder) {
+            _runFill();
+            _runStroke();
         }
-        if (doFillOrStroke.doStroke) {
-            if (strokeCb) {
-                strokeCb(context, rect.attribute, rectAttribute);
-            }
-            else if (sVisible) {
-                context.setStrokeStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute);
-                context.stroke();
-            }
+        else {
+            _runStroke();
+            _runFill();
         }
         this.afterRenderStep(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb);
     }
@@ -17413,7 +17621,7 @@ let DefaultCanvasSymbolRender = class DefaultCanvasSymbolRender extends BaseRend
     drawShape(symbol, context, x, y, drawContext, params, fillCb, strokeCb) {
         var _a;
         const symbolAttribute = getTheme(symbol, params === null || params === void 0 ? void 0 : params.theme).symbol;
-        const { size = symbolAttribute.size, x: originX = symbolAttribute.x, y: originY = symbolAttribute.y, scaleX = symbolAttribute.scaleX, scaleY = symbolAttribute.scaleY } = symbol.attribute;
+        const { size = symbolAttribute.size, x: originX = symbolAttribute.x, y: originY = symbolAttribute.y, scaleX = symbolAttribute.scaleX, scaleY = symbolAttribute.scaleY, fillStrokeOrder = symbolAttribute.fillStrokeOrder } = symbol.attribute;
         const data = this.valid(symbol, symbolAttribute, fillCb, strokeCb);
         if (!data) {
             return;
@@ -17436,23 +17644,35 @@ let DefaultCanvasSymbolRender = class DefaultCanvasSymbolRender extends BaseRend
                 obj.stroke = (_c = a.stroke) !== null && _c !== void 0 ? _c : symbol.attribute.stroke;
                 a = obj;
             }
-            if (a.fill) {
-                if (fillCb) {
-                    fillCb(context, symbol.attribute, symbolAttribute);
+            const _runFill = () => {
+                if (a.fill) {
+                    if (fillCb) {
+                        fillCb(context, symbol.attribute, symbolAttribute);
+                    }
+                    else {
+                        context.setCommonStyle(symbol, a, originX - x, originY - y, symbolAttribute);
+                        context.fill();
+                    }
                 }
-                else {
-                    context.setCommonStyle(symbol, a, originX - x, originY - y, symbolAttribute);
-                    context.fill();
+            };
+            const _runStroke = () => {
+                if (a.stroke) {
+                    if (strokeCb) {
+                        strokeCb(context, symbol.attribute, symbolAttribute);
+                    }
+                    else {
+                        context.setStrokeStyle(symbol, a, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute);
+                        context.stroke();
+                    }
                 }
+            };
+            if (!fillStrokeOrder) {
+                _runFill();
+                _runStroke();
             }
-            if (a.stroke) {
-                if (strokeCb) {
-                    strokeCb(context, symbol.attribute, symbolAttribute);
-                }
-                else {
-                    context.setStrokeStyle(symbol, a, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute);
-                    context.stroke();
-                }
+            else {
+                _runStroke();
+                _runFill();
             }
         };
         if (keepDirIn3d && context.camera && context.project) {
@@ -17471,23 +17691,35 @@ let DefaultCanvasSymbolRender = class DefaultCanvasSymbolRender extends BaseRend
         }
         context.setShadowBlendStyle && context.setShadowBlendStyle(symbol, symbol.attribute, symbolAttribute);
         this.beforeRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb);
-        if (doFill && !parsedPath.isSvg) {
-            if (fillCb) {
-                fillCb(context, symbol.attribute, symbolAttribute);
+        const _runFill = () => {
+            if (doFill && !parsedPath.isSvg) {
+                if (fillCb) {
+                    fillCb(context, symbol.attribute, symbolAttribute);
+                }
+                else if (fVisible) {
+                    context.setCommonStyle(symbol, symbol.attribute, originX - x, originY - y, symbolAttribute);
+                    context.fill();
+                }
             }
-            else if (fVisible) {
-                context.setCommonStyle(symbol, symbol.attribute, originX - x, originY - y, symbolAttribute);
-                context.fill();
+        };
+        const _runStroke = () => {
+            if (doStroke && !parsedPath.isSvg) {
+                if (strokeCb) {
+                    strokeCb(context, symbol.attribute, symbolAttribute);
+                }
+                else if (sVisible) {
+                    context.setStrokeStyle(symbol, symbol.attribute, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute);
+                    context.stroke();
+                }
             }
+        };
+        if (!fillStrokeOrder) {
+            _runFill();
+            _runStroke();
         }
-        if (doStroke && !parsedPath.isSvg) {
-            if (strokeCb) {
-                strokeCb(context, symbol.attribute, symbolAttribute);
-            }
-            else if (sVisible) {
-                context.setStrokeStyle(symbol, symbol.attribute, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute);
-                context.stroke();
-            }
+        else {
+            _runStroke();
+            _runFill();
         }
         this.afterRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb);
     }
@@ -17734,132 +17966,82 @@ let DefaultCanvasTextRender = class DefaultCanvasTextRender extends BaseRender {
                 context.setTransformForCurrent();
             }
         };
-        if (text.isMultiLine) {
-            context.setTextStyleWithoutAlignBaseline(text.attribute, textAttribute, z);
-            if (direction === 'horizontal') {
-                const { multilineLayout } = text;
-                if (!multilineLayout) {
-                    context.highPerformanceRestore();
-                    return;
-                }
-                const { xOffset, yOffset } = multilineLayout.bbox;
-                if (doStroke) {
-                    if (strokeCb) {
-                        strokeCb(context, text.attribute, textAttribute);
-                    }
-                    else if (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);
-                        });
-                    }
-                }
-                if (doFill) {
-                    if (fillCb) {
-                        fillCb(context, text.attribute, textAttribute);
-                    }
-                    else if (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) - 0.05 * fontSize, z, textAttribute, context, {
-                                width: line.width
-                            });
-                        });
-                    }
-                }
+        context.setTextStyleWithoutAlignBaseline(text.attribute, textAttribute, z);
+        if (direction === 'horizontal') {
+            const { multilineLayout } = text;
+            if (!multilineLayout) {
+                context.highPerformanceRestore();
+                return;
             }
-            else {
-                text.tryUpdateAABBBounds();
-                const cache = text.cache;
-                const { 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;
-                let offsetX = 0;
-                if (textBaseline === 'bottom') {
-                    offsetX = -totalHeight;
+            const { xOffset, yOffset } = multilineLayout.bbox;
+            if (doStroke) {
+                if (strokeCb) {
+                    strokeCb(context, text.attribute, textAttribute);
                 }
-                else if (textBaseline === 'middle') {
-                    offsetX = -totalHeight / 2;
+                else if (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);
+                    });
                 }
-                if (textAlign === 'center') {
-                    offsetY -= totalW / 2;
+            }
+            if (doFill) {
+                if (fillCb) {
+                    fillCb(context, text.attribute, textAttribute);
                 }
-                else if (textAlign === 'right') {
-                    offsetY -= totalW;
-                }
-                verticalList.forEach((verticalData, i) => {
-                    const currentW = verticalData.reduce((a, b) => a + (b.width || 0), 0);
-                    const dw = totalW - currentW;
-                    let currentOffsetY = offsetY;
-                    if (textAlign === 'center') {
-                        currentOffsetY += dw / 2;
-                    }
-                    else if (textAlign === 'right') {
-                        currentOffsetY += dw;
-                    }
-                    verticalData.forEach(item => {
-                        const { text, width, direction } = item;
-                        drawText(text, totalHeight - (i + 1) * lineHeight + offsetX, currentOffsetY, direction);
-                        currentOffsetY += width;
+                else if (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) - 0.05 * fontSize, z, textAttribute, context, {
+                            width: line.width
+                        });
                     });
-                });
+                }
             }
         }
         else {
-            if (direction === 'horizontal') {
-                context.setTextStyle(text.attribute, textAttribute, z);
-                const t = text.clipedText;
-                let dy = 0;
-                if (lineHeight !== fontSize) {
-                    if (textBaseline === 'top') {
-                        dy = (lineHeight - fontSize) / 2;
-                    }
-                    else if (textBaseline === 'middle') ;
-                    else if (textBaseline === 'bottom') {
-                        dy = -(lineHeight - fontSize) / 2;
-                    }
-                    else ;
-                }
-                drawText(t, 0, dy, 0);
+            text.tryUpdateAABBBounds();
+            const cache = text.cache;
+            const { 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;
+            let offsetX = 0;
+            if (textBaseline === 'bottom') {
+                offsetX = -totalHeight;
             }
-            else {
-                text.tryUpdateAABBBounds();
-                const cache = text.cache;
-                if (cache) {
-                    context.setTextStyleWithoutAlignBaseline(text.attribute, textAttribute, z);
-                    const { verticalList } = cache;
-                    let offsetY = 0;
-                    const totalW = verticalList[0].reduce((a, b) => a + (b.width || 0), 0);
-                    let offsetX = 0;
-                    if (textBaseline === 'bottom') {
-                        offsetX = -lineHeight;
-                    }
-                    else if (textBaseline === 'middle') {
-                        offsetX = -lineHeight / 2;
-                    }
-                    if (textAlign === 'center') {
-                        offsetY -= totalW / 2;
-                    }
-                    else if (textAlign === 'right') {
-                        offsetY -= totalW;
-                    }
-                    context.textAlign = 'left';
-                    context.textBaseline = 'top';
-                    verticalList[0].forEach(item => {
-                        const { text, width, direction } = item;
-                        drawText(text, offsetX, offsetY, direction);
-                        offsetY += width;
-                    });
-                }
+            else if (textBaseline === 'middle') {
+                offsetX = -totalHeight / 2;
+            }
+            if (textAlign === 'center') {
+                offsetY -= totalW / 2;
+            }
+            else if (textAlign === 'right') {
+                offsetY -= totalW;
             }
+            verticalList.forEach((verticalData, i) => {
+                const currentW = verticalData.reduce((a, b) => a + (b.width || 0), 0);
+                const dw = totalW - currentW;
+                let currentOffsetY = offsetY;
+                if (textAlign === 'center') {
+                    currentOffsetY += dw / 2;
+                }
+                else if (textAlign === 'right') {
+                    currentOffsetY += dw;
+                }
+                verticalData.forEach(item => {
+                    const { text, width, direction } = item;
+                    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);
@@ -18012,7 +18194,7 @@ let DefaultCanvasPolygonRender = class DefaultCanvasPolygonRender extends BaseRe
     }
     drawShape(polygon, context, x, y, drawContext, params, fillCb, strokeCb) {
         const polygonAttribute = getTheme(polygon, params === null || params === void 0 ? void 0 : params.theme).polygon;
-        const { points = polygonAttribute.points, cornerRadius = polygonAttribute.cornerRadius, x: originX = polygonAttribute.x, y: originY = polygonAttribute.y, closePath = polygonAttribute.closePath } = polygon.attribute;
+        const { points = polygonAttribute.points, cornerRadius = polygonAttribute.cornerRadius, x: originX = polygonAttribute.x, y: originY = polygonAttribute.y, closePath = polygonAttribute.closePath, fillStrokeOrder = polygonAttribute.fillStrokeOrder } = polygon.attribute;
         const data = this.valid(polygon, polygonAttribute, fillCb, strokeCb);
         if (!data) {
             return;
@@ -18028,23 +18210,35 @@ let DefaultCanvasPolygonRender = class DefaultCanvasPolygonRender extends BaseRe
         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);
-        if (doFill) {
-            if (fillCb) {
-                fillCb(context, polygon.attribute, polygonAttribute);
+        const _runFill = () => {
+            if (doFill) {
+                if (fillCb) {
+                    fillCb(context, polygon.attribute, polygonAttribute);
+                }
+                else if (fVisible) {
+                    context.setCommonStyle(polygon, polygon.attribute, originX - x, originY - y, polygonAttribute);
+                    context.fill();
+                }
             }
-            else if (fVisible) {
-                context.setCommonStyle(polygon, polygon.attribute, originX - x, originY - y, polygonAttribute);
-                context.fill();
+        };
+        const _runStroke = () => {
+            if (doStroke) {
+                if (strokeCb) {
+                    strokeCb(context, polygon.attribute, polygonAttribute);
+                }
+                else if (sVisible) {
+                    context.setStrokeStyle(polygon, polygon.attribute, originX - x, originY - y, polygonAttribute);
+                    context.stroke();
+                }
             }
+        };
+        if (!fillStrokeOrder) {
+            _runFill();
+            _runStroke();
         }
-        if (doStroke) {
-            if (strokeCb) {
-                strokeCb(context, polygon.attribute, polygonAttribute);
-            }
-            else if (sVisible) {
-                context.setStrokeStyle(polygon, polygon.attribute, originX - x, originY - y, polygonAttribute);
-                context.stroke();
-            }
+        else {
+            _runStroke();
+            _runFill();
         }
         this.afterRenderStep(polygon, context, x, y, doFill, doStroke, fVisible, sVisible, polygonAttribute, drawContext, fillCb, strokeCb);
     }
@@ -18067,7 +18261,7 @@ let DefaultCanvasGroupRender = class DefaultCanvasGroupRender {
     }
     drawShape(group, context, x, y, drawContext, params, fillCb, strokeCb) {
         const groupAttribute = getTheme(group, params === null || params === void 0 ? void 0 : params.theme).group;
-        const { fill = groupAttribute.fill, background, stroke = groupAttribute.stroke, opacity = groupAttribute.opacity, width = groupAttribute.width, height = groupAttribute.height, clip = groupAttribute.clip, fillOpacity = groupAttribute.fillOpacity, strokeOpacity = groupAttribute.strokeOpacity, cornerRadius = groupAttribute.cornerRadius, path = groupAttribute.path, lineWidth = groupAttribute.lineWidth, visible = groupAttribute.visible } = group.attribute;
+        const { fill = groupAttribute.fill, background, stroke = groupAttribute.stroke, opacity = groupAttribute.opacity, width = groupAttribute.width, height = groupAttribute.height, clip = groupAttribute.clip, fillOpacity = groupAttribute.fillOpacity, strokeOpacity = groupAttribute.strokeOpacity, cornerRadius = groupAttribute.cornerRadius, path = groupAttribute.path, lineWidth = groupAttribute.lineWidth, visible = groupAttribute.visible, fillStrokeOrder = groupAttribute.fillStrokeOrder, x: originX = groupAttribute.x, y: originY = groupAttribute.y } = group.attribute;
         const fVisible = rectFillVisible(opacity, fillOpacity, width, height, fill);
         const sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height);
         const doFill = runFill(fill, background);
@@ -18123,23 +18317,35 @@ let DefaultCanvasGroupRender = class DefaultCanvasGroupRender {
             context.clip();
         }
         context.setShadowBlendStyle && context.setShadowBlendStyle(group, group.attribute, groupAttribute);
-        if (doFillOrStroke.doFill) {
-            if (fillCb) {
-                fillCb(context, group.attribute, groupAttribute);
+        const _runFill = () => {
+            if (doFillOrStroke.doFill) {
+                if (fillCb) {
+                    fillCb(context, group.attribute, groupAttribute);
+                }
+                else if (fVisible) {
+                    context.setCommonStyle(group, group.attribute, originX - x, originY - y, groupAttribute);
+                    context.fill();
+                }
             }
-            else if (fVisible) {
-                context.setCommonStyle(group, group.attribute, x, y, groupAttribute);
-                context.fill();
+        };
+        const _runStroke = () => {
+            if (doFillOrStroke.doStroke) {
+                if (strokeCb) {
+                    strokeCb(context, group.attribute, groupAttribute);
+                }
+                else if (sVisible) {
+                    context.setStrokeStyle(group, group.attribute, originX - x, originY - y, groupAttribute);
+                    context.stroke();
+                }
             }
+        };
+        if (!fillStrokeOrder) {
+            _runFill();
+            _runStroke();
         }
-        if (doFillOrStroke.doStroke) {
-            if (strokeCb) {
-                strokeCb(context, group.attribute, groupAttribute);
-            }
-            else if (sVisible) {
-                context.setStrokeStyle(group, group.attribute, x, y, groupAttribute);
-                context.stroke();
-            }
+        else {
+            _runStroke();
+            _runFill();
         }
         this._groupRenderContribitions.forEach(c => {
             if (c.time === BaseRenderContributionTime.afterFillStroke) {
@@ -18239,7 +18445,7 @@ let DefaultCanvasImageRender = class DefaultCanvasImageRender extends BaseRender
     }
     drawShape(image, context, x, y, drawContext, params, fillCb, strokeCb) {
         const imageAttribute = getTheme(image).image;
-        const { width = imageAttribute.width, height = imageAttribute.height, repeatX = imageAttribute.repeatX, repeatY = imageAttribute.repeatY, x: originX = imageAttribute.x, y: originY = imageAttribute.y, cornerRadius = imageAttribute.cornerRadius, image: url } = image.attribute;
+        const { width = imageAttribute.width, height = imageAttribute.height, repeatX = imageAttribute.repeatX, repeatY = imageAttribute.repeatY, x: originX = imageAttribute.x, y: originY = imageAttribute.y, cornerRadius = imageAttribute.cornerRadius, fillStrokeOrder = imageAttribute.fillStrokeOrder, image: url } = image.attribute;
         const data = this.valid(image, imageAttribute, fillCb);
         if (!data) {
             return;
@@ -18247,58 +18453,70 @@ let DefaultCanvasImageRender = class DefaultCanvasImageRender extends BaseRender
         const { fVisible, sVisible, doFill, doStroke } = data;
         context.setShadowBlendStyle && context.setShadowBlendStyle(image, imageAttribute);
         this.beforeRenderStep(image, context, x, y, doFill, false, fVisible, false, imageAttribute, drawContext, fillCb);
-        if (doFill) {
-            if (fillCb) {
-                fillCb(context, image.attribute, imageAttribute);
-            }
-            else if (fVisible) {
-                if (!url || !image.resources) {
-                    return;
-                }
-                const res = image.resources.get(url);
-                if (res.state !== 'success') {
-                    return;
+        const _runFill = () => {
+            if (doFill) {
+                if (fillCb) {
+                    fillCb(context, image.attribute, imageAttribute);
                 }
-                let needRestore = false;
-                if (cornerRadius === 0 || (isArray(cornerRadius) && cornerRadius.every(num => num === 0))) ;
-                else {
-                    context.beginPath();
-                    createRectPath(context, x, y, width, height, cornerRadius);
-                    context.save();
-                    context.clip();
-                    needRestore = true;
-                }
-                context.setCommonStyle(image, image.attribute, x, y, imageAttribute);
-                let repeat = 0;
-                if (repeatX === 'repeat') {
-                    repeat |= 0b0001;
-                }
-                if (repeatY === 'repeat') {
-                    repeat |= 0b0010;
-                }
-                if (repeat) {
-                    const pattern = context.createPattern(res.data, repeatStr[repeat]);
-                    context.fillStyle = pattern;
-                    context.translate(x, y, true);
-                    context.fillRect(0, 0, width, height);
-                    context.translate(-x, -y, true);
+                else if (fVisible) {
+                    if (!url || !image.resources) {
+                        return;
+                    }
+                    const res = image.resources.get(url);
+                    if (res.state !== 'success') {
+                        return;
+                    }
+                    let needRestore = false;
+                    if (cornerRadius === 0 || (isArray(cornerRadius) && cornerRadius.every(num => num === 0))) ;
+                    else {
+                        context.beginPath();
+                        createRectPath(context, x, y, width, height, cornerRadius);
+                        context.save();
+                        context.clip();
+                        needRestore = true;
+                    }
+                    context.setCommonStyle(image, image.attribute, x, y, imageAttribute);
+                    let repeat = 0;
+                    if (repeatX === 'repeat') {
+                        repeat |= 0b0001;
+                    }
+                    if (repeatY === 'repeat') {
+                        repeat |= 0b0010;
+                    }
+                    if (repeat) {
+                        const pattern = context.createPattern(res.data, repeatStr[repeat]);
+                        context.fillStyle = pattern;
+                        context.translate(x, y, true);
+                        context.fillRect(0, 0, width, height);
+                        context.translate(-x, -y, true);
+                    }
+                    else {
+                        context.drawImage(res.data, x, y, width, height);
+                    }
+                    if (needRestore) {
+                        context.restore();
+                    }
                 }
-                else {
-                    context.drawImage(res.data, x, y, width, height);
+            }
+        };
+        const _runStroke = () => {
+            if (doStroke) {
+                if (strokeCb) {
+                    strokeCb(context, image.attribute, imageAttribute);
                 }
-                if (needRestore) {
-                    context.restore();
+                else if (sVisible) {
+                    context.setStrokeStyle(image, image.attribute, originX - x, originY - y, imageAttribute);
+                    context.stroke();
                 }
             }
+        };
+        if (!fillStrokeOrder) {
+            _runFill();
+            _runStroke();
         }
-        if (doStroke) {
-            if (strokeCb) {
-                strokeCb(context, image.attribute, imageAttribute);
-            }
-            else if (sVisible) {
-                context.setStrokeStyle(image, image.attribute, originX - x, originY - y, imageAttribute);
-                context.stroke();
-            }
+        else {
+            _runStroke();
+            _runFill();
         }
         this.afterRenderStep(image, context, x, y, doFill, false, fVisible, false, imageAttribute, drawContext, fillCb);
     }
@@ -18893,40 +19111,6 @@ class CanvasTextLayout {
         }
         return bbox;
     }
-    GetLayout(str, width, height, textAlign, textBaseline, lineHeight, suffix, wordBreak, suffixPosition) {
-        const linesLayout = [];
-        const bboxWH = [width, height];
-        const bboxOffset = [0, 0];
-        while (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);
-        }
-        if (textAlign === 'left' || textAlign === 'start') ;
-        else if (textAlign === 'center') {
-            bboxOffset[0] = bboxWH[0] / -2;
-        }
-        else if (textAlign === 'right' || textAlign === 'end') {
-            bboxOffset[0] = -bboxWH[0];
-        }
-        if (textBaseline === 'top') ;
-        else if (textBaseline === 'middle') {
-            bboxOffset[1] = bboxWH[1] / -2;
-        }
-        else if (textBaseline === 'bottom') {
-            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, suffix = '', wordBreak, lineWidth, suffixPosition = 'end') {
         lines = lines.map(l => l.toString());
         const linesLayout = [];
@@ -18934,10 +19118,13 @@ class CanvasTextLayout {
         if (typeof lineWidth === 'number' && lineWidth !== Infinity) {
             let width;
             for (let i = 0, len = lines.length; i < len; i++) {
-                width = Math.min(this.textMeasure.measureTextWidth(lines[i], this.textOptions), lineWidth);
+                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;
@@ -18948,9 +19135,10 @@ class CanvasTextLayout {
             let text;
             for (let i = 0, len = lines.length; i < len; i++) {
                 text = lines[i];
-                width = this.textMeasure.measureTextWidth(text, this.textOptions);
+                const metrics = this.textMeasure.measureTextPixelADscentAndWidth(lines[i], this.textOptions);
+                width = metrics.width;
                 lineWidth = Math.max(lineWidth, width);
-                linesLayout.push({ str: text, width });
+                linesLayout.push({ str: text, width, ascent: metrics.ascent, descent: metrics.descent });
             }
             bboxWH[0] = lineWidth;
         }
@@ -18999,7 +19187,7 @@ class CanvasTextLayout {
         else if (textAlign === 'right' || textAlign === 'end') {
             line.leftOffset = bbox.width - line.width;
         }
-        line.topOffset = (lineHeight - this.textOptions.fontSize) / 2 + this.textOptions.fontSize * 0.79 + origin[1];
+        line.topOffset = lineHeight / 2 + (line.ascent - line.descent) / 2 + origin[1];
         origin[1] += lineHeight;
         return line;
     }
@@ -19008,6 +19196,7 @@ class CanvasTextLayout {
 const TEXT_UPDATE_TAG_KEY = [
     'text',
     'maxLineWidth',
+    'maxWidth',
     'textAlign',
     'textBaseline',
     'heightLimit',
@@ -19035,20 +19224,14 @@ class Text extends Graphic {
         var _a;
         const attribute = this.attribute;
         const textTheme = this.getGraphicTheme();
-        if (!this.isSimplify()) {
-            return undefined;
-        }
-        const { maxLineWidth = textTheme.maxLineWidth } = attribute;
-        if (!Number.isFinite(maxLineWidth)) {
+        const maxWidth = this.getMaxWidth(textTheme);
+        if (!Number.isFinite(maxWidth)) {
             return ((_a = attribute.text) !== null && _a !== void 0 ? _a : textTheme.text).toString();
         }
         this.tryUpdateAABBBounds();
         return this.cache.clipedText;
     }
     get clipedWidth() {
-        if (!this.isSimplify()) {
-            return undefined;
-        }
         this.tryUpdateAABBBounds();
         return this.cache.clipedWidth;
     }
@@ -19056,10 +19239,11 @@ class Text extends Graphic {
         var _a, _b;
         const textTheme = this.getGraphicTheme();
         const attribute = this.attribute;
-        const { maxLineWidth = textTheme.maxLineWidth, text, whiteSpace = textTheme.whiteSpace } = attribute;
-        if (!Number.isFinite(maxLineWidth)) {
+        const maxWidth = this.getMaxWidth(textTheme);
+        if (!Number.isFinite(maxWidth)) {
             return false;
         }
+        const { text } = this.attribute;
         this.tryUpdateAABBBounds();
         if ((_b = (_a = this.cache) === null || _a === void 0 ? void 0 : _a.layoutData) === null || _b === void 0 ? void 0 : _b.lines) {
             let mergedText = '';
@@ -19078,15 +19262,9 @@ class Text extends Graphic {
         return this.clipedText !== attribute.text.toString();
     }
     get multilineLayout() {
-        if (!this.isMultiLine) {
-            return undefined;
-        }
         this.tryUpdateAABBBounds();
         return this.cache.layoutData;
     }
-    isSimplify() {
-        return !this.isMultiLine && this.attribute.direction !== 'vertical';
-    }
     get isMultiLine() {
         return Array.isArray(this.attribute.text) || this.attribute.whiteSpace === 'normal';
     }
@@ -19154,13 +19332,66 @@ class Text extends Graphic {
         transformBoundsWithMatrix(aabbBounds, aabbBounds, this.transMatrix);
         return 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();
+        const { direction = textTheme.direction, underlineOffset = textTheme.underlineOffset } = this.attribute;
+        const b = direction === 'horizontal'
+            ? this.updateHorizontalMultilineAABBBounds(text)
+            : this.updateVerticalMultilineAABBBounds(text);
+        if (direction === 'horizontal') {
+            if (underlineOffset) {
+                this._AABBBounds.add(this._AABBBounds.x1, this._AABBBounds.y2 + underlineOffset);
+            }
+        }
+        return b;
+    }
+    updateHorizontalMultilineAABBBounds(text) {
+        var _a;
+        const textTheme = this.getGraphicTheme();
+        const attribute = this.attribute;
+        const { fontFamily = textTheme.fontFamily, textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline, fontSize = textTheme.fontSize, fontWeight = textTheme.fontWeight, ellipsis = textTheme.ellipsis, maxLineWidth, stroke = textTheme.stroke, wrap = textTheme.wrap, ignoreBuf = textTheme.ignoreBuf, lineWidth = textTheme.lineWidth, whiteSpace = textTheme.whiteSpace, suffixPosition = textTheme.suffixPosition } = attribute;
+        const buf = ignoreBuf ? 0 : 2;
+        const lineHeight = this.getLineHeight(attribute, textTheme) + buf;
+        if (whiteSpace === 'normal' || wrap) {
+            return this.updateWrapAABBBounds(text);
+        }
+        if (!this.shouldUpdateShape() && ((_a = this.cache) === null || _a === void 0 ? void 0 : _a.layoutData)) {
+            const bbox = this.cache.layoutData.bbox;
+            this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height);
+            if (stroke) {
+                this._AABBBounds.expand(lineWidth / 2);
+            }
+            return this._AABBBounds;
+        }
+        const textMeasure = application.graphicUtil.textMeasure;
+        const layoutObj = new CanvasTextLayout(fontFamily, { fontSize, fontWeight, fontFamily }, textMeasure);
+        const layoutData = layoutObj.GetLayoutByLines(text, textAlign, textBaseline, lineHeight, ellipsis === true ? textTheme.ellipsis : ellipsis || undefined, false, maxLineWidth, suffixPosition);
+        const { bbox } = layoutData;
+        this.cache.layoutData = layoutData;
+        this.clearUpdateShapeTag();
+        this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height);
+        if (stroke) {
+            this._AABBBounds.expand(lineWidth / 2);
+        }
+        return this._AABBBounds;
+    }
     updateWrapAABBBounds(text) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         const textTheme = this.getGraphicTheme();
         const { fontFamily = textTheme.fontFamily, textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline, fontSize = textTheme.fontSize, ellipsis = textTheme.ellipsis, maxLineWidth, stroke = textTheme.stroke, lineWidth = textTheme.lineWidth, wordBreak = textTheme.wordBreak, fontWeight = textTheme.fontWeight, ignoreBuf = textTheme.ignoreBuf, suffixPosition = textTheme.suffixPosition, heightLimit = 0, lineClamp } = this.attribute;
-        const lineHeight = (_a = calculateLineHeight(this.attribute.lineHeight, this.attribute.fontSize || textTheme.fontSize)) !== null && _a !== void 0 ? _a : (this.attribute.fontSize || textTheme.fontSize);
         const buf = ignoreBuf ? 0 : 2;
-        if (!this.shouldUpdateShape() && ((_b = this.cache) === null || _b === void 0 ? void 0 : _b.layoutData)) {
+        const lineHeight = this.getLineHeight(this.attribute, textTheme) + buf;
+        if (!this.shouldUpdateShape() && ((_a = this.cache) === null || _a === void 0 ? void 0 : _a.layoutData)) {
             const bbox = this.cache.layoutData.bbox;
             this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height);
             if (stroke) {
@@ -19169,7 +19400,8 @@ class Text extends Graphic {
             return this._AABBBounds;
         }
         const textMeasure = application.graphicUtil.textMeasure;
-        const layoutObj = new CanvasTextLayout(fontFamily, { fontSize, fontWeight, fontFamily }, textMeasure);
+        const textOptions = { fontSize, fontWeight, fontFamily };
+        const layoutObj = new CanvasTextLayout(fontFamily, textOptions, textMeasure);
         const lines = isArray(text) ? text.map(l => l.toString()) : [text.toString()];
         const linesLayout = [];
         const bboxWH = [0, 0];
@@ -19186,19 +19418,22 @@ class Text extends Graphic {
                     const str = lines[i];
                     let needCut = true;
                     if (i === lineCountLimit - 1) {
-                        const clip = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, false, suffixPosition, i !== lines.length - 1);
+                        const clip = textMeasure.clipTextWithSuffix(str, textOptions, maxLineWidth, ellipsis, false, suffixPosition, i !== lines.length - 1);
+                        const 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, wordBreak !== 'break-all', wordBreak === 'keep-all');
-                    if ((str !== '' && clip.str === '') || clip.wordBreaked) {
+                    const clip = textMeasure.clipText(str, textOptions, maxLineWidth, wordBreak === 'break-word');
+                    if (str !== '' && clip.str === '') {
                         if (ellipsis) {
-                            const clipEllipsis = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, false, suffixPosition);
-                            clip.str = (_c = clipEllipsis.str) !== null && _c !== void 0 ? _c : '';
-                            clip.width = (_d = clipEllipsis.width) !== null && _d !== void 0 ? _d : 0;
+                            const clipEllipsis = textMeasure.clipTextWithSuffix(str, textOptions, maxLineWidth, ellipsis, false, suffixPosition);
+                            clip.str = (_b = clipEllipsis.str) !== null && _b !== void 0 ? _b : '';
+                            clip.width = (_c = clipEllipsis.width) !== null && _c !== void 0 ? _c : 0;
                         }
                         else {
                             clip.str = '';
@@ -19206,21 +19441,16 @@ class Text extends Graphic {
                         }
                         needCut = false;
                     }
+                    const matrics = textMeasure.measureTextPixelADscentAndWidth(clip.str, textOptions);
                     linesLayout.push({
                         str: clip.str,
-                        width: clip.width
+                        width: clip.width,
+                        ascent: matrics.ascent,
+                        descent: matrics.descent
                     });
-                    let cutLength = clip.str.length;
-                    if (clip.wordBreaked && !(str !== '' && clip.str === '')) {
-                        needCut = true;
-                        cutLength = clip.wordBreaked;
-                    }
                     if (clip.str.length === str.length) ;
                     else if (needCut) {
-                        let newStr = str.substring(cutLength);
-                        if (wordBreak === 'keep-all') {
-                            newStr = newStr.replace(/^\s+/g, '');
-                        }
+                        const newStr = str.substring(clip.str.length);
                         lines.splice(i + 1, 0, newStr);
                     }
                 }
@@ -19237,22 +19467,26 @@ class Text extends Graphic {
             let text;
             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, false, suffixPosition);
+                    const clip = textMeasure.clipTextWithSuffix(lines[i], textOptions, maxLineWidth, ellipsis, false, suffixPosition);
+                    const 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, wordBreak === 'break-word');
+                width = textMeasure.measureTextWidth(text, textOptions);
                 lineWidth = Math.max(lineWidth, width);
-                linesLayout.push({ str: text, width });
+                const matrics = textMeasure.measureTextPixelADscentAndWidth(text, textOptions);
+                linesLayout.push({ str: text, 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,
@@ -19269,212 +19503,19 @@ class Text extends Graphic {
         }
         return this._AABBBounds;
     }
-    updateSingallineAABBBounds(text) {
-        const textTheme = this.getGraphicTheme();
-        const { direction = textTheme.direction, underlineOffset = textTheme.underlineOffset } = this.attribute;
-        const b = direction === 'horizontal'
-            ? this.updateHorizontalSinglelineAABBBounds(text)
-            : this.updateVerticalSinglelineAABBBounds(text);
-        if (direction === 'horizontal') {
-            if (underlineOffset) {
-                this._AABBBounds.add(this._AABBBounds.x1, this._AABBBounds.y2 + underlineOffset);
-            }
-        }
-        return b;
-    }
-    updateMultilineAABBBounds(text) {
-        const textTheme = this.getGraphicTheme();
-        const { direction = textTheme.direction, underlineOffset = textTheme.underlineOffset } = this.attribute;
-        const b = direction === 'horizontal'
-            ? this.updateHorizontalMultilineAABBBounds(text)
-            : this.updateVerticalMultilineAABBBounds(text);
-        if (direction === 'horizontal') {
-            if (underlineOffset) {
-                this._AABBBounds.add(this._AABBBounds.x1, this._AABBBounds.y2 + underlineOffset);
-            }
-        }
-        return b;
-    }
-    updateHorizontalSinglelineAABBBounds(text) {
-        var _a, _b;
-        const textTheme = this.getGraphicTheme();
-        const { wrap = textTheme.wrap } = this.attribute;
-        if (wrap) {
-            return this.updateWrapAABBBounds([text]);
-        }
-        const textMeasure = application.graphicUtil.textMeasure;
-        let width;
-        let str;
-        const attribute = this.attribute;
-        const { 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 (whiteSpace === 'normal') {
-            return this.updateWrapAABBBounds(text);
-        }
-        const buf = ignoreBuf ? 0 : Math.max(2, fontSize * 0.075);
-        const textFontSize = attribute.fontSize || textTheme.fontSize;
-        const lineHeight = (_a = calculateLineHeight(attribute.lineHeight, textFontSize)) !== null && _a !== void 0 ? _a : textFontSize + buf;
-        if (!this.shouldUpdateShape() && this.cache) {
-            width = (_b = this.cache.clipedWidth) !== null && _b !== void 0 ? _b : 0;
-            const dx = textDrawOffsetX(textAlign, width);
-            const dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize);
-            this._AABBBounds.set(dx, dy, dx + width, dy + lineHeight);
-            if (stroke) {
-                this._AABBBounds.expand(lineWidth / 2);
-            }
-            return this._AABBBounds;
-        }
-        if (Number.isFinite(maxLineWidth)) {
-            if (ellipsis) {
-                const strEllipsis = (ellipsis === true ? textTheme.ellipsis : ellipsis);
-                const data = textMeasure.clipTextWithSuffix(text.toString(), { fontSize, fontWeight, fontFamily }, maxLineWidth, strEllipsis, false, suffixPosition);
-                str = data.str;
-                width = data.width;
-            }
-            else {
-                const data = textMeasure.clipText(text.toString(), { fontSize, fontWeight, fontFamily }, maxLineWidth, false);
-                str = data.str;
-                width = data.width;
-            }
-            this.cache.clipedText = str;
-            this.cache.clipedWidth = width;
-        }
-        else {
-            width = textMeasure.measureTextWidth(text.toString(), { fontSize, fontWeight, fontFamily });
-            this.cache.clipedText = text.toString();
-            this.cache.clipedWidth = width;
-        }
-        this.clearUpdateShapeTag();
-        const dx = textDrawOffsetX(textAlign, width);
-        let lh = lineHeight;
-        if (application.global && application.global.isSafari()) {
-            lh += fontSize * 0.2;
-        }
-        const dy = textLayoutOffsetY(textBaseline, lh, fontSize, buf);
-        this._AABBBounds.set(dx, dy, dx + width, dy + lh);
-        if (stroke) {
-            this._AABBBounds.expand(lineWidth / 2);
-        }
-        return this._AABBBounds;
-    }
-    getBaselineMapAlign() {
-        return Text.baselineMapAlign;
-    }
-    getAlignMapBaseline() {
-        return Text.alignMapBaseline;
-    }
-    updateVerticalSinglelineAABBBounds(text) {
-        var _a, _b, _c;
-        const textTheme = this.getGraphicTheme();
-        const textMeasure = application.graphicUtil.textMeasure;
-        let width;
-        const attribute = this.attribute;
-        const { ignoreBuf = textTheme.ignoreBuf } = attribute;
-        const buf = ignoreBuf ? 0 : 2;
-        const { 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;
-        const lineHeight = (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) !== null && _a !== void 0 ? _a : (attribute.fontSize || textTheme.fontSize) + buf;
-        let { textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline } = attribute;
-        if (!verticalMode) {
-            const t = textAlign;
-            textAlign = (_b = Text.baselineMapAlign[textBaseline]) !== null && _b !== void 0 ? _b : 'left';
-            textBaseline = (_c = Text.alignMapBaseline[t]) !== null && _c !== void 0 ? _c : 'top';
-        }
-        if (!this.shouldUpdateShape() && this.cache) {
-            width = this.cache.clipedWidth;
-            const dx = textDrawOffsetX(textAlign, width);
-            const dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize);
-            this._AABBBounds.set(dy, dx, dy + lineHeight, dx + width);
-            if (stroke) {
-                this._AABBBounds.expand(lineWidth / 2);
-            }
-            return this._AABBBounds;
-        }
-        let verticalList = [
-            verticalLayout(text.toString())
-        ];
-        if (Number.isFinite(maxLineWidth)) {
-            if (ellipsis) {
-                const strEllipsis = (ellipsis === true ? textTheme.ellipsis : ellipsis);
-                const data = textMeasure.clipTextWithSuffixVertical(verticalList[0], { fontSize, fontWeight, fontFamily }, maxLineWidth, strEllipsis, false, suffixPosition);
-                verticalList = [data.verticalList];
-                width = data.width;
-            }
-            else {
-                const data = textMeasure.clipTextVertical(verticalList[0], { fontSize, fontWeight, fontFamily }, maxLineWidth, false);
-                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 === TextDirection.HORIZONTAL
-                    ? fontSize
-                    : textMeasure.measureTextWidth(t.text, { fontSize, fontWeight, fontFamily });
-                width += w;
-                t.width = w;
-            });
-            this.cache.verticalList = verticalList;
-            this.cache.clipedWidth = width;
-        }
-        this.clearUpdateShapeTag();
-        const dx = textDrawOffsetX(textAlign, width);
-        const dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize);
-        this._AABBBounds.set(dy, dx, dy + lineHeight, dx + width);
-        if (stroke) {
-            this._AABBBounds.expand(lineWidth / 2);
-        }
-        return this._AABBBounds;
-    }
-    updateHorizontalMultilineAABBBounds(text) {
-        var _a, _b;
-        const textTheme = this.getGraphicTheme();
-        const { wrap = textTheme.wrap } = this.attribute;
-        if (wrap) {
-            return this.updateWrapAABBBounds(text);
-        }
-        const attribute = this.attribute;
-        const { fontFamily = textTheme.fontFamily, textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline, fontSize = textTheme.fontSize, fontWeight = textTheme.fontWeight, ellipsis = textTheme.ellipsis, maxLineWidth, stroke = textTheme.stroke, lineWidth = textTheme.lineWidth, whiteSpace = textTheme.whiteSpace, suffixPosition = textTheme.suffixPosition } = attribute;
-        const lineHeight = (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) !== null && _a !== void 0 ? _a : (attribute.fontSize || textTheme.fontSize);
-        if (whiteSpace === 'normal') {
-            return this.updateWrapAABBBounds(text);
-        }
-        if (!this.shouldUpdateShape() && ((_b = this.cache) === null || _b === void 0 ? void 0 : _b.layoutData)) {
-            const bbox = this.cache.layoutData.bbox;
-            this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height);
-            if (stroke) {
-                this._AABBBounds.expand(lineWidth / 2);
-            }
-            return this._AABBBounds;
-        }
-        const textMeasure = application.graphicUtil.textMeasure;
-        const layoutObj = new CanvasTextLayout(fontFamily, { fontSize, fontWeight, fontFamily }, textMeasure);
-        const layoutData = layoutObj.GetLayoutByLines(text, textAlign, textBaseline, lineHeight, ellipsis === true ? textTheme.ellipsis : ellipsis || undefined, false, maxLineWidth, suffixPosition);
-        const { bbox } = layoutData;
-        this.cache.layoutData = layoutData;
-        this.clearUpdateShapeTag();
-        this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height);
-        if (stroke) {
-            this._AABBBounds.expand(lineWidth / 2);
-        }
-        return this._AABBBounds;
-    }
     updateVerticalMultilineAABBBounds(text) {
-        var _a, _b, _c;
+        var _a, _b;
         const textTheme = this.getGraphicTheme();
         const textMeasure = application.graphicUtil.textMeasure;
         let width;
         const attribute = this.attribute;
-        const { ignoreBuf = textTheme.ignoreBuf } = attribute;
-        const buf = ignoreBuf ? 0 : 2;
         const { maxLineWidth = textTheme.maxLineWidth, ellipsis = textTheme.ellipsis, fontFamily = textTheme.fontFamily, fontSize = textTheme.fontSize, fontWeight = textTheme.fontWeight, stroke = textTheme.stroke, lineWidth = textTheme.lineWidth, verticalMode = textTheme.verticalMode, suffixPosition = textTheme.suffixPosition } = attribute;
-        const lineHeight = (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) !== null && _a !== void 0 ? _a : (attribute.fontSize || textTheme.fontSize) + buf;
+        const lineHeight = this.getLineHeight(attribute, textTheme);
         let { textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline } = attribute;
         if (!verticalMode) {
             const t = textAlign;
-            textAlign = (_b = Text.baselineMapAlign[textBaseline]) !== null && _b !== void 0 ? _b : 'left';
-            textBaseline = (_c = Text.alignMapBaseline[t]) !== null && _c !== void 0 ? _c : 'top';
+            textAlign = (_a = Text.baselineMapAlign[textBaseline]) !== null && _a !== void 0 ? _a : 'left';
+            textBaseline = (_b = Text.alignMapBaseline[t]) !== null && _b !== void 0 ? _b : 'top';
         }
         width = 0;
         if (!this.shouldUpdateShape() && this.cache) {
@@ -19534,6 +19575,15 @@ class Text extends Graphic {
         }
         return this._AABBBounds;
     }
+    getMaxWidth(theme) {
+        var _a, _b;
+        const attribute = this.attribute;
+        return (_b = (_a = attribute.maxLineWidth) !== null && _a !== void 0 ? _a : attribute.maxWidth) !== null && _b !== void 0 ? _b : theme.maxWidth;
+    }
+    getLineHeight(attribute, textTheme) {
+        var _a;
+        return ((_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) !== null && _a !== void 0 ? _a : (attribute.fontSize || textTheme.fontSize));
+    }
     needUpdateTags(keys, k = TEXT_UPDATE_TAG_KEY) {
         return super.needUpdateTags(keys, k);
     }
@@ -19546,6 +19596,12 @@ class Text extends Graphic {
     getNoWorkAnimateAttr() {
         return Text.NOWORK_ANIMATE_ATTR;
     }
+    getBaselineMapAlign() {
+        return Text.baselineMapAlign;
+    }
+    getAlignMapBaseline() {
+        return Text.alignMapBaseline;
+    }
 }
 Text.NOWORK_ANIMATE_ATTR = Object.assign({ ellipsis: 1, wordBreak: 1, direction: 1, textAlign: 1, textBaseline: 1, fontFamily: 1, fontWeight: 1 }, NOWORK_ANIMATE_ATTR);
 Text.baselineMapAlign = {
@@ -19609,7 +19665,9 @@ class WrapText extends Text {
                         const clip = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, false, suffixPosition);
                         linesLayout.push({
                             str: clip.str,
-                            width: clip.width
+                            width: clip.width,
+                            ascent: 0,
+                            descent: 0
                         });
                         break;
                     }
@@ -19628,7 +19686,9 @@ class WrapText extends Text {
                     }
                     linesLayout.push({
                         str: clip.str,
-                        width: clip.width
+                        width: clip.width,
+                        ascent: 0,
+                        descent: 0
                     });
                     if (clip.str.length === str.length) ;
                     else if (needCut) {
@@ -19652,7 +19712,9 @@ class WrapText extends Text {
                     const clip = layoutObj.textMeasure.clipTextWithSuffix(lines[i], layoutObj.textOptions, maxLineWidth, ellipsis, false, suffixPosition);
                     linesLayout.push({
                         str: clip.str,
-                        width: clip.width
+                        width: clip.width,
+                        ascent: 0,
+                        descent: 0
                     });
                     lineWidth = Math.max(lineWidth, clip.width);
                     break;
@@ -19660,7 +19722,7 @@ class WrapText extends Text {
                 text = lines[i];
                 width = layoutObj.textMeasure.measureTextWidth(text, layoutObj.textOptions, wordBreak === 'break-word');
                 lineWidth = Math.max(lineWidth, width);
-                linesLayout.push({ str: text, width });
+                linesLayout.push({ str: text, width, ascent: 0, descent: 0 });
             }
             bboxWH[0] = lineWidth;
         }
@@ -24219,6 +24281,63 @@ class AutoRenderPlugin {
     }
 }
 
+class AutoRefreshPlugin {
+    constructor() {
+        this.name = 'AutoRefreshPlugin';
+        this.activeEvent = 'onRegister';
+        this._uid = Generator.GenAutoIncrementId();
+        this.key = this.name + this._uid;
+        this.handleChange = (graphic) => {
+            if (graphic.glyphHost) {
+                graphic = graphic.glyphHost;
+            }
+            if (graphic.stage === this.pluginService.stage && graphic.stage != null) {
+                graphic.stage.renderNextFrame();
+            }
+        };
+    }
+    activate(context) {
+        this.pluginService = context;
+        this.dpr = application.global.devicePixelRatio;
+        this.refresh();
+    }
+    refresh() {
+        if (!this._refreshByMediaQuery()) {
+            this._refreshByRaf();
+        }
+    }
+    _refreshByRaf() {
+        const raf = application.global.getRequestAnimationFrame();
+        this.rafId = raf(() => {
+            if (application.global.devicePixelRatio !== this.dpr) {
+                this.dpr = application.global.devicePixelRatio;
+                this.pluginService.stage.setDpr(this.dpr, true);
+            }
+            this.refresh();
+        });
+    }
+    _refreshByMediaQuery() {
+        try {
+            const mqString = `(resolution: ${window.devicePixelRatio}dppx)`;
+            const updatePixelRatio = () => {
+                if (window.devicePixelRatio !== this.dpr) {
+                    this.dpr = window.devicePixelRatio;
+                    this.pluginService.stage.setDpr(this.dpr, true);
+                }
+            };
+            matchMedia(mqString).addEventListener('change', updatePixelRatio);
+        }
+        catch (err) {
+            return false;
+        }
+        return true;
+    }
+    deactivate(context) {
+        const craf = application.global.getCancelAnimationFrame();
+        craf && this.rafId && craf(this.rafId);
+    }
+}
+
 class IncrementalAutoRenderPlugin {
     constructor() {
         this.name = 'IncrementalAutoRenderPlugin';
@@ -24561,6 +24680,9 @@ class Stage extends Group {
         if (params.autoRender) {
             this.enableAutoRender();
         }
+        if (params.autoRefresh) {
+            this.enableAutoRefresh();
+        }
         if (params.disableDirtyBounds === false) {
             this.enableDirtyBounds();
         }
@@ -24732,6 +24854,22 @@ class Stage extends Group {
             this.pluginService.unRegister(plugin);
         });
     }
+    enableAutoRefresh() {
+        if (this.autoRefresh) {
+            return;
+        }
+        this.autoRefresh = true;
+        this.pluginService.register(new AutoRefreshPlugin());
+    }
+    disableAutoRefresh() {
+        if (!this.autoRefresh) {
+            return;
+        }
+        this.autoRefresh = false;
+        this.pluginService.findPluginsByName('AutoRefreshPlugin').forEach(plugin => {
+            this.pluginService.unRegister(plugin);
+        });
+    }
     enableIncrementalAutoRender() {
         if (this.increaseAutoRender) {
             return;
@@ -26143,56 +26281,12 @@ function simplifyRadialDist(points, sqTolerance) {
     }
     return newPoints;
 }
-function simplifyDPStep(points, startIdx, endIdx, sqTolerance, simplified) {
-    let maxSqDist = sqTolerance;
-    let nextIdx = startIdx;
-    const startX = points[startIdx].x;
-    const startY = points[startIdx].y;
-    const endX = points[endIdx].x;
-    const endY = points[endIdx].y;
-    const vecX2 = endX - startX;
-    const vecY2 = endY - startY;
-    const sqLength = vecX2 * vecX2 + vecY2 * vecY2;
-    let area;
-    let sqArea;
-    let sqDistance;
-    let vecX1;
-    let 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;
-        if (sqDistance > maxSqDist) {
-            maxSqDist = sqDistance;
-            nextIdx = i;
-        }
-    }
-    if (maxSqDist > sqTolerance) {
-        if (nextIdx - startIdx > 2) {
-            simplifyDPStep(points, startIdx, nextIdx, sqTolerance, simplified);
-        }
-        simplified.push(points[nextIdx], points[nextIdx + 1]);
-        if (endIdx - nextIdx > 2) {
-            simplifyDPStep(points, nextIdx, endIdx, sqTolerance, simplified);
-        }
-    }
-}
-function simplifyDouglasPeucker(points, sqTolerance) {
-    const lastIdx = points.length - 1;
-    const simplified = [points[0]];
-    simplifyDPStep(points, 0, lastIdx, sqTolerance, simplified);
-    simplified.push(points[lastIdx]);
-    return simplified;
-}
 function flatten_simplify(points, tolerance, highestQuality) {
     if (points.length <= 10) {
         return points;
     }
     const sqTolerance = tolerance !== undefined ? tolerance * tolerance : 1;
     points = highestQuality ? points : simplifyRadialDist(points, sqTolerance);
-    points = simplifyDouglasPeucker(points, sqTolerance);
     return points;
 }