@byeolnaerim/flex-layout 0.0.7 → 0.0.9

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

@@ -1,25 +1,62 @@
-'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();
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useDrag_exports = {};
+__export(useDrag_exports, {
+  allSplitScreenCount: () => allSplitScreenCount,
+  dragState: () => dragState,
+  dragStateSubject: () => dragStateSubject,
+  dropMovementEventSubject: () => dropMovementEventSubject,
+  folderEventSubject: () => folderEventSubject,
+  isResizingSubject: () => isResizingSubject,
+  setFolderEvent: () => setFolderEvent,
+  useDragCapture: () => useDragCapture,
+  useDragEvents: () => useDragEvents,
+  useFolderEvent: () => useFolderEvent
+});
+module.exports = __toCommonJS(useDrag_exports);
+var import_fast_deep_equal = __toESM(require("fast-deep-equal"), 1);
+var import_react = require("react");
+var import_rxjs = require("rxjs");
+var import_FlexLayoutUtils = require("../utils/FlexLayoutUtils");
+const dragStateSubject = new import_rxjs.Subject();
+const dragState = dragStateSubject;
+const isResizingSubject = new import_rxjs.BehaviorSubject(false);
 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) => {
+  const [state, setState] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    const subscription = dragStateSubject.pipe(
+      (0, import_rxjs.auditTime)(0, import_rxjs.animationFrameScheduler),
+      (0, import_rxjs.map)((value) => {
         if (!targetRef || !targetRef.current) return null;
         const { x, y } = value;
         const rect = targetRef.current.getBoundingClientRect();
@@ -55,46 +92,48 @@ const useDragCapture = (targetRef) => {
           ...value
         };
       }),
-      rxjs.distinctUntilChanged(
-        (prev, curr) => equal__default.default(filterChildren(prev), filterChildren(curr))
-      )
+      (0, import_rxjs.distinctUntilChanged)((prev, curr) => {
+        const { children: prevChildren, ..._prev } = prev || {};
+        const { children: currChildren, ..._curr } = curr || {};
+        return (0, import_fast_deep_equal.default)(filterChildren(_prev), filterChildren(_curr));
+      })
     ).subscribe({
-      next: (value) => {
-        if (value && !equal__default.default(
-          filterChildren(stateRef.current),
-          filterChildren(value)
-        )) {
-          stateRef.current = value;
-          forceUpdate.current++;
-        }
-      },
+      next: setState,
       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;
+  return state;
 };
-const dropMovementEventSubject = new rxjs.Subject();
-const allSplitScreenCount = new rxjs.BehaviorSubject(0);
+const dropMovementEventSubject = new import_rxjs.Subject();
+const allSplitScreenCount = new import_rxjs.BehaviorSubject(0);
 const useDragEvents = ({
   isBlockingActiveInput = false
 }) => {
-  const dragResumeTimer = react.useRef(null);
+  const dragResumeTimer = (0, import_react.useRef)(null);
+  const dragStartDelayTimer = (0, import_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(
+  const isScrolling = (0, import_react.useRef)(false);
+  const isPending = (0, import_react.useRef)(false);
+  const isMouseDown = (0, import_react.useRef)(false);
+  const isDragging = (0, import_react.useRef)(false);
+  const touchStartX = (0, import_react.useRef)(0);
+  const touchStartY = (0, import_react.useRef)(0);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      if (dragResumeTimer.current) {
+        clearTimeout(dragResumeTimer.current);
+        dragResumeTimer.current = null;
+      }
+      if (dragStartDelayTimer.current) {
+        clearTimeout(dragStartDelayTimer.current);
+        dragStartDelayTimer.current = null;
+      }
+    };
+  }, []);
+  const handleStart = (0, import_react.useCallback)(
     ({
       event: _event,
       dragStartCallback
@@ -104,35 +143,42 @@ const useDragEvents = ({
         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) {
+      if (event.cancelable && !(event instanceof globalThis.TouchEvent)) {
         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;
+      isScrolling.current = false;
+      const xy = (0, import_FlexLayoutUtils.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;
       }
-      setTimeout(() => {
+      dragStartDelayTimer.current = 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;
+        const xy2 = (0, import_FlexLayoutUtils.getClientXy)(event);
+        if (!xy2) return;
+        const { clientX, clientY } = xy2;
         dragStartCallback({ x: clientX, y: clientY });
       }, 300);
     },
     [isBlockingActiveInput]
   );
-  const handleMove = react.useCallback(
+  const handleMove = (0, import_react.useCallback)(
     ({
       event: _event,
       notDragCallback,
@@ -141,12 +187,16 @@ const useDragEvents = ({
     }) => {
       if (!isMouseDown.current) return;
       const event = _event instanceof Event ? _event : _event.nativeEvent;
-      const xy = FlexLayoutUtils.getClientXy(event);
+      const xy = (0, import_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)) {
+      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;
@@ -158,8 +208,8 @@ const useDragEvents = ({
         }
         dragResumeTimer.current = setTimeout(() => {
           if (!isMouseDown.current) return;
-          if (dragStartCallback)
-            dragStartCallback({ x: clientX, y: clientY });
+          touchStartX.current = clientX;
+          touchStartY.current = clientY;
           isPending.current = true;
           isScrolling.current = false;
           handleStart({ event: _event, dragStartCallback });
@@ -171,7 +221,7 @@ const useDragEvents = ({
     },
     [isBlockingActiveInput]
   );
-  const handleEnd = react.useCallback(
+  const handleEnd = (0, import_react.useCallback)(
     ({
       event: _event,
       dragEndCallback
@@ -180,12 +230,16 @@ const useDragEvents = ({
       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 = FlexLayoutUtils.getClientXy(event);
+      const xy = (0, import_FlexLayoutUtils.getClientXy)(event);
       if (!xy) return;
       const { clientX, clientY } = xy;
       dragEndCallback({ x: clientX, y: clientY });
@@ -198,15 +252,15 @@ const useDragEvents = ({
     handleEnd
   };
 };
-const folderEventSubject = new rxjs.Subject();
+const folderEventSubject = new import_rxjs.Subject();
 const setFolderEvent = (newValue) => {
   folderEventSubject.next(newValue);
 };
 const useFolderEvent = () => {
-  const [folderEvent, setFolderEvent2] = react.useState(
+  const [folderEvent, setFolderEvent2] = (0, import_react.useState)(
     null
   );
-  react.useEffect(() => {
+  (0, import_react.useEffect)(() => {
     const subscription = folderEventSubject.subscribe((e) => {
       if (!e) return;
       setFolderEvent2(e);
@@ -219,14 +273,17 @@ const useFolderEvent = () => {
   }, []);
   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
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  allSplitScreenCount,
+  dragState,
+  dragStateSubject,
+  dropMovementEventSubject,
+  folderEventSubject,
+  isResizingSubject,
+  setFolderEvent,
+  useDragCapture,
+  useDragEvents,
+  useFolderEvent
+});
 //# sourceMappingURL=useDrag.cjs.map

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

@@ -1 +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"]}
+{"version":3,"sources":["../../../src/flex-layout/hooks/useDrag.ts"],"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 {\r\n\tanimationFrameScheduler,\r\n\tauditTime,\r\n\tBehaviorSubject,\r\n\tdistinctUntilChanged,\r\n\tmap,\r\n\tSubject,\r\n} 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 dragStateSubject = new Subject<DragStateType>();\r\n/**\r\n * @deprecated Use `dragStateSubject` instead. This alias will be removed in a future release.\r\n */\r\nexport const dragState = dragStateSubject;\r\n\r\nexport const isResizingSubject = new BehaviorSubject<boolean>(false);\r\n\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 [state, setState] = useState<DragStateResultType | null>(null);\r\n\r\n\tuseEffect(() => {\r\n\t\tconst subscription = dragStateSubject\r\n\t\t\t.pipe(\r\n\t\t\t\tauditTime(0, animationFrameScheduler),\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\tconst { children: prevChildren, ..._prev } = prev || {};\r\n\t\t\t\t\tconst { children: currChildren, ..._curr } = curr || {};\r\n\r\n\t\t\t\t\treturn equal(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: setState,\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\treturn state;\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 dragStartDelayTimer = useRef<ReturnType<typeof setTimeout> | null>(\r\n\t\tnull,\r\n\t);\r\n\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\tuseEffect(() => {\r\n\t\treturn () => {\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\t\t\tif (dragStartDelayTimer.current) {\r\n\t\t\t\tclearTimeout(dragStartDelayTimer.current);\r\n\t\t\t\tdragStartDelayTimer.current = null;\r\n\t\t\t}\r\n\t\t};\r\n\t}, []);\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\t\t\tif (dragStartDelayTimer.current) {\r\n\t\t\t\tclearTimeout(dragStartDelayTimer.current);\r\n\t\t\t\tdragStartDelayTimer.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 && !(event instanceof globalThis.TouchEvent)) {\r\n\t\t\t\tevent.preventDefault(); // cancelable=false 면 자동 skip\r\n\t\t\t}\r\n\r\n\t\t\tisPending.current = true;\r\n\t\t\tisMouseDown.current = true;\r\n\t\t\tisScrolling.current = false;\r\n\r\n\t\t\t// if (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\r\n\t\t\tconst xy = getClientXy(event);\r\n\t\t\tif (!xy) return;\r\n\t\t\ttouchStartX.current = xy.clientX;\r\n\t\t\ttouchStartY.current = xy.clientY;\r\n\r\n\t\t\tif (\r\n\t\t\t\tevent.type.toLowerCase().startsWith(\"touch\") ||\r\n\t\t\t\tevent instanceof globalThis.TouchEvent\r\n\t\t\t) {\r\n\t\t\t\tisPending.current = false;\r\n\t\t\t\tisDragging.current = true;\r\n\r\n\t\t\t\tdragStartCallback({ x: xy.clientX, y: xy.clientY });\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\r\n\t\t\t//event.preventDefault();\r\n\t\t\tdragStartDelayTimer.current = setTimeout(() => {\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(event.type.toLowerCase().startsWith(\"touch\") ||\r\n\t\t\t\t\tevent instanceof globalThis.TouchEvent) &&\r\n\t\t\t\t(deltaX > scrollThreshold || deltaY > scrollThreshold)\r\n\t\t\t) {\r\n\t\t\t\tif (dragStartDelayTimer.current) {\r\n\t\t\t\t\tclearTimeout(dragStartDelayTimer.current);\r\n\t\t\t\t\tdragStartDelayTimer.current = null;\r\n\t\t\t\t}\r\n\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\t// if (dragStartCallback)\r\n\t\t\t\t\t// \tdragStartCallback({ x: clientX, y: clientY });\r\n\t\t\t\t\t// isPending.current = true;\r\n\t\t\t\t\t// isScrolling.current = false;\r\n\t\t\t\t\t// handleStart({ event: _event, dragStartCallback });\r\n\r\n\t\t\t\t\ttouchStartX.current = clientX;\r\n\t\t\t\t\ttouchStartY.current = 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\r\n\t\t\tif (isPending.current) {\r\n\t\t\t\tisPending.current = false;\r\n\t\t\t\tif (dragStartDelayTimer.current) {\r\n\t\t\t\t\tclearTimeout(dragStartDelayTimer.current);\r\n\t\t\t\t\tdragStartDelayTimer.current = null;\r\n\t\t\t\t}\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"],"mappings":"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","names":["equal","xy","setFolderEvent"]}

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

@@ -23,7 +23,12 @@ export interface DragStateResultType extends DragStateType {
     positionName: PositionName;
     isOver: boolean;
 }
+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 useDragCapture: (targetRef: RefObject<HTMLElement | null>) => DragStateResultType | null;
 export interface DropTargetComponent {
     containerName: string;

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

@@ -1,18 +1,31 @@
-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();
+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 stateRef = useRef(null);
-  const forceUpdate = useRef(0);
+  const [state, setState] = useState(null);
   useEffect(() => {
-    const subscription = dragState.pipe(
+    const subscription = dragStateSubject.pipe(
+      auditTime(0, animationFrameScheduler),
       map((value) => {
         if (!targetRef || !targetRef.current) return null;
         const { x, y } = value;
@@ -49,31 +62,18 @@ const useDragCapture = (targetRef) => {
           ...value
         };
       }),
-      distinctUntilChanged(
-        (prev, curr) => equal(filterChildren(prev), filterChildren(curr))
-      )
+      distinctUntilChanged((prev, curr) => {
+        const { children: prevChildren, ..._prev } = prev || {};
+        const { children: currChildren, ..._curr } = curr || {};
+        return equal(filterChildren(_prev), filterChildren(_curr));
+      })
     ).subscribe({
-      next: (value) => {
-        if (value && !equal(
-          filterChildren(stateRef.current),
-          filterChildren(value)
-        )) {
-          stateRef.current = value;
-          forceUpdate.current++;
-        }
-      },
+      next: setState,
       error: (err) => console.error(err)
     });
     return () => subscription.unsubscribe();
   }, [targetRef]);
-  const [, rerender] = useState({});
-  useEffect(() => {
-    const interval = setInterval(() => {
-      rerender({});
-    }, 50);
-    return () => clearInterval(interval);
-  }, []);
-  return stateRef.current;
+  return state;
 };
 const dropMovementEventSubject = new Subject();
 const allSplitScreenCount = new BehaviorSubject(0);
@@ -81,6 +81,9 @@ const useDragEvents = ({
   isBlockingActiveInput = false
 }) => {
   const dragResumeTimer = useRef(null);
+  const dragStartDelayTimer = useRef(
+    null
+  );
   const scrollThreshold = 10;
   const isScrolling = useRef(false);
   const isPending = useRef(false);
@@ -88,6 +91,18 @@ const useDragEvents = ({
   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,
@@ -98,29 +113,36 @@ const useDragEvents = ({
         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) {
+      if (event.cancelable && !(event instanceof globalThis.TouchEvent)) {
         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;
+      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;
       }
-      setTimeout(() => {
+      dragStartDelayTimer.current = setTimeout(() => {
         if (!isPending.current || isScrolling.current) return;
         isPending.current = false;
         isDragging.current = true;
-        const xy = getClientXy(event);
-        if (!xy) return;
-        const { clientX, clientY } = xy;
+        const xy2 = getClientXy(event);
+        if (!xy2) return;
+        const { clientX, clientY } = xy2;
         dragStartCallback({ x: clientX, y: clientY });
       }, 300);
     },
@@ -140,7 +162,11 @@ const useDragEvents = ({
       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)) {
+      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;
@@ -152,8 +178,8 @@ const useDragEvents = ({
         }
         dragResumeTimer.current = setTimeout(() => {
           if (!isMouseDown.current) return;
-          if (dragStartCallback)
-            dragStartCallback({ x: clientX, y: clientY });
+          touchStartX.current = clientX;
+          touchStartY.current = clientY;
           isPending.current = true;
           isScrolling.current = false;
           handleStart({ event: _event, dragStartCallback });
@@ -174,6 +200,10 @@ const useDragEvents = ({
       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;
@@ -213,7 +243,16 @@ const useFolderEvent = () => {
   }, []);
   return { folderEvent };
 };
-
-export { allSplitScreenCount, dragState, dropMovementEventSubject, folderEventSubject, setFolderEvent, useDragCapture, useDragEvents, useFolderEvent };
-//# sourceMappingURL=useDrag.js.map
+export {
+  allSplitScreenCount,
+  dragState,
+  dragStateSubject,
+  dropMovementEventSubject,
+  folderEventSubject,
+  isResizingSubject,
+  setFolderEvent,
+  useDragCapture,
+  useDragEvents,
+  useFolderEvent
+};
 //# sourceMappingURL=useDrag.js.map