@visactor/vrender 0.20.10-alpha.0 → 0.20.10

package/dist/index.js

@@ -2732,11 +2732,12 @@
       for (let i = 0, len = paths.length; i < len; i++) if (currPath = paths[i], coordsStr = currPath.slice(1), commandChar = currPath[0], currCommandData = [commandChar], coordsStrArr = coordsStr.match(rePathCommand), null !== coordsStrArr) {
         for (let i = 0, len = coordsStrArr.length; i < len; i++) coordStr = coordsStrArr[i], coordNumber = parseFloat(coordStr), Number.isNaN(coordNumber) || currCommandData.push(coordNumber);
         if (standardCommandLen = commandLengths[commandChar], currCommandData.length - 1 > standardCommandLen) {
-          let subCommand;
+          let subCommand,
+            bestCommandChar = commandChar;
           for (let i = 1, len = currCommandData.length; i < len; i += standardCommandLen) {
-            subCommand = [commandChar];
+            subCommand = [bestCommandChar];
             for (let j = i, subLen = i + standardCommandLen; j < subLen; j++) subCommand.push(currCommandData[j]);
-            result.push(subCommand);
+            result.push(subCommand), "m" === bestCommandChar ? bestCommandChar = "l" : "M" === bestCommandChar && (bestCommandChar = "L");
           }
         } else result.push(currCommandData);
       } else result.push(currCommandData);
@@ -3985,6 +3986,7 @@
       zIndex: 0,
       layout: null,
       boundsPadding: 0,
+      fillStrokeOrder: 0,
       renderStyle: "default",
       pickMode: "accurate",
       customPickShape: null,
@@ -4063,6 +4065,7 @@
     });
     const DefaultPathAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
       path: new CustomPath2D(),
+      fillStrokeOrder: 1,
       customPath: () => {
         Logger.getInstance().warn("空函数");
       }
@@ -5088,7 +5091,7 @@
       }
       hasSubView() {
         const viewBox = this._handler.getViewBox();
-        return !(0 === viewBox.x1 && 0 === viewBox.y1 && this.width === viewBox.width() && this.height === viewBox.height());
+        return !(0 === viewBox.x1 && 0 === viewBox.y1 && isNumberClose(this.width, viewBox.width()) && isNumberClose(this.height, viewBox.height()));
       }
       isVisible(bbox) {
         return this._handler.isVisible(bbox);
@@ -12503,7 +12506,8 @@
             fill = arcAttribute.fill,
             stroke = arcAttribute.stroke,
             x: originX = arcAttribute.x,
-            y: originY = arcAttribute.y
+            y: originY = arcAttribute.y,
+            fillStrokeOrder = arcAttribute.fillStrokeOrder
           } = arc.attribute,
           data = this.valid(arc, arcAttribute, fillCb, strokeCb);
         if (!data) return;
@@ -12539,7 +12543,17 @@
           isFullStroke: isFullStroke,
           stroke: arrayStroke
         } = parseStroke(stroke);
-        if ((doFill || isFullStroke) && (context.beginPath(), drawArcPath$1(arc, context, x, y, outerRadius, innerRadius), beforeRenderContribitionsRuned = !0, context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute), this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb), doFill && (fillCb ? fillCb(context, arc.attribute, arcAttribute) : fVisible && (context.setCommonStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute), context.fill())), doStroke && isFullStroke && (strokeCb ? strokeCb(context, arc.attribute, arcAttribute) : sVisible && (context.setStrokeStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute), context.stroke()))), !isFullStroke && doStroke) {
+        if (doFill || isFullStroke) {
+          context.beginPath(), drawArcPath$1(arc, context, x, y, outerRadius, innerRadius), beforeRenderContribitionsRuned = !0, context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute), this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb);
+          const _runFill = () => {
+              doFill && (fillCb ? fillCb(context, arc.attribute, arcAttribute) : fVisible && (context.setCommonStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute), context.fill()));
+            },
+            _runStroke = () => {
+              doStroke && isFullStroke && (strokeCb ? strokeCb(context, arc.attribute, arcAttribute) : sVisible && (context.setStrokeStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute), context.stroke()));
+            };
+          fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke());
+        }
+        if (!isFullStroke && doStroke) {
           context.beginPath();
           drawArcPath$1(arc, context, x, y, outerRadius, innerRadius, arrayStroke);
           beforeRenderContribitionsRuned || this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb), strokeCb ? strokeCb(context, arc.attribute, arcAttribute) : sVisible && (context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute), context.stroke());
@@ -12557,14 +12571,20 @@
                 fill = arcAttribute.fill
               } = arc.attribute,
               startAngle = endAngle;
-            if (this.drawArcTailCapPath(arc, context, x, y, outerRadius, innerRadius, startAngle, startAngle + capAngle), beforeRenderContribitionsRuned || this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb), doFill) {
-              const color = fill;
-              if ("conical" === color.gradient) {
-                const lastColor = getConicGradientAt(0, 0, endAngle, color);
-                fillCb || fillVisible && (context.setCommonStyle(arc, arc.attribute, x, y, arcAttribute), context.fillStyle = lastColor, context.fill());
-              }
-            }
-            doStroke && (strokeCb || sVisible && (context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute), context.stroke()));
+            this.drawArcTailCapPath(arc, context, x, y, outerRadius, innerRadius, startAngle, startAngle + capAngle), beforeRenderContribitionsRuned || this.beforeRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb);
+            const _runFill = () => {
+                if (doFill) {
+                  const color = fill;
+                  if ("conical" === color.gradient) {
+                    const lastColor = getConicGradientAt(0, 0, endAngle, color);
+                    fillCb || fillVisible && (context.setCommonStyle(arc, arc.attribute, x, y, arcAttribute), context.fillStyle = lastColor, context.fill());
+                  }
+                }
+              },
+              _runStroke = () => {
+                doStroke && (strokeCb || sVisible && (context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute), context.stroke()));
+              };
+            _runFill(), _runStroke();
           }
         }
         this.afterRenderStep(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, drawContext, fillCb, strokeCb), tempChangeConicalColor && (fill.startAngle += conicalOffset, fill.endAngle += conicalOffset);
@@ -12602,7 +12622,8 @@
             startAngle = circleAttribute.startAngle,
             endAngle = circleAttribute.endAngle,
             x: originX = circleAttribute.x,
-            y: originY = circleAttribute.y
+            y: originY = circleAttribute.y,
+            fillStrokeOrder = circleAttribute.fillStrokeOrder
           } = circle.attribute,
           data = this.valid(circle, circleAttribute, fillCb, strokeCb);
         if (!data) return;
@@ -12612,7 +12633,14 @@
           doFill: doFill,
           doStroke: doStroke
         } = data;
-        context.beginPath(), context.arc(x, y, radius, startAngle, endAngle), context.closePath(), context.setShadowBlendStyle && context.setShadowBlendStyle(circle, circle.attribute, circleAttribute), this.beforeRenderStep(circle, context, x, y, doFill, doStroke, fVisible, sVisible, circleAttribute, drawContext, fillCb, strokeCb), doFill && (fillCb ? fillCb(context, circle.attribute, circleAttribute) : fVisible && (context.setCommonStyle(circle, circle.attribute, originX - x, originY - y, circleAttribute), context.fill())), doStroke && (strokeCb ? strokeCb(context, circle.attribute, circleAttribute) : sVisible && (context.setStrokeStyle(circle, circle.attribute, originX - x, originY - y, circleAttribute), context.stroke())), this.afterRenderStep(circle, context, x, y, doFill, doStroke, fVisible, sVisible, circleAttribute, drawContext, fillCb, strokeCb);
+        context.beginPath(), context.arc(x, y, radius, startAngle, endAngle), context.closePath(), context.setShadowBlendStyle && context.setShadowBlendStyle(circle, circle.attribute, circleAttribute), this.beforeRenderStep(circle, context, x, y, doFill, doStroke, fVisible, sVisible, circleAttribute, drawContext, fillCb, strokeCb);
+        const _runFill = () => {
+            doFill && (fillCb ? fillCb(context, circle.attribute, circleAttribute) : fVisible && (context.setCommonStyle(circle, circle.attribute, originX - x, originY - y, circleAttribute), context.fill()));
+          },
+          _runStroke = () => {
+            doStroke && (strokeCb ? strokeCb(context, circle.attribute, circleAttribute) : sVisible && (context.setStrokeStyle(circle, circle.attribute, originX - x, originY - y, circleAttribute), context.stroke()));
+          };
+        fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(circle, context, x, y, doFill, doStroke, fVisible, sVisible, circleAttribute, drawContext, fillCb, strokeCb);
       }
       draw(circle, renderService, drawContext, params) {
         const circleAttribute = getTheme(circle, null == params ? void 0 : params.theme).circle;
@@ -13053,7 +13081,7 @@
         super(), this.areaRenderContribitions = areaRenderContribitions, this.numberType = AREA_NUMBER_TYPE, this.builtinContributions = [defaultAreaTextureRenderContribution, defaultAreaBackgroundRenderContribution], this.init(areaRenderContribitions);
       }
       drawLinearAreaHighPerformance(area, context, fill, stroke, fillOpacity, strokeOpacity, offsetX, offsetY, areaAttribute, drawContext, params, fillCb, strokeCb) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c;
         const {
           points: points
         } = area.attribute;
@@ -13077,28 +13105,31 @@
           x: originX = 0,
           x: originY = 0
         } = area.attribute;
-        if (!1 !== fill && (fillCb ? fillCb(context, area.attribute, areaAttribute) : fillOpacity && (context.setCommonStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute), context.fill())), this.afterRenderStep(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, areaAttribute, drawContext, fillCb, null, {
+        !1 !== fill && (fillCb ? fillCb(context, area.attribute, areaAttribute) : fillOpacity && (context.setCommonStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute), context.fill())), this.afterRenderStep(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, areaAttribute, drawContext, fillCb, null, {
           attribute: area.attribute
-        }), stroke) {
-          const {
-            stroke = areaAttribute && areaAttribute.stroke
-          } = area.attribute;
-          if (isArray$1(stroke) && (stroke[0] || stroke[2]) && !1 === stroke[1]) if (context.beginPath(), stroke[0]) {
-            context.moveTo(startP.x + offsetX, startP.y + offsetY, z);
-            for (let i = 1; i < points.length; i++) {
-              const p = points[i];
-              context.lineTo(p.x + offsetX, p.y + offsetY, z);
-            }
-          } else if (stroke[2]) {
-            const endP = points[points.length - 1];
-            context.moveTo(endP.x + offsetX, endP.y + offsetY, z);
-            for (let i = points.length - 2; i >= 0; i--) {
-              const p = points[i];
-              context.lineTo((null !== (_d = p.x1) && void 0 !== _d ? _d : p.x) + offsetX, (null !== (_e = p.y1) && void 0 !== _e ? _e : p.y) + offsetY, z);
+        }), (() => {
+          var _a, _b;
+          if (stroke) {
+            const {
+              stroke = areaAttribute && areaAttribute.stroke
+            } = area.attribute;
+            if (isArray$1(stroke) && (stroke[0] || stroke[2]) && !1 === stroke[1]) if (context.beginPath(), stroke[0]) {
+              context.moveTo(startP.x + offsetX, startP.y + offsetY, z);
+              for (let i = 1; i < points.length; i++) {
+                const p = points[i];
+                context.lineTo(p.x + offsetX, p.y + offsetY, z);
+              }
+            } else if (stroke[2]) {
+              const endP = points[points.length - 1];
+              context.moveTo(endP.x + offsetX, endP.y + offsetY, z);
+              for (let i = points.length - 2; i >= 0; i--) {
+                const p = points[i];
+                context.lineTo((null !== (_a = p.x1) && void 0 !== _a ? _a : p.x) + offsetX, (null !== (_b = p.y1) && void 0 !== _b ? _b : p.y) + offsetY, z);
+              }
             }
+            strokeCb ? strokeCb(context, area.attribute, areaAttribute) : (context.setStrokeStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute), context.stroke());
           }
-          strokeCb ? strokeCb(context, area.attribute, areaAttribute) : (context.setStrokeStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute), context.stroke());
-        }
+        })();
       }
       drawShape(area, context, x, y, drawContext, params, fillCb, strokeCb) {
         var _a, _b, _c, _d, _e, _f;
@@ -13263,23 +13294,24 @@
           x: originX = 0,
           x: originY = 0
         } = attribute;
-        if (!1 !== fill && (fillCb ? fillCb(context, attribute, defaultAttribute) : fillOpacity && (context.setCommonStyle(area, connect ? connectedStyle : attribute, originX - offsetX, originY - offsetY, connect ? da : defaultAttribute), context.fill())), this.afterRenderStep(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, defaultAttribute, drawContext, fillCb, null, {
+        return !1 !== fill && (fillCb ? fillCb(context, attribute, defaultAttribute) : fillOpacity && (context.setCommonStyle(area, connect ? connectedStyle : attribute, originX - offsetX, originY - offsetY, connect ? da : defaultAttribute), context.fill())), this.afterRenderStep(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, defaultAttribute, drawContext, fillCb, null, {
           attribute: attribute
-        }), !1 !== stroke) if (strokeCb) strokeCb(context, attribute, defaultAttribute);else {
-          const {
-            stroke = defaultAttribute && defaultAttribute[1] && defaultAttribute[1].stroke
-          } = attribute;
-          isArray$1(stroke) && (stroke[0] || stroke[2]) && !1 === stroke[1] && (context.beginPath(), drawSegments(context.camera ? context : context.nativeContext, stroke[0] ? cache.top : cache.bottom, clipRange, direction === exports.Direction.ROW ? "x" : "y", {
-            offsetX: offsetX,
-            offsetY: offsetY,
-            offsetZ: offsetZ,
-            drawConnect: connect,
-            mode: connectedType,
-            zeroX: connectedX,
-            zeroY: connectedY
-          })), context.setStrokeStyle(area, connect ? connectedStyle : attribute, originX - offsetX, originY - offsetY, connect ? da : defaultAttribute), context.stroke();
-        }
-        return !1;
+        }), (() => {
+          if (!1 !== stroke) if (strokeCb) strokeCb(context, attribute, defaultAttribute);else {
+            const {
+              stroke = defaultAttribute && defaultAttribute[1] && defaultAttribute[1].stroke
+            } = attribute;
+            isArray$1(stroke) && (stroke[0] || stroke[2]) && !1 === stroke[1] && (context.beginPath(), drawSegments(context.camera ? context : context.nativeContext, stroke[0] ? cache.top : cache.bottom, clipRange, direction === exports.Direction.ROW ? "x" : "y", {
+              offsetX: offsetX,
+              offsetY: offsetY,
+              offsetZ: offsetZ,
+              drawConnect: connect,
+              mode: connectedType,
+              zeroX: connectedX,
+              zeroY: connectedY
+            })), context.setStrokeStyle(area, connect ? connectedStyle : attribute, originX - offsetX, originY - offsetY, connect ? da : defaultAttribute), context.stroke();
+          }
+        })(), !1;
       }
     };
     exports.DefaultCanvasAreaRender = __decorate$1v([injectable(), __param$N(0, inject(ContributionProvider)), __param$N(0, named(AreaRenderContribution)), __metadata$19("design:paramtypes", [Object])], exports.DefaultCanvasAreaRender);
@@ -13311,7 +13343,8 @@
         const pathAttribute = null !== (_a = this.tempTheme) && void 0 !== _a ? _a : getTheme(path, null == params ? void 0 : params.theme).path,
           {
             x: originX = pathAttribute.x,
-            y: originY = pathAttribute.y
+            y: originY = pathAttribute.y,
+            fillStrokeOrder = pathAttribute.fillStrokeOrder
           } = path.attribute,
           z = null !== (_b = this.z) && void 0 !== _b ? _b : 0,
           data = this.valid(path, pathAttribute, fillCb, strokeCb);
@@ -13326,7 +13359,14 @@
           const path2D = null !== (_c = path.attribute.path) && void 0 !== _c ? _c : pathAttribute.path;
           renderCommandList(path2D.commandList, context, x, y, 1, 1, z);
         }
-        context.setShadowBlendStyle && context.setShadowBlendStyle(path, path.attribute, pathAttribute), this.beforeRenderStep(path, context, x, y, doFill, doStroke, fVisible, sVisible, pathAttribute, drawContext, fillCb, strokeCb), doStroke && (strokeCb ? strokeCb(context, path.attribute, pathAttribute) : sVisible && (context.setStrokeStyle(path, path.attribute, originX - x, originY - y, pathAttribute), context.stroke())), doFill && (fillCb ? fillCb(context, path.attribute, pathAttribute) : fVisible && (context.setCommonStyle(path, path.attribute, originX - x, originY - y, pathAttribute), context.fill())), this.afterRenderStep(path, context, x, y, doFill, doStroke, fVisible, sVisible, pathAttribute, drawContext, fillCb, strokeCb);
+        context.setShadowBlendStyle && context.setShadowBlendStyle(path, path.attribute, pathAttribute), this.beforeRenderStep(path, context, x, y, doFill, doStroke, fVisible, sVisible, pathAttribute, drawContext, fillCb, strokeCb);
+        const _runStroke = () => {
+            doStroke && (strokeCb ? strokeCb(context, path.attribute, pathAttribute) : sVisible && (context.setStrokeStyle(path, path.attribute, originX - x, originY - y, pathAttribute), context.stroke()));
+          },
+          _runFill = () => {
+            doFill && (fillCb ? fillCb(context, path.attribute, pathAttribute) : fVisible && (context.setCommonStyle(path, path.attribute, originX - x, originY - y, pathAttribute), context.fill()));
+          };
+        fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(path, context, x, y, doFill, doStroke, fVisible, sVisible, pathAttribute, drawContext, fillCb, strokeCb);
       }
       draw(path, renderService, drawContext, params) {
         const pathAttribute = getTheme(path, null == params ? void 0 : params.theme).path;
@@ -13370,7 +13410,8 @@
             x1: x1,
             y1: y1,
             x: originX = rectAttribute.x,
-            y: originY = rectAttribute.y
+            y: originY = rectAttribute.y,
+            fillStrokeOrder = rectAttribute.fillStrokeOrder
           } = rect.attribute;
         let {
           width: width,
@@ -13389,7 +13430,14 @@
           doFill: doFill,
           doStroke: doStroke
         };
-        context.setShadowBlendStyle && context.setShadowBlendStyle(rect, rect.attribute, rectAttribute), this.beforeRenderStep(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb, doFillOrStroke), doFillOrStroke.doFill && (fillCb ? fillCb(context, rect.attribute, rectAttribute) : fVisible && (context.setCommonStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute), context.fill())), doFillOrStroke.doStroke && (strokeCb ? strokeCb(context, rect.attribute, rectAttribute) : sVisible && (context.setStrokeStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute), context.stroke())), this.afterRenderStep(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb);
+        context.setShadowBlendStyle && context.setShadowBlendStyle(rect, rect.attribute, rectAttribute), this.beforeRenderStep(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb, doFillOrStroke);
+        const _runFill = () => {
+            doFillOrStroke.doFill && (fillCb ? fillCb(context, rect.attribute, rectAttribute) : fVisible && (context.setCommonStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute), context.fill()));
+          },
+          _runStroke = () => {
+            doFillOrStroke.doStroke && (strokeCb ? strokeCb(context, rect.attribute, rectAttribute) : sVisible && (context.setStrokeStyle(rect, rect.attribute, originX - x, originY - y, rectAttribute), context.stroke()));
+          };
+        fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb);
       }
       draw(rect, renderService, drawContext, params) {
         const rectAttribute = getTheme(rect, null == params ? void 0 : params.theme).rect;
@@ -13425,7 +13473,8 @@
             x: originX = symbolAttribute.x,
             y: originY = symbolAttribute.y,
             scaleX = symbolAttribute.scaleX,
-            scaleY = symbolAttribute.scaleY
+            scaleY = symbolAttribute.scaleY,
+            fillStrokeOrder = symbolAttribute.fillStrokeOrder
           } = symbol.attribute,
           data = this.valid(symbol, symbolAttribute, fillCb, strokeCb);
         if (!data) return;
@@ -13448,14 +13497,27 @@
             const obj = Object.assign({}, a);
             obj.fill = null !== (_a = a.fill) && void 0 !== _a ? _a : symbol.attribute.fill, obj.opacity = null !== (_b = a.opacity) && void 0 !== _b ? _b : symbol.attribute.opacity, obj.fillOpacity = symbol.attribute.fillOpacity, obj.stroke = null !== (_c = a.stroke) && void 0 !== _c ? _c : symbol.attribute.stroke, a = obj;
           }
-          a.fill && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : (context.setCommonStyle(symbol, a, originX - x, originY - y, symbolAttribute), context.fill())), a.stroke && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : (context.setStrokeStyle(symbol, a, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke()));
+          const _runFill = () => {
+              a.fill && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : (context.setCommonStyle(symbol, a, originX - x, originY - y, symbolAttribute), context.fill()));
+            },
+            _runStroke = () => {
+              a.stroke && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : (context.setStrokeStyle(symbol, a, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke()));
+            };
+          fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke());
         };
         if (keepDirIn3d && context.camera && context.project) {
           const p = context.project(x, y, z),
             camera = context.camera;
           context.camera = null, !1 === parsedPath.draw(context, isArray$1(size) ? [size[0] * scaleX, size[1] * scaleY] : size * scaleX, p.x, p.y, void 0, callback) && context.closePath(), context.camera = camera;
         } else !1 === parsedPath.draw(context, size, x, y, z, callback) && context.closePath();
-        context.setShadowBlendStyle && context.setShadowBlendStyle(symbol, symbol.attribute, symbolAttribute), this.beforeRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb), doFill && !parsedPath.isSvg && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : fVisible && (context.setCommonStyle(symbol, symbol.attribute, originX - x, originY - y, symbolAttribute), context.fill())), doStroke && !parsedPath.isSvg && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : sVisible && (context.setStrokeStyle(symbol, symbol.attribute, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke())), this.afterRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb);
+        context.setShadowBlendStyle && context.setShadowBlendStyle(symbol, symbol.attribute, symbolAttribute), this.beforeRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb);
+        const _runFill = () => {
+            doFill && !parsedPath.isSvg && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : fVisible && (context.setCommonStyle(symbol, symbol.attribute, originX - x, originY - y, symbolAttribute), context.fill()));
+          },
+          _runStroke = () => {
+            doStroke && !parsedPath.isSvg && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : sVisible && (context.setStrokeStyle(symbol, symbol.attribute, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke()));
+          };
+        fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb);
       }
       draw(symbol, renderService, drawContext, params) {
         const symbolAttribute = getTheme(symbol, null == params ? void 0 : params.theme).symbol;
@@ -13842,7 +13904,8 @@
             cornerRadius = polygonAttribute.cornerRadius,
             x: originX = polygonAttribute.x,
             y: originY = polygonAttribute.y,
-            closePath = polygonAttribute.closePath
+            closePath = polygonAttribute.closePath,
+            fillStrokeOrder = polygonAttribute.fillStrokeOrder
           } = polygon.attribute,
           data = this.valid(polygon, polygonAttribute, fillCb, strokeCb);
         if (!data) return;
@@ -13852,7 +13915,14 @@
           doFill: doFill,
           doStroke: doStroke
         } = data;
-        context.beginPath(), cornerRadius <= 0 || isArray$1(cornerRadius) && cornerRadius.every(num => 0 === num) ? drawPolygon(context.camera ? context : context.nativeContext, points, x, y) : drawRoundedPolygon(context.camera ? context : context.nativeContext, points, x, y, cornerRadius, closePath), closePath && context.closePath(), context.setShadowBlendStyle && context.setShadowBlendStyle(polygon, polygon.attribute, polygonAttribute), this.beforeRenderStep(polygon, context, x, y, doFill, doStroke, fVisible, sVisible, polygonAttribute, drawContext, fillCb, strokeCb), doFill && (fillCb ? fillCb(context, polygon.attribute, polygonAttribute) : fVisible && (context.setCommonStyle(polygon, polygon.attribute, originX - x, originY - y, polygonAttribute), context.fill())), doStroke && (strokeCb ? strokeCb(context, polygon.attribute, polygonAttribute) : sVisible && (context.setStrokeStyle(polygon, polygon.attribute, originX - x, originY - y, polygonAttribute), context.stroke())), this.afterRenderStep(polygon, context, x, y, doFill, doStroke, fVisible, sVisible, polygonAttribute, drawContext, fillCb, strokeCb);
+        context.beginPath(), cornerRadius <= 0 || isArray$1(cornerRadius) && cornerRadius.every(num => 0 === num) ? drawPolygon(context.camera ? context : context.nativeContext, points, x, y) : drawRoundedPolygon(context.camera ? context : context.nativeContext, points, x, y, cornerRadius, closePath), closePath && context.closePath(), context.setShadowBlendStyle && context.setShadowBlendStyle(polygon, polygon.attribute, polygonAttribute), this.beforeRenderStep(polygon, context, x, y, doFill, doStroke, fVisible, sVisible, polygonAttribute, drawContext, fillCb, strokeCb);
+        const _runFill = () => {
+            doFill && (fillCb ? fillCb(context, polygon.attribute, polygonAttribute) : fVisible && (context.setCommonStyle(polygon, polygon.attribute, originX - x, originY - y, polygonAttribute), context.fill()));
+          },
+          _runStroke = () => {
+            doStroke && (strokeCb ? strokeCb(context, polygon.attribute, polygonAttribute) : sVisible && (context.setStrokeStyle(polygon, polygon.attribute, originX - x, originY - y, polygonAttribute), context.stroke()));
+          };
+        fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(polygon, context, x, y, doFill, doStroke, fVisible, sVisible, polygonAttribute, drawContext, fillCb, strokeCb);
       }
       draw(polygon, renderService, drawContext, params) {
         const polygonAttribute = getTheme(polygon, null == params ? void 0 : params.theme).polygon;
@@ -13895,7 +13965,8 @@
             cornerRadius = groupAttribute.cornerRadius,
             path = groupAttribute.path,
             lineWidth = groupAttribute.lineWidth,
-            visible = groupAttribute.visible
+            visible = groupAttribute.visible,
+            fillStrokeOrder = groupAttribute.fillStrokeOrder
           } = group.attribute,
           fVisible = rectFillVisible(opacity, fillOpacity, width, height, fill),
           sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height),
@@ -13921,7 +13992,14 @@
         };
         this._groupRenderContribitions.forEach(c => {
           c.time === exports.BaseRenderContributionTime.beforeFillStroke && c.drawShape(group, context, x, y, doFill, doStroke, fVisible, sVisible, groupAttribute, drawContext, fillCb, strokeCb, doFillOrStroke);
-        }), clip && context.clip(), context.setShadowBlendStyle && context.setShadowBlendStyle(group, group.attribute, groupAttribute), doFillOrStroke.doFill && (fillCb ? fillCb(context, group.attribute, groupAttribute) : fVisible && (context.setCommonStyle(group, group.attribute, x, y, groupAttribute), context.fill())), doFillOrStroke.doStroke && (strokeCb ? strokeCb(context, group.attribute, groupAttribute) : sVisible && (context.setStrokeStyle(group, group.attribute, x, y, groupAttribute), context.stroke())), this._groupRenderContribitions.forEach(c => {
+        }), clip && context.clip(), context.setShadowBlendStyle && context.setShadowBlendStyle(group, group.attribute, groupAttribute);
+        const _runFill = () => {
+            doFillOrStroke.doFill && (fillCb ? fillCb(context, group.attribute, groupAttribute) : fVisible && (context.setCommonStyle(group, group.attribute, x, y, groupAttribute), context.fill()));
+          },
+          _runStroke = () => {
+            doFillOrStroke.doStroke && (strokeCb ? strokeCb(context, group.attribute, groupAttribute) : sVisible && (context.setStrokeStyle(group, group.attribute, x, y, groupAttribute), context.stroke()));
+          };
+        fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this._groupRenderContribitions.forEach(c => {
           c.time === exports.BaseRenderContributionTime.afterFillStroke && c.drawShape(group, context, x, y, doFill, doStroke, fVisible, sVisible, groupAttribute, drawContext, fillCb, strokeCb);
         });
       }
@@ -13987,6 +14065,7 @@
             x: originX = imageAttribute.x,
             y: originY = imageAttribute.y,
             cornerRadius = imageAttribute.cornerRadius,
+            fillStrokeOrder = imageAttribute.fillStrokeOrder,
             image: url
           } = image.attribute,
           data = this.valid(image, imageAttribute, fillCb);
@@ -13997,20 +14076,26 @@
           doFill: doFill,
           doStroke: doStroke
         } = data;
-        if (context.setShadowBlendStyle && context.setShadowBlendStyle(image, imageAttribute), this.beforeRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb), doFill) if (fillCb) fillCb(context, image.attribute, imageAttribute);else if (fVisible) {
-          if (!url || !image.resources) return;
-          const res = image.resources.get(url);
-          if ("success" !== res.state) return;
-          let needRestore = !1;
-          0 === cornerRadius || isArray$1(cornerRadius) && cornerRadius.every(num => 0 === num) || (context.beginPath(), createRectPath(context, x, y, width, height, cornerRadius), context.save(), context.clip(), needRestore = !0), context.setCommonStyle(image, image.attribute, x, y, imageAttribute);
-          let repeat = 0;
-          if ("repeat" === repeatX && (repeat |= 1), "repeat" === repeatY && (repeat |= 2), repeat) {
-            const pattern = context.createPattern(res.data, repeatStr[repeat]);
-            context.fillStyle = pattern, context.translate(x, y, !0), context.fillRect(0, 0, width, height), context.translate(-x, -y, !0);
-          } else context.drawImage(res.data, x, y, width, height);
-          needRestore && context.restore();
-        }
-        doStroke && (strokeCb ? strokeCb(context, image.attribute, imageAttribute) : sVisible && (context.setStrokeStyle(image, image.attribute, originX - x, originY - y, imageAttribute), context.stroke())), this.afterRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb);
+        context.setShadowBlendStyle && context.setShadowBlendStyle(image, imageAttribute), this.beforeRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb);
+        const _runFill = () => {
+            if (doFill) if (fillCb) fillCb(context, image.attribute, imageAttribute);else if (fVisible) {
+              if (!url || !image.resources) return;
+              const res = image.resources.get(url);
+              if ("success" !== res.state) return;
+              let needRestore = !1;
+              0 === cornerRadius || isArray$1(cornerRadius) && cornerRadius.every(num => 0 === num) || (context.beginPath(), createRectPath(context, x, y, width, height, cornerRadius), context.save(), context.clip(), needRestore = !0), context.setCommonStyle(image, image.attribute, x, y, imageAttribute);
+              let repeat = 0;
+              if ("repeat" === repeatX && (repeat |= 1), "repeat" === repeatY && (repeat |= 2), repeat) {
+                const pattern = context.createPattern(res.data, repeatStr[repeat]);
+                context.fillStyle = pattern, context.translate(x, y, !0), context.fillRect(0, 0, width, height), context.translate(-x, -y, !0);
+              } else context.drawImage(res.data, x, y, width, height);
+              needRestore && context.restore();
+            }
+          },
+          _runStroke = () => {
+            doStroke && (strokeCb ? strokeCb(context, image.attribute, imageAttribute) : sVisible && (context.setStrokeStyle(image, image.attribute, originX - x, originY - y, imageAttribute), context.stroke()));
+          };
+        fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb);
       }
       draw(image, renderService, drawContext) {
         const {
@@ -28478,7 +28563,7 @@
 
     const roughModule = _roughModule;
 
-    const version = "0.20.10-alpha.0";
+    const version = "0.20.10";
     preLoadAllModule();
     if (isBrowserEnv()) {
         loadBrowserEnv(container);