@aiquants/resize-panels 2.0.0 → 2.0.1

package/src/PanelGroup.tsx

@@ -1,245 +0,0 @@
-/**
- * @file PanelGroup component for custom resizable panels
- * カスタムリサイズ可能パネルのための PanelGroup コンポーネント
- */
-
-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, PanelLayoutData } from "./types"
-import { getContainerSize } from "./utils"
-
-// デバッグオーバーレイ (UI とストア) は dynamic import で遅延読み込みする。
-// showDebugInfo を使わないアプリのバンドルへオーバーレイ一式を含めず、ストア購読も発生させないための分離
-const LazyDebugOverlayGate = lazy(() => import("./GlobalDebugOverlay").then((module) => ({ default: module.GlobalDebugOverlayGate })))
-
-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
-
-/**
- * Generate unique debug group identifier for panel groups without explicit IDs.
- * 明示的な ID を持たないパネルグループ用の一意なデバッググループ識別子を生成。
- */
-const generateDebugGroupId = () => {
-    debugGroupIdCounter += 1
-    return `panel-group-${debugGroupIdCounter}`
-}
-
-type ResizablePanelsContextValue = ReturnType<typeof useResizablePanels>["contextValue"]
-type LayoutConstraintViolation = NonNullable<ResizablePanelsContextValue["layoutConstraintViolation"]>
-type DebugPanelMeasurementMap = ResizablePanelsContextValue["panelMeasurements"]
-
-/**
- * Builds summary and detail labels for layout constraint placeholders.
- * レイアウト制約プレースホルダー用のサマリーと詳細ラベルを生成。
- */
-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)}px | Available: ${Math.floor(violation.availableContainerSize)}px` : `Max total: ${Math.floor(violation.totalMaximumSize)}px | Needed: ${Math.floor(violation.availableContainerSize)}px`
-    return { summary, detail }
-}
-
-/**
- * Synchronizes measured panel dimensions into overlay panel descriptors.
- * 測定済みパネル寸法をオーバーレイ用パネル情報へ同期。
- */
-const mergePanelMeasurements = (panels: ReadonlyArray<PanelLayoutData>, measurementMap: DebugPanelMeasurementMap): DebugPanelSnapshot[] =>
-    panels.map((panel) => {
-        const measurement = measurementMap[panel.id]
-        if (!measurement) {
-            return panel
-        }
-        return { ...panel, measuredPixelSize: measurement.pixelSize, measuredPercentageSize: measurement.percentageSize }
-    })
-
-/**
- * Measures overlay container dimensions with graceful fallbacks.
- * フォールバックを考慮しつつオーバーレイ用コンテナ寸法を計測。
- */
-const measureDebugOverlayContainerSize = (element: HTMLElement, fallbackWidth?: number, fallbackHeight?: number) => {
-    const horizontal = getContainerSize(element, "horizontal")
-    const vertical = getContainerSize(element, "vertical")
-    const rect = element.getBoundingClientRect()
-    const width = horizontal.content > 0 ? horizontal.content : (fallbackWidth ?? rect.width)
-    const height = vertical.content > 0 ? vertical.content : (fallbackHeight ?? rect.height)
-    return { width, height }
-}
-
-/**
- * Provide layout context and container for coordinated panels.
- * 連動するパネルのためのレイアウトコンテキストとコンテナを提供するコンポーネント。
- */
-export const PanelGroup = (props: PanelGroupProps) => {
-    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 })
-
-    const constraintViolation = contextValue.layoutConstraintViolation
-    const shouldRenderPlaceholder = Boolean(constraintViolation)
-    const placeholderInner = useMemo(() => {
-        if (!constraintViolation) {
-            return null
-        }
-        const { summary, detail } = buildConstraintCopy(constraintViolation)
-        return (
-            <div
-                className="flex w-full flex-1 flex-col items-center justify-center gap-2 rounded-lg border border-slate-300 border-dashed bg-slate-100/70 px-6 py-8 text-center text-slate-600 text-sm dark:border-slate-600 dark:bg-slate-800/50 dark:text-slate-200"
-                data-panel-group-placeholder="constraint-violation">
-                <span>{summary}</span>
-                <span className="text-slate-500 text-xs dark:text-slate-400">{detail}</span>
-            </div>
-        )
-    }, [constraintViolation])
-
-    // 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
-    // 無効時に空のリテラルを作ると参照が毎レンダー変わり、下流の useMemo が無駄に再計算される
-    const debugOverlayPanels = shouldShowDebugOverlay ? contextValue.panels : EMPTY_PANELS
-    const debugOverlayMeasurementMap = shouldShowDebugOverlay ? contextValue.panelMeasurements : EMPTY_MEASUREMENTS
-    const debugOverlayHandles = useMemo(() => {
-        if (!shouldShowDebugOverlay) {
-            return []
-        }
-        const handles = Object.values(contextValue.handleMeasurements)
-        if (handles.length <= 1) {
-            return handles
-        }
-        return handles.slice().sort((a, b) => a.id.localeCompare(b.id))
-    }, [contextValue.handleMeasurements, shouldShowDebugOverlay])
-    const debugOverlayContainerWidth = debugOverlayContainerSize.width
-    const debugOverlayContainerHeight = debugOverlayContainerSize.height
-
-    useLayoutEffect(() => {
-        // shouldShowDebugOverlay と groupRef に応じてデバッグオーバーレイ用コンテナ寸法を監視
-        if (!shouldShowDebugOverlay) {
-            setDebugOverlayContainerSize({ width: 0, height: 0 })
-            return
-        }
-        if (typeof window === "undefined" || typeof ResizeObserver === "undefined") {
-            return
-        }
-        const element = groupRef.current
-        if (!element) {
-            return
-        }
-        const updateSize = (nextSize: { width: number; height: number }) => {
-            setDebugOverlayContainerSize((previous) => (previous.width === nextSize.width && previous.height === nextSize.height ? previous : nextSize))
-        }
-        const observer = new ResizeObserver((entries) => {
-            for (const entry of entries) {
-                if (entry.target !== element) {
-                    continue
-                }
-                const nextSize = measureDebugOverlayContainerSize(element, entry.contentRect.width, entry.contentRect.height)
-                updateSize(nextSize)
-            }
-        })
-        observer.observe(element)
-        updateSize(measureDebugOverlayContainerSize(element))
-        return () => {
-            observer.disconnect()
-        }
-    }, [groupRef, shouldShowDebugOverlay])
-
-    const debugOverlayPanelsWithMeasurements = useMemo(() => mergePanelMeasurements(debugOverlayPanels, debugOverlayMeasurementMap), [debugOverlayPanels, debugOverlayMeasurementMap])
-
-    useEffect(() => {
-        // shouldShowDebugOverlay と debugGroupId に応じてデバッグオーバーレイ有効状態を同期
-        // ストアは遅延読み込みのため、有効化されるまで import しない (未読込なら解除処理も不要)
-        if (!shouldShowDebugOverlay) {
-            return
-        }
-
-        let cancelled = false
-        let loadedStore: DebugOverlayStoreModule | null = null
-        import("./debugOverlayStore").then((storeModule) => {
-            if (cancelled) {
-                return
-            }
-            loadedStore = storeModule
-            storeModule.enableDebugOverlayGroup(debugGroupId)
-        })
-
-        return () => {
-            cancelled = true
-            if (loadedStore) {
-                loadedStore.disableDebugOverlayGroup(debugGroupId)
-                loadedStore.removeDebugOverlayGroup(debugGroupId)
-            }
-        }
-    }, [shouldShowDebugOverlay, debugGroupId])
-
-    useEffect(() => {
-        // 依存配列の変化ごとに最新のオーバーレイ集計をストアへ送出
-        if (!shouldShowDebugOverlay) {
-            return
-        }
-
-        let cancelled = false
-        import("./debugOverlayStore").then((storeModule) => {
-            if (cancelled) {
-                return
-            }
-            storeModule.updateDebugOverlayGroup(debugGroupId, {
-                displayName: debugDisplayName,
-                direction,
-                containerSize: {
-                    width: debugOverlayContainerWidth,
-                    height: debugOverlayContainerHeight,
-                },
-                panels: debugOverlayPanelsWithMeasurements,
-                handles: debugOverlayHandles,
-            })
-        })
-        return () => {
-            cancelled = true
-        }
-    }, [shouldShowDebugOverlay, debugGroupId, debugDisplayName, direction, debugOverlayContainerWidth, debugOverlayContainerHeight, debugOverlayPanelsWithMeasurements, debugOverlayHandles])
-
-    return (
-        <PanelGroupContext.Provider value={contextValue}>
-            <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
-                        className="pointer-events-auto"
-                        style={{
-                            position: "absolute",
-                            inset: 0,
-                            // パネル内部要素 (VirtualScroll のスクロールバー z-50 等) を完全に隠蔽するため zIndex を 60 に設定
-                            zIndex: 60,
-                            display: "flex",
-                            flexDirection: "column",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            backgroundColor: "rgba(248, 250, 252, 0.82)",
-                            backdropFilter: "blur(2px)",
-                        }}>
-                        {placeholderInner}
-                    </div>
-                ) : null}
-            </div>
-            {shouldShowDebugOverlay && (
-                <Suspense fallback={null}>
-                    <LazyDebugOverlayGate groupId={debugGroupId} />
-                </Suspense>
-            )}
-        </PanelGroupContext.Provider>
-    )
-}