@byeolnaerim/flex-layout 0.0.8 → 0.0.10

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

@@ -1,232 +1 @@
-'use strict';
-
-var equal = require('fast-deep-equal');
-var react = require('react');
-var rxjs = require('rxjs');
-var FlexLayoutUtils = require('../utils/FlexLayoutUtils');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var equal__default = /*#__PURE__*/_interopDefault(equal);
-
-const dragState = new rxjs.Subject();
-const filterChildren = (obj) => {
-  const { children, ...rest } = obj || {};
-  return rest;
-};
-const useDragCapture = (targetRef) => {
-  const stateRef = react.useRef(null);
-  const forceUpdate = react.useRef(0);
-  react.useEffect(() => {
-    const subscription = dragState.pipe(
-      rxjs.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
-        };
-      }),
-      rxjs.distinctUntilChanged(
-        (prev, curr) => equal__default.default(filterChildren(prev), filterChildren(curr))
-      )
-    ).subscribe({
-      next: (value) => {
-        if (value && !equal__default.default(
-          filterChildren(stateRef.current),
-          filterChildren(value)
-        )) {
-          stateRef.current = value;
-          forceUpdate.current++;
-        }
-      },
-      error: (err) => console.error(err)
-    });
-    return () => subscription.unsubscribe();
-  }, [targetRef]);
-  const [, rerender] = react.useState({});
-  react.useEffect(() => {
-    const interval = setInterval(() => {
-      rerender({});
-    }, 50);
-    return () => clearInterval(interval);
-  }, []);
-  return stateRef.current;
-};
-const dropMovementEventSubject = new rxjs.Subject();
-const allSplitScreenCount = new rxjs.BehaviorSubject(0);
-const useDragEvents = ({
-  isBlockingActiveInput = false
-}) => {
-  const dragResumeTimer = react.useRef(null);
-  const scrollThreshold = 10;
-  const isScrolling = react.useRef(false);
-  const isPending = react.useRef(false);
-  const isMouseDown = react.useRef(false);
-  const isDragging = react.useRef(false);
-  const touchStartX = react.useRef(0);
-  const touchStartY = react.useRef(0);
-  const handleStart = react.useCallback(
-    ({
-      event: _event,
-      dragStartCallback
-    }) => {
-      const event = _event instanceof Event ? _event : _event.nativeEvent;
-      if (dragResumeTimer.current) {
-        clearTimeout(dragResumeTimer.current);
-        dragResumeTimer.current = null;
-      }
-      if (event.target.contentEditable === "true" || isBlockingActiveInput && document.activeElement === event.target) {
-        return;
-      }
-      if (event.cancelable) {
-        event.preventDefault();
-      }
-      isPending.current = true;
-      isMouseDown.current = true;
-      if (event instanceof globalThis.TouchEvent) {
-        const touch = event.touches[0];
-        touchStartX.current = touch.clientX;
-        touchStartY.current = touch.clientY;
-      } else if (event instanceof globalThis.MouseEvent) {
-        touchStartX.current = event.clientX;
-        touchStartY.current = event.clientY;
-      }
-      setTimeout(() => {
-        if (!isPending.current || isScrolling.current) return;
-        isPending.current = false;
-        isDragging.current = true;
-        const xy = FlexLayoutUtils.getClientXy(event);
-        if (!xy) return;
-        const { clientX, clientY } = xy;
-        dragStartCallback({ x: clientX, y: clientY });
-      }, 300);
-    },
-    [isBlockingActiveInput]
-  );
-  const handleMove = react.useCallback(
-    ({
-      event: _event,
-      notDragCallback,
-      dragStartCallback,
-      moveingCallback
-    }) => {
-      if (!isMouseDown.current) return;
-      const event = _event instanceof Event ? _event : _event.nativeEvent;
-      const xy = FlexLayoutUtils.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 && (deltaX > scrollThreshold || deltaY > scrollThreshold)) {
-        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;
-          if (dragStartCallback)
-            dragStartCallback({ x: clientX, y: 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 = react.useCallback(
-    ({
-      event: _event,
-      dragEndCallback
-    }) => {
-      isScrolling.current = false;
-      isMouseDown.current = false;
-      if (isPending.current) {
-        isPending.current = false;
-        return;
-      }
-      const event = _event instanceof Event ? _event : _event.nativeEvent;
-      if (!isDragging.current) return;
-      isDragging.current = false;
-      const xy = FlexLayoutUtils.getClientXy(event);
-      if (!xy) return;
-      const { clientX, clientY } = xy;
-      dragEndCallback({ x: clientX, y: clientY });
-    },
-    [isBlockingActiveInput]
-  );
-  return {
-    handleStart,
-    handleMove,
-    handleEnd
-  };
-};
-const folderEventSubject = new rxjs.Subject();
-const setFolderEvent = (newValue) => {
-  folderEventSubject.next(newValue);
-};
-const useFolderEvent = () => {
-  const [folderEvent, setFolderEvent2] = react.useState(
-    null
-  );
-  react.useEffect(() => {
-    const subscription = folderEventSubject.subscribe((e) => {
-      if (!e) return;
-      setFolderEvent2(e);
-    });
-    return () => {
-      if (subscription) {
-        subscription.unsubscribe();
-      }
-    };
-  }, []);
-  return { folderEvent };
-};
-
-exports.allSplitScreenCount = allSplitScreenCount;
-exports.dragState = dragState;
-exports.dropMovementEventSubject = dropMovementEventSubject;
-exports.folderEventSubject = folderEventSubject;
-exports.setFolderEvent = setFolderEvent;
-exports.useDragCapture = useDragCapture;
-exports.useDragEvents = useDragEvents;
-exports.useFolderEvent = useFolderEvent;
-//# sourceMappingURL=useDrag.cjs.map
-//# sourceMappingURL=useDrag.cjs.map
+"use strict";var j=Object.create;var S=Object.defineProperty;var X=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var L=(e,n)=>{for(var t in n)S(e,t,{get:n[t],enumerable:!0})},O=(e,n,t,m)=>{if(n&&typeof n=="object"||typeof n=="function")for(let o of F(n))!P.call(e,o)&&o!==t&&S(e,o,{get:()=>n[o],enumerable:!(m=X(n,o))||m.enumerable});return e};var z=(e,n,t)=>(t=e!=null?j(Y(e)):{},O(n||!e||!e.__esModule?S(t,"default",{value:e,enumerable:!0}):t,e)),k=e=>O(S({},"__esModule",{value:!0}),e);var Q={};L(Q,{allSplitScreenCount:()=>U,dragState:()=>H,dragStateSubject:()=>C,dropMovementEventSubject:()=>q,folderEventSubject:()=>N,isResizingSubject:()=>I,resizeDragSubject:()=>K,setFolderEvent:()=>G,useDragCapture:()=>W,useDragEvents:()=>V,useFolderEvent:()=>J});module.exports=k(Q);var B=z(require("fast-deep-equal"),1),r=require("react"),c=require("rxjs"),x=require("../utils/FlexLayoutUtils");const C=new c.Subject,H=C,I=new c.BehaviorSubject(!1),K=new c.Subject,R=e=>{const{children:n,...t}=e||{};return t},W=e=>{const[n,t]=(0,r.useState)(null);return(0,r.useEffect)(()=>{const m=C.pipe((0,c.auditTime)(0,c.animationFrameScheduler),(0,c.map)(o=>{if(!e||!e.current)return null;const{x:u,y:p}=o,d=e.current.getBoundingClientRect(),{width:v,height:b,x:E,y:T,right:h,bottom:i}=d;let f=!1;(u<E||u>h||p<T||p>i)&&(f=!0);const a=E+v*.2,s=h-v*.2,y=T+b*.2,g=i-b*.2;let l="centerBoundary";return u<a?l="leftBoundary":u>s?l="rightBoundary":p<y?l="topBoundary":p>g&&(l="bottomBoundary"),{positionName:l,isOver:f,...o}}),(0,c.distinctUntilChanged)((o,u)=>{const{children:p,...d}=o||{},{children:v,...b}=u||{};return(0,B.default)(R(d),R(b))})).subscribe({next:t,error:o=>console.error(o)});return()=>m.unsubscribe()},[e]),n},q=new c.Subject,U=new c.BehaviorSubject(0),V=({isBlockingActiveInput:e=!1})=>{const n=(0,r.useRef)(null),t=(0,r.useRef)(null),m=10,o=(0,r.useRef)(!1),u=(0,r.useRef)(!1),p=(0,r.useRef)(!1),d=(0,r.useRef)(!1),v=(0,r.useRef)(0),b=(0,r.useRef)(0);(0,r.useEffect)(()=>()=>{n.current&&(clearTimeout(n.current),n.current=null),t.current&&(clearTimeout(t.current),t.current=null)},[]);const E=(0,r.useCallback)(({event:i,dragStartCallback:f})=>{const a=i instanceof Event?i:i.nativeEvent;if(n.current&&(clearTimeout(n.current),n.current=null),t.current&&(clearTimeout(t.current),t.current=null),a.target.contentEditable==="true"||e&&document.activeElement===a.target)return;a.cancelable&&!(a instanceof globalThis.TouchEvent)&&a.preventDefault(),u.current=!0,p.current=!0,o.current=!1;const s=(0,x.getClientXy)(a);if(s){if(v.current=s.clientX,b.current=s.clientY,a.type.toLowerCase().startsWith("touch")||a instanceof globalThis.TouchEvent){u.current=!1,d.current=!0,f({x:s.clientX,y:s.clientY});return}t.current=setTimeout(()=>{if(!u.current||o.current)return;u.current=!1,d.current=!0;const y=(0,x.getClientXy)(a);if(!y)return;const{clientX:g,clientY:l}=y;f({x:g,y:l})},300)}},[e]),T=(0,r.useCallback)(({event:i,notDragCallback:f,dragStartCallback:a,moveingCallback:s})=>{if(!p.current)return;const y=i instanceof Event?i:i.nativeEvent,g=(0,x.getClientXy)(y);if(!g)return;const{clientX:l,clientY:D}=g,M=Math.abs(l-v.current),w=Math.abs(D-b.current);if(u.current&&(y.type.toLowerCase().startsWith("touch")||y instanceof globalThis.TouchEvent)&&(M>m||w>m)){t.current&&(clearTimeout(t.current),t.current=null),o.current=!0,u.current=!1,d.current=!1,f&&f({x:l,y:D}),n.current&&(clearTimeout(n.current),n.current=null),n.current=setTimeout(()=>{p.current&&(v.current=l,b.current=D,u.current=!0,o.current=!1,E({event:i,dragStartCallback:a}))},400);return}!d.current||u.current||s({x:l,y:D})},[e]),h=(0,r.useCallback)(({event:i,dragEndCallback:f})=>{if(o.current=!1,p.current=!1,u.current){u.current=!1,t.current&&(clearTimeout(t.current),t.current=null);return}const a=i instanceof Event?i:i.nativeEvent;if(!d.current)return;d.current=!1;const s=(0,x.getClientXy)(a);if(!s)return;const{clientX:y,clientY:g}=s;f({x:y,y:g})},[e]);return{handleStart:E,handleMove:T,handleEnd:h}},N=new c.Subject,G=e=>{N.next(e)},J=()=>{const[e,n]=(0,r.useState)(null);return(0,r.useEffect)(()=>{const t=N.subscribe(m=>{m&&n(m)});return()=>{t&&t.unsubscribe()}},[]),{folderEvent:e}};0&&(module.exports={allSplitScreenCount,dragState,dragStateSubject,dropMovementEventSubject,folderEventSubject,isResizingSubject,resizeDragSubject,setFolderEvent,useDragCapture,useDragEvents,useFolderEvent});

package/dist/flex-layout/hooks/useDrag.d.ts

@@ -23,7 +23,27 @@ export interface DragStateResultType extends DragStateType {
     positionName: PositionName;
     isOver: boolean;
 }
+export type ResizeDragEvent = {
+    type: "START";
+    sessionId: string;
+    targets: string[];
+    cursor?: string;
+} | {
+    type: "MOVE";
+    sessionId: string;
+    movementX: number;
+    movementY: number;
+} | {
+    type: "END";
+    sessionId: string;
+};
+export declare const dragStateSubject: Subject<DragStateType>;
+/**
+ * @deprecated Use `dragStateSubject` instead. This alias will be removed in a future release.
+ */
 export declare const dragState: Subject<DragStateType>;
+export declare const isResizingSubject: BehaviorSubject<boolean>;
+export declare const resizeDragSubject: Subject<ResizeDragEvent>;
 export declare const useDragCapture: (targetRef: RefObject<HTMLElement | null>) => DragStateResultType | null;
 export interface DropTargetComponent {
     containerName: string;

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

@@ -1,219 +1 @@
-import equal from 'fast-deep-equal';
-import { useRef, useEffect, useState, useCallback } from 'react';
-import { Subject, BehaviorSubject, map, distinctUntilChanged } from 'rxjs';
-import { getClientXy } from '../utils/FlexLayoutUtils';
-
-const dragState = new Subject();
-const filterChildren = (obj) => {
-  const { children, ...rest } = obj || {};
-  return rest;
-};
-const useDragCapture = (targetRef) => {
-  const stateRef = useRef(null);
-  const forceUpdate = useRef(0);
-  useEffect(() => {
-    const subscription = dragState.pipe(
-      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) => equal(filterChildren(prev), filterChildren(curr))
-      )
-    ).subscribe({
-      next: (value) => {
-        if (value && !equal(
-          filterChildren(stateRef.current),
-          filterChildren(value)
-        )) {
-          stateRef.current = value;
-          forceUpdate.current++;
-        }
-      },
-      error: (err) => console.error(err)
-    });
-    return () => subscription.unsubscribe();
-  }, [targetRef]);
-  const [, rerender] = useState({});
-  useEffect(() => {
-    const interval = setInterval(() => {
-      rerender({});
-    }, 50);
-    return () => clearInterval(interval);
-  }, []);
-  return stateRef.current;
-};
-const dropMovementEventSubject = new Subject();
-const allSplitScreenCount = new BehaviorSubject(0);
-const useDragEvents = ({
-  isBlockingActiveInput = false
-}) => {
-  const dragResumeTimer = 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);
-  const handleStart = useCallback(
-    ({
-      event: _event,
-      dragStartCallback
-    }) => {
-      const event = _event instanceof Event ? _event : _event.nativeEvent;
-      if (dragResumeTimer.current) {
-        clearTimeout(dragResumeTimer.current);
-        dragResumeTimer.current = null;
-      }
-      if (event.target.contentEditable === "true" || isBlockingActiveInput && document.activeElement === event.target) {
-        return;
-      }
-      if (event.cancelable) {
-        event.preventDefault();
-      }
-      isPending.current = true;
-      isMouseDown.current = true;
-      if (event instanceof globalThis.TouchEvent) {
-        const touch = event.touches[0];
-        touchStartX.current = touch.clientX;
-        touchStartY.current = touch.clientY;
-      } else if (event instanceof globalThis.MouseEvent) {
-        touchStartX.current = event.clientX;
-        touchStartY.current = event.clientY;
-      }
-      setTimeout(() => {
-        if (!isPending.current || isScrolling.current) return;
-        isPending.current = false;
-        isDragging.current = true;
-        const xy = getClientXy(event);
-        if (!xy) return;
-        const { clientX, clientY } = xy;
-        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 && (deltaX > scrollThreshold || deltaY > scrollThreshold)) {
-        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;
-          if (dragStartCallback)
-            dragStartCallback({ x: clientX, y: 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;
-        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, dropMovementEventSubject, folderEventSubject, setFolderEvent, useDragCapture, useDragEvents, useFolderEvent };
-//# sourceMappingURL=useDrag.js.map
-//# 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,118 +1 @@
-'use strict';
-
-var react = require('react');
-var useDrag = require('./useDrag');
-
-function useFlexLayoutSplitScreen({
-  isSplitInitial = false,
-  parentDirection,
-  directionInitial = "row",
-  selfContainerName,
-  parentLayoutName,
-  layoutName
-}) {
-  const [direction, setDirection] = react.useState(
-    directionInitial
-  );
-  const [isSplit, setIsSplit] = react.useState(isSplitInitial);
-  const [boundaryContainerSize, setBoundaryContainerSize] = react.useState(null);
-  const [centerDropTargetComponent, setCenterDropTargetComponent] = react.useState([]);
-  const [afterDropTargetComponent, setAfterDropTargetComponent] = react.useState([]);
-  const [beforeDropTargetComponent, setBeforeDropTargetComponent] = react.useState([]);
-  const layoutRef = react.useRef(null);
-  const dragState = useDrag.useDragCapture(layoutRef);
-  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.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);
-        }
-        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
-  };
-}
-
-exports.useFlexLayoutSplitScreen = useFlexLayoutSplitScreen;
-//# sourceMappingURL=useFlexLayoutSplitScreen.cjs.map
-//# 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});