evui 3.4.154 → 3.4.155

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "3.4.154",
+  "version": "3.4.155",
   "description": "A EXEM Library project",
   "author": "exem <dev_client@ex-em.com>",
   "license": "MIT",

package/src/components/chart/chart.core.js

@@ -268,7 +268,13 @@ class EvChart {
 
     this.axesRange = this.getAxesRange();
     this.labelOffset = this.getLabelOffset();
+
     this.labelRange = this.getAxesLabelRange();
+
+    if (this.scrollbar?.x?.use || this.scrollbar?.y?.use) {
+      this.updateScrollbarPosition();
+    }
+
     this.axesSteps = this.calculateSteps();
 
     this.adjustXAndYAxisWidth();
@@ -276,10 +282,6 @@ class EvChart {
     this.drawAxis(hitInfo);
     this.drawSeries(hitInfo);
 
-    if (this.scrollbar?.x?.use || this.scrollbar?.y?.use) {
-      this.updateScrollbarPosition();
-    }
-
     this.drawTip();
 
     if (
@@ -856,12 +858,18 @@ class EvChart {
    * @param {boolean} updateData is update data
    * @returns {undefined}
    */
-  updateScrollbar(updateData) {
-    if (this.scrollbar?.x?.isInit || this.options.axesX?.[0]?.scrollbar?.use) {
+  updateScrollbar(updateData, updateByScrollbar) {
+    const isForceUpdate = updateByScrollbar || updateData;
+    const xUse = this.options.axesX?.[0]?.scrollbar?.use ?? false;
+    const yUse = this.options.axesY?.[0]?.scrollbar?.use ?? false;
+    const prevXUse = this.scrollbar?.x?.use ?? false;
+    const prevYUse = this.scrollbar?.y?.use ?? false;
+
+    if (xUse !== prevXUse || xUse || (isForceUpdate && xUse)) {
       this.updateScrollbarInfo('x', updateData);
     }
 
-    if (this.scrollbar?.y?.isInit || this.options.axesY?.[0]?.scrollbar?.use) {
+    if (yUse !== prevYUse || yUse || (isForceUpdate && yUse)) {
       this.updateScrollbarInfo('y', updateData);
     }
   }
@@ -886,13 +894,14 @@ class EvChart {
       updateData,
       updateTooltip,
       lightUpdate,
+      updateByScrollbar,
     } = updateInfo;
 
     if (!this.isInit) {
       return;
     }
 
-    this.updateScrollbar(updateData);
+    this.updateScrollbar(updateData, updateByScrollbar);
 
     this.resetProps();
 

package/src/components/chart/element/element.bar.js

@@ -115,13 +115,12 @@ class Bar {
     const startIndex = truthyNumber(minIndex) ? minIndex : 0;
     const endIndex = truthyNumber(maxIndex) ? maxIndex : this.data.length - 1;
 
-    // 스크롤 범위 내에서만 루프 돌림
+    this.visibleStartIndex = startIndex;
+
     for (let i = startIndex; i <= endIndex; i++) {
-      const screenIndex = i - startIndex; // 현재 화면상의 위치 인덱스
-      const item = this.data[i]; // 실제 데이터 인덱스에 해당하는 항목
+      const screenIndex = i - startIndex;
+      const item = this.data[i];
       if (item) {
-        // 스크롤 offset(minIndex)만큼 보정해서 그리기
-
         const categoryPoint = isHorizontal
           ? ysp - (cArea * screenIndex) - cPad
           : xsp + (cArea * screenIndex) + cPad;
@@ -214,11 +213,7 @@ class Bar {
         item.yp = y; // eslint-disable-line
         item.w = w; // eslint-disable-line
         item.h = isHorizontal ? -h : h; // eslint-disable-line
-        item.index = i; // 실제 데이터 인덱스 (스크롤 offset 포함)
-
-        // 검색(hitInfo) 로직은 this.data[0..filteredCount-1] 범위만 검사하므로,
-        // 현재 화면에 그린 항목을 배열 앞쪽으로 매핑해준다.
-        this.data[screenIndex] = item;
+        item.index = i;
       }
     }
   }
@@ -294,13 +289,18 @@ class Bar {
    */
   findGraphData(offset, isHorizontal, dataIndex, useIndicatorOnLabel) {
     if (typeof dataIndex === 'number' && this.show && useIndicatorOnLabel) {
-      const gdata = this.data;
+      const barData = this.data;
       const item = { data: null, hit: false, color: this.color };
 
-      if (gdata[dataIndex]) {
-        item.data = gdata[dataIndex];
-        item.index = dataIndex;
-        item.hit = this.isPointInBar(offset, gdata[dataIndex]);
+      // dataIndex를 현재 화면에 보이는 범위로 clamp하여 stale xp/yp 참조 방지
+      const visStart = this.visibleStartIndex ?? 0;
+      const visEnd = visStart + (this.filteredCount ?? barData.length) - 1;
+      const clampedIndex = Math.max(visStart, Math.min(dataIndex, visEnd));
+
+      if (barData[clampedIndex]) {
+        item.data = barData[clampedIndex];
+        item.index = clampedIndex;
+        item.hit = this.isPointInBar(offset, barData[clampedIndex]);
       }
 
       return item;
@@ -326,10 +326,11 @@ class Bar {
     const [xp, yp] = offset;
     const item = { data: null, hit: false, color: this.color };
     const gdata = this.data;
+    const startIdx = this.visibleStartIndex ?? 0;
     const totalCount = this.filteredCount ?? gdata.length;
 
-    let s = 0;
-    let e = totalCount - 1;
+    let s = startIdx;
+    let e = startIdx + totalCount - 1;
 
     while (s <= e) {
       const m = Math.floor((s + e) / 2);

package/src/components/chart/element/element.tip.js

@@ -339,7 +339,7 @@ const modules = {
         let labelCount = labelAxes.labels.length;
         if (scrollbarOpt?.use) {
           const { range, interval, type } = scrollbarOpt;
-          const [min, max] = range;
+          const [min, max] = range ?? [];
           if (truthyNumber(min) && truthyNumber(max)) {
             labelCount = Math.floor((+max - +min) / interval) + 1;
             startIndex = type === 'step' ? min : labelAxes.labels.findIndex(v => v === +min);

package/src/components/chart/plugins/plugins.scrollbar.js

@@ -29,11 +29,15 @@ const module = {
       scrollbarOpt[key] = merged[key];
     });
 
-    delete scrollbarOpt.savedPosition;
+    if (scrollbarOpt.resetPosition) {
+      scrollbarOpt.range = axisOpt?.[0]?.range?.length ? [...axisOpt?.[0]?.range] : null;
+      this.resetScrollbarSavedPositions(dir);
+    }
 
     if (!scrollbarOpt.isInit) {
       scrollbarOpt.type = axisOpt?.[0]?.type;
       scrollbarOpt.range = axisOpt?.[0]?.range?.length ? [...axisOpt?.[0]?.range] : null;
+      this.resetScrollbarSavedPositions(dir);
 
       this.initScrollbarRange(dir);
       this.createScrollbarLayout(dir);
@@ -104,16 +108,18 @@ const module = {
     const axisOpt = dir === 'x' ? this.axesX : this.axesY;
     const isUpdateAxesRange = !isEqual(newOpt?.[0]?.range, axisOpt?.[0]?.range);
     if (isUpdateAxesRange || updateData) {
-      const isResetPosition = dir === 'x' ? this.options.axesX?.[0]?.scrollbar?.resetPosition : this.options.axesY?.[0]?.scrollbar?.resetPosition;
-      if (isUpdateAxesRange || isResetPosition) {
+      const isResetPosition = dir === 'x'
+        ? this.options.axesX?.[0]?.scrollbar?.resetPosition
+        : this.options.axesY?.[0]?.scrollbar?.resetPosition;
+
+      if (isUpdateAxesRange) {
         this.scrollbar[dir].range = newOpt?.[0]?.range?.length ? [...newOpt?.[0]?.range] : null;
-        // range가 업데이트되면 저장된 스크롤 위치를 초기화
-        delete this.scrollbar[dir].savedPosition;
-      } else if (updateData) {
-        // 데이터가 업데이트되면 저장된 픽셀 위치는 더 이상 유효하지 않으므로 삭제하여
-        // 논리적 범위에 따라 다시 계산하도록 합니다.
-        delete this.scrollbar[dir].savedPosition;
       }
+
+      if (isResetPosition || updateData) {
+        this.resetScrollbarSavedPositions(dir);
+      }
+
       this.initScrollbarRange(dir);
     }
     this.scrollbar[dir].use = !!newOpt?.[0].scrollbar?.use;
@@ -244,16 +250,29 @@ const module = {
     const buttonSize = scrollbarOpt.showButton ? scrollHeight : 0;
     const trackSize = fullSize - (buttonSize * 2);
 
-    // 현재 위치를 보존해야 하는 경우 기존 위치를 저장
-    let savedThumbPosition = null;
-    if (preservePosition && scrollbarOpt.savedPosition !== undefined) {
-      savedThumbPosition = scrollbarOpt.savedPosition;
-    }
+    const thumbSize = this.getScrollbarThumbSize(dir, trackSize);
 
-    const thumbSize = this.getScrollbarThumbSize(dir, trackSize, savedThumbPosition);
+    // 비율로 저장된 위치가 있으면 새 track 크기에 맞게 복원
+    if (preservePosition && scrollbarOpt.savedPositionRatio !== undefined) {
+      const maxPosition = Math.max(0, trackSize - thumbSize.size);
+      if (scrollbarOpt.savedAtStart) {
+        thumbSize.position = 0;
+      } else if (scrollbarOpt.savedAtEnd) {
+        thumbSize.position = maxPosition;
+      } else {
+        thumbSize.position = Math.min(scrollbarOpt.savedPositionRatio * trackSize, maxPosition);
+      }
+    }
 
-    // 새로 계산된 위치를 저장
-    scrollbarOpt.savedPosition = thumbSize.position;
+    // 위치를 비율 및 처음/끝 고정 여부로 저장
+    // currentMaxPosition === 0 (thumbSize >= trackSize) 인 경우 저장하지 않음
+    // → trackSize가 다시 커졌을 때 이전 savedAtEnd/savedAtStart/savedPositionRatio 상태를 유지
+    const currentMaxPosition = Math.max(0, trackSize - thumbSize.size);
+    if (currentMaxPosition > 0) {
+      scrollbarOpt.savedPositionRatio = thumbSize.position / trackSize;
+      scrollbarOpt.savedAtStart = thumbSize.position <= 0;
+      scrollbarOpt.savedAtEnd = thumbSize.position >= currentMaxPosition;
+    }
 
     let scrollbarStyle = 'display: block;';
     let scrollbarTrackStyle;
@@ -328,9 +347,8 @@ const module = {
    * get scrollbar thumb size
    * @param dir axis direction ('x' | 'y')
    * @param trackSize scrollbar track size
-   * @param savedThumbPosition 기존 위치를 보존해야 하는 경우 저장된 위치
    */
-  getScrollbarThumbSize(dir, trackSize, savedThumbPosition) {
+  getScrollbarThumbSize(dir, trackSize) {
     const scrollbarOpt = this.scrollbar[dir];
     const [min, max] = scrollbarOpt.range;
     const axesType = scrollbarOpt.type;
@@ -374,11 +392,6 @@ const module = {
     scrollbarOpt.steps = steps;
     scrollbarOpt.interval = interval;
 
-    // 기존 위치를 보존해야 하는 경우 저장된 위치를 사용
-    if (savedThumbPosition !== null) {
-      thumbPosition = savedThumbPosition;
-    }
-
     return {
       size: thumbSize,
       position: thumbPosition,
@@ -438,16 +451,32 @@ const module = {
       scrollbarOpt.range = [minValue, maxValue];
 
       // 사용자가 스크롤할 때는 저장된 위치를 초기화
-      delete scrollbarOpt.savedPosition;
+      this.resetScrollbarSavedPositions(dir);
 
       this.update({
         updateSeries: false,
         updateSelTip: { update: false, keepDomain: false },
         lightUpdate: minValue > 1,
+        updateByScrollbar: true,
       });
     }
   },
 
+  /**
+   * reset scrollbar saved positions
+   * @param dir axis direction ('x' | 'y')
+   */
+  resetScrollbarSavedPositions(dir) {
+    const scrollbarOpt = this.scrollbar[dir];
+    if (!scrollbarOpt) {
+      return;
+    }
+
+    delete scrollbarOpt.savedPositionRatio;
+    delete scrollbarOpt.savedAtStart;
+    delete scrollbarOpt.savedAtEnd;
+  },
+
   /**
    * create scroll event
    */
@@ -662,11 +691,13 @@ const module = {
     this.scrollbar[dir].range = [movedMin, movedMax];
 
     // 사용자가 드래그로 스크롤할 때는 저장된 위치를 초기화
-    delete this.scrollbar[dir].savedPosition;
+    this.resetScrollbarSavedPositions(dir);
 
     this.update({
       updateSeries: false,
       updateSelTip: { update: false, keepDomain: false },
+      lightUpdate: movedMin > 1,
+      updateByScrollbar: true,
     });
   },