@aiquants/resize-panels 1.8.1 → 2.0.0

package/src/PanelDebugInfo.tsx

@@ -4,145 +4,91 @@
  */
 
 import { type CSSProperties, memo, useMemo } from "react"
+import { resolvePanelBounds } from "./allocateLayout"
 import type { PanelDirection, PanelLayoutData } from "./types"
+import { toRoundedPercentage } from "./utils"
 
 type PanelDebugInfoProps = {
     panel: PanelLayoutData | undefined
-    measuredPixelSize: number
-    measuredPercentageSize: number
     containerAxisSize: number
     direction: PanelDirection
 }
 
 type FormatPanelDebugInfoArgs = {
     panel: PanelLayoutData | undefined
-    measuredPixelSize: number
-    measuredPercentageSize: number
     containerAxisSize: number
     containerLabel: string
 }
 
 type FormattedPanelDebugInfo = {
-    stateValueDisplay: string
-    measuredValueDisplay: string
+    sizeDisplay: string
+    preferenceDisplay: string
+    boundsDisplay: string
     containerDisplay: string
     headlineLabel: string
     titleText: string
 }
 
-export const formatPanelDebugInfo = ({ panel, measuredPixelSize, measuredPercentageSize, containerAxisSize, containerLabel }: FormatPanelDebugInfoArgs): FormattedPanelDebugInfo => {
-    const rawStatePixelSize = panel?.size
-    const statePixelDisplay = typeof rawStatePixelSize === "number" && Number.isFinite(rawStatePixelSize) ? `${rawStatePixelSize.toFixed(3)}px` : "-"
-    const statePercentageDisplay = panel?.percentageSize !== undefined ? `${panel.percentageSize.toFixed(3)}%` : "-"
-    const measuredPixelDisplay = Number.isFinite(measuredPixelSize) ? `${measuredPixelSize.toFixed(3)}px` : "-"
-    const measuredPercentageDisplay = Number.isFinite(measuredPercentageSize) ? `${measuredPercentageSize.toFixed(3)}%` : "-"
-    const containerDisplay = Number.isFinite(containerAxisSize) ? `${containerAxisSize.toFixed(3)}px` : "-"
-    const stateValueDisplay = `${statePixelDisplay} / ${statePercentageDisplay}`
-    const measuredValueDisplay = `${measuredPixelDisplay} / ${measuredPercentageDisplay}`
-    const headlineLabel = panel?.sizeUnit === "pixels" ? "Fixed" : "Flexible"
-    const titleLines = [headlineLabel, `${containerLabel}: ${containerDisplay}`, `size (state): ${stateValueDisplay}`, `size (measured): ${measuredValueDisplay}`]
-    return {
-        stateValueDisplay,
-        measuredValueDisplay,
-        containerDisplay,
-        headlineLabel,
-        titleText: titleLines.join("\n"),
+/**
+ * Format one panel's allocation for the debug overlay.
+ * デバッグ表示用に 1 枚のパネルの配分結果を整形する処理。
+ *
+ * @param args - Panel, container length and the axis label / パネル・コンテナ長・軸ラベル
+ * @returns Display strings for the overlay / オーバーレイ表示用の文字列群
+ */
+export const formatPanelDebugInfo = ({ panel, containerAxisSize, containerLabel }: FormatPanelDebugInfoArgs): FormattedPanelDebugInfo => {
+    if (!panel) {
+        return { sizeDisplay: "-", preferenceDisplay: "-", boundsDisplay: "-", containerDisplay: "-", headlineLabel: "Unregistered", titleText: "Unregistered" }
     }
+
+    const isPixel = panel.sizeUnit === "pixels"
+    const sizeDisplay = `${panel.size.toFixed(3)}px / ${toRoundedPercentage(panel.size, containerAxisSize).toFixed(3)}%`
+    const preferenceDisplay = isPixel ? `${panel.preferredPixelSize.toFixed(3)}px` : `${panel.preferredPercentageSize.toFixed(3)}%`
+    const bounds = resolvePanelBounds(panel, containerAxisSize)
+    const boundsDisplay = `${bounds.min.toFixed(1)} - ${bounds.max.toFixed(1)}px`
+    const containerDisplay = Number.isFinite(containerAxisSize) ? `${containerAxisSize.toFixed(3)}px` : "-"
+    const headlineLabel = isPixel ? "Fixed" : "Flexible"
+    const titleText = [headlineLabel, `${containerLabel}: ${containerDisplay}`, `size: ${sizeDisplay}`, `preference: ${preferenceDisplay}`, `bounds: ${boundsDisplay}`].join("\n")
+
+    return { sizeDisplay, preferenceDisplay, boundsDisplay, containerDisplay, headlineLabel, titleText }
 }
 
-export const PanelDebugInfo = memo(({ panel, measuredPixelSize, measuredPercentageSize, containerAxisSize, direction }: PanelDebugInfoProps) => {
+/**
+ * Render the per-panel debug badge inside a panel.
+ * パネル内にパネル単位のデバッグバッジを描画するコンポーネント。
+ */
+export const PanelDebugInfo = memo(({ panel, containerAxisSize, direction }: PanelDebugInfoProps) => {
     const containerLabel = direction === "horizontal" ? "container width" : "container height"
-    const { stateValueDisplay, measuredValueDisplay, containerDisplay, headlineLabel, titleText } = useMemo(
-        () =>
-            formatPanelDebugInfo({
-                panel,
-                measuredPixelSize,
-                measuredPercentageSize,
-                containerAxisSize,
-                containerLabel,
-            }),
-        [panel, measuredPixelSize, measuredPercentageSize, containerAxisSize, containerLabel],
-    )
+    const { sizeDisplay, preferenceDisplay, boundsDisplay, containerDisplay, headlineLabel, titleText } = useMemo(() => formatPanelDebugInfo({ panel, containerAxisSize, containerLabel }), [panel, containerAxisSize, containerLabel])
 
-    const containerStyle: CSSProperties = {
+    const badgeStyle: CSSProperties = {
         position: "absolute",
-        top: "2px",
-        right: "4px",
-        backgroundColor: "rgba(30, 41, 59, 0.6)",
-        color: "#fff",
-        padding: "4px 8px",
-        borderRadius: "6px",
-        fontSize: "11px",
-        fontFamily: "monospace",
-        pointerEvents: "auto",
-        zIndex: 10,
-        boxShadow: "0 2px 4px rgba(0,0,0,0.3)",
+        top: 2,
+        left: 2,
+        zIndex: 30,
+        pointerEvents: "none",
+        maxWidth: "calc(100% - 4px)",
+        padding: "2px 4px",
+        borderRadius: 4,
         border: "1px solid rgba(255,255,255,0.1)",
-        maxWidth: "calc(100% - 12px)",
-        minWidth: "60px",
-        width: "fit-content",
-        overflow: "hidden",
-    }
-
-    const wrapperStyle: CSSProperties = {
-        display: "flex",
-        flexDirection: "column",
-        gap: "1px",
-        minWidth: "0",
-        width: "100%",
-    }
-
-    const headlineStyle: CSSProperties = {
-        display: "flex",
-        justifyContent: "flex-start",
-        alignItems: "center",
-        gap: "6px",
-        fontSize: "10px",
-        color: "#ccc",
-        whiteSpace: "nowrap",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        minWidth: "0",
-        width: "100%",
-    }
-
-    const debugLineStyle: CSSProperties = {
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-        gap: "6px",
-        whiteSpace: "nowrap",
+        backgroundColor: "rgba(15, 23, 42, 0.78)",
+        color: "#e2e8f0",
+        fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+        fontSize: 10,
+        lineHeight: 1.35,
+        whiteSpace: "pre",
         overflow: "hidden",
         textOverflow: "ellipsis",
-        minWidth: "0",
-        width: "100%",
-    }
-
-    const debugValueStyle: CSSProperties = {
-        marginLeft: "auto",
-        fontVariantNumeric: "tabular-nums",
-        whiteSpace: "nowrap",
     }
 
     return (
-        <div style={containerStyle} title={titleText}>
-            <div style={wrapperStyle}>
-                <div style={headlineStyle}>
-                    <span>{headlineLabel}</span>
-                </div>
-                <div style={debugLineStyle}>
-                    <span>{containerLabel}</span>
-                    <span style={debugValueStyle}>{containerDisplay}</span>
-                </div>
-                <div style={debugLineStyle}>
-                    <span>size (state)</span>
-                    <span style={debugValueStyle}>{stateValueDisplay}</span>
-                </div>
-                <div style={debugLineStyle}>
-                    <span>size (measured)</span>
-                    <span style={debugValueStyle}>{measuredValueDisplay}</span>
-                </div>
+        <div style={badgeStyle} title={titleText} data-panel-debug-info="">
+            <div>
+                {headlineLabel} · {containerLabel}: {containerDisplay}
             </div>
+            <div>size: {sizeDisplay}</div>
+            <div>preference: {preferenceDisplay}</div>
+            <div>bounds: {boundsDisplay}</div>
         </div>
     )
 })

package/src/PanelGroup.tsx

@@ -3,11 +3,12 @@
  * カスタムリサイズ可能パネルのための PanelGroup コンポーネント
  */
 
-import { type CSSProperties, lazy, Suspense, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"
+import { lazy, Suspense, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"
 import { twMerge } from "tailwind-merge"
 import { PanelGroupContext } from "./context"
+import type { DebugPanelSnapshot } from "./debugOverlayStore"
 import { useResizablePanels } from "./hooks"
-import type { PanelGroupProps } from "./types"
+import type { PanelGroupProps, PanelLayoutData } from "./types"
 import { getContainerSize } from "./utils"
 
 // デバッグオーバーレイ (UI とストア) は dynamic import で遅延読み込みする。
@@ -16,6 +17,10 @@ const LazyDebugOverlayGate = lazy(() => import("./GlobalDebugOverlay").then((mod
 
 type DebugOverlayStoreModule = typeof import("./debugOverlayStore")
 
+/** Stable empty collections used while the debug overlay is off. デバッグ表示が無効な間に使う不変の空コレクション。 */
+const EMPTY_PANELS: ReadonlyArray<PanelLayoutData> = []
+const EMPTY_MEASUREMENTS: Record<string, never> = {}
+
 let debugGroupIdCounter = 0
 
 /**
@@ -29,7 +34,6 @@ const generateDebugGroupId = () => {
 
 type ResizablePanelsContextValue = ReturnType<typeof useResizablePanels>["contextValue"]
 type LayoutConstraintViolation = NonNullable<ResizablePanelsContextValue["layoutConstraintViolation"]>
-type DebugPanel = ResizablePanelsContextValue["panels"][number]
 type DebugPanelMeasurementMap = ResizablePanelsContextValue["panelMeasurements"]
 
 /**
@@ -39,9 +43,7 @@ type DebugPanelMeasurementMap = ResizablePanelsContextValue["panelMeasurements"]
 const buildConstraintCopy = (violation: LayoutConstraintViolation) => {
     const isMinimum = violation.reason === "minimum-exceeded"
     const summary = isMinimum ? "Layout unavailable: minimum panel sizes exceed the container." : "Layout unavailable: panels cannot fill the container with their maximum sizes."
-    const detail = isMinimum
-        ? `Min required: ${Math.ceil(violation.totalMinimumSize ?? 0)}px | Available: ${Math.floor(violation.availableContainerSize)}px`
-        : `Max total: ${Math.floor(violation.totalMaximumSize ?? 0)}px | Needed: ${Math.floor(violation.availableContainerSize)}px`
+    const detail = isMinimum ? `Min required: ${Math.ceil(violation.totalMinimumSize)}px | Available: ${Math.floor(violation.availableContainerSize)}px` : `Max total: ${Math.floor(violation.totalMaximumSize)}px | Needed: ${Math.floor(violation.availableContainerSize)}px`
     return { summary, detail }
 }
 
@@ -49,25 +51,14 @@ const buildConstraintCopy = (violation: LayoutConstraintViolation) => {
  * Synchronizes measured panel dimensions into overlay panel descriptors.
  * 測定済みパネル寸法をオーバーレイ用パネル情報へ同期。
  */
-const mergePanelMeasurements = (panels: ReadonlyArray<DebugPanel>, measurementMap: DebugPanelMeasurementMap): DebugPanel[] => {
-    let changed = false
-    const nextPanels = panels.map((panel) => {
+const mergePanelMeasurements = (panels: ReadonlyArray<PanelLayoutData>, measurementMap: DebugPanelMeasurementMap): DebugPanelSnapshot[] =>
+    panels.map((panel) => {
         const measurement = measurementMap[panel.id]
         if (!measurement) {
             return panel
         }
-        if (panel.measuredPixelSize === measurement.pixelSize && panel.measuredPercentageSize === measurement.percentageSize) {
-            return panel
-        }
-        changed = true
-        return {
-            ...panel,
-            measuredPixelSize: measurement.pixelSize,
-            measuredPercentageSize: measurement.percentageSize,
-        }
+        return { ...panel, measuredPixelSize: measurement.pixelSize, measuredPercentageSize: measurement.percentageSize }
     })
-    return changed ? nextPanels : (panels as DebugPanel[])
-}
 
 /**
  * Measures overlay container dimensions with graceful fallbacks.
@@ -77,8 +68,8 @@ const measureDebugOverlayContainerSize = (element: HTMLElement, fallbackWidth?:
     const horizontal = getContainerSize(element, "horizontal")
     const vertical = getContainerSize(element, "vertical")
     const rect = element.getBoundingClientRect()
-    const width = horizontal.inner > 0 ? horizontal.inner : (fallbackWidth ?? rect.width)
-    const height = vertical.inner > 0 ? vertical.inner : (fallbackHeight ?? rect.height)
+    const width = horizontal.content > 0 ? horizontal.content : (fallbackWidth ?? rect.width)
+    const height = vertical.content > 0 ? vertical.content : (fallbackHeight ?? rect.height)
     return { width, height }
 }
 
@@ -87,7 +78,7 @@ const measureDebugOverlayContainerSize = (element: HTMLElement, fallbackWidth?:
  * 連動するパネルのためのレイアウトコンテキストとコンテナを提供するコンポーネント。
  */
 export const PanelGroup = (props: PanelGroupProps) => {
-    const { id, className, style, children, direction } = props
+    const { id, className, style, children, direction, onLayout, autoSaveId, showDebugInfo, ...elementProps } = props
     const { groupRef, contextValue, groupStyle } = useResizablePanels(props)
 
     const [debugOverlayContainerSize, setDebugOverlayContainerSize] = useState({ width: 0, height: 0 })
@@ -109,13 +100,18 @@ export const PanelGroup = (props: PanelGroupProps) => {
         )
     }, [constraintViolation])
 
-    const debugGroupIdRef = useRef(id ?? generateDebugGroupId())
+    // useRef の引数は毎レンダー評価されるため、そこで採番するとレンダーが純粋でなくなる
+    const debugGroupIdRef = useRef<string | null>(null)
+    if (debugGroupIdRef.current === null) {
+        debugGroupIdRef.current = id ?? generateDebugGroupId()
+    }
     const debugGroupId = debugGroupIdRef.current
     const debugDisplayName = id ?? debugGroupId
 
     const shouldShowDebugOverlay = contextValue.showDebugInfo && contextValue.panels.length > 0
-    const debugOverlayPanels = shouldShowDebugOverlay ? contextValue.panels : []
-    const debugOverlayMeasurementMap = shouldShowDebugOverlay ? contextValue.panelMeasurements : {}
+    // 無効時に空のリテラルを作ると参照が毎レンダー変わり、下流の useMemo が無駄に再計算される
+    const debugOverlayPanels = shouldShowDebugOverlay ? contextValue.panels : EMPTY_PANELS
+    const debugOverlayMeasurementMap = shouldShowDebugOverlay ? contextValue.panelMeasurements : EMPTY_MEASUREMENTS
     const debugOverlayHandles = useMemo(() => {
         if (!shouldShowDebugOverlay) {
             return []
@@ -126,9 +122,8 @@ export const PanelGroup = (props: PanelGroupProps) => {
         }
         return handles.slice().sort((a, b) => a.id.localeCompare(b.id))
     }, [contextValue.handleMeasurements, shouldShowDebugOverlay])
-    const containerSize = contextValue.containerSize
-    const debugOverlayContainerWidth = debugOverlayContainerSize.width > 0 ? debugOverlayContainerSize.width : containerSize.width
-    const debugOverlayContainerHeight = debugOverlayContainerSize.height > 0 ? debugOverlayContainerSize.height : containerSize.height
+    const debugOverlayContainerWidth = debugOverlayContainerSize.width
+    const debugOverlayContainerHeight = debugOverlayContainerSize.height
 
     useLayoutEffect(() => {
         // shouldShowDebugOverlay と groupRef に応じてデバッグオーバーレイ用コンテナ寸法を監視
@@ -217,20 +212,9 @@ export const PanelGroup = (props: PanelGroupProps) => {
         }
     }, [shouldShowDebugOverlay, debugGroupId, debugDisplayName, direction, debugOverlayContainerWidth, debugOverlayContainerHeight, debugOverlayPanelsWithMeasurements, debugOverlayHandles])
 
-    const mergedStyle = useMemo(() => {
-        const baseStyle: CSSProperties = {
-            ...groupStyle,
-            ...style,
-        }
-        if (!baseStyle.position) {
-            baseStyle.position = "relative"
-        }
-        return baseStyle
-    }, [groupStyle, style])
-
     return (
         <PanelGroupContext.Provider value={contextValue}>
-            <div ref={groupRef} className={twMerge("panel-group", direction === "horizontal" ? "flex-row" : "flex-col", className)} style={mergedStyle} data-panel-group-id={id} data-panel-group-direction={direction}>
+            <div {...elementProps} ref={groupRef} className={twMerge("panel-group", direction === "horizontal" ? "flex-row" : "flex-col", className)} style={groupStyle} data-panel-group-id={id} data-panel-group-direction={direction}>
                 {children}
                 {shouldRenderPlaceholder && placeholderInner ? (
                     <div
@@ -238,7 +222,8 @@ export const PanelGroup = (props: PanelGroupProps) => {
                         style={{
                             position: "absolute",
                             inset: 0,
-                            zIndex: 40,
+                            // パネル内部要素 (VirtualScroll のスクロールバー z-50 等) を完全に隠蔽するため zIndex を 60 に設定
+                            zIndex: 60,
                             display: "flex",
                             flexDirection: "column",
                             alignItems: "center",