evui 3.3.42 → 3.3.43

package/dist/evui.umd.js

@@ -7966,7 +7966,7 @@ $({ target: 'Number', stat: true }, {
 /***/ "9224":
 /***/ (function(module) {
 
-module.exports = JSON.parse("{\"a\":\"3.3.42\"}");
+module.exports = JSON.parse("{\"a\":\"3.3.43\"}");
 
 /***/ }),
 
@@ -21155,7 +21155,9 @@ var calendar_uses_useEvent = function useEvent(param) {
   }, function (curr) {
     selectedValue.value = curr;
 
-    if (props.mode.includes('Time')) {
+    if (props.mode === 'dateRange') {
+      updateCalendarPage(selectedValue.value);
+    } else if (props.mode.includes('Time')) {
       var updateValue = [];
 
       if (props.mode === 'dateTime') {
@@ -35349,28 +35351,33 @@ var element_line_Line = /*#__PURE__*/function () {
         color: this.color
       };
       var gdata = this.data;
-      var s = 0;
-      var e = gdata.length - 1;
-      var xpInterval = gdata[1].xp - gdata[0].xp < 6 ? 1.5 : 6;
 
-      while (s <= e) {
-        var m = Math.floor((s + e) / 2);
-        var x = gdata[m].xp;
-        var y = gdata[m].yp;
+      if (gdata !== null && gdata !== void 0 && gdata.length) {
+        var _gdata$;
 
-        if (x - xpInterval < xp && xp < x + xpInterval) {
-          item.data = gdata[m];
-          item.index = m;
+        var s = 0;
+        var e = gdata.length - 1;
+        var xpInterval = ((_gdata$ = gdata[1]) === null || _gdata$ === void 0 ? void 0 : _gdata$.xp) - gdata[0].xp < 6 ? 1.5 : 6;
 
-          if (y - 6 <= yp && yp <= y + 6) {
-            item.hit = true;
-          }
+        while (s <= e) {
+          var m = Math.floor((s + e) / 2);
+          var x = gdata[m].xp;
+          var y = gdata[m].yp;
 
-          return item;
-        } else if (x + xpInterval > xp) {
-          e = m - 1;
-        } else {
-          s = m + 1;
+          if (x - xpInterval < xp && xp < x + xpInterval) {
+            item.data = gdata[m];
+            item.index = m;
+
+            if (y - 6 <= yp && yp <= y + 6) {
+              item.hit = true;
+            }
+
+            return item;
+          } else if (x + xpInterval > xp) {
+            e = m - 1;
+          } else {
+            s = m + 1;
+          }
         }
       }
 
@@ -46733,14 +46740,33 @@ function ChartBrushvue_type_template_id_7d0c10ab_render(_ctx, _cache, $props, $s
 
 
 
+var BRUSH_UPDATE_MODE = {
+  WHEEL: {
+    UP: 'MOVEUP_WHEEL',
+    DOWN: 'MOVEDOWN_WHEEL'
+  },
+  GRAB: {
+    UP: 'MOVEUP_GRAB',
+    DOWN: 'MOVEDOWN_GRAB'
+  },
+  BUTTON: {
+    INCREASE: 'INCREASE',
+    DECREASE: 'DECREASE'
+  }
+};
+var BUTTON_TYPE = {
+  LEFT: 'leftX',
+  RIGHT: 'rightX'
+};
+
 var chartBrush_core_EvChartBrush = /*#__PURE__*/function () {
   function EvChartBrush(evChart, evChartData, evChartBrushOptions, brushIdx, evChartBrushRef) {
     _classCallCheck(this, EvChartBrush);
 
     this.evChart = evChart;
-    this.evChartData = evChartData;
     this.evChartBrushOptions = evChartBrushOptions;
     this.evChartBrushRef = evChartBrushRef;
+    this.evChartData = evChartData;
     this.brushIdx = brushIdx;
 
     if (evChartBrushOptions.value.useDebounce) {
@@ -46755,7 +46781,6 @@ var chartBrush_core_EvChartBrush = /*#__PURE__*/function () {
     key: "init",
     value: function init(isResize) {
       if (this.brushIdx.start > this.brushIdx.end) {
-        this.initEventState();
         this.removeBrushCanvas();
         return;
       }
@@ -46787,11 +46812,11 @@ var chartBrush_core_EvChartBrush = /*#__PURE__*/function () {
   }, {
     key: "drawBrushRect",
     value: function drawBrushRect(_ref) {
-      var _this$debounceBrushId;
-
       var brushCanvas = _ref.brushCanvas,
           isResize = _ref.isResize,
-          isDebounce = _ref.isDebounce;
+          isDebounce = _ref.isDebounce,
+          mode = _ref.mode,
+          offsetX = _ref.offsetX;
       var _this$evChart = this.evChart,
           chartRect = _this$evChart.chartRect,
           labelOffset = _this$evChart.labelOffset;
@@ -46800,21 +46825,57 @@ var chartBrush_core_EvChartBrush = /*#__PURE__*/function () {
         return;
       }
 
+      var labelEndIdx = this.evChartData.value.labels.length - 1;
+      this.labelEndIdx = labelEndIdx;
       var evChartRange = {
         x1: chartRect.x1 + labelOffset.left,
         x2: chartRect.x2 - labelOffset.right,
         y1: chartRect.y1 + labelOffset.top,
         y2: chartRect.y2 - labelOffset.bottom
       };
-      var pixelRatio = window.devicePixelRatio || 1;
+      var canvasPosInfo = this.setCanvasWidthHeight(evChartRange, brushCanvas);
+
+      if (isResize && this.isEqualWidth) {
+        return;
+      }
+
+      if (labelEndIdx >= 0) {
+        var brushPosInfo = this.setBrushXAndWidth(canvasPosInfo, offsetX, isDebounce, mode);
+
+        if (canvasPosInfo && brushPosInfo) {
+          this.drawBrush(canvasPosInfo, brushPosInfo, evChartRange, brushCanvas);
+        }
+      }
+    }
+  }, {
+    key: "setCanvasWidthHeight",
+    value: function setCanvasWidthHeight(evChartRange, brushCanvas) {
       var brushButtonWidth = 6;
       var brushCanvasWidth = evChartRange.x2 - evChartRange.x1 + brushButtonWidth;
       var brushCanvasHeight = evChartRange.y2 - evChartRange.y1;
-      var isEqualWidth = brushCanvas.width === Math.floor(brushCanvasWidth * pixelRatio);
+      var axesXInterval = (evChartRange.x2 - evChartRange.x1) / this.labelEndIdx;
+      var pixelRatio = window.devicePixelRatio || 1;
+      this.isEqualWidth = brushCanvas.width === Math.floor(brushCanvasWidth * pixelRatio);
+      return {
+        brushButtonWidth: brushButtonWidth,
+        brushCanvasHeight: brushCanvasHeight,
+        brushCanvasWidth: brushCanvasWidth,
+        axesXInterval: axesXInterval,
+        pixelRatio: pixelRatio
+      };
+    }
+  }, {
+    key: "setBrushXAndWidth",
+    value: function setBrushXAndWidth(canvasPosInfo) {
+      var _this$debounceBrushId;
 
-      if (isResize && isEqualWidth) {
-        return;
-      }
+      var offsetX = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      var isDebounce = arguments.length > 2 ? arguments[2] : undefined;
+      var mode = arguments.length > 3 ? arguments[3] : undefined;
+      var brushButtonWidth = canvasPosInfo.brushButtonWidth,
+          brushCanvasWidth = canvasPosInfo.brushCanvasWidth,
+          axesXInterval = canvasPosInfo.axesXInterval,
+          pixelRatio = canvasPosInfo.pixelRatio;
 
       if (!isDebounce && this.debounceBrushIdx) {
         this.debounceBrushIdx.start = this.brushIdx.start;
@@ -46822,44 +46883,109 @@ var chartBrush_core_EvChartBrush = /*#__PURE__*/function () {
       }
 
       var brushIdx = (_this$debounceBrushId = this.debounceBrushIdx) !== null && _this$debounceBrushId !== void 0 ? _this$debounceBrushId : this.brushIdx;
-      var labelEndIdx = this.evChartData.value.labels.length - 1;
 
-      if (labelEndIdx >= 0) {
-        this.labelEndIdx = labelEndIdx;
-        var axesXInterval = (evChartRange.x2 - evChartRange.x1) / labelEndIdx;
-        var brushRectX = brushIdx.start * axesXInterval * pixelRatio;
-        var brushRectWidth = (brushCanvasWidth - (labelEndIdx - (brushIdx.end - brushIdx.start)) * axesXInterval) * pixelRatio;
-        var brushRectHeight = this.evChartBrushOptions.value.height - evChartRange.y1;
-        var brushButtonLeftXPos = brushRectX;
-        var brushButtonRightXPos = brushRectX + brushRectWidth;
-
-        if (!brushCanvas.style.position) {
-          brushCanvas.style.position = 'absolute';
-          brushCanvas.style.top = "".concat(evChartRange.y1, "px");
-          brushCanvas.style.left = "".concat(evChartRange.x1 - brushButtonWidth / 2, "px");
-        }
-
-        if (!isEqualWidth) {
-          brushCanvas.width = brushCanvasWidth * pixelRatio;
-          brushCanvas.style.width = "".concat(brushCanvasWidth, "px");
-          brushCanvas.height = brushCanvasHeight * pixelRatio;
-          brushCanvas.style.height = "".concat(brushCanvasHeight, "px");
-        }
-
-        var ctx = brushCanvas.getContext('2d');
-        ctx.clearRect(0, 0, brushCanvasWidth * pixelRatio, brushCanvasHeight * pixelRatio);
-        ctx.fillStyle = this.evChartBrushOptions.value.selection.fillColor;
-        ctx.globalAlpha = this.evChartBrushOptions.value.selection.opacity;
-        ctx.fillRect(brushRectX, 0, brushRectWidth, brushRectHeight);
-        ctx.fillRect(brushButtonLeftXPos, 0, brushButtonWidth, brushRectHeight);
-        ctx.fillRect(brushButtonRightXPos - brushButtonWidth, 0, brushButtonWidth, brushRectHeight);
-        this.evChartBrushPos = {
-          leftX: brushButtonLeftXPos / pixelRatio,
-          rightX: brushButtonRightXPos / pixelRatio,
-          buttonWidth: brushButtonWidth,
-          axesXInterval: axesXInterval
-        };
+      switch (mode) {
+        case BRUSH_UPDATE_MODE.BUTTON.INCREASE:
+        case BRUSH_UPDATE_MODE.BUTTON.DECREASE:
+          this.brushRectWidth = brushCanvasWidth * pixelRatio;
+
+          if (this.curBrushButtonType === BUTTON_TYPE.LEFT) {
+            this.brushRectWidth = this.beforeBrushRectWidth ? this.beforeBrushRectWidth - offsetX : this.brushRectWidth - offsetX;
+
+            if (this.brushRectWidth <= brushButtonWidth) {
+              this.brushRectWidth = brushButtonWidth;
+            } else {
+              this.brushRectX = offsetX * pixelRatio;
+              this.beforeBrushRectX = this.brushRectX;
+            }
+          } else if (this.curBrushButtonType === BUTTON_TYPE.RIGHT) {
+            this.brushRectWidth = offsetX - this.beforeBrushRectX;
+
+            if (this.brushRectWidth <= brushButtonWidth) {
+              this.brushRectWidth = brushButtonWidth;
+            } else {
+              this.brushRectX = this.beforeBrushRectX;
+              this.beforeBrushRectWidth = this.brushRectWidth + this.brushRectX;
+            }
+          }
+
+          break;
+
+        case BRUSH_UPDATE_MODE.GRAB.UP:
+        case BRUSH_UPDATE_MODE.GRAB.DOWN:
+          if (this.brushRectX <= 0 && mode === BRUSH_UPDATE_MODE.GRAB.DOWN || this.brushRectX + this.brushRectWidth >= brushCanvasWidth && mode === BRUSH_UPDATE_MODE.GRAB.UP) {
+            this.offsetXAndRectXInterval = null;
+          } else {
+            if (!this.offsetXAndRectXInterval) {
+              this.offsetXAndRectXInterval = offsetX - this.brushRectX;
+            }
+
+            this.brushRectX = offsetX - this.offsetXAndRectXInterval;
+          }
+
+          break;
+
+        default:
+          if (!offsetX) {
+            this.brushRectX = brushIdx.start * axesXInterval * pixelRatio;
+            this.brushRectWidth = (brushCanvasWidth - (this.labelEndIdx - (brushIdx.end - brushIdx.start)) * axesXInterval) * pixelRatio;
+            this.beforeBrushRectX = this.brushRectX;
+            this.beforeBrushRectWidth = this.brushRectWidth + this.brushRectX;
+          }
+
+          break;
       }
+
+      return {
+        brushRectX: this.brushRectX,
+        brushRectWidth: this.brushRectWidth
+      };
+    }
+  }, {
+    key: "drawBrush",
+    value: function drawBrush(canvasPosInfo, brushPosInfo, evChartRange, brushCanvas) {
+      var brushButtonWidth = canvasPosInfo.brushButtonWidth,
+          brushCanvasHeight = canvasPosInfo.brushCanvasHeight,
+          brushCanvasWidth = canvasPosInfo.brushCanvasWidth,
+          axesXInterval = canvasPosInfo.axesXInterval,
+          pixelRatio = canvasPosInfo.pixelRatio;
+      var brushRectX = brushPosInfo.brushRectX,
+          brushRectWidth = brushPosInfo.brushRectWidth;
+      var _this$evChartBrushOpt = this.evChartBrushOptions.value,
+          height = _this$evChartBrushOpt.height,
+          _this$evChartBrushOpt2 = _this$evChartBrushOpt.selection,
+          fillColor = _this$evChartBrushOpt2.fillColor,
+          opacity = _this$evChartBrushOpt2.opacity;
+      var brushRectHeight = height - evChartRange.y1;
+      var brushButtonLeftXPos = brushRectX;
+      var brushButtonRightXPos = brushRectX + brushRectWidth;
+
+      if (!brushCanvas.style.position) {
+        brushCanvas.style.position = 'absolute';
+        brushCanvas.style.top = "".concat(evChartRange.y1, "px");
+        brushCanvas.style.left = "".concat(evChartRange.x1 - brushButtonWidth / 2, "px");
+      }
+
+      if (!this.isEqualWidth) {
+        brushCanvas.width = brushCanvasWidth * pixelRatio;
+        brushCanvas.style.width = "".concat(brushCanvasWidth, "px");
+        brushCanvas.height = brushCanvasHeight * pixelRatio;
+        brushCanvas.style.height = "".concat(brushCanvasHeight, "px");
+      }
+
+      var ctx = brushCanvas.getContext('2d');
+      ctx.clearRect(0, 0, brushCanvasWidth * pixelRatio, brushCanvasHeight * pixelRatio);
+      ctx.fillStyle = fillColor;
+      ctx.globalAlpha = opacity;
+      ctx.fillRect(brushRectX, 0, brushRectWidth, brushRectHeight);
+      ctx.fillRect(brushButtonLeftXPos, 0, brushButtonWidth, brushRectHeight);
+      ctx.fillRect(brushButtonRightXPos - brushButtonWidth, 0, brushButtonWidth, brushRectHeight);
+      this.brushPosInfo = _objectSpread2(_objectSpread2({
+        leftX: brushButtonLeftXPos / pixelRatio,
+        rightX: brushButtonRightXPos / pixelRatio,
+        buttonWidth: brushButtonWidth,
+        axesXInterval: axesXInterval
+      }, canvasPosInfo), brushPosInfo);
     }
   }, {
     key: "addEvent",
@@ -46894,8 +47020,19 @@ var chartBrush_core_EvChartBrush = /*#__PURE__*/function () {
 
       this.onWheel = function (e) {
         e.preventDefault();
+        var mode = e.deltaY > 0 ? BRUSH_UPDATE_MODE.WHEEL.DOWN : BRUSH_UPDATE_MODE.WHEEL.UP;
+
+        _this.updateBrushIdx(mode);
 
-        _this.updateBrushIdx(e.deltaY > 0 ? 'movedown' : 'moveup');
+        if (_this.debounceBrushIdx) {
+          _this.drawBrushRect({
+            brushCanvas: _this.brushCanvas,
+            isDebounce: true,
+            mode: mode
+          });
+        }
+
+        _this.brushIdx.isUseScroll = true;
       };
 
       this.onMouseUp = function () {
@@ -46921,23 +47058,23 @@ var chartBrush_core_EvChartBrush = /*#__PURE__*/function () {
       var _this2 = this;
 
       var calDisToCurMouseX = function calDisToCurMouseX(xPos) {
-        return Math.abs(_this2.evChartBrushPos[xPos] - e.offsetX);
+        return Math.abs(_this2.brushPosInfo[xPos] - e.offsetX);
       };
 
-      var buttonType = calDisToCurMouseX('rightX') > calDisToCurMouseX('leftX') ? 'leftX' : 'rightX';
-      this.curBrushButtonType = buttonType;
+      var buttonType = calDisToCurMouseX(BUTTON_TYPE.RIGHT) > calDisToCurMouseX(BUTTON_TYPE.LEFT) ? BUTTON_TYPE.LEFT : BUTTON_TYPE.RIGHT;
 
       var isMoveRight = function isMoveRight(xPos) {
-        return e.offsetX > _this2.evChartBrushPos[xPos];
+        return e.offsetX > _this2.brushPosInfo[xPos];
       };
 
       var isMoveLeft = function isMoveLeft(xPos) {
-        return e.offsetX < _this2.evChartBrushPos[xPos];
+        return e.offsetX < _this2.brushPosInfo[xPos];
       };
 
-      var isOutsideBrush = isMoveLeft('leftX') || isMoveRight('rightX');
-      var isInsideBrush = isMoveRight('leftX') && isMoveLeft('rightX');
-      var isInsideButton = e.offsetX + this.evChartBrushPos.buttonWidth >= this.evChartBrushPos[buttonType] && e.offsetX - this.evChartBrushPos.buttonWidth <= this.evChartBrushPos[buttonType];
+      var isOutsideBrush = isMoveLeft(BUTTON_TYPE.LEFT) || isMoveRight(BUTTON_TYPE.RIGHT);
+      var isInsideBrush = isMoveRight(BUTTON_TYPE.LEFT) && isMoveLeft(BUTTON_TYPE.RIGHT);
+      var isInsideButton = e.offsetX + this.brushPosInfo.buttonWidth >= this.brushPosInfo[buttonType] && e.offsetX - this.brushPosInfo.buttonWidth <= this.brushPosInfo[buttonType];
+      this.curBrushButtonType = isInsideButton && buttonType;
       return {
         isInsideButton: isInsideButton,
         isInsideBrush: isInsideBrush,
@@ -47009,18 +47146,18 @@ var chartBrush_core_EvChartBrush = /*#__PURE__*/function () {
 
       if (middle > 0.5) {
         if ((brushIdx.end - brushIdx.start) % 2 === 0) {
-          clickIdx = Math.round(e.offsetX / this.evChartBrushPos.axesXInterval);
+          clickIdx = Math.round(e.offsetX / this.brushPosInfo.axesXInterval);
           left = Math.ceil(middle);
           right = Math.floor(middle);
         } else {
-          clickIdx = Math.ceil(e.offsetX / this.evChartBrushPos.axesXInterval);
+          clickIdx = Math.ceil(e.offsetX / this.brushPosInfo.axesXInterval);
           left = Math.ceil(middle);
           right = Math.floor(middle);
         }
       } else {
-        clickIdx = Math.floor(e.offsetX / this.evChartBrushPos.axesXInterval);
+        clickIdx = Math.floor(e.offsetX / this.brushPosInfo.axesXInterval);
 
-        if (e.offsetX - clickIdx * this.evChartBrushPos.axesXInterval > this.evChartBrushPos.axesXInterval / 2) {
+        if (e.offsetX - clickIdx * this.brushPosInfo.axesXInterval > this.brushPosInfo.axesXInterval / 2) {
           left = Math.floor(middle);
           right = Math.ceil(middle);
         } else {
@@ -47062,40 +47199,53 @@ var chartBrush_core_EvChartBrush = /*#__PURE__*/function () {
   }, {
     key: "mouseDownAndMove",
     value: function mouseDownAndMove(e) {
-      var moveSensitive = this.evChartBrushPos.axesXInterval / 3;
+      var moveSensitive = this.debounceBrushIdx ? 0 : this.brushPosInfo.axesXInterval / 3;
       var mode;
 
       if (e.offsetX > this.beforeMouseXPos) {
         // 오른쪽 이동
         if (this.clickBrushInsideX > 0) {
           if (this.clickBrushInsideX < e.offsetX - moveSensitive) {
-            mode = 'moveup';
+            mode = BRUSH_UPDATE_MODE.GRAB.UP;
+            this.isUseBrushGrab = true;
+            this.brushIdx.isUseScroll = true;
             this.clickBrushInsideX = e.offsetX + moveSensitive;
           }
         } else {
-          var isMoveRight = e.offsetX - this.evChartBrushPos[this.curBrushButtonType] > moveSensitive;
+          var isMoveRight = e.offsetX - this.brushPosInfo[this.curBrushButtonType] > moveSensitive;
 
           if (isMoveRight) {
-            mode = this.curBrushButtonType === 'leftX' ? 'decrease' : 'increase';
+            mode = this.curBrushButtonType === BUTTON_TYPE.LEFT ? BRUSH_UPDATE_MODE.BUTTON.DECREASE : BRUSH_UPDATE_MODE.BUTTON.INCREASE;
+            this.brushIdx.isUseButton = true;
           }
         }
       } else if (e.offsetX < this.beforeMouseXPos) {
         // 왼쪽 이동
         if (this.clickBrushInsideX > 0) {
           if (this.clickBrushInsideX > e.offsetX + moveSensitive) {
-            mode = 'movedown';
+            mode = BRUSH_UPDATE_MODE.GRAB.DOWN;
+            this.isUseBrushGrab = true;
+            this.brushIdx.isUseScroll = true;
             this.clickBrushInsideX = e.offsetX - moveSensitive;
           }
         } else {
-          var isMoveLeft = this.evChartBrushPos[this.curBrushButtonType] - e.offsetX > moveSensitive;
+          var isMoveLeft = this.brushPosInfo[this.curBrushButtonType] - e.offsetX > moveSensitive;
 
           if (isMoveLeft) {
-            mode = this.curBrushButtonType === 'leftX' ? 'increase' : 'decrease';
+            mode = this.curBrushButtonType === BUTTON_TYPE.LEFT ? BRUSH_UPDATE_MODE.BUTTON.INCREASE : BRUSH_UPDATE_MODE.BUTTON.DECREASE;
+            this.brushIdx.isUseButton = true;
           }
         }
       }
 
-      if (mode) {
+      if (this.debounceBrushIdx) {
+        this.drawBrushRect({
+          brushCanvas: this.brushCanvas,
+          isDebounce: true,
+          mode: mode,
+          offsetX: e.offsetX
+        });
+      } else {
         this.updateBrushIdx(mode);
       }
 
@@ -47115,28 +47265,28 @@ var chartBrush_core_EvChartBrush = /*#__PURE__*/function () {
       var brushIdx = (_this$debounceBrushId3 = this.debounceBrushIdx) !== null && _this$debounceBrushId3 !== void 0 ? _this$debounceBrushId3 : this.brushIdx;
 
       switch (mode) {
-        case 'moveup':
-          if (brushIdx.end === this.labelEndIdx) {
+        case BRUSH_UPDATE_MODE.WHEEL.UP:
+        case BRUSH_UPDATE_MODE.GRAB.UP:
+          if (brushIdx.end >= this.labelEndIdx) {
             return;
           }
 
           brushIdx.start += 1;
           brushIdx.end += 1;
-          this.brushIdx.isUseScroll = true;
           break;
 
-        case 'movedown':
-          if (!brushIdx.start) {
+        case BRUSH_UPDATE_MODE.WHEEL.DOWN:
+        case BRUSH_UPDATE_MODE.GRAB.DOWN:
+          if (brushIdx.start <= 0) {
             return;
           }
 
           brushIdx.start -= 1;
           brushIdx.end -= 1;
-          this.brushIdx.isUseScroll = true;
           break;
 
-        case 'increase':
-          if (this.curBrushButtonType === 'leftX') {
+        case BRUSH_UPDATE_MODE.BUTTON.INCREASE:
+          if (this.curBrushButtonType === BUTTON_TYPE.LEFT) {
             if (!brushIdx.start) {
               return;
             }
@@ -47150,37 +47300,104 @@ var chartBrush_core_EvChartBrush = /*#__PURE__*/function () {
             brushIdx.end += 1;
           }
 
-          this.brushIdx.isUseButton = true;
           break;
 
-        case 'decrease':
+        case BRUSH_UPDATE_MODE.BUTTON.DECREASE:
           if (brushIdx.start === brushIdx.end - 1) {
             return;
           }
 
-          if (this.curBrushButtonType === 'leftX') {
+          if (this.curBrushButtonType === BUTTON_TYPE.LEFT) {
             brushIdx.start += 1;
           } else {
             brushIdx.end -= 1;
           }
 
-          this.brushIdx.isUseButton = true;
           break;
 
         default:
           break;
       }
+    }
+  }, {
+    key: "updateBrushIdxUseXPos",
+    value: function updateBrushIdxUseXPos() {
+      var _this3 = this;
+
+      if (!this.debounceBrushIdx) {
+        return;
+      }
+
+      var calculateBrushIdxByPos = function calculateBrushIdxByPos() {
+        var brushStartIdx;
+        var brushEndIdx;
+
+        if (_this3.brushPosInfo) {
+          var _this3$brushPosInfo = _this3.brushPosInfo,
+              brushRectX = _this3$brushPosInfo.brushRectX,
+              brushRectWidth = _this3$brushPosInfo.brushRectWidth,
+              brushCanvasWidth = _this3$brushPosInfo.brushCanvasWidth,
+              axesXInterval = _this3$brushPosInfo.axesXInterval;
+
+          if (_this3.brushIdx.isUseButton || _this3.isUseBrushGrab) {
+            brushStartIdx = brushRectX / axesXInterval;
+            brushEndIdx = _this3.labelEndIdx - (brushCanvasWidth - (brushRectX + brushRectWidth)) / axesXInterval;
+
+            if (_this3.curBrushButtonType === BUTTON_TYPE.LEFT) {
+              brushStartIdx = Math.round(brushStartIdx);
+              brushEndIdx = _this3.brushIdx.end;
+
+              if (brushStartIdx === brushEndIdx) {
+                brushStartIdx -= 1;
+              }
+            } else if (_this3.curBrushButtonType === BUTTON_TYPE.RIGHT) {
+              brushStartIdx = _this3.brushIdx.start;
+              brushEndIdx = Math.round(brushEndIdx);
+
+              if (brushStartIdx === brushEndIdx) {
+                brushEndIdx += 1;
+              }
+            } else {
+              brushStartIdx = Math.round(brushStartIdx);
+              brushEndIdx = Math.round(brushEndIdx);
+            }
+
+            if (brushEndIdx > _this3.labelEndIdx) {
+              var excessIdx = brushEndIdx - _this3.labelEndIdx;
+              brushStartIdx -= excessIdx;
+              brushEndIdx -= excessIdx;
+            }
 
-      if (mode && this.debounceBrushIdx) {
+            if (brushStartIdx < 0) {
+              var _excessIdx = Math.abs(brushStartIdx);
+
+              brushStartIdx = 0;
+              brushEndIdx += _excessIdx;
+            }
+          }
+        }
+
+        return {
+          brushStartIdx: brushStartIdx,
+          brushEndIdx: brushEndIdx
+        };
+      };
+
+      var _calculateBrushIdxByP = calculateBrushIdxByPos(),
+          brushStartIdx = _calculateBrushIdxByP.brushStartIdx,
+          brushEndIdx = _calculateBrushIdxByP.brushEndIdx;
+
+      if (this.brushIdx.start === brushStartIdx && this.brushIdx.end === brushEndIdx) {
         this.drawBrushRect({
-          brushCanvas: this.brushCanvas,
-          isResize: false,
-          isDebounce: true
+          brushCanvas: this.brushCanvas
         });
       }
+
+      this.brushIdx.start = brushStartIdx !== null && brushStartIdx !== void 0 ? brushStartIdx : this.debounceBrushIdx.start;
+      this.brushIdx.end = brushEndIdx !== null && brushEndIdx !== void 0 ? brushEndIdx : this.debounceBrushIdx.end;
     }
     /**
-     * @param {boolean} isUpdateBrushIdx to initialize state after update brush index value
+     * @param {boolean} updateBrushIdxUseXPos to initialize state after update brush index value
      *
      * @returns {undefined}
      */
@@ -47188,23 +47405,22 @@ var chartBrush_core_EvChartBrush = /*#__PURE__*/function () {
   }, {
     key: "initEventState",
     value: function initEventState() {
-      var _this3 = this;
+      var _this4 = this;
 
       var promise = new Promise(function (resolve) {
-        if (_this3.debounceBrushIdx && (_this3.brushIdx.isUseButton || _this3.brushIdx.isUseScroll)) {
-          _this3.brushIdx.start = _this3.debounceBrushIdx.start;
-          _this3.brushIdx.end = _this3.debounceBrushIdx.end;
-        }
+        _this4.updateBrushIdxUseXPos();
 
         resolve(true);
       });
       promise.then(function (isUpdateBrushIdx) {
         if (isUpdateBrushIdx) {
-          _this3.clickBrushInsideX = null;
-          _this3.beforeMouseXPos = null;
-          _this3.curBrushButtonType = null;
-          _this3.brushIdx.isUseButton = false;
-          _this3.brushIdx.isUseScroll = false;
+          _this4.clickBrushInsideX = null;
+          _this4.beforeMouseXPos = null;
+          _this4.curBrushButtonType = null;
+          _this4.isUseBrushGrab = false;
+          _this4.offsetXAndRectXInterval = null;
+          _this4.brushIdx.isUseButton = false;
+          _this4.brushIdx.isUseScroll = false;
         }
       });
     }