@byeolnaerim/flex-layout 0.0.8 → 0.0.10

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

@@ -1,339 +1 @@
-'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);
-
-const MAX_STEP = 18;
-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 FlexLayoutSplitScreenDragBox({
-  onMouseDown,
-  onTouchStart,
-  dropEndCallback,
-  style,
-  navigationTitle,
-  targetComponent,
-  containerName,
-  children,
-  className,
-  dropDocumentOutsideOption,
-  screenKey = Array.from(
-    window.crypto.getRandomValues(new Uint32Array(16)),
-    (e) => e.toString(32).padStart(2, "0")
-  ).join(""),
-  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({
-    isBlockingActiveInput
-  });
-  const handleMoveWrapper = (event) => {
-    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;
-    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.left = `${x2 - (clonedWidth.current || 0) / 2}px`;
-        clonedNodeRef.current.style.top = `${y2 - (clonedHeight.current || 0) / 2}px`;
-      },
-      moveingCallback: ({ 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`;
-        }
-        useDrag.dragState.next({
-          isDragging: true,
-          isDrop: false,
-          navigationTitle,
-          children: targetComponent,
-          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 };
-    handleEnd({
-      event,
-      dragEndCallback: ({ x, y }) => {
-        const href = hrefUrlRef.current;
-        if (clonedNodeRef.current) clonedNodeRef.current.remove();
-        if (dropDocumentOutsideOption && 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}`
-            );
-          }
-        }
-        useDrag.dragState.next({
-          isDragging: false,
-          isDrop: true,
-          navigationTitle,
-          children: targetComponent,
-          x,
-          y,
-          containerName,
-          dropDocumentOutsideOption,
-          dropEndCallback,
-          screenKey,
-          customData
-        });
-      }
-    });
-  };
-  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);
-      }
-      if (navigationTitle) {
-        const title = document.createElement("span");
-        title.textContent = navigationTitle;
-        clone.prepend(title);
-      }
-      clone.style.position = "fixed";
-      clonedNodeRef.current = clone;
-      clonedNodeRef.current.classList.add(
-        styles__default.default["flex-split-screen-drag-box-clone"]
-      );
-    }
-  }, []);
-  react.useEffect(() => {
-    const moveEvents = [
-      "mousemove",
-      "touchmove"
-    ];
-    const endEvents = ["mouseup", "touchend"];
-    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
-  ]);
-  react.useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    const onCtx = (e) => e.preventDefault();
-    el.addEventListener("contextmenu", onCtx);
-    return () => {
-      el.removeEventListener("contextmenu", onCtx);
-    };
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: `${className || ""} ${styles__default.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 }) => {
-            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.left = `${x - (clonedWidth.current || 0) / 2}px`;
-              clonedNodeRef.current.style.top = `${y - (clonedHeight.current || 0) / 2}px`;
-            }
-            useDrag.dragState.next({
-              isDragging: true,
-              isDrop: false,
-              navigationTitle,
-              children: targetComponent,
-              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.left = `${x - (clonedWidth.current || 0) / 2}px`;
-              clonedNodeRef.current.style.top = `${y - (clonedHeight.current || 0) / 2}px`;
-            }
-            useDrag.dragState.next({
-              isDragging: true,
-              isDrop: false,
-              navigationTitle,
-              children: targetComponent,
-              x,
-              y,
-              containerName,
-              dropDocumentOutsideOption,
-              customData
-            });
-          }
-        });
-      },
-      style: { ...style },
-      ...props,
-      children
-    }
-  ) });
-}
-
-module.exports = FlexLayoutSplitScreenDragBox;
-//# sourceMappingURL=FlexLayoutSplitScreenDragBox.cjs.map
-//# 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})})}

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;