@visactor/vrender-components 0.17.2-alpha.3 → 0.17.2

package/dist/index.js

@@ -12759,24 +12759,25 @@
   var halfPi = vutils.pi / 2;
   function createRectPath(path, x, y, width, height, rectCornerRadius) {
     var cornerRadius;
-    if (width < 0 && (x += width, width = -width), height < 0 && (y += height, height = -height), vutils.isNumber(rectCornerRadius, !0)) cornerRadius = [rectCornerRadius, rectCornerRadius, rectCornerRadius, rectCornerRadius];else if (Array.isArray(rectCornerRadius)) {
+    if (width < 0 && (x += width, width = -width), height < 0 && (y += height, height = -height), vutils.isNumber(rectCornerRadius, !0)) cornerRadius = [rectCornerRadius = vutils.abs(rectCornerRadius), rectCornerRadius, rectCornerRadius, rectCornerRadius];else if (Array.isArray(rectCornerRadius)) {
       var cornerRadiusArr = rectCornerRadius;
+      var cr0, cr1;
       switch (cornerRadiusArr.length) {
         case 0:
           cornerRadius = [0, 0, 0, 0];
           break;
         case 1:
-          cornerRadius = [cornerRadiusArr[0], cornerRadiusArr[0], cornerRadiusArr[0], cornerRadiusArr[0]];
+          cr0 = vutils.abs(cornerRadiusArr[0]), cornerRadius = [cr0, cr0, cr0, cr0];
           break;
         case 2:
         case 3:
-          cornerRadius = [cornerRadiusArr[0], cornerRadiusArr[1], cornerRadiusArr[0], cornerRadiusArr[1]];
+          cr0 = vutils.abs(cornerRadiusArr[0]), cr1 = vutils.abs(cornerRadiusArr[1]), cornerRadius = [cr0, cr1, cr0, cr1];
           break;
         default:
-          cornerRadius = cornerRadiusArr.slice(0, 5);
+          cornerRadius = cornerRadiusArr, cornerRadius[0] = vutils.abs(cornerRadius[0]), cornerRadius[1] = vutils.abs(cornerRadius[1]), cornerRadius[2] = vutils.abs(cornerRadius[2]), cornerRadius[3] = vutils.abs(cornerRadius[3]);
       }
     } else cornerRadius = [0, 0, 0, 0];
-    if (width < 0 || Math.abs(cornerRadius[0]) + Math.abs(cornerRadius[1]) + Math.abs(cornerRadius[2]) + Math.abs(cornerRadius[3]) < 1e-12) return path.rect(x, y, width, height);
+    if (width < 0 || cornerRadius[0] + cornerRadius[1] + cornerRadius[2] + cornerRadius[3] < 1e-12) return path.rect(x, y, width, height);
     var leftTop = [x, y],
       rightTop = [x + width, y],
       rightBottom = [x + width, y + height],
@@ -14915,11 +14916,8 @@
         context.highPerformanceSave();
         var g = graphic.shadowRoot,
           currentGroupMatrix = matrixAllocate.allocateByObj(parentMatrix),
-          newPoint = new vutils.Point(point.x, point.y);
-        parentMatrix.transformPoint(newPoint, newPoint);
-        var transMatrix = graphic.transMatrix;
-        currentGroupMatrix.multiply(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f);
-        var result = pickerService.pickGroup(g, newPoint.clone(), currentGroupMatrix, pickParams);
+          newPoint = new vutils.Point(currentGroupMatrix.a * point.x + currentGroupMatrix.c * point.y + currentGroupMatrix.e, currentGroupMatrix.b * point.x + currentGroupMatrix.d * point.y + currentGroupMatrix.f),
+          result = pickerService.pickGroup(g, newPoint, currentGroupMatrix, pickParams);
         return context.highPerformanceRestore(), result;
       }
     }]);
@@ -16928,6 +16926,12 @@
       _getNodeId(id) {
           return `${this.id}-${this.name}-${id}`;
       }
+      _dispatchEvent(eventName, details) {
+          var _a;
+          const changeEvent = new CustomEvent(eventName, details);
+          changeEvent.manager = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.eventSystem.manager;
+          this.dispatchEvent(changeEvent);
+      }
   }
 
   function __rest(s, e) {
@@ -18590,7 +18594,7 @@
               const [currentPos, currentScrollValue] = this._computeScrollValue(e);
               const range = [preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue];
               if (!realTime) {
-                  this._onChange({
+                  this._dispatchEvent('scroll', {
                       pre: preRange,
                       value: vutils.clampRange(range, limitRange[0], limitRange[1])
                   });
@@ -18626,7 +18630,7 @@
           }
           this.attribute.range = currScrollRange;
           if (realTime) {
-              this._onChange({
+              this._dispatchEvent('scroll', {
                   pre: preRange,
                   value: currScrollRange
               });
@@ -18695,8 +18699,8 @@
               y1: top,
               x2: width - right,
               y2: height - bottom,
-              width: width - (left + right),
-              height: height - (top + bottom)
+              width: Math.max(0, width - (left + right)),
+              height: Math.max(0, height - (top + bottom))
           };
           this._sliderRenderBounds = renderBounds;
           return renderBounds;
@@ -18729,12 +18733,6 @@
               ? vutils.clampRange([x1 + min * width, x1 + max * width], x1, width - sliderSize)
               : vutils.clampRange([y1 + min * height, y1 + max * height], y1, height - sliderSize);
       }
-      _onChange(detail) {
-          var _a;
-          const changeEvent = new CustomEvent('scroll', detail);
-          changeEvent.manager = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.eventSystem.manager;
-          this.dispatchEvent(changeEvent);
-      }
       _reset() {
           this._sliderRenderBounds = null;
           this._sliderLimitRange = null;
@@ -22614,7 +22612,7 @@
       }
       _getLabelAttribute(tickDatum, index, tickData, layer) {
           var _a, _b, _c, _d, _e, _f;
-          const _g = this.attribute.label, { space = 4, inside = false, formatMethod, type = 'text', text } = _g, tagAttributes = __rest(_g, ["space", "inside", "formatMethod", "type", "text"]);
+          const { space = 4, inside = false, formatMethod, type = 'text', text } = this.attribute.label;
           let offset = space;
           let tickLength = 0;
           if (((_a = this.attribute.tick) === null || _a === void 0 ? void 0 : _a.visible) && ((_b = this.attribute.tick) === null || _b === void 0 ? void 0 : _b.inside) === inside) {
@@ -22638,7 +22636,7 @@
           const textContent = formatMethod
               ? formatMethod(`${tickDatum.label}`, tickDatum, index, tickData, layer)
               : tickDatum.label;
-          let { style: textStyle } = tagAttributes;
+          let { style: textStyle } = this.attribute.label;
           textStyle = vutils.isFunction(textStyle)
               ? vutils.merge({}, DEFAULT_AXIS_THEME.label.style, textStyle(tickDatum, index, tickData, layer))
               : textStyle;
@@ -24280,6 +24278,7 @@
       },
       startHandlerStyle: {
           visible: true,
+          triggerMinSize: 40,
           symbolType: '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',
           fill: 'white',
           stroke: '#B0C8F9',
@@ -24287,6 +24286,7 @@
       },
       endHandlerStyle: {
           visible: true,
+          triggerMinSize: 40,
           symbolType: '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',
           fill: 'white',
           stroke: '#B0C8F9',
@@ -24307,6 +24307,22 @@
           }
       }
   };
+  const DEFAULT_HANDLER_ATTR_MAP = {
+      horizontal: {
+          angle: 0,
+          strokeBoundsBuffer: 0,
+          boundsPadding: 2,
+          pickMode: 'imprecise',
+          cursor: 'ew-resize'
+      },
+      vertical: {
+          angle: 90 * (Math.PI / 180),
+          cursor: 'ns-resize',
+          boundsPadding: 2,
+          pickMode: 'imprecise',
+          strokeBoundsBuffer: 0
+      }
+  };
 
   exports.DataZoomActiveTag = void 0;
   (function (DataZoomActiveTag) {
@@ -24353,11 +24369,11 @@
               e.stopPropagation();
               if (tag === 'start') {
                   this._activeTag = exports.DataZoomActiveTag.startHandler;
-                  this._activeItem = this._startHandler;
+                  this._activeItem = this._startHandlerMask;
               }
               else if (tag === 'end') {
                   this._activeTag = exports.DataZoomActiveTag.endHandler;
-                  this._activeItem = this._endHandler;
+                  this._activeItem = this._endHandlerMask;
               }
               else if (tag === 'middleRect') {
                   this._activeTag = exports.DataZoomActiveTag.middleHandler;
@@ -24374,9 +24390,13 @@
               this._activeState = true;
               this._activeCache.startPos = this.eventPosToStagePos(e);
               this._activeCache.lastPos = this.eventPosToStagePos(e);
+              if (vglobal.env === 'browser') {
+                  vglobal.addEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
+                  vglobal.addEventListener('pointerup', this._onHandlerPointerUp.bind(this));
+              }
+              this.addEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
           };
-          this._onHandlerPointerMove = (e) => {
-              var _a;
+          this._onHandlerPointerMove = delayMap$1[this.attribute.delayType]((e) => {
               e.stopPropagation();
               const { start: startAttr, end: endAttr, brushSelect, realTime = true } = this.attribute;
               const pos = this.eventPosToStagePos(e);
@@ -24414,10 +24434,13 @@
               end = Math.min(Math.max(end, 0), 1);
               if (startAttr !== start || endAttr !== end) {
                   this.setStateAttr(start, end, true);
-                  realTime && ((_a = this._updateStateCallback) === null || _a === void 0 ? void 0 : _a.call(this, start, end, this._activeTag));
-                  this._dispatchChangeEvent(start, end);
+                  this._dispatchEvent('change', {
+                      start,
+                      end,
+                      tag: this._activeTag
+                  });
               }
-          };
+          }, this.attribute.delayTime);
           const { start, end, size, orient, showDetail, position, previewData, previewPointsX, previewPointsY, previewPointsX1, previewPointsY1, updateStateCallback } = this.attribute;
           const { width, height } = size;
           start && (this.state.start = start);
@@ -24440,18 +24463,17 @@
           vutils.isFunction(previewPointsY) && (this._previewPointsY = previewPointsY);
           vutils.isFunction(previewPointsX1) && (this._previewPointsX1 = previewPointsX1);
           vutils.isFunction(previewPointsY1) && (this._previewPointsY1 = previewPointsY1);
-          vutils.isFunction(updateStateCallback) && (this._updateStateCallback = updateStateCallback);
       }
       bindEvents() {
           if (this.attribute.disableTriggerEvent) {
               return;
           }
-          const { showDetail, brushSelect, delayType = 'throttle', delayTime = 0 } = this.attribute;
-          if (this._startHandler) {
-              this._startHandler.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, 'start'));
+          const { showDetail, brushSelect } = this.attribute;
+          if (this._startHandlerMask) {
+              this._startHandlerMask.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, 'start'));
           }
-          if (this._endHandler) {
-              this._endHandler.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, 'end'));
+          if (this._endHandlerMask) {
+              this._endHandlerMask.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, 'end'));
           }
           if (this._middleHandlerSymbol) {
               this._middleHandlerSymbol.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, 'middleSymbol'));
@@ -24472,15 +24494,6 @@
           if (this._selectedPreviewGroup) {
               this._selectedPreviewGroup.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, selectedTag));
           }
-          if (vglobal.env === 'browser') {
-              vglobal.addEventListener('pointermove', delayMap$1[delayType](this._onHandlerPointerMove.bind(this), delayTime), {
-                  capture: true
-              });
-              vglobal.addEventListener('pointerup', this._onHandlerPointerUp.bind(this));
-          }
-          this.addEventListener('pointermove', delayMap$1[delayType](this._onHandlerPointerMove, delayTime), {
-              capture: true
-          });
           this.addEventListener('pointerup', this._onHandlerPointerUp);
           this.addEventListener('pointerupoutside', this._onHandlerPointerUp);
           if (showDetail === 'auto') {
@@ -24511,15 +24524,14 @@
           shouldRender && this.setAttributes({ start, end });
       }
       eventPosToStagePos(e) {
-          var _a, _b, _c;
-          const stagePosition = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.window.getBoundingClientRect();
+          var _a, _b;
+          const { x, y } = vglobal.mapToCanvasPoint(e);
           return {
-              x: e.clientX - ((stagePosition === null || stagePosition === void 0 ? void 0 : stagePosition.left) || 0) - (((_b = this.stage) === null || _b === void 0 ? void 0 : _b.x) || 0),
-              y: e.clientY - ((stagePosition === null || stagePosition === void 0 ? void 0 : stagePosition.top) || 0) - (((_c = this.stage) === null || _c === void 0 ? void 0 : _c.y) || 0)
+              x: x - (((_a = this.stage) === null || _a === void 0 ? void 0 : _a.x) || 0),
+              y: y - (((_b = this.stage) === null || _b === void 0 ? void 0 : _b.y) || 0)
           };
       }
       _onHandlerPointerUp(e) {
-          var _a;
           e.preventDefault();
           const { start, end, brushSelect, realTime = true } = this.attribute;
           if (this._activeState) {
@@ -24532,9 +24544,17 @@
           brushSelect && this.renderDragMask();
           if (!realTime || start !== this.state.start || end !== this.state.end) {
               this.setStateAttr(this.state.start, this.state.end, true);
-              (_a = this._updateStateCallback) === null || _a === void 0 ? void 0 : _a.call(this, this.state.start, this.state.end, this._activeTag);
-              this._dispatchChangeEvent(this.state.start, this.state.end);
+              this._dispatchEvent('change', {
+                  start: this.state.start,
+                  end: this.state.end,
+                  tag: this._activeTag
+              });
+          }
+          if (vglobal.env === 'browser') {
+              vglobal.removeEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
+              vglobal.removeEventListener('pointerup', this._onHandlerPointerUp.bind(this));
           }
+          this.removeEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
       }
       _onHandlerPointerEnter(e) {
           e.stopPropagation();
@@ -24711,17 +24731,19 @@
           return 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;
+          var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
           this._layoutAttrFromConfig = null;
           const { orient, backgroundStyle, backgroundChartStyle, selectedBackgroundStyle, selectedBackgroundChartStyle, middleHandlerStyle, startHandlerStyle, endHandlerStyle, brushSelect } = this.attribute;
           const { start, end } = this.state;
           const { position, width, height } = this.getLayoutAttrFromConfig();
+          const startHandlerMinSize = (_a = startHandlerStyle.triggerMinSize) !== null && _a !== void 0 ? _a : 40;
+          const endHandlerMinSize = (_b = endHandlerStyle.triggerMinSize) !== null && _b !== void 0 ? _b : 40;
           const group = this.createOrUpdateChild('dataZoom-container', {}, 'group');
           this._container = group;
           this._background = group.createOrUpdateChild('background', Object.assign({ x: position.x, y: position.y, width,
               height, cursor: brushSelect ? 'crosshair' : 'auto' }, backgroundStyle), 'rect');
-          ((_a = backgroundChartStyle === null || backgroundChartStyle === void 0 ? void 0 : backgroundChartStyle.line) === null || _a === void 0 ? void 0 : _a.visible) && this.setPreviewAttributes('line', group);
-          ((_b = backgroundChartStyle === null || backgroundChartStyle === void 0 ? void 0 : backgroundChartStyle.area) === null || _b === void 0 ? void 0 : _b.visible) && this.setPreviewAttributes('area', group);
+          ((_c = backgroundChartStyle === null || backgroundChartStyle === void 0 ? void 0 : backgroundChartStyle.line) === null || _c === void 0 ? void 0 : _c.visible) && this.setPreviewAttributes('line', group);
+          ((_d = backgroundChartStyle === null || backgroundChartStyle === void 0 ? void 0 : backgroundChartStyle.area) === null || _d === void 0 ? void 0 : _d.visible) && this.setPreviewAttributes('area', group);
           brushSelect && this.renderDragMask();
           if (this._isHorizontal) {
               this._selectedBackground = group.createOrUpdateChild('selectedBackground', Object.assign({ x: position.x + start * width, y: position.y, width: (end - start) * width, height: height, cursor: brushSelect ? 'crosshair' : 'move' }, selectedBackgroundStyle), 'rect');
@@ -24729,28 +24751,40 @@
           else {
               this._selectedBackground = group.createOrUpdateChild('selectedBackground', Object.assign({ x: position.x, y: position.y + start * height, width, height: (end - start) * height, cursor: brushSelect ? 'crosshair' : 'move' }, selectedBackgroundStyle), 'rect');
           }
-          ((_c = selectedBackgroundChartStyle === null || selectedBackgroundChartStyle === void 0 ? void 0 : selectedBackgroundChartStyle.line) === null || _c === void 0 ? void 0 : _c.visible) && this.setSelectedPreviewAttributes('line', group);
-          ((_d = selectedBackgroundChartStyle === null || selectedBackgroundChartStyle === void 0 ? void 0 : selectedBackgroundChartStyle.area) === null || _d === void 0 ? void 0 : _d.visible) && this.setSelectedPreviewAttributes('area', group);
+          ((_e = selectedBackgroundChartStyle === null || selectedBackgroundChartStyle === void 0 ? void 0 : selectedBackgroundChartStyle.line) === null || _e === void 0 ? void 0 : _e.visible) && this.setSelectedPreviewAttributes('line', group);
+          ((_f = selectedBackgroundChartStyle === null || selectedBackgroundChartStyle === void 0 ? void 0 : selectedBackgroundChartStyle.area) === null || _f === void 0 ? void 0 : _f.visible) && this.setSelectedPreviewAttributes('area', group);
           if (this._showText) {
               this.renderText();
           }
           if (this._isHorizontal) {
-              this._startHandler = group.createOrUpdateChild('startHandler', Object.assign({ x: position.x + start * width, y: position.y + height / 2, size: height, angle: 0, symbolType: (_e = startHandlerStyle === null || startHandlerStyle === void 0 ? void 0 : startHandlerStyle.symbolType) !== null && _e !== void 0 ? _e : 'square', cursor: 'ew-resize', strokeBoundsBuffer: 0, boundsPadding: 2, pickMode: 'imprecise' }, startHandlerStyle), 'symbol');
-              this._endHandler = group.createOrUpdateChild('endHandler', Object.assign({ x: position.x + end * width, y: position.y + height / 2, size: height, angle: 0, symbolType: (_f = endHandlerStyle === null || endHandlerStyle === void 0 ? void 0 : endHandlerStyle.symbolType) !== null && _f !== void 0 ? _f : 'square', cursor: 'ew-resize', strokeBoundsBuffer: 0, boundsPadding: 2, pickMode: 'imprecise' }, endHandlerStyle), 'symbol');
+              this._startHandler = group.createOrUpdateChild('startHandler', Object.assign(Object.assign({ x: position.x + start * width, y: position.y + height / 2, size: height, symbolType: (_g = startHandlerStyle === null || startHandlerStyle === void 0 ? void 0 : startHandlerStyle.symbolType) !== null && _g !== void 0 ? _g : 'square' }, DEFAULT_HANDLER_ATTR_MAP.horizontal), startHandlerStyle), 'symbol');
+              this._endHandler = group.createOrUpdateChild('endHandler', Object.assign(Object.assign({ x: position.x + end * width, y: position.y + height / 2, size: height, symbolType: (_h = endHandlerStyle === null || endHandlerStyle === void 0 ? void 0 : endHandlerStyle.symbolType) !== null && _h !== void 0 ? _h : 'square' }, DEFAULT_HANDLER_ATTR_MAP.horizontal), endHandlerStyle), 'symbol');
+              const startHandlerWidth = Math.max(this._startHandler.AABBBounds.width(), startHandlerMinSize);
+              const startHandlerHeight = Math.max(this._startHandler.AABBBounds.height(), startHandlerMinSize);
+              const endHandlerWidth = Math.max(this._endHandler.AABBBounds.width(), endHandlerMinSize);
+              const endHandlerHeight = Math.max(this._endHandler.AABBBounds.height(), endHandlerMinSize);
+              this._startHandlerMask = group.createOrUpdateChild('startHandlerMask', Object.assign({ x: position.x + start * width - startHandlerWidth / 2, y: position.y + height / 2 - startHandlerHeight / 2, width: startHandlerWidth, height: startHandlerHeight, fill: 'white', fillOpacity: 0 }, DEFAULT_HANDLER_ATTR_MAP.horizontal), 'rect');
+              this._endHandlerMask = group.createOrUpdateChild('endHandlerMask', Object.assign({ x: position.x + end * width - endHandlerWidth / 2, y: position.y + height / 2 - endHandlerHeight / 2, width: endHandlerWidth, height: endHandlerHeight, fill: 'white', fillOpacity: 0 }, DEFAULT_HANDLER_ATTR_MAP.horizontal), 'rect');
               if (middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.visible) {
-                  this._middleHandlerRect = group.createOrUpdateChild('middleHandlerRect', Object.assign({ x: position.x + start * width, y: position.y - (((_g = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _g === void 0 ? void 0 : _g.size) || 10), width: (end - start) * width, height: ((_h = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _h === void 0 ? void 0 : _h.size) || 10 }, (_j = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _j === void 0 ? void 0 : _j.style), 'rect');
-                  this._middleHandlerSymbol = group.createOrUpdateChild('middleHandlerSymbol', Object.assign({ x: position.x + ((start + end) / 2) * width, y: position.y - (((_k = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _k === void 0 ? void 0 : _k.size) || 10) / 2, strokeBoundsBuffer: 0, angle: 0, symbolType: (_m = (_l = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.icon) === null || _l === void 0 ? void 0 : _l.symbolType) !== null && _m !== void 0 ? _m : 'square' }, middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.icon), 'symbol');
+                  this._middleHandlerRect = group.createOrUpdateChild('middleHandlerRect', Object.assign({ x: position.x + start * width, y: position.y - (((_j = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _j === void 0 ? void 0 : _j.size) || 10), width: (end - start) * width, height: ((_k = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _k === void 0 ? void 0 : _k.size) || 10 }, (_l = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _l === void 0 ? void 0 : _l.style), 'rect');
+                  this._middleHandlerSymbol = group.createOrUpdateChild('middleHandlerSymbol', Object.assign({ x: position.x + ((start + end) / 2) * width, y: position.y - (((_m = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _m === void 0 ? void 0 : _m.size) || 10) / 2, strokeBoundsBuffer: 0, angle: 0, symbolType: (_p = (_o = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.icon) === null || _o === void 0 ? void 0 : _o.symbolType) !== null && _p !== void 0 ? _p : 'square' }, middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.icon), 'symbol');
               }
           }
           else {
-              this._startHandler = group.createOrUpdateChild('startHandler', Object.assign({ x: position.x + width / 2, y: position.y + start * height, size: width, angle: 90 * (Math.PI / 180), symbolType: (_o = startHandlerStyle === null || startHandlerStyle === void 0 ? void 0 : startHandlerStyle.symbolType) !== null && _o !== void 0 ? _o : 'square', cursor: 'ns-resize', boundsPadding: 2, pickMode: 'imprecise', strokeBoundsBuffer: 0 }, startHandlerStyle), 'symbol');
+              this._startHandler = group.createOrUpdateChild('startHandler', Object.assign(Object.assign({ x: position.x + width / 2, y: position.y + start * height, size: width, symbolType: (_q = startHandlerStyle === null || startHandlerStyle === void 0 ? void 0 : startHandlerStyle.symbolType) !== null && _q !== void 0 ? _q : 'square' }, DEFAULT_HANDLER_ATTR_MAP.vertical), startHandlerStyle), 'symbol');
+              this._endHandler = group.createOrUpdateChild('endHandler', Object.assign(Object.assign({ x: position.x + width / 2, y: position.y + end * height, size: width, symbolType: (_r = endHandlerStyle === null || endHandlerStyle === void 0 ? void 0 : endHandlerStyle.symbolType) !== null && _r !== void 0 ? _r : 'square' }, DEFAULT_HANDLER_ATTR_MAP.vertical), endHandlerStyle), 'symbol');
+              const startHandlerWidth = Math.max(this._startHandler.AABBBounds.width(), startHandlerMinSize);
+              const startHandlerHeight = Math.max(this._startHandler.AABBBounds.height(), startHandlerMinSize);
+              const endHandlerWidth = Math.max(this._endHandler.AABBBounds.width(), endHandlerMinSize);
+              const endHandlerHeight = Math.max(this._endHandler.AABBBounds.height(), endHandlerMinSize);
+              this._startHandlerMask = group.createOrUpdateChild('startHandlerMask', Object.assign({ x: position.x + width / 2 - startHandlerWidth / 2, y: position.y + start * height - startHandlerHeight / 2, width: startHandlerWidth, height: startHandlerHeight, symbolType: 'rect', fill: 'white', fillOpacity: 0 }, DEFAULT_HANDLER_ATTR_MAP.vertical), 'symbol');
+              this._endHandlerMask = group.createOrUpdateChild('endHandlerMask', Object.assign({ x: position.x + width / 2 - endHandlerWidth / 2, y: position.y + end * height - endHandlerHeight / 2, width: endHandlerWidth, height: endHandlerHeight, symbolType: 'rect', fill: 'white', fillOpacity: 0 }, DEFAULT_HANDLER_ATTR_MAP.vertical), 'symbol');
               if (middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.visible) {
-                  this._middleHandlerRect = group.createOrUpdateChild('middleHandlerRect', Object.assign({ x: orient === 'left' ? position.x - (((_p = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _p === void 0 ? void 0 : _p.size) || 10) : position.x + width, y: position.y + start * height, width: ((_q = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _q === void 0 ? void 0 : _q.size) || 10, height: (end - start) * height }, (_r = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _r === void 0 ? void 0 : _r.style), 'rect');
+                  this._middleHandlerRect = group.createOrUpdateChild('middleHandlerRect', Object.assign({ x: orient === 'left' ? position.x - (((_s = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _s === void 0 ? void 0 : _s.size) || 10) : position.x + width, y: position.y + start * height, width: ((_t = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _t === void 0 ? void 0 : _t.size) || 10, height: (end - start) * height }, (_u = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _u === void 0 ? void 0 : _u.style), 'rect');
                   this._middleHandlerSymbol = group.createOrUpdateChild('middleHandlerSymbol', Object.assign({ x: orient === 'left'
-                          ? position.x - (((_s = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _s === void 0 ? void 0 : _s.size) || 10) / 2
-                          : position.x + width + (((_t = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _t === void 0 ? void 0 : _t.size) || 10) / 2, y: position.y + ((start + end) / 2) * height, angle: 90 * (Math.PI / 180), symbolType: (_v = (_u = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.icon) === null || _u === void 0 ? void 0 : _u.symbolType) !== null && _v !== void 0 ? _v : 'square', strokeBoundsBuffer: 0 }, middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.icon), 'symbol');
+                          ? position.x - (((_v = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _v === void 0 ? void 0 : _v.size) || 10) / 2
+                          : position.x + width + (((_w = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.background) === null || _w === void 0 ? void 0 : _w.size) || 10) / 2, y: position.y + ((start + end) / 2) * height, angle: 90 * (Math.PI / 180), symbolType: (_y = (_x = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.icon) === null || _x === void 0 ? void 0 : _x.symbolType) !== null && _y !== void 0 ? _y : 'square', strokeBoundsBuffer: 0 }, middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.icon), 'symbol');
               }
-              this._endHandler = group.createOrUpdateChild('endHandler', Object.assign({ x: position.x + width / 2, y: position.y + end * height, size: width, angle: 90 * (Math.PI / 180), symbolType: (_w = endHandlerStyle === null || endHandlerStyle === void 0 ? void 0 : endHandlerStyle.symbolType) !== null && _w !== void 0 ? _w : 'square', cursor: 'ns-resize', boundsPadding: 2, pickMode: 'imprecise', strokeBoundsBuffer: 0 }, endHandlerStyle), 'symbol');
           }
       }
       computeBasePoints() {
@@ -24895,25 +24929,18 @@
           container.add(labelShape);
           return labelShape;
       }
-      _dispatchChangeEvent(start, end) {
-          var _a;
-          const changeEvent = new CustomEvent('change', {
-              start,
-              end
-          });
-          changeEvent.manager = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.eventSystem.manager;
-          this.dispatchEvent(changeEvent);
-      }
       setStartAndEnd(start, end) {
-          var _a;
           const { start: startAttr, end: endAttr } = this.attribute;
           if (vutils.isValid(start) && vutils.isValid(end) && (start !== this.state.start || end !== this.state.end)) {
               this.state.start = start;
               this.state.end = end;
               if (startAttr !== this.state.start || endAttr !== this.state.end) {
                   this.setStateAttr(start, end, true);
-                  (_a = this._updateStateCallback) === null || _a === void 0 ? void 0 : _a.call(this, start, end, this._activeTag);
-                  this._dispatchChangeEvent(start, end);
+                  this._dispatchEvent('change', {
+                      start,
+                      end,
+                      tag: this._activeTag
+                  });
               }
           }
       }
@@ -24941,9 +24968,6 @@
           const middleHandlerSymbolSize = (_d = (_c = middleHandlerStyle === null || middleHandlerStyle === void 0 ? void 0 : middleHandlerStyle.icon) === null || _c === void 0 ? void 0 : _c.size) !== null && _d !== void 0 ? _d : 10;
           return Math.max(middleHandlerRectSize, ...vutils.array(middleHandlerSymbolSize));
       }
-      setUpdateStateCallback(callback) {
-          vutils.isFunction(callback) && (this._updateStateCallback = callback);
-      }
       setPreviewPointsX(callback) {
           vutils.isFunction(callback) && (this._previewPointsX = callback);
       }
@@ -25765,7 +25789,6 @@
               target.removeState('hover');
           };
           this._onClick = (e) => {
-              var _a, _b;
               const target = e.target;
               if (target.name === 'preHandler') {
                   if (this._current === 1) {
@@ -25778,14 +25801,12 @@
                   else {
                       target.removeState('disable');
                   }
-                  const changeEvent = new CustomEvent('toPrev', {
+                  this._dispatchEvent('toPrev', {
                       current: this._current,
                       total: this._total,
                       direction: 'pre',
                       event: e
                   });
-                  changeEvent.manager = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.eventSystem.manager;
-                  this.dispatchEvent(changeEvent);
               }
               if (target.name === 'nextHandler') {
                   if (this._current === this._total) {
@@ -25798,14 +25819,12 @@
                   else {
                       target.removeState('disable');
                   }
-                  const changeEvent = new CustomEvent('toNext', {
+                  this._dispatchEvent('toNext', {
                       current: this._current,
                       total: this._total,
                       direction: 'next',
                       event: e
                   });
-                  changeEvent.manager = (_b = this.stage) === null || _b === void 0 ? void 0 : _b.eventSystem.manager;
-                  this.dispatchEvent(changeEvent);
               }
               if (this._current > 1) {
                   this.preHandler.removeState('disable');
@@ -26108,7 +26127,7 @@
                       const currentSelectedItems = this._getSelectedLegends();
                       if (selectMode === 'multiple') {
                           if (allowAllCanceled === false && isSelected && currentSelectedItems.length === 1) {
-                              this._dispatchEvent(exports.LegendEvent.legendItemClick, legendItem, e);
+                              this._dispatchLegendEvent(exports.LegendEvent.legendItemClick, legendItem, e);
                               return;
                           }
                           if (isSelected) {
@@ -26131,7 +26150,7 @@
                           });
                       }
                   }
-                  this._dispatchEvent(exports.LegendEvent.legendItemClick, legendItem, e);
+                  this._dispatchLegendEvent(exports.LegendEvent.legendItemClick, legendItem, e);
               }
           };
       }
@@ -26268,26 +26287,27 @@
           }
       }
       _renderEachItem(item, isSelected, index, items) {
+          var _a, _b;
           const { id, label, value, shape } = item;
-          const { padding = 0, focus, focusIconStyle = {} } = this.attribute.item;
-          let { shape: shapeAttr = {}, label: labelAttr = {}, value: valueAttr = {}, background = {} } = this.attribute.item;
-          shapeAttr = this._handleStyle(shapeAttr, item, isSelected, index, items);
-          labelAttr = this._handleStyle(labelAttr, item, isSelected, index, items);
-          valueAttr = this._handleStyle(valueAttr, item, isSelected, index, items);
-          background = this._handleStyle(background, item, isSelected, index, items);
+          const { padding = 0, focus, focusIconStyle } = this.attribute.item;
+          const { shape: shapeAttr, label: labelAttr, value: valueAttr, background } = this.attribute.item;
+          const shapeStyle = this._handleStyle(shapeAttr, item, isSelected, index, items);
+          const labelStyle = this._handleStyle(labelAttr, item, isSelected, index, items);
+          const valueStyle = this._handleStyle(valueAttr, item, isSelected, index, items);
+          const backgroundStyle = this._handleStyle(background, item, isSelected, index, items);
           const parsedPadding = vutils.normalizePadding(padding);
           let itemGroup;
           if (background.visible === false) {
               itemGroup = graphicCreator.group({
                   x: 0,
                   y: 0,
-                  cursor: (background === null || background === void 0 ? void 0 : background.style).cursor
+                  cursor: (_a = backgroundStyle.style) === null || _a === void 0 ? void 0 : _a.cursor
               });
               this._appendDataToShape(itemGroup, exports.LEGEND_ELEMENT_NAME.item, item, itemGroup);
           }
           else {
-              itemGroup = graphicCreator.group(Object.assign({ x: 0, y: 0 }, background === null || background === void 0 ? void 0 : background.style));
-              this._appendDataToShape(itemGroup, exports.LEGEND_ELEMENT_NAME.item, item, itemGroup, background === null || background === void 0 ? void 0 : background.state);
+              itemGroup = graphicCreator.group(Object.assign({ x: 0, y: 0 }, backgroundStyle.style));
+              this._appendDataToShape(itemGroup, exports.LEGEND_ELEMENT_NAME.item, item, itemGroup, backgroundStyle.state);
           }
           itemGroup.id = `${id !== null && id !== void 0 ? id : label}-${index}`;
           itemGroup.addState(isSelected ? exports.LegendStateValue.selected : exports.LegendStateValue.unSelected);
@@ -26301,20 +26321,20 @@
           let shapeSize = 0;
           let shapeSpace = 0;
           if ((shapeAttr === null || shapeAttr === void 0 ? void 0 : shapeAttr.visible) !== false) {
-              shapeSize = vutils.get(shapeAttr, 'style.size', DEFAULT_SHAPE_SIZE);
+              shapeSize = vutils.get(shapeStyle, 'style.size', DEFAULT_SHAPE_SIZE);
               shapeSpace = vutils.get(shapeAttr, 'space', DEFAULT_SHAPE_SPACE);
-              const itemShape = graphicCreator.symbol(Object.assign(Object.assign({ x: 0, y: 0, symbolType: 'circle', strokeBoundsBuffer: 0 }, shape), shapeAttr.style));
-              Object.keys(shapeAttr.state || {}).forEach(key => {
-                  const color = shapeAttr.state[key].fill ||
-                      shapeAttr.state[key].stroke;
-                  if (shape.fill && vutils.isNil(shapeAttr.state[key].fill) && color) {
-                      shapeAttr.state[key].fill = color;
+              const itemShape = graphicCreator.symbol(Object.assign(Object.assign({ x: 0, y: 0, symbolType: 'circle', strokeBoundsBuffer: 0 }, shape), shapeStyle.style));
+              Object.keys(shapeStyle.state || {}).forEach(key => {
+                  const color = shapeStyle.state[key].fill ||
+                      shapeStyle.state[key].stroke;
+                  if (shape.fill && vutils.isNil(shapeStyle.state[key].fill) && color) {
+                      shapeStyle.state[key].fill = color;
                   }
-                  if (shape.stroke && vutils.isNil(shapeAttr.state[key].stroke) && color) {
-                      shapeAttr.state[key].stroke = color;
+                  if (shape.stroke && vutils.isNil(shapeStyle.state[key].stroke) && color) {
+                      shapeStyle.state[key].stroke = color;
                   }
               });
-              this._appendDataToShape(itemShape, exports.LEGEND_ELEMENT_NAME.itemShape, item, itemGroup, shapeAttr === null || shapeAttr === void 0 ? void 0 : shapeAttr.state);
+              this._appendDataToShape(itemShape, exports.LEGEND_ELEMENT_NAME.itemShape, item, itemGroup, shapeStyle.state);
               itemShape.addState(isSelected ? exports.LegendStateValue.selected : exports.LegendStateValue.unSelected);
               innerGroup.add(itemShape);
           }
@@ -26326,15 +26346,15 @@
               this._appendDataToShape(focusShape, exports.LEGEND_ELEMENT_NAME.focus, item, itemGroup);
               focusSpace = focusSize;
           }
-          const labelShape = graphicCreator.text(Object.assign(Object.assign({ x: shapeSize / 2 + shapeSpace, y: 0, textAlign: 'start', textBaseline: 'middle', lineHeight: (labelAttr === null || labelAttr === void 0 ? void 0 : labelAttr.style).fontSize }, labelAttr === null || labelAttr === void 0 ? void 0 : labelAttr.style), { text: labelAttr.formatMethod ? labelAttr.formatMethod(label, item, index) : label }));
-          this._appendDataToShape(labelShape, exports.LEGEND_ELEMENT_NAME.itemLabel, item, itemGroup, labelAttr === null || labelAttr === void 0 ? void 0 : labelAttr.state);
+          const labelShape = graphicCreator.text(Object.assign(Object.assign({ x: shapeSize / 2 + shapeSpace, y: 0, textAlign: 'start', textBaseline: 'middle', lineHeight: (_b = labelStyle.style) === null || _b === void 0 ? void 0 : _b.fontSize }, labelStyle.style), { text: labelAttr.formatMethod ? labelAttr.formatMethod(label, item, index) : label }));
+          this._appendDataToShape(labelShape, exports.LEGEND_ELEMENT_NAME.itemLabel, item, itemGroup, labelStyle.state);
           labelShape.addState(isSelected ? exports.LegendStateValue.selected : exports.LegendStateValue.unSelected);
           innerGroup.add(labelShape);
           const labelSpace = vutils.get(labelAttr, 'space', DEFAULT_LABEL_SPACE);
           if (vutils.isValid(value)) {
               const valueSpace = vutils.get(valueAttr, 'space', focus ? DEFAULT_VALUE_SPACE : 0);
-              const valueShape = graphicCreator.text(Object.assign(Object.assign({ x: 0, y: 0, textAlign: 'start', textBaseline: 'middle', lineHeight: (valueAttr === null || valueAttr === void 0 ? void 0 : valueAttr.style).fontSize }, valueAttr === null || valueAttr === void 0 ? void 0 : valueAttr.style), { text: valueAttr.formatMethod ? valueAttr.formatMethod(value, item, index) : value }));
-              this._appendDataToShape(valueShape, exports.LEGEND_ELEMENT_NAME.itemValue, item, itemGroup, valueAttr === null || valueAttr === void 0 ? void 0 : valueAttr.state);
+              const valueShape = graphicCreator.text(Object.assign(Object.assign({ x: 0, y: 0, textAlign: 'start', textBaseline: 'middle', lineHeight: valueStyle.style.fontSize }, valueStyle.style), { text: valueAttr.formatMethod ? valueAttr.formatMethod(value, item, index) : value }));
+              this._appendDataToShape(valueShape, exports.LEGEND_ELEMENT_NAME.itemValue, item, itemGroup, valueStyle.state);
               valueShape.addState(isSelected ? exports.LegendStateValue.selected : exports.LegendStateValue.unSelected);
               if (this._itemWidthByUser) {
                   const layoutWidth = this._itemWidthByUser -
@@ -26553,7 +26573,7 @@
           if (focusButton) {
               focusButton.setAttribute('visible', true);
           }
-          this._dispatchEvent(exports.LegendEvent.legendItemHover, legendItem, e);
+          this._dispatchLegendEvent(exports.LegendEvent.legendItemHover, legendItem, e);
       }
       _unHover(legendItem, e) {
           let attributeUpdate = false;
@@ -26578,9 +26598,9 @@
               focusButton.setAttribute('visible', false);
           }
           if (attributeUpdate) {
-              this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem, e);
+              this._dispatchLegendEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem, e);
           }
-          this._dispatchEvent(exports.LegendEvent.legendItemUnHover, legendItem, e);
+          this._dispatchLegendEvent(exports.LegendEvent.legendItemUnHover, legendItem, e);
       }
       _setLegendItemState(legendItem, stateName, e) {
           const keepCurrentStates = true;
@@ -26601,7 +26621,7 @@
               }
           });
           if (attributeUpdate) {
-              this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem, e);
+              this._dispatchLegendEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem, e);
           }
       }
       _removeLegendItemState(legendItem, stateNames, e) {
@@ -26626,7 +26646,7 @@
               }
           });
           if (attributeUpdate) {
-              this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem, e);
+              this._dispatchLegendEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem, e);
           }
       }
       _getSelectedLegends() {
@@ -26645,12 +26665,11 @@
           shape.delegate = delegateShape;
           shape.states = vutils.merge({}, DEFAULT_STATES, states);
       }
-      _dispatchEvent(eventName, legendItem, event) {
-          var _a;
+      _dispatchLegendEvent(eventName, legendItem, event) {
           const currentSelectedItems = this._getSelectedLegends();
           currentSelectedItems.sort((pre, next) => pre.index - next.index);
           const currentSelected = currentSelectedItems.map((obj) => obj.label);
-          const changeEvent = new CustomEvent(eventName, {
+          this._dispatchEvent(eventName, {
               item: legendItem,
               data: legendItem.data,
               selected: legendItem.hasState(exports.LegendStateValue.selected),
@@ -26658,18 +26677,27 @@
               currentSelected,
               event
           });
-          changeEvent.manager = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.eventSystem.manager;
-          this.dispatchEvent(changeEvent);
       }
       _handleStyle(config, item, isSelected, index, items) {
-          const newConfig = vutils.merge({}, config);
-          if (config.style && vutils.isFunction(config.style)) {
-              newConfig.style = config.style(item, isSelected, index, items);
+          const newConfig = {};
+          if (config.style) {
+              if (vutils.isFunction(config.style)) {
+                  newConfig.style = config.style(item, isSelected, index, items);
+              }
+              else {
+                  newConfig.style = config.style;
+              }
           }
           if (config.state) {
+              newConfig.state = {};
               Object.keys(config.state).forEach(key => {
-                  if (config.state[key] && vutils.isFunction(config.state[key])) {
-                      newConfig.state[key] = config.state[key](item, isSelected, index, items);
+                  if (config.state[key]) {
+                      if (vutils.isFunction(config.state[key])) {
+                          newConfig.state[key] = config.state[key](item, isSelected, index, items);
+                      }
+                      else {
+                          newConfig.state[key] = config.state[key];
+                      }
                   }
               });
           }
@@ -27334,10 +27362,9 @@
           }
       }
       _dispatchChangeEvent() {
-          var _a;
           const isRange = !!this.attribute.range;
           const currentValue = this._currentValue;
-          const changeEvent = new CustomEvent('change', {
+          this._dispatchEvent('change', {
               value: isRange
                   ? [
                       Math.min(currentValue.endValue, currentValue.startValue),
@@ -27351,8 +27378,6 @@
                   ]
                   : currentValue.startPos
           });
-          changeEvent.manager = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.eventSystem.manager;
-          this.dispatchEvent(changeEvent);
       }
       _getHandlers() {
           let startHandler = this._startHandler;
@@ -28270,12 +28295,6 @@
                   this.forward();
               });
           };
-          this._createCustomEvent = (eventType) => {
-              var _a;
-              const customEvent = new CustomEvent(eventType, { eventType });
-              customEvent.manager = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.eventSystem.manager;
-              return customEvent;
-          };
           this.renderPlay = () => {
               if (this._isPaused) {
                   this._playController.setAttributes(Object.assign({ symbolType: this._playController.getComputedAttribute('symbolType') }, this._startAttr.style));
@@ -28291,20 +28310,16 @@
               this._forwardController.setAttributes(this._forwardAttr.style);
           };
           this.play = () => {
-              const onPlayEvent = this._createCustomEvent(ControllerEventEnum.OnPlay);
-              this.dispatchEvent(onPlayEvent);
+              this._dispatchEvent('ControllerEventEnum.OnPlay');
           };
           this.pause = () => {
-              const onPauseEvent = this._createCustomEvent(ControllerEventEnum.OnPause);
-              this.dispatchEvent(onPauseEvent);
+              this._dispatchEvent('ControllerEventEnum.OnPause');
           };
           this.forward = () => {
-              const onPlayEvent = this._createCustomEvent(ControllerEventEnum.OnForward);
-              this.dispatchEvent(onPlayEvent);
+              this._dispatchEvent('ControllerEventEnum.OnForward');
           };
           this.backward = () => {
-              const onPlayEvent = this._createCustomEvent(ControllerEventEnum.OnBackward);
-              this.dispatchEvent(onPlayEvent);
+              this._dispatchEvent('ControllerEventEnum.OnBackward');
           };
           this.togglePlay = () => {
               this._playController.setAttributes(this._startAttr.style);
@@ -28579,14 +28594,11 @@
           this._controller.setAttributes(attrs);
       }
       dispatchCustomEvent(eventType, dataIndex) {
-          var _a;
-          const changeEvent = new CustomEvent(eventType, {
+          this._dispatchEvent(eventType, {
               eventType,
               index: dataIndex,
               value: this._data[dataIndex]
           });
-          changeEvent.manager = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.eventSystem.manager;
-          this.dispatchEvent(changeEvent);
       }
   }
   BasePlayer.defaultAttributes = {
@@ -29020,20 +29032,27 @@
               if (this._activeDrawState && !this._isDrawedBeforeEnd && removeOnClick) {
                   this._container.incrementalClearChild();
                   this._brushMaskAABBBoundsDict = {};
-                  this._updateDragMaskCallback &&
-                      this._updateDragMaskCallback({
-                          operateType: exports.IOperateType.brushClear,
-                          operateMask: this._operatingMask,
-                          operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
-                      });
+                  this._dispatchEvent(exports.IOperateType.brushClear, {
+                      operateMask: this._operatingMask,
+                      operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
+                      event: e
+                  });
               }
               else if (!this._outOfInteractiveRange(e)) {
-                  this._updateDragMaskCallback &&
-                      this._updateDragMaskCallback({
-                          operateType: this._activeDrawState ? exports.IOperateType.drawEnd : exports.IOperateType.moveEnd,
+                  if (this._activeDrawState) {
+                      this._dispatchEvent(exports.IOperateType.drawEnd, {
                           operateMask: this._operatingMask,
-                          operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
+                          operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
+                          event: e
                       });
+                  }
+                  if (this._activeMoveState) {
+                      this._dispatchEvent(exports.IOperateType.moveEnd, {
+                          operateMask: this._operatingMask,
+                          operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
+                          event: e
+                      });
+                  }
               }
               this._activeDrawState = false;
               this._activeMoveState = false;
@@ -29041,7 +29060,7 @@
               (_a = this._operatingMask) === null || _a === void 0 ? void 0 : _a.setAttribute('pickable', false);
           };
       }
-      bindBrushEvents() {
+      _bindBrushEvents() {
           if (this.attribute.disableTriggerEvent) {
               return;
           }
@@ -29079,12 +29098,11 @@
               this._container.incrementalClearChild();
           }
           this._addBrushMask();
-          this._updateDragMaskCallback &&
-              this._updateDragMaskCallback({
-                  operateType: exports.IOperateType.drawStart,
-                  operateMask: this._operatingMask,
-                  operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
-              });
+          this._dispatchEvent(exports.IOperateType.drawStart, {
+              operateMask: this._operatingMask,
+              operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
+              event: e
+          });
       }
       _initMove(e) {
           var _a, _b;
@@ -29101,12 +29119,11 @@
           this._operatingMaskMoveRangeX = [minMoveStepX, maxMoveStepX];
           this._operatingMaskMoveRangeY = [minMoveStepY, maxMoveStepY];
           this._operatingMask.setAttribute('pickable', true);
-          this._updateDragMaskCallback &&
-              this._updateDragMaskCallback({
-                  operateType: exports.IOperateType.moveStart,
-                  operateMask: this._operatingMask,
-                  operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
-              });
+          this._dispatchEvent(exports.IOperateType.moveStart, {
+              operateMask: this._operatingMask,
+              operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
+              event: e
+          });
       }
       _drawing(e) {
           var _a;
@@ -29130,12 +29147,11 @@
           const maskPoints = this._computeMaskPoints();
           this._operatingMask.setAttribute('points', maskPoints);
           this._brushMaskAABBBoundsDict[this._operatingMask.name] = this._operatingMask.AABBBounds;
-          this._updateDragMaskCallback &&
-              this._updateDragMaskCallback({
-                  operateType: exports.IOperateType.drawing,
-                  operateMask: this._operatingMask,
-                  operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
-              });
+          this._dispatchEvent(exports.IOperateType.drawing, {
+              operateMask: this._operatingMask,
+              operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
+              event: e
+          });
       }
       _moving(e) {
           const startPos = this._cacheMovePoint;
@@ -29154,12 +29170,11 @@
               dy: moveY
           });
           this._brushMaskAABBBoundsDict[this._operatingMask.name] = this._operatingMask.AABBBounds;
-          this._updateDragMaskCallback &&
-              this._updateDragMaskCallback({
-                  operateType: exports.IOperateType.moving,
-                  operateMask: this._operatingMask,
-                  operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
-              });
+          this._dispatchEvent(exports.IOperateType.moving, {
+              operateMask: this._operatingMask,
+              operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
+              event: e
+          });
       }
       _computeMaskPoints() {
           const { brushType, xRange = [0, 0], yRange = [0, 0] } = this.attribute;
@@ -29244,21 +29259,18 @@
           return false;
       }
       eventPosToStagePos(e) {
-          var _a, _b, _c;
-          const stagePosition = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.window.getBoundingClientRect();
+          var _a, _b;
+          const { x, y } = vglobal.mapToCanvasPoint(e);
           return {
-              x: e.clientX - ((stagePosition === null || stagePosition === void 0 ? void 0 : stagePosition.left) || 0) - (((_b = this.stage) === null || _b === void 0 ? void 0 : _b.x) || 0),
-              y: e.clientY - ((stagePosition === null || stagePosition === void 0 ? void 0 : stagePosition.top) || 0) - (((_c = this.stage) === null || _c === void 0 ? void 0 : _c.y) || 0)
+              x: x - (((_a = this.stage) === null || _a === void 0 ? void 0 : _a.x) || 0),
+              y: y - (((_b = this.stage) === null || _b === void 0 ? void 0 : _b.y) || 0)
           };
       }
       render() {
-          this.bindBrushEvents();
+          this._bindBrushEvents();
           const group = this.createOrUpdateChild('brush-container', {}, 'group');
           this._container = group;
       }
-      setUpdateDragMaskCallback(callback) {
-          vutils.isFunction(callback) && (this._updateDragMaskCallback = callback);
-      }
       releaseBrushEvents() {
           const { delayType = 'throttle', delayTime = 0, trigger = DEFAULT_BRUSH_ATTRIBUTES.trigger, updateTrigger = DEFAULT_BRUSH_ATTRIBUTES.updateTrigger, endTrigger = DEFAULT_BRUSH_ATTRIBUTES.endTrigger, resetTrigger = DEFAULT_BRUSH_ATTRIBUTES.resetTrigger } = this.attribute;
           this.stage.removeEventListener(trigger, this._onBrushStart);
@@ -29831,7 +29843,6 @@
           });
       }
       handleClick() {
-          var _a;
           if (this.attribute.disabled) {
               return;
           }
@@ -29843,12 +29854,10 @@
               this.setAttribute('checked', true);
               this.setAttribute('indeterminate', false);
           }
-          const changeEvent = new CustomEvent('checkbox_state_change', {
+          this._dispatchEvent('checkbox_state_change', {
               eventType: 'checkbox_state_change',
               checked: this.attribute.checked
           });
-          changeEvent.manager = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.eventSystem.manager;
-          this.dispatchEvent(changeEvent);
       }
   }
   CheckBox.defaultAttributes = {
@@ -29889,7 +29898,7 @@
       }
   };
 
-  const version = "0.17.2-alpha.3";
+  const version = "0.17.2";
 
   exports.AbstractComponent = AbstractComponent;
   exports.ArcInfo = ArcInfo;