@visactor/vtable-gantt 1.20.3 → 1.21.0

package/dist/vtable-gantt.js

@@ -49,7 +49,8 @@
         CLICK_MARKLINE_CREATE: 'click_markline_create',
         CLICK_MARKLINE_CONTENT: 'click_markline_content',
         MOVE_END_TASK_BAR: 'move_end_task_bar',
-        PROGRESS_UPDATE: 'progress_update'
+        PROGRESS_UPDATE: 'progress_update',
+        ZOOM: 'zoom'
     };
 
     var index$4 = /*#__PURE__*/Object.freeze({
@@ -717,17 +718,17 @@
       }
     }
 
-    var __decorate$18 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$1a = 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$O = undefined && undefined.__metadata || function (k, v) {
+      __metadata$Q = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
-      __param$B = undefined && undefined.__param || function (paramIndex, decorator) {
+      __param$D = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
           decorator(target, key, paramIndex);
         };
@@ -936,7 +937,7 @@
         return this._env || this.setEnv("browser"), this.envContribution.copyToClipBoard(text);
       }
     };
-    DefaultGlobal = __decorate$18([injectable(), __param$B(0, inject(ContributionProvider)), __param$B(0, named(EnvContribution)), __metadata$O("design:paramtypes", [Object])], DefaultGlobal);
+    DefaultGlobal = __decorate$1a([injectable(), __param$D(0, inject(ContributionProvider)), __param$D(0, named(EnvContribution)), __metadata$Q("design:paramtypes", [Object])], DefaultGlobal);
 
     var MeasureModeEnum;
     !function (MeasureModeEnum) {
@@ -5204,7 +5205,7 @@
       return result.width += space, result;
     }
 
-    var __decorate$17 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$19 = 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;
@@ -5597,9 +5598,9 @@
         return data.str = data.result, data.width += suffixWidth, data;
       }
     };
-    ATextMeasure = __decorate$17([injectable()], ATextMeasure);
+    ATextMeasure = __decorate$19([injectable()], ATextMeasure);
 
-    var __decorate$16 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$18 = 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;
@@ -5612,7 +5613,7 @@
         super(...arguments), this.id = "DefaultTextMeasureContribution";
       }
     };
-    DefaultTextMeasureContribution = __decorate$16([injectable()], DefaultTextMeasureContribution);
+    DefaultTextMeasureContribution = __decorate$18([injectable()], DefaultTextMeasureContribution);
 
     const CanvasFactory = Symbol.for("CanvasFactory");
     const Context2dFactory = Symbol.for("Context2dFactory");
@@ -6021,14 +6022,14 @@
     }
     const canvasAllocate = new DefaultCanvasAllocate();
 
-    var __decorate$15 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$17 = 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$N = undefined && undefined.__metadata || function (k, v) {
+      __metadata$P = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       };
     const VWindow = Symbol.for("VWindow");
@@ -6165,19 +6166,19 @@
         return this._handler.getTopLeft(baseWindow);
       }
     };
-    DefaultWindow = __decorate$15([injectable(), __metadata$N("design:paramtypes", [])], DefaultWindow);
+    DefaultWindow = __decorate$17([injectable(), __metadata$P("design:paramtypes", [])], DefaultWindow);
 
-    var __decorate$14 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$16 = 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$M = undefined && undefined.__metadata || function (k, v) {
+      __metadata$O = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
-      __param$A = undefined && undefined.__param || function (paramIndex, decorator) {
+      __param$C = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
           decorator(target, key, paramIndex);
         };
@@ -6275,7 +6276,7 @@
         return c.nativeCanvas ? c.nativeCanvas : null;
       }
     };
-    DefaultGraphicUtil = __decorate$14([injectable(), __param$A(0, inject(ContributionProvider)), __param$A(0, named(TextMeasureContribution)), __metadata$M("design:paramtypes", [Object])], DefaultGraphicUtil);
+    DefaultGraphicUtil = __decorate$16([injectable(), __param$C(0, inject(ContributionProvider)), __param$C(0, named(TextMeasureContribution)), __metadata$O("design:paramtypes", [Object])], DefaultGraphicUtil);
     var TransformMode;
     !function (TransformMode) {
       TransformMode[TransformMode.transform = 0] = "transform", TransformMode[TransformMode.matrix = 1] = "matrix";
@@ -6333,7 +6334,7 @@
         return this;
       }
     };
-    DefaultTransformUtil = __decorate$14([injectable(), __metadata$M("design:paramtypes", [])], DefaultTransformUtil);
+    DefaultTransformUtil = __decorate$16([injectable(), __metadata$O("design:paramtypes", [])], DefaultTransformUtil);
 
     const defaultThemeObj = {
         arc: DefaultArcAttribute,
@@ -8580,14 +8581,14 @@
     const matrixAllocate = new DefaultMatrixAllocate();
     const mat4Allocate = new DefaultMat4Allocate();
 
-    var __decorate$13 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$15 = 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$L = undefined && undefined.__metadata || function (k, v) {
+      __metadata$N = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       };
     const initMatrix = new Matrix(1, 0, 0, 1, 0, 0),
@@ -8781,7 +8782,7 @@
         this.stack.forEach(m => matrixAllocate.free(m)), this.stack.length = 0;
       }
     };
-    EmptyContext2d = __decorate$13([injectable(), __metadata$L("design:paramtypes", [Object, Number])], EmptyContext2d);
+    EmptyContext2d = __decorate$15([injectable(), __metadata$N("design:paramtypes", [Object, Number])], EmptyContext2d);
 
     const DefaultConfig$1 = {
       WIDTH: 500,
@@ -10126,14 +10127,14 @@
     const VirtualLayerHandlerContribution = Symbol.for("VirtualLayerHandlerContribution");
 
     var DefaultLayerService_1,
-      __decorate$12 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+      __decorate$14 = 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$K = undefined && undefined.__metadata || function (k, v) {
+      __metadata$M = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       };
     let DefaultLayerService = DefaultLayerService_1 = class {
@@ -10196,7 +10197,7 @@
         this.layerMap.delete(stage);
       }
     };
-    DefaultLayerService.idprefix = "visactor_layer", DefaultLayerService.prefix_count = 0, DefaultLayerService = DefaultLayerService_1 = __decorate$12([injectable(), __metadata$K("design:paramtypes", [])], DefaultLayerService);
+    DefaultLayerService.idprefix = "visactor_layer", DefaultLayerService.prefix_count = 0, DefaultLayerService = DefaultLayerService_1 = __decorate$14([injectable(), __metadata$M("design:paramtypes", [])], DefaultLayerService);
 
     var coreModule = new ContainerModule(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();
@@ -10403,17 +10404,17 @@
       return "middle" === baseline ? -lineHeight / 2 : "top" === baseline ? 0 : "bottom" === baseline ? buf - lineHeight : baseline && "alphabetic" !== baseline ? 0 : (fontSize || (fontSize = lineHeight), -(lineHeight - fontSize) / 2 - .79 * fontSize);
     }
 
-    var __decorate$11 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$13 = 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$J = undefined && undefined.__metadata || function (k, v) {
+      __metadata$L = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
-      __param$z = undefined && undefined.__param || function (paramIndex, decorator) {
+      __param$B = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
           decorator(target, key, paramIndex);
         };
@@ -10593,7 +10594,7 @@
         };
       }
     };
-    DefaultGraphicService = __decorate$11([injectable(), __param$z(0, inject(GraphicCreator$1)), __metadata$J("design:paramtypes", [Object])], DefaultGraphicService);
+    DefaultGraphicService = __decorate$13([injectable(), __param$B(0, inject(GraphicCreator$1)), __metadata$L("design:paramtypes", [Object])], DefaultGraphicService);
 
     const updateBoundsOfCommonOuterBorder = (attribute, theme, aabbBounds) => {
       const {
@@ -12718,6 +12719,9 @@
       segments: 1,
       curveType: 1
     }, NOWORK_ANIMATE_ATTR);
+    function createArea(attributes) {
+      return new Area(attributes);
+    }
 
     const ARC_UPDATE_TAG_KEY = ["innerRadius", "outerRadius", "startAngle", "endAngle", "cornerRadius", "padAngle", "padRadius", "cap", ...GRAPHIC_UPDATE_TAG_KEY];
     let Arc$1 = class Arc extends Graphic {
@@ -13051,17 +13055,17 @@
       return text || (text = graphicCreator.CreateGraphic("text", {})), text.initAttributes(params), text.AABBBounds;
     }
 
-    var __decorate$10 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$12 = 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$I = undefined && undefined.__metadata || function (k, v) {
+      __metadata$K = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
-      __param$y = undefined && undefined.__param || function (paramIndex, decorator) {
+      __param$A = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
           decorator(target, key, paramIndex);
         };
@@ -13166,7 +13170,7 @@
         });
       }
     };
-    DefaultBaseInteractiveRenderContribution = __decorate$10([injectable(), __param$y(0, inject(ContributionProvider)), __param$y(0, named(InteractiveSubRenderContribution)), __metadata$I("design:paramtypes", [Object])], DefaultBaseInteractiveRenderContribution);
+    DefaultBaseInteractiveRenderContribution = __decorate$12([injectable(), __param$A(0, inject(ContributionProvider)), __param$A(0, named(InteractiveSubRenderContribution)), __metadata$K("design:paramtypes", [Object])], DefaultBaseInteractiveRenderContribution);
     class DefaultBaseClipRenderBeforeContribution {
       constructor() {
         this.time = BaseRenderContributionTime.beforeFillStroke, this.useStyle = !0, this.order = 0;
@@ -13596,7 +13600,7 @@
       return !edgeCb && path.closePath(), path;
     }
 
-    var __decorate$$ = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$11 = 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;
@@ -13661,7 +13665,7 @@
         Array.isArray(stroke) && stroke.some(s => !1 === s) && (doFillOrStroke.doStroke = !1);
       }
     };
-    SplitRectBeforeRenderContribution$1 = __decorate$$([injectable()], SplitRectBeforeRenderContribution$1);
+    SplitRectBeforeRenderContribution$1 = __decorate$11([injectable()], SplitRectBeforeRenderContribution$1);
     let SplitRectAfterRenderContribution$1 = class SplitRectAfterRenderContribution {
       constructor() {
         this.time = BaseRenderContributionTime.afterFillStroke, this.useStyle = !0, this.order = 0;
@@ -13698,7 +13702,7 @@
         }
       }
     };
-    SplitRectAfterRenderContribution$1 = __decorate$$([injectable()], SplitRectAfterRenderContribution$1);
+    SplitRectAfterRenderContribution$1 = __decorate$11([injectable()], SplitRectAfterRenderContribution$1);
     const defaultRectRenderContribution = new DefaultRectRenderContribution();
     const defaultRectTextureRenderContribution = defaultBaseTextureRenderContribution;
     const defaultRectBackgroundRenderContribution = defaultBaseBackgroundRenderContribution;
@@ -13968,17 +13972,17 @@
       }
     }
 
-    var __decorate$_ = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$10 = 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$H = undefined && undefined.__metadata || function (k, v) {
+      __metadata$J = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
-      __param$x = undefined && undefined.__param || function (paramIndex, decorator) {
+      __param$z = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
           decorator(target, key, paramIndex);
         };
@@ -14138,19 +14142,19 @@
         this._draw(arc, arcAttribute, !1, drawContext, params, arcAttribute);
       }
     };
-    DefaultCanvasArcRender = __decorate$_([injectable(), __param$x(0, inject(ContributionProvider)), __param$x(0, named(ArcRenderContribution)), __metadata$H("design:paramtypes", [Object])], DefaultCanvasArcRender);
+    DefaultCanvasArcRender = __decorate$10([injectable(), __param$z(0, inject(ContributionProvider)), __param$z(0, named(ArcRenderContribution)), __metadata$J("design:paramtypes", [Object])], DefaultCanvasArcRender);
 
-    var __decorate$Z = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$$ = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
         if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
         return c > 3 && r && Object.defineProperty(target, key, r), r;
       },
-      __metadata$G = undefined && undefined.__metadata || function (k, v) {
+      __metadata$I = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
-      __param$w = undefined && undefined.__param || function (paramIndex, decorator) {
+      __param$y = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
           decorator(target, key, paramIndex);
         };
@@ -14191,7 +14195,7 @@
         this._draw(circle, circleAttribute, !1, drawContext, params);
       }
     };
-    DefaultCanvasCircleRender = __decorate$Z([injectable(), __param$w(0, inject(ContributionProvider)), __param$w(0, named(CircleRenderContribution)), __metadata$G("design:paramtypes", [Object])], DefaultCanvasCircleRender);
+    DefaultCanvasCircleRender = __decorate$$([injectable(), __param$y(0, inject(ContributionProvider)), __param$y(0, named(CircleRenderContribution)), __metadata$I("design:paramtypes", [Object])], DefaultCanvasCircleRender);
 
     function drawSegItem(ctx, curve, endPercent, params) {
       if (!curve.p1) return;
@@ -14315,7 +14319,7 @@
       });
     }
 
-    var __decorate$Y = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$_ = 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;
@@ -14460,7 +14464,7 @@
         } else this.drawSegmentItem(context, line.cache, !!fill, !!stroke, fillOpacity, strokeOpacity, line.attribute, lineAttribute, clipRange, clipRangeByDimension, x, y, line, fillCb, strokeCb);
       }
     };
-    DefaultCanvasLineRender = __decorate$Y([injectable()], DefaultCanvasLineRender);
+    DefaultCanvasLineRender = __decorate$_([injectable()], DefaultCanvasLineRender);
 
     function drawAreaSegments(path, segPath, percent, params) {
       var _a;
@@ -14527,17 +14531,17 @@
     const defaultAreaTextureRenderContribution = new DefaultAreaTextureRenderContribution();
     const defaultAreaBackgroundRenderContribution = defaultBaseBackgroundRenderContribution;
 
-    var __decorate$X = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$Z = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
         if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
         return c > 3 && r && Object.defineProperty(target, key, r), r;
       },
-      __metadata$F = undefined && undefined.__metadata || function (k, v) {
+      __metadata$H = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
-      __param$v = undefined && undefined.__param || function (paramIndex, decorator) {
+      __param$x = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
           decorator(target, key, paramIndex);
         };
@@ -14766,22 +14770,22 @@
         })(), !1;
       }
     };
-    DefaultCanvasAreaRender = __decorate$X([injectable(), __param$v(0, inject(ContributionProvider)), __param$v(0, named(AreaRenderContribution)), __metadata$F("design:paramtypes", [Object])], DefaultCanvasAreaRender);
+    DefaultCanvasAreaRender = __decorate$Z([injectable(), __param$x(0, inject(ContributionProvider)), __param$x(0, named(AreaRenderContribution)), __metadata$H("design:paramtypes", [Object])], DefaultCanvasAreaRender);
 
     const defaultPathTextureRenderContribution = defaultBaseTextureRenderContribution;
     const defaultPathBackgroundRenderContribution = defaultBaseBackgroundRenderContribution;
 
-    var __decorate$W = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$Y = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
         if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
         return c > 3 && r && Object.defineProperty(target, key, r), r;
       },
-      __metadata$E = undefined && undefined.__metadata || function (k, v) {
+      __metadata$G = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
-      __param$u = undefined && undefined.__param || function (paramIndex, decorator) {
+      __param$w = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
           decorator(target, key, paramIndex);
         };
@@ -14825,19 +14829,19 @@
         this.tempTheme = pathAttribute, this._draw(path, pathAttribute, !1, drawContext, params), this.tempTheme = null;
       }
     };
-    DefaultCanvasPathRender = __decorate$W([injectable(), __param$u(0, inject(ContributionProvider)), __param$u(0, named(PathRenderContribution)), __metadata$E("design:paramtypes", [Object])], DefaultCanvasPathRender);
+    DefaultCanvasPathRender = __decorate$Y([injectable(), __param$w(0, inject(ContributionProvider)), __param$w(0, named(PathRenderContribution)), __metadata$G("design:paramtypes", [Object])], DefaultCanvasPathRender);
 
-    var __decorate$V = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$X = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
         if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
         return c > 3 && r && Object.defineProperty(target, key, r), r;
       },
-      __metadata$D = undefined && undefined.__metadata || function (k, v) {
+      __metadata$F = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
-      __param$t = undefined && undefined.__param || function (paramIndex, decorator) {
+      __param$v = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
           decorator(target, key, paramIndex);
         };
@@ -14896,19 +14900,19 @@
         this._draw(rect, rectAttribute, !1, drawContext, params, rectAttribute);
       }
     };
-    DefaultCanvasRectRender = __decorate$V([injectable(), __param$t(0, inject(ContributionProvider)), __param$t(0, named(RectRenderContribution)), __metadata$D("design:paramtypes", [Object])], DefaultCanvasRectRender);
+    DefaultCanvasRectRender = __decorate$X([injectable(), __param$v(0, inject(ContributionProvider)), __param$v(0, named(RectRenderContribution)), __metadata$F("design:paramtypes", [Object])], DefaultCanvasRectRender);
 
-    var __decorate$U = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$W = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
         if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
         return c > 3 && r && Object.defineProperty(target, key, r), r;
       },
-      __metadata$C = undefined && undefined.__metadata || function (k, v) {
+      __metadata$E = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
-      __param$s = undefined && undefined.__param || function (paramIndex, decorator) {
+      __param$u = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
           decorator(target, key, paramIndex);
         };
@@ -14978,7 +14982,7 @@
         this._draw(symbol, symbolAttribute, !1, drawContext, params);
       }
     };
-    DefaultCanvasSymbolRender = __decorate$U([injectable(), __param$s(0, inject(ContributionProvider)), __param$s(0, named(SymbolRenderContribution)), __metadata$C("design:paramtypes", [Object])], DefaultCanvasSymbolRender);
+    DefaultCanvasSymbolRender = __decorate$W([injectable(), __param$u(0, inject(ContributionProvider)), __param$u(0, named(SymbolRenderContribution)), __metadata$E("design:paramtypes", [Object])], DefaultCanvasSymbolRender);
 
     class DefaultBoundsAllocate {
       constructor() {
@@ -15069,17 +15073,17 @@
     }
     const defaultTextBackgroundRenderContribution = new DefaultTextBackgroundRenderContribution();
 
-    var __decorate$T = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$V = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
         if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
         return c > 3 && r && Object.defineProperty(target, key, r), r;
       },
-      __metadata$B = undefined && undefined.__metadata || function (k, v) {
+      __metadata$D = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
-      __param$r = undefined && undefined.__param || function (paramIndex, decorator) {
+      __param$t = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
           decorator(target, key, paramIndex);
         };
@@ -15218,7 +15222,7 @@
         }
       }
     };
-    DefaultCanvasTextRender = __decorate$T([injectable(), __param$r(0, inject(ContributionProvider)), __param$r(0, named(TextRenderContribution)), __metadata$B("design:paramtypes", [Object])], DefaultCanvasTextRender);
+    DefaultCanvasTextRender = __decorate$V([injectable(), __param$t(0, inject(ContributionProvider)), __param$t(0, named(TextRenderContribution)), __metadata$D("design:paramtypes", [Object])], DefaultCanvasTextRender);
 
     function drawPolygon(path, points, x, y) {
       if (points && points.length) {
@@ -15275,17 +15279,17 @@
     const defaultPolygonTextureRenderContribution = defaultBaseTextureRenderContribution;
     const defaultPolygonBackgroundRenderContribution = defaultBaseBackgroundRenderContribution;
 
-    var __decorate$S = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$U = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
         if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
         return c > 3 && r && Object.defineProperty(target, key, r), r;
       },
-      __metadata$A = undefined && undefined.__metadata || function (k, v) {
+      __metadata$C = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
-      __param$q = undefined && undefined.__param || function (paramIndex, decorator) {
+      __param$s = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
           decorator(target, key, paramIndex);
         };
@@ -15326,19 +15330,19 @@
         this._draw(polygon, polygonAttribute, !1, drawContext, params);
       }
     };
-    DefaultCanvasPolygonRender = __decorate$S([injectable(), __param$q(0, inject(ContributionProvider)), __param$q(0, named(PolygonRenderContribution)), __metadata$A("design:paramtypes", [Object])], DefaultCanvasPolygonRender);
+    DefaultCanvasPolygonRender = __decorate$U([injectable(), __param$s(0, inject(ContributionProvider)), __param$s(0, named(PolygonRenderContribution)), __metadata$C("design:paramtypes", [Object])], DefaultCanvasPolygonRender);
 
-    var __decorate$R = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$T = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
         if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
         return c > 3 && r && Object.defineProperty(target, key, r), r;
       },
-      __metadata$z = undefined && undefined.__metadata || function (k, v) {
+      __metadata$B = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
-      __param$p = undefined && undefined.__param || function (paramIndex, decorator) {
+      __param$r = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
           decorator(target, key, paramIndex);
         };
@@ -15473,19 +15477,19 @@
         }) : clip ? context.restore() : context.highPerformanceRestore();
       }
     };
-    DefaultCanvasGroupRender = __decorate$R([injectable(), __param$p(0, inject(ContributionProvider)), __param$p(0, named(GroupRenderContribution)), __metadata$z("design:paramtypes", [Object])], DefaultCanvasGroupRender);
+    DefaultCanvasGroupRender = __decorate$T([injectable(), __param$r(0, inject(ContributionProvider)), __param$r(0, named(GroupRenderContribution)), __metadata$B("design:paramtypes", [Object])], DefaultCanvasGroupRender);
 
-    var __decorate$Q = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$S = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
         if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
         return c > 3 && r && Object.defineProperty(target, key, r), r;
       },
-      __metadata$y = undefined && undefined.__metadata || function (k, v) {
+      __metadata$A = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
-      __param$o = undefined && undefined.__param || function (paramIndex, decorator) {
+      __param$q = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
           decorator(target, key, paramIndex);
         };
@@ -15554,10 +15558,11 @@
         this._draw(image, imageAttribute, !1, drawContext);
       }
     };
-    DefaultCanvasImageRender = __decorate$Q([injectable(), __param$o(0, inject(ContributionProvider)), __param$o(0, named(ImageRenderContribution)), __metadata$y("design:paramtypes", [Object])], DefaultCanvasImageRender);
+    DefaultCanvasImageRender = __decorate$S([injectable(), __param$q(0, inject(ContributionProvider)), __param$q(0, named(ImageRenderContribution)), __metadata$A("design:paramtypes", [Object])], DefaultCanvasImageRender);
 
     const IncrementalDrawContribution = Symbol.for("IncrementalDrawContribution");
     const ArcRender = Symbol.for("ArcRender");
+    const AreaRender = Symbol.for("AreaRender");
     const CircleRender = Symbol.for("CircleRender");
     const GraphicRender = Symbol.for("GraphicRender");
     const GroupRender = Symbol.for("GroupRender");
@@ -15616,14 +15621,14 @@
       return result;
     };
 
-    var __decorate$P = 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;
         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$x = undefined && undefined.__metadata || function (k, v) {
+      __metadata$z = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       };
     const DrawItemInterceptor = Symbol.for("DrawItemInterceptor");
@@ -15684,7 +15689,7 @@
         return !1;
       }
     };
-    CommonDrawItemInterceptorContribution = __decorate$P([injectable(), __metadata$x("design:paramtypes", [])], CommonDrawItemInterceptorContribution);
+    CommonDrawItemInterceptorContribution = __decorate$R([injectable(), __metadata$z("design:paramtypes", [])], CommonDrawItemInterceptorContribution);
     class InteractiveDrawItemInterceptorContribution {
       constructor() {
         this.order = 1;
@@ -15775,17 +15780,17 @@
       }
     }
 
-    var __decorate$O = 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;
         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$w = undefined && undefined.__metadata || function (k, v) {
+      __metadata$y = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
-      __param$n = undefined && undefined.__param || function (paramIndex, decorator) {
+      __param$p = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
           decorator(target, key, paramIndex);
         };
@@ -15824,7 +15829,7 @@
         this.prepare(updateBounds), this.prepareRenderList(), this.beforeDraw(params), this.draw(params), this.afterDraw(params), this.drawParams = null;
       }
     };
-    DefaultRenderService = __decorate$O([injectable(), __param$n(0, inject(DrawContribution)), __metadata$w("design:paramtypes", [Object])], DefaultRenderService);
+    DefaultRenderService = __decorate$Q([injectable(), __param$p(0, inject(DrawContribution)), __metadata$y("design:paramtypes", [Object])], DefaultRenderService);
 
     var renderModule$1 = new ContainerModule(bind => {
       bind(RenderService).to(DefaultRenderService);
@@ -15835,7 +15840,7 @@
     const PickItemInterceptor = Symbol.for("PickItemInterceptor");
     const PickServiceInterceptor = Symbol.for("PickServiceInterceptor");
 
-    var __decorate$N = 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;
@@ -15857,7 +15862,7 @@
         return result;
       }
     };
-    ShadowPickServiceInterceptorContribution = __decorate$N([injectable()], ShadowPickServiceInterceptorContribution);
+    ShadowPickServiceInterceptorContribution = __decorate$P([injectable()], ShadowPickServiceInterceptorContribution);
     let ShadowRootPickItemInterceptorContribution = class {
       constructor() {
         this.order = 1;
@@ -15888,7 +15893,7 @@
         return context.highPerformanceRestore(), !result.graphic && result.group && "full" === shadowPickMode && (result.graphic = result.group), result;
       }
     };
-    ShadowRootPickItemInterceptorContribution = __decorate$N([injectable()], ShadowRootPickItemInterceptorContribution);
+    ShadowRootPickItemInterceptorContribution = __decorate$P([injectable()], ShadowRootPickItemInterceptorContribution);
     let InteractivePickItemInterceptorContribution = class {
       constructor() {
         this.order = 1;
@@ -15907,7 +15912,7 @@
         return null;
       }
     };
-    InteractivePickItemInterceptorContribution = __decorate$N([injectable()], InteractivePickItemInterceptorContribution);
+    InteractivePickItemInterceptorContribution = __decorate$P([injectable()], InteractivePickItemInterceptorContribution);
     let Canvas3DPickItemInterceptor = class {
       constructor() {
         this.order = 1;
@@ -15927,7 +15932,7 @@
         context.setTransformForCurrent();
       }
     };
-    Canvas3DPickItemInterceptor = __decorate$N([injectable()], Canvas3DPickItemInterceptor);
+    Canvas3DPickItemInterceptor = __decorate$P([injectable()], Canvas3DPickItemInterceptor);
 
     var pickModule = new ContainerModule((bind, unbind, isBound) => {
       isBound(PickerService) || (bind(GlobalPickerService).toSelf(), bind(PickerService).toService(GlobalPickerService)), bind(Canvas3DPickItemInterceptor).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(Canvas3DPickItemInterceptor), bind(ShadowRootPickItemInterceptorContribution).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(ShadowRootPickItemInterceptorContribution), bind(InteractivePickItemInterceptorContribution).toSelf().inSingletonScope(), bind(PickItemInterceptor).toService(InteractivePickItemInterceptorContribution), bindContributionProvider(bind, PickItemInterceptor), bind(ShadowPickServiceInterceptorContribution).toSelf().inSingletonScope(), bind(PickServiceInterceptor).toService(ShadowPickServiceInterceptorContribution), bindContributionProvider(bind, PickServiceInterceptor);
@@ -15940,17 +15945,17 @@
     const AutoEnablePlugins = Symbol.for("AutoEnablePlugins");
     const PluginService = Symbol.for("PluginService");
 
-    var __decorate$M = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __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;
         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$v = undefined && undefined.__metadata || function (k, v) {
+      __metadata$x = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
-      __param$m = undefined && undefined.__param || function (paramIndex, decorator) {
+      __param$o = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
           decorator(target, key, paramIndex);
         };
@@ -15990,7 +15995,7 @@
         }), this.onRegisterPlugin = [];
       }
     };
-    DefaultPluginService = __decorate$M([injectable(), __param$m(0, inject(ContributionProvider)), __param$m(0, named(AutoEnablePlugins)), __metadata$v("design:paramtypes", [Object])], DefaultPluginService);
+    DefaultPluginService = __decorate$O([injectable(), __param$o(0, inject(ContributionProvider)), __param$o(0, named(AutoEnablePlugins)), __metadata$x("design:paramtypes", [Object])], DefaultPluginService);
 
     var pluginModule = new ContainerModule(bind => {
       bind(PluginService).to(DefaultPluginService), bindContributionProviderNoSingletonScope(bind, AutoEnablePlugins);
@@ -16004,14 +16009,14 @@
       bind(TextMeasureContribution).to(DefaultTextMeasureContribution).inSingletonScope(), bindContributionProvider(bind, TextMeasureContribution);
     });
 
-    var __decorate$L = 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;
         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$u = undefined && undefined.__metadata || function (k, v) {
+      __metadata$w = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       };
     let CanvasLayerHandlerContribution = class {
@@ -16081,7 +16086,7 @@
         this.canvas.release();
       }
     };
-    CanvasLayerHandlerContribution = __decorate$L([injectable(), __metadata$u("design:paramtypes", [])], CanvasLayerHandlerContribution);
+    CanvasLayerHandlerContribution = __decorate$N([injectable(), __metadata$w("design:paramtypes", [])], CanvasLayerHandlerContribution);
 
     var layerHandlerModules = new ContainerModule(bind => {
       bind(CanvasLayerHandlerContribution).toSelf(), bind(StaticLayerHandlerContribution).toService(CanvasLayerHandlerContribution);
@@ -16196,17 +16201,17 @@
       return result;
     }
 
-    var __decorate$K = 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;
         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$t = undefined && undefined.__metadata || function (k, v) {
+      __metadata$v = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
-      __param$l = undefined && undefined.__param || function (paramIndex, decorator) {
+      __param$n = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
           decorator(target, key, paramIndex);
         };
@@ -16415,9 +16420,9 @@
       }
       afterDraw(renderService, drawParams) {}
     };
-    DefaultDrawContribution = __decorate$K([injectable(), __param$l(0, multiInject(GraphicRender)), __param$l(1, inject(ContributionProvider)), __param$l(1, named(DrawItemInterceptor)), __metadata$t("design:paramtypes", [Array, Object])], DefaultDrawContribution);
+    DefaultDrawContribution = __decorate$M([injectable(), __param$n(0, multiInject(GraphicRender)), __param$n(1, inject(ContributionProvider)), __param$n(1, named(DrawItemInterceptor)), __metadata$v("design:paramtypes", [Array, Object])], DefaultDrawContribution);
 
-    var __decorate$J = 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;
@@ -16468,9 +16473,9 @@
         }), context.setShadowBlendStyle && context.setShadowBlendStyle(line, attribute, defaultAttribute), context.setStrokeStyle(line, attribute, offsetX, offsetY, defaultAttribute), context.stroke());
       }
     };
-    DefaultIncrementalCanvasLineRender = __decorate$J([injectable()], DefaultIncrementalCanvasLineRender);
+    DefaultIncrementalCanvasLineRender = __decorate$L([injectable()], DefaultIncrementalCanvasLineRender);
 
-    var __decorate$I = 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;
@@ -16513,20 +16518,20 @@
         }), context.setShadowBlendStyle && context.setShadowBlendStyle(area, attribute, defaultAttribute), context.setCommonStyle(area, attribute, offsetX, offsetY, defaultAttribute), context.fill());
       }
     };
-    DefaultIncrementalCanvasAreaRender = __decorate$I([injectable()], DefaultIncrementalCanvasAreaRender);
+    DefaultIncrementalCanvasAreaRender = __decorate$K([injectable()], DefaultIncrementalCanvasAreaRender);
 
     var STATUS,
-      __decorate$H = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+      __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;
         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$s = undefined && undefined.__metadata || function (k, v) {
+      __metadata$u = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
-      __param$k = undefined && undefined.__param || function (paramIndex, decorator) {
+      __param$m = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
           decorator(target, key, paramIndex);
         };
@@ -16656,7 +16661,7 @@
         });
       }
     };
-    DefaultIncrementalDrawContribution = __decorate$H([injectable(), __param$k(0, multiInject(GraphicRender)), __param$k(1, inject(DefaultIncrementalCanvasLineRender)), __param$k(2, inject(DefaultIncrementalCanvasAreaRender)), __param$k(3, inject(ContributionProvider)), __param$k(3, named(DrawItemInterceptor)), __metadata$s("design:paramtypes", [Array, Object, Object, Object])], DefaultIncrementalDrawContribution);
+    DefaultIncrementalDrawContribution = __decorate$J([injectable(), __param$m(0, multiInject(GraphicRender)), __param$m(1, inject(DefaultIncrementalCanvasLineRender)), __param$m(2, inject(DefaultIncrementalCanvasAreaRender)), __param$m(3, inject(ContributionProvider)), __param$m(3, named(DrawItemInterceptor)), __metadata$u("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(DefaultBaseInteractiveRenderContribution).toSelf().inSingletonScope(), bindContributionProvider(bind, InteractiveSubRenderContribution), bindContributionProvider(bind, GraphicRender), bind(CommonDrawItemInterceptorContribution).toSelf().inSingletonScope(), bind(DrawItemInterceptor).toService(CommonDrawItemInterceptorContribution), bindContributionProvider(bind, DrawItemInterceptor);
@@ -17377,7 +17382,7 @@
       return new Stage(params);
     }
 
-    var __decorate$G = 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;
@@ -17491,16 +17496,16 @@
         return Promise.resolve(null);
       }
     };
-    BaseEnvContribution = __decorate$G([injectable()], BaseEnvContribution);
+    BaseEnvContribution = __decorate$I([injectable()], BaseEnvContribution);
 
-    var __decorate$F = 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;
         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$r = undefined && undefined.__metadata || function (k, v) {
+      __metadata$t = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       };
     let BaseWindowHandlerContribution = class {
@@ -17539,19 +17544,19 @@
         return this.modelMatrix;
       }
     };
-    BaseWindowHandlerContribution = __decorate$F([injectable(), __metadata$r("design:paramtypes", [])], BaseWindowHandlerContribution);
+    BaseWindowHandlerContribution = __decorate$H([injectable(), __metadata$t("design:paramtypes", [])], BaseWindowHandlerContribution);
 
-    var __decorate$E = 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;
         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$q = undefined && undefined.__metadata || function (k, v) {
+      __metadata$s = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
-      __param$j = undefined && undefined.__param || function (paramIndex, decorator) {
+      __param$l = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
           decorator(target, key, paramIndex);
         };
@@ -17659,7 +17664,21 @@
         return picker || null;
       }
     };
-    DefaultPickService = __decorate$E([injectable(), __param$j(0, inject(ContributionProvider)), __param$j(0, named(PickItemInterceptor)), __param$j(1, inject(ContributionProvider)), __param$j(1, named(PickServiceInterceptor)), __metadata$q("design:paramtypes", [Object, Object])], DefaultPickService);
+    DefaultPickService = __decorate$G([injectable(), __param$l(0, inject(ContributionProvider)), __param$l(0, named(PickItemInterceptor)), __param$l(1, inject(ContributionProvider)), __param$l(1, named(PickServiceInterceptor)), __metadata$s("design:paramtypes", [Object, Object])], DefaultPickService);
+
+    function simplifyRadialDist(points, sqTolerance) {
+      let deltaX,
+        deltaY,
+        lastX = points[0].x,
+        lastY = points[0].y;
+      const newPoints = [points[0]];
+      for (let i = 1, len = points.length; i < len; i++) deltaX = points[i].x - lastX, deltaY = points[i].y - lastY, deltaX * deltaX + deltaY * deltaY > sqTolerance && (lastX = points[i].x, lastY = points[i].y, newPoints.push(points[i]));
+      return points[points.length - 1].x === lastX && points[points.length - 1].y === lastY || newPoints.push(points[points.length - 1]), newPoints;
+    }
+    function flatten_simplify(points, tolerance, highestQuality) {
+      if (points.length <= 10) return points;
+      return points = highestQuality ? points : simplifyRadialDist(points, void 0 !== tolerance ? tolerance * tolerance : 1);
+    }
 
     function diff(oldAttrs, newAttrs, getAttr) {
       const diffObj = {};
@@ -17686,6 +17705,11 @@
       loadLineModule || (loadLineModule = !0, bind(DefaultCanvasLineRender).toSelf().inSingletonScope(), bind(DefaultIncrementalCanvasLineRender).toSelf().inSingletonScope(), bind(LineRender).to(DefaultCanvasLineRender).inSingletonScope(), bind(GraphicRender).toService(LineRender));
     });
 
+    let loadAreaModule = !1;
+    const areaModule = new ContainerModule(bind => {
+      loadAreaModule || (loadAreaModule = !0, bind(DefaultCanvasAreaRender).toSelf().inSingletonScope(), bind(AreaRender).to(DefaultCanvasAreaRender).inSingletonScope(), bind(GraphicRender).toService(AreaRender), bind(AreaRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, AreaRenderContribution), bind(DefaultIncrementalCanvasAreaRender).toSelf().inSingletonScope());
+    });
+
     let loadSymbolModule = !1;
     const symbolModule = new ContainerModule(bind => {
       loadSymbolModule || (loadSymbolModule = !0, bind(DefaultCanvasSymbolRender).toSelf().inSingletonScope(), bind(SymbolRender).to(DefaultCanvasSymbolRender).inSingletonScope(), bind(GraphicRender).toService(SymbolRender), bind(SymbolRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, SymbolRenderContribution));
@@ -17711,14 +17735,14 @@
       loadPolygonModule || (loadPolygonModule = !0, bind(PolygonRender).to(DefaultCanvasPolygonRender).inSingletonScope(), bind(GraphicRender).toService(PolygonRender), bind(PolygonRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, PolygonRenderContribution));
     });
 
-    var __decorate$D = 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;
         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$p = undefined && undefined.__metadata || function (k, v) {
+      __metadata$r = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       };
     let DefaultCanvasRichTextRender = class extends BaseRender {
@@ -17772,7 +17796,7 @@
         this._draw(richtext, richtextAttribute, !1, drawContext);
       }
     };
-    DefaultCanvasRichTextRender = __decorate$D([injectable(), __metadata$p("design:paramtypes", [])], DefaultCanvasRichTextRender);
+    DefaultCanvasRichTextRender = __decorate$F([injectable(), __metadata$r("design:paramtypes", [])], DefaultCanvasRichTextRender);
 
     let loadRichtextModule = !1;
     const richtextModule = new ContainerModule(bind => {
@@ -17788,6 +17812,10 @@
       graphicCreator.RegisterGraphicCreator("arc", createArc);
     }
 
+    function registerAreaGraphic() {
+      graphicCreator.RegisterGraphicCreator("area", createArea);
+    }
+
     function registerCircleGraphic() {
       graphicCreator.RegisterGraphicCreator("circle", createCircle);
     }
@@ -18163,6 +18191,7 @@
 
     const MathPickerContribution = Symbol.for("MathPickerContribution");
     const MathArcPicker = Symbol.for("MathArcPicker");
+    const MathAreaPicker = Symbol.for("MathAreaPicker");
     const MathCirclePicker = Symbol.for("MathCirclePicker");
     const MathImagePicker = Symbol.for("MathImagePicker");
     const MathLinePicker = Symbol.for("MathLinePicker");
@@ -18172,6 +18201,7 @@
     const MathTextPicker = Symbol.for("MathTextPicker");
     const MathPolygonPicker = Symbol.for("MathPolygonPicker");
     const CanvasArcPicker = Symbol.for("CanvasArcPicker");
+    const CanvasAreaPicker = Symbol.for("CanvasAreaPicker");
     const CanvasCirclePicker = Symbol.for("CanvasCirclePicker");
     const CanvasImagePicker = Symbol.for("CanvasImagePicker");
     const CanvasLinePicker = Symbol.for("CanvasLinePicker");
@@ -18451,14 +18481,14 @@
       }
     }
 
-    var __decorate$C = 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;
         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$o = undefined && undefined.__metadata || function (k, v) {
+      __metadata$q = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       };
     const outP = [0, 0, 0],
@@ -18960,16 +18990,16 @@
         this.stack.forEach(m => matrixAllocate.free(m)), this.stack.length = 0;
       }
     };
-    BrowserContext2d.env = "browser", BrowserContext2d = __decorate$C([injectable(), __metadata$o("design:paramtypes", [Object, Number])], BrowserContext2d);
+    BrowserContext2d.env = "browser", BrowserContext2d = __decorate$E([injectable(), __metadata$q("design:paramtypes", [Object, Number])], BrowserContext2d);
 
-    var __decorate$B = 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;
         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$n = undefined && undefined.__metadata || function (k, v) {
+      __metadata$p = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       };
     let BrowserCanvas = class extends BaseCanvas {
@@ -19031,7 +19061,7 @@
         this._context.dpr = this._dpr;
       }
     };
-    BrowserCanvas.env = "browser", BrowserCanvas = __decorate$B([injectable(), __metadata$n("design:paramtypes", [Object])], BrowserCanvas);
+    BrowserCanvas.env = "browser", BrowserCanvas = __decorate$D([injectable(), __metadata$p("design:paramtypes", [Object])], BrowserCanvas);
 
     function createModule(CanvasConstructor, ContextConstructor) {
       return new ContainerModule(bind => {
@@ -19041,17 +19071,17 @@
 
     const browserCanvasModule = createModule(BrowserCanvas, BrowserContext2d);
 
-    var __decorate$A = 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;
         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$m = undefined && undefined.__metadata || function (k, v) {
+      __metadata$o = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
-      __param$i = undefined && undefined.__param || function (paramIndex, decorator) {
+      __param$k = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
           decorator(target, key, paramIndex);
         };
@@ -19102,9 +19132,9 @@
         return data;
       }
     };
-    DefaultCanvasPickerService = __decorate$A([injectable(), __param$i(0, inject(ContributionProvider)), __param$i(0, named(CanvasPickerContribution)), __param$i(1, inject(DrawContribution)), __param$i(2, inject(ContributionProvider)), __param$i(2, named(PickItemInterceptor)), __param$i(3, inject(ContributionProvider)), __param$i(3, named(PickServiceInterceptor)), __metadata$m("design:paramtypes", [Object, Object, Object, Object])], DefaultCanvasPickerService);
+    DefaultCanvasPickerService = __decorate$C([injectable(), __param$k(0, inject(ContributionProvider)), __param$k(0, named(CanvasPickerContribution)), __param$k(1, inject(DrawContribution)), __param$k(2, inject(ContributionProvider)), __param$k(2, named(PickItemInterceptor)), __param$k(3, inject(ContributionProvider)), __param$k(3, named(PickServiceInterceptor)), __metadata$o("design:paramtypes", [Object, Object, Object, Object])], DefaultCanvasPickerService);
 
-    var __decorate$z = 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;
@@ -19119,7 +19149,7 @@
         return !1;
       }
     };
-    DefaultCanvasGroupPicker = __decorate$z([injectable()], DefaultCanvasGroupPicker);
+    DefaultCanvasGroupPicker = __decorate$B([injectable()], DefaultCanvasGroupPicker);
 
     const m = new ContainerModule((bind, unbind, isBound, rebind) => {
       m.__vloaded || (m.__vloaded = !0, bind(CanvasGroupPicker).to(DefaultCanvasGroupPicker).inSingletonScope(), bind(CanvasPickerContribution).toService(CanvasGroupPicker), bindContributionProvider(bind, CanvasPickerContribution));
@@ -19135,14 +19165,14 @@
     }
 
     var BrowserWindowHandlerContribution_1,
-      __decorate$y = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+      __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;
         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$l = undefined && undefined.__metadata || function (k, v) {
+      __metadata$n = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       };
     let BrowserWindowHandlerContribution = BrowserWindowHandlerContribution_1 = class extends BaseWindowHandlerContribution {
@@ -19299,19 +19329,19 @@
         return this.global.getElementTopLeft(this.canvas.nativeCanvas, baseWindow);
       }
     };
-    BrowserWindowHandlerContribution.env = "browser", BrowserWindowHandlerContribution.idprefix = "visactor_window", BrowserWindowHandlerContribution.prefix_count = 0, BrowserWindowHandlerContribution = BrowserWindowHandlerContribution_1 = __decorate$y([injectable(), __metadata$l("design:paramtypes", [])], BrowserWindowHandlerContribution);
+    BrowserWindowHandlerContribution.env = "browser", BrowserWindowHandlerContribution.idprefix = "visactor_window", BrowserWindowHandlerContribution.prefix_count = 0, BrowserWindowHandlerContribution = BrowserWindowHandlerContribution_1 = __decorate$A([injectable(), __metadata$n("design:paramtypes", [])], BrowserWindowHandlerContribution);
     const browserWindowModule = new ContainerModule(bind => {
       bind(BrowserWindowHandlerContribution).toSelf(), bind(WindowHandlerContribution).toDynamicValue(ctx => ctx.container.get(BrowserWindowHandlerContribution)).whenTargetNamed(BrowserWindowHandlerContribution.env);
     });
 
-    var __decorate$x = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$z = 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$k = undefined && undefined.__metadata || function (k, v) {
+      __metadata$m = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
       __awaiter$8 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
@@ -19557,7 +19587,7 @@
         return navigator.clipboard.writeText(text).then(() => {}).catch(err => {});
       }
     };
-    BrowserEnvContribution = __decorate$x([injectable(), __metadata$k("design:paramtypes", [])], BrowserEnvContribution);
+    BrowserEnvContribution = __decorate$z([injectable(), __metadata$m("design:paramtypes", [])], BrowserEnvContribution);
 
     const browserEnvModule = new ContainerModule(bind => {
       browserEnvModule.isBrowserBound || (browserEnvModule.isBrowserBound = !0, bind(BrowserEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(BrowserEnvContribution));
@@ -19599,17 +19629,17 @@
       }
     }
 
-    var __decorate$w = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$y = 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$j = undefined && undefined.__metadata || function (k, v) {
+      __metadata$l = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
-      __param$h = undefined && undefined.__param || function (paramIndex, decorator) {
+      __param$j = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
           decorator(target, key, paramIndex);
         };
@@ -19619,24 +19649,51 @@
         super(), this.canvasRenderer = canvasRenderer, this.type = "arc", this.numberType = ARC_NUMBER_TYPE;
       }
     };
-    DefaultMathArcPicker = __decorate$w([injectable(), __param$h(0, inject(ArcRender)), __metadata$j("design:paramtypes", [Object])], DefaultMathArcPicker);
+    DefaultMathArcPicker = __decorate$y([injectable(), __param$j(0, inject(ArcRender)), __metadata$l("design:paramtypes", [Object])], DefaultMathArcPicker);
 
     let loadArcPick$1 = !1;
     const arcMathPickModule = new ContainerModule((bind, unbind, isBound, rebind) => {
       loadArcPick$1 || (loadArcPick$1 = !0, bind(MathArcPicker).to(DefaultMathArcPicker).inSingletonScope(), bind(MathPickerContribution).toService(MathArcPicker));
     });
 
-    var __decorate$v = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$x = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
         if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
         return c > 3 && r && Object.defineProperty(target, key, r), r;
       },
-      __metadata$i = undefined && undefined.__metadata || function (k, v) {
+      __metadata$k = 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$i = undefined && undefined.__param || function (paramIndex, decorator) {
+        return function (target, key) {
+          decorator(target, key, paramIndex);
+        };
+      };
+    let DefaultMathAreaPicker = class extends PickerBase {
+      constructor(canvasRenderer) {
+        super(), this.canvasRenderer = canvasRenderer, this.type = "area", this.numberType = AREA_NUMBER_TYPE;
+      }
+    };
+    DefaultMathAreaPicker = __decorate$x([injectable(), __param$i(0, inject(AreaRender)), __metadata$k("design:paramtypes", [Object])], DefaultMathAreaPicker);
+
+    let loadAreaPick$1 = !1;
+    const areaMathPickModule = new ContainerModule((bind, unbind, isBound, rebind) => {
+      loadAreaPick$1 || (loadAreaPick$1 = !0, bind(MathAreaPicker).to(DefaultMathAreaPicker).inSingletonScope(), bind(MathPickerContribution).toService(MathAreaPicker));
+    });
+
+    var __decorate$w = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+        var d,
+          c = arguments.length,
+          r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
+        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$j = undefined && undefined.__metadata || function (k, v) {
+        if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+      },
+      __param$h = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
           decorator(target, key, paramIndex);
         };
@@ -19646,14 +19703,14 @@
         super(), this.canvasRenderer = canvasRenderer, this.type = "circle", this.numberType = CIRCLE_NUMBER_TYPE;
       }
     };
-    DefaultMathCirclePicker = __decorate$v([injectable(), __param$g(0, inject(CircleRender)), __metadata$i("design:paramtypes", [Object])], DefaultMathCirclePicker);
+    DefaultMathCirclePicker = __decorate$w([injectable(), __param$h(0, inject(CircleRender)), __metadata$j("design:paramtypes", [Object])], DefaultMathCirclePicker);
 
     let loadCirclePick$1 = !1;
     const circleMathPickModule = new ContainerModule((bind, unbind, isBound, rebind) => {
       loadCirclePick$1 || (loadCirclePick$1 = !0, bind(MathCirclePicker).to(DefaultMathCirclePicker).inSingletonScope(), bind(MathPickerContribution).toService(MathCirclePicker));
     });
 
-    var __decorate$u = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$v = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
         r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
@@ -19671,24 +19728,24 @@
         return !!pickContext && !!image.AABBBounds.containsPoint(point);
       }
     };
-    DefaultMathImagePicker = __decorate$u([injectable()], DefaultMathImagePicker);
+    DefaultMathImagePicker = __decorate$v([injectable()], DefaultMathImagePicker);
 
     let loadImagePick$1 = !1;
     const imageMathPickModule = new ContainerModule((bind, unbind, isBound, rebind) => {
       loadImagePick$1 || (loadImagePick$1 = !0, bind(MathImagePicker).to(DefaultMathImagePicker).inSingletonScope(), bind(DefaultMathImagePicker).toService(MathImagePicker));
     });
 
-    var __decorate$t = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$u = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
         if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
         return c > 3 && r && Object.defineProperty(target, key, r), r;
       },
-      __metadata$h = undefined && undefined.__metadata || function (k, v) {
+      __metadata$i = 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$g = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
           decorator(target, key, paramIndex);
         };
@@ -19698,24 +19755,24 @@
         super(), this.canvasRenderer = canvasRenderer, this.type = "line", this.numberType = LINE_NUMBER_TYPE;
       }
     };
-    DefaultMathLinePicker = __decorate$t([injectable(), __param$f(0, inject(LineRender)), __metadata$h("design:paramtypes", [Object])], DefaultMathLinePicker);
+    DefaultMathLinePicker = __decorate$u([injectable(), __param$g(0, inject(LineRender)), __metadata$i("design:paramtypes", [Object])], DefaultMathLinePicker);
 
     let loadLinePick$1 = !1;
     const lineMathPickModule = new ContainerModule((bind, unbind, isBound, rebind) => {
       loadLinePick$1 || (loadLinePick$1 = !0, bind(MathLinePicker).to(DefaultMathLinePicker).inSingletonScope(), bind(MathPickerContribution).toService(MathLinePicker));
     });
 
-    var __decorate$s = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __decorate$t = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
           r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
         if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
         return c > 3 && r && Object.defineProperty(target, key, r), r;
       },
-      __metadata$g = undefined && undefined.__metadata || function (k, v) {
+      __metadata$h = 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$f = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
           decorator(target, key, paramIndex);
         };
@@ -19725,24 +19782,24 @@
         super(), this.canvasRenderer = canvasRenderer, this.type = "polygon", this.numberType = POLYGON_NUMBER_TYPE;
       }
     };
-    DefaultMathPolygonPicker = __decorate$s([injectable(), __param$e(0, inject(PolygonRender)), __metadata$g("design:paramtypes", [Object])], DefaultMathPolygonPicker);
+    DefaultMathPolygonPicker = __decorate$t([injectable(), __param$f(0, inject(PolygonRender)), __metadata$h("design:paramtypes", [Object])], DefaultMathPolygonPicker);
 
     let loadPolygonPick$1 = !1;
     const polygonMathPickModule = new ContainerModule((bind, unbind, isBound, rebind) => {
       loadPolygonPick$1 || (loadPolygonPick$1 = !0, bind(MathPolygonPicker).to(DefaultMathPolygonPicker).inSingletonScope(), bind(MathPickerContribution).toService(MathPolygonPicker));
     });
 
-    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;
         if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
         return c > 3 && r && Object.defineProperty(target, key, r), r;
       },
-      __metadata$f = undefined && undefined.__metadata || function (k, v) {
+      __metadata$g = 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) {
+      __param$e = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
           decorator(target, key, paramIndex);
         };
@@ -19752,7 +19809,7 @@
         super(), this.canvasRenderer = canvasRenderer, this.type = "path", this.numberType = PATH_NUMBER_TYPE;
       }
     };
-    DefaultMathPathPicker = __decorate$r([injectable(), __param$d(0, inject(PathRender)), __metadata$f("design:paramtypes", [Object])], DefaultMathPathPicker);
+    DefaultMathPathPicker = __decorate$s([injectable(), __param$e(0, inject(PathRender)), __metadata$g("design:paramtypes", [Object])], DefaultMathPathPicker);
 
     let loadPathPick$1 = !1;
     const pathMathPickModule = new ContainerModule((bind, unbind, isBound, rebind) => {
@@ -19807,17 +19864,17 @@
       }
     }
 
-    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;
         if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
         return c > 3 && r && Object.defineProperty(target, key, r), r;
       },
-      __metadata$e = undefined && undefined.__metadata || function (k, v) {
+      __metadata$f = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
-      __param$c = undefined && undefined.__param || function (paramIndex, decorator) {
+      __param$d = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
           decorator(target, key, paramIndex);
         };
@@ -19827,7 +19884,7 @@
         super(), this.canvasRenderer = canvasRenderer;
       }
     };
-    DefaultMathRectPicker = __decorate$q([injectable(), __param$c(0, inject(RectRender)), __metadata$e("design:paramtypes", [Object])], DefaultMathRectPicker);
+    DefaultMathRectPicker = __decorate$r([injectable(), __param$d(0, inject(RectRender)), __metadata$f("design:paramtypes", [Object])], DefaultMathRectPicker);
 
     let loadRectPick$1 = !1;
     const rectMathPickModule = new ContainerModule((bind, unbind, isBound, rebind) => {
@@ -19839,17 +19896,17 @@
       loadRichTextPick || (loadRichTextPick = !0, bind(MathImagePicker).to(DefaultMathImagePicker).inSingletonScope(), bind(DefaultMathImagePicker).toService(MathImagePicker));
     });
 
-    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;
         if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
         return c > 3 && r && Object.defineProperty(target, key, r), r;
       },
-      __metadata$d = undefined && undefined.__metadata || function (k, v) {
+      __metadata$e = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
-      __param$b = undefined && undefined.__param || function (paramIndex, decorator) {
+      __param$c = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
           decorator(target, key, paramIndex);
         };
@@ -19859,14 +19916,14 @@
         super(), this.canvasRenderer = canvasRenderer, this.type = "symbol", this.numberType = SYMBOL_NUMBER_TYPE;
       }
     };
-    DefaultMathSymbolPicker = __decorate$p([injectable(), __param$b(0, inject(SymbolRender)), __metadata$d("design:paramtypes", [Object])], DefaultMathSymbolPicker);
+    DefaultMathSymbolPicker = __decorate$q([injectable(), __param$c(0, inject(SymbolRender)), __metadata$e("design:paramtypes", [Object])], DefaultMathSymbolPicker);
 
     let loadSymbolPick$1 = !1;
     const symbolMathPickModule = new ContainerModule((bind, unbind, isBound, rebind) => {
       loadSymbolPick$1 || (loadSymbolPick$1 = !0, bind(MathSymbolPicker).to(DefaultMathSymbolPicker).inSingletonScope(), bind(MathPickerContribution).toService(MathSymbolPicker));
     });
 
-    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;
@@ -19881,21 +19938,21 @@
         return !!text.AABBBounds.containsPoint(point);
       }
     };
-    DefaultMathTextPicker = __decorate$o([injectable()], DefaultMathTextPicker);
+    DefaultMathTextPicker = __decorate$p([injectable()], DefaultMathTextPicker);
 
     let loadTextPick$1 = !1;
     const textMathPickModule = new ContainerModule((bind, unbind, isBound, rebind) => {
       loadTextPick$1 || (loadTextPick$1 = !0, bind(MathTextPicker).to(DefaultMathTextPicker).inSingletonScope(), bind(MathPickerContribution).toService(MathTextPicker));
     });
 
-    var __decorate$n = undefined && undefined.__decorate || function (decorators, target, key, desc) {
+    var __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;
         if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
         return c > 3 && r && Object.defineProperty(target, key, r), r;
       },
-      __metadata$c = undefined && undefined.__metadata || function (k, v) {
+      __metadata$d = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       };
     let NodeContext2d = class extends BrowserContext2d {
@@ -19907,16 +19964,16 @@
       }
       release(...params) {}
     };
-    NodeContext2d.env = "node", NodeContext2d = __decorate$n([injectable(), __metadata$c("design:paramtypes", [Object, Number])], NodeContext2d);
+    NodeContext2d.env = "node", NodeContext2d = __decorate$o([injectable(), __metadata$d("design:paramtypes", [Object, Number])], NodeContext2d);
 
-    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;
         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$b = undefined && undefined.__metadata || function (k, v) {
+      __metadata$c = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       };
     let NodeCanvas = class extends BaseCanvas {
@@ -19930,21 +19987,21 @@
         this._nativeCanvas.release && isFunction$7(this._nativeCanvas.release) && this._nativeCanvas.release();
       }
     };
-    NodeCanvas.env = "node", NodeCanvas = __decorate$m([injectable(), __metadata$b("design:paramtypes", [Object])], NodeCanvas);
+    NodeCanvas.env = "node", NodeCanvas = __decorate$n([injectable(), __metadata$c("design:paramtypes", [Object])], NodeCanvas);
 
     const nodeCanvasModule = createModule(NodeCanvas, NodeContext2d);
 
-    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;
         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$a = undefined && undefined.__metadata || function (k, v) {
+      __metadata$b = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
-      __param$a = undefined && undefined.__param || function (paramIndex, decorator) {
+      __param$b = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
           decorator(target, key, paramIndex);
         };
@@ -20036,12 +20093,12 @@
       }
       clearViewBox(color) {}
     };
-    NodeWindowHandlerContribution.env = "node", NodeWindowHandlerContribution = __decorate$l([injectable(), __param$a(0, inject(VGlobal)), __metadata$a("design:paramtypes", [Object])], NodeWindowHandlerContribution);
+    NodeWindowHandlerContribution.env = "node", NodeWindowHandlerContribution = __decorate$m([injectable(), __param$b(0, inject(VGlobal)), __metadata$b("design:paramtypes", [Object])], NodeWindowHandlerContribution);
     const nodeWindowModule = new ContainerModule(bind => {
       bind(NodeWindowHandlerContribution).toSelf(), bind(WindowHandlerContribution).toDynamicValue(ctx => ctx.container.get(NodeWindowHandlerContribution)).whenTargetNamed(NodeWindowHandlerContribution.env);
     });
 
-    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;
@@ -20127,7 +20184,7 @@
       release(...params) {}
       createOffscreenCanvas(params) {}
     };
-    NodeEnvContribution = __decorate$k([injectable()], NodeEnvContribution);
+    NodeEnvContribution = __decorate$l([injectable()], NodeEnvContribution);
 
     const nodeEnvModule = new ContainerModule(bind => {
       nodeEnvModule.isNodeBound || (nodeEnvModule.isNodeBound = !0, bind(NodeEnvContribution).toSelf().inSingletonScope(), bind(EnvContribution).toService(NodeEnvContribution));
@@ -20138,17 +20195,17 @@
     }
     loadNodeEnv.__loaded = !1;
 
-    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;
         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$9 = undefined && undefined.__metadata || function (k, v) {
+      __metadata$a = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
-      __param$9 = undefined && undefined.__param || function (paramIndex, decorator) {
+      __param$a = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
           decorator(target, key, paramIndex);
         };
@@ -20158,24 +20215,24 @@
         super(), this.canvasRenderer = canvasRenderer, this.type = "arc", this.numberType = ARC_NUMBER_TYPE;
       }
     };
-    DefaultCanvasArcPicker = __decorate$j([injectable(), __param$9(0, inject(ArcRender)), __metadata$9("design:paramtypes", [Object])], DefaultCanvasArcPicker);
+    DefaultCanvasArcPicker = __decorate$k([injectable(), __param$a(0, inject(ArcRender)), __metadata$a("design:paramtypes", [Object])], DefaultCanvasArcPicker);
 
     let loadArcPick = !1;
     const arcCanvasPickModule = new ContainerModule((bind, unbind, isBound, rebind) => {
       loadArcPick || (loadArcPick = !0, bind(CanvasArcPicker).to(DefaultCanvasArcPicker).inSingletonScope(), bind(CanvasPickerContribution).toService(CanvasArcPicker));
     });
 
-    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;
         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$8 = undefined && undefined.__metadata || function (k, v) {
+      __metadata$9 = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
-      __param$8 = undefined && undefined.__param || function (paramIndex, decorator) {
+      __param$9 = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
           decorator(target, key, paramIndex);
         };
@@ -20185,7 +20242,7 @@
         super(), this.canvasRenderer = canvasRenderer;
       }
     };
-    DefaultCanvasRectPicker = __decorate$i([injectable(), __param$8(0, inject(RectRender)), __metadata$8("design:paramtypes", [Object])], DefaultCanvasRectPicker);
+    DefaultCanvasRectPicker = __decorate$j([injectable(), __param$9(0, inject(RectRender)), __metadata$9("design:paramtypes", [Object])], DefaultCanvasRectPicker);
 
     let loadRectPick = !1;
     const rectCanvasPickModule = new ContainerModule((bind, unbind, isBound, rebind) => {
@@ -20227,17 +20284,17 @@
       }
     }
 
-    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;
         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$7 = undefined && undefined.__metadata || function (k, v) {
+      __metadata$8 = undefined && undefined.__metadata || function (k, v) {
         if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
       },
-      __param$7 = undefined && undefined.__param || function (paramIndex, decorator) {
+      __param$8 = undefined && undefined.__param || function (paramIndex, decorator) {
         return function (target, key) {
           decorator(target, key, paramIndex);
         };
@@ -20247,13 +20304,40 @@
         super(), this.canvasRenderer = canvasRenderer, this.type = "line", this.numberType = LINE_NUMBER_TYPE;
       }
     };
-    DefaultCanvasLinePicker = __decorate$h([injectable(), __param$7(0, inject(LineRender)), __metadata$7("design:paramtypes", [Object])], DefaultCanvasLinePicker);
+    DefaultCanvasLinePicker = __decorate$i([injectable(), __param$8(0, inject(LineRender)), __metadata$8("design:paramtypes", [Object])], DefaultCanvasLinePicker);
 
     let loadLinePick = !1;
     const lineCanvasPickModule = new ContainerModule((bind, unbind, isBound, rebind) => {
       loadLinePick || (loadLinePick = !0, bind(CanvasLinePicker).to(DefaultCanvasLinePicker).inSingletonScope(), bind(CanvasPickerContribution).toService(CanvasLinePicker));
     });
 
+    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;
+        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$7 = undefined && undefined.__metadata || function (k, v) {
+        if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+      },
+      __param$7 = undefined && undefined.__param || function (paramIndex, decorator) {
+        return function (target, key) {
+          decorator(target, key, paramIndex);
+        };
+      };
+    let DefaultCanvasAreaPicker = class extends PickerBase {
+      constructor(canvasRenderer) {
+        super(), this.canvasRenderer = canvasRenderer, this.type = "area", this.numberType = AREA_NUMBER_TYPE;
+      }
+    };
+    DefaultCanvasAreaPicker = __decorate$h([injectable(), __param$7(0, inject(AreaRender)), __metadata$7("design:paramtypes", [Object])], DefaultCanvasAreaPicker);
+
+    let loadAreaPick = !1;
+    const areaCanvasPickModule = new ContainerModule((bind, unbind, isBound, rebind) => {
+      loadAreaPick || (loadAreaPick = !0, bind(CanvasAreaPicker).to(DefaultCanvasAreaPicker).inSingletonScope(), bind(CanvasPickerContribution).toService(CanvasAreaPicker));
+    });
+
     class Base3dPicker extends BaseRender {
       contains(graphic, point, params) {
         const {
@@ -21151,6 +21235,12 @@
     _registerArc.__loaded = !1;
     const registerArc = _registerArc;
 
+    function _registerArea() {
+      _registerArea.__loaded || (_registerArea.__loaded = !0, registerAreaGraphic(), container.load(areaModule), container.load(browser$1 ? areaCanvasPickModule : areaMathPickModule));
+    }
+    _registerArea.__loaded = !1;
+    const registerArea = _registerArea;
+
     function _registerCircle() {
       _registerCircle.__loaded || (_registerCircle.__loaded = !0, registerCircleGraphic(), container.load(circleModule), container.load(browser$1 ? circleCanvasPickModule : circleMathPickModule));
     }
@@ -21253,7 +21343,7 @@
       return "browser" === vglobal.env ? ["pointerup", "pointerleave", "pointercancel"] : ["pointerup", "pointerleave", "pointerupoutside"];
     }
 
-    const delayMap = {
+    const delayMap$1 = {
       debounce: debounce$2,
       throttle: throttle$2
     };
@@ -21334,7 +21424,7 @@
           const preScrollRange = this.getScrollRange(),
             [currentPos, currentScrollValue] = this._computeScrollValue(e);
           this.setScrollRange([preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue], !0), this._prePos = currentPos;
-        }, this._onSliderPointerMoveWithDelay = 0 === this.attribute.delayTime ? this._onSliderPointerMove : delayMap[this.attribute.delayType](this._onSliderPointerMove, this.attribute.delayTime), this._onSliderPointerUp = e => {
+        }, this._onSliderPointerMoveWithDelay = 0 === this.attribute.delayTime ? this._onSliderPointerMove : delayMap$1[this.attribute.delayType](this._onSliderPointerMove, this.attribute.delayTime), this._onSliderPointerUp = e => {
           const {
               range: preRange,
               limitRange = [0, 1]
@@ -21383,7 +21473,7 @@
           delayType = "throttle",
           delayTime = 0
         } = this.attribute;
-        this._rail && this._rail.addEventListener("pointerdown", delayMap[delayType](this._onRailPointerDown, delayTime)), this._slider && this._slider.addEventListener("pointerdown", this._onSliderPointerDown), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
+        this._rail && this._rail.addEventListener("pointerdown", delayMap$1[delayType](this._onRailPointerDown, delayTime)), this._slider && this._slider.addEventListener("pointerdown", this._onSliderPointerDown), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
           passive: !1
         });
       }
@@ -21630,7 +21720,7 @@
       registerGroup(), registerRect(), registerSymbol(), registerRichtext(), registerText();
     }
 
-    var __rest$5 = undefined && undefined.__rest || function (s, e) {
+    var __rest$6 = undefined && undefined.__rest || function (s, e) {
       var t = {};
       for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
       if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
@@ -21684,7 +21774,7 @@
         const {
             visible: shapeVisible
           } = shape,
-          shapeStyle = __rest$5(shape, ["visible"]);
+          shapeStyle = __rest$6(shape, ["visible"]);
         if (isBoolean$6(shapeVisible)) {
           const size = (null == shapeStyle ? void 0 : shapeStyle.size) || 10,
             maxSize = isNumber$6(size) ? size : Math.max(size[0], size[1]);
@@ -21785,7 +21875,7 @@
         const {
             visible: bgVisible
           } = panel,
-          backgroundStyle = __rest$5(panel, ["visible"]);
+          backgroundStyle = __rest$6(panel, ["visible"]);
         if (visible && isBoolean$6(bgVisible)) {
           const bgRect = this.createOrUpdateChild("tag-panel", Object.assign(Object.assign({}, backgroundStyle), {
             visible: bgVisible && !!text,
@@ -21867,7 +21957,7 @@
       merge$2(theme$2.poptip, DEFAULT_THEME, defaultPoptipTheme);
     }
 
-    var __rest$4 = undefined && undefined.__rest || function (s, e) {
+    var __rest$5 = undefined && undefined.__rest || function (s, e) {
       var t = {};
       for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
       if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
@@ -21976,7 +22066,7 @@
             visible: bgVisible,
             square: square
           } = panel,
-          backgroundStyle = __rest$4(panel, ["visible", "square"]);
+          backgroundStyle = __rest$5(panel, ["visible", "square"]);
         if (square) {
           const maxWH = max(popTipWidth, poptipHeight);
           popTipWidth = maxWH;
@@ -29116,7 +29206,7 @@
       loadBasicAxis(), registerRect();
     }
 
-    var __rest$3 = undefined && undefined.__rest || function (s, e) {
+    var __rest$4 = undefined && undefined.__rest || function (s, e) {
       var t = {};
       for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
       if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
@@ -29204,7 +29294,7 @@
             style: style,
             state: state
           } = _a,
-          restLineAttrs = __rest$3(_a, ["startSymbol", "endSymbol", "style", "state"]),
+          restLineAttrs = __rest$4(_a, ["startSymbol", "endSymbol", "style", "state"]),
           lineAttrs = Object.assign({
             startSymbol: startSymbol,
             endSymbol: endSymbol,
@@ -29245,7 +29335,7 @@
             state = {},
             maxWidth: maxWidth
           } = _d,
-          restAttrs = __rest$3(_d, ["position", "space", "textStyle", "autoRotate", "shape", "background", "state", "maxWidth"]);
+          restAttrs = __rest$4(_d, ["position", "space", "textStyle", "autoRotate", "shape", "background", "state", "maxWidth"]);
         let percent = .5;
         "start" === position ? percent = 0 : "end" === position && (percent = 1);
         const {
@@ -30377,6 +30467,845 @@
       return convertDomainToTickData(scale.domain());
     };
 
+    const DEFAULT_HANDLER_PATH = "M -0.0544 0.25 C -0.0742 0.25 -0.0901 0.234 -0.0901 0.2143 L -0.0901 -0.1786 C -0.0901 -0.1983 -0.0742 -0.2143 -0.0544 -0.2143 L -0.0187 -0.2143 L -0.0187 -0.5 L 0.017 -0.5 L 0.017 -0.2143 L 0.0527 -0.2143 C 0.0724 -0.2143 0.0884 -0.1983 0.0884 -0.1786 L 0.0884 0.2143 C 0.0884 0.234 0.0724 0.25 0.0527 0.25 L 0.017 0.25 L 0.017 0.5 L -0.0187 0.5 L -0.0187 0.25 L -0.0544 0.25 Z M -0.0187 -0.1429 L -0.0544 -0.1429 L -0.0544 0.1786 L -0.0187 0.1786 L -0.0187 -0.1429 Z M 0.0527 -0.1429 L 0.017 -0.1429 L 0.017 0.1786 L 0.0527 0.1786 L 0.0527 -0.1429 Z";
+    const DEFAULT_DATA_ZOOM_ATTRIBUTES = {
+      orient: "bottom",
+      showDetail: "auto",
+      brushSelect: !0,
+      zoomLock: !1,
+      minSpan: 0,
+      maxSpan: 1,
+      delayType: "throttle",
+      delayTime: 0,
+      realTime: !0,
+      backgroundStyle: {
+        fill: "white",
+        stroke: "#D1DBEE",
+        lineWidth: 1,
+        cornerRadius: 2
+      },
+      dragMaskStyle: {
+        fill: "#B0C8F9",
+        fillOpacity: .2
+      },
+      backgroundChartStyle: {
+        area: {
+          visible: !0,
+          stroke: "#D1DBEE",
+          lineWidth: 1,
+          fill: "#F6F8FC"
+        },
+        line: {
+          visible: !0,
+          stroke: "#D1DBEE",
+          lineWidth: 1
+        }
+      },
+      selectedBackgroundStyle: {
+        fill: "#B0C8F9",
+        fillOpacity: .5
+      },
+      selectedBackgroundChartStyle: {
+        area: {
+          visible: !0,
+          stroke: "#B0C8F9",
+          lineWidth: 1,
+          fill: "#fbb934"
+        },
+        line: {
+          visible: !0,
+          stroke: "#fbb934",
+          lineWidth: 1
+        }
+      },
+      middleHandlerStyle: {
+        visible: !0,
+        background: {
+          size: 8,
+          style: {
+            fill: "white",
+            stroke: "#B0C8F9",
+            cornerRadius: 2
+          }
+        },
+        icon: {
+          size: 6,
+          fill: "white",
+          stroke: "#B0C8F9",
+          symbolType: "M 0.3 -0.5 C 0.41 -0.5 0.5 -0.41 0.5 -0.3 C 0.5 -0.3 0.5 0.3 0.5 0.3 C 0.5 0.41 0.41 0.5 0.3 0.5 C 0.3 0.5 -0.3 0.5 -0.3 0.5 C -0.41 0.5 -0.5 0.41 -0.5 0.3 C -0.5 0.3 -0.5 -0.3 -0.5 -0.3 C -0.5 -0.41 -0.41 -0.5 -0.3 -0.5 C -0.3 -0.5 0.3 -0.5 0.3 -0.5 Z",
+          lineWidth: .5
+        }
+      },
+      startHandlerStyle: {
+        visible: !0,
+        triggerMinSize: 0,
+        symbolType: DEFAULT_HANDLER_PATH,
+        fill: "white",
+        stroke: "#B0C8F9",
+        lineWidth: .5
+      },
+      endHandlerStyle: {
+        visible: !0,
+        triggerMinSize: 0,
+        symbolType: DEFAULT_HANDLER_PATH,
+        fill: "white",
+        stroke: "#B0C8F9",
+        lineWidth: .5
+      },
+      startTextStyle: {
+        padding: 4,
+        textStyle: {
+          fontSize: 10,
+          fill: "#6F6F6F"
+        }
+      },
+      endTextStyle: {
+        padding: 4,
+        textStyle: {
+          fontSize: 10,
+          fill: "#6F6F6F"
+        }
+      }
+    };
+    const DEFAULT_HANDLER_ATTR_MAP = {
+      horizontal: {
+        angle: 0,
+        strokeBoundsBuffer: 0,
+        boundsPadding: 2,
+        pickMode: "imprecise",
+        cursor: "ew-resize"
+      },
+      vertical: {
+        angle: Math.PI / 180 * 90,
+        cursor: "ns-resize",
+        boundsPadding: 2,
+        pickMode: "imprecise",
+        strokeBoundsBuffer: 0
+      }
+    };
+
+    var DataZoomActiveTag;
+    !function (DataZoomActiveTag) {
+      DataZoomActiveTag.startHandler = "startHandler", DataZoomActiveTag.endHandler = "endHandler", DataZoomActiveTag.middleHandler = "middleHandler", DataZoomActiveTag.background = "background";
+    }(DataZoomActiveTag || (DataZoomActiveTag = {}));
+
+    function loadDataZoomComponent() {
+      loadTagComponent(), registerRect(), registerSymbol(), registerArea(), registerLine();
+    }
+
+    var __rest$3 = undefined && undefined.__rest || function (s, e) {
+      var t = {};
+      for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
+      if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
+        var i = 0;
+        for (p = Object.getOwnPropertySymbols(s); i < p.length; i++) e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]) && (t[p[i]] = s[p[i]]);
+      }
+      return t;
+    };
+    const delayMap = {
+      debounce: debounce$2,
+      throttle: throttle$2
+    };
+    loadDataZoomComponent();
+    class DataZoom extends AbstractComponent {
+      setPropsFromAttrs() {
+        const {
+          start: start,
+          end: end,
+          orient: orient,
+          previewData: previewData,
+          previewPointsX: previewPointsX,
+          previewPointsY: previewPointsY,
+          previewPointsX1: previewPointsX1,
+          previewPointsY1: previewPointsY1
+        } = this.attribute;
+        start && (this.state.start = start), end && (this.state.end = end);
+        const {
+          width: width,
+          height: height
+        } = this.getLayoutAttrFromConfig();
+        this._spanCache = this.state.end - this.state.start, this._isHorizontal = "top" === orient || "bottom" === orient, this._layoutCache.max = this._isHorizontal ? width : height, this._layoutCache.attPos = this._isHorizontal ? "x" : "y", this._layoutCache.attSize = this._isHorizontal ? "width" : "height", previewData && (this._previewData = previewData), isFunction$7(previewPointsX) && (this._previewPointsX = previewPointsX), isFunction$7(previewPointsY) && (this._previewPointsY = previewPointsY), isFunction$7(previewPointsX1) && (this._previewPointsX1 = previewPointsX1), isFunction$7(previewPointsY1) && (this._previewPointsY1 = previewPointsY1);
+      }
+      constructor(attributes, options) {
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, DataZoom.defaultAttributes, attributes)), this.name = "dataZoom", this._previewData = [], this._activeState = !1, this._activeCache = {
+          startPos: {
+            x: 0,
+            y: 0
+          },
+          lastPos: {
+            x: 0,
+            y: 0
+          }
+        }, this._layoutCache = {
+          attPos: "x",
+          attSize: "width",
+          max: 0
+        }, this.state = {
+          start: 0,
+          end: 1
+        }, this._statePointToData = state => state, this._handleTouchMove = e => {
+          this._activeState && e.preventDefault();
+        }, this._onHandlerPointerDown = (e, tag) => {
+          this._clearDragEvents(), "start" === tag ? (this._activeTag = DataZoomActiveTag.startHandler, this._activeItem = this._startHandlerMask) : "end" === tag ? (this._activeTag = DataZoomActiveTag.endHandler, this._activeItem = this._endHandlerMask) : "middleRect" === tag ? (this._activeTag = DataZoomActiveTag.middleHandler, this._activeItem = this._middleHandlerRect) : "middleSymbol" === tag ? (this._activeTag = DataZoomActiveTag.middleHandler, this._activeItem = this._middleHandlerSymbol) : "background" === tag && (this._activeTag = DataZoomActiveTag.background, this._activeItem = this._background), this._activeState = !0, this._activeCache.startPos = this.eventPosToStagePos(e), this._activeCache.lastPos = this.eventPosToStagePos(e);
+          const evtTarget = "browser" === vglobal.env ? vglobal : this.stage,
+            triggers = getEndTriggersOfDrag();
+          evtTarget.addEventListener("pointermove", this._onHandlerPointerMove, {
+            capture: !0
+          }), this.addEventListener("pointermove", this._onHandlerPointerMove, {
+            capture: !0
+          }), triggers.forEach(trigger => {
+            evtTarget.addEventListener(trigger, this._onHandlerPointerUp);
+          });
+        }, this._pointerMove = e => {
+          const {
+              start: startAttr,
+              end: endAttr,
+              brushSelect: brushSelect,
+              realTime = !0
+            } = this.attribute,
+            pos = this.eventPosToStagePos(e),
+            {
+              attPos: attPos,
+              max: max
+            } = this._layoutCache,
+            dis = (pos[attPos] - this._activeCache.lastPos[attPos]) / max;
+          let {
+            start: start,
+            end: end
+          } = this.state;
+          this._activeState && (this._activeTag === DataZoomActiveTag.middleHandler ? this.moveZoomWithMiddle((this.state.start + this.state.end) / 2 + dis) : this._activeTag === DataZoomActiveTag.startHandler ? start + dis > end ? (start = end, end = start + dis, this._activeTag = DataZoomActiveTag.endHandler) : start += dis : this._activeTag === DataZoomActiveTag.endHandler && (end + dis < start ? (end = start, start = end + dis, this._activeTag = DataZoomActiveTag.startHandler) : end += dis), this._activeCache.lastPos = pos, brushSelect && this.renderDragMask()), start = Math.min(Math.max(start, 0), 1), end = Math.min(Math.max(end, 0), 1), startAttr === start && endAttr === end || (this.setStateAttr(start, end, !0), realTime && this._dispatchEvent("change", {
+            start: start,
+            end: end,
+            tag: this._activeTag
+          }));
+        }, this._onHandlerPointerMove = 0 === this.attribute.delayTime ? this._pointerMove : delayMap[this.attribute.delayType](this._pointerMove, this.attribute.delayTime), this._onHandlerPointerUp = e => {
+          const {
+            start: start,
+            end: end,
+            brushSelect: brushSelect,
+            realTime = !0
+          } = this.attribute;
+          if (this._activeState && this._activeTag === DataZoomActiveTag.background) {
+            const pos = this.eventPosToStagePos(e);
+            this.backgroundDragZoom(this._activeCache.startPos, pos);
+          }
+          this._activeState = !1, brushSelect && this.renderDragMask(), this._dispatchEvent("change", {
+            start: this.state.start,
+            end: this.state.end,
+            tag: this._activeTag
+          }), this._clearDragEvents();
+        };
+        const {
+          position: position,
+          showDetail: showDetail
+        } = attributes;
+        this._activeCache.startPos = position, this._activeCache.lastPos = position, this._showText = "auto" !== showDetail && showDetail, this.setPropsFromAttrs();
+      }
+      setAttributes(params, forceUpdateTag) {
+        super.setAttributes(params, forceUpdateTag), this.setPropsFromAttrs();
+      }
+      bindEvents() {
+        if (this.attribute.disableTriggerEvent) return void this.setAttribute("childrenPickable", !1);
+        const {
+          showDetail: showDetail,
+          brushSelect: brushSelect
+        } = this.attribute;
+        this._startHandlerMask && this._startHandlerMask.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "start")), this._endHandlerMask && this._endHandlerMask.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "end")), this._middleHandlerSymbol && this._middleHandlerSymbol.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "middleSymbol")), this._middleHandlerRect && this._middleHandlerRect.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "middleRect"));
+        const selectedTag = brushSelect ? "background" : "middleRect";
+        this._selectedBackground && this._selectedBackground.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, selectedTag)), brushSelect && this._background && this._background.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "background")), brushSelect && this._previewGroup && this._previewGroup.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "background")), this._selectedPreviewGroup && this._selectedPreviewGroup.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, selectedTag)), "auto" === showDetail && (this.addEventListener("pointerenter", this._onHandlerPointerEnter), this.addEventListener("pointerleave", this._onHandlerPointerLeave)), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
+          passive: !1
+        });
+      }
+      dragMaskSize() {
+        const {
+            position: position
+          } = this.attribute,
+          {
+            attPos: attPos,
+            max: max
+          } = this._layoutCache;
+        return this._activeCache.lastPos[attPos] - position[attPos] > max ? max + position[attPos] - this._activeCache.startPos[attPos] : this._activeCache.lastPos[attPos] - position[attPos] < 0 ? position[attPos] - this._activeCache.startPos[attPos] : this._activeCache.lastPos[attPos] - this._activeCache.startPos[attPos];
+      }
+      setStateAttr(start, end, shouldRender) {
+        const {
+            zoomLock = !1,
+            minSpan = 0,
+            maxSpan = 1
+          } = this.attribute,
+          span = end - start;
+        span !== this._spanCache && (zoomLock || span < minSpan || span > maxSpan) || (this._spanCache = span, this.state.start = start, this.state.end = end, shouldRender && this.setAttributes({
+          start: start,
+          end: end
+        }));
+      }
+      _clearDragEvents() {
+        const evtTarget = "browser" === vglobal.env ? vglobal : this.stage,
+          triggers = getEndTriggersOfDrag();
+        evtTarget.removeEventListener("pointermove", this._onHandlerPointerMove, {
+          capture: !0
+        }), triggers.forEach(trigger => {
+          evtTarget.removeEventListener(trigger, this._onHandlerPointerUp);
+        }), this.removeEventListener("pointermove", this._onHandlerPointerMove, {
+          capture: !0
+        });
+      }
+      _onHandlerPointerEnter(e) {
+        this._showText = !0, this.renderText();
+      }
+      _onHandlerPointerLeave(e) {
+        this._showText = !1, this.renderText();
+      }
+      backgroundDragZoom(startPos, endPos) {
+        const {
+            attPos: attPos,
+            max: max
+          } = this._layoutCache,
+          {
+            position: position
+          } = this.attribute,
+          startPosInComponent = startPos[attPos] - position[attPos],
+          endPosInComponent = endPos[attPos] - position[attPos],
+          start = Math.min(Math.max(Math.min(startPosInComponent, endPosInComponent) / max, 0), 1),
+          end = Math.min(Math.max(Math.max(startPosInComponent, endPosInComponent) / max, 0), 1);
+        Math.abs(start - end) < .01 ? this.moveZoomWithMiddle(start) : this.setStateAttr(start, end, !1);
+      }
+      moveZoomWithMiddle(middle) {
+        let offset = middle - (this.state.start + this.state.end) / 2;
+        0 !== offset && (offset > 0 ? this.state.end + offset > 1 && (offset = 1 - this.state.end) : offset < 0 && this.state.start + offset < 0 && (offset = -this.state.start), this.setStateAttr(this.state.start + offset, this.state.end + offset, !1));
+      }
+      renderDragMask() {
+        const {
+            dragMaskStyle: dragMaskStyle
+          } = this.attribute,
+          {
+            position: position,
+            width: width,
+            height: height
+          } = this.getLayoutAttrFromConfig();
+        this._isHorizontal ? this._dragMask = this._container.createOrUpdateChild("dragMask", Object.assign({
+          x: clamp$3(this.dragMaskSize() < 0 ? this._activeCache.lastPos.x : this._activeCache.startPos.x, position.x, position.x + width),
+          y: position.y,
+          width: this._activeState && this._activeTag === DataZoomActiveTag.background && Math.abs(this.dragMaskSize()) || 0,
+          height: height
+        }, dragMaskStyle), "rect") : this._dragMask = this._container.createOrUpdateChild("dragMask", Object.assign({
+          x: position.x,
+          y: clamp$3(this.dragMaskSize() < 0 ? this._activeCache.lastPos.y : this._activeCache.startPos.y, position.y, position.y + height),
+          width: width,
+          height: this._activeState && this._activeTag === DataZoomActiveTag.background && Math.abs(this.dragMaskSize()) || 0
+        }, dragMaskStyle), "rect");
+      }
+      isTextOverflow(componentBoundsLike, textBounds, layout) {
+        if (!textBounds) return !1;
+        if (this._isHorizontal) {
+          if ("start" === layout) {
+            if (textBounds.x1 < componentBoundsLike.x1) return !0;
+          } else if (textBounds.x2 > componentBoundsLike.x2) return !0;
+        } else if ("start" === layout) {
+          if (textBounds.y1 < componentBoundsLike.y1) return !0;
+        } else if (textBounds.y2 > componentBoundsLike.y2) return !0;
+        return !1;
+      }
+      setTextAttr(startTextBounds, endTextBounds) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const {
+            startTextStyle: startTextStyle,
+            endTextStyle: endTextStyle
+          } = this.attribute,
+          {
+            formatMethod: startTextFormat
+          } = startTextStyle,
+          restStartTextStyle = __rest$3(startTextStyle, ["formatMethod"]),
+          {
+            formatMethod: endTextFormat
+          } = endTextStyle,
+          restEndTextStyle = __rest$3(endTextStyle, ["formatMethod"]),
+          {
+            start: start,
+            end: end
+          } = this.state;
+        this._startValue = this._statePointToData(start), this._endValue = this._statePointToData(end);
+        const {
+            position: position,
+            width: width,
+            height: height
+          } = this.getLayoutAttrFromConfig(),
+          startTextValue = startTextFormat ? startTextFormat(this._startValue) : this._startValue,
+          endTextValue = endTextFormat ? endTextFormat(this._endValue) : this._endValue,
+          componentBoundsLike = {
+            x1: position.x,
+            y1: position.y,
+            x2: position.x + width,
+            y2: position.y + height
+          };
+        let startTextPosition, endTextPosition, startTextAlignStyle, endTextAlignStyle;
+        this._isHorizontal ? (startTextPosition = {
+          x: position.x + start * width,
+          y: position.y + height / 2
+        }, endTextPosition = {
+          x: position.x + end * width,
+          y: position.y + height / 2
+        }, startTextAlignStyle = {
+          textAlign: this.isTextOverflow(componentBoundsLike, startTextBounds, "start") ? "left" : "right",
+          textBaseline: null !== (_b = null === (_a = null == restStartTextStyle ? void 0 : restStartTextStyle.textStyle) || void 0 === _a ? void 0 : _a.textBaseline) && void 0 !== _b ? _b : "middle"
+        }, endTextAlignStyle = {
+          textAlign: this.isTextOverflow(componentBoundsLike, endTextBounds, "end") ? "right" : "left",
+          textBaseline: null !== (_d = null === (_c = null == restEndTextStyle ? void 0 : restEndTextStyle.textStyle) || void 0 === _c ? void 0 : _c.textBaseline) && void 0 !== _d ? _d : "middle"
+        }) : (startTextPosition = {
+          x: position.x + width / 2,
+          y: position.y + start * height
+        }, endTextPosition = {
+          x: position.x + width / 2,
+          y: position.y + end * height
+        }, startTextAlignStyle = {
+          textAlign: null !== (_f = null === (_e = null == restStartTextStyle ? void 0 : restStartTextStyle.textStyle) || void 0 === _e ? void 0 : _e.textAlign) && void 0 !== _f ? _f : "center",
+          textBaseline: this.isTextOverflow(componentBoundsLike, startTextBounds, "start") ? "top" : "bottom"
+        }, endTextAlignStyle = {
+          textAlign: null !== (_h = null === (_g = null == restEndTextStyle ? void 0 : restEndTextStyle.textStyle) || void 0 === _g ? void 0 : _g.textAlign) && void 0 !== _h ? _h : "center",
+          textBaseline: this.isTextOverflow(componentBoundsLike, endTextBounds, "end") ? "bottom" : "top"
+        }), this._startText = this.maybeAddLabel(this._container, merge$2({}, restStartTextStyle, {
+          text: startTextValue,
+          x: startTextPosition.x,
+          y: startTextPosition.y,
+          visible: this._showText,
+          pickable: !1,
+          childrenPickable: !1,
+          textStyle: startTextAlignStyle
+        }), `data-zoom-start-text-${position}`), this._endText = this.maybeAddLabel(this._container, merge$2({}, restEndTextStyle, {
+          text: endTextValue,
+          x: endTextPosition.x,
+          y: endTextPosition.y,
+          visible: this._showText,
+          pickable: !1,
+          childrenPickable: !1,
+          textStyle: endTextAlignStyle
+        }), `data-zoom-end-text-${position}`);
+      }
+      renderText() {
+        let startTextBounds = null,
+          endTextBounds = null;
+        this.setTextAttr(startTextBounds, endTextBounds), startTextBounds = this._startText.AABBBounds, endTextBounds = this._endText.AABBBounds, this.setTextAttr(startTextBounds, endTextBounds), startTextBounds = this._startText.AABBBounds, endTextBounds = this._endText.AABBBounds;
+        const {
+            x1: x1,
+            x2: x2,
+            y1: y1,
+            y2: y2
+          } = startTextBounds,
+          {
+            dx: startTextDx = 0,
+            dy: startTextDy = 0
+          } = this.attribute.startTextStyle;
+        if (new Bounds$1().set(x1, y1, x2, y2).intersects(endTextBounds)) {
+          const direction = "bottom" === this.attribute.orient || "right" === this.attribute.orient ? -1 : 1;
+          if (this._isHorizontal) {
+            const boundsYDiff = Math.abs(endTextBounds.y1 - endTextBounds.y2);
+            this._startText.setAttribute("dy", startTextDy + direction * (Number.isFinite(boundsYDiff) ? boundsYDiff : 0));
+          } else {
+            const boundsXDiff = Math.abs(endTextBounds.x1 - endTextBounds.x2);
+            this._startText.setAttribute("dx", startTextDx + direction * (Number.isFinite(boundsXDiff) ? boundsXDiff : 0));
+          }
+        } else this._isHorizontal ? this._startText.setAttribute("dy", startTextDy) : this._startText.setAttribute("dx", startTextDx);
+      }
+      getLayoutAttrFromConfig() {
+        var _a, _b, _c, _d, _e, _f;
+        if (this._layoutAttrFromConfig) return this._layoutAttrFromConfig;
+        const {
+            position: positionConfig,
+            size: size,
+            orient: orient,
+            middleHandlerStyle = {},
+            startHandlerStyle = {},
+            endHandlerStyle = {},
+            backgroundStyle = {}
+          } = this.attribute,
+          {
+            width: widthConfig,
+            height: heightConfig
+          } = size,
+          middleHandlerSize = null !== (_b = null === (_a = middleHandlerStyle.background) || void 0 === _a ? void 0 : _a.size) && void 0 !== _b ? _b : 10;
+        let width, height, position;
+        middleHandlerStyle.visible ? this._isHorizontal ? (width = widthConfig, height = heightConfig - middleHandlerSize, position = {
+          x: positionConfig.x,
+          y: positionConfig.y + middleHandlerSize
+        }) : (width = widthConfig - middleHandlerSize, height = heightConfig, position = {
+          x: positionConfig.x + ("left" === orient ? middleHandlerSize : 0),
+          y: positionConfig.y
+        }) : (width = widthConfig, height = heightConfig, position = positionConfig);
+        const startHandlerSize = null !== (_c = startHandlerStyle.size) && void 0 !== _c ? _c : this._isHorizontal ? height : width,
+          endHandlerSize = null !== (_d = endHandlerStyle.size) && void 0 !== _d ? _d : this._isHorizontal ? height : width;
+        return startHandlerStyle.visible && (this._isHorizontal ? (width -= (startHandlerSize + endHandlerSize) / 2, position = {
+          x: position.x + startHandlerSize / 2,
+          y: position.y
+        }) : (height -= (startHandlerSize + endHandlerSize) / 2, position = {
+          x: position.x,
+          y: position.y + startHandlerSize / 2
+        })), height += null !== (_e = backgroundStyle.lineWidth / 2) && void 0 !== _e ? _e : 1, width += null !== (_f = backgroundStyle.lineWidth / 2) && void 0 !== _f ? _f : 1, this._layoutAttrFromConfig = {
+          position: position,
+          width: width,
+          height: height
+        }, this._layoutAttrFromConfig;
+      }
+      render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9;
+        this._layoutAttrFromConfig = null;
+        const {
+            orient: orient,
+            backgroundStyle: backgroundStyle,
+            backgroundChartStyle = {},
+            selectedBackgroundStyle = {},
+            selectedBackgroundChartStyle = {},
+            middleHandlerStyle = {},
+            startHandlerStyle = {},
+            endHandlerStyle = {},
+            brushSelect: brushSelect,
+            zoomLock: zoomLock
+          } = this.attribute,
+          {
+            start: start,
+            end: end
+          } = this.state,
+          {
+            position: position,
+            width: width,
+            height: height
+          } = this.getLayoutAttrFromConfig(),
+          startHandlerMinSize = null !== (_a = startHandlerStyle.triggerMinSize) && void 0 !== _a ? _a : 40,
+          endHandlerMinSize = null !== (_b = endHandlerStyle.triggerMinSize) && void 0 !== _b ? _b : 40,
+          group = this.createOrUpdateChild("dataZoom-container", {}, "group");
+        if (this._container = group, this._background = group.createOrUpdateChild("background", Object.assign(Object.assign({
+          x: position.x,
+          y: position.y,
+          width: width,
+          height: height,
+          cursor: brushSelect ? "crosshair" : "auto"
+        }, backgroundStyle), {
+          pickable: !zoomLock && (null === (_c = backgroundStyle.pickable) || void 0 === _c || _c)
+        }), "rect"), (null === (_d = backgroundChartStyle.line) || void 0 === _d ? void 0 : _d.visible) && this.setPreviewAttributes("line", group), (null === (_e = backgroundChartStyle.area) || void 0 === _e ? void 0 : _e.visible) && this.setPreviewAttributes("area", group), brushSelect && this.renderDragMask(), this._isHorizontal ? this._selectedBackground = group.createOrUpdateChild("selectedBackground", Object.assign(Object.assign({
+          x: position.x + start * width,
+          y: position.y,
+          width: (end - start) * width,
+          height: height,
+          cursor: brushSelect ? "crosshair" : "move"
+        }, selectedBackgroundStyle), {
+          pickable: !zoomLock && (null === (_f = selectedBackgroundChartStyle.pickable) || void 0 === _f || _f)
+        }), "rect") : this._selectedBackground = group.createOrUpdateChild("selectedBackground", Object.assign(Object.assign({
+          x: position.x,
+          y: position.y + start * height,
+          width: width,
+          height: (end - start) * height,
+          cursor: brushSelect ? "crosshair" : "move"
+        }, selectedBackgroundStyle), {
+          pickable: !zoomLock && (null === (_g = selectedBackgroundStyle.pickable) || void 0 === _g || _g)
+        }), "rect"), (null === (_h = selectedBackgroundChartStyle.line) || void 0 === _h ? void 0 : _h.visible) && this.setSelectedPreviewAttributes("line", group), (null === (_j = selectedBackgroundChartStyle.area) || void 0 === _j ? void 0 : _j.visible) && this.setSelectedPreviewAttributes("area", group), this._isHorizontal) {
+          if (middleHandlerStyle.visible) {
+            const middleHandlerBackgroundSize = (null === (_k = middleHandlerStyle.background) || void 0 === _k ? void 0 : _k.size) || 10;
+            this._middleHandlerRect = group.createOrUpdateChild("middleHandlerRect", Object.assign(Object.assign({
+              x: position.x + start * width,
+              y: position.y - middleHandlerBackgroundSize,
+              width: (end - start) * width,
+              height: middleHandlerBackgroundSize
+            }, null === (_l = middleHandlerStyle.background) || void 0 === _l ? void 0 : _l.style), {
+              pickable: !zoomLock && (null === (_p = null === (_o = null === (_m = middleHandlerStyle.background) || void 0 === _m ? void 0 : _m.style) || void 0 === _o ? void 0 : _o.pickable) || void 0 === _p || _p)
+            }), "rect"), this._middleHandlerSymbol = group.createOrUpdateChild("middleHandlerSymbol", Object.assign(Object.assign({
+              x: position.x + (start + end) / 2 * width,
+              y: position.y - middleHandlerBackgroundSize / 2,
+              strokeBoundsBuffer: 0,
+              angle: 0,
+              symbolType: null !== (_r = null === (_q = middleHandlerStyle.icon) || void 0 === _q ? void 0 : _q.symbolType) && void 0 !== _r ? _r : "square"
+            }, middleHandlerStyle.icon), {
+              pickable: !zoomLock && (null === (_s = middleHandlerStyle.icon.pickable) || void 0 === _s || _s)
+            }), "symbol");
+          }
+          this._startHandler = group.createOrUpdateChild("startHandler", Object.assign(Object.assign(Object.assign({
+            x: position.x + start * width,
+            y: position.y + height / 2,
+            size: height,
+            symbolType: null !== (_t = startHandlerStyle.symbolType) && void 0 !== _t ? _t : "square"
+          }, DEFAULT_HANDLER_ATTR_MAP.horizontal), startHandlerStyle), {
+            pickable: !zoomLock && (null === (_u = startHandlerStyle.pickable) || void 0 === _u || _u)
+          }), "symbol"), this._endHandler = group.createOrUpdateChild("endHandler", Object.assign(Object.assign(Object.assign({
+            x: position.x + end * width,
+            y: position.y + height / 2,
+            size: height,
+            symbolType: null !== (_v = endHandlerStyle.symbolType) && void 0 !== _v ? _v : "square"
+          }, DEFAULT_HANDLER_ATTR_MAP.horizontal), endHandlerStyle), {
+            pickable: !zoomLock && (null === (_w = endHandlerStyle.pickable) || void 0 === _w || _w)
+          }), "symbol");
+          const startHandlerWidth = Math.max(this._startHandler.AABBBounds.width(), startHandlerMinSize),
+            startHandlerHeight = Math.max(this._startHandler.AABBBounds.height(), startHandlerMinSize),
+            endHandlerWidth = Math.max(this._endHandler.AABBBounds.width(), endHandlerMinSize),
+            endHandlerHeight = Math.max(this._endHandler.AABBBounds.height(), endHandlerMinSize);
+          this._startHandlerMask = group.createOrUpdateChild("startHandlerMask", Object.assign(Object.assign({
+            x: position.x + start * width - startHandlerWidth / 2,
+            y: position.y + height / 2 - startHandlerHeight / 2,
+            width: startHandlerWidth,
+            height: startHandlerHeight,
+            fill: "white",
+            fillOpacity: 0,
+            zIndex: 999
+          }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
+            pickable: !zoomLock
+          }), "rect"), this._endHandlerMask = group.createOrUpdateChild("endHandlerMask", Object.assign(Object.assign({
+            x: position.x + end * width - endHandlerWidth / 2,
+            y: position.y + height / 2 - endHandlerHeight / 2,
+            width: endHandlerWidth,
+            height: endHandlerHeight,
+            fill: "white",
+            fillOpacity: 0,
+            zIndex: 999
+          }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
+            pickable: !zoomLock
+          }), "rect");
+        } else {
+          if (middleHandlerStyle.visible) {
+            const middleHandlerBackgroundSize = (null === (_x = middleHandlerStyle.background) || void 0 === _x ? void 0 : _x.size) || 10;
+            this._middleHandlerRect = group.createOrUpdateChild("middleHandlerRect", Object.assign(Object.assign({
+              x: "left" === orient ? position.x - middleHandlerBackgroundSize : position.x + width,
+              y: position.y + start * height,
+              width: middleHandlerBackgroundSize,
+              height: (end - start) * height
+            }, null === (_y = middleHandlerStyle.background) || void 0 === _y ? void 0 : _y.style), {
+              pickable: !zoomLock && (null === (_1 = null === (_0 = null === (_z = middleHandlerStyle.background) || void 0 === _z ? void 0 : _z.style) || void 0 === _0 ? void 0 : _0.pickable) || void 0 === _1 || _1)
+            }), "rect"), this._middleHandlerSymbol = group.createOrUpdateChild("middleHandlerSymbol", Object.assign(Object.assign({
+              x: "left" === orient ? position.x - middleHandlerBackgroundSize / 2 : position.x + width + middleHandlerBackgroundSize / 2,
+              y: position.y + (start + end) / 2 * height,
+              angle: Math.PI / 180 * 90,
+              symbolType: null !== (_3 = null === (_2 = middleHandlerStyle.icon) || void 0 === _2 ? void 0 : _2.symbolType) && void 0 !== _3 ? _3 : "square",
+              strokeBoundsBuffer: 0
+            }, middleHandlerStyle.icon), {
+              pickable: !zoomLock && (null === (_5 = null === (_4 = middleHandlerStyle.icon) || void 0 === _4 ? void 0 : _4.pickable) || void 0 === _5 || _5)
+            }), "symbol");
+          }
+          this._startHandler = group.createOrUpdateChild("startHandler", Object.assign(Object.assign(Object.assign({
+            x: position.x + width / 2,
+            y: position.y + start * height,
+            size: width,
+            symbolType: null !== (_6 = startHandlerStyle.symbolType) && void 0 !== _6 ? _6 : "square"
+          }, DEFAULT_HANDLER_ATTR_MAP.vertical), startHandlerStyle), {
+            pickable: !zoomLock && (null === (_7 = startHandlerStyle.pickable) || void 0 === _7 || _7)
+          }), "symbol"), this._endHandler = group.createOrUpdateChild("endHandler", Object.assign(Object.assign(Object.assign({
+            x: position.x + width / 2,
+            y: position.y + end * height,
+            size: width,
+            symbolType: null !== (_8 = endHandlerStyle.symbolType) && void 0 !== _8 ? _8 : "square"
+          }, DEFAULT_HANDLER_ATTR_MAP.vertical), endHandlerStyle), {
+            pickable: !zoomLock && (null === (_9 = endHandlerStyle.pickable) || void 0 === _9 || _9)
+          }), "symbol");
+          const startHandlerWidth = Math.max(this._startHandler.AABBBounds.width(), startHandlerMinSize),
+            startHandlerHeight = Math.max(this._startHandler.AABBBounds.height(), startHandlerMinSize),
+            endHandlerWidth = Math.max(this._endHandler.AABBBounds.width(), endHandlerMinSize),
+            endHandlerHeight = Math.max(this._endHandler.AABBBounds.height(), endHandlerMinSize);
+          this._startHandlerMask = group.createOrUpdateChild("startHandlerMask", Object.assign(Object.assign({
+            x: position.x + width / 2 + startHandlerWidth / 2,
+            y: position.y + start * height - startHandlerHeight / 2,
+            width: endHandlerHeight,
+            height: endHandlerWidth,
+            fill: "white",
+            fillOpacity: 0,
+            zIndex: 999
+          }, DEFAULT_HANDLER_ATTR_MAP.vertical), {
+            pickable: !zoomLock
+          }), "rect"), this._endHandlerMask = group.createOrUpdateChild("endHandlerMask", Object.assign(Object.assign({
+            x: position.x + width / 2 + endHandlerWidth / 2,
+            y: position.y + end * height - endHandlerHeight / 2,
+            width: endHandlerHeight,
+            height: endHandlerWidth,
+            fill: "white",
+            fillOpacity: 0,
+            zIndex: 999
+          }, DEFAULT_HANDLER_ATTR_MAP.vertical), {
+            pickable: !zoomLock
+          }), "rect");
+        }
+        this._showText && this.renderText();
+      }
+      computeBasePoints() {
+        const {
+            orient: orient
+          } = this.attribute,
+          {
+            position: position,
+            width: width,
+            height: height
+          } = this.getLayoutAttrFromConfig();
+        let basePointStart, basePointEnd;
+        return this._isHorizontal ? (basePointStart = [{
+          x: position.x,
+          y: position.y + height
+        }], basePointEnd = [{
+          x: position.x + width,
+          y: position.y + height
+        }]) : "left" === orient ? (basePointStart = [{
+          x: position.x + width,
+          y: position.y
+        }], basePointEnd = [{
+          x: position.x + width,
+          y: position.y + height
+        }]) : (basePointStart = [{
+          x: position.x,
+          y: position.y + height
+        }], basePointEnd = [{
+          x: position.x,
+          y: position.y
+        }]), {
+          basePointStart: basePointStart,
+          basePointEnd: basePointEnd
+        };
+      }
+      simplifyPoints(points) {
+        var _a;
+        if (points.length > 1e4) {
+          const tolerance = null !== (_a = this.attribute.tolerance) && void 0 !== _a ? _a : this._previewData.length / 1e4;
+          return flatten_simplify(points, tolerance, !1);
+        }
+        return points;
+      }
+      getPreviewLinePoints() {
+        let previewPoints = this._previewData.map(d => ({
+          x: this._previewPointsX && this._previewPointsX(d),
+          y: this._previewPointsY && this._previewPointsY(d)
+        }));
+        if (0 === previewPoints.length) return previewPoints;
+        previewPoints = this.simplifyPoints(previewPoints);
+        const {
+          basePointStart: basePointStart,
+          basePointEnd: basePointEnd
+        } = this.computeBasePoints();
+        return basePointStart.concat(previewPoints).concat(basePointEnd);
+      }
+      getPreviewAreaPoints() {
+        let previewPoints = this._previewData.map(d => ({
+          x: this._previewPointsX && this._previewPointsX(d),
+          y: this._previewPointsY && this._previewPointsY(d),
+          x1: this._previewPointsX1 && this._previewPointsX1(d),
+          y1: this._previewPointsY1 && this._previewPointsY1(d)
+        }));
+        if (0 === previewPoints.length) return previewPoints;
+        previewPoints = this.simplifyPoints(previewPoints);
+        const {
+          basePointStart: basePointStart,
+          basePointEnd: basePointEnd
+        } = this.computeBasePoints();
+        return basePointStart.concat(previewPoints).concat(basePointEnd);
+      }
+      setPreviewAttributes(type, group) {
+        this._previewGroup || (this._previewGroup = group.createOrUpdateChild("previewGroup", {
+          pickable: !1
+        }, "group")), "line" === type ? this._previewLine = this._previewGroup.createOrUpdateChild("previewLine", {}, "line") : this._previewArea = this._previewGroup.createOrUpdateChild("previewArea", {
+          curveType: "basis"
+        }, "area");
+        const {
+          backgroundChartStyle = {}
+        } = this.attribute;
+        "line" === type && this._previewLine.setAttributes(Object.assign({
+          points: this.getPreviewLinePoints(),
+          curveType: "basis",
+          pickable: !1
+        }, backgroundChartStyle.line)), "area" === type && this._previewArea.setAttributes(Object.assign({
+          points: this.getPreviewAreaPoints(),
+          curveType: "basis",
+          pickable: !1
+        }, backgroundChartStyle.area));
+      }
+      setSelectedPreviewAttributes(type, group) {
+        this._selectedPreviewGroupClip || (this._selectedPreviewGroupClip = group.createOrUpdateChild("selectedPreviewGroupClip", {
+          pickable: !1
+        }, "group"), this._selectedPreviewGroup = this._selectedPreviewGroupClip.createOrUpdateChild("selectedPreviewGroup", {}, "group")), "line" === type ? this._selectedPreviewLine = this._selectedPreviewGroup.createOrUpdateChild("selectedPreviewLine", {}, "line") : this._selectedPreviewArea = this._selectedPreviewGroup.createOrUpdateChild("selectedPreviewArea", {
+          curveType: "basis"
+        }, "area");
+        const {
+            selectedBackgroundChartStyle = {}
+          } = this.attribute,
+          {
+            start: start,
+            end: end
+          } = this.state,
+          {
+            position: position,
+            width: width,
+            height: height
+          } = this.getLayoutAttrFromConfig();
+        this._selectedPreviewGroupClip.setAttributes({
+          x: this._isHorizontal ? position.x + start * width : position.x,
+          y: this._isHorizontal ? position.y : position.y + start * height,
+          width: this._isHorizontal ? (end - start) * width : width,
+          height: this._isHorizontal ? height : (end - start) * height,
+          clip: !0,
+          pickable: !1
+        }), this._selectedPreviewGroup.setAttributes({
+          x: -(this._isHorizontal ? position.x + start * width : position.x),
+          y: -(this._isHorizontal ? position.y : position.y + start * height),
+          width: this._isHorizontal ? (end - start) * width : width,
+          height: this._isHorizontal ? height : (end - start) * height,
+          pickable: !1
+        }), "line" === type && this._selectedPreviewLine.setAttributes(Object.assign({
+          points: this.getPreviewLinePoints(),
+          curveType: "basis",
+          pickable: !1
+        }, selectedBackgroundChartStyle.line)), "area" === type && this._selectedPreviewArea.setAttributes(Object.assign({
+          points: this.getPreviewAreaPoints(),
+          curveType: "basis",
+          pickable: !1
+        }, selectedBackgroundChartStyle.area));
+      }
+      maybeAddLabel(container, attributes, name) {
+        let labelShape = this.find(node => node.name === name, !0);
+        return labelShape ? labelShape.setAttributes(attributes) : (labelShape = new Tag$1(attributes), labelShape.name = name), container.add(labelShape), labelShape;
+      }
+      setStartAndEnd(start, end) {
+        const {
+          start: startAttr,
+          end: endAttr
+        } = this.attribute;
+        isValid$5(start) && isValid$5(end) && (start !== this.state.start || end !== this.state.end) && (this.state.start = start, this.state.end = end, startAttr === this.state.start && endAttr === this.state.end || (this.setStateAttr(start, end, !0), this._dispatchEvent("change", {
+          start: start,
+          end: end,
+          tag: this._activeTag
+        })));
+      }
+      setPreviewData(data) {
+        this._previewData = data;
+      }
+      setText(text, tag) {
+        "start" === tag ? this._startText.setAttribute("text", text) : this._endText.setAttribute("text", text);
+      }
+      getStartValue() {
+        return this._startValue;
+      }
+      getEndTextValue() {
+        return this._endValue;
+      }
+      getMiddleHandlerSize() {
+        var _a, _b, _c, _d;
+        const {
+            middleHandlerStyle = {}
+          } = this.attribute,
+          middleHandlerRectSize = null !== (_b = null === (_a = middleHandlerStyle.background) || void 0 === _a ? void 0 : _a.size) && void 0 !== _b ? _b : 10,
+          middleHandlerSymbolSize = null !== (_d = null === (_c = middleHandlerStyle.icon) || void 0 === _c ? void 0 : _c.size) && void 0 !== _d ? _d : 10;
+        return Math.max(middleHandlerRectSize, ...array$1(middleHandlerSymbolSize));
+      }
+      setPreviewPointsX(callback) {
+        isFunction$7(callback) && (this._previewPointsX = callback);
+      }
+      setPreviewPointsY(callback) {
+        isFunction$7(callback) && (this._previewPointsY = callback);
+      }
+      setPreviewPointsX1(callback) {
+        isFunction$7(callback) && (this._previewPointsX1 = callback);
+      }
+      setPreviewPointsY1(callback) {
+        isFunction$7(callback) && (this._previewPointsY1 = callback);
+      }
+      setStatePointToData(callback) {
+        isFunction$7(callback) && (this._statePointToData = callback);
+      }
+      release(all) {
+        super.release(all), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
+          passive: !1
+        }), this._clearDragEvents();
+      }
+    }
+    DataZoom.defaultAttributes = DEFAULT_DATA_ZOOM_ATTRIBUTES;
+
     function loadPagerComponent() {
       registerGroup(), registerSymbol(), registerText();
     }
@@ -34656,6 +35585,19 @@
 
     function handleWhell$1(event, state, gantt, isWheelEvent = true) {
         let { deltaX, deltaY } = event;
+        if (event.ctrlKey) {
+            event.preventDefault();
+            if (!gantt.zoomScaleManager) {
+                return;
+            }
+            const rect = gantt.element.getBoundingClientRect();
+            const mouseX = event.clientX - rect.left;
+            const zoomIn = event.deltaY < 0;
+            const zoomStep = gantt.parsedOptions.zoom?.step || 0.015;
+            const factor = zoomIn ? 1 + zoomStep : 1 - zoomStep;
+            gantt.zoomByFactor(factor, true, mouseX);
+            return;
+        }
         if (event.shiftKey && event.deltaY) {
             deltaX = deltaY;
             deltaY = 0;
@@ -58119,7 +59061,7 @@
       }
       constructor(container, options = {}) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
-        if (super(), this.showFrozenIcon = !0, this.version = "1.20.3", this.id = `VTable${Date.now()}`, this.isReleased = !1, this._chartEventMap = {}, this.throttleInvalidate = throttle2(this.render.bind(this), 200), "node" === Env.mode ? (options = container, container = null) : container instanceof HTMLElement || (options = container, container = container.container ? container.container : null), !container && "node" !== options.mode && !options.canvas) throw new Error("vtable's container is undefined");
+        if (super(), this.showFrozenIcon = !0, this.version = "1.21.0", this.id = `VTable${Date.now()}`, this.isReleased = !1, this._chartEventMap = {}, this.throttleInvalidate = throttle2(this.render.bind(this), 200), "node" === Env.mode ? (options = container, container = null) : container instanceof HTMLElement || (options = container, container = container.container ? container.container : null), !container && "node" !== options.mode && !options.canvas) throw new Error("vtable's container is undefined");
         this.pluginManager = new PluginManager$1(this, options), this.fireListeners(TABLE_EVENT_TYPE.BEFORE_INIT, {
           options: options,
           container: container
@@ -72782,6 +73724,9 @@
         gantt.taskListTableInstance.setCanvasSize(gantt.taskTableWidth, gantt.tableNoFrameHeight + gantt.parsedOptions.outerFrameStyle.borderLineWidth * 2);
         gantt._updateSize();
         updateSplitLineAndResizeLine(gantt);
+        if (gantt.zoomScaleManager) {
+            gantt.zoomScaleManager.handleTableWidthChange();
+        }
     }
 
     class StateManager {
@@ -73439,6 +74384,9 @@
         }
         endResizeTableWidth() {
             this.resizeTableWidth.resizing = false;
+            if (this._gantt.zoomScaleManager) {
+                this._gantt.zoomScaleManager.handleTableWidthChange();
+            }
         }
         dealResizeTableWidth(e) {
             if (!this.resizeTableWidth.resizing) {
@@ -73463,6 +74411,14 @@
                     : '0px';
                 this._gantt._resize();
                 this.resizeTableWidth.lastX = e.pageX;
+                if (this._gantt.zoomScaleManager && !this.resizeTableWidth.updateTimeout) {
+                    this.resizeTableWidth.updateTimeout = setTimeout(() => {
+                        if (this._gantt.zoomScaleManager) {
+                            this._gantt.zoomScaleManager.handleTableWidthChange();
+                        }
+                        this.resizeTableWidth.updateTimeout = null;
+                    }, 50);
+                }
             }
         }
         showTaskBarHover() {
@@ -74020,6 +74976,843 @@
         }
     }
 
+    class DataZoomIntegration {
+        gantt;
+        dataZoomAxis;
+        stage;
+        canvas;
+        isUpdatingFromDataZoom = false;
+        isUpdatingFromGantt = false;
+        lastDataZoomState = { start: 0.2, end: 0.5 };
+        cleanupCallbacks = [];
+        resizeTimeout = null;
+        isInitializing = true;
+        constructor(gantt, config) {
+            this.gantt = gantt;
+            this.initializeDataZoom(config);
+            this.setupEventListeners();
+            this.updateDataZoomLimits();
+        }
+        getContainerId(providedId) {
+            if (providedId) {
+                return providedId;
+            }
+            const ganttContainer = this.gantt.container;
+            if (ganttContainer?.id) {
+                return ganttContainer.id;
+            }
+            const ganttElements = document.querySelectorAll('[id*="gantt"], [id*="table"], [class*="gantt"], [class*="vtable"]');
+            if (ganttElements.length > 0) {
+                const element = ganttElements[0];
+                if (element.id) {
+                    return element.id;
+                }
+            }
+            return 'vTable';
+        }
+        initializeDataZoom(config) {
+            const containerId = this.getContainerId(config.containerId);
+            const container = document.getElementById(containerId);
+            if (!container) {
+                throw new Error(`DataZoom container with ID "${containerId}" not found`);
+            }
+            const ganttContainer = this.gantt.container;
+            if (!ganttContainer) {
+                throw new Error('Gantt container not found');
+            }
+            const taskTableWidth = this.gantt.taskTableWidth || 0;
+            const ganttContainerWidth = ganttContainer.offsetWidth || 1000;
+            const defaultWidth = ganttContainerWidth - taskTableWidth;
+            const defaultX = this.gantt.taskTableWidth || 0;
+            const { start = 0.2, end = 0.5, width = defaultWidth, height = 30, x = defaultX, y = 0, delayTime = 10 } = config;
+            const containerStyle = window.getComputedStyle(ganttContainer);
+            if (containerStyle.position === 'static') {
+                ganttContainer.style.position = 'relative';
+            }
+            const dataZoomWrapper = document.createElement('div');
+            dataZoomWrapper.id = 'dataZoomWrapper';
+            dataZoomWrapper.style.cssText = `
+      width: 100%;
+      height: ${height}px;
+      position: absolute;
+      bottom: ${y}px;
+      left: 0px;
+      background: transparent;
+      overflow: visible;
+      pointer-events: none;
+      z-index: 1000;
+    `;
+            this.canvas = document.createElement('canvas');
+            this.canvas.id = 'dataZoomCanvas';
+            this.canvas.width = width;
+            this.canvas.height = height;
+            this.canvas.style.cssText = `
+      width: ${width}px;
+      height: ${height}px;
+      position: absolute;
+      top: 0px;
+      left: ${x}px;
+      pointer-events: auto;
+    `;
+            dataZoomWrapper.appendChild(this.canvas);
+            ganttContainer.appendChild(dataZoomWrapper);
+            this.stage = createStage({
+                canvas: this.canvas,
+                width,
+                height,
+                autoRender: true
+            });
+            this.dataZoomAxis = new DataZoom({
+                start,
+                end,
+                position: { x: 0, y: 0 },
+                size: { width, height: height - 1 },
+                showDetail: false,
+                delayTime,
+                brushSelect: false,
+                backgroundChartStyle: {
+                    line: { visible: true, stroke: '#ddd' },
+                    area: { visible: true, fill: '#f5f5f5' }
+                },
+                startHandlerStyle: {
+                    symbolType: 'M-0.5-2.4h0.9c0.4,0,0.7,0.3,0.7,0.7v3.3c0,0.4-0.3,0.7-0.7,0.7h-0.9c-0.4,0-0.7-0.3-0.7-0.7v-3.3\n' +
+                        'C-1.2-2-0.9-2.4-0.5-2.4z M-0.4-1.4L-0.4-1.4c0,0,0,0.1,0,0.1v2.6c0,0.1,0,0.1,0,0.1l0,0c0,0,0-0.1,0-0.1' +
+                        'v-2.6\nC-0.4-1.4-0.4-1.4-0.4-1.4z M0.3-1.4L0.3-1.4c0,0,0,0.1,0,0.1v2.6c0,0.1,0,0.1,0,0.1l0,0c0,0,' +
+                        '0-0.1,0-0.1v-2.6\nC0.3-1.4,0.3-1.4,0.3-1.4z;',
+                    fill: '#fff',
+                    size: config.width ?? 30,
+                    stroke: '#c2c8cf',
+                    lineWidth: 1
+                },
+                endHandlerStyle: {
+                    symbolType: 'M-0.5-2.4h0.9c0.4,0,0.7,0.3,0.7,0.7v3.3c0,0.4-0.3,0.7-0.7,0.7h-0.9c-0.4,0-0.7-0.3-0.7-0.7v-3.3\n' +
+                        'C-1.2-2-0.9-2.4-0.5-2.4z M-0.4-1.4L-0.4-1.4c0,0,0,0.1,0,0.1v2.6c0,0.1,0,0.1,0,0.1l0,0c0,0,0-0.1,0-0.1' +
+                        'v-2.6\nC-0.4-1.4-0.4-1.4-0.4-1.4z M0.3-1.4L0.3-1.4c0,0,0,0.1,0,0.1v2.6c0,0.1,0,0.1,0,0.1l0,0c0,0,' +
+                        '0-0.1,0-0.1v-2.6\nC0.3-1.4,0.3-1.4,0.3-1.4z;',
+                    fill: '#fff',
+                    size: config.width ?? 30,
+                    stroke: '#c2c8cf',
+                    lineWidth: 1
+                },
+                middleHandlerStyle: {
+                    visible: false
+                }
+            });
+            this.stage.defaultLayer.add(this.dataZoomAxis);
+            requestAnimationFrame(() => {
+                if (this.isInitializing) {
+                    const boundaries = this.getGanttViewBoundaries();
+                    this.dataZoomAxis.setStartAndEnd(boundaries.startRatio, boundaries.endRatio);
+                    this.isInitializing = false;
+                }
+                this.stage.render();
+            });
+            this.lastDataZoomState = { start, end };
+        }
+        setupEventListeners() {
+            const dataZoomChangeHandler = (event) => {
+                if (this.isUpdatingFromGantt) {
+                    return;
+                }
+                this.isUpdatingFromDataZoom = true;
+                let start = event.start ?? event.detail?.start ?? event.currentTarget?.attribute?.start;
+                let end = event.end ?? event.detail?.end ?? event.currentTarget?.attribute?.end;
+                if (start === undefined || end === undefined) {
+                    start = this.dataZoomAxis.attribute.start;
+                    end = this.dataZoomAxis.attribute.end;
+                }
+                if (start !== undefined && end !== undefined && !isNaN(start) && !isNaN(end)) {
+                    this.applyDataZoomRangeToGantt(start, end);
+                }
+                setTimeout(() => {
+                    this.isUpdatingFromDataZoom = false;
+                }, 50);
+            };
+            this.dataZoomAxis.addEventListener('change', dataZoomChangeHandler);
+            this.cleanupCallbacks.push(() => {
+                this.dataZoomAxis.removeEventListener('change', dataZoomChangeHandler);
+            });
+            const ganttScrollHandler = (event) => {
+                if (this.isUpdatingFromDataZoom) {
+                    return;
+                }
+                if (event.scrollDirection !== 'horizontal') {
+                    return;
+                }
+                this.isUpdatingFromGantt = true;
+                const boundaries = this.getGanttViewBoundaries();
+                this.dataZoomAxis.setStartAndEnd(boundaries.startRatio, boundaries.endRatio);
+                this.stage.render();
+                setTimeout(() => {
+                    this.dataZoomAxis.setAttribute('disableTriggerEvent', false);
+                    this.isUpdatingFromGantt = false;
+                }, 10);
+            };
+            this.gantt.addEventListener('scroll', ganttScrollHandler);
+            this.cleanupCallbacks.push(() => {
+                this.gantt.removeEventListener('scroll', ganttScrollHandler);
+            });
+            const windowResizeHandler = () => {
+                clearTimeout(this.resizeTimeout);
+                this.resizeTimeout = setTimeout(() => {
+                    this.updateResponsive();
+                    this.updateDataZoomLimits();
+                }, 50);
+            };
+            window.addEventListener('resize', windowResizeHandler);
+            this.cleanupCallbacks.push(() => {
+                window.removeEventListener('resize', windowResizeHandler);
+                if (this.resizeTimeout) {
+                    clearTimeout(this.resizeTimeout);
+                }
+            });
+            const ganttZoomHandler = () => {
+                setTimeout(() => {
+                    this.updateDataZoomLimits();
+                    if (!this.isUpdatingFromDataZoom) {
+                        this.syncToDataZoom();
+                    }
+                }, 50);
+            };
+            this.gantt.addEventListener('zoom', ganttZoomHandler);
+            this.cleanupCallbacks.push(() => {
+                this.gantt.removeEventListener('zoom', ganttZoomHandler);
+            });
+        }
+        calculateDataZoomLimits() {
+            let minMillisecondsPerPixel;
+            let maxMillisecondsPerPixel;
+            if (this.gantt.zoomScaleManager) {
+                minMillisecondsPerPixel = this.gantt.zoomScaleManager.getGlobalMinMillisecondsPerPixel?.() || 1000;
+                maxMillisecondsPerPixel = this.gantt.zoomScaleManager.getGlobalMaxMillisecondsPerPixel?.() || 6000000;
+            }
+            else {
+                minMillisecondsPerPixel = this.gantt.parsedOptions.zoom?.minMillisecondsPerPixel ?? 1000;
+                maxMillisecondsPerPixel = this.gantt.parsedOptions.zoom?.maxMillisecondsPerPixel ?? 6000000;
+            }
+            const viewportWidth = this.gantt.tableNoFrameWidth;
+            const totalTimeRange = this.gantt.parsedOptions._maxDateTime - this.gantt.parsedOptions._minDateTime;
+            const minViewTimeRange = minMillisecondsPerPixel * viewportWidth;
+            const minRangeRatio = Math.min(1.0, minViewTimeRange / totalTimeRange);
+            const maxViewTimeRange = maxMillisecondsPerPixel * viewportWidth;
+            const maxRangeRatio = Math.min(1.0, maxViewTimeRange / totalTimeRange);
+            const finalMinRangeRatio = Math.min(minRangeRatio, maxRangeRatio);
+            const finalMaxRangeRatio = Math.max(minRangeRatio, maxRangeRatio);
+            return {
+                minRangeRatio: finalMinRangeRatio,
+                maxRangeRatio: finalMaxRangeRatio,
+                minMillisecondsPerPixel,
+                maxMillisecondsPerPixel
+            };
+        }
+        updateDataZoomLimits() {
+            const limits = this.calculateDataZoomLimits();
+            this.dataZoomAxis.setAttributes({
+                minSpan: limits.minRangeRatio,
+                maxSpan: limits.maxRangeRatio
+            });
+            this.stage.render();
+        }
+        getGanttViewBoundaries() {
+            const scrollLeft = this.gantt.stateManager.scrollLeft;
+            const totalWidth = this.gantt.getAllDateColsWidth();
+            const viewportWidth = this.gantt.tableNoFrameWidth;
+            const startRatio = Math.max(0, Math.min(1, scrollLeft / totalWidth));
+            const endRatio = Math.max(0, Math.min(1, (scrollLeft + viewportWidth) / totalWidth));
+            return {
+                scrollLeft,
+                totalWidth,
+                viewportWidth,
+                startRatio,
+                endRatio
+            };
+        }
+        applyDataZoomRangeToGantt(start, end) {
+            if (start === undefined || end === undefined || isNaN(start) || isNaN(end)) {
+                return;
+            }
+            this.lastDataZoomState = { start, end };
+            const currentViewportWidth = this.gantt.tableNoFrameWidth;
+            const currentMillisecondsPerPixel = this.gantt.getCurrentMillisecondsPerPixel();
+            const rangeRatio = end - start;
+            const totalTimeRange = this.gantt.parsedOptions._maxDateTime - this.gantt.parsedOptions._minDateTime;
+            const selectedTimeRange = totalTimeRange * rangeRatio;
+            const targetMillisecondsPerPixel = selectedTimeRange / currentViewportWidth;
+            if (Math.abs(targetMillisecondsPerPixel - currentMillisecondsPerPixel) > currentMillisecondsPerPixel * 0.01) {
+                if (this.gantt.zoomScaleManager) {
+                    const targetLevel = this.gantt.zoomScaleManager.findOptimalLevel(targetMillisecondsPerPixel);
+                    const currentLevel = this.gantt.zoomScaleManager.getCurrentLevel();
+                    if (targetLevel !== currentLevel) {
+                        this.gantt.zoomScaleManager.switchToLevel(targetLevel);
+                    }
+                    this.gantt.setMillisecondsPerPixel(targetMillisecondsPerPixel);
+                }
+                else {
+                    this.gantt.setMillisecondsPerPixel(targetMillisecondsPerPixel);
+                }
+            }
+            const newTotalWidth = this.gantt.getAllDateColsWidth();
+            const targetScrollLeft = start * newTotalWidth;
+            this.gantt.stateManager.setScrollLeft(targetScrollLeft);
+        }
+        syncInitialPosition() {
+            setTimeout(() => {
+                const boundaries = this.getGanttViewBoundaries();
+                if (boundaries.startRatio > 0 || boundaries.endRatio < 1) {
+                    this.dataZoomAxis.setStartAndEnd(boundaries.startRatio, boundaries.endRatio);
+                }
+            }, 100);
+        }
+        syncToGantt() {
+            const start = this.dataZoomAxis.attribute.start || 0;
+            const end = this.dataZoomAxis.attribute.end || 1;
+            this.applyDataZoomRangeToGantt(start, end);
+        }
+        syncToDataZoom() {
+            const boundaries = this.getGanttViewBoundaries();
+            this.dataZoomAxis.setStartAndEnd(boundaries.startRatio, boundaries.endRatio);
+        }
+        syncToGanttWithState(start, end) {
+            this.isUpdatingFromDataZoom = true;
+            this.applyDataZoomRangeToGantt(start, end);
+            setTimeout(() => {
+                this.isUpdatingFromDataZoom = false;
+            }, 50);
+        }
+        setRange(start, end) {
+            this.dataZoomAxis.setStartAndEnd(start, end);
+        }
+        getRange() {
+            return {
+                start: this.dataZoomAxis.attribute.start || 0,
+                end: this.dataZoomAxis.attribute.end || 1
+            };
+        }
+        resize(width, height) {
+            if (width === undefined) {
+                const ganttContainer = this.gantt.container;
+                if (ganttContainer) {
+                    const taskTableWidth = this.gantt.taskTableWidth || 0;
+                    width = ganttContainer.offsetWidth - taskTableWidth;
+                }
+                else {
+                    width = 1000;
+                }
+            }
+            if (height === undefined) {
+                height = 30;
+            }
+            this.canvas.width = width;
+            this.canvas.height = height;
+            this.canvas.style.width = `${width}px`;
+            this.canvas.style.height = `${height}px`;
+            this.stage.resize(width, height);
+            this.dataZoomAxis.setAttributes({
+                size: { width, height: height - 1 }
+            });
+            this.stage.render();
+        }
+        updateResponsive() {
+            const ganttContainer = this.gantt.container;
+            if (!ganttContainer) {
+                return;
+            }
+            const taskTableWidth = this.gantt.taskTableWidth || 0;
+            const newWidth = ganttContainer.offsetWidth - taskTableWidth;
+            this.resize(newWidth);
+            const defaultX = this.gantt.taskTableWidth || 0;
+            this.updatePosition(defaultX, 0);
+            setTimeout(() => {
+                this.syncToDataZoom();
+            }, 10);
+        }
+        updatePosition(x, y) {
+            const xPos = x ?? this.gantt.taskTableWidth ?? 0;
+            this.canvas.style.left = `${xPos}px`;
+        }
+        destroy() {
+            this.cleanupCallbacks.forEach(cleanup => cleanup());
+            this.cleanupCallbacks = [];
+            if (this.canvas && this.canvas.parentNode) {
+                const wrapper = this.canvas.parentNode;
+                if (wrapper && wrapper.id === 'dataZoomWrapper' && wrapper.parentNode) {
+                    wrapper.parentNode.removeChild(wrapper);
+                }
+                else {
+                    wrapper.removeChild(this.canvas);
+                }
+            }
+            if (this.stage) {
+                this.stage.release();
+            }
+        }
+    }
+
+    class ZoomScaleManager {
+        gantt;
+        config;
+        currentLevelIndex = 0;
+        levelBoundaries = [];
+        globalMinMillisecondsPerPixel = 0;
+        globalMaxMillisecondsPerPixel = 0;
+        dataZoomIntegration = null;
+        constructor(gantt, config) {
+            this.gantt = gantt;
+            const finalConfig = {
+                enabled: true,
+                levels: [],
+                ...config
+            };
+            this.config = finalConfig;
+            this.initializeZoomLimits();
+            this.sortLevelsByCoarseness();
+            this.calculateGlobalMillisecondsPerPixelRange();
+            this.calculateLevelBoundaries();
+            this.updateZoomLimits();
+            if (this.config.levels.length > 0) {
+                const initialMillisecondsPerPixel = this.calculateInitialMillisecondsPerPixel();
+                this.initializeWithMillisecondsPerPixel(initialMillisecondsPerPixel);
+            }
+            this.initializeDataZoomIfNeeded();
+        }
+        initializeZoomLimits() {
+            const existingZoom = this.gantt.parsedOptions.zoom;
+            const zoomScaleConfig = this.config;
+            this.gantt.parsedOptions.zoom = {
+                minMillisecondsPerPixel: existingZoom?.minMillisecondsPerPixel ?? zoomScaleConfig.minMillisecondsPerPixel ?? 1000,
+                maxMillisecondsPerPixel: existingZoom?.maxMillisecondsPerPixel ?? zoomScaleConfig.maxMillisecondsPerPixel ?? 6000000,
+                step: zoomScaleConfig.step ?? 0.015
+            };
+        }
+        initializeDataZoomIfNeeded() {
+            const dataZoomConfig = this.config.dataZoomAxis;
+            if (!dataZoomConfig?.enabled) {
+                return;
+            }
+            const finalConfig = {
+                containerId: dataZoomConfig.containerId,
+                width: dataZoomConfig.width,
+                height: dataZoomConfig.height ?? 30,
+                x: dataZoomConfig.x,
+                y: dataZoomConfig.y ?? 0,
+                delayTime: dataZoomConfig.delayTime ?? 10
+            };
+            try {
+                this.dataZoomIntegration = new DataZoomIntegration(this.gantt, finalConfig);
+            }
+            catch (error) {
+            }
+        }
+        handleTableWidthChange() {
+            if (this.dataZoomIntegration) {
+                this.dataZoomIntegration.updateResponsive();
+            }
+        }
+        sortLevelsByCoarseness() {
+            if (this.config.levels.length <= 1) {
+                return;
+            }
+            this.config.levels.sort((levelA, levelB) => {
+                const minUnitA = this.findMinTimeUnit(levelA);
+                const minUnitB = this.findMinTimeUnit(levelB);
+                const unitMsA = this.getUnitMilliseconds(minUnitA.unit, minUnitA.step);
+                const unitMsB = this.getUnitMilliseconds(minUnitB.unit, minUnitB.step);
+                return unitMsB - unitMsA;
+            });
+        }
+        calculateGlobalMillisecondsPerPixelRange() {
+            const levels = this.config.levels;
+            if (levels.length === 0) {
+                return;
+            }
+            const maxZoomInColumnWidth = 120;
+            const maxZoomOutColumnWidth = 150;
+            let maxMinUnit = null;
+            let maxMinUnitMs = 0;
+            let minMinUnit = null;
+            let minMinUnitMs = Infinity;
+            for (const level of levels) {
+                const minUnit = this.findMinTimeUnit(level);
+                const unitMs = this.getUnitMilliseconds(minUnit.unit, minUnit.step);
+                if (unitMs > maxMinUnitMs) {
+                    maxMinUnitMs = unitMs;
+                    maxMinUnit = minUnit;
+                }
+                if (unitMs < minMinUnitMs) {
+                    minMinUnitMs = unitMs;
+                    minMinUnit = minUnit;
+                }
+            }
+            if (!maxMinUnit || !minMinUnit) {
+                return;
+            }
+            this.globalMinMillisecondsPerPixel = minMinUnitMs / maxZoomInColumnWidth;
+            this.globalMaxMillisecondsPerPixel = maxMinUnitMs / maxZoomOutColumnWidth;
+            if (this.globalMinMillisecondsPerPixel > this.globalMaxMillisecondsPerPixel) {
+                const temp = this.globalMinMillisecondsPerPixel;
+                this.globalMinMillisecondsPerPixel = this.globalMaxMillisecondsPerPixel;
+                this.globalMaxMillisecondsPerPixel = temp;
+            }
+        }
+        calculateLevelBoundaries() {
+            const levelCount = this.config.levels.length;
+            if (levelCount === 0) {
+                return;
+            }
+            this.levelBoundaries = [];
+            const idealBoundaries = [];
+            idealBoundaries[levelCount] = this.globalMinMillisecondsPerPixel;
+            for (let i = levelCount - 1; i >= 1; i--) {
+                const currentLevel = this.config.levels[i];
+                const currentMinUnit = this.findMinTimeUnit(currentLevel);
+                const currentUnitMs = this.getUnitMilliseconds(currentMinUnit.unit, currentMinUnit.step);
+                const minColWidth = this.getMinColWidthForUnit(currentMinUnit.unit, currentMinUnit.step);
+                const idealBoundary = currentUnitMs / minColWidth;
+                idealBoundaries[i] = idealBoundary;
+            }
+            idealBoundaries[0] = this.globalMaxMillisecondsPerPixel;
+            this.levelBoundaries = [...idealBoundaries];
+            for (let i = 1; i < levelCount; i++) {
+                if (this.levelBoundaries[i] >= this.levelBoundaries[i - 1]) {
+                    const prevBoundary = this.levelBoundaries[i - 1];
+                    const nextBoundary = this.levelBoundaries[i + 1] || this.globalMinMillisecondsPerPixel;
+                    this.levelBoundaries[i] = (prevBoundary + nextBoundary) / 2;
+                }
+                this.levelBoundaries[i] = Math.max(this.globalMinMillisecondsPerPixel, Math.min(this.globalMaxMillisecondsPerPixel, this.levelBoundaries[i]));
+            }
+        }
+        updateZoomLimits() {
+            if (!this.gantt.parsedOptions.zoom) {
+                this.gantt.parsedOptions.zoom = {};
+            }
+            this.gantt.parsedOptions.zoom.minMillisecondsPerPixel = this.globalMinMillisecondsPerPixel;
+            this.gantt.parsedOptions.zoom.maxMillisecondsPerPixel = this.globalMaxMillisecondsPerPixel;
+        }
+        getGlobalMinMillisecondsPerPixel() {
+            return this.globalMinMillisecondsPerPixel;
+        }
+        getGlobalMaxMillisecondsPerPixel() {
+            return this.globalMaxMillisecondsPerPixel;
+        }
+        calculateInitialMillisecondsPerPixel() {
+            return (this.globalMinMillisecondsPerPixel +
+                (this.globalMaxMillisecondsPerPixel - this.globalMinMillisecondsPerPixel) * 0.4);
+        }
+        initializeWithMillisecondsPerPixel(millisecondsPerPixel) {
+            if (this.config.levels.length === 0) {
+                return;
+            }
+            const optimalLevel = this.findOptimalLevel(millisecondsPerPixel);
+            this.setInitialLevel(optimalLevel);
+        }
+        setInitialLevel(levelIndex) {
+            if (levelIndex < 0 || levelIndex >= this.config.levels.length) {
+                return;
+            }
+            const levelScales = this.config.levels[levelIndex];
+            if (!levelScales || levelScales.length === 0) {
+                return;
+            }
+            this.gantt.options.timelineHeader.scales = [...levelScales];
+            this.currentLevelIndex = levelIndex;
+        }
+        findOptimalLevel(millisecondsPerPixel) {
+            const clampedMillisecondsPerPixel = Math.max(this.globalMinMillisecondsPerPixel, Math.min(this.globalMaxMillisecondsPerPixel, millisecondsPerPixel));
+            for (let i = 0; i < this.levelBoundaries.length - 1; i++) {
+                if (clampedMillisecondsPerPixel <= this.levelBoundaries[i] &&
+                    clampedMillisecondsPerPixel > this.levelBoundaries[i + 1]) {
+                    return i;
+                }
+            }
+            return this.config.levels.length - 1;
+        }
+        switchToLevel(levelIndex) {
+            if (levelIndex < 0 || levelIndex >= this.config.levels.length) {
+                return false;
+            }
+            if (this.currentLevelIndex === levelIndex) {
+                return true;
+            }
+            const levelScales = this.config.levels[levelIndex];
+            if (!levelScales || levelScales.length === 0) {
+                return false;
+            }
+            try {
+                this.gantt.updateScales([...levelScales]);
+                this.currentLevelIndex = levelIndex;
+                this.gantt.recalculateTimeScale();
+                return true;
+            }
+            catch (error) {
+                return false;
+            }
+        }
+        findMinTimeUnit(scales) {
+            let minUnit = scales[0];
+            let minUnitMs = this.getUnitMilliseconds(minUnit.unit, minUnit.step);
+            for (const scale of scales) {
+                const unitMs = this.getUnitMilliseconds(scale.unit, scale.step);
+                if (unitMs < minUnitMs) {
+                    minUnitMs = unitMs;
+                    minUnit = scale;
+                }
+            }
+            return minUnit;
+        }
+        getUnitMilliseconds(unit, step) {
+            const unitMs = {
+                second: 1000,
+                minute: 60 * 1000,
+                hour: 60 * 60 * 1000,
+                day: 24 * 60 * 60 * 1000,
+                week: 7 * 24 * 60 * 60 * 1000,
+                month: 30 * 24 * 60 * 60 * 1000,
+                quarter: 90 * 24 * 60 * 60 * 1000,
+                year: 365 * 24 * 60 * 60 * 1000
+            };
+            return (unitMs[unit] || unitMs.day) * step;
+        }
+        getMinColWidthForUnit(unit, step) {
+            switch (unit) {
+                case 'hour':
+                    return step > 1 ? 120 : 60;
+                case 'minute':
+                    return 80;
+                case 'second':
+                    return 100;
+                case 'day':
+                case 'week':
+                case 'month':
+                case 'quarter':
+                case 'year':
+                default:
+                    return 60;
+            }
+        }
+        getCurrentLevel() {
+            return this.currentLevelIndex;
+        }
+        getInitialMillisecondsPerPixel() {
+            return this.calculateInitialMillisecondsPerPixel();
+        }
+        getCurrentZoomState() {
+            if (this.config.levels.length === 0) {
+                return null;
+            }
+            const currentLevel = this.config.levels[this.currentLevelIndex];
+            const minUnit = this.findMinTimeUnit(currentLevel);
+            const currentMillisecondsPerPixel = this.gantt.getCurrentMillisecondsPerPixel();
+            const unitMs = this.getUnitMilliseconds(minUnit.unit, minUnit.step);
+            const currentColWidth = unitMs / currentMillisecondsPerPixel;
+            return {
+                minUnit: minUnit.unit,
+                step: minUnit.step,
+                levelNum: this.currentLevelIndex,
+                currentColWidth: Math.round(currentColWidth * 10) / 10
+            };
+        }
+        setZoomPosition(params) {
+            if (this.config.levels.length === 0) {
+                return false;
+            }
+            const { minUnit, step, levelNum, colWidth } = params;
+            let targetLevelIndex = null;
+            if (minUnit !== undefined && step !== undefined) {
+                targetLevelIndex = this.findLevelByMinUnit(minUnit, step);
+                if (targetLevelIndex === null) {
+                    return false;
+                }
+            }
+            else if (levelNum !== undefined) {
+                if (levelNum < 0 || levelNum >= this.config.levels.length) {
+                    return false;
+                }
+                targetLevelIndex = levelNum;
+            }
+            else {
+                return false;
+            }
+            let targetMillisecondsPerPixel;
+            if (colWidth !== undefined) {
+                const targetLevel = this.config.levels[targetLevelIndex];
+                const targetMinUnit = this.findMinTimeUnit(targetLevel);
+                const unitMs = this.getUnitMilliseconds(targetMinUnit.unit, targetMinUnit.step);
+                targetMillisecondsPerPixel = unitMs / colWidth;
+                const upperBoundary = this.levelBoundaries[targetLevelIndex];
+                const lowerBoundary = this.levelBoundaries[targetLevelIndex + 1];
+                if (targetMillisecondsPerPixel < lowerBoundary || targetMillisecondsPerPixel > upperBoundary) {
+                    targetMillisecondsPerPixel = (upperBoundary + lowerBoundary) / 2;
+                }
+            }
+            else {
+                const upperBoundary = this.levelBoundaries[targetLevelIndex];
+                const lowerBoundary = this.levelBoundaries[targetLevelIndex + 1];
+                targetMillisecondsPerPixel = (upperBoundary + lowerBoundary) / 2;
+            }
+            if (targetLevelIndex !== this.currentLevelIndex) {
+                this.switchToLevel(targetLevelIndex);
+            }
+            this.gantt.setMillisecondsPerPixel(targetMillisecondsPerPixel);
+            return true;
+        }
+        findLevelByMinUnit(unit, step) {
+            for (let i = 0; i < this.config.levels.length; i++) {
+                const level = this.config.levels[i];
+                const minUnit = this.findMinTimeUnit(level);
+                if (minUnit.unit === unit && minUnit.step === step) {
+                    return i;
+                }
+            }
+            return null;
+        }
+        zoomIn(factor = 1.1, center = true, centerX) {
+            this.gantt.zoomByFactor(factor, center, centerX);
+        }
+        zoomOut(factor = 0.9, center = true, centerX) {
+            this.gantt.zoomByFactor(factor, center, centerX);
+        }
+        zoomByPercentage(percentage, center = true, centerX) {
+            const currentMillisecondsPerPixel = this.gantt.getCurrentMillisecondsPerPixel();
+            const totalRange = this.globalMaxMillisecondsPerPixel - this.globalMinMillisecondsPerPixel;
+            const deltaMillisecondsPerPixel = (totalRange * percentage) / 100;
+            const targetMillisecondsPerPixel = currentMillisecondsPerPixel - deltaMillisecondsPerPixel;
+            let centerTimePosition;
+            if (center && this.gantt.scenegraph) {
+                if (centerX === undefined) {
+                    centerX = this.gantt.scenegraph.width / 2;
+                }
+                centerTimePosition = (this.gantt.stateManager.scroll.horizontalBarPos + centerX) * currentMillisecondsPerPixel;
+            }
+            const targetLevel = this.findOptimalLevel(targetMillisecondsPerPixel);
+            const currentLevel = this.getCurrentLevel();
+            if (targetLevel !== currentLevel) {
+                this.switchToLevel(targetLevel);
+            }
+            this.gantt.setMillisecondsPerPixel(targetMillisecondsPerPixel);
+            if (centerTimePosition !== undefined && centerX !== undefined) {
+                const newScrollLeft = centerTimePosition / this.gantt.getCurrentMillisecondsPerPixel() - centerX;
+                this.gantt.stateManager.setScrollLeft(newScrollLeft);
+            }
+        }
+        getDataZoomIntegration() {
+            return this.dataZoomIntegration;
+        }
+        createDataZoomIntegration(config) {
+            if (this.dataZoomIntegration) {
+                this.dataZoomIntegration.destroy();
+            }
+            this.dataZoomIntegration = new DataZoomIntegration(this.gantt, config);
+            return this.dataZoomIntegration;
+        }
+        destroyDataZoomIntegration() {
+            if (this.dataZoomIntegration) {
+                this.dataZoomIntegration.destroy();
+                this.dataZoomIntegration = null;
+            }
+        }
+        updateDataZoomResponsive() {
+            if (this.dataZoomIntegration) {
+                this.dataZoomIntegration.updateResponsive();
+            }
+        }
+        recalculateTimeScale() {
+            const primaryScale = this.gantt.parsedOptions.reverseSortedTimelineScales[0];
+            if (!primaryScale) {
+                return;
+            }
+            let msPerStep;
+            switch (primaryScale.unit) {
+                case 'second':
+                    msPerStep = 1000 * primaryScale.step;
+                    break;
+                case 'minute':
+                    msPerStep = 60 * 1000 * primaryScale.step;
+                    break;
+                case 'hour':
+                    msPerStep = 60 * 60 * 1000 * primaryScale.step;
+                    break;
+                case 'day':
+                    msPerStep = 24 * 60 * 60 * 1000 * primaryScale.step;
+                    break;
+                case 'week':
+                    msPerStep = 7 * 24 * 60 * 60 * 1000 * primaryScale.step;
+                    break;
+                case 'month':
+                    msPerStep = 30 * 24 * 60 * 60 * 1000 * primaryScale.step;
+                    break;
+                case 'quarter':
+                    msPerStep = 90 * 24 * 60 * 60 * 1000 * primaryScale.step;
+                    break;
+                case 'year':
+                    msPerStep = 365 * 24 * 60 * 60 * 1000 * primaryScale.step;
+                    break;
+                default:
+                    msPerStep = 24 * 60 * 60 * 1000 * primaryScale.step;
+            }
+            const newTimelineColWidth = msPerStep / this.gantt.getCurrentMillisecondsPerPixel();
+            this.gantt.parsedOptions.timelineColWidth = newTimelineColWidth;
+            this.gantt._generateTimeLineDateMap();
+            if (this.gantt.scenegraph) {
+                this.gantt._updateSize();
+                this.gantt.scenegraph.refreshAll();
+            }
+        }
+        zoomByFactor(factor, keepCenter = true, centerX) {
+            const minMillisecondsPerPixel = this.gantt.parsedOptions.zoom?.minMillisecondsPerPixel ?? 200000;
+            const maxMillisecondsPerPixel = this.gantt.parsedOptions.zoom?.maxMillisecondsPerPixel ?? 3000000;
+            const oldMillisecondsPerPixel = this.gantt.getCurrentMillisecondsPerPixel();
+            const oldWidth = this.gantt.parsedOptions.timelineColWidth;
+            let centerTimePosition;
+            if (keepCenter) {
+                if (centerX === undefined) {
+                    centerX = this.gantt.scenegraph.width / 2;
+                }
+                const scrollOffsetMs = (this.gantt.stateManager.scroll.horizontalBarPos + centerX) * oldMillisecondsPerPixel;
+                centerTimePosition = this.gantt.parsedOptions._minDateTime + scrollOffsetMs;
+            }
+            const currentMillisecondsPerPixel = this.gantt.getCurrentMillisecondsPerPixel();
+            let adjustedFactor = factor;
+            const baseMillisecondsPerPixel = 1440000;
+            const zoomRatio = Math.log(currentMillisecondsPerPixel / baseMillisecondsPerPixel) / Math.log(2);
+            if (currentMillisecondsPerPixel < baseMillisecondsPerPixel) {
+                const enhancement = Math.pow(1.2, -zoomRatio);
+                adjustedFactor = Math.pow(factor, enhancement);
+            }
+            else {
+                const dampening = Math.pow(0.9, zoomRatio);
+                adjustedFactor = Math.pow(factor, dampening);
+            }
+            const newMillisecondsPerPixel = this.gantt.getCurrentMillisecondsPerPixel() / adjustedFactor;
+            const clampedMillisecondsPerPixel = Math.max(minMillisecondsPerPixel, Math.min(maxMillisecondsPerPixel, newMillisecondsPerPixel));
+            this.gantt.setMillisecondsPerPixel(clampedMillisecondsPerPixel);
+            const targetLevel = this.findOptimalLevel(clampedMillisecondsPerPixel);
+            const currentLevel = this.getCurrentLevel();
+            if (targetLevel !== currentLevel) {
+                this.switchToLevel(targetLevel);
+            }
+            else {
+                this.recalculateTimeScale();
+            }
+            if (keepCenter && centerTimePosition !== undefined && centerX !== undefined) {
+                const actualMillisecondsPerPixel = this.gantt.getCurrentMillisecondsPerPixel();
+                const newMinDateTime = this.gantt.parsedOptions._minDateTime;
+                const timeOffsetFromNewMin = centerTimePosition - newMinDateTime;
+                const newScrollLeft = timeOffsetFromNewMin / actualMillisecondsPerPixel - centerX;
+                this.gantt.stateManager.setScrollLeft(newScrollLeft);
+            }
+            if (this.gantt.hasListeners(GANTT_EVENT_TYPE.ZOOM)) {
+                const actualMillisecondsPerPixel = this.gantt.getCurrentMillisecondsPerPixel();
+                this.gantt.fireListeners(GANTT_EVENT_TYPE.ZOOM, {
+                    oldWidth,
+                    newWidth: this.gantt.parsedOptions.timelineColWidth,
+                    scale: oldMillisecondsPerPixel / actualMillisecondsPerPixel,
+                    oldMillisecondsPerPixel,
+                    newMillisecondsPerPixel: actualMillisecondsPerPixel
+                });
+            }
+        }
+    }
+
     function createRootElement(padding, className = 'vtable-gantt') {
         const element = document.createElement('div');
         element.setAttribute('tabindex', '0');
@@ -74055,6 +75848,18 @@
         gridHeight;
         pluginManager;
         parsedOptions = {};
+        millisecondsPerPixel;
+        zoomScaleManager;
+        recalculateTimeScale() {
+            if (this.zoomScaleManager) {
+                this.zoomScaleManager.recalculateTimeScale();
+            }
+        }
+        zoomByFactor(factor, keepCenter = true, centerX) {
+            if (this.zoomScaleManager) {
+                this.zoomScaleManager.zoomByFactor(factor, keepCenter, centerX);
+            }
+        }
         taskTableWidth;
         taskTableColumns;
         records;
@@ -74067,8 +75872,17 @@
                 typeof options?.taskListTable?.tableWidth === 'number' ? options?.taskListTable?.tableWidth : -1;
             this.taskTableColumns = options?.taskListTable?.columns ?? [];
             this.records = options?.records ?? [];
+            if (options.timelineHeader?.zoomScale && options.timelineHeader.zoomScale.enabled !== false) {
+                this.zoomScaleManager = new ZoomScaleManager(this, options.timelineHeader.zoomScale);
+            }
             this._sortScales();
             initOptions(this);
+            if (this.zoomScaleManager) {
+                this.millisecondsPerPixel = this.zoomScaleManager.getInitialMillisecondsPerPixel();
+            }
+            else {
+                this.millisecondsPerPixel = (24 * 60 * 60 * 1000) / 60;
+            }
             initProjectTaskTimes(this);
             this.data = new DataSource(this);
             this._generateTimeLineDateMap();
@@ -74094,6 +75908,7 @@
             this.scenegraph.afterCreateSceneGraph();
             this._scrollToMarkLine();
             this.pluginManager = new PluginManager(this, options);
+            this.recalculateTimeScale();
         }
         renderTaskBarsTable() {
             this.scenegraph.updateNextFrame();
@@ -74117,7 +75932,8 @@
                             parseInt(computedStyle.paddingBottom || '0px', 20);
                 }
                 const width1 = (widthWithoutPadding ?? 1) - 1 - this.taskTableWidth;
-                const height1 = (heightWithoutPadding ?? 1) - 1;
+                const dataZoomHeight = this.getDataZoomHeight();
+                const height1 = (heightWithoutPadding ?? 1) - 1 - dataZoomHeight;
                 element.style.width = (width1 && `${width1}px`) || '0px';
                 element.style.height = (height1 && `${height1}px`) || '0px';
                 const { canvas } = this;
@@ -74677,6 +76493,22 @@
             this.drawHeight = Math.min(this.getAllRowsHeight(), this.tableNoFrameHeight);
             this.gridHeight = this.drawHeight - this.headerHeight;
         }
+        hasDataZoom() {
+            if (!this.zoomScaleManager) {
+                return false;
+            }
+            const dataZoomConfig = this.zoomScaleManager.config?.dataZoomAxis;
+            if (!dataZoomConfig || dataZoomConfig.enabled === false) {
+                return false;
+            }
+            return this.zoomScaleManager.getDataZoomIntegration() !== null;
+        }
+        getDataZoomHeight() {
+            if (!this.hasDataZoom()) {
+                return 0;
+            }
+            return this.zoomScaleManager?.config?.dataZoomAxis?.height || 30;
+        }
         getContext() {
             return this.context;
         }
@@ -74912,6 +76744,33 @@
         formatDate(date, format) {
             return formatDate(date, format);
         }
+        getCurrentMillisecondsPerPixel() {
+            return this.millisecondsPerPixel;
+        }
+        setMillisecondsPerPixel(millisecondsPerPixel) {
+            const minMillisecondsPerPixel = this.parsedOptions.zoom?.minMillisecondsPerPixel ?? 200000;
+            const maxMillisecondsPerPixel = this.parsedOptions.zoom?.maxMillisecondsPerPixel ?? 3000000;
+            const oldMillisecondsPerPixel = this.millisecondsPerPixel;
+            const oldWidth = this.parsedOptions.timelineColWidth;
+            this.millisecondsPerPixel = Math.max(minMillisecondsPerPixel, Math.min(maxMillisecondsPerPixel, millisecondsPerPixel));
+            this.recalculateTimeScale();
+            this._updateSize();
+            this.scenegraph.refreshAll();
+            const newWidth = this.parsedOptions.timelineColWidth;
+            const scale = newWidth / oldWidth;
+            if (this.hasListeners(GANTT_EVENT_TYPE.ZOOM)) {
+                this.fireListeners(GANTT_EVENT_TYPE.ZOOM, {
+                    oldWidth,
+                    newWidth,
+                    scale,
+                    oldMillisecondsPerPixel,
+                    newMillisecondsPerPixel: this.millisecondsPerPixel
+                });
+            }
+        }
+        getCurrentZoomScaleLevel() {
+            return this.zoomScaleManager?.getCurrentLevel() ?? -1;
+        }
     }
 
     var index$1 = /*#__PURE__*/Object.freeze({
@@ -74950,7 +76809,7 @@
         PluginManager: PluginManager
     });
 
-    const version = "1.20.3";
+    const version = "1.21.0";
 
     exports.Gantt = Gantt;
     exports.TYPES = index$4;