@byeolnaerim/flex-layout 0.0.9 → 0.0.12

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

@@ -1,532 +1 @@
-"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;
-  let vx = 0;
-  if (x < mx)
-    vx = -((mx - x) / mx) * MAX_STEP;
-  else if (x > w - mx)
-    vx = (x - (w - mx)) / mx * MAX_STEP;
-  let vy = 0;
-  if (y < my)
-    vy = -((my - y) / my) * MAX_STEP;
-  else if (y > h - my)
-    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,
-  dropEndCallback,
-  style,
-  navigationTitle,
-  targetComponent,
-  containerName,
-  children,
-  className,
-  dropDocumentOutsideOption,
-  screenKey: _screenKey,
-  isBlockingActiveInput = false,
-  customData = {},
-  scrollTargetRef,
-  ...props
-}) {
-  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") {
-      const t = event.touches[0];
-      x = t.clientX;
-      y = t.clientY;
-    } else {
-      const m = event;
-      x = m.clientX;
-      y = m.clientY;
-    }
-    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) {
-        cancelAnimationFrame(scrollRAF.current);
-        scrollRAF.current = null;
-      }
-    }
-    if (clonedNodeRef.current?.isConnected && inEdge) {
-      event.preventDefault();
-      velocity.current = { vx, vy };
-      if (!scrollRAF.current) {
-        const step = () => {
-          const target = scrollTargetRef?.current ?? document.scrollingElement;
-          if (target?.scrollBy) {
-            target.scrollBy(
-              velocity.current.vx,
-              velocity.current.vy
-            );
-          } else {
-            window.scrollBy(
-              velocity.current.vx,
-              velocity.current.vy
-            );
-          }
-          if (velocity.current.vx === 0 && velocity.current.vy === 0) {
-            scrollRAF.current = null;
-            return;
-          }
-          scrollRAF.current = requestAnimationFrame(step);
-        };
-        scrollRAF.current = requestAnimationFrame(step);
-      }
-    }
-    if (event.type !== "touchmove") {
-      event.preventDefault();
-    }
-    handleMove({
-      event,
-      notDragCallback: ({ x: x2, y: y2 }) => {
-        if (clonedNodeRef.current) clonedNodeRef.current.remove();
-      },
-      dragStartCallback: ({ x: x2, y: y2 }) => {
-        if (!clonedNodeRef.current) return;
-        navigator.vibrate(100);
-        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.transform = `translate3d(${x2 - (clonedWidth.current || 0) / 2}px, ${y2 - (clonedHeight.current || 0) / 2}px, 0)`;
-        }
-        emitDragState({
-          isDragging: true,
-          isDrop: false,
-          navigationTitle: navigationTitle ?? titleFromUrl(dropDocumentOutsideOption?.openUrl),
-          children: getFallbackElement(
-            targetComponent,
-            dropDocumentOutsideOption?.openUrl
-          ),
-          x: x2,
-          y: y2,
-          containerName,
-          dropDocumentOutsideOption,
-          customData
-        });
-      }
-    });
-  };
-  const handleEndWrapper = (event) => {
-    if (scrollRAF.current !== null) {
-      cancelAnimationFrame(scrollRAF.current);
-      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 && (0, import_FlexLayoutUtils.isDocumentOut)({ x, y })) {
-          if (dropDocumentOutsideOption.isNewTap || !dropDocumentOutsideOption.widthRatio && !dropDocumentOutsideOption.heightRatio) {
-            window.open(href, "_blank");
-          } else {
-            const width = window.innerWidth * (dropDocumentOutsideOption.widthRatio || 1);
-            const height = window.innerHeight * (dropDocumentOutsideOption.heightRatio || 1);
-            window.open(
-              href,
-              "_blank",
-              `width=${width},height=${height},left=${window.screenLeft - x * -1 - width},top=${window.screenTop + y}`
-            );
-          }
-        }
-        emitDragState({
-          isDragging: false,
-          isDrop: true,
-          navigationTitle: navigationTitle ?? titleFromUrl(dropDocumentOutsideOption?.openUrl),
-          children: getFallbackElement(
-            targetComponent,
-            dropDocumentOutsideOption?.openUrl
-          ),
-          x,
-          y,
-          containerName,
-          dropDocumentOutsideOption,
-          dropEndCallback,
-          screenKey,
-          customData
-        });
-      }
-    });
-  };
-  (0, import_react.useEffect)(() => {
-    if (ref.current) {
-      const clone = ref.current.cloneNode(true);
-      const originRect = ref.current.getBoundingClientRect();
-      clone.style.width = originRect.width + "px";
-      clone.style.height = originRect.height + "px";
-      clone.style.opacity = "0.3";
-      clone.style.backdropFilter = "blur(6px)";
-      clonedWidth.current = originRect.width;
-      clonedHeight.current = originRect.height;
-      if (dropDocumentOutsideOption?.openUrl) {
-        hrefUrlRef.current = dropDocumentOutsideOption.openUrl;
-        const href = document.createElement("span");
-        href.textContent = hrefUrlRef.current;
-        clone.prepend(href);
-      }
-      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(
-        import_FlexLayout.default["flex-split-screen-drag-box-clone"]
-      );
-    }
-  }, []);
-  (0, import_react.useEffect)(() => {
-    const moveEvents = [
-      "mousemove",
-      "touchmove"
-    ];
-    const endEvents = [
-      "mouseup",
-      "touchend",
-      "touchcancel",
-      // 터치 제스처 시스템 인터럽트
-      "pointerup",
-      // 범용 포인터 이벤트
-      "pointercancel",
-      "blur"
-      // 윈도우 포커스 아웃 (Alt+Tab 등)
-    ];
-    moveEvents.forEach((eventName) => {
-      window.addEventListener(eventName, handleMoveWrapper, {
-        passive: false
-      });
-    });
-    endEvents.forEach((eventName) => {
-      window.addEventListener(eventName, handleEndWrapper);
-    });
-    return () => {
-      moveEvents.forEach((eventName) => {
-        window.removeEventListener(eventName, handleMoveWrapper);
-      });
-      endEvents.forEach((eventName) => {
-        window.removeEventListener(eventName, handleEndWrapper);
-      });
-    };
-  }, [
-    customData,
-    targetComponent,
-    dropDocumentOutsideOption,
-    screenKey,
-    isBlockingActiveInput,
-    containerName,
-    navigationTitle,
-    dropEndCallback
-  ]);
-  (0, import_react.useEffect)(() => {
-    const el = ref.current;
-    if (!el) return;
-    const onCtx = (e) => e.preventDefault();
-    el.addEventListener("contextmenu", onCtx);
-    return () => {
-      el.removeEventListener("contextmenu", onCtx);
-    };
-  }, []);
-  (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 || ""} ${import_FlexLayout.default["flex-split-screen-drag-box"]}`,
-      ref,
-      onContextMenu: (e) => e.preventDefault(),
-      onMouseDown: (ev) => {
-        if (onMouseDown) {
-          Promise.resolve().then(() => onMouseDown(ev));
-        }
-        handleStart({
-          event: ev,
-          dragStartCallback: ({ x, y }) => {
-            lastPointRef.current = { x, y };
-            if (clonedNodeRef.current) {
-              document.body.appendChild(
-                clonedNodeRef.current
-              );
-              if (ref.current) {
-                const originRect = ref.current.getBoundingClientRect();
-                clonedNodeRef.current.style.width = originRect.width + "px";
-                clonedNodeRef.current.style.height = originRect.height + "px";
-                clonedWidth.current = originRect.width;
-                clonedHeight.current = originRect.height;
-              }
-            }
-            if (clonedNodeRef.current?.isConnected) {
-              navigator.vibrate(100);
-              clonedNodeRef.current.style.transform = `translate3d(${x - (clonedWidth.current || 0) / 2}px, ${y - (clonedHeight.current || 0) / 2}px, 0)`;
-            }
-            emitDragState({
-              isDragging: true,
-              isDrop: false,
-              navigationTitle: navigationTitle ?? titleFromUrl(
-                dropDocumentOutsideOption?.openUrl
-              ),
-              children: getFallbackElement(
-                targetComponent,
-                dropDocumentOutsideOption?.openUrl
-              ),
-              x,
-              y,
-              containerName,
-              dropDocumentOutsideOption,
-              customData
-            });
-          }
-        });
-      },
-      onTouchStart: (ev) => {
-        if (onTouchStart) {
-          Promise.resolve().then(() => onTouchStart(ev));
-        }
-        handleStart({
-          event: ev,
-          dragStartCallback: ({ x, y }) => {
-            if (clonedNodeRef.current) {
-              document.body.appendChild(
-                clonedNodeRef.current
-              );
-              if (ref.current) {
-                const originRect = ref.current.getBoundingClientRect();
-                clonedNodeRef.current.style.width = originRect.width + "px";
-                clonedNodeRef.current.style.height = originRect.height + "px";
-                clonedWidth.current = originRect.width;
-                clonedHeight.current = originRect.height;
-              }
-            }
-            if (clonedNodeRef.current?.isConnected) {
-              navigator.vibrate(100);
-              clonedNodeRef.current.style.transform = `translate3d(${x - (clonedWidth.current || 0) / 2}px, ${y - (clonedHeight.current || 0) / 2}px, 0)`;
-            }
-            emitDragState({
-              isDragging: true,
-              isDrop: false,
-              navigationTitle: navigationTitle ?? titleFromUrl(
-                dropDocumentOutsideOption?.openUrl
-              ),
-              children: getFallbackElement(
-                targetComponent,
-                dropDocumentOutsideOption?.openUrl
-              ),
-              x,
-              y,
-              containerName,
-              dropDocumentOutsideOption,
-              customData
-            });
-          }
-        });
-      },
-      style: { ...style },
-      ...props,
-      children
-    }
-  ) });
-}
-//# sourceMappingURL=FlexLayoutSplitScreenDragBox.cjs.map
+"use strict";"use client";var re=Object.create;var F=Object.defineProperty;var ne=Object.getOwnPropertyDescriptor;var te=Object.getOwnPropertyNames;var le=Object.getPrototypeOf,ce=Object.prototype.hasOwnProperty;var ie=(r,c)=>{for(var u in c)F(r,u,{get:c[u],enumerable:!0})},z=(r,c,u,d)=>{if(c&&typeof c=="object"||typeof c=="function")for(let i of te(c))!ce.call(r,i)&&i!==u&&F(r,i,{get:()=>c[i],enumerable:!(d=ne(c,i))||d.enumerable});return r};var oe=(r,c,u)=>(u=r!=null?re(le(r)):{},z(c||!r||!r.__esModule?F(u,"default",{value:r,enumerable:!0}):u,r)),ue=r=>z(F({},"__esModule",{value:!0}),r);var he={};ie(he,{default:()=>Q});module.exports=ue(he);var T=require("react/jsx-runtime"),f=require("react"),k=require("../hooks/useDrag"),K=oe(require("../styles/FlexLayout.module.css"),1),G=require("../utils/FlexLayoutUtils"),J=require("./FlexLayoutIFramePane");const H=18;function ae(r,c){const u=window.innerWidth,d=window.innerHeight,i=u*.15,a=d*.15;return r<i||r>u-i||c<a||c>d-a}function se(r,c){const u=window.innerWidth,d=window.innerHeight,i=u*.15,a=d*.15;let h=0;r<i?h=-((i-r)/i)*H:r>u-i&&(h=(r-(u-i))/i*H);let m=0;return c<a?m=-((a-c)/a)*H:c>d-a&&(m=(c-(d-a))/a*H),{vx:h,vy:m}}function xe(r,c,u,d){const i=window.innerWidth,a=window.innerHeight,h=i*.15,m=a*.15,$=u<h?1+(h-u)/h*3:u>i-h?1+(u-(i-h))/h*3:1,n=d<m?1+(m-d)/m*3:d>a-m?1+(d-(a-m))/m*3:1;return{vx:-r*$,vy:-c*n}}function fe(){const r=globalThis.crypto;return r?.randomUUID?r.randomUUID():r?.getRandomValues?Array.from(r.getRandomValues(new Uint32Array(16)),c=>c.toString(32).padStart(2,"0")).join(""):`${Date.now().toString(32)}-${Math.random().toString(32).slice(2)}`}function L(r,c){if(r)return r;if(c)return(0,T.jsx)(J.FlexLayoutIFramePane,{url:c})}function S(r){if(r)try{return new URL(r).hostname}catch{return r}}function Q({onMouseDown:r,onTouchStart:c,dropEndCallback:u,style:d,navigationTitle:i,targetComponent:a,containerName:h,children:m,className:$,dropDocumentOutsideOption:n,screenKey:D,isBlockingActiveInput:V=!1,customData:E={},scrollTargetRef:Z,...O}){const[Y,I]=(0,f.useState)();(0,f.useEffect)(()=>{I(D||fe())},[D]);const g=(0,f.useRef)(null),w=(0,f.useRef)({vx:0,vy:0}),y=(0,f.useRef)(null),t=(0,f.useRef)(null),b=(0,f.useRef)(null),x=(0,f.useRef)(null),P=(0,f.useRef)(""),U=(0,f.useRef)(null),C=(0,f.useRef)(null),B=(0,f.useRef)({x:0,y:0}),W=(0,f.useRef)(!1),R=e=>{C.current=e,U.current==null&&(U.current=requestAnimationFrame(()=>{C.current&&k.dragStateSubject.next(C.current),C.current=null,U.current=null}))};(0,f.useEffect)(()=>()=>{U.current!=null&&cancelAnimationFrame(U.current)},[]);const{handleStart:j,handleMove:ee,handleEnd:X}=(0,k.useDragEvents)({isBlockingActiveInput:V}),q=e=>{let o=!1,l=0,s=0;if(e.type==="touchmove"){const v=e.touches[0];l=v.clientX,s=v.clientY}else{const v=e;l=v.clientX,s=v.clientY}const{vx:M,vy:A}=se(l,s),_=M!==0||A!==0;if(o=ae(l,s),t.current?.isConnected&&!_&&(e.preventDefault(),g.current&&(cancelAnimationFrame(g.current),g.current=null)),t.current?.isConnected&&_&&(e.preventDefault(),w.current={vx:M,vy:A},!g.current)){const v=()=>{const p=Z?.current??document.scrollingElement;if(p?.scrollBy?p.scrollBy(w.current.vx,w.current.vy):window.scrollBy(w.current.vx,w.current.vy),w.current.vx===0&&w.current.vy===0){g.current=null;return}g.current=requestAnimationFrame(v)};g.current=requestAnimationFrame(v)}e.type!=="touchmove"&&e.preventDefault(),ee({event:e,notDragCallback:({x:v,y:p})=>{t.current&&t.current.remove()},dragStartCallback:({x:v,y:p})=>{t.current&&(navigator.vibrate(100),t.current.style.transform=`translate3d(${v-(b.current||0)/2}px, ${p-(x.current||0)/2}px, 0)`)},moveingCallback:({x:v,y:p})=>{B.current={x:v,y:p},t.current?.isConnected&&(t.current.style.transform=`translate3d(${v-(b.current||0)/2}px, ${p-(x.current||0)/2}px, 0)`),R({isDragging:!0,isDrop:!1,navigationTitle:i??S(n?.openUrl),children:L(a,n?.openUrl),x:v,y:p,containerName:h,dropDocumentOutsideOption:n,customData:E})}})},N=e=>{g.current!==null&&(cancelAnimationFrame(g.current),g.current=null),w.current={vx:0,vy:0},(e.type==="blur"||e.type==="touchcancel"||e.type==="pointercancel")&&t.current&&t.current.remove(),X({event:e,dragEndCallback:({x:o,y:l})=>{if(W.current){W.current=!1,t.current&&t.current.remove(),R({isDragging:!1,isDrop:!1,navigationTitle:i??S(n?.openUrl),children:L(a,n?.openUrl),x:o,y:l,containerName:h,dropDocumentOutsideOption:n,customData:E});return}const s=P.current;if(t.current&&t.current.remove(),n&&(0,G.isDocumentOut)({x:o,y:l}))if(n.isNewTap||!n.widthRatio&&!n.heightRatio)window.open(s,"_blank");else{const M=window.innerWidth*(n.widthRatio||1),A=window.innerHeight*(n.heightRatio||1);window.open(s,"_blank",`width=${M},height=${A},left=${window.screenLeft-o*-1-M},top=${window.screenTop+l}`)}R({isDragging:!1,isDrop:!0,navigationTitle:i??S(n?.openUrl),children:L(a,n?.openUrl),x:o,y:l,containerName:h,dropDocumentOutsideOption:n,dropEndCallback:u,screenKey:Y,customData:E})}})};return(0,f.useEffect)(()=>{if(y.current){const e=y.current.cloneNode(!0),o=y.current.getBoundingClientRect();if(e.style.width=o.width+"px",e.style.height=o.height+"px",e.style.opacity="0.3",e.style.backdropFilter="blur(6px)",b.current=o.width,x.current=o.height,n?.openUrl){P.current=n.openUrl;const s=document.createElement("span");s.textContent=P.current,e.prepend(s)}const l=document.createElement("span");l.textContent=i??S(n?.openUrl)??"",e.prepend(l),e.style.position="fixed",e.style.left="0px",e.style.top="0px",e.style.margin="0px",e.style.willChange="transform",e.style.transform="translate3d(-9999px, -9999px, 0)",e.style.pointerEvents="none",t.current=e,t.current.classList.add(K.default["flex-split-screen-drag-box-clone"])}},[]),(0,f.useEffect)(()=>{const e=["mousemove","touchmove"],o=["mouseup","touchend","touchcancel","pointerup","pointercancel","blur"];return e.forEach(l=>{window.addEventListener(l,q,{passive:!1})}),o.forEach(l=>{window.addEventListener(l,N)}),()=>{e.forEach(l=>{window.removeEventListener(l,q)}),o.forEach(l=>{window.removeEventListener(l,N)})}},[E,a,n,Y,V,h,i,u]),(0,f.useEffect)(()=>{const e=y.current;if(!e)return;const o=l=>l.preventDefault();return e.addEventListener("contextmenu",o),()=>{e.removeEventListener("contextmenu",o)}},[]),(0,f.useEffect)(()=>()=>{g.current!==null&&(cancelAnimationFrame(g.current),g.current=null),w.current={vx:0,vy:0},t.current?.remove()},[]),(0,f.useEffect)(()=>{const e=o=>{if(o.key!=="Escape"||!t.current?.isConnected)return;o.preventDefault(),o.stopPropagation(),W.current=!0,g.current!==null&&(cancelAnimationFrame(g.current),g.current=null),w.current={vx:0,vy:0},t.current?.remove(),X({event:new Event("pointercancel"),dragEndCallback:()=>{}});const{x:l,y:s}=B.current;R({isDragging:!1,isDrop:!1,navigationTitle:i??S(n?.openUrl),children:L(a,n?.openUrl),x:l,y:s,containerName:h,dropDocumentOutsideOption:n,customData:E})};return window.addEventListener("keydown",e,!0),()=>window.removeEventListener("keydown",e,!0)},[X,h,i,n,a,E]),(0,T.jsx)(T.Fragment,{children:(0,T.jsx)("div",{className:`${$||""} ${K.default["flex-split-screen-drag-box"]}`,ref:y,onContextMenu:e=>e.preventDefault(),onMouseDown:e=>{r&&Promise.resolve().then(()=>r(e)),j({event:e,dragStartCallback:({x:o,y:l})=>{if(B.current={x:o,y:l},t.current&&(document.body.appendChild(t.current),y.current)){const s=y.current.getBoundingClientRect();t.current.style.width=s.width+"px",t.current.style.height=s.height+"px",b.current=s.width,x.current=s.height}t.current?.isConnected&&(navigator.vibrate(100),t.current.style.transform=`translate3d(${o-(b.current||0)/2}px, ${l-(x.current||0)/2}px, 0)`),R({isDragging:!0,isDrop:!1,navigationTitle:i??S(n?.openUrl),children:L(a,n?.openUrl),x:o,y:l,containerName:h,dropDocumentOutsideOption:n,customData:E})}})},onTouchStart:e=>{c&&Promise.resolve().then(()=>c(e)),j({event:e,dragStartCallback:({x:o,y:l})=>{if(t.current&&(document.body.appendChild(t.current),y.current)){const s=y.current.getBoundingClientRect();t.current.style.width=s.width+"px",t.current.style.height=s.height+"px",b.current=s.width,x.current=s.height}t.current?.isConnected&&(navigator.vibrate(100),t.current.style.transform=`translate3d(${o-(b.current||0)/2}px, ${l-(x.current||0)/2}px, 0)`),R({isDragging:!0,isDrop:!1,navigationTitle:i??S(n?.openUrl),children:L(a,n?.openUrl),x:o,y:l,containerName:h,dropDocumentOutsideOption:n,customData:E})}})},style:{...d},...O,children:m})})}