@byeolnaerim/flex-layout 0.0.7 → 0.0.9

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

@@ -1,12 +1,12 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useRef, useCallback, useState, useEffect } from 'react';
-import { useSize } from '../hooks/useSizes';
-import { useFlexLayoutContext } from '../providers/FlexLayoutContext';
-import { setContainerRef } from '../store/FlexLayoutContainerStore';
-import styles from '../styles/FlexLayout.module.css';
-import { getGrow, mathGrow, mathWeight } from '../utils/FlexLayoutUtils';
-import FlexLayoutResizePanel from './FlexLayoutResizePanel';
-
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useSize } from "../hooks/useSizes";
+import { useFlexLayoutContext } from "../providers/FlexLayoutContext";
+import { setContainerRef } from "../store/FlexLayoutContainerStore";
+import styles from "../styles/FlexLayout.module.css";
+import { getGrow, mathGrow, mathWeight } from "../utils/FlexLayoutUtils";
+import FlexLayoutResizePanel from "./FlexLayoutResizePanel";
 function FlexLayoutContainer({
   isFitContent,
   isFitResize,
@@ -36,11 +36,21 @@ function FlexLayoutContainer({
     useSize(fitContent)
   );
   const flexContainerNodeRef = useRef(null);
+  const isUserResizingRef = useRef(false);
+  const handleResizingChange = useCallback((v) => {
+    isUserResizingRef.current = v;
+  }, []);
   const flexContainerRef = useCallback(
     (node) => {
       flexContainerNodeRef.current = node;
-      if (node !== null) {
-        setContainerRef(layoutName, containerName, { current: node });
+      if (node) {
+        setContainerRef(
+          layoutName,
+          containerName,
+          flexContainerNodeRef
+        );
+      } else {
+        setContainerRef(layoutName, containerName, null);
       }
     },
     [layoutName, containerName]
@@ -53,15 +63,6 @@ function FlexLayoutContainer({
     initialPrevGrow
   );
   const [isFirstLoad, setIsFirstLoad] = useState(true);
-  useEffect(() => {
-    if (!flexContainerNodeRef.current) return;
-    setContainerRef(layoutName, containerName, flexContainerNodeRef);
-    return () => {
-      setContainerRef(layoutName, containerName, {
-        current: null
-      });
-    };
-  }, [containerName, layoutName]);
   useEffect(() => {
     if (typeof window == "undefined" || flexContainerNodeRef.current === null)
       return;
@@ -98,7 +99,8 @@ function FlexLayoutContainer({
     };
   }, [containerName]);
   useEffect(() => {
-    if (!flexContainerNodeRef.current || !ref || !ref.current || !size || !fitContent)
+    if (!flexContainerNodeRef.current || !ref || !ref.current || !size || !fitContent || // getGrow(flexContainerNodeRef.current) == 0 ||
+    isUserResizingRef.current)
       return;
     requestAnimationFrame(() => {
       if (!flexContainerNodeRef.current) return;
@@ -144,6 +146,46 @@ function FlexLayoutContainer({
       });
     }
   }, []);
+  useEffect(() => {
+    if (!flexContainerNodeRef.current || !isFitContent || !fitContent || !size || getGrow(flexContainerNodeRef.current) == 0)
+      return;
+    const parent = flexContainerNodeRef.current.parentElement;
+    if (!parent) return;
+    const sizeName = fitContent.charAt(0).toUpperCase() + fitContent.substring(1);
+    const parentSize = parent["client" + sizeName] || 0;
+    if (!parentSize || containerCount <= 0) return;
+    const nextGrowRaw = mathGrow(size, parentSize, containerCount);
+    const nextGrow = Math.min(containerCount, Math.max(0, nextGrowRaw));
+    const currentGrow = getGrow(flexContainerNodeRef.current);
+    if (Math.abs(nextGrow - currentGrow) < 1e-3) return;
+    setPrevGrowState(currentGrow);
+    setGrowState(nextGrow);
+    const containers = [...parent.children || []].filter((el) => {
+      const item = el;
+      return item.hasAttribute("data-container_name") && !item.classList.contains(styles["flex-resize-panel"]);
+    });
+    const siblings = containers.filter(
+      (el) => el !== flexContainerNodeRef.current
+    );
+    const adjustable = siblings.filter((el) => el.style.flex !== "0 1 0%");
+    const remaining = containerCount - nextGrow;
+    if (remaining <= 0 || adjustable.length === 0) return;
+    const oldSum = adjustable.reduce((sum, el) => sum + getGrow(el), 0);
+    if (oldSum <= 0) {
+      const each = remaining / adjustable.length;
+      adjustable.forEach((el) => {
+        el.dataset.grow = each.toString();
+        el.style.flex = `${each} 1 0%`;
+      });
+    } else {
+      adjustable.forEach((el) => {
+        const g = getGrow(el);
+        const scaled = remaining * (g / oldSum);
+        el.dataset.grow = scaled.toString();
+        el.style.flex = `${scaled} 1 0%`;
+      });
+    }
+  }, [size, isFitContent, fitContent, containerCount]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "div",
@@ -178,12 +220,13 @@ function FlexLayoutContainer({
         containerCount,
         panelMode,
         panelClassName,
-        panelMovementMode
+        panelMovementMode,
+        onResizingChange: handleResizingChange
       }
     )
   ] });
 }
-
-export { FlexLayoutContainer as default };
-//# sourceMappingURL=FlexLayoutContainer.js.map
+export {
+  FlexLayoutContainer as default
+};
 //# sourceMappingURL=FlexLayoutContainer.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutContainer.tsx"],"names":[],"mappings":"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","file":"FlexLayoutContainer.js","sourcesContent":["\"use client\";\r\nimport { useCallback, useEffect, useRef, useState } from \"react\";\r\nimport { useSize } from \"../hooks/useSizes\";\r\nimport { useFlexLayoutContext } from \"../providers/FlexLayoutContext\";\r\nimport { setContainerRef } from \"../store/FlexLayoutContainerStore\";\r\nimport styles from \"../styles/FlexLayout.module.css\";\r\nimport { FlexContainerProps } from \"../types/FlexLayoutTypes\";\r\nimport { getGrow, mathGrow, mathWeight } from \"../utils/FlexLayoutUtils\";\r\nimport FlexLayoutResizePanel from \"./FlexLayoutResizePanel\";\r\n\r\nexport default function FlexLayoutContainer({\r\n\tisFitContent,\r\n\tisFitResize,\r\n\t// fitContent,\r\n\t// containerCount,\r\n\t// layoutName,\r\n\tcontainerName,\r\n\tgrow: initialGrow,\r\n\tprevGrow: initialPrevGrow,\r\n\tisInitialResizable,\r\n\tisResizePanel,\r\n\tchildren,\r\n\tclassName,\r\n\tpanelMode,\r\n}: FlexContainerProps) {\r\n\tconst {\r\n\t\tdirection,\r\n\t\tpanelMovementMode,\r\n\t\tpanelClassName,\r\n\t\tlayoutName,\r\n\t\tfitContent,\r\n\t\tcontainerCount,\r\n\t} = useFlexLayoutContext();\r\n\r\n\tconst { ref, size } =\r\n\t\t// isFitContent && fitContent\r\n\t\t//?\r\n\t\tuseSize(fitContent);\r\n\t//: { ref: null, size: null };\r\n\t// 콜백 ref에서 접근하기 위한 내부 ref 생성\r\n\tconst flexContainerNodeRef = useRef<HTMLDivElement | null>(null);\r\n\r\n\t// 콜백 ref 정의\r\n\tconst flexContainerRef = useCallback(\r\n\t\t(node: HTMLDivElement | null) => {\r\n\t\t\tflexContainerNodeRef.current = node;\r\n\t\t\tif (node !== null) {\r\n\t\t\t\tsetContainerRef(layoutName, containerName, { current: node });\r\n\t\t\t} else {\r\n\t\t\t\t// 컴포넌트가 언마운트될 때 필요한 작업이 있다면 여기에 추가\r\n\t\t\t}\r\n\t\t},\r\n\t\t[layoutName, containerName],\r\n\t);\r\n\r\n\t// 초기 SSR 시점에는 sessionStorage를 사용할 수 없으므로 일단 initialGrow를 사용\r\n\tconst [growState, setGrowState] = useState<number | undefined>(initialGrow);\r\n\tuseEffect(() => {\r\n\t\tsetGrowState(initialGrow);\r\n\t}, [initialGrow]);\r\n\tconst [prevGrowState, setPrevGrowState] = useState<number | undefined>(\r\n\t\tinitialPrevGrow,\r\n\t);\r\n\tconst [isFirstLoad, setIsFirstLoad] = useState<boolean>(true);\r\n\r\n\tuseEffect(() => {\r\n\t\tif (!flexContainerNodeRef.current) return;\r\n\t\tsetContainerRef(layoutName, containerName, flexContainerNodeRef);\r\n\t\treturn () => {\r\n\t\t\tsetContainerRef(layoutName, containerName, {\r\n\t\t\t\tcurrent: null,\r\n\t\t\t} as any);\r\n\t\t};\r\n\t}, [containerName, layoutName]);\r\n\r\n\t// 클라이언트 마운트 후 sessionStorage에서 grow값을 가져와 state 업데이트 (SSR/Hydration 안정화)\r\n\tuseEffect(() => {\r\n\t\tif (\r\n\t\t\ttypeof window == \"undefined\" ||\r\n\t\t\tflexContainerNodeRef.current === null\r\n\t\t)\r\n\t\t\treturn;\r\n\r\n\t\tconst storedGrow = sessionStorage.getItem(containerName);\r\n\t\tif (storedGrow !== null) {\r\n\t\t\tconst parsed = parseFloat(storedGrow);\r\n\t\t\tif (!isNaN(parsed)) {\r\n\t\t\t\tflexContainerNodeRef.current.style.flex = `${parsed} 1 0%`;\r\n\t\t\t\tsetGrowState(parsed);\r\n\t\t\t}\r\n\t\t}\r\n\t}, [containerName]);\r\n\r\n\t// 스타일 변경 감지를 위한 MutationObserver\r\n\tuseEffect(() => {\r\n\t\tif (!flexContainerNodeRef.current) return;\r\n\t\tconst targetNode = flexContainerNodeRef.current;\r\n\r\n\t\tconst observer = new MutationObserver((mutations) => {\r\n\t\t\tfor (const mutation of mutations) {\r\n\t\t\t\tif (\r\n\t\t\t\t\tmutation.type === \"attributes\" &&\r\n\t\t\t\t\tmutation.attributeName === \"style\" &&\r\n\t\t\t\t\ttargetNode.style.flex\r\n\t\t\t\t) {\r\n\t\t\t\t\t// style.flex = \"X 1 0%\" 형태이므로 X를 파싱\r\n\t\t\t\t\tconst flexValue = targetNode.style.flex;\r\n\t\t\t\t\tconst parsedGrow = parseFloat(flexValue.split(\" \")[0]);\r\n\t\t\t\t\tif (!isNaN(parsedGrow)) {\r\n\t\t\t\t\t\t// sessionStorage에 저장\r\n\t\t\t\t\t\t// sessionStorage.setItem(\r\n\t\t\t\t\t\t//     containerName,\r\n\t\t\t\t\t\t//     parsedGrow.toString()\r\n\t\t\t\t\t\t// );\r\n\t\t\t\t\t\t// state 업데이트\r\n\t\t\t\t\t\tsetGrowState(parsedGrow);\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t});\r\n\r\n\t\tobserver.observe(targetNode, {\r\n\t\t\tattributes: true,\r\n\t\t\tattributeFilter: [\"style\"],\r\n\t\t\tattributeOldValue: true,\r\n\t\t});\r\n\r\n\t\treturn () => {\r\n\t\t\tobserver.disconnect();\r\n\t\t};\r\n\t}, [containerName]);\r\n\r\n\tuseEffect(() => {\r\n\t\t// 컴포넌트 크기 및 설정값에 따른 사이즈 재조정\r\n\t\tif (\r\n\t\t\t!flexContainerNodeRef.current ||\r\n\t\t\t!ref ||\r\n\t\t\t!ref.current ||\r\n\t\t\t!size ||\r\n\t\t\t!fitContent\r\n\t\t\t//||getGrow(flexContainerRef.current) == 0\r\n\t\t)\r\n\t\t\treturn;\r\n\t\trequestAnimationFrame(() => {\r\n\t\t\tif (!flexContainerNodeRef.current) return;\r\n\t\t\tconst sizeName = `${fitContent.charAt(0).toUpperCase() + fitContent.substring(1)}`;\r\n\t\t\tconst parentSize =\r\n\t\t\t\t(flexContainerNodeRef.current.parentElement &&\r\n\t\t\t\t\tflexContainerNodeRef.current.parentElement[\r\n\t\t\t\t\t\t(\"client\" + sizeName) as \"clientWidth\" | \"clientHeight\"\r\n\t\t\t\t\t]) ||\r\n\t\t\t\t0;\r\n\t\t\tif (isFitContent) {\r\n\t\t\t\tflexContainerNodeRef.current.style[\r\n\t\t\t\t\t(\"max\" + sizeName) as \"maxWidth\" | \"maxHeight\"\r\n\t\t\t\t] = size + \"px\";\r\n\t\t\t}\r\n\t\t\tif (!isFitResize && isFirstLoad) {\r\n\t\t\t\tsetIsFirstLoad(false);\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\r\n\t\t\tif (getGrow(flexContainerNodeRef.current) != 0 && isFitResize) {\r\n\t\t\t\tconst newGrow = mathGrow(size, parentSize, containerCount);\r\n\t\t\t\tsetPrevGrowState(growState);\r\n\t\t\t\tsetGrowState(newGrow);\r\n\t\t\t\t// flexContainerNodeRef.current.dataset.prev_grow =\r\n\t\t\t\t//     flexContainerNodeRef.current.dataset.grow;\r\n\t\t\t\t// flexContainerNodeRef.current.dataset.grow = newGrow.toString();\r\n\t\t\t\t// flexContainerNodeRef.current.style.flex = `${newGrow} 1 0%`;\r\n\t\t\t}\r\n\t\t});\r\n\t}, [size, containerCount, isFitResize, children]);\r\n\r\n\tuseEffect(() => {\r\n\t\tif (!flexContainerNodeRef.current) return;\r\n\r\n\t\tlet notGrowList: Array<HTMLElement> = [];\r\n\t\tlet containerList = [\r\n\t\t\t...(flexContainerNodeRef.current.parentElement?.children || []),\r\n\t\t].filter((e) => e.hasAttribute(\"data-container_name\"));\r\n\t\tlet remainingGrow = containerList.reduce((t, e, i) => {\r\n\t\t\tlet item = e as HTMLElement;\r\n\r\n\t\t\tif (item.classList.contains(styles[\"flex-resize-panel\"])) return t;\r\n\r\n\t\t\tif (\r\n\t\t\t\te.hasAttribute(\"data-grow\") == false ||\r\n\t\t\t\te.getAttribute(\"data-is_resize\") === \"true\"\r\n\t\t\t) {\r\n\t\t\t\tnotGrowList.push(item);\r\n\t\t\t\treturn t;\r\n\t\t\t}\r\n\t\t\tlet grow = parseFloat(item.dataset.grow || \"\");\r\n\t\t\titem.style.flex = `${grow} 1 0%`;\r\n\t\t\tt -= grow;\r\n\t\t\treturn t;\r\n\t\t}, containerList.length);\r\n\t\tif (notGrowList.length != 0) {\r\n\t\t\tlet resizeWeight = mathWeight(notGrowList.length, remainingGrow);\r\n\t\t\tnotGrowList.forEach((e) => {\r\n\t\t\t\te.dataset.grow = resizeWeight.toString();\r\n\t\t\t\te.style.flex = `${resizeWeight} 1 0%`;\r\n\t\t\t});\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\tid={containerName}\r\n\t\t\t\tdata-container_name={containerName}\r\n\t\t\t\tref={flexContainerRef}\r\n\t\t\t\tclassName={`${styles[\"flex-container\"]} ${className && className !== \"\" ? className : \"\"}`}\r\n\t\t\t\t{...(growState !== undefined\r\n\t\t\t\t\t? { [\"data-grow\"]: growState }\r\n\t\t\t\t\t: {})}\r\n\t\t\t\t{...(prevGrowState != undefined\r\n\t\t\t\t\t? { [\"data-prev_grow\"]: prevGrowState }\r\n\t\t\t\t\t: {})}\r\n\t\t\t\tdata-is_resize={isInitialResizable}\r\n\t\t\t\tdata-is_resize_panel={isResizePanel}\r\n\t\t\t\tstyle={\r\n\t\t\t\t\t(growState !== undefined && {\r\n\t\t\t\t\t\tflex: `${growState} 1 0%`,\r\n\t\t\t\t\t}) ||\r\n\t\t\t\t\t{}\r\n\t\t\t\t}\r\n\t\t\t>\r\n\t\t\t\t{(isFitContent && (\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclassName={`${styles[\"flex-content-fit-wrapper\"]}`}\r\n\t\t\t\t\t\tref={ref}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{children}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t)) ||\r\n\t\t\t\t\tchildren}\r\n\t\t\t</div>\r\n\t\t\t{isResizePanel && (\r\n\t\t\t\t<FlexLayoutResizePanel\r\n\t\t\t\t\tcontainerName={containerName}\r\n\t\t\t\t\tlayoutName={layoutName}\r\n\t\t\t\t\tdirection={direction}\r\n\t\t\t\t\tcontainerCount={containerCount}\r\n\t\t\t\t\tpanelMode={panelMode}\r\n\t\t\t\t\tpanelClassName={panelClassName}\r\n\t\t\t\t\tpanelMovementMode={panelMovementMode}\r\n\t\t\t\t/>\r\n\t\t\t)}\r\n\t\t</>\r\n\t);\r\n}\r\n"]}
+{"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutContainer.tsx"],"sourcesContent":["\"use client\";\r\nimport { useCallback, useEffect, useRef, useState } from \"react\";\r\nimport { useSize } from \"../hooks/useSizes\";\r\nimport { useFlexLayoutContext } from \"../providers/FlexLayoutContext\";\r\nimport { setContainerRef } from \"../store/FlexLayoutContainerStore\";\r\nimport styles from \"../styles/FlexLayout.module.css\";\r\nimport { FlexContainerProps } from \"../types/FlexLayoutTypes\";\r\nimport { getGrow, mathGrow, mathWeight } from \"../utils/FlexLayoutUtils\";\r\nimport FlexLayoutResizePanel from \"./FlexLayoutResizePanel\";\r\n\r\nexport default function FlexLayoutContainer({\r\n\tisFitContent,\r\n\tisFitResize,\r\n\t// fitContent,\r\n\t// containerCount,\r\n\t// layoutName,\r\n\tcontainerName,\r\n\tgrow: initialGrow,\r\n\tprevGrow: initialPrevGrow,\r\n\tisInitialResizable,\r\n\tisResizePanel,\r\n\tchildren,\r\n\tclassName,\r\n\tpanelMode,\r\n}: FlexContainerProps) {\r\n\tconst {\r\n\t\tdirection,\r\n\t\tpanelMovementMode,\r\n\t\tpanelClassName,\r\n\t\tlayoutName,\r\n\t\tfitContent,\r\n\t\tcontainerCount,\r\n\t} = useFlexLayoutContext();\r\n\r\n\tconst { ref, size } =\r\n\t\t// isFitContent && fitContent\r\n\t\t//?\r\n\t\tuseSize(fitContent);\r\n\t//: { ref: null, size: null };\r\n\t// 콜백 ref에서 접근하기 위한 내부 ref 생성\r\n\tconst flexContainerNodeRef = useRef<HTMLDivElement | null>(null);\r\n\r\n\tconst isUserResizingRef = useRef(false);\r\n\r\n\tconst handleResizingChange = useCallback((v: boolean) => {\r\n\t\tisUserResizingRef.current = v;\r\n\t}, []);\r\n\r\n\t// 콜백 ref 정의\r\n\tconst flexContainerRef = useCallback(\r\n\t\t(node: HTMLDivElement | null) => {\r\n\t\t\tflexContainerNodeRef.current = node;\r\n\r\n\t\t\t// 마운트: 저장 / 언마운트: 삭제\r\n\t\t\tif (node) {\r\n\t\t\t\tsetContainerRef(\r\n\t\t\t\t\tlayoutName,\r\n\t\t\t\t\tcontainerName,\r\n\t\t\t\t\tflexContainerNodeRef,\r\n\t\t\t\t);\r\n\t\t\t} else {\r\n\t\t\t\tsetContainerRef(layoutName, containerName, null);\r\n\t\t\t}\r\n\t\t},\r\n\t\t[layoutName, containerName],\r\n\t);\r\n\r\n\t// 초기 SSR 시점에는 sessionStorage를 사용할 수 없으므로 일단 initialGrow를 사용\r\n\tconst [growState, setGrowState] = useState<number | undefined>(initialGrow);\r\n\tuseEffect(() => {\r\n\t\tsetGrowState(initialGrow);\r\n\t}, [initialGrow]);\r\n\tconst [prevGrowState, setPrevGrowState] = useState<number | undefined>(\r\n\t\tinitialPrevGrow,\r\n\t);\r\n\tconst [isFirstLoad, setIsFirstLoad] = useState<boolean>(true);\r\n\r\n\t// 클라이언트 마운트 후 sessionStorage에서 grow값을 가져와 state 업데이트 (SSR/Hydration 안정화)\r\n\tuseEffect(() => {\r\n\t\tif (\r\n\t\t\ttypeof window == \"undefined\" ||\r\n\t\t\tflexContainerNodeRef.current === null\r\n\t\t)\r\n\t\t\treturn;\r\n\r\n\t\tconst storedGrow = sessionStorage.getItem(containerName);\r\n\t\tif (storedGrow !== null) {\r\n\t\t\tconst parsed = parseFloat(storedGrow);\r\n\t\t\tif (!isNaN(parsed)) {\r\n\t\t\t\tflexContainerNodeRef.current.style.flex = `${parsed} 1 0%`;\r\n\t\t\t\tsetGrowState(parsed);\r\n\t\t\t}\r\n\t\t}\r\n\t}, [containerName]);\r\n\r\n\t// 스타일 변경 감지를 위한 MutationObserver\r\n\tuseEffect(() => {\r\n\t\tif (!flexContainerNodeRef.current) return;\r\n\t\tconst targetNode = flexContainerNodeRef.current;\r\n\r\n\t\tconst observer = new MutationObserver((mutations) => {\r\n\t\t\tfor (const mutation of mutations) {\r\n\t\t\t\tif (\r\n\t\t\t\t\tmutation.type === \"attributes\" &&\r\n\t\t\t\t\tmutation.attributeName === \"style\" &&\r\n\t\t\t\t\ttargetNode.style.flex\r\n\t\t\t\t) {\r\n\t\t\t\t\t// style.flex = \"X 1 0%\" 형태이므로 X를 파싱\r\n\t\t\t\t\tconst flexValue = targetNode.style.flex;\r\n\t\t\t\t\tconst parsedGrow = parseFloat(flexValue.split(\" \")[0]);\r\n\t\t\t\t\tif (!isNaN(parsedGrow)) {\r\n\t\t\t\t\t\t// sessionStorage에 저장\r\n\t\t\t\t\t\t// sessionStorage.setItem(\r\n\t\t\t\t\t\t//     containerName,\r\n\t\t\t\t\t\t//     parsedGrow.toString()\r\n\t\t\t\t\t\t// );\r\n\t\t\t\t\t\t// state 업데이트\r\n\t\t\t\t\t\tsetGrowState(parsedGrow);\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t});\r\n\r\n\t\tobserver.observe(targetNode, {\r\n\t\t\tattributes: true,\r\n\t\t\tattributeFilter: [\"style\"],\r\n\t\t\tattributeOldValue: true,\r\n\t\t});\r\n\r\n\t\treturn () => {\r\n\t\t\tobserver.disconnect();\r\n\t\t};\r\n\t}, [containerName]);\r\n\r\n\tuseEffect(() => {\r\n\t\t// 컴포넌트 크기 및 설정값에 따른 사이즈 재조정\r\n\t\tif (\r\n\t\t\t!flexContainerNodeRef.current ||\r\n\t\t\t!ref ||\r\n\t\t\t!ref.current ||\r\n\t\t\t!size ||\r\n\t\t\t!fitContent ||\r\n\t\t\t// getGrow(flexContainerNodeRef.current) == 0 ||\r\n\t\t\tisUserResizingRef.current // 사용자가 직접 사이즈 조정 중일 때는 자동 조정 방지\r\n\t\t)\r\n\t\t\treturn;\r\n\t\trequestAnimationFrame(() => {\r\n\t\t\tif (!flexContainerNodeRef.current) return;\r\n\t\t\tconst sizeName = `${fitContent.charAt(0).toUpperCase() + fitContent.substring(1)}`;\r\n\t\t\tconst parentSize =\r\n\t\t\t\t(flexContainerNodeRef.current.parentElement &&\r\n\t\t\t\t\tflexContainerNodeRef.current.parentElement[\r\n\t\t\t\t\t\t(\"client\" + sizeName) as \"clientWidth\" | \"clientHeight\"\r\n\t\t\t\t\t]) ||\r\n\t\t\t\t0;\r\n\t\t\tif (isFitContent) {\r\n\t\t\t\tflexContainerNodeRef.current.style[\r\n\t\t\t\t\t(\"max\" + sizeName) as \"maxWidth\" | \"maxHeight\"\r\n\t\t\t\t] = size + \"px\";\r\n\t\t\t}\r\n\t\t\tif (!isFitResize && isFirstLoad) {\r\n\t\t\t\tsetIsFirstLoad(false);\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\r\n\t\t\tif (getGrow(flexContainerNodeRef.current) != 0 && isFitResize) {\r\n\t\t\t\tconst newGrow = mathGrow(size, parentSize, containerCount);\r\n\t\t\t\tsetPrevGrowState(growState);\r\n\t\t\t\tsetGrowState(newGrow);\r\n\t\t\t\t// flexContainerNodeRef.current.dataset.prev_grow =\r\n\t\t\t\t//     flexContainerNodeRef.current.dataset.grow;\r\n\t\t\t\t// flexContainerNodeRef.current.dataset.grow = newGrow.toString();\r\n\t\t\t\t// flexContainerNodeRef.current.style.flex = `${newGrow} 1 0%`;\r\n\t\t\t}\r\n\t\t});\r\n\t}, [size, containerCount, isFitResize, children]);\r\n\r\n\tuseEffect(() => {\r\n\t\tif (!flexContainerNodeRef.current) return;\r\n\r\n\t\tlet notGrowList: Array<HTMLElement> = [];\r\n\t\tlet containerList = [\r\n\t\t\t...(flexContainerNodeRef.current.parentElement?.children || []),\r\n\t\t].filter((e) => e.hasAttribute(\"data-container_name\"));\r\n\t\tlet remainingGrow = containerList.reduce((t, e, i) => {\r\n\t\t\tlet item = e as HTMLElement;\r\n\r\n\t\t\tif (item.classList.contains(styles[\"flex-resize-panel\"])) return t;\r\n\r\n\t\t\tif (\r\n\t\t\t\te.hasAttribute(\"data-grow\") == false ||\r\n\t\t\t\te.getAttribute(\"data-is_resize\") === \"true\"\r\n\t\t\t) {\r\n\t\t\t\tnotGrowList.push(item);\r\n\t\t\t\treturn t;\r\n\t\t\t}\r\n\t\t\tlet grow = parseFloat(item.dataset.grow || \"\");\r\n\t\t\titem.style.flex = `${grow} 1 0%`;\r\n\t\t\tt -= grow;\r\n\t\t\treturn t;\r\n\t\t}, containerList.length);\r\n\t\tif (notGrowList.length != 0) {\r\n\t\t\tlet resizeWeight = mathWeight(notGrowList.length, remainingGrow);\r\n\t\t\tnotGrowList.forEach((e) => {\r\n\t\t\t\te.dataset.grow = resizeWeight.toString();\r\n\t\t\t\te.style.flex = `${resizeWeight} 1 0%`;\r\n\t\t\t});\r\n\t\t}\r\n\t}, []);\r\n\r\n\tuseEffect(() => {\r\n\t\tif (\r\n\t\t\t!flexContainerNodeRef.current ||\r\n\t\t\t!isFitContent ||\r\n\t\t\t!fitContent ||\r\n\t\t\t!size ||\r\n\t\t\tgetGrow(flexContainerNodeRef.current) == 0\r\n\t\t)\r\n\t\t\treturn;\r\n\r\n\t\tconst parent = flexContainerNodeRef.current.parentElement;\r\n\t\tif (!parent) return;\r\n\r\n\t\tconst sizeName =\r\n\t\t\tfitContent.charAt(0).toUpperCase() + fitContent.substring(1);\r\n\t\tconst parentSize =\r\n\t\t\t(parent[\r\n\t\t\t\t(\"client\" + sizeName) as \"clientWidth\" | \"clientHeight\"\r\n\t\t\t] as number) || 0;\r\n\r\n\t\tif (!parentSize || containerCount <= 0) return;\r\n\r\n\t\t// 내 grow 재계산 (0 ~ containerCount로 클램프)\r\n\t\tconst nextGrowRaw = mathGrow(size, parentSize, containerCount);\r\n\t\tconst nextGrow = Math.min(containerCount, Math.max(0, nextGrowRaw));\r\n\t\tconst currentGrow = getGrow(flexContainerNodeRef.current);\r\n\r\n\t\t// 미세 변화로 루프 도는 것 방지\r\n\t\tif (Math.abs(nextGrow - currentGrow) < 0.001) return;\r\n\r\n\t\tsetPrevGrowState(currentGrow);\r\n\t\tsetGrowState(nextGrow);\r\n\r\n\t\t// 형제 컨테이너 grow 재분배\r\n\t\tconst containers = [...(parent.children || [])].filter((el) => {\r\n\t\t\tconst item = el as HTMLElement;\r\n\t\t\treturn (\r\n\t\t\t\titem.hasAttribute(\"data-container_name\") &&\r\n\t\t\t\t!item.classList.contains(styles[\"flex-resize-panel\"])\r\n\t\t\t);\r\n\t\t}) as HTMLElement[];\r\n\r\n\t\tconst siblings = containers.filter(\r\n\t\t\t(el) => el !== (flexContainerNodeRef.current as HTMLElement),\r\n\t\t);\r\n\r\n\t\t// 닫힌 컨테이너는 건드리지 않음\r\n\t\tconst adjustable = siblings.filter((el) => el.style.flex !== \"0 1 0%\");\r\n\r\n\t\tconst remaining = containerCount - nextGrow;\r\n\t\tif (remaining <= 0 || adjustable.length === 0) return;\r\n\r\n\t\tconst oldSum = adjustable.reduce((sum, el) => sum + getGrow(el), 0);\r\n\r\n\t\tif (oldSum <= 0) {\r\n\t\t\t// 기존 grow 합이 0이면 균등분배\r\n\t\t\tconst each = remaining / adjustable.length;\r\n\t\t\tadjustable.forEach((el) => {\r\n\t\t\t\tel.dataset.grow = each.toString();\r\n\t\t\t\tel.style.flex = `${each} 1 0%`;\r\n\t\t\t});\r\n\t\t} else {\r\n\t\t\t// 기존 grow 비율대로 스케일링\r\n\t\t\tadjustable.forEach((el) => {\r\n\t\t\t\tconst g = getGrow(el);\r\n\t\t\t\tconst scaled = remaining * (g / oldSum);\r\n\t\t\t\tel.dataset.grow = scaled.toString();\r\n\t\t\t\tel.style.flex = `${scaled} 1 0%`;\r\n\t\t\t});\r\n\t\t}\r\n\t}, [size, isFitContent, fitContent, containerCount]);\r\n\r\n\treturn (\r\n\t\t<>\r\n\t\t\t<div\r\n\t\t\t\tid={containerName}\r\n\t\t\t\tdata-container_name={containerName}\r\n\t\t\t\tref={flexContainerRef}\r\n\t\t\t\tclassName={`${styles[\"flex-container\"]} ${className && className !== \"\" ? className : \"\"}`}\r\n\t\t\t\t{...(growState !== undefined\r\n\t\t\t\t\t? { [\"data-grow\"]: growState }\r\n\t\t\t\t\t: {})}\r\n\t\t\t\t{...(prevGrowState != undefined\r\n\t\t\t\t\t? { [\"data-prev_grow\"]: prevGrowState }\r\n\t\t\t\t\t: {})}\r\n\t\t\t\tdata-is_resize={isInitialResizable}\r\n\t\t\t\tdata-is_resize_panel={isResizePanel}\r\n\t\t\t\tstyle={\r\n\t\t\t\t\t(growState !== undefined && {\r\n\t\t\t\t\t\tflex: `${growState} 1 0%`,\r\n\t\t\t\t\t}) ||\r\n\t\t\t\t\t{}\r\n\t\t\t\t}\r\n\t\t\t>\r\n\t\t\t\t{(isFitContent && (\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclassName={`${styles[\"flex-content-fit-wrapper\"]}`}\r\n\t\t\t\t\t\tref={ref}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{children}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t)) ||\r\n\t\t\t\t\tchildren}\r\n\t\t\t</div>\r\n\t\t\t{isResizePanel && (\r\n\t\t\t\t<FlexLayoutResizePanel\r\n\t\t\t\t\tcontainerName={containerName}\r\n\t\t\t\t\tlayoutName={layoutName}\r\n\t\t\t\t\tdirection={direction}\r\n\t\t\t\t\tcontainerCount={containerCount}\r\n\t\t\t\t\tpanelMode={panelMode}\r\n\t\t\t\t\tpanelClassName={panelClassName}\r\n\t\t\t\t\tpanelMovementMode={panelMovementMode}\r\n\t\t\t\t\tonResizingChange={handleResizingChange}\r\n\t\t\t\t/>\r\n\t\t\t)}\r\n\t\t</>\r\n\t);\r\n}\r\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,68 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var FlexLayoutIFramePane_exports = {};
+__export(FlexLayoutIFramePane_exports, {
+  FlexLayoutIFramePane: () => FlexLayoutIFramePane
+});
+module.exports = __toCommonJS(FlexLayoutIFramePane_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_rxjs = require("rxjs");
+var import_hooks = require("../hooks");
+function FlexLayoutIFramePane({
+  url,
+  screenKey
+}) {
+  const [blockPointer, setBlockPointer] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    const draggingSubject = import_hooks.dragStateSubject.pipe(
+      (0, import_rxjs.map)((s) => !!s?.isDragging),
+      (0, import_rxjs.startWith)(false),
+      (0, import_rxjs.distinctUntilChanged)()
+    );
+    const sub = (0, import_rxjs.combineLatest)([draggingSubject, import_hooks.isResizingSubject]).pipe(
+      (0, import_rxjs.map)(([dragging, resizing]) => dragging || resizing),
+      (0, import_rxjs.distinctUntilChanged)()
+    ).subscribe(setBlockPointer);
+    return () => sub.unsubscribe();
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "iframe",
+    {
+      src: url,
+      style: {
+        width: "100%",
+        height: "100%",
+        border: 0,
+        //리사이즈 및 드래깅 중 ifram이 이벤트 못먹게 방지
+        pointerEvents: blockPointer ? "none" : "auto"
+      },
+      sandbox: "allow-same-origin allow-scripts allow-forms allow-popups",
+      referrerPolicy: "no-referrer",
+      loading: "lazy"
+    },
+    screenKey
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FlexLayoutIFramePane
+});
+//# sourceMappingURL=FlexLayoutIFramePane.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutIFramePane.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { useEffect, useState } from \"react\";\r\nimport { combineLatest, distinctUntilChanged, map, startWith } from \"rxjs\";\r\nimport { dragStateSubject, isResizingSubject } from \"../hooks\";\r\n\r\nexport function FlexLayoutIFramePane({\r\n\turl,\r\n\tscreenKey,\r\n}: {\r\n\turl: string;\r\n\tscreenKey?: string;\r\n}) {\r\n\tconst [blockPointer, setBlockPointer] = useState(false);\r\n\r\n\tuseEffect(() => {\r\n\t\tconst draggingSubject = dragStateSubject.pipe(\r\n\t\t\tmap((s) => !!s?.isDragging),\r\n\t\t\tstartWith(false),\r\n\t\t\tdistinctUntilChanged(),\r\n\t\t);\r\n\r\n\t\tconst sub = combineLatest([draggingSubject, isResizingSubject])\r\n\t\t\t.pipe(\r\n\t\t\t\tmap(([dragging, resizing]) => dragging || resizing),\r\n\t\t\t\tdistinctUntilChanged(),\r\n\t\t\t)\r\n\t\t\t.subscribe(setBlockPointer);\r\n\r\n\t\treturn () => sub.unsubscribe();\r\n\t}, []);\r\n\r\n\treturn (\r\n\t\t<iframe\r\n\t\t\tkey={screenKey}\r\n\t\t\tsrc={url}\r\n\t\t\tstyle={{\r\n\t\t\t\twidth: \"100%\",\r\n\t\t\t\theight: \"100%\",\r\n\t\t\t\tborder: 0,\r\n\t\t\t\t//리사이즈 및 드래깅 중 ifram이 이벤트 못먹게 방지\r\n\t\t\t\tpointerEvents: blockPointer ? \"none\" : \"auto\",\r\n\t\t\t}}\r\n\t\t\tsandbox=\"allow-same-origin allow-scripts allow-forms allow-popups\"\r\n\t\t\treferrerPolicy=\"no-referrer\"\r\n\t\t\tloading=\"lazy\"\r\n\t\t/>\r\n\t);\r\n}\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiCE;AA/BF,mBAAoC;AACpC,kBAAoE;AACpE,mBAAoD;AAE7C,SAAS,qBAAqB;AAAA,EACpC;AAAA,EACA;AACD,GAGG;AACF,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAS,KAAK;AAEtD,8BAAU,MAAM;AACf,UAAM,kBAAkB,8BAAiB;AAAA,UACxC,iBAAI,CAAC,MAAM,CAAC,CAAC,GAAG,UAAU;AAAA,UAC1B,uBAAU,KAAK;AAAA,UACf,kCAAqB;AAAA,IACtB;AAEA,UAAM,UAAM,2BAAc,CAAC,iBAAiB,8BAAiB,CAAC,EAC5D;AAAA,UACA,iBAAI,CAAC,CAAC,UAAU,QAAQ,MAAM,YAAY,QAAQ;AAAA,UAClD,kCAAqB;AAAA,IACtB,EACC,UAAU,eAAe;AAE3B,WAAO,MAAM,IAAI,YAAY;AAAA,EAC9B,GAAG,CAAC,CAAC;AAEL,SACC;AAAA,IAAC;AAAA;AAAA,MAEA,KAAK;AAAA,MACL,OAAO;AAAA,QACN,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,QAAQ;AAAA;AAAA,QAER,eAAe,eAAe,SAAS;AAAA,MACxC;AAAA,MACA,SAAQ;AAAA,MACR,gBAAe;AAAA,MACf,SAAQ;AAAA;AAAA,IAXH;AAAA,EAYN;AAEF;","names":[]}

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

@@ -0,0 +1,4 @@
+export declare function FlexLayoutIFramePane({ url, screenKey, }: {
+    url: string;
+    screenKey?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,44 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { combineLatest, distinctUntilChanged, map, startWith } from "rxjs";
+import { dragStateSubject, isResizingSubject } from "../hooks";
+function FlexLayoutIFramePane({
+  url,
+  screenKey
+}) {
+  const [blockPointer, setBlockPointer] = useState(false);
+  useEffect(() => {
+    const draggingSubject = dragStateSubject.pipe(
+      map((s) => !!s?.isDragging),
+      startWith(false),
+      distinctUntilChanged()
+    );
+    const sub = combineLatest([draggingSubject, isResizingSubject]).pipe(
+      map(([dragging, resizing]) => dragging || resizing),
+      distinctUntilChanged()
+    ).subscribe(setBlockPointer);
+    return () => sub.unsubscribe();
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "iframe",
+    {
+      src: url,
+      style: {
+        width: "100%",
+        height: "100%",
+        border: 0,
+        //리사이즈 및 드래깅 중 ifram이 이벤트 못먹게 방지
+        pointerEvents: blockPointer ? "none" : "auto"
+      },
+      sandbox: "allow-same-origin allow-scripts allow-forms allow-popups",
+      referrerPolicy: "no-referrer",
+      loading: "lazy"
+    },
+    screenKey
+  );
+}
+export {
+  FlexLayoutIFramePane
+};
+//# sourceMappingURL=FlexLayoutIFramePane.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutIFramePane.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { useEffect, useState } from \"react\";\r\nimport { combineLatest, distinctUntilChanged, map, startWith } from \"rxjs\";\r\nimport { dragStateSubject, isResizingSubject } from \"../hooks\";\r\n\r\nexport function FlexLayoutIFramePane({\r\n\turl,\r\n\tscreenKey,\r\n}: {\r\n\turl: string;\r\n\tscreenKey?: string;\r\n}) {\r\n\tconst [blockPointer, setBlockPointer] = useState(false);\r\n\r\n\tuseEffect(() => {\r\n\t\tconst draggingSubject = dragStateSubject.pipe(\r\n\t\t\tmap((s) => !!s?.isDragging),\r\n\t\t\tstartWith(false),\r\n\t\t\tdistinctUntilChanged(),\r\n\t\t);\r\n\r\n\t\tconst sub = combineLatest([draggingSubject, isResizingSubject])\r\n\t\t\t.pipe(\r\n\t\t\t\tmap(([dragging, resizing]) => dragging || resizing),\r\n\t\t\t\tdistinctUntilChanged(),\r\n\t\t\t)\r\n\t\t\t.subscribe(setBlockPointer);\r\n\r\n\t\treturn () => sub.unsubscribe();\r\n\t}, []);\r\n\r\n\treturn (\r\n\t\t<iframe\r\n\t\t\tkey={screenKey}\r\n\t\t\tsrc={url}\r\n\t\t\tstyle={{\r\n\t\t\t\twidth: \"100%\",\r\n\t\t\t\theight: \"100%\",\r\n\t\t\t\tborder: 0,\r\n\t\t\t\t//리사이즈 및 드래깅 중 ifram이 이벤트 못먹게 방지\r\n\t\t\t\tpointerEvents: blockPointer ? \"none\" : \"auto\",\r\n\t\t\t}}\r\n\t\t\tsandbox=\"allow-same-origin allow-scripts allow-forms allow-popups\"\r\n\t\t\treferrerPolicy=\"no-referrer\"\r\n\t\t\tloading=\"lazy\"\r\n\t\t/>\r\n\t);\r\n}\r\n"],"mappings":";AAiCE;AA/BF,SAAS,WAAW,gBAAgB;AACpC,SAAS,eAAe,sBAAsB,KAAK,iBAAiB;AACpE,SAAS,kBAAkB,yBAAyB;AAE7C,SAAS,qBAAqB;AAAA,EACpC;AAAA,EACA;AACD,GAGG;AACF,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,YAAU,MAAM;AACf,UAAM,kBAAkB,iBAAiB;AAAA,MACxC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,UAAU;AAAA,MAC1B,UAAU,KAAK;AAAA,MACf,qBAAqB;AAAA,IACtB;AAEA,UAAM,MAAM,cAAc,CAAC,iBAAiB,iBAAiB,CAAC,EAC5D;AAAA,MACA,IAAI,CAAC,CAAC,UAAU,QAAQ,MAAM,YAAY,QAAQ;AAAA,MAClD,qBAAqB;AAAA,IACtB,EACC,UAAU,eAAe;AAE3B,WAAO,MAAM,IAAI,YAAY;AAAA,EAC9B,GAAG,CAAC,CAAC;AAEL,SACC;AAAA,IAAC;AAAA;AAAA,MAEA,KAAK;AAAA,MACL,OAAO;AAAA,QACN,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,QAAQ;AAAA;AAAA,QAER,eAAe,eAAe,SAAS;AAAA,MACxC;AAAA,MACA,SAAQ;AAAA,MACR,gBAAe;AAAA,MACf,SAAQ;AAAA;AAAA,IAXH;AAAA,EAYN;AAEF;","names":[]}

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

@@ -1,15 +1,43 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var FlexLayoutContainerStore = require('../store/FlexLayoutContainerStore');
-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);
-
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var FlexLayoutResizePanel_exports = {};
+__export(FlexLayoutResizePanel_exports, {
+  default: () => FlexLayoutResizePanel
+});
+module.exports = __toCommonJS(FlexLayoutResizePanel_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_hooks = require("../hooks");
+var import_FlexLayoutContainerStore = require("../store/FlexLayoutContainerStore");
+var import_FlexLayout = __toESM(require("../styles/FlexLayout.module.css"), 1);
+var import_FlexLayoutUtils = require("../utils/FlexLayoutUtils");
 const flexDirectionModel = {
   row: {
     xy: "x",
@@ -33,55 +61,69 @@ function FlexLayoutResizePanel({
   containerName,
   layoutName,
   panelClassName,
-  panelMovementMode
+  panelMovementMode,
+  onResizingChange
 }) {
-  let isResizePanelClickRef = react.useRef(false);
-  let prevTouchEvent = null;
-  let parentSizeRef = react.useRef(0);
-  let totalMovementRef = react.useRef(0);
-  const containerCountRef = react.useRef(containerCount);
-  react.useEffect(() => {
+  const directionRef = (0, import_react.useRef)(direction);
+  const movementModeRef = (0, import_react.useRef)(panelMovementMode);
+  (0, import_react.useEffect)(() => {
+    directionRef.current = direction;
+  }, [direction]);
+  (0, import_react.useEffect)(() => {
+    movementModeRef.current = panelMovementMode;
+  }, [panelMovementMode]);
+  const isResizePanelClickRef = (0, import_react.useRef)(false);
+  const prevTouchEventRef = (0, import_react.useRef)(null);
+  const parentSizeRef = (0, import_react.useRef)(0);
+  const totalMovementRef = (0, import_react.useRef)(0);
+  const containerCountRef = (0, import_react.useRef)(containerCount);
+  const panelRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
     return () => {
+      import_hooks.isResizingSubject.next(false);
       document.body.style.cursor = "";
     };
   }, []);
-  react.useEffect(() => {
+  (0, import_react.useEffect)(() => {
     containerCountRef.current = containerCount;
   }, [containerCount]);
-  const panelRef = react.useRef(null);
   const panelMouseDownEvent = (event) => {
     if (!panelRef.current || !panelRef.current.parentElement) return;
     isResizePanelClickRef.current = true;
+    onResizingChange?.(true);
     containerCountRef.current = [
       ...panelRef.current.parentElement.children
     ].filter((e) => e.hasAttribute("data-container_name")).length;
     const sizeName = flexDirectionModel[direction].sizeName;
     parentSizeRef.current = panelRef.current.parentElement.getBoundingClientRect()[sizeName];
-    prevTouchEvent = null;
+    prevTouchEventRef.current = null;
     totalMovementRef.current = 0;
+    import_hooks.isResizingSubject.next(true);
     if (!parentSizeRef.current) return;
     document.body.style.cursor = flexDirectionModel[direction].resizeCursor;
   };
   const panelMouseUpEvent = () => {
     isResizePanelClickRef.current = false;
+    onResizingChange?.(false);
     parentSizeRef.current = 0;
-    prevTouchEvent = null;
     totalMovementRef.current = 0;
+    prevTouchEventRef.current = null;
+    import_hooks.isResizingSubject.next(false);
     document.body.style.cursor = "";
   };
-  function moveMouseFlex(originTarget, resizePanel, moveEvent) {
-    const model = flexDirectionModel[direction];
+  function moveMouseFlex(originTarget, resizePanel, moveEvent, dir, mode) {
+    const model = flexDirectionModel[dir];
     const movement = moveEvent["movement" + model.xy.toUpperCase()];
     totalMovementRef.current += movement;
     const minSizeName = "min-" + model.sizeName;
     const maxSizeName = "max-" + model.sizeName;
-    let targetElement = FlexLayoutUtils.findNotCloseFlexContent(
+    let targetElement = (0, import_FlexLayoutUtils.findNotCloseFlexContent)(
       originTarget,
       "previousElementSibling"
     );
     if (panelMovementMode === "divorce" && totalMovementRef.current > 0 || panelMovementMode === "bulldozer" && movement > 0 || !targetElement)
       targetElement = originTarget;
-    let nextElement = FlexLayoutUtils.findNotCloseFlexContent(
+    let nextElement = (0, import_FlexLayoutUtils.findNotCloseFlexContent)(
       resizePanel.nextElementSibling,
       "nextElementSibling"
     );
@@ -104,10 +146,10 @@ function FlexLayoutResizePanel({
     if (nextMaxSize > 0 && nextElementSize > nextMaxSize) {
       return;
     }
-    if (FlexLayoutUtils.isOverMove(targetSize, targetMinSize)) {
+    if ((0, import_FlexLayoutUtils.isOverMove)(targetSize, targetMinSize)) {
       targetSize = 0;
       nextElementSize = nextRect[model.sizeName];
-    } else if (FlexLayoutUtils.isOverMove(nextElementSize, nextMinSize)) {
+    } else if ((0, import_FlexLayoutUtils.isOverMove)(nextElementSize, nextMinSize)) {
       nextElementSize = 0;
       targetSize = targetRect[model.sizeName];
     }
@@ -118,64 +160,87 @@ function FlexLayoutResizePanel({
     targetElement.style.flex = `${targetFlexGrow} 1 0%`;
     nextElement.style.flex = `${nextElementFlexGrow} 1 0%`;
   }
-  react.useEffect(() => {
+  (0, import_react.useEffect)(() => {
     const addGlobalMoveEvent = (event) => {
       if (!isResizePanelClickRef.current || !panelRef.current) {
         return;
       }
       event.preventDefault();
+      const dir = directionRef.current;
+      const mode = movementModeRef.current;
       const targetElement = panelRef.current.previousElementSibling;
       const targetPanel = panelRef.current;
       if (!targetElement || !targetPanel) return;
       let move = { movementX: 0, movementY: 0 };
       if (window.TouchEvent && event instanceof window.TouchEvent) {
-        if (!prevTouchEvent) {
-          prevTouchEvent = event;
+        const prev = prevTouchEventRef.current;
+        if (!prev) {
+          prevTouchEventRef.current = event;
           return;
         }
-        move.movementX = (prevTouchEvent.touches[0].pageX - event.touches[0].pageX) * -2;
-        move.movementY = (prevTouchEvent.touches[0].pageY - event.touches[0].pageY) * -2;
-        prevTouchEvent = event;
+        move.movementX = (prev.touches[0].pageX - event.touches[0].pageX) * -1;
+        move.movementY = (prev.touches[0].pageY - event.touches[0].pageY) * -1;
+        prevTouchEventRef.current = event;
       } else {
         move.movementX = event.movementX;
         move.movementY = event.movementY;
       }
-      moveMouseFlex(targetElement, targetPanel, move);
+      moveMouseFlex(targetElement, targetPanel, move, dir, mode);
     };
     ["mousemove", "touchmove"].forEach((eventName) => {
       window.addEventListener(eventName, addGlobalMoveEvent, {
         passive: false
       });
     });
-    ["mouseup", "touchend"].forEach((eventName) => {
+    [
+      "mouseup",
+      "touchend",
+      "touchcancel",
+      // 터치 제스처 시스템 인터럽트
+      "pointerup",
+      // 범용 포인터 이벤트
+      "pointercancel",
+      "blur"
+      // 윈도우 포커스 아웃 (Alt+Tab 등)
+    ].forEach((eventName) => {
       window.addEventListener(eventName, panelMouseUpEvent);
     });
     return () => {
       ["mousemove", "touchmove"].forEach((eventName) => {
         window.removeEventListener(eventName, addGlobalMoveEvent);
       });
-      ["mouseup", "touchend"].forEach((eventName) => {
+      [
+        "mouseup",
+        "touchend",
+        "touchcancel",
+        // 터치 제스처 시스템 인터럽트
+        "pointerup",
+        // 범용 포인터 이벤트
+        "pointercancel",
+        "blur"
+        // 윈도우 포커스 아웃 (Alt+Tab 등)
+      ].forEach((eventName) => {
         window.removeEventListener(eventName, panelMouseUpEvent);
       });
     };
   }, []);
-  react.useEffect(() => {
+  (0, import_react.useEffect)(() => {
     if (!panelRef.current) return;
-    FlexLayoutContainerStore.setResizePanelRef(layoutName, containerName, panelRef);
+    (0, import_FlexLayoutContainerStore.setResizePanelRef)(layoutName, containerName, panelRef);
+    return () => {
+      (0, import_FlexLayoutContainerStore.setResizePanelRef)(layoutName, containerName, null);
+    };
   }, [containerName, layoutName]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       id: containerName + "_resize_panel",
-      className: `${styles__default.default["flex-resize-panel"]} ${styles__default.default[panelMode]} ${panelClassName && panelClassName !== "" ? panelClassName : ""}`,
+      className: `${import_FlexLayout.default["flex-resize-panel"]} ${import_FlexLayout.default[panelMode]} ${panelClassName && panelClassName !== "" ? panelClassName : ""}`,
       ref: panelRef,
       onMouseDown: panelMouseDownEvent,
       onTouchStart: panelMouseDownEvent,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.hover })
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_FlexLayout.default.hover })
     }
   );
 }
-
-module.exports = FlexLayoutResizePanel;
-//# sourceMappingURL=FlexLayoutResizePanel.cjs.map
 //# sourceMappingURL=FlexLayoutResizePanel.cjs.map