@byeolnaerim/flex-layout 0.0.9 → 0.0.10

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

@@ -1,509 +1 @@
-"use client";
-import { Fragment, jsx } from "react/jsx-runtime";
-import {
-  useEffect,
-  useRef,
-  useState
-} from "react";
-import {
-  dragStateSubject,
-  useDragEvents
-} from "../hooks/useDrag";
-import styles from "../styles/FlexLayout.module.css";
-import { isDocumentOut } from "../utils/FlexLayoutUtils";
-import { FlexLayoutIFramePane } from "./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__ */ jsx(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] = useState();
-  useEffect(() => {
-    if (!_screenKey) setScreenKey(createScreenKey());
-    else setScreenKey(_screenKey);
-  }, [_screenKey]);
-  const scrollRAF = useRef(null);
-  const velocity = useRef({ vx: 0, vy: 0 });
-  const ref = useRef(null);
-  const clonedNodeRef = useRef(null);
-  const clonedWidth = useRef(null);
-  const clonedHeight = useRef(null);
-  const hrefUrlRef = useRef("");
-  const rafId = useRef(null);
-  const pending = useRef(null);
-  const lastPointRef = useRef({ x: 0, y: 0 });
-  const escCanceledRef = useRef(false);
-  const emitDragState = (v) => {
-    pending.current = v;
-    if (rafId.current != null) return;
-    rafId.current = requestAnimationFrame(() => {
-      if (pending.current) dragStateSubject.next(pending.current);
-      pending.current = null;
-      rafId.current = null;
-    });
-  };
-  useEffect(() => {
-    return () => {
-      if (rafId.current != null) cancelAnimationFrame(rafId.current);
-    };
-  }, []);
-  const { handleStart, handleMove, handleEnd } = 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 && 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
-        });
-      }
-    });
-  };
-  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(
-        styles["flex-split-screen-drag-box-clone"]
-      );
-    }
-  }, []);
-  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
-  ]);
-  useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    const onCtx = (e) => e.preventDefault();
-    el.addEventListener("contextmenu", onCtx);
-    return () => {
-      el.removeEventListener("contextmenu", onCtx);
-    };
-  }, []);
-  useEffect(() => {
-    return () => {
-      if (scrollRAF.current !== null) {
-        cancelAnimationFrame(scrollRAF.current);
-        scrollRAF.current = null;
-      }
-      velocity.current = { vx: 0, vy: 0 };
-      clonedNodeRef.current?.remove();
-    };
-  }, []);
-  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__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: `${className || ""} ${styles["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
-    }
-  ) });
-}
-export {
-  FlexLayoutSplitScreenDragBox as default
-};
-//# sourceMappingURL=FlexLayoutSplitScreenDragBox.js.map
+"use client";import{Fragment as ce,jsx as W}from"react/jsx-runtime";import{useEffect as S,useRef as m,useState as J}from"react";import{dragStateSubject as Q,useDragEvents as Z}from"../hooks/useDrag";import N from"../styles/FlexLayout.module.css";import{isDocumentOut as O}from"../utils/FlexLayoutUtils";import{FlexLayoutIFramePane as ee}from"./FlexLayoutIFramePane";const F=18;function re(c,s){const d=window.innerWidth,g=window.innerHeight,i=d*.15,o=g*.15;return c<i||c>d-i||s<o||s>g-o}function ne(c,s){const d=window.innerWidth,g=window.innerHeight,i=d*.15,o=g*.15;let a=0;c<i?a=-((i-c)/i)*F:c>d-i&&(a=(c-(d-i))/i*F);let v=0;return s<o?v=-((o-s)/o)*F:s>g-o&&(v=(s-(g-o))/o*F),{vx:a,vy:v}}function pe(c,s,d,g){const i=window.innerWidth,o=window.innerHeight,a=i*.15,v=o*.15,H=d<a?1+(a-d)/a*3:d>i-a?1+(d-(i-a))/a*3:1,r=g<v?1+(v-g)/v*3:g>o-v?1+(g-(o-v))/v*3:1;return{vx:-c*H,vy:-s*r}}function te(){const c=globalThis.crypto;return c?.randomUUID?c.randomUUID():c?.getRandomValues?Array.from(c.getRandomValues(new Uint32Array(16)),s=>s.toString(32).padStart(2,"0")).join(""):`${Date.now().toString(32)}-${Math.random().toString(32).slice(2)}`}function T(c,s){if(c)return c;if(s)return W(ee,{url:s})}function R(c){if(c)try{return new URL(c).hostname}catch{return c}}function le({onMouseDown:c,onTouchStart:s,dropEndCallback:d,style:g,navigationTitle:i,targetComponent:o,containerName:a,children:v,className:H,dropDocumentOutsideOption:r,screenKey:k,isBlockingActiveInput:X=!1,customData:E={},scrollTargetRef:_,...z}){const[K,V]=J();S(()=>{V(k||te())},[k]);const f=m(null),w=m({vx:0,vy:0}),y=m(null),n=m(null),b=m(null),x=m(null),$=m(""),U=m(null),C=m(null),D=m({x:0,y:0}),P=m(!1),L=e=>{C.current=e,U.current==null&&(U.current=requestAnimationFrame(()=>{C.current&&Q.next(C.current),C.current=null,U.current=null}))};S(()=>()=>{U.current!=null&&cancelAnimationFrame(U.current)},[]);const{handleStart:Y,handleMove:G,handleEnd:B}=Z({isBlockingActiveInput:X}),I=e=>{let l=!1,t=0,u=0;if(e.type==="touchmove"){const h=e.touches[0];t=h.clientX,u=h.clientY}else{const h=e;t=h.clientX,u=h.clientY}const{vx:M,vy:A}=ne(t,u),q=M!==0||A!==0;if(l=re(t,u),n.current?.isConnected&&!q&&(e.preventDefault(),f.current&&(cancelAnimationFrame(f.current),f.current=null)),n.current?.isConnected&&q&&(e.preventDefault(),w.current={vx:M,vy:A},!f.current)){const h=()=>{const p=_?.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){f.current=null;return}f.current=requestAnimationFrame(h)};f.current=requestAnimationFrame(h)}e.type!=="touchmove"&&e.preventDefault(),G({event:e,notDragCallback:({x:h,y:p})=>{n.current&&n.current.remove()},dragStartCallback:({x:h,y:p})=>{n.current&&(navigator.vibrate(100),n.current.style.transform=`translate3d(${h-(b.current||0)/2}px, ${p-(x.current||0)/2}px, 0)`)},moveingCallback:({x:h,y:p})=>{D.current={x:h,y:p},n.current?.isConnected&&(n.current.style.transform=`translate3d(${h-(b.current||0)/2}px, ${p-(x.current||0)/2}px, 0)`),L({isDragging:!0,isDrop:!1,navigationTitle:i??R(r?.openUrl),children:T(o,r?.openUrl),x:h,y:p,containerName:a,dropDocumentOutsideOption:r,customData:E})}})},j=e=>{f.current!==null&&(cancelAnimationFrame(f.current),f.current=null),w.current={vx:0,vy:0},(e.type==="blur"||e.type==="touchcancel"||e.type==="pointercancel")&&n.current&&n.current.remove(),B({event:e,dragEndCallback:({x:l,y:t})=>{if(P.current){P.current=!1,n.current&&n.current.remove(),L({isDragging:!1,isDrop:!1,navigationTitle:i??R(r?.openUrl),children:T(o,r?.openUrl),x:l,y:t,containerName:a,dropDocumentOutsideOption:r,customData:E});return}const u=$.current;if(n.current&&n.current.remove(),r&&O({x:l,y:t}))if(r.isNewTap||!r.widthRatio&&!r.heightRatio)window.open(u,"_blank");else{const M=window.innerWidth*(r.widthRatio||1),A=window.innerHeight*(r.heightRatio||1);window.open(u,"_blank",`width=${M},height=${A},left=${window.screenLeft-l*-1-M},top=${window.screenTop+t}`)}L({isDragging:!1,isDrop:!0,navigationTitle:i??R(r?.openUrl),children:T(o,r?.openUrl),x:l,y:t,containerName:a,dropDocumentOutsideOption:r,dropEndCallback:d,screenKey:K,customData:E})}})};return S(()=>{if(y.current){const e=y.current.cloneNode(!0),l=y.current.getBoundingClientRect();if(e.style.width=l.width+"px",e.style.height=l.height+"px",e.style.opacity="0.3",e.style.backdropFilter="blur(6px)",b.current=l.width,x.current=l.height,r?.openUrl){$.current=r.openUrl;const u=document.createElement("span");u.textContent=$.current,e.prepend(u)}const t=document.createElement("span");t.textContent=i??R(r?.openUrl)??"",e.prepend(t),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",n.current=e,n.current.classList.add(N["flex-split-screen-drag-box-clone"])}},[]),S(()=>{const e=["mousemove","touchmove"],l=["mouseup","touchend","touchcancel","pointerup","pointercancel","blur"];return e.forEach(t=>{window.addEventListener(t,I,{passive:!1})}),l.forEach(t=>{window.addEventListener(t,j)}),()=>{e.forEach(t=>{window.removeEventListener(t,I)}),l.forEach(t=>{window.removeEventListener(t,j)})}},[E,o,r,K,X,a,i,d]),S(()=>{const e=y.current;if(!e)return;const l=t=>t.preventDefault();return e.addEventListener("contextmenu",l),()=>{e.removeEventListener("contextmenu",l)}},[]),S(()=>()=>{f.current!==null&&(cancelAnimationFrame(f.current),f.current=null),w.current={vx:0,vy:0},n.current?.remove()},[]),S(()=>{const e=l=>{if(l.key!=="Escape"||!n.current?.isConnected)return;l.preventDefault(),l.stopPropagation(),P.current=!0,f.current!==null&&(cancelAnimationFrame(f.current),f.current=null),w.current={vx:0,vy:0},n.current?.remove(),B({event:new Event("pointercancel"),dragEndCallback:()=>{}});const{x:t,y:u}=D.current;L({isDragging:!1,isDrop:!1,navigationTitle:i??R(r?.openUrl),children:T(o,r?.openUrl),x:t,y:u,containerName:a,dropDocumentOutsideOption:r,customData:E})};return window.addEventListener("keydown",e,!0),()=>window.removeEventListener("keydown",e,!0)},[B,a,i,r,o,E]),W(ce,{children:W("div",{className:`${H||""} ${N["flex-split-screen-drag-box"]}`,ref:y,onContextMenu:e=>e.preventDefault(),onMouseDown:e=>{c&&Promise.resolve().then(()=>c(e)),Y({event:e,dragStartCallback:({x:l,y:t})=>{if(D.current={x:l,y:t},n.current&&(document.body.appendChild(n.current),y.current)){const u=y.current.getBoundingClientRect();n.current.style.width=u.width+"px",n.current.style.height=u.height+"px",b.current=u.width,x.current=u.height}n.current?.isConnected&&(navigator.vibrate(100),n.current.style.transform=`translate3d(${l-(b.current||0)/2}px, ${t-(x.current||0)/2}px, 0)`),L({isDragging:!0,isDrop:!1,navigationTitle:i??R(r?.openUrl),children:T(o,r?.openUrl),x:l,y:t,containerName:a,dropDocumentOutsideOption:r,customData:E})}})},onTouchStart:e=>{s&&Promise.resolve().then(()=>s(e)),Y({event:e,dragStartCallback:({x:l,y:t})=>{if(n.current&&(document.body.appendChild(n.current),y.current)){const u=y.current.getBoundingClientRect();n.current.style.width=u.width+"px",n.current.style.height=u.height+"px",b.current=u.width,x.current=u.height}n.current?.isConnected&&(navigator.vibrate(100),n.current.style.transform=`translate3d(${l-(b.current||0)/2}px, ${t-(x.current||0)/2}px, 0)`),L({isDragging:!0,isDrop:!1,navigationTitle:i??R(r?.openUrl),children:T(o,r?.openUrl),x:l,y:t,containerName:a,dropDocumentOutsideOption:r,customData:E})}})},style:{...g},...z,children:v})})}export{le as default};

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

@@ -1,55 +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 FlexLayoutSplitScreenDragBoxContainer_exports = {};
-__export(FlexLayoutSplitScreenDragBoxContainer_exports, {
-  default: () => FlexLayoutSplitScreenDragBoxContainer
-});
-module.exports = __toCommonJS(FlexLayoutSplitScreenDragBoxContainer_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_FlexLayout = __toESM(require("../styles/FlexLayout.module.css"), 1);
-var import_FlexLayoutSplitScreenScrollBox = __toESM(require("./FlexLayoutSplitScreenScrollBox"), 1);
-function FlexLayoutSplitScreenDragBoxContainer({
-  className,
-  children,
-  layoutName,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_FlexLayoutSplitScreenScrollBox.default,
-    {
-      keyName: layoutName,
-      className: `${import_FlexLayout.default["flex-split-screen-drag-box-title-container"]} ${className && className !== "" && className || ""}`,
-      direction: "x",
-      ...props,
-      children
-    }
-  );
-}
-//# sourceMappingURL=FlexLayoutSplitScreenDragBoxContainer.cjs.map
+"use strict";"use client";var u=Object.create;var n=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var L=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var m=(e,t)=>{for(var r in t)n(e,r,{get:t[r],enumerable:!0})},l=(e,t,r,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of y(t))!f.call(e,o)&&o!==r&&n(e,o,{get:()=>t[o],enumerable:!(i=s(t,o))||i.enumerable});return e};var a=(e,t,r)=>(r=e!=null?u(L(e)):{},l(t||!e||!e.__esModule?n(r,"default",{value:e,enumerable:!0}):r,e)),g=e=>l(n({},"__esModule",{value:!0}),e);var B={};m(B,{default:()=>S});module.exports=g(B);var c=require("react/jsx-runtime"),x=a(require("../styles/FlexLayout.module.css"),1),p=a(require("./FlexLayoutSplitScreenScrollBox"),1);function S({className:e,children:t,layoutName:r,...i}){return(0,c.jsx)(p.default,{keyName:r,className:`${x.default["flex-split-screen-drag-box-title-container"]} ${e&&e!==""&&e||""}`,direction:"x",...i,children:t})}

package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxContainer.js

@@ -1,25 +1 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
-import styles from "../styles/FlexLayout.module.css";
-import FlexLayoutSplitScreenScrollBox from "./FlexLayoutSplitScreenScrollBox";
-function FlexLayoutSplitScreenDragBoxContainer({
-  className,
-  children,
-  layoutName,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    FlexLayoutSplitScreenScrollBox,
-    {
-      keyName: layoutName,
-      className: `${styles["flex-split-screen-drag-box-title-container"]} ${className && className !== "" && className || ""}`,
-      direction: "x",
-      ...props,
-      children
-    }
-  );
-}
-export {
-  FlexLayoutSplitScreenDragBoxContainer as default
-};
-//# sourceMappingURL=FlexLayoutSplitScreenDragBoxContainer.js.map
+"use client";import{jsx as a}from"react/jsx-runtime";import i from"../styles/FlexLayout.module.css";import n from"./FlexLayoutSplitScreenScrollBox";function l({className:e,children:t,layoutName:r,...o}){return a(n,{keyName:r,className:`${i["flex-split-screen-drag-box-title-container"]} ${e&&e!==""&&e||""}`,direction:"x",...o,children:t})}export{l as default};

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

@@ -1,63 +1 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var FlexLayoutSplitScreenDragBoxItem_exports = {};
-__export(FlexLayoutSplitScreenDragBoxItem_exports, {
-  default: () => FlexLayoutSplitScreenDragBoxItem
-});
-module.exports = __toCommonJS(FlexLayoutSplitScreenDragBoxItem_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);
-function FlexLayoutSplitScreenDragBoxItem({
-  children,
-  onClose,
-  isActive,
-  ...props
-}) {
-  (0, import_react.useEffect)(() => {
-    import_useDrag.allSplitScreenCount.next(import_useDrag.allSplitScreenCount.value + 1);
-    return () => {
-      if (import_useDrag.allSplitScreenCount.value <= 1) return;
-      import_useDrag.allSplitScreenCount.next(import_useDrag.allSplitScreenCount.value - 1);
-    };
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "div",
-    {
-      className: `${import_FlexLayout.default["flex-split-screen-drag-box-title-item"]} ${isActive ? import_FlexLayout.default["active"] : ""}`,
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: (ev) => onClose(ev), children: "X" })
-      ]
-    }
-  );
-}
-//# sourceMappingURL=FlexLayoutSplitScreenDragBoxItem.cjs.map
+"use strict";var x=Object.create;var i=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var y=(e,t)=>{for(var o in t)i(e,o,{get:t[o],enumerable:!0})},p=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of S(t))!v.call(e,r)&&r!==o&&i(e,r,{get:()=>t[r],enumerable:!(n=s(t,r))||n.enumerable});return e};var d=(e,t,o)=>(o=e!=null?x(f(e)):{},p(t||!e||!e.__esModule?i(o,"default",{value:e,enumerable:!0}):o,e)),g=e=>p(i({},"__esModule",{value:!0}),e);var B={};y(B,{default:()=>m});module.exports=g(B);var a=require("react/jsx-runtime"),c=require("react"),l=require("../hooks/useDrag"),u=d(require("../styles/FlexLayout.module.css"),1);function m({children:e,onClose:t,isActive:o,...n}){return(0,c.useEffect)(()=>(l.allSplitScreenCount.next(l.allSplitScreenCount.value+1),()=>{l.allSplitScreenCount.value<=1||l.allSplitScreenCount.next(l.allSplitScreenCount.value-1)}),[]),(0,a.jsxs)("div",{className:`${u.default["flex-split-screen-drag-box-title-item"]} ${o?u.default.active:""}`,...n,children:[e,(0,a.jsx)("button",{type:"button",onClick:r=>t(r),children:"X"})]})}