react-headless-dock-layout 0.2.3 → 0.3.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/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Dongho Kim
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,113 @@
1
+ # react-headless-dock-layout
2
+
3
+ A lightweight, headless dock layout library for React.
4
+
5
+ ## Features
6
+
7
+ - **Headless** - You control all rendering and styling. This library only provides state and behavior.
8
+ - **Lightweight** - Implements only core dock layout features. No tabs, floating windows, or complex UI.
9
+ - **Panel Management** - Add, remove, drag-and-drop, and resize panels through split bars.
10
+
11
+ ## When to Use
12
+
13
+ **Use this library if:**
14
+ - You need full control over UI design and styling
15
+ - You want a simple, focused dock layout solution
16
+ - Your requirements are basic panel operations (add/remove/move/resize)
17
+
18
+ **Don't use this library if:**
19
+ - You need pre-styled components ready to use
20
+ - You require tabs, floating windows, or complex docking features
21
+ - You want a complete IDE-like layout system
22
+
23
+
24
+ ## Installation
25
+
26
+ ```bash
27
+ npm install react-headless-dock-layout
28
+ # or
29
+ yarn add react-headless-dock-layout
30
+ # or
31
+ pnpm add react-headless-dock-layout
32
+ ```
33
+
34
+ ## Usage
35
+
36
+ ```tsx
37
+ import { useDockLayout } from 'react-headless-dock-layout';
38
+
39
+ function App() {
40
+ const {
41
+ addPanel,
42
+ removePanel,
43
+ containerRef,
44
+ layoutRects,
45
+ draggingRect,
46
+ getRectProps,
47
+ getDropZoneProps,
48
+ getDragHandleProps,
49
+ } = useDockLayout<HTMLDivElement>(null);
50
+
51
+ return (
52
+ <div>
53
+ <button type="button" onClick={() => addPanel({ id: "explorer" })}>
54
+ Add Explorer Panel
55
+ </button>
56
+ <button type="button" onClick={() => addPanel({ id: "terminal" })}>
57
+ Add Terminal Panel
58
+ </button>
59
+
60
+ <div ref={containerRef} style={{ height: "90vh", position: "relative" }}>
61
+ {layoutRects.map((rect) => {
62
+ if (rect.type === "split") {
63
+ const { style, ...props } = getRectProps(rect);
64
+ return (
65
+ <div
66
+ key={rect.id}
67
+ style={{ ...style, backgroundColor: "gray" }}
68
+ {...props}
69
+ />
70
+ );
71
+ }
72
+
73
+ if (rect.type === "panel") {
74
+ const { style, ...props } = getRectProps(rect);
75
+ const dropZoneProps = getDropZoneProps(rect);
76
+
77
+ return (
78
+ <div
79
+ key={rect.id}
80
+ style={{
81
+ ...style,
82
+ opacity: draggingRect?.id === rect.id ? 0.5 : 1,
83
+ }}
84
+ {...props}
85
+ >
86
+ {dropZoneProps && (
87
+ <div
88
+ style={{
89
+ ...dropZoneProps.style,
90
+ backgroundColor: "blue",
91
+ opacity: 0.5,
92
+ }}
93
+ />
94
+ )}
95
+
96
+ <button {...getDragHandleProps(rect)}>Drag</button>
97
+ <button type="button" onClick={() => removePanel(rect.id)}>
98
+ Close
99
+ </button>
100
+
101
+ {rect.id === "explorer" && <div>Explorer Content</div>}
102
+ {rect.id === "terminal" && <div>Terminal Content</div>}
103
+ </div>
104
+ );
105
+ }
106
+
107
+ return null;
108
+ })}
109
+ </div>
110
+ </div>
111
+ );
112
+ }
113
+ ```
package/dist/index.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; } var _class; var _class2; var _class3;function l(o){throw new Error(`Unexpected value: ${o}`)}function w(o,t){return o===null?null:S(t,o)}function S(o,t){if(t.type==="panel")return null;if(t.type==="split")return t.left.id===o||t.right.id===o?t:_nullishCoalesce(S(o,t.left), () => (S(o,t.right)));l(t)}var E={getPlacement(o){let t=y(o)+1;return{targetId:o.id,direction:"right",ratio:t/(t+1)}}};function y(o){if(o.type==="panel")return 0;if(o.type==="split"){if(o.orientation==="horizontal")return 1+y(o.left)+y(o.right);if(o.orientation==="vertical")return 0+y(o.left)+y(o.right);l(o.orientation)}else l(o)}var B={getPlacement(o){let t=z(o),e=w(o,t.id);return{targetId:t.id,direction:e===null?"right":e.orientation==="horizontal"?"bottom":"right",ratio:.5}}};function z(o){if(o.type==="panel")return o;if(o.type==="split")return z(o.right);l(o)}var _react = require('react');function m(o,t,e){return Math.max(t,Math.min(e,o))}var R= (_class =class{constructor() { _class.prototype.__init.call(this); }__init() {this._listeners=new Set}subscribe(t){return this._listeners.add(t),()=>{this._listeners.delete(t)}}emit(){this._listeners.forEach(t=>{t()})}}, _class);function u(o,t){if(!o)throw new Error(_nullishCoalesce(t, () => ("Invariant failed")))}function b(o,t){if(o===null)return[];let e=[],n=(i,r)=>{i.type==="split"?i.orientation==="horizontal"?(e.push({id:i.id,type:"split",orientation:i.orientation,x:Math.round(r.x+r.width*i.ratio-t.gap/2),y:Math.round(r.y),width:Math.round(t.gap),height:Math.round(r.height)}),n(i.left,{x:r.x,y:r.y,width:r.width*i.ratio-t.gap/2,height:r.height}),n(i.right,{x:r.x+r.width*i.ratio+t.gap/2,y:r.y,width:r.width*(1-i.ratio)-t.gap/2,height:r.height})):i.orientation==="vertical"?(e.push({id:i.id,type:"split",orientation:i.orientation,x:Math.round(r.x),y:Math.round(r.y+r.height*i.ratio-t.gap/2),width:Math.round(r.width),height:Math.round(t.gap)}),n(i.left,{x:r.x,y:r.y,width:r.width,height:r.height*i.ratio-t.gap/2}),n(i.right,{x:r.x,y:r.y+r.height*i.ratio+t.gap/2,width:r.width,height:r.height*(1-i.ratio)-t.gap/2})):l(i.orientation):i.type==="panel"?e.push({id:i.id,type:"panel",x:Math.round(r.x),y:Math.round(r.y),width:Math.round(r.width),height:Math.round(r.height)}):l(i)};return n(o,{x:0,y:0,width:t.size.width,height:t.size.height}),e}function c(o,t){if(o.type==="panel")return{width:_nullishCoalesce(_optionalChain([o, 'access', _2 => _2.minSize, 'optionalAccess', _3 => _3.width]), () => (0)),height:_nullishCoalesce(_optionalChain([o, 'access', _4 => _4.minSize, 'optionalAccess', _5 => _5.height]), () => (0))};if(o.type==="split"){if(o.orientation==="horizontal")return{width:c(o.left,t).width+t+c(o.right,t).width,height:Math.max(c(o.left,t).height,c(o.right,t).height)};if(o.orientation==="vertical")return{width:Math.max(c(o.left,t).width,c(o.right,t).width),height:c(o.left,t).height+t+c(o.right,t).height};l(o.orientation)}else l(o)}function x(o,t){let e=o.x+o.width/2,n=o.y+o.height/2,i=(t.x-e)/(o.width/2),r=(t.y-n)/(o.height/2);return Math.abs(i)>Math.abs(r)?i>0?"right":"left":r>0?"bottom":"top"}var N= (_class2 =class{__init2() {this._root=null}constructor(t){;_class2.prototype.__init2.call(this);this._root=t}get root(){return this._root}set root(t){this._root=t}findNode(t){return this._root===null?null:this.findNodeInSubTree(t,this._root)}findNodeInSubTree(t,e){if(t===e.id)return e;if(e.type==="panel")return null;if(e.type==="split")return _nullishCoalesce(this.findNodeInSubTree(t,e.left), () => (this.findNodeInSubTree(t,e.right)));l(e)}findParentNode(t){return w(this._root,t)}replaceChildNode({parentId:t,oldChildId:e,newChild:n}){let i=this.findNode(t);if(i===null)throw new Error(`Parent node with id ${t} not found`);if(i.type!=="split")throw new Error(`Parent node with id ${t} is not a split node`);if(this.findNode(e)===null)throw new Error(`Child node with id ${e} not found`);if(i.left.id===e)i.left=n;else if(i.right.id===e)i.right=n;else throw new Error(`Child node with id ${e} is not a child of the parent node with id ${t}`)}}, _class2);var v= (_class3 =class{__init3() {this._eventEmitter=new R}__init4() {this._layoutRects=[]}__init5() {this._addPanelStrategy=E}constructor(t,e){;_class3.prototype.__init3.call(this);_class3.prototype.__init4.call(this);_class3.prototype.__init5.call(this);_class3.prototype.__init6.call(this);this._tree=new N(t),this._options={gap:_nullishCoalesce(_optionalChain([e, 'optionalAccess', _6 => _6.gap]), () => (10)),size:_nullishCoalesce(_optionalChain([e, 'optionalAccess', _7 => _7.size]), () => ({width:0,height:0}))},this._layoutRects=b(t,this._options)}get root(){return this._tree.root}set root(t){this._tree.root=t,this.syncLayoutRects()}get layoutRects(){return this._layoutRects}__init6() {this.subscribe=t=>this._eventEmitter.subscribe(t)}setSize(t){this._options.size=t,this.syncLayoutRects()}removePanel(t){if(this._tree.root===null)throw new Error("Root node is null");let e=this._tree.findNode(t);if(e===null)throw new Error(`Node with id ${t} not found`);if(e.type!=="panel")throw new Error(`Node with id ${t} is not a panel`);if(e.id===this._tree.root.id){this._tree.root=null,this.syncLayoutRects();return}let n=this._tree.findParentNode(t);u(n!==null,"Parent node is not null");let i=n.left.id===e.id?n.right:n.left;if(n.id===this._tree.root.id){this._tree.root=i,this.syncLayoutRects();return}let r=this._tree.findParentNode(n.id);u(r!==null,"Grand parent node is not null"),this._tree.replaceChildNode({parentId:r.id,oldChildId:n.id,newChild:i}),this.syncLayoutRects()}movePanel({sourceId:t,targetId:e,point:n}){if(this._tree.root===null)throw new Error("Root node is null");if(this._tree.root.type!=="split")throw new Error("Root node is not a split node");let i=this._tree.findNode(t);if(i===null)throw new Error(`Node with id ${t} not found`);if(i.type!=="panel")throw new Error(`Node with id ${t} is not a panel node`);let r=this._tree.findParentNode(t);u(r!==null);let a=this._tree.findNode(e);if(a===null)throw new Error(`Node with id ${e} not found`);if(a.type!=="panel")throw new Error(`Node with id ${e} is not a panel node`);let h=r.left.id===t?r.right:r.left,d=this.findRect(e);u(d!==null),u(d.type==="panel");let p=x(d,n);if(h.id===e){p==="left"?(r.orientation="horizontal",r.left=i,r.right=a):p==="right"?(r.orientation="horizontal",r.left=a,r.right=i):p==="top"?(r.orientation="vertical",r.left=i,r.right=a):p==="bottom"?(r.orientation="vertical",r.left=a,r.right=i):l(p),this.syncLayoutRects();return}let g=this._tree.findParentNode(r.id);g===null?this._tree.root=h:g.right.id===r.id?g.right=h:g.left.id===r.id&&(g.left=h);let s=this._tree.findParentNode(e);u(s!==null);let f=this.createSplitNode({direction:p,sourceNode:i,targetNode:a});s.left.id===e?s.left=f:s.right.id===e?s.right=f:u(!1),this.syncLayoutRects()}resizePanel(t,e){if(this._tree.root===null)throw new Error("Root node is null");let n=this.findRect(t);if(n===null)throw new Error(`Rect with id ${t} not found`);if(n.type!=="split")throw new Error(`Rect with id ${t} is not a split node`);if(n.orientation==="horizontal"){let{left:i,right:r}=this.getSplitChildRects(n.id),a=e.x-i.x,h=i.width+n.width+r.width,d=m(a/h,.1,.9);this.setSplitRatio(n.id,d)}else if(n.orientation==="vertical"){let{left:i,right:r}=this.getSplitChildRects(n.id),a=e.y-i.y,h=i.height+n.height+r.height,d=m(a/h,.1,.9);this.setSplitRatio(n.id,d)}else l(n.orientation)}addPanel(t){let e=_nullishCoalesce(_optionalChain([t, 'optionalAccess', _8 => _8.id]), () => (crypto.randomUUID()));if(this._tree.root===null){this._tree.root={id:e,type:"panel"},this.syncLayoutRects();return}let n=_optionalChain([t, 'optionalAccess', _9 => _9.targetId])===void 0,{targetId:i,direction:r="right",ratio:a=.5}=n?this._addPanelStrategy.getPlacement(this._tree.root):t;if(u(i!==void 0,"targetId is not undefined"),i===this._tree.root.id){this._tree.root=this.createSplitNode({direction:r,ratio:a,sourceNode:{id:e,type:"panel"},targetNode:this._tree.root}),this.syncLayoutRects();return}let h=this._tree.findNode(i);if(h===null)throw new Error(`Node with id ${i} not found`);let d=this._tree.findParentNode(i);u(d!==null,"Target node parent is not null");let p=this.createSplitNode({direction:r,sourceNode:{id:e,type:"panel"},targetNode:h,ratio:a});this._tree.replaceChildNode({parentId:d.id,oldChildId:i,newChild:p}),this.syncLayoutRects()}calculateDropTarget({draggedPanelId:t,targetPanelId:e,point:n}){u(t!==e,"Dragged panel id is not the same as target panel id");let i=this.findRect(e);return u(i!==null&&i.type==="panel"),{id:e,direction:x(i,n)}}serialize(){return JSON.stringify({root:this._tree.root,options:{gap:this._options.gap}})}emit(){this._eventEmitter.emit()}syncLayoutRects(){this._layoutRects=b(this._tree.root,this._options),this.emit()}createSplitNode({direction:t,sourceNode:e,targetNode:n,ratio:i=.5}){switch(t){case"left":return{id:crypto.randomUUID(),type:"split",orientation:"horizontal",ratio:i,left:e,right:n};case"right":return{id:crypto.randomUUID(),type:"split",orientation:"horizontal",ratio:i,left:n,right:e};case"top":return{id:crypto.randomUUID(),type:"split",orientation:"vertical",ratio:i,left:e,right:n};case"bottom":return{id:crypto.randomUUID(),type:"split",orientation:"vertical",ratio:i,left:n,right:e};default:l(t)}}setSplitRatio(t,e){let n=this._tree.findNode(t);if(u(n!==null,"Node is not null"),u(n.type==="split","Node is a split"),n.orientation==="horizontal"){let i=this.getSurroundingRect(n.left.id).width+this._options.gap+this.getSurroundingRect(n.right.id).width,r=c(n.left,this._options.gap).width,a=c(n.right,this._options.gap).width,h=(r+this._options.gap/2)/i,d=(i-(a+this._options.gap/2))/i;n.ratio=m(e,h,d)}else if(n.orientation==="vertical"){let i=this.getSurroundingRect(n.left.id).height+this._options.gap+this.getSurroundingRect(n.right.id).height,r=c(n.left,this._options.gap).height,a=c(n.right,this._options.gap).height,h=(r+this._options.gap/2)/i,d=(i-(a+this._options.gap/2))/i;n.ratio=m(e,h,d)}else l(n.orientation);this.syncLayoutRects()}findRect(t){return _nullishCoalesce(this._layoutRects.find(e=>e.id===t), () => (null))}getSurroundingRect(t){let e=this._tree.findNode(t);if(u(e!==null,"Node is not null"),e.type==="panel"){let r=this.findRect(t);return u(r!==null,"Rect is not null"),u(r.type==="panel","Rect is a panel"),{x:r.x,y:r.y,width:r.width,height:r.height}}let n=this.getSurroundingRect(e.left.id),i=this.getSurroundingRect(e.right.id);if(e.orientation==="horizontal")return{x:n.x,y:n.y,width:n.width+this._options.gap+i.width,height:n.height};if(e.orientation==="vertical")return{x:n.x,y:n.y,width:n.width,height:n.height+this._options.gap+i.height};l(e.orientation)}getSplitChildRects(t){let e=this._tree.findNode(t);return u(e!==null&&e.type==="split"),{left:this.getSurroundingRect(e.left.id),right:this.getSurroundingRect(e.right.id)}}}, _class3);function M(o){_react.useEffect.call(void 0, ()=>{let t=document.body.style.cursor;return document.body.style.cursor=_nullishCoalesce(o, () => ("default")),()=>{document.body.style.cursor=t}},[o])}function L(o){let t=_react.useRef.call(void 0, o);return _react.useEffect.call(void 0, ()=>{t.current=o},[o]),_react.useCallback.call(void 0, (...e)=>t.current(...e),[])}function P(o,t,e,n){let i=L(e);_react.useEffect.call(void 0, ()=>(o.addEventListener(t,i,n),()=>{o.removeEventListener(t,i,n)}),[o,t,i,n])}function D(o){let t=_react.useRef.call(void 0, null),e=L(o);return _react.useEffect.call(void 0, ()=>{let n=t.current;if(n===null)throw new Error("Ref is not attached to an element");let i=new ResizeObserver(r=>{for(let a of r)e(a)});return i.observe(n),()=>{i.disconnect()}},[e]),t}function Ot(o,t){let[e]=_react.useState.call(void 0, ()=>new v(o,t)),n=_react.useSyncExternalStore.call(void 0, e.subscribe,()=>e.layoutRects),[i,r]=_react.useState.call(void 0, null),[a,h]=_react.useState.call(void 0, null),[d,p]=_react.useState.call(void 0, null),g=D(s=>{e.setSize({width:s.contentRect.width,height:s.contentRect.height})});return P(document,"mousemove",s=>{i!==null&&e.resizePanel(i.id,{x:s.clientX,y:s.clientY})}),P(document,"mouseup",()=>{i!==null&&r(null)}),M(i===null?"default":T[i.orientation]),{containerRef:g,layoutRects:n,getRectProps:s=>{if(s.type==="split")return{style:{position:"absolute",left:s.x,top:s.y,width:s.width,height:s.height,cursor:T[s.orientation]},onMouseDown:()=>{r(s)}};if(s.type==="panel")return{style:{position:"absolute",left:s.x,top:s.y,width:s.width,height:s.height},onMouseMove:f=>{if(a===null)return;if(a.id===s.id){p(null);return}let C=e.calculateDropTarget({draggedPanelId:a.id,targetPanelId:s.id,point:{x:f.clientX,y:f.clientY}});p(C)},onMouseUp:f=>{if(a!==null){if(a.id===s.id){h(null),p(null);return}e.movePanel({sourceId:a.id,targetId:s.id,point:{x:f.clientX,y:f.clientY}}),h(null),p(null)}}};l(s)},getDropZoneProps:s=>a===null||!(s.id===_optionalChain([d, 'optionalAccess', _10 => _10.id]))?null:{style:k(d.direction)},getDragHandleProps:s=>({onMouseDown:()=>{h(s)}}),draggingRect:a,addPanel:e.addPanel.bind(e),removePanel:e.removePanel.bind(e),serialize:e.serialize.bind(e)}}function k(o){if(o==="top")return{position:"absolute",left:0,top:0,width:"100%",height:"50%"};if(o==="bottom")return{position:"absolute",left:0,top:"50%",width:"100%",height:"50%"};if(o==="left")return{position:"absolute",left:0,top:0,width:"50%",height:"100%"};if(o==="right")return{position:"absolute",left:"50%",top:0,width:"50%",height:"100%"};l(o)}var T={horizontal:"col-resize",vertical:"row-resize"};exports.bspStrategy = B; exports.evenlyDividedHorizontalStrategy = E; exports.useDockLayout = Ot;
1
+ "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; } var _class; var _class2;function l(i){throw new Error(`Unexpected value: ${i}`)}function N(i,t){return i===null?null:x(t,i)}function x(i,t){if(t.type==="panel")return null;if(t.type==="split")return t.left.id===i||t.right.id===i?t:_nullishCoalesce(x(i,t.left), () => (x(i,t.right)));l(t)}var M={getPlacement(i){let t=g(i)+1;return{targetId:i.id,direction:"right",ratio:t/(t+1)}}};function g(i){if(i.type==="panel")return 0;if(i.type==="split"){if(i.orientation==="horizontal")return 1+g(i.left)+g(i.right);if(i.orientation==="vertical")return g(i.left)+g(i.right);l(i.orientation)}else l(i)}var G={getPlacement(i){let t=z(i),e=N(i,t.id);return{targetId:t.id,direction:e===null?"right":e.orientation==="horizontal"?"bottom":"right",ratio:.5}}};function z(i){if(i.type==="panel")return i;if(i.type==="split")return z(i.right);l(i)}var _react = require('react');function m(i,t,e){return Math.max(t,Math.min(e,i))}function w(){return typeof crypto<"u"&&crypto.randomUUID?crypto.randomUUID():Date.now().toString(36)}function u(i,t){if(!i)throw new Error(_nullishCoalesce(t, () => ("Invariant failed")))}function E(i,t){if(i===null)return[];let e=[],r=(o,n)=>{o.type==="split"?o.orientation==="horizontal"?(e.push({id:o.id,type:"split",orientation:o.orientation,x:Math.round(n.x+n.width*o.ratio-t.gap/2),y:Math.round(n.y),width:Math.round(t.gap),height:Math.round(n.height)}),r(o.left,{x:n.x,y:n.y,width:n.width*o.ratio-t.gap/2,height:n.height}),r(o.right,{x:n.x+n.width*o.ratio+t.gap/2,y:n.y,width:n.width*(1-o.ratio)-t.gap/2,height:n.height})):o.orientation==="vertical"?(e.push({id:o.id,type:"split",orientation:o.orientation,x:Math.round(n.x),y:Math.round(n.y+n.height*o.ratio-t.gap/2),width:Math.round(n.width),height:Math.round(t.gap)}),r(o.left,{x:n.x,y:n.y,width:n.width,height:n.height*o.ratio-t.gap/2}),r(o.right,{x:n.x,y:n.y+n.height*o.ratio+t.gap/2,width:n.width,height:n.height*(1-o.ratio)-t.gap/2})):l(o.orientation):o.type==="panel"?e.push({id:o.id,type:"panel",x:Math.round(n.x),y:Math.round(n.y),width:Math.round(n.width),height:Math.round(n.height)}):l(o)};return r(i,{x:0,y:0,width:t.size.width,height:t.size.height}),e}function f(i,t){if(i.type==="panel")return{width:_nullishCoalesce(_optionalChain([i, 'access', _2 => _2.minSize, 'optionalAccess', _3 => _3.width]), () => (0)),height:_nullishCoalesce(_optionalChain([i, 'access', _4 => _4.minSize, 'optionalAccess', _5 => _5.height]), () => (0))};if(i.type==="split"){if(i.orientation==="horizontal")return{width:f(i.left,t).width+t+f(i.right,t).width,height:Math.max(f(i.left,t).height,f(i.right,t).height)};if(i.orientation==="vertical")return{width:Math.max(f(i.left,t).width,f(i.right,t).width),height:f(i.left,t).height+t+f(i.right,t).height};l(i.orientation)}else l(i)}function P(i,t){let e=i.x+i.width/2,r=i.y+i.height/2,o=(t.x-e)/(i.width/2),n=(t.y-r)/(i.height/2);return Math.abs(o)>Math.abs(n)?o>0?"right":"left":n>0?"bottom":"top"}var v= (_class =class{__init() {this._root=null}constructor(t){;_class.prototype.__init.call(this);this._root=t}get root(){return this._root}set root(t){this._root=t}findNode(t){return this._root===null?null:this.findNodeInSubTree(t,this._root)}findNodeInSubTree(t,e){if(t===e.id)return e;if(e.type==="panel")return null;if(e.type==="split")return _nullishCoalesce(this.findNodeInSubTree(t,e.left), () => (this.findNodeInSubTree(t,e.right)));l(e)}findParentNode(t){return N(this._root,t)}replaceChildNode({parent:t,oldChildId:e,newChild:r}){if(this.findNode(e)===null)throw new Error(`Child node with id ${e} not found`);if(t.left.id===e)t.left=r;else if(t.right.id===e)t.right=r;else throw new Error(`Child node with id ${e} is not a child of the parent node with id ${t.id}`)}}, _class);var _= (_class2 =class{__init2() {this.MIN_RESIZE_RATIO=.1}__init3() {this.MAX_RESIZE_RATIO=.9}__init4() {this._listeners=new Set}__init5() {this._layoutRects=[]}__init6() {this._addPanelStrategy=M}constructor(t,e){;_class2.prototype.__init2.call(this);_class2.prototype.__init3.call(this);_class2.prototype.__init4.call(this);_class2.prototype.__init5.call(this);_class2.prototype.__init6.call(this);_class2.prototype.__init7.call(this);this._tree=new v(t),this._options={gap:_nullishCoalesce(_optionalChain([e, 'optionalAccess', _6 => _6.gap]), () => (10)),size:_nullishCoalesce(_optionalChain([e, 'optionalAccess', _7 => _7.size]), () => ({width:0,height:0}))},this._layoutRects=E(t,this._options)}get root(){return this._tree.root}set root(t){this._tree.root=t,this.syncLayoutRects()}get layoutRects(){return this._layoutRects}__init7() {this.subscribe=t=>(this._listeners.add(t),()=>{this._listeners.delete(t)})}setSize(t){this._options.size=t,this.syncLayoutRects()}removePanel(t){if(this._tree.root===null)throw new Error("Root node is null");let e=this._tree.findNode(t);if(e===null)throw new Error(`Node with id ${t} not found`);if(e.type!=="panel")throw new Error(`Node with id ${t} is not a panel`);if(e.id===this._tree.root.id){this._tree.root=null,this.syncLayoutRects();return}let r=this._tree.findParentNode(t);u(r!==null,"Parent node is not null");let o=r.left.id===e.id?r.right:r.left;if(r.id===this._tree.root.id){this._tree.root=o,this.syncLayoutRects();return}let n=this._tree.findParentNode(r.id);u(n!==null,"Grand parent node is not null"),this._tree.replaceChildNode({parent:n,oldChildId:r.id,newChild:o}),this.syncLayoutRects()}movePanel({sourceId:t,targetId:e,point:r}){if(this._tree.root===null)throw new Error("Root node is null");if(this._tree.root.type!=="split")throw new Error("Root node is not a split node");let o=this._tree.findNode(t);if(o===null)throw new Error(`Node with id ${t} not found`);if(o.type!=="panel")throw new Error(`Node with id ${t} is not a panel node`);let n=this._tree.findParentNode(t);u(n!==null);let a=this._tree.findNode(e);if(a===null)throw new Error(`Node with id ${e} not found`);if(a.type!=="panel")throw new Error(`Node with id ${e} is not a panel node`);let c=n.left.id===t?n.right:n.left,h=this.findRect(e);u(h!==null),u(h.type==="panel");let d=P(h,r);if(c.id===e){d==="left"?(n.orientation="horizontal",n.left=o,n.right=a):d==="right"?(n.orientation="horizontal",n.left=a,n.right=o):d==="top"?(n.orientation="vertical",n.left=o,n.right=a):d==="bottom"?(n.orientation="vertical",n.left=a,n.right=o):l(d),this.syncLayoutRects();return}let y=this._tree.findParentNode(n.id);y===null?this._tree.root=c:this._tree.replaceChildNode({parent:y,oldChildId:n.id,newChild:c});let s=this._tree.findParentNode(e);u(s!==null);let p=this.createSplitNode({direction:d,sourceNode:o,targetNode:a});this._tree.replaceChildNode({parent:s,oldChildId:e,newChild:p}),this.syncLayoutRects()}resizePanel(t,e){if(this._tree.root===null)throw new Error("Root node is null");let r=this.findRect(t);if(r===null)throw new Error(`Rect with id ${t} not found`);if(r.type!=="split")throw new Error(`Rect with id ${t} is not a split node`);let o=this._tree.findNode(t);u(o!==null,"Split node is not null"),u(o.type==="split","Split node is a split"),o.ratio=this.calculateResizeRatio(o,r,e),this.syncLayoutRects()}addPanel(t){let e=t.id;if(this._tree.root===null){this._tree.root={id:e,type:"panel"},this.syncLayoutRects();return}let r=t.targetId===void 0,{targetId:o,direction:n="right",ratio:a=.5}=r?this._addPanelStrategy.getPlacement(this._tree.root):t;if(u(o!==void 0,"targetId is not undefined"),o===this._tree.root.id){this._tree.root=this.createSplitNode({direction:n,ratio:a,sourceNode:{id:e,type:"panel"},targetNode:this._tree.root}),this.syncLayoutRects();return}let c=this._tree.findNode(o);if(c===null)throw new Error(`Node with id ${o} not found`);let h=this._tree.findParentNode(o);u(h!==null,"Target node parent is not null");let d=this.createSplitNode({direction:n,sourceNode:{id:e,type:"panel"},targetNode:c,ratio:a});this._tree.replaceChildNode({parent:h,oldChildId:o,newChild:d}),this.syncLayoutRects()}calculateDropTarget({draggedPanelId:t,targetPanelId:e,point:r}){u(t!==e,"Dragged panel id is not the same as target panel id");let o=this.findRect(e);return u(o!==null&&o.type==="panel"),{id:e,direction:P(o,r)}}emit(){this._listeners.forEach(t=>{t()})}syncLayoutRects(){this._layoutRects=E(this._tree.root,this._options),this.emit()}createSplitNode({direction:t,sourceNode:e,targetNode:r,ratio:o=.5}){switch(t){case"left":return{id:w(),type:"split",orientation:"horizontal",ratio:o,left:e,right:r};case"right":return{id:w(),type:"split",orientation:"horizontal",ratio:o,left:r,right:e};case"top":return{id:w(),type:"split",orientation:"vertical",ratio:o,left:e,right:r};case"bottom":return{id:w(),type:"split",orientation:"vertical",ratio:o,left:r,right:e};default:l(t)}}findRect(t){return _nullishCoalesce(this._layoutRects.find(e=>e.id===t), () => (null))}getSurroundingRect(t){let e=this._tree.findNode(t);if(u(e!==null,"Node is not null"),e.type==="panel"){let r=this.findRect(t);return u(r!==null,"Rect is not null"),u(r.type==="panel","Rect is a panel"),{x:r.x,y:r.y,width:r.width,height:r.height}}else if(e.type==="split"){let r=this.getSurroundingRect(e.left.id),o=this.getSurroundingRect(e.right.id);if(e.orientation==="horizontal")return{x:r.x,y:r.y,width:r.width+this._options.gap+o.width,height:r.height};if(e.orientation==="vertical")return{x:r.x,y:r.y,width:r.width,height:r.height+this._options.gap+o.height};l(e.orientation)}else l(e)}calculateResizeRatio(t,e,r){if(e.orientation==="horizontal"){let o=this.getSurroundingRect(t.left.id),n=this.getSurroundingRect(t.right.id),a=r.x-o.x,c=m(a/(o.width+e.width+n.width),this.MIN_RESIZE_RATIO,this.MAX_RESIZE_RATIO),h=o.width+this._options.gap+n.width,y=(f(t.left,this._options.gap).width+this._options.gap/2)/h,s=f(t.right,this._options.gap).width,p=(h-(s+this._options.gap/2))/h;return m(c,y,p)}else if(e.orientation==="vertical"){let o=this.getSurroundingRect(t.left.id),n=this.getSurroundingRect(t.right.id),a=r.y-o.y,c=m(a/(o.height+e.height+n.height),this.MIN_RESIZE_RATIO,this.MAX_RESIZE_RATIO),h=o.height+this._options.gap+n.height,y=(f(t.left,this._options.gap).height+this._options.gap/2)/h,s=f(t.right,this._options.gap).height,p=(h-(s+this._options.gap/2))/h;return m(c,y,p)}else l(e.orientation)}}, _class2);function D(i){_react.useEffect.call(void 0, ()=>{let t=document.body.style.cursor;return document.body.style.cursor=_nullishCoalesce(i, () => ("default")),()=>{document.body.style.cursor=t}},[i])}function L(i){let t=_react.useRef.call(void 0, i);return _react.useEffect.call(void 0, ()=>{t.current=i},[i]),_react.useCallback.call(void 0, (...e)=>t.current(...e),[])}function b(i,t,e,r){let o=L(e);_react.useEffect.call(void 0, ()=>(i.addEventListener(t,o,r),()=>{i.removeEventListener(t,o,r)}),[i,t,o,r])}function T(i){let t=_react.useRef.call(void 0, null),e=L(i);return _react.useEffect.call(void 0, ()=>{let r=t.current;if(r===null)throw new Error("Ref is not attached to an element");let o=new ResizeObserver(n=>{for(let a of n)e(a)});return o.observe(r),()=>{o.disconnect()}},[e]),t}function Ct(i,t){let[e]=_react.useState.call(void 0, ()=>{let s=typeof i=="function"?i():i;return new _(s,t)}),r=_react.useSyncExternalStore.call(void 0, e.subscribe,()=>e.layoutRects),[o,n]=_react.useState.call(void 0, null),[a,c]=_react.useState.call(void 0, null),[h,d]=_react.useState.call(void 0, null),y=T(s=>{e.setSize({width:s.contentRect.width,height:s.contentRect.height})});return b(document,"mousemove",s=>{if(o===null)return;let p=y.current;if(p===null)throw new Error("containerRef is not attached to an element");let R=p.getBoundingClientRect();e.resizePanel(o.id,{x:s.clientX-R.left,y:s.clientY-R.top})}),b(document,"mouseup",()=>{o!==null&&n(null)}),D(o===null?"default":C[o.orientation]),{containerRef:y,layoutRects:r,getRectProps:s=>{if(s.type==="split")return{style:{position:"absolute",left:s.x,top:s.y,width:s.width,height:s.height,cursor:C[s.orientation]},onMouseDown:()=>{n(s)}};if(s.type==="panel")return{style:{position:"absolute",left:s.x,top:s.y,width:s.width,height:s.height},onMouseMove:p=>{if(a===null)return;if(a.id===s.id){d(null);return}let R=e.calculateDropTarget({draggedPanelId:a.id,targetPanelId:s.id,point:{x:p.clientX,y:p.clientY}});d(R)},onMouseUp:p=>{if(a!==null){if(a.id===s.id){c(null),d(null);return}e.movePanel({sourceId:a.id,targetId:s.id,point:{x:p.clientX,y:p.clientY}}),c(null),d(null)}}};l(s)},getDropZoneProps:s=>a===null||!(s.id===_optionalChain([h, 'optionalAccess', _8 => _8.id]))?null:{style:Z(h.direction)},getDragHandleProps:s=>({onMouseDown:()=>{c(s)}}),draggingRect:a,addPanel:e.addPanel.bind(e),removePanel:e.removePanel.bind(e),root:e.root}}function Z(i){if(i==="top")return{position:"absolute",left:0,top:0,width:"100%",height:"50%"};if(i==="bottom")return{position:"absolute",left:0,top:"50%",width:"100%",height:"50%"};if(i==="left")return{position:"absolute",left:0,top:0,width:"50%",height:"100%"};if(i==="right")return{position:"absolute",left:"50%",top:0,width:"50%",height:"100%"};l(i)}var C={horizontal:"col-resize",vertical:"row-resize"};exports.bspStrategy = G; exports.evenlyDividedHorizontalStrategy = M; exports.useDockLayout = Ct;
package/dist/index.d.cts CHANGED
@@ -48,7 +48,7 @@ interface AddPanelStrategy {
48
48
  declare const evenlyDividedHorizontalStrategy: AddPanelStrategy;
49
49
  declare const bspStrategy: AddPanelStrategy;
50
50
 
51
- declare function useDockLayout<T extends HTMLElement>(initialRoot: LayoutNode | null, options?: LayoutManagerOptions): {
51
+ declare function useDockLayout<T extends HTMLElement>(initialRoot: LayoutNode | null | (() => LayoutNode | null), options?: LayoutManagerOptions): {
52
52
  containerRef: react.RefObject<T | null>;
53
53
  layoutRects: LayoutRect[];
54
54
  getRectProps: (rect: LayoutRect) => {
@@ -107,14 +107,14 @@ declare function useDockLayout<T extends HTMLElement>(initialRoot: LayoutNode |
107
107
  onMouseDown: () => void;
108
108
  };
109
109
  draggingRect: PanelLayoutRect | null;
110
- addPanel: (options?: {
111
- id?: string;
110
+ addPanel: (options: {
111
+ id: string;
112
112
  targetId?: string;
113
113
  direction?: Direction;
114
114
  ratio?: number;
115
115
  }) => void;
116
116
  removePanel: (id: string) => void;
117
- serialize: () => string;
117
+ root: LayoutNode | null;
118
118
  };
119
119
 
120
120
  export { type AddPanelStrategy, type LayoutManagerOptions, type LayoutNode, type LayoutRect, type PanelLayoutRect, type PanelNode, type SplitLayoutRect, type SplitNode, bspStrategy, evenlyDividedHorizontalStrategy, useDockLayout };
package/dist/index.d.ts CHANGED
@@ -48,7 +48,7 @@ interface AddPanelStrategy {
48
48
  declare const evenlyDividedHorizontalStrategy: AddPanelStrategy;
49
49
  declare const bspStrategy: AddPanelStrategy;
50
50
 
51
- declare function useDockLayout<T extends HTMLElement>(initialRoot: LayoutNode | null, options?: LayoutManagerOptions): {
51
+ declare function useDockLayout<T extends HTMLElement>(initialRoot: LayoutNode | null | (() => LayoutNode | null), options?: LayoutManagerOptions): {
52
52
  containerRef: react.RefObject<T | null>;
53
53
  layoutRects: LayoutRect[];
54
54
  getRectProps: (rect: LayoutRect) => {
@@ -107,14 +107,14 @@ declare function useDockLayout<T extends HTMLElement>(initialRoot: LayoutNode |
107
107
  onMouseDown: () => void;
108
108
  };
109
109
  draggingRect: PanelLayoutRect | null;
110
- addPanel: (options?: {
111
- id?: string;
110
+ addPanel: (options: {
111
+ id: string;
112
112
  targetId?: string;
113
113
  direction?: Direction;
114
114
  ratio?: number;
115
115
  }) => void;
116
116
  removePanel: (id: string) => void;
117
- serialize: () => string;
117
+ root: LayoutNode | null;
118
118
  };
119
119
 
120
120
  export { type AddPanelStrategy, type LayoutManagerOptions, type LayoutNode, type LayoutRect, type PanelLayoutRect, type PanelNode, type SplitLayoutRect, type SplitNode, bspStrategy, evenlyDividedHorizontalStrategy, useDockLayout };
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- function l(o){throw new Error(`Unexpected value: ${o}`)}function w(o,t){return o===null?null:S(t,o)}function S(o,t){if(t.type==="panel")return null;if(t.type==="split")return t.left.id===o||t.right.id===o?t:S(o,t.left)??S(o,t.right);l(t)}var E={getPlacement(o){let t=y(o)+1;return{targetId:o.id,direction:"right",ratio:t/(t+1)}}};function y(o){if(o.type==="panel")return 0;if(o.type==="split"){if(o.orientation==="horizontal")return 1+y(o.left)+y(o.right);if(o.orientation==="vertical")return 0+y(o.left)+y(o.right);l(o.orientation)}else l(o)}var B={getPlacement(o){let t=z(o),e=w(o,t.id);return{targetId:t.id,direction:e===null?"right":e.orientation==="horizontal"?"bottom":"right",ratio:.5}}};function z(o){if(o.type==="panel")return o;if(o.type==="split")return z(o.right);l(o)}import{useState as _,useSyncExternalStore as K}from"react";function m(o,t,e){return Math.max(t,Math.min(e,o))}var R=class{_listeners=new Set;subscribe(t){return this._listeners.add(t),()=>{this._listeners.delete(t)}}emit(){this._listeners.forEach(t=>{t()})}};function u(o,t){if(!o)throw new Error(t??"Invariant failed")}function b(o,t){if(o===null)return[];let e=[],n=(i,r)=>{i.type==="split"?i.orientation==="horizontal"?(e.push({id:i.id,type:"split",orientation:i.orientation,x:Math.round(r.x+r.width*i.ratio-t.gap/2),y:Math.round(r.y),width:Math.round(t.gap),height:Math.round(r.height)}),n(i.left,{x:r.x,y:r.y,width:r.width*i.ratio-t.gap/2,height:r.height}),n(i.right,{x:r.x+r.width*i.ratio+t.gap/2,y:r.y,width:r.width*(1-i.ratio)-t.gap/2,height:r.height})):i.orientation==="vertical"?(e.push({id:i.id,type:"split",orientation:i.orientation,x:Math.round(r.x),y:Math.round(r.y+r.height*i.ratio-t.gap/2),width:Math.round(r.width),height:Math.round(t.gap)}),n(i.left,{x:r.x,y:r.y,width:r.width,height:r.height*i.ratio-t.gap/2}),n(i.right,{x:r.x,y:r.y+r.height*i.ratio+t.gap/2,width:r.width,height:r.height*(1-i.ratio)-t.gap/2})):l(i.orientation):i.type==="panel"?e.push({id:i.id,type:"panel",x:Math.round(r.x),y:Math.round(r.y),width:Math.round(r.width),height:Math.round(r.height)}):l(i)};return n(o,{x:0,y:0,width:t.size.width,height:t.size.height}),e}function c(o,t){if(o.type==="panel")return{width:o.minSize?.width??0,height:o.minSize?.height??0};if(o.type==="split"){if(o.orientation==="horizontal")return{width:c(o.left,t).width+t+c(o.right,t).width,height:Math.max(c(o.left,t).height,c(o.right,t).height)};if(o.orientation==="vertical")return{width:Math.max(c(o.left,t).width,c(o.right,t).width),height:c(o.left,t).height+t+c(o.right,t).height};l(o.orientation)}else l(o)}function x(o,t){let e=o.x+o.width/2,n=o.y+o.height/2,i=(t.x-e)/(o.width/2),r=(t.y-n)/(o.height/2);return Math.abs(i)>Math.abs(r)?i>0?"right":"left":r>0?"bottom":"top"}var N=class{_root=null;constructor(t){this._root=t}get root(){return this._root}set root(t){this._root=t}findNode(t){return this._root===null?null:this.findNodeInSubTree(t,this._root)}findNodeInSubTree(t,e){if(t===e.id)return e;if(e.type==="panel")return null;if(e.type==="split")return this.findNodeInSubTree(t,e.left)??this.findNodeInSubTree(t,e.right);l(e)}findParentNode(t){return w(this._root,t)}replaceChildNode({parentId:t,oldChildId:e,newChild:n}){let i=this.findNode(t);if(i===null)throw new Error(`Parent node with id ${t} not found`);if(i.type!=="split")throw new Error(`Parent node with id ${t} is not a split node`);if(this.findNode(e)===null)throw new Error(`Child node with id ${e} not found`);if(i.left.id===e)i.left=n;else if(i.right.id===e)i.right=n;else throw new Error(`Child node with id ${e} is not a child of the parent node with id ${t}`)}};var v=class{_tree;_options;_eventEmitter=new R;_layoutRects=[];_addPanelStrategy=E;constructor(t,e){this._tree=new N(t),this._options={gap:e?.gap??10,size:e?.size??{width:0,height:0}},this._layoutRects=b(t,this._options)}get root(){return this._tree.root}set root(t){this._tree.root=t,this.syncLayoutRects()}get layoutRects(){return this._layoutRects}subscribe=t=>this._eventEmitter.subscribe(t);setSize(t){this._options.size=t,this.syncLayoutRects()}removePanel(t){if(this._tree.root===null)throw new Error("Root node is null");let e=this._tree.findNode(t);if(e===null)throw new Error(`Node with id ${t} not found`);if(e.type!=="panel")throw new Error(`Node with id ${t} is not a panel`);if(e.id===this._tree.root.id){this._tree.root=null,this.syncLayoutRects();return}let n=this._tree.findParentNode(t);u(n!==null,"Parent node is not null");let i=n.left.id===e.id?n.right:n.left;if(n.id===this._tree.root.id){this._tree.root=i,this.syncLayoutRects();return}let r=this._tree.findParentNode(n.id);u(r!==null,"Grand parent node is not null"),this._tree.replaceChildNode({parentId:r.id,oldChildId:n.id,newChild:i}),this.syncLayoutRects()}movePanel({sourceId:t,targetId:e,point:n}){if(this._tree.root===null)throw new Error("Root node is null");if(this._tree.root.type!=="split")throw new Error("Root node is not a split node");let i=this._tree.findNode(t);if(i===null)throw new Error(`Node with id ${t} not found`);if(i.type!=="panel")throw new Error(`Node with id ${t} is not a panel node`);let r=this._tree.findParentNode(t);u(r!==null);let a=this._tree.findNode(e);if(a===null)throw new Error(`Node with id ${e} not found`);if(a.type!=="panel")throw new Error(`Node with id ${e} is not a panel node`);let h=r.left.id===t?r.right:r.left,d=this.findRect(e);u(d!==null),u(d.type==="panel");let p=x(d,n);if(h.id===e){p==="left"?(r.orientation="horizontal",r.left=i,r.right=a):p==="right"?(r.orientation="horizontal",r.left=a,r.right=i):p==="top"?(r.orientation="vertical",r.left=i,r.right=a):p==="bottom"?(r.orientation="vertical",r.left=a,r.right=i):l(p),this.syncLayoutRects();return}let g=this._tree.findParentNode(r.id);g===null?this._tree.root=h:g.right.id===r.id?g.right=h:g.left.id===r.id&&(g.left=h);let s=this._tree.findParentNode(e);u(s!==null);let f=this.createSplitNode({direction:p,sourceNode:i,targetNode:a});s.left.id===e?s.left=f:s.right.id===e?s.right=f:u(!1),this.syncLayoutRects()}resizePanel(t,e){if(this._tree.root===null)throw new Error("Root node is null");let n=this.findRect(t);if(n===null)throw new Error(`Rect with id ${t} not found`);if(n.type!=="split")throw new Error(`Rect with id ${t} is not a split node`);if(n.orientation==="horizontal"){let{left:i,right:r}=this.getSplitChildRects(n.id),a=e.x-i.x,h=i.width+n.width+r.width,d=m(a/h,.1,.9);this.setSplitRatio(n.id,d)}else if(n.orientation==="vertical"){let{left:i,right:r}=this.getSplitChildRects(n.id),a=e.y-i.y,h=i.height+n.height+r.height,d=m(a/h,.1,.9);this.setSplitRatio(n.id,d)}else l(n.orientation)}addPanel(t){let e=t?.id??crypto.randomUUID();if(this._tree.root===null){this._tree.root={id:e,type:"panel"},this.syncLayoutRects();return}let n=t?.targetId===void 0,{targetId:i,direction:r="right",ratio:a=.5}=n?this._addPanelStrategy.getPlacement(this._tree.root):t;if(u(i!==void 0,"targetId is not undefined"),i===this._tree.root.id){this._tree.root=this.createSplitNode({direction:r,ratio:a,sourceNode:{id:e,type:"panel"},targetNode:this._tree.root}),this.syncLayoutRects();return}let h=this._tree.findNode(i);if(h===null)throw new Error(`Node with id ${i} not found`);let d=this._tree.findParentNode(i);u(d!==null,"Target node parent is not null");let p=this.createSplitNode({direction:r,sourceNode:{id:e,type:"panel"},targetNode:h,ratio:a});this._tree.replaceChildNode({parentId:d.id,oldChildId:i,newChild:p}),this.syncLayoutRects()}calculateDropTarget({draggedPanelId:t,targetPanelId:e,point:n}){u(t!==e,"Dragged panel id is not the same as target panel id");let i=this.findRect(e);return u(i!==null&&i.type==="panel"),{id:e,direction:x(i,n)}}serialize(){return JSON.stringify({root:this._tree.root,options:{gap:this._options.gap}})}emit(){this._eventEmitter.emit()}syncLayoutRects(){this._layoutRects=b(this._tree.root,this._options),this.emit()}createSplitNode({direction:t,sourceNode:e,targetNode:n,ratio:i=.5}){switch(t){case"left":return{id:crypto.randomUUID(),type:"split",orientation:"horizontal",ratio:i,left:e,right:n};case"right":return{id:crypto.randomUUID(),type:"split",orientation:"horizontal",ratio:i,left:n,right:e};case"top":return{id:crypto.randomUUID(),type:"split",orientation:"vertical",ratio:i,left:e,right:n};case"bottom":return{id:crypto.randomUUID(),type:"split",orientation:"vertical",ratio:i,left:n,right:e};default:l(t)}}setSplitRatio(t,e){let n=this._tree.findNode(t);if(u(n!==null,"Node is not null"),u(n.type==="split","Node is a split"),n.orientation==="horizontal"){let i=this.getSurroundingRect(n.left.id).width+this._options.gap+this.getSurroundingRect(n.right.id).width,r=c(n.left,this._options.gap).width,a=c(n.right,this._options.gap).width,h=(r+this._options.gap/2)/i,d=(i-(a+this._options.gap/2))/i;n.ratio=m(e,h,d)}else if(n.orientation==="vertical"){let i=this.getSurroundingRect(n.left.id).height+this._options.gap+this.getSurroundingRect(n.right.id).height,r=c(n.left,this._options.gap).height,a=c(n.right,this._options.gap).height,h=(r+this._options.gap/2)/i,d=(i-(a+this._options.gap/2))/i;n.ratio=m(e,h,d)}else l(n.orientation);this.syncLayoutRects()}findRect(t){return this._layoutRects.find(e=>e.id===t)??null}getSurroundingRect(t){let e=this._tree.findNode(t);if(u(e!==null,"Node is not null"),e.type==="panel"){let r=this.findRect(t);return u(r!==null,"Rect is not null"),u(r.type==="panel","Rect is a panel"),{x:r.x,y:r.y,width:r.width,height:r.height}}let n=this.getSurroundingRect(e.left.id),i=this.getSurroundingRect(e.right.id);if(e.orientation==="horizontal")return{x:n.x,y:n.y,width:n.width+this._options.gap+i.width,height:n.height};if(e.orientation==="vertical")return{x:n.x,y:n.y,width:n.width,height:n.height+this._options.gap+i.height};l(e.orientation)}getSplitChildRects(t){let e=this._tree.findNode(t);return u(e!==null&&e.type==="split"),{left:this.getSurroundingRect(e.left.id),right:this.getSurroundingRect(e.right.id)}}};import{useEffect as O}from"react";function M(o){O(()=>{let t=document.body.style.cursor;return document.body.style.cursor=o??"default",()=>{document.body.style.cursor=t}},[o])}import{useEffect as W}from"react";import{useCallback as $,useEffect as U,useRef as I}from"react";function L(o){let t=I(o);return U(()=>{t.current=o},[o]),$((...e)=>t.current(...e),[])}function P(o,t,e,n){let i=L(e);W(()=>(o.addEventListener(t,i,n),()=>{o.removeEventListener(t,i,n)}),[o,t,i,n])}import{useEffect as H,useRef as A}from"react";function D(o){let t=A(null),e=L(o);return H(()=>{let n=t.current;if(n===null)throw new Error("Ref is not attached to an element");let i=new ResizeObserver(r=>{for(let a of r)e(a)});return i.observe(n),()=>{i.disconnect()}},[e]),t}function Ot(o,t){let[e]=_(()=>new v(o,t)),n=K(e.subscribe,()=>e.layoutRects),[i,r]=_(null),[a,h]=_(null),[d,p]=_(null),g=D(s=>{e.setSize({width:s.contentRect.width,height:s.contentRect.height})});return P(document,"mousemove",s=>{i!==null&&e.resizePanel(i.id,{x:s.clientX,y:s.clientY})}),P(document,"mouseup",()=>{i!==null&&r(null)}),M(i===null?"default":T[i.orientation]),{containerRef:g,layoutRects:n,getRectProps:s=>{if(s.type==="split")return{style:{position:"absolute",left:s.x,top:s.y,width:s.width,height:s.height,cursor:T[s.orientation]},onMouseDown:()=>{r(s)}};if(s.type==="panel")return{style:{position:"absolute",left:s.x,top:s.y,width:s.width,height:s.height},onMouseMove:f=>{if(a===null)return;if(a.id===s.id){p(null);return}let C=e.calculateDropTarget({draggedPanelId:a.id,targetPanelId:s.id,point:{x:f.clientX,y:f.clientY}});p(C)},onMouseUp:f=>{if(a!==null){if(a.id===s.id){h(null),p(null);return}e.movePanel({sourceId:a.id,targetId:s.id,point:{x:f.clientX,y:f.clientY}}),h(null),p(null)}}};l(s)},getDropZoneProps:s=>a===null||!(s.id===d?.id)?null:{style:k(d.direction)},getDragHandleProps:s=>({onMouseDown:()=>{h(s)}}),draggingRect:a,addPanel:e.addPanel.bind(e),removePanel:e.removePanel.bind(e),serialize:e.serialize.bind(e)}}function k(o){if(o==="top")return{position:"absolute",left:0,top:0,width:"100%",height:"50%"};if(o==="bottom")return{position:"absolute",left:0,top:"50%",width:"100%",height:"50%"};if(o==="left")return{position:"absolute",left:0,top:0,width:"50%",height:"100%"};if(o==="right")return{position:"absolute",left:"50%",top:0,width:"50%",height:"100%"};l(o)}var T={horizontal:"col-resize",vertical:"row-resize"};export{B as bspStrategy,E as evenlyDividedHorizontalStrategy,Ot as useDockLayout};
1
+ function l(i){throw new Error(`Unexpected value: ${i}`)}function N(i,t){return i===null?null:x(t,i)}function x(i,t){if(t.type==="panel")return null;if(t.type==="split")return t.left.id===i||t.right.id===i?t:x(i,t.left)??x(i,t.right);l(t)}var M={getPlacement(i){let t=g(i)+1;return{targetId:i.id,direction:"right",ratio:t/(t+1)}}};function g(i){if(i.type==="panel")return 0;if(i.type==="split"){if(i.orientation==="horizontal")return 1+g(i.left)+g(i.right);if(i.orientation==="vertical")return g(i.left)+g(i.right);l(i.orientation)}else l(i)}var G={getPlacement(i){let t=z(i),e=N(i,t.id);return{targetId:t.id,direction:e===null?"right":e.orientation==="horizontal"?"bottom":"right",ratio:.5}}};function z(i){if(i.type==="panel")return i;if(i.type==="split")return z(i.right);l(i)}import{useState as S,useSyncExternalStore as U}from"react";function m(i,t,e){return Math.max(t,Math.min(e,i))}function w(){return typeof crypto<"u"&&crypto.randomUUID?crypto.randomUUID():Date.now().toString(36)}function u(i,t){if(!i)throw new Error(t??"Invariant failed")}function E(i,t){if(i===null)return[];let e=[],r=(o,n)=>{o.type==="split"?o.orientation==="horizontal"?(e.push({id:o.id,type:"split",orientation:o.orientation,x:Math.round(n.x+n.width*o.ratio-t.gap/2),y:Math.round(n.y),width:Math.round(t.gap),height:Math.round(n.height)}),r(o.left,{x:n.x,y:n.y,width:n.width*o.ratio-t.gap/2,height:n.height}),r(o.right,{x:n.x+n.width*o.ratio+t.gap/2,y:n.y,width:n.width*(1-o.ratio)-t.gap/2,height:n.height})):o.orientation==="vertical"?(e.push({id:o.id,type:"split",orientation:o.orientation,x:Math.round(n.x),y:Math.round(n.y+n.height*o.ratio-t.gap/2),width:Math.round(n.width),height:Math.round(t.gap)}),r(o.left,{x:n.x,y:n.y,width:n.width,height:n.height*o.ratio-t.gap/2}),r(o.right,{x:n.x,y:n.y+n.height*o.ratio+t.gap/2,width:n.width,height:n.height*(1-o.ratio)-t.gap/2})):l(o.orientation):o.type==="panel"?e.push({id:o.id,type:"panel",x:Math.round(n.x),y:Math.round(n.y),width:Math.round(n.width),height:Math.round(n.height)}):l(o)};return r(i,{x:0,y:0,width:t.size.width,height:t.size.height}),e}function f(i,t){if(i.type==="panel")return{width:i.minSize?.width??0,height:i.minSize?.height??0};if(i.type==="split"){if(i.orientation==="horizontal")return{width:f(i.left,t).width+t+f(i.right,t).width,height:Math.max(f(i.left,t).height,f(i.right,t).height)};if(i.orientation==="vertical")return{width:Math.max(f(i.left,t).width,f(i.right,t).width),height:f(i.left,t).height+t+f(i.right,t).height};l(i.orientation)}else l(i)}function P(i,t){let e=i.x+i.width/2,r=i.y+i.height/2,o=(t.x-e)/(i.width/2),n=(t.y-r)/(i.height/2);return Math.abs(o)>Math.abs(n)?o>0?"right":"left":n>0?"bottom":"top"}var v=class{_root=null;constructor(t){this._root=t}get root(){return this._root}set root(t){this._root=t}findNode(t){return this._root===null?null:this.findNodeInSubTree(t,this._root)}findNodeInSubTree(t,e){if(t===e.id)return e;if(e.type==="panel")return null;if(e.type==="split")return this.findNodeInSubTree(t,e.left)??this.findNodeInSubTree(t,e.right);l(e)}findParentNode(t){return N(this._root,t)}replaceChildNode({parent:t,oldChildId:e,newChild:r}){if(this.findNode(e)===null)throw new Error(`Child node with id ${e} not found`);if(t.left.id===e)t.left=r;else if(t.right.id===e)t.right=r;else throw new Error(`Child node with id ${e} is not a child of the parent node with id ${t.id}`)}};var _=class{MIN_RESIZE_RATIO=.1;MAX_RESIZE_RATIO=.9;_tree;_options;_listeners=new Set;_layoutRects=[];_addPanelStrategy=M;constructor(t,e){this._tree=new v(t),this._options={gap:e?.gap??10,size:e?.size??{width:0,height:0}},this._layoutRects=E(t,this._options)}get root(){return this._tree.root}set root(t){this._tree.root=t,this.syncLayoutRects()}get layoutRects(){return this._layoutRects}subscribe=t=>(this._listeners.add(t),()=>{this._listeners.delete(t)});setSize(t){this._options.size=t,this.syncLayoutRects()}removePanel(t){if(this._tree.root===null)throw new Error("Root node is null");let e=this._tree.findNode(t);if(e===null)throw new Error(`Node with id ${t} not found`);if(e.type!=="panel")throw new Error(`Node with id ${t} is not a panel`);if(e.id===this._tree.root.id){this._tree.root=null,this.syncLayoutRects();return}let r=this._tree.findParentNode(t);u(r!==null,"Parent node is not null");let o=r.left.id===e.id?r.right:r.left;if(r.id===this._tree.root.id){this._tree.root=o,this.syncLayoutRects();return}let n=this._tree.findParentNode(r.id);u(n!==null,"Grand parent node is not null"),this._tree.replaceChildNode({parent:n,oldChildId:r.id,newChild:o}),this.syncLayoutRects()}movePanel({sourceId:t,targetId:e,point:r}){if(this._tree.root===null)throw new Error("Root node is null");if(this._tree.root.type!=="split")throw new Error("Root node is not a split node");let o=this._tree.findNode(t);if(o===null)throw new Error(`Node with id ${t} not found`);if(o.type!=="panel")throw new Error(`Node with id ${t} is not a panel node`);let n=this._tree.findParentNode(t);u(n!==null);let a=this._tree.findNode(e);if(a===null)throw new Error(`Node with id ${e} not found`);if(a.type!=="panel")throw new Error(`Node with id ${e} is not a panel node`);let c=n.left.id===t?n.right:n.left,h=this.findRect(e);u(h!==null),u(h.type==="panel");let d=P(h,r);if(c.id===e){d==="left"?(n.orientation="horizontal",n.left=o,n.right=a):d==="right"?(n.orientation="horizontal",n.left=a,n.right=o):d==="top"?(n.orientation="vertical",n.left=o,n.right=a):d==="bottom"?(n.orientation="vertical",n.left=a,n.right=o):l(d),this.syncLayoutRects();return}let y=this._tree.findParentNode(n.id);y===null?this._tree.root=c:this._tree.replaceChildNode({parent:y,oldChildId:n.id,newChild:c});let s=this._tree.findParentNode(e);u(s!==null);let p=this.createSplitNode({direction:d,sourceNode:o,targetNode:a});this._tree.replaceChildNode({parent:s,oldChildId:e,newChild:p}),this.syncLayoutRects()}resizePanel(t,e){if(this._tree.root===null)throw new Error("Root node is null");let r=this.findRect(t);if(r===null)throw new Error(`Rect with id ${t} not found`);if(r.type!=="split")throw new Error(`Rect with id ${t} is not a split node`);let o=this._tree.findNode(t);u(o!==null,"Split node is not null"),u(o.type==="split","Split node is a split"),o.ratio=this.calculateResizeRatio(o,r,e),this.syncLayoutRects()}addPanel(t){let e=t.id;if(this._tree.root===null){this._tree.root={id:e,type:"panel"},this.syncLayoutRects();return}let r=t.targetId===void 0,{targetId:o,direction:n="right",ratio:a=.5}=r?this._addPanelStrategy.getPlacement(this._tree.root):t;if(u(o!==void 0,"targetId is not undefined"),o===this._tree.root.id){this._tree.root=this.createSplitNode({direction:n,ratio:a,sourceNode:{id:e,type:"panel"},targetNode:this._tree.root}),this.syncLayoutRects();return}let c=this._tree.findNode(o);if(c===null)throw new Error(`Node with id ${o} not found`);let h=this._tree.findParentNode(o);u(h!==null,"Target node parent is not null");let d=this.createSplitNode({direction:n,sourceNode:{id:e,type:"panel"},targetNode:c,ratio:a});this._tree.replaceChildNode({parent:h,oldChildId:o,newChild:d}),this.syncLayoutRects()}calculateDropTarget({draggedPanelId:t,targetPanelId:e,point:r}){u(t!==e,"Dragged panel id is not the same as target panel id");let o=this.findRect(e);return u(o!==null&&o.type==="panel"),{id:e,direction:P(o,r)}}emit(){this._listeners.forEach(t=>{t()})}syncLayoutRects(){this._layoutRects=E(this._tree.root,this._options),this.emit()}createSplitNode({direction:t,sourceNode:e,targetNode:r,ratio:o=.5}){switch(t){case"left":return{id:w(),type:"split",orientation:"horizontal",ratio:o,left:e,right:r};case"right":return{id:w(),type:"split",orientation:"horizontal",ratio:o,left:r,right:e};case"top":return{id:w(),type:"split",orientation:"vertical",ratio:o,left:e,right:r};case"bottom":return{id:w(),type:"split",orientation:"vertical",ratio:o,left:r,right:e};default:l(t)}}findRect(t){return this._layoutRects.find(e=>e.id===t)??null}getSurroundingRect(t){let e=this._tree.findNode(t);if(u(e!==null,"Node is not null"),e.type==="panel"){let r=this.findRect(t);return u(r!==null,"Rect is not null"),u(r.type==="panel","Rect is a panel"),{x:r.x,y:r.y,width:r.width,height:r.height}}else if(e.type==="split"){let r=this.getSurroundingRect(e.left.id),o=this.getSurroundingRect(e.right.id);if(e.orientation==="horizontal")return{x:r.x,y:r.y,width:r.width+this._options.gap+o.width,height:r.height};if(e.orientation==="vertical")return{x:r.x,y:r.y,width:r.width,height:r.height+this._options.gap+o.height};l(e.orientation)}else l(e)}calculateResizeRatio(t,e,r){if(e.orientation==="horizontal"){let o=this.getSurroundingRect(t.left.id),n=this.getSurroundingRect(t.right.id),a=r.x-o.x,c=m(a/(o.width+e.width+n.width),this.MIN_RESIZE_RATIO,this.MAX_RESIZE_RATIO),h=o.width+this._options.gap+n.width,y=(f(t.left,this._options.gap).width+this._options.gap/2)/h,s=f(t.right,this._options.gap).width,p=(h-(s+this._options.gap/2))/h;return m(c,y,p)}else if(e.orientation==="vertical"){let o=this.getSurroundingRect(t.left.id),n=this.getSurroundingRect(t.right.id),a=r.y-o.y,c=m(a/(o.height+e.height+n.height),this.MIN_RESIZE_RATIO,this.MAX_RESIZE_RATIO),h=o.height+this._options.gap+n.height,y=(f(t.left,this._options.gap).height+this._options.gap/2)/h,s=f(t.right,this._options.gap).height,p=(h-(s+this._options.gap/2))/h;return m(c,y,p)}else l(e.orientation)}};import{useEffect as I}from"react";function D(i){I(()=>{let t=document.body.style.cursor;return document.body.style.cursor=i??"default",()=>{document.body.style.cursor=t}},[i])}import{useEffect as W}from"react";import{useCallback as O,useEffect as A,useRef as $}from"react";function L(i){let t=$(i);return A(()=>{t.current=i},[i]),O((...e)=>t.current(...e),[])}function b(i,t,e,r){let o=L(e);W(()=>(i.addEventListener(t,o,r),()=>{i.removeEventListener(t,o,r)}),[i,t,o,r])}import{useEffect as H,useRef as K}from"react";function T(i){let t=K(null),e=L(i);return H(()=>{let r=t.current;if(r===null)throw new Error("Ref is not attached to an element");let o=new ResizeObserver(n=>{for(let a of n)e(a)});return o.observe(r),()=>{o.disconnect()}},[e]),t}function Ct(i,t){let[e]=S(()=>{let s=typeof i=="function"?i():i;return new _(s,t)}),r=U(e.subscribe,()=>e.layoutRects),[o,n]=S(null),[a,c]=S(null),[h,d]=S(null),y=T(s=>{e.setSize({width:s.contentRect.width,height:s.contentRect.height})});return b(document,"mousemove",s=>{if(o===null)return;let p=y.current;if(p===null)throw new Error("containerRef is not attached to an element");let R=p.getBoundingClientRect();e.resizePanel(o.id,{x:s.clientX-R.left,y:s.clientY-R.top})}),b(document,"mouseup",()=>{o!==null&&n(null)}),D(o===null?"default":C[o.orientation]),{containerRef:y,layoutRects:r,getRectProps:s=>{if(s.type==="split")return{style:{position:"absolute",left:s.x,top:s.y,width:s.width,height:s.height,cursor:C[s.orientation]},onMouseDown:()=>{n(s)}};if(s.type==="panel")return{style:{position:"absolute",left:s.x,top:s.y,width:s.width,height:s.height},onMouseMove:p=>{if(a===null)return;if(a.id===s.id){d(null);return}let R=e.calculateDropTarget({draggedPanelId:a.id,targetPanelId:s.id,point:{x:p.clientX,y:p.clientY}});d(R)},onMouseUp:p=>{if(a!==null){if(a.id===s.id){c(null),d(null);return}e.movePanel({sourceId:a.id,targetId:s.id,point:{x:p.clientX,y:p.clientY}}),c(null),d(null)}}};l(s)},getDropZoneProps:s=>a===null||!(s.id===h?.id)?null:{style:Z(h.direction)},getDragHandleProps:s=>({onMouseDown:()=>{c(s)}}),draggingRect:a,addPanel:e.addPanel.bind(e),removePanel:e.removePanel.bind(e),root:e.root}}function Z(i){if(i==="top")return{position:"absolute",left:0,top:0,width:"100%",height:"50%"};if(i==="bottom")return{position:"absolute",left:0,top:"50%",width:"100%",height:"50%"};if(i==="left")return{position:"absolute",left:0,top:0,width:"50%",height:"100%"};if(i==="right")return{position:"absolute",left:"50%",top:0,width:"50%",height:"100%"};l(i)}var C={horizontal:"col-resize",vertical:"row-resize"};export{G as bspStrategy,M as evenlyDividedHorizontalStrategy,Ct as useDockLayout};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-headless-dock-layout",
3
- "version": "0.2.3",
3
+ "version": "0.3.1",
4
4
  "description": "A lightweight, headless dock layout library for React.",
5
5
  "type": "module",
6
6
  "exports": {
@@ -23,7 +23,7 @@
23
23
  "files": [
24
24
  "dist"
25
25
  ],
26
- "license": "ISC",
26
+ "license": "MIT",
27
27
  "devDependencies": {
28
28
  "@biomejs/biome": "2.3.10",
29
29
  "@total-typescript/tsconfig": "^1.0.4",