@byeolnaerim/flex-layout 0.0.8 → 0.0.10

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

@@ -1,333 +1 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { useRef, useEffect } from 'react';
-import { useDragEvents, dragState } from '../hooks/useDrag';
-import styles from '../styles/FlexLayout.module.css';
-import { isDocumentOut } from '../utils/FlexLayoutUtils';
-
-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 = 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 { handleStart, handleMove, handleEnd } = 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`;
-        }
-        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 && 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}`
-            );
-          }
-        }
-        dragState.next({
-          isDragging: false,
-          isDrop: true,
-          navigationTitle,
-          children: targetComponent,
-          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);
-      }
-      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["flex-split-screen-drag-box-clone"]
-      );
-    }
-  }, []);
-  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
-  ]);
-  useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    const onCtx = (e) => e.preventDefault();
-    el.addEventListener("contextmenu", onCtx);
-    return () => {
-      el.removeEventListener("contextmenu", onCtx);
-    };
-  }, []);
-  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 }) => {
-            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`;
-            }
-            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`;
-            }
-            dragState.next({
-              isDragging: true,
-              isDrop: false,
-              navigationTitle,
-              children: targetComponent,
-              x,
-              y,
-              containerName,
-              dropDocumentOutsideOption,
-              customData
-            });
-          }
-        });
-      },
-      style: { ...style },
-      ...props,
-      children
-    }
-  ) });
-}
-
-export { FlexLayoutSplitScreenDragBox as default };
-//# sourceMappingURL=FlexLayoutSplitScreenDragBox.js.map
-//# 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,32 +1 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var styles = require('../styles/FlexLayout.module.css');
-var FlexLayoutSplitScreenScrollBox = require('./FlexLayoutSplitScreenScrollBox');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-var FlexLayoutSplitScreenScrollBox__default = /*#__PURE__*/_interopDefault(FlexLayoutSplitScreenScrollBox);
-
-function FlexLayoutSplitScreenDragBoxContainer({
-  className,
-  children,
-  layoutName,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    FlexLayoutSplitScreenScrollBox__default.default,
-    {
-      keyName: layoutName,
-      className: `${styles__default.default["flex-split-screen-drag-box-title-container"]} ${className && className !== "" && className || ""}`,
-      direction: "x",
-      ...props,
-      children
-    }
-  );
-}
-
-module.exports = FlexLayoutSplitScreenDragBoxContainer;
-//# sourceMappingURL=FlexLayoutSplitScreenDragBoxContainer.cjs.map
-//# 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 @@
-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
-//# 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,40 +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');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function FlexLayoutSplitScreenDragBoxItem({
-  children,
-  onClose,
-  isActive,
-  ...props
-}) {
-  react.useEffect(() => {
-    useDrag.allSplitScreenCount.next(useDrag.allSplitScreenCount.value + 1);
-    return () => {
-      if (useDrag.allSplitScreenCount.value <= 1) return;
-      useDrag.allSplitScreenCount.next(useDrag.allSplitScreenCount.value - 1);
-    };
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: `${styles__default.default["flex-split-screen-drag-box-title-item"]} ${isActive ? styles__default.default["active"] : ""}`,
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: (ev) => onClose(ev), children: "X" })
-      ]
-    }
-  );
-}
-
-module.exports = FlexLayoutSplitScreenDragBoxItem;
-//# sourceMappingURL=FlexLayoutSplitScreenDragBoxItem.cjs.map
-//# 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"})]})}

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

@@ -1,34 +1 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useEffect } from 'react';
-import { allSplitScreenCount } from '../hooks/useDrag';
-import styles from '../styles/FlexLayout.module.css';
-
-function FlexLayoutSplitScreenDragBoxItem({
-  children,
-  onClose,
-  isActive,
-  ...props
-}) {
-  useEffect(() => {
-    allSplitScreenCount.next(allSplitScreenCount.value + 1);
-    return () => {
-      if (allSplitScreenCount.value <= 1) return;
-      allSplitScreenCount.next(allSplitScreenCount.value - 1);
-    };
-  }, []);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: `${styles["flex-split-screen-drag-box-title-item"]} ${isActive ? styles["active"] : ""}`,
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsx("button", { type: "button", onClick: (ev) => onClose(ev), children: "X" })
-      ]
-    }
-  );
-}
-
-export { FlexLayoutSplitScreenDragBoxItem as default };
-//# sourceMappingURL=FlexLayoutSplitScreenDragBoxItem.js.map
-//# sourceMappingURL=FlexLayoutSplitScreenDragBoxItem.js.map
+import{jsx as p,jsxs as c}from"react/jsx-runtime";import{useEffect as a}from"react";import{allSplitScreenCount as e}from"../hooks/useDrag";import t from"../styles/FlexLayout.module.css";function u({children:o,onClose:r,isActive:l,...n}){return a(()=>(e.next(e.value+1),()=>{e.value<=1||e.next(e.value-1)}),[]),c("div",{className:`${t["flex-split-screen-drag-box-title-item"]} ${l?t.active:""}`,...n,children:[o,p("button",{type:"button",onClick:i=>r(i),children:"X"})]})}export{u as default};

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

@@ -1,30 +1 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var styles = require('../styles/FlexLayout.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function FlexLayoutSplitScreenDragBoxTitleMore({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
-    {
-      ...props,
-      className: `${styles__default.default["flex-split-screen-drag-box-title-more"]} ${className || ""}`,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "." }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "." }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "." })
-      ]
-    }
-  );
-}
-
-module.exports = FlexLayoutSplitScreenDragBoxTitleMore;
-//# sourceMappingURL=FlexLayoutSplitScreenDragBoxTitleMore.cjs.map
-//# sourceMappingURL=FlexLayoutSplitScreenDragBoxTitleMore.cjs.map
+"use strict";var u=Object.create;var l=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var L=(t,e)=>{for(var r in e)l(t,r,{get:e[r],enumerable:!0})},p=(t,e,r,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of c(e))!f.call(t,n)&&n!==r&&l(t,n,{get:()=>e[n],enumerable:!(a=x(e,n))||a.enumerable});return t};var M=(t,e,r)=>(r=t!=null?u(m(t)):{},p(e||!t||!t.__esModule?l(r,"default",{value:t,enumerable:!0}):r,t)),S=t=>p(l({},"__esModule",{value:!0}),t);var T={};L(T,{default:()=>i});module.exports=S(T);var o=require("react/jsx-runtime"),s=M(require("../styles/FlexLayout.module.css"),1);function i({className:t,...e}){return(0,o.jsxs)("button",{...e,className:`${s.default["flex-split-screen-drag-box-title-more"]} ${t||""}`,children:[(0,o.jsx)("span",{children:"."}),(0,o.jsx)("span",{children:"."}),(0,o.jsx)("span",{children:"."})]})}

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

@@ -1,24 +1 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import styles from '../styles/FlexLayout.module.css';
-
-function FlexLayoutSplitScreenDragBoxTitleMore({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      ...props,
-      className: `${styles["flex-split-screen-drag-box-title-more"]} ${className || ""}`,
-      children: [
-        /* @__PURE__ */ jsx("span", { children: "." }),
-        /* @__PURE__ */ jsx("span", { children: "." }),
-        /* @__PURE__ */ jsx("span", { children: "." })
-      ]
-    }
-  );
-}
-
-export { FlexLayoutSplitScreenDragBoxTitleMore as default };
-//# sourceMappingURL=FlexLayoutSplitScreenDragBoxTitleMore.js.map
-//# sourceMappingURL=FlexLayoutSplitScreenDragBoxTitleMore.js.map
+import{jsx as t,jsxs as l}from"react/jsx-runtime";import o from"../styles/FlexLayout.module.css";function n({className:e,...r}){return l("button",{...r,className:`${o["flex-split-screen-drag-box-title-more"]} ${e||""}`,children:[t("span",{children:"."}),t("span",{children:"."}),t("span",{children:"."})]})}export{n as default};

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

@@ -1,109 +1 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var rxjs = require('rxjs');
-var operators = require('rxjs/operators');
-var FlexLayoutContainerStore = require('../store/FlexLayoutContainerStore');
-var listScroll = require('../styles/listScroll.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var listScroll__default = /*#__PURE__*/_interopDefault(listScroll);
-
-const FlexLayoutSplitScreenScrollBox = ({
-  className,
-  children,
-  keyName,
-  direction,
-  isDefaultScrollStyle = false,
-  ...props
-}) => {
-  const scrollRef = react.useRef(null);
-  const [isMouseDown, setIsMouseDown] = react.useState(false);
-  const scrollEventSubject = react.useRef(new rxjs.Subject());
-  react.useEffect(() => {
-    const mouseUpSubscribe = rxjs.fromEvent(
-      window,
-      "mouseup"
-    ).subscribe(() => {
-      setIsMouseDown(false);
-    });
-    const scrollEventSubscribe = scrollEventSubject.current.pipe(operators.throttleTime(70)).subscribe((position) => {
-      FlexLayoutContainerStore.setScrollPosition(keyName, position);
-    });
-    const scrollSubscribe = FlexLayoutContainerStore.getScrollPosition(keyName).pipe(operators.take(1)).subscribe((position) => {
-      if (scrollRef.current && position) {
-        scrollRef.current.scrollLeft = position.x;
-        scrollRef.current.scrollTop = position.y;
-      }
-    });
-    return () => {
-      FlexLayoutContainerStore.removeScrollPosition(keyName);
-      mouseUpSubscribe.unsubscribe();
-      scrollSubscribe.unsubscribe();
-      scrollEventSubscribe.unsubscribe();
-    };
-  }, [keyName]);
-  react.useEffect(() => {
-    if (!scrollRef.current) return;
-    let animationFrameId = null;
-    const handleWheel = (event) => {
-      if (!scrollRef.current || direction !== "x") return;
-      if (scrollRef.current.matches(":hover")) {
-        event.preventDefault();
-        const { deltaY } = event;
-        const newScrollLeft = scrollRef.current.scrollLeft + deltaY;
-        if (animationFrameId) {
-          cancelAnimationFrame(animationFrameId);
-        }
-        animationFrameId = requestAnimationFrame(() => {
-          scrollRef.current.scrollLeft = newScrollLeft;
-          scrollEventSubject.current.next({
-            x: newScrollLeft,
-            y: scrollRef.current.scrollTop
-          });
-          animationFrameId = null;
-        });
-      }
-    };
-    scrollRef.current.addEventListener("wheel", handleWheel, {
-      passive: false
-    });
-    return () => {
-      scrollRef.current?.removeEventListener("wheel", handleWheel);
-    };
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref: scrollRef,
-      onMouseUp: () => setIsMouseDown(false),
-      onMouseDown: () => setIsMouseDown(true),
-      onMouseMove: (event) => {
-        if (!scrollRef.current || !isMouseDown || direction !== "x")
-          return;
-        scrollRef.current.scrollLeft += event.movementX * -1;
-        scrollEventSubject.current.next({
-          x: scrollRef.current.scrollLeft,
-          y: scrollRef.current.scrollTop
-        });
-      },
-      onScroll: () => {
-        if (!scrollRef.current) return;
-        scrollEventSubject.current.next({
-          x: scrollRef.current.scrollLeft,
-          y: scrollRef.current.scrollTop
-        });
-      },
-      className: `${className || ""} ${isDefaultScrollStyle ? listScroll__default.default["default-scroll"] : listScroll__default.default["list-scroll"]} ${direction ? listScroll__default.default[direction] : ""}`,
-      ...props,
-      children
-    }
-  );
-};
-var FlexLayoutSplitScreenScrollBox_default = react.memo(FlexLayoutSplitScreenScrollBox);
-
-module.exports = FlexLayoutSplitScreenScrollBox_default;
-//# sourceMappingURL=FlexLayoutSplitScreenScrollBox.cjs.map
-//# sourceMappingURL=FlexLayoutSplitScreenScrollBox.cjs.map
+"use strict";"use client";var F=Object.create;var S=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var D=(r,t)=>{for(var l in t)S(r,l,{get:t[l],enumerable:!0})},M=(r,t,l,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let c of h(t))!P.call(r,c)&&c!==l&&S(r,c,{get:()=>t[c],enumerable:!(s=T(t,c))||s.enumerable});return r};var A=(r,t,l)=>(l=r!=null?F(y(r)):{},M(t||!r||!r.__esModule?S(l,"default",{value:r,enumerable:!0}):l,r)),B=r=>M(S({},"__esModule",{value:!0}),r);var $={};D($,{default:()=>g});module.exports=B($);var E=require("react/jsx-runtime"),o=require("react"),p=require("rxjs"),x=require("rxjs/operators"),i=require("../store/FlexLayoutContainerStore"),b=A(require("../styles/listScroll.module.css"),1);const H=({className:r,children:t,keyName:l,direction:s,isDefaultScrollStyle:c=!1,...d})=>{const e=(0,o.useRef)(null),[w,v]=(0,o.useState)(!1),f=(0,o.useRef)(new p.Subject);return(0,o.useEffect)(()=>{const n=(0,p.fromEvent)(window,"mouseup").subscribe(()=>{v(!1)}),a=f.current.pipe((0,x.throttleTime)(70)).subscribe(u=>{(0,i.setScrollPosition)(l,u)}),m=(0,i.getScrollPosition)(l).pipe((0,x.take)(1)).subscribe(u=>{e.current&&u&&(e.current.scrollLeft=u.x,e.current.scrollTop=u.y)});return()=>{(0,i.removeScrollPosition)(l),n.unsubscribe(),m.unsubscribe(),a.unsubscribe()}},[l]),(0,o.useEffect)(()=>{if(!e.current)return;let n=null;const a=m=>{if(!(!e.current||s!=="x")&&e.current.matches(":hover")){m.preventDefault();const{deltaY:u}=m,L=e.current.scrollLeft+u;n&&cancelAnimationFrame(n),n=requestAnimationFrame(()=>{e.current.scrollLeft=L,f.current.next({x:L,y:e.current.scrollTop}),n=null})}};return e.current.addEventListener("wheel",a,{passive:!1}),()=>{e.current?.removeEventListener("wheel",a)}},[]),(0,E.jsx)("div",{ref:e,onMouseUp:()=>v(!1),onMouseDown:()=>v(!0),onMouseMove:n=>{!e.current||!w||s!=="x"||(e.current.scrollLeft+=n.movementX*-1,f.current.next({x:e.current.scrollLeft,y:e.current.scrollTop}))},onScroll:()=>{e.current&&f.current.next({x:e.current.scrollLeft,y:e.current.scrollTop})},className:`${r||""} ${c?b.default["default-scroll"]:b.default["list-scroll"]} ${s?b.default[s]:""}`,...d,children:t})};var g=(0,o.memo)(H);