@byeolnaerim/flex-layout 0.0.6 → 0.0.7

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/flex-layout/hooks/useDrag.ts"],"names":["Subject","useRef","useEffect","map","distinctUntilChanged","equal","useState","BehaviorSubject","useCallback","getClientXy","setFolderEvent"],"mappings":"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","file":"useDrag.cjs","sourcesContent":["import equal from \"fast-deep-equal\";\r\nimport {\r\n\tMouseEvent,\r\n\tReactElement,\r\n\tRefObject,\r\n\tTouchEvent,\r\n\tuseCallback,\r\n\tuseEffect,\r\n\tuseRef,\r\n\tuseState,\r\n} from \"react\";\r\nimport { BehaviorSubject, distinctUntilChanged, map, Subject } from \"rxjs\";\r\nimport { DropDocumentOutsideOption } from \"../components/FlexLayoutSplitScreenDragBox\";\r\nimport { getClientXy } from \"../utils/FlexLayoutUtils\";\r\nexport interface DragStateType {\r\n\tisDragging: boolean;\r\n\tisDrop: boolean;\r\n\tnavigationTitle?: string;\r\n\tchildren?: ReactElement;\r\n\tcontainerName: string;\r\n\tx: number;\r\n\ty: number;\r\n\tdropDocumentOutsideOption?: DropDocumentOutsideOption;\r\n\tdropEndCallback?: ({\r\n\t\tx,\r\n\t\ty,\r\n\t\tcontainerName,\r\n\t}: {\r\n\t\tx: number;\r\n\t\ty: number;\r\n\t\tcontainerName: string;\r\n\t}) => void;\r\n\tscreenKey?: string;\r\n\tcustomData?: Record<string, string | number | boolean | undefined>;\r\n}\r\nexport type PositionName =\r\n\t| \"centerBoundary\"\r\n\t| \"leftBoundary\"\r\n\t| \"rightBoundary\"\r\n\t| \"topBoundary\"\r\n\t| \"bottomBoundary\";\r\n\r\nexport interface DragStateResultType extends DragStateType {\r\n\tpositionName: PositionName;\r\n\tisOver: boolean;\r\n}\r\nexport const dragState = new Subject<DragStateType>();\r\nconst filterChildren = (obj: any) => {\r\n\t// 객체 복사 후 children 속성 제거\r\n\tconst { children, ...rest } = obj || {};\r\n\treturn rest;\r\n};\r\n\r\nexport const useDragCapture = (targetRef: RefObject<HTMLElement | null>) => {\r\n\tconst stateRef = useRef<DragStateResultType | null>(null); // 상태를 저장하는 useRef\r\n\tconst forceUpdate = useRef(0); // 강제로 업데이트를 트리거하기 위한 변수\r\n\r\n\tuseEffect(() => {\r\n\t\tconst subscription = dragState\r\n\t\t\t.pipe(\r\n\t\t\t\tmap((value) => {\r\n\t\t\t\t\tif (!targetRef || !targetRef.current) return null;\r\n\r\n\t\t\t\t\tconst { x, y } = value;\r\n\t\t\t\t\tconst rect = targetRef.current.getBoundingClientRect();\r\n\t\t\t\t\tconst {\r\n\t\t\t\t\t\twidth,\r\n\t\t\t\t\t\theight,\r\n\t\t\t\t\t\tx: rectX,\r\n\t\t\t\t\t\ty: rectY,\r\n\t\t\t\t\t\tright,\r\n\t\t\t\t\t\tbottom,\r\n\t\t\t\t\t} = rect;\r\n\r\n\t\t\t\t\tlet isOver = false;\r\n\t\t\t\t\tif (x < rectX || x > right || y < rectY || y > bottom) {\r\n\t\t\t\t\t\tisOver = true;\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\tconst leftBoundary = rectX + width * 0.2;\r\n\t\t\t\t\tconst rightBoundary = right - width * 0.2;\r\n\t\t\t\t\tconst topBoundary = rectY + height * 0.2;\r\n\t\t\t\t\tconst bottomBoundary = bottom - height * 0.2;\r\n\r\n\t\t\t\t\tlet position = \"centerBoundary\";\r\n\t\t\t\t\tif (x < leftBoundary) {\r\n\t\t\t\t\t\tposition = \"leftBoundary\";\r\n\t\t\t\t\t} else if (x > rightBoundary) {\r\n\t\t\t\t\t\tposition = \"rightBoundary\";\r\n\t\t\t\t\t} else if (y < topBoundary) {\r\n\t\t\t\t\t\tposition = \"topBoundary\";\r\n\t\t\t\t\t} else if (y > bottomBoundary) {\r\n\t\t\t\t\t\tposition = \"bottomBoundary\";\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\treturn {\r\n\t\t\t\t\t\tpositionName: position as PositionName,\r\n\t\t\t\t\t\tisOver,\r\n\t\t\t\t\t\t...value,\r\n\t\t\t\t\t};\r\n\t\t\t\t}),\r\n\t\t\t\tdistinctUntilChanged((prev, curr) =>\r\n\t\t\t\t\tequal(filterChildren(prev), filterChildren(curr)),\r\n\t\t\t\t),\r\n\t\t\t)\r\n\t\t\t.subscribe({\r\n\t\t\t\tnext: (value) => {\r\n\t\t\t\t\tif (\r\n\t\t\t\t\t\tvalue &&\r\n\t\t\t\t\t\t!equal(\r\n\t\t\t\t\t\t\tfilterChildren(stateRef.current),\r\n\t\t\t\t\t\t\tfilterChildren(value),\r\n\t\t\t\t\t\t)\r\n\t\t\t\t\t) {\r\n\t\t\t\t\t\tstateRef.current = value; // 상태를 업데이트\r\n\t\t\t\t\t\tforceUpdate.current++; // 업데이트 트리거\r\n\t\t\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t\terror: (err) => console.error(err),\r\n\t\t\t});\r\n\r\n\t\treturn () => subscription.unsubscribe();\r\n\t}, [targetRef]);\r\n\r\n\t// 강제 렌더링을 트리거하기 위한 업데이트\r\n\tconst [, rerender] = useState({});\r\n\tuseEffect(() => {\r\n\t\tconst interval = setInterval(() => {\r\n\t\t\trerender({}); // 변경된 ref 상태를 반영\r\n\t\t}, 50); // 50ms 간격으로 렌더링 반영\r\n\t\treturn () => clearInterval(interval);\r\n\t}, []);\r\n\r\n\treturn stateRef.current;\r\n};\r\nexport interface DropTargetComponent {\r\n\tcontainerName: string;\r\n\tcomponent: ReactElement;\r\n\tnavigationTitle?: string;\r\n\tdropDocumentOutsideOption?: DropDocumentOutsideOption;\r\n\tscreenKey: string;\r\n}\r\nexport type DropPositionOrderName = \"before\" | \"center\" | \"after\";\r\n\r\nexport interface DropMovementEventType {\r\n\tstate: \"remove\" | \"append\" | \"change\";\r\n\ttargetParentLayoutName: string;\r\n\ttargetLayoutName: string;\r\n\ttargetContainerName: string;\r\n\ttargetComponent?: ReactElement;\r\n\tnextContainerName?: string;\r\n\tparentOrderName?: DropPositionOrderName;\r\n\torderName?: DropPositionOrderName;\r\n\tx?: number;\r\n\ty?: number;\r\n\tdropEndCallback?: ({\r\n\t\tx,\r\n\t\ty,\r\n\t\tcontainerName,\r\n\t}: {\r\n\t\tx: number;\r\n\t\ty: number;\r\n\t\tcontainerName: string;\r\n\t}) => void;\r\n\tdropTargetComponentEvent?: DropTargetComponentEvent;\r\n}\r\nexport interface DropTargetComponentEvent extends Omit<\r\n\tDropTargetComponent,\r\n\t\"containerName\" | \"component\"\r\n> {\r\n\tdirection: \"row\" | \"column\";\r\n}\r\nexport const dropMovementEventSubject = new Subject<DropMovementEventType>();\r\n\r\nexport const allSplitScreenCount = new BehaviorSubject<number>(0);\r\n\r\nexport const useDragEvents = ({\r\n\tisBlockingActiveInput = false,\r\n}: {\r\n\tisBlockingActiveInput?: boolean;\r\n}) => {\r\n\tconst dragResumeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\r\n\tconst scrollThreshold = 10; // 이동 거리 임계값\r\n\r\n\tconst isScrolling = useRef<boolean>(false);\r\n\tconst isPending = useRef(false);\r\n\tconst isMouseDown = useRef(false);\r\n\tconst isDragging = useRef(false); // 드래그 상태 플래그\r\n\tconst touchStartX = useRef<number>(0);\r\n\tconst touchStartY = useRef<number>(0);\r\n\r\n\tconst handleStart = useCallback(\r\n\t\t({\r\n\t\t\tevent: _event,\r\n\t\t\tdragStartCallback,\r\n\t\t}: {\r\n\t\t\tevent: MouseEvent | TouchEvent | Event;\r\n\t\t\tdragStartCallback: ({ x, y }: { x: number; y: number }) => void;\r\n\t\t}) => {\r\n\t\t\tconst event = _event instanceof Event ? _event : _event.nativeEvent;\r\n\r\n\t\t\t// 기존 타이머가 있다면 정리\r\n\t\t\tif (dragResumeTimer.current) {\r\n\t\t\t\tclearTimeout(dragResumeTimer.current);\r\n\t\t\t\tdragResumeTimer.current = null;\r\n\t\t\t}\r\n\r\n\t\t\tif (\r\n\t\t\t\t(event.target as HTMLElement).contentEditable === \"true\" ||\r\n\t\t\t\t(isBlockingActiveInput &&\r\n\t\t\t\t\tdocument.activeElement === event.target)\r\n\t\t\t) {\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\t\t\tif (event.cancelable) {\r\n\t\t\t\tevent.preventDefault(); // cancelable=false 면 자동 skip\r\n\t\t\t}\r\n\t\t\tisPending.current = true;\r\n\t\t\tisMouseDown.current = true;\r\n\t\t\tif (event instanceof globalThis.TouchEvent) {\r\n\t\t\t\tconst touch = event.touches[0];\r\n\t\t\t\ttouchStartX.current = touch.clientX;\r\n\t\t\t\ttouchStartY.current = touch.clientY;\r\n\t\t\t} else if (event instanceof globalThis.MouseEvent) {\r\n\t\t\t\ttouchStartX.current = event.clientX;\r\n\t\t\t\ttouchStartY.current = event.clientY;\r\n\t\t\t}\r\n\t\t\t//event.preventDefault();\r\n\t\t\tsetTimeout(() => {\r\n\t\t\t\tif (!isPending.current || isScrolling.current) return; // 스크롤 중이면 드래그 취소\r\n\t\t\t\tisPending.current = false;\r\n\t\t\t\tisDragging.current = true;\r\n\r\n\t\t\t\tconst xy = getClientXy(event);\r\n\t\t\t\tif (!xy) return;\r\n\r\n\t\t\t\tconst { clientX, clientY } = xy;\r\n\r\n\t\t\t\tdragStartCallback({ x: clientX, y: clientY });\r\n\t\t\t}, 300);\r\n\t\t},\r\n\t\t[isBlockingActiveInput],\r\n\t);\r\n\r\n\tconst handleMove = useCallback(\r\n\t\t({\r\n\t\t\tevent: _event,\r\n\t\t\tnotDragCallback,\r\n\t\t\tdragStartCallback,\r\n\t\t\tmoveingCallback,\r\n\t\t}: {\r\n\t\t\tevent: MouseEvent | TouchEvent | Event;\r\n\t\t\tnotDragCallback?: ({ x, y }: { x: number; y: number }) => void;\r\n\t\t\tdragStartCallback: ({ x, y }: { x: number; y: number }) => void;\r\n\t\t\tmoveingCallback: ({ x, y }: { x: number; y: number }) => void;\r\n\t\t}) => {\r\n\t\t\tif (!isMouseDown.current) return;\r\n\t\t\tconst event = _event instanceof Event ? _event : _event.nativeEvent;\r\n\r\n\t\t\tconst xy = getClientXy(event);\r\n\t\t\tif (!xy) return;\r\n\t\t\tconst { clientX, clientY } = xy;\r\n\t\t\tconst deltaX = Math.abs(clientX - touchStartX.current);\r\n\t\t\tconst deltaY = Math.abs(clientY - touchStartY.current);\r\n\r\n\t\t\tif (\r\n\t\t\t\tisPending.current &&\r\n\t\t\t\t(deltaX > scrollThreshold || deltaY > scrollThreshold)\r\n\t\t\t) {\r\n\t\t\t\tisScrolling.current = true; // 스크롤 중으로 설정\r\n\t\t\t\tisPending.current = false; // 드래그 취소\r\n\t\t\t\tisDragging.current = false;\r\n\r\n\t\t\t\tif (notDragCallback)\r\n\t\t\t\t\tnotDragCallback({ x: clientX, y: clientY });\r\n\t\t\t\t//if (clonedNodeRef.current) clonedNodeRef.current.remove();\r\n\r\n\t\t\t\tif (dragResumeTimer.current) {\r\n\t\t\t\t\tclearTimeout(dragResumeTimer.current);\r\n\t\t\t\t\tdragResumeTimer.current = null;\r\n\t\t\t\t}\r\n\t\t\t\tdragResumeTimer.current = setTimeout(() => {\r\n\t\t\t\t\tif (!isMouseDown.current) return;\r\n\t\t\t\t\tif (dragStartCallback)\r\n\t\t\t\t\t\tdragStartCallback({ x: clientX, y: clientY });\r\n\t\t\t\t\tisPending.current = true;\r\n\t\t\t\t\tisScrolling.current = false;\r\n\t\t\t\t\thandleStart({ event: _event, dragStartCallback });\r\n\t\t\t\t}, 400);\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\r\n\t\t\tif (!isDragging.current || isPending.current) return; // 드래그 중이 아닐 경우 무시\r\n\r\n\t\t\tmoveingCallback({ x: clientX, y: clientY });\r\n\t\t},\r\n\t\t[isBlockingActiveInput],\r\n\t);\r\n\tconst handleEnd = useCallback(\r\n\t\t({\r\n\t\t\tevent: _event,\r\n\t\t\tdragEndCallback,\r\n\t\t}: {\r\n\t\t\tevent: MouseEvent | TouchEvent | Event;\r\n\t\t\tdragEndCallback: ({ x, y }: { x: number; y: number }) => void;\r\n\t\t}) => {\r\n\t\t\tisScrolling.current = false;\r\n\t\t\tisMouseDown.current = false;\r\n\t\t\tif (isPending.current) {\r\n\t\t\t\tisPending.current = false;\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\t\t\tconst event = _event instanceof Event ? _event : _event.nativeEvent;\r\n\r\n\t\t\tif (!isDragging.current) return; // 드래그 중이 아닐 경우 무시\r\n\r\n\t\t\tisDragging.current = false; // 드래그 종료\r\n\r\n\t\t\tconst xy = getClientXy(event);\r\n\t\t\tif (!xy) return;\r\n\r\n\t\t\tconst { clientX, clientY } = xy;\r\n\r\n\t\t\tdragEndCallback({ x: clientX, y: clientY });\r\n\t\t\t// const href = hrefUrlRef.current;\r\n\r\n\t\t\t// if (clonedNodeRef.current) clonedNodeRef.current.remove();\r\n\t\t\t// //console.log(clientX, clientY);\r\n\t\t\t// if (\r\n\t\t\t//     dropDocumentOutsideOption &&\r\n\t\t\t//     isDocumentOut({ x: clientX, y: clientY })\r\n\t\t\t// ) {\r\n\t\t\t//     if (\r\n\t\t\t//         dropDocumentOutsideOption.isNewTap ||\r\n\t\t\t//         (!dropDocumentOutsideOption.widthRatio &&\r\n\t\t\t//             !dropDocumentOutsideOption.heightRatio)\r\n\t\t\t//     ) {\r\n\t\t\t//         window.open(href, '_blank');\r\n\t\t\t//     } else {\r\n\t\t\t//         const width =\r\n\t\t\t//             window.innerWidth *\r\n\t\t\t//             (dropDocumentOutsideOption.widthRatio || 1);\r\n\t\t\t//         const height =\r\n\t\t\t//             window.innerHeight *\r\n\t\t\t//             (dropDocumentOutsideOption.heightRatio || 1);\r\n\t\t\t//         window.open(\r\n\t\t\t//             href,\r\n\t\t\t//             '_blank',\r\n\t\t\t//             `width=${width},height=${height},left=${window.screenLeft - clientX * -1 - width},top=${window.screenTop + clientY}`\r\n\t\t\t//         );\r\n\t\t\t//     }\r\n\t\t\t// }\r\n\r\n\t\t\t// dragState.next({\r\n\t\t\t//     isDragging: false,\r\n\t\t\t//     isDrop: true,\r\n\t\t\t//     navigationTitle,\r\n\t\t\t//     children: targetComponent,\r\n\t\t\t//     x: clientX,\r\n\t\t\t//     y: clientY,\r\n\t\t\t//     containerName,\r\n\t\t\t//     dropDocumentOutsideOption,\r\n\t\t\t//     dropEndCallback,\r\n\t\t\t//     screenKey,\r\n\t\t\t//     customData,\r\n\t\t\t// });\r\n\t\t\t//if (dropEndCallback) dropEndCallback({ x: clientX, y: clientY });\r\n\t\t},\r\n\t\t[isBlockingActiveInput],\r\n\t);\r\n\r\n\treturn {\r\n\t\thandleStart,\r\n\t\thandleMove,\r\n\t\thandleEnd,\r\n\t};\r\n};\r\n\r\nexport type FolderEventType = {\r\n\ttype: \"new\" | \"sort\" | \"title\" | \"delete\" | \"insert\" | \"update\" | \"next\";\r\n\tisFolder: boolean;\r\n\ttitle: string;\r\n\tsort?: number;\r\n\tparentId?: string;\r\n\tid?: string;\r\n\tnewData?: any;\r\n};\r\n\r\nexport const folderEventSubject = new Subject<FolderEventType>();\r\n\r\nexport const setFolderEvent = (newValue: FolderEventType) => {\r\n\tfolderEventSubject.next(newValue);\r\n};\r\n\r\nexport const useFolderEvent = () => {\r\n\tconst [folderEvent, setFolderEvent] = useState<FolderEventType | null>(\r\n\t\tnull,\r\n\t);\r\n\tuseEffect(() => {\r\n\t\tconst subscription = folderEventSubject.subscribe((e) => {\r\n\t\t\tif (!e) return;\r\n\t\t\tsetFolderEvent(e);\r\n\t\t});\r\n\r\n\t\treturn () => {\r\n\t\t\tif (subscription) {\r\n\t\t\t\tsubscription.unsubscribe();\r\n\t\t\t}\r\n\t\t};\r\n\t}, []);\r\n\r\n\treturn { folderEvent };\r\n};\r\n"]}

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

@@ -1,4 +1,4 @@
-import { ReactElement, RefObject } from "react";
+import { MouseEvent, ReactElement, RefObject, TouchEvent } from "react";
 import { BehaviorSubject, Subject } from "rxjs";
 import { DropDocumentOutsideOption } from "../components/FlexLayoutSplitScreenDragBox";
 export interface DragStateType {
@@ -60,14 +60,14 @@ export declare const useDragEvents: ({ isBlockingActiveInput, }: {
     isBlockingActiveInput?: boolean;
 }) => {
     handleStart: ({ event: _event, dragStartCallback, }: {
-        event: React.MouseEvent | React.TouchEvent | Event;
+        event: MouseEvent | TouchEvent | Event;
         dragStartCallback: ({ x, y }: {
             x: number;
             y: number;
         }) => void;
     }) => void;
     handleMove: ({ event: _event, notDragCallback, dragStartCallback, moveingCallback, }: {
-        event: React.MouseEvent | React.TouchEvent | Event;
+        event: MouseEvent | TouchEvent | Event;
         notDragCallback?: ({ x, y }: {
             x: number;
             y: number;
@@ -82,7 +82,7 @@ export declare const useDragEvents: ({ isBlockingActiveInput, }: {
         }) => void;
     }) => void;
     handleEnd: ({ event: _event, dragEndCallback, }: {
-        event: React.MouseEvent | React.TouchEvent | Event;
+        event: MouseEvent | TouchEvent | Event;
         dragEndCallback: ({ x, y }: {
             x: number;
             y: number;

package/dist/{hooks.js → flex-layout/hooks/useDrag.js}

@@ -1,35 +1,14 @@
 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';
 
-// src/flex-layout/hooks/useDrag.ts
-
-// src/flex-layout/utils/FlexLayoutUtils.ts
-var lastTouchEvent;
-function getClientXy(event) {
-  let clientX;
-  let clientY;
-  if (window.MouseEvent && event instanceof window.MouseEvent) {
-    clientX = event.clientX;
-    clientY = event.clientY;
-  } else if (window.TouchEvent && event instanceof window.TouchEvent) {
-    const _event = event.touches.length == 0 ? lastTouchEvent : event;
-    clientX = _event.touches[0].clientX;
-    clientY = _event.touches[0].clientY;
-    lastTouchEvent = event;
-  } else {
-    return;
-  }
-  return { clientX, clientY };
-}
-
-// src/flex-layout/hooks/useDrag.ts
-var dragState = new Subject();
-var filterChildren = (obj) => {
+const dragState = new Subject();
+const filterChildren = (obj) => {
   const { children, ...rest } = obj || {};
   return rest;
 };
-var useDragCapture = (targetRef) => {
+const useDragCapture = (targetRef) => {
   const stateRef = useRef(null);
   const forceUpdate = useRef(0);
   useEffect(() => {
@@ -96,9 +75,9 @@ var useDragCapture = (targetRef) => {
   }, []);
   return stateRef.current;
 };
-var dropMovementEventSubject = new Subject();
-var allSplitScreenCount = new BehaviorSubject(0);
-var useDragEvents = ({
+const dropMovementEventSubject = new Subject();
+const allSplitScreenCount = new BehaviorSubject(0);
+const useDragEvents = ({
   isBlockingActiveInput = false
 }) => {
   const dragResumeTimer = useRef(null);
@@ -213,11 +192,11 @@ var useDragEvents = ({
     handleEnd
   };
 };
-var folderEventSubject = new Subject();
-var setFolderEvent = (newValue) => {
+const folderEventSubject = new Subject();
+const setFolderEvent = (newValue) => {
   folderEventSubject.next(newValue);
 };
-var useFolderEvent = () => {
+const useFolderEvent = () => {
   const [folderEvent, setFolderEvent2] = useState(
     null
   );
@@ -234,176 +213,7 @@ var useFolderEvent = () => {
   }, []);
   return { folderEvent };
 };
-var useListPagingForSentinel = ({
-  //initPageNumber,
-  //initPageSize,
-  onReachTerminal
-}) => {
-  const [firstChildNode, setFirstChildNode] = useState(null);
-  const [lastChildNode, setLastChildNode] = useState(null);
-  const observerRef = useRef(null);
-  const firstChildRef = useCallback((node) => {
-    setFirstChildNode(node);
-  }, []);
-  const lastChildRef = useCallback((node) => {
-    setLastChildNode(node);
-  }, []);
-  useEffect(() => {
-    if (firstChildNode && observerRef.current)
-      observerRef.current.unobserve(firstChildNode);
-    if (lastChildNode && observerRef.current)
-      observerRef.current.unobserve(lastChildNode);
-    const handleIntersect = (entries, observer2) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          if (entry.target === firstChildNode) {
-            if (onReachTerminal)
-              onReachTerminal({
-                isFirst: true,
-                isLast: false,
-                observer: observer2
-              });
-          }
-          if (entry.target === lastChildNode) {
-            if (onReachTerminal)
-              onReachTerminal({
-                isFirst: false,
-                isLast: true,
-                observer: observer2
-              });
-          }
-        }
-      });
-    };
-    const observer = new IntersectionObserver(handleIntersect, {
-      threshold: 0.1
-    });
-    observerRef.current = observer;
-    if (firstChildNode) observer.observe(firstChildNode);
-    if (lastChildNode) observer.observe(lastChildNode);
-    return () => {
-      if (observerRef.current) {
-        observerRef.current.disconnect();
-      }
-    };
-  }, [firstChildNode, lastChildNode]);
-  return {
-    firstChildRef,
-    lastChildRef
-  };
-};
-var usePaginationViewNumber = ({
-  initPageNumber
-}) => {
-  const [showCurrentPageNumber, setShowCurrentPageNumber] = useState(initPageNumber);
-  const observerRef = useRef(null);
-  const showCurrentPageObserveTarget = useCallback(
-    (node) => {
-      if (!node) return;
-      if (!observerRef.current) {
-        observerRef.current = new IntersectionObserver(
-          (entries) => {
-            entries.forEach((entry) => {
-              if (entry.isIntersecting) {
-                const pageIndexAttr = entry.target.getAttribute(
-                  "data-page-index"
-                );
-                if (!pageIndexAttr) return;
-                const pageIndex = parseInt(pageIndexAttr, 10);
-                setShowCurrentPageNumber(pageIndex);
-              }
-            });
-          },
-          {
-            threshold: 0.1
-            // 예: 10% 이상 보여야 intersect로 판단
-          }
-        );
-      }
-      observerRef.current.observe(node);
-    },
-    []
-  );
-  useEffect(() => {
-    const currentObserver = observerRef.current;
-    return () => {
-      if (currentObserver) {
-        currentObserver.disconnect();
-      }
-    };
-  }, []);
-  return {
-    showCurrentPageNumber,
-    showCurrentPageObserveTarget
-  };
-};
-var usePagingHandler = ({
-  lastCallPageNumber,
-  dataListRef
-}) => {
-  const jumpingPageNumberRef = useRef(lastCallPageNumber);
-  useEffect(() => {
-    if (jumpingPageNumberRef.current) {
-      setTimeout(() => {
-        jumpingPageNumberRef.current = null;
-      }, 1e3);
-    }
-  }, [jumpingPageNumberRef]);
-  const paginationScrollIntoViewTarget = useRef({});
-  const pageNumberRef = useRef(lastCallPageNumber);
-  const setPaginationRef = useCallback(
-    (i) => (node) => {
-      if (!node) return;
-      paginationScrollIntoViewTarget.current[i] = node;
-      if (jumpingPageNumberRef.current !== null && i === jumpingPageNumberRef.current) {
-        node.scrollIntoView({
-          behavior: "instant",
-          // 필요한 경우 'smooth' 등으로 수정 가능
-          block: "start"
-        });
-        jumpingPageNumberRef.current = null;
-      }
-    },
-    []
-  );
-  const handleReachTerminal = ({ isFirst, isLast, observer }, dataCallFetch) => {
-    if (dataListRef.current.length === 0) return;
-    if (jumpingPageNumberRef.current != null) return;
-    if (!isFirst && !isLast) return;
-    const callPageNumber = isFirst ? Math.max(pageNumberRef.current - 1, 0) : pageNumberRef.current + 1;
-    if (dataListRef.current[callPageNumber] != null && (dataListRef.current[callPageNumber]?.length || 0) > 0)
-      return;
-    jumpingPageNumberRef.current = callPageNumber;
-    setTimeout(() => {
-      jumpingPageNumberRef.current = null;
-    }, 1e3);
-    dataCallFetch(callPageNumber);
-  };
-  const handleClickPageChange = (page, dataCallFetch) => {
-    const pageData = dataListRef.current[page];
-    if (pageData != null && Array.isArray(pageData) && pageData.length > 0) {
-      paginationScrollIntoViewTarget.current[page]?.scrollIntoView({
-        behavior: "smooth",
-        block: "start"
-      });
-      return;
-    }
-    jumpingPageNumberRef.current = page;
-    setTimeout(() => {
-      jumpingPageNumberRef.current = null;
-    }, 1e3);
-    dataCallFetch(page);
-  };
-  return {
-    jumpingPageNumberRef,
-    paginationScrollIntoViewTarget,
-    pageNumberRef,
-    setPaginationRef,
-    handleReachTerminal,
-    handleClickPageChange
-  };
-};
 
-export { allSplitScreenCount, dragState, dropMovementEventSubject, folderEventSubject, setFolderEvent, useDragCapture, useDragEvents, useFolderEvent, useListPagingForSentinel, usePaginationViewNumber, usePagingHandler };
-//# sourceMappingURL=hooks.js.map
-//# sourceMappingURL=hooks.js.map
+export { allSplitScreenCount, dragState, dropMovementEventSubject, folderEventSubject, setFolderEvent, useDragCapture, useDragEvents, useFolderEvent };
+//# sourceMappingURL=useDrag.js.map
+//# sourceMappingURL=useDrag.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/flex-layout/hooks/useDrag.ts"],"names":["setFolderEvent"],"mappings":"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","file":"useDrag.js","sourcesContent":["import equal from \"fast-deep-equal\";\r\nimport {\r\n\tMouseEvent,\r\n\tReactElement,\r\n\tRefObject,\r\n\tTouchEvent,\r\n\tuseCallback,\r\n\tuseEffect,\r\n\tuseRef,\r\n\tuseState,\r\n} from \"react\";\r\nimport { BehaviorSubject, distinctUntilChanged, map, Subject } from \"rxjs\";\r\nimport { DropDocumentOutsideOption } from \"../components/FlexLayoutSplitScreenDragBox\";\r\nimport { getClientXy } from \"../utils/FlexLayoutUtils\";\r\nexport interface DragStateType {\r\n\tisDragging: boolean;\r\n\tisDrop: boolean;\r\n\tnavigationTitle?: string;\r\n\tchildren?: ReactElement;\r\n\tcontainerName: string;\r\n\tx: number;\r\n\ty: number;\r\n\tdropDocumentOutsideOption?: DropDocumentOutsideOption;\r\n\tdropEndCallback?: ({\r\n\t\tx,\r\n\t\ty,\r\n\t\tcontainerName,\r\n\t}: {\r\n\t\tx: number;\r\n\t\ty: number;\r\n\t\tcontainerName: string;\r\n\t}) => void;\r\n\tscreenKey?: string;\r\n\tcustomData?: Record<string, string | number | boolean | undefined>;\r\n}\r\nexport type PositionName =\r\n\t| \"centerBoundary\"\r\n\t| \"leftBoundary\"\r\n\t| \"rightBoundary\"\r\n\t| \"topBoundary\"\r\n\t| \"bottomBoundary\";\r\n\r\nexport interface DragStateResultType extends DragStateType {\r\n\tpositionName: PositionName;\r\n\tisOver: boolean;\r\n}\r\nexport const dragState = new Subject<DragStateType>();\r\nconst filterChildren = (obj: any) => {\r\n\t// 객체 복사 후 children 속성 제거\r\n\tconst { children, ...rest } = obj || {};\r\n\treturn rest;\r\n};\r\n\r\nexport const useDragCapture = (targetRef: RefObject<HTMLElement | null>) => {\r\n\tconst stateRef = useRef<DragStateResultType | null>(null); // 상태를 저장하는 useRef\r\n\tconst forceUpdate = useRef(0); // 강제로 업데이트를 트리거하기 위한 변수\r\n\r\n\tuseEffect(() => {\r\n\t\tconst subscription = dragState\r\n\t\t\t.pipe(\r\n\t\t\t\tmap((value) => {\r\n\t\t\t\t\tif (!targetRef || !targetRef.current) return null;\r\n\r\n\t\t\t\t\tconst { x, y } = value;\r\n\t\t\t\t\tconst rect = targetRef.current.getBoundingClientRect();\r\n\t\t\t\t\tconst {\r\n\t\t\t\t\t\twidth,\r\n\t\t\t\t\t\theight,\r\n\t\t\t\t\t\tx: rectX,\r\n\t\t\t\t\t\ty: rectY,\r\n\t\t\t\t\t\tright,\r\n\t\t\t\t\t\tbottom,\r\n\t\t\t\t\t} = rect;\r\n\r\n\t\t\t\t\tlet isOver = false;\r\n\t\t\t\t\tif (x < rectX || x > right || y < rectY || y > bottom) {\r\n\t\t\t\t\t\tisOver = true;\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\tconst leftBoundary = rectX + width * 0.2;\r\n\t\t\t\t\tconst rightBoundary = right - width * 0.2;\r\n\t\t\t\t\tconst topBoundary = rectY + height * 0.2;\r\n\t\t\t\t\tconst bottomBoundary = bottom - height * 0.2;\r\n\r\n\t\t\t\t\tlet position = \"centerBoundary\";\r\n\t\t\t\t\tif (x < leftBoundary) {\r\n\t\t\t\t\t\tposition = \"leftBoundary\";\r\n\t\t\t\t\t} else if (x > rightBoundary) {\r\n\t\t\t\t\t\tposition = \"rightBoundary\";\r\n\t\t\t\t\t} else if (y < topBoundary) {\r\n\t\t\t\t\t\tposition = \"topBoundary\";\r\n\t\t\t\t\t} else if (y > bottomBoundary) {\r\n\t\t\t\t\t\tposition = \"bottomBoundary\";\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\treturn {\r\n\t\t\t\t\t\tpositionName: position as PositionName,\r\n\t\t\t\t\t\tisOver,\r\n\t\t\t\t\t\t...value,\r\n\t\t\t\t\t};\r\n\t\t\t\t}),\r\n\t\t\t\tdistinctUntilChanged((prev, curr) =>\r\n\t\t\t\t\tequal(filterChildren(prev), filterChildren(curr)),\r\n\t\t\t\t),\r\n\t\t\t)\r\n\t\t\t.subscribe({\r\n\t\t\t\tnext: (value) => {\r\n\t\t\t\t\tif (\r\n\t\t\t\t\t\tvalue &&\r\n\t\t\t\t\t\t!equal(\r\n\t\t\t\t\t\t\tfilterChildren(stateRef.current),\r\n\t\t\t\t\t\t\tfilterChildren(value),\r\n\t\t\t\t\t\t)\r\n\t\t\t\t\t) {\r\n\t\t\t\t\t\tstateRef.current = value; // 상태를 업데이트\r\n\t\t\t\t\t\tforceUpdate.current++; // 업데이트 트리거\r\n\t\t\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t\terror: (err) => console.error(err),\r\n\t\t\t});\r\n\r\n\t\treturn () => subscription.unsubscribe();\r\n\t}, [targetRef]);\r\n\r\n\t// 강제 렌더링을 트리거하기 위한 업데이트\r\n\tconst [, rerender] = useState({});\r\n\tuseEffect(() => {\r\n\t\tconst interval = setInterval(() => {\r\n\t\t\trerender({}); // 변경된 ref 상태를 반영\r\n\t\t}, 50); // 50ms 간격으로 렌더링 반영\r\n\t\treturn () => clearInterval(interval);\r\n\t}, []);\r\n\r\n\treturn stateRef.current;\r\n};\r\nexport interface DropTargetComponent {\r\n\tcontainerName: string;\r\n\tcomponent: ReactElement;\r\n\tnavigationTitle?: string;\r\n\tdropDocumentOutsideOption?: DropDocumentOutsideOption;\r\n\tscreenKey: string;\r\n}\r\nexport type DropPositionOrderName = \"before\" | \"center\" | \"after\";\r\n\r\nexport interface DropMovementEventType {\r\n\tstate: \"remove\" | \"append\" | \"change\";\r\n\ttargetParentLayoutName: string;\r\n\ttargetLayoutName: string;\r\n\ttargetContainerName: string;\r\n\ttargetComponent?: ReactElement;\r\n\tnextContainerName?: string;\r\n\tparentOrderName?: DropPositionOrderName;\r\n\torderName?: DropPositionOrderName;\r\n\tx?: number;\r\n\ty?: number;\r\n\tdropEndCallback?: ({\r\n\t\tx,\r\n\t\ty,\r\n\t\tcontainerName,\r\n\t}: {\r\n\t\tx: number;\r\n\t\ty: number;\r\n\t\tcontainerName: string;\r\n\t}) => void;\r\n\tdropTargetComponentEvent?: DropTargetComponentEvent;\r\n}\r\nexport interface DropTargetComponentEvent extends Omit<\r\n\tDropTargetComponent,\r\n\t\"containerName\" | \"component\"\r\n> {\r\n\tdirection: \"row\" | \"column\";\r\n}\r\nexport const dropMovementEventSubject = new Subject<DropMovementEventType>();\r\n\r\nexport const allSplitScreenCount = new BehaviorSubject<number>(0);\r\n\r\nexport const useDragEvents = ({\r\n\tisBlockingActiveInput = false,\r\n}: {\r\n\tisBlockingActiveInput?: boolean;\r\n}) => {\r\n\tconst dragResumeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\r\n\tconst scrollThreshold = 10; // 이동 거리 임계값\r\n\r\n\tconst isScrolling = useRef<boolean>(false);\r\n\tconst isPending = useRef(false);\r\n\tconst isMouseDown = useRef(false);\r\n\tconst isDragging = useRef(false); // 드래그 상태 플래그\r\n\tconst touchStartX = useRef<number>(0);\r\n\tconst touchStartY = useRef<number>(0);\r\n\r\n\tconst handleStart = useCallback(\r\n\t\t({\r\n\t\t\tevent: _event,\r\n\t\t\tdragStartCallback,\r\n\t\t}: {\r\n\t\t\tevent: MouseEvent | TouchEvent | Event;\r\n\t\t\tdragStartCallback: ({ x, y }: { x: number; y: number }) => void;\r\n\t\t}) => {\r\n\t\t\tconst event = _event instanceof Event ? _event : _event.nativeEvent;\r\n\r\n\t\t\t// 기존 타이머가 있다면 정리\r\n\t\t\tif (dragResumeTimer.current) {\r\n\t\t\t\tclearTimeout(dragResumeTimer.current);\r\n\t\t\t\tdragResumeTimer.current = null;\r\n\t\t\t}\r\n\r\n\t\t\tif (\r\n\t\t\t\t(event.target as HTMLElement).contentEditable === \"true\" ||\r\n\t\t\t\t(isBlockingActiveInput &&\r\n\t\t\t\t\tdocument.activeElement === event.target)\r\n\t\t\t) {\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\t\t\tif (event.cancelable) {\r\n\t\t\t\tevent.preventDefault(); // cancelable=false 면 자동 skip\r\n\t\t\t}\r\n\t\t\tisPending.current = true;\r\n\t\t\tisMouseDown.current = true;\r\n\t\t\tif (event instanceof globalThis.TouchEvent) {\r\n\t\t\t\tconst touch = event.touches[0];\r\n\t\t\t\ttouchStartX.current = touch.clientX;\r\n\t\t\t\ttouchStartY.current = touch.clientY;\r\n\t\t\t} else if (event instanceof globalThis.MouseEvent) {\r\n\t\t\t\ttouchStartX.current = event.clientX;\r\n\t\t\t\ttouchStartY.current = event.clientY;\r\n\t\t\t}\r\n\t\t\t//event.preventDefault();\r\n\t\t\tsetTimeout(() => {\r\n\t\t\t\tif (!isPending.current || isScrolling.current) return; // 스크롤 중이면 드래그 취소\r\n\t\t\t\tisPending.current = false;\r\n\t\t\t\tisDragging.current = true;\r\n\r\n\t\t\t\tconst xy = getClientXy(event);\r\n\t\t\t\tif (!xy) return;\r\n\r\n\t\t\t\tconst { clientX, clientY } = xy;\r\n\r\n\t\t\t\tdragStartCallback({ x: clientX, y: clientY });\r\n\t\t\t}, 300);\r\n\t\t},\r\n\t\t[isBlockingActiveInput],\r\n\t);\r\n\r\n\tconst handleMove = useCallback(\r\n\t\t({\r\n\t\t\tevent: _event,\r\n\t\t\tnotDragCallback,\r\n\t\t\tdragStartCallback,\r\n\t\t\tmoveingCallback,\r\n\t\t}: {\r\n\t\t\tevent: MouseEvent | TouchEvent | Event;\r\n\t\t\tnotDragCallback?: ({ x, y }: { x: number; y: number }) => void;\r\n\t\t\tdragStartCallback: ({ x, y }: { x: number; y: number }) => void;\r\n\t\t\tmoveingCallback: ({ x, y }: { x: number; y: number }) => void;\r\n\t\t}) => {\r\n\t\t\tif (!isMouseDown.current) return;\r\n\t\t\tconst event = _event instanceof Event ? _event : _event.nativeEvent;\r\n\r\n\t\t\tconst xy = getClientXy(event);\r\n\t\t\tif (!xy) return;\r\n\t\t\tconst { clientX, clientY } = xy;\r\n\t\t\tconst deltaX = Math.abs(clientX - touchStartX.current);\r\n\t\t\tconst deltaY = Math.abs(clientY - touchStartY.current);\r\n\r\n\t\t\tif (\r\n\t\t\t\tisPending.current &&\r\n\t\t\t\t(deltaX > scrollThreshold || deltaY > scrollThreshold)\r\n\t\t\t) {\r\n\t\t\t\tisScrolling.current = true; // 스크롤 중으로 설정\r\n\t\t\t\tisPending.current = false; // 드래그 취소\r\n\t\t\t\tisDragging.current = false;\r\n\r\n\t\t\t\tif (notDragCallback)\r\n\t\t\t\t\tnotDragCallback({ x: clientX, y: clientY });\r\n\t\t\t\t//if (clonedNodeRef.current) clonedNodeRef.current.remove();\r\n\r\n\t\t\t\tif (dragResumeTimer.current) {\r\n\t\t\t\t\tclearTimeout(dragResumeTimer.current);\r\n\t\t\t\t\tdragResumeTimer.current = null;\r\n\t\t\t\t}\r\n\t\t\t\tdragResumeTimer.current = setTimeout(() => {\r\n\t\t\t\t\tif (!isMouseDown.current) return;\r\n\t\t\t\t\tif (dragStartCallback)\r\n\t\t\t\t\t\tdragStartCallback({ x: clientX, y: clientY });\r\n\t\t\t\t\tisPending.current = true;\r\n\t\t\t\t\tisScrolling.current = false;\r\n\t\t\t\t\thandleStart({ event: _event, dragStartCallback });\r\n\t\t\t\t}, 400);\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\r\n\t\t\tif (!isDragging.current || isPending.current) return; // 드래그 중이 아닐 경우 무시\r\n\r\n\t\t\tmoveingCallback({ x: clientX, y: clientY });\r\n\t\t},\r\n\t\t[isBlockingActiveInput],\r\n\t);\r\n\tconst handleEnd = useCallback(\r\n\t\t({\r\n\t\t\tevent: _event,\r\n\t\t\tdragEndCallback,\r\n\t\t}: {\r\n\t\t\tevent: MouseEvent | TouchEvent | Event;\r\n\t\t\tdragEndCallback: ({ x, y }: { x: number; y: number }) => void;\r\n\t\t}) => {\r\n\t\t\tisScrolling.current = false;\r\n\t\t\tisMouseDown.current = false;\r\n\t\t\tif (isPending.current) {\r\n\t\t\t\tisPending.current = false;\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\t\t\tconst event = _event instanceof Event ? _event : _event.nativeEvent;\r\n\r\n\t\t\tif (!isDragging.current) return; // 드래그 중이 아닐 경우 무시\r\n\r\n\t\t\tisDragging.current = false; // 드래그 종료\r\n\r\n\t\t\tconst xy = getClientXy(event);\r\n\t\t\tif (!xy) return;\r\n\r\n\t\t\tconst { clientX, clientY } = xy;\r\n\r\n\t\t\tdragEndCallback({ x: clientX, y: clientY });\r\n\t\t\t// const href = hrefUrlRef.current;\r\n\r\n\t\t\t// if (clonedNodeRef.current) clonedNodeRef.current.remove();\r\n\t\t\t// //console.log(clientX, clientY);\r\n\t\t\t// if (\r\n\t\t\t//     dropDocumentOutsideOption &&\r\n\t\t\t//     isDocumentOut({ x: clientX, y: clientY })\r\n\t\t\t// ) {\r\n\t\t\t//     if (\r\n\t\t\t//         dropDocumentOutsideOption.isNewTap ||\r\n\t\t\t//         (!dropDocumentOutsideOption.widthRatio &&\r\n\t\t\t//             !dropDocumentOutsideOption.heightRatio)\r\n\t\t\t//     ) {\r\n\t\t\t//         window.open(href, '_blank');\r\n\t\t\t//     } else {\r\n\t\t\t//         const width =\r\n\t\t\t//             window.innerWidth *\r\n\t\t\t//             (dropDocumentOutsideOption.widthRatio || 1);\r\n\t\t\t//         const height =\r\n\t\t\t//             window.innerHeight *\r\n\t\t\t//             (dropDocumentOutsideOption.heightRatio || 1);\r\n\t\t\t//         window.open(\r\n\t\t\t//             href,\r\n\t\t\t//             '_blank',\r\n\t\t\t//             `width=${width},height=${height},left=${window.screenLeft - clientX * -1 - width},top=${window.screenTop + clientY}`\r\n\t\t\t//         );\r\n\t\t\t//     }\r\n\t\t\t// }\r\n\r\n\t\t\t// dragState.next({\r\n\t\t\t//     isDragging: false,\r\n\t\t\t//     isDrop: true,\r\n\t\t\t//     navigationTitle,\r\n\t\t\t//     children: targetComponent,\r\n\t\t\t//     x: clientX,\r\n\t\t\t//     y: clientY,\r\n\t\t\t//     containerName,\r\n\t\t\t//     dropDocumentOutsideOption,\r\n\t\t\t//     dropEndCallback,\r\n\t\t\t//     screenKey,\r\n\t\t\t//     customData,\r\n\t\t\t// });\r\n\t\t\t//if (dropEndCallback) dropEndCallback({ x: clientX, y: clientY });\r\n\t\t},\r\n\t\t[isBlockingActiveInput],\r\n\t);\r\n\r\n\treturn {\r\n\t\thandleStart,\r\n\t\thandleMove,\r\n\t\thandleEnd,\r\n\t};\r\n};\r\n\r\nexport type FolderEventType = {\r\n\ttype: \"new\" | \"sort\" | \"title\" | \"delete\" | \"insert\" | \"update\" | \"next\";\r\n\tisFolder: boolean;\r\n\ttitle: string;\r\n\tsort?: number;\r\n\tparentId?: string;\r\n\tid?: string;\r\n\tnewData?: any;\r\n};\r\n\r\nexport const folderEventSubject = new Subject<FolderEventType>();\r\n\r\nexport const setFolderEvent = (newValue: FolderEventType) => {\r\n\tfolderEventSubject.next(newValue);\r\n};\r\n\r\nexport const useFolderEvent = () => {\r\n\tconst [folderEvent, setFolderEvent] = useState<FolderEventType | null>(\r\n\t\tnull,\r\n\t);\r\n\tuseEffect(() => {\r\n\t\tconst subscription = folderEventSubject.subscribe((e) => {\r\n\t\t\tif (!e) return;\r\n\t\t\tsetFolderEvent(e);\r\n\t\t});\r\n\r\n\t\treturn () => {\r\n\t\t\tif (subscription) {\r\n\t\t\t\tsubscription.unsubscribe();\r\n\t\t\t}\r\n\t\t};\r\n\t}, []);\r\n\r\n\treturn { folderEvent };\r\n};\r\n"]}

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

@@ -0,0 +1,118 @@
+'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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/flex-layout/hooks/useFlexLayoutSplitScreen.ts"],"names":["useState","useRef","useDragCapture","useEffect","dropMovementEventSubject"],"mappings":"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","file":"useFlexLayoutSplitScreen.cjs","sourcesContent":["// useFlexLayoutSplitScreen.js\r\nimport { useEffect, useRef, useState } from \"react\";\r\nimport {\r\n\tdropMovementEventSubject,\r\n\tDropTargetComponent,\r\n\tuseDragCapture,\r\n} from \"./useDrag\";\r\n\r\nexport function useFlexLayoutSplitScreen({\r\n\tisSplitInitial = false,\r\n\tparentDirection,\r\n\tdirectionInitial = \"row\",\r\n\tselfContainerName,\r\n\tparentLayoutName,\r\n\tlayoutName,\r\n}: {\r\n\tisSplitInitial: boolean;\r\n\tparentDirection?: \"row\" | \"column\" | null;\r\n\tdirectionInitial: \"row\" | \"column\";\r\n\tselfContainerName: string;\r\n\tparentLayoutName: string;\r\n\tlayoutName: string;\r\n}) {\r\n\tconst [direction, setDirection] = useState<\"row\" | \"column\">(\r\n\t\tdirectionInitial,\r\n\t);\r\n\r\n\tconst [isSplit, setIsSplit] = useState<boolean>(isSplitInitial);\r\n\tconst [boundaryContainerSize, setBoundaryContainerSize] = useState<{\r\n\t\tleft: string;\r\n\t\ttop: string;\r\n\t\twidth: string;\r\n\t\theight: string;\r\n\t} | null>(null);\r\n\tconst [centerDropTargetComponent, setCenterDropTargetComponent] = useState<\r\n\t\tDropTargetComponent[]\r\n\t>([]);\r\n\tconst [afterDropTargetComponent, setAfterDropTargetComponent] = useState<\r\n\t\tDropTargetComponent[]\r\n\t>([]);\r\n\tconst [beforeDropTargetComponent, setBeforeDropTargetComponent] = useState<\r\n\t\tDropTargetComponent[]\r\n\t>([]);\r\n\tconst layoutRef = useRef<HTMLDivElement>(null);\r\n\r\n\tconst dragState = useDragCapture(layoutRef);\r\n\r\n\tuseEffect(() => {\r\n\t\tif (!dragState) {\r\n\t\t\tsetBoundaryContainerSize(null);\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tconst {\r\n\t\t\tisDrop,\r\n\t\t\tisDragging,\r\n\t\t\tpositionName,\r\n\t\t\tcontainerName,\r\n\t\t\tchildren: dropComponent,\r\n\t\t\tisOver,\r\n\t\t\tnavigationTitle,\r\n\t\t\tdropEndCallback,\r\n\t\t\tx,\r\n\t\t\ty,\r\n\t\t\tscreenKey,\r\n\t\t} = dragState;\r\n\t\tconst orderName =\r\n\t\t\tpositionName === \"leftBoundary\" || positionName === \"topBoundary\"\r\n\t\t\t\t? \"before\"\r\n\t\t\t\t: positionName === \"rightBoundary\" ||\r\n\t\t\t\t\t  positionName === \"bottomBoundary\"\r\n\t\t\t\t\t? \"after\"\r\n\t\t\t\t\t: \"center\";\r\n\t\t// if (selfContainerName === containerName) {\r\n\t\t//     setBoundaryContainerSize(null);\r\n\t\t//     return;\r\n\t\t// }\r\n\r\n\t\tif ((isOver || isDrop) && boundaryContainerSize) {\r\n\t\t\tsetBoundaryContainerSize(null);\r\n\t\t}\r\n\r\n\t\tif (selfContainerName.startsWith(containerName)) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tif (isDrop && screenKey) {\r\n\t\t\t// if (isDuplication) {\r\n\t\t\t//     setDuplicationInfo({ isDuplication, containerName });\r\n\t\t\t// }\r\n\t\t\t// console.log('isDuplication:::', isDuplication);\r\n\t\t\tconst dropDirection =\r\n\t\t\t\tpositionName === \"leftBoundary\" ||\r\n\t\t\t\tpositionName === \"rightBoundary\"\r\n\t\t\t\t\t? \"row\"\r\n\t\t\t\t\t: \"column\";\r\n\t\t\t// if (!parentDirection) {\r\n\t\t\t//     console.log(isSplit, positionName !== 'centerBoundary', isOver);\r\n\t\t\t// }\r\n\t\t\tif (\r\n\t\t\t\t!isSplit &&\r\n\t\t\t\t!isOver\r\n\t\t\t\t//!isDuplication\r\n\t\t\t) {\r\n\t\t\t\t//setDirection(dropDirection);\r\n\t\t\t\t//if (positionName !== 'centerBoundary') {\r\n\t\t\t\tif (\r\n\t\t\t\t\tpositionName !== \"centerBoundary\" &&\r\n\t\t\t\t\tdropDirection !== parentDirection\r\n\t\t\t\t) {\r\n\t\t\t\t\tsetIsSplit(true);\r\n\t\t\t\t\tsetDirection(dropDirection);\r\n\t\t\t\t}\r\n\t\t\t\tdropMovementEventSubject.next({\r\n\t\t\t\t\tstate: \"append\",\r\n\t\t\t\t\ttargetContainerName: containerName,\r\n\t\t\t\t\ttargetParentLayoutName: parentLayoutName,\r\n\t\t\t\t\ttargetLayoutName: layoutName,\r\n\t\t\t\t\ttargetComponent: dropComponent,\r\n\t\t\t\t\torderName,\r\n\t\t\t\t\tx,\r\n\t\t\t\t\ty,\r\n\t\t\t\t\tdropEndCallback,\r\n\t\t\t\t\tdropTargetComponentEvent: {\r\n\t\t\t\t\t\tnavigationTitle,\r\n\t\t\t\t\t\tdropDocumentOutsideOption:\r\n\t\t\t\t\t\t\tdragState?.dropDocumentOutsideOption,\r\n\t\t\t\t\t\tdirection: dropDirection,\r\n\t\t\t\t\t\tscreenKey,\r\n\t\t\t\t\t},\r\n\t\t\t\t});\r\n\t\t\t\t// } else {\r\n\t\t\t\t//     dropMovementEventSubject.next({\r\n\t\t\t\t//         state: 'append',\r\n\t\t\t\t//         targetContainerName: containerName,\r\n\t\t\t\t//         targetParentLayoutName: parentLayoutName,\r\n\t\t\t\t//         targetLayoutName: layoutName,\r\n\t\t\t\t//         targetComponent: dropComponent,\r\n\t\t\t\t//         orderName: orderName,\r\n\t\t\t\t//         x,\r\n\t\t\t\t//         y,\r\n\t\t\t\t//         dropEndCallback,\r\n\t\t\t\t//         dropTargetComponentEvent: {\r\n\t\t\t\t//             navigationTitle,\r\n\t\t\t\t//             dropDocumentOutsideOption:\r\n\t\t\t\t//                 dragState?.dropDocumentOutsideOption,\r\n\t\t\t\t//             direction: direction,\r\n\t\t\t\t//         },\r\n\t\t\t\t//     });\r\n\t\t\t\t// }\r\n\t\t\t}\r\n\t\t\t// else if (\r\n\t\t\t//     isSplit &&\r\n\t\t\t//     positionName !== 'centerBoundary' &&\r\n\t\t\t//     !isOver\r\n\t\t\t// ) {\r\n\t\t\t//     if (!isFirstSplitUpdatedRef.current) {\r\n\t\t\t//         isFirstSplitUpdatedRef.current = true;\r\n\t\t\t//         return;\r\n\t\t\t//     }\r\n\t\t\t//     updateDropTargetComponents(\r\n\t\t\t//         positionName,\r\n\t\t\t//         containerName,\r\n\t\t\t//         dropComponent\r\n\t\t\t//     );\r\n\t\t\t// }\r\n\t\t}\r\n\t\tif (isDragging && !isSplit && !isOver) {\r\n\t\t\tconst newSize = {\r\n\t\t\t\tleft: positionName === \"rightBoundary\" ? \"50%\" : \"0\",\r\n\t\t\t\ttop: positionName === \"bottomBoundary\" ? \"50%\" : \"0\",\r\n\t\t\t\twidth:\r\n\t\t\t\t\tpositionName === \"leftBoundary\" ||\r\n\t\t\t\t\tpositionName === \"rightBoundary\"\r\n\t\t\t\t\t\t? \"50%\"\r\n\t\t\t\t\t\t: \"100%\",\r\n\t\t\t\theight:\r\n\t\t\t\t\tpositionName === \"topBoundary\" ||\r\n\t\t\t\t\tpositionName === \"bottomBoundary\"\r\n\t\t\t\t\t\t? \"50%\"\r\n\t\t\t\t\t\t: \"100%\",\r\n\t\t\t};\r\n\t\t\t// 이전 상태와 비교\r\n\t\t\tif (\r\n\t\t\t\tJSON.stringify(boundaryContainerSize) !==\r\n\t\t\t\tJSON.stringify(newSize)\r\n\t\t\t) {\r\n\t\t\t\tsetBoundaryContainerSize(newSize);\r\n\t\t\t}\r\n\t\t}\r\n\t}, [\r\n\t\tdragState,\r\n\t\tisSplit,\r\n\t\tboundaryContainerSize,\r\n\t\tparentLayoutName,\r\n\t\tlayoutName,\r\n\t\tselfContainerName,\r\n\t\tdirection,\r\n\t]);\r\n\treturn {\r\n\t\tdirection,\r\n\t\tsetDirection,\r\n\t\tisSplit,\r\n\t\tsetIsSplit,\r\n\t\tboundaryContainerSize,\r\n\t\t//setBoundaryContainerSize,\r\n\t\tcenterDropTargetComponent,\r\n\t\tafterDropTargetComponent,\r\n\t\tbeforeDropTargetComponent,\r\n\t\tsetAfterDropTargetComponent,\r\n\t\tsetBeforeDropTargetComponent,\r\n\t\tsetCenterDropTargetComponent,\r\n\t\t//dropTargetComponent,\r\n\t\t//setDropTargetComponent,\r\n\t\t//setDropPosition,\r\n\t\tisOver: dragState?.isOver,\r\n\t\tlayoutRef,\r\n\t};\r\n}\r\n"]}

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

@@ -0,0 +1,116 @@
+import { useState, useRef, useEffect } from 'react';
+import { useDragCapture, dropMovementEventSubject } 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.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
+//# sourceMappingURL=useFlexLayoutSplitScreen.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/flex-layout/hooks/useFlexLayoutSplitScreen.ts"],"names":[],"mappings":"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","file":"useFlexLayoutSplitScreen.js","sourcesContent":["// useFlexLayoutSplitScreen.js\r\nimport { useEffect, useRef, useState } from \"react\";\r\nimport {\r\n\tdropMovementEventSubject,\r\n\tDropTargetComponent,\r\n\tuseDragCapture,\r\n} from \"./useDrag\";\r\n\r\nexport function useFlexLayoutSplitScreen({\r\n\tisSplitInitial = false,\r\n\tparentDirection,\r\n\tdirectionInitial = \"row\",\r\n\tselfContainerName,\r\n\tparentLayoutName,\r\n\tlayoutName,\r\n}: {\r\n\tisSplitInitial: boolean;\r\n\tparentDirection?: \"row\" | \"column\" | null;\r\n\tdirectionInitial: \"row\" | \"column\";\r\n\tselfContainerName: string;\r\n\tparentLayoutName: string;\r\n\tlayoutName: string;\r\n}) {\r\n\tconst [direction, setDirection] = useState<\"row\" | \"column\">(\r\n\t\tdirectionInitial,\r\n\t);\r\n\r\n\tconst [isSplit, setIsSplit] = useState<boolean>(isSplitInitial);\r\n\tconst [boundaryContainerSize, setBoundaryContainerSize] = useState<{\r\n\t\tleft: string;\r\n\t\ttop: string;\r\n\t\twidth: string;\r\n\t\theight: string;\r\n\t} | null>(null);\r\n\tconst [centerDropTargetComponent, setCenterDropTargetComponent] = useState<\r\n\t\tDropTargetComponent[]\r\n\t>([]);\r\n\tconst [afterDropTargetComponent, setAfterDropTargetComponent] = useState<\r\n\t\tDropTargetComponent[]\r\n\t>([]);\r\n\tconst [beforeDropTargetComponent, setBeforeDropTargetComponent] = useState<\r\n\t\tDropTargetComponent[]\r\n\t>([]);\r\n\tconst layoutRef = useRef<HTMLDivElement>(null);\r\n\r\n\tconst dragState = useDragCapture(layoutRef);\r\n\r\n\tuseEffect(() => {\r\n\t\tif (!dragState) {\r\n\t\t\tsetBoundaryContainerSize(null);\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tconst {\r\n\t\t\tisDrop,\r\n\t\t\tisDragging,\r\n\t\t\tpositionName,\r\n\t\t\tcontainerName,\r\n\t\t\tchildren: dropComponent,\r\n\t\t\tisOver,\r\n\t\t\tnavigationTitle,\r\n\t\t\tdropEndCallback,\r\n\t\t\tx,\r\n\t\t\ty,\r\n\t\t\tscreenKey,\r\n\t\t} = dragState;\r\n\t\tconst orderName =\r\n\t\t\tpositionName === \"leftBoundary\" || positionName === \"topBoundary\"\r\n\t\t\t\t? \"before\"\r\n\t\t\t\t: positionName === \"rightBoundary\" ||\r\n\t\t\t\t\t  positionName === \"bottomBoundary\"\r\n\t\t\t\t\t? \"after\"\r\n\t\t\t\t\t: \"center\";\r\n\t\t// if (selfContainerName === containerName) {\r\n\t\t//     setBoundaryContainerSize(null);\r\n\t\t//     return;\r\n\t\t// }\r\n\r\n\t\tif ((isOver || isDrop) && boundaryContainerSize) {\r\n\t\t\tsetBoundaryContainerSize(null);\r\n\t\t}\r\n\r\n\t\tif (selfContainerName.startsWith(containerName)) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tif (isDrop && screenKey) {\r\n\t\t\t// if (isDuplication) {\r\n\t\t\t//     setDuplicationInfo({ isDuplication, containerName });\r\n\t\t\t// }\r\n\t\t\t// console.log('isDuplication:::', isDuplication);\r\n\t\t\tconst dropDirection =\r\n\t\t\t\tpositionName === \"leftBoundary\" ||\r\n\t\t\t\tpositionName === \"rightBoundary\"\r\n\t\t\t\t\t? \"row\"\r\n\t\t\t\t\t: \"column\";\r\n\t\t\t// if (!parentDirection) {\r\n\t\t\t//     console.log(isSplit, positionName !== 'centerBoundary', isOver);\r\n\t\t\t// }\r\n\t\t\tif (\r\n\t\t\t\t!isSplit &&\r\n\t\t\t\t!isOver\r\n\t\t\t\t//!isDuplication\r\n\t\t\t) {\r\n\t\t\t\t//setDirection(dropDirection);\r\n\t\t\t\t//if (positionName !== 'centerBoundary') {\r\n\t\t\t\tif (\r\n\t\t\t\t\tpositionName !== \"centerBoundary\" &&\r\n\t\t\t\t\tdropDirection !== parentDirection\r\n\t\t\t\t) {\r\n\t\t\t\t\tsetIsSplit(true);\r\n\t\t\t\t\tsetDirection(dropDirection);\r\n\t\t\t\t}\r\n\t\t\t\tdropMovementEventSubject.next({\r\n\t\t\t\t\tstate: \"append\",\r\n\t\t\t\t\ttargetContainerName: containerName,\r\n\t\t\t\t\ttargetParentLayoutName: parentLayoutName,\r\n\t\t\t\t\ttargetLayoutName: layoutName,\r\n\t\t\t\t\ttargetComponent: dropComponent,\r\n\t\t\t\t\torderName,\r\n\t\t\t\t\tx,\r\n\t\t\t\t\ty,\r\n\t\t\t\t\tdropEndCallback,\r\n\t\t\t\t\tdropTargetComponentEvent: {\r\n\t\t\t\t\t\tnavigationTitle,\r\n\t\t\t\t\t\tdropDocumentOutsideOption:\r\n\t\t\t\t\t\t\tdragState?.dropDocumentOutsideOption,\r\n\t\t\t\t\t\tdirection: dropDirection,\r\n\t\t\t\t\t\tscreenKey,\r\n\t\t\t\t\t},\r\n\t\t\t\t});\r\n\t\t\t\t// } else {\r\n\t\t\t\t//     dropMovementEventSubject.next({\r\n\t\t\t\t//         state: 'append',\r\n\t\t\t\t//         targetContainerName: containerName,\r\n\t\t\t\t//         targetParentLayoutName: parentLayoutName,\r\n\t\t\t\t//         targetLayoutName: layoutName,\r\n\t\t\t\t//         targetComponent: dropComponent,\r\n\t\t\t\t//         orderName: orderName,\r\n\t\t\t\t//         x,\r\n\t\t\t\t//         y,\r\n\t\t\t\t//         dropEndCallback,\r\n\t\t\t\t//         dropTargetComponentEvent: {\r\n\t\t\t\t//             navigationTitle,\r\n\t\t\t\t//             dropDocumentOutsideOption:\r\n\t\t\t\t//                 dragState?.dropDocumentOutsideOption,\r\n\t\t\t\t//             direction: direction,\r\n\t\t\t\t//         },\r\n\t\t\t\t//     });\r\n\t\t\t\t// }\r\n\t\t\t}\r\n\t\t\t// else if (\r\n\t\t\t//     isSplit &&\r\n\t\t\t//     positionName !== 'centerBoundary' &&\r\n\t\t\t//     !isOver\r\n\t\t\t// ) {\r\n\t\t\t//     if (!isFirstSplitUpdatedRef.current) {\r\n\t\t\t//         isFirstSplitUpdatedRef.current = true;\r\n\t\t\t//         return;\r\n\t\t\t//     }\r\n\t\t\t//     updateDropTargetComponents(\r\n\t\t\t//         positionName,\r\n\t\t\t//         containerName,\r\n\t\t\t//         dropComponent\r\n\t\t\t//     );\r\n\t\t\t// }\r\n\t\t}\r\n\t\tif (isDragging && !isSplit && !isOver) {\r\n\t\t\tconst newSize = {\r\n\t\t\t\tleft: positionName === \"rightBoundary\" ? \"50%\" : \"0\",\r\n\t\t\t\ttop: positionName === \"bottomBoundary\" ? \"50%\" : \"0\",\r\n\t\t\t\twidth:\r\n\t\t\t\t\tpositionName === \"leftBoundary\" ||\r\n\t\t\t\t\tpositionName === \"rightBoundary\"\r\n\t\t\t\t\t\t? \"50%\"\r\n\t\t\t\t\t\t: \"100%\",\r\n\t\t\t\theight:\r\n\t\t\t\t\tpositionName === \"topBoundary\" ||\r\n\t\t\t\t\tpositionName === \"bottomBoundary\"\r\n\t\t\t\t\t\t? \"50%\"\r\n\t\t\t\t\t\t: \"100%\",\r\n\t\t\t};\r\n\t\t\t// 이전 상태와 비교\r\n\t\t\tif (\r\n\t\t\t\tJSON.stringify(boundaryContainerSize) !==\r\n\t\t\t\tJSON.stringify(newSize)\r\n\t\t\t) {\r\n\t\t\t\tsetBoundaryContainerSize(newSize);\r\n\t\t\t}\r\n\t\t}\r\n\t}, [\r\n\t\tdragState,\r\n\t\tisSplit,\r\n\t\tboundaryContainerSize,\r\n\t\tparentLayoutName,\r\n\t\tlayoutName,\r\n\t\tselfContainerName,\r\n\t\tdirection,\r\n\t]);\r\n\treturn {\r\n\t\tdirection,\r\n\t\tsetDirection,\r\n\t\tisSplit,\r\n\t\tsetIsSplit,\r\n\t\tboundaryContainerSize,\r\n\t\t//setBoundaryContainerSize,\r\n\t\tcenterDropTargetComponent,\r\n\t\tafterDropTargetComponent,\r\n\t\tbeforeDropTargetComponent,\r\n\t\tsetAfterDropTargetComponent,\r\n\t\tsetBeforeDropTargetComponent,\r\n\t\tsetCenterDropTargetComponent,\r\n\t\t//dropTargetComponent,\r\n\t\t//setDropTargetComponent,\r\n\t\t//setDropPosition,\r\n\t\tisOver: dragState?.isOver,\r\n\t\tlayoutRef,\r\n\t};\r\n}\r\n"]}