@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.
- package/README.md +129 -22
- package/dist/GlobalDebugOverlay-Cf3GOn2A.cjs +1 -0
- package/dist/{GlobalDebugOverlay-Do70T2l6.js → GlobalDebugOverlay-DQtUdNeF.js} +28 -28
- package/dist/GlobalDebugOverlay.d.ts +1 -18
- package/dist/Panel.d.ts +13 -7
- package/dist/PanelDebugInfo.d.ts +6 -10
- package/dist/PanelGroup.d.ts +1 -6
- package/dist/PanelResizeHandle.d.ts +2 -7
- package/dist/allocateLayout.d.ts +12 -0
- package/dist/context.d.ts +2 -11
- package/dist/debugOverlayStore-D7FT6zPE.js +135 -0
- package/dist/debugOverlayStore-DY09saU8.cjs +1 -0
- package/dist/debugOverlayStore.d.ts +7 -36
- package/dist/hooks.d.ts +12 -24
- package/dist/index-DZ0itiBD.js +1299 -0
- package/dist/index-DqATP_BA.cjs +2 -0
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +10 -26
- package/dist/index.js +25 -13
- package/dist/reducer.d.ts +7 -38
- package/dist/roundHalfToEven.d.ts +0 -9
- package/dist/styles/resize-panels.standalone.css +1 -1
- package/dist/types.d.ts +67 -261
- package/dist/utils/simple-logger.d.ts +0 -74
- package/dist/utils.d.ts +10 -55
- package/package.json +2 -3
- package/dist/GlobalDebugOverlay-sEQN6exo.cjs +0 -1
- package/dist/GlobalDebugOverlay.d.ts.map +0 -1
- package/dist/Panel.d.ts.map +0 -1
- package/dist/PanelDebugInfo.d.ts.map +0 -1
- package/dist/PanelGroup.d.ts.map +0 -1
- package/dist/PanelResizeHandle.d.ts.map +0 -1
- package/dist/context.d.ts.map +0 -1
- package/dist/debugOverlayStore-Cntyxboe.js +0 -141
- package/dist/debugOverlayStore-Dkl-fHoa.cjs +0 -1
- package/dist/debugOverlayStore.d.ts.map +0 -1
- package/dist/hooks.d.ts.map +0 -1
- package/dist/index-B6YGX2DH.js +0 -2009
- package/dist/index-DssZUxGw.cjs +0 -2
- package/dist/index.d.ts.map +0 -1
- package/dist/reducer.d.ts.map +0 -1
- package/dist/roundHalfToEven.d.ts.map +0 -1
- package/dist/types.d.ts.map +0 -1
- package/dist/utils/simple-logger.d.ts.map +0 -1
- package/dist/utils.d.ts.map +0 -1
- package/src/GlobalDebugOverlay.tsx +0 -284
- package/src/Panel.tsx +0 -635
- package/src/PanelDebugInfo.tsx +0 -148
- package/src/PanelGroup.tsx +0 -260
- package/src/PanelResizeHandle.tsx +0 -797
- package/src/context.ts +0 -25
- package/src/debugOverlayStore.ts +0 -351
- package/src/hooks.ts +0 -968
- package/src/index.ts +0 -84
- package/src/reducer.ts +0 -1234
- package/src/roundHalfToEven.ts +0 -40
- package/src/styles/components.entry.css +0 -10
- package/src/styles/resize-panels.css +0 -1
- package/src/styles/standalone.entry.css +0 -12
- package/src/types.ts +0 -419
- package/src/utils/simple-logger.ts +0 -186
- 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
|
|
2
|
-
|
|
3
|
-
|
|
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:
|
|
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:
|
|
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
|
|
2
|
-
import {
|
|
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(
|
|
4
|
+
groupRef: import("react").RefObject<HTMLDivElement | null>;
|
|
9
5
|
contextValue: {
|
|
10
|
-
direction: import(
|
|
11
|
-
panels: PanelLayoutData[];
|
|
12
|
-
containerSize:
|
|
13
|
-
|
|
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:
|
|
11
|
+
registerPanel: (panel: PanelRegistration) => void;
|
|
19
12
|
unregisterPanel: (id: string) => void;
|
|
20
|
-
resizePanels: (
|
|
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
|