@aiquants/resize-panels 1.7.2 → 1.8.0

package/src/context.ts

@@ -0,0 +1,25 @@
+/**
+ * @file PanelGroup context for managing panel state
+ * パネル状態を管理するための PanelGroup コンテキスト
+ */
+
+import { createContext, useContext } from "react"
+import type { PanelGroupContextValue } from "./types"
+
+/**
+ * Provide shared panel group state to descendant components.
+ * 子孫コンポーネントへパネルグループの共有状態を提供するコンテキスト。
+ */
+export const PanelGroupContext = createContext<PanelGroupContextValue | null>(null)
+
+/**
+ * Access panel group behaviors and layout data from the nearest provider.
+ * 最も近いプロバイダーからパネルグループの振る舞いとレイアウトデータを取得するフック。
+ */
+export const usePanelGroup = () => {
+    const context = useContext(PanelGroupContext)
+    if (!context) {
+        throw new Error("usePanelGroup must be used within a PanelGroup")
+    }
+    return context
+}

package/src/debugOverlayStore.ts

@@ -0,0 +1,351 @@
+/**
+ * @file Debug overlay store utilities
+ * デバッグオーバーレイのストアユーティリティ
+ */
+
+import { useSyncExternalStore } from "react"
+import type { ContainerSize, PanelDirection, PanelLayoutData, ResizeHandleLayoutData } from "./types"
+
+/**
+ * Snapshot of the debug overlay state across panel groups.
+ * デバッグオーバーレイのスナップショット状態を表す構造体。
+ */
+export type DebugOverlaySnapshot = {
+    ownerId: string | null
+    groups: DebugGroupState[]
+}
+
+/**
+ * Aggregated state for a panel group tracked by the debug overlay.
+ * デバッグオーバーレイが追跡するパネルグループの集約状態。
+ */
+export type DebugGroupState = {
+    groupId: string
+    displayName: string
+    direction: PanelDirection
+    containerSize: ContainerSize
+    panels: PanelLayoutData[]
+    handles: ResizeHandleLayoutData[]
+    index: number
+}
+
+type DebugGroupUpdate = {
+    displayName: string
+    direction: PanelDirection
+    containerSize: ContainerSize
+    panels: PanelLayoutData[]
+    handles: ResizeHandleLayoutData[]
+}
+
+type StoreListener = () => void
+
+type DebugGroupEntry = DebugGroupState & {
+    serializedPanels: string
+    serializedHandles: string
+}
+
+const serializePanels = (panels: PanelLayoutData[]) => {
+    return JSON.stringify(
+        panels.map((panel) => ({
+            id: panel.id,
+            size: panel.size,
+            percentageSize: panel.percentageSize ?? null,
+            preferredPercentageSize: panel.preferredPercentageSize ?? null,
+            preferredPixelSize: panel.preferredPixelSize ?? null,
+            sizeUnit: panel.sizeUnit,
+            originalPixelSize: panel.originalPixelSize ?? null,
+            minSize: panel.minSize ?? null,
+            maxSize: panel.maxSize ?? null,
+            autoMinSize: panel.autoMinSize ?? null,
+            collapseFromStart: panel.collapseFromStart,
+            collapseFromEnd: panel.collapseFromEnd,
+            collapsedByDirection: panel.collapsedByDirection ?? null,
+            collapsed: panel.collapsed ?? false,
+            sizeBeforeCollapse: panel.sizeBeforeCollapse ?? null,
+            preferredPercentageSizeBeforeCollapse: panel.preferredPercentageSizeBeforeCollapse ?? null,
+            preferredPixelSizeBeforeCollapse: panel.preferredPixelSizeBeforeCollapse ?? null,
+            measuredPixelSizeBeforeCollapse: panel.measuredPixelSizeBeforeCollapse ?? null,
+            pixelAdjustPriority: panel.pixelAdjustPriority ?? null,
+            flexAdjustPriority: panel.flexAdjustPriority ?? null,
+            measuredPixelSize: panel.measuredPixelSize ?? null,
+            measuredPercentageSize: panel.measuredPercentageSize ?? null,
+        })),
+    )
+}
+
+const serializeHandles = (handles: ResizeHandleLayoutData[]) => {
+    return JSON.stringify(
+        handles.map((handle) => ({
+            id: handle.id,
+            thickness: handle.thickness,
+            visible: handle.visible,
+            direction: handle.direction,
+            startPanelId: handle.startPanelId ?? null,
+            endPanelId: handle.endPanelId ?? null,
+        })),
+    )
+}
+
+const createDebugOverlayStore = () => {
+    const listeners = new Set<StoreListener>()
+    const groups = new Map<string, DebugGroupEntry>()
+    const enabledGroups = new Set<string>()
+    let ownerId: string | null = null
+    let orderCounter = 0
+    let snapshotDirty = true
+    let cachedGroups: DebugGroupState[] = []
+    let cachedSnapshot: DebugOverlaySnapshot = {
+        ownerId: null,
+        groups: cachedGroups,
+    }
+
+    // リスナーへ変更通知
+    const notify = () => {
+        for (const listener of listeners) {
+            listener()
+        }
+    }
+
+    // スナップショット再計算フラグを設定して通知
+    const emitChange = () => {
+        snapshotDirty = true
+        notify()
+    }
+
+    // 有効なグループから次のオーバーレイオーナーを決定
+    const resolveOwner = () => {
+        const previousOwner = ownerId
+        if (previousOwner && enabledGroups.has(previousOwner)) {
+            return false
+        }
+        ownerId = null
+        const iterator = enabledGroups.values().next()
+        if (!iterator.done) {
+            ownerId = iterator.value
+        }
+        return previousOwner !== ownerId
+    }
+
+    // リスナー登録とサブスクリプション管理
+    const subscribe = (listener: StoreListener) => {
+        listeners.add(listener)
+        return () => {
+            listeners.delete(listener)
+        }
+    }
+
+    // スナップショット取得 (必要に応じて再構築)
+    const getSnapshot = (): DebugOverlaySnapshot => {
+        if (resolveOwner()) {
+            snapshotDirty = true
+        }
+
+        if (snapshotDirty) {
+            const sorted = Array.from(groups.values()).sort((a, b) => a.index - b.index)
+            cachedGroups = sorted.map(({ serializedPanels, serializedHandles, ...publicGroup }) => publicGroup)
+            cachedSnapshot = {
+                ownerId,
+                groups: cachedGroups,
+            }
+            snapshotDirty = false
+        }
+
+        return cachedSnapshot
+    }
+
+    // グループを有効化してオーバーレイ対象へ追加
+    const enableGroup = (groupId: string) => {
+        const previousSize = enabledGroups.size
+        enabledGroups.add(groupId)
+        if (enabledGroups.size === previousSize) {
+            return
+        }
+        if (resolveOwner()) {
+            emitChange()
+        }
+    }
+
+    // グループを無効化してオーバーレイ対象から除外
+    const disableGroup = (groupId: string) => {
+        if (!enabledGroups.delete(groupId)) {
+            return
+        }
+        if (resolveOwner()) {
+            emitChange()
+        }
+    }
+
+    // グループ状態を更新 (差分検出して変更時のみ通知)
+    const updateGroup = (groupId: string, update: DebugGroupUpdate) => {
+        const existing = groups.get(groupId)
+        const index = existing?.index ?? orderCounter++
+        const serializedPanels = serializePanels(update.panels)
+        const serializedHandles = serializeHandles(update.handles)
+
+        // 各プロパティの変更検出
+        const displayChanged = existing?.displayName !== update.displayName
+        const directionChanged = existing?.direction !== update.direction
+        const containerChanged = existing ? existing.containerSize.width !== update.containerSize.width || existing.containerSize.height !== update.containerSize.height : true
+
+        // パネル配列の変更を詳細検証
+        let panelsChanged = existing?.serializedPanels !== serializedPanels
+        if (!panelsChanged && existing) {
+            if (existing.panels.length !== update.panels.length) {
+                panelsChanged = true
+            } else {
+                for (let index = 0; index < update.panels.length; index += 1) {
+                    const prevPanel = existing.panels[index]
+                    const nextPanel = update.panels[index]
+                    if (!(prevPanel && nextPanel)) {
+                        panelsChanged = true
+                        break
+                    }
+                    if (
+                        prevPanel.id !== nextPanel.id ||
+                        prevPanel.size !== nextPanel.size ||
+                        prevPanel.percentageSize !== nextPanel.percentageSize ||
+                        prevPanel.collapsed !== nextPanel.collapsed ||
+                        prevPanel.measuredPixelSize !== nextPanel.measuredPixelSize ||
+                        prevPanel.measuredPercentageSize !== nextPanel.measuredPercentageSize
+                    ) {
+                        panelsChanged = true
+                        break
+                    }
+                }
+            }
+        }
+
+        // ハンドル配列の変更を詳細検証
+        let handlesChanged = existing?.serializedHandles !== serializedHandles
+        if (!handlesChanged && existing) {
+            if (existing.handles.length !== update.handles.length) {
+                handlesChanged = true
+            } else {
+                for (let index = 0; index < update.handles.length; index += 1) {
+                    const prevHandle = existing.handles[index]
+                    const nextHandle = update.handles[index]
+                    if (!(prevHandle && nextHandle)) {
+                        handlesChanged = true
+                        break
+                    }
+                    if (
+                        prevHandle.id !== nextHandle.id ||
+                        prevHandle.thickness !== nextHandle.thickness ||
+                        prevHandle.visible !== nextHandle.visible ||
+                        prevHandle.direction !== nextHandle.direction ||
+                        prevHandle.startPanelId !== nextHandle.startPanelId ||
+                        prevHandle.endPanelId !== nextHandle.endPanelId
+                    ) {
+                        handlesChanged = true
+                        break
+                    }
+                }
+            }
+        }
+
+        // 空のグループは初回のみスキップ
+        if (!existing && update.panels.length === 0 && update.handles.length === 0) {
+            return
+        }
+
+        // 変更なければスキップ
+        if (existing && !displayChanged && !directionChanged && !containerChanged && !panelsChanged && !handlesChanged) {
+            return
+        }
+
+        // 状態をクローンして保存
+        const clonedPanels = update.panels.map((panel) => ({ ...panel }))
+        const clonedHandles = update.handles.map((handle) => ({ ...handle }))
+        const clonedContainer = { ...update.containerSize }
+
+        groups.set(groupId, {
+            groupId,
+            displayName: update.displayName,
+            direction: update.direction,
+            containerSize: clonedContainer,
+            panels: clonedPanels,
+            handles: clonedHandles,
+            index,
+            serializedPanels,
+            serializedHandles,
+        })
+
+        emitChange()
+    }
+
+    // グループを削除
+    const removeGroup = (groupId: string) => {
+        const removed = groups.delete(groupId)
+        const disabledNow = enabledGroups.delete(groupId)
+        const ownerChanged = resolveOwner()
+
+        if (removed || disabledNow || ownerChanged) {
+            emitChange()
+        }
+    }
+
+    return {
+        subscribe,
+        getSnapshot,
+        getOwnerId: () => {
+            if (resolveOwner()) {
+                snapshotDirty = true
+            }
+            return ownerId
+        },
+        enableGroup,
+        disableGroup,
+        updateGroup,
+        removeGroup,
+    }
+}
+
+const debugOverlayStore = createDebugOverlayStore()
+
+/**
+ * Subscribe to the identifier of the panel group that renders the overlay.
+ * オーバーレイを描画するパネルグループ識別子を購読するフック。
+ */
+export const useDebugOverlayOwnerId = () => {
+    return useSyncExternalStore(debugOverlayStore.subscribe, debugOverlayStore.getOwnerId, debugOverlayStore.getOwnerId)
+}
+
+/**
+ * Subscribe to the aggregate debug overlay snapshot.
+ * 集約されたデバッグオーバーレイのスナップショットを購読するフック。
+ */
+export const useDebugOverlaySnapshot = () => {
+    return useSyncExternalStore(debugOverlayStore.subscribe, debugOverlayStore.getSnapshot, debugOverlayStore.getSnapshot)
+}
+
+/**
+ * Enable a panel group for inclusion in the debug overlay.
+ * デバッグオーバーレイへの取り込み対象としてパネルグループを有効化するメソッド。
+ */
+export const enableDebugOverlayGroup = (groupId: string) => {
+    debugOverlayStore.enableGroup(groupId)
+}
+
+/**
+ * Disable a panel group from the debug overlay without erasing cached data.
+ * キャッシュを保持したままパネルグループをデバッグオーバーレイ対象から外すメソッド。
+ */
+export const disableDebugOverlayGroup = (groupId: string) => {
+    debugOverlayStore.disableGroup(groupId)
+}
+
+/**
+ * Persist the latest panel group measurements into the debug overlay store.
+ * 最新のパネルグループ測定値をデバッグオーバーレイストアに保存するメソッド。
+ */
+export const updateDebugOverlayGroup = (groupId: string, update: DebugGroupUpdate) => {
+    debugOverlayStore.updateGroup(groupId, update)
+}
+
+/**
+ * Remove a panel group from the debug overlay store entirely.
+ * パネルグループをデバッグオーバーレイストアから完全に削除するメソッド。
+ */
+export const removeDebugOverlayGroup = (groupId: string) => {
+    debugOverlayStore.removeGroup(groupId)
+}