@byeolnaerim/flex-layout 0.0.9 → 0.0.10

package/dist/flex-layout/hooks/useDrag.js

@@ -1,258 +1 @@
-import equal from "fast-deep-equal";
-import {
-  useCallback,
-  useEffect,
-  useRef,
-  useState
-} from "react";
-import {
-  animationFrameScheduler,
-  auditTime,
-  BehaviorSubject,
-  distinctUntilChanged,
-  map,
-  Subject
-} from "rxjs";
-import { getClientXy } from "../utils/FlexLayoutUtils";
-const dragStateSubject = new Subject();
-const dragState = dragStateSubject;
-const isResizingSubject = new BehaviorSubject(false);
-const filterChildren = (obj) => {
-  const { children, ...rest } = obj || {};
-  return rest;
-};
-const useDragCapture = (targetRef) => {
-  const [state, setState] = useState(null);
-  useEffect(() => {
-    const subscription = dragStateSubject.pipe(
-      auditTime(0, animationFrameScheduler),
-      map((value) => {
-        if (!targetRef || !targetRef.current) return null;
-        const { x, y } = value;
-        const rect = targetRef.current.getBoundingClientRect();
-        const {
-          width,
-          height,
-          x: rectX,
-          y: rectY,
-          right,
-          bottom
-        } = rect;
-        let isOver = false;
-        if (x < rectX || x > right || y < rectY || y > bottom) {
-          isOver = true;
-        }
-        const leftBoundary = rectX + width * 0.2;
-        const rightBoundary = right - width * 0.2;
-        const topBoundary = rectY + height * 0.2;
-        const bottomBoundary = bottom - height * 0.2;
-        let position = "centerBoundary";
-        if (x < leftBoundary) {
-          position = "leftBoundary";
-        } else if (x > rightBoundary) {
-          position = "rightBoundary";
-        } else if (y < topBoundary) {
-          position = "topBoundary";
-        } else if (y > bottomBoundary) {
-          position = "bottomBoundary";
-        }
-        return {
-          positionName: position,
-          isOver,
-          ...value
-        };
-      }),
-      distinctUntilChanged((prev, curr) => {
-        const { children: prevChildren, ..._prev } = prev || {};
-        const { children: currChildren, ..._curr } = curr || {};
-        return equal(filterChildren(_prev), filterChildren(_curr));
-      })
-    ).subscribe({
-      next: setState,
-      error: (err) => console.error(err)
-    });
-    return () => subscription.unsubscribe();
-  }, [targetRef]);
-  return state;
-};
-const dropMovementEventSubject = new Subject();
-const allSplitScreenCount = new BehaviorSubject(0);
-const useDragEvents = ({
-  isBlockingActiveInput = false
-}) => {
-  const dragResumeTimer = useRef(null);
-  const dragStartDelayTimer = useRef(
-    null
-  );
-  const scrollThreshold = 10;
-  const isScrolling = useRef(false);
-  const isPending = useRef(false);
-  const isMouseDown = useRef(false);
-  const isDragging = useRef(false);
-  const touchStartX = useRef(0);
-  const touchStartY = useRef(0);
-  useEffect(() => {
-    return () => {
-      if (dragResumeTimer.current) {
-        clearTimeout(dragResumeTimer.current);
-        dragResumeTimer.current = null;
-      }
-      if (dragStartDelayTimer.current) {
-        clearTimeout(dragStartDelayTimer.current);
-        dragStartDelayTimer.current = null;
-      }
-    };
-  }, []);
-  const handleStart = useCallback(
-    ({
-      event: _event,
-      dragStartCallback
-    }) => {
-      const event = _event instanceof Event ? _event : _event.nativeEvent;
-      if (dragResumeTimer.current) {
-        clearTimeout(dragResumeTimer.current);
-        dragResumeTimer.current = null;
-      }
-      if (dragStartDelayTimer.current) {
-        clearTimeout(dragStartDelayTimer.current);
-        dragStartDelayTimer.current = null;
-      }
-      if (event.target.contentEditable === "true" || isBlockingActiveInput && document.activeElement === event.target) {
-        return;
-      }
-      if (event.cancelable && !(event instanceof globalThis.TouchEvent)) {
-        event.preventDefault();
-      }
-      isPending.current = true;
-      isMouseDown.current = true;
-      isScrolling.current = false;
-      const xy = getClientXy(event);
-      if (!xy) return;
-      touchStartX.current = xy.clientX;
-      touchStartY.current = xy.clientY;
-      if (event.type.toLowerCase().startsWith("touch") || event instanceof globalThis.TouchEvent) {
-        isPending.current = false;
-        isDragging.current = true;
-        dragStartCallback({ x: xy.clientX, y: xy.clientY });
-        return;
-      }
-      dragStartDelayTimer.current = setTimeout(() => {
-        if (!isPending.current || isScrolling.current) return;
-        isPending.current = false;
-        isDragging.current = true;
-        const xy2 = getClientXy(event);
-        if (!xy2) return;
-        const { clientX, clientY } = xy2;
-        dragStartCallback({ x: clientX, y: clientY });
-      }, 300);
-    },
-    [isBlockingActiveInput]
-  );
-  const handleMove = useCallback(
-    ({
-      event: _event,
-      notDragCallback,
-      dragStartCallback,
-      moveingCallback
-    }) => {
-      if (!isMouseDown.current) return;
-      const event = _event instanceof Event ? _event : _event.nativeEvent;
-      const xy = getClientXy(event);
-      if (!xy) return;
-      const { clientX, clientY } = xy;
-      const deltaX = Math.abs(clientX - touchStartX.current);
-      const deltaY = Math.abs(clientY - touchStartY.current);
-      if (isPending.current && (event.type.toLowerCase().startsWith("touch") || event instanceof globalThis.TouchEvent) && (deltaX > scrollThreshold || deltaY > scrollThreshold)) {
-        if (dragStartDelayTimer.current) {
-          clearTimeout(dragStartDelayTimer.current);
-          dragStartDelayTimer.current = null;
-        }
-        isScrolling.current = true;
-        isPending.current = false;
-        isDragging.current = false;
-        if (notDragCallback)
-          notDragCallback({ x: clientX, y: clientY });
-        if (dragResumeTimer.current) {
-          clearTimeout(dragResumeTimer.current);
-          dragResumeTimer.current = null;
-        }
-        dragResumeTimer.current = setTimeout(() => {
-          if (!isMouseDown.current) return;
-          touchStartX.current = clientX;
-          touchStartY.current = clientY;
-          isPending.current = true;
-          isScrolling.current = false;
-          handleStart({ event: _event, dragStartCallback });
-        }, 400);
-        return;
-      }
-      if (!isDragging.current || isPending.current) return;
-      moveingCallback({ x: clientX, y: clientY });
-    },
-    [isBlockingActiveInput]
-  );
-  const handleEnd = useCallback(
-    ({
-      event: _event,
-      dragEndCallback
-    }) => {
-      isScrolling.current = false;
-      isMouseDown.current = false;
-      if (isPending.current) {
-        isPending.current = false;
-        if (dragStartDelayTimer.current) {
-          clearTimeout(dragStartDelayTimer.current);
-          dragStartDelayTimer.current = null;
-        }
-        return;
-      }
-      const event = _event instanceof Event ? _event : _event.nativeEvent;
-      if (!isDragging.current) return;
-      isDragging.current = false;
-      const xy = getClientXy(event);
-      if (!xy) return;
-      const { clientX, clientY } = xy;
-      dragEndCallback({ x: clientX, y: clientY });
-    },
-    [isBlockingActiveInput]
-  );
-  return {
-    handleStart,
-    handleMove,
-    handleEnd
-  };
-};
-const folderEventSubject = new Subject();
-const setFolderEvent = (newValue) => {
-  folderEventSubject.next(newValue);
-};
-const useFolderEvent = () => {
-  const [folderEvent, setFolderEvent2] = useState(
-    null
-  );
-  useEffect(() => {
-    const subscription = folderEventSubject.subscribe((e) => {
-      if (!e) return;
-      setFolderEvent2(e);
-    });
-    return () => {
-      if (subscription) {
-        subscription.unsubscribe();
-      }
-    };
-  }, []);
-  return { folderEvent };
-};
-export {
-  allSplitScreenCount,
-  dragState,
-  dragStateSubject,
-  dropMovementEventSubject,
-  folderEventSubject,
-  isResizingSubject,
-  setFolderEvent,
-  useDragCapture,
-  useDragEvents,
-  useFolderEvent
-};
-//# sourceMappingURL=useDrag.js.map
+import X from"fast-deep-equal";import{useCallback as S,useEffect as C,useRef as y,useState as N}from"react";import{animationFrameScheduler as F,auditTime as Y,BehaviorSubject as O,distinctUntilChanged as P,map as L,Subject as h}from"rxjs";import{getClientXy as D}from"../utils/FlexLayoutUtils";const R=new h,J=R,Q=new O(!1),Z=new h,B=n=>{const{children:r,...e}=n||{};return e},$=n=>{const[r,e]=N(null);return C(()=>{const b=R.pipe(Y(0,F),L(c=>{if(!n||!n.current)return null;const{x:t,y:s}=c,l=n.current.getBoundingClientRect(),{width:g,height:d,x:v,y:E,right:x,bottom:o}=l;let m=!1;(t<v||t>x||s<E||s>o)&&(m=!0);const u=v+g*.2,i=x-g*.2,p=E+d*.2,f=o-d*.2;let a="centerBoundary";return t<u?a="leftBoundary":t>i?a="rightBoundary":s<p?a="topBoundary":s>f&&(a="bottomBoundary"),{positionName:a,isOver:m,...c}}),P((c,t)=>{const{children:s,...l}=c||{},{children:g,...d}=t||{};return X(B(l),B(d))})).subscribe({next:e,error:c=>console.error(c)});return()=>b.unsubscribe()},[n]),r},A=new h,_=new O(0),ee=({isBlockingActiveInput:n=!1})=>{const r=y(null),e=y(null),b=10,c=y(!1),t=y(!1),s=y(!1),l=y(!1),g=y(0),d=y(0);C(()=>()=>{r.current&&(clearTimeout(r.current),r.current=null),e.current&&(clearTimeout(e.current),e.current=null)},[]);const v=S(({event:o,dragStartCallback:m})=>{const u=o instanceof Event?o:o.nativeEvent;if(r.current&&(clearTimeout(r.current),r.current=null),e.current&&(clearTimeout(e.current),e.current=null),u.target.contentEditable==="true"||n&&document.activeElement===u.target)return;u.cancelable&&!(u instanceof globalThis.TouchEvent)&&u.preventDefault(),t.current=!0,s.current=!0,c.current=!1;const i=D(u);if(i){if(g.current=i.clientX,d.current=i.clientY,u.type.toLowerCase().startsWith("touch")||u instanceof globalThis.TouchEvent){t.current=!1,l.current=!0,m({x:i.clientX,y:i.clientY});return}e.current=setTimeout(()=>{if(!t.current||c.current)return;t.current=!1,l.current=!0;const p=D(u);if(!p)return;const{clientX:f,clientY:a}=p;m({x:f,y:a})},300)}},[n]),E=S(({event:o,notDragCallback:m,dragStartCallback:u,moveingCallback:i})=>{if(!s.current)return;const p=o instanceof Event?o:o.nativeEvent,f=D(p);if(!f)return;const{clientX:a,clientY:T}=f,w=Math.abs(a-g.current),j=Math.abs(T-d.current);if(t.current&&(p.type.toLowerCase().startsWith("touch")||p instanceof globalThis.TouchEvent)&&(w>b||j>b)){e.current&&(clearTimeout(e.current),e.current=null),c.current=!0,t.current=!1,l.current=!1,m&&m({x:a,y:T}),r.current&&(clearTimeout(r.current),r.current=null),r.current=setTimeout(()=>{s.current&&(g.current=a,d.current=T,t.current=!0,c.current=!1,v({event:o,dragStartCallback:u}))},400);return}!l.current||t.current||i({x:a,y:T})},[n]),x=S(({event:o,dragEndCallback:m})=>{if(c.current=!1,s.current=!1,t.current){t.current=!1,e.current&&(clearTimeout(e.current),e.current=null);return}const u=o instanceof Event?o:o.nativeEvent;if(!l.current)return;l.current=!1;const i=D(u);if(!i)return;const{clientX:p,clientY:f}=i;m({x:p,y:f})},[n]);return{handleStart:v,handleMove:E,handleEnd:x}},M=new h,te=n=>{M.next(n)},ne=()=>{const[n,r]=N(null);return C(()=>{const e=M.subscribe(b=>{b&&r(b)});return()=>{e&&e.unsubscribe()}},[]),{folderEvent:n}};export{_ as allSplitScreenCount,J as dragState,R as dragStateSubject,A as dropMovementEventSubject,M as folderEventSubject,Q as isResizingSubject,Z as resizeDragSubject,te as setFolderEvent,$ as useDragCapture,ee as useDragEvents,ne as useFolderEvent};

package/dist/flex-layout/hooks/useFlexLayoutSplitScreen.cjs

@@ -1,139 +1 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var useFlexLayoutSplitScreen_exports = {};
-__export(useFlexLayoutSplitScreen_exports, {
-  useFlexLayoutSplitScreen: () => useFlexLayoutSplitScreen
-});
-module.exports = __toCommonJS(useFlexLayoutSplitScreen_exports);
-var import_react = require("react");
-var import_useDrag = require("./useDrag");
-function useFlexLayoutSplitScreen({
-  isSplitInitial = false,
-  parentDirection,
-  directionInitial = "row",
-  selfContainerName,
-  parentLayoutName,
-  layoutName
-}) {
-  const [direction, setDirection] = (0, import_react.useState)(
-    directionInitial
-  );
-  const [isSplit, setIsSplit] = (0, import_react.useState)(isSplitInitial);
-  const [boundaryContainerSize, setBoundaryContainerSize] = (0, import_react.useState)(null);
-  const [centerDropTargetComponent, setCenterDropTargetComponent] = (0, import_react.useState)([]);
-  const [afterDropTargetComponent, setAfterDropTargetComponent] = (0, import_react.useState)([]);
-  const [beforeDropTargetComponent, setBeforeDropTargetComponent] = (0, import_react.useState)([]);
-  const layoutRef = (0, import_react.useRef)(null);
-  const dragState = (0, import_useDrag.useDragCapture)(layoutRef);
-  (0, import_react.useEffect)(() => {
-    if (!dragState) {
-      setBoundaryContainerSize(null);
-      return;
-    }
-    const {
-      isDrop,
-      isDragging,
-      positionName,
-      containerName,
-      children: dropComponent,
-      isOver,
-      navigationTitle,
-      dropEndCallback,
-      x,
-      y,
-      screenKey
-    } = dragState;
-    const orderName = positionName === "leftBoundary" || positionName === "topBoundary" ? "before" : positionName === "rightBoundary" || positionName === "bottomBoundary" ? "after" : "center";
-    if ((isOver || isDrop) && boundaryContainerSize) {
-      setBoundaryContainerSize(null);
-    }
-    if (selfContainerName === containerName || selfContainerName.startsWith(containerName + "_")) {
-      return;
-    }
-    if (isDrop && screenKey) {
-      const dropDirection = positionName === "leftBoundary" || positionName === "rightBoundary" ? "row" : "column";
-      if (!isSplit && !isOver) {
-        if (positionName !== "centerBoundary" && dropDirection !== parentDirection) {
-          setIsSplit(true);
-          setDirection(dropDirection);
-        }
-        import_useDrag.dropMovementEventSubject.next({
-          state: "append",
-          targetContainerName: containerName,
-          targetParentLayoutName: parentLayoutName,
-          targetLayoutName: layoutName,
-          targetComponent: dropComponent,
-          orderName,
-          x,
-          y,
-          dropEndCallback,
-          dropTargetComponentEvent: {
-            navigationTitle,
-            dropDocumentOutsideOption: dragState?.dropDocumentOutsideOption,
-            direction: dropDirection,
-            screenKey
-          }
-        });
-      }
-    }
-    if (isDragging && !isSplit && !isOver) {
-      const newSize = {
-        left: positionName === "rightBoundary" ? "50%" : "0",
-        top: positionName === "bottomBoundary" ? "50%" : "0",
-        width: positionName === "leftBoundary" || positionName === "rightBoundary" ? "50%" : "100%",
-        height: positionName === "topBoundary" || positionName === "bottomBoundary" ? "50%" : "100%"
-      };
-      if (JSON.stringify(boundaryContainerSize) !== JSON.stringify(newSize)) {
-        setBoundaryContainerSize(newSize);
-      }
-    }
-  }, [
-    dragState,
-    isSplit,
-    boundaryContainerSize,
-    parentLayoutName,
-    layoutName,
-    selfContainerName,
-    direction
-  ]);
-  return {
-    direction,
-    setDirection,
-    isSplit,
-    setIsSplit,
-    boundaryContainerSize,
-    //setBoundaryContainerSize,
-    centerDropTargetComponent,
-    afterDropTargetComponent,
-    beforeDropTargetComponent,
-    setAfterDropTargetComponent,
-    setBeforeDropTargetComponent,
-    setCenterDropTargetComponent,
-    //dropTargetComponent,
-    //setDropTargetComponent,
-    //setDropPosition,
-    isOver: dragState?.isOver,
-    layoutRef
-  };
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  useFlexLayoutSplitScreen
-});
-//# sourceMappingURL=useFlexLayoutSplitScreen.cjs.map
+"use strict";var f=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var A=Object.prototype.hasOwnProperty;var F=(n,o)=>{for(var i in o)f(n,i,{get:o[i],enumerable:!0})},H=(n,o,i,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of k(o))!A.call(n,r)&&r!==i&&f(n,r,{get:()=>o[r],enumerable:!(a=j(o,r))||a.enumerable});return n};var K=n=>H(f({},"__esModule",{value:!0}),n);var W={};F(W,{useFlexLayoutSplitScreen:()=>P});module.exports=K(W);var e=require("react"),l=require("./useDrag");function P({isSplitInitial:n=!1,parentDirection:o,directionInitial:i="row",selfContainerName:a,parentLayoutName:r,layoutName:y}){const[D,C]=(0,e.useState)(i),[u,B]=(0,e.useState)(n),[g,c]=(0,e.useState)(null),[b,O]=(0,e.useState)([]),[v,w]=(0,e.useState)([]),[N,E]=(0,e.useState)([]),S=(0,e.useRef)(null),s=(0,l.useDragCapture)(S);return(0,e.useEffect)(()=>{if(!s){c(null);return}const{isDrop:T,isDragging:x,positionName:t,containerName:d,children:L,isOver:m,navigationTitle:z,dropEndCallback:I,x:J,y:M,screenKey:h}=s,R=t==="leftBoundary"||t==="topBoundary"?"before":t==="rightBoundary"||t==="bottomBoundary"?"after":"center";if((m||T)&&g&&c(null),!(a===d||a.startsWith(d+"_"))){if(T&&h){const p=t==="leftBoundary"||t==="rightBoundary"?"row":"column";!u&&!m&&(t!=="centerBoundary"&&p!==o&&(B(!0),C(p)),l.dropMovementEventSubject.next({state:"append",targetContainerName:d,targetParentLayoutName:r,targetLayoutName:y,targetComponent:L,orderName:R,x:J,y:M,dropEndCallback:I,dropTargetComponentEvent:{navigationTitle:z,dropDocumentOutsideOption:s?.dropDocumentOutsideOption,direction:p,screenKey:h}}))}if(x&&!u&&!m){const p={left:t==="rightBoundary"?"50%":"0",top:t==="bottomBoundary"?"50%":"0",width:t==="leftBoundary"||t==="rightBoundary"?"50%":"100%",height:t==="topBoundary"||t==="bottomBoundary"?"50%":"100%"};JSON.stringify(g)!==JSON.stringify(p)&&c(p)}}},[s,u,g,r,y,a,D]),{direction:D,setDirection:C,isSplit:u,setIsSplit:B,boundaryContainerSize:g,centerDropTargetComponent:b,afterDropTargetComponent:v,beforeDropTargetComponent:N,setAfterDropTargetComponent:w,setBeforeDropTargetComponent:E,setCenterDropTargetComponent:O,isOver:s?.isOver,layoutRef:S}}0&&(module.exports={useFlexLayoutSplitScreen});

package/dist/flex-layout/hooks/useFlexLayoutSplitScreen.js

@@ -1,118 +1 @@
-import { useEffect, useRef, useState } from "react";
-import {
-  dropMovementEventSubject,
-  useDragCapture
-} from "./useDrag";
-function useFlexLayoutSplitScreen({
-  isSplitInitial = false,
-  parentDirection,
-  directionInitial = "row",
-  selfContainerName,
-  parentLayoutName,
-  layoutName
-}) {
-  const [direction, setDirection] = useState(
-    directionInitial
-  );
-  const [isSplit, setIsSplit] = useState(isSplitInitial);
-  const [boundaryContainerSize, setBoundaryContainerSize] = useState(null);
-  const [centerDropTargetComponent, setCenterDropTargetComponent] = useState([]);
-  const [afterDropTargetComponent, setAfterDropTargetComponent] = useState([]);
-  const [beforeDropTargetComponent, setBeforeDropTargetComponent] = useState([]);
-  const layoutRef = useRef(null);
-  const dragState = useDragCapture(layoutRef);
-  useEffect(() => {
-    if (!dragState) {
-      setBoundaryContainerSize(null);
-      return;
-    }
-    const {
-      isDrop,
-      isDragging,
-      positionName,
-      containerName,
-      children: dropComponent,
-      isOver,
-      navigationTitle,
-      dropEndCallback,
-      x,
-      y,
-      screenKey
-    } = dragState;
-    const orderName = positionName === "leftBoundary" || positionName === "topBoundary" ? "before" : positionName === "rightBoundary" || positionName === "bottomBoundary" ? "after" : "center";
-    if ((isOver || isDrop) && boundaryContainerSize) {
-      setBoundaryContainerSize(null);
-    }
-    if (selfContainerName === containerName || selfContainerName.startsWith(containerName + "_")) {
-      return;
-    }
-    if (isDrop && screenKey) {
-      const dropDirection = positionName === "leftBoundary" || positionName === "rightBoundary" ? "row" : "column";
-      if (!isSplit && !isOver) {
-        if (positionName !== "centerBoundary" && dropDirection !== parentDirection) {
-          setIsSplit(true);
-          setDirection(dropDirection);
-        }
-        dropMovementEventSubject.next({
-          state: "append",
-          targetContainerName: containerName,
-          targetParentLayoutName: parentLayoutName,
-          targetLayoutName: layoutName,
-          targetComponent: dropComponent,
-          orderName,
-          x,
-          y,
-          dropEndCallback,
-          dropTargetComponentEvent: {
-            navigationTitle,
-            dropDocumentOutsideOption: dragState?.dropDocumentOutsideOption,
-            direction: dropDirection,
-            screenKey
-          }
-        });
-      }
-    }
-    if (isDragging && !isSplit && !isOver) {
-      const newSize = {
-        left: positionName === "rightBoundary" ? "50%" : "0",
-        top: positionName === "bottomBoundary" ? "50%" : "0",
-        width: positionName === "leftBoundary" || positionName === "rightBoundary" ? "50%" : "100%",
-        height: positionName === "topBoundary" || positionName === "bottomBoundary" ? "50%" : "100%"
-      };
-      if (JSON.stringify(boundaryContainerSize) !== JSON.stringify(newSize)) {
-        setBoundaryContainerSize(newSize);
-      }
-    }
-  }, [
-    dragState,
-    isSplit,
-    boundaryContainerSize,
-    parentLayoutName,
-    layoutName,
-    selfContainerName,
-    direction
-  ]);
-  return {
-    direction,
-    setDirection,
-    isSplit,
-    setIsSplit,
-    boundaryContainerSize,
-    //setBoundaryContainerSize,
-    centerDropTargetComponent,
-    afterDropTargetComponent,
-    beforeDropTargetComponent,
-    setAfterDropTargetComponent,
-    setBeforeDropTargetComponent,
-    setCenterDropTargetComponent,
-    //dropTargetComponent,
-    //setDropTargetComponent,
-    //setDropPosition,
-    isOver: dragState?.isOver,
-    layoutRef
-  };
-}
-export {
-  useFlexLayoutSplitScreen
-};
-//# sourceMappingURL=useFlexLayoutSplitScreen.js.map
+import{useEffect as M,useRef as R,useState as e}from"react";import{dropMovementEventSubject as j,useDragCapture as k}from"./useDrag";function K({isSplitInitial:C=!1,parentDirection:B,directionInitial:S="row",selfContainerName:a,parentLayoutName:g,layoutName:l}){const[c,d]=e(S),[r,m]=e(C),[i,p]=e(null),[T,h]=e([]),[b,O]=e([]),[v,w]=e([]),f=R(null),n=k(f);return M(()=>{if(!n){p(null);return}const{isDrop:y,isDragging:N,positionName:t,containerName:s,children:E,isOver:u,navigationTitle:x,dropEndCallback:L,x:z,y:I,screenKey:D}=n,J=t==="leftBoundary"||t==="topBoundary"?"before":t==="rightBoundary"||t==="bottomBoundary"?"after":"center";if((u||y)&&i&&p(null),!(a===s||a.startsWith(s+"_"))){if(y&&D){const o=t==="leftBoundary"||t==="rightBoundary"?"row":"column";!r&&!u&&(t!=="centerBoundary"&&o!==B&&(m(!0),d(o)),j.next({state:"append",targetContainerName:s,targetParentLayoutName:g,targetLayoutName:l,targetComponent:E,orderName:J,x:z,y:I,dropEndCallback:L,dropTargetComponentEvent:{navigationTitle:x,dropDocumentOutsideOption:n?.dropDocumentOutsideOption,direction:o,screenKey:D}}))}if(N&&!r&&!u){const o={left:t==="rightBoundary"?"50%":"0",top:t==="bottomBoundary"?"50%":"0",width:t==="leftBoundary"||t==="rightBoundary"?"50%":"100%",height:t==="topBoundary"||t==="bottomBoundary"?"50%":"100%"};JSON.stringify(i)!==JSON.stringify(o)&&p(o)}}},[n,r,i,g,l,a,c]),{direction:c,setDirection:d,isSplit:r,setIsSplit:m,boundaryContainerSize:i,centerDropTargetComponent:T,afterDropTargetComponent:b,beforeDropTargetComponent:v,setAfterDropTargetComponent:O,setBeforeDropTargetComponent:w,setCenterDropTargetComponent:h,isOver:n?.isOver,layoutRef:f}}export{K as useFlexLayoutSplitScreen};