@aiquants/resize-panels 1.9.0 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/README.md +129 -22
  2. package/dist/GlobalDebugOverlay-Cf3GOn2A.cjs +1 -0
  3. package/dist/{GlobalDebugOverlay-Do70T2l6.js → GlobalDebugOverlay-DQtUdNeF.js} +28 -28
  4. package/dist/GlobalDebugOverlay.d.ts +1 -18
  5. package/dist/Panel.d.ts +13 -7
  6. package/dist/PanelDebugInfo.d.ts +6 -10
  7. package/dist/PanelGroup.d.ts +1 -6
  8. package/dist/PanelResizeHandle.d.ts +2 -7
  9. package/dist/allocateLayout.d.ts +12 -0
  10. package/dist/context.d.ts +2 -11
  11. package/dist/debugOverlayStore-D7FT6zPE.js +135 -0
  12. package/dist/debugOverlayStore-DY09saU8.cjs +1 -0
  13. package/dist/debugOverlayStore.d.ts +7 -36
  14. package/dist/hooks.d.ts +12 -24
  15. package/dist/index-DZ0itiBD.js +1299 -0
  16. package/dist/index-DqATP_BA.cjs +2 -0
  17. package/dist/index.cjs +1 -1
  18. package/dist/index.d.ts +10 -26
  19. package/dist/index.js +25 -13
  20. package/dist/reducer.d.ts +7 -38
  21. package/dist/roundHalfToEven.d.ts +0 -9
  22. package/dist/styles/resize-panels.standalone.css +1 -1
  23. package/dist/types.d.ts +67 -261
  24. package/dist/utils/simple-logger.d.ts +0 -74
  25. package/dist/utils.d.ts +10 -55
  26. package/package.json +2 -3
  27. package/dist/GlobalDebugOverlay-sEQN6exo.cjs +0 -1
  28. package/dist/GlobalDebugOverlay.d.ts.map +0 -1
  29. package/dist/Panel.d.ts.map +0 -1
  30. package/dist/PanelDebugInfo.d.ts.map +0 -1
  31. package/dist/PanelGroup.d.ts.map +0 -1
  32. package/dist/PanelResizeHandle.d.ts.map +0 -1
  33. package/dist/context.d.ts.map +0 -1
  34. package/dist/debugOverlayStore-Cntyxboe.js +0 -141
  35. package/dist/debugOverlayStore-Dkl-fHoa.cjs +0 -1
  36. package/dist/debugOverlayStore.d.ts.map +0 -1
  37. package/dist/hooks.d.ts.map +0 -1
  38. package/dist/index-B6YGX2DH.js +0 -2009
  39. package/dist/index-DssZUxGw.cjs +0 -2
  40. package/dist/index.d.ts.map +0 -1
  41. package/dist/reducer.d.ts.map +0 -1
  42. package/dist/roundHalfToEven.d.ts.map +0 -1
  43. package/dist/types.d.ts.map +0 -1
  44. package/dist/utils/simple-logger.d.ts.map +0 -1
  45. package/dist/utils.d.ts.map +0 -1
  46. package/src/GlobalDebugOverlay.tsx +0 -284
  47. package/src/Panel.tsx +0 -635
  48. package/src/PanelDebugInfo.tsx +0 -148
  49. package/src/PanelGroup.tsx +0 -260
  50. package/src/PanelResizeHandle.tsx +0 -797
  51. package/src/context.ts +0 -25
  52. package/src/debugOverlayStore.ts +0 -351
  53. package/src/hooks.ts +0 -968
  54. package/src/index.ts +0 -84
  55. package/src/reducer.ts +0 -1234
  56. package/src/roundHalfToEven.ts +0 -40
  57. package/src/styles/components.entry.css +0 -10
  58. package/src/styles/resize-panels.css +0 -1
  59. package/src/styles/standalone.entry.css +0 -12
  60. package/src/types.ts +0 -419
  61. package/src/utils/simple-logger.ts +0 -186
  62. package/src/utils.ts +0 -279
@@ -0,0 +1,135 @@
1
+ import { useSyncExternalStore as x } from "react";
2
+ const k = (l) => JSON.stringify(
3
+ l.map((e) => ({
4
+ id: e.id,
5
+ size: e.size,
6
+ sizeUnit: e.sizeUnit,
7
+ preferredPercentageSize: e.preferredPercentageSize,
8
+ preferredPixelSize: e.preferredPixelSize,
9
+ minSize: e.minSize ?? null,
10
+ maxSize: e.maxSize ?? null,
11
+ collapseFromStart: e.collapseFromStart,
12
+ collapseFromEnd: e.collapseFromEnd,
13
+ collapsed: e.collapsed,
14
+ collapsedByDirection: e.collapsedByDirection,
15
+ preferenceBeforeCollapse: e.preferenceBeforeCollapse,
16
+ pixelAdjustPriority: e.pixelAdjustPriority ?? null,
17
+ flexAdjustPriority: e.flexAdjustPriority ?? null,
18
+ measuredPixelSize: e.measuredPixelSize ?? null,
19
+ measuredPercentageSize: e.measuredPercentageSize ?? null
20
+ }))
21
+ ), H = (l) => JSON.stringify(
22
+ l.map((e) => ({
23
+ id: e.id,
24
+ thickness: e.thickness,
25
+ visible: e.visible,
26
+ direction: e.direction,
27
+ startPanelId: e.startPanelId ?? null,
28
+ endPanelId: e.endPanelId ?? null
29
+ }))
30
+ ), N = () => {
31
+ const l = /* @__PURE__ */ new Set(), e = /* @__PURE__ */ new Map(), d = /* @__PURE__ */ new Set();
32
+ let c = null, v = 0, u = !0, h = [], P = {
33
+ ownerId: null,
34
+ groups: h
35
+ };
36
+ const y = () => {
37
+ for (const s of l)
38
+ s();
39
+ }, S = () => {
40
+ u = !0, y();
41
+ }, p = () => {
42
+ const s = c;
43
+ if (s && d.has(s))
44
+ return !1;
45
+ c = null;
46
+ const r = d.values().next();
47
+ return r.done || (c = r.value), s !== c;
48
+ };
49
+ return {
50
+ subscribe: (s) => (l.add(s), () => {
51
+ l.delete(s);
52
+ }),
53
+ getSnapshot: () => (p() && (u = !0), u && (h = Array.from(e.values()).sort((r, n) => r.index - n.index).map(({ serializedPanels: r, serializedHandles: n, ...f }) => f), P = {
54
+ ownerId: c,
55
+ groups: h
56
+ }, u = !1), P),
57
+ getOwnerId: () => (p() && (u = !0), c),
58
+ enableGroup: (s) => {
59
+ const r = d.size;
60
+ d.add(s), d.size !== r && p() && S();
61
+ },
62
+ disableGroup: (s) => {
63
+ d.delete(s) && p() && S();
64
+ },
65
+ updateGroup: (s, r) => {
66
+ const n = e.get(s), f = n?.index ?? v++, b = k(r.panels), m = H(r.handles), G = n?.displayName !== r.displayName, O = n?.direction !== r.direction, w = n ? n.containerSize.width !== r.containerSize.width || n.containerSize.height !== r.containerSize.height : !0;
67
+ let g = n?.serializedPanels !== b;
68
+ if (!g && n)
69
+ if (n.panels.length !== r.panels.length)
70
+ g = !0;
71
+ else
72
+ for (let o = 0; o < r.panels.length; o += 1) {
73
+ const i = n.panels[o], t = r.panels[o];
74
+ if (!(i && t)) {
75
+ g = !0;
76
+ break;
77
+ }
78
+ if (i.id !== t.id || i.size !== t.size || i.preferredPercentageSize !== t.preferredPercentageSize || i.preferredPixelSize !== t.preferredPixelSize || i.collapsed !== t.collapsed || i.measuredPixelSize !== t.measuredPixelSize || i.measuredPercentageSize !== t.measuredPercentageSize) {
79
+ g = !0;
80
+ break;
81
+ }
82
+ }
83
+ let z = n?.serializedHandles !== m;
84
+ if (!z && n)
85
+ if (n.handles.length !== r.handles.length)
86
+ z = !0;
87
+ else
88
+ for (let o = 0; o < r.handles.length; o += 1) {
89
+ const i = n.handles[o], t = r.handles[o];
90
+ if (!(i && t)) {
91
+ z = !0;
92
+ break;
93
+ }
94
+ if (i.id !== t.id || i.thickness !== t.thickness || i.visible !== t.visible || i.direction !== t.direction || i.startPanelId !== t.startPanelId || i.endPanelId !== t.endPanelId) {
95
+ z = !0;
96
+ break;
97
+ }
98
+ }
99
+ if (!n && r.panels.length === 0 && r.handles.length === 0 || n && !G && !O && !w && !g && !z)
100
+ return;
101
+ const C = r.panels.map((o) => ({ ...o })), I = r.handles.map((o) => ({ ...o })), D = { ...r.containerSize };
102
+ e.set(s, {
103
+ groupId: s,
104
+ displayName: r.displayName,
105
+ direction: r.direction,
106
+ containerSize: D,
107
+ panels: C,
108
+ handles: I,
109
+ index: f,
110
+ serializedPanels: b,
111
+ serializedHandles: m
112
+ }), S();
113
+ },
114
+ removeGroup: (s) => {
115
+ const r = e.delete(s), n = d.delete(s), f = p();
116
+ (r || n || f) && S();
117
+ }
118
+ };
119
+ }, a = N(), M = () => x(a.subscribe, a.getOwnerId, a.getOwnerId), q = () => x(a.subscribe, a.getSnapshot, a.getSnapshot), K = (l) => {
120
+ a.enableGroup(l);
121
+ }, L = (l) => {
122
+ a.disableGroup(l);
123
+ }, Q = (l, e) => {
124
+ a.updateGroup(l, e);
125
+ }, R = (l) => {
126
+ a.removeGroup(l);
127
+ };
128
+ export {
129
+ L as disableDebugOverlayGroup,
130
+ K as enableDebugOverlayGroup,
131
+ R as removeDebugOverlayGroup,
132
+ Q as updateDebugOverlayGroup,
133
+ M as useDebugOverlayOwnerId,
134
+ q as useDebugOverlaySnapshot
135
+ };
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),k=l=>JSON.stringify(l.map(e=>({id:e.id,size:e.size,sizeUnit:e.sizeUnit,preferredPercentageSize:e.preferredPercentageSize,preferredPixelSize:e.preferredPixelSize,minSize:e.minSize??null,maxSize:e.maxSize??null,collapseFromStart:e.collapseFromStart,collapseFromEnd:e.collapseFromEnd,collapsed:e.collapsed,collapsedByDirection:e.collapsedByDirection,preferenceBeforeCollapse:e.preferenceBeforeCollapse,pixelAdjustPriority:e.pixelAdjustPriority??null,flexAdjustPriority:e.flexAdjustPriority??null,measuredPixelSize:e.measuredPixelSize??null,measuredPercentageSize:e.measuredPercentageSize??null}))),H=l=>JSON.stringify(l.map(e=>({id:e.id,thickness:e.thickness,visible:e.visible,direction:e.direction,startPanelId:e.startPanelId??null,endPanelId:e.endPanelId??null}))),N=()=>{const l=new Set,e=new Map,d=new Set;let c=null,v=0,u=!0,z=[],h={ownerId:null,groups:z};const x=()=>{for(const s of l)s()},b=()=>{u=!0,x()},g=()=>{const s=c;if(s&&d.has(s))return!1;c=null;const r=d.values().next();return r.done||(c=r.value),s!==c};return{subscribe:s=>(l.add(s),()=>{l.delete(s)}),getSnapshot:()=>(g()&&(u=!0),u&&(z=Array.from(e.values()).sort((r,n)=>r.index-n.index).map(({serializedPanels:r,serializedHandles:n,...p})=>p),h={ownerId:c,groups:z},u=!1),h),getOwnerId:()=>(g()&&(u=!0),c),enableGroup:s=>{const r=d.size;d.add(s),d.size!==r&&g()&&b()},disableGroup:s=>{d.delete(s)&&g()&&b()},updateGroup:(s,r)=>{const n=e.get(s),p=n?.index??v++,P=k(r.panels),m=H(r.handles),O=n?.displayName!==r.displayName,G=n?.direction!==r.direction,w=n?n.containerSize.width!==r.containerSize.width||n.containerSize.height!==r.containerSize.height:!0;let S=n?.serializedPanels!==P;if(!S&&n)if(n.panels.length!==r.panels.length)S=!0;else for(let o=0;o<r.panels.length;o+=1){const i=n.panels[o],t=r.panels[o];if(!(i&&t)){S=!0;break}if(i.id!==t.id||i.size!==t.size||i.preferredPercentageSize!==t.preferredPercentageSize||i.preferredPixelSize!==t.preferredPixelSize||i.collapsed!==t.collapsed||i.measuredPixelSize!==t.measuredPixelSize||i.measuredPercentageSize!==t.measuredPercentageSize){S=!0;break}}let f=n?.serializedHandles!==m;if(!f&&n)if(n.handles.length!==r.handles.length)f=!0;else for(let o=0;o<r.handles.length;o+=1){const i=n.handles[o],t=r.handles[o];if(!(i&&t)){f=!0;break}if(i.id!==t.id||i.thickness!==t.thickness||i.visible!==t.visible||i.direction!==t.direction||i.startPanelId!==t.startPanelId||i.endPanelId!==t.endPanelId){f=!0;break}}if(!n&&r.panels.length===0&&r.handles.length===0||n&&!O&&!G&&!w&&!S&&!f)return;const D=r.panels.map(o=>({...o})),I=r.handles.map(o=>({...o})),C={...r.containerSize};e.set(s,{groupId:s,displayName:r.displayName,direction:r.direction,containerSize:C,panels:D,handles:I,index:p,serializedPanels:P,serializedHandles:m}),b()},removeGroup:s=>{const r=e.delete(s),n=d.delete(s),p=g();(r||n||p)&&b()}}},a=N(),j=()=>y.useSyncExternalStore(a.subscribe,a.getOwnerId,a.getOwnerId),A=()=>y.useSyncExternalStore(a.subscribe,a.getSnapshot,a.getSnapshot),B=l=>{a.enableGroup(l)},E=l=>{a.disableGroup(l)},F=(l,e)=>{a.updateGroup(l,e)},J=l=>{a.removeGroup(l)};exports.disableDebugOverlayGroup=E;exports.enableDebugOverlayGroup=B;exports.removeDebugOverlayGroup=J;exports.updateDebugOverlayGroup=F;exports.useDebugOverlayOwnerId=j;exports.useDebugOverlaySnapshot=A;
@@ -1,22 +1,18 @@
1
- import { ContainerSize, PanelDirection, PanelLayoutData, ResizeHandleLayoutData } from './types';
2
- /**
3
- * Snapshot of the debug overlay state across panel groups.
4
- * デバッグオーバーレイのスナップショット状態を表す構造体。
5
- */
1
+ import { ContainerSize, PanelDirection, PanelLayoutData, ResizeHandleLayoutData } from "./types";
2
+ export type DebugPanelSnapshot = PanelLayoutData & {
3
+ measuredPixelSize?: number;
4
+ measuredPercentageSize?: number;
5
+ };
6
6
  export type DebugOverlaySnapshot = {
7
7
  ownerId: string | null;
8
8
  groups: DebugGroupState[];
9
9
  };
10
- /**
11
- * Aggregated state for a panel group tracked by the debug overlay.
12
- * デバッグオーバーレイが追跡するパネルグループの集約状態。
13
- */
14
10
  export type DebugGroupState = {
15
11
  groupId: string;
16
12
  displayName: string;
17
13
  direction: PanelDirection;
18
14
  containerSize: ContainerSize;
19
- panels: PanelLayoutData[];
15
+ panels: DebugPanelSnapshot[];
20
16
  handles: ResizeHandleLayoutData[];
21
17
  index: number;
22
18
  };
@@ -24,38 +20,13 @@ type DebugGroupUpdate = {
24
20
  displayName: string;
25
21
  direction: PanelDirection;
26
22
  containerSize: ContainerSize;
27
- panels: PanelLayoutData[];
23
+ panels: DebugPanelSnapshot[];
28
24
  handles: ResizeHandleLayoutData[];
29
25
  };
30
- /**
31
- * Subscribe to the identifier of the panel group that renders the overlay.
32
- * オーバーレイを描画するパネルグループ識別子を購読するフック。
33
- */
34
26
  export declare const useDebugOverlayOwnerId: () => string | null;
35
- /**
36
- * Subscribe to the aggregate debug overlay snapshot.
37
- * 集約されたデバッグオーバーレイのスナップショットを購読するフック。
38
- */
39
27
  export declare const useDebugOverlaySnapshot: () => DebugOverlaySnapshot;
40
- /**
41
- * Enable a panel group for inclusion in the debug overlay.
42
- * デバッグオーバーレイへの取り込み対象としてパネルグループを有効化するメソッド。
43
- */
44
28
  export declare const enableDebugOverlayGroup: (groupId: string) => void;
45
- /**
46
- * Disable a panel group from the debug overlay without erasing cached data.
47
- * キャッシュを保持したままパネルグループをデバッグオーバーレイ対象から外すメソッド。
48
- */
49
29
  export declare const disableDebugOverlayGroup: (groupId: string) => void;
50
- /**
51
- * Persist the latest panel group measurements into the debug overlay store.
52
- * 最新のパネルグループ測定値をデバッグオーバーレイストアに保存するメソッド。
53
- */
54
30
  export declare const updateDebugOverlayGroup: (groupId: string, update: DebugGroupUpdate) => void;
55
- /**
56
- * Remove a panel group from the debug overlay store entirely.
57
- * パネルグループをデバッグオーバーレイストアから完全に削除するメソッド。
58
- */
59
31
  export declare const removeDebugOverlayGroup: (groupId: string) => void;
60
32
  export {};
61
- //# sourceMappingURL=debugOverlayStore.d.ts.map
package/dist/hooks.d.ts CHANGED
@@ -1,40 +1,29 @@
1
- import { CSSProperties } from 'react';
2
- import { LayoutConstraintViolation, PanelCollapseDirection, PanelGroupProps, PanelLayoutData, PanelMeasurement, ResizeHandleLayoutData } from './types';
3
- /**
4
- * Orchestrate registration, constraint resolution, measurement sync, and persistence for a panel group.
5
- * パネルグループにおける登録処理・制約判定・計測同期・永続化の統括。
6
- */
1
+ import { CSSProperties } from "react";
2
+ import { PanelCollapseDirection, PanelGroupProps, PanelMeasurement, PanelRegistration, ResizeHandleLayoutData } from "./types";
7
3
  export declare const useResizablePanels: ({ direction, style, onLayout, autoSaveId, showDebugInfo }: PanelGroupProps) => {
8
- groupRef: import('react').RefObject<HTMLDivElement | null>;
4
+ groupRef: import("react").RefObject<HTMLDivElement | null>;
9
5
  contextValue: {
10
- direction: import('./types').PanelDirection;
11
- panels: PanelLayoutData[];
12
- containerSize: {
13
- width: number;
14
- height: number;
15
- };
16
- isContainerReady: boolean;
6
+ direction: import("./types").PanelDirection;
7
+ panels: import("./types").PanelLayoutData[];
8
+ containerSize: number;
9
+ layoutOrderKey: string;
17
10
  showDebugInfo: boolean;
18
- registerPanel: (panel: PanelLayoutData) => void;
11
+ registerPanel: (panel: PanelRegistration) => void;
19
12
  unregisterPanel: (id: string) => void;
20
- resizePanels: (leftId: string, rightId: string, leftSize: number, rightSize: number) => void;
13
+ resizePanels: (startId: string, endId: string, startSize: number) => void;
21
14
  collapsePanel: (id: string, from: PanelCollapseDirection) => void;
22
15
  expandPanel: (id: string, from: PanelCollapseDirection, targetSize?: number) => void;
23
- getPanel: (id: string) => PanelLayoutData | undefined;
16
+ getPanel: (id: string) => import("./types").PanelLayoutData | undefined;
24
17
  reportPanelMeasurement: (panelId: string, measurement: PanelMeasurement | null) => void;
25
18
  panelMeasurements: Record<string, PanelMeasurement>;
26
19
  reportHandleMeasurement: (handleId: string, measurement: ResizeHandleLayoutData | null) => void;
27
20
  handleMeasurements: Record<string, ResizeHandleLayoutData>;
28
- layoutConstraintViolation: LayoutConstraintViolation | null;
21
+ layoutConstraintViolation: import("./types").LayoutConstraintViolation | null;
29
22
  };
30
23
  groupStyle: CSSProperties;
31
24
  };
32
- /**
33
- * Provide imperative helpers for toggling a specific panel while preserving stored sizing.
34
- * 特定パネルの保存済みサイズを維持しつつ開閉を制御する命令型ユーティリティを提供するカスタムフック。
35
- */
36
25
  export declare const usePanelControls: (panelId: string) => {
37
- panel: PanelLayoutData | undefined;
26
+ panel: import("./types").PanelLayoutData | undefined;
38
27
  isCollapsed: boolean;
39
28
  canCollapseFromStart: boolean;
40
29
  canCollapseFromEnd: boolean;
@@ -42,4 +31,3 @@ export declare const usePanelControls: (panelId: string) => {
42
31
  expand: (from: PanelCollapseDirection, targetSize?: number) => void;
43
32
  toggle: (from: PanelCollapseDirection, targetSize?: number) => void;
44
33
  };
45
- //# sourceMappingURL=hooks.d.ts.map