@byeolnaerim/flex-layout 0.0.8 → 0.0.9

package/dist/flex-layout/components/FlexLayoutSplitScreenDragBox.cjs

@@ -1,16 +1,54 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var useDrag = require('../hooks/useDrag');
-var styles = require('../styles/FlexLayout.module.css');
-var FlexLayoutUtils = require('../utils/FlexLayoutUtils');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
+"use strict";
+"use client";
+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 FlexLayoutSplitScreenDragBox_exports = {};
+__export(FlexLayoutSplitScreenDragBox_exports, {
+  default: () => FlexLayoutSplitScreenDragBox
+});
+module.exports = __toCommonJS(FlexLayoutSplitScreenDragBox_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_useDrag = require("../hooks/useDrag");
+var import_FlexLayout = __toESM(require("../styles/FlexLayout.module.css"), 1);
+var import_FlexLayoutUtils = require("../utils/FlexLayoutUtils");
+var import_FlexLayoutIFramePane = require("./FlexLayoutIFramePane");
 const MAX_STEP = 18;
+function shouldAllowViewportScroll(x, y) {
+  const w = window.innerWidth;
+  const h = window.innerHeight;
+  const marginX = w * 0.15;
+  const marginY = h * 0.15;
+  return x < marginX || // 왼쪽 15 %
+  x > w - marginX || // 오른쪽 15 %
+  y < marginY || // 상단 15 %
+  y > h - marginY;
+}
 function edgeVelocity(x, y) {
   const w = window.innerWidth, h = window.innerHeight;
   const mx = w * 0.15, my = h * 0.15;
@@ -26,6 +64,38 @@ function edgeVelocity(x, y) {
     vy = (y - (h - my)) / my * MAX_STEP;
   return { vx, vy };
 }
+function calcVelocity(dx, dy, x, y) {
+  const w = window.innerWidth, h = window.innerHeight;
+  const marginX = w * 0.15, marginY = h * 0.15;
+  const multX = x < marginX ? 1 + (marginX - x) / marginX * 3 : x > w - marginX ? 1 + (x - (w - marginX)) / marginX * 3 : 1;
+  const multY = y < marginY ? 1 + (marginY - y) / marginY * 3 : y > h - marginY ? 1 + (y - (h - marginY)) / marginY * 3 : 1;
+  return { vx: -dx * multX, vy: -dy * multY };
+}
+function createScreenKey() {
+  const c = globalThis.crypto;
+  if (c?.randomUUID) return c.randomUUID();
+  if (c?.getRandomValues) {
+    return Array.from(
+      c.getRandomValues(new Uint32Array(16)),
+      (e) => e.toString(32).padStart(2, "0")
+    ).join("");
+  }
+  return `${Date.now().toString(32)}-${Math.random().toString(32).slice(2)}`;
+}
+function getFallbackElement(targetComponent, url) {
+  if (targetComponent) return targetComponent;
+  if (url) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FlexLayoutIFramePane.FlexLayoutIFramePane, { url });
+  return void 0;
+}
+function titleFromUrl(url) {
+  if (!url) return void 0;
+  try {
+    const u = new URL(url);
+    return u.hostname;
+  } catch {
+    return url;
+  }
+}
 function FlexLayoutSplitScreenDragBox({
   onMouseDown,
   onTouchStart,
@@ -37,26 +107,47 @@ function FlexLayoutSplitScreenDragBox({
   children,
   className,
   dropDocumentOutsideOption,
-  screenKey = Array.from(
-    window.crypto.getRandomValues(new Uint32Array(16)),
-    (e) => e.toString(32).padStart(2, "0")
-  ).join(""),
+  screenKey: _screenKey,
   isBlockingActiveInput = false,
   customData = {},
   scrollTargetRef,
   ...props
 }) {
-  const scrollRAF = react.useRef(null);
-  const velocity = react.useRef({ vx: 0, vy: 0 });
-  const ref = react.useRef(null);
-  const clonedNodeRef = react.useRef(null);
-  const clonedWidth = react.useRef(null);
-  const clonedHeight = react.useRef(null);
-  const hrefUrlRef = react.useRef("");
-  const { handleStart, handleMove, handleEnd } = useDrag.useDragEvents({
+  const [screenKey, setScreenKey] = (0, import_react.useState)();
+  (0, import_react.useEffect)(() => {
+    if (!_screenKey) setScreenKey(createScreenKey());
+    else setScreenKey(_screenKey);
+  }, [_screenKey]);
+  const scrollRAF = (0, import_react.useRef)(null);
+  const velocity = (0, import_react.useRef)({ vx: 0, vy: 0 });
+  const ref = (0, import_react.useRef)(null);
+  const clonedNodeRef = (0, import_react.useRef)(null);
+  const clonedWidth = (0, import_react.useRef)(null);
+  const clonedHeight = (0, import_react.useRef)(null);
+  const hrefUrlRef = (0, import_react.useRef)("");
+  const rafId = (0, import_react.useRef)(null);
+  const pending = (0, import_react.useRef)(null);
+  const lastPointRef = (0, import_react.useRef)({ x: 0, y: 0 });
+  const escCanceledRef = (0, import_react.useRef)(false);
+  const emitDragState = (v) => {
+    pending.current = v;
+    if (rafId.current != null) return;
+    rafId.current = requestAnimationFrame(() => {
+      if (pending.current) import_useDrag.dragStateSubject.next(pending.current);
+      pending.current = null;
+      rafId.current = null;
+    });
+  };
+  (0, import_react.useEffect)(() => {
+    return () => {
+      if (rafId.current != null) cancelAnimationFrame(rafId.current);
+    };
+  }, []);
+  const { handleStart, handleMove, handleEnd } = (0, import_useDrag.useDragEvents)({
     isBlockingActiveInput
   });
   const handleMoveWrapper = (event) => {
+    let allowScrollEdge = false;
     let x = 0;
     let y = 0;
     if (event.type === "touchmove") {
@@ -70,6 +161,7 @@ function FlexLayoutSplitScreenDragBox({
     }
     const { vx, vy } = edgeVelocity(x, y);
     const inEdge = vx !== 0 || vy !== 0;
+    allowScrollEdge = shouldAllowViewportScroll(x, y);
     if (clonedNodeRef.current?.isConnected && !inEdge) {
       event.preventDefault();
       if (scrollRAF.current) {
@@ -114,19 +206,21 @@ function FlexLayoutSplitScreenDragBox({
       dragStartCallback: ({ x: x2, y: y2 }) => {
         if (!clonedNodeRef.current) return;
         navigator.vibrate(100);
-        clonedNodeRef.current.style.left = `${x2 - (clonedWidth.current || 0) / 2}px`;
-        clonedNodeRef.current.style.top = `${y2 - (clonedHeight.current || 0) / 2}px`;
+        clonedNodeRef.current.style.transform = `translate3d(${x2 - (clonedWidth.current || 0) / 2}px, ${y2 - (clonedHeight.current || 0) / 2}px, 0)`;
       },
       moveingCallback: ({ x: x2, y: y2 }) => {
+        lastPointRef.current = { x: x2, y: y2 };
         if (clonedNodeRef.current?.isConnected) {
-          clonedNodeRef.current.style.left = `${x2 - (clonedWidth.current || 0) / 2}px`;
-          clonedNodeRef.current.style.top = `${y2 - (clonedHeight.current || 0) / 2}px`;
+          clonedNodeRef.current.style.transform = `translate3d(${x2 - (clonedWidth.current || 0) / 2}px, ${y2 - (clonedHeight.current || 0) / 2}px, 0)`;
         }
-        useDrag.dragState.next({
+        emitDragState({
           isDragging: true,
           isDrop: false,
-          navigationTitle,
-          children: targetComponent,
+          navigationTitle: navigationTitle ?? titleFromUrl(dropDocumentOutsideOption?.openUrl),
+          children: getFallbackElement(
+            targetComponent,
+            dropDocumentOutsideOption?.openUrl
+          ),
           x: x2,
           y: y2,
           containerName,
@@ -142,12 +236,34 @@ function FlexLayoutSplitScreenDragBox({
       scrollRAF.current = null;
     }
     velocity.current = { vx: 0, vy: 0 };
+    if (event.type === "blur" || event.type === "touchcancel" || event.type === "pointercancel") {
+      if (clonedNodeRef.current) clonedNodeRef.current.remove();
+    }
     handleEnd({
       event,
       dragEndCallback: ({ x, y }) => {
+        if (escCanceledRef.current) {
+          escCanceledRef.current = false;
+          if (clonedNodeRef.current) clonedNodeRef.current.remove();
+          emitDragState({
+            isDragging: false,
+            isDrop: false,
+            navigationTitle: navigationTitle ?? titleFromUrl(dropDocumentOutsideOption?.openUrl),
+            children: getFallbackElement(
+              targetComponent,
+              dropDocumentOutsideOption?.openUrl
+            ),
+            x,
+            y,
+            containerName,
+            dropDocumentOutsideOption,
+            customData
+          });
+          return;
+        }
         const href = hrefUrlRef.current;
         if (clonedNodeRef.current) clonedNodeRef.current.remove();
-        if (dropDocumentOutsideOption && FlexLayoutUtils.isDocumentOut({ x, y })) {
+        if (dropDocumentOutsideOption && (0, import_FlexLayoutUtils.isDocumentOut)({ x, y })) {
           if (dropDocumentOutsideOption.isNewTap || !dropDocumentOutsideOption.widthRatio && !dropDocumentOutsideOption.heightRatio) {
             window.open(href, "_blank");
           } else {
@@ -160,11 +276,14 @@ function FlexLayoutSplitScreenDragBox({
             );
           }
         }
-        useDrag.dragState.next({
+        emitDragState({
           isDragging: false,
           isDrop: true,
-          navigationTitle,
-          children: targetComponent,
+          navigationTitle: navigationTitle ?? titleFromUrl(dropDocumentOutsideOption?.openUrl),
+          children: getFallbackElement(
+            targetComponent,
+            dropDocumentOutsideOption?.openUrl
+          ),
           x,
           y,
           containerName,
@@ -176,7 +295,7 @@ function FlexLayoutSplitScreenDragBox({
       }
     });
   };
-  react.useEffect(() => {
+  (0, import_react.useEffect)(() => {
     if (ref.current) {
       const clone = ref.current.cloneNode(true);
       const originRect = ref.current.getBoundingClientRect();
@@ -192,24 +311,38 @@ function FlexLayoutSplitScreenDragBox({
         href.textContent = hrefUrlRef.current;
         clone.prepend(href);
       }
-      if (navigationTitle) {
-        const title = document.createElement("span");
-        title.textContent = navigationTitle;
-        clone.prepend(title);
-      }
+      const title = document.createElement("span");
+      title.textContent = navigationTitle ?? titleFromUrl(dropDocumentOutsideOption?.openUrl) ?? "";
+      clone.prepend(title);
       clone.style.position = "fixed";
+      clone.style.left = "0px";
+      clone.style.top = "0px";
+      clone.style.margin = "0px";
+      clone.style.willChange = "transform";
+      clone.style.transform = "translate3d(-9999px, -9999px, 0)";
+      clone.style.pointerEvents = "none";
       clonedNodeRef.current = clone;
       clonedNodeRef.current.classList.add(
-        styles__default.default["flex-split-screen-drag-box-clone"]
+        import_FlexLayout.default["flex-split-screen-drag-box-clone"]
       );
     }
   }, []);
-  react.useEffect(() => {
+  (0, import_react.useEffect)(() => {
     const moveEvents = [
       "mousemove",
       "touchmove"
     ];
-    const endEvents = ["mouseup", "touchend"];
+    const endEvents = [
+      "mouseup",
+      "touchend",
+      "touchcancel",
+      // 터치 제스처 시스템 인터럽트
+      "pointerup",
+      // 범용 포인터 이벤트
+      "pointercancel",
+      "blur"
+      // 윈도우 포커스 아웃 (Alt+Tab 등)
+    ];
     moveEvents.forEach((eventName) => {
       window.addEventListener(eventName, handleMoveWrapper, {
         passive: false
@@ -236,7 +369,7 @@ function FlexLayoutSplitScreenDragBox({
     navigationTitle,
     dropEndCallback
   ]);
-  react.useEffect(() => {
+  (0, import_react.useEffect)(() => {
     const el = ref.current;
     if (!el) return;
     const onCtx = (e) => e.preventDefault();
@@ -245,10 +378,64 @@ function FlexLayoutSplitScreenDragBox({
       el.removeEventListener("contextmenu", onCtx);
     };
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+  (0, import_react.useEffect)(() => {
+    return () => {
+      if (scrollRAF.current !== null) {
+        cancelAnimationFrame(scrollRAF.current);
+        scrollRAF.current = null;
+      }
+      velocity.current = { vx: 0, vy: 0 };
+      clonedNodeRef.current?.remove();
+    };
+  }, []);
+  (0, import_react.useEffect)(() => {
+    const onKeyDown = (e) => {
+      if (e.key !== "Escape") return;
+      if (!clonedNodeRef.current?.isConnected) return;
+      e.preventDefault();
+      e.stopPropagation();
+      escCanceledRef.current = true;
+      if (scrollRAF.current !== null) {
+        cancelAnimationFrame(scrollRAF.current);
+        scrollRAF.current = null;
+      }
+      velocity.current = { vx: 0, vy: 0 };
+      clonedNodeRef.current?.remove();
+      handleEnd({
+        event: new Event("pointercancel"),
+        dragEndCallback: () => {
+        }
+      });
+      const { x, y } = lastPointRef.current;
+      emitDragState({
+        isDragging: false,
+        isDrop: false,
+        navigationTitle: navigationTitle ?? titleFromUrl(dropDocumentOutsideOption?.openUrl),
+        children: getFallbackElement(
+          targetComponent,
+          dropDocumentOutsideOption?.openUrl
+        ),
+        x,
+        y,
+        containerName,
+        dropDocumentOutsideOption,
+        customData
+      });
+    };
+    window.addEventListener("keydown", onKeyDown, true);
+    return () => window.removeEventListener("keydown", onKeyDown, true);
+  }, [
+    handleEnd,
+    containerName,
+    navigationTitle,
+    dropDocumentOutsideOption,
+    targetComponent,
+    customData
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
-      className: `${className || ""} ${styles__default.default["flex-split-screen-drag-box"]}`,
+      className: `${className || ""} ${import_FlexLayout.default["flex-split-screen-drag-box"]}`,
       ref,
       onContextMenu: (e) => e.preventDefault(),
       onMouseDown: (ev) => {
@@ -258,6 +445,7 @@ function FlexLayoutSplitScreenDragBox({
         handleStart({
           event: ev,
           dragStartCallback: ({ x, y }) => {
+            lastPointRef.current = { x, y };
             if (clonedNodeRef.current) {
               document.body.appendChild(
                 clonedNodeRef.current
@@ -272,14 +460,18 @@ function FlexLayoutSplitScreenDragBox({
             }
             if (clonedNodeRef.current?.isConnected) {
               navigator.vibrate(100);
-              clonedNodeRef.current.style.left = `${x - (clonedWidth.current || 0) / 2}px`;
-              clonedNodeRef.current.style.top = `${y - (clonedHeight.current || 0) / 2}px`;
+              clonedNodeRef.current.style.transform = `translate3d(${x - (clonedWidth.current || 0) / 2}px, ${y - (clonedHeight.current || 0) / 2}px, 0)`;
             }
-            useDrag.dragState.next({
+            emitDragState({
               isDragging: true,
               isDrop: false,
-              navigationTitle,
-              children: targetComponent,
+              navigationTitle: navigationTitle ?? titleFromUrl(
+                dropDocumentOutsideOption?.openUrl
+              ),
+              children: getFallbackElement(
+                targetComponent,
+                dropDocumentOutsideOption?.openUrl
+              ),
               x,
               y,
               containerName,
@@ -310,14 +502,18 @@ function FlexLayoutSplitScreenDragBox({
             }
             if (clonedNodeRef.current?.isConnected) {
               navigator.vibrate(100);
-              clonedNodeRef.current.style.left = `${x - (clonedWidth.current || 0) / 2}px`;
-              clonedNodeRef.current.style.top = `${y - (clonedHeight.current || 0) / 2}px`;
+              clonedNodeRef.current.style.transform = `translate3d(${x - (clonedWidth.current || 0) / 2}px, ${y - (clonedHeight.current || 0) / 2}px, 0)`;
             }
-            useDrag.dragState.next({
+            emitDragState({
               isDragging: true,
               isDrop: false,
-              navigationTitle,
-              children: targetComponent,
+              navigationTitle: navigationTitle ?? titleFromUrl(
+                dropDocumentOutsideOption?.openUrl
+              ),
+              children: getFallbackElement(
+                targetComponent,
+                dropDocumentOutsideOption?.openUrl
+              ),
               x,
               y,
               containerName,
@@ -333,7 +529,4 @@ function FlexLayoutSplitScreenDragBox({
     }
   ) });
 }
-
-module.exports = FlexLayoutSplitScreenDragBox;
-//# sourceMappingURL=FlexLayoutSplitScreenDragBox.cjs.map
 //# sourceMappingURL=FlexLayoutSplitScreenDragBox.cjs.map

package/dist/flex-layout/components/FlexLayoutSplitScreenDragBox.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutSplitScreenDragBox.tsx"],"names":["useRef","useDragEvents","x","y","dragState","isDocumentOut","useEffect","styles","jsx","Fragment"],"mappings":";;;;;;;;;;;;AAeA,MAAM,QAAA,GAAW,EAAA;AAejB,SAAS,YAAA,CAAa,GAAW,CAAA,EAAW;AAC3C,EAAA,MAAM,CAAA,GAAI,MAAA,CAAO,UAAA,EAChB,CAAA,GAAI,MAAA,CAAO,WAAA;AACZ,EAAA,MAAM,EAAA,GAAK,CAAA,GAAI,IAAA,EACd,EAAA,GAAK,CAAA,GAAI,IAAA;AAGV,EAAA,IAAI,EAAA,GAAK,CAAA;AACT,EAAA,IAAI,CAAA,GAAI,EAAA;AAEP,IAAA,EAAA,GAAK,EAAA,CAAG,EAAA,GAAK,CAAA,IAAK,EAAA,CAAA,GAAM,QAAA;AAAA,OAAA,IAChB,IAAI,CAAA,GAAI,EAAA;AAEhB,IAAA,EAAA,GAAA,CAAO,CAAA,IAAK,CAAA,GAAI,EAAA,CAAA,IAAO,EAAA,GAAM,QAAA;AAG9B,EAAA,IAAI,EAAA,GAAK,CAAA;AACT,EAAA,IAAI,CAAA,GAAI,EAAA;AAEP,IAAA,EAAA,GAAK,EAAA,CAAG,EAAA,GAAK,CAAA,IAAK,EAAA,CAAA,GAAM,QAAA;AAAA,OAAA,IAChB,IAAI,CAAA,GAAI,EAAA;AAEhB,IAAA,EAAA,GAAA,CAAO,CAAA,IAAK,CAAA,GAAI,EAAA,CAAA,IAAO,EAAA,GAAM,QAAA;AAE9B,EAAA,OAAO,EAAE,IAAI,EAAA,EAAG;AACjB;AA2De,SAAR,4BAAA,CAAqE;AAAA,EAC3E,WAAA;AAAA,EACA,YAAA;AAAA,EACA,eAAA;AAAA,EACA,KAAA;AAAA,EACA,eAAA;AAAA,EACA,eAAA;AAAA,EACA,aAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,yBAAA;AAAA,EACA,YAAY,KAAA,CAAM,IAAA;AAAA,IACjB,OAAO,MAAA,CAAO,eAAA,CAAgB,IAAI,WAAA,CAAY,EAAE,CAAC,CAAA;AAAA,IACjD,CAAC,MAAM,CAAA,CAAE,QAAA,CAAS,EAAE,CAAA,CAAE,QAAA,CAAS,GAAG,GAAG;AAAA,GACtC,CAAE,KAAK,EAAE,CAAA;AAAA,EACT,qBAAA,GAAwB,KAAA;AAAA,EACxB,aAAa,EAAC;AAAA,EACd,eAAA;AAAA,EACA,GAAG;AACJ,CAAA,EAAsC;AAErC,EAAA,MAAM,SAAA,GAAYA,aAAsB,IAAI,CAAA;AAC5C,EAAA,MAAM,WAAWA,YAAA,CAAmC,EAAE,IAAI,CAAA,EAAG,EAAA,EAAI,GAAG,CAAA;AACpE,EAAA,MAAM,GAAA,GAAMA,aAAuB,IAAI,CAAA;AACvC,EAAA,MAAM,aAAA,GAAgBA,aAA8B,IAAI,CAAA;AACxD,EAAA,MAAM,WAAA,GAAcA,aAAsB,IAAI,CAAA;AAC9C,EAAA,MAAM,YAAA,GAAeA,aAAsB,IAAI,CAAA;AAC/C,EAAA,MAAM,UAAA,GAAaA,aAAe,EAAE,CAAA;AAEpC,EAAA,MAAM,EAAE,WAAA,EAAa,UAAA,EAAY,SAAA,KAAcC,qBAAA,CAAc;AAAA,IAC5D;AAAA,GACA,CAAA;AACD,EAAA,MAAM,iBAAA,GAAoB,CAAC,KAAA,KAAiB;AAE3C,IAAA,IAAI,CAAA,GAAI,CAAA;AACR,IAAA,IAAI,CAAA,GAAI,CAAA;AAER,IAAA,IAAI,KAAA,CAAM,SAAS,WAAA,EAAa;AAC/B,MAAA,MAAM,CAAA,GAAK,KAAA,CAAgC,OAAA,CAAQ,CAAC,CAAA;AACpD,MAAA,CAAA,GAAI,CAAA,CAAE,OAAA;AACN,MAAA,CAAA,GAAI,CAAA,CAAE,OAAA;AAAA,IACP,CAAA,MAAO;AACN,MAAA,MAAM,CAAA,GAAI,KAAA;AACV,MAAA,CAAA,GAAI,CAAA,CAAE,OAAA;AACN,MAAA,CAAA,GAAI,CAAA,CAAE,OAAA;AAAA,IACP;AACA,IAAA,MAAM,EAAE,EAAA,EAAI,EAAA,EAAG,GAAI,YAAA,CAAa,GAAG,CAAC,CAAA;AACpC,IAAA,MAAM,MAAA,GAAS,EAAA,KAAO,CAAA,IAAK,EAAA,KAAO,CAAA;AAIlC,IAAA,IAAI,aAAA,CAAc,OAAA,EAAS,WAAA,IAAe,CAAC,MAAA,EAAQ;AAClD,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,IAAI,UAAU,OAAA,EAAS;AACtB,QAAA,oBAAA,CAAqB,UAAU,OAAO,CAAA;AACtC,QAAA,SAAA,CAAU,OAAA,GAAU,IAAA;AAAA,MACrB;AAAA,IAED;AAEA,IAAA,IACC,aAAA,CAAc,OAAA,EAAS,WAAA,IACvB,MAAA,EAEC;AACD,MAAA,KAAA,CAAM,cAAA,EAAe;AAIrB,MAAA,QAAA,CAAS,OAAA,GAAU,EAAE,EAAA,EAAI,EAAA,EAAG;AAI5B,MAAA,IAAI,CAAC,UAAU,OAAA,EAAS;AACvB,QAAA,MAAM,OAAO,MAAM;AAClB,UAAA,MAAM,MAAA,GACL,eAAA,EAAiB,OAAA,IAChB,QAAA,CAAS,gBAAA;AAEX,UAAA,IAAI,QAAQ,QAAA,EAAU;AACrB,YAAA,MAAA,CAAO,QAAA;AAAA,cACN,SAAS,OAAA,CAAQ,EAAA;AAAA,cACjB,SAAS,OAAA,CAAQ;AAAA,aAClB;AAAA,UACD,CAAA,MAAO;AACN,YAAA,MAAA,CAAO,QAAA;AAAA,cACN,SAAS,OAAA,CAAQ,EAAA;AAAA,cACjB,SAAS,OAAA,CAAQ;AAAA,aAClB;AAAA,UACD;AACA,UAAA,IACC,SAAS,OAAA,CAAQ,EAAA,KAAO,KACxB,QAAA,CAAS,OAAA,CAAQ,OAAO,CAAA,EACvB;AACD,YAAA,SAAA,CAAU,OAAA,GAAU,IAAA;AACpB,YAAA;AAAA,UACD;AACA,UAAA,SAAA,CAAU,OAAA,GAAU,sBAAsB,IAAI,CAAA;AAAA,QAC/C,CAAA;AACA,QAAA,SAAA,CAAU,OAAA,GAAU,sBAAsB,IAAI,CAAA;AAAA,MAC/C;AAAA,IAGD;AACA,IAAA,IAAI,KAAA,CAAM,SAAS,WAAA,EAAa;AAE/B,MAAA,KAAA,CAAM,cAAA,EAAe;AAAA,IACtB;AACA,IAAA,UAAA,CAAW;AAAA,MACV,KAAA;AAAA,MACA,iBAAiB,CAAC,EAAE,GAAAC,EAAAA,EAAG,CAAA,EAAAC,IAAE,KAAM;AAC9B,QAAA,IAAI,aAAA,CAAc,OAAA,EAAS,aAAA,CAAc,OAAA,CAAQ,MAAA,EAAO;AAAA,MACzD,CAAA;AAAA,MACA,mBAAmB,CAAC,EAAE,GAAAD,EAAAA,EAAG,CAAA,EAAAC,IAAE,KAAM;AAChC,QAAA,IAAI,CAAC,cAAc,OAAA,EAAS;AAC5B,QAAA,SAAA,CAAU,QAAQ,GAAG,CAAA;AACrB,QAAA,aAAA,CAAc,OAAA,CAAQ,MAAM,IAAA,GAAO,CAAA,EAAGD,MAAK,WAAA,CAAY,OAAA,IAAW,KAAK,CAAC,CAAA,EAAA,CAAA;AACxE,QAAA,aAAA,CAAc,OAAA,CAAQ,MAAM,GAAA,GAAM,CAAA,EAAGC,MAAK,YAAA,CAAa,OAAA,IAAW,KAAK,CAAC,CAAA,EAAA,CAAA;AAAA,MACzE,CAAA;AAAA,MACA,iBAAiB,CAAC,EAAE,GAAAD,EAAAA,EAAG,CAAA,EAAAC,IAAE,KAAM;AAC9B,QAAA,IAAI,aAAA,CAAc,SAAS,WAAA,EAAa;AACvC,UAAA,aAAA,CAAc,OAAA,CAAQ,MAAM,IAAA,GAAO,CAAA,EAAGD,MAAK,WAAA,CAAY,OAAA,IAAW,KAAK,CAAC,CAAA,EAAA,CAAA;AACxE,UAAA,aAAA,CAAc,OAAA,CAAQ,MAAM,GAAA,GAAM,CAAA,EAAGC,MAAK,YAAA,CAAa,OAAA,IAAW,KAAK,CAAC,CAAA,EAAA,CAAA;AAAA,QACzE;AAEA,QAAAC,iBAAA,CAAU,IAAA,CAAK;AAAA,UACd,UAAA,EAAY,IAAA;AAAA,UACZ,MAAA,EAAQ,KAAA;AAAA,UACR,eAAA;AAAA,UACA,QAAA,EAAU,eAAA;AAAA,UACV,CAAA,EAAAF,EAAAA;AAAA,UACA,CAAA,EAAAC,EAAAA;AAAA,UACA,aAAA;AAAA,UACA,yBAAA;AAAA,UACA;AAAA,SACA,CAAA;AAAA,MACF;AAAA,KACA,CAAA;AAAA,EACF,CAAA;AACA,EAAA,MAAM,gBAAA,GAAmB,CAAC,KAAA,KAAiB;AAC1C,IAAA,IAAI,SAAA,CAAU,YAAY,IAAA,EAAM;AAC/B,MAAA,oBAAA,CAAqB,UAAU,OAAO,CAAA;AACtC,MAAA,SAAA,CAAU,OAAA,GAAU,IAAA;AAAA,IACrB;AACA,IAAA,QAAA,CAAS,OAAA,GAAU,EAAE,EAAA,EAAI,CAAA,EAAG,IAAI,CAAA,EAAE;AAElC,IAAA,SAAA,CAAU;AAAA,MACT,KAAA;AAAA,MACA,eAAA,EAAiB,CAAC,EAAE,CAAA,EAAG,GAAE,KAAM;AAC9B,QAAA,MAAM,OAAO,UAAA,CAAW,OAAA;AACxB,QAAA,IAAI,aAAA,CAAc,OAAA,EAAS,aAAA,CAAc,OAAA,CAAQ,MAAA,EAAO;AACxD,QAAA,IAAI,6BAA6BE,6BAAA,CAAc,EAAE,CAAA,EAAG,CAAA,EAAG,CAAA,EAAG;AACzD,UAAA,IACC,0BAA0B,QAAA,IACzB,CAAC,0BAA0B,UAAA,IAC3B,CAAC,0BAA0B,WAAA,EAC3B;AACD,YAAA,MAAA,CAAO,IAAA,CAAK,MAAM,QAAQ,CAAA;AAAA,UAC3B,CAAA,MAAO;AACN,YAAA,MAAM,KAAA,GACL,MAAA,CAAO,UAAA,IACN,yBAAA,CAA0B,UAAA,IAAc,CAAA,CAAA;AAC1C,YAAA,MAAM,MAAA,GACL,MAAA,CAAO,WAAA,IACN,yBAAA,CAA0B,WAAA,IAAe,CAAA,CAAA;AAC3C,YAAA,MAAA,CAAO,IAAA;AAAA,cACN,IAAA;AAAA,cACA,QAAA;AAAA,cACA,CAAA,MAAA,EAAS,KAAK,CAAA,QAAA,EAAW,MAAM,CAAA,MAAA,EAAS,MAAA,CAAO,UAAA,GAAa,CAAA,GAAI,EAAA,GAAK,KAAK,CAAA,KAAA,EAAQ,MAAA,CAAO,YAAY,CAAC,CAAA;AAAA,aACvG;AAAA,UACD;AAAA,QACD;AACA,QAAAD,iBAAA,CAAU,IAAA,CAAK;AAAA,UACd,UAAA,EAAY,KAAA;AAAA,UACZ,MAAA,EAAQ,IAAA;AAAA,UACR,eAAA;AAAA,UACA,QAAA,EAAU,eAAA;AAAA,UACV,CAAA;AAAA,UACA,CAAA;AAAA,UACA,aAAA;AAAA,UACA,yBAAA;AAAA,UACA,eAAA;AAAA,UACA,SAAA;AAAA,UACA;AAAA,SACA,CAAA;AAAA,MACF;AAAA,KACA,CAAA;AAAA,EACF,CAAA;AACA,EAAAE,eAAA,CAAU,MAAM;AACf,IAAA,IAAI,IAAI,OAAA,EAAS;AAChB,MAAA,MAAM,KAAA,GAAQ,GAAA,CAAI,OAAA,CAAQ,SAAA,CAAU,IAAI,CAAA;AACxC,MAAA,MAAM,UAAA,GAAa,GAAA,CAAI,OAAA,CAAQ,qBAAA,EAAsB;AACrD,MAAA,KAAA,CAAM,KAAA,CAAM,KAAA,GAAQ,UAAA,CAAW,KAAA,GAAQ,IAAA;AACvC,MAAA,KAAA,CAAM,KAAA,CAAM,MAAA,GAAS,UAAA,CAAW,MAAA,GAAS,IAAA;AACzC,MAAA,KAAA,CAAM,MAAM,OAAA,GAAU,KAAA;AACtB,MAAA,KAAA,CAAM,MAAM,cAAA,GAAiB,WAAA;AAC7B,MAAA,WAAA,CAAY,UAAU,UAAA,CAAW,KAAA;AACjC,MAAA,YAAA,CAAa,UAAU,UAAA,CAAW,MAAA;AAClC,MAAA,IAAI,2BAA2B,OAAA,EAAS;AACvC,QAAA,UAAA,CAAW,UAAU,yBAAA,CAA2B,OAAA;AAChD,QAAA,MAAM,IAAA,GAAO,QAAA,CAAS,aAAA,CAAc,MAAM,CAAA;AAC1C,QAAA,IAAA,CAAK,cAAc,UAAA,CAAW,OAAA;AAC9B,QAAA,KAAA,CAAM,QAAQ,IAAI,CAAA;AAAA,MACnB;AAEA,MAAA,IAAI,eAAA,EAAiB;AACpB,QAAA,MAAM,KAAA,GAAQ,QAAA,CAAS,aAAA,CAAc,MAAM,CAAA;AAC3C,QAAA,KAAA,CAAM,WAAA,GAAc,eAAA;AACpB,QAAA,KAAA,CAAM,QAAQ,KAAK,CAAA;AAAA,MACpB;AACA,MAAA,KAAA,CAAM,MAAM,QAAA,GAAW,OAAA;AACvB,MAAA,aAAA,CAAc,OAAA,GAAU,KAAA;AACxB,MAAA,aAAA,CAAc,QAAQ,SAAA,CAAU,GAAA;AAAA,QAC/BC,wBAAO,kCAAkC;AAAA,OAC1C;AAAA,IACD;AAAA,EACD,CAAA,EAAG,EAAE,CAAA;AAEL,EAAAD,eAAA,CAAU,MAAM;AACf,IAAA,MAAM,UAAA,GAA0C;AAAA,MAC/C,WAAA;AAAA,MACA;AAAA,KACD;AACA,IAAA,MAAM,SAAA,GAAyC,CAAC,SAAA,EAAW,UAAU,CAAA;AAErE,IAAA,UAAA,CAAW,OAAA,CAAQ,CAAC,SAAA,KAAc;AACjC,MAAA,MAAA,CAAO,gBAAA,CAAiB,WAAW,iBAAA,EAAmB;AAAA,QACrD,OAAA,EAAS;AAAA,OACT,CAAA;AAAA,IACF,CAAC,CAAA;AACD,IAAA,SAAA,CAAU,OAAA,CAAQ,CAAC,SAAA,KAAc;AAChC,MAAA,MAAA,CAAO,gBAAA,CAAiB,WAAW,gBAAgB,CAAA;AAAA,IACpD,CAAC,CAAA;AACD,IAAA,OAAO,MAAM;AACZ,MAAA,UAAA,CAAW,OAAA,CAAQ,CAAC,SAAA,KAAc;AACjC,QAAA,MAAA,CAAO,mBAAA,CAAoB,WAAW,iBAAiB,CAAA;AAAA,MACxD,CAAC,CAAA;AACD,MAAA,SAAA,CAAU,OAAA,CAAQ,CAAC,SAAA,KAAc;AAChC,QAAA,MAAA,CAAO,mBAAA,CAAoB,WAAW,gBAAgB,CAAA;AAAA,MACvD,CAAC,CAAA;AAAA,IACF,CAAA;AAAA,EACD,CAAA,EAAG;AAAA,IACF,UAAA;AAAA,IACA,eAAA;AAAA,IACA,yBAAA;AAAA,IACA,SAAA;AAAA,IACA,qBAAA;AAAA,IACA,aAAA;AAAA,IACA,eAAA;AAAA,IACA;AAAA,GACA,CAAA;AACD,EAAAA,eAAA,CAAU,MAAM;AACf,IAAA,MAAM,KAAK,GAAA,CAAI,OAAA;AACf,IAAA,IAAI,CAAC,EAAA,EAAI;AAET,IAAA,MAAM,KAAA,GAAQ,CAAC,CAAA,KAAa,CAAA,CAAE,cAAA,EAAe;AAE7C,IAAA,EAAA,CAAG,gBAAA,CAAiB,eAAe,KAAK,CAAA;AAExC,IAAA,OAAO,MAAM;AACZ,MAAA,EAAA,CAAG,mBAAA,CAAoB,eAAe,KAAK,CAAA;AAAA,IAC5C,CAAA;AAAA,EACD,CAAA,EAAG,EAAE,CAAA;AACL,EAAA,uBACCE,cAAA,CAAAC,mBAAA,EAAA,EACC,QAAA,kBAAAD,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,WAAW,CAAA,EAAG,SAAA,IAAa,EAAE,CAAA,CAAA,EAAID,uBAAA,CAAO,4BAA4B,CAAC,CAAA,CAAA;AAAA,MACrE,GAAA;AAAA,MACA,aAAA,EAAe,CAAC,CAAA,KAAM,CAAA,CAAE,cAAA,EAAe;AAAA,MACvC,WAAA,EAAa,CAAC,EAAA,KAAO;AACpB,QAAA,IAAI,WAAA,EAAa;AAChB,UAAA,OAAA,CAAQ,SAAQ,CAAE,IAAA,CAAK,MAAM,WAAA,CAAY,EAAE,CAAC,CAAA;AAAA,QAC7C;AACA,QAAA,WAAA,CAAY;AAAA,UACX,KAAA,EAAO,EAAA;AAAA,UACP,iBAAA,EAAmB,CAAC,EAAE,CAAA,EAAG,GAAE,KAAM;AAChC,YAAA,IAAI,cAAc,OAAA,EAAS;AAC1B,cAAA,QAAA,CAAS,IAAA,CAAK,WAAA;AAAA,gBACb,aAAA,CAAc;AAAA,eACf;AACA,cAAA,IAAI,IAAI,OAAA,EAAS;AAChB,gBAAA,MAAM,UAAA,GACL,GAAA,CAAI,OAAA,CAAQ,qBAAA,EAAsB;AACnC,gBAAA,aAAA,CAAc,OAAA,CAAQ,KAAA,CAAM,KAAA,GAC3B,UAAA,CAAW,KAAA,GAAQ,IAAA;AACpB,gBAAA,aAAA,CAAc,OAAA,CAAQ,KAAA,CAAM,MAAA,GAC3B,UAAA,CAAW,MAAA,GAAS,IAAA;AAErB,gBAAA,WAAA,CAAY,UAAU,UAAA,CAAW,KAAA;AACjC,gBAAA,YAAA,CAAa,UAAU,UAAA,CAAW,MAAA;AAAA,cACnC;AAAA,YACD;AAEA,YAAA,IAAI,aAAA,CAAc,SAAS,WAAA,EAAa;AACvC,cAAA,SAAA,CAAU,QAAQ,GAAG,CAAA;AACrB,cAAA,aAAA,CAAc,OAAA,CAAQ,MAAM,IAAA,GAAO,CAAA,EAAG,KAAK,WAAA,CAAY,OAAA,IAAW,KAAK,CAAC,CAAA,EAAA,CAAA;AACxE,cAAA,aAAA,CAAc,OAAA,CAAQ,MAAM,GAAA,GAAM,CAAA,EAAG,KAAK,YAAA,CAAa,OAAA,IAAW,KAAK,CAAC,CAAA,EAAA,CAAA;AAAA,YAGzE;AACA,YAAAH,iBAAA,CAAU,IAAA,CAAK;AAAA,cACd,UAAA,EAAY,IAAA;AAAA,cACZ,MAAA,EAAQ,KAAA;AAAA,cACR,eAAA;AAAA,cACA,QAAA,EAAU,eAAA;AAAA,cACV,CAAA;AAAA,cACA,CAAA;AAAA,cACA,aAAA;AAAA,cACA,yBAAA;AAAA,cACA;AAAA,aACA,CAAA;AAAA,UACF;AAAA,SACA,CAAA;AAAA,MACF,CAAA;AAAA,MACA,YAAA,EAAc,CAAC,EAAA,KAAO;AACrB,QAAA,IAAI,YAAA,EAAc;AACjB,UAAA,OAAA,CAAQ,SAAQ,CAAE,IAAA,CAAK,MAAM,YAAA,CAAa,EAAE,CAAC,CAAA;AAAA,QAC9C;AACA,QAAA,WAAA,CAAY;AAAA,UACX,KAAA,EAAO,EAAA;AAAA,UACP,iBAAA,EAAmB,CAAC,EAAE,CAAA,EAAG,GAAE,KAAM;AAChC,YAAA,IAAI,cAAc,OAAA,EAAS;AAC1B,cAAA,QAAA,CAAS,IAAA,CAAK,WAAA;AAAA,gBACb,aAAA,CAAc;AAAA,eACf;AACA,cAAA,IAAI,IAAI,OAAA,EAAS;AAChB,gBAAA,MAAM,UAAA,GACL,GAAA,CAAI,OAAA,CAAQ,qBAAA,EAAsB;AACnC,gBAAA,aAAA,CAAc,OAAA,CAAQ,KAAA,CAAM,KAAA,GAC3B,UAAA,CAAW,KAAA,GAAQ,IAAA;AACpB,gBAAA,aAAA,CAAc,OAAA,CAAQ,KAAA,CAAM,MAAA,GAC3B,UAAA,CAAW,MAAA,GAAS,IAAA;AAErB,gBAAA,WAAA,CAAY,UAAU,UAAA,CAAW,KAAA;AACjC,gBAAA,YAAA,CAAa,UAAU,UAAA,CAAW,MAAA;AAAA,cACnC;AAAA,YACD;AACA,YAAA,IAAI,aAAA,CAAc,SAAS,WAAA,EAAa;AACvC,cAAA,SAAA,CAAU,QAAQ,GAAG,CAAA;AACrB,cAAA,aAAA,CAAc,OAAA,CAAQ,MAAM,IAAA,GAAO,CAAA,EAAG,KAAK,WAAA,CAAY,OAAA,IAAW,KAAK,CAAC,CAAA,EAAA,CAAA;AACxE,cAAA,aAAA,CAAc,OAAA,CAAQ,MAAM,GAAA,GAAM,CAAA,EAAG,KAAK,YAAA,CAAa,OAAA,IAAW,KAAK,CAAC,CAAA,EAAA,CAAA;AAAA,YAGzE;AACA,YAAAA,iBAAA,CAAU,IAAA,CAAK;AAAA,cACd,UAAA,EAAY,IAAA;AAAA,cACZ,MAAA,EAAQ,KAAA;AAAA,cACR,eAAA;AAAA,cACA,QAAA,EAAU,eAAA;AAAA,cACV,CAAA;AAAA,cACA,CAAA;AAAA,cACA,aAAA;AAAA,cACA,yBAAA;AAAA,cACA;AAAA,aACA,CAAA;AAAA,UACF;AAAA,SACA,CAAA;AAAA,MACF,CAAA;AAAA,MACA,KAAA,EAAO,EAAE,GAAG,KAAA,EAAM;AAAA,MACjB,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACF,EAED,CAAA;AAEF","file":"FlexLayoutSplitScreenDragBox.cjs","sourcesContent":["import {\r\n\tCSSProperties,\r\n\tHTMLAttributes,\r\n\tMouseEvent,\r\n\tReactElement,\r\n\tReactNode,\r\n\tRefObject,\r\n\tTouchEvent,\r\n\tuseEffect,\r\n\tuseRef,\r\n} from \"react\";\r\nimport { dragState, useDragEvents } from \"../hooks/useDrag\";\r\n\r\nimport styles from \"../styles/FlexLayout.module.css\";\r\nimport { isDocumentOut } from \"../utils/FlexLayoutUtils\";\r\nconst MAX_STEP = 18;\r\n\r\nfunction shouldAllowViewportScroll(x: number, y: number) {\r\n\tconst w = window.innerWidth;\r\n\tconst h = window.innerHeight;\r\n\tconst marginX = w * 0.15;\r\n\tconst marginY = h * 0.15;\r\n\treturn (\r\n\t\tx < marginX || // 왼쪽 15 %\r\n\t\tx > w - marginX || // 오른쪽 15 %\r\n\t\ty < marginY || // 상단 15 %\r\n\t\ty > h - marginY // 하단 15 %\r\n\t);\r\n}\r\n\r\nfunction edgeVelocity(x: number, y: number) {\r\n\tconst w = window.innerWidth,\r\n\t\th = window.innerHeight;\r\n\tconst mx = w * 0.15,\r\n\t\tmy = h * 0.15;\r\n\r\n\t/* X 축 */\r\n\tlet vx = 0;\r\n\tif (x < mx)\r\n\t\t// ← 왼쪽\r\n\t\tvx = -((mx - x) / mx) * MAX_STEP;\r\n\telse if (x > w - mx)\r\n\t\t// → 오른쪽\r\n\t\tvx = ((x - (w - mx)) / mx) * MAX_STEP;\r\n\r\n\t/* Y 축 */\r\n\tlet vy = 0;\r\n\tif (y < my)\r\n\t\t// ↑ 상단\r\n\t\tvy = -((my - y) / my) * MAX_STEP;\r\n\telse if (y > h - my)\r\n\t\t// ↓ 하단\r\n\t\tvy = ((y - (h - my)) / my) * MAX_STEP;\r\n\r\n\treturn { vx, vy };\r\n}\r\nfunction calcVelocity(dx: number, dy: number, x: number, y: number) {\r\n\tconst w = window.innerWidth,\r\n\t\th = window.innerHeight;\r\n\tconst marginX = w * 0.15,\r\n\t\tmarginY = h * 0.15;\r\n\r\n\t/* 거리가 0(가장자리)~margin 사이면 1~4 배 가중치 */\r\n\tconst multX =\r\n\t\tx < marginX\r\n\t\t\t? 1 + ((marginX - x) / marginX) * 3\r\n\t\t\t: x > w - marginX\r\n\t\t\t\t? 1 + ((x - (w - marginX)) / marginX) * 3\r\n\t\t\t\t: 1;\r\n\r\n\tconst multY =\r\n\t\ty < marginY\r\n\t\t\t? 1 + ((marginY - y) / marginY) * 3\r\n\t\t\t: y > h - marginY\r\n\t\t\t\t? 1 + ((y - (h - marginY)) / marginY) * 3\r\n\t\t\t\t: 1;\r\n\r\n\t/* ←→·↑↓ **반대 방향**으로 스크롤 */\r\n\treturn { vx: -dx * multX, vy: -dy * multY };\r\n}\r\n\r\nexport interface FlexLayoutSplitScreenDragBoxProps<\r\n\tE extends HTMLElement = HTMLElement,\r\n> extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\r\n\tonMouseDown?: (event: MouseEvent<HTMLDivElement>) => void;\r\n\tonTouchStart?: (event: TouchEvent<HTMLDivElement>) => void;\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\tstyle?: CSSProperties;\r\n\tnavigationTitle?: string;\r\n\ttargetComponent?: ReactElement;\r\n\tdropDocumentOutsideOption?: DropDocumentOutsideOption;\r\n\tchildren: ReactNode;\r\n\tcontainerName: string;\r\n\tscreenKey?: string;\r\n\tisBlockingActiveInput?: boolean;\r\n\tcustomData?: Record<string, string | number | boolean | undefined>;\r\n\tscrollTargetRef?: RefObject<E>;\r\n}\r\n\r\nexport interface DropDocumentOutsideOption {\r\n\topenUrl: string;\r\n\twidthRatio?: number;\r\n\theightRatio?: number;\r\n\tisNewTap?: boolean;\r\n}\r\n\r\nexport default function FlexLayoutSplitScreenDragBox<E extends HTMLElement>({\r\n\tonMouseDown,\r\n\tonTouchStart,\r\n\tdropEndCallback,\r\n\tstyle,\r\n\tnavigationTitle,\r\n\ttargetComponent,\r\n\tcontainerName,\r\n\tchildren,\r\n\tclassName,\r\n\tdropDocumentOutsideOption,\r\n\tscreenKey = Array.from(\r\n\t\twindow.crypto.getRandomValues(new Uint32Array(16)),\r\n\t\t(e) => e.toString(32).padStart(2, \"0\"),\r\n\t).join(\"\"),\r\n\tisBlockingActiveInput = false,\r\n\tcustomData = {},\r\n\tscrollTargetRef,\r\n\t...props\r\n}: FlexLayoutSplitScreenDragBoxProps) {\r\n\t//const lastTouch = useRef<{ x: number; y: number } | null>(null);\r\n\tconst scrollRAF = useRef<number | null>(null); // 애니메이션 루프 id\r\n\tconst velocity = useRef<{ vx: number; vy: number }>({ vx: 0, vy: 0 });\r\n\tconst ref = useRef<HTMLDivElement>(null);\r\n\tconst clonedNodeRef = useRef<HTMLDivElement | null>(null);\r\n\tconst clonedWidth = useRef<number | null>(null);\r\n\tconst clonedHeight = useRef<number | null>(null);\r\n\tconst hrefUrlRef = useRef<string>(\"\");\r\n\r\n\tconst { handleStart, handleMove, handleEnd } = useDragEvents({\r\n\t\tisBlockingActiveInput,\r\n\t});\r\n\tconst handleMoveWrapper = (event: Event) => {\r\n\t\tlet allowScrollEdge = false;\r\n\t\tlet x = 0;\r\n\t\tlet y = 0;\r\n\r\n\t\tif (event.type === \"touchmove\") {\r\n\t\t\tconst t = (event as globalThis.TouchEvent).touches[0];\r\n\t\t\tx = t.clientX;\r\n\t\t\ty = t.clientY;\r\n\t\t} else {\r\n\t\t\tconst m = event as globalThis.MouseEvent;\r\n\t\t\tx = m.clientX;\r\n\t\t\ty = m.clientY;\r\n\t\t}\r\n\t\tconst { vx, vy } = edgeVelocity(x, y);\r\n\t\tconst inEdge = vx !== 0 || vy !== 0;\r\n\r\n\t\tallowScrollEdge = shouldAllowViewportScroll(x, y);\r\n\t\t/* 중앙 영역이면 스크롤 막음, 가장자리면 허용 */\r\n\t\tif (clonedNodeRef.current?.isConnected && !inEdge) {\r\n\t\t\tevent.preventDefault(); // 화면 고정\r\n\t\t\tif (scrollRAF.current) {\r\n\t\t\t\tcancelAnimationFrame(scrollRAF.current);\r\n\t\t\t\tscrollRAF.current = null;\r\n\t\t\t}\r\n\t\t\t// velocity.current = { vx: 0, vy: 0 };\r\n\t\t}\r\n\r\n\t\tif (\r\n\t\t\tclonedNodeRef.current?.isConnected &&\r\n\t\t\tinEdge\r\n\t\t\t//&&lastTouch.current\r\n\t\t) {\r\n\t\t\tevent.preventDefault();\r\n\t\t\t// const dx = x - lastTouch.current.x; // 손가락 이동량\r\n\t\t\t// const dy = y - lastTouch.current.y;\r\n\r\n\t\t\tvelocity.current = { vx, vy }; // ← X·Y 둘 다 들어갈 수 있음\r\n\r\n\t\t\t// const { vx, vy } = calcVelocity(dx, dy, x, y);\r\n\r\n\t\t\tif (!scrollRAF.current) {\r\n\t\t\t\tconst step = () => {\r\n\t\t\t\t\tconst target =\r\n\t\t\t\t\t\tscrollTargetRef?.current ??\r\n\t\t\t\t\t\t(document.scrollingElement as HTMLElement | null);\r\n\r\n\t\t\t\t\tif (target?.scrollBy) {\r\n\t\t\t\t\t\ttarget.scrollBy(\r\n\t\t\t\t\t\t\tvelocity.current.vx,\r\n\t\t\t\t\t\t\tvelocity.current.vy,\r\n\t\t\t\t\t\t);\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\twindow.scrollBy(\r\n\t\t\t\t\t\t\tvelocity.current.vx,\r\n\t\t\t\t\t\t\tvelocity.current.vy,\r\n\t\t\t\t\t\t);\r\n\t\t\t\t\t}\r\n\t\t\t\t\tif (\r\n\t\t\t\t\t\tvelocity.current.vx === 0 &&\r\n\t\t\t\t\t\tvelocity.current.vy === 0\r\n\t\t\t\t\t) {\r\n\t\t\t\t\t\tscrollRAF.current = null;\r\n\t\t\t\t\t\treturn;\r\n\t\t\t\t\t}\r\n\t\t\t\t\tscrollRAF.current = requestAnimationFrame(step);\r\n\t\t\t\t};\r\n\t\t\t\tscrollRAF.current = requestAnimationFrame(step);\r\n\t\t\t}\r\n\r\n\t\t\t//lastTouch.current = { x, y };\r\n\t\t}\r\n\t\tif (event.type !== \"touchmove\") {\r\n\t\t\t/* 마우스 · 펜 → 항상 고정 */\r\n\t\t\tevent.preventDefault();\r\n\t\t}\r\n\t\thandleMove({\r\n\t\t\tevent,\r\n\t\t\tnotDragCallback: ({ x, y }) => {\r\n\t\t\t\tif (clonedNodeRef.current) clonedNodeRef.current.remove();\r\n\t\t\t},\r\n\t\t\tdragStartCallback: ({ x, y }) => {\r\n\t\t\t\tif (!clonedNodeRef.current) return;\r\n\t\t\t\tnavigator.vibrate(100);\r\n\t\t\t\tclonedNodeRef.current.style.left = `${x - (clonedWidth.current || 0) / 2}px`;\r\n\t\t\t\tclonedNodeRef.current.style.top = `${y - (clonedHeight.current || 0) / 2}px`;\r\n\t\t\t},\r\n\t\t\tmoveingCallback: ({ x, y }) => {\r\n\t\t\t\tif (clonedNodeRef.current?.isConnected) {\r\n\t\t\t\t\tclonedNodeRef.current.style.left = `${x - (clonedWidth.current || 0) / 2}px`;\r\n\t\t\t\t\tclonedNodeRef.current.style.top = `${y - (clonedHeight.current || 0) / 2}px`;\r\n\t\t\t\t}\r\n\r\n\t\t\t\tdragState.next({\r\n\t\t\t\t\tisDragging: true,\r\n\t\t\t\t\tisDrop: false,\r\n\t\t\t\t\tnavigationTitle,\r\n\t\t\t\t\tchildren: targetComponent,\r\n\t\t\t\t\tx,\r\n\t\t\t\t\ty,\r\n\t\t\t\t\tcontainerName,\r\n\t\t\t\t\tdropDocumentOutsideOption,\r\n\t\t\t\t\tcustomData,\r\n\t\t\t\t});\r\n\t\t\t},\r\n\t\t});\r\n\t};\r\n\tconst handleEndWrapper = (event: Event) => {\r\n\t\tif (scrollRAF.current !== null) {\r\n\t\t\tcancelAnimationFrame(scrollRAF.current);\r\n\t\t\tscrollRAF.current = null;\r\n\t\t}\r\n\t\tvelocity.current = { vx: 0, vy: 0 };\r\n\t\t//lastTouch.current = null;\r\n\t\thandleEnd({\r\n\t\t\tevent,\r\n\t\t\tdragEndCallback: ({ x, y }) => {\r\n\t\t\t\tconst href = hrefUrlRef.current;\r\n\t\t\t\tif (clonedNodeRef.current) clonedNodeRef.current.remove();\r\n\t\t\t\tif (dropDocumentOutsideOption && isDocumentOut({ x, y })) {\r\n\t\t\t\t\tif (\r\n\t\t\t\t\t\tdropDocumentOutsideOption.isNewTap ||\r\n\t\t\t\t\t\t(!dropDocumentOutsideOption.widthRatio &&\r\n\t\t\t\t\t\t\t!dropDocumentOutsideOption.heightRatio)\r\n\t\t\t\t\t) {\r\n\t\t\t\t\t\twindow.open(href, \"_blank\");\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tconst width =\r\n\t\t\t\t\t\t\twindow.innerWidth *\r\n\t\t\t\t\t\t\t(dropDocumentOutsideOption.widthRatio || 1);\r\n\t\t\t\t\t\tconst height =\r\n\t\t\t\t\t\t\twindow.innerHeight *\r\n\t\t\t\t\t\t\t(dropDocumentOutsideOption.heightRatio || 1);\r\n\t\t\t\t\t\twindow.open(\r\n\t\t\t\t\t\t\thref,\r\n\t\t\t\t\t\t\t\"_blank\",\r\n\t\t\t\t\t\t\t`width=${width},height=${height},left=${window.screenLeft - x * -1 - width},top=${window.screenTop + y}`,\r\n\t\t\t\t\t\t);\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t\tdragState.next({\r\n\t\t\t\t\tisDragging: false,\r\n\t\t\t\t\tisDrop: true,\r\n\t\t\t\t\tnavigationTitle,\r\n\t\t\t\t\tchildren: targetComponent,\r\n\t\t\t\t\tx,\r\n\t\t\t\t\ty,\r\n\t\t\t\t\tcontainerName,\r\n\t\t\t\t\tdropDocumentOutsideOption,\r\n\t\t\t\t\tdropEndCallback,\r\n\t\t\t\t\tscreenKey,\r\n\t\t\t\t\tcustomData,\r\n\t\t\t\t});\r\n\t\t\t},\r\n\t\t});\r\n\t};\r\n\tuseEffect(() => {\r\n\t\tif (ref.current) {\r\n\t\t\tconst clone = ref.current.cloneNode(true) as HTMLDivElement; //document.createElement('div');\r\n\t\t\tconst originRect = ref.current.getBoundingClientRect();\r\n\t\t\tclone.style.width = originRect.width + \"px\";\r\n\t\t\tclone.style.height = originRect.height + \"px\";\r\n\t\t\tclone.style.opacity = \"0.3\";\r\n\t\t\tclone.style.backdropFilter = \"blur(6px)\";\r\n\t\t\tclonedWidth.current = originRect.width;\r\n\t\t\tclonedHeight.current = originRect.height;\r\n\t\t\tif (dropDocumentOutsideOption?.openUrl) {\r\n\t\t\t\threfUrlRef.current = dropDocumentOutsideOption!.openUrl;\r\n\t\t\t\tconst href = document.createElement(\"span\");\r\n\t\t\t\thref.textContent = hrefUrlRef.current;\r\n\t\t\t\tclone.prepend(href);\r\n\t\t\t}\r\n\r\n\t\t\tif (navigationTitle) {\r\n\t\t\t\tconst title = document.createElement(\"span\");\r\n\t\t\t\ttitle.textContent = navigationTitle;\r\n\t\t\t\tclone.prepend(title);\r\n\t\t\t}\r\n\t\t\tclone.style.position = \"fixed\";\r\n\t\t\tclonedNodeRef.current = clone;\r\n\t\t\tclonedNodeRef.current.classList.add(\r\n\t\t\t\tstyles[\"flex-split-screen-drag-box-clone\"],\r\n\t\t\t);\r\n\t\t}\r\n\t}, []);\r\n\r\n\tuseEffect(() => {\r\n\t\tconst moveEvents: Array<keyof WindowEventMap> = [\r\n\t\t\t\"mousemove\",\r\n\t\t\t\"touchmove\",\r\n\t\t];\r\n\t\tconst endEvents: Array<keyof WindowEventMap> = [\"mouseup\", \"touchend\"];\r\n\r\n\t\tmoveEvents.forEach((eventName) => {\r\n\t\t\twindow.addEventListener(eventName, handleMoveWrapper, {\r\n\t\t\t\tpassive: false,\r\n\t\t\t});\r\n\t\t});\r\n\t\tendEvents.forEach((eventName) => {\r\n\t\t\twindow.addEventListener(eventName, handleEndWrapper);\r\n\t\t});\r\n\t\treturn () => {\r\n\t\t\tmoveEvents.forEach((eventName) => {\r\n\t\t\t\twindow.removeEventListener(eventName, handleMoveWrapper);\r\n\t\t\t});\r\n\t\t\tendEvents.forEach((eventName) => {\r\n\t\t\t\twindow.removeEventListener(eventName, handleEndWrapper);\r\n\t\t\t});\r\n\t\t};\r\n\t}, [\r\n\t\tcustomData,\r\n\t\ttargetComponent,\r\n\t\tdropDocumentOutsideOption,\r\n\t\tscreenKey,\r\n\t\tisBlockingActiveInput,\r\n\t\tcontainerName,\r\n\t\tnavigationTitle,\r\n\t\tdropEndCallback,\r\n\t]);\r\n\tuseEffect(() => {\r\n\t\tconst el = ref.current;\r\n\t\tif (!el) return;\r\n\r\n\t\tconst onCtx = (e: Event) => e.preventDefault();\r\n\r\n\t\tel.addEventListener(\"contextmenu\", onCtx);\r\n\r\n\t\treturn () => {\r\n\t\t\tel.removeEventListener(\"contextmenu\", onCtx);\r\n\t\t};\r\n\t}, []);\r\n\treturn (\r\n\t\t<>\r\n\t\t\t<div\r\n\t\t\t\tclassName={`${className || \"\"} ${styles[\"flex-split-screen-drag-box\"]}`}\r\n\t\t\t\tref={ref}\r\n\t\t\t\tonContextMenu={(e) => e.preventDefault()}\r\n\t\t\t\tonMouseDown={(ev) => {\r\n\t\t\t\t\tif (onMouseDown) {\r\n\t\t\t\t\t\tPromise.resolve().then(() => onMouseDown(ev));\r\n\t\t\t\t\t}\r\n\t\t\t\t\thandleStart({\r\n\t\t\t\t\t\tevent: ev,\r\n\t\t\t\t\t\tdragStartCallback: ({ x, y }) => {\r\n\t\t\t\t\t\t\tif (clonedNodeRef.current) {\r\n\t\t\t\t\t\t\t\tdocument.body.appendChild(\r\n\t\t\t\t\t\t\t\t\tclonedNodeRef.current,\r\n\t\t\t\t\t\t\t\t);\r\n\t\t\t\t\t\t\t\tif (ref.current) {\r\n\t\t\t\t\t\t\t\t\tconst originRect =\r\n\t\t\t\t\t\t\t\t\t\tref.current.getBoundingClientRect();\r\n\t\t\t\t\t\t\t\t\tclonedNodeRef.current.style.width =\r\n\t\t\t\t\t\t\t\t\t\toriginRect.width + \"px\";\r\n\t\t\t\t\t\t\t\t\tclonedNodeRef.current.style.height =\r\n\t\t\t\t\t\t\t\t\t\toriginRect.height + \"px\";\r\n\r\n\t\t\t\t\t\t\t\t\tclonedWidth.current = originRect.width;\r\n\t\t\t\t\t\t\t\t\tclonedHeight.current = originRect.height;\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\tif (clonedNodeRef.current?.isConnected) {\r\n\t\t\t\t\t\t\t\tnavigator.vibrate(100);\r\n\t\t\t\t\t\t\t\tclonedNodeRef.current.style.left = `${x - (clonedWidth.current || 0) / 2}px`;\r\n\t\t\t\t\t\t\t\tclonedNodeRef.current.style.top = `${y - (clonedHeight.current || 0) / 2}px`;\r\n\t\t\t\t\t\t\t\t//clonedNodeRef.current.style.left = `${clientX}px`;\r\n\t\t\t\t\t\t\t\t//clonedNodeRef.current.style.top = `${clientY}px`;\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\tdragState.next({\r\n\t\t\t\t\t\t\t\tisDragging: true,\r\n\t\t\t\t\t\t\t\tisDrop: false,\r\n\t\t\t\t\t\t\t\tnavigationTitle,\r\n\t\t\t\t\t\t\t\tchildren: targetComponent,\r\n\t\t\t\t\t\t\t\tx,\r\n\t\t\t\t\t\t\t\ty,\r\n\t\t\t\t\t\t\t\tcontainerName,\r\n\t\t\t\t\t\t\t\tdropDocumentOutsideOption,\r\n\t\t\t\t\t\t\t\tcustomData,\r\n\t\t\t\t\t\t\t});\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t});\r\n\t\t\t\t}}\r\n\t\t\t\tonTouchStart={(ev) => {\r\n\t\t\t\t\tif (onTouchStart) {\r\n\t\t\t\t\t\tPromise.resolve().then(() => onTouchStart(ev));\r\n\t\t\t\t\t}\r\n\t\t\t\t\thandleStart({\r\n\t\t\t\t\t\tevent: ev,\r\n\t\t\t\t\t\tdragStartCallback: ({ x, y }) => {\r\n\t\t\t\t\t\t\tif (clonedNodeRef.current) {\r\n\t\t\t\t\t\t\t\tdocument.body.appendChild(\r\n\t\t\t\t\t\t\t\t\tclonedNodeRef.current,\r\n\t\t\t\t\t\t\t\t);\r\n\t\t\t\t\t\t\t\tif (ref.current) {\r\n\t\t\t\t\t\t\t\t\tconst originRect =\r\n\t\t\t\t\t\t\t\t\t\tref.current.getBoundingClientRect();\r\n\t\t\t\t\t\t\t\t\tclonedNodeRef.current.style.width =\r\n\t\t\t\t\t\t\t\t\t\toriginRect.width + \"px\";\r\n\t\t\t\t\t\t\t\t\tclonedNodeRef.current.style.height =\r\n\t\t\t\t\t\t\t\t\t\toriginRect.height + \"px\";\r\n\r\n\t\t\t\t\t\t\t\t\tclonedWidth.current = originRect.width;\r\n\t\t\t\t\t\t\t\t\tclonedHeight.current = originRect.height;\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\tif (clonedNodeRef.current?.isConnected) {\r\n\t\t\t\t\t\t\t\tnavigator.vibrate(100);\r\n\t\t\t\t\t\t\t\tclonedNodeRef.current.style.left = `${x - (clonedWidth.current || 0) / 2}px`;\r\n\t\t\t\t\t\t\t\tclonedNodeRef.current.style.top = `${y - (clonedHeight.current || 0) / 2}px`;\r\n\t\t\t\t\t\t\t\t//clonedNodeRef.current.style.left = `${clientX}px`;\r\n\t\t\t\t\t\t\t\t//clonedNodeRef.current.style.top = `${clientY}px`;\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\tdragState.next({\r\n\t\t\t\t\t\t\t\tisDragging: true,\r\n\t\t\t\t\t\t\t\tisDrop: false,\r\n\t\t\t\t\t\t\t\tnavigationTitle,\r\n\t\t\t\t\t\t\t\tchildren: targetComponent,\r\n\t\t\t\t\t\t\t\tx,\r\n\t\t\t\t\t\t\t\ty,\r\n\t\t\t\t\t\t\t\tcontainerName,\r\n\t\t\t\t\t\t\t\tdropDocumentOutsideOption,\r\n\t\t\t\t\t\t\t\tcustomData,\r\n\t\t\t\t\t\t\t});\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t});\r\n\t\t\t\t}}\r\n\t\t\t\tstyle={{ ...style }}\r\n\t\t\t\t{...props}\r\n\t\t\t>\r\n\t\t\t\t{children}\r\n\t\t\t</div>\r\n\t\t\t{}\r\n\t\t</>\r\n\t);\r\n}\r\n"]}
+{"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutSplitScreenDragBox.tsx"],"sourcesContent":["\"use client\";\r\nimport {\r\n\tCSSProperties,\r\n\tHTMLAttributes,\r\n\tMouseEvent,\r\n\tReactElement,\r\n\tReactNode,\r\n\tRefObject,\r\n\tTouchEvent,\r\n\tuseEffect,\r\n\tuseRef,\r\n\tuseState,\r\n} from \"react\";\r\nimport {\r\n\tdragStateSubject,\r\n\tDragStateType,\r\n\tuseDragEvents,\r\n} from \"../hooks/useDrag\";\r\n\r\nimport styles from \"../styles/FlexLayout.module.css\";\r\nimport { isDocumentOut } from \"../utils/FlexLayoutUtils\";\r\nimport { FlexLayoutIFramePane } from \"./FlexLayoutIFramePane\";\r\n\r\nconst MAX_STEP = 18;\r\n\r\nfunction shouldAllowViewportScroll(x: number, y: number) {\r\n\tconst w = window.innerWidth;\r\n\tconst h = window.innerHeight;\r\n\tconst marginX = w * 0.15;\r\n\tconst marginY = h * 0.15;\r\n\treturn (\r\n\t\tx < marginX || // 왼쪽 15 %\r\n\t\tx > w - marginX || // 오른쪽 15 %\r\n\t\ty < marginY || // 상단 15 %\r\n\t\ty > h - marginY // 하단 15 %\r\n\t);\r\n}\r\n\r\nfunction edgeVelocity(x: number, y: number) {\r\n\tconst w = window.innerWidth,\r\n\t\th = window.innerHeight;\r\n\tconst mx = w * 0.15,\r\n\t\tmy = h * 0.15;\r\n\r\n\t/* X 축 */\r\n\tlet vx = 0;\r\n\tif (x < mx)\r\n\t\t// ← 왼쪽\r\n\t\tvx = -((mx - x) / mx) * MAX_STEP;\r\n\telse if (x > w - mx)\r\n\t\t// → 오른쪽\r\n\t\tvx = ((x - (w - mx)) / mx) * MAX_STEP;\r\n\r\n\t/* Y 축 */\r\n\tlet vy = 0;\r\n\tif (y < my)\r\n\t\t// ↑ 상단\r\n\t\tvy = -((my - y) / my) * MAX_STEP;\r\n\telse if (y > h - my)\r\n\t\t// ↓ 하단\r\n\t\tvy = ((y - (h - my)) / my) * MAX_STEP;\r\n\r\n\treturn { vx, vy };\r\n}\r\n\r\nfunction calcVelocity(dx: number, dy: number, x: number, y: number) {\r\n\tconst w = window.innerWidth,\r\n\t\th = window.innerHeight;\r\n\tconst marginX = w * 0.15,\r\n\t\tmarginY = h * 0.15;\r\n\r\n\t/* 거리가 0(가장자리)~margin 사이면 1~4 배 가중치 */\r\n\tconst multX =\r\n\t\tx < marginX\r\n\t\t\t? 1 + ((marginX - x) / marginX) * 3\r\n\t\t\t: x > w - marginX\r\n\t\t\t\t? 1 + ((x - (w - marginX)) / marginX) * 3\r\n\t\t\t\t: 1;\r\n\r\n\tconst multY =\r\n\t\ty < marginY\r\n\t\t\t? 1 + ((marginY - y) / marginY) * 3\r\n\t\t\t: y > h - marginY\r\n\t\t\t\t? 1 + ((y - (h - marginY)) / marginY) * 3\r\n\t\t\t\t: 1;\r\n\r\n\t/* ←→·↑↓ **반대 방향**으로 스크롤 */\r\n\treturn { vx: -dx * multX, vy: -dy * multY };\r\n}\r\n\r\nfunction createScreenKey() {\r\n\tconst c = globalThis.crypto as Crypto | undefined;\r\n\r\n\tif (c?.randomUUID) return c.randomUUID();\r\n\r\n\tif (c?.getRandomValues) {\r\n\t\treturn Array.from(c.getRandomValues(new Uint32Array(16)), (e) =>\r\n\t\t\te.toString(32).padStart(2, \"0\"),\r\n\t\t).join(\"\");\r\n\t}\r\n\r\n\t//  폴백\r\n\treturn `${Date.now().toString(32)}-${Math.random().toString(32).slice(2)}`;\r\n}\r\n\r\nfunction getFallbackElement(targetComponent?: ReactElement, url?: string) {\r\n\tif (targetComponent) return targetComponent;\r\n\tif (url) return <FlexLayoutIFramePane url={url} />;\r\n\treturn undefined;\r\n}\r\n\r\nfunction titleFromUrl(url?: string) {\r\n\tif (!url) return undefined;\r\n\ttry {\r\n\t\tconst u = new URL(url);\r\n\t\treturn u.hostname;\r\n\t} catch {\r\n\t\treturn url;\r\n\t}\r\n}\r\n\r\nexport interface FlexLayoutSplitScreenDragBoxProps<\r\n\tE extends HTMLElement = HTMLElement,\r\n> extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\r\n\tonMouseDown?: (event: MouseEvent<HTMLDivElement>) => void;\r\n\tonTouchStart?: (event: TouchEvent<HTMLDivElement>) => void;\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\tstyle?: CSSProperties;\r\n\tnavigationTitle?: string;\r\n\ttargetComponent?: ReactElement;\r\n\tdropDocumentOutsideOption?: DropDocumentOutsideOption;\r\n\tchildren: ReactNode;\r\n\tcontainerName: string;\r\n\tscreenKey?: string;\r\n\tisBlockingActiveInput?: boolean;\r\n\tcustomData?: Record<string, string | number | boolean | undefined>;\r\n\tscrollTargetRef?: RefObject<E>;\r\n}\r\n\r\nexport interface DropDocumentOutsideOption {\r\n\topenUrl: string;\r\n\twidthRatio?: number;\r\n\theightRatio?: number;\r\n\tisNewTap?: boolean;\r\n}\r\n\r\nexport default function FlexLayoutSplitScreenDragBox<E extends HTMLElement>({\r\n\tonMouseDown,\r\n\tonTouchStart,\r\n\tdropEndCallback,\r\n\tstyle,\r\n\tnavigationTitle,\r\n\ttargetComponent,\r\n\tcontainerName,\r\n\tchildren,\r\n\tclassName,\r\n\tdropDocumentOutsideOption,\r\n\tscreenKey: _screenKey,\r\n\tisBlockingActiveInput = false,\r\n\tcustomData = {},\r\n\tscrollTargetRef,\r\n\t...props\r\n}: FlexLayoutSplitScreenDragBoxProps) {\r\n\tconst [screenKey, setScreenKey] = useState<string>();\r\n\tuseEffect(() => {\r\n\t\tif (!_screenKey) setScreenKey(createScreenKey());\r\n\t\telse setScreenKey(_screenKey);\r\n\t}, [_screenKey]);\r\n\tconst scrollRAF = useRef<number | null>(null); // 애니메이션 루프 id\r\n\tconst velocity = useRef<{ vx: number; vy: number }>({ vx: 0, vy: 0 });\r\n\tconst ref = useRef<HTMLDivElement>(null);\r\n\tconst clonedNodeRef = useRef<HTMLDivElement | null>(null);\r\n\tconst clonedWidth = useRef<number | null>(null);\r\n\tconst clonedHeight = useRef<number | null>(null);\r\n\tconst hrefUrlRef = useRef<string>(\"\");\r\n\r\n\tconst rafId = useRef<number | null>(null);\r\n\tconst pending = useRef<DragStateType | null>(null);\r\n\r\n\tconst lastPointRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });\r\n\tconst escCanceledRef = useRef(false);\r\n\r\n\tconst emitDragState = (v: DragStateType) => {\r\n\t\tpending.current = v;\r\n\t\tif (rafId.current != null) return;\r\n\r\n\t\trafId.current = requestAnimationFrame(() => {\r\n\t\t\tif (pending.current) dragStateSubject.next(pending.current);\r\n\t\t\tpending.current = null;\r\n\t\t\trafId.current = null;\r\n\t\t});\r\n\t};\r\n\r\n\tuseEffect(() => {\r\n\t\treturn () => {\r\n\t\t\tif (rafId.current != null) cancelAnimationFrame(rafId.current);\r\n\t\t};\r\n\t}, []);\r\n\r\n\tconst { handleStart, handleMove, handleEnd } = useDragEvents({\r\n\t\tisBlockingActiveInput,\r\n\t});\r\n\r\n\tconst handleMoveWrapper = (event: Event) => {\r\n\t\tlet allowScrollEdge = false;\r\n\t\tlet x = 0;\r\n\t\tlet y = 0;\r\n\r\n\t\tif (event.type === \"touchmove\") {\r\n\t\t\tconst t = (event as globalThis.TouchEvent).touches[0];\r\n\t\t\tx = t.clientX;\r\n\t\t\ty = t.clientY;\r\n\t\t} else {\r\n\t\t\tconst m = event as globalThis.MouseEvent;\r\n\t\t\tx = m.clientX;\r\n\t\t\ty = m.clientY;\r\n\t\t}\r\n\t\tconst { vx, vy } = edgeVelocity(x, y);\r\n\t\tconst inEdge = vx !== 0 || vy !== 0;\r\n\r\n\t\tallowScrollEdge = shouldAllowViewportScroll(x, y);\r\n\t\t/* 중앙 영역이면 스크롤 막음, 가장자리면 허용 */\r\n\t\tif (clonedNodeRef.current?.isConnected && !inEdge) {\r\n\t\t\tevent.preventDefault(); // 화면 고정\r\n\t\t\tif (scrollRAF.current) {\r\n\t\t\t\tcancelAnimationFrame(scrollRAF.current);\r\n\t\t\t\tscrollRAF.current = null;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tif (clonedNodeRef.current?.isConnected && inEdge) {\r\n\t\t\tevent.preventDefault();\r\n\t\t\tvelocity.current = { vx, vy }; // ← X·Y 둘 다 들어갈 수 있음\r\n\r\n\t\t\tif (!scrollRAF.current) {\r\n\t\t\t\tconst step = () => {\r\n\t\t\t\t\tconst target =\r\n\t\t\t\t\t\tscrollTargetRef?.current ??\r\n\t\t\t\t\t\t(document.scrollingElement as HTMLElement | null);\r\n\r\n\t\t\t\t\tif (target?.scrollBy) {\r\n\t\t\t\t\t\ttarget.scrollBy(\r\n\t\t\t\t\t\t\tvelocity.current.vx,\r\n\t\t\t\t\t\t\tvelocity.current.vy,\r\n\t\t\t\t\t\t);\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\twindow.scrollBy(\r\n\t\t\t\t\t\t\tvelocity.current.vx,\r\n\t\t\t\t\t\t\tvelocity.current.vy,\r\n\t\t\t\t\t\t);\r\n\t\t\t\t\t}\r\n\t\t\t\t\tif (\r\n\t\t\t\t\t\tvelocity.current.vx === 0 &&\r\n\t\t\t\t\t\tvelocity.current.vy === 0\r\n\t\t\t\t\t) {\r\n\t\t\t\t\t\tscrollRAF.current = null;\r\n\t\t\t\t\t\treturn;\r\n\t\t\t\t\t}\r\n\t\t\t\t\tscrollRAF.current = requestAnimationFrame(step);\r\n\t\t\t\t};\r\n\t\t\t\tscrollRAF.current = requestAnimationFrame(step);\r\n\t\t\t}\r\n\t\t}\r\n\t\tif (event.type !== \"touchmove\") {\r\n\t\t\t/* 마우스 · 펜 → 항상 고정 */\r\n\t\t\tevent.preventDefault();\r\n\t\t}\r\n\t\thandleMove({\r\n\t\t\tevent,\r\n\t\t\tnotDragCallback: ({ x, y }) => {\r\n\t\t\t\tif (clonedNodeRef.current) clonedNodeRef.current.remove();\r\n\t\t\t},\r\n\t\t\tdragStartCallback: ({ x, y }) => {\r\n\t\t\t\tif (!clonedNodeRef.current) return;\r\n\r\n\t\t\t\tnavigator.vibrate(100);\r\n\t\t\t\tclonedNodeRef.current.style.transform = `translate3d(${x - (clonedWidth.current || 0) / 2}px, ${y - (clonedHeight.current || 0) / 2}px, 0)`;\r\n\t\t\t},\r\n\t\t\tmoveingCallback: ({ x, y }) => {\r\n\t\t\t\tlastPointRef.current = { x, y };\r\n\t\t\t\tif (clonedNodeRef.current?.isConnected) {\r\n\t\t\t\t\tclonedNodeRef.current.style.transform = `translate3d(${x - (clonedWidth.current || 0) / 2}px, ${y - (clonedHeight.current || 0) / 2}px, 0)`;\r\n\t\t\t\t\t// clonedNodeRef.current.style.left = `${x - (clonedWidth.current || 0) / 2}px`;\r\n\t\t\t\t\t// clonedNodeRef.current.style.top = `${y - (clonedHeight.current || 0) / 2}px`;\r\n\t\t\t\t}\r\n\r\n\t\t\t\temitDragState({\r\n\t\t\t\t\tisDragging: true,\r\n\t\t\t\t\tisDrop: false,\r\n\t\t\t\t\tnavigationTitle:\r\n\t\t\t\t\t\tnavigationTitle ??\r\n\t\t\t\t\t\ttitleFromUrl(dropDocumentOutsideOption?.openUrl),\r\n\t\t\t\t\tchildren: getFallbackElement(\r\n\t\t\t\t\t\ttargetComponent,\r\n\t\t\t\t\t\tdropDocumentOutsideOption?.openUrl,\r\n\t\t\t\t\t),\r\n\t\t\t\t\tx,\r\n\t\t\t\t\ty,\r\n\t\t\t\t\tcontainerName,\r\n\t\t\t\t\tdropDocumentOutsideOption,\r\n\t\t\t\t\tcustomData,\r\n\t\t\t\t});\r\n\t\t\t},\r\n\t\t});\r\n\t};\r\n\r\n\tconst handleEndWrapper = (event: Event) => {\r\n\t\t//  안전장치로 RAF 취소\r\n\t\tif (scrollRAF.current !== null) {\r\n\t\t\tcancelAnimationFrame(scrollRAF.current);\r\n\t\t\tscrollRAF.current = null;\r\n\t\t}\r\n\t\tvelocity.current = { vx: 0, vy: 0 };\r\n\r\n\t\t// 추가 안전장치 blur나 cancel 이벤트 발생 시 Clone 노드를 강제 정리\r\n\t\tif (\r\n\t\t\tevent.type === \"blur\" ||\r\n\t\t\tevent.type === \"touchcancel\" ||\r\n\t\t\tevent.type === \"pointercancel\"\r\n\t\t) {\r\n\t\t\tif (clonedNodeRef.current) clonedNodeRef.current.remove();\r\n\t\t}\r\n\r\n\t\thandleEnd({\r\n\t\t\tevent,\r\n\t\t\tdragEndCallback: ({ x, y }) => {\r\n\t\t\t\tif (escCanceledRef.current) {\r\n\t\t\t\t\tescCanceledRef.current = false;\r\n\t\t\t\t\tif (clonedNodeRef.current) clonedNodeRef.current.remove();\r\n\r\n\t\t\t\t\temitDragState({\r\n\t\t\t\t\t\tisDragging: false,\r\n\t\t\t\t\t\tisDrop: false,\r\n\t\t\t\t\t\tnavigationTitle:\r\n\t\t\t\t\t\t\tnavigationTitle ??\r\n\t\t\t\t\t\t\ttitleFromUrl(dropDocumentOutsideOption?.openUrl),\r\n\t\t\t\t\t\tchildren: getFallbackElement(\r\n\t\t\t\t\t\t\ttargetComponent,\r\n\t\t\t\t\t\t\tdropDocumentOutsideOption?.openUrl,\r\n\t\t\t\t\t\t),\r\n\t\t\t\t\t\tx,\r\n\t\t\t\t\t\ty,\r\n\t\t\t\t\t\tcontainerName,\r\n\t\t\t\t\t\tdropDocumentOutsideOption,\r\n\t\t\t\t\t\tcustomData,\r\n\t\t\t\t\t});\r\n\t\t\t\t\treturn;\r\n\t\t\t\t}\r\n\r\n\t\t\t\tconst href = hrefUrlRef.current;\r\n\t\t\t\tif (clonedNodeRef.current) clonedNodeRef.current.remove();\r\n\t\t\t\tif (dropDocumentOutsideOption && isDocumentOut({ x, y })) {\r\n\t\t\t\t\tif (\r\n\t\t\t\t\t\tdropDocumentOutsideOption.isNewTap ||\r\n\t\t\t\t\t\t(!dropDocumentOutsideOption.widthRatio &&\r\n\t\t\t\t\t\t\t!dropDocumentOutsideOption.heightRatio)\r\n\t\t\t\t\t) {\r\n\t\t\t\t\t\twindow.open(href, \"_blank\");\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tconst width =\r\n\t\t\t\t\t\t\twindow.innerWidth *\r\n\t\t\t\t\t\t\t(dropDocumentOutsideOption.widthRatio || 1);\r\n\t\t\t\t\t\tconst height =\r\n\t\t\t\t\t\t\twindow.innerHeight *\r\n\t\t\t\t\t\t\t(dropDocumentOutsideOption.heightRatio || 1);\r\n\t\t\t\t\t\twindow.open(\r\n\t\t\t\t\t\t\thref,\r\n\t\t\t\t\t\t\t\"_blank\",\r\n\t\t\t\t\t\t\t`width=${width},height=${height},left=${window.screenLeft - x * -1 - width},top=${window.screenTop + y}`,\r\n\t\t\t\t\t\t);\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t\temitDragState({\r\n\t\t\t\t\tisDragging: false,\r\n\t\t\t\t\tisDrop: true,\r\n\t\t\t\t\tnavigationTitle:\r\n\t\t\t\t\t\tnavigationTitle ??\r\n\t\t\t\t\t\ttitleFromUrl(dropDocumentOutsideOption?.openUrl),\r\n\t\t\t\t\tchildren: getFallbackElement(\r\n\t\t\t\t\t\ttargetComponent,\r\n\t\t\t\t\t\tdropDocumentOutsideOption?.openUrl,\r\n\t\t\t\t\t),\r\n\t\t\t\t\tx,\r\n\t\t\t\t\ty,\r\n\t\t\t\t\tcontainerName,\r\n\t\t\t\t\tdropDocumentOutsideOption,\r\n\t\t\t\t\tdropEndCallback,\r\n\t\t\t\t\tscreenKey,\r\n\t\t\t\t\tcustomData,\r\n\t\t\t\t});\r\n\t\t\t},\r\n\t\t});\r\n\t};\r\n\r\n\tuseEffect(() => {\r\n\t\tif (ref.current) {\r\n\t\t\tconst clone = ref.current.cloneNode(true) as HTMLDivElement;\r\n\t\t\tconst originRect = ref.current.getBoundingClientRect();\r\n\t\t\tclone.style.width = originRect.width + \"px\";\r\n\t\t\tclone.style.height = originRect.height + \"px\";\r\n\t\t\tclone.style.opacity = \"0.3\";\r\n\t\t\tclone.style.backdropFilter = \"blur(6px)\";\r\n\t\t\tclonedWidth.current = originRect.width;\r\n\t\t\tclonedHeight.current = originRect.height;\r\n\t\t\tif (dropDocumentOutsideOption?.openUrl) {\r\n\t\t\t\threfUrlRef.current = dropDocumentOutsideOption!.openUrl;\r\n\t\t\t\tconst href = document.createElement(\"span\");\r\n\t\t\t\thref.textContent = hrefUrlRef.current;\r\n\t\t\t\tclone.prepend(href);\r\n\t\t\t}\r\n\r\n\t\t\tconst title = document.createElement(\"span\");\r\n\t\t\ttitle.textContent =\r\n\t\t\t\tnavigationTitle ??\r\n\t\t\t\ttitleFromUrl(dropDocumentOutsideOption?.openUrl) ??\r\n\t\t\t\t\"\";\r\n\t\t\tclone.prepend(title);\r\n\r\n\t\t\tclone.style.position = \"fixed\";\r\n\t\t\tclone.style.left = \"0px\";\r\n\t\t\tclone.style.top = \"0px\";\r\n\t\t\tclone.style.margin = \"0px\";\r\n\t\t\tclone.style.willChange = \"transform\";\r\n\t\t\tclone.style.transform = \"translate3d(-9999px, -9999px, 0)\";\r\n\t\t\tclone.style.pointerEvents = \"none\";\r\n\r\n\t\t\tclonedNodeRef.current = clone;\r\n\t\t\tclonedNodeRef.current.classList.add(\r\n\t\t\t\tstyles[\"flex-split-screen-drag-box-clone\"],\r\n\t\t\t);\r\n\t\t}\r\n\t}, []);\r\n\r\n\tuseEffect(() => {\r\n\t\tconst moveEvents: Array<keyof WindowEventMap> = [\r\n\t\t\t\"mousemove\",\r\n\t\t\t\"touchmove\",\r\n\t\t];\r\n\r\n\t\t// 드래그 상태가 붕괴되거나 좀비 상태가 될 수 있는 예외 케이스들을 모두 포함\r\n\t\tconst endEvents: Array<keyof WindowEventMap> = [\r\n\t\t\t\"mouseup\",\r\n\t\t\t\"touchend\",\r\n\t\t\t\"touchcancel\", // 터치 제스처 시스템 인터럽트\r\n\t\t\t\"pointerup\", // 범용 포인터 이벤트\r\n\t\t\t\"pointercancel\",\r\n\t\t\t\"blur\", // 윈도우 포커스 아웃 (Alt+Tab 등)\r\n\t\t];\r\n\r\n\t\tmoveEvents.forEach((eventName) => {\r\n\t\t\twindow.addEventListener(eventName, handleMoveWrapper, {\r\n\t\t\t\tpassive: false,\r\n\t\t\t});\r\n\t\t});\r\n\t\tendEvents.forEach((eventName) => {\r\n\t\t\twindow.addEventListener(eventName, handleEndWrapper);\r\n\t\t});\r\n\t\treturn () => {\r\n\t\t\tmoveEvents.forEach((eventName) => {\r\n\t\t\t\twindow.removeEventListener(eventName, handleMoveWrapper);\r\n\t\t\t});\r\n\t\t\tendEvents.forEach((eventName) => {\r\n\t\t\t\twindow.removeEventListener(eventName, handleEndWrapper);\r\n\t\t\t});\r\n\t\t};\r\n\t}, [\r\n\t\tcustomData,\r\n\t\ttargetComponent,\r\n\t\tdropDocumentOutsideOption,\r\n\t\tscreenKey,\r\n\t\tisBlockingActiveInput,\r\n\t\tcontainerName,\r\n\t\tnavigationTitle,\r\n\t\tdropEndCallback,\r\n\t]);\r\n\r\n\tuseEffect(() => {\r\n\t\tconst el = ref.current;\r\n\t\tif (!el) return;\r\n\r\n\t\tconst onCtx = (e: Event) => e.preventDefault();\r\n\r\n\t\tel.addEventListener(\"contextmenu\", onCtx);\r\n\r\n\t\treturn () => {\r\n\t\t\tel.removeEventListener(\"contextmenu\", onCtx);\r\n\t\t};\r\n\t}, []);\r\n\r\n\tuseEffect(() => {\r\n\t\treturn () => {\r\n\t\t\tif (scrollRAF.current !== null) {\r\n\t\t\t\tcancelAnimationFrame(scrollRAF.current);\r\n\t\t\t\tscrollRAF.current = null;\r\n\t\t\t}\r\n\t\t\tvelocity.current = { vx: 0, vy: 0 };\r\n\t\t\tclonedNodeRef.current?.remove();\r\n\t\t};\r\n\t}, []);\r\n\r\n\t//취소 이벤트\r\n\tuseEffect(() => {\r\n\t\tconst onKeyDown = (e: KeyboardEvent) => {\r\n\t\t\tif (e.key !== \"Escape\") return;\r\n\r\n\t\t\t// 드래그가 실제로 시작된 상태에서만 (clone이 body에 붙어있는 상태)\r\n\t\t\tif (!clonedNodeRef.current?.isConnected) return;\r\n\r\n\t\t\te.preventDefault();\r\n\t\t\te.stopPropagation();\r\n\r\n\t\t\t// 다음 mouseup이 와도 drop 로직 안 타게\r\n\t\t\tescCanceledRef.current = true;\r\n\r\n\t\t\t// 스크롤/RAF 정리\r\n\t\t\tif (scrollRAF.current !== null) {\r\n\t\t\t\tcancelAnimationFrame(scrollRAF.current);\r\n\t\t\t\tscrollRAF.current = null;\r\n\t\t\t}\r\n\t\t\tvelocity.current = { vx: 0, vy: 0 };\r\n\r\n\t\t\t// clone 제거\r\n\t\t\tclonedNodeRef.current?.remove();\r\n\r\n\t\t\t//  useDragEvents 내부 상태도 \"끝\"으로 만들어 좀비 드래그 방지\r\n\t\t\t// (좌표는 hook이 마지막 좌표를 들고 있거나, 아래 emit에선 lastPointRef를 사용)\r\n\t\t\thandleEnd({\r\n\t\t\t\tevent: new Event(\"pointercancel\"),\r\n\t\t\t\tdragEndCallback: () => {},\r\n\t\t\t});\r\n\r\n\t\t\t// overlay 등 외부 UI도 즉시 종료시키기\r\n\t\t\tconst { x, y } = lastPointRef.current;\r\n\t\t\temitDragState({\r\n\t\t\t\tisDragging: false,\r\n\t\t\t\tisDrop: false,\r\n\t\t\t\tnavigationTitle:\r\n\t\t\t\t\tnavigationTitle ??\r\n\t\t\t\t\ttitleFromUrl(dropDocumentOutsideOption?.openUrl),\r\n\t\t\t\tchildren: getFallbackElement(\r\n\t\t\t\t\ttargetComponent,\r\n\t\t\t\t\tdropDocumentOutsideOption?.openUrl,\r\n\t\t\t\t),\r\n\t\t\t\tx,\r\n\t\t\t\ty,\r\n\t\t\t\tcontainerName,\r\n\t\t\t\tdropDocumentOutsideOption,\r\n\t\t\t\tcustomData,\r\n\t\t\t});\r\n\t\t};\r\n\r\n\t\twindow.addEventListener(\"keydown\", onKeyDown, true);\r\n\t\treturn () => window.removeEventListener(\"keydown\", onKeyDown, true);\r\n\t}, [\r\n\t\thandleEnd,\r\n\t\tcontainerName,\r\n\t\tnavigationTitle,\r\n\t\tdropDocumentOutsideOption,\r\n\t\ttargetComponent,\r\n\t\tcustomData,\r\n\t]);\r\n\r\n\treturn (\r\n\t\t<>\r\n\t\t\t<div\r\n\t\t\t\tclassName={`${className || \"\"} ${styles[\"flex-split-screen-drag-box\"]}`}\r\n\t\t\t\tref={ref}\r\n\t\t\t\tonContextMenu={(e) => e.preventDefault()}\r\n\t\t\t\tonMouseDown={(ev) => {\r\n\t\t\t\t\tif (onMouseDown) {\r\n\t\t\t\t\t\tPromise.resolve().then(() => onMouseDown(ev));\r\n\t\t\t\t\t}\r\n\t\t\t\t\thandleStart({\r\n\t\t\t\t\t\tevent: ev,\r\n\t\t\t\t\t\tdragStartCallback: ({ x, y }) => {\r\n\t\t\t\t\t\t\tlastPointRef.current = { x, y };\r\n\t\t\t\t\t\t\tif (clonedNodeRef.current) {\r\n\t\t\t\t\t\t\t\tdocument.body.appendChild(\r\n\t\t\t\t\t\t\t\t\tclonedNodeRef.current,\r\n\t\t\t\t\t\t\t\t);\r\n\t\t\t\t\t\t\t\tif (ref.current) {\r\n\t\t\t\t\t\t\t\t\tconst originRect =\r\n\t\t\t\t\t\t\t\t\t\tref.current.getBoundingClientRect();\r\n\t\t\t\t\t\t\t\t\tclonedNodeRef.current.style.width =\r\n\t\t\t\t\t\t\t\t\t\toriginRect.width + \"px\";\r\n\t\t\t\t\t\t\t\t\tclonedNodeRef.current.style.height =\r\n\t\t\t\t\t\t\t\t\t\toriginRect.height + \"px\";\r\n\r\n\t\t\t\t\t\t\t\t\tclonedWidth.current = originRect.width;\r\n\t\t\t\t\t\t\t\t\tclonedHeight.current = originRect.height;\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\tif (clonedNodeRef.current?.isConnected) {\r\n\t\t\t\t\t\t\t\tnavigator.vibrate(100);\r\n\r\n\t\t\t\t\t\t\t\tclonedNodeRef.current.style.transform = `translate3d(${x - (clonedWidth.current || 0) / 2}px, ${y - (clonedHeight.current || 0) / 2}px, 0)`;\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\temitDragState({\r\n\t\t\t\t\t\t\t\tisDragging: true,\r\n\t\t\t\t\t\t\t\tisDrop: false,\r\n\t\t\t\t\t\t\t\tnavigationTitle:\r\n\t\t\t\t\t\t\t\t\tnavigationTitle ??\r\n\t\t\t\t\t\t\t\t\ttitleFromUrl(\r\n\t\t\t\t\t\t\t\t\t\tdropDocumentOutsideOption?.openUrl,\r\n\t\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\tchildren: getFallbackElement(\r\n\t\t\t\t\t\t\t\t\ttargetComponent,\r\n\t\t\t\t\t\t\t\t\tdropDocumentOutsideOption?.openUrl,\r\n\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\tx,\r\n\t\t\t\t\t\t\t\ty,\r\n\t\t\t\t\t\t\t\tcontainerName,\r\n\t\t\t\t\t\t\t\tdropDocumentOutsideOption,\r\n\t\t\t\t\t\t\t\tcustomData,\r\n\t\t\t\t\t\t\t});\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t});\r\n\t\t\t\t}}\r\n\t\t\t\tonTouchStart={(ev) => {\r\n\t\t\t\t\tif (onTouchStart) {\r\n\t\t\t\t\t\tPromise.resolve().then(() => onTouchStart(ev));\r\n\t\t\t\t\t}\r\n\t\t\t\t\thandleStart({\r\n\t\t\t\t\t\tevent: ev,\r\n\t\t\t\t\t\tdragStartCallback: ({ x, y }) => {\r\n\t\t\t\t\t\t\tif (clonedNodeRef.current) {\r\n\t\t\t\t\t\t\t\tdocument.body.appendChild(\r\n\t\t\t\t\t\t\t\t\tclonedNodeRef.current,\r\n\t\t\t\t\t\t\t\t);\r\n\t\t\t\t\t\t\t\tif (ref.current) {\r\n\t\t\t\t\t\t\t\t\tconst originRect =\r\n\t\t\t\t\t\t\t\t\t\tref.current.getBoundingClientRect();\r\n\t\t\t\t\t\t\t\t\tclonedNodeRef.current.style.width =\r\n\t\t\t\t\t\t\t\t\t\toriginRect.width + \"px\";\r\n\t\t\t\t\t\t\t\t\tclonedNodeRef.current.style.height =\r\n\t\t\t\t\t\t\t\t\t\toriginRect.height + \"px\";\r\n\r\n\t\t\t\t\t\t\t\t\tclonedWidth.current = originRect.width;\r\n\t\t\t\t\t\t\t\t\tclonedHeight.current = originRect.height;\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\tif (clonedNodeRef.current?.isConnected) {\r\n\t\t\t\t\t\t\t\tnavigator.vibrate(100);\r\n\t\t\t\t\t\t\t\tclonedNodeRef.current.style.transform = `translate3d(${x - (clonedWidth.current || 0) / 2}px, ${y - (clonedHeight.current || 0) / 2}px, 0)`;\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\temitDragState({\r\n\t\t\t\t\t\t\t\tisDragging: true,\r\n\t\t\t\t\t\t\t\tisDrop: false,\r\n\t\t\t\t\t\t\t\tnavigationTitle:\r\n\t\t\t\t\t\t\t\t\tnavigationTitle ??\r\n\t\t\t\t\t\t\t\t\ttitleFromUrl(\r\n\t\t\t\t\t\t\t\t\t\tdropDocumentOutsideOption?.openUrl,\r\n\t\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\tchildren: getFallbackElement(\r\n\t\t\t\t\t\t\t\t\ttargetComponent,\r\n\t\t\t\t\t\t\t\t\tdropDocumentOutsideOption?.openUrl,\r\n\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\tx,\r\n\t\t\t\t\t\t\t\ty,\r\n\t\t\t\t\t\t\t\tcontainerName,\r\n\t\t\t\t\t\t\t\tdropDocumentOutsideOption,\r\n\t\t\t\t\t\t\t\tcustomData,\r\n\t\t\t\t\t\t\t});\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t});\r\n\t\t\t\t}}\r\n\t\t\t\tstyle={{ ...style }}\r\n\t\t\t\t{...props}\r\n\t\t\t>\r\n\t\t\t\t{children}\r\n\t\t\t</div>\r\n\t\t\t{}\r\n\t\t</>\r\n\t);\r\n}\r\n"],"mappings":"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","names":["x","y","styles"]}

package/dist/flex-layout/components/FlexLayoutSplitScreenDragBox.d.ts

@@ -24,4 +24,4 @@ export interface DropDocumentOutsideOption {
     heightRatio?: number;
     isNewTap?: boolean;
 }
-export default function FlexLayoutSplitScreenDragBox<E extends HTMLElement>({ onMouseDown, onTouchStart, dropEndCallback, style, navigationTitle, targetComponent, containerName, children, className, dropDocumentOutsideOption, screenKey, isBlockingActiveInput, customData, scrollTargetRef, ...props }: FlexLayoutSplitScreenDragBoxProps): import("react/jsx-runtime").JSX.Element;
+export default function FlexLayoutSplitScreenDragBox<E extends HTMLElement>({ onMouseDown, onTouchStart, dropEndCallback, style, navigationTitle, targetComponent, containerName, children, className, dropDocumentOutsideOption, screenKey: _screenKey, isBlockingActiveInput, customData, scrollTargetRef, ...props }: FlexLayoutSplitScreenDragBoxProps): import("react/jsx-runtime").JSX.Element;