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

package/dist/index.js

@@ -16928,6 +16928,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 +18596,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 +18632,7 @@
           }
           this.attribute.range = currScrollRange;
           if (realTime) {
-              this._onChange({
+              this._dispatchEvent('scroll', {
                   pre: preRange,
                   value: currScrollRange
               });
@@ -18729,12 +18735,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 +22614,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 +22638,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;
@@ -24374,9 +24374,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 +24418,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,13 +24447,12 @@
           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;
+          const { showDetail, brushSelect } = this.attribute;
           if (this._startHandler) {
               this._startHandler.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, 'start'));
           }
@@ -24472,15 +24478,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 +24508,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 +24528,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();
@@ -24895,25 +24899,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 +24938,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 +25759,6 @@
               target.removeState('hover');
           };
           this._onClick = (e) => {
-              var _a, _b;
               const target = e.target;
               if (target.name === 'preHandler') {
                   if (this._current === 1) {
@@ -25778,14 +25771,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 +25789,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 +26097,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 +26120,7 @@
                           });
                       }
                   }
-                  this._dispatchEvent(exports.LegendEvent.legendItemClick, legendItem, e);
+                  this._dispatchLegendEvent(exports.LegendEvent.legendItemClick, legendItem, e);
               }
           };
       }
@@ -26268,26 +26257,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 +26291,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 +26316,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 +26543,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 +26568,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 +26591,7 @@
               }
           });
           if (attributeUpdate) {
-              this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem, e);
+              this._dispatchLegendEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem, e);
           }
       }
       _removeLegendItemState(legendItem, stateNames, e) {
@@ -26626,7 +26616,7 @@
               }
           });
           if (attributeUpdate) {
-              this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem, e);
+              this._dispatchLegendEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem, e);
           }
       }
       _getSelectedLegends() {
@@ -26645,12 +26635,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 +26647,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 +27332,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 +27348,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 +28265,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 +28280,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 +28564,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 +29002,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 +29030,7 @@
               (_a = this._operatingMask) === null || _a === void 0 ? void 0 : _a.setAttribute('pickable', false);
           };
       }
-      bindBrushEvents() {
+      _bindBrushEvents() {
           if (this.attribute.disableTriggerEvent) {
               return;
           }
@@ -29079,12 +29068,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 +29089,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 +29117,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 +29140,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 +29229,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 +29813,6 @@
           });
       }
       handleClick() {
-          var _a;
           if (this.attribute.disabled) {
               return;
           }
@@ -29843,12 +29824,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 +29868,7 @@
       }
   };
 
-  const version = "0.17.2-alpha.3";
+  const version = "0.17.2-alpha.4";
 
   exports.AbstractComponent = AbstractComponent;
   exports.ArcInfo = ArcInfo;