@aiquants/resize-panels 2.0.0 → 2.0.1

package/src/debugOverlayStore.ts

@@ -1,355 +0,0 @@
-/**
- * @file Debug overlay store utilities
- * デバッグオーバーレイのストアユーティリティ
- */
-
-import { useSyncExternalStore } from "react"
-import type { ContainerSize, PanelDirection, PanelLayoutData, ResizeHandleLayoutData } from "./types"
-
-/**
- * Panel layout data enriched with the DOM measurement the overlay compares it against.
- * オーバーレイが突き合わせる DOM 実測値を添えたパネルレイアウトデータ。
- */
-export type DebugPanelSnapshot = PanelLayoutData & {
-    measuredPixelSize?: number
-    measuredPercentageSize?: number
-}
-
-/**
- * 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: DebugPanelSnapshot[]
-    handles: ResizeHandleLayoutData[]
-    index: number
-}
-
-type DebugGroupUpdate = {
-    displayName: string
-    direction: PanelDirection
-    containerSize: ContainerSize
-    panels: DebugPanelSnapshot[]
-    handles: ResizeHandleLayoutData[]
-}
-
-type StoreListener = () => void
-
-type DebugGroupEntry = DebugGroupState & {
-    serializedPanels: string
-    serializedHandles: string
-}
-
-const serializePanels = (panels: DebugPanelSnapshot[]) => {
-    return JSON.stringify(
-        panels.map((panel) => ({
-            id: panel.id,
-            size: panel.size,
-            sizeUnit: panel.sizeUnit,
-            preferredPercentageSize: panel.preferredPercentageSize,
-            preferredPixelSize: panel.preferredPixelSize,
-            minSize: panel.minSize ?? null,
-            maxSize: panel.maxSize ?? null,
-            collapseFromStart: panel.collapseFromStart,
-            collapseFromEnd: panel.collapseFromEnd,
-            collapsed: panel.collapsed,
-            collapsedByDirection: panel.collapsedByDirection,
-            preferenceBeforeCollapse: panel.preferenceBeforeCollapse,
-            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.preferredPercentageSize !== nextPanel.preferredPercentageSize ||
-                        prevPanel.preferredPixelSize !== nextPanel.preferredPixelSize ||
-                        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)
-}