@visactor/vtable 0.18.1 → 0.18.2-alpha.1

package/dist/vtable.js

@@ -5321,7 +5321,10 @@
       removeAllChild() {
         if (!this._idMap) return;
         let child = this._firstChild;
-        for (; child;) child.parent = null, child._prev = null, child._next = null, child = child._next;
+        for (; child;) {
+          const next = child._next;
+          child.parent = null, child._prev = null, child._next = null, child = next;
+        }
         this._firstChild = null, this._lastChild = null, this._idMap.clear(), this._structEdit = !0, this.setCount(1 - this._count);
       }
       replaceChild(newChild, oldChild) {
@@ -7054,18 +7057,10 @@
     class ResourceLoader {
       static GetImage(url, mark) {
         var _a;
-        let data = ResourceLoader.cache.get(url);
+        const data = ResourceLoader.cache.get(url);
         data ? "fail" === data.loadState ? application.global.getRequestAnimationFrame()(() => {
           mark.imageLoadFail(url);
-        }) : "init" === data.loadState || "loading" === data.loadState ? null === (_a = data.waitingMark) || void 0 === _a || _a.push(mark) : mark && mark.imageLoadSuccess(url, data.data) : (data = {
-          type: "image",
-          loadState: "init"
-        }, ResourceLoader.cache.set(url, data), data.dataPromise = application.global.loadImage(url), data.dataPromise ? (data.waitingMark = [mark], data.dataPromise.then(res => {
-          var _a;
-          data.loadState = (null == res ? void 0 : res.data) ? "success" : "fail", data.data = null == res ? void 0 : res.data, null === (_a = data.waitingMark) || void 0 === _a || _a.map((mark, index) => {
-            (null == res ? void 0 : res.data) ? (data.loadState = "success", data.data = res.data, mark.imageLoadSuccess(url, res.data)) : (data.loadState = "fail", mark.imageLoadFail(url));
-          });
-        })) : (data.loadState = "fail", mark.imageLoadFail(url)));
+        }) : "init" === data.loadState || "loading" === data.loadState ? null === (_a = data.waitingMark) || void 0 === _a || _a.push(mark) : mark && mark.imageLoadSuccess(url, data.data) : ResourceLoader.loadImage(url, mark);
       }
       static GetSvg(svgStr, mark) {
         var _a;
@@ -7091,8 +7086,60 @@
           loadState: "init"
         }, ResourceLoader.cache.set(url, data), "arrayBuffer" === type ? data.dataPromise = application.global.loadArrayBuffer(url) : "blob" === type ? data.dataPromise = application.global.loadBlob(url) : "json" === type && (data.dataPromise = application.global.loadJson(url)), data.dataPromise.then(data => data.data));
       }
+      static loading() {
+        setTimeout(() => {
+          if (!ResourceLoader.isLoading && ResourceLoader.toLoadAueue.length) {
+            ResourceLoader.isLoading = !0;
+            const tasks = ResourceLoader.toLoadAueue.splice(0, 10),
+              promises = [];
+            tasks.forEach(task => {
+              const {
+                  url: url,
+                  marks: marks
+                } = task,
+                data = {
+                  type: "image",
+                  loadState: "init"
+                };
+              if (ResourceLoader.cache.set(url, data), data.dataPromise = application.global.loadImage(url), data.dataPromise) {
+                data.waitingMark = marks;
+                const end = data.dataPromise.then(res => {
+                  var _a;
+                  data.loadState = (null == res ? void 0 : res.data) ? "success" : "fail", data.data = null == res ? void 0 : res.data, null === (_a = data.waitingMark) || void 0 === _a || _a.map((mark, index) => {
+                    (null == res ? void 0 : res.data) ? (data.loadState = "success", data.data = res.data, mark.imageLoadSuccess(url, res.data)) : (data.loadState = "fail", mark.imageLoadFail(url));
+                  });
+                });
+                promises.push(end);
+              } else data.loadState = "fail", marks.forEach(mark => mark.imageLoadFail(url));
+            }), Promise.all(promises).then(() => {
+              ResourceLoader.isLoading = !1, ResourceLoader.loading();
+            }).catch(error => {
+              ResourceLoader.isLoading = !1, ResourceLoader.loading();
+            });
+          }
+        }, 0);
+      }
+      static loadImage(url, mark) {
+        const index = getIndex(url, ResourceLoader.toLoadAueue);
+        if (-1 !== index) return ResourceLoader.toLoadAueue[index].marks.push(mark), void ResourceLoader.loading();
+        ResourceLoader.toLoadAueue.push({
+          url: url,
+          marks: [mark]
+        }), ResourceLoader.loading();
+      }
+      static improveImageLoading(url) {
+        const index = getIndex(url, ResourceLoader.toLoadAueue);
+        if (-1 !== index) {
+          const elememt = ResourceLoader.toLoadAueue.splice(index, 1);
+          ResourceLoader.toLoadAueue.unshift(elememt[0]);
+        }
+      }
+    }
+    function getIndex(url, arr) {
+      for (let i = 0; i < arr.length; i++) if (arr[i].url === url) return i;
+      return -1;
     }
-    ResourceLoader.cache = new Map();
+    ResourceLoader.cache = new Map(), ResourceLoader.isLoading = !1, ResourceLoader.toLoadAueue = [];
 
     const tempMatrix = new Matrix(),
       tempBounds$1 = new AABBBounds();
@@ -7290,7 +7337,7 @@
         const context = {
           type: AttributeUpdateType.INIT
         };
-        params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params, this.attribute = params, params.background && this.loadImage(params.background, !0), this._updateTag = UpdateTag.INIT, this.onAttributeUpdate(context);
+        params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params, this.attribute = params, params.background && this.loadImage(params.background, !0), this._updateTag = UpdateTag.INIT, this.valid = this.isValid(), this.onAttributeUpdate(context);
       }
       translate(x, y) {
         var _a, _b;
@@ -7708,7 +7755,7 @@
           data: "init",
           state: null
         };
-        this.resources.set(url, cache), "string" == typeof image ? (cache.state = "loading", image.startsWith("<svg") ? (ResourceLoader.GetSvg(image, this), this.backgroundImg = this.backgroundImg || background) : (isValidUrl$1(image) || image.includes("/") || isBase64$1(image)) && (ResourceLoader.GetImage(image, this), this.backgroundImg = this.backgroundImg || background)) : (cache.state = "success", cache.data = image, this.backgroundImg = this.backgroundImg || background);
+        this.resources.set(url, cache), "string" == typeof image ? (cache.state = "loading", image.startsWith("<svg") ? (ResourceLoader.GetSvg(image, this), this.backgroundImg = this.backgroundImg || background) : (isValidUrl$1(image) || image.includes("/") || isBase64$1(image)) && (ResourceLoader.GetImage(image, this), this.backgroundImg = this.backgroundImg || background)) : isObject$4(image) ? (cache.state = "success", cache.data = image, this.backgroundImg = this.backgroundImg || background) : cache.state = "fail";
       }
       imageLoadSuccess(url, image, cb) {
         if (!this.resources) return;
@@ -10646,6 +10693,12 @@
           this.failCallback && this.failCallback();
         });
       }
+      setAttributes(params, forceUpdateTag, context) {
+        return params.image && this.loadImage(params.image), super.setAttributes(params, forceUpdateTag, context);
+      }
+      setAttribute(key, value, forceUpdateTag, context) {
+        return "image" === key && this.loadImage(value), super.setAttribute(key, value, forceUpdateTag, context);
+      }
       doUpdateAABBBounds() {
         const imageTheme = getTheme(this).image;
         this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
@@ -12271,7 +12324,7 @@
 
     let text;
     function getTextBounds(params) {
-      return text || (text = graphicCreator.CreateGraphic("text", {})), text.setAttributes(params), text.AABBBounds;
+      return text || (text = graphicCreator.CreateGraphic("text", {})), text.initAttributes(params), text.AABBBounds;
     }
 
     const result = {
@@ -12402,6 +12455,234 @@
       }
     }
 
+    const parse$3 = function () {
+      const tokens = {
+        linearGradient: /^(linear\-gradient)/i,
+        radialGradient: /^(radial\-gradient)/i,
+        conicGradient: /^(conic\-gradient)/i,
+        sideOrCorner: /^to (left (top|bottom)|right (top|bottom)|top (left|right)|bottom (left|right)|left|right|top|bottom)/i,
+        extentKeywords: /^(closest\-side|closest\-corner|farthest\-side|farthest\-corner|contain|cover)/,
+        positionKeywords: /^(left|center|right|top|bottom)/i,
+        pixelValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))px/,
+        percentageValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))\%/,
+        emValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))em/,
+        angleValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/,
+        fromAngleValue: /^from\s*(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/,
+        startCall: /^\(/,
+        endCall: /^\)/,
+        comma: /^,/,
+        hexColor: /(^\#[0-9a-fA-F]+)/,
+        literalColor: /^([a-zA-Z]+)/,
+        rgbColor: /^(rgb\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))/i,
+        rgbaColor: /^(rgba\(\d{1,3},\s*\d{1,3},\s*\d{1,3},\s*((\d\.\d+)|\d{1,3})\))/i,
+        number: /^(([0-9]*\.[0-9]+)|([0-9]+\.?))/
+      };
+      let input = "";
+      function error(msg) {
+        const err = new Error(input + ": " + msg);
+        throw err.source = input, err;
+      }
+      function getAST() {
+        const ast = matchListing(matchDefinition);
+        return input.length > 0 && error("Invalid input not EOF"), ast;
+      }
+      function matchDefinition() {
+        return matchGradient("linear", tokens.linearGradient, matchLinearOrientation) || matchGradient("radial", tokens.radialGradient, matchListRadialOrientations) || matchGradient("conic", tokens.conicGradient, matchConicalOrientation);
+      }
+      function matchGradient(gradientType, pattern, orientationMatcher) {
+        return function (pattern, callback) {
+          const captures = scan(pattern);
+          if (captures) {
+            scan(tokens.startCall) || error("Missing (");
+            const result = callback(captures);
+            return scan(tokens.endCall) || error("Missing )"), result;
+          }
+        }(pattern, function (captures) {
+          const orientation = orientationMatcher();
+          return orientation && (scan(tokens.comma) || error("Missing comma before color stops")), {
+            type: gradientType,
+            orientation: orientation,
+            colorStops: matchListing(matchColorStop)
+          };
+        });
+      }
+      function matchLinearOrientation() {
+        return match("directional", tokens.sideOrCorner, 1) || match("angular", tokens.angleValue, 1);
+      }
+      function matchConicalOrientation() {
+        return match("angular", tokens.fromAngleValue, 1);
+      }
+      function matchListRadialOrientations() {
+        let radialOrientations,
+          lookaheadCache,
+          radialOrientation = matchRadialOrientation();
+        return radialOrientation && (radialOrientations = [], radialOrientations.push(radialOrientation), lookaheadCache = input, scan(tokens.comma) && (radialOrientation = matchRadialOrientation(), radialOrientation ? radialOrientations.push(radialOrientation) : input = lookaheadCache)), radialOrientations;
+      }
+      function matchRadialOrientation() {
+        let radialType = function () {
+          const circle = match("shape", /^(circle)/i, 0);
+          circle && (circle.style = matchLength() || matchExtentKeyword());
+          return circle;
+        }() || function () {
+          const ellipse = match("shape", /^(ellipse)/i, 0);
+          ellipse && (ellipse.style = matchDistance() || matchExtentKeyword());
+          return ellipse;
+        }();
+        if (radialType) radialType.at = matchAtPosition();else {
+          const extent = matchExtentKeyword();
+          if (extent) {
+            radialType = extent;
+            const positionAt = matchAtPosition();
+            positionAt && (radialType.at = positionAt);
+          } else {
+            const defaultPosition = matchPositioning();
+            defaultPosition && (radialType = {
+              type: "default-radial",
+              at: defaultPosition
+            });
+          }
+        }
+        return radialType;
+      }
+      function matchExtentKeyword() {
+        return match("extent-keyword", tokens.extentKeywords, 1);
+      }
+      function matchAtPosition() {
+        if (match("position", /^at/, 0)) {
+          const positioning = matchPositioning();
+          return positioning || error("Missing positioning value"), positioning;
+        }
+      }
+      function matchPositioning() {
+        const location = {
+          x: matchDistance(),
+          y: matchDistance()
+        };
+        if (location.x || location.y) return {
+          type: "position",
+          value: location
+        };
+      }
+      function matchListing(matcher) {
+        let captures = matcher();
+        const result = [];
+        if (captures) for (result.push(captures); scan(tokens.comma);) captures = matcher(), captures ? result.push(captures) : error("One extra comma");
+        return result;
+      }
+      function matchColorStop() {
+        const color = match("hex", tokens.hexColor, 1) || match("rgba", tokens.rgbaColor, 1) || match("rgb", tokens.rgbColor, 1) || match("literal", tokens.literalColor, 0);
+        return color || error("Expected color definition"), color.length = matchDistance(), color;
+      }
+      function matchDistance() {
+        return match("%", tokens.percentageValue, 1) || match("position-keyword", tokens.positionKeywords, 1) || matchLength();
+      }
+      function matchLength() {
+        return match("px", tokens.pixelValue, 1) || match("em", tokens.emValue, 1);
+      }
+      function match(type, pattern, captureIndex) {
+        const captures = scan(pattern);
+        if (captures) return {
+          type: type,
+          value: captures[captureIndex]
+        };
+      }
+      function scan(regexp) {
+        const blankCaptures = /^[\n\r\t\s]+/.exec(input);
+        blankCaptures && consume(blankCaptures[0].length);
+        const captures = regexp.exec(input);
+        return captures && consume(captures[0].length), captures;
+      }
+      function consume(size) {
+        input = input.substr(size);
+      }
+      return function (code) {
+        return input = code.toString(), getAST();
+      };
+    }();
+    class GradientParser {
+      static IsGradient(c) {
+        return !("string" == typeof c && c.length < 10);
+      }
+      static IsGradientStr(c) {
+        return "string" == typeof c && c.length > 10;
+      }
+      static Parse(c) {
+        if (GradientParser.IsGradientStr(c)) try {
+          const datum = parse$3(c)[0];
+          if (datum) {
+            if ("linear" === datum.type) return GradientParser.ParseLinear(datum);
+            if ("radial" === datum.type) return GradientParser.ParseRadial(datum);
+            if ("conic" === datum.type) return GradientParser.ParseConic(datum);
+          }
+        } catch (err) {
+          return c;
+        }
+        return c;
+      }
+      static ParseConic(datum) {
+        const {
+            orientation: orientation,
+            colorStops = []
+          } = datum,
+          halfPi = pi / 2,
+          sa = parseFloat(orientation.value) / 180 * pi - halfPi;
+        return {
+          gradient: "conical",
+          x: .5,
+          y: .5,
+          startAngle: sa,
+          endAngle: sa + pi2,
+          stops: colorStops.map(item => ({
+            color: item.value,
+            offset: parseFloat(item.length.value) / 100
+          }))
+        };
+      }
+      static ParseRadial(datum) {
+        const {
+          colorStops = []
+        } = datum;
+        return {
+          gradient: "radial",
+          x0: .5,
+          y0: .5,
+          x1: .5,
+          y1: .5,
+          r0: 0,
+          r1: 1,
+          stops: colorStops.map(item => ({
+            color: item.value,
+            offset: parseFloat(item.length.value) / 100
+          }))
+        };
+      }
+      static ParseLinear(datum) {
+        const {
+            orientation: orientation,
+            colorStops = []
+          } = datum,
+          halfPi = pi / 2;
+        let angle = "angular" === orientation.type ? parseFloat(orientation.value) / 180 * pi : 0;
+        for (; angle < 0;) angle += pi2;
+        for (; angle > pi2;) angle -= pi2;
+        let x0 = 0,
+          y0 = 0,
+          x1 = 0,
+          y1 = 0;
+        return angle < halfPi ? (x0 = 0, y0 = 1, x1 = Math.sin(angle), y1 = Math.cos(angle)) : angle < pi ? (x0 = 0, y0 = 0, x1 = Math.cos(angle - halfPi), y1 = Math.sin(angle - halfPi)) : angle < pi + halfPi ? (x0 = 1, y0 = 0, x1 = x0 - Math.sin(angle - pi), y1 = Math.cos(angle - pi)) : (x0 = 1, x1 = x0 - Math.cos(angle - halfPi - pi), y1 -= Math.sin(angle - halfPi - pi)), {
+          gradient: "linear",
+          x0: x0,
+          y0: y0,
+          x1: x1,
+          y1: y1,
+          stops: colorStops.map(item => ({
+            color: item.value,
+            offset: parseFloat(item.length.value) / 100
+          }))
+        };
+      }
+    }
+
     function getScaledStroke(context, width, dpr) {
       let strokeWidth = width;
       const {
@@ -12418,7 +12699,7 @@
       if (!c || !0 === c) return "black";
       let result, color;
       if (isArray$1(c)) for (let i = 0; i < c.length && (color = c[i], !color); i++);else color = c;
-      return "string" == typeof color ? color : ("linear" === color.gradient ? result = createLinearGradient(context, color, params, offsetX, offsetY) : "conical" === color.gradient ? result = createConicGradient(context, color, params, offsetX, offsetY) : "radial" === color.gradient && (result = createRadialGradient(context, color, params, offsetX, offsetY)), result || "orange");
+      return color = GradientParser.Parse(color), "string" == typeof color ? color : ("linear" === color.gradient ? result = createLinearGradient(context, color, params, offsetX, offsetY) : "conical" === color.gradient ? result = createConicGradient(context, color, params, offsetX, offsetY) : "radial" === color.gradient && (result = createRadialGradient(context, color, params, offsetX, offsetY)), result || "orange");
     }
     function createLinearGradient(context, color, params) {
       let offsetX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
@@ -14631,7 +14912,9 @@
           image: url
         } = image.attribute;
         if (!url || !image.resources) return;
-        if ("success" !== image.resources.get(url).state) return;
+        const res = image.resources.get(url);
+        if ("loading" === res.state && isString$2(url)) return void ResourceLoader.improveImageLoading(url);
+        if ("success" !== res.state) return;
         const {
           context: context
         } = renderService.drawParams;
@@ -14671,6 +14954,197 @@
       },
       __metadata$H = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+      };
+    const DrawItemInterceptor = Symbol.for("DrawItemInterceptor");
+    const tempDirtyBounds = new AABBBounds();
+    class ShadowRootDrawItemInterceptorContribution {
+      constructor() {
+        this.order = 1;
+      }
+      afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        return (graphic.attribute.shadowRootIdx > 0 || !graphic.attribute.shadowRootIdx) && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !1;
+      }
+      beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        return graphic.attribute.shadowRootIdx < 0 && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !1;
+      }
+      drawItem(graphic, renderService, drawContext, drawContribution, params) {
+        if (!graphic.shadowRoot) return !1;
+        const {
+          context: context
+        } = drawContext;
+        if (context.highPerformanceSave(), context.transformFromMatrix(graphic.transMatrix, !0), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds) {
+          tempDirtyBounds.copy(drawContribution.dirtyBounds);
+          const m = graphic.globalTransMatrix.getInverse();
+          drawContribution.dirtyBounds.copy(drawContribution.backupDirtyBounds).transformWithMatrix(m);
+        }
+        return drawContribution.renderGroup(graphic.shadowRoot, drawContext, graphic.parent.globalTransMatrix), context.highPerformanceRestore(), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds && drawContribution.dirtyBounds.copy(tempDirtyBounds), !0;
+      }
+    }
+    class DebugDrawItemInterceptorContribution {
+      constructor() {
+        this.order = 1;
+      }
+      afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        return graphic.attribute._debug_bounds && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !1;
+      }
+      drawItem(graphic, renderService, drawContext, drawContribution, params) {
+        if (!graphic.attribute._debug_bounds) return !1;
+        const {
+          context: context
+        } = drawContext;
+        context.highPerformanceSave(), graphic.parent && context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), graphic.glyphHost && graphic.glyphHost.parent && context.setTransformFromMatrix(graphic.glyphHost.parent.globalTransMatrix, !0);
+        const b = graphic.AABBBounds;
+        return !0 !== graphic.attribute._debug_bounds && graphic.attribute._debug_bounds(context, graphic), context.strokeRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore(), !0;
+      }
+    }
+    let CommonDrawItemInterceptorContribution = class {
+      constructor() {
+        this.order = 1, this.interceptors = [new ShadowRootDrawItemInterceptorContribution(), new Canvas3DDrawItemInterceptor(), new InteractiveDrawItemInterceptorContribution(), new DebugDrawItemInterceptorContribution()];
+      }
+      afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        for (let i = 0; i < this.interceptors.length; i++) if (this.interceptors[i].afterDrawItem && this.interceptors[i].afterDrawItem(graphic, renderService, drawContext, drawContribution, params)) return !0;
+        return !1;
+      }
+      beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        if ((!graphic.in3dMode || drawContext.in3dInterceptor) && !graphic.shadowRoot && !(graphic.baseGraphic || graphic.attribute.globalZIndex || graphic.interactiveGraphic)) return !1;
+        for (let i = 0; i < this.interceptors.length; i++) if (this.interceptors[i].beforeDrawItem && this.interceptors[i].beforeDrawItem(graphic, renderService, drawContext, drawContribution, params)) return !0;
+        return !1;
+      }
+    };
+    CommonDrawItemInterceptorContribution = __decorate$Y([injectable(), __metadata$H("design:paramtypes", [])], CommonDrawItemInterceptorContribution);
+    class InteractiveDrawItemInterceptorContribution {
+      constructor() {
+        this.order = 1;
+      }
+      beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        return !this.processing && (graphic.baseGraphic ? this.beforeDrawInteractive(graphic, renderService, drawContext, drawContribution, params) : this.beforeSetInteractive(graphic, renderService, drawContext, drawContribution, params));
+      }
+      beforeSetInteractive(graphic, renderService, drawContext, drawContribution, params) {
+        let interactiveGraphic = graphic.interactiveGraphic;
+        if (graphic.attribute.globalZIndex) {
+          interactiveGraphic || (interactiveGraphic = graphic.clone(), graphic.interactiveGraphic = interactiveGraphic, interactiveGraphic.baseGraphic = graphic), interactiveGraphic.setAttributes({
+            globalZIndex: 0,
+            zIndex: graphic.attribute.globalZIndex
+          }, !1, {
+            skipUpdateCallback: !0
+          }), drawContext.stage.tryInitInteractiveLayer();
+          const interactiveLayer = drawContext.stage.getLayer("_builtin_interactive");
+          if (interactiveLayer) {
+            this.getShadowRoot(interactiveLayer).add(interactiveGraphic);
+          }
+          return !0;
+        }
+        if (interactiveGraphic) {
+          drawContext.stage.tryInitInteractiveLayer();
+          const interactiveLayer = drawContext.stage.getLayer("_builtin_interactive");
+          if (interactiveLayer) {
+            this.getShadowRoot(interactiveLayer).removeChild(interactiveGraphic);
+          }
+          graphic.interactiveGraphic = null, interactiveGraphic.baseGraphic = null;
+        }
+        return !1;
+      }
+      beforeDrawInteractive(graphic, renderService, drawContext, drawContribution, params) {
+        const baseGraphic = graphic.baseGraphic;
+        if (baseGraphic) {
+          this.processing = !0;
+          const {
+            context: context
+          } = drawContext;
+          return context.highPerformanceSave(), context.setTransformFromMatrix(baseGraphic.parent.globalTransMatrix, !0), baseGraphic.isContainer ? drawContribution.renderGroup(baseGraphic, drawContext, baseGraphic.parent.globalTransMatrix) : drawContribution.renderItem(baseGraphic, drawContext), context.highPerformanceRestore(), this.processing = !1, !0;
+        }
+        return !1;
+      }
+      getShadowRoot(interactiveLayer) {
+        var _a;
+        let group = interactiveLayer.getElementById("_interactive_group");
+        return group || (group = graphicCreator.CreateGraphic("group", {}), group.id = "_interactive_group", interactiveLayer.add(group)), null !== (_a = group.shadowRoot) && void 0 !== _a ? _a : group.attachShadow();
+      }
+    }
+    class Canvas3DDrawItemInterceptor {
+      constructor() {
+        this.order = 1;
+      }
+      beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+        if (!graphic.in3dMode || drawContext.in3dInterceptor) return !1;
+        drawContext.in3dInterceptor = !0;
+        const {
+          context: context,
+          stage: stage
+        } = renderService.drawParams;
+        context.canvas;
+        context.save(), this.initCanvasCtx(context), context.camera = stage.camera;
+        const m = context.currentMatrix;
+        m.a /= context.dpr, m.b /= context.dpr, m.c /= context.dpr, m.d /= context.dpr, m.e /= context.dpr, m.f /= context.dpr;
+        const matrix = mat4Allocate.allocate();
+        mat3Tomat4(matrix, m);
+        const lastModelMatrix = context.modelMatrix;
+        if (lastModelMatrix) {
+          if (matrix) {
+            const m = mat4Allocate.allocate();
+            context.modelMatrix = multiplyMat4Mat4(m, lastModelMatrix, matrix);
+          }
+        } else context.modelMatrix = matrix;
+        if (context.setTransform(1, 0, 0, 1, 0, 0, !0), graphic.isContainer) {
+          let isPie = !1,
+            is3d = !1;
+          if (graphic.forEachChildren(c => (isPie = c.numberType === ARC3D_NUMBER_TYPE, !isPie)), graphic.forEachChildren(c => (is3d = !!c.findFace, !is3d)), isPie) {
+            const children = graphic.getChildren(),
+              sortedChildren = [...children];
+            sortedChildren.sort((a, b) => {
+              var _a, _b, _c, _d;
+              let angle1 = ((null !== (_a = a.attribute.startAngle) && void 0 !== _a ? _a : 0) + (null !== (_b = a.attribute.endAngle) && void 0 !== _b ? _b : 0)) / 2,
+                angle2 = ((null !== (_c = b.attribute.startAngle) && void 0 !== _c ? _c : 0) + (null !== (_d = b.attribute.endAngle) && void 0 !== _d ? _d : 0)) / 2;
+              for (; angle1 < 0;) angle1 += pi2;
+              for (; angle2 < 0;) angle2 += pi2;
+              return angle2 - angle1;
+            }), sortedChildren.forEach(c => {
+              c._next = null, c._prev = null;
+            }), graphic.removeAllChild(), graphic.update(), sortedChildren.forEach(c => {
+              graphic.appendChild(c);
+            });
+            const m = graphic.parent.globalTransMatrix;
+            drawContext.hack_pieFace = "outside", drawContribution.renderGroup(graphic, drawContext, m), drawContext.hack_pieFace = "inside", drawContribution.renderGroup(graphic, drawContext, m), drawContext.hack_pieFace = "top", drawContribution.renderGroup(graphic, drawContext, m), graphic.removeAllChild(), children.forEach(c => {
+              c._next = null, c._prev = null;
+            }), children.forEach(c => {
+              graphic.appendChild(c);
+            });
+          } else if (is3d) {
+            const children = graphic.getChildren(),
+              zChildren = children.map(g => ({
+                ave_z: g.findFace().vertices.map(v => {
+                  var _a;
+                  return context.view(v[0], v[1], null !== (_a = v[2] + g.attribute.z) && void 0 !== _a ? _a : 0)[2];
+                }).reduce((a, b) => a + b, 0),
+                g: g
+              }));
+            zChildren.sort((a, b) => b.ave_z - a.ave_z), graphic.removeAllChild(), zChildren.forEach(i => {
+              i.g._next = null, i.g._prev = null;
+            }), graphic.update(), zChildren.forEach(i => {
+              graphic.add(i.g);
+            }), drawContribution.renderGroup(graphic, drawContext, graphic.parent.globalTransMatrix, !0), graphic.removeAllChild(), children.forEach(g => {
+              g._next = null, g._prev = null;
+            }), graphic.update(), children.forEach(g => {
+              graphic.add(g);
+            });
+          } else drawContribution.renderGroup(graphic, drawContext, graphic.parent.globalTransMatrix);
+        } else drawContribution.renderItem(graphic, drawContext);
+        return context.camera = null, context.restore(), context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix, drawContext.in3dInterceptor = !1, !0;
+      }
+      initCanvasCtx(context) {
+        context.setTransformForCurrent();
+      }
+    }
+
+    var __decorate$X = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+        var d,
+          c = arguments.length,
+          r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
+        if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+      },
+      __metadata$G = undefined && undefined.__metadata || function (k, v) {
+        if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
       __param$u = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
@@ -14709,7 +15183,7 @@
         this.prepare(updateBounds), this.prepareRenderList(), this.beforeDraw(params), this.draw(params), this.afterDraw(params);
       }
     };
-    DefaultRenderService = __decorate$Y([injectable(), __param$u(0, inject(DrawContribution)), __metadata$H("design:paramtypes", [Object])], DefaultRenderService);
+    DefaultRenderService = __decorate$X([injectable(), __param$u(0, inject(DrawContribution)), __metadata$G("design:paramtypes", [Object])], DefaultRenderService);
 
     var renderModule$1 = new ContainerModule(bind => {
       bind(RenderService).to(DefaultRenderService).inSingletonScope();
@@ -14718,7 +15192,7 @@
     const PickerService = Symbol.for("PickerService");
     const GlobalPickerService = Symbol.for("GlobalPickerService");
 
-    var __decorate$X = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$W = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -14751,7 +15225,7 @@
         return context.highPerformanceRestore(), result;
       }
     };
-    ShadowRootPickItemInterceptorContribution = __decorate$X([injectable()], ShadowRootPickItemInterceptorContribution);
+    ShadowRootPickItemInterceptorContribution = __decorate$W([injectable()], ShadowRootPickItemInterceptorContribution);
     let InteractivePickItemInterceptorContribution = class {
       constructor() {
         this.order = 1;
@@ -14770,7 +15244,7 @@
         return null;
       }
     };
-    InteractivePickItemInterceptorContribution = __decorate$X([injectable()], InteractivePickItemInterceptorContribution);
+    InteractivePickItemInterceptorContribution = __decorate$W([injectable()], InteractivePickItemInterceptorContribution);
     let Canvas3DPickItemInterceptor = class {
       constructor() {
         this.order = 1;
@@ -14830,7 +15304,7 @@
         context.setTransformForCurrent();
       }
     };
-    Canvas3DPickItemInterceptor = __decorate$X([injectable()], Canvas3DPickItemInterceptor);
+    Canvas3DPickItemInterceptor = __decorate$W([injectable()], Canvas3DPickItemInterceptor);
 
     var pickModule = new ContainerModule((bind, unbind, isBound) => {
       isBound(PickerService) || (bind(GlobalPickerService).toSelf(), bind(PickerService).toService(GlobalPickerService)), bind(Canvas3DPickItemInterceptor).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(Canvas3DPickItemInterceptor), bind(ShadowRootPickItemInterceptorContribution).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(ShadowRootPickItemInterceptorContribution), bind(InteractivePickItemInterceptorContribution).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(InteractivePickItemInterceptorContribution), bindContributionProvider(bind, PickItemInterceptor);
@@ -14843,14 +15317,14 @@
     const AutoEnablePlugins = Symbol.for("AutoEnablePlugins");
     const PluginService = Symbol.for("PluginService");
 
-    var __decorate$W = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$V = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
         if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
         return c > 3 && r && Object.defineProperty(target, key, r), r;
       },
-      __metadata$G = undefined && undefined.__metadata || function (k, v) {
+      __metadata$F = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
       __param$t = undefined && undefined.__param || function (paramIndex, decorator) {
@@ -14893,7 +15367,7 @@
         }), this.onRegisterPlugin = [];
       }
     };
-    DefaultPluginService = __decorate$W([injectable(), __param$t(0, inject(ContributionProvider)), __param$t(0, named(AutoEnablePlugins)), __metadata$G("design:paramtypes", [Object])], DefaultPluginService);
+    DefaultPluginService = __decorate$V([injectable(), __param$t(0, inject(ContributionProvider)), __param$t(0, named(AutoEnablePlugins)), __metadata$F("design:paramtypes", [Object])], DefaultPluginService);
 
     var pluginModule = new ContainerModule(bind => {
       bind(PluginService).to(DefaultPluginService), bindContributionProviderNoSingletonScope(bind, AutoEnablePlugins);
@@ -14907,14 +15381,14 @@
       bind(TextMeasureContribution).to(DefaultTextMeasureContribution).inSingletonScope(), bindContributionProvider(bind, TextMeasureContribution);
     });
 
-    var __decorate$V = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$U = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
         if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
         return c > 3 && r && Object.defineProperty(target, key, r), r;
       },
-      __metadata$F = undefined && undefined.__metadata || function (k, v) {
+      __metadata$E = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       };
     let CanvasLayerHandlerContribution = class {
@@ -14984,16 +15458,16 @@
         this.canvas.release();
       }
     };
-    CanvasLayerHandlerContribution = __decorate$V([injectable(), __metadata$F("design:paramtypes", [])], CanvasLayerHandlerContribution);
+    CanvasLayerHandlerContribution = __decorate$U([injectable(), __metadata$E("design:paramtypes", [])], CanvasLayerHandlerContribution);
 
-    var __decorate$U = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$T = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
         if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
         return c > 3 && r && Object.defineProperty(target, key, r), r;
       },
-      __metadata$E = undefined && undefined.__metadata || function (k, v) {
+      __metadata$D = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       };
     let EmptyLayerHandlerContribution = class {
@@ -15028,16 +15502,16 @@
       }
       release() {}
     };
-    EmptyLayerHandlerContribution = __decorate$U([injectable(), __metadata$E("design:paramtypes", [])], EmptyLayerHandlerContribution);
+    EmptyLayerHandlerContribution = __decorate$T([injectable(), __metadata$D("design:paramtypes", [])], EmptyLayerHandlerContribution);
 
-    var __decorate$T = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$S = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
         if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
         return c > 3 && r && Object.defineProperty(target, key, r), r;
       },
-      __metadata$D = undefined && undefined.__metadata || function (k, v) {
+      __metadata$C = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       };
     let OffscreenLayerHandlerContribution = class {
@@ -15099,7 +15573,7 @@
       }
       merge(layerHandlers) {}
     };
-    OffscreenLayerHandlerContribution = __decorate$T([injectable(), __metadata$D("design:paramtypes", [])], OffscreenLayerHandlerContribution);
+    OffscreenLayerHandlerContribution = __decorate$S([injectable(), __metadata$C("design:paramtypes", [])], OffscreenLayerHandlerContribution);
 
     var layerHandlerModules = new ContainerModule(bind => {
       bind(CanvasLayerHandlerContribution).toSelf(), bind(OffscreenLayerHandlerContribution).toSelf(), bind(EmptyLayerHandlerContribution).toSelf(), bind(StaticLayerHandlerContribution).toService(CanvasLayerHandlerContribution), bind(DynamicLayerHandlerContribution).toService(OffscreenLayerHandlerContribution), bind(VirtualLayerHandlerContribution).toService(EmptyLayerHandlerContribution);
@@ -15215,197 +15689,6 @@
       return result;
     }
 
-    var __decorate$S = undefined && undefined.__decorate || function (decorators, target, key, desc) {
-        var d,
-          c = arguments.length,
-          r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
-        if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-      },
-      __metadata$C = undefined && undefined.__metadata || function (k, v) {
-        if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
-      };
-    const DrawItemInterceptor = Symbol.for("DrawItemInterceptor");
-    const tempDirtyBounds = new AABBBounds();
-    class ShadowRootDrawItemInterceptorContribution {
-      constructor() {
-        this.order = 1;
-      }
-      afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-        return (graphic.attribute.shadowRootIdx > 0 || !graphic.attribute.shadowRootIdx) && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !1;
-      }
-      beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-        return graphic.attribute.shadowRootIdx < 0 && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !1;
-      }
-      drawItem(graphic, renderService, drawContext, drawContribution, params) {
-        if (!graphic.shadowRoot) return !1;
-        const {
-          context: context
-        } = drawContext;
-        if (context.highPerformanceSave(), context.transformFromMatrix(graphic.transMatrix, !0), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds) {
-          tempDirtyBounds.copy(drawContribution.dirtyBounds);
-          const m = graphic.globalTransMatrix.getInverse();
-          drawContribution.dirtyBounds.copy(drawContribution.backupDirtyBounds).transformWithMatrix(m);
-        }
-        return drawContribution.renderGroup(graphic.shadowRoot, drawContext, graphic.parent.globalTransMatrix), context.highPerformanceRestore(), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds && drawContribution.dirtyBounds.copy(tempDirtyBounds), !0;
-      }
-    }
-    class DebugDrawItemInterceptorContribution {
-      constructor() {
-        this.order = 1;
-      }
-      afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-        return graphic.attribute._debug_bounds && this.drawItem(graphic, renderService, drawContext, drawContribution, params), !1;
-      }
-      drawItem(graphic, renderService, drawContext, drawContribution, params) {
-        if (!graphic.attribute._debug_bounds) return !1;
-        const {
-          context: context
-        } = drawContext;
-        context.highPerformanceSave(), graphic.parent && context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), graphic.glyphHost && graphic.glyphHost.parent && context.setTransformFromMatrix(graphic.glyphHost.parent.globalTransMatrix, !0);
-        const b = graphic.AABBBounds;
-        return !0 !== graphic.attribute._debug_bounds && graphic.attribute._debug_bounds(context, graphic), context.strokeRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore(), !0;
-      }
-    }
-    let CommonDrawItemInterceptorContribution = class {
-      constructor() {
-        this.order = 1, this.interceptors = [new ShadowRootDrawItemInterceptorContribution(), new Canvas3DDrawItemInterceptor(), new InteractiveDrawItemInterceptorContribution(), new DebugDrawItemInterceptorContribution()];
-      }
-      afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-        for (let i = 0; i < this.interceptors.length; i++) if (this.interceptors[i].afterDrawItem && this.interceptors[i].afterDrawItem(graphic, renderService, drawContext, drawContribution, params)) return !0;
-        return !1;
-      }
-      beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-        if ((!graphic.in3dMode || drawContext.in3dInterceptor) && !graphic.shadowRoot && !(graphic.baseGraphic || graphic.attribute.globalZIndex || graphic.interactiveGraphic)) return !1;
-        for (let i = 0; i < this.interceptors.length; i++) if (this.interceptors[i].beforeDrawItem && this.interceptors[i].beforeDrawItem(graphic, renderService, drawContext, drawContribution, params)) return !0;
-        return !1;
-      }
-    };
-    CommonDrawItemInterceptorContribution = __decorate$S([injectable(), __metadata$C("design:paramtypes", [])], CommonDrawItemInterceptorContribution);
-    class InteractiveDrawItemInterceptorContribution {
-      constructor() {
-        this.order = 1;
-      }
-      beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-        return !this.processing && (graphic.baseGraphic ? this.beforeDrawInteractive(graphic, renderService, drawContext, drawContribution, params) : this.beforeSetInteractive(graphic, renderService, drawContext, drawContribution, params));
-      }
-      beforeSetInteractive(graphic, renderService, drawContext, drawContribution, params) {
-        let interactiveGraphic = graphic.interactiveGraphic;
-        if (graphic.attribute.globalZIndex) {
-          interactiveGraphic || (interactiveGraphic = graphic.clone(), graphic.interactiveGraphic = interactiveGraphic, interactiveGraphic.baseGraphic = graphic), interactiveGraphic.setAttributes({
-            globalZIndex: 0,
-            zIndex: graphic.attribute.globalZIndex
-          }, !1, {
-            skipUpdateCallback: !0
-          }), drawContext.stage.tryInitInteractiveLayer();
-          const interactiveLayer = drawContext.stage.getLayer("_builtin_interactive");
-          if (interactiveLayer) {
-            this.getShadowRoot(interactiveLayer).add(interactiveGraphic);
-          }
-          return !0;
-        }
-        if (interactiveGraphic) {
-          drawContext.stage.tryInitInteractiveLayer();
-          const interactiveLayer = drawContext.stage.getLayer("_builtin_interactive");
-          if (interactiveLayer) {
-            this.getShadowRoot(interactiveLayer).removeChild(interactiveGraphic);
-          }
-          graphic.interactiveGraphic = null, interactiveGraphic.baseGraphic = null;
-        }
-        return !1;
-      }
-      beforeDrawInteractive(graphic, renderService, drawContext, drawContribution, params) {
-        const baseGraphic = graphic.baseGraphic;
-        if (baseGraphic) {
-          this.processing = !0;
-          const {
-            context: context
-          } = drawContext;
-          return context.highPerformanceSave(), context.setTransformFromMatrix(baseGraphic.parent.globalTransMatrix, !0), baseGraphic.isContainer ? drawContribution.renderGroup(baseGraphic, drawContext, baseGraphic.parent.globalTransMatrix) : drawContribution.renderItem(baseGraphic, drawContext), context.highPerformanceRestore(), this.processing = !1, !0;
-        }
-        return !1;
-      }
-      getShadowRoot(interactiveLayer) {
-        var _a;
-        let group = interactiveLayer.getElementById("_interactive_group");
-        return group || (group = graphicCreator.CreateGraphic("group", {}), group.id = "_interactive_group", interactiveLayer.add(group)), null !== (_a = group.shadowRoot) && void 0 !== _a ? _a : group.attachShadow();
-      }
-    }
-    class Canvas3DDrawItemInterceptor {
-      constructor() {
-        this.order = 1;
-      }
-      beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-        if (!graphic.in3dMode || drawContext.in3dInterceptor) return !1;
-        drawContext.in3dInterceptor = !0;
-        const {
-          context: context,
-          stage: stage
-        } = renderService.drawParams;
-        context.canvas;
-        context.save(), this.initCanvasCtx(context), context.camera = stage.camera;
-        const m = context.currentMatrix;
-        m.a /= context.dpr, m.b /= context.dpr, m.c /= context.dpr, m.d /= context.dpr, m.e /= context.dpr, m.f /= context.dpr;
-        const matrix = mat4Allocate.allocate();
-        mat3Tomat4(matrix, m);
-        const lastModelMatrix = context.modelMatrix;
-        if (lastModelMatrix) {
-          if (matrix) {
-            const m = mat4Allocate.allocate();
-            context.modelMatrix = multiplyMat4Mat4(m, lastModelMatrix, matrix);
-          }
-        } else context.modelMatrix = matrix;
-        if (context.setTransform(1, 0, 0, 1, 0, 0, !0), graphic.isContainer) {
-          let isPie = !1,
-            is3d = !1;
-          if (graphic.forEachChildren(c => (isPie = c.numberType === ARC3D_NUMBER_TYPE, !isPie)), graphic.forEachChildren(c => (is3d = !!c.findFace, !is3d)), isPie) {
-            const children = graphic.getChildren(),
-              sortedChildren = [...children];
-            sortedChildren.sort((a, b) => {
-              var _a, _b, _c, _d;
-              let angle1 = ((null !== (_a = a.attribute.startAngle) && void 0 !== _a ? _a : 0) + (null !== (_b = a.attribute.endAngle) && void 0 !== _b ? _b : 0)) / 2,
-                angle2 = ((null !== (_c = b.attribute.startAngle) && void 0 !== _c ? _c : 0) + (null !== (_d = b.attribute.endAngle) && void 0 !== _d ? _d : 0)) / 2;
-              for (; angle1 < 0;) angle1 += pi2;
-              for (; angle2 < 0;) angle2 += pi2;
-              return angle2 - angle1;
-            }), sortedChildren.forEach(c => {
-              c._next = null, c._prev = null;
-            }), graphic.removeAllChild(), graphic.update(), sortedChildren.forEach(c => {
-              graphic.appendChild(c);
-            });
-            const m = graphic.parent.globalTransMatrix;
-            drawContext.hack_pieFace = "outside", drawContribution.renderGroup(graphic, drawContext, m), drawContext.hack_pieFace = "inside", drawContribution.renderGroup(graphic, drawContext, m), drawContext.hack_pieFace = "top", drawContribution.renderGroup(graphic, drawContext, m), graphic.removeAllChild(), children.forEach(c => {
-              c._next = null, c._prev = null;
-            }), children.forEach(c => {
-              graphic.appendChild(c);
-            });
-          } else if (is3d) {
-            const children = graphic.getChildren(),
-              zChildren = children.map(g => ({
-                ave_z: g.findFace().vertices.map(v => {
-                  var _a;
-                  return context.view(v[0], v[1], null !== (_a = v[2] + g.attribute.z) && void 0 !== _a ? _a : 0)[2];
-                }).reduce((a, b) => a + b, 0),
-                g: g
-              }));
-            zChildren.sort((a, b) => b.ave_z - a.ave_z), graphic.removeAllChild(), zChildren.forEach(i => {
-              i.g._next = null, i.g._prev = null;
-            }), graphic.update(), zChildren.forEach(i => {
-              graphic.add(i.g);
-            }), drawContribution.renderGroup(graphic, drawContext, graphic.parent.globalTransMatrix, !0), graphic.removeAllChild(), children.forEach(g => {
-              g._next = null, g._prev = null;
-            }), graphic.update(), children.forEach(g => {
-              graphic.add(g);
-            });
-          } else drawContribution.renderGroup(graphic, drawContext, graphic.parent.globalTransMatrix);
-        } else drawContribution.renderItem(graphic, drawContext);
-        return context.camera = null, context.restore(), context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix, drawContext.in3dInterceptor = !1, !0;
-      }
-      initCanvasCtx(context) {
-        context.setTransformForCurrent();
-      }
-    }
-
     var __decorate$R = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
@@ -15951,11 +16234,10 @@
       container.load(renderModule);
     }
 
-    let loaded$l = !1;
     function preLoadAllModule() {
-      loaded$l || (loaded$l = !0, container.load(coreModule), container.load(graphicModule), container.load(renderModule$1), container.load(pickModule), container.load(pluginModule), load$1(container), load(container));
+      preLoadAllModule.__loaded || (preLoadAllModule.__loaded = !0, container.load(coreModule), container.load(graphicModule), container.load(renderModule$1), container.load(pickModule), container.load(pluginModule), load$1(container), load(container));
     }
-    preLoadAllModule();
+    preLoadAllModule.__loaded = !1, preLoadAllModule();
     const vglobal = container.get(VGlobal);
     application.global = vglobal;
     const graphicUtil = container.get(GraphicUtil);
@@ -16113,7 +16395,7 @@
             wrapGroup: wrapGroup
           } = _ref;
           application.global.removeDom(wrapGroup);
-        }), nativeDom = "string" == typeof dom ? new DOMParser().parseFromString(dom, "text/html").firstChild : dom;
+        }), "string" == typeof dom ? (nativeDom = new DOMParser().parseFromString(dom, "text/html").firstChild, nativeDom.lastChild && (nativeDom = nativeDom.lastChild.firstChild)) : nativeDom = dom;
         const _container = container || (!0 === stage.params.enableHtmlAttribute ? null : stage.params.enableHtmlAttribute);
         nativeContainer = _container ? "string" == typeof _container ? application.global.getElementById(_container) : _container : graphic.stage.window.getContainer();
         const wrapGroup = application.global.createDom({
@@ -18964,10 +19246,11 @@
     };
     DefaultCanvasGroupPicker = __decorate$A([injectable()], DefaultCanvasGroupPicker);
 
-    let loaded$k = !1;
-    var canvasModule = new ContainerModule((bind, unbind, isBound, rebind) => {
-      loaded$k || (loaded$k = !0, bind(CanvasGroupPicker).to(DefaultCanvasGroupPicker).inSingletonScope(), bind(CanvasPickerContribution).toService(CanvasGroupPicker), bindContributionProvider(bind, CanvasPickerContribution));
+    const m = new ContainerModule((bind, unbind, isBound, rebind) => {
+      m.__vloaded || (m.__vloaded = !0, bind(CanvasGroupPicker).to(DefaultCanvasGroupPicker).inSingletonScope(), bind(CanvasPickerContribution).toService(CanvasGroupPicker), bindContributionProvider(bind, CanvasPickerContribution));
     });
+    m.__vloaded = !1;
+    var canvasModule = m;
 
     const canvasPickerModule = new ContainerModule((bind, unbind, isBound, rebind) => {
       isBound(DefaultCanvasPickerService) || bind(DefaultCanvasPickerService).toSelf().inSingletonScope(), isBound(PickerService) ? rebind(PickerService).toService(DefaultCanvasPickerService) : bind(PickerService).toService(DefaultCanvasPickerService);
@@ -19227,7 +19510,7 @@
       }
       getNativeAABBBounds(_dom) {
         let dom = _dom;
-        if ("string" == typeof _dom && (dom = new DOMParser().parseFromString(_dom, "text/html").firstChild), dom.getBoundingClientRect) {
+        if ("string" == typeof _dom && (dom = new DOMParser().parseFromString(_dom, "text/html").firstChild, dom.lastChild && (dom = dom.lastChild.firstChild)), dom.getBoundingClientRect) {
           const b = dom.getBoundingClientRect();
           return new DynamicB(b);
         }
@@ -19340,15 +19623,15 @@
     };
     BrowserEnvContribution = __decorate$y([injectable(), __metadata$q("design:paramtypes", [])], BrowserEnvContribution);
 
-    let isBrowserBound = !1;
     const browserEnvModule = new ContainerModule(bind => {
-      isBrowserBound || (isBrowserBound = !0, bind(BrowserEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(BrowserEnvContribution));
+      browserEnvModule.isBrowserBound || (browserEnvModule.isBrowserBound = !0, bind(BrowserEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(BrowserEnvContribution));
     });
-    let loaded$j = !1;
+    browserEnvModule.isBrowserBound = !1;
     function loadBrowserEnv(container) {
       let loadPicker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
-      loaded$j || (loaded$j = !0, container.load(browserEnvModule), container.load(browserCanvasModule), container.load(browserWindowModule), loadPicker && loadCanvasPicker(container));
+      loadBrowserEnv.__loaded || (loadBrowserEnv.__loaded = !0, container.load(browserEnvModule), container.load(browserCanvasModule), container.load(browserWindowModule), loadPicker && loadCanvasPicker(container));
     }
+    loadBrowserEnv.__loaded = !1;
 
     var __decorate$x = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
@@ -19590,14 +19873,14 @@
     };
     NodeEnvContribution = __decorate$u([injectable()], NodeEnvContribution);
 
-    let isNodeBound = !1;
     const nodeEnvModule = new ContainerModule(bind => {
-      isNodeBound || (isNodeBound = !0, bind(NodeEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(NodeEnvContribution));
+      nodeEnvModule.isNodeBound || (nodeEnvModule.isNodeBound = !0, bind(NodeEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(NodeEnvContribution));
     });
-    let loaded$i = !1;
+    nodeEnvModule.isNodeBound = !1;
     function loadNodeEnv(container) {
-      loaded$i || (loaded$i = !0, container.load(nodeEnvModule), container.load(nodeCanvasModule), container.load(nodeWindowModule));
+      loadNodeEnv.__loaded || (loadNodeEnv.__loaded = !0, container.load(nodeEnvModule), container.load(nodeCanvasModule), container.load(nodeWindowModule));
     }
+    loadNodeEnv.__loaded = !1;
 
     var __decorate$t = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
@@ -20905,95 +21188,113 @@
 
     const browser$1 = isBrowserEnv();
 
-    let loaded$h = !1;
-    function registerArc() {
-      loaded$h || (loaded$h = !0, registerArcGraphic(), container.load(arcModule), container.load(browser$1 ? arcCanvasPickModule : arcMathPickModule));
+    function _registerArc() {
+      _registerArc.__loaded || (_registerArc.__loaded = !0, registerArcGraphic(), container.load(arcModule), container.load(browser$1 ? arcCanvasPickModule : arcMathPickModule));
     }
+    _registerArc.__loaded = !1;
+    const registerArc = _registerArc;
 
-    let loaded$g = !1;
-    function registerArc3d() {
-      loaded$g || (loaded$g = !0, registerArc3dGraphic(), container.load(arc3dModule), container.load(arc3dCanvasPickModule));
+    function _registerArc3d() {
+      _registerArc3d.__loaded || (_registerArc3d.__loaded = !0, registerArc3dGraphic(), container.load(arc3dModule), container.load(arc3dCanvasPickModule));
     }
+    _registerArc3d.__loaded = !1;
+    const registerArc3d = _registerArc3d;
 
-    let loaded$f = !1;
-    function registerArea() {
-      loaded$f || (loaded$f = !0, registerAreaGraphic(), container.load(areaModule), container.load(browser$1 ? areaCanvasPickModule : areaMathPickModule));
+    function _registerArea() {
+      _registerArea.__loaded || (_registerArea.__loaded = !0, registerAreaGraphic(), container.load(areaModule), container.load(browser$1 ? areaCanvasPickModule : areaMathPickModule));
     }
+    _registerArea.__loaded = !1;
+    const registerArea = _registerArea;
 
-    let loaded$e = !1;
-    function registerCircle() {
-      loaded$e || (loaded$e = !0, registerCircleGraphic(), container.load(circleModule), container.load(browser$1 ? circleCanvasPickModule : circleMathPickModule));
+    function _registerCircle() {
+      _registerCircle.__loaded || (_registerCircle.__loaded = !0, registerCircleGraphic(), container.load(circleModule), container.load(browser$1 ? circleCanvasPickModule : circleMathPickModule));
     }
+    _registerCircle.__loaded = !1;
+    const registerCircle = _registerCircle;
 
-    let loaded$d = !1;
-    function registerGlyph() {
-      loaded$d || (loaded$d = !0, registerGlyphGraphic(), container.load(glyphModule), container.load(browser$1 ? glyphCanvasPickModule : glyphMathPickModule));
+    function _registerGlyph() {
+      _registerGlyph.__loaded || (_registerGlyph.__loaded = !0, registerGlyphGraphic(), container.load(glyphModule), container.load(browser$1 ? glyphCanvasPickModule : glyphMathPickModule));
     }
+    _registerGlyph.__loaded = !1;
+    const registerGlyph = _registerGlyph;
 
-    let loaded$c = !1;
-    function registerGroup() {
-      loaded$c || (loaded$c = !0, registerGroupGraphic());
+    function _registerGroup() {
+      _registerGroup.__loaded || (_registerGroup.__loaded = !0, registerGroupGraphic());
     }
+    _registerGroup.__loaded = !1;
+    const registerGroup = _registerGroup;
 
-    let loaded$b = !1;
-    function registerImage() {
-      loaded$b || (loaded$b = !0, registerImageGraphic(), container.load(imageModule), container.load(browser$1 ? imageCanvasPickModule : imageMathPickModule));
+    function _registerImage() {
+      _registerImage.__loaded || (_registerImage.__loaded = !0, registerImageGraphic(), container.load(imageModule), container.load(browser$1 ? imageCanvasPickModule : imageMathPickModule));
     }
+    _registerImage.__loaded = !1;
+    const registerImage = _registerImage;
 
-    let loaded$a = !1;
-    function registerLine() {
-      loaded$a || (loaded$a = !0, registerLineGraphic(), container.load(lineModule), container.load(browser$1 ? lineCanvasPickModule : lineMathPickModule));
+    function _registerLine() {
+      _registerLine.__loaded || (_registerLine.__loaded = !0, registerLineGraphic(), container.load(lineModule), container.load(browser$1 ? lineCanvasPickModule : lineMathPickModule));
     }
+    _registerLine.__loaded = !1;
+    const registerLine = _registerLine;
 
-    let loaded$9 = !1;
-    function registerPath() {
-      loaded$9 || (loaded$9 = !0, registerPathGraphic(), container.load(pathModule), container.load(browser$1 ? pathCanvasPickModule : pathMathPickModule));
+    function _registerPath() {
+      _registerPath.__loaded || (_registerPath.__loaded = !0, registerPathGraphic(), container.load(pathModule), container.load(browser$1 ? pathCanvasPickModule : pathMathPickModule));
     }
+    _registerPath.__loaded = !1;
+    const registerPath = _registerPath;
 
-    let loaded$8 = !1;
-    function registerPolygon() {
-      loaded$8 || (loaded$8 = !0, registerPolygonGraphic(), container.load(polygonModule), container.load(browser$1 ? polygonCanvasPickModule : polygonMathPickModule));
+    function _registerPolygon() {
+      _registerPolygon.__loaded || (_registerPolygon.__loaded = !0, registerPolygonGraphic(), container.load(polygonModule), container.load(browser$1 ? polygonCanvasPickModule : polygonMathPickModule));
     }
+    _registerPolygon.__loaded = !1;
+    const registerPolygon = _registerPolygon;
 
-    let loaded$7 = !1;
-    function registerPyramid3d() {
-      loaded$7 || (loaded$7 = !0, registerPyramid3dGraphic(), container.load(pyramid3dModule), container.load(pyramid3dCanvasPickModule));
+    function _registerPyramid3d() {
+      _registerPyramid3d.__loaded || (_registerPyramid3d.__loaded = !0, registerPyramid3dGraphic(), container.load(pyramid3dModule), container.load(pyramid3dCanvasPickModule));
     }
+    _registerPyramid3d.__loaded = !1;
+    const registerPyramid3d = _registerPyramid3d;
 
-    let loaded$6 = !1;
-    function registerRect() {
-      loaded$6 || (loaded$6 = !0, registerRectGraphic(), container.load(rectModule), container.load(browser$1 ? rectCanvasPickModule : rectMathPickModule));
+    function _registerRect() {
+      _registerRect.__loaded || (_registerRect.__loaded = !0, registerRectGraphic(), container.load(rectModule), container.load(browser$1 ? rectCanvasPickModule : rectMathPickModule));
     }
+    _registerRect.__loaded = !1;
+    const registerRect = _registerRect;
 
-    let loaded$5 = !1;
-    function registerRect3d() {
-      loaded$5 || (loaded$5 = !0, registerRect3dGraphic(), container.load(rect3dModule), container.load(rect3dCanvasPickModule));
+    function _registerRect3d() {
+      _registerRect3d.__loaded || (_registerRect3d.__loaded = !0, registerRect3dGraphic(), container.load(rect3dModule), container.load(rect3dCanvasPickModule));
     }
+    _registerRect3d.__loaded = !1;
+    const registerRect3d = _registerRect3d;
 
-    let loaded$4 = !1;
-    function registerRichtext() {
-      loaded$4 || (loaded$4 = !0, registerRichtextGraphic(), container.load(richtextModule), container.load(browser$1 ? richtextCanvasPickModule : richTextMathPickModule));
+    function _registerRichtext() {
+      _registerRichtext.__loaded || (_registerRichtext.__loaded = !0, registerRichtextGraphic(), container.load(richtextModule), container.load(browser$1 ? richtextCanvasPickModule : richTextMathPickModule));
     }
+    _registerRichtext.__loaded = !1;
+    const registerRichtext = _registerRichtext;
 
-    let loaded$3 = !1;
-    function registerShadowRoot() {
-      loaded$3 || (loaded$3 = !0, registerShadowRootGraphic());
+    function _registerShadowRoot() {
+      _registerShadowRoot.__loaded || (_registerShadowRoot.__loaded = !0, registerShadowRootGraphic());
     }
+    _registerShadowRoot.__loaded = !1;
+    const registerShadowRoot = _registerShadowRoot;
 
-    let loaded$2 = !1;
-    function registerSymbol() {
-      loaded$2 || (loaded$2 = !0, registerSymbolGraphic(), container.load(symbolModule), container.load(browser$1 ? symbolCanvasPickModule : symbolMathPickModule));
+    function _registerSymbol() {
+      _registerSymbol.__loaded || (_registerSymbol.__loaded = !0, registerSymbolGraphic(), container.load(symbolModule), container.load(browser$1 ? symbolCanvasPickModule : symbolMathPickModule));
     }
+    _registerSymbol.__loaded = !1;
+    const registerSymbol = _registerSymbol;
 
-    let loaded$1 = !1;
-    function registerText() {
-      loaded$1 || (loaded$1 = !0, registerTextGraphic(), container.load(textModule), container.load(browser$1 ? textCanvasPickModule : textMathPickModule));
+    function _registerText() {
+      _registerText.__loaded || (_registerText.__loaded = !0, registerTextGraphic(), container.load(textModule), container.load(browser$1 ? textCanvasPickModule : textMathPickModule));
     }
+    _registerText.__loaded = !1;
+    const registerText = _registerText;
 
-    let loaded = !1;
-    function registerWrapText() {
-      loaded || (loaded = !0, registerWrapTextGraphic());
+    function _registerWrapText() {
+      _registerWrapText.__loaded || (_registerWrapText.__loaded = !0, registerWrapTextGraphic());
     }
+    _registerWrapText.__loaded = !1;
+    const registerWrapText = _registerWrapText;
 
     let registed = false;
     function registerForVrender() {
@@ -28635,7 +28936,7 @@
           }, textStyle);
           this._mainTitle = group.createOrUpdateChild("mainTitle", attr, "richtext");
         } else isValid$1(text) && (this._mainTitle = group.createOrUpdateChild("mainTitle", Object.assign(Object.assign({
-          text: [text]
+          text: isArray$1(text) ? text : [text]
         }, textStyle), {
           maxLineWidth: null !== (_t = textStyle.maxLineWidth) && void 0 !== _t ? _t : width,
           heightLimit: textStyle.heightLimit,
@@ -28676,7 +28977,7 @@
           }, subtextStyle);
           this._subTitle = group.createOrUpdateChild("subTitle", attr, "richtext");
         } else isValid$1(subtext) && (this._subTitle = group.createOrUpdateChild("subTitle", Object.assign(Object.assign({
-          text: [subtext]
+          text: isArray$1(subtext) ? subtext : [subtext]
         }, subtextStyle), {
           maxLineWidth: null !== (_12 = subtextStyle.maxLineWidth) && void 0 !== _12 ? _12 : width,
           heightLimit: subtextStyle.heightLimit,
@@ -32555,6 +32856,16 @@
                 cursor: 'pointer'
             };
         },
+        get loading_pic() {
+            return {
+                type: 'svg',
+                svg: '<svg viewBox="0 0 400 300" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="50" y="65" width="301" height="170"><path d="M350.3 65H50v169.8h300.3V65Z" fill="#fff"/></mask><g mask="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M58.3 233.2h32.8v-36.8H58.3v36.8Z" fill="#C7DEFF"/><path d="M91.1 224.5v8.8H58.3M82.4 196.2H58.3" stroke="#071F4D"/><path fill-rule="evenodd" clip-rule="evenodd" d="M305.4 182.5s-2.7 12.6 0 17.4c2.7 4.8 8.3 6.7 12.4 4.4 4.2-2.4 5.3-8.1 2.6-12.9-2.7-4.8-15-8.9-15-8.9ZM336 204.7c4.3 2 9.7-.4 12-5.4 2.3-5-1.5-17.3-1.5-17.3s-11.8 5.1-14.1 10.1c-2.3 5-.7 10.6 3.6 12.6Z" fill="#00E4E5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M326.7 174s-10 11.8-10 18.6c0 6.7 4.5 12.2 10 12.2s10-5.5 10-12.3c0-6.8-10-18.5-10-18.5Z" fill="#00E4E5"/><path d="M332.3 181.5c2.3 3.6 4.4 7.8 4.4 10.9M316.7 192.5c0-3.1 2.1-7.2 4.3-10.8" stroke="#071F4D"/><path fill-rule="evenodd" clip-rule="evenodd" d="M343.1 227.3v-9.7h-34v9.7c0 3.7 3 6.6 6.6 6.6h20.9c3.6 0 6.5-2.9 6.5-6.6Z" fill="#071F4D"/><path fill-rule="evenodd" clip-rule="evenodd" d="M350.4 220.8V198H302v22.8c0 5.9 4.8 10.7 10.7 10.7h26.9c5.9 0 10.7-4.8 10.8-10.7Z" fill="#C7DEFF"/><path fill-rule="evenodd" clip-rule="evenodd" d="M331.7 74.2H117.8L87.4 203h213.8l30.5-128.8Z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M337 74.2h-6.2l-30.6 129.2h6.2L337 74.2Z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M303.8 203.5h2.4l30.7-129.3h-1.8l-31.3 129.3Z" fill="#C7DEFF"/><path d="m337 74.2-30.6 129.2h-5.9" stroke="#071F4D"/><path fill-rule="evenodd" clip-rule="evenodd" d="M229.9 202.1h-47.6l2 9.6h47.3l-1.7-9.6Z" fill="#C7DEFF"/><path fill-rule="evenodd" clip-rule="evenodd" d="M94.7 172.6 87.4 203h213.1l7.8-30.4H94.7Z" fill="#006EFF"/><path fill-rule="evenodd" clip-rule="evenodd" d="M94.7 172.6 87.4 203h213.1l7.8-30.4H94.7Z" fill="#006EFF"/><path d="M138.5 74.2h193.2l-23.4 98.6M94.5 172.7l11-46.3M104.8 155.4l-2.3 11.5h6.7M316 112.1l1.1-4.5" stroke="#071F4D"/><path fill-rule="evenodd" clip-rule="evenodd" d="M148.3 138.1h97V119h-97v19.1Z" fill="#00E4E5"/><path d="M303.1 80.6h20.3l-4.6 19.6M228.3 234.3c3.6 0 6.3-3.2 5.7-6.8l-4.1-24.1" stroke="#071F4D"/><path fill-rule="evenodd" clip-rule="evenodd" d="M226.2 229.5h-68.9v1.2c0 2 1.6 3.7 3.7 3.7h60.1c2.8 0 5-2.2 5.1-4.9Z" fill="#C7DEFF"/><path d="M180.699 226.8h-19.9c-2.8 0-4.6 3-3.3 5.5m0 0c.6 1.2 1.9 2 3.3 2h57.8M175.9 203.4l3.6 17.6M241.2 234.3h65.1M104.6 234.3h41.3" stroke="#071F4D"/><path d="M206.2 234.3h14.9c3.1 0 5.5-2.8 5-5.9l-4.3-24.9M160.7 226.8h46M62.2 226.1h-9.5c-1.2 0-2.2-1-2.2-2.2v-18.3c0-1.2 1-2.2 2.2-2.2h9.5" stroke="#071F4D"/><path d="M53.4 171.7H68c2.1 0 3.7 1.7 3.7 3.7v16.1M79.1 192v-21.8c0-2.5 2-4.6 4.6-4.6h2.2c2.5 0 4.5-2 4.5-4.5m0 0c0-2.5-2-4.5-4.5-4.5H56.1c-2.4 0-4.3-1.9-4.3-4.3V148M71.2 165.2h-18M64 181.7v10.1" stroke="#C7DEFF"/><path fill-rule="evenodd" clip-rule="evenodd" d="M85.7 120H124c4.3 0 7.7-3.5 7.7-7.7V65.5H94.2c-4.7 0-8.5 4.9-8.5 11V120Z" fill="#C7DEFF"/><path d="M85.7 110.7V73c0-4.1 3.4-7.5 7.5-7.5h38.5M146.2 73.8v-2.5c0-3.2-2-5.8-5.8-5.8-2.8 0-6 1.1-6 5.8v42.4c0 4.7-3.8 8.5-8.5 8.5h-15.6" stroke="#071F4D"/><path d="M119.7 122.3H87c-6.1 0-11.1-5-11.1-11.1m0 0h39M126.1 122.3c-6.1 0-11.1-5-11.1-11.1" stroke="#071F4D"/><path fill-rule="evenodd" clip-rule="evenodd" d="M85.4 122.1h37.2c-6.5-1.8-8-10.5-8-10.5H76.2c.6 8.8 9.2 10.5 9.2 10.5Z" fill="#071F4D"/><path fill-rule="evenodd" clip-rule="evenodd" d="M95.8 102.9h4.8V83.6h-4.8v19.3ZM106.6 102.9h4.8V77.6h-4.8v25.3ZM117.3 102.9h4.8V89.1h-4.8v13.8Z" fill="#fff"/><path d="M273.2 195.9h16.9M261.2 195.9h5" stroke="#fff"/><path d="M62.4 201.9v2.9M62.4 224.5v2.9" stroke="#071F4D"/><path d="m153.6 138.1 9.7-19.1M168.8 138.1l9.7-19.1M184.1 138.1l9.7-19.1M199.4 138.1l9.7-19.1M214.6 138.1l9.8-19.1M229.9 138.1l9.7-19.1" stroke="#fff"/><path d="M148.3 138.1h121.6V119H148.3v19.1Z" stroke="#071F4D"/></g></svg>',
+                width: 400,
+                height: 300,
+                name: 'loading_pic',
+                positionType: IconPosition.left
+            };
+        },
         get expand() {
             return {
                 type: 'svg',
@@ -32627,15 +32938,21 @@
     }
 
     function calcKeepAspectRatioSize(width, height, maxWidth, maxHeight) {
-        let newWidth = width;
-        let newHeight = height;
-        if (newWidth > maxWidth) {
-            newWidth = maxWidth;
-            newHeight = (newWidth * height) / width;
+        const rectWidth = width;
+        const rectHeight = height;
+        const containerWidth = maxWidth;
+        const containerHeight = maxHeight;
+        const containerRatio = containerWidth / containerHeight;
+        const rectRatio = rectWidth / rectHeight;
+        let newWidth;
+        let newHeight;
+        if (rectRatio > containerRatio) {
+            newWidth = containerWidth;
+            newHeight = newWidth / rectRatio;
         }
-        if (newHeight > maxHeight) {
-            newHeight = maxHeight;
-            newWidth = (newHeight * width) / height;
+        else {
+            newHeight = containerHeight;
+            newWidth = newHeight * rectRatio;
         }
         return {
             width: newWidth,
@@ -32663,7 +32980,6 @@
         return { x, y };
     }
 
-    get$1();
     function createImageCellGroup(columnGroup, xOrigin, yOrigin, col, row, width, height, keepAspectRatio, imageAutoSizing, padding, textAlign, textBaseline, table, cellTheme) {
         const headerStyle = table._getCellStyle(col, row);
         const functionalPadding = getFunctionalProp('padding', headerStyle, col, row, table);
@@ -32707,31 +33023,29 @@
         image.name = 'image';
         image.keepAspectRatio = keepAspectRatio;
         if (keepAspectRatio || imageAutoSizing) {
-            image.successCallback = () => {
-                const originImage = image.resources.get(image.attribute.image).data;
-                if (imageAutoSizing) {
-                    _adjustWidthHeight(col, row, originImage.width, originImage.height, table.scenegraph, padding);
-                }
-                if (keepAspectRatio) {
-                    const { width: cellWidth, height: cellHeight, isMerge } = getCellRange(cellGroup, table);
-                    const { width: imageWidth, height: imageHeight } = calcKeepAspectRatioSize(originImage.width, originImage.height, cellWidth - padding[1] - padding[3], cellHeight - padding[0] - padding[2]);
-                    const pos = calcStartPosition(0, 0, cellWidth, cellHeight, imageWidth, imageHeight, textAlign, textBaseline, padding);
-                    image.setAttributes({
-                        x: pos.x,
-                        y: pos.y,
-                        width: imageWidth,
-                        height: imageHeight,
-                        dx: isMerge ? -table.getColsWidth(cellGroup.mergeStartCol, col - 1) : 0,
-                        dy: isMerge ? -table.getRowsHeight(cellGroup.mergeStartRow, row - 1) : 0
-                    });
-                }
-                table.scenegraph.updateNextFrame();
-            };
+            if (image.resources &&
+                image.resources.has(image.attribute.image) &&
+                image.resources.get(image.attribute.image).state === 'success') {
+                updateAutoSizingAndKeepAspectRatio(imageAutoSizing, keepAspectRatio, padding, textAlign, textBaseline, image, cellGroup, table);
+            }
+            else {
+                image.successCallback = () => {
+                    updateAutoSizingAndKeepAspectRatio(imageAutoSizing, keepAspectRatio, padding, textAlign, textBaseline, image, cellGroup, table);
+                    table.scenegraph.updateNextFrame();
+                };
+            }
         }
         else {
-            image.successCallback = () => {
+            if (image.resources &&
+                image.resources.has(image.attribute.image) &&
+                image.resources.get(image.attribute.image).state === 'success') {
                 updateImageCellContentWhileResize(cellGroup, col, row, table);
-            };
+            }
+            else {
+                image.successCallback = () => {
+                    updateImageCellContentWhileResize(cellGroup, col, row, table);
+                };
+            }
         }
         image.failCallback = () => {
             const regedIcons = get$1();
@@ -32844,6 +33158,47 @@
             isMerge: false
         };
     }
+    function updateImageDxDy(startCol, endCol, startRow, endRow, table) {
+        for (let col = startCol; col <= endCol; col++) {
+            for (let row = startRow; row <= endRow; row++) {
+                const cellGroup = table.scenegraph.getCell(col, row);
+                if (cellGroup) {
+                    const image = cellGroup.getChildByName('image');
+                    if (image) {
+                        image.setAttributes({
+                            dx: -table.getColsWidth(cellGroup.mergeStartCol, col - 1),
+                            dy: -table.getRowsHeight(cellGroup.mergeStartRow, row - 1)
+                        });
+                    }
+                }
+            }
+        }
+    }
+    function updateAutoSizingAndKeepAspectRatio(imageAutoSizing, keepAspectRatio, padding, textAlign, textBaseline, image, cellGroup, table) {
+        const originImage = image.resources.get(image.attribute.image).data;
+        const { col, row } = cellGroup;
+        if (imageAutoSizing && !isDamagePic(image)) {
+            _adjustWidthHeight(col, row, originImage.width, originImage.height, table.scenegraph, padding);
+        }
+        if (keepAspectRatio || isDamagePic(image)) {
+            const { width: cellWidth, height: cellHeight, isMerge } = getCellRange(cellGroup, table);
+            const { width: imageWidth, height: imageHeight } = calcKeepAspectRatioSize(originImage.width, originImage.height, cellWidth - padding[1] - padding[3], cellHeight - padding[0] - padding[2]);
+            const pos = calcStartPosition(0, 0, cellWidth, cellHeight, imageWidth, imageHeight, textAlign, textBaseline, padding);
+            image.setAttributes({
+                x: pos.x,
+                y: pos.y,
+                width: imageWidth,
+                height: imageHeight
+            });
+            if (isMerge) {
+                updateImageDxDy(cellGroup.mergeStartCol, cellGroup.mergeEndCol, cellGroup.mergeStartRow, cellGroup.mergeEndRow, table);
+            }
+        }
+    }
+    function isDamagePic(image) {
+        const regedIcons = get$1();
+        return image.attribute.image === regedIcons.damage_pic.svg;
+    }
 
     function createProgressBarCell(progressBarDefine, style, width, value, dataValue, col, row, padding, table) {
         if (progressBarDefine.dependField) {
@@ -39328,6 +39683,90 @@
         injectable()
     ], SplitRectAfterRenderContribution);
 
+    let loadingImage;
+    let VTableDrawItemInterceptorContribution = class VTableDrawItemInterceptorContribution {
+        order = 1;
+        interceptors;
+        constructor() {
+            this.interceptors = [new ImageDrawItemInterceptorContribution()];
+        }
+        afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+            for (let i = 0; i < this.interceptors.length; i++) {
+                if (this.interceptors[i].afterDrawItem &&
+                    this.interceptors[i].afterDrawItem(graphic, renderService, drawContext, drawContribution, params)) {
+                    return true;
+                }
+            }
+            return false;
+        }
+        beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+            if ((!graphic.in3dMode || drawContext.in3dInterceptor) &&
+                !graphic.shadowRoot &&
+                !(graphic.baseGraphic || graphic.attribute.globalZIndex || graphic.interactiveGraphic)) {
+                return false;
+            }
+            for (let i = 0; i < this.interceptors.length; i++) {
+                if (this.interceptors[i].beforeDrawItem &&
+                    this.interceptors[i].beforeDrawItem(graphic, renderService, drawContext, drawContribution, params)) {
+                    return true;
+                }
+            }
+            return false;
+        }
+    };
+    VTableDrawItemInterceptorContribution = __decorate([
+        injectable()
+    ], VTableDrawItemInterceptorContribution);
+    class ImageDrawItemInterceptorContribution {
+        order = 1;
+        afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
+            if (graphic.type === 'image') {
+                this.drawItem(graphic, renderService, drawContext, drawContribution, params);
+            }
+            return false;
+        }
+        drawItem(graphic, renderService, drawContext, drawContribution, params) {
+            const { image: url } = graphic.attribute;
+            if (!url || !graphic.resources) {
+                return false;
+            }
+            const res = graphic.resources.get(url);
+            if (res.state !== 'loading') {
+                return false;
+            }
+            if (!loadingImage) {
+                const regedIcons = get$1();
+                const svg = regedIcons.loading_pic.svg;
+                const width = regedIcons.loading_pic.width;
+                const height = regedIcons.loading_pic.height;
+                loadingImage = createImage({
+                    width,
+                    height,
+                    image: svg
+                });
+            }
+            const { image: loadingUrl } = loadingImage.attribute;
+            if (!url || !loadingImage.resources) {
+                return false;
+            }
+            const loadingRes = loadingImage.resources.get(loadingUrl);
+            if (loadingRes.state !== 'success') {
+                return false;
+            }
+            const { context } = drawContext;
+            context.highPerformanceSave();
+            graphic.parent && context.setTransformFromMatrix(graphic.parent.globalTransMatrix, true);
+            graphic.glyphHost &&
+                graphic.glyphHost.parent &&
+                context.setTransformFromMatrix(graphic.glyphHost.parent.globalTransMatrix, true);
+            const b = graphic.AABBBounds;
+            const { width, height } = calcKeepAspectRatioSize(loadingRes.data.width, loadingRes.data.height, b.width(), b.height());
+            context.drawImage(loadingRes.data, b.x1 + (b.width() - width) / 2, b.y1 + (b.height() - height) / 2, width, height);
+            context.highPerformanceRestore();
+            return true;
+        }
+    }
+
     var splitModule = new ContainerModule((bind, unbind, isBound, rebind) => {
         if (isBound(SplitRectBeforeRenderContribution$1)) {
             rebind(SplitRectBeforeRenderContribution$1).to(SplitRectBeforeRenderContribution).inSingletonScope();
@@ -39370,6 +39809,8 @@
         bind(GroupRenderContribution).toService(ClipBodyGroupBeforeRenderContribution);
         bind(ClipBodyGroupAfterRenderContribution).toSelf().inSingletonScope();
         bind(GroupRenderContribution).toService(ClipBodyGroupAfterRenderContribution);
+        bind(VTableDrawItemInterceptorContribution).toSelf().inSingletonScope();
+        bind(DrawItemInterceptor).toService(VTableDrawItemInterceptorContribution);
     });
 
     function computeColsWidth(table, colStart, colEnd, update) {
@@ -41863,7 +42304,7 @@
                 });
             });
         });
-        changedCells.length = 0;
+        changedCells.clear();
         const { scrollTop, scrollLeft, frozenRowCount, frozenColCount } = table;
         const frozenRowsHeight = table.getFrozenRowsHeight();
         const frozenColsWidth = table.getFrozenColsWidth();
@@ -41962,24 +42403,26 @@
         const textBottom = graphic.globalAABBBounds.y2;
         if (textTop < minTop) {
             const deltaHeight = textTop - minTop;
-            changedCells.push({
-                col: cellGroup.col,
-                row: cellGroup.row,
-                dx: cellGroup.firstChild?.attribute.dx ?? 0,
-                dy: cellGroup.firstChild?.attribute.dy ?? 0
-            });
+            !changedCells.has(`${cellGroup.col}-${cellGroup.row}`) &&
+                changedCells.set(`${cellGroup.col}-${cellGroup.row}`, {
+                    col: cellGroup.col,
+                    row: cellGroup.row,
+                    dx: cellGroup.firstChild?.attribute.dx ?? 0,
+                    dy: cellGroup.firstChild?.attribute.dy ?? 0
+                });
             cellGroup.forEachChildren((child) => {
                 child.setAttribute('dy', (child.attribute.dy ?? 0) - deltaHeight + 2);
             });
         }
         else if (textBottom > maxTop) {
             const deltaHeight = textBottom - maxTop;
-            changedCells.push({
-                col: cellGroup.col,
-                row: cellGroup.row,
-                dx: cellGroup.firstChild?.attribute.dx ?? 0,
-                dy: cellGroup.firstChild?.attribute.dy ?? 0
-            });
+            !changedCells.has(`${cellGroup.col}-${cellGroup.row}`) &&
+                changedCells.set(`${cellGroup.col}-${cellGroup.row}`, {
+                    col: cellGroup.col,
+                    row: cellGroup.row,
+                    dx: cellGroup.firstChild?.attribute.dx ?? 0,
+                    dy: cellGroup.firstChild?.attribute.dy ?? 0
+                });
             cellGroup.forEachChildren((child) => {
                 child.setAttribute('dy', (child.attribute.dy ?? 0) - deltaHeight);
             });
@@ -42011,24 +42454,26 @@
         const textRight = text.globalAABBBounds.x2;
         if (textLeft < minLeft) {
             const deltaWidth = textLeft - minLeft;
-            changedCells.push({
-                col: cellGroup.col,
-                row: cellGroup.row,
-                dx: cellGroup.firstChild?.attribute.dx ?? 0,
-                dy: cellGroup.firstChild?.attribute.dy ?? 0
-            });
+            !changedCells.has(`${cellGroup.col}-${cellGroup.row}`) &&
+                changedCells.set(`${cellGroup.col}-${cellGroup.row}`, {
+                    col: cellGroup.col,
+                    row: cellGroup.row,
+                    dx: cellGroup.firstChild?.attribute.dx ?? 0,
+                    dy: cellGroup.firstChild?.attribute.dy ?? 0
+                });
             cellGroup.forEachChildren((child) => {
                 child.setAttribute('dx', (child.attribute.dx ?? 0) - deltaWidth + 2);
             });
         }
         else if (textRight > maxLeft) {
             const deltaWidth = textRight - maxLeft;
-            changedCells.push({
-                col: cellGroup.col,
-                row: cellGroup.row,
-                dx: cellGroup.firstChild?.attribute.dx ?? 0,
-                dy: cellGroup.firstChild?.attribute.dy ?? 0
-            });
+            !changedCells.has(`${cellGroup.col}-${cellGroup.row}`) &&
+                changedCells.set(`${cellGroup.col}-${cellGroup.row}`, {
+                    col: cellGroup.col,
+                    row: cellGroup.row,
+                    dx: cellGroup.firstChild?.attribute.dx ?? 0,
+                    dy: cellGroup.firstChild?.attribute.dy ?? 0
+                });
             cellGroup.forEachChildren((child) => {
                 child.setAttribute('dx', (child.attribute.dx ?? 0) - deltaWidth);
             });
@@ -50623,7 +51068,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "0.18.1";
+        version = "0.18.2-alpha.1";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -50768,7 +51213,7 @@
             this.headerStyleCache = new Map();
             this.bodyStyleCache = new Map();
             this.bodyBottomStyleCache = new Map();
-            internalProps.stick = { changedCells: [] };
+            internalProps.stick = { changedCells: new Map() };
             internalProps.customMergeCell = options.customMergeCell;
         }
         throttleInvalidate = throttle2(this.render.bind(this), 200);
@@ -51734,6 +52179,7 @@
             this.colWidthsMap = new NumberMap();
             this.colContentWidthsMap = new NumberMap();
             this.colWidthsLimit = {};
+            internalProps.stick.changedCells.clear();
             internalProps.theme = themes.of(options.theme ?? themes.DEFAULT);
             this.scenegraph.updateStageBackground();
             internalProps.autoWrapText = options.autoWrapText;
@@ -61869,7 +62315,7 @@
     }
 
     registerForVrender();
-    const version = "0.18.1";
+    const version = "0.18.2-alpha.1";
     function getIcons() {
         return get$1();
     }