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/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {createContext,useContext,useState,useRef,useCallback,useMemo,useEffect}from'react';import {useSensors,useSensor,DndContext,pointerWithin,useDraggable,PointerSensor,TouchSensor,useDroppable}from'@dnd-kit/core';import {jsx,jsxs,Fragment}from'react/jsx-runtime';var
|
|
1
|
+
import {createContext,useContext,useState,useRef,useCallback,useMemo,useEffect}from'react';import {useSensors,useSensor,DndContext,pointerWithin,useDraggable,PointerSensor,TouchSensor,useDroppable}from'@dnd-kit/core';import {jsx,jsxs,Fragment}from'react/jsx-runtime';var de=createContext(void 0),pe=createContext(void 0);var X=()=>{let e=useContext(de);if(!e)throw new Error("useZeugmaState must be used within a Zeugma provider");return e},we=()=>{let e=useContext(pe);if(!e)throw new Error("useZeugmaActions must be used within a Zeugma provider");return e};function He(e){let t=useRef(null);return 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=useRef(null);return 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)},[]),jsx("div",{ref:r,className:o,style:{position:"fixed",top:0,left:0,zIndex:9999,pointerEvents:"none"},children:t(e)})};var fe=class extends PointerSensor{static activators=[{eventName:"onPointerDown",handler:({nativeEvent:t})=>!t.target?.closest(".drag-cancel")}]},ge=class extends 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]=useState(e),[U,ie]=useState(e);e!==U&&(ie(e),m(e));let[N,q]=useState(null),[z,Z]=useState(null),V=useRef(null),H=useRef(null),R=He(N),C=useCallback(c=>{V.current=c;},[]),Y=useCallback(c=>o(c),[o]),L=useMemo(()=>n,[n.pane,n.dropPreview,n.swapPreview,n.dragOverlay,n.resizer,n.dismissPreview]),A=useSensors(useSensor(fe,{activationConstraint:{distance:h}}),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=useCallback(c=>{m(c),t(c);},[t]),Q=useCallback(c=>{let f=B(u,c);m(f),t(f);},[u,t]),j=useCallback(c=>{let f=Fe(u,c);m(f),t(f);},[u,t]),ce=useCallback((c,f)=>{let a=Ee(u,c,f);m(a),t(a);},[u,t]),se=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=useCallback((c,f)=>{let a=J(u,c,f);m(a),t(a);},[u,t]),Le=useCallback((c,f)=>{let a=me(u,c,f);m(a),t(a);},[u,t]),Ce=useCallback((c,f)=>{let a=J(u,c,f);m(a),t(a),g&&g(c,f);},[u,t,g]),Ke=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=useMemo(()=>({removePane:Q,addPane:j,swapPanes:ce,splitPane:se,updateSplitPercentage:ee,updatePaneMetadata:Le}),[Q,j,ce,se,ee,Le]);return jsx(pe.Provider,{value:Je,children:jsxs(de.Provider,{value:Ke,children:[jsx(DndContext,{id:"zeugma-dnd-context",sensors:A,collisionDetection:pointerWithin,onDragStart:W,onDragMove:Se,onDragEnd:ue,children:b}),N&&r&&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 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]=useState(false),w=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 jsxs("div",{ref:w,style:{display:"flex",flexDirection:g?"row":"column",width:"100%",height:"100%",overflow:"hidden"},children:[jsx("div",{style:{flex:`${x} 1 0%`,overflow:"hidden"},children:jsx(ye,{tree:N,resizerSize:t,snapThreshold:n})}),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}),jsx("div",{style:{flex:`${100-x} 1 0%`,overflow:"hidden"},children: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=useMemo(()=>e!==void 0||!i?false:k(r,i)!==null,[e,r,i]);if(P&&!e)return 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"?jsx("div",{style:{width:"100%",height:"100%",position:"relative"},children:o(g.paneId)}):jsx(Rt,{currentNode:g,resizerSize:t,snapThreshold:s});return e===void 0?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(),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]=useState(x),z=useRef(null),D=s?g:n??g,S=useRef(n);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=useCallback(()=>i,[i]),H=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?jsxs("div",{ref:z,className:`zeugma-resizable-container ${P||""}`.trim(),style:{height:`${D}px`,position:"relative",overflow:"hidden",boxSizing:"border-box"},children:[jsx("div",{style:{height:`calc(100% - ${w}px)`,overflow:"hidden"},children:e}),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})]}):jsx("div",{className:`zeugma-resizable-container disabled ${P||""}`.trim(),style:{height:"100%",position:"relative",overflow:"hidden",boxSizing:"border-box"},children: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=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}=useDroppable({id:e});return jsxs(Fragment,{children:[jsx("div",{ref:r,style:Ct[t]}),o&&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}=useDraggable({id:e}),D=o===e||z,S=c===e,H=useMemo(()=>V(r,e),[r,e])?.metadata,I=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=useMemo(()=>({...g,...x}),[g,x]);return jsx(ve.Provider,{value:d,children:jsxs("div",{ref:y,className:i.pane,style:{position:"relative",width:"100%",height:"100%",...n},children:[t(I),s&&jsxs("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:15,pointerEvents:"none"},children:[["top","bottom","left","right"].map(m=>jsx(Ke,{id:`drop-${m}-${e}`,position:m,activeClassName:i.dropPreview},m)),jsx(Ke,{id:`drop-center-${e}`,position:"center",activeClassName:i.swapPreview})]})]})})};var Ht=({children:e,className:t,style:n})=>{let r=useContext(ve);if(!r)throw new Error("<DragHandle> must be used inside a <Pane>");return jsx("div",{className:t,style:{cursor:"grab",userSelect:"none",touchAction:"none",...n},...r,children:e})};export{tt as DEFAULT_DRAG_ACTIVATION_DISTANCE,Xt as DEFAULT_RESIZER_SIZE,et as DEFAULT_SNAP_THRESHOLD,Ht as DragHandle,Mt as Pane,ye as PaneTree,We as ResizableContainer,ut as Zeugma,Fe as addPane,fe as createDragSession,V as findPane,k as removePane,re as splitPane,$e as splitRoot,xe as swapPanes,le as updatePaneMetadata,Q as updateSplitPercentage,we as useResizer,Pe as useZeugmaActions,G as useZeugmaState};//# sourceMappingURL=index.js.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 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]=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 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=useRef(null),{panes:E,splitters:g,draggedPane:x}=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=()=>jsxs(Fragment,{children:[E.map(d=>{let S=h===d.paneId;return 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&&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=>jsx(vt,{splitter:d,resizerSize:t,snapThreshold:D,containerRef:v},d.id))]});return e===void 0?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()}):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]=useState(v),x=useRef(null),I=s?E:o??E,d=useRef(o);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=useCallback(()=>i,[i]),y=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?jsxs("div",{ref:x,className:`zeugma-resizable-container ${P||""}`.trim(),style:{height:`${I}px`,position:"relative",overflow:"hidden",boxSizing:"border-box"},children:[jsx("div",{style:{height:`calc(100% - ${h}px)`,overflow:"hidden"},children:e}),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})]}):jsx("div",{className:`zeugma-resizable-container disabled ${P||""}`.trim(),style:{height:"100%",position:"relative",overflow:"hidden",boxSizing:"border-box"},children: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=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}=useDroppable({id:e});return jsxs(Fragment,{children:[jsx("div",{ref:r,style:Tt[t]}),n&&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}=useDraggable({id:e}),I=n===e||x,d=l===e,y=useMemo(()=>_(r,e),[r,e])?.metadata,b=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=useMemo(()=>({...E,...v}),[E,v]);return jsx(xe.Provider,{value:u,children:jsxs("div",{ref:g,className:i.pane,style:{position:"relative",width:"100%",height:"100%",...o},children:[t(b),s&&jsxs("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:15,pointerEvents:"none"},children:[["top","bottom","left","right"].map(m=>jsx(Ge,{id:`drop-${m}-${e}`,position:m,activeClassName:i.dropPreview},m)),jsx(Ge,{id:`drop-center-${e}`,position:"center",activeClassName:i.swapPreview})]})]})})};var Mt=({children:e,className:t,style:o})=>{let r=useContext(xe);if(!r)throw new Error("<DragHandle> must be used inside a <Pane>");return jsx("div",{className:t,style:{cursor:"grab",userSelect:"none",touchAction:"none",...o},...r,children:e})};export{tt as DEFAULT_DRAG_ACTIVATION_DISTANCE,Yt as DEFAULT_RESIZER_SIZE,et as DEFAULT_SNAP_THRESHOLD,Mt as DragHandle,zt as Pane,bt as PaneTree,Be as ResizableContainer,ct as Zeugma,Fe as addPane,be as createDragSession,_ as findPane,B as removePane,ae as splitPane,Ee as swapPanes,me as updatePaneMetadata,J as updateSplitPercentage,Te as useResizer,we as useZeugmaActions,X as useZeugmaState};//# sourceMappingURL=index.js.map
|
|
7
7
|
//# sourceMappingURL=index.js.map
|