@byeolnaerim/flex-layout 0.0.5 → 0.0.7

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

@@ -0,0 +1,27 @@
+import { CSSProperties, HTMLAttributes, MouseEvent, ReactElement, ReactNode, RefObject, TouchEvent } from "react";
+export interface FlexLayoutSplitScreenDragBoxProps<E extends HTMLElement = HTMLElement> extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    onMouseDown?: (event: MouseEvent<HTMLDivElement>) => void;
+    onTouchStart?: (event: TouchEvent<HTMLDivElement>) => void;
+    dropEndCallback?: ({ x, y, containerName, }: {
+        x: number;
+        y: number;
+        containerName: string;
+    }) => void;
+    style?: CSSProperties;
+    navigationTitle?: string;
+    targetComponent?: ReactElement;
+    dropDocumentOutsideOption?: DropDocumentOutsideOption;
+    children: ReactNode;
+    containerName: string;
+    screenKey?: string;
+    isBlockingActiveInput?: boolean;
+    customData?: Record<string, string | number | boolean | undefined>;
+    scrollTargetRef?: RefObject<E>;
+}
+export interface DropDocumentOutsideOption {
+    openUrl: string;
+    widthRatio?: number;
+    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;

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

@@ -0,0 +1,333 @@
+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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutSplitScreenDragBox.tsx"],"names":["x","y"],"mappings":"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","file":"FlexLayoutSplitScreenDragBox.js","sourcesContent":["import {\r\n\tCSSProperties,\r\n\tHTMLAttributes,\r\n\tMouseEvent,\r\n\tReactElement,\r\n\tReactNode,\r\n\tRefObject,\r\n\tTouchEvent,\r\n\tuseEffect,\r\n\tuseRef,\r\n} from \"react\";\r\nimport { dragState, useDragEvents } from \"../hooks/useDrag\";\r\n\r\nimport styles from \"../styles/FlexLayout.module.css\";\r\nimport { isDocumentOut } from \"../utils/FlexLayoutUtils\";\r\nconst MAX_STEP = 18;\r\n\r\nfunction shouldAllowViewportScroll(x: number, y: number) {\r\n\tconst w = window.innerWidth;\r\n\tconst h = window.innerHeight;\r\n\tconst marginX = w * 0.15;\r\n\tconst marginY = h * 0.15;\r\n\treturn (\r\n\t\tx < marginX || // 왼쪽 15 %\r\n\t\tx > w - marginX || // 오른쪽 15 %\r\n\t\ty < marginY || // 상단 15 %\r\n\t\ty > h - marginY // 하단 15 %\r\n\t);\r\n}\r\n\r\nfunction edgeVelocity(x: number, y: number) {\r\n\tconst w = window.innerWidth,\r\n\t\th = window.innerHeight;\r\n\tconst mx = w * 0.15,\r\n\t\tmy = h * 0.15;\r\n\r\n\t/* X 축 */\r\n\tlet vx = 0;\r\n\tif (x < mx)\r\n\t\t// ← 왼쪽\r\n\t\tvx = -((mx - x) / mx) * MAX_STEP;\r\n\telse if (x > w - mx)\r\n\t\t// → 오른쪽\r\n\t\tvx = ((x - (w - mx)) / mx) * MAX_STEP;\r\n\r\n\t/* Y 축 */\r\n\tlet vy = 0;\r\n\tif (y < my)\r\n\t\t// ↑ 상단\r\n\t\tvy = -((my - y) / my) * MAX_STEP;\r\n\telse if (y > h - my)\r\n\t\t// ↓ 하단\r\n\t\tvy = ((y - (h - my)) / my) * MAX_STEP;\r\n\r\n\treturn { vx, vy };\r\n}\r\nfunction calcVelocity(dx: number, dy: number, x: number, y: number) {\r\n\tconst w = window.innerWidth,\r\n\t\th = window.innerHeight;\r\n\tconst marginX = w * 0.15,\r\n\t\tmarginY = h * 0.15;\r\n\r\n\t/* 거리가 0(가장자리)~margin 사이면 1~4 배 가중치 */\r\n\tconst multX =\r\n\t\tx < marginX\r\n\t\t\t? 1 + ((marginX - x) / marginX) * 3\r\n\t\t\t: x > w - marginX\r\n\t\t\t\t? 1 + ((x - (w - marginX)) / marginX) * 3\r\n\t\t\t\t: 1;\r\n\r\n\tconst multY =\r\n\t\ty < marginY\r\n\t\t\t? 1 + ((marginY - y) / marginY) * 3\r\n\t\t\t: y > h - marginY\r\n\t\t\t\t? 1 + ((y - (h - marginY)) / marginY) * 3\r\n\t\t\t\t: 1;\r\n\r\n\t/* ←→·↑↓ **반대 방향**으로 스크롤 */\r\n\treturn { vx: -dx * multX, vy: -dy * multY };\r\n}\r\n\r\nexport interface FlexLayoutSplitScreenDragBoxProps<\r\n\tE extends HTMLElement = HTMLElement,\r\n> extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\r\n\tonMouseDown?: (event: MouseEvent<HTMLDivElement>) => void;\r\n\tonTouchStart?: (event: TouchEvent<HTMLDivElement>) => void;\r\n\tdropEndCallback?: ({\r\n\t\tx,\r\n\t\ty,\r\n\t\tcontainerName,\r\n\t}: {\r\n\t\tx: number;\r\n\t\ty: number;\r\n\t\tcontainerName: string;\r\n\t}) => void;\r\n\tstyle?: CSSProperties;\r\n\tnavigationTitle?: string;\r\n\ttargetComponent?: ReactElement;\r\n\tdropDocumentOutsideOption?: DropDocumentOutsideOption;\r\n\tchildren: ReactNode;\r\n\tcontainerName: string;\r\n\tscreenKey?: string;\r\n\tisBlockingActiveInput?: boolean;\r\n\tcustomData?: Record<string, string | number | boolean | undefined>;\r\n\tscrollTargetRef?: RefObject<E>;\r\n}\r\n\r\nexport interface DropDocumentOutsideOption {\r\n\topenUrl: string;\r\n\twidthRatio?: number;\r\n\theightRatio?: number;\r\n\tisNewTap?: boolean;\r\n}\r\n\r\nexport default function FlexLayoutSplitScreenDragBox<E extends HTMLElement>({\r\n\tonMouseDown,\r\n\tonTouchStart,\r\n\tdropEndCallback,\r\n\tstyle,\r\n\tnavigationTitle,\r\n\ttargetComponent,\r\n\tcontainerName,\r\n\tchildren,\r\n\tclassName,\r\n\tdropDocumentOutsideOption,\r\n\tscreenKey = Array.from(\r\n\t\twindow.crypto.getRandomValues(new Uint32Array(16)),\r\n\t\t(e) => e.toString(32).padStart(2, \"0\"),\r\n\t).join(\"\"),\r\n\tisBlockingActiveInput = false,\r\n\tcustomData = {},\r\n\tscrollTargetRef,\r\n\t...props\r\n}: FlexLayoutSplitScreenDragBoxProps) {\r\n\t//const lastTouch = useRef<{ x: number; y: number } | null>(null);\r\n\tconst scrollRAF = useRef<number | null>(null); // 애니메이션 루프 id\r\n\tconst velocity = useRef<{ vx: number; vy: number }>({ vx: 0, vy: 0 });\r\n\tconst ref = useRef<HTMLDivElement>(null);\r\n\tconst clonedNodeRef = useRef<HTMLDivElement | null>(null);\r\n\tconst clonedWidth = useRef<number | null>(null);\r\n\tconst clonedHeight = useRef<number | null>(null);\r\n\tconst hrefUrlRef = useRef<string>(\"\");\r\n\r\n\tconst { handleStart, handleMove, handleEnd } = useDragEvents({\r\n\t\tisBlockingActiveInput,\r\n\t});\r\n\tconst handleMoveWrapper = (event: Event) => {\r\n\t\tlet allowScrollEdge = false;\r\n\t\tlet x = 0;\r\n\t\tlet y = 0;\r\n\r\n\t\tif (event.type === \"touchmove\") {\r\n\t\t\tconst t = (event as globalThis.TouchEvent).touches[0];\r\n\t\t\tx = t.clientX;\r\n\t\t\ty = t.clientY;\r\n\t\t} else {\r\n\t\t\tconst m = event as globalThis.MouseEvent;\r\n\t\t\tx = m.clientX;\r\n\t\t\ty = m.clientY;\r\n\t\t}\r\n\t\tconst { vx, vy } = edgeVelocity(x, y);\r\n\t\tconst inEdge = vx !== 0 || vy !== 0;\r\n\r\n\t\tallowScrollEdge = shouldAllowViewportScroll(x, y);\r\n\t\t/* 중앙 영역이면 스크롤 막음, 가장자리면 허용 */\r\n\t\tif (clonedNodeRef.current?.isConnected && !inEdge) {\r\n\t\t\tevent.preventDefault(); // 화면 고정\r\n\t\t\tif (scrollRAF.current) {\r\n\t\t\t\tcancelAnimationFrame(scrollRAF.current);\r\n\t\t\t\tscrollRAF.current = null;\r\n\t\t\t}\r\n\t\t\t// velocity.current = { vx: 0, vy: 0 };\r\n\t\t}\r\n\r\n\t\tif (\r\n\t\t\tclonedNodeRef.current?.isConnected &&\r\n\t\t\tinEdge\r\n\t\t\t//&&lastTouch.current\r\n\t\t) {\r\n\t\t\tevent.preventDefault();\r\n\t\t\t// const dx = x - lastTouch.current.x; // 손가락 이동량\r\n\t\t\t// const dy = y - lastTouch.current.y;\r\n\r\n\t\t\tvelocity.current = { vx, vy }; // ← X·Y 둘 다 들어갈 수 있음\r\n\r\n\t\t\t// const { vx, vy } = calcVelocity(dx, dy, x, y);\r\n\r\n\t\t\tif (!scrollRAF.current) {\r\n\t\t\t\tconst step = () => {\r\n\t\t\t\t\tconst target =\r\n\t\t\t\t\t\tscrollTargetRef?.current ??\r\n\t\t\t\t\t\t(document.scrollingElement as HTMLElement | null);\r\n\r\n\t\t\t\t\tif (target?.scrollBy) {\r\n\t\t\t\t\t\ttarget.scrollBy(\r\n\t\t\t\t\t\t\tvelocity.current.vx,\r\n\t\t\t\t\t\t\tvelocity.current.vy,\r\n\t\t\t\t\t\t);\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\twindow.scrollBy(\r\n\t\t\t\t\t\t\tvelocity.current.vx,\r\n\t\t\t\t\t\t\tvelocity.current.vy,\r\n\t\t\t\t\t\t);\r\n\t\t\t\t\t}\r\n\t\t\t\t\tif (\r\n\t\t\t\t\t\tvelocity.current.vx === 0 &&\r\n\t\t\t\t\t\tvelocity.current.vy === 0\r\n\t\t\t\t\t) {\r\n\t\t\t\t\t\tscrollRAF.current = null;\r\n\t\t\t\t\t\treturn;\r\n\t\t\t\t\t}\r\n\t\t\t\t\tscrollRAF.current = requestAnimationFrame(step);\r\n\t\t\t\t};\r\n\t\t\t\tscrollRAF.current = requestAnimationFrame(step);\r\n\t\t\t}\r\n\r\n\t\t\t//lastTouch.current = { x, y };\r\n\t\t}\r\n\t\tif (event.type !== \"touchmove\") {\r\n\t\t\t/* 마우스 · 펜 → 항상 고정 */\r\n\t\t\tevent.preventDefault();\r\n\t\t}\r\n\t\thandleMove({\r\n\t\t\tevent,\r\n\t\t\tnotDragCallback: ({ x, y }) => {\r\n\t\t\t\tif (clonedNodeRef.current) clonedNodeRef.current.remove();\r\n\t\t\t},\r\n\t\t\tdragStartCallback: ({ x, y }) => {\r\n\t\t\t\tif (!clonedNodeRef.current) return;\r\n\t\t\t\tnavigator.vibrate(100);\r\n\t\t\t\tclonedNodeRef.current.style.left = `${x - (clonedWidth.current || 0) / 2}px`;\r\n\t\t\t\tclonedNodeRef.current.style.top = `${y - (clonedHeight.current || 0) / 2}px`;\r\n\t\t\t},\r\n\t\t\tmoveingCallback: ({ x, y }) => {\r\n\t\t\t\tif (clonedNodeRef.current?.isConnected) {\r\n\t\t\t\t\tclonedNodeRef.current.style.left = `${x - (clonedWidth.current || 0) / 2}px`;\r\n\t\t\t\t\tclonedNodeRef.current.style.top = `${y - (clonedHeight.current || 0) / 2}px`;\r\n\t\t\t\t}\r\n\r\n\t\t\t\tdragState.next({\r\n\t\t\t\t\tisDragging: true,\r\n\t\t\t\t\tisDrop: false,\r\n\t\t\t\t\tnavigationTitle,\r\n\t\t\t\t\tchildren: targetComponent,\r\n\t\t\t\t\tx,\r\n\t\t\t\t\ty,\r\n\t\t\t\t\tcontainerName,\r\n\t\t\t\t\tdropDocumentOutsideOption,\r\n\t\t\t\t\tcustomData,\r\n\t\t\t\t});\r\n\t\t\t},\r\n\t\t});\r\n\t};\r\n\tconst handleEndWrapper = (event: Event) => {\r\n\t\tif (scrollRAF.current !== null) {\r\n\t\t\tcancelAnimationFrame(scrollRAF.current);\r\n\t\t\tscrollRAF.current = null;\r\n\t\t}\r\n\t\tvelocity.current = { vx: 0, vy: 0 };\r\n\t\t//lastTouch.current = null;\r\n\t\thandleEnd({\r\n\t\t\tevent,\r\n\t\t\tdragEndCallback: ({ x, y }) => {\r\n\t\t\t\tconst href = hrefUrlRef.current;\r\n\t\t\t\tif (clonedNodeRef.current) clonedNodeRef.current.remove();\r\n\t\t\t\tif (dropDocumentOutsideOption && isDocumentOut({ x, y })) {\r\n\t\t\t\t\tif (\r\n\t\t\t\t\t\tdropDocumentOutsideOption.isNewTap ||\r\n\t\t\t\t\t\t(!dropDocumentOutsideOption.widthRatio &&\r\n\t\t\t\t\t\t\t!dropDocumentOutsideOption.heightRatio)\r\n\t\t\t\t\t) {\r\n\t\t\t\t\t\twindow.open(href, \"_blank\");\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tconst width =\r\n\t\t\t\t\t\t\twindow.innerWidth *\r\n\t\t\t\t\t\t\t(dropDocumentOutsideOption.widthRatio || 1);\r\n\t\t\t\t\t\tconst height =\r\n\t\t\t\t\t\t\twindow.innerHeight *\r\n\t\t\t\t\t\t\t(dropDocumentOutsideOption.heightRatio || 1);\r\n\t\t\t\t\t\twindow.open(\r\n\t\t\t\t\t\t\thref,\r\n\t\t\t\t\t\t\t\"_blank\",\r\n\t\t\t\t\t\t\t`width=${width},height=${height},left=${window.screenLeft - x * -1 - width},top=${window.screenTop + y}`,\r\n\t\t\t\t\t\t);\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t\tdragState.next({\r\n\t\t\t\t\tisDragging: false,\r\n\t\t\t\t\tisDrop: true,\r\n\t\t\t\t\tnavigationTitle,\r\n\t\t\t\t\tchildren: targetComponent,\r\n\t\t\t\t\tx,\r\n\t\t\t\t\ty,\r\n\t\t\t\t\tcontainerName,\r\n\t\t\t\t\tdropDocumentOutsideOption,\r\n\t\t\t\t\tdropEndCallback,\r\n\t\t\t\t\tscreenKey,\r\n\t\t\t\t\tcustomData,\r\n\t\t\t\t});\r\n\t\t\t},\r\n\t\t});\r\n\t};\r\n\tuseEffect(() => {\r\n\t\tif (ref.current) {\r\n\t\t\tconst clone = ref.current.cloneNode(true) as HTMLDivElement; //document.createElement('div');\r\n\t\t\tconst originRect = ref.current.getBoundingClientRect();\r\n\t\t\tclone.style.width = originRect.width + \"px\";\r\n\t\t\tclone.style.height = originRect.height + \"px\";\r\n\t\t\tclone.style.opacity = \"0.3\";\r\n\t\t\tclone.style.backdropFilter = \"blur(6px)\";\r\n\t\t\tclonedWidth.current = originRect.width;\r\n\t\t\tclonedHeight.current = originRect.height;\r\n\t\t\tif (dropDocumentOutsideOption?.openUrl) {\r\n\t\t\t\threfUrlRef.current = dropDocumentOutsideOption!.openUrl;\r\n\t\t\t\tconst href = document.createElement(\"span\");\r\n\t\t\t\thref.textContent = hrefUrlRef.current;\r\n\t\t\t\tclone.prepend(href);\r\n\t\t\t}\r\n\r\n\t\t\tif (navigationTitle) {\r\n\t\t\t\tconst title = document.createElement(\"span\");\r\n\t\t\t\ttitle.textContent = navigationTitle;\r\n\t\t\t\tclone.prepend(title);\r\n\t\t\t}\r\n\t\t\tclone.style.position = \"fixed\";\r\n\t\t\tclonedNodeRef.current = clone;\r\n\t\t\tclonedNodeRef.current.classList.add(\r\n\t\t\t\tstyles[\"flex-split-screen-drag-box-clone\"],\r\n\t\t\t);\r\n\t\t}\r\n\t}, []);\r\n\r\n\tuseEffect(() => {\r\n\t\tconst moveEvents: Array<keyof WindowEventMap> = [\r\n\t\t\t\"mousemove\",\r\n\t\t\t\"touchmove\",\r\n\t\t];\r\n\t\tconst endEvents: Array<keyof WindowEventMap> = [\"mouseup\", \"touchend\"];\r\n\r\n\t\tmoveEvents.forEach((eventName) => {\r\n\t\t\twindow.addEventListener(eventName, handleMoveWrapper, {\r\n\t\t\t\tpassive: false,\r\n\t\t\t});\r\n\t\t});\r\n\t\tendEvents.forEach((eventName) => {\r\n\t\t\twindow.addEventListener(eventName, handleEndWrapper);\r\n\t\t});\r\n\t\treturn () => {\r\n\t\t\tmoveEvents.forEach((eventName) => {\r\n\t\t\t\twindow.removeEventListener(eventName, handleMoveWrapper);\r\n\t\t\t});\r\n\t\t\tendEvents.forEach((eventName) => {\r\n\t\t\t\twindow.removeEventListener(eventName, handleEndWrapper);\r\n\t\t\t});\r\n\t\t};\r\n\t}, [\r\n\t\tcustomData,\r\n\t\ttargetComponent,\r\n\t\tdropDocumentOutsideOption,\r\n\t\tscreenKey,\r\n\t\tisBlockingActiveInput,\r\n\t\tcontainerName,\r\n\t\tnavigationTitle,\r\n\t\tdropEndCallback,\r\n\t]);\r\n\tuseEffect(() => {\r\n\t\tconst el = ref.current;\r\n\t\tif (!el) return;\r\n\r\n\t\tconst onCtx = (e: Event) => e.preventDefault();\r\n\r\n\t\tel.addEventListener(\"contextmenu\", onCtx);\r\n\r\n\t\treturn () => {\r\n\t\t\tel.removeEventListener(\"contextmenu\", onCtx);\r\n\t\t};\r\n\t}, []);\r\n\treturn (\r\n\t\t<>\r\n\t\t\t<div\r\n\t\t\t\tclassName={`${className || \"\"} ${styles[\"flex-split-screen-drag-box\"]}`}\r\n\t\t\t\tref={ref}\r\n\t\t\t\tonContextMenu={(e) => e.preventDefault()}\r\n\t\t\t\tonMouseDown={(ev) => {\r\n\t\t\t\t\tif (onMouseDown) {\r\n\t\t\t\t\t\tPromise.resolve().then(() => onMouseDown(ev));\r\n\t\t\t\t\t}\r\n\t\t\t\t\thandleStart({\r\n\t\t\t\t\t\tevent: ev,\r\n\t\t\t\t\t\tdragStartCallback: ({ x, y }) => {\r\n\t\t\t\t\t\t\tif (clonedNodeRef.current) {\r\n\t\t\t\t\t\t\t\tdocument.body.appendChild(\r\n\t\t\t\t\t\t\t\t\tclonedNodeRef.current,\r\n\t\t\t\t\t\t\t\t);\r\n\t\t\t\t\t\t\t\tif (ref.current) {\r\n\t\t\t\t\t\t\t\t\tconst originRect =\r\n\t\t\t\t\t\t\t\t\t\tref.current.getBoundingClientRect();\r\n\t\t\t\t\t\t\t\t\tclonedNodeRef.current.style.width =\r\n\t\t\t\t\t\t\t\t\t\toriginRect.width + \"px\";\r\n\t\t\t\t\t\t\t\t\tclonedNodeRef.current.style.height =\r\n\t\t\t\t\t\t\t\t\t\toriginRect.height + \"px\";\r\n\r\n\t\t\t\t\t\t\t\t\tclonedWidth.current = originRect.width;\r\n\t\t\t\t\t\t\t\t\tclonedHeight.current = originRect.height;\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\tif (clonedNodeRef.current?.isConnected) {\r\n\t\t\t\t\t\t\t\tnavigator.vibrate(100);\r\n\t\t\t\t\t\t\t\tclonedNodeRef.current.style.left = `${x - (clonedWidth.current || 0) / 2}px`;\r\n\t\t\t\t\t\t\t\tclonedNodeRef.current.style.top = `${y - (clonedHeight.current || 0) / 2}px`;\r\n\t\t\t\t\t\t\t\t//clonedNodeRef.current.style.left = `${clientX}px`;\r\n\t\t\t\t\t\t\t\t//clonedNodeRef.current.style.top = `${clientY}px`;\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\tdragState.next({\r\n\t\t\t\t\t\t\t\tisDragging: true,\r\n\t\t\t\t\t\t\t\tisDrop: false,\r\n\t\t\t\t\t\t\t\tnavigationTitle,\r\n\t\t\t\t\t\t\t\tchildren: targetComponent,\r\n\t\t\t\t\t\t\t\tx,\r\n\t\t\t\t\t\t\t\ty,\r\n\t\t\t\t\t\t\t\tcontainerName,\r\n\t\t\t\t\t\t\t\tdropDocumentOutsideOption,\r\n\t\t\t\t\t\t\t\tcustomData,\r\n\t\t\t\t\t\t\t});\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t});\r\n\t\t\t\t}}\r\n\t\t\t\tonTouchStart={(ev) => {\r\n\t\t\t\t\tif (onTouchStart) {\r\n\t\t\t\t\t\tPromise.resolve().then(() => onTouchStart(ev));\r\n\t\t\t\t\t}\r\n\t\t\t\t\thandleStart({\r\n\t\t\t\t\t\tevent: ev,\r\n\t\t\t\t\t\tdragStartCallback: ({ x, y }) => {\r\n\t\t\t\t\t\t\tif (clonedNodeRef.current) {\r\n\t\t\t\t\t\t\t\tdocument.body.appendChild(\r\n\t\t\t\t\t\t\t\t\tclonedNodeRef.current,\r\n\t\t\t\t\t\t\t\t);\r\n\t\t\t\t\t\t\t\tif (ref.current) {\r\n\t\t\t\t\t\t\t\t\tconst originRect =\r\n\t\t\t\t\t\t\t\t\t\tref.current.getBoundingClientRect();\r\n\t\t\t\t\t\t\t\t\tclonedNodeRef.current.style.width =\r\n\t\t\t\t\t\t\t\t\t\toriginRect.width + \"px\";\r\n\t\t\t\t\t\t\t\t\tclonedNodeRef.current.style.height =\r\n\t\t\t\t\t\t\t\t\t\toriginRect.height + \"px\";\r\n\r\n\t\t\t\t\t\t\t\t\tclonedWidth.current = originRect.width;\r\n\t\t\t\t\t\t\t\t\tclonedHeight.current = originRect.height;\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\tif (clonedNodeRef.current?.isConnected) {\r\n\t\t\t\t\t\t\t\tnavigator.vibrate(100);\r\n\t\t\t\t\t\t\t\tclonedNodeRef.current.style.left = `${x - (clonedWidth.current || 0) / 2}px`;\r\n\t\t\t\t\t\t\t\tclonedNodeRef.current.style.top = `${y - (clonedHeight.current || 0) / 2}px`;\r\n\t\t\t\t\t\t\t\t//clonedNodeRef.current.style.left = `${clientX}px`;\r\n\t\t\t\t\t\t\t\t//clonedNodeRef.current.style.top = `${clientY}px`;\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\tdragState.next({\r\n\t\t\t\t\t\t\t\tisDragging: true,\r\n\t\t\t\t\t\t\t\tisDrop: false,\r\n\t\t\t\t\t\t\t\tnavigationTitle,\r\n\t\t\t\t\t\t\t\tchildren: targetComponent,\r\n\t\t\t\t\t\t\t\tx,\r\n\t\t\t\t\t\t\t\ty,\r\n\t\t\t\t\t\t\t\tcontainerName,\r\n\t\t\t\t\t\t\t\tdropDocumentOutsideOption,\r\n\t\t\t\t\t\t\t\tcustomData,\r\n\t\t\t\t\t\t\t});\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t});\r\n\t\t\t\t}}\r\n\t\t\t\tstyle={{ ...style }}\r\n\t\t\t\t{...props}\r\n\t\t\t>\r\n\t\t\t\t{children}\r\n\t\t\t</div>\r\n\t\t\t{}\r\n\t\t</>\r\n\t);\r\n}\r\n"]}

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

@@ -0,0 +1,32 @@
+'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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutSplitScreenDragBoxContainer.tsx"],"names":["jsx","FlexLayoutSplitScreenScrollBox","styles"],"mappings":";;;;;;;;;;;AAQe,SAAR,qCAAA,CAAuD;AAAA,EAC7D,SAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,GAAG;AACJ,CAAA,EAA+C;AAC9C,EAAA,uBACCA,cAAA;AAAA,IAACC,+CAAA;AAAA,IAAA;AAAA,MACA,OAAA,EAAS,UAAA;AAAA,MACT,SAAA,EAAW,CAAA,EAAGC,uBAAA,CAAO,4CAA4C,CAAC,IAAK,SAAA,IAAa,SAAA,KAAc,EAAA,IAAM,SAAA,IAAc,EAAE,CAAA,CAAA;AAAA,MACxH,SAAA,EAAU,GAAA;AAAA,MACT,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACF;AAEF","file":"FlexLayoutSplitScreenDragBoxContainer.cjs","sourcesContent":["\"use client\";\r\nimport { HTMLAttributes } from \"react\";\r\nimport styles from \"../styles/FlexLayout.module.css\";\r\nimport FlexLayoutSplitScreenScrollBox from \"./FlexLayoutSplitScreenScrollBox\";\r\nexport interface FlexLayoutSplitScreenDragBoxContainerProps extends HTMLAttributes<HTMLDivElement> {\r\n\tlayoutName: string;\r\n}\r\n\r\nexport default function FlexLayoutSplitScreenDragBoxContainer({\r\n\tclassName,\r\n\tchildren,\r\n\tlayoutName,\r\n\t...props\r\n}: FlexLayoutSplitScreenDragBoxContainerProps) {\r\n\treturn (\r\n\t\t<FlexLayoutSplitScreenScrollBox\r\n\t\t\tkeyName={layoutName}\r\n\t\t\tclassName={`${styles[\"flex-split-screen-drag-box-title-container\"]} ${(className && className !== \"\" && className) || \"\"}`}\r\n\t\t\tdirection=\"x\"\r\n\t\t\t{...props}\r\n\t\t>\r\n\t\t\t{children}\r\n\t\t</FlexLayoutSplitScreenScrollBox>\r\n\t);\r\n}\r\n"]}

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

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from "react";
+export interface FlexLayoutSplitScreenDragBoxContainerProps extends HTMLAttributes<HTMLDivElement> {
+    layoutName: string;
+}
+export default function FlexLayoutSplitScreenDragBoxContainer({ className, children, layoutName, ...props }: FlexLayoutSplitScreenDragBoxContainerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,25 @@
+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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutSplitScreenDragBoxContainer.tsx"],"names":[],"mappings":";;;;AAQe,SAAR,qCAAA,CAAuD;AAAA,EAC7D,SAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,GAAG;AACJ,CAAA,EAA+C;AAC9C,EAAA,uBACC,GAAA;AAAA,IAAC,8BAAA;AAAA,IAAA;AAAA,MACA,OAAA,EAAS,UAAA;AAAA,MACT,SAAA,EAAW,CAAA,EAAG,MAAA,CAAO,4CAA4C,CAAC,IAAK,SAAA,IAAa,SAAA,KAAc,EAAA,IAAM,SAAA,IAAc,EAAE,CAAA,CAAA;AAAA,MACxH,SAAA,EAAU,GAAA;AAAA,MACT,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACF;AAEF","file":"FlexLayoutSplitScreenDragBoxContainer.js","sourcesContent":["\"use client\";\r\nimport { HTMLAttributes } from \"react\";\r\nimport styles from \"../styles/FlexLayout.module.css\";\r\nimport FlexLayoutSplitScreenScrollBox from \"./FlexLayoutSplitScreenScrollBox\";\r\nexport interface FlexLayoutSplitScreenDragBoxContainerProps extends HTMLAttributes<HTMLDivElement> {\r\n\tlayoutName: string;\r\n}\r\n\r\nexport default function FlexLayoutSplitScreenDragBoxContainer({\r\n\tclassName,\r\n\tchildren,\r\n\tlayoutName,\r\n\t...props\r\n}: FlexLayoutSplitScreenDragBoxContainerProps) {\r\n\treturn (\r\n\t\t<FlexLayoutSplitScreenScrollBox\r\n\t\t\tkeyName={layoutName}\r\n\t\t\tclassName={`${styles[\"flex-split-screen-drag-box-title-container\"]} ${(className && className !== \"\" && className) || \"\"}`}\r\n\t\t\tdirection=\"x\"\r\n\t\t\t{...props}\r\n\t\t>\r\n\t\t\t{children}\r\n\t\t</FlexLayoutSplitScreenScrollBox>\r\n\t);\r\n}\r\n"]}

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

@@ -0,0 +1,40 @@
+'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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutSplitScreenDragBoxItem.tsx"],"names":["useEffect","allSplitScreenCount","jsxs","styles","jsx"],"mappings":";;;;;;;;;;;AASe,SAAR,gCAAA,CAAkD;AAAA,EACxD,QAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACJ,CAAA,EAA0C;AACzC,EAAAA,eAAA,CAAU,MAAM;AACf,IAAAC,2BAAA,CAAoB,IAAA,CAAKA,2BAAA,CAAoB,KAAA,GAAQ,CAAC,CAAA;AACtD,IAAA,OAAO,MAAM;AACZ,MAAA,IAAIA,2BAAA,CAAoB,SAAS,CAAA,EAAG;AACpC,MAAAA,2BAAA,CAAoB,IAAA,CAAKA,2BAAA,CAAoB,KAAA,GAAQ,CAAC,CAAA;AAAA,IACvD,CAAA;AAAA,EACD,CAAA,EAAG,EAAE,CAAA;AACL,EAAA,uBACCC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,SAAA,EAAW,CAAA,EAAGC,uBAAA,CAAO,uCAAuC,CAAC,IAAI,QAAA,GAAWA,uBAAA,CAAO,QAAQ,CAAA,GAAI,EAAE,CAAA,CAAA;AAAA,MAChG,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,wBACDC,cAAA,CAAC,QAAA,EAAA,EAAO,IAAA,EAAK,QAAA,EAAS,OAAA,EAAS,CAAC,EAAA,KAAO,OAAA,CAAQ,EAAE,CAAA,EAAG,QAAA,EAAA,GAAA,EAEpD;AAAA;AAAA;AAAA,GACD;AAEF","file":"FlexLayoutSplitScreenDragBoxItem.cjs","sourcesContent":["import { MouseEvent, ReactElement, useEffect } from \"react\";\r\nimport { allSplitScreenCount } from \"../hooks/useDrag\";\r\nimport styles from \"../styles/FlexLayout.module.css\";\r\nimport { FlexLayoutSplitScreenDragBoxProps } from \"./FlexLayoutSplitScreenDragBox\";\r\nexport interface FlexLayoutSplitScreenDragBoxItemProps {\r\n\tchildren: ReactElement<FlexLayoutSplitScreenDragBoxProps>;\r\n\tonClose: (event: MouseEvent<HTMLButtonElement>) => void;\r\n\tisActive: boolean;\r\n}\r\nexport default function FlexLayoutSplitScreenDragBoxItem({\r\n\tchildren,\r\n\tonClose,\r\n\tisActive,\r\n\t...props\r\n}: FlexLayoutSplitScreenDragBoxItemProps) {\r\n\tuseEffect(() => {\r\n\t\tallSplitScreenCount.next(allSplitScreenCount.value + 1);\r\n\t\treturn () => {\r\n\t\t\tif (allSplitScreenCount.value <= 1) return;\r\n\t\t\tallSplitScreenCount.next(allSplitScreenCount.value - 1);\r\n\t\t};\r\n\t}, []);\r\n\treturn (\r\n\t\t<div\r\n\t\t\tclassName={`${styles[\"flex-split-screen-drag-box-title-item\"]} ${isActive ? styles[\"active\"] : \"\"}`}\r\n\t\t\t{...props}\r\n\t\t>\r\n\t\t\t{children}\r\n\t\t\t<button type=\"button\" onClick={(ev) => onClose(ev)}>\r\n\t\t\t\tX\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t);\r\n}\r\n"]}

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

@@ -0,0 +1,8 @@
+import { MouseEvent, ReactElement } from "react";
+import { FlexLayoutSplitScreenDragBoxProps } from "./FlexLayoutSplitScreenDragBox";
+export interface FlexLayoutSplitScreenDragBoxItemProps {
+    children: ReactElement<FlexLayoutSplitScreenDragBoxProps>;
+    onClose: (event: MouseEvent<HTMLButtonElement>) => void;
+    isActive: boolean;
+}
+export default function FlexLayoutSplitScreenDragBoxItem({ children, onClose, isActive, ...props }: FlexLayoutSplitScreenDragBoxItemProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,34 @@
+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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutSplitScreenDragBoxItem.tsx"],"names":[],"mappings":";;;;;AASe,SAAR,gCAAA,CAAkD;AAAA,EACxD,QAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACJ,CAAA,EAA0C;AACzC,EAAA,SAAA,CAAU,MAAM;AACf,IAAA,mBAAA,CAAoB,IAAA,CAAK,mBAAA,CAAoB,KAAA,GAAQ,CAAC,CAAA;AACtD,IAAA,OAAO,MAAM;AACZ,MAAA,IAAI,mBAAA,CAAoB,SAAS,CAAA,EAAG;AACpC,MAAA,mBAAA,CAAoB,IAAA,CAAK,mBAAA,CAAoB,KAAA,GAAQ,CAAC,CAAA;AAAA,IACvD,CAAA;AAAA,EACD,CAAA,EAAG,EAAE,CAAA;AACL,EAAA,uBACC,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,SAAA,EAAW,CAAA,EAAG,MAAA,CAAO,uCAAuC,CAAC,IAAI,QAAA,GAAW,MAAA,CAAO,QAAQ,CAAA,GAAI,EAAE,CAAA,CAAA;AAAA,MAChG,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,wBACD,GAAA,CAAC,QAAA,EAAA,EAAO,IAAA,EAAK,QAAA,EAAS,OAAA,EAAS,CAAC,EAAA,KAAO,OAAA,CAAQ,EAAE,CAAA,EAAG,QAAA,EAAA,GAAA,EAEpD;AAAA;AAAA;AAAA,GACD;AAEF","file":"FlexLayoutSplitScreenDragBoxItem.js","sourcesContent":["import { MouseEvent, ReactElement, useEffect } from \"react\";\r\nimport { allSplitScreenCount } from \"../hooks/useDrag\";\r\nimport styles from \"../styles/FlexLayout.module.css\";\r\nimport { FlexLayoutSplitScreenDragBoxProps } from \"./FlexLayoutSplitScreenDragBox\";\r\nexport interface FlexLayoutSplitScreenDragBoxItemProps {\r\n\tchildren: ReactElement<FlexLayoutSplitScreenDragBoxProps>;\r\n\tonClose: (event: MouseEvent<HTMLButtonElement>) => void;\r\n\tisActive: boolean;\r\n}\r\nexport default function FlexLayoutSplitScreenDragBoxItem({\r\n\tchildren,\r\n\tonClose,\r\n\tisActive,\r\n\t...props\r\n}: FlexLayoutSplitScreenDragBoxItemProps) {\r\n\tuseEffect(() => {\r\n\t\tallSplitScreenCount.next(allSplitScreenCount.value + 1);\r\n\t\treturn () => {\r\n\t\t\tif (allSplitScreenCount.value <= 1) return;\r\n\t\t\tallSplitScreenCount.next(allSplitScreenCount.value - 1);\r\n\t\t};\r\n\t}, []);\r\n\treturn (\r\n\t\t<div\r\n\t\t\tclassName={`${styles[\"flex-split-screen-drag-box-title-item\"]} ${isActive ? styles[\"active\"] : \"\"}`}\r\n\t\t\t{...props}\r\n\t\t>\r\n\t\t\t{children}\r\n\t\t\t<button type=\"button\" onClick={(ev) => onClose(ev)}>\r\n\t\t\t\tX\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t);\r\n}\r\n"]}

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

@@ -0,0 +1,30 @@
+'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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutSplitScreenDragBoxTitleMore.tsx"],"names":["jsxs","styles","jsx"],"mappings":";;;;;;;;;AAOe,SAAR,qCAAA,CAAuD;AAAA,EAC7D,SAAA;AAAA,EACA,GAAG;AACJ,CAAA,EAA+C;AAC9C,EAAA,uBACCA,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,GAAG,KAAA;AAAA,MACJ,WAAW,CAAA,EAAGC,uBAAA,CAAO,uCAAuC,CAAC,CAAA,CAAA,EAAI,aAAa,EAAE,CAAA,CAAA;AAAA,MAEhF,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,UAAK,QAAA,EAAA,GAAA,EAAC,CAAA;AAAA,wBACPA,cAAA,CAAC,UAAK,QAAA,EAAA,GAAA,EAAC,CAAA;AAAA,wBACPA,cAAA,CAAC,UAAK,QAAA,EAAA,GAAA,EAAC;AAAA;AAAA;AAAA,GACR;AAEF","file":"FlexLayoutSplitScreenDragBoxTitleMore.cjs","sourcesContent":["import { HTMLAttributes } from \"react\";\r\nimport styles from \"../styles/FlexLayout.module.css\";\r\n\r\nexport interface FlexLayoutSplitScreenDragBoxTitleMoreProps extends Omit<\r\n\tHTMLAttributes<HTMLButtonElement>,\r\n\t\"children\"\r\n> {}\r\nexport default function FlexLayoutSplitScreenDragBoxTitleMore({\r\n\tclassName,\r\n\t...props\r\n}: FlexLayoutSplitScreenDragBoxTitleMoreProps) {\r\n\treturn (\r\n\t\t<button\r\n\t\t\t{...props}\r\n\t\t\tclassName={`${styles[\"flex-split-screen-drag-box-title-more\"]} ${className || \"\"}`}\r\n\t\t>\r\n\t\t\t<span>.</span>\r\n\t\t\t<span>.</span>\r\n\t\t\t<span>.</span>\r\n\t\t</button>\r\n\t);\r\n}\r\n"]}

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

@@ -0,0 +1,4 @@
+import { HTMLAttributes } from "react";
+export interface FlexLayoutSplitScreenDragBoxTitleMoreProps extends Omit<HTMLAttributes<HTMLButtonElement>, "children"> {
+}
+export default function FlexLayoutSplitScreenDragBoxTitleMore({ className, ...props }: FlexLayoutSplitScreenDragBoxTitleMoreProps): import("react/jsx-runtime").JSX.Element;