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

package/dist/index.js

@@ -10896,6 +10896,114 @@
     return new Path(attributes);
   }
 
+  var AREA_UPDATE_TAG_KEY = ["segments", "points", "curveType"].concat(_toConsumableArray(GRAPHIC_UPDATE_TAG_KEY));
+  var Area = /*#__PURE__*/function (_Graphic) {
+    _inherits(Area, _Graphic);
+    var _super = _createSuper(Area);
+    function Area(params) {
+      var _this;
+      _classCallCheck(this, Area);
+      _this = _super.call(this, params), _this.type = "area", _this.numberType = AREA_NUMBER_TYPE;
+      return _this;
+    }
+    _createClass(Area, [{
+      key: "isValid",
+      value: function isValid() {
+        return _get(_getPrototypeOf(Area.prototype), "isValid", this).call(this) && this._isValid();
+      }
+    }, {
+      key: "_isValid",
+      value: function _isValid() {
+        if (this.pathProxy) return !0;
+        var _this$attribute = this.attribute,
+          points = _this$attribute.points,
+          segments = _this$attribute.segments;
+        return segments ? 0 !== segments.length : !!points && 0 !== points.length;
+      }
+    }, {
+      key: "doUpdateAABBBounds",
+      value: function doUpdateAABBBounds() {
+        var areaTheme = getTheme(this).area;
+        this._AABBBounds.setValue(1 / 0, 1 / 0, -1 / 0, -1 / 0);
+        var attribute = this.attribute,
+          bounds = application.graphicService.updateAreaAABBBounds(attribute, getTheme(this).area, this._AABBBounds, this),
+          _attribute$boundsPadd = attribute.boundsPadding,
+          boundsPadding = _attribute$boundsPadd === void 0 ? areaTheme.boundsPadding : _attribute$boundsPadd,
+          paddingArray = parsePadding(boundsPadding);
+        return paddingArray && bounds.expand(paddingArray), this.clearUpdateBoundTag(), bounds;
+      }
+    }, {
+      key: "tryUpdateOBBBounds",
+      value: function tryUpdateOBBBounds() {
+        throw new Error("暂不支持");
+      }
+    }, {
+      key: "_interpolate",
+      value: function _interpolate(key, ratio, lastStepVal, nextStepVal, nextAttributes) {
+        "points" === key && (nextAttributes.points = pointsInterpolation(lastStepVal, nextStepVal, ratio));
+      }
+    }, {
+      key: "getDefaultAttribute",
+      value: function getDefaultAttribute(name) {
+        return getTheme(this).area[name];
+      }
+    }, {
+      key: "needUpdateTags",
+      value: function needUpdateTags(keys) {
+        return _get(_getPrototypeOf(Area.prototype), "needUpdateTags", this).call(this, keys, AREA_UPDATE_TAG_KEY);
+      }
+    }, {
+      key: "needUpdateTag",
+      value: function needUpdateTag(key) {
+        return _get(_getPrototypeOf(Area.prototype), "needUpdateTag", this).call(this, key, AREA_UPDATE_TAG_KEY);
+      }
+    }, {
+      key: "toCustomPath",
+      value: function toCustomPath() {
+        var path = new CustomPath2D(),
+          attribute = this.attribute,
+          segments = attribute.segments,
+          parsePoints = function parsePoints(points) {
+            if (points && points.length) {
+              var isFirst = !0;
+              var basePoints = [];
+              if (points.forEach(function (point) {
+                var _a, _b;
+                !1 !== point.defined && (isFirst ? path.moveTo(point.x, point.y) : path.lineTo(point.x, point.y), basePoints.push({
+                  x: null !== (_a = point.x1) && void 0 !== _a ? _a : point.x,
+                  y: null !== (_b = point.y1) && void 0 !== _b ? _b : point.y
+                }), isFirst = !1);
+              }), basePoints.length) {
+                for (var i = basePoints.length - 1; i >= 0; i--) path.lineTo(basePoints[i].x, basePoints[i].y);
+                path.closePath();
+              }
+            }
+          };
+        return attribute.points ? parsePoints(attribute.points) : segments && segments.length && segments.forEach(function (seg) {
+          parsePoints(seg.points);
+        }), path;
+      }
+    }, {
+      key: "clone",
+      value: function clone() {
+        return new Area(Object.assign({}, this.attribute));
+      }
+    }, {
+      key: "getNoWorkAnimateAttr",
+      value: function getNoWorkAnimateAttr() {
+        return Area.NOWORK_ANIMATE_ATTR;
+      }
+    }]);
+    return Area;
+  }(Graphic);
+  Area.NOWORK_ANIMATE_ATTR = Object.assign({
+    segments: 1,
+    curveType: 1
+  }, NOWORK_ANIMATE_ATTR);
+  function createArea(attributes) {
+    return new Area(attributes);
+  }
+
   var ARC_UPDATE_TAG_KEY = ["innerRadius", "outerRadius", "startAngle", "endAngle", "cornerRadius", "padAngle", "padRadius", "cap"].concat(_toConsumableArray(GRAPHIC_UPDATE_TAG_KEY));
   var Arc = /*#__PURE__*/function (_Graphic) {
     _inherits(Arc, _Graphic);
@@ -16676,6 +16784,10 @@
     graphicCreator.RegisterGraphicCreator("arc", createArc);
   }
 
+  function registerAreaGraphic() {
+    graphicCreator.RegisterGraphicCreator("area", createArea);
+  }
+
   function registerCircleGraphic() {
     graphicCreator.RegisterGraphicCreator("circle", createCircle);
   }
@@ -16816,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) {
@@ -18330,7 +18448,7 @@
 
   var loaded$b = !1;
   function registerArea() {
-    loaded$b || (loaded$b = !0, container.load(areaModule), container.load(browser ? areaCanvasPickModule : areaMathPickModule));
+    loaded$b || (loaded$b = !0, registerAreaGraphic(), container.load(areaModule), container.load(browser ? areaCanvasPickModule : areaMathPickModule));
   }
 
   var loaded$a = !1;
@@ -18478,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])
                   });
@@ -18514,7 +18632,7 @@
           }
           this.attribute.range = currScrollRange;
           if (realTime) {
-              this._onChange({
+              this._dispatchEvent('scroll', {
                   pre: preRange,
                   value: currScrollRange
               });
@@ -18617,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;
@@ -22502,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) {
@@ -22526,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;
@@ -24262,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);
@@ -24302,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);
@@ -24328,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'));
           }
@@ -24360,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') {
@@ -24399,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) {
@@ -24420,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();
@@ -24783,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
+                  });
               }
           }
       }
@@ -24829,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);
       }
@@ -25653,7 +25759,6 @@
               target.removeState('hover');
           };
           this._onClick = (e) => {
-              var _a, _b;
               const target = e.target;
               if (target.name === 'preHandler') {
                   if (this._current === 1) {
@@ -25666,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) {
@@ -25686,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');
@@ -25996,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) {
@@ -26019,7 +26120,7 @@
                           });
                       }
                   }
-                  this._dispatchEvent(exports.LegendEvent.legendItemClick, legendItem, e);
+                  this._dispatchLegendEvent(exports.LegendEvent.legendItemClick, legendItem, e);
               }
           };
       }
@@ -26156,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);
@@ -26189,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);
           }
@@ -26214,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 -
@@ -26441,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;
@@ -26466,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;
@@ -26489,7 +26591,7 @@
               }
           });
           if (attributeUpdate) {
-              this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem, e);
+              this._dispatchLegendEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem, e);
           }
       }
       _removeLegendItemState(legendItem, stateNames, e) {
@@ -26514,7 +26616,7 @@
               }
           });
           if (attributeUpdate) {
-              this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem, e);
+              this._dispatchLegendEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem, e);
           }
       }
       _getSelectedLegends() {
@@ -26533,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),
@@ -26546,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];
+                      }
                   }
               });
           }
@@ -27222,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),
@@ -27239,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;
@@ -28158,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));
@@ -28179,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);
@@ -28467,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 = {
@@ -28908,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;
@@ -28929,7 +29030,7 @@
               (_a = this._operatingMask) === null || _a === void 0 ? void 0 : _a.setAttribute('pickable', false);
           };
       }
-      bindBrushEvents() {
+      _bindBrushEvents() {
           if (this.attribute.disableTriggerEvent) {
               return;
           }
@@ -28967,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;
@@ -28989,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;
@@ -29018,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;
@@ -29042,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;
@@ -29132,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);
@@ -29719,7 +29813,6 @@
           });
       }
       handleClick() {
-          var _a;
           if (this.attribute.disabled) {
               return;
           }
@@ -29731,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 = {
@@ -29777,7 +29868,7 @@
       }
   };
 
-  const version = "0.17.2-alpha.2";
+  const version = "0.17.2-alpha.4";
 
   exports.AbstractComponent = AbstractComponent;
   exports.ArcInfo = ArcInfo;