@aiquants/virtualscroll 3.1.0 → 3.1.1

package/dist/utils.d.cts

@@ -12,3 +12,18 @@
  * @returns The clamped value. / クランプされた値。
  */
 export declare const minmax: (value: number, min: number, max: number) => number;
+/**
+ * Computes an element's CSS transform scale along one axis (visual px / layout px).
+ *
+ * 要素の指定軸方向 CSS transform スケール (視覚px / レイアウトpx) を算出。
+ * 祖先に transform: scale(...) があると client 座標 (視覚px) がレイアウトpx とズレるため、
+ * その比率でドラッグ量・クリック座標を補正する。分母には整数丸めされる offsetWidth/offsetHeight
+ * ではなく、transform の影響を受けず小数精度を持つ getComputedStyle のレイアウト寸法
+ * (content + padding + border) を優先して使い、transform なしなら厳密に 1 を返す。
+ * 取得不能時 (jsdom 等) は offset 寸法へフォールバックし、それも 0 なら 1 を返す。
+ *
+ * @param element The element to measure. / 計測対象要素。
+ * @param axis The axis to measure along ("x" = width, "y" = height). / 計測軸。
+ * @returns The visual/layout scale ratio (1 when unmeasurable). / 視覚/レイアウト比 (計測不能時 1)。
+ */
+export declare const getAxisScale: (element: HTMLElement, axis: "x" | "y") => number;

package/dist/utils.d.ts

@@ -12,4 +12,19 @@
  * @returns The clamped value. / クランプされた値。
  */
 export declare const minmax: (value: number, min: number, max: number) => number;
+/**
+ * Computes an element's CSS transform scale along one axis (visual px / layout px).
+ *
+ * 要素の指定軸方向 CSS transform スケール (視覚px / レイアウトpx) を算出。
+ * 祖先に transform: scale(...) があると client 座標 (視覚px) がレイアウトpx とズレるため、
+ * その比率でドラッグ量・クリック座標を補正する。分母には整数丸めされる offsetWidth/offsetHeight
+ * ではなく、transform の影響を受けず小数精度を持つ getComputedStyle のレイアウト寸法
+ * (content + padding + border) を優先して使い、transform なしなら厳密に 1 を返す。
+ * 取得不能時 (jsdom 等) は offset 寸法へフォールバックし、それも 0 なら 1 を返す。
+ *
+ * @param element The element to measure. / 計測対象要素。
+ * @param axis The axis to measure along ("x" = width, "y" = height). / 計測軸。
+ * @returns The visual/layout scale ratio (1 when unmeasurable). / 視覚/レイアウト比 (計測不能時 1)。
+ */
+export declare const getAxisScale: (element: HTMLElement, axis: "x" | "y") => number;
 //# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,MAAM,GAAI,OAAO,MAAM,EAAE,KAAK,MAAM,EAAE,KAAK,MAAM,KAAG,MAEhE,CAAA"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,MAAM,GAAI,OAAO,MAAM,EAAE,KAAK,MAAM,EAAE,KAAK,MAAM,KAAG,MAEhE,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,YAAY,GAAI,SAAS,WAAW,EAAE,MAAM,GAAG,GAAG,GAAG,KAAG,MA0BpE,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiquants/virtualscroll",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "High-performance virtual scrolling component for React with variable item heights",
   "sideEffects": [
     "**/*.css"

package/src/ScrollBar.tsx

@@ -8,7 +8,7 @@ import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } fr
 import { twMerge } from "tailwind-merge"
 import { Logger } from "./logger.ts"
 import { TapScrollCircle, type TapScrollCircleDragState, type TapScrollCircleHandle, type TapScrollCircleRenderProps } from "./TapScrollCircle.tsx"
-import { minmax } from "./utils.ts"
+import { getAxisScale, minmax } from "./utils.ts"
 
 /**
  * Configuration for scrollbar orientation (vertical or horizontal).
@@ -1055,35 +1055,8 @@ export const ScrollBar = ({
      * (content + padding + border) を優先して使い、transform なしなら厳密に 1 を返す。
      * 取得不能時 (jsdom 等) は offset 寸法へフォールバックし、それも 0 なら 1 を返す。
      */
-    const getMainAxisScale = useCallback(
-        (element: HTMLElement) => {
-            const rect = element.getBoundingClientRect()
-            const visualSize = horizontal ? rect.width : rect.height
-            // computed style の値 (px 文字列) を数値化する。解釈不能なら 0 とみなす。
-            const parseSize = (value: string) => {
-                const parsed = Number.parseFloat(value)
-                return Number.isFinite(parsed) ? parsed : 0
-            }
-            const computed = window.getComputedStyle(element)
-            const contentSize = parseSize(horizontal ? computed.width : computed.height)
-            // rect (border-box) と同系になるよう content + padding + border を合成する。
-            const computedLayoutSize =
-                contentSize > 0
-                    ? contentSize +
-                      parseSize(horizontal ? computed.paddingLeft : computed.paddingTop) +
-                      parseSize(horizontal ? computed.paddingRight : computed.paddingBottom) +
-                      parseSize(horizontal ? computed.borderLeftWidth : computed.borderTopWidth) +
-                      parseSize(horizontal ? computed.borderRightWidth : computed.borderBottomWidth)
-                    : 0
-            // computed が取れない環境 (jsdom 等) では従来の offset 寸法へフォールバックする。
-            const layoutSize = computedLayoutSize > 0 ? computedLayoutSize : horizontal ? element.offsetWidth : element.offsetHeight
-            if (layoutSize <= 0 || visualSize <= 0) {
-                return 1
-            }
-            return visualSize / layoutSize
-        },
-        [horizontal],
-    )
+    // 本体は共有ヘルパ getAxisScale (utils.ts — ScrollPane のポインタパンと同一 SSOT)
+    const getMainAxisScale = useCallback((element: HTMLElement) => getAxisScale(element, horizontal ? "x" : "y"), [horizontal])
 
     /**
      * Pointer move handler for thumb dragging.

package/src/ScrollPane.tsx

@@ -2,7 +2,7 @@ import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useLayo
 import { twMerge } from "tailwind-merge"
 import { Logger } from "./logger.ts"
 import { ScrollBar, type ScrollBarTapCircleOptions, type ScrollBarThumbOverlayRenderProps, TAP_SCROLL_CANCEL_EVENT } from "./ScrollBar.tsx"
-import { minmax } from "./utils.ts"
+import { getAxisScale, minmax } from "./utils.ts"
 import { resolveWheelAxes } from "./wheelAxes.ts"
 import { markWheelConsumed, wasWheelConsumed } from "./wheelConsumption.ts"
 
@@ -231,6 +231,8 @@ type DragState = {
     shouldCancelNextClick: boolean
     clickResetTimer: number | null
     velocitySamples: DragSample[]
+    /** press 時に採取した縦軸の視覚/レイアウト比 (祖先 transform scale — 補正の分母)。 */
+    scale: number
 }
 
 /**
@@ -989,6 +991,7 @@ export const ScrollPane = forwardRef<ScrollPaneHandle, ScrollPaneProps>(
             shouldCancelNextClick: false,
             clickResetTimer: null,
             velocitySamples: [],
+            scale: 1,
         })
 
         const enablePointerDragRef = useRef(enablePointerDrag)
@@ -1084,6 +1087,7 @@ export const ScrollPane = forwardRef<ScrollPaneHandle, ScrollPaneProps>(
             state.isDragging = false
             state.shouldCancelNextClick = shouldKeepClickSuppression
             state.velocitySamples = []
+            state.scale = 1
             // 状態を確定させてから解放する (同期 lostpointercapture に引き継ぎを壊させない)
             if (element?.hasPointerCapture(releasedPointerId)) {
                 element.releasePointerCapture(releasedPointerId)
@@ -1107,6 +1111,7 @@ export const ScrollPane = forwardRef<ScrollPaneHandle, ScrollPaneProps>(
                 state.startScroll = 0
                 state.isDragging = false
                 state.velocitySamples = []
+                state.scale = 1
             }
 
             const clearClickTimer = () => {
@@ -1239,7 +1244,9 @@ export const ScrollPane = forwardRef<ScrollPaneHandle, ScrollPaneProps>(
 
                 pushVelocitySample(event.clientY)
 
-                const deltaY = event.clientY - state.startClientY
+                // ÷scale: 視覚 px の指移動をレイアウト (論理) px へ (発動閾値 6px は指の物理
+                // 移動量の判別なので視覚 px のまま — 意図的非対称)
+                const deltaY = (event.clientY - state.startClientY) / (state.scale || 1)
                 const nextPosition = state.startScroll - deltaY
                 scrollToRef.current(nextPosition)
 
@@ -1309,7 +1316,8 @@ export const ScrollPane = forwardRef<ScrollPaneHandle, ScrollPaneProps>(
                     if (lastSample && firstSample && lastSample.time !== firstSample.time) {
                         const deltaClientY = lastSample.clientY - firstSample.clientY
                         const deltaTime = lastSample.time - firstSample.time
-                        inertiaVelocity = -(deltaClientY / deltaTime)
+                        // ÷scale: フリック速度も視覚 px/ms のままだと慣性走行距離が z 倍に歪む
+                        inertiaVelocity = -(deltaClientY / deltaTime) / (state.scale || 1)
                     }
                 }
 
@@ -1405,6 +1413,11 @@ export const ScrollPane = forwardRef<ScrollPaneHandle, ScrollPaneProps>(
                 state.pointerType = event.pointerType
                 state.startClientY = event.clientY
                 state.startScroll = scrollPositionRef.current
+                // 祖先 transform scale の押下時採取 (ScrollBar サム / トラックと同じ press キャッシュ
+                // 規約): 視覚 px の指移動をレイアウト px へ換算しないと scale z 下でコンテンツが
+                // 指速の z 倍で動く。move 毎の gBCR + getComputedStyle は 60-120Hz 熱経路の
+                // 強制レイアウトになるため押下時 1 回に固定する
+                state.scale = getAxisScale(element, "y")
                 state.isDragging = false
                 state.shouldCancelNextClick = false
                 state.velocitySamples = []

package/src/utils.ts

@@ -14,3 +14,45 @@
 export const minmax = (value: number, min: number, max: number): number => {
     return Math.max(min, Math.min(max, value))
 }
+
+/**
+ * Computes an element's CSS transform scale along one axis (visual px / layout px).
+ *
+ * 要素の指定軸方向 CSS transform スケール (視覚px / レイアウトpx) を算出。
+ * 祖先に transform: scale(...) があると client 座標 (視覚px) がレイアウトpx とズレるため、
+ * その比率でドラッグ量・クリック座標を補正する。分母には整数丸めされる offsetWidth/offsetHeight
+ * ではなく、transform の影響を受けず小数精度を持つ getComputedStyle のレイアウト寸法
+ * (content + padding + border) を優先して使い、transform なしなら厳密に 1 を返す。
+ * 取得不能時 (jsdom 等) は offset 寸法へフォールバックし、それも 0 なら 1 を返す。
+ *
+ * @param element The element to measure. / 計測対象要素。
+ * @param axis The axis to measure along ("x" = width, "y" = height). / 計測軸。
+ * @returns The visual/layout scale ratio (1 when unmeasurable). / 視覚/レイアウト比 (計測不能時 1)。
+ */
+export const getAxisScale = (element: HTMLElement, axis: "x" | "y"): number => {
+    const isX = axis === "x"
+    const rect = element.getBoundingClientRect()
+    const visualSize = isX ? rect.width : rect.height
+    // computed style の値 (px 文字列) を数値化する。解釈不能なら 0 とみなす。
+    const parseSize = (value: string) => {
+        const parsed = Number.parseFloat(value)
+        return Number.isFinite(parsed) ? parsed : 0
+    }
+    const computed = window.getComputedStyle(element)
+    const contentSize = parseSize(isX ? computed.width : computed.height)
+    // rect (border-box) と同系になるよう content + padding + border を合成する。
+    const computedLayoutSize =
+        contentSize > 0
+            ? contentSize +
+              parseSize(isX ? computed.paddingLeft : computed.paddingTop) +
+              parseSize(isX ? computed.paddingRight : computed.paddingBottom) +
+              parseSize(isX ? computed.borderLeftWidth : computed.borderTopWidth) +
+              parseSize(isX ? computed.borderRightWidth : computed.borderBottomWidth)
+            : 0
+    // computed が取れない環境 (jsdom 等) では従来の offset 寸法へフォールバックする。
+    const layoutSize = computedLayoutSize > 0 ? computedLayoutSize : isX ? element.offsetWidth : element.offsetHeight
+    if (layoutSize <= 0 || visualSize <= 0) {
+        return 1
+    }
+    return visualSize / layoutSize
+}