@visactor/vrender-components 0.17.10 → 0.17.11-alpha.2

package/dist/index.js

@@ -24287,6 +24287,23 @@
   };
   loadDataZoomComponent();
   class DataZoom extends AbstractComponent {
+      setPropsFromAttrs() {
+          const { start, end, orient, previewData, previewPointsX, previewPointsY, previewPointsX1, previewPointsY1 } = this
+              .attribute;
+          start && (this.state.start = start);
+          end && (this.state.end = end);
+          const { width, height } = this.getLayoutAttrFromConfig();
+          this._spanCache = this.state.end - this.state.start;
+          this._isHorizontal = orient === 'top' || orient === 'bottom';
+          this._layoutCache.max = this._isHorizontal ? width : height;
+          this._layoutCache.attPos = this._isHorizontal ? 'x' : 'y';
+          this._layoutCache.attSize = this._isHorizontal ? 'width' : 'height';
+          previewData && (this._previewData = previewData);
+          vutils.isFunction(previewPointsX) && (this._previewPointsX = previewPointsX);
+          vutils.isFunction(previewPointsY) && (this._previewPointsY = previewPointsY);
+          vutils.isFunction(previewPointsX1) && (this._previewPointsX1 = previewPointsX1);
+          vutils.isFunction(previewPointsY1) && (this._previewPointsY1 = previewPointsY1);
+      }
       constructor(attributes, options) {
           super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : vutils.merge({}, DataZoom.defaultAttributes, attributes));
           this.name = 'dataZoom';
@@ -24382,15 +24399,7 @@
                   });
               }
           }, 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);
-          end && (this.state.end = end);
-          this._spanCache = this.state.end - this.state.start;
-          this._isHorizontal = orient === 'top' || orient === 'bottom';
-          this._layoutCache.max = this._isHorizontal ? width : height;
-          this._layoutCache.attPos = this._isHorizontal ? 'x' : 'y';
-          this._layoutCache.attSize = this._isHorizontal ? 'width' : 'height';
+          const { position, showDetail } = attributes;
           this._activeCache.startPos = position;
           this._activeCache.lastPos = position;
           if (showDetail === 'auto') {
@@ -24399,11 +24408,11 @@
           else {
               this._showText = showDetail;
           }
-          previewData && (this._previewData = previewData);
-          vutils.isFunction(previewPointsX) && (this._previewPointsX = previewPointsX);
-          vutils.isFunction(previewPointsY) && (this._previewPointsY = previewPointsY);
-          vutils.isFunction(previewPointsX1) && (this._previewPointsX1 = previewPointsX1);
-          vutils.isFunction(previewPointsY1) && (this._previewPointsY1 = previewPointsY1);
+          this.setPropsFromAttrs();
+      }
+      setAttributes(params, forceUpdateTag) {
+          super.setAttributes(params, forceUpdateTag);
+          this.setPropsFromAttrs();
       }
       bindEvents() {
           if (this.attribute.disableTriggerEvent) {
@@ -24551,66 +24560,126 @@
                       0 }, dragMaskStyle), 'rect');
           }
       }
+      isTextOverflow(componentBoundsLike, textPosition, textMeasure, textValue, layout) {
+          const { width: textWidth, height: textHeight } = textMeasure.fullMeasure(textValue);
+          if (this._isHorizontal) {
+              if (layout === 'start') {
+                  const x1 = textPosition.x - textWidth;
+                  if (x1 < componentBoundsLike.x1) {
+                      return true;
+                  }
+              }
+              else {
+                  const x2 = textPosition.x + textWidth;
+                  if (x2 > componentBoundsLike.x2) {
+                      return true;
+                  }
+              }
+          }
+          else {
+              if (layout === 'start') {
+                  const y1 = textPosition.y - textHeight;
+                  if (y1 < componentBoundsLike.y1) {
+                      return true;
+                  }
+              }
+              else {
+                  const y2 = textPosition.y + textHeight;
+                  if (y2 > componentBoundsLike.y2) {
+                      return true;
+                  }
+              }
+          }
+          return false;
+      }
       renderText() {
           const { startTextStyle, endTextStyle } = this.attribute;
-          const { formatMethod: startTextFormat } = startTextStyle, restStartStyle = __rest(startTextStyle, ["formatMethod"]);
+          const { formatMethod: startTextFormat } = startTextStyle, restStartTextStyle = __rest(startTextStyle, ["formatMethod"]);
           const { formatMethod: endTextFormat } = endTextStyle, restEndTextStyle = __rest(endTextStyle, ["formatMethod"]);
           const { start, end } = this.state;
           this._startValue = this._statePointToData(start);
           this._endValue = this._statePointToData(end);
           const { position, width, height } = this.getLayoutAttrFromConfig();
+          const startTextValue = startTextFormat ? startTextFormat(this._startValue) : this._startValue;
+          const endTextValue = endTextFormat ? endTextFormat(this._endValue) : this._endValue;
+          const startTextMeasure = new vutils.TextMeasure({
+              defaultFontParams: restStartTextStyle.textStyle
+          });
+          const endTextMeasure = new vutils.TextMeasure({
+              defaultFontParams: restEndTextStyle.textStyle
+          });
+          const componentBoundsLike = {
+              x1: position.x,
+              y1: position.y,
+              x2: position.x + width,
+              y2: position.y + height
+          };
+          let startTextPosition;
+          let endTextPosition;
+          let startTextAlignStyle;
+          let endTextAlignStyle;
           if (this._isHorizontal) {
-              this._startText = this.maybeAddLabel(this._container, vutils.merge({}, restStartStyle, {
-                  text: startTextFormat ? startTextFormat(this._startValue) : this._startValue,
+              startTextPosition = {
                   x: position.x + start * width,
-                  y: position.y + height / 2,
-                  visible: this._showText,
-                  pickable: false,
-                  childrenPickable: false,
-                  textStyle: {
-                      textAlign: 'right',
-                      textBaseline: 'middle'
-                  }
-              }), `data-zoom-start-text-${position}`);
-              this._endText = this.maybeAddLabel(this._container, vutils.merge({}, restEndTextStyle, {
-                  text: endTextFormat ? endTextFormat(this._endValue) : this._endValue,
+                  y: position.y + height / 2
+              };
+              endTextPosition = {
                   x: position.x + end * width,
-                  y: position.y + height / 2,
-                  visible: this._showText,
-                  pickable: false,
-                  childrenPickable: false,
-                  textStyle: {
-                      textAlign: 'left',
-                      textBaseline: 'middle'
-                  }
-              }), `data-zoom-end-text-${position}`);
+                  y: position.y + height / 2
+              };
+              startTextAlignStyle = {
+                  textAlign: this.isTextOverflow(componentBoundsLike, startTextPosition, startTextMeasure, startTextValue, 'start')
+                      ? 'left'
+                      : 'right',
+                  textBaseline: 'middle'
+              };
+              endTextAlignStyle = {
+                  textAlign: this.isTextOverflow(componentBoundsLike, endTextPosition, endTextMeasure, endTextValue, 'end')
+                      ? 'right'
+                      : 'left',
+                  textBaseline: 'middle'
+              };
           }
           else {
-              this._startText = this.maybeAddLabel(this._container, vutils.merge({}, restStartStyle, {
-                  text: startTextFormat ? startTextFormat(this._startValue) : this._startValue,
+              startTextPosition = {
                   x: position.x + width / 2,
-                  y: position.y + start * height,
-                  visible: this._showText,
-                  pickable: false,
-                  childrenPickable: false,
-                  textStyle: {
-                      textAlign: 'center',
-                      textBaseline: 'bottom'
-                  }
-              }), `data-zoom-start-text-${position}`);
-              this._endText = this.maybeAddLabel(this._container, vutils.merge({}, restEndTextStyle, {
-                  text: endTextFormat ? endTextFormat(this._endValue) : this._endValue,
+                  y: position.y + start * height
+              };
+              endTextPosition = {
                   x: position.x + width / 2,
-                  y: position.y + end * height,
-                  visible: this._showText,
-                  pickable: false,
-                  childrenPickable: false,
-                  textStyle: {
-                      textAlign: 'center',
-                      textBaseline: 'top'
-                  }
-              }), `data-zoom-end-text-${position}`);
+                  y: position.y + end * height
+              };
+              startTextAlignStyle = {
+                  textAlign: 'center',
+                  textBaseline: this.isTextOverflow(componentBoundsLike, startTextPosition, startTextMeasure, startTextValue, 'start')
+                      ? 'top'
+                      : 'bottom'
+              };
+              endTextAlignStyle = {
+                  textAlign: 'center',
+                  textBaseline: this.isTextOverflow(componentBoundsLike, endTextPosition, endTextMeasure, endTextValue, 'end')
+                      ? 'bottom'
+                      : 'top'
+              };
           }
+          this._startText = this.maybeAddLabel(this._container, vutils.merge({}, restStartTextStyle, {
+              text: startTextValue,
+              x: startTextPosition.x,
+              y: startTextPosition.y,
+              visible: this._showText,
+              pickable: false,
+              childrenPickable: false,
+              textStyle: startTextAlignStyle
+          }), `data-zoom-start-text-${position}`);
+          this._endText = this.maybeAddLabel(this._container, vutils.merge({}, restEndTextStyle, {
+              text: endTextValue,
+              x: endTextPosition.x,
+              y: endTextPosition.y,
+              visible: this._showText,
+              pickable: false,
+              childrenPickable: false,
+              textStyle: endTextAlignStyle
+          }), `data-zoom-end-text-${position}`);
       }
       getLayoutAttrFromConfig() {
           var _a, _b, _c, _d;
@@ -24674,23 +24743,23 @@
       render() {
           var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
           this._layoutAttrFromConfig = null;
-          const { orient, backgroundStyle, backgroundChartStyle = {}, selectedBackgroundStyle = {}, selectedBackgroundChartStyle = {}, middleHandlerStyle = {}, startHandlerStyle = {}, endHandlerStyle = {}, brushSelect } = this.attribute;
+          const { orient, backgroundStyle, backgroundChartStyle = {}, selectedBackgroundStyle = {}, selectedBackgroundChartStyle = {}, middleHandlerStyle = {}, startHandlerStyle = {}, endHandlerStyle = {}, brushSelect, zoomLock } = this.attribute;
           const { start, end } = this.state;
           const { position, width, height } = this.getLayoutAttrFromConfig();
           const startHandlerMinSize = (_a = startHandlerStyle.triggerMinSize) !== null && _a !== void 0 ? _a : 40;
           const endHandlerMinSize = (_b = endHandlerStyle.triggerMinSize) !== null && _b !== void 0 ? _b : 40;
           const group = this.createOrUpdateChild('dataZoom-container', {}, 'group');
           this._container = group;
-          this._background = group.createOrUpdateChild('background', Object.assign({ x: position.x, y: position.y, width,
-              height, cursor: brushSelect ? 'crosshair' : 'auto' }, backgroundStyle), 'rect');
+          this._background = group.createOrUpdateChild('background', Object.assign(Object.assign({ x: position.x, y: position.y, width,
+              height, cursor: brushSelect ? 'crosshair' : 'auto' }, backgroundStyle), { pickable: !zoomLock }), 'rect');
           ((_c = backgroundChartStyle.line) === null || _c === void 0 ? void 0 : _c.visible) && this.setPreviewAttributes('line', group);
           ((_d = backgroundChartStyle.area) === null || _d === void 0 ? void 0 : _d.visible) && this.setPreviewAttributes('area', group);
           brushSelect && this.renderDragMask();
           if (this._isHorizontal) {
-              this._selectedBackground = group.createOrUpdateChild('selectedBackground', Object.assign({ x: position.x + start * width, y: position.y, width: (end - start) * width, height: height, cursor: brushSelect ? 'crosshair' : 'move' }, selectedBackgroundStyle), 'rect');
+              this._selectedBackground = group.createOrUpdateChild('selectedBackground', Object.assign(Object.assign({ x: position.x + start * width, y: position.y, width: (end - start) * width, height: height, cursor: brushSelect ? 'crosshair' : 'move' }, selectedBackgroundStyle), { pickable: !zoomLock }), 'rect');
           }
           else {
-              this._selectedBackground = group.createOrUpdateChild('selectedBackground', Object.assign({ x: position.x, y: position.y + start * height, width, height: (end - start) * height, cursor: brushSelect ? 'crosshair' : 'move' }, selectedBackgroundStyle), 'rect');
+              this._selectedBackground = group.createOrUpdateChild('selectedBackground', Object.assign(Object.assign({ x: position.x, y: position.y + start * height, width, height: (end - start) * height, cursor: brushSelect ? 'crosshair' : 'move' }, selectedBackgroundStyle), { pickable: !zoomLock }), 'rect');
           }
           ((_e = selectedBackgroundChartStyle.line) === null || _e === void 0 ? void 0 : _e.visible) && this.setSelectedPreviewAttributes('line', group);
           ((_f = selectedBackgroundChartStyle.area) === null || _f === void 0 ? void 0 : _f.visible) && this.setSelectedPreviewAttributes('area', group);
@@ -24700,34 +24769,34 @@
           if (this._isHorizontal) {
               if (middleHandlerStyle.visible) {
                   const middleHandlerBackgroundSize = ((_g = middleHandlerStyle.background) === null || _g === void 0 ? void 0 : _g.size) || 10;
-                  this._middleHandlerRect = group.createOrUpdateChild('middleHandlerRect', Object.assign({ x: position.x + start * width, y: position.y - middleHandlerBackgroundSize, width: (end - start) * width, height: middleHandlerBackgroundSize }, (_h = middleHandlerStyle.background) === null || _h === void 0 ? void 0 : _h.style), 'rect');
-                  this._middleHandlerSymbol = group.createOrUpdateChild('middleHandlerSymbol', Object.assign({ x: position.x + ((start + end) / 2) * width, y: position.y - middleHandlerBackgroundSize / 2, strokeBoundsBuffer: 0, angle: 0, symbolType: (_k = (_j = middleHandlerStyle.icon) === null || _j === void 0 ? void 0 : _j.symbolType) !== null && _k !== void 0 ? _k : 'square' }, middleHandlerStyle.icon), 'symbol');
+                  this._middleHandlerRect = group.createOrUpdateChild('middleHandlerRect', Object.assign(Object.assign({ x: position.x + start * width, y: position.y - middleHandlerBackgroundSize, width: (end - start) * width, height: middleHandlerBackgroundSize }, (_h = middleHandlerStyle.background) === null || _h === void 0 ? void 0 : _h.style), { pickable: !zoomLock }), 'rect');
+                  this._middleHandlerSymbol = group.createOrUpdateChild('middleHandlerSymbol', Object.assign(Object.assign({ x: position.x + ((start + end) / 2) * width, y: position.y - middleHandlerBackgroundSize / 2, strokeBoundsBuffer: 0, angle: 0, symbolType: (_k = (_j = middleHandlerStyle.icon) === null || _j === void 0 ? void 0 : _j.symbolType) !== null && _k !== void 0 ? _k : 'square' }, middleHandlerStyle.icon), { pickable: !zoomLock }), 'symbol');
               }
-              this._startHandler = group.createOrUpdateChild('startHandler', Object.assign(Object.assign({ x: position.x + start * width, y: position.y + height / 2, size: height, symbolType: (_l = startHandlerStyle.symbolType) !== null && _l !== void 0 ? _l : 'square' }, DEFAULT_HANDLER_ATTR_MAP.horizontal), startHandlerStyle), 'symbol');
-              this._endHandler = group.createOrUpdateChild('endHandler', Object.assign(Object.assign({ x: position.x + end * width, y: position.y + height / 2, size: height, symbolType: (_m = endHandlerStyle.symbolType) !== null && _m !== void 0 ? _m : 'square' }, DEFAULT_HANDLER_ATTR_MAP.horizontal), endHandlerStyle), 'symbol');
+              this._startHandler = group.createOrUpdateChild('startHandler', Object.assign(Object.assign(Object.assign({ x: position.x + start * width, y: position.y + height / 2, size: height, symbolType: (_l = startHandlerStyle.symbolType) !== null && _l !== void 0 ? _l : 'square' }, DEFAULT_HANDLER_ATTR_MAP.horizontal), startHandlerStyle), { pickable: !zoomLock }), 'symbol');
+              this._endHandler = group.createOrUpdateChild('endHandler', Object.assign(Object.assign(Object.assign({ x: position.x + end * width, y: position.y + height / 2, size: height, symbolType: (_m = endHandlerStyle.symbolType) !== null && _m !== void 0 ? _m : 'square' }, DEFAULT_HANDLER_ATTR_MAP.horizontal), endHandlerStyle), { pickable: !zoomLock }), 'symbol');
               const startHandlerWidth = Math.max(this._startHandler.AABBBounds.width(), startHandlerMinSize);
               const startHandlerHeight = Math.max(this._startHandler.AABBBounds.height(), startHandlerMinSize);
               const endHandlerWidth = Math.max(this._endHandler.AABBBounds.width(), endHandlerMinSize);
               const endHandlerHeight = Math.max(this._endHandler.AABBBounds.height(), endHandlerMinSize);
-              this._startHandlerMask = group.createOrUpdateChild('startHandlerMask', Object.assign({ x: position.x + start * width - startHandlerWidth / 2, y: position.y + height / 2 - startHandlerHeight / 2, width: startHandlerWidth, height: startHandlerHeight, fill: 'white', fillOpacity: 0, zIndex: 999 }, DEFAULT_HANDLER_ATTR_MAP.horizontal), 'rect');
-              this._endHandlerMask = group.createOrUpdateChild('endHandlerMask', Object.assign({ x: position.x + end * width - endHandlerWidth / 2, y: position.y + height / 2 - endHandlerHeight / 2, width: endHandlerWidth, height: endHandlerHeight, fill: 'white', fillOpacity: 0, zIndex: 999 }, DEFAULT_HANDLER_ATTR_MAP.horizontal), 'rect');
+              this._startHandlerMask = group.createOrUpdateChild('startHandlerMask', Object.assign(Object.assign({ x: position.x + start * width - startHandlerWidth / 2, y: position.y + height / 2 - startHandlerHeight / 2, width: startHandlerWidth, height: startHandlerHeight, fill: 'white', fillOpacity: 0, zIndex: 999 }, DEFAULT_HANDLER_ATTR_MAP.horizontal), { pickable: !zoomLock }), 'rect');
+              this._endHandlerMask = group.createOrUpdateChild('endHandlerMask', Object.assign(Object.assign({ x: position.x + end * width - endHandlerWidth / 2, y: position.y + height / 2 - endHandlerHeight / 2, width: endHandlerWidth, height: endHandlerHeight, fill: 'white', fillOpacity: 0, zIndex: 999 }, DEFAULT_HANDLER_ATTR_MAP.horizontal), { pickable: !zoomLock }), 'rect');
           }
           else {
               if (middleHandlerStyle.visible) {
                   const middleHandlerBackgroundSize = ((_o = middleHandlerStyle.background) === null || _o === void 0 ? void 0 : _o.size) || 10;
-                  this._middleHandlerRect = group.createOrUpdateChild('middleHandlerRect', Object.assign({ x: orient === 'left' ? position.x - middleHandlerBackgroundSize : position.x + width, y: position.y + start * height, width: middleHandlerBackgroundSize, height: (end - start) * height }, (_p = middleHandlerStyle.background) === null || _p === void 0 ? void 0 : _p.style), 'rect');
-                  this._middleHandlerSymbol = group.createOrUpdateChild('middleHandlerSymbol', Object.assign({ x: orient === 'left'
+                  this._middleHandlerRect = group.createOrUpdateChild('middleHandlerRect', Object.assign(Object.assign({ x: orient === 'left' ? position.x - middleHandlerBackgroundSize : position.x + width, y: position.y + start * height, width: middleHandlerBackgroundSize, height: (end - start) * height }, (_p = middleHandlerStyle.background) === null || _p === void 0 ? void 0 : _p.style), { pickable: !zoomLock }), 'rect');
+                  this._middleHandlerSymbol = group.createOrUpdateChild('middleHandlerSymbol', Object.assign(Object.assign({ x: orient === 'left'
                           ? position.x - middleHandlerBackgroundSize / 2
-                          : position.x + width + middleHandlerBackgroundSize / 2, y: position.y + ((start + end) / 2) * height, angle: 90 * (Math.PI / 180), symbolType: (_r = (_q = middleHandlerStyle.icon) === null || _q === void 0 ? void 0 : _q.symbolType) !== null && _r !== void 0 ? _r : 'square', strokeBoundsBuffer: 0 }, middleHandlerStyle.icon), 'symbol');
+                          : position.x + width + middleHandlerBackgroundSize / 2, y: position.y + ((start + end) / 2) * height, angle: 90 * (Math.PI / 180), symbolType: (_r = (_q = middleHandlerStyle.icon) === null || _q === void 0 ? void 0 : _q.symbolType) !== null && _r !== void 0 ? _r : 'square', strokeBoundsBuffer: 0 }, middleHandlerStyle.icon), { pickable: !zoomLock }), 'symbol');
               }
-              this._startHandler = group.createOrUpdateChild('startHandler', Object.assign(Object.assign({ x: position.x + width / 2, y: position.y + start * height, size: width, symbolType: (_s = startHandlerStyle.symbolType) !== null && _s !== void 0 ? _s : 'square' }, DEFAULT_HANDLER_ATTR_MAP.vertical), startHandlerStyle), 'symbol');
-              this._endHandler = group.createOrUpdateChild('endHandler', Object.assign(Object.assign({ x: position.x + width / 2, y: position.y + end * height, size: width, symbolType: (_t = endHandlerStyle.symbolType) !== null && _t !== void 0 ? _t : 'square' }, DEFAULT_HANDLER_ATTR_MAP.vertical), endHandlerStyle), 'symbol');
+              this._startHandler = group.createOrUpdateChild('startHandler', Object.assign(Object.assign(Object.assign({ x: position.x + width / 2, y: position.y + start * height, size: width, symbolType: (_s = startHandlerStyle.symbolType) !== null && _s !== void 0 ? _s : 'square' }, DEFAULT_HANDLER_ATTR_MAP.vertical), startHandlerStyle), { pickable: !zoomLock }), 'symbol');
+              this._endHandler = group.createOrUpdateChild('endHandler', Object.assign(Object.assign(Object.assign({ x: position.x + width / 2, y: position.y + end * height, size: width, symbolType: (_t = endHandlerStyle.symbolType) !== null && _t !== void 0 ? _t : 'square' }, DEFAULT_HANDLER_ATTR_MAP.vertical), endHandlerStyle), { pickable: !zoomLock }), 'symbol');
               const startHandlerWidth = Math.max(this._startHandler.AABBBounds.width(), startHandlerMinSize);
               const startHandlerHeight = Math.max(this._startHandler.AABBBounds.height(), startHandlerMinSize);
               const endHandlerWidth = Math.max(this._endHandler.AABBBounds.width(), endHandlerMinSize);
               const endHandlerHeight = Math.max(this._endHandler.AABBBounds.height(), endHandlerMinSize);
-              this._startHandlerMask = group.createOrUpdateChild('startHandlerMask', Object.assign({ x: position.x + width / 2 + startHandlerWidth / 2, y: position.y + start * height - startHandlerHeight / 2, width: endHandlerHeight, height: endHandlerWidth, fill: 'white', fillOpacity: 0, zIndex: 999 }, DEFAULT_HANDLER_ATTR_MAP.vertical), 'rect');
-              this._endHandlerMask = group.createOrUpdateChild('endHandlerMask', Object.assign({ x: position.x + width / 2 + endHandlerWidth / 2, y: position.y + end * height - endHandlerHeight / 2, width: endHandlerHeight, height: endHandlerWidth, fill: 'white', fillOpacity: 0, zIndex: 999 }, DEFAULT_HANDLER_ATTR_MAP.vertical), 'rect');
+              this._startHandlerMask = group.createOrUpdateChild('startHandlerMask', Object.assign(Object.assign({ x: position.x + width / 2 + startHandlerWidth / 2, y: position.y + start * height - startHandlerHeight / 2, width: endHandlerHeight, height: endHandlerWidth, fill: 'white', fillOpacity: 0, zIndex: 999 }, DEFAULT_HANDLER_ATTR_MAP.vertical), { pickable: !zoomLock }), 'rect');
+              this._endHandlerMask = group.createOrUpdateChild('endHandlerMask', Object.assign(Object.assign({ x: position.x + width / 2 + endHandlerWidth / 2, y: position.y + end * height - endHandlerHeight / 2, width: endHandlerHeight, height: endHandlerWidth, fill: 'white', fillOpacity: 0, zIndex: 999 }, DEFAULT_HANDLER_ATTR_MAP.vertical), { pickable: !zoomLock }), 'rect');
           }
       }
       computeBasePoints() {
@@ -24968,6 +25037,12 @@
           super(...arguments);
           this.name = 'marker';
       }
+      setAttribute(key, value, forceUpdateTag) {
+          super.setAttribute(key, value, forceUpdateTag);
+          if (key === 'visible') {
+              this.render();
+          }
+      }
       _initContainer() {
           var _a, _b;
           const { limitRect = {}, clipInRange } = this.attribute;
@@ -25012,22 +25087,20 @@
           if (this.attribute.interactive === false) {
               this.setAttribute('childrenPickable', false);
           }
-          if (markerVisible) {
-              if (!this._container && this.isValidPoints()) {
+          if (markerVisible && this.isValidPoints()) {
+              if (!this._container) {
                   this._initContainer();
                   this.initMarker(this._container);
               }
               else {
-                  if (!this.isValidPoints()) {
-                      this._container = null;
-                      this.removeAllChild();
-                  }
-                  else {
-                      this._updateContainer();
-                      this.updateMarker();
-                  }
+                  this._updateContainer();
+                  this.updateMarker();
               }
           }
+          else {
+              this._container = null;
+              this.removeAllChild();
+          }
       }
   }
 
@@ -29860,7 +29933,7 @@
       }
   };
 
-  const version = "0.17.10";
+  const version = "0.17.11-alpha.2";
 
   exports.AbstractComponent = AbstractComponent;
   exports.ArcInfo = ArcInfo;