react-zeugma 2.0.0 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +22 -28
- package/dist/index.cjs +2 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +6 -6
- package/dist/index.d.ts +6 -6
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -98,27 +98,27 @@ export default function Dashboard() {
|
|
|
98
98
|
|
|
99
99
|
The context provider that sets up the drag-and-drop state machine, monitors active drags, and registers layout change notifications.
|
|
100
100
|
|
|
101
|
-
| Prop | Type | Required | Description
|
|
102
|
-
| ------------------------ | --------------------------------------------------------------------- | -------- |
|
|
103
|
-
| `layout` | `TreeNode \| null` | Yes | The serializable tree layout schema.
|
|
104
|
-
| `onChange` | `(layout: TreeNode \| null) => void` | Yes | Fires when resizes, splits, swaps, or removes modify the tree.
|
|
105
|
-
| `renderPane` | `(paneId: string) => ReactNode` | Yes | Renderer function lookup that returns a `<Pane>` structure.
|
|
106
|
-
| `classNames` | `ZeugmaClassNames` | No | Custom classes for overriding pane, resizer, and drop preview overlays.
|
|
107
|
-
| `fullscreenPaneId` | `string \| null` | No | Active ID of the pane taking full viewport coverage.
|
|
108
|
-
| `renderDragOverlay` | `(activeId: string) => ReactNode` | No | Renders a custom cursor-following drag preview overlay.
|
|
109
|
-
| `onFullscreenChange` | `(paneId: string \| null) => void` | No | Callback triggered when a pane enters or leaves fullscreen.
|
|
110
|
-
| `onRemove` | `(paneId: string) => void` | No | Callback triggered when a pane is closed/removed from the layout tree.
|
|
111
|
-
| `dragActivationDistance` | `number` | No | Minimum pointer drag distance (in pixels) required to activate dragging. Defaults to `8`.
|
|
112
|
-
| `enableDragToDismiss` | `boolean` | No | If true, enables the drag-out-to-dismiss gesture where panes can be closed by dragging them outside. Defaults to `false`.
|
|
113
|
-
| `dragOutThreshold` | `number` | No | Distance in pixels outside the container bounds required to trigger drag-out mode. Defaults to `60`.
|
|
114
|
-
| `onDragOutChange` | `(activeId: string \| null) => void` | No | Callback triggered when the drag-out state changes. Receives the pane ID or `null`.
|
|
115
|
-
| `onDragStart` | `(activeId: string) => void` | No | Callback triggered when dragging starts on a pane.
|
|
116
|
-
| `onDragEnd` | `(activeId: string, overId: string \| null, dropAction: any) => void` | No | Callback triggered when dragging ends, providing swap or split details.
|
|
117
|
-
| `onResizeStart` | `(currentNode: SplitNode) => void` | No | Callback triggered when resizing starts on a split node.
|
|
118
|
-
| `onResize` | `(currentNode: SplitNode, percentage: number) => void` | No | Callback triggered continuously while resizing a split node.
|
|
119
|
-
| `onResizeEnd` | `(currentNode: SplitNode, percentage: number) => void` | No | Callback triggered when resizing ends on a split node.
|
|
120
|
-
| `minSplitPercentage` | `number` | No | Minimum resizing limit percentage. Defaults to `5`.
|
|
121
|
-
| `maxSplitPercentage` | `number` | No | Maximum resizing limit percentage. Defaults to `95`.
|
|
101
|
+
| Prop | Type | Required | Description |
|
|
102
|
+
| ------------------------ | --------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------- |
|
|
103
|
+
| `layout` | `TreeNode \| null` | Yes | The serializable tree layout schema. |
|
|
104
|
+
| `onChange` | `(layout: TreeNode \| null) => void` | Yes | Fires when resizes, splits, swaps, or removes modify the tree. |
|
|
105
|
+
| `renderPane` | `(paneId: string) => ReactNode` | Yes | Renderer function lookup that returns a `<Pane>` structure. |
|
|
106
|
+
| `classNames` | `ZeugmaClassNames` | No | Custom classes for overriding pane, resizer, and drop preview overlays. |
|
|
107
|
+
| `fullscreenPaneId` | `string \| null` | No | Active ID of the pane taking full viewport coverage. |
|
|
108
|
+
| `renderDragOverlay` | `(activeId: string) => ReactNode` | No | Renders a custom cursor-following drag preview overlay. |
|
|
109
|
+
| `onFullscreenChange` | `(paneId: string \| null) => void` | No | Callback triggered when a pane enters or leaves fullscreen. |
|
|
110
|
+
| `onRemove` | `(paneId: string) => void` | No | Callback triggered when a pane is closed/removed from the layout tree. |
|
|
111
|
+
| `dragActivationDistance` | `number` | No | Minimum pointer drag distance (in pixels) required to activate dragging. Defaults to `8`. |
|
|
112
|
+
| `enableDragToDismiss` | `boolean` | No | If true, enables the drag-out-to-dismiss gesture where panes can be closed by dragging them outside. Defaults to `false`. |
|
|
113
|
+
| `dragOutThreshold` | `number` | No | Distance in pixels outside the container bounds required to trigger drag-out mode. Defaults to `60`. |
|
|
114
|
+
| `onDragOutChange` | `(activeId: string \| null) => void` | No | Callback triggered when the drag-out state changes. Receives the pane ID or `null`. |
|
|
115
|
+
| `onDragStart` | `(activeId: string) => void` | No | Callback triggered when dragging starts on a pane. |
|
|
116
|
+
| `onDragEnd` | `(activeId: string, overId: string \| null, dropAction: any) => void` | No | Callback triggered when dragging ends, providing swap or split details. |
|
|
117
|
+
| `onResizeStart` | `(currentNode: SplitNode) => void` | No | Callback triggered when resizing starts on a split node. |
|
|
118
|
+
| `onResize` | `(currentNode: SplitNode, percentage: number) => void` | No | Callback triggered continuously while resizing a split node. |
|
|
119
|
+
| `onResizeEnd` | `(currentNode: SplitNode, percentage: number) => void` | No | Callback triggered when resizing ends on a split node. |
|
|
120
|
+
| `minSplitPercentage` | `number` | No | Minimum resizing limit percentage. Defaults to `5`. |
|
|
121
|
+
| `maxSplitPercentage` | `number` | No | Maximum resizing limit percentage. Defaults to `95`. |
|
|
122
122
|
|
|
123
123
|
### `<PaneTree>`
|
|
124
124
|
|
|
@@ -195,10 +195,6 @@ Swaps the positions of `idA` and `idB` nodes directly inside the tree structure.
|
|
|
195
195
|
|
|
196
196
|
Splits the targeted `targetId` pane inside the tree with `direction` (_row_ / _column_) and type (_left_, _right_, _top_, _bottom_) to insert `paneToAdd`.
|
|
197
197
|
|
|
198
|
-
#### `splitRoot(tree, draggingId, splitType)`
|
|
199
|
-
|
|
200
|
-
Splits the entire dashboard tree at the root, placing the dragged `draggingId` pane on one half and the rest of the layout tree on the other.
|
|
201
|
-
|
|
202
198
|
#### `findPane(tree: TreeNode | null, paneId: string): PaneNode | null`
|
|
203
199
|
|
|
204
200
|
Recursively searches the layout tree and returns the target `PaneNode` if found, or `null` otherwise.
|
|
@@ -380,7 +376,7 @@ The root context provider. It handles the drag-and-drop event loop and coordinat
|
|
|
380
376
|
- `dragOutThreshold?: number` — (Optional) Distance in pixels outside the container boundaries required to activate drag-out mode. Defaults to `60`.
|
|
381
377
|
- `onDragOutChange?: (activeId: string | null) => void` — (Optional) Callback triggered when the drag-out state changes.
|
|
382
378
|
- `onDragStart?: (activeId: string) => void` — (Optional) Callback triggered when dragging starts on a pane.
|
|
383
|
-
- `onDragEnd?: (activeId: string, overId: string | null, dropAction: any) => void` — (Optional) Callback triggered when dragging ends
|
|
379
|
+
- `onDragEnd?: (activeId: string, overId: string | null, dropAction: any) => void` — (Optional) Callback triggered when dragging ends, providing swap or split details.
|
|
384
380
|
- `onResizeStart?: (currentNode: SplitNode) => void` — (Optional) Callback triggered when resizing starts.
|
|
385
381
|
- `onResize?: (currentNode: SplitNode, percentage: number) => void` — (Optional) Callback triggered during resizing.
|
|
386
382
|
- `onResizeEnd?: (currentNode: SplitNode, percentage: number) => void` — (Optional) Callback triggered when resizing ends.
|
|
@@ -456,8 +452,6 @@ Import these helpers from `react-zeugma` to manipulate the tree layout programma
|
|
|
456
452
|
Removes a pane from the tree and collapses the leftover sibling split node.
|
|
457
453
|
- **`splitPane(tree: TreeNode | null, targetId: string, direction: SplitDirection, splitType: 'left' | 'right' | 'top' | 'bottom', paneToAdd: string): TreeNode | null`**
|
|
458
454
|
Splits a specific target pane by nesting it under a new `SplitNode` along with a new pane.
|
|
459
|
-
- **`splitRoot(tree: TreeNode | null, draggingId: string, splitType: 'left' | 'right' | 'top' | 'bottom'): TreeNode | null`**
|
|
460
|
-
Splits the entire dashboard tree at the root, placing the dragged pane on one half and the remaining layout tree on the other.
|
|
461
455
|
- **`swapPanes(tree: TreeNode | null, idA: string, idB: string): TreeNode | null`**
|
|
462
456
|
Swaps the positions of two panes in the tree.
|
|
463
457
|
- **`updatePaneMetadata(tree: TreeNode | null, paneId: string, updater: (current: Record<string, unknown> | undefined) => Record<string, unknown> | undefined): TreeNode | null`**
|
package/dist/index.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
'use strict';var react=require('react'),core=require('@dnd-kit/core'),jsxRuntime=require('react/jsx-runtime');var
|
|
1
|
+
'use strict';var react=require('react'),core=require('@dnd-kit/core'),jsxRuntime=require('react/jsx-runtime');var de=react.createContext(void 0),pe=react.createContext(void 0);var X=()=>{let e=react.useContext(de);if(!e)throw new Error("useZeugmaState must be used within a Zeugma provider");return e},we=()=>{let e=react.useContext(pe);if(!e)throw new Error("useZeugmaActions must be used within a Zeugma provider");return e};function He(e){let t=react.useRef(null);return react.useEffect(()=>{if(!e){t.current=null;return}let o=n=>{t.current={x:n.clientX,y:n.clientY};},r=n=>{let i=n.touches[0]||n.changedTouches[0];i&&(t.current={x:i.clientX,y:i.clientY});};return window.addEventListener("pointermove",o,{passive:true}),window.addEventListener("touchmove",r,{passive:true}),()=>{window.removeEventListener("pointermove",o),window.removeEventListener("touchmove",r);}},[e]),t}function B(e,t){if(e===null)return null;if(e.type==="pane")return e.paneId===t?null:e;let o=B(e.first,t),r=B(e.second,t);return o===null?r:r===null?o:{...e,first:o,second:r}}function ae(e,t,o,r,n){if(e===null)return typeof n=="string"?{type:"pane",paneId:n}:n;if(e.type==="pane"){if(e.paneId===t){let i=typeof n=="string"?{type:"pane",paneId:n}:n,l=r==="left"||r==="top";return {type:"split",direction:o,first:l?i:e,second:l?e:i,splitPercentage:50}}return e}return {...e,first:ae(e.first,t,o,r,n)||e.first,second:ae(e.second,t,o,r,n)||e.second}}function Ee(e,t,o){if(e===null)return null;let r=_(e,t),n=_(e,o);if(!r||!n)return e;function i(l){return l.type==="pane"?l.paneId===t?{...n}:l.paneId===o?{...r}:l:{...l,first:i(l.first),second:i(l.second)}}return i(e)}function Fe(e,t){if(e===null)return {type:"pane",paneId:t};function o(r,n){return r.type==="pane"?{type:"split",direction:n==="row"?"column":"row",splitPercentage:50,first:r,second:{type:"pane",paneId:t}}:{...r,second:o(r.second,r.direction)}}return o(e,null)}function J(e,t,o){return e===null?null:e===t?{...e,splitPercentage:o}:e.type==="split"?{...e,first:J(e.first,t,o)||e.first,second:J(e.second,t,o)||e.second}:e}function _(e,t){return e===null?null:e.type==="pane"?e.paneId===t?e:null:_(e.first,t)??_(e.second,t)}function me(e,t,o){if(e===null)return null;if(e.type==="pane"){if(e.paneId===t){let r=o(e.metadata);if(r===void 0){let{metadata:n,...i}=e;return i}return {...e,metadata:r}}return e}return {...e,first:me(e.first,t,o)??e.first,second:me(e.second,t,o)??e.second}}var et=8,tt=8,Yt=4;var _e=({activeId:e,render:t,className:o})=>{let r=react.useRef(null);return react.useEffect(()=>{let n=i=>{r.current&&(r.current.style.transform=`translate(${i.clientX+12}px, ${i.clientY+12}px)`);};return document.addEventListener("pointermove",n),()=>document.removeEventListener("pointermove",n)},[]),jsxRuntime.jsx("div",{ref:r,className:o,style:{position:"fixed",top:0,left:0,zIndex:9999,pointerEvents:"none"},children:t(e)})};var fe=class extends core.PointerSensor{static activators=[{eventName:"onPointerDown",handler:({nativeEvent:t})=>!t.target?.closest(".drag-cancel")}]},ge=class extends core.TouchSensor{static activators=[{eventName:"onTouchStart",handler:({nativeEvent:t})=>!t.target?.closest(".drag-cancel")}]};function ke(e){if(e instanceof MouseEvent||e instanceof PointerEvent)return {x:e.clientX,y:e.clientY};if(typeof TouchEvent<"u"&&e instanceof TouchEvent){let t=e.touches[0]||e.changedTouches[0];if(t)return {x:t.clientX,y:t.clientY}}return null}var ct=({layout:e,onChange:t,renderPane:o,renderDragOverlay:r,classNames:n={},fullscreenPaneId:i=null,onFullscreenChange:l,onRemove:p,dragActivationDistance:h=8,snapThreshold:P=8,onDragStart:D,onDragEnd:s,onResizeStart:v,onResize:E,onResizeEnd:g,minSplitPercentage:x=5,maxSplitPercentage:I=95,enableDragToDismiss:d=false,dismissThreshold:S=60,onDismissIntentChange:y,children:b})=>{let[u,m]=react.useState(e),[U,ie]=react.useState(e);e!==U&&(ie(e),m(e));let[N,q]=react.useState(null),[z,Z]=react.useState(null),V=react.useRef(null),H=react.useRef(null),R=He(N),C=react.useCallback(c=>{V.current=c;},[]),Y=react.useCallback(c=>o(c),[o]),L=react.useMemo(()=>n,[n.pane,n.dropPreview,n.swapPreview,n.dragOverlay,n.resizer,n.dismissPreview]),A=core.useSensors(core.useSensor(fe,{activationConstraint:{distance:h}}),core.useSensor(ge,{activationConstraint:{delay:250,tolerance:5}})),W=c=>{let f=c.active.id.toString();q(f);let a=c.activatorEvent;R.current=ke(a),d&&V.current?H.current=V.current.getBoundingClientRect():H.current=null,D&&D(f);},Se=c=>{if(!d)return;let f=c.active.id.toString(),a=H.current;if(!a){z!==null&&(Z(null),y?.(null));return}let w=c.activatorEvent,F=null,$=null;if(R.current)F=R.current.x,$=R.current.y;else {let T=ke(w);T&&(F=T.x+c.delta.x,$=T.y+c.delta.y);}let O=0;if(F!==null&&$!==null){let T=0,M=0;F<a.left?T=a.left-F:F>a.right&&(T=F-a.right),$<a.top?M=a.top-$:$>a.bottom&&(M=$-a.bottom),O=Math.sqrt(T*T+M*M);}else {let T=c.active.rect.current.translated;if(T){let M=T.left+T.width/2,K=T.top+T.height/2,te=0,ne=0;M<a.left?te=a.left-M:M>a.right&&(te=M-a.right),K<a.top?ne=a.top-K:K>a.bottom&&(ne=K-a.bottom),O=Math.sqrt(te*te+ne*ne);}}O>S?z!==f&&(Z(f),y?.(f)):z!==null&&(Z(null),y?.(null));},ue=c=>{q(null);let{active:f,over:a}=c,w=f.id.toString(),F=d&&z===w;if(Z(null),y?.(null),H.current=null,F){p?p(w):Q(w),s&&s(w,null,null);return}if(!a){s&&s(w,null,null);return}let $=a.id.toString(),O=$.match(/^drop-center-(.+)$/);if(O){let[,Re]=O;if(w!==Re){let Ze=Ee(u,w,Re);m(Ze),t(Ze);}s&&s(w,Re,{type:"swap",position:"center"});return}let ye=$.match(/^drop-(left|right|top|bottom)-(.+)$/);if(!ye){s&&s(w,null,null);return}let[,T,M]=ye;if(w===M){s&&s(w,null,null);return}let K=T==="left"||T==="right"?"row":"column",te=_(u,w)??{type:"pane",paneId:w},ne=B(u,w),Me=ae(ne,M,K,T,te);m(Me),t(Me),s&&s(w,M,{type:"split",direction:K,position:T});},G=react.useCallback(c=>{m(c),t(c);},[t]),Q=react.useCallback(c=>{let f=B(u,c);m(f),t(f);},[u,t]),j=react.useCallback(c=>{let f=Fe(u,c);m(f),t(f);},[u,t]),ce=react.useCallback((c,f)=>{let a=Ee(u,c,f);m(a),t(a);},[u,t]),se=react.useCallback((c,f,a,w)=>{let F=_(u,w)??{type:"pane",paneId:w},$=B(u,w),O=ae($,c,f,a,F);m(O),t(O);},[u,t]),ee=react.useCallback((c,f)=>{let a=J(u,c,f);m(a),t(a);},[u,t]),Le=react.useCallback((c,f)=>{let a=me(u,c,f);m(a),t(a);},[u,t]),Ce=react.useCallback((c,f)=>{let a=J(u,c,f);m(a),t(a),g&&g(c,f);},[u,t,g]),Ke=react.useMemo(()=>({layout:u,onLayoutChange:G,renderPane:Y,activeId:N,dismissIntentId:z,setContainerRef:C,fullscreenPaneId:i,classNames:L,onRemove:p,onFullscreenChange:l,snapThreshold:P,onResizeStart:v,onResize:E,onResizeEnd:Ce,minSplitPercentage:x,maxSplitPercentage:I}),[u,N,z,C,i,L,p,l,P,v,E,x,I,G,Y,Ce]),Je=react.useMemo(()=>({removePane:Q,addPane:j,swapPanes:ce,splitPane:se,updateSplitPercentage:ee,updatePaneMetadata:Le}),[Q,j,ce,se,ee,Le]);return jsxRuntime.jsx(pe.Provider,{value:Je,children:jsxRuntime.jsxs(de.Provider,{value:Ke,children:[jsxRuntime.jsx(core.DndContext,{id:"zeugma-dnd-context",sensors:A,collisionDetection:core.pointerWithin,onDragStart:W,onDragMove:Se,onDragEnd:ue,children:b}),N&&r&&jsxRuntime.jsx(_e,{activeId:N,render:r,className:`${n.dragOverlay||""} ${N===z?n.dismissPreview||"zeugma-dismiss-preview":""}`.trim()})]})})};function be({cursor:e,resizerEl:t,onMove:o,onEnd:r}){document.body.classList.add("zeugma-resizing");let n=document.createElement("style");n.id="zeugma-global-cursor-style",n.textContent=`
|
|
2
2
|
* {
|
|
3
3
|
cursor: ${e} !important;
|
|
4
4
|
user-select: none !important;
|
|
5
5
|
}
|
|
6
|
-
`,document.head.appendChild(o),t.setAttribute("data-resizing","true");let i=u=>{n(u);},c=()=>{document.body.classList.remove("zeugma-resizing"),t.removeAttribute("data-resizing");let u=document.getElementById("zeugma-global-cursor-style");u&&u.remove(),document.removeEventListener("pointermove",i),document.removeEventListener("pointerup",c),r();};document.addEventListener("pointermove",i),document.addEventListener("pointerup",c);}function we({containerRef:e,isRow:t,direction:n,splitPercentage:r,resizerSize:o,snapThreshold:i,layout:c,currentNode:u,onLayoutChange:w,onResizeStart:P,onResizeEnd:N}){let{onResizeStart:s,onResize:x,onResizeEnd:g,minSplitPercentage:y=5,maxSplitPercentage:z=95}=G();return react.useCallback(D=>{D.preventDefault();let S=e.current;if(!S)return;P&&P(),s&&s(u);let E=S.getBoundingClientRect(),H=D.clientX,I=D.clientY,d=r,m=D.currentTarget,te=Array.from(document.querySelectorAll('div[role="separator"][data-direction]')).filter(T=>T!==m&&T.getAttribute("data-direction")===n).map(T=>{let h=T.getBoundingClientRect();return t?h.left+h.width/2:h.top+h.height/2}),b=d;fe({cursor:t?"col-resize":"row-resize",resizerEl:m,onMove:T=>{let h=t?(T.clientX-H)/E.width*100:(T.clientY-I)/E.height*100,M=d+h,X=t?E.left+(E.width-o)*(M/100)+o/2:E.top+(E.height-o)*(M/100)+o/2,$=1/0,v=null;for(let K of te){let ne=Math.abs(X-K);ne<i&&ne<$&&($=ne,v=K);}let C=M;v!==null&&(C=t?(v-o/2-E.left)/(E.width-o)*100:(v-o/2-E.top)/(E.height-o)*100);let A=Math.max(y,Math.min(z,C));b=A;let _=S.children[0],B=S.children[S.children.length-1];_&&B&&(_.style.flex=`${A} 1 0%`,B.style.flex=`${100-A} 1 0%`),x&&x(u,A);},onEnd:()=>{let T=Q(c,u,b);w(T),N&&N(),g&&g(u,b);}});},[e,t,n,r,o,i,c,u,w,P,N,s,x,g,y,z])}var Rt=({currentNode:e,resizerSize:t,snapThreshold:n})=>{let{layout:r,onLayoutChange:o,classNames:i}=G(),[c,u]=react.useState(false),w=react.useRef(null),{direction:P,first:N,second:s,splitPercentage:x}=e,g=P==="row",y=we({containerRef:w,isRow:g,direction:P,splitPercentage:x,resizerSize:t,snapThreshold:n??8,layout:r,currentNode:e,onLayoutChange:o,onResizeStart:()=>u(true),onResizeEnd:()=>u(false)});return jsxRuntime.jsxs("div",{ref:w,style:{display:"flex",flexDirection:g?"row":"column",width:"100%",height:"100%",overflow:"hidden"},children:[jsxRuntime.jsx("div",{style:{flex:`${x} 1 0%`,overflow:"hidden"},children:jsxRuntime.jsx(ye,{tree:N,resizerSize:t,snapThreshold:n})}),jsxRuntime.jsx("div",{className:`zeugma-resizer ${i.resizer||""}`.trim(),"data-direction":P,"data-resizing":c||void 0,style:{width:g?`${t}px`:"100%",height:g?"100%":`${t}px`,cursor:g?"col-resize":"row-resize",position:"relative",zIndex:10,userSelect:"none",touchAction:"none",boxSizing:"border-box",flexShrink:0},onPointerDown:y,role:"separator","aria-valuenow":x,"aria-valuemin":5,"aria-valuemax":95}),jsxRuntime.jsx("div",{style:{flex:`${100-x} 1 0%`,overflow:"hidden"},children:jsxRuntime.jsx(ye,{tree:s,resizerSize:t,snapThreshold:n})})]})},ye=({tree:e,resizerSize:t=4,snapThreshold:n})=>{let{layout:r,renderPane:o,activeId:i,dismissIntentId:c,setContainerRef:u,classNames:w,fullscreenPaneId:P,snapThreshold:N}=G(),s=n!==void 0?n:N,x=react.useMemo(()=>e!==void 0||!i?false:k(r,i)!==null,[e,r,i]);if(P&&!e)return jsxRuntime.jsx("div",{style:{width:"100%",height:"100%",position:"relative"},children:o(P)});let g=e!==void 0?e:r;if(!g)return null;let y=()=>g.type==="pane"?jsxRuntime.jsx("div",{style:{width:"100%",height:"100%",position:"relative"},children:o(g.paneId)}):jsxRuntime.jsx(Rt,{currentNode:g,resizerSize:t,snapThreshold:s});return e===void 0?jsxRuntime.jsxs("div",{ref:u,className:`zeugma-dashboard-root ${i!==null&&i===c?"zeugma-dashboard-dismiss-active":""}`.trim(),style:{position:"relative",width:"100%",height:"100%",overflow:"hidden"},children:[y(),jsxRuntime.jsx(Ye,{activeId:i,hasOtherPanes:x,dropPreviewClassName:w.dropPreview})]}):y()};var qe="zeugma-height:",Et="default-pane";function Nt(e){try{let t=localStorage.getItem(qe+e);if(t!==null){let n=Number(t);if(Number.isFinite(n)&&n>0)return n}}catch{}return null}function Be(e,t){try{localStorage.setItem(qe+e,String(Math.round(t)));}catch{}}var We=({children:e,active:t=true,height:n,onHeightChange:r,minHeight:o=100,maxHeight:i=1/0,persist:c,localStorageKey:u,resizerHeight:w=6,className:P,resizerClassName:N})=>{let s=c?u||Et:null,x=()=>{let I=(s?Nt(s):null)??n??400;return me(I,o,i)},[g,y]=react.useState(x),z=react.useRef(null),D=s?g:n??g,S=react.useRef(n);react.useEffect(()=>{if(n!==void 0&&n!==S.current){let I=me(n,o,i);y(I),s&&Be(s,I);}S.current=n;},[n,o,i,s]);let E=react.useCallback(()=>i,[i]),H=react.useCallback(I=>{I.preventDefault();let d=I.clientY,m=D,ee=E(),te=I.currentTarget,b=Ge(z.current),T=b?b.scrollTop:0,h=d,M=null,X=(v,C)=>{let A=C-T,B=v-d+A,K=me(m+B,o,ee);return z.current&&(z.current.style.height=`${K}px`),K},$=()=>{if(!b)return;let v=b===document.documentElement||b===document.body?{top:0,bottom:window.innerHeight}:b.getBoundingClientRect(),C=40,A=10,_=0;h>v.bottom-C?_=Math.min(1,(h-(v.bottom-C))/C)*A:h<v.top+C&&(_=-Math.min(1,(v.top+C-h)/C)*A),_!==0&&(b.scrollTop+=_,X(h,b.scrollTop)),M=requestAnimationFrame($);};M=requestAnimationFrame($),fe({cursor:"row-resize",resizerEl:te,onMove:v=>{h=v.clientY,b&&X(h,b.scrollTop);},onEnd:()=>{M!==null&&cancelAnimationFrame(M);let v=m;z.current&&(v=z.current.getBoundingClientRect().height),v=me(v,o,ee),y(v),r&&r(v),s&&Be(s,v);}});},[D,o,E,r,s]);return t?jsxRuntime.jsxs("div",{ref:z,className:`zeugma-resizable-container ${P||""}`.trim(),style:{height:`${D}px`,position:"relative",overflow:"hidden",boxSizing:"border-box"},children:[jsxRuntime.jsx("div",{style:{height:`calc(100% - ${w}px)`,overflow:"hidden"},children:e}),jsxRuntime.jsx("div",{className:`zeugma-resizable-handle ${N||""}`.trim(),style:{height:`${w}px`,cursor:"row-resize",position:"relative",zIndex:10,userSelect:"none",touchAction:"none",boxSizing:"border-box",flexShrink:0},onPointerDown:H,role:"separator","aria-orientation":"horizontal","aria-valuenow":Math.round(D),"aria-valuemin":o,"aria-valuemax":i===1/0?void 0:i})]}):jsxRuntime.jsx("div",{className:`zeugma-resizable-container disabled ${P||""}`.trim(),style:{height:"100%",position:"relative",overflow:"hidden",boxSizing:"border-box"},children:jsxRuntime.jsx("div",{style:{height:"100%",overflow:"hidden"},children:e})})};function me(e,t,n){return Math.max(t,Math.min(n,e))}function Ge(e){if(typeof window>"u"||!e)return null;let t=e.parentElement;if(!t)return document.documentElement;let r=window.getComputedStyle(t).overflowY;return r==="auto"||r==="scroll"?t:Ge(t)}var ve=react.createContext(null);var Ct={top:{position:"absolute",top:0,left:"25%",width:"50%",height:"25%",zIndex:20,pointerEvents:"auto"},bottom:{position:"absolute",bottom:0,left:"25%",width:"50%",height:"25%",zIndex:20,pointerEvents:"auto"},left:{position:"absolute",top:"25%",left:0,width:"25%",height:"50%",zIndex:20,pointerEvents:"auto"},right:{position:"absolute",top:"25%",right:0,width:"25%",height:"50%",zIndex:20,pointerEvents:"auto"},center:{position:"absolute",top:"25%",left:"25%",width:"50%",height:"50%",zIndex:20,pointerEvents:"auto"}},Lt={top:{position:"absolute",top:0,left:0,right:0,height:"50%",zIndex:21,pointerEvents:"none",boxSizing:"border-box"},bottom:{position:"absolute",bottom:0,left:0,right:0,height:"50%",zIndex:21,pointerEvents:"none",boxSizing:"border-box"},left:{position:"absolute",top:0,bottom:0,left:0,width:"50%",zIndex:21,pointerEvents:"none",boxSizing:"border-box"},right:{position:"absolute",top:0,bottom:0,right:0,width:"50%",zIndex:21,pointerEvents:"none",boxSizing:"border-box"},center:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:21,pointerEvents:"none",boxSizing:"border-box"}},Ke=({id:e,position:t,activeClassName:n})=>{let{setNodeRef:r,isOver:o}=core.useDroppable({id:e});return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{ref:r,style:Ct[t]}),o&&jsxRuntime.jsx("div",{className:n,style:Lt[t]})]})},Mt=({id:e,children:t,style:n})=>{let{layout:r,activeId:o,classNames:i,fullscreenPaneId:c,onRemove:u,onFullscreenChange:w}=G(),{removePane:P,updatePaneMetadata:N}=Pe(),s=o!==null&&o!==e,{attributes:x,listeners:g,setNodeRef:y,isDragging:z}=core.useDraggable({id:e}),D=o===e||z,S=c===e,H=react.useMemo(()=>V(r,e),[r,e])?.metadata,I=react.useMemo(()=>({isDragging:D,isFullscreen:S,toggleFullscreen:()=>w?.(S?null:e),remove:()=>{S&&w?.(null),u?u(e):P(e);},metadata:H,updateMetadata:m=>{N(e,m);}}),[D,S,w,e,u,P,H,N]),d=react.useMemo(()=>({...g,...x}),[g,x]);return jsxRuntime.jsx(ve.Provider,{value:d,children:jsxRuntime.jsxs("div",{ref:y,className:i.pane,style:{position:"relative",width:"100%",height:"100%",...n},children:[t(I),s&&jsxRuntime.jsxs("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:15,pointerEvents:"none"},children:[["top","bottom","left","right"].map(m=>jsxRuntime.jsx(Ke,{id:`drop-${m}-${e}`,position:m,activeClassName:i.dropPreview},m)),jsxRuntime.jsx(Ke,{id:`drop-center-${e}`,position:"center",activeClassName:i.swapPreview})]})]})})};var Ht=({children:e,className:t,style:n})=>{let r=react.useContext(ve);if(!r)throw new Error("<DragHandle> must be used inside a <Pane>");return jsxRuntime.jsx("div",{className:t,style:{cursor:"grab",userSelect:"none",touchAction:"none",...n},...r,children:e})};exports.DEFAULT_DRAG_ACTIVATION_DISTANCE=tt;exports.DEFAULT_RESIZER_SIZE=Xt;exports.DEFAULT_SNAP_THRESHOLD=et;exports.DragHandle=Ht;exports.Pane=Mt;exports.PaneTree=ye;exports.ResizableContainer=We;exports.Zeugma=ut;exports.addPane=Fe;exports.createDragSession=fe;exports.findPane=V;exports.removePane=k;exports.splitPane=re;exports.splitRoot=$e;exports.swapPanes=xe;exports.updatePaneMetadata=le;exports.updateSplitPercentage=Q;exports.useResizer=we;exports.useZeugmaActions=Pe;exports.useZeugmaState=G;//# sourceMappingURL=index.cjs.map
|
|
6
|
+
`,document.head.appendChild(n),t.setAttribute("data-resizing","true");let i=p=>{o(p);},l=()=>{document.body.classList.remove("zeugma-resizing"),t.removeAttribute("data-resizing");let p=document.getElementById("zeugma-global-cursor-style");p&&p.remove(),document.removeEventListener("pointermove",i),document.removeEventListener("pointerup",l),r();};document.addEventListener("pointermove",i),document.addEventListener("pointerup",l);}function Te({containerRef:e,isRow:t,direction:o,splitPercentage:r,resizerSize:n,snapThreshold:i,layout:l,currentNode:p,onLayoutChange:h,onResizeStart:P,onResizeEnd:D,parentLeft:s,parentTop:v,parentWidth:E,parentHeight:g}){let{onResizeStart:x,onResize:I,onResizeEnd:d,minSplitPercentage:S=5,maxSplitPercentage:y=95}=X();return react.useCallback(b=>{b.preventDefault();let u=e.current;if(!u)return;P&&P(),x&&x(p);let m=u.getBoundingClientRect(),U=b.clientX,ie=b.clientY,N=r,q=b.currentTarget,z=m.left+m.width*(s/100),Z=m.top+m.height*(v/100),V=m.width*(E/100),H=m.height*(g/100),C=Array.from(document.querySelectorAll('div[role="separator"][data-direction]')).filter(L=>L!==q&&L.getAttribute("data-direction")===o).map(L=>{let A=L.getBoundingClientRect();return t?A.left+A.width/2:A.top+A.height/2}),Y=N;be({cursor:t?"col-resize":"row-resize",resizerEl:q,onMove:L=>{let A=t?(L.clientX-U)/V*100:(L.clientY-ie)/H*100,W=N+A,Se=t?z+(V-n)*(W/100)+n/2:Z+(H-n)*(W/100)+n/2,ue=1/0,G=null;for(let se of C){let ee=Math.abs(Se-se);ee<i&&ee<ue&&(ue=ee,G=se);}let Q=W;G!==null&&(Q=t?(G-n/2-z)/(V-n)*100:(G-n/2-Z)/(H-n)*100);let j=Math.max(S,Math.min(y,Q));Y=j;let ce=J(l,p,j);h(ce),I&&I(p,j);},onEnd:()=>{D&&D(),d&&d(p,Y);}});},[e,t,o,r,n,i,l,p,h,P,D,x,I,d,S,y,s,v,E,g])}function re(e,t=0,o=0,r=100,n=100,i="root"){if(e.type==="pane")return {panes:[{paneId:e.paneId,left:t,top:o,width:r,height:n,node:e}],splitters:[]};let{direction:l,splitPercentage:p,first:h,second:P}=e,s={id:`splitter-${i}-${l}`,currentNode:e,direction:l,left:l==="row"?t+r*(p/100):t,top:l==="column"?o+n*(p/100):o,width:l==="row"?0:r,height:l==="column"?0:n,parentLeft:t,parentTop:o,parentWidth:r,parentHeight:n},v={panes:[],splitters:[]},E={panes:[],splitters:[]};if(l==="row"){let g=r*(p/100);v=re(h,t,o,g,n,`${i}-L`),E=re(P,t+g,o,r-g,n,`${i}-R`);}else {let g=n*(p/100);v=re(h,t,o,r,g,`${i}-T`),E=re(P,t,o+g,r,n-g,`${i}-B`);}return {panes:[...v.panes,...E.panes],splitters:[s,...v.splitters,...E.splitters]}}var vt=({splitter:e,resizerSize:t,snapThreshold:o,containerRef:r})=>{let{layout:n,onLayoutChange:i,classNames:l}=X(),[p,h]=react.useState(false),{currentNode:P,direction:D,left:s,top:v,width:E,height:g,parentLeft:x,parentTop:I,parentWidth:d,parentHeight:S}=e,y=D==="row",b=Te({containerRef:r,isRow:y,direction:D,splitPercentage:P.splitPercentage,resizerSize:t,snapThreshold:o,layout:n,currentNode:P,onLayoutChange:i,onResizeStart:()=>h(true),onResizeEnd:()=>h(false),parentLeft:x,parentTop:I,parentWidth:d,parentHeight:S}),u=y?{position:"absolute",left:`calc(${s}% - ${t/2}px)`,top:`${v}%`,width:`${t}px`,height:`${g}%`,cursor:"col-resize",zIndex:10,userSelect:"none",touchAction:"none",boxSizing:"border-box"}:{position:"absolute",left:`${s}%`,top:`calc(${v}% - ${t/2}px)`,width:`${E}%`,height:`${t}px`,cursor:"row-resize",zIndex:10,userSelect:"none",touchAction:"none",boxSizing:"border-box"};return jsxRuntime.jsx("div",{className:`zeugma-resizer ${l.resizer||""}`.trim(),"data-direction":D,"data-resizing":p||void 0,style:u,onPointerDown:b,role:"separator","aria-valuenow":P.splitPercentage,"aria-valuemin":5,"aria-valuemax":95})},bt=({tree:e,resizerSize:t=4,snapThreshold:o})=>{let{layout:r,renderPane:n,activeId:i,dismissIntentId:l,setContainerRef:p,fullscreenPaneId:h,snapThreshold:P}=X(),D=o!==void 0?o:P??8,s=e!==void 0?e:r,v=react.useRef(null),{panes:E,splitters:g,draggedPane:x}=react.useMemo(()=>{if(!s)return {panes:[],splitters:[],draggedPane:null};if(i){let y=B(s,i),b=_(s,i),u=b?{paneId:i,node:b}:null;if(y){let{panes:m,splitters:U}=re(y);return {panes:m,splitters:U,draggedPane:u}}else return {panes:[],splitters:[],draggedPane:u}}let{panes:d,splitters:S}=re(s);return {panes:d,splitters:S,draggedPane:null}},[s,i]);if(!s)return null;let I=()=>jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[E.map(d=>{let S=h===d.paneId;return jsxRuntime.jsx("div",{style:{position:"absolute",left:S?"0%":`${d.left}%`,top:S?"0%":`${d.top}%`,width:S?"100%":`${d.width}%`,height:S?"100%":`${d.height}%`,overflow:"hidden",zIndex:S?20:1,display:h&&!S?"none":"block",padding:S?"0px":`${t/2}px`,boxSizing:"border-box"},children:n(d.paneId)},d.paneId)}),x&&jsxRuntime.jsx("div",{style:{position:"absolute",left:"0%",top:"0%",width:"0px",height:"0px",overflow:"hidden",zIndex:0,opacity:0,pointerEvents:"none",display:"none"},children:n(x.paneId)},x.paneId),!h&&g.map(d=>jsxRuntime.jsx(vt,{splitter:d,resizerSize:t,snapThreshold:D,containerRef:v},d.id))]});return e===void 0?jsxRuntime.jsx("div",{ref:y=>{p(y),v.current=y;},className:`zeugma-dashboard-root ${i!==null&&i===l?"zeugma-dashboard-dismiss-active":""}`.trim(),style:{position:"relative",width:"100%",height:"100%",overflow:"hidden"},children:I()}):jsxRuntime.jsx("div",{ref:v,style:{position:"relative",width:"100%",height:"100%",overflow:"hidden"},children:I()})};var Xe="zeugma-height:",yt="default-pane";function Rt(e){try{let t=localStorage.getItem(Xe+e);if(t!==null){let o=Number(t);if(Number.isFinite(o)&&o>0)return o}}catch{}return null}function We(e,t){try{localStorage.setItem(Xe+e,String(Math.round(t)));}catch{}}var Be=({children:e,active:t=true,height:o,onHeightChange:r,minHeight:n=100,maxHeight:i=1/0,persist:l,localStorageKey:p,resizerHeight:h=6,className:P,resizerClassName:D})=>{let s=l?p||yt:null,v=()=>{let b=(s?Rt(s):null)??o??400;return he(b,n,i)},[E,g]=react.useState(v),x=react.useRef(null),I=s?E:o??E,d=react.useRef(o);react.useEffect(()=>{if(o!==void 0&&o!==d.current){let b=he(o,n,i);g(b),s&&We(s,b);}d.current=o;},[o,n,i,s]);let S=react.useCallback(()=>i,[i]),y=react.useCallback(b=>{b.preventDefault();let u=b.clientY,m=I,U=S(),ie=b.currentTarget,N=qe(x.current),q=N?N.scrollTop:0,z=u,Z=null,V=(R,C)=>{let Y=C-q,A=R-u+Y,W=he(m+A,n,U);return x.current&&(x.current.style.height=`${W}px`),W},H=()=>{if(!N)return;let R=N===document.documentElement||N===document.body?{top:0,bottom:window.innerHeight}:N.getBoundingClientRect(),C=40,Y=10,L=0;z>R.bottom-C?L=Math.min(1,(z-(R.bottom-C))/C)*Y:z<R.top+C&&(L=-Math.min(1,(R.top+C-z)/C)*Y),L!==0&&(N.scrollTop+=L,V(z,N.scrollTop)),Z=requestAnimationFrame(H);};Z=requestAnimationFrame(H),be({cursor:"row-resize",resizerEl:ie,onMove:R=>{z=R.clientY,N&&V(z,N.scrollTop);},onEnd:()=>{Z!==null&&cancelAnimationFrame(Z);let R=m;x.current&&(R=x.current.getBoundingClientRect().height),R=he(R,n,U),g(R),r&&r(R),s&&We(s,R);}});},[I,n,S,r,s]);return t?jsxRuntime.jsxs("div",{ref:x,className:`zeugma-resizable-container ${P||""}`.trim(),style:{height:`${I}px`,position:"relative",overflow:"hidden",boxSizing:"border-box"},children:[jsxRuntime.jsx("div",{style:{height:`calc(100% - ${h}px)`,overflow:"hidden"},children:e}),jsxRuntime.jsx("div",{className:`zeugma-resizable-handle ${D||""}`.trim(),style:{height:`${h}px`,cursor:"row-resize",position:"relative",zIndex:10,userSelect:"none",touchAction:"none",boxSizing:"border-box",flexShrink:0},onPointerDown:y,role:"separator","aria-orientation":"horizontal","aria-valuenow":Math.round(I),"aria-valuemin":n,"aria-valuemax":i===1/0?void 0:i})]}):jsxRuntime.jsx("div",{className:`zeugma-resizable-container disabled ${P||""}`.trim(),style:{height:"100%",position:"relative",overflow:"hidden",boxSizing:"border-box"},children:jsxRuntime.jsx("div",{style:{height:"100%",overflow:"hidden"},children:e})})};function he(e,t,o){return Math.max(t,Math.min(o,e))}function qe(e){if(typeof window>"u"||!e)return null;let t=e.parentElement;if(!t)return document.documentElement;let r=window.getComputedStyle(t).overflowY;return r==="auto"||r==="scroll"?t:qe(t)}var xe=react.createContext(null);var Tt={top:{position:"absolute",top:0,left:"25%",width:"50%",height:"25%",zIndex:20,pointerEvents:"auto"},bottom:{position:"absolute",bottom:0,left:"25%",width:"50%",height:"25%",zIndex:20,pointerEvents:"auto"},left:{position:"absolute",top:"25%",left:0,width:"25%",height:"50%",zIndex:20,pointerEvents:"auto"},right:{position:"absolute",top:"25%",right:0,width:"25%",height:"50%",zIndex:20,pointerEvents:"auto"},center:{position:"absolute",top:"25%",left:"25%",width:"50%",height:"50%",zIndex:20,pointerEvents:"auto"}},Dt={top:{position:"absolute",top:0,left:0,right:0,height:"50%",zIndex:21,pointerEvents:"none",boxSizing:"border-box"},bottom:{position:"absolute",bottom:0,left:0,right:0,height:"50%",zIndex:21,pointerEvents:"none",boxSizing:"border-box"},left:{position:"absolute",top:0,bottom:0,left:0,width:"50%",zIndex:21,pointerEvents:"none",boxSizing:"border-box"},right:{position:"absolute",top:0,bottom:0,right:0,width:"50%",zIndex:21,pointerEvents:"none",boxSizing:"border-box"},center:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:21,pointerEvents:"none",boxSizing:"border-box"}},Ge=({id:e,position:t,activeClassName:o})=>{let{setNodeRef:r,isOver:n}=core.useDroppable({id:e});return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{ref:r,style:Tt[t]}),n&&jsxRuntime.jsx("div",{className:o,style:Dt[t]})]})},zt=({id:e,children:t,style:o})=>{let{layout:r,activeId:n,classNames:i,fullscreenPaneId:l,onRemove:p,onFullscreenChange:h}=X(),{removePane:P,updatePaneMetadata:D}=we(),s=n!==null&&n!==e,{attributes:v,listeners:E,setNodeRef:g,isDragging:x}=core.useDraggable({id:e}),I=n===e||x,d=l===e,y=react.useMemo(()=>_(r,e),[r,e])?.metadata,b=react.useMemo(()=>({isDragging:I,isFullscreen:d,toggleFullscreen:()=>h?.(d?null:e),remove:()=>{d&&h?.(null),p?p(e):P(e);},metadata:y,updateMetadata:m=>{D(e,m);}}),[I,d,h,e,p,P,y,D]),u=react.useMemo(()=>({...E,...v}),[E,v]);return jsxRuntime.jsx(xe.Provider,{value:u,children:jsxRuntime.jsxs("div",{ref:g,className:i.pane,style:{position:"relative",width:"100%",height:"100%",...o},children:[t(b),s&&jsxRuntime.jsxs("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:15,pointerEvents:"none"},children:[["top","bottom","left","right"].map(m=>jsxRuntime.jsx(Ge,{id:`drop-${m}-${e}`,position:m,activeClassName:i.dropPreview},m)),jsxRuntime.jsx(Ge,{id:`drop-center-${e}`,position:"center",activeClassName:i.swapPreview})]})]})})};var Mt=({children:e,className:t,style:o})=>{let r=react.useContext(xe);if(!r)throw new Error("<DragHandle> must be used inside a <Pane>");return jsxRuntime.jsx("div",{className:t,style:{cursor:"grab",userSelect:"none",touchAction:"none",...o},...r,children:e})};exports.DEFAULT_DRAG_ACTIVATION_DISTANCE=tt;exports.DEFAULT_RESIZER_SIZE=Yt;exports.DEFAULT_SNAP_THRESHOLD=et;exports.DragHandle=Mt;exports.Pane=zt;exports.PaneTree=bt;exports.ResizableContainer=Be;exports.Zeugma=ct;exports.addPane=Fe;exports.createDragSession=be;exports.findPane=_;exports.removePane=B;exports.splitPane=ae;exports.swapPanes=Ee;exports.updatePaneMetadata=me;exports.updateSplitPercentage=J;exports.useResizer=Te;exports.useZeugmaActions=we;exports.useZeugmaState=X;//# sourceMappingURL=index.cjs.map
|
|
7
7
|
//# sourceMappingURL=index.cjs.map
|