react-headless-dock-layout 0.1.3 → 0.2.2

package/dist/index.cjs

@@ -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 a(r){throw new Error(`Unexpected value: ${r}`)}function R(r,t){return r===null?null:S(t,r)}function S(r,t){if(t.type==="panel")return null;if(t.type==="split")return t.left.id===r||t.right.id===r?t:_nullishCoalesce(S(r,t.left), () => (S(r,t.right)));a(t)}var M={getPlacement(r){let t=m(r)+1;return{targetId:r.id,direction:"right",ratio:t/(t+1)}}};function m(r){if(r.type==="panel")return 0;if(r.type==="split"){if(r.orientation==="horizontal")return 1+m(r.left)+m(r.right);if(r.orientation==="vertical")return 0+m(r.left)+m(r.right);a(r.orientation)}else a(r)}var X={getPlacement(r){let t=z(r),e=R(r,t.id);return{targetId:t.id,direction:e===null?"right":e.orientation==="horizontal"?"bottom":"right",ratio:.5}}};function z(r){if(r.type==="panel")return r;if(r.type==="split")return z(r.right);a(r)}var _react = require('react');function u(r,t){if(!r)throw new Error(_nullishCoalesce(t, () => ("Invariant failed")))}function w(r,t,e){return Math.max(t,Math.min(e,r))}var N= (_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 P(r,t){if(r===null)return[];let e=[],n=(o,i)=>{o.type==="split"?o.orientation==="horizontal"?(e.push({id:o.id,type:"split",orientation:o.orientation,x:Math.round(i.x+i.width*o.ratio-t.gap/2),y:Math.round(i.y),width:Math.round(t.gap),height:Math.round(i.height)}),n(o.left,{x:i.x,y:i.y,width:i.width*o.ratio-t.gap/2,height:i.height}),n(o.right,{x:i.x+i.width*o.ratio+t.gap/2,y:i.y,width:i.width*(1-o.ratio)-t.gap/2,height:i.height})):o.orientation==="vertical"?(e.push({id:o.id,type:"split",orientation:o.orientation,x:Math.round(i.x),y:Math.round(i.y+i.height*o.ratio-t.gap/2),width:Math.round(i.width),height:Math.round(t.gap)}),n(o.left,{x:i.x,y:i.y,width:i.width,height:i.height*o.ratio-t.gap/2}),n(o.right,{x:i.x,y:i.y+i.height*o.ratio+t.gap/2,width:i.width,height:i.height*(1-o.ratio)-t.gap/2})):a(o.orientation):o.type==="panel"?e.push({id:o.id,type:"panel",x:Math.round(i.x),y:Math.round(i.y),width:Math.round(i.width),height:Math.round(i.height)}):a(o)};return n(r,{x:0,y:0,width:t.size.width,height:t.size.height}),e}function c(r,t){if(r.type==="panel")return{width:_nullishCoalesce(_optionalChain([r, 'access', _2 => _2.minSize, 'optionalAccess', _3 => _3.width]), () => (0)),height:_nullishCoalesce(_optionalChain([r, 'access', _4 => _4.minSize, 'optionalAccess', _5 => _5.height]), () => (0))};if(r.type==="split"){if(r.orientation==="horizontal")return{width:c(r.left,t).width+t+c(r.right,t).width,height:Math.max(c(r.left,t).height,c(r.right,t).height)};if(r.orientation==="vertical")return{width:Math.max(c(r.left,t).width,c(r.right,t).width),height:c(r.left,t).height+t+c(r.right,t).height};a(r.orientation)}else a(r)}function x(r,t){let e=r.x+r.width/2,n=r.y+r.height/2,o=(t.x-e)/(r.width/2),i=(t.y-n)/(r.height/2);return Math.abs(o)>Math.abs(i)?o>0?"right":"left":i>0?"bottom":"top"}var _= (_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)));a(e)}findParentNode(t){return R(this._root,t)}replaceChildNode({parentId:t,oldChildId:e,newChild:n}){let o=this.findNode(t);if(o===null)throw new Error(`Parent node with id ${t} not found`);if(o.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(o.left.id===e)o.left=n;else if(o.right.id===e)o.right=n;else throw new Error(`Child node with id ${e} is not a child of the parent node with id ${t}`)}}, _class2);var L= (_class3 =class{__init3() {this._eventEmitter=new N}__init4() {this._layoutRects=[]}__init5() {this._addPanelStrategy=M}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 _(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=P(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 o=n.left.id===e.id?n.right:n.left;if(n.id===this._tree.root.id){this._tree.root=o,this.syncLayoutRects();return}let i=this._tree.findParentNode(n.id);u(i!==null,"Grand parent node is not null"),this._tree.replaceChildNode({parentId:i.id,oldChildId:n.id,newChild:o}),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 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 i=this._tree.findParentNode(t);u(i!==null);let h=this._tree.findNode(e);if(h===null)throw new Error(`Node with id ${e} not found`);if(h.type!=="panel")throw new Error(`Node with id ${e} is not a panel node`);let l=i.left.id===t?i.right:i.left,d=this.findRect(e);u(d!==null),u(d.type==="panel");let f=x(d,n);if(l.id===e){f==="left"?(i.orientation="horizontal",i.left=o,i.right=h):f==="right"?(i.orientation="horizontal",i.left=h,i.right=o):f==="top"?(i.orientation="vertical",i.left=o,i.right=h):f==="bottom"?(i.orientation="vertical",i.left=h,i.right=o):a(f),this.syncLayoutRects();return}let g=this._tree.findParentNode(i.id);g===null?this._tree.root=l:g.right.id===i.id?g.right=l:g.left.id===i.id&&(g.left=l);let s=this._tree.findParentNode(e);u(s!==null);let p=this.createSplitNode({direction:f,sourceNode:o,targetNode:h});s.left.id===e?s.left=p:s.right.id===e?s.right=p: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:o,right:i}=this.getSplitChildRects(n.id),h=e.x-o.x,l=o.width+n.width+i.width,d=w(h/l,.1,.9);this.setSplitRatio(n.id,d)}else if(n.orientation==="vertical"){let{left:o,right:i}=this.getSplitChildRects(n.id),h=e.y-o.y,l=o.height+n.height+i.height,d=w(h/l,.1,.9);this.setSplitRatio(n.id,d)}else a(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:o,direction:i="right",ratio:h=.5}=n?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:i,ratio:h,sourceNode:{id:e,type:"panel"},targetNode:this._tree.root}),this.syncLayoutRects();return}let l=this._tree.findNode(o);if(l===null)throw new Error(`Node with id ${o} not found`);let d=this._tree.findParentNode(o);u(d!==null,"Target node parent is not null");let f=this.createSplitNode({direction:i,sourceNode:{id:e,type:"panel"},targetNode:l,ratio:h});this._tree.replaceChildNode({parentId:d.id,oldChildId:o,newChild:f}),this.syncLayoutRects()}calculateDropTarget({draggedPanelId:t,targetPanelId:e,point:n}){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:x(o,n)}}serialize(){return JSON.stringify({root:this._tree.root,options:{gap:this._options.gap}})}emit(){this._eventEmitter.emit()}syncLayoutRects(){this._layoutRects=P(this._tree.root,this._options),this.emit()}createSplitNode({direction:t,sourceNode:e,targetNode:n,ratio:o=.5}){switch(t){case"left":return{id:crypto.randomUUID(),type:"split",orientation:"horizontal",ratio:o,left:e,right:n};case"right":return{id:crypto.randomUUID(),type:"split",orientation:"horizontal",ratio:o,left:n,right:e};case"top":return{id:crypto.randomUUID(),type:"split",orientation:"vertical",ratio:o,left:e,right:n};case"bottom":return{id:crypto.randomUUID(),type:"split",orientation:"vertical",ratio:o,left:n,right:e};default:a(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 o=this.getSurroundingRect(n.left.id).width+this._options.gap+this.getSurroundingRect(n.right.id).width,i=c(n.left,this._options.gap).width,h=c(n.right,this._options.gap).width,l=(i+this._options.gap/2)/o,d=(o-(h+this._options.gap/2))/o;n.ratio=w(e,l,d)}else if(n.orientation==="vertical"){let o=this.getSurroundingRect(n.left.id).height+this._options.gap+this.getSurroundingRect(n.right.id).height,i=c(n.left,this._options.gap).height,h=c(n.right,this._options.gap).height,l=(i+this._options.gap/2)/o,d=(o-(h+this._options.gap/2))/o;n.ratio=w(e,l,d)}else a(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 i=this.findRect(t);return u(i!==null,"Rect is not null"),u(i.type==="panel","Rect is a panel"),{x:i.x,y:i.y,width:i.width,height:i.height}}let n=this.getSurroundingRect(e.left.id),o=this.getSurroundingRect(e.right.id);if(e.orientation==="horizontal")return{x:n.x,y:n.y,width:n.width+this._options.gap+o.width,height:n.height};if(e.orientation==="vertical")return{x:n.x,y:n.y,width:n.width,height:n.height+this._options.gap+o.height};a(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 ft(r,t){let[e]=_react.useState.call(void 0, ()=>new L(r,t)),n=_react.useRef.call(void 0, null),o=_react.useSyncExternalStore.call(void 0, e.subscribe,()=>e.layoutRects),[i,h]=_react.useState.call(void 0, null),[l,d]=_react.useState.call(void 0, null),[f,g]=_react.useState.call(void 0, null);return _react.useLayoutEffect.call(void 0, ()=>{let s=n.current;u(s!==null),e.setSize({width:s.clientWidth,height:s.clientHeight});let p=new ResizeObserver(y=>{for(let b of y)e.setSize({width:b.contentRect.width,height:b.contentRect.height})});return p.observe(s),()=>{p.disconnect()}},[e]),_react.useEffect.call(void 0, ()=>{if(i===null)return;function s(y){u(i!==null),e.resizePanel(i.id,{x:y.clientX,y:y.clientY})}function p(){h(null)}return document.addEventListener("mousemove",s),document.addEventListener("mouseup",p),()=>{document.removeEventListener("mousemove",s),document.removeEventListener("mouseup",p)}},[i,e]),_react.useEffect.call(void 0, ()=>{document.body.style.cursor=i===null?"default":D[i.orientation]},[i]),{containerRef:n,layoutRects:o,layoutManager:e,getRectProps:s=>{if(s.type==="split")return{style:{position:"absolute",left:s.x,top:s.y,width:s.width,height:s.height,cursor:D[s.orientation]},onMouseDown:()=>{h(s)},onMouseUp:()=>{h(null)}};if(s.type==="panel")return{style:{position:"absolute",left:s.x,top:s.y,width:s.width,height:s.height},onMouseMove:p=>{if(l===null)return;if(l.id===s.id){g(null);return}let y=e.calculateDropTarget({draggedPanelId:l.id,targetPanelId:s.id,point:{x:p.clientX,y:p.clientY}});g(y)},onMouseUp:p=>{if(l!==null){if(l.id===s.id){d(null),g(null);return}e.movePanel({sourceId:l.id,targetId:s.id,point:{x:p.clientX,y:p.clientY}}),d(null),g(null)}}};a(s)},getDropZoneProps:s=>l===null||!(s.id===_optionalChain([f, 'optionalAccess', _10 => _10.id]))?null:{style:$(f.direction)},getDragHandleProps:s=>({onMouseDown:()=>{d(s)}}),draggingRect:l}}function $(r){if(r==="top")return{position:"absolute",left:0,top:0,width:"100%",height:"50%"};if(r==="bottom")return{position:"absolute",left:0,top:"50%",width:"100%",height:"50%"};if(r==="left")return{position:"absolute",left:0,top:0,width:"50%",height:"100%"};if(r==="right")return{position:"absolute",left:"50%",top:0,width:"50%",height:"100%"};a(r)}var D={horizontal:"col-resize",vertical:"row-resize"};exports.bspStrategy = X; exports.evenlyDividedHorizontalStrategy = M; exports.useDockLayout = ft;
+"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 a(r){throw new Error(`Unexpected value: ${r}`)}function R(r,t){return r===null?null:S(t,r)}function S(r,t){if(t.type==="panel")return null;if(t.type==="split")return t.left.id===r||t.right.id===r?t:_nullishCoalesce(S(r,t.left), () => (S(r,t.right)));a(t)}var M={getPlacement(r){let t=m(r)+1;return{targetId:r.id,direction:"right",ratio:t/(t+1)}}};function m(r){if(r.type==="panel")return 0;if(r.type==="split"){if(r.orientation==="horizontal")return 1+m(r.left)+m(r.right);if(r.orientation==="vertical")return 0+m(r.left)+m(r.right);a(r.orientation)}else a(r)}var X={getPlacement(r){let t=z(r),e=R(r,t.id);return{targetId:t.id,direction:e===null?"right":e.orientation==="horizontal"?"bottom":"right",ratio:.5}}};function z(r){if(r.type==="panel")return r;if(r.type==="split")return z(r.right);a(r)}var _react = require('react');function u(r,t){if(!r)throw new Error(_nullishCoalesce(t, () => ("Invariant failed")))}function w(r,t,e){return Math.max(t,Math.min(e,r))}var N= (_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 P(r,t){if(r===null)return[];let e=[],n=(o,i)=>{o.type==="split"?o.orientation==="horizontal"?(e.push({id:o.id,type:"split",orientation:o.orientation,x:Math.round(i.x+i.width*o.ratio-t.gap/2),y:Math.round(i.y),width:Math.round(t.gap),height:Math.round(i.height)}),n(o.left,{x:i.x,y:i.y,width:i.width*o.ratio-t.gap/2,height:i.height}),n(o.right,{x:i.x+i.width*o.ratio+t.gap/2,y:i.y,width:i.width*(1-o.ratio)-t.gap/2,height:i.height})):o.orientation==="vertical"?(e.push({id:o.id,type:"split",orientation:o.orientation,x:Math.round(i.x),y:Math.round(i.y+i.height*o.ratio-t.gap/2),width:Math.round(i.width),height:Math.round(t.gap)}),n(o.left,{x:i.x,y:i.y,width:i.width,height:i.height*o.ratio-t.gap/2}),n(o.right,{x:i.x,y:i.y+i.height*o.ratio+t.gap/2,width:i.width,height:i.height*(1-o.ratio)-t.gap/2})):a(o.orientation):o.type==="panel"?e.push({id:o.id,type:"panel",x:Math.round(i.x),y:Math.round(i.y),width:Math.round(i.width),height:Math.round(i.height)}):a(o)};return n(r,{x:0,y:0,width:t.size.width,height:t.size.height}),e}function c(r,t){if(r.type==="panel")return{width:_nullishCoalesce(_optionalChain([r, 'access', _2 => _2.minSize, 'optionalAccess', _3 => _3.width]), () => (0)),height:_nullishCoalesce(_optionalChain([r, 'access', _4 => _4.minSize, 'optionalAccess', _5 => _5.height]), () => (0))};if(r.type==="split"){if(r.orientation==="horizontal")return{width:c(r.left,t).width+t+c(r.right,t).width,height:Math.max(c(r.left,t).height,c(r.right,t).height)};if(r.orientation==="vertical")return{width:Math.max(c(r.left,t).width,c(r.right,t).width),height:c(r.left,t).height+t+c(r.right,t).height};a(r.orientation)}else a(r)}function x(r,t){let e=r.x+r.width/2,n=r.y+r.height/2,o=(t.x-e)/(r.width/2),i=(t.y-n)/(r.height/2);return Math.abs(o)>Math.abs(i)?o>0?"right":"left":i>0?"bottom":"top"}var _= (_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)));a(e)}findParentNode(t){return R(this._root,t)}replaceChildNode({parentId:t,oldChildId:e,newChild:n}){let o=this.findNode(t);if(o===null)throw new Error(`Parent node with id ${t} not found`);if(o.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(o.left.id===e)o.left=n;else if(o.right.id===e)o.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 N}__init4() {this._layoutRects=[]}__init5() {this._addPanelStrategy=M}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 _(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=P(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 o=n.left.id===e.id?n.right:n.left;if(n.id===this._tree.root.id){this._tree.root=o,this.syncLayoutRects();return}let i=this._tree.findParentNode(n.id);u(i!==null,"Grand parent node is not null"),this._tree.replaceChildNode({parentId:i.id,oldChildId:n.id,newChild:o}),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 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 i=this._tree.findParentNode(t);u(i!==null);let h=this._tree.findNode(e);if(h===null)throw new Error(`Node with id ${e} not found`);if(h.type!=="panel")throw new Error(`Node with id ${e} is not a panel node`);let l=i.left.id===t?i.right:i.left,d=this.findRect(e);u(d!==null),u(d.type==="panel");let f=x(d,n);if(l.id===e){f==="left"?(i.orientation="horizontal",i.left=o,i.right=h):f==="right"?(i.orientation="horizontal",i.left=h,i.right=o):f==="top"?(i.orientation="vertical",i.left=o,i.right=h):f==="bottom"?(i.orientation="vertical",i.left=h,i.right=o):a(f),this.syncLayoutRects();return}let g=this._tree.findParentNode(i.id);g===null?this._tree.root=l:g.right.id===i.id?g.right=l:g.left.id===i.id&&(g.left=l);let s=this._tree.findParentNode(e);u(s!==null);let p=this.createSplitNode({direction:f,sourceNode:o,targetNode:h});s.left.id===e?s.left=p:s.right.id===e?s.right=p: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:o,right:i}=this.getSplitChildRects(n.id),h=e.x-o.x,l=o.width+n.width+i.width,d=w(h/l,.1,.9);this.setSplitRatio(n.id,d)}else if(n.orientation==="vertical"){let{left:o,right:i}=this.getSplitChildRects(n.id),h=e.y-o.y,l=o.height+n.height+i.height,d=w(h/l,.1,.9);this.setSplitRatio(n.id,d)}else a(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:o,direction:i="right",ratio:h=.5}=n?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:i,ratio:h,sourceNode:{id:e,type:"panel"},targetNode:this._tree.root}),this.syncLayoutRects();return}let l=this._tree.findNode(o);if(l===null)throw new Error(`Node with id ${o} not found`);let d=this._tree.findParentNode(o);u(d!==null,"Target node parent is not null");let f=this.createSplitNode({direction:i,sourceNode:{id:e,type:"panel"},targetNode:l,ratio:h});this._tree.replaceChildNode({parentId:d.id,oldChildId:o,newChild:f}),this.syncLayoutRects()}calculateDropTarget({draggedPanelId:t,targetPanelId:e,point:n}){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:x(o,n)}}serialize(){return JSON.stringify({root:this._tree.root,options:{gap:this._options.gap}})}emit(){this._eventEmitter.emit()}syncLayoutRects(){this._layoutRects=P(this._tree.root,this._options),this.emit()}createSplitNode({direction:t,sourceNode:e,targetNode:n,ratio:o=.5}){switch(t){case"left":return{id:crypto.randomUUID(),type:"split",orientation:"horizontal",ratio:o,left:e,right:n};case"right":return{id:crypto.randomUUID(),type:"split",orientation:"horizontal",ratio:o,left:n,right:e};case"top":return{id:crypto.randomUUID(),type:"split",orientation:"vertical",ratio:o,left:e,right:n};case"bottom":return{id:crypto.randomUUID(),type:"split",orientation:"vertical",ratio:o,left:n,right:e};default:a(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 o=this.getSurroundingRect(n.left.id).width+this._options.gap+this.getSurroundingRect(n.right.id).width,i=c(n.left,this._options.gap).width,h=c(n.right,this._options.gap).width,l=(i+this._options.gap/2)/o,d=(o-(h+this._options.gap/2))/o;n.ratio=w(e,l,d)}else if(n.orientation==="vertical"){let o=this.getSurroundingRect(n.left.id).height+this._options.gap+this.getSurroundingRect(n.right.id).height,i=c(n.left,this._options.gap).height,h=c(n.right,this._options.gap).height,l=(i+this._options.gap/2)/o,d=(o-(h+this._options.gap/2))/o;n.ratio=w(e,l,d)}else a(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 i=this.findRect(t);return u(i!==null,"Rect is not null"),u(i.type==="panel","Rect is a panel"),{x:i.x,y:i.y,width:i.width,height:i.height}}let n=this.getSurroundingRect(e.left.id),o=this.getSurroundingRect(e.right.id);if(e.orientation==="horizontal")return{x:n.x,y:n.y,width:n.width+this._options.gap+o.width,height:n.height};if(e.orientation==="vertical")return{x:n.x,y:n.y,width:n.width,height:n.height+this._options.gap+o.height};a(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 ft(r,t){let[e]=_react.useState.call(void 0, ()=>new v(r,t)),n=_react.useRef.call(void 0, null),o=_react.useSyncExternalStore.call(void 0, e.subscribe,()=>e.layoutRects),[i,h]=_react.useState.call(void 0, null),[l,d]=_react.useState.call(void 0, null),[f,g]=_react.useState.call(void 0, null);return _react.useLayoutEffect.call(void 0, ()=>{let s=n.current;u(s!==null),e.setSize({width:s.clientWidth,height:s.clientHeight});let p=new ResizeObserver(y=>{for(let b of y)e.setSize({width:b.contentRect.width,height:b.contentRect.height})});return p.observe(s),()=>{p.disconnect()}},[e]),_react.useEffect.call(void 0, ()=>{if(i===null)return;function s(y){u(i!==null),e.resizePanel(i.id,{x:y.clientX,y:y.clientY})}function p(){h(null)}return document.addEventListener("mousemove",s),document.addEventListener("mouseup",p),()=>{document.removeEventListener("mousemove",s),document.removeEventListener("mouseup",p)}},[i,e]),_react.useEffect.call(void 0, ()=>{document.body.style.cursor=i===null?"default":D[i.orientation]},[i]),{containerRef:n,layoutRects:o,getRectProps:s=>{if(s.type==="split")return{style:{position:"absolute",left:s.x,top:s.y,width:s.width,height:s.height,cursor:D[s.orientation]},onMouseDown:()=>{h(s)},onMouseUp:()=>{h(null)}};if(s.type==="panel")return{style:{position:"absolute",left:s.x,top:s.y,width:s.width,height:s.height},onMouseMove:p=>{if(l===null)return;if(l.id===s.id){g(null);return}let y=e.calculateDropTarget({draggedPanelId:l.id,targetPanelId:s.id,point:{x:p.clientX,y:p.clientY}});g(y)},onMouseUp:p=>{if(l!==null){if(l.id===s.id){d(null),g(null);return}e.movePanel({sourceId:l.id,targetId:s.id,point:{x:p.clientX,y:p.clientY}}),d(null),g(null)}}};a(s)},getDropZoneProps:s=>l===null||!(s.id===_optionalChain([f, 'optionalAccess', _10 => _10.id]))?null:{style:$(f.direction)},getDragHandleProps:s=>({onMouseDown:()=>{d(s)}}),draggingRect:l,addPanel:e.addPanel.bind(e),removePanel:e.removePanel.bind(e),serialize:e.serialize.bind(e)}}function $(r){if(r==="top")return{position:"absolute",left:0,top:0,width:"100%",height:"50%"};if(r==="bottom")return{position:"absolute",left:0,top:"50%",width:"100%",height:"50%"};if(r==="left")return{position:"absolute",left:0,top:0,width:"50%",height:"100%"};if(r==="right")return{position:"absolute",left:"50%",top:0,width:"50%",height:"100%"};a(r)}var D={horizontal:"col-resize",vertical:"row-resize"};exports.bspStrategy = X; exports.evenlyDividedHorizontalStrategy = M; exports.useDockLayout = ft;

package/dist/index.d.cts

@@ -5,10 +5,6 @@ interface Size {
     width: number;
     height: number;
 }
-interface Point {
-    x: number;
-    y: number;
-}
 interface Rect {
     x: number;
     y: number;
@@ -52,57 +48,9 @@ interface AddPanelStrategy {
 declare const evenlyDividedHorizontalStrategy: AddPanelStrategy;
 declare const bspStrategy: AddPanelStrategy;
 
-declare class LayoutManager {
-    private _tree;
-    private _options;
-    private _eventEmitter;
-    private _layoutRects;
-    private _addPanelStrategy;
-    constructor(root: LayoutNode | null, options?: LayoutManagerOptions);
-    get root(): LayoutNode | null;
-    set root(root: LayoutNode | null);
-    get layoutRects(): LayoutRect[];
-    subscribe: (listener: () => void) => () => void;
-    setSize(size: Size): void;
-    removePanel(id: string): void;
-    movePanel({ sourceId, targetId, point, }: {
-        sourceId: string;
-        targetId: string;
-        point: Point;
-    }): void;
-    resizePanel(id: string, point: Point): void;
-    /**
-     /**
-      * The addPanelStrategy is used to determine panel placement when the `targetId` is `undefined`.
-      */
-    addPanel(options?: {
-        id?: string;
-        targetId?: string;
-        direction?: Direction;
-        ratio?: number;
-    }): void;
-    calculateDropTarget({ draggedPanelId, targetPanelId, point, }: {
-        draggedPanelId: string;
-        targetPanelId: string;
-        point: Point;
-    }): {
-        id: string;
-        direction: Direction;
-    };
-    serialize(): string;
-    private emit;
-    private syncLayoutRects;
-    private createSplitNode;
-    private setSplitRatio;
-    private findRect;
-    private getSurroundingRect;
-    private getSplitChildRects;
-}
-
 declare function useDockLayout<T extends HTMLElement>(initialRoot: LayoutNode | null, options?: LayoutManagerOptions): {
     containerRef: react.RefObject<T | null>;
     layoutRects: LayoutRect[];
-    layoutManager: LayoutManager;
     getRectProps: (rect: LayoutRect) => {
         readonly style: {
             readonly position: "absolute";
@@ -159,6 +107,14 @@ declare function useDockLayout<T extends HTMLElement>(initialRoot: LayoutNode |
         onMouseDown: () => void;
     };
     draggingRect: PanelLayoutRect | null;
+    addPanel: (options?: {
+        id?: string;
+        targetId?: string;
+        direction?: Direction;
+        ratio?: number;
+    }) => void;
+    removePanel: (id: string) => void;
+    serialize: () => string;
 };
 
 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

@@ -5,10 +5,6 @@ interface Size {
     width: number;
     height: number;
 }
-interface Point {
-    x: number;
-    y: number;
-}
 interface Rect {
     x: number;
     y: number;
@@ -52,57 +48,9 @@ interface AddPanelStrategy {
 declare const evenlyDividedHorizontalStrategy: AddPanelStrategy;
 declare const bspStrategy: AddPanelStrategy;
 
-declare class LayoutManager {
-    private _tree;
-    private _options;
-    private _eventEmitter;
-    private _layoutRects;
-    private _addPanelStrategy;
-    constructor(root: LayoutNode | null, options?: LayoutManagerOptions);
-    get root(): LayoutNode | null;
-    set root(root: LayoutNode | null);
-    get layoutRects(): LayoutRect[];
-    subscribe: (listener: () => void) => () => void;
-    setSize(size: Size): void;
-    removePanel(id: string): void;
-    movePanel({ sourceId, targetId, point, }: {
-        sourceId: string;
-        targetId: string;
-        point: Point;
-    }): void;
-    resizePanel(id: string, point: Point): void;
-    /**
-     /**
-      * The addPanelStrategy is used to determine panel placement when the `targetId` is `undefined`.
-      */
-    addPanel(options?: {
-        id?: string;
-        targetId?: string;
-        direction?: Direction;
-        ratio?: number;
-    }): void;
-    calculateDropTarget({ draggedPanelId, targetPanelId, point, }: {
-        draggedPanelId: string;
-        targetPanelId: string;
-        point: Point;
-    }): {
-        id: string;
-        direction: Direction;
-    };
-    serialize(): string;
-    private emit;
-    private syncLayoutRects;
-    private createSplitNode;
-    private setSplitRatio;
-    private findRect;
-    private getSurroundingRect;
-    private getSplitChildRects;
-}
-
 declare function useDockLayout<T extends HTMLElement>(initialRoot: LayoutNode | null, options?: LayoutManagerOptions): {
     containerRef: react.RefObject<T | null>;
     layoutRects: LayoutRect[];
-    layoutManager: LayoutManager;
     getRectProps: (rect: LayoutRect) => {
         readonly style: {
             readonly position: "absolute";
@@ -159,6 +107,14 @@ declare function useDockLayout<T extends HTMLElement>(initialRoot: LayoutNode |
         onMouseDown: () => void;
     };
     draggingRect: PanelLayoutRect | null;
+    addPanel: (options?: {
+        id?: string;
+        targetId?: string;
+        direction?: Direction;
+        ratio?: number;
+    }) => void;
+    removePanel: (id: string) => void;
+    serialize: () => string;
 };
 
 export { type AddPanelStrategy, type LayoutManagerOptions, type LayoutNode, type LayoutRect, type PanelLayoutRect, type PanelNode, type SplitLayoutRect, type SplitNode, bspStrategy, evenlyDividedHorizontalStrategy, useDockLayout };

package/dist/index.js

@@ -1 +1 @@
-function a(r){throw new Error(`Unexpected value: ${r}`)}function R(r,t){return r===null?null:S(t,r)}function S(r,t){if(t.type==="panel")return null;if(t.type==="split")return t.left.id===r||t.right.id===r?t:S(r,t.left)??S(r,t.right);a(t)}var M={getPlacement(r){let t=m(r)+1;return{targetId:r.id,direction:"right",ratio:t/(t+1)}}};function m(r){if(r.type==="panel")return 0;if(r.type==="split"){if(r.orientation==="horizontal")return 1+m(r.left)+m(r.right);if(r.orientation==="vertical")return 0+m(r.left)+m(r.right);a(r.orientation)}else a(r)}var X={getPlacement(r){let t=z(r),e=R(r,t.id);return{targetId:t.id,direction:e===null?"right":e.orientation==="horizontal"?"bottom":"right",ratio:.5}}};function z(r){if(r.type==="panel")return r;if(r.type==="split")return z(r.right);a(r)}import{useEffect as E,useLayoutEffect as T,useRef as C,useState as v,useSyncExternalStore as U}from"react";function u(r,t){if(!r)throw new Error(t??"Invariant failed")}function w(r,t,e){return Math.max(t,Math.min(e,r))}var N=class{_listeners=new Set;subscribe(t){return this._listeners.add(t),()=>{this._listeners.delete(t)}}emit(){this._listeners.forEach(t=>{t()})}};function P(r,t){if(r===null)return[];let e=[],n=(o,i)=>{o.type==="split"?o.orientation==="horizontal"?(e.push({id:o.id,type:"split",orientation:o.orientation,x:Math.round(i.x+i.width*o.ratio-t.gap/2),y:Math.round(i.y),width:Math.round(t.gap),height:Math.round(i.height)}),n(o.left,{x:i.x,y:i.y,width:i.width*o.ratio-t.gap/2,height:i.height}),n(o.right,{x:i.x+i.width*o.ratio+t.gap/2,y:i.y,width:i.width*(1-o.ratio)-t.gap/2,height:i.height})):o.orientation==="vertical"?(e.push({id:o.id,type:"split",orientation:o.orientation,x:Math.round(i.x),y:Math.round(i.y+i.height*o.ratio-t.gap/2),width:Math.round(i.width),height:Math.round(t.gap)}),n(o.left,{x:i.x,y:i.y,width:i.width,height:i.height*o.ratio-t.gap/2}),n(o.right,{x:i.x,y:i.y+i.height*o.ratio+t.gap/2,width:i.width,height:i.height*(1-o.ratio)-t.gap/2})):a(o.orientation):o.type==="panel"?e.push({id:o.id,type:"panel",x:Math.round(i.x),y:Math.round(i.y),width:Math.round(i.width),height:Math.round(i.height)}):a(o)};return n(r,{x:0,y:0,width:t.size.width,height:t.size.height}),e}function c(r,t){if(r.type==="panel")return{width:r.minSize?.width??0,height:r.minSize?.height??0};if(r.type==="split"){if(r.orientation==="horizontal")return{width:c(r.left,t).width+t+c(r.right,t).width,height:Math.max(c(r.left,t).height,c(r.right,t).height)};if(r.orientation==="vertical")return{width:Math.max(c(r.left,t).width,c(r.right,t).width),height:c(r.left,t).height+t+c(r.right,t).height};a(r.orientation)}else a(r)}function x(r,t){let e=r.x+r.width/2,n=r.y+r.height/2,o=(t.x-e)/(r.width/2),i=(t.y-n)/(r.height/2);return Math.abs(o)>Math.abs(i)?o>0?"right":"left":i>0?"bottom":"top"}var _=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);a(e)}findParentNode(t){return R(this._root,t)}replaceChildNode({parentId:t,oldChildId:e,newChild:n}){let o=this.findNode(t);if(o===null)throw new Error(`Parent node with id ${t} not found`);if(o.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(o.left.id===e)o.left=n;else if(o.right.id===e)o.right=n;else throw new Error(`Child node with id ${e} is not a child of the parent node with id ${t}`)}};var L=class{_tree;_options;_eventEmitter=new N;_layoutRects=[];_addPanelStrategy=M;constructor(t,e){this._tree=new _(t),this._options={gap:e?.gap??10,size:e?.size??{width:0,height:0}},this._layoutRects=P(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 o=n.left.id===e.id?n.right:n.left;if(n.id===this._tree.root.id){this._tree.root=o,this.syncLayoutRects();return}let i=this._tree.findParentNode(n.id);u(i!==null,"Grand parent node is not null"),this._tree.replaceChildNode({parentId:i.id,oldChildId:n.id,newChild:o}),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 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 i=this._tree.findParentNode(t);u(i!==null);let h=this._tree.findNode(e);if(h===null)throw new Error(`Node with id ${e} not found`);if(h.type!=="panel")throw new Error(`Node with id ${e} is not a panel node`);let l=i.left.id===t?i.right:i.left,d=this.findRect(e);u(d!==null),u(d.type==="panel");let f=x(d,n);if(l.id===e){f==="left"?(i.orientation="horizontal",i.left=o,i.right=h):f==="right"?(i.orientation="horizontal",i.left=h,i.right=o):f==="top"?(i.orientation="vertical",i.left=o,i.right=h):f==="bottom"?(i.orientation="vertical",i.left=h,i.right=o):a(f),this.syncLayoutRects();return}let g=this._tree.findParentNode(i.id);g===null?this._tree.root=l:g.right.id===i.id?g.right=l:g.left.id===i.id&&(g.left=l);let s=this._tree.findParentNode(e);u(s!==null);let p=this.createSplitNode({direction:f,sourceNode:o,targetNode:h});s.left.id===e?s.left=p:s.right.id===e?s.right=p: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:o,right:i}=this.getSplitChildRects(n.id),h=e.x-o.x,l=o.width+n.width+i.width,d=w(h/l,.1,.9);this.setSplitRatio(n.id,d)}else if(n.orientation==="vertical"){let{left:o,right:i}=this.getSplitChildRects(n.id),h=e.y-o.y,l=o.height+n.height+i.height,d=w(h/l,.1,.9);this.setSplitRatio(n.id,d)}else a(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:o,direction:i="right",ratio:h=.5}=n?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:i,ratio:h,sourceNode:{id:e,type:"panel"},targetNode:this._tree.root}),this.syncLayoutRects();return}let l=this._tree.findNode(o);if(l===null)throw new Error(`Node with id ${o} not found`);let d=this._tree.findParentNode(o);u(d!==null,"Target node parent is not null");let f=this.createSplitNode({direction:i,sourceNode:{id:e,type:"panel"},targetNode:l,ratio:h});this._tree.replaceChildNode({parentId:d.id,oldChildId:o,newChild:f}),this.syncLayoutRects()}calculateDropTarget({draggedPanelId:t,targetPanelId:e,point:n}){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:x(o,n)}}serialize(){return JSON.stringify({root:this._tree.root,options:{gap:this._options.gap}})}emit(){this._eventEmitter.emit()}syncLayoutRects(){this._layoutRects=P(this._tree.root,this._options),this.emit()}createSplitNode({direction:t,sourceNode:e,targetNode:n,ratio:o=.5}){switch(t){case"left":return{id:crypto.randomUUID(),type:"split",orientation:"horizontal",ratio:o,left:e,right:n};case"right":return{id:crypto.randomUUID(),type:"split",orientation:"horizontal",ratio:o,left:n,right:e};case"top":return{id:crypto.randomUUID(),type:"split",orientation:"vertical",ratio:o,left:e,right:n};case"bottom":return{id:crypto.randomUUID(),type:"split",orientation:"vertical",ratio:o,left:n,right:e};default:a(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 o=this.getSurroundingRect(n.left.id).width+this._options.gap+this.getSurroundingRect(n.right.id).width,i=c(n.left,this._options.gap).width,h=c(n.right,this._options.gap).width,l=(i+this._options.gap/2)/o,d=(o-(h+this._options.gap/2))/o;n.ratio=w(e,l,d)}else if(n.orientation==="vertical"){let o=this.getSurroundingRect(n.left.id).height+this._options.gap+this.getSurroundingRect(n.right.id).height,i=c(n.left,this._options.gap).height,h=c(n.right,this._options.gap).height,l=(i+this._options.gap/2)/o,d=(o-(h+this._options.gap/2))/o;n.ratio=w(e,l,d)}else a(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 i=this.findRect(t);return u(i!==null,"Rect is not null"),u(i.type==="panel","Rect is a panel"),{x:i.x,y:i.y,width:i.width,height:i.height}}let n=this.getSurroundingRect(e.left.id),o=this.getSurroundingRect(e.right.id);if(e.orientation==="horizontal")return{x:n.x,y:n.y,width:n.width+this._options.gap+o.width,height:n.height};if(e.orientation==="vertical")return{x:n.x,y:n.y,width:n.width,height:n.height+this._options.gap+o.height};a(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)}}};function ft(r,t){let[e]=v(()=>new L(r,t)),n=C(null),o=U(e.subscribe,()=>e.layoutRects),[i,h]=v(null),[l,d]=v(null),[f,g]=v(null);return T(()=>{let s=n.current;u(s!==null),e.setSize({width:s.clientWidth,height:s.clientHeight});let p=new ResizeObserver(y=>{for(let b of y)e.setSize({width:b.contentRect.width,height:b.contentRect.height})});return p.observe(s),()=>{p.disconnect()}},[e]),E(()=>{if(i===null)return;function s(y){u(i!==null),e.resizePanel(i.id,{x:y.clientX,y:y.clientY})}function p(){h(null)}return document.addEventListener("mousemove",s),document.addEventListener("mouseup",p),()=>{document.removeEventListener("mousemove",s),document.removeEventListener("mouseup",p)}},[i,e]),E(()=>{document.body.style.cursor=i===null?"default":D[i.orientation]},[i]),{containerRef:n,layoutRects:o,layoutManager:e,getRectProps:s=>{if(s.type==="split")return{style:{position:"absolute",left:s.x,top:s.y,width:s.width,height:s.height,cursor:D[s.orientation]},onMouseDown:()=>{h(s)},onMouseUp:()=>{h(null)}};if(s.type==="panel")return{style:{position:"absolute",left:s.x,top:s.y,width:s.width,height:s.height},onMouseMove:p=>{if(l===null)return;if(l.id===s.id){g(null);return}let y=e.calculateDropTarget({draggedPanelId:l.id,targetPanelId:s.id,point:{x:p.clientX,y:p.clientY}});g(y)},onMouseUp:p=>{if(l!==null){if(l.id===s.id){d(null),g(null);return}e.movePanel({sourceId:l.id,targetId:s.id,point:{x:p.clientX,y:p.clientY}}),d(null),g(null)}}};a(s)},getDropZoneProps:s=>l===null||!(s.id===f?.id)?null:{style:$(f.direction)},getDragHandleProps:s=>({onMouseDown:()=>{d(s)}}),draggingRect:l}}function $(r){if(r==="top")return{position:"absolute",left:0,top:0,width:"100%",height:"50%"};if(r==="bottom")return{position:"absolute",left:0,top:"50%",width:"100%",height:"50%"};if(r==="left")return{position:"absolute",left:0,top:0,width:"50%",height:"100%"};if(r==="right")return{position:"absolute",left:"50%",top:0,width:"50%",height:"100%"};a(r)}var D={horizontal:"col-resize",vertical:"row-resize"};export{X as bspStrategy,M as evenlyDividedHorizontalStrategy,ft as useDockLayout};
+function a(r){throw new Error(`Unexpected value: ${r}`)}function R(r,t){return r===null?null:S(t,r)}function S(r,t){if(t.type==="panel")return null;if(t.type==="split")return t.left.id===r||t.right.id===r?t:S(r,t.left)??S(r,t.right);a(t)}var M={getPlacement(r){let t=m(r)+1;return{targetId:r.id,direction:"right",ratio:t/(t+1)}}};function m(r){if(r.type==="panel")return 0;if(r.type==="split"){if(r.orientation==="horizontal")return 1+m(r.left)+m(r.right);if(r.orientation==="vertical")return 0+m(r.left)+m(r.right);a(r.orientation)}else a(r)}var X={getPlacement(r){let t=z(r),e=R(r,t.id);return{targetId:t.id,direction:e===null?"right":e.orientation==="horizontal"?"bottom":"right",ratio:.5}}};function z(r){if(r.type==="panel")return r;if(r.type==="split")return z(r.right);a(r)}import{useEffect as E,useLayoutEffect as T,useRef as C,useState as L,useSyncExternalStore as U}from"react";function u(r,t){if(!r)throw new Error(t??"Invariant failed")}function w(r,t,e){return Math.max(t,Math.min(e,r))}var N=class{_listeners=new Set;subscribe(t){return this._listeners.add(t),()=>{this._listeners.delete(t)}}emit(){this._listeners.forEach(t=>{t()})}};function P(r,t){if(r===null)return[];let e=[],n=(o,i)=>{o.type==="split"?o.orientation==="horizontal"?(e.push({id:o.id,type:"split",orientation:o.orientation,x:Math.round(i.x+i.width*o.ratio-t.gap/2),y:Math.round(i.y),width:Math.round(t.gap),height:Math.round(i.height)}),n(o.left,{x:i.x,y:i.y,width:i.width*o.ratio-t.gap/2,height:i.height}),n(o.right,{x:i.x+i.width*o.ratio+t.gap/2,y:i.y,width:i.width*(1-o.ratio)-t.gap/2,height:i.height})):o.orientation==="vertical"?(e.push({id:o.id,type:"split",orientation:o.orientation,x:Math.round(i.x),y:Math.round(i.y+i.height*o.ratio-t.gap/2),width:Math.round(i.width),height:Math.round(t.gap)}),n(o.left,{x:i.x,y:i.y,width:i.width,height:i.height*o.ratio-t.gap/2}),n(o.right,{x:i.x,y:i.y+i.height*o.ratio+t.gap/2,width:i.width,height:i.height*(1-o.ratio)-t.gap/2})):a(o.orientation):o.type==="panel"?e.push({id:o.id,type:"panel",x:Math.round(i.x),y:Math.round(i.y),width:Math.round(i.width),height:Math.round(i.height)}):a(o)};return n(r,{x:0,y:0,width:t.size.width,height:t.size.height}),e}function c(r,t){if(r.type==="panel")return{width:r.minSize?.width??0,height:r.minSize?.height??0};if(r.type==="split"){if(r.orientation==="horizontal")return{width:c(r.left,t).width+t+c(r.right,t).width,height:Math.max(c(r.left,t).height,c(r.right,t).height)};if(r.orientation==="vertical")return{width:Math.max(c(r.left,t).width,c(r.right,t).width),height:c(r.left,t).height+t+c(r.right,t).height};a(r.orientation)}else a(r)}function x(r,t){let e=r.x+r.width/2,n=r.y+r.height/2,o=(t.x-e)/(r.width/2),i=(t.y-n)/(r.height/2);return Math.abs(o)>Math.abs(i)?o>0?"right":"left":i>0?"bottom":"top"}var _=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);a(e)}findParentNode(t){return R(this._root,t)}replaceChildNode({parentId:t,oldChildId:e,newChild:n}){let o=this.findNode(t);if(o===null)throw new Error(`Parent node with id ${t} not found`);if(o.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(o.left.id===e)o.left=n;else if(o.right.id===e)o.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 N;_layoutRects=[];_addPanelStrategy=M;constructor(t,e){this._tree=new _(t),this._options={gap:e?.gap??10,size:e?.size??{width:0,height:0}},this._layoutRects=P(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 o=n.left.id===e.id?n.right:n.left;if(n.id===this._tree.root.id){this._tree.root=o,this.syncLayoutRects();return}let i=this._tree.findParentNode(n.id);u(i!==null,"Grand parent node is not null"),this._tree.replaceChildNode({parentId:i.id,oldChildId:n.id,newChild:o}),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 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 i=this._tree.findParentNode(t);u(i!==null);let h=this._tree.findNode(e);if(h===null)throw new Error(`Node with id ${e} not found`);if(h.type!=="panel")throw new Error(`Node with id ${e} is not a panel node`);let l=i.left.id===t?i.right:i.left,d=this.findRect(e);u(d!==null),u(d.type==="panel");let f=x(d,n);if(l.id===e){f==="left"?(i.orientation="horizontal",i.left=o,i.right=h):f==="right"?(i.orientation="horizontal",i.left=h,i.right=o):f==="top"?(i.orientation="vertical",i.left=o,i.right=h):f==="bottom"?(i.orientation="vertical",i.left=h,i.right=o):a(f),this.syncLayoutRects();return}let g=this._tree.findParentNode(i.id);g===null?this._tree.root=l:g.right.id===i.id?g.right=l:g.left.id===i.id&&(g.left=l);let s=this._tree.findParentNode(e);u(s!==null);let p=this.createSplitNode({direction:f,sourceNode:o,targetNode:h});s.left.id===e?s.left=p:s.right.id===e?s.right=p: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:o,right:i}=this.getSplitChildRects(n.id),h=e.x-o.x,l=o.width+n.width+i.width,d=w(h/l,.1,.9);this.setSplitRatio(n.id,d)}else if(n.orientation==="vertical"){let{left:o,right:i}=this.getSplitChildRects(n.id),h=e.y-o.y,l=o.height+n.height+i.height,d=w(h/l,.1,.9);this.setSplitRatio(n.id,d)}else a(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:o,direction:i="right",ratio:h=.5}=n?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:i,ratio:h,sourceNode:{id:e,type:"panel"},targetNode:this._tree.root}),this.syncLayoutRects();return}let l=this._tree.findNode(o);if(l===null)throw new Error(`Node with id ${o} not found`);let d=this._tree.findParentNode(o);u(d!==null,"Target node parent is not null");let f=this.createSplitNode({direction:i,sourceNode:{id:e,type:"panel"},targetNode:l,ratio:h});this._tree.replaceChildNode({parentId:d.id,oldChildId:o,newChild:f}),this.syncLayoutRects()}calculateDropTarget({draggedPanelId:t,targetPanelId:e,point:n}){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:x(o,n)}}serialize(){return JSON.stringify({root:this._tree.root,options:{gap:this._options.gap}})}emit(){this._eventEmitter.emit()}syncLayoutRects(){this._layoutRects=P(this._tree.root,this._options),this.emit()}createSplitNode({direction:t,sourceNode:e,targetNode:n,ratio:o=.5}){switch(t){case"left":return{id:crypto.randomUUID(),type:"split",orientation:"horizontal",ratio:o,left:e,right:n};case"right":return{id:crypto.randomUUID(),type:"split",orientation:"horizontal",ratio:o,left:n,right:e};case"top":return{id:crypto.randomUUID(),type:"split",orientation:"vertical",ratio:o,left:e,right:n};case"bottom":return{id:crypto.randomUUID(),type:"split",orientation:"vertical",ratio:o,left:n,right:e};default:a(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 o=this.getSurroundingRect(n.left.id).width+this._options.gap+this.getSurroundingRect(n.right.id).width,i=c(n.left,this._options.gap).width,h=c(n.right,this._options.gap).width,l=(i+this._options.gap/2)/o,d=(o-(h+this._options.gap/2))/o;n.ratio=w(e,l,d)}else if(n.orientation==="vertical"){let o=this.getSurroundingRect(n.left.id).height+this._options.gap+this.getSurroundingRect(n.right.id).height,i=c(n.left,this._options.gap).height,h=c(n.right,this._options.gap).height,l=(i+this._options.gap/2)/o,d=(o-(h+this._options.gap/2))/o;n.ratio=w(e,l,d)}else a(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 i=this.findRect(t);return u(i!==null,"Rect is not null"),u(i.type==="panel","Rect is a panel"),{x:i.x,y:i.y,width:i.width,height:i.height}}let n=this.getSurroundingRect(e.left.id),o=this.getSurroundingRect(e.right.id);if(e.orientation==="horizontal")return{x:n.x,y:n.y,width:n.width+this._options.gap+o.width,height:n.height};if(e.orientation==="vertical")return{x:n.x,y:n.y,width:n.width,height:n.height+this._options.gap+o.height};a(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)}}};function ft(r,t){let[e]=L(()=>new v(r,t)),n=C(null),o=U(e.subscribe,()=>e.layoutRects),[i,h]=L(null),[l,d]=L(null),[f,g]=L(null);return T(()=>{let s=n.current;u(s!==null),e.setSize({width:s.clientWidth,height:s.clientHeight});let p=new ResizeObserver(y=>{for(let b of y)e.setSize({width:b.contentRect.width,height:b.contentRect.height})});return p.observe(s),()=>{p.disconnect()}},[e]),E(()=>{if(i===null)return;function s(y){u(i!==null),e.resizePanel(i.id,{x:y.clientX,y:y.clientY})}function p(){h(null)}return document.addEventListener("mousemove",s),document.addEventListener("mouseup",p),()=>{document.removeEventListener("mousemove",s),document.removeEventListener("mouseup",p)}},[i,e]),E(()=>{document.body.style.cursor=i===null?"default":D[i.orientation]},[i]),{containerRef:n,layoutRects:o,getRectProps:s=>{if(s.type==="split")return{style:{position:"absolute",left:s.x,top:s.y,width:s.width,height:s.height,cursor:D[s.orientation]},onMouseDown:()=>{h(s)},onMouseUp:()=>{h(null)}};if(s.type==="panel")return{style:{position:"absolute",left:s.x,top:s.y,width:s.width,height:s.height},onMouseMove:p=>{if(l===null)return;if(l.id===s.id){g(null);return}let y=e.calculateDropTarget({draggedPanelId:l.id,targetPanelId:s.id,point:{x:p.clientX,y:p.clientY}});g(y)},onMouseUp:p=>{if(l!==null){if(l.id===s.id){d(null),g(null);return}e.movePanel({sourceId:l.id,targetId:s.id,point:{x:p.clientX,y:p.clientY}}),d(null),g(null)}}};a(s)},getDropZoneProps:s=>l===null||!(s.id===f?.id)?null:{style:$(f.direction)},getDragHandleProps:s=>({onMouseDown:()=>{d(s)}}),draggingRect:l,addPanel:e.addPanel.bind(e),removePanel:e.removePanel.bind(e),serialize:e.serialize.bind(e)}}function $(r){if(r==="top")return{position:"absolute",left:0,top:0,width:"100%",height:"50%"};if(r==="bottom")return{position:"absolute",left:0,top:"50%",width:"100%",height:"50%"};if(r==="left")return{position:"absolute",left:0,top:0,width:"50%",height:"100%"};if(r==="right")return{position:"absolute",left:"50%",top:0,width:"50%",height:"100%"};a(r)}var D={horizontal:"col-resize",vertical:"row-resize"};export{X as bspStrategy,M as evenlyDividedHorizontalStrategy,ft as useDockLayout};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-headless-dock-layout",
-  "version": "0.1.3",
+  "version": "0.2.2",
   "description": "A lightweight, headless dock layout library for React.",
   "type": "module",
   "exports": {
@@ -29,10 +29,12 @@
     "@total-typescript/tsconfig": "^1.0.4",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
+    "@vitejs/plugin-react": "^5.1.2",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
+    "vite": "^7.3.0",
     "vitest": "^4.0.14"
   },
   "peerDependencies": {
@@ -40,6 +42,7 @@
   },
   "scripts": {
     "test": "vitest",
+    "dev": "vite",
     "build": "tsup",
     "type-check": "tsc --noEmit"
   }