@visactor/vrender-components 0.17.2-alpha.0 → 0.17.2-alpha.1

package/dist/index.js

@@ -19215,12 +19215,6 @@
       _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);
-      }
   }
 
   const delayMap$2 = {
@@ -19301,7 +19295,7 @@
               const [currentPos, currentScrollValue] = this._computeScrollValue(e);
               const range = [preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue];
               if (!realTime) {
-                  this._dispatchEvent('scroll', {
+                  this._onChange({
                       pre: preRange,
                       value: vutils.clampRange(range, limitRange[0], limitRange[1])
                   });
@@ -19337,7 +19331,7 @@
           }
           this.attribute.range = currScrollRange;
           if (realTime) {
-              this._dispatchEvent('scroll', {
+              this._onChange({
                   pre: preRange,
                   value: currScrollRange
               });
@@ -19440,6 +19434,12 @@
               ? 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;
@@ -21859,7 +21859,7 @@
           fontSize: 12,
           textAlign: 'center',
           textBaseline: 'middle',
-          boundsPadding: [-1, 0, -1, 0]
+          boundsPadding: [-2, -2, -2, -2]
       },
       offset: 0,
       pickable: false
@@ -21876,15 +21876,10 @@
   }
   SymbolLabel.defaultAttributes = {
       textStyle: {
-          fontSize: 12,
-          fill: '#000',
-          textAlign: 'center',
-          textBaseline: 'middle',
-          boundsPadding: [-1, 0, -1, 0]
+          fill: '#000'
       },
       position: 'top',
-      offset: 5,
-      pickable: false
+      offset: 5
   };
 
   class RectLabel extends LabelBase {
@@ -21972,15 +21967,10 @@
   RectLabel.tag = 'rect-label';
   RectLabel.defaultAttributes = {
       textStyle: {
-          fontSize: 12,
-          fill: '#000',
-          textAlign: 'center',
-          textBaseline: 'middle',
-          boundsPadding: [-1, 0, -1, 0]
+          fill: '#000'
       },
       position: 'top',
-      offset: 5,
-      pickable: false
+      offset: 5
   };
 
   class LineLabel extends LabelBase {
@@ -22008,15 +21998,10 @@
   }
   LineLabel.defaultAttributes = {
       textStyle: {
-          fontSize: 12,
-          fill: '#000',
-          textAlign: 'center',
-          textBaseline: 'middle',
-          boundsPadding: [-1, 0, -1, 0]
+          fill: '#000'
       },
       position: 'end',
-      offset: 6,
-      pickable: false
+      offset: 6
   };
 
   class ArcInfo {
@@ -22724,12 +22709,9 @@
           visible: true,
           fontSize: 14,
           fontWeight: 'normal',
-          fillOpacity: 1,
-          textAlign: 'center',
-          textBaseline: 'middle'
+          fillOpacity: 1
       },
       position: 'outside',
-      offset: 0,
       line: {
           visible: true,
           line1MinLength: 20,
@@ -22739,8 +22721,7 @@
           align: 'arc',
           strategy: 'priority',
           tangentConstraint: true
-      },
-      pickable: false
+      }
   };
 
   class AreaLabel extends LabelBase {
@@ -22768,15 +22749,10 @@
   }
   AreaLabel.defaultAttributes = {
       textStyle: {
-          fontSize: 12,
-          fill: '#000',
-          textAlign: 'center',
-          textBaseline: 'middle',
-          boundsPadding: [-1, 0, -1, 0]
+          fill: '#000'
       },
       position: 'end',
-      offset: 6,
-      pickable: false
+      offset: 6
   };
 
   class LineDataLabel extends LabelBase {
@@ -22790,15 +22766,10 @@
   }
   LineDataLabel.defaultAttributes = {
       textStyle: {
-          fontSize: 12,
-          fill: '#000',
-          textAlign: 'center',
-          textBaseline: 'middle',
-          boundsPadding: [-1, 0, -1, 0]
+          fill: '#000'
       },
       position: 'top',
-      offset: 5,
-      pickable: false
+      offset: 5
   };
 
   const labelComponentMap = {
@@ -25268,6 +25239,7 @@
               this._activeCache.lastPos = this.eventPosToStagePos(e);
           };
           this._onHandlerPointerMove = (e) => {
+              var _a;
               e.stopPropagation();
               const { start: startAttr, end: endAttr, brushSelect, realTime = true } = this.attribute;
               const pos = this.eventPosToStagePos(e);
@@ -25305,11 +25277,8 @@
               end = Math.min(Math.max(end, 0), 1);
               if (startAttr !== start || endAttr !== end) {
                   this.setStateAttr(start, end, true);
-                  this._dispatchEvent('change', {
-                      start,
-                      end,
-                      tag: this._activeTag
-                  });
+                  realTime && ((_a = this._updateStateCallback) === null || _a === void 0 ? void 0 : _a.call(this, start, end, this._activeTag));
+                  this._dispatchChangeEvent(start, end);
               }
           };
           const { start, end, size, orient, showDetail, position, previewData, previewPointsX, previewPointsY, previewPointsX1, previewPointsY1, updateStateCallback } = this.attribute;
@@ -25334,6 +25303,7 @@
           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) {
@@ -25404,14 +25374,15 @@
           shouldRender && this.setAttributes({ start, end });
       }
       eventPosToStagePos(e) {
-          var _a, _b;
-          const { x, y } = vglobal.mapToCanvasPoint(e);
+          var _a, _b, _c;
+          const stagePosition = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.window.getBoundingClientRect();
           return {
-              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)
+              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)
           };
       }
       _onHandlerPointerUp(e) {
+          var _a;
           e.preventDefault();
           const { start, end, brushSelect, realTime = true } = this.attribute;
           if (this._activeState) {
@@ -25424,11 +25395,8 @@
           brushSelect && this.renderDragMask();
           if (!realTime || start !== this.state.start || end !== this.state.end) {
               this.setStateAttr(this.state.start, this.state.end, true);
-              this._dispatchEvent('change', {
-                  start: this.state.start,
-                  end: this.state.end,
-                  tag: this._activeTag
-              });
+              (_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);
           }
       }
       _onHandlerPointerEnter(e) {
@@ -25790,18 +25758,25 @@
           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);
-                  this._dispatchEvent('change', {
-                      start,
-                      end,
-                      tag: this._activeTag
-                  });
+                  (_a = this._updateStateCallback) === null || _a === void 0 ? void 0 : _a.call(this, start, end, this._activeTag);
+                  this._dispatchChangeEvent(start, end);
               }
           }
       }
@@ -25829,6 +25804,9 @@
           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);
       }
@@ -26620,6 +26598,7 @@
               target.removeState('hover');
           };
           this._onClick = (e) => {
+              var _a, _b;
               const target = e.target;
               if (target.name === 'preHandler') {
                   if (this._current === 1) {
@@ -26632,12 +26611,14 @@
                   else {
                       target.removeState('disable');
                   }
-                  this._dispatchEvent('toPrev', {
+                  const changeEvent = new CustomEvent('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) {
@@ -26650,12 +26631,14 @@
                   else {
                       target.removeState('disable');
                   }
-                  this._dispatchEvent('toNext', {
+                  const changeEvent = new CustomEvent('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');
@@ -26932,7 +26915,7 @@
                       const currentSelectedItems = this._getSelectedLegends();
                       if (selectMode === 'multiple') {
                           if (allowAllCanceled === false && isSelected && currentSelectedItems.length === 1) {
-                              this._dispatchLegendEvent(exports.LegendEvent.legendItemClick, legendItem, e);
+                              this._dispatchEvent(exports.LegendEvent.legendItemClick, legendItem, e);
                               return;
                           }
                           if (isSelected) {
@@ -26955,7 +26938,7 @@
                           });
                       }
                   }
-                  this._dispatchLegendEvent(exports.LegendEvent.legendItemClick, legendItem, e);
+                  this._dispatchEvent(exports.LegendEvent.legendItemClick, legendItem, e);
               }
           };
       }
@@ -27377,7 +27360,7 @@
           if (focusButton) {
               focusButton.setAttribute('visible', true);
           }
-          this._dispatchLegendEvent(exports.LegendEvent.legendItemHover, legendItem, e);
+          this._dispatchEvent(exports.LegendEvent.legendItemHover, legendItem, e);
       }
       _unHover(legendItem, e) {
           let attributeUpdate = false;
@@ -27402,9 +27385,9 @@
               focusButton.setAttribute('visible', false);
           }
           if (attributeUpdate) {
-              this._dispatchLegendEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem, e);
+              this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem, e);
           }
-          this._dispatchLegendEvent(exports.LegendEvent.legendItemUnHover, legendItem, e);
+          this._dispatchEvent(exports.LegendEvent.legendItemUnHover, legendItem, e);
       }
       _setLegendItemState(legendItem, stateName, e) {
           const keepCurrentStates = true;
@@ -27425,7 +27408,7 @@
               }
           });
           if (attributeUpdate) {
-              this._dispatchLegendEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem, e);
+              this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem, e);
           }
       }
       _removeLegendItemState(legendItem, stateNames, e) {
@@ -27450,7 +27433,7 @@
               }
           });
           if (attributeUpdate) {
-              this._dispatchLegendEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem, e);
+              this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem, e);
           }
       }
       _getSelectedLegends() {
@@ -27469,11 +27452,12 @@
           shape.delegate = delegateShape;
           shape.states = vutils.merge({}, DEFAULT_STATES, states);
       }
-      _dispatchLegendEvent(eventName, legendItem, event) {
+      _dispatchEvent(eventName, legendItem, event) {
+          var _a;
           const currentSelectedItems = this._getSelectedLegends();
           currentSelectedItems.sort((pre, next) => pre.index - next.index);
           const currentSelected = currentSelectedItems.map((obj) => obj.label);
-          this._dispatchEvent(eventName, {
+          const changeEvent = new CustomEvent(eventName, {
               item: legendItem,
               data: legendItem.data,
               selected: legendItem.hasState(exports.LegendStateValue.selected),
@@ -27481,6 +27465,8 @@
               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);
@@ -28154,9 +28140,10 @@
           }
       }
       _dispatchChangeEvent() {
+          var _a;
           const isRange = !!this.attribute.range;
           const currentValue = this._currentValue;
-          this._dispatchEvent('change', {
+          const changeEvent = new CustomEvent('change', {
               value: isRange
                   ? [
                       Math.min(currentValue.endValue, currentValue.startValue),
@@ -28170,6 +28157,8 @@
                   ]
                   : currentValue.startPos
           });
+          changeEvent.manager = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.eventSystem.manager;
+          this.dispatchEvent(changeEvent);
       }
       _getHandlers() {
           let startHandler = this._startHandler;
@@ -29065,6 +29054,12 @@
                   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));
@@ -29080,16 +29075,20 @@
               this._forwardController.setAttributes(this._forwardAttr.style);
           };
           this.play = () => {
-              this._dispatchEvent('ControllerEventEnum.OnPlay');
+              const onPlayEvent = this._createCustomEvent(ControllerEventEnum.OnPlay);
+              this.dispatchEvent(onPlayEvent);
           };
           this.pause = () => {
-              this._dispatchEvent('ControllerEventEnum.OnPause');
+              const onPauseEvent = this._createCustomEvent(ControllerEventEnum.OnPause);
+              this.dispatchEvent(onPauseEvent);
           };
           this.forward = () => {
-              this._dispatchEvent('ControllerEventEnum.OnForward');
+              const onPlayEvent = this._createCustomEvent(ControllerEventEnum.OnForward);
+              this.dispatchEvent(onPlayEvent);
           };
           this.backward = () => {
-              this._dispatchEvent('ControllerEventEnum.OnBackward');
+              const onPlayEvent = this._createCustomEvent(ControllerEventEnum.OnBackward);
+              this.dispatchEvent(onPlayEvent);
           };
           this.togglePlay = () => {
               this._playController.setAttributes(this._startAttr.style);
@@ -29364,11 +29363,14 @@
           this._controller.setAttributes(attrs);
       }
       dispatchCustomEvent(eventType, dataIndex) {
-          this._dispatchEvent(eventType, {
+          var _a;
+          const changeEvent = new CustomEvent(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 = {
@@ -29782,27 +29784,20 @@
               if (this._activeDrawState && !this._isDrawedBeforeEnd && removeOnClick) {
                   this._container.incrementalClearChild();
                   this._brushMaskAABBBoundsDict = {};
-                  this._dispatchEvent(exports.IOperateType.brushClear, {
-                      operateMask: this._operatingMask,
-                      operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-                      event: e
-                  });
-              }
-              else if (!this._outOfInteractiveRange(e)) {
-                  if (this._activeDrawState) {
-                      this._dispatchEvent(exports.IOperateType.drawEnd, {
+                  this._updateDragMaskCallback &&
+                      this._updateDragMaskCallback({
+                          operateType: exports.IOperateType.brushClear,
                           operateMask: this._operatingMask,
-                          operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-                          event: e
+                          operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
                       });
-                  }
-                  if (this._activeMoveState) {
-                      this._dispatchEvent(exports.IOperateType.moveEnd, {
+              }
+              else if (!this._outOfInteractiveRange(e)) {
+                  this._updateDragMaskCallback &&
+                      this._updateDragMaskCallback({
+                          operateType: this._activeDrawState ? exports.IOperateType.drawEnd : exports.IOperateType.moveEnd,
                           operateMask: this._operatingMask,
-                          operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-                          event: e
+                          operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
                       });
-                  }
               }
               this._activeDrawState = false;
               this._activeMoveState = false;
@@ -29810,7 +29805,7 @@
               (_a = this._operatingMask) === null || _a === void 0 ? void 0 : _a.setAttribute('pickable', false);
           };
       }
-      _bindBrushEvents() {
+      bindBrushEvents() {
           if (this.attribute.disableTriggerEvent) {
               return;
           }
@@ -29848,11 +29843,12 @@
               this._container.incrementalClearChild();
           }
           this._addBrushMask();
-          this._dispatchEvent(exports.IOperateType.drawStart, {
-              operateMask: this._operatingMask,
-              operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-              event: e
-          });
+          this._updateDragMaskCallback &&
+              this._updateDragMaskCallback({
+                  operateType: exports.IOperateType.drawStart,
+                  operateMask: this._operatingMask,
+                  operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
+              });
       }
       _initMove(e) {
           var _a, _b;
@@ -29869,11 +29865,12 @@
           this._operatingMaskMoveRangeX = [minMoveStepX, maxMoveStepX];
           this._operatingMaskMoveRangeY = [minMoveStepY, maxMoveStepY];
           this._operatingMask.setAttribute('pickable', true);
-          this._dispatchEvent(exports.IOperateType.moveStart, {
-              operateMask: this._operatingMask,
-              operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-              event: e
-          });
+          this._updateDragMaskCallback &&
+              this._updateDragMaskCallback({
+                  operateType: exports.IOperateType.moveStart,
+                  operateMask: this._operatingMask,
+                  operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
+              });
       }
       _drawing(e) {
           var _a;
@@ -29897,11 +29894,12 @@
           const maskPoints = this._computeMaskPoints();
           this._operatingMask.setAttribute('points', maskPoints);
           this._brushMaskAABBBoundsDict[this._operatingMask.name] = this._operatingMask.AABBBounds;
-          this._dispatchEvent(exports.IOperateType.drawing, {
-              operateMask: this._operatingMask,
-              operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-              event: e
-          });
+          this._updateDragMaskCallback &&
+              this._updateDragMaskCallback({
+                  operateType: exports.IOperateType.drawing,
+                  operateMask: this._operatingMask,
+                  operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
+              });
       }
       _moving(e) {
           const startPos = this._cacheMovePoint;
@@ -29920,11 +29918,12 @@
               dy: moveY
           });
           this._brushMaskAABBBoundsDict[this._operatingMask.name] = this._operatingMask.AABBBounds;
-          this._dispatchEvent(exports.IOperateType.moving, {
-              operateMask: this._operatingMask,
-              operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-              event: e
-          });
+          this._updateDragMaskCallback &&
+              this._updateDragMaskCallback({
+                  operateType: exports.IOperateType.moving,
+                  operateMask: this._operatingMask,
+                  operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
+              });
       }
       _computeMaskPoints() {
           const { brushType, xRange = [0, 0], yRange = [0, 0] } = this.attribute;
@@ -30009,18 +30008,21 @@
           return false;
       }
       eventPosToStagePos(e) {
-          var _a, _b;
-          const { x, y } = vglobal.mapToCanvasPoint(e);
+          var _a, _b, _c;
+          const stagePosition = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.window.getBoundingClientRect();
           return {
-              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)
+              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)
           };
       }
       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);
@@ -30576,6 +30578,7 @@
           });
       }
       handleClick() {
+          var _a;
           if (this.attribute.disabled) {
               return;
           }
@@ -30587,10 +30590,12 @@
               this.setAttribute('checked', true);
               this.setAttribute('indeterminate', false);
           }
-          this._dispatchEvent('checkbox_state_change', {
+          const changeEvent = new CustomEvent('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 = {
@@ -30631,7 +30636,7 @@
       }
   };
 
-  const version = "0.17.2-alpha.0";
+  const version = "0.17.2-alpha.1";
 
   exports.AbstractComponent = AbstractComponent;
   exports.ArcInfo = ArcInfo;