@visactor/vrender-components 0.17.5-alpha.1 → 0.17.6

package/dist/index.js

@@ -1476,7 +1476,7 @@
   var EnvContribution = Symbol["for"]("EnvContribution");
   var VGlobal = Symbol["for"]("VGlobal");
 
-  var __decorate$R = 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;
@@ -1726,7 +1726,7 @@
     }]);
     return DefaultGlobal;
   }();
-  DefaultGlobal = __decorate$R([injectable(), __param$z(0, inject(ContributionProvider)), __param$z(0, named(EnvContribution)), __metadata$G("design:paramtypes", [Object])], DefaultGlobal);
+  DefaultGlobal = __decorate$S([injectable(), __param$z(0, inject(ContributionProvider)), __param$z(0, named(EnvContribution)), __metadata$G("design:paramtypes", [Object])], DefaultGlobal);
 
   var circleThreshold = vutils.tau - 1e-8;
   var BoundsContext = /*#__PURE__*/function () {
@@ -3167,7 +3167,8 @@
     whiteSpace: "no-wrap",
     heightLimit: 1 / 0,
     lineClamp: 1 / 0,
-    suffixPosition: "end"
+    suffixPosition: "end",
+    disableAutoClipedPoptip: void 0
   };
   var DefaultPickStyle = {
     pickStrokeBuffer: 0
@@ -3456,7 +3457,7 @@
     return "number" != typeof measurement.actualBoundingBoxAscent || "number" != typeof measurement.actualBoundingBoxDescent ? (result.width = Math.floor(measurement.width), result.height = character.fontSize || 0, result.ascent = result.height, result.descent = 0) : (result.width = Math.floor(measurement.width), result.height = Math.floor(measurement.actualBoundingBoxAscent + measurement.actualBoundingBoxDescent), result.ascent = Math.floor(measurement.actualBoundingBoxAscent), result.descent = result.height - result.ascent), result;
   }
 
-  var __decorate$Q = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$R = 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;
@@ -3761,9 +3762,9 @@
     }]);
     return ATextMeasure;
   }();
-  ATextMeasure = __decorate$Q([injectable()], ATextMeasure);
+  ATextMeasure = __decorate$R([injectable()], ATextMeasure);
 
-  var __decorate$P = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$Q = 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;
@@ -3780,7 +3781,7 @@
     }
     return _createClass(DefaultTextMeasureContribution);
   }(ATextMeasure);
-  DefaultTextMeasureContribution = __decorate$P([injectable()], DefaultTextMeasureContribution);
+  DefaultTextMeasureContribution = __decorate$Q([injectable()], DefaultTextMeasureContribution);
 
   var container = new Container();
 
@@ -3858,7 +3859,7 @@
   }();
   var canvasAllocate = new DefaultCanvasAllocate();
 
-  var __decorate$O = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$P = 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;
@@ -3950,7 +3951,7 @@
     }]);
     return DefaultGraphicUtil;
   }();
-  DefaultGraphicUtil = __decorate$O([injectable(), __param$y(0, inject(ContributionProvider)), __param$y(0, named(TextMeasureContribution)), __metadata$F("design:paramtypes", [Object])], DefaultGraphicUtil);
+  DefaultGraphicUtil = __decorate$P([injectable(), __param$y(0, inject(ContributionProvider)), __param$y(0, named(TextMeasureContribution)), __metadata$F("design:paramtypes", [Object])], DefaultGraphicUtil);
   var TransformMode;
   !function (TransformMode) {
     TransformMode[TransformMode.transform = 0] = "transform", TransformMode[TransformMode.matrix = 1] = "matrix";
@@ -4027,7 +4028,7 @@
     }]);
     return DefaultTransformUtil;
   }();
-  DefaultTransformUtil = __decorate$O([injectable(), __metadata$F("design:paramtypes", [])], DefaultTransformUtil);
+  DefaultTransformUtil = __decorate$P([injectable(), __metadata$F("design:paramtypes", [])], DefaultTransformUtil);
 
   var defaultThemeObj = {
       arc: DefaultArcAttribute,
@@ -5734,7 +5735,6 @@
     Direction[Direction.LEFT_TO_RIGHT = 0] = "LEFT_TO_RIGHT", Direction[Direction.RIGHT_TO_LEFT = 1] = "RIGHT_TO_LEFT", Direction[Direction.TOP_TO_BOTTOM = 2] = "TOP_TO_BOTTOM", Direction[Direction.BOTTOM_TO_TOP = 3] = "BOTTOM_TO_TOP", Direction[Direction.STROKE = 4] = "STROKE";
   }(Direction || (Direction = {}));
 
-  var Color$1 = vutils.ColorUtil.Color;
   var ColorType;
   !function (ColorType) {
     ColorType[ColorType.Color255 = 0] = "Color255", ColorType[ColorType.Color1 = 1] = "Color1";
@@ -5751,7 +5751,7 @@
         if (size === ColorType.Color1) {
           var _color = ColorStore.store1[str];
           if (_color) return arr[0] = _color[0], arr[1] = _color[1], arr[2] = _color[2], arr[3] = _color[3], arr;
-          var _c = Color$1.parseColorString(str);
+          var _c = vutils.Color.parseColorString(str);
           if (_c) {
             var data = [_c.r / 255, _c.g / 255, _c.b / 255, _c.opacity];
             ColorStore.store1[str] = data, ColorStore.store255[str] = [_c.r, _c.g, _c.b, _c.opacity], arr[0] = data[0], arr[1] = data[1], arr[2] = data[2], arr[3] = data[3];
@@ -5760,7 +5760,7 @@
         }
         var color = ColorStore.store255[str];
         if (color) return arr[0] = color[0], arr[1] = color[1], arr[2] = color[2], arr[3] = color[3], arr;
-        var c = Color$1.parseColorString(str);
+        var c = vutils.Color.parseColorString(str);
         return c && (ColorStore.store1[str] = [c.r / 255, c.g / 255, c.b / 255, c.opacity], ColorStore.store255[str] = [c.r, c.g, c.b, c.opacity], arr[0] = c.r, arr[1] = c.g, arr[2] = c.b, arr[3] = c.opacity), arr;
       }
     }, {
@@ -7554,7 +7554,7 @@
   var VirtualLayerHandlerContribution = Symbol["for"]("VirtualLayerHandlerContribution");
 
   var _DefaultLayerService_,
-    __decorate$N = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    __decorate$O = 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;
@@ -7647,9 +7647,9 @@
     }]);
     return DefaultLayerService_1;
   }();
-  DefaultLayerService.idprefix = "visactor_layer", DefaultLayerService.prefix_count = 0, DefaultLayerService = _DefaultLayerService_ = __decorate$N([injectable(), __metadata$E("design:paramtypes", [])], DefaultLayerService);
+  DefaultLayerService.idprefix = "visactor_layer", DefaultLayerService.prefix_count = 0, DefaultLayerService = _DefaultLayerService_ = __decorate$O([injectable(), __metadata$E("design:paramtypes", [])], DefaultLayerService);
 
-  var __decorate$M = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$N = 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;
@@ -7809,7 +7809,7 @@
     }]);
     return DefaultWindow;
   }();
-  DefaultWindow = __decorate$M([injectable(), __metadata$D("design:paramtypes", [])], DefaultWindow);
+  DefaultWindow = __decorate$N([injectable(), __metadata$D("design:paramtypes", [])], DefaultWindow);
 
   var coreModule = new ContainerModule(function (bind) {
     bind(VGlobal).to(DefaultGlobal).inSingletonScope(), bind(VWindow).to(DefaultWindow), bind(GraphicUtil).to(DefaultGraphicUtil).inSingletonScope(), bind(TransformUtil).to(DefaultTransformUtil).inSingletonScope(), bind(LayerService).to(DefaultLayerService).inSingletonScope();
@@ -8245,7 +8245,7 @@
         var _a;
         var attribute = this.attribute,
           textTheme = getTheme(this).text;
-        if (Array.isArray(attribute.text)) return;
+        if (this.isMultiLine) return;
         var _attribute$maxLineWid = attribute.maxLineWidth,
           maxLineWidth = _attribute$maxLineWid === void 0 ? textTheme.maxLineWidth : _attribute$maxLineWid;
         return Number.isFinite(maxLineWidth) ? (this.tryUpdateAABBBounds(), this.cache.clipedText) : (null !== (_a = attribute.text) && void 0 !== _a ? _a : textTheme.text).toString();
@@ -8253,14 +8253,14 @@
     }, {
       key: "clipedWidth",
       get: function get() {
-        if (!Array.isArray(this.attribute.text)) return this.tryUpdateAABBBounds(), this.cache.clipedWidth;
+        if (!this.isMultiLine) return this.tryUpdateAABBBounds(), this.cache.clipedWidth;
       }
     }, {
       key: "cliped",
       get: function get() {
         var textTheme = getTheme(this).text,
           attribute = this.attribute;
-        if (Array.isArray(attribute.text)) return;
+        if (this.isMultiLine) return;
         var _attribute$maxLineWid2 = attribute.maxLineWidth,
           maxLineWidth = _attribute$maxLineWid2 === void 0 ? textTheme.maxLineWidth : _attribute$maxLineWid2;
         return !!Number.isFinite(maxLineWidth) && (this.tryUpdateAABBBounds(), this.clipedText !== attribute.text.toString());
@@ -8268,7 +8268,12 @@
     }, {
       key: "multilineLayout",
       get: function get() {
-        if (Array.isArray(this.attribute.text)) return this.tryUpdateAABBBounds(), this.cache.layoutData;
+        if (this.isMultiLine) return this.tryUpdateAABBBounds(), this.cache.layoutData;
+      }
+    }, {
+      key: "isMultiLine",
+      get: function get() {
+        return Array.isArray(this.attribute.text) || "normal" === this.attribute.whiteSpace;
       }
     }, {
       key: "isValid",
@@ -11435,7 +11440,7 @@
   var matrixAllocate = new DefaultMatrixAllocate();
   var mat4Allocate = new DefaultMat4Allocate();
 
-  var __decorate$L = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$M = 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;
@@ -12102,7 +12107,7 @@
     }]);
     return DefaultGraphicService;
   }();
-  DefaultGraphicService = __decorate$L([injectable(), __param$x(0, inject(GraphicCreator$1)), __metadata$C("design:paramtypes", [Object])], DefaultGraphicService);
+  DefaultGraphicService = __decorate$M([injectable(), __param$x(0, inject(GraphicCreator$1)), __metadata$C("design:paramtypes", [Object])], DefaultGraphicService);
 
   var GraphicCreator = /*#__PURE__*/function () {
     function GraphicCreator() {
@@ -12387,7 +12392,7 @@
     }), canvasGradient.GetPattern(w + x, h + y, undefined);
   }
 
-  var __decorate$K = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$L = 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;
@@ -12458,7 +12463,7 @@
     }]);
     return DefaultBaseInteractiveRenderContribution;
   }();
-  DefaultBaseInteractiveRenderContribution = __decorate$K([injectable(), __param$w(0, inject(ContributionProvider)), __param$w(0, named(InteractiveSubRenderContribution)), __metadata$B("design:paramtypes", [Object])], DefaultBaseInteractiveRenderContribution);
+  DefaultBaseInteractiveRenderContribution = __decorate$L([injectable(), __param$w(0, inject(ContributionProvider)), __param$w(0, named(InteractiveSubRenderContribution)), __metadata$B("design:paramtypes", [Object])], DefaultBaseInteractiveRenderContribution);
   var DefaultBaseTextureRenderContribution = /*#__PURE__*/function () {
     function DefaultBaseTextureRenderContribution() {
       _classCallCheck(this, DefaultBaseTextureRenderContribution);
@@ -12902,6 +12907,13 @@
   }
   var defaultImageBackgroundRenderContribution = new DefaultImageBackgroundRenderContribution();
 
+  var __decorate$K = 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 === "undefined" ? "undefined" : _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;
+  };
   var DefaultRectRenderContribution = /*#__PURE__*/function () {
     function DefaultRectRenderContribution() {
       _classCallCheck(this, DefaultRectRenderContribution);
@@ -12986,6 +12998,7 @@
     }]);
     return SplitRectBeforeRenderContribution;
   }();
+  SplitRectBeforeRenderContribution = __decorate$K([injectable()], SplitRectBeforeRenderContribution);
   var SplitRectAfterRenderContribution = /*#__PURE__*/function () {
     function SplitRectAfterRenderContribution() {
       _classCallCheck(this, SplitRectAfterRenderContribution);
@@ -13014,9 +13027,8 @@
     }]);
     return SplitRectAfterRenderContribution;
   }();
+  SplitRectAfterRenderContribution = __decorate$K([injectable()], SplitRectAfterRenderContribution);
   var defaultRectRenderContribution = new DefaultRectRenderContribution();
-  var splitRectBeforeRenderContribution = new SplitRectBeforeRenderContribution();
-  var splitRectAfterRenderContribution = new SplitRectAfterRenderContribution();
   var defaultRectTextureRenderContribution = defaultBaseTextureRenderContribution;
   var defaultRectBackgroundRenderContribution = defaultBaseBackgroundRenderContribution;
 
@@ -14205,7 +14217,7 @@
     function DefaultCanvasRectRender(rectRenderContribitions) {
       var _this;
       _classCallCheck(this, DefaultCanvasRectRender);
-      _this = _super.call(this), _this.rectRenderContribitions = rectRenderContribitions, _this.type = "rect", _this.numberType = RECT_NUMBER_TYPE, _this.builtinContributions = [defaultRectRenderContribution, defaultRectBackgroundRenderContribution, defaultRectTextureRenderContribution, splitRectAfterRenderContribution, splitRectBeforeRenderContribution], _this.init(rectRenderContribitions);
+      _this = _super.call(this), _this.rectRenderContribitions = rectRenderContribitions, _this.type = "rect", _this.numberType = RECT_NUMBER_TYPE, _this.builtinContributions = [defaultRectRenderContribution, defaultRectBackgroundRenderContribution, defaultRectTextureRenderContribution], _this.init(rectRenderContribitions);
       return _this;
     }
     _createClass(DefaultCanvasRectRender, [{
@@ -14410,9 +14422,9 @@
         var _this2 = this;
         var _a, _b, _c;
         var textAttribute = getTheme(text, null == params ? void 0 : params.theme).text,
-          _text$attribute = text.attribute,
-          str = _text$attribute.text,
-          _text$attribute$under = _text$attribute.underline,
+          _text$attribute = text.attribute;
+          _text$attribute.text;
+          var _text$attribute$under = _text$attribute.underline,
           underline = _text$attribute$under === void 0 ? textAttribute.underline : _text$attribute$under,
           _text$attribute$lineT = _text$attribute.lineThrough,
           lineThrough = _text$attribute$lineT === void 0 ? textAttribute.lineThrough : _text$attribute$lineT,
@@ -14420,7 +14432,9 @@
           keepDirIn3d = _text$attribute$keepD === void 0 ? textAttribute.keepDirIn3d : _text$attribute$keepD,
           _text$attribute$direc = _text$attribute.direction,
           direction = _text$attribute$direc === void 0 ? textAttribute.direction : _text$attribute$direc,
-          _text$attribute$fontS = _text$attribute.fontSize,
+          _text$attribute$white = _text$attribute.whiteSpace;
+          _text$attribute$white === void 0 ? textAttribute.whiteSpace : _text$attribute$white;
+          var _text$attribute$fontS = _text$attribute.fontSize,
           fontSize = _text$attribute$fontS === void 0 ? textAttribute.fontSize : _text$attribute$fontS,
           _text$attribute$verti = _text$attribute.verticalMode,
           verticalMode = _text$attribute$verti === void 0 ? textAttribute.verticalMode : _text$attribute$verti,
@@ -14457,7 +14471,7 @@
           }
           doStroke && (strokeCb ? strokeCb(context, text.attribute, textAttribute) : sVisible && (context.setStrokeStyle(text, text.attribute, originX - x, originY - y, textAttribute), context.strokeText(t, _x, _y, z))), doFill && (fillCb ? fillCb(context, text.attribute, textAttribute) : fVisible && (context.setCommonStyle(text, text.attribute, originX - x, originY - y, textAttribute), context.fillText(t, _x, _y, z), _this2.drawUnderLine(underline, lineThrough, text, _x, _y, z, textAttribute, context))), direction && (context.highPerformanceRestore(), context.setTransformForCurrent());
         };
-        if (Array.isArray(str)) {
+        if (text.isMultiLine) {
           if (context.setTextStyleWithoutAlignBaseline(text.attribute, textAttribute, z), "horizontal" === direction) {
             var multilineLayout = text.multilineLayout;
             if (!multilineLayout) return void context.highPerformanceRestore();
@@ -15095,6 +15109,11 @@
       value: function register(plugin) {
         "onStartupFinished" === plugin.activeEvent ? this.onStartupFinishedPlugin.push(plugin) : "onRegister" === plugin.activeEvent && (this.onRegisterPlugin.push(plugin), plugin.activate(this));
       }
+    }, {
+      key: "unRegister",
+      value: function unRegister(plugin) {
+        "onStartupFinished" === plugin.activeEvent ? this.onStartupFinishedPlugin.splice(this.onStartupFinishedPlugin.indexOf(plugin), 1) : "onRegister" === plugin.activeEvent && this.onRegisterPlugin.splice(this.onStartupFinishedPlugin.indexOf(plugin), 1), plugin.deactivate(this);
+      }
     }, {
       key: "release",
       value: function release() {
@@ -16656,7 +16675,7 @@
 
   var loadRectModule = !1;
   var rectModule = new ContainerModule(function (bind) {
-    loadRectModule || (loadRectModule = !0, bind(DefaultCanvasRectRender).toSelf().inSingletonScope(), bind(RectRender).to(DefaultCanvasRectRender).inSingletonScope(), bind(GraphicRender).toService(RectRender), bind(RectRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, RectRenderContribution));
+    loadRectModule || (loadRectModule = !0, bind(DefaultCanvasRectRender).toSelf().inSingletonScope(), bind(RectRender).to(DefaultCanvasRectRender).inSingletonScope(), bind(GraphicRender).toService(RectRender), bind(SplitRectAfterRenderContribution).toSelf(), bind(SplitRectBeforeRenderContribution).toSelf(), bind(RectRenderContribution).toService(SplitRectAfterRenderContribution), bind(RectRenderContribution).toService(SplitRectBeforeRenderContribution), bind(RectRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, RectRenderContribution));
   });
 
   var loadLineModule = !1;
@@ -16947,277 +16966,6 @@
       }
   }
 
-  function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-    }
-    return t;
-  }
-  function __decorate$m(decorators, target, key, desc) {
-    var c = arguments.length,
-      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
-      d;
-    if ((typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (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;
-  }
-  function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) {
-      return value instanceof P ? value : new P(function (resolve) {
-        resolve(value);
-      });
-    }
-    return new (P || (P = Promise))(function (resolve, reject) {
-      function fulfilled(value) {
-        try {
-          step(generator.next(value));
-        } catch (e) {
-          reject(e);
-        }
-      }
-      function rejected(value) {
-        try {
-          step(generator["throw"](value));
-        } catch (e) {
-          reject(e);
-        }
-      }
-      function step(result) {
-        result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-      }
-      step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-  }
-  typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-  };
-
-  var ScrollBarPlugin_1;
-  let ScrollBarPlugin = ScrollBarPlugin_1 = class ScrollBarPlugin {
-      constructor() {
-          this.name = 'scrollbar';
-          this.activeEvent = 'onRegister';
-          this._uid = Generator.GenAutoIncrementId();
-          this.key = this.name + this._uid;
-          this.scroll = (e) => {
-              var _a;
-              const graphic = e.target;
-              const data = this.getScrollContainer(graphic);
-              const { g: scrollContainer } = data;
-              let { showH, showV } = data;
-              if (!scrollContainer || scrollContainer.count === 1) {
-                  return;
-              }
-              this.scrollContainerBounds = scrollContainer.AABBBounds.clone();
-              if (vutils.abs(e.deltaX) > vutils.abs(e.deltaY)) {
-                  showH = showH && true;
-                  showV = showV && false;
-              }
-              else {
-                  showH = showH && false;
-                  showV = showV && true;
-              }
-              scrollContainer.setAttributes({
-                  scrollX: showH ? (scrollContainer.attribute.scrollX || 0) + e.deltaX : scrollContainer.attribute.scrollX || 0,
-                  scrollY: showV ? (scrollContainer.attribute.scrollY || 0) + e.deltaY : scrollContainer.attribute.scrollY || 0
-              });
-              const childrenBounds = this.childrenBounds;
-              const scrollContainerBounds = this.scrollContainerBounds;
-              childrenBounds.clear();
-              scrollContainer.forEachChildren((c) => {
-                  childrenBounds.union(c.AABBBounds);
-              });
-              childrenBounds.transformWithMatrix(scrollContainer.transMatrix);
-              if (showH && scrollContainerBounds.x1 <= childrenBounds.x1 && scrollContainerBounds.x2 >= childrenBounds.x2) {
-                  showH = false;
-              }
-              if (showV && scrollContainerBounds.y1 <= childrenBounds.y1 && scrollContainerBounds.y2 >= childrenBounds.y2) {
-                  showV = false;
-              }
-              const m = scrollContainer.transMatrix;
-              scrollContainerBounds.translate(-m.e, -m.f);
-              childrenBounds.translate(-m.e, -m.f);
-              if (showH) {
-                  childrenBounds.x1 = vutils.min(childrenBounds.x1, scrollContainerBounds.x1);
-                  childrenBounds.x2 = vutils.max(childrenBounds.x2, scrollContainerBounds.x2);
-              }
-              if (showV) {
-                  childrenBounds.y1 = vutils.min(childrenBounds.y1, scrollContainerBounds.y1);
-                  childrenBounds.y2 = vutils.max(childrenBounds.y2, scrollContainerBounds.y2);
-              }
-              childrenBounds.translate(scrollContainer.attribute.scrollX, scrollContainer.attribute.scrollY);
-              const shadowRoot = (_a = scrollContainer.shadowRoot) !== null && _a !== void 0 ? _a : scrollContainer.attachShadow();
-              const container = shadowRoot.createOrUpdateChild('scroll-bar', {}, 'group');
-              const { h, v, deltaH, deltaV } = this.addOrUpdateScroll(showH, showV, container, scrollContainer);
-              scrollContainer.setAttributes({
-                  scrollX: h ? scrollContainer.attribute.scrollX || 0 : (scrollContainer.attribute.scrollX || 0) + deltaH,
-                  scrollY: v ? scrollContainer.attribute.scrollY || 0 : (scrollContainer.attribute.scrollY || 0) + deltaV
-              });
-          };
-      }
-      activate(context) {
-          this.pluginService = context;
-          const { stage } = this.pluginService;
-          this.childrenBounds = new vutils.AABBBounds();
-          stage.addEventListener('wheel', this.scroll);
-          this.params = ScrollBarPlugin_1.defaultParams;
-      }
-      addOrUpdateScroll(showH, showV, container, scrollContainer) {
-          const scrollbars = container.children;
-          let h = false;
-          let v = false;
-          let deltaH = 0;
-          let deltaV = 0;
-          if (showH) {
-              const hScrollbar = scrollbars.filter((g) => g.attribute.direction !== 'vertical')[0];
-              const d = this.addOrUpdateHScroll(this.scrollContainerBounds, container, hScrollbar);
-              h = d.valid;
-              deltaH = d.delta;
-              this.disappearScrollBar(hScrollbar, v);
-          }
-          if (showV) {
-              const vScrollbar = scrollbars.filter((g) => g.attribute.direction === 'vertical')[0];
-              const d = this.addOrUpdateVScroll(this.scrollContainerBounds, container, vScrollbar);
-              v = d.valid;
-              deltaV = d.delta;
-              this.disappearScrollBar(vScrollbar, v);
-          }
-          return {
-              h,
-              deltaH,
-              v,
-              deltaV
-          };
-      }
-      addOrUpdateHScroll(scrollContainerB, container, scrollBar) {
-          if (!scrollBar) {
-              scrollBar = new ScrollBar({
-                  direction: 'horizontal',
-                  x: 0,
-                  y: 0,
-                  width: scrollContainerB.width(),
-                  height: 12,
-                  padding: [2, 0],
-                  railStyle: {
-                      fill: 'rgba(0, 0, 0, .1)'
-                  },
-                  range: [0, 0.05]
-              });
-              container.add(scrollBar);
-          }
-          const b = scrollBar.AABBBounds;
-          const childrenBounds = this.childrenBounds;
-          const y = scrollContainerB.y2 - b.height();
-          const ratio = Math.min(b.width() / this.childrenBounds.width(), 1);
-          let start = ((scrollContainerB.x1 - childrenBounds.x1) / (childrenBounds.width() - scrollContainerB.width())) * (1 - ratio);
-          let valid = true;
-          let delta = 0;
-          if (start < 0) {
-              start = 0;
-              valid = false;
-              delta = scrollContainerB.x1 - childrenBounds.x1;
-          }
-          else if (start + ratio > 1) {
-              start = 1 - ratio;
-              valid = false;
-              delta = scrollContainerB.x1 - childrenBounds.x1 - (childrenBounds.width() - scrollContainerB.width());
-          }
-          scrollBar.setAttributes({
-              y,
-              visibleAll: true,
-              range: [start, start + ratio]
-          });
-          return {
-              valid,
-              delta
-          };
-      }
-      addOrUpdateVScroll(scrollContainerB, container, scrollBar) {
-          if (!scrollBar) {
-              scrollBar = new ScrollBar({
-                  direction: 'vertical',
-                  x: 0,
-                  y: 0,
-                  width: 12,
-                  height: scrollContainerB.height(),
-                  padding: [2, 0],
-                  railStyle: {
-                      fill: 'rgba(0, 0, 0, .1)'
-                  },
-                  range: [0, 0.05]
-              });
-              container.add(scrollBar);
-          }
-          const b = scrollBar.AABBBounds;
-          const x = scrollContainerB.x2 - b.width();
-          const childrenBounds = this.childrenBounds;
-          const ratio = Math.min(b.height() / childrenBounds.height(), 1);
-          let start = ((scrollContainerB.y1 - childrenBounds.y1) / (childrenBounds.height() - scrollContainerB.height())) * (1 - ratio);
-          let valid = true;
-          let delta = 0;
-          if (start < 0) {
-              start = 0;
-              valid = false;
-              delta = scrollContainerB.y1 - childrenBounds.y1;
-          }
-          else if (start + ratio > 1) {
-              start = 1 - ratio;
-              valid = false;
-              delta = scrollContainerB.y1 - childrenBounds.y1 - (childrenBounds.height() - scrollContainerB.height());
-          }
-          scrollBar.setAttributes({
-              x,
-              visibleAll: true,
-              range: [start, start + ratio]
-          });
-          return {
-              valid,
-              delta
-          };
-      }
-      disappearScrollBar(scrollBar, valid) {
-          var _a;
-          if (scrollBar._plugin_timeout) {
-              clearTimeout(scrollBar._plugin_timeout);
-          }
-          scrollBar._plugin_timeout = setTimeout(() => {
-              scrollBar.setAttribute('visibleAll', false);
-          }, (_a = this.params.timeout) !== null && _a !== void 0 ? _a : 0);
-      }
-      getScrollContainer(graphic) {
-          let g = graphic;
-          while (g) {
-              if (g.attribute.overflow && g.attribute.overflow !== 'hidden') {
-                  const overflow = g.attribute.overflow;
-                  let showH = false;
-                  let showV = false;
-                  if (overflow === 'scroll') {
-                      (showH = true), (showV = true);
-                  }
-                  else {
-                      showH = overflow === 'scroll-x';
-                      showV = !showH;
-                  }
-                  return { g: g, showH, showV };
-              }
-              g = g.parent;
-          }
-          return null;
-      }
-      deactivate(context) {
-          const { stage } = this.pluginService;
-          stage.removeEventListener('wheel', this.scroll);
-      }
-  };
-  ScrollBarPlugin.defaultParams = {
-      timeout: 500
-  };
-  ScrollBarPlugin = ScrollBarPlugin_1 = __decorate$m([
-      injectable()
-  ], ScrollBarPlugin);
-
   var MathPickerContribution = Symbol["for"]("MathPickerContribution");
   var MathArcPicker = Symbol["for"]("MathArcPicker");
   var MathAreaPicker = Symbol["for"]("MathAreaPicker");
@@ -17242,7 +16990,7 @@
   var CanvasRichTextPicker = Symbol["for"]("CanvasRichTextPicker");
   var CanvasPickerContribution = Symbol["for"]("CanvasPickerContribution");
 
-  var __decorate$l = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$m = 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;
@@ -17294,14 +17042,14 @@
     }]);
     return DefaultCanvasArcPicker;
   }();
-  DefaultCanvasArcPicker = __decorate$l([injectable(), __param$h(0, inject(ArcRender)), __metadata$h("design:paramtypes", [Object])], DefaultCanvasArcPicker);
+  DefaultCanvasArcPicker = __decorate$m([injectable(), __param$h(0, inject(ArcRender)), __metadata$h("design:paramtypes", [Object])], DefaultCanvasArcPicker);
 
   var loadArcPick$1 = !1;
   var arcCanvasPickModule = new ContainerModule(function (bind, unbind, isBound, rebind) {
     loadArcPick$1 || (loadArcPick$1 = !0, bind(CanvasArcPicker).to(DefaultCanvasArcPicker).inSingletonScope(), bind(CanvasPickerContribution).toService(CanvasArcPicker));
   });
 
-  var __decorate$k = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$l = 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;
@@ -17353,14 +17101,14 @@
     }]);
     return DefaultMathArcPicker;
   }();
-  DefaultMathArcPicker = __decorate$k([injectable(), __param$g(0, inject(ArcRender)), __metadata$g("design:paramtypes", [Object])], DefaultMathArcPicker);
+  DefaultMathArcPicker = __decorate$l([injectable(), __param$g(0, inject(ArcRender)), __metadata$g("design:paramtypes", [Object])], DefaultMathArcPicker);
 
   var loadArcPick = !1;
   var arcMathPickModule = new ContainerModule(function (bind, unbind, isBound, rebind) {
     loadArcPick || (loadArcPick = !0, bind(MathArcPicker).to(DefaultMathArcPicker).inSingletonScope(), bind(MathPickerContribution).toService(MathArcPicker));
   });
 
-  var __decorate$j = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$k = 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;
@@ -17431,14 +17179,14 @@
     }]);
     return DefaultCanvasRectPicker;
   }();
-  DefaultCanvasRectPicker = __decorate$j([injectable(), __param$f(0, inject(RectRender)), __metadata$f("design:paramtypes", [Object])], DefaultCanvasRectPicker);
+  DefaultCanvasRectPicker = __decorate$k([injectable(), __param$f(0, inject(RectRender)), __metadata$f("design:paramtypes", [Object])], DefaultCanvasRectPicker);
 
   var loadRectPick$1 = !1;
   var rectCanvasPickModule = new ContainerModule(function (bind, unbind, isBound, rebind) {
     loadRectPick$1 || (loadRectPick$1 = !0, bind(CanvasRectPicker).to(DefaultCanvasRectPicker).inSingletonScope(), bind(CanvasPickerContribution).toService(CanvasRectPicker));
   });
 
-  var __decorate$i = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$j = 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;
@@ -17509,14 +17257,14 @@
     }]);
     return DefaultMathRectPicker;
   }();
-  DefaultMathRectPicker = __decorate$i([injectable(), __param$e(0, inject(RectRender)), __metadata$e("design:paramtypes", [Object])], DefaultMathRectPicker);
+  DefaultMathRectPicker = __decorate$j([injectable(), __param$e(0, inject(RectRender)), __metadata$e("design:paramtypes", [Object])], DefaultMathRectPicker);
 
   var loadRectPick = !1;
   var rectMathPickModule = new ContainerModule(function (bind, unbind, isBound, rebind) {
     loadRectPick || (loadRectPick = !0, bind(MathRectPicker).to(DefaultMathRectPicker).inSingletonScope(), bind(MathPickerContribution).toService(MathRectPicker));
   });
 
-  var __decorate$h = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$i = 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;
@@ -17532,9 +17280,9 @@
     }
     return _createClass(BasePicker);
   }(BaseRender);
-  BasePicker = __decorate$h([injectable()], BasePicker);
+  BasePicker = __decorate$i([injectable()], BasePicker);
 
-  var __decorate$g = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$h = 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,14 +17341,14 @@
     }]);
     return DefaultCanvasLinePicker;
   }(BasePicker);
-  DefaultCanvasLinePicker = __decorate$g([injectable(), __param$d(0, inject(LineRender)), __metadata$d("design:paramtypes", [Object])], DefaultCanvasLinePicker);
+  DefaultCanvasLinePicker = __decorate$h([injectable(), __param$d(0, inject(LineRender)), __metadata$d("design:paramtypes", [Object])], DefaultCanvasLinePicker);
 
   var loadLinePick$1 = !1;
   var lineCanvasPickModule = new ContainerModule(function (bind, unbind, isBound, rebind) {
     loadLinePick$1 || (loadLinePick$1 = !0, bind(CanvasLinePicker).to(DefaultCanvasLinePicker).inSingletonScope(), bind(CanvasPickerContribution).toService(CanvasLinePicker));
   });
 
-  var __decorate$f = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$g = 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;
@@ -17651,14 +17399,14 @@
     }]);
     return DefaultMathLinePicker;
   }();
-  DefaultMathLinePicker = __decorate$f([injectable(), __param$c(0, inject(LineRender)), __metadata$c("design:paramtypes", [Object])], DefaultMathLinePicker);
+  DefaultMathLinePicker = __decorate$g([injectable(), __param$c(0, inject(LineRender)), __metadata$c("design:paramtypes", [Object])], DefaultMathLinePicker);
 
   var loadLinePick = !1;
   var lineMathPickModule = new ContainerModule(function (bind, unbind, isBound, rebind) {
     loadLinePick || (loadLinePick = !0, bind(MathLinePicker).to(DefaultMathLinePicker).inSingletonScope(), bind(MathPickerContribution).toService(MathLinePicker));
   });
 
-  var __decorate$e = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$f = 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;
@@ -17704,14 +17452,14 @@
     }]);
     return DefaultCanvasAreaPicker;
   }();
-  DefaultCanvasAreaPicker = __decorate$e([injectable(), __param$b(0, inject(AreaRender)), __metadata$b("design:paramtypes", [Object])], DefaultCanvasAreaPicker);
+  DefaultCanvasAreaPicker = __decorate$f([injectable(), __param$b(0, inject(AreaRender)), __metadata$b("design:paramtypes", [Object])], DefaultCanvasAreaPicker);
 
   var loadAreaPick$1 = !1;
   var areaCanvasPickModule = new ContainerModule(function (bind, unbind, isBound, rebind) {
     loadAreaPick$1 || (loadAreaPick$1 = !0, bind(CanvasAreaPicker).to(DefaultCanvasAreaPicker).inSingletonScope(), bind(CanvasPickerContribution).toService(CanvasAreaPicker));
   });
 
-  var __decorate$d = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$e = 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;
@@ -17757,14 +17505,14 @@
     }]);
     return DefaultMathAreaPicker;
   }();
-  DefaultMathAreaPicker = __decorate$d([injectable(), __param$a(0, inject(AreaRender)), __metadata$a("design:paramtypes", [Object])], DefaultMathAreaPicker);
+  DefaultMathAreaPicker = __decorate$e([injectable(), __param$a(0, inject(AreaRender)), __metadata$a("design:paramtypes", [Object])], DefaultMathAreaPicker);
 
   var loadAreaPick = !1;
   var areaMathPickModule = new ContainerModule(function (bind, unbind, isBound, rebind) {
     loadAreaPick || (loadAreaPick = !0, bind(MathAreaPicker).to(DefaultMathAreaPicker).inSingletonScope(), bind(MathPickerContribution).toService(MathAreaPicker));
   });
 
-  var __decorate$c = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$d = 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;
@@ -17826,14 +17574,14 @@
     }]);
     return DefaultCanvasSymbolPicker;
   }(BasePicker);
-  DefaultCanvasSymbolPicker = __decorate$c([injectable(), __param$9(0, inject(SymbolRender)), __metadata$9("design:paramtypes", [Object])], DefaultCanvasSymbolPicker);
+  DefaultCanvasSymbolPicker = __decorate$d([injectable(), __param$9(0, inject(SymbolRender)), __metadata$9("design:paramtypes", [Object])], DefaultCanvasSymbolPicker);
 
   var loadSymbolPick$1 = !1;
   var symbolCanvasPickModule = new ContainerModule(function (bind, unbind, isBound, rebind) {
     loadSymbolPick$1 || (loadSymbolPick$1 = !0, bind(CanvasSymbolPicker).to(DefaultCanvasSymbolPicker).inSingletonScope(), bind(CanvasPickerContribution).toService(CanvasSymbolPicker));
   });
 
-  var __decorate$b = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$c = 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;
@@ -17884,14 +17632,14 @@
     }]);
     return DefaultMathSymbolPicker;
   }();
-  DefaultMathSymbolPicker = __decorate$b([injectable(), __param$8(0, inject(SymbolRender)), __metadata$8("design:paramtypes", [Object])], DefaultMathSymbolPicker);
+  DefaultMathSymbolPicker = __decorate$c([injectable(), __param$8(0, inject(SymbolRender)), __metadata$8("design:paramtypes", [Object])], DefaultMathSymbolPicker);
 
   var loadSymbolPick = !1;
   var symbolMathPickModule = new ContainerModule(function (bind, unbind, isBound, rebind) {
     loadSymbolPick || (loadSymbolPick = !0, bind(MathSymbolPicker).to(DefaultMathSymbolPicker).inSingletonScope(), bind(MathPickerContribution).toService(MathSymbolPicker));
   });
 
-  var __decorate$a = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$b = 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;
@@ -17942,14 +17690,14 @@
     }]);
     return DefaultCanvasCirclePicker;
   }();
-  DefaultCanvasCirclePicker = __decorate$a([injectable(), __param$7(0, inject(CircleRender)), __metadata$7("design:paramtypes", [Object])], DefaultCanvasCirclePicker);
+  DefaultCanvasCirclePicker = __decorate$b([injectable(), __param$7(0, inject(CircleRender)), __metadata$7("design:paramtypes", [Object])], DefaultCanvasCirclePicker);
 
   var loadCirclePick$1 = !1;
   var circleCanvasPickModule = new ContainerModule(function (bind, unbind, isBound, rebind) {
     loadCirclePick$1 || (loadCirclePick$1 = !0, bind(CanvasCirclePicker).to(DefaultCanvasCirclePicker).inSingletonScope(), bind(CanvasPickerContribution).toService(CanvasCirclePicker));
   });
 
-  var __decorate$9 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$a = 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;
@@ -18000,14 +17748,14 @@
     }]);
     return DefaultMathCirclePicker;
   }();
-  DefaultMathCirclePicker = __decorate$9([injectable(), __param$6(0, inject(CircleRender)), __metadata$6("design:paramtypes", [Object])], DefaultMathCirclePicker);
+  DefaultMathCirclePicker = __decorate$a([injectable(), __param$6(0, inject(CircleRender)), __metadata$6("design:paramtypes", [Object])], DefaultMathCirclePicker);
 
   var loadCirclePick = !1;
   var circleMathPickModule = new ContainerModule(function (bind, unbind, isBound, rebind) {
     loadCirclePick || (loadCirclePick = !0, bind(MathCirclePicker).to(DefaultMathCirclePicker).inSingletonScope(), bind(MathPickerContribution).toService(MathCirclePicker));
   });
 
-  var __decorate$8 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$9 = 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;
@@ -18079,14 +17827,14 @@
     }]);
     return DefaultCanvasTextPicker;
   }(BasePicker);
-  DefaultCanvasTextPicker = __decorate$8([injectable(), __param$5(0, inject(TextRender)), __metadata$5("design:paramtypes", [Object])], DefaultCanvasTextPicker);
+  DefaultCanvasTextPicker = __decorate$9([injectable(), __param$5(0, inject(TextRender)), __metadata$5("design:paramtypes", [Object])], DefaultCanvasTextPicker);
 
   var loadTextPick$1 = !1;
   var textCanvasPickModule = new ContainerModule(function (bind, unbind, isBound, rebind) {
     loadTextPick$1 || (loadTextPick$1 = !0, bind(CanvasTextPicker).to(DefaultCanvasTextPicker).inSingletonScope(), bind(CanvasPickerContribution).toService(CanvasTextPicker));
   });
 
-  var __decorate$7 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$8 = 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;
@@ -18106,14 +17854,14 @@
     }]);
     return DefaultMathTextPicker;
   }();
-  DefaultMathTextPicker = __decorate$7([injectable()], DefaultMathTextPicker);
+  DefaultMathTextPicker = __decorate$8([injectable()], DefaultMathTextPicker);
 
   var loadTextPick = !1;
   var textMathPickModule = new ContainerModule(function (bind, unbind, isBound, rebind) {
     loadTextPick || (loadTextPick = !0, bind(MathTextPicker).to(DefaultMathTextPicker).inSingletonScope(), bind(MathPickerContribution).toService(MathTextPicker));
   });
 
-  var __decorate$6 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$7 = 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;
@@ -18172,14 +17920,14 @@
     }]);
     return DefaultCanvasPathPicker;
   }(BasePicker);
-  DefaultCanvasPathPicker = __decorate$6([injectable(), __param$4(0, inject(PathRender)), __metadata$4("design:paramtypes", [Object])], DefaultCanvasPathPicker);
+  DefaultCanvasPathPicker = __decorate$7([injectable(), __param$4(0, inject(PathRender)), __metadata$4("design:paramtypes", [Object])], DefaultCanvasPathPicker);
 
   var loadPathPick$1 = !1;
   var pathCanvasPickModule = new ContainerModule(function (bind, unbind, isBound, rebind) {
     loadPathPick$1 || (loadPathPick$1 = !0, bind(CanvasPathPicker).to(DefaultCanvasPathPicker).inSingletonScope(), bind(CanvasPickerContribution).toService(CanvasPathPicker));
   });
 
-  var __decorate$5 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$6 = 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;
@@ -18230,14 +17978,14 @@
     }]);
     return DefaultMathPathPicker;
   }();
-  DefaultMathPathPicker = __decorate$5([injectable(), __param$3(0, inject(PathRender)), __metadata$3("design:paramtypes", [Object])], DefaultMathPathPicker);
+  DefaultMathPathPicker = __decorate$6([injectable(), __param$3(0, inject(PathRender)), __metadata$3("design:paramtypes", [Object])], DefaultMathPathPicker);
 
   var loadPathPick = !1;
   var pathMathPickModule = new ContainerModule(function (bind, unbind, isBound, rebind) {
     loadPathPick || (loadPathPick = !0, bind(MathPathPicker).to(DefaultMathPathPicker).inSingletonScope(), bind(MathPickerContribution).toService(MathPathPicker));
   });
 
-  var __decorate$4 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$5 = 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;
@@ -18288,14 +18036,14 @@
     }]);
     return DefaultCanvasPolygonPicker;
   }();
-  DefaultCanvasPolygonPicker = __decorate$4([injectable(), __param$2(0, inject(PolygonRender)), __metadata$2("design:paramtypes", [Object])], DefaultCanvasPolygonPicker);
+  DefaultCanvasPolygonPicker = __decorate$5([injectable(), __param$2(0, inject(PolygonRender)), __metadata$2("design:paramtypes", [Object])], DefaultCanvasPolygonPicker);
 
   var loadPolygonPick$1 = !1;
   var polygonCanvasPickModule = new ContainerModule(function (bind, unbind, isBound, rebind) {
     loadPolygonPick$1 || (loadPolygonPick$1 = !0, bind(CanvasPolygonPicker).to(DefaultCanvasPolygonPicker).inSingletonScope(), bind(CanvasPickerContribution).toService(CanvasPolygonPicker));
   });
 
-  var __decorate$3 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$4 = 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;
@@ -18345,14 +18093,14 @@
     }]);
     return DefaultMathPolygonPicker;
   }();
-  DefaultMathPolygonPicker = __decorate$3([injectable(), __param$1(0, inject(PolygonRender)), __metadata$1("design:paramtypes", [Object])], DefaultMathPolygonPicker);
+  DefaultMathPolygonPicker = __decorate$4([injectable(), __param$1(0, inject(PolygonRender)), __metadata$1("design:paramtypes", [Object])], DefaultMathPolygonPicker);
 
   var loadPolygonPick = !1;
   var polygonMathPickModule = new ContainerModule(function (bind, unbind, isBound, rebind) {
     loadPolygonPick || (loadPolygonPick = !0, bind(MathPolygonPicker).to(DefaultMathPolygonPicker).inSingletonScope(), bind(MathPickerContribution).toService(MathPolygonPicker));
   });
 
-  var __decorate$2 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$3 = 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;
@@ -18380,14 +18128,14 @@
     }]);
     return DefaultCanvasRichTextPicker;
   }();
-  DefaultCanvasRichTextPicker = __decorate$2([injectable(), __param(0, inject(RichTextRender)), __metadata("design:paramtypes", [Object])], DefaultCanvasRichTextPicker);
+  DefaultCanvasRichTextPicker = __decorate$3([injectable(), __param(0, inject(RichTextRender)), __metadata("design:paramtypes", [Object])], DefaultCanvasRichTextPicker);
 
   var loadRichtextPick = !1;
   var richtextCanvasPickModule = new ContainerModule(function (bind, unbind, isBound, rebind) {
     loadRichtextPick || (loadRichtextPick = !0, bind(CanvasRichTextPicker).to(DefaultCanvasRichTextPicker).inSingletonScope(), bind(CanvasPickerContribution).toService(CanvasRichTextPicker));
   });
 
-  var __decorate$1 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$2 = 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;
@@ -18409,14 +18157,14 @@
     }]);
     return DefaultMathImagePicker;
   }();
-  DefaultMathImagePicker = __decorate$1([injectable()], DefaultMathImagePicker);
+  DefaultMathImagePicker = __decorate$2([injectable()], DefaultMathImagePicker);
 
   var loadRichTextPick = !1;
   var richTextMathPickModule = new ContainerModule(function (bind, unbind, isBound, rebind) {
     loadRichTextPick || (loadRichTextPick = !0, bind(MathImagePicker).to(DefaultMathImagePicker).inSingletonScope(), bind(DefaultMathImagePicker).toService(MathImagePicker));
   });
 
-  var __decorate = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+  var __decorate$1 = 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;
@@ -18438,7 +18186,7 @@
     }]);
     return DefaultCanvasImagePicker;
   }();
-  DefaultCanvasImagePicker = __decorate([injectable()], DefaultCanvasImagePicker);
+  DefaultCanvasImagePicker = __decorate$1([injectable()], DefaultCanvasImagePicker);
 
   var loadImagePick$1 = !1;
   var imageCanvasPickModule = new ContainerModule(function (bind, unbind, isBound, rebind) {
@@ -18517,12 +18265,6 @@
     loaded || (loaded = !0, registerWrapTextGraphic());
   }
 
-  new ContainerModule((bind, unbind, isBound, rebind) => {
-      if (!isBound(ScrollBarPlugin)) {
-          bind(ScrollBarPlugin).toSelf();
-          bind(AutoEnablePlugins).toService(ScrollBarPlugin);
-      }
-  });
   function loadScrollbarComponent() {
       registerGroup();
       registerRect();
@@ -18772,6 +18514,53 @@
       realTime: true
   };
 
+  function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+    }
+    return t;
+  }
+  function __decorate(decorators, target, key, desc) {
+    var c = arguments.length,
+      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+      d;
+    if ((typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (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;
+  }
+  function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) {
+      return value instanceof P ? value : new P(function (resolve) {
+        resolve(value);
+      });
+    }
+    return new (P || (P = Promise))(function (resolve, reject) {
+      function fulfilled(value) {
+        try {
+          step(generator.next(value));
+        } catch (e) {
+          reject(e);
+        }
+      }
+      function rejected(value) {
+        try {
+          step(generator["throw"](value));
+        } catch (e) {
+          reject(e);
+        }
+      }
+      function step(result) {
+        result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+      }
+      step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+  }
+  typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+  };
+
   function traverseGroup(group, cb) {
       group.forEachChildren(node => {
           const stopped = cb(node);
@@ -18808,13 +18597,12 @@
   }
 
   const defaultAlternativeColors = ['#ffffff', '#000000'];
-  const { Color } = vutils.ColorUtil;
   function labelSmartInvert(foregroundColorOrigin, backgroundColorOrogin, textType, contrastRatiosThreshold, alternativeColors, mode) {
       if (typeof foregroundColorOrigin !== 'string' || typeof backgroundColorOrogin !== 'string') {
           return foregroundColorOrigin;
       }
-      const foregroundColor = new Color(foregroundColorOrigin).toHex();
-      const backgroundColor = new Color(backgroundColorOrogin).toHex();
+      const foregroundColor = new vutils.Color(foregroundColorOrigin).toHex();
+      const backgroundColor = new vutils.Color(backgroundColorOrogin).toHex();
       if (!contrastAccessibilityChecker(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, mode)) {
           return improveContrastReverse(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors, mode);
       }
@@ -18843,8 +18631,8 @@
   }
   function contrastAccessibilityChecker(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, mode) {
       if (mode === 'lightness') {
-          const backgroundColorLightness = Color.getColorBrightness(new Color(backgroundColor));
-          const foregroundColorLightness = Color.getColorBrightness(new Color(foregroundColor));
+          const backgroundColorLightness = vutils.Color.getColorBrightness(new vutils.Color(backgroundColor));
+          const foregroundColorLightness = vutils.Color.getColorBrightness(new vutils.Color(foregroundColor));
           if (foregroundColorLightness < 0.5) {
               if (backgroundColorLightness >= 0.5) {
                   return true;
@@ -18882,7 +18670,7 @@
       return contrastRatios;
   }
   function getColorLuminance(color) {
-      const rgb8bit = vutils.ColorUtil.hexToRgb(color);
+      const rgb8bit = vutils.hexToRgb(color);
       const RsRGB = rgb8bit[0] / 255;
       const GsRGB = rgb8bit[1] / 255;
       const BsRGB = rgb8bit[2] / 255;
@@ -19190,189 +18978,11 @@
       poptip: vutils.merge({}, DEFAULT_THEME)
   };
 
-  function wrapPoptip(target, source) {
-      vutils.merge(target, theme.poptip, source);
-      return target;
-  }
-  let PopTipRenderContribution = class PopTipRenderContribution {
-      render(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, options) {
-          var _a;
-          if (graphic._showPoptip === 1) {
-              const { visible, visibleCb } = graphic.attribute.poptip || {};
-              if (visible === false || (visibleCb && visibleCb(graphic) === false)) {
-                  return;
-              }
-              const attribute = {};
-              vutils.merge(attribute, PopTip.defaultAttributes, graphic.attribute.poptip ? graphic.attribute.poptip : {});
-              if (!this.poptipComponent) {
-                  this.poptipComponent = new PopTip(attribute);
-              }
-              else {
-                  this.poptipComponent.initAttributes(attribute);
-              }
-              let poptip = graphic.attribute.poptip || {};
-              if (graphic.type === 'text' && poptip.title == null && poptip.content == null) {
-                  const out = {};
-                  wrapPoptip(out, poptip);
-                  poptip = out;
-                  poptip.content = (_a = poptip.content) !== null && _a !== void 0 ? _a : graphic.attribute.text;
-              }
-              const matrix = graphic.globalTransMatrix;
-              this.poptipComponent.setAttributes(Object.assign(Object.assign({ visibleAll: true, pickable: false, childrenPickable: false }, poptip), { x: matrix.e, y: matrix.f }));
-              drawContext.stage.tryInitInteractiveLayer();
-              const interactiveLayer = drawContext.stage.getLayer('_builtin_interactive');
-              if (interactiveLayer) {
-                  interactiveLayer.add(this.poptipComponent);
-              }
-          }
-          else if (graphic._showPoptip === 2) {
-              graphic._showPoptip = 0;
-              this.poptipComponent &&
-                  this.poptipComponent.setAttributes({
-                      visibleAll: false
-                  });
-          }
-      }
-  };
-  PopTipRenderContribution = __decorate$m([
-      injectable()
-  ], PopTipRenderContribution);
-
-  let PopTipPlugin = class PopTipPlugin {
-      constructor() {
-          this.name = 'poptip';
-          this.activeEvent = 'onRegister';
-          this._uid = Generator.GenAutoIncrementId();
-          this.key = this.name + this._uid;
-          this.poptip = (e) => {
-              const graphic = e.target;
-              if (graphic.isContainer || !graphic.attribute) {
-                  this.unpoptip(e);
-                  return;
-              }
-              if (graphic === this.activeGraphic) {
-                  return;
-              }
-              const { poptip } = graphic.attribute;
-              if (poptip) {
-                  graphic.setAttributes({});
-                  graphic._showPoptip = 1;
-              }
-              if (this.activeGraphic) {
-                  this.activeGraphic.setAttributes({});
-                  this.activeGraphic._showPoptip = 2;
-              }
-              this.setActiveGraphic(graphic, true);
-          };
-          this.unpoptip = (e) => {
-              if (!this.activeGraphic) {
-                  return;
-              }
-              this.activeGraphic.setAttributes({});
-              this.activeGraphic._showPoptip = 2;
-              this.setActiveGraphic(null, true);
-          };
-      }
-      activate(context) {
-          this.pluginService = context;
-          const { stage } = this.pluginService;
-          stage.addEventListener('pointerover', this.poptip);
-      }
-      setActiveGraphic(graphic, rerender) {
-          this.activeGraphic = graphic;
-          this.pluginService.stage.renderNextFrame();
-      }
-      deactivate(context) {
-          const { stage } = this.pluginService;
-          stage.removeEventListener('pointerover', this.poptip);
-      }
-  };
-  PopTipPlugin = __decorate$m([
-      injectable()
-  ], PopTipPlugin);
-  let PopTipForClipedTextPlugin = class PopTipForClipedTextPlugin {
-      constructor() {
-          this.name = 'poptipForText';
-          this.activeEvent = 'onRegister';
-          this._uid = Generator.GenAutoIncrementId();
-          this.key = this.name + this._uid;
-          this.pointerlave = (e) => {
-              const { stage } = this.pluginService;
-              if (e.target === stage) {
-                  this.unpoptip(e);
-              }
-          };
-          this.poptip = (e) => {
-              const graphic = e.target;
-              if (graphic.type !== 'text' || !graphic.cliped || graphic.isContainer || !graphic.attribute) {
-                  this.unpoptip(e);
-                  return;
-              }
-              if (graphic === this.activeGraphic) {
-                  return;
-              }
-              const { poptip = {} } = graphic.attribute;
-              if (poptip) {
-                  graphic.setAttributes({});
-                  graphic._showPoptip = 1;
-              }
-              if (this.activeGraphic) {
-                  this.activeGraphic.setAttributes({});
-                  this.activeGraphic._showPoptip = 2;
-              }
-              this.setActiveGraphic(graphic, true);
-          };
-          this.unpoptip = (e) => {
-              if (!this.activeGraphic) {
-                  return;
-              }
-              this.activeGraphic.setAttributes({});
-              this.activeGraphic._showPoptip = 2;
-              this.setActiveGraphic(null, true);
-          };
-      }
-      activate(context) {
-          this.pluginService = context;
-          const { stage } = this.pluginService;
-          stage.addEventListener('pointerover', this.poptip);
-          stage.addEventListener('pointerleave', this.pointerlave);
-      }
-      setActiveGraphic(graphic, rerender) {
-          this.activeGraphic = graphic;
-          this.pluginService.stage.renderNextFrame();
-      }
-      deactivate(context) {
-          const { stage } = this.pluginService;
-          stage.removeEventListener('pointerover', this.poptip);
-          stage.removeEventListener('pointerleave', this.pointerlave);
-      }
-  };
-  PopTipForClipedTextPlugin = __decorate$m([
-      injectable()
-  ], PopTipForClipedTextPlugin);
-
-  const popTipModule = new ContainerModule((bind, unbind, isBound, rebind) => {
-      if (!isBound(PopTipRenderContribution)) {
-          bind(PopTipRenderContribution).toSelf().inSingletonScope();
-          bind(InteractiveSubRenderContribution).toService(PopTipRenderContribution);
-      }
-      if (!isBound(PopTipPlugin)) {
-          bind(PopTipPlugin).toSelf();
-          bind(AutoEnablePlugins).toService(PopTipPlugin);
-      }
-      if (!isBound(PopTipForClipedTextPlugin)) {
-          bind(PopTipForClipedTextPlugin).toSelf();
-          bind(AutoEnablePlugins).toService(PopTipForClipedTextPlugin);
-      }
-  });
-  function loadPoptip() {
-      container.load(popTipModule);
-  }
-  function loadPoptipComponent() {
-      registerGroup();
-      registerWrapText();
-      registerSymbol();
-      registerRect();
+  function loadPoptipComponent() {
+      registerGroup();
+      registerWrapText();
+      registerSymbol();
+      registerRect();
   }
   function setPoptipTheme(defaultPoptipTheme) {
       vutils.merge(theme.poptip, DEFAULT_THEME, defaultPoptipTheme);
@@ -19565,6 +19175,189 @@
       padding: 10
   };
 
+  function wrapPoptip(target, source) {
+      vutils.merge(target, theme.poptip, source);
+      return target;
+  }
+  let PopTipRenderContribution = class PopTipRenderContribution {
+      render(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, options) {
+          var _a;
+          if (graphic._showPoptip === 1) {
+              const { visible, visibleCb } = graphic.attribute.poptip || {};
+              if (visible === false || (visibleCb && visibleCb(graphic) === false)) {
+                  return;
+              }
+              const attribute = {};
+              vutils.merge(attribute, PopTip.defaultAttributes, graphic.attribute.poptip ? graphic.attribute.poptip : {});
+              if (!this.poptipComponent) {
+                  this.poptipComponent = new PopTip(attribute);
+              }
+              else {
+                  this.poptipComponent.initAttributes(attribute);
+              }
+              let poptip = graphic.attribute.poptip || {};
+              if (graphic.type === 'text' && poptip.title == null && poptip.content == null) {
+                  const out = {};
+                  wrapPoptip(out, poptip);
+                  poptip = out;
+                  poptip.content = (_a = poptip.content) !== null && _a !== void 0 ? _a : graphic.attribute.text;
+              }
+              const matrix = graphic.globalTransMatrix;
+              this.poptipComponent.setAttributes(Object.assign(Object.assign({ visibleAll: true, pickable: false, childrenPickable: false }, poptip), { x: matrix.e, y: matrix.f }));
+              drawContext.stage.tryInitInteractiveLayer();
+              const interactiveLayer = drawContext.stage.getLayer('_builtin_interactive');
+              if (interactiveLayer) {
+                  interactiveLayer.add(this.poptipComponent);
+              }
+          }
+          else if (graphic._showPoptip === 2) {
+              graphic._showPoptip = 0;
+              this.poptipComponent &&
+                  this.poptipComponent.setAttributes({
+                      visibleAll: false
+                  });
+          }
+      }
+  };
+  PopTipRenderContribution = __decorate([
+      injectable()
+  ], PopTipRenderContribution);
+
+  let PopTipPlugin = class PopTipPlugin {
+      constructor() {
+          this.name = 'poptip';
+          this.activeEvent = 'onRegister';
+          this._uid = Generator.GenAutoIncrementId();
+          this.key = this.name + this._uid;
+          this.poptip = (e) => {
+              const graphic = e.target;
+              if (graphic.isContainer || !graphic.attribute) {
+                  this.unpoptip(e);
+                  return;
+              }
+              if (graphic === this.activeGraphic) {
+                  return;
+              }
+              const { poptip } = graphic.attribute;
+              if (poptip) {
+                  graphic.setAttributes({});
+                  graphic._showPoptip = 1;
+              }
+              if (this.activeGraphic) {
+                  this.activeGraphic.setAttributes({});
+                  this.activeGraphic._showPoptip = 2;
+              }
+              this.setActiveGraphic(graphic, true);
+          };
+          this.unpoptip = (e) => {
+              if (!this.activeGraphic) {
+                  return;
+              }
+              this.activeGraphic.setAttributes({});
+              this.activeGraphic._showPoptip = 2;
+              this.setActiveGraphic(null, true);
+          };
+      }
+      activate(context) {
+          this.pluginService = context;
+          const { stage } = this.pluginService;
+          stage.addEventListener('pointerover', this.poptip);
+      }
+      setActiveGraphic(graphic, rerender) {
+          this.activeGraphic = graphic;
+          this.pluginService.stage.renderNextFrame();
+      }
+      deactivate(context) {
+          const { stage } = this.pluginService;
+          stage.removeEventListener('pointerover', this.poptip);
+      }
+  };
+  PopTipPlugin = __decorate([
+      injectable()
+  ], PopTipPlugin);
+  let PopTipForClipedTextPlugin = class PopTipForClipedTextPlugin {
+      constructor() {
+          this.name = 'poptipForText';
+          this.activeEvent = 'onRegister';
+          this._uid = Generator.GenAutoIncrementId();
+          this.key = this.name + this._uid;
+          this.pointerlave = (e) => {
+              const { stage } = this.pluginService;
+              if (e.target === stage) {
+                  this.unpoptip(e);
+              }
+          };
+          this.poptip = (e) => {
+              const graphic = e.target;
+              if (graphic.type !== 'text' ||
+                  !graphic.cliped ||
+                  graphic.isContainer ||
+                  !graphic.attribute ||
+                  graphic.attribute.disableAutoClipedPoptip) {
+                  this.unpoptip(e);
+                  return;
+              }
+              if (graphic === this.activeGraphic) {
+                  return;
+              }
+              const { poptip = {} } = graphic.attribute;
+              if (poptip) {
+                  graphic.setAttributes({});
+                  graphic._showPoptip = 1;
+              }
+              if (this.activeGraphic) {
+                  this.activeGraphic.setAttributes({});
+                  this.activeGraphic._showPoptip = 2;
+              }
+              this.setActiveGraphic(graphic, true);
+          };
+          this.unpoptip = (e) => {
+              if (!this.activeGraphic) {
+                  return;
+              }
+              this.activeGraphic.setAttributes({});
+              this.activeGraphic._showPoptip = 2;
+              this.setActiveGraphic(null, true);
+          };
+      }
+      activate(context) {
+          this.pluginService = context;
+          const { stage } = this.pluginService;
+          stage.addEventListener('pointerover', this.poptip);
+          stage.addEventListener('pointerleave', this.pointerlave);
+      }
+      setActiveGraphic(graphic, rerender) {
+          this.activeGraphic = graphic;
+          this.pluginService.stage.renderNextFrame();
+      }
+      deactivate(context) {
+          const { stage } = this.pluginService;
+          stage.removeEventListener('pointerover', this.poptip);
+          stage.removeEventListener('pointerleave', this.pointerlave);
+      }
+  };
+  PopTipForClipedTextPlugin = __decorate([
+      injectable()
+  ], PopTipForClipedTextPlugin);
+
+  const popTipModule = new ContainerModule((bind, unbind, isBound, rebind) => {
+      if (!isBound(PopTipRenderContribution)) {
+          bind(PopTipRenderContribution).toSelf().inSingletonScope();
+          bind(InteractiveSubRenderContribution).toService(PopTipRenderContribution);
+      }
+      if (!isBound(PopTipPlugin)) {
+          bind(PopTipPlugin).toSelf();
+          bind(AutoEnablePlugins).toService(PopTipPlugin);
+      }
+      if (!isBound(PopTipForClipedTextPlugin)) {
+          bind(PopTipForClipedTextPlugin).toSelf();
+          bind(AutoEnablePlugins).toService(PopTipForClipedTextPlugin);
+      }
+  });
+  function loadPoptip() {
+      container.load(popTipModule);
+  }
+
   class CrosshairBase extends AbstractComponent {
       constructor() {
           super(...arguments);
@@ -20728,12 +20521,13 @@
                           this.add(labelLine);
                       }
                       this._syncStateWithRelatedGraphic(relatedGraphic);
-                      relatedGraphic.once('animate-bind', a => {
-                          text.setAttributes(from);
-                          labelLine && labelLine.setAttributes(from);
-                          const listener = this._afterRelatedGraphicAttributeUpdate(text, texts, labelLine, labelLines, index, relatedGraphic, to, this._animationConfig.enter);
-                          relatedGraphic.on('afterAttributeUpdate', listener);
-                      });
+                      this._animationConfig.enter.duration > 0 &&
+                          relatedGraphic.once('animate-bind', a => {
+                              text.setAttributes(from);
+                              labelLine && labelLine.setAttributes(from);
+                              const listener = this._afterRelatedGraphicAttributeUpdate(text, texts, labelLine, labelLines, index, relatedGraphic, to, this._animationConfig.enter);
+                              relatedGraphic.on('afterAttributeUpdate', listener);
+                          });
                   }
               }
               else if (state === 'update') {
@@ -29926,7 +29720,7 @@
       }
   };
 
-  const version = "0.17.5-alpha.1";
+  const version = "0.17.6";
 
   exports.AbstractComponent = AbstractComponent;
   exports.ArcInfo = ArcInfo;