@visactor/vrender-components 0.16.3 → 0.16.5

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
           })),
@@ -20092,6 +20093,10 @@
       }
   }
 
+  const delayMap$2 = {
+      debounce: vutils.debounce,
+      throttle: vutils.throttle
+  };
   class ScrollBar extends AbstractComponent {
       constructor(attributes) {
           super(vutils.merge({}, ScrollBar.defaultAttributes, attributes));
@@ -20129,18 +20134,16 @@
                   vglobal.addEventListener('pointerup', this._onSliderPointerUp);
               }
               else {
-                  this._slider.addEventListener('pointermove', this._onSliderPointerMove, { capture: true });
-                  this._slider.addEventListener('pointerup', this._onSliderPointerUp);
-                  this._slider.addEventListener('pointerupoutside', this._onSliderPointerUp);
+                  this.stage.addEventListener('pointermove', this._onSliderPointerMove, { capture: true });
+                  this.stage.addEventListener('pointerup', this._onSliderPointerUp);
+                  this.stage.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;
@@ -20152,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);
@@ -20187,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;
@@ -20199,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);
@@ -20310,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) {
@@ -22060,7 +22085,7 @@
       }
       render() {
           this._prepare();
-          if ((this._isCollectionBase && vutils.isNil(this._idToPoint)) || (!this._isCollectionBase && vutils.isNil(this._idToGraphic))) {
+          if (vutils.isNil(this._idToGraphic) || (this._isCollectionBase && vutils.isNil(this._idToPoint))) {
               return;
           }
           const { overlap, smartInvert, dataFilter, customLayoutFunc, customOverlapFunc } = this.attribute;
@@ -22156,28 +22181,33 @@
           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}`;
+              let cur = 0;
+              for (let i = 0; i < currentBaseMarks.length; i++) {
+                  const baseMark = currentBaseMarks[i];
+                  const points = getPointsOfLineArea(baseMark);
+                  if (points === null || points === void 0 ? void 0 : points.length) {
+                      for (let j = 0; j < points.length; j++) {
+                          const textData = data[cur];
+                          if (textData && points[j]) {
+                              if (!vutils.isValid(textData.id)) {
+                                  textData.id = `vrender-component-${this.name}-${cur}`;
+                              }
+                              this._idToPoint.set(textData.id, points[j]);
+                              this._idToGraphic.set(textData.id, baseMark);
                           }
-                          this._idToPoint.set(textData.id, points[i]);
+                          cur++;
                       }
                   }
               }
           }
           else {
-              if (!this._idToGraphic) {
-                  this._idToGraphic = new Map();
-              }
               for (let i = 0; i < currentBaseMarks.length; i++) {
                   const textData = data[i];
                   const baseMark = currentBaseMarks[i];
@@ -22191,7 +22221,7 @@
           }
       }
       getRelatedGrphic(item) {
-          return this._isCollectionBase ? this._baseMarks[0] : this._idToGraphic.get(item.id);
+          return this._idToGraphic.get(item.id);
       }
       _layout(data = []) {
           const { textStyle = {}, position, offset } = this.attribute;
@@ -25712,6 +25742,12 @@
       orient: 'bottom',
       showDetail: 'auto',
       brushSelect: true,
+      zoomLock: false,
+      minSpan: 0,
+      maxSpan: 1,
+      delayType: 'throttle',
+      delayTime: 0,
+      realTime: true,
       backgroundStyle: {
           fill: 'white',
           stroke: '#D1DBEE',
@@ -25800,6 +25836,10 @@
       }
   };
 
+  const delayMap$1 = {
+      debounce: vutils.debounce,
+      throttle: vutils.throttle
+  };
   class DataZoom extends AbstractComponent {
       constructor(attributes) {
           super(vutils.merge({}, DataZoom.defaultAttributes, attributes));
@@ -25848,52 +25888,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';
@@ -25907,17 +25946,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'));
           }
@@ -25944,12 +25983,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);
@@ -25970,6 +26009,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();
@@ -25980,7 +26030,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);
@@ -25989,11 +26039,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);
           }
@@ -26019,8 +26066,7 @@
               this.moveZoomWithMiddle(start);
           }
           else {
-              this.state.start = start;
-              this.state.end = end;
+              this.setStateAttr(start, end, false);
           }
       }
       moveZoomWithMiddle(middle) {
@@ -26039,8 +26085,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;
@@ -26270,8 +26315,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) {
@@ -26283,10 +26328,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) {
@@ -26372,7 +26417,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);
               }
@@ -26405,17 +26450,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);
@@ -28149,9 +28194,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) => {
@@ -28199,10 +28246,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) => {
@@ -28215,11 +28263,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) => {
@@ -28276,11 +28324,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) => {
@@ -31067,7 +31115,7 @@
       }
   };
 
-  const version = "0.16.3";
+  const version = "0.16.5";
 
   exports.AbstractComponent = AbstractComponent;
   exports.ArcInfo = ArcInfo;