@visactor/vrender-core 0.20.10-alpha.1 → 0.20.10

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 {
@@ -3048,7 +3055,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 +3070,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 });
@@ -4446,8 +4453,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);
@@ -16004,7 +16011,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;
@@ -16032,23 +16039,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) {
@@ -16078,24 +16097,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();
                 }
             }
         }
@@ -16131,7 +16162,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;
@@ -16142,23 +16173,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);
     }
@@ -16916,7 +16959,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;
@@ -16937,44 +16980,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;
@@ -17204,38 +17254,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;
     }
 };
@@ -17260,7 +17316,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) {
@@ -17277,23 +17333,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);
     }
@@ -17327,7 +17395,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;
@@ -17358,23 +17426,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);
     }
@@ -17407,7 +17487,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;
@@ -17430,23 +17510,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) {
@@ -17465,23 +17557,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);
     }
@@ -18006,7 +18110,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;
@@ -18022,23 +18126,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);
     }
@@ -18061,7 +18177,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 } = group.attribute;
         const fVisible = rectFillVisible(opacity, fillOpacity, width, height, fill);
         const sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height);
         const doFill = runFill(fill, background);
@@ -18117,23 +18233,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, x, 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, x, 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) {
@@ -18233,7 +18361,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;
@@ -18241,58 +18369,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);
     }