@visactor/vrender-components 0.16.3-alpha.0 → 0.16.4

package/dist/index.js

@@ -9350,12 +9350,13 @@
           main: !1
         };
         this.tryInit();
-        var layerMode = this.getRecommendedLayerType(options.layerMode),
-          layerHandler = this.getLayerHandler(layerMode),
+        var layerMode = this.getRecommendedLayerType(options.layerMode);
+        layerMode = options.canvasId ? "static" : layerMode;
+        var layerHandler = this.getLayerHandler(layerMode),
           layer = new Layer(stage, this.global, stage.window, Object.assign(Object.assign({
             main: !1
           }, options), {
-            layerMode: options.canvasId ? "static" : layerMode,
+            layerMode: layerMode,
             canvasId: options.canvasId,
             layerHandler: layerHandler
           })),
@@ -19921,7 +19922,11 @@
     }, {
       key: "containsPoint",
       value: function containsPoint(graphic, point, params) {
-        return !!this.pickItem(graphic, point, null, params);
+        var _a;
+        return !!(null === (_a = this.pickItem(graphic, point, null, null != params ? params : {
+          pickContext: this.pickContext,
+          pickerService: this
+        })) || void 0 === _a ? void 0 : _a.graphic);
       }
     }, {
       key: "pickGroup",
@@ -20088,6 +20093,10 @@
       }
   }
 
+  const delayMap$2 = {
+      debounce: vutils.debounce,
+      throttle: vutils.throttle
+  };
   class ScrollBar extends AbstractComponent {
       constructor(attributes) {
           super(vutils.merge({}, ScrollBar.defaultAttributes, attributes));
@@ -20130,13 +20139,11 @@
                   this._slider.addEventListener('pointerupoutside', this._onSliderPointerUp);
               }
           };
-          this._onSliderPointerMove = (e) => {
-              e.stopPropagation();
+          this._computeScrollValue = (e) => {
               const { direction } = this.attribute;
               let currentScrollValue;
               let currentPos;
               let delta = 0;
-              const preScrollRange = this.getScrollRange();
               const { width, height } = this._getSliderRenderBounds();
               if (direction === 'vertical') {
                   currentPos = e.clientY;
@@ -20148,25 +20155,41 @@
                   delta = currentPos - this._prePos;
                   currentScrollValue = delta / width;
               }
+              return [currentPos, currentScrollValue];
+          };
+          this._onSliderPointerMove = delayMap$2[this.attribute.delayType]((e) => {
+              e.stopPropagation();
+              const preScrollRange = this.getScrollRange();
+              const [currentPos, currentScrollValue] = this._computeScrollValue(e);
               this.setScrollRange([preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue], true);
               this._prePos = currentPos;
-          };
+          }, this.attribute.delayTime);
           this._onSliderPointerUp = (e) => {
               e.preventDefault();
+              const { realTime = true, range: preRange, limitRange = [0, 1] } = this.attribute;
+              const preScrollRange = this.getScrollRange();
+              const [currentPos, currentScrollValue] = this._computeScrollValue(e);
+              const range = [preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue];
+              if (!realTime) {
+                  this._onChange({
+                      pre: preRange,
+                      value: vutils.clampRange(range, limitRange[0], limitRange[1])
+                  });
+              }
               if (vglobal.env === 'browser') {
                   vglobal.removeEventListener('pointermove', this._onSliderPointerMove, { capture: true });
                   vglobal.removeEventListener('pointerup', this._onSliderPointerUp);
               }
               else {
-                  this._slider.removeEventListener('pointermove', this._onSliderPointerMove, { capture: true });
-                  this._slider.removeEventListener('pointerup', this._onSliderPointerUp);
-                  this._slider.removeEventListener('pointerupoutside', this._onSliderPointerUp);
+                  this.stage.removeEventListener('pointermove', this._onSliderPointerMove, { capture: true });
+                  this.stage.removeEventListener('pointerup', this._onSliderPointerUp);
+                  this.stage.removeEventListener('pointerupoutside', this._onSliderPointerUp);
               }
           };
       }
       setScrollRange(range, render = true) {
           var _a, _b;
-          const { direction = 'horizontal', limitRange = [0, 1], range: preRange } = this.attribute;
+          const { direction = 'horizontal', limitRange = [0, 1], range: preRange, realTime = true } = this.attribute;
           const currScrollRange = vutils.clampRange(range, limitRange[0], limitRange[1]);
           if (render) {
               const sliderPos = this._getSliderPos(currScrollRange);
@@ -20183,10 +20206,12 @@
               }
           }
           this.attribute.range = currScrollRange;
-          this._onChange({
-              pre: preRange,
-              value: currScrollRange
-          });
+          if (realTime) {
+              this._onChange({
+                  pre: preRange,
+                  value: currScrollRange
+              });
+          }
       }
       getScrollRange() {
           return this.attribute.range;
@@ -20195,8 +20220,9 @@
           if (this.attribute.disableTriggerEvent) {
               return;
           }
+          const { delayType = 'throttle', delayTime = 0 } = this.attribute;
           if (this._rail) {
-              this._rail.addEventListener('pointerdown', this._onRailPointerDown);
+              this._rail.addEventListener('pointerdown', delayMap$2[delayType](this._onRailPointerDown, delayTime));
           }
           if (this._slider) {
               this._slider.addEventListener('pointerdown', this._onSliderPointerDown);
@@ -20306,7 +20332,10 @@
           fill: 'rgba(0, 0, 0, .0)'
       },
       padding: 2,
-      scrollRange: [0, 1]
+      scrollRange: [0, 1],
+      delayType: 'throttle',
+      delayTime: 0,
+      realTime: true
   };
 
   function __rest(s, e) {
@@ -21787,6 +21816,194 @@
       easing: 'linear'
   };
 
+  function polarToCartesian(point) {
+      if (!point.radius) {
+          return { x: 0, y: 0 };
+      }
+      return {
+          x: Math.cos(point.angle) * point.radius,
+          y: Math.sin(point.angle) * point.radius
+      };
+  }
+  function circlePoint(x0, y0, radius, radian) {
+      const offset = polarToCartesian({
+          radius,
+          angle: radian
+      });
+      return {
+          x: x0 + offset.x,
+          y: y0 + offset.y
+      };
+  }
+  function computeQuadrant(angle) {
+      angle = normalizeAngle(angle);
+      if (angle > 0 && angle <= Math.PI / 2) {
+          return 2;
+      }
+      else if (angle > Math.PI / 2 && angle <= Math.PI) {
+          return 3;
+      }
+      else if (angle > Math.PI && angle <= (3 * Math.PI) / 2) {
+          return 4;
+      }
+      return 1;
+  }
+  function normalizeAngle(angle) {
+      while (angle < 0) {
+          angle += Math.PI * 2;
+      }
+      while (angle >= Math.PI * 2) {
+          angle -= Math.PI * 2;
+      }
+      return angle;
+  }
+  function isQuadrantLeft(quadrant) {
+      return quadrant === 3 || quadrant === 4;
+  }
+  function isQuadrantRight(quadrant) {
+      return quadrant === 1 || quadrant === 2;
+  }
+  function lineCirclePoints(a, b, c, x0, y0, r) {
+      if ((a === 0 && b === 0) || r <= 0) {
+          return [];
+      }
+      if (a === 0) {
+          const y1 = -c / b;
+          const fy = (y1 - y0) ** 2;
+          const fd = r ** 2 - fy;
+          if (fd < 0) {
+              return [];
+          }
+          else if (fd === 0) {
+              return [{ x: x0, y: y1 }];
+          }
+          const x1 = Math.sqrt(fd) + x0;
+          const x2 = -Math.sqrt(fd) + x0;
+          return [
+              { x: x1, y: y1 },
+              { x: x2, y: y1 }
+          ];
+      }
+      else if (b === 0) {
+          const x1 = -c / a;
+          const fx = (x1 - x0) ** 2;
+          const fd = r ** 2 - fx;
+          if (fd < 0) {
+              return [];
+          }
+          else if (fd === 0) {
+              return [{ x: x1, y: y0 }];
+          }
+          const y1 = Math.sqrt(fd) + y0;
+          const y2 = -Math.sqrt(fd) + y0;
+          return [
+              { x: x1, y: y1 },
+              { x: x1, y: y2 }
+          ];
+      }
+      const fa = (b / a) ** 2 + 1;
+      const fb = 2 * ((c / a + x0) * (b / a) - y0);
+      const fc = (c / a + x0) ** 2 + y0 ** 2 - r ** 2;
+      const fd = fb ** 2 - 4 * fa * fc;
+      if (fd < 0) {
+          return [];
+      }
+      const y1 = (-fb + Math.sqrt(fd)) / (2 * fa);
+      const y2 = (-fb - Math.sqrt(fd)) / (2 * fa);
+      const x1 = -(b * y1 + c) / a;
+      const x2 = -(b * y2 + c) / a;
+      if (fd === 0) {
+          return [{ x: x1, y: y1 }];
+      }
+      return [
+          { x: x1, y: y1 },
+          { x: x2, y: y2 }
+      ];
+  }
+  function connectLineRadian(radius, length) {
+      if (length > radius * 2) {
+          return NaN;
+      }
+      return Math.asin(length / 2 / radius) * 2;
+  }
+  function checkBoundsOverlap(boundsA, boundsB) {
+      const { x1: ax1, y1: ay1, x2: ax2, y2: ay2 } = boundsA;
+      const { x1: bx1, y1: by1, x2: bx2, y2: by2 } = boundsB;
+      return !((ax1 <= bx1 && ax2 <= bx1) ||
+          (ax1 >= bx2 && ax2 >= bx2) ||
+          (ay1 <= by1 && ay2 <= by1) ||
+          (ay1 >= by2 && ay2 >= by2));
+  }
+  const labelingPoint = (textBounds, graphicBounds, position = 'top', offset = 0) => {
+      if (!textBounds) {
+          return;
+      }
+      const { x1, y1, x2, y2 } = textBounds;
+      const width = Math.abs(x2 - x1);
+      const height = Math.abs(y2 - y1);
+      const anchorX = (graphicBounds.x1 + graphicBounds.x2) / 2;
+      const anchorY = (graphicBounds.y1 + graphicBounds.y2) / 2;
+      let sx = 0;
+      let sy = 0;
+      let offsetX = 0;
+      let offsetY = 0;
+      if (graphicBounds) {
+          offsetX = Math.abs(graphicBounds.x1 - graphicBounds.x2) / 2;
+          offsetY = Math.abs(graphicBounds.y1 - graphicBounds.y2) / 2;
+      }
+      const angle = {
+          'top-right': -235,
+          'top-left': 235,
+          'bottom-right': 45,
+          'bottom-left': -45
+      };
+      switch (position) {
+          case 'top':
+              sy = -1;
+              break;
+          case 'bottom':
+              sy = 1;
+              break;
+          case 'left':
+              sx = -1;
+              break;
+          case 'right':
+              sx = 1;
+              break;
+          case 'bottom-left':
+          case 'bottom-right':
+          case 'top-left':
+          case 'top-right':
+              sx = Math.sin(angle[position] * (Math.PI / 180));
+              sy = Math.cos(angle[position] * (Math.PI / 180));
+              break;
+          case 'center':
+              sx = 0;
+              sy = 0;
+              break;
+      }
+      const x = anchorX + sx * (offset + offsetX) + Math.sign(sx) * (width / 2);
+      const y = anchorY + sy * (offset + offsetY) + Math.sign(sy) * (height / 2);
+      return { x, y };
+  };
+  const getPointsOfLineArea = (graphic) => {
+      if (!graphic || !graphic.attribute) {
+          return [];
+      }
+      const { points, segments } = graphic.attribute;
+      if (segments && segments.length) {
+          const res = [];
+          segments.forEach(seg => {
+              const segPoints = seg.points;
+              segPoints.forEach(point => {
+                  res.push(point);
+              });
+          });
+          return res;
+      }
+      return points;
+  };
+
   class LabelBase extends AbstractComponent {
       setBitmap(bitmap) {
           this._bitmap = bitmap;
@@ -21846,15 +22063,17 @@
               var _a, _b, _c;
               if (((_a = e.detail) === null || _a === void 0 ? void 0 : _a.type) === AttributeUpdateType.STATE) {
                   const currentStates = (_c = (_b = e.target) === null || _b === void 0 ? void 0 : _b.currentStates) !== null && _c !== void 0 ? _c : [];
-                  const label = this._graphicToText.get(e.target);
-                  if (label) {
-                      if (label.text) {
-                          label.text.useStates(currentStates);
-                      }
-                      if (label.labelLine) {
-                          label.labelLine.useStates(currentStates);
+                  const labels = this._isCollectionBase ? [...this._graphicToText.values()] : [this._graphicToText.get(e.target)];
+                  labels.forEach(label => {
+                      if (label) {
+                          if (label.text) {
+                              label.text.useStates(currentStates);
+                          }
+                          if (label.labelLine) {
+                              label.labelLine.useStates(currentStates);
+                          }
                       }
-                  }
+                  });
               }
           };
       }
@@ -21866,7 +22085,7 @@
       }
       render() {
           this._prepare();
-          if (vutils.isNil(this._idToGraphic)) {
+          if ((this._isCollectionBase && vutils.isNil(this._idToPoint)) || (!this._isCollectionBase && vutils.isNil(this._idToGraphic))) {
               return;
           }
           const { overlap, smartInvert, dataFilter, customLayoutFunc, customOverlapFunc } = this.attribute;
@@ -21876,13 +22095,13 @@
           }
           let labels;
           if (vutils.isFunction(customLayoutFunc)) {
-              labels = customLayoutFunc(data, (d) => this._idToGraphic.get(d.id));
+              labels = customLayoutFunc(data, this.getRelatedGrphic, this._isCollectionBase ? (d) => this._idToPoint.get(d.id) : null);
           }
           else {
               labels = this._layout(data);
           }
           if (vutils.isFunction(customOverlapFunc)) {
-              labels = customOverlapFunc(labels, (d) => this._idToGraphic.get(d.id));
+              labels = customOverlapFunc(labels, this.getRelatedGrphic, this._isCollectionBase ? (d) => this._idToPoint.get(d.id) : null);
           }
           else {
               if (overlap !== false) {
@@ -21937,7 +22156,7 @@
           return text;
       }
       _prepare() {
-          var _a;
+          var _a, _b, _c, _d;
           const currentBaseMarks = [];
           let baseMarks;
           if (vutils.isFunction(this.attribute.getBaseMarks)) {
@@ -21952,7 +22171,9 @@
               }
           });
           (_a = this._idToGraphic) === null || _a === void 0 ? void 0 : _a.clear();
+          (_b = this._idToPoint) === null || _b === void 0 ? void 0 : _b.clear();
           this._baseMarks = currentBaseMarks;
+          this._isCollectionBase = ((_c = currentBaseMarks === null || currentBaseMarks === void 0 ? void 0 : currentBaseMarks[0]) === null || _c === void 0 ? void 0 : _c.type) === 'line' || ((_d = currentBaseMarks === null || currentBaseMarks === void 0 ? void 0 : currentBaseMarks[0]) === null || _d === void 0 ? void 0 : _d.type) === 'area';
           if (!currentBaseMarks || currentBaseMarks.length === 0) {
               return;
           }
@@ -21960,30 +22181,59 @@
           if (!data || data.length === 0) {
               return;
           }
-          if (!this._idToGraphic) {
-              this._idToGraphic = new Map();
+          if (this._isCollectionBase) {
+              if (!this._idToPoint) {
+                  this._idToPoint = new Map();
+              }
+              const baseMark = currentBaseMarks[0];
+              const points = getPointsOfLineArea(baseMark);
+              if (points === null || points === void 0 ? void 0 : points.length) {
+                  for (let i = 0; i < points.length; i++) {
+                      const textData = data[i];
+                      if (textData && points[i]) {
+                          if (!vutils.isValid(textData.id)) {
+                              textData.id = `vrender-component-${this.name}-${i}`;
+                          }
+                          this._idToPoint.set(textData.id, points[i]);
+                      }
+                  }
+              }
           }
-          for (let i = 0; i < currentBaseMarks.length; i++) {
-              const textData = data[i];
-              const baseMark = currentBaseMarks[i];
-              if (textData && baseMark) {
-                  if (!vutils.isValid(textData.id)) {
-                      textData.id = `vrender-component-${this.name}-${i}`;
+          else {
+              if (!this._idToGraphic) {
+                  this._idToGraphic = new Map();
+              }
+              for (let i = 0; i < currentBaseMarks.length; i++) {
+                  const textData = data[i];
+                  const baseMark = currentBaseMarks[i];
+                  if (textData && baseMark) {
+                      if (!vutils.isValid(textData.id)) {
+                          textData.id = `vrender-component-${this.name}-${i}`;
+                      }
+                      this._idToGraphic.set(textData.id, baseMark);
                   }
-                  this._idToGraphic.set(textData.id, baseMark);
               }
           }
       }
+      getRelatedGrphic(item) {
+          return this._isCollectionBase ? this._baseMarks[0] : this._idToGraphic.get(item.id);
+      }
       _layout(data = []) {
           const { textStyle = {}, position, offset } = this.attribute;
           const labels = [];
           for (let i = 0; i < data.length; i++) {
               const textData = data[i];
-              const baseMark = this._idToGraphic.get(textData.id);
-              const labelAttribute = Object.assign(Object.assign({ fill: baseMark.attribute.fill }, textStyle), textData);
+              const baseMark = this.getRelatedGrphic(textData);
+              const labelAttribute = Object.assign(Object.assign({ fill: this._isCollectionBase
+                      ? vutils.isArray(baseMark.attribute.stroke)
+                          ? baseMark.attribute.stroke.find(entry => !!entry && entry !== true)
+                          : baseMark.attribute.stroke
+                      : baseMark.attribute.fill }, textStyle), textData);
               const text = this._createLabelText(labelAttribute);
               const textBounds = this.getGraphicBounds(text);
-              const graphicBounds = this.getGraphicBounds(baseMark, { x: textData.x, y: textData.y });
+              const graphicBounds = this._isCollectionBase
+                  ? this.getGraphicBounds(null, this._idToPoint.get(textData.id))
+                  : this.getGraphicBounds(baseMark, { x: textData.x, y: textData.y });
               const textLocation = this.labeling(textBounds, graphicBounds, vutils.isFunction(position) ? position(textData) : position, offset);
               if (textLocation) {
                   labelAttribute.x = textLocation.x;
@@ -22035,7 +22285,7 @@
                   continue;
               }
               const text = labels[i];
-              const baseMark = this._idToGraphic.get(text.attribute.id);
+              const baseMark = this.getRelatedGrphic(text.attribute);
               text.update();
               if (!vutils.isRectIntersect(baseMark.AABBBounds, { x1: 0, x2: bmpTool.width, y1: 0, y2: bmpTool.height }, true)) {
                   continue;
@@ -22054,7 +22304,9 @@
               }
               let hasPlace = false;
               for (let j = 0; j < strategy.length; j++) {
-                  hasPlace = place(bmpTool, bitmap, strategy[j], this.attribute, text, this.getGraphicBounds(baseMark, labels[i]), this.labeling);
+                  hasPlace = place(bmpTool, bitmap, strategy[j], this.attribute, text, this._isCollectionBase
+                      ? this.getGraphicBounds(null, this._idToPoint.get(labels[i].attribute.id))
+                      : this.getGraphicBounds(baseMark, labels[i].attribute), this.labeling);
                   if (hasPlace !== false) {
                       text.setAttributes({ x: hasPlace.x, y: hasPlace.y });
                       result.push(text);
@@ -22121,11 +22373,13 @@
           labels.forEach((text, index) => {
               var _a, _b, _c, _d, _e, _f, _g;
               const labelLine = this._labelLine(text);
-              const relatedGraphic = this._idToGraphic.get(text.attribute.id);
-              const state = (prevTextMap === null || prevTextMap === void 0 ? void 0 : prevTextMap.get(relatedGraphic)) ? 'update' : 'enter';
+              const relatedGraphic = this.getRelatedGrphic(text.attribute);
+              const textId = text.attribute.id;
+              const textKey = this._isCollectionBase ? textId : relatedGraphic;
+              const state = (prevTextMap === null || prevTextMap === void 0 ? void 0 : prevTextMap.get(textKey)) ? 'update' : 'enter';
               if (state === 'enter') {
                   texts.push(text);
-                  currentTextMap.set(relatedGraphic, labelLine ? { text, labelLine } : { text });
+                  currentTextMap.set(textKey, labelLine ? { text, labelLine } : { text });
                   if (relatedGraphic) {
                       const { from, to } = getAnimationAttributes(text.attribute, 'fadeIn');
                       this.add(text);
@@ -22134,7 +22388,7 @@
                           this.add(labelLine);
                       }
                       this._syncStateWithRelatedGraphic(relatedGraphic);
-                      relatedGraphic.once('animate-bind', () => {
+                      relatedGraphic.once('animate-bind', a => {
                           text.setAttributes(from);
                           const listener = this._afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, {
                               mode,
@@ -22148,9 +22402,9 @@
                   }
               }
               else if (state === 'update') {
-                  const prevLabel = prevTextMap.get(relatedGraphic);
-                  prevTextMap.delete(relatedGraphic);
-                  currentTextMap.set(relatedGraphic, prevLabel);
+                  const prevLabel = prevTextMap.get(textKey);
+                  prevTextMap.delete(textKey);
+                  currentTextMap.set(textKey, prevLabel);
                   const prevText = prevLabel.text;
                   prevText.animate().to(text.attribute, duration, easing);
                   if (prevLabel.labelLine) {
@@ -22185,10 +22439,11 @@
           labels.forEach(text => {
               var _a;
               const labelLine = this._labelLine(text);
-              const relatedGraphic = this._idToGraphic.get(text.attribute.id);
+              const relatedGraphic = this.getRelatedGrphic(text.attribute);
               const state = (prevTextMap === null || prevTextMap === void 0 ? void 0 : prevTextMap.get(relatedGraphic)) ? 'update' : 'enter';
+              const textKey = this._isCollectionBase ? text.attribute.id : relatedGraphic;
               if (state === 'enter') {
-                  currentTextMap.set(relatedGraphic, labelLine ? { text, labelLine } : { text });
+                  currentTextMap.set(textKey, labelLine ? { text, labelLine } : { text });
                   this.add(text);
                   if (labelLine) {
                       this.add(labelLine);
@@ -22196,9 +22451,9 @@
                   this._syncStateWithRelatedGraphic(relatedGraphic);
               }
               else if (state === 'update') {
-                  const prevLabel = prevTextMap.get(relatedGraphic);
-                  prevTextMap.delete(relatedGraphic);
-                  currentTextMap.set(relatedGraphic, prevLabel);
+                  const prevLabel = prevTextMap.get(textKey);
+                  prevTextMap.delete(textKey);
+                  currentTextMap.set(textKey, prevLabel);
                   prevLabel.text.setAttributes(text.attribute);
                   if (prevLabel === null || prevLabel === void 0 ? void 0 : prevLabel.labelLine) {
                       prevLabel.labelLine.setAttributes({ points: (_a = text.attribute) === null || _a === void 0 ? void 0 : _a.points });
@@ -22220,7 +22475,7 @@
       }
       _afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, { mode, duration, easing, to, delay }) {
           const listener = (event) => {
-              var _a;
+              var _a, _b;
               const { detail } = event;
               if (!detail) {
                   return {};
@@ -22259,7 +22514,15 @@
                       break;
                   case 'same-time':
                   default:
-                      if (detail.animationState.isFirstFrameOfStep) {
+                      if (this._isCollectionBase) {
+                          const point = this._idToPoint.get(text.attribute.id);
+                          if (point &&
+                              (!text.animates || !text.animates.has('label-animate')) &&
+                              this._baseMarks[0].containsPoint(point.x, point.y, IContainPointMode.LOCAL, (_b = this.stage) === null || _b === void 0 ? void 0 : _b.pickerService)) {
+                              text.animate({ onEnd }).wait(delay).to(to, duration, easing);
+                          }
+                      }
+                      else if (detail.animationState.isFirstFrameOfStep) {
                           text.animate({ onEnd }).wait(delay).to(to, duration, easing);
                       }
                       break;
@@ -22284,7 +22547,7 @@
               if (!label) {
                   continue;
               }
-              const baseMark = this._idToGraphic.get(label.attribute.id);
+              const baseMark = this.getRelatedGrphic(label.attribute);
               const backgroundColor = baseMark.attribute.fill;
               const foregroundColor = label.attribute.fill;
               const baseColor = backgroundColor;
@@ -22361,56 +22624,7 @@
           this.name = 'symbol-label';
       }
       labeling(textBounds, graphicBounds, position = 'top', offset = 0) {
-          if (!textBounds) {
-              return;
-          }
-          const { x1, y1, x2, y2 } = textBounds;
-          const width = Math.abs(x2 - x1);
-          const height = Math.abs(y2 - y1);
-          const anchorX = (graphicBounds.x1 + graphicBounds.x2) / 2;
-          const anchorY = (graphicBounds.y1 + graphicBounds.y2) / 2;
-          let sx = 0;
-          let sy = 0;
-          let offsetX = 0;
-          let offsetY = 0;
-          if (graphicBounds) {
-              offsetX = Math.abs(graphicBounds.x1 - graphicBounds.x2) / 2;
-              offsetY = Math.abs(graphicBounds.y1 - graphicBounds.y2) / 2;
-          }
-          const angle = {
-              'top-right': -235,
-              'top-left': 235,
-              'bottom-right': 45,
-              'bottom-left': -45
-          };
-          switch (position) {
-              case 'top':
-                  sy = -1;
-                  break;
-              case 'bottom':
-                  sy = 1;
-                  break;
-              case 'left':
-                  sx = -1;
-                  break;
-              case 'right':
-                  sx = 1;
-                  break;
-              case 'bottom-left':
-              case 'bottom-right':
-              case 'top-left':
-              case 'top-right':
-                  sx = Math.sin(angle[position] * (Math.PI / 180));
-                  sy = Math.cos(angle[position] * (Math.PI / 180));
-                  break;
-              case 'center':
-                  sx = 0;
-                  sy = 0;
-                  break;
-          }
-          const x = anchorX + sx * (offset + offsetX) + Math.sign(sx) * (width / 2);
-          const y = anchorY + sy * (offset + offsetY) + Math.sign(sy) * (height / 2);
-          return { x, y };
+          return labelingPoint(textBounds, graphicBounds, position, offset);
       }
   }
   SymbolLabel.defaultAttributes = {
@@ -22549,125 +22763,6 @@
       pickable: false
   };
 
-  function polarToCartesian(point) {
-      if (!point.radius) {
-          return { x: 0, y: 0 };
-      }
-      return {
-          x: Math.cos(point.angle) * point.radius,
-          y: Math.sin(point.angle) * point.radius
-      };
-  }
-  function circlePoint(x0, y0, radius, radian) {
-      const offset = polarToCartesian({
-          radius,
-          angle: radian
-      });
-      return {
-          x: x0 + offset.x,
-          y: y0 + offset.y
-      };
-  }
-  function computeQuadrant(angle) {
-      angle = normalizeAngle(angle);
-      if (angle > 0 && angle <= Math.PI / 2) {
-          return 2;
-      }
-      else if (angle > Math.PI / 2 && angle <= Math.PI) {
-          return 3;
-      }
-      else if (angle > Math.PI && angle <= (3 * Math.PI) / 2) {
-          return 4;
-      }
-      return 1;
-  }
-  function normalizeAngle(angle) {
-      while (angle < 0) {
-          angle += Math.PI * 2;
-      }
-      while (angle >= Math.PI * 2) {
-          angle -= Math.PI * 2;
-      }
-      return angle;
-  }
-  function isQuadrantLeft(quadrant) {
-      return quadrant === 3 || quadrant === 4;
-  }
-  function isQuadrantRight(quadrant) {
-      return quadrant === 1 || quadrant === 2;
-  }
-  function lineCirclePoints(a, b, c, x0, y0, r) {
-      if ((a === 0 && b === 0) || r <= 0) {
-          return [];
-      }
-      if (a === 0) {
-          const y1 = -c / b;
-          const fy = (y1 - y0) ** 2;
-          const fd = r ** 2 - fy;
-          if (fd < 0) {
-              return [];
-          }
-          else if (fd === 0) {
-              return [{ x: x0, y: y1 }];
-          }
-          const x1 = Math.sqrt(fd) + x0;
-          const x2 = -Math.sqrt(fd) + x0;
-          return [
-              { x: x1, y: y1 },
-              { x: x2, y: y1 }
-          ];
-      }
-      else if (b === 0) {
-          const x1 = -c / a;
-          const fx = (x1 - x0) ** 2;
-          const fd = r ** 2 - fx;
-          if (fd < 0) {
-              return [];
-          }
-          else if (fd === 0) {
-              return [{ x: x1, y: y0 }];
-          }
-          const y1 = Math.sqrt(fd) + y0;
-          const y2 = -Math.sqrt(fd) + y0;
-          return [
-              { x: x1, y: y1 },
-              { x: x1, y: y2 }
-          ];
-      }
-      const fa = (b / a) ** 2 + 1;
-      const fb = 2 * ((c / a + x0) * (b / a) - y0);
-      const fc = (c / a + x0) ** 2 + y0 ** 2 - r ** 2;
-      const fd = fb ** 2 - 4 * fa * fc;
-      if (fd < 0) {
-          return [];
-      }
-      const y1 = (-fb + Math.sqrt(fd)) / (2 * fa);
-      const y2 = (-fb - Math.sqrt(fd)) / (2 * fa);
-      const x1 = -(b * y1 + c) / a;
-      const x2 = -(b * y2 + c) / a;
-      if (fd === 0) {
-          return [{ x: x1, y: y1 }];
-      }
-      return [
-          { x: x1, y: y1 },
-          { x: x2, y: y2 }
-      ];
-  }
-  function connectLineRadian(radius, length) {
-      if (length > radius * 2) {
-          return NaN;
-      }
-      return Math.asin(length / 2 / radius) * 2;
-  }
-  function checkBoundsOverlap(boundsA, boundsB) {
-      const { x1: ax1, y1: ay1, x2: ax2, y2: ay2 } = boundsA;
-      const { x1: bx1, y1: by1, x2: bx2, y2: by2 } = boundsB;
-      return !((ax1 <= bx1 && ax2 <= bx1) ||
-          (ax1 >= bx2 && ax2 >= bx2) ||
-          (ay1 <= by1 && ay2 <= by1) ||
-          (ay1 >= by2 && ay2 >= by2));
-  }
-
   class ArcInfo {
       constructor(refDatum, center, outerCenter, quadrant, radian, middleAngle, innerRadius, outerRadius, circleCenter) {
           this.refDatum = refDatum;
@@ -23392,10 +23487,33 @@
       pickable: false
   };
 
+  class LineDataLabel extends LabelBase {
+      constructor(attributes) {
+          super(vutils.merge({}, LineDataLabel.defaultAttributes, attributes));
+          this.name = 'line-data-label';
+      }
+      labeling(textBounds, graphicBounds, position = 'top', offset = 0) {
+          return labelingPoint(textBounds, graphicBounds, position, offset);
+      }
+  }
+  LineDataLabel.defaultAttributes = {
+      textStyle: {
+          fontSize: 12,
+          fill: '#000',
+          textAlign: 'center',
+          textBaseline: 'middle',
+          boundsPadding: [-1, 0, -1, 0]
+      },
+      position: 'top',
+      offset: 5,
+      pickable: false
+  };
+
   const labelComponentMap = {
       rect: RectLabel,
       symbol: SymbolLabel,
-      arc: ArcLabel
+      arc: ArcLabel,
+      'line-data': LineDataLabel
   };
   class DataLabel extends AbstractComponent {
       constructor(attributes) {
@@ -25619,6 +25737,12 @@
       orient: 'bottom',
       showDetail: 'auto',
       brushSelect: true,
+      zoomLock: false,
+      minSpan: 0,
+      maxSpan: 1,
+      delayType: 'throttle',
+      delayTime: 0,
+      realTime: true,
       backgroundStyle: {
           fill: 'white',
           stroke: '#D1DBEE',
@@ -25707,6 +25831,10 @@
       }
   };
 
+  const delayMap$1 = {
+      debounce: vutils.debounce,
+      throttle: vutils.throttle
+  };
   class DataZoom extends AbstractComponent {
       constructor(attributes) {
           super(vutils.merge({}, DataZoom.defaultAttributes, attributes));
@@ -25755,52 +25883,51 @@
           };
           this._onHandlerPointerMove = (e) => {
               e.stopPropagation();
-              const { start, end, brushSelect } = this.attribute;
+              const { start: startAttr, end: endAttr, brushSelect, realTime = true } = this.attribute;
               const pos = this.eventPosToStagePos(e);
               const { attPos, max } = this._layoutCache;
               const dis = (pos[attPos] - this._activeCache.lastPos[attPos]) / max;
+              let { start, end } = this.state;
               if (this._activeState) {
                   if (this._activeTag === DataZoomActiveTag.middleHandler) {
                       this.moveZoomWithMiddle((this.state.start + this.state.end) / 2 + dis);
                   }
                   else if (this._activeTag === DataZoomActiveTag.startHandler) {
-                      if (this.state.start + dis > this.state.end) {
-                          this.state.start = this.state.end;
-                          this.state.end = this.state.start + dis;
+                      if (start + dis > end) {
+                          start = end;
+                          end = start + dis;
                           this._activeTag = DataZoomActiveTag.endHandler;
                       }
                       else {
-                          this.state.start = this.state.start + dis;
+                          start = start + dis;
                       }
                   }
                   else if (this._activeTag === DataZoomActiveTag.endHandler) {
-                      if (this.state.end + dis < this.state.start) {
-                          this.state.end = this.state.start;
-                          this.state.start = this.state.end + dis;
+                      if (end + dis < start) {
+                          end = start;
+                          start = end + dis;
                           this._activeTag = DataZoomActiveTag.startHandler;
                       }
                       else {
-                          this.state.end = this.state.end + dis;
+                          end = end + dis;
                       }
                   }
                   this._activeCache.lastPos = pos;
                   brushSelect && this.renderDragMask();
               }
-              this.state.start = Math.min(Math.max(this.state.start, 0), 1);
-              this.state.end = Math.min(Math.max(this.state.end, 0), 1);
-              if (start !== this.state.start || end !== this.state.end) {
-                  this.setAttributes({
-                      start: this.state.start,
-                      end: this.state.end
-                  });
-                  this._updateStateCallback && this._updateStateCallback(this.state.start, this.state.end);
-                  this._dispatchChangeEvent(this.state.start, this.state.end);
+              start = Math.min(Math.max(start, 0), 1);
+              end = Math.min(Math.max(end, 0), 1);
+              if (startAttr !== start || endAttr !== end) {
+                  this.setStateAttr(start, end, true);
+                  realTime && this._updateStateCallback && this._updateStateCallback(start, end);
+                  this._dispatchChangeEvent(start, end);
               }
           };
-          const { start, end, size, orient, showDetail, position, previewData, previewCallbackX, previewCallbackY, previewCallbackX1, previewCallbackY1, updateStateCallback } = this.attribute;
+          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';
@@ -25814,17 +25941,17 @@
               this._showText = showDetail;
           }
           previewData && (this._previewData = previewData);
-          vutils.isFunction(previewCallbackX) && (this._previewCallbackX = previewCallbackX);
-          vutils.isFunction(previewCallbackY) && (this._previewCallbackY = previewCallbackY);
-          vutils.isFunction(previewCallbackX1) && (this._previewCallbackX1 = previewCallbackX1);
-          vutils.isFunction(previewCallbackY1) && (this._previewCallbackY1 = previewCallbackY1);
+          vutils.isFunction(previewPointsX) && (this._previewPointsX = previewPointsX);
+          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 } = this.attribute;
+          const { showDetail, brushSelect, delayType = 'throttle', delayTime = 0 } = this.attribute;
           if (this._startHandler) {
               this._startHandler.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, 'start'));
           }
@@ -25851,12 +25978,12 @@
               this._selectedPreviewGroup.addEventListener('pointerdown', (e) => this._onHandlerPointerDown(e, selectedTag));
           }
           if (vglobal.env === 'browser') {
-              vglobal.addEventListener('pointermove', this._onHandlerPointerMove.bind(this), {
+              vglobal.addEventListener('pointermove', delayMap$1[delayType](this._onHandlerPointerMove.bind(this), delayTime), {
                   capture: true
               });
               vglobal.addEventListener('pointerup', this._onHandlerPointerUp.bind(this));
           }
-          this.addEventListener('pointermove', this._onHandlerPointerMove, {
+          this.addEventListener('pointermove', delayMap$1[delayType](this._onHandlerPointerMove, delayTime), {
               capture: true
           });
           this.addEventListener('pointerup', this._onHandlerPointerUp);
@@ -25877,6 +26004,17 @@
           }
           return this._activeCache.lastPos[attPos] - this._activeCache.startPos[attPos];
       }
+      setStateAttr(start, end, shouldRender) {
+          const { zoomLock = false, minSpan = 0, maxSpan = 1 } = this.attribute;
+          const span = end - start;
+          if (span !== this._spanCache && (zoomLock || span < minSpan || span > maxSpan)) {
+              return;
+          }
+          this._spanCache = span;
+          this.state.start = start;
+          this.state.end = end;
+          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();
@@ -25887,7 +26025,7 @@
       }
       _onHandlerPointerUp(e) {
           e.preventDefault();
-          const { start, end, brushSelect } = this.attribute;
+          const { start, end, brushSelect, realTime = true } = this.attribute;
           if (this._activeState) {
               if (this._activeTag === DataZoomActiveTag.background) {
                   const pos = this.eventPosToStagePos(e);
@@ -25896,11 +26034,8 @@
           }
           this._activeState = false;
           brushSelect && this.renderDragMask();
-          if (start !== this.state.start || end !== this.state.end) {
-              this.setAttributes({
-                  start: this.state.start,
-                  end: this.state.end
-              });
+          if (!realTime || start !== this.state.start || end !== this.state.end) {
+              this.setStateAttr(this.state.start, this.state.end, true);
               this._updateStateCallback && this._updateStateCallback(this.state.start, this.state.end);
               this._dispatchChangeEvent(this.state.start, this.state.end);
           }
@@ -25926,8 +26061,7 @@
               this.moveZoomWithMiddle(start);
           }
           else {
-              this.state.start = start;
-              this.state.end = end;
+              this.setStateAttr(start, end, false);
           }
       }
       moveZoomWithMiddle(middle) {
@@ -25946,8 +26080,7 @@
                   offset = -this.state.start;
               }
           }
-          this.state.start = this.state.start + offset;
-          this.state.end = this.state.end + offset;
+          this.setStateAttr(this.state.start + offset, this.state.end + offset, false);
       }
       renderDragMask() {
           const { dragMaskStyle } = this.attribute;
@@ -26177,8 +26310,8 @@
       getPreviewLinePoints() {
           const previewPoints = this._previewData.map(d => {
               return {
-                  x: this._previewCallbackX && this._previewCallbackX(d),
-                  y: this._previewCallbackY && this._previewCallbackY(d)
+                  x: this._previewPointsX && this._previewPointsX(d),
+                  y: this._previewPointsY && this._previewPointsY(d)
               };
           });
           if (previewPoints.length === 0) {
@@ -26190,10 +26323,10 @@
       getPreviewAreaPoints() {
           const previewPoints = this._previewData.map(d => {
               return {
-                  x: this._previewCallbackX && this._previewCallbackX(d),
-                  y: this._previewCallbackY && this._previewCallbackY(d),
-                  x1: this._previewCallbackX1 && this._previewCallbackX1(d),
-                  y1: this._previewCallbackY1 && this._previewCallbackY1(d)
+                  x: this._previewPointsX && this._previewPointsX(d),
+                  y: this._previewPointsY && this._previewPointsY(d),
+                  x1: this._previewPointsX1 && this._previewPointsX1(d),
+                  y1: this._previewPointsY1 && this._previewPointsY1(d)
               };
           });
           if (previewPoints.length === 0) {
@@ -26279,7 +26412,7 @@
               this.state.start = start;
               this.state.end = end;
               if (startAttr !== this.state.start || endAttr !== this.state.end) {
-                  this.setAttributes({ start, end });
+                  this.setStateAttr(start, end, true);
                   this._updateStateCallback && this._updateStateCallback(start, end);
                   this._dispatchChangeEvent(start, end);
               }
@@ -26312,17 +26445,17 @@
       setUpdateStateCallback(callback) {
           vutils.isFunction(callback) && (this._updateStateCallback = callback);
       }
-      setPreviewCallbackX(callback) {
-          vutils.isFunction(callback) && (this._previewCallbackX = callback);
+      setPreviewPointsX(callback) {
+          vutils.isFunction(callback) && (this._previewPointsX = callback);
       }
-      setPreviewCallbackY(callback) {
-          vutils.isFunction(callback) && (this._previewCallbackY = callback);
+      setPreviewPointsY(callback) {
+          vutils.isFunction(callback) && (this._previewPointsY = callback);
       }
-      setPreviewCallbackX1(callback) {
-          vutils.isFunction(callback) && (this._previewCallbackX1 = callback);
+      setPreviewPointsX1(callback) {
+          vutils.isFunction(callback) && (this._previewPointsX1 = callback);
       }
-      setPreviewCallbackY1(callback) {
-          vutils.isFunction(callback) && (this._previewCallbackY1 = callback);
+      setPreviewPointsY1(callback) {
+          vutils.isFunction(callback) && (this._previewPointsY1 = callback);
       }
       setStatePointToData(callback) {
           vutils.isFunction(callback) && (this._statePointToData = callback);
@@ -28056,9 +28189,11 @@
                   vglobal.addEventListener('pointerup', this._onHandlerPointerUp);
               }
               else {
-                  this._currentHandler.addEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
-                  this._currentHandler.addEventListener('pointerup', this._onHandlerPointerUp);
-                  this._currentHandler.addEventListener('pointerupoutside', this._onHandlerPointerUp);
+                  this.stage.addEventListener('pointermove', this._onHandlerPointerMove, {
+                      capture: true
+                  });
+                  this.stage.addEventListener('pointerup', this._onHandlerPointerUp);
+                  this.stage.addEventListener('pointerupoutside', this._onHandlerPointerUp);
               }
           };
           this._onHandlerPointerMove = (e) => {
@@ -28106,10 +28241,11 @@
                   vglobal.removeEventListener('pointerup', this._onHandlerPointerUp);
               }
               else {
-                  const currentTarget = e.target;
-                  currentTarget.removeEventListener('pointermove', this._onHandlerPointerMove, { capture: true });
-                  currentTarget.removeEventListener('pointerup', this._onHandlerPointerUp);
-                  currentTarget.removeEventListener('pointerupoutside', this._onHandlerPointerUp);
+                  this.stage.removeEventListener('pointermove', this._onHandlerPointerMove, {
+                      capture: true
+                  });
+                  this.stage.removeEventListener('pointerup', this._onHandlerPointerUp);
+                  this.stage.removeEventListener('pointerupoutside', this._onHandlerPointerUp);
               }
           };
           this._onTrackPointerdown = (e) => {
@@ -28122,11 +28258,11 @@
                   vglobal.addEventListener('pointerup', this._onTrackPointerUp);
               }
               else {
-                  this._track.addEventListener('pointermove', this._onTrackPointerMove, {
+                  this.stage.addEventListener('pointermove', this._onTrackPointerMove, {
                       capture: true
                   });
-                  this._track.addEventListener('pointerup', this._onTrackPointerUp);
-                  this._track.addEventListener('pointerupoutside', this._onTrackPointerUp);
+                  this.stage.addEventListener('pointerup', this._onTrackPointerUp);
+                  this.stage.addEventListener('pointerupoutside', this._onTrackPointerUp);
               }
           };
           this._onTrackPointerMove = (e) => {
@@ -28183,11 +28319,11 @@
                   vglobal.removeEventListener('pointerup', this._onTrackPointerUp);
               }
               else {
-                  this._track.removeEventListener('pointermove', this._onTrackPointerMove, {
+                  this.stage.removeEventListener('pointermove', this._onTrackPointerMove, {
                       capture: true
                   });
-                  this._track.removeEventListener('pointerup', this._onTrackPointerUp);
-                  this._track.removeEventListener('pointerupoutside', this._onTrackPointerUp);
+                  this.stage.removeEventListener('pointerup', this._onTrackPointerUp);
+                  this.stage.removeEventListener('pointerupoutside', this._onTrackPointerUp);
               }
           };
           this._onRailPointerDown = (e) => {
@@ -30974,7 +31110,7 @@
       }
   };
 
-  const version = "0.16.3-alpha.0";
+  const version = "0.16.4";
 
   exports.AbstractComponent = AbstractComponent;
   exports.ArcInfo = ArcInfo;
@@ -31008,6 +31144,7 @@
   exports.LineAxis = LineAxis;
   exports.LineAxisGrid = LineAxisGrid;
   exports.LineCrosshair = LineCrosshair;
+  exports.LineDataLabel = LineDataLabel;
   exports.LineLabel = LineLabel;
   exports.LinkPath = LinkPath;
   exports.MarkArea = MarkArea;