@visactor/vrender 0.19.21 → 0.19.23

package/dist/index.js

@@ -4046,7 +4046,8 @@
       shadowRootIdx: 1,
       globalZIndex: 1,
       globalCompositeOperation: "",
-      overflow: "hidden"
+      overflow: "hidden",
+      shadowPickMode: "graphic"
     }, DefaultDebugAttribute), DefaultStyle), DefaultTransform);
     function addAttributeToPrototype(obj, c, keys) {
       keys.forEach(key => {
@@ -5849,13 +5850,23 @@
         }
       }
       preventDefault() {
-        this.nativeEvent instanceof Event && this.nativeEvent.cancelable && this.nativeEvent.preventDefault(), this.defaultPrevented = !0;
+        try {
+          this.nativeEvent instanceof Event && this.nativeEvent.cancelable && this.nativeEvent.preventDefault();
+        } catch (err) {
+          this.nativeEvent.preventDefault && isFunction$1(this.nativeEvent.preventDefault) && this.nativeEvent.preventDefault();
+        }
+        this.defaultPrevented = !0;
       }
       stopImmediatePropagation() {
         this.propagationImmediatelyStopped = !0;
       }
       stopPropagation() {
-        this.nativeEvent instanceof Event && this.nativeEvent.cancelable && this.nativeEvent.stopPropagation(), this.propagationStopped = !0;
+        try {
+          this.nativeEvent instanceof Event && this.nativeEvent.cancelable && this.nativeEvent.stopPropagation();
+        } catch (err) {
+          this.nativeEvent.stopPropagation && isFunction$1(this.nativeEvent.stopPropagation) && this.nativeEvent.stopPropagation();
+        }
+        this.propagationStopped = !0;
       }
       initEvent() {}
       initUIEvent() {}
@@ -10971,13 +10982,14 @@
       return "middle" === baseline ? -lineHeight / 2 : "top" === baseline ? 0 : "bottom" === baseline ? buf - lineHeight : baseline && "alphabetic" !== baseline ? 0 : (fontSize || (fontSize = lineHeight), -(lineHeight - fontSize) / 2 - .79 * fontSize);
     }
     function textAttributesToStyle(attrs) {
-      const style = {};
+      const style = {},
+        parsePxValue = value => /^\d+(\.\d+)?$/.test(`${value}`) ? `${value}px` : `${value}`;
       return ["textAlign", "fontFamily", "fontVariant", "fontStyle", "fontWeight"].forEach(key => {
         attrs[key] && (style[lowerCamelCaseToMiddle(key)] = attrs[key]);
       }), ["fontSize", "lineHeight"].forEach(key => {
         const styleKey = lowerCamelCaseToMiddle(key);
-        isNil$1(attrs[key]) || (style[styleKey] = /^[0-9]*$/.test(`${attrs[key]}`) ? `${attrs[key]}px` : `${attrs[key]}`);
-      }), attrs.underline ? style["text-decoration"] = "underline" : attrs.lineThrough && (style["text-decoration"] = "line-through"), attrs.fill && isString$1(attrs.fill) && (style.color = attrs.fill), style;
+        isNil$1(attrs[key]) || (style[styleKey] = parsePxValue(attrs[key]));
+      }), isValid$1(attrs.maxLineWidth) && (style["max-width"] = parsePxValue(attrs.maxLineWidth)), attrs.underline ? style["text-decoration"] = "underline" : attrs.lineThrough && (style["text-decoration"] = "line-through"), attrs.fill && isString$1(attrs.fill) && (style.color = attrs.fill), style;
     }
 
     class CanvasTextLayout {
@@ -17237,6 +17249,100 @@
           decorator(target, key, paramIndex);
         };
       };
+    exports.DefaultCanvasGroupRender = class DefaultCanvasGroupRender {
+      constructor(groupRenderContribitions) {
+        this.groupRenderContribitions = groupRenderContribitions, this.numberType = GROUP_NUMBER_TYPE;
+      }
+      drawShape(group, context, x, y, drawContext, params, fillCb, strokeCb) {
+        const groupAttribute = getTheme(group, null == params ? void 0 : params.theme).group,
+          {
+            fill = groupAttribute.fill,
+            background: background,
+            stroke = groupAttribute.stroke,
+            opacity = groupAttribute.opacity,
+            width = groupAttribute.width,
+            height = groupAttribute.height,
+            clip = groupAttribute.clip,
+            fillOpacity = groupAttribute.fillOpacity,
+            strokeOpacity = groupAttribute.strokeOpacity,
+            cornerRadius = groupAttribute.cornerRadius,
+            path = groupAttribute.path,
+            lineWidth = groupAttribute.lineWidth,
+            visible = groupAttribute.visible
+          } = group.attribute,
+          fVisible = rectFillVisible(opacity, fillOpacity, width, height, fill),
+          sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height),
+          doFill = runFill(fill, background),
+          doStroke = runStroke(stroke, lineWidth);
+        if (!group.valid || !visible) return;
+        if (!clip) {
+          if (!doFill && !doStroke) return;
+          if (!(fVisible || sVisible || fillCb || strokeCb || background)) return;
+        }
+        if (path && path.length && drawContext.drawContribution) {
+          const disableFill = context.disableFill,
+            disableStroke = context.disableStroke,
+            disableBeginPath = context.disableBeginPath;
+          context.disableFill = !0, context.disableStroke = !0, context.disableBeginPath = !0, path.forEach(g => {
+            drawContext.drawContribution.getRenderContribution(g).draw(g, drawContext.renderService, drawContext, params);
+          }), context.disableFill = disableFill, context.disableStroke = disableStroke, context.disableBeginPath = disableBeginPath;
+        } else 0 === cornerRadius || isArray$1(cornerRadius) && cornerRadius.every(num => 0 === num) ? (context.beginPath(), context.rect(x, y, width, height)) : (context.beginPath(), createRectPath(context, x, y, width, height, cornerRadius));
+        this._groupRenderContribitions || (this._groupRenderContribitions = this.groupRenderContribitions.getContributions() || [], this._groupRenderContribitions.push(defaultGroupBackgroundRenderContribution));
+        const doFillOrStroke = {
+          doFill: doFill,
+          doStroke: doStroke
+        };
+        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 => {
+          c.time === exports.BaseRenderContributionTime.afterFillStroke && c.drawShape(group, context, x, y, doFill, doStroke, fVisible, sVisible, groupAttribute, drawContext, fillCb, strokeCb);
+        });
+      }
+      draw(group, renderService, drawContext, params) {
+        const {
+          context: context
+        } = drawContext;
+        if (!context) return;
+        const {
+          clip: clip,
+          baseOpacity = 1
+        } = group.attribute;
+        clip ? context.save() : context.highPerformanceSave(), context.baseGlobalAlpha *= baseOpacity;
+        const groupAttribute = getTheme(group, null == params ? void 0 : params.theme).group,
+          lastModelMatrix = context.modelMatrix;
+        if (context.camera) {
+          const nextModelMatrix = mat4Allocate.allocate(),
+            modelMatrix = mat4Allocate.allocate();
+          getModelMatrix(modelMatrix, group, groupAttribute), multiplyMat4Mat4(nextModelMatrix, lastModelMatrix || nextModelMatrix, modelMatrix), context.modelMatrix = nextModelMatrix, mat4Allocate.free(modelMatrix), context.setTransform(1, 0, 0, 1, 0, 0, !0);
+        } else context.transformFromMatrix(group.transMatrix, !0);
+        context.beginPath(), params.skipDraw ? this.drawShape(group, context, 0, 0, drawContext, params, () => !1, () => !1) : this.drawShape(group, context, 0, 0, drawContext);
+        const {
+          scrollX = groupAttribute.scrollX,
+          scrollY = groupAttribute.scrollY
+        } = group.attribute;
+        let p;
+        (scrollX || scrollY) && context.translate(scrollX, scrollY), params && params.drawingCb && (p = params.drawingCb()), context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix, context.baseGlobalAlpha /= baseOpacity, p && p.then ? p.then(() => {
+          clip ? context.restore() : context.highPerformanceRestore();
+        }) : clip ? context.restore() : context.highPerformanceRestore();
+      }
+    };
+    exports.DefaultCanvasGroupRender = __decorate$1s([injectable(), __param$H(0, inject(ContributionProvider)), __param$H(0, named(GroupRenderContribution)), __metadata$16("design:paramtypes", [Object])], exports.DefaultCanvasGroupRender);
+
+    var __decorate$1r = 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$15 = undefined && undefined.__metadata || function (k, v) {
+        if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+      },
+      __param$G = undefined && undefined.__param || function (paramIndex, decorator) {
+        return function (target, key) {
+          decorator(target, key, paramIndex);
+        };
+      };
     const repeatStr = ["", "repeat-x", "repeat-y", "repeat"];
     exports.DefaultCanvasImageRender = class DefaultCanvasImageRender extends BaseRender {
       constructor(imageRenderContribitions) {
@@ -17293,7 +17399,7 @@
         this._draw(image, imageAttribute, !1, drawContext);
       }
     };
-    exports.DefaultCanvasImageRender = __decorate$1s([injectable(), __param$H(0, inject(ContributionProvider)), __param$H(0, named(ImageRenderContribution)), __metadata$16("design:paramtypes", [Object])], exports.DefaultCanvasImageRender);
+    exports.DefaultCanvasImageRender = __decorate$1r([injectable(), __param$G(0, inject(ContributionProvider)), __param$G(0, named(ImageRenderContribution)), __metadata$15("design:paramtypes", [Object])], exports.DefaultCanvasImageRender);
 
     const IncrementalDrawContribution = Symbol.for("IncrementalDrawContribution");
     const ArcRender = Symbol.for("ArcRender");
@@ -17316,14 +17422,14 @@
     const RenderSelector = Symbol.for("RenderSelector");
     const DrawContribution = Symbol.for("DrawContribution");
 
-    var __decorate$1r = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1q = 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$15 = undefined && undefined.__metadata || function (k, v) {
+      __metadata$14 = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       };
     const DrawItemInterceptor = Symbol.for("DrawItemInterceptor");
@@ -17383,7 +17489,7 @@
         return !1;
       }
     };
-    exports.CommonDrawItemInterceptorContribution = __decorate$1r([injectable(), __metadata$15("design:paramtypes", [])], exports.CommonDrawItemInterceptorContribution);
+    exports.CommonDrawItemInterceptorContribution = __decorate$1q([injectable(), __metadata$14("design:paramtypes", [])], exports.CommonDrawItemInterceptorContribution);
     class InteractiveDrawItemInterceptorContribution {
       constructor() {
         this.order = 1;
@@ -17515,17 +17621,17 @@
       }
     }
 
-    var __decorate$1q = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1p = 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$14 = undefined && undefined.__metadata || function (k, v) {
+      __metadata$13 = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
-      __param$G = undefined && undefined.__param || function (paramIndex, decorator) {
+      __param$F = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
           decorator(target, key, paramIndex);
         };
@@ -17563,7 +17669,7 @@
         this.prepare(updateBounds), this.prepareRenderList(), this.beforeDraw(params), this.draw(params), this.afterDraw(params), this.drawParams = null;
       }
     };
-    exports.DefaultRenderService = __decorate$1q([injectable(), __param$G(0, inject(DrawContribution)), __metadata$14("design:paramtypes", [Object])], exports.DefaultRenderService);
+    exports.DefaultRenderService = __decorate$1p([injectable(), __param$F(0, inject(DrawContribution)), __metadata$13("design:paramtypes", [Object])], exports.DefaultRenderService);
 
     var renderModule$1 = new ContainerModule(bind => {
       bind(RenderService).to(exports.DefaultRenderService);
@@ -17574,7 +17680,7 @@
     const BoundsPicker = Symbol.for("BoundsPicker");
     const GlobalPickerService = Symbol.for("GlobalPickerService");
 
-    var __decorate$1p = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1o = 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;
@@ -17593,6 +17699,7 @@
         return graphic.attribute.shadowRootIdx < 0 ? this._pickItem(graphic, pickerService, point, pickParams, params) : null;
       }
       _pickItem(graphic, pickerService, point, pickParams, params) {
+        var _a;
         if (!graphic.shadowRoot) return null;
         const {
           parentMatrix: parentMatrix
@@ -17600,14 +17707,18 @@
         if (!parentMatrix) return null;
         const context = pickerService.pickContext;
         context.highPerformanceSave();
-        const g = graphic.shadowRoot,
+        const theme = null === (_a = getTheme(graphic)) || void 0 === _a ? void 0 : _a[graphic.type],
+          {
+            shadowPickMode = null == theme ? void 0 : theme.shadowPickMode
+          } = graphic.attribute,
+          g = graphic.shadowRoot,
           currentGroupMatrix = matrixAllocate.allocateByObj(parentMatrix),
           newPoint = new Point(currentGroupMatrix.a * point.x + currentGroupMatrix.c * point.y + currentGroupMatrix.e, currentGroupMatrix.b * point.x + currentGroupMatrix.d * point.y + currentGroupMatrix.f),
           result = pickerService.pickGroup(g, newPoint, currentGroupMatrix, pickParams);
-        return context.highPerformanceRestore(), result;
+        return context.highPerformanceRestore(), !result.graphic && result.group && "full" === shadowPickMode && (result.graphic = result.group), result;
       }
     };
-    exports.ShadowRootPickItemInterceptorContribution = __decorate$1p([injectable()], exports.ShadowRootPickItemInterceptorContribution);
+    exports.ShadowRootPickItemInterceptorContribution = __decorate$1o([injectable()], exports.ShadowRootPickItemInterceptorContribution);
     exports.InteractivePickItemInterceptorContribution = class InteractivePickItemInterceptorContribution {
       constructor() {
         this.order = 1;
@@ -17626,7 +17737,7 @@
         return null;
       }
     };
-    exports.InteractivePickItemInterceptorContribution = __decorate$1p([injectable()], exports.InteractivePickItemInterceptorContribution);
+    exports.InteractivePickItemInterceptorContribution = __decorate$1o([injectable()], exports.InteractivePickItemInterceptorContribution);
     exports.Canvas3DPickItemInterceptor = class Canvas3DPickItemInterceptor {
       constructor() {
         this.order = 1;
@@ -17686,7 +17797,7 @@
         context.setTransformForCurrent();
       }
     };
-    exports.Canvas3DPickItemInterceptor = __decorate$1p([injectable()], exports.Canvas3DPickItemInterceptor);
+    exports.Canvas3DPickItemInterceptor = __decorate$1o([injectable()], exports.Canvas3DPickItemInterceptor);
 
     var pickModule = new ContainerModule((bind, unbind, isBound) => {
       isBound(PickerService) || (bind(GlobalPickerService).toSelf(), bind(PickerService).toService(GlobalPickerService)), bind(exports.Canvas3DPickItemInterceptor).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(exports.Canvas3DPickItemInterceptor), bind(exports.ShadowRootPickItemInterceptorContribution).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(exports.ShadowRootPickItemInterceptorContribution), bind(exports.InteractivePickItemInterceptorContribution).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(exports.InteractivePickItemInterceptorContribution), bindContributionProvider(bind, PickItemInterceptor);
@@ -17699,17 +17810,17 @@
     const AutoEnablePlugins = Symbol.for("AutoEnablePlugins");
     const PluginService = Symbol.for("PluginService");
 
-    var __decorate$1o = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1n = 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$13 = undefined && undefined.__metadata || function (k, v) {
+      __metadata$12 = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
-      __param$F = undefined && undefined.__param || function (paramIndex, decorator) {
+      __param$E = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
           decorator(target, key, paramIndex);
         };
@@ -17749,7 +17860,7 @@
         }), this.onRegisterPlugin = [];
       }
     };
-    DefaultPluginService = __decorate$1o([injectable(), __param$F(0, inject(ContributionProvider)), __param$F(0, named(AutoEnablePlugins)), __metadata$13("design:paramtypes", [Object])], DefaultPluginService);
+    DefaultPluginService = __decorate$1n([injectable(), __param$E(0, inject(ContributionProvider)), __param$E(0, named(AutoEnablePlugins)), __metadata$12("design:paramtypes", [Object])], DefaultPluginService);
 
     var pluginModule = new ContainerModule(bind => {
       bind(PluginService).to(DefaultPluginService), bindContributionProviderNoSingletonScope(bind, AutoEnablePlugins);
@@ -17763,14 +17874,14 @@
       bind(TextMeasureContribution).to(exports.DefaultTextMeasureContribution).inSingletonScope(), bindContributionProvider(bind, TextMeasureContribution);
     });
 
-    var __decorate$1n = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1m = 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$12 = undefined && undefined.__metadata || function (k, v) {
+      __metadata$11 = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       };
     let CanvasLayerHandlerContribution = class {
@@ -17840,16 +17951,16 @@
         this.canvas.release();
       }
     };
-    CanvasLayerHandlerContribution = __decorate$1n([injectable(), __metadata$12("design:paramtypes", [])], CanvasLayerHandlerContribution);
+    CanvasLayerHandlerContribution = __decorate$1m([injectable(), __metadata$11("design:paramtypes", [])], CanvasLayerHandlerContribution);
 
-    var __decorate$1m = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1l = 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$11 = undefined && undefined.__metadata || function (k, v) {
+      __metadata$10 = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       };
     let EmptyLayerHandlerContribution = class {
@@ -17884,16 +17995,16 @@
       }
       release() {}
     };
-    EmptyLayerHandlerContribution = __decorate$1m([injectable(), __metadata$11("design:paramtypes", [])], EmptyLayerHandlerContribution);
+    EmptyLayerHandlerContribution = __decorate$1l([injectable(), __metadata$10("design:paramtypes", [])], EmptyLayerHandlerContribution);
 
-    var __decorate$1l = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1k = 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$10 = undefined && undefined.__metadata || function (k, v) {
+      __metadata$$ = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       };
     let OffscreenLayerHandlerContribution = class {
@@ -17956,7 +18067,7 @@
       }
       merge(layerHandlers) {}
     };
-    OffscreenLayerHandlerContribution = __decorate$1l([injectable(), __metadata$10("design:paramtypes", [])], OffscreenLayerHandlerContribution);
+    OffscreenLayerHandlerContribution = __decorate$1k([injectable(), __metadata$$("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);
@@ -18072,17 +18183,17 @@
       return result;
     }
 
-    var __decorate$1k = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1j = 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$$ = undefined && undefined.__metadata || function (k, v) {
+      __metadata$_ = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
-      __param$E = undefined && undefined.__param || function (paramIndex, decorator) {
+      __param$D = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
           decorator(target, key, paramIndex);
         };
@@ -18269,101 +18380,7 @@
       }
       afterDraw(renderService, drawParams) {}
     };
-    DefaultDrawContribution = __decorate$1k([injectable(), __param$E(0, multiInject(GraphicRender)), __param$E(1, inject(ContributionProvider)), __param$E(1, named(DrawItemInterceptor)), __metadata$$("design:paramtypes", [Array, Object])], DefaultDrawContribution);
-
-    var __decorate$1j = 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$_ = undefined && undefined.__metadata || function (k, v) {
-        if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
-      },
-      __param$D = undefined && undefined.__param || function (paramIndex, decorator) {
-        return function (target, key) {
-          decorator(target, key, paramIndex);
-        };
-      };
-    let DefaultCanvasGroupRender = class {
-      constructor(groupRenderContribitions) {
-        this.groupRenderContribitions = groupRenderContribitions, this.numberType = GROUP_NUMBER_TYPE;
-      }
-      drawShape(group, context, x, y, drawContext, params, fillCb, strokeCb) {
-        const groupAttribute = getTheme(group, null == params ? void 0 : params.theme).group,
-          {
-            fill = groupAttribute.fill,
-            background: background,
-            stroke = groupAttribute.stroke,
-            opacity = groupAttribute.opacity,
-            width = groupAttribute.width,
-            height = groupAttribute.height,
-            clip = groupAttribute.clip,
-            fillOpacity = groupAttribute.fillOpacity,
-            strokeOpacity = groupAttribute.strokeOpacity,
-            cornerRadius = groupAttribute.cornerRadius,
-            path = groupAttribute.path,
-            lineWidth = groupAttribute.lineWidth,
-            visible = groupAttribute.visible
-          } = group.attribute,
-          fVisible = rectFillVisible(opacity, fillOpacity, width, height, fill),
-          sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height),
-          doFill = runFill(fill, background),
-          doStroke = runStroke(stroke, lineWidth);
-        if (!group.valid || !visible) return;
-        if (!clip) {
-          if (!doFill && !doStroke) return;
-          if (!(fVisible || sVisible || fillCb || strokeCb || background)) return;
-        }
-        if (path && path.length && drawContext.drawContribution) {
-          const disableFill = context.disableFill,
-            disableStroke = context.disableStroke,
-            disableBeginPath = context.disableBeginPath;
-          context.disableFill = !0, context.disableStroke = !0, context.disableBeginPath = !0, path.forEach(g => {
-            drawContext.drawContribution.getRenderContribution(g).draw(g, drawContext.renderService, drawContext, params);
-          }), context.disableFill = disableFill, context.disableStroke = disableStroke, context.disableBeginPath = disableBeginPath;
-        } else 0 === cornerRadius || isArray$1(cornerRadius) && cornerRadius.every(num => 0 === num) ? (context.beginPath(), context.rect(x, y, width, height)) : (context.beginPath(), createRectPath(context, x, y, width, height, cornerRadius));
-        this._groupRenderContribitions || (this._groupRenderContribitions = this.groupRenderContribitions.getContributions() || [], this._groupRenderContribitions.push(defaultGroupBackgroundRenderContribution));
-        const doFillOrStroke = {
-          doFill: doFill,
-          doStroke: doStroke
-        };
-        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 => {
-          c.time === exports.BaseRenderContributionTime.afterFillStroke && c.drawShape(group, context, x, y, doFill, doStroke, fVisible, sVisible, groupAttribute, drawContext, fillCb, strokeCb);
-        });
-      }
-      draw(group, renderService, drawContext, params) {
-        const {
-          context: context
-        } = drawContext;
-        if (!context) return;
-        const {
-          clip: clip,
-          baseOpacity = 1
-        } = group.attribute;
-        clip ? context.save() : context.highPerformanceSave(), context.baseGlobalAlpha *= baseOpacity;
-        const groupAttribute = getTheme(group, null == params ? void 0 : params.theme).group,
-          lastModelMatrix = context.modelMatrix;
-        if (context.camera) {
-          const nextModelMatrix = mat4Allocate.allocate(),
-            modelMatrix = mat4Allocate.allocate();
-          getModelMatrix(modelMatrix, group, groupAttribute), multiplyMat4Mat4(nextModelMatrix, lastModelMatrix || nextModelMatrix, modelMatrix), context.modelMatrix = nextModelMatrix, mat4Allocate.free(modelMatrix), context.setTransform(1, 0, 0, 1, 0, 0, !0);
-        } else context.transformFromMatrix(group.transMatrix, !0);
-        context.beginPath(), params.skipDraw ? this.drawShape(group, context, 0, 0, drawContext, params, () => !1, () => !1) : this.drawShape(group, context, 0, 0, drawContext);
-        const {
-          scrollX = groupAttribute.scrollX,
-          scrollY = groupAttribute.scrollY
-        } = group.attribute;
-        let p;
-        (scrollX || scrollY) && context.translate(scrollX, scrollY), params && params.drawingCb && (p = params.drawingCb()), context.modelMatrix !== lastModelMatrix && mat4Allocate.free(context.modelMatrix), context.modelMatrix = lastModelMatrix, context.baseGlobalAlpha /= baseOpacity, p && p.then ? p.then(() => {
-          clip ? context.restore() : context.highPerformanceRestore();
-        }) : clip ? context.restore() : context.highPerformanceRestore();
-      }
-    };
-    DefaultCanvasGroupRender = __decorate$1j([injectable(), __param$D(0, inject(ContributionProvider)), __param$D(0, named(GroupRenderContribution)), __metadata$_("design:paramtypes", [Object])], DefaultCanvasGroupRender);
+    DefaultDrawContribution = __decorate$1j([injectable(), __param$D(0, multiInject(GraphicRender)), __param$D(1, inject(ContributionProvider)), __param$D(1, named(DrawItemInterceptor)), __metadata$_("design:paramtypes", [Array, Object])], DefaultDrawContribution);
 
     var __decorate$1i = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
@@ -18607,7 +18624,7 @@
     DefaultIncrementalDrawContribution = __decorate$1g([injectable(), __param$C(0, multiInject(GraphicRender)), __param$C(1, inject(DefaultIncrementalCanvasLineRender)), __param$C(2, inject(DefaultIncrementalCanvasAreaRender)), __param$C(3, inject(ContributionProvider)), __param$C(3, named(DrawItemInterceptor)), __metadata$Z("design:paramtypes", [Array, Object, Object, Object])], DefaultIncrementalDrawContribution);
 
     var renderModule = new ContainerModule(bind => {
-      bind(DefaultBaseBackgroundRenderContribution).toSelf().inSingletonScope(), bind(DefaultBaseTextureRenderContribution).toSelf().inSingletonScope(), bind(DrawContribution).to(DefaultDrawContribution), bind(IncrementalDrawContribution).to(DefaultIncrementalDrawContribution), bind(GroupRender).to(DefaultCanvasGroupRender).inSingletonScope(), bind(GraphicRender).toService(GroupRender), bindContributionProvider(bind, GroupRenderContribution), bind(exports.DefaultBaseInteractiveRenderContribution).toSelf().inSingletonScope(), bindContributionProvider(bind, InteractiveSubRenderContribution), bindContributionProvider(bind, GraphicRender), bind(exports.CommonDrawItemInterceptorContribution).toSelf().inSingletonScope(), bind(DrawItemInterceptor).toService(exports.CommonDrawItemInterceptorContribution), bindContributionProvider(bind, DrawItemInterceptor);
+      bind(DefaultBaseBackgroundRenderContribution).toSelf().inSingletonScope(), bind(DefaultBaseTextureRenderContribution).toSelf().inSingletonScope(), bind(DrawContribution).to(DefaultDrawContribution), bind(IncrementalDrawContribution).to(DefaultIncrementalDrawContribution), bind(GroupRender).to(exports.DefaultCanvasGroupRender).inSingletonScope(), bind(GraphicRender).toService(GroupRender), bindContributionProvider(bind, GroupRenderContribution), bind(exports.DefaultBaseInteractiveRenderContribution).toSelf().inSingletonScope(), bindContributionProvider(bind, InteractiveSubRenderContribution), bindContributionProvider(bind, GraphicRender), bind(exports.CommonDrawItemInterceptorContribution).toSelf().inSingletonScope(), bind(DrawItemInterceptor).toService(exports.CommonDrawItemInterceptorContribution), bindContributionProvider(bind, DrawItemInterceptor);
     });
 
     function load(container) {
@@ -18800,8 +18817,9 @@
         }
         const containerTL = application.global.getElementTopLeft(nativeContainer, !1),
           windowTL = stage.window.getTopLeft(!1),
-          offsetX = left + windowTL.left - containerTL.left,
-          offsetTop = top + windowTL.top - containerTL.top;
+          viewBox = stage.viewBox,
+          offsetX = left + windowTL.left - containerTL.left + viewBox.x1,
+          offsetTop = top + windowTL.top - containerTL.top + viewBox.y1;
         if (calculateStyle.left = `${offsetX}px`, calculateStyle.top = `${offsetTop}px`, "text" === graphic.type && "position" === anchorType && (calculateStyle = Object.assign(Object.assign({}, calculateStyle), this.getTransformOfText(graphic))), isFunction$1(options.style)) {
           const userStyle = options.style({
             top: offsetTop,
@@ -29298,7 +29316,7 @@
 
     const roughModule = _roughModule;
 
-    const version = "0.19.21";
+    const version = "0.19.23";
     preLoadAllModule();
     if (isBrowserEnv()) {
         loadBrowserEnv(container);