@byeolnaerim/flex-layout 0.0.6 → 0.0.8

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

@@ -0,0 +1,192 @@
+'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);
+
+const flexDirectionModel = {
+  row: {
+    xy: "x",
+    targetDirection: "left",
+    nextDirection: "right",
+    sizeName: "width",
+    resizeCursor: "ew-resize"
+  },
+  column: {
+    xy: "y",
+    targetDirection: "top",
+    nextDirection: "bottom",
+    sizeName: "height",
+    resizeCursor: "ns-resize"
+  }
+};
+function FlexLayoutResizePanel({
+  direction,
+  containerCount,
+  panelMode = "default",
+  containerName,
+  layoutName,
+  panelClassName,
+  panelMovementMode
+}) {
+  const directionRef = react.useRef(direction);
+  const movementModeRef = react.useRef(panelMovementMode);
+  react.useEffect(() => {
+    directionRef.current = direction;
+  }, [direction]);
+  react.useEffect(() => {
+    movementModeRef.current = panelMovementMode;
+  }, [panelMovementMode]);
+  const isResizePanelClickRef = react.useRef(false);
+  const prevTouchEventRef = react.useRef(null);
+  const parentSizeRef = react.useRef(0);
+  const totalMovementRef = react.useRef(0);
+  const containerCountRef = react.useRef(containerCount);
+  const panelRef = react.useRef(null);
+  react.useEffect(() => {
+    return () => {
+      document.body.style.cursor = "";
+    };
+  }, []);
+  react.useEffect(() => {
+    containerCountRef.current = containerCount;
+  }, [containerCount]);
+  const panelMouseDownEvent = (event) => {
+    if (!panelRef.current || !panelRef.current.parentElement) return;
+    isResizePanelClickRef.current = 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];
+    prevTouchEventRef.current = null;
+    totalMovementRef.current = 0;
+    if (!parentSizeRef.current) return;
+    document.body.style.cursor = flexDirectionModel[direction].resizeCursor;
+  };
+  const panelMouseUpEvent = () => {
+    isResizePanelClickRef.current = false;
+    parentSizeRef.current = 0;
+    totalMovementRef.current = 0;
+    prevTouchEventRef.current = null;
+    document.body.style.cursor = "";
+  };
+  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(
+      originTarget,
+      "previousElementSibling"
+    );
+    if (panelMovementMode === "divorce" && totalMovementRef.current > 0 || panelMovementMode === "bulldozer" && movement > 0 || !targetElement)
+      targetElement = originTarget;
+    let nextElement = FlexLayoutUtils.findNotCloseFlexContent(
+      resizePanel.nextElementSibling,
+      "nextElementSibling"
+    );
+    if (panelMovementMode === "divorce" && totalMovementRef.current < 0 || panelMovementMode === "bulldozer" && movement < 0 || !nextElement)
+      nextElement = resizePanel.nextElementSibling;
+    if (!targetElement || !nextElement) return;
+    const targetRect = targetElement.getBoundingClientRect();
+    const targetStyle = window.getComputedStyle(targetElement);
+    const targetMinSize = parseFloat(targetStyle.getPropertyValue(minSizeName)) || 0;
+    const targetMaxSize = parseFloat(targetStyle.getPropertyValue(maxSizeName)) || 0;
+    const nextRect = nextElement.getBoundingClientRect();
+    const nextStyle = window.getComputedStyle(nextElement);
+    const nextMinSize = parseFloat(nextStyle.getPropertyValue(minSizeName)) || 0;
+    const nextMaxSize = parseFloat(nextStyle.getPropertyValue(maxSizeName)) || 0;
+    let targetSize = targetRect[model.sizeName] + movement;
+    let nextElementSize = nextRect[model.sizeName] - movement;
+    if (targetMaxSize > 0 && targetSize > targetMaxSize) {
+      return;
+    }
+    if (nextMaxSize > 0 && nextElementSize > nextMaxSize) {
+      return;
+    }
+    if (FlexLayoutUtils.isOverMove(targetSize, targetMinSize)) {
+      targetSize = 0;
+      nextElementSize = nextRect[model.sizeName];
+    } else if (FlexLayoutUtils.isOverMove(nextElementSize, nextMinSize)) {
+      nextElementSize = 0;
+      targetSize = targetRect[model.sizeName];
+    }
+    const targetFlexGrow = targetSize / (parentSizeRef.current - 1) * containerCountRef.current;
+    const nextElementFlexGrow = nextElementSize / (parentSizeRef.current - 1) * containerCountRef.current;
+    if (!(targetElement instanceof HTMLElement)) return;
+    if (!(nextElement instanceof HTMLElement)) return;
+    targetElement.style.flex = `${targetFlexGrow} 1 0%`;
+    nextElement.style.flex = `${nextElementFlexGrow} 1 0%`;
+  }
+  react.useEffect(() => {
+    const addGlobalMoveEvent = (event) => {
+      if (!isResizePanelClickRef.current || !panelRef.current) {
+        return;
+      }
+      event.preventDefault();
+      const dir = directionRef.current;
+      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) {
+        const prev = prevTouchEventRef.current;
+        if (!prev) {
+          prevTouchEventRef.current = event;
+          return;
+        }
+        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, dir);
+    };
+    ["mousemove", "touchmove"].forEach((eventName) => {
+      window.addEventListener(eventName, addGlobalMoveEvent, {
+        passive: false
+      });
+    });
+    ["mouseup", "touchend"].forEach((eventName) => {
+      window.addEventListener(eventName, panelMouseUpEvent);
+    });
+    return () => {
+      ["mousemove", "touchmove"].forEach((eventName) => {
+        window.removeEventListener(eventName, addGlobalMoveEvent);
+      });
+      ["mouseup", "touchend"].forEach((eventName) => {
+        window.removeEventListener(eventName, panelMouseUpEvent);
+      });
+    };
+  }, []);
+  react.useEffect(() => {
+    if (!panelRef.current) return;
+    FlexLayoutContainerStore.setResizePanelRef(layoutName, containerName, panelRef);
+  }, [containerName, layoutName]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      id: containerName + "_resize_panel",
+      className: `${styles__default.default["flex-resize-panel"]} ${styles__default.default[panelMode]} ${panelClassName && panelClassName !== "" ? panelClassName : ""}`,
+      ref: panelRef,
+      onMouseDown: panelMouseDownEvent,
+      onTouchStart: panelMouseDownEvent,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.hover })
+    }
+  );
+}
+
+module.exports = FlexLayoutResizePanel;
+//# sourceMappingURL=FlexLayoutResizePanel.cjs.map
+//# sourceMappingURL=FlexLayoutResizePanel.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutResizePanel.tsx"],"names":["useRef","useEffect","findNotCloseFlexContent","isOverMove","setResizePanelRef","jsx","styles"],"mappings":"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","file":"FlexLayoutResizePanel.cjs","sourcesContent":["\"use client\";\r\n\r\nimport type { TouchEvent } from \"react\";\r\nimport { MouseEvent, useEffect, useRef } from \"react\";\r\nimport { setResizePanelRef } from \"../store/FlexLayoutContainerStore\";\r\nimport styles from \"../styles/FlexLayout.module.css\";\r\nimport { FlexDirectionModelType } from \"../types/FlexDirectionTypes\";\r\nimport { FlexLayoutResizePanelProps } from \"../types/FlexLayoutTypes\";\r\nimport { findNotCloseFlexContent, isOverMove } from \"../utils/FlexLayoutUtils\";\r\n\r\nconst flexDirectionModel = {\r\n\trow: {\r\n\t\txy: \"x\",\r\n\t\ttargetDirection: \"left\",\r\n\t\tnextDirection: \"right\",\r\n\t\tsizeName: \"width\",\r\n\t\tresizeCursor: \"ew-resize\",\r\n\t} as FlexDirectionModelType,\r\n\tcolumn: {\r\n\t\txy: \"y\",\r\n\t\ttargetDirection: \"top\",\r\n\t\tnextDirection: \"bottom\",\r\n\t\tsizeName: \"height\",\r\n\t\tresizeCursor: \"ns-resize\",\r\n\t} as FlexDirectionModelType,\r\n} as Record<string, FlexDirectionModelType>;\r\n\r\nexport default function FlexLayoutResizePanel({\r\n\tdirection,\r\n\tcontainerCount,\r\n\tpanelMode = \"default\",\r\n\tcontainerName,\r\n\tlayoutName,\r\n\tpanelClassName,\r\n\tpanelMovementMode,\r\n}: FlexLayoutResizePanelProps) {\r\n\tconst directionRef = useRef(direction);\r\n\tconst movementModeRef = useRef(panelMovementMode);\r\n\r\n\tuseEffect(() => {\r\n\t\tdirectionRef.current = direction;\r\n\t}, [direction]);\r\n\tuseEffect(() => {\r\n\t\tmovementModeRef.current = panelMovementMode;\r\n\t}, [panelMovementMode]);\r\n\r\n\tconst isResizePanelClickRef = useRef<boolean>(false);\r\n\tconst prevTouchEventRef = useRef<globalThis.TouchEvent | null>(null);\r\n\tconst parentSizeRef = useRef<number>(0);\r\n\tconst totalMovementRef = useRef<number>(0);\r\n\r\n\tconst containerCountRef = useRef<number>(containerCount);\r\n\r\n\tconst panelRef = useRef<HTMLDivElement>(null);\r\n\r\n\tuseEffect(() => {\r\n\t\treturn () => {\r\n\t\t\tdocument.body.style.cursor = \"\";\r\n\t\t};\r\n\t}, []);\r\n\tuseEffect(() => {\r\n\t\tcontainerCountRef.current = containerCount;\r\n\t}, [containerCount]);\r\n\r\n\tconst panelMouseDownEvent = (\r\n\t\tevent: MouseEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>,\r\n\t) => {\r\n\t\tif (!panelRef.current || !panelRef.current.parentElement) return;\r\n\t\tisResizePanelClickRef.current = true;\r\n\t\tcontainerCountRef.current = [\r\n\t\t\t...panelRef.current.parentElement.children,\r\n\t\t].filter((e) => e.hasAttribute(\"data-container_name\")).length;\r\n\t\tconst sizeName = flexDirectionModel[direction].sizeName;\r\n\t\tparentSizeRef.current =\r\n\t\t\tpanelRef.current.parentElement.getBoundingClientRect()[\r\n\t\t\t\tsizeName\r\n\t\t\t] as number;\r\n\t\tprevTouchEventRef.current = null;\r\n\t\ttotalMovementRef.current = 0;\r\n\r\n\t\tif (!parentSizeRef.current) return;\r\n\t\tdocument.body.style.cursor = flexDirectionModel[direction].resizeCursor;\r\n\t};\r\n\r\n\tconst panelMouseUpEvent = () => {\r\n\t\tisResizePanelClickRef.current = false;\r\n\t\tparentSizeRef.current = 0;\r\n\t\ttotalMovementRef.current = 0;\r\n\t\tprevTouchEventRef.current = null;\r\n\t\tdocument.body.style.cursor = \"\";\r\n\t};\r\n\r\n\tfunction moveMouseFlex(\r\n\t\toriginTarget: HTMLDivElement,\r\n\t\tresizePanel: HTMLDivElement,\r\n\t\tmoveEvent: { movementX: number; movementY: number },\r\n\t\tdir: string,\r\n\t\tmode: string,\r\n\t) {\r\n\t\t//return new Promise<void>(resolve => {\r\n\t\tconst model = flexDirectionModel[dir];\r\n\t\tconst movement =\r\n\t\t\tmoveEvent[\r\n\t\t\t\t(\"movement\" + model.xy.toUpperCase()) as\r\n\t\t\t\t\t| \"movementX\"\r\n\t\t\t\t\t| \"movementY\"\r\n\t\t\t];\r\n\t\ttotalMovementRef.current += movement;\r\n\r\n\t\tconst minSizeName = \"min-\" + model.sizeName;\r\n\t\tconst maxSizeName = \"max-\" + model.sizeName;\r\n\r\n\t\t// 이전 방향으로 가까운 열린 패널 찾기\r\n\t\tlet targetElement = findNotCloseFlexContent(\r\n\t\t\toriginTarget,\r\n\t\t\t\"previousElementSibling\",\r\n\t\t);\r\n\r\n\t\tif (\r\n\t\t\t(panelMovementMode === \"divorce\" && totalMovementRef.current > 0) ||\r\n\t\t\t(panelMovementMode === \"bulldozer\" && movement > 0) ||\r\n\t\t\t!targetElement\r\n\t\t)\r\n\t\t\t//if (!targetElement || movement > 0)\r\n\t\t\ttargetElement = originTarget;\r\n\r\n\t\t// 다음 방향으로 가까운 열린 패널 찾기\r\n\t\tlet nextElement = findNotCloseFlexContent(\r\n\t\t\tresizePanel.nextElementSibling,\r\n\t\t\t\"nextElementSibling\",\r\n\t\t);\r\n\r\n\t\tif (\r\n\t\t\t(panelMovementMode === \"divorce\" && totalMovementRef.current < 0) ||\r\n\t\t\t(panelMovementMode === \"bulldozer\" && movement < 0) ||\r\n\t\t\t!nextElement\r\n\t\t)\r\n\t\t\t//if (!nextElement || movement < 0)\r\n\t\t\tnextElement = resizePanel.nextElementSibling as HTMLDivElement;\r\n\r\n\t\tif (!targetElement || !nextElement) return;\r\n\r\n\t\tconst targetRect = targetElement.getBoundingClientRect();\r\n\t\tconst targetStyle = window.getComputedStyle(targetElement);\r\n\t\tconst targetMinSize =\r\n\t\t\tparseFloat(targetStyle.getPropertyValue(minSizeName)) || 0;\r\n\t\tconst targetMaxSize =\r\n\t\t\tparseFloat(targetStyle.getPropertyValue(maxSizeName)) || 0;\r\n\r\n\t\tconst nextRect = nextElement.getBoundingClientRect();\r\n\t\tconst nextStyle = window.getComputedStyle(nextElement);\r\n\t\tconst nextMinSize =\r\n\t\t\tparseFloat(nextStyle.getPropertyValue(minSizeName)) || 0;\r\n\t\tconst nextMaxSize =\r\n\t\t\tparseFloat(nextStyle.getPropertyValue(maxSizeName)) || 0;\r\n\r\n\t\t// 변경하고자 하는 target 사이즈와 next 사이즈 계산\r\n\t\tlet targetSize = (targetRect[model.sizeName] as number) + movement;\r\n\t\tlet nextElementSize = (nextRect[model.sizeName] as number) - movement;\r\n\r\n\t\t// Max size 조건 확인\r\n\t\tif (targetMaxSize > 0 && targetSize > targetMaxSize) {\r\n\t\t\t// target이 max size 초과면 조정 불가\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tif (nextMaxSize > 0 && nextElementSize > nextMaxSize) {\r\n\t\t\t// next가 max size 초과면 조정 불가\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\t// 2024 11 29 자기 자신이 close 상태일 때 다음 타겟을 따라가도록 하되 30px만큼 움직일 때는 자기 자신을 open 상태로 하는 코드 주석처리\r\n\t\t//if (!nextElement || 30 < movement * -1) {\r\n\t\t//    nextElement = resizePanel.nextElementSibling as HTMLDivElement;\r\n\t\t//}\r\n\r\n\t\t// Min size 조건 확인 후 조정\r\n\t\tif (isOverMove(targetSize, targetMinSize)) {\r\n\t\t\t// target이 너무 작아지면 0으로 처리 (close 상태)\r\n\t\t\ttargetSize = 0;\r\n\t\t\tnextElementSize = nextRect[model.sizeName] as number; // next는 변화 없음\r\n\t\t} else if (isOverMove(nextElementSize, nextMinSize)) {\r\n\t\t\t// next가 너무 작아지면 0으로 처리 (close 상태)\r\n\t\t\tnextElementSize = 0;\r\n\t\t\ttargetSize = targetRect[model.sizeName] as number; // target은 변화 없음\r\n\t\t}\r\n\r\n\t\t// flex-grow 재계산\r\n\t\tconst targetFlexGrow =\r\n\t\t\t(targetSize / (parentSizeRef.current - 1)) *\r\n\t\t\tcontainerCountRef.current;\r\n\t\tconst nextElementFlexGrow =\r\n\t\t\t(nextElementSize / (parentSizeRef.current - 1)) *\r\n\t\t\tcontainerCountRef.current;\r\n\r\n\t\tif (!(targetElement instanceof HTMLElement)) return;\r\n\t\tif (!(nextElement instanceof HTMLElement)) return;\r\n\r\n\t\ttargetElement.style.flex = `${targetFlexGrow} 1 0%`;\r\n\t\tnextElement.style.flex = `${nextElementFlexGrow} 1 0%`;\r\n\r\n\t\t//     resolve();\r\n\t\t// });\r\n\t}\r\n\r\n\tuseEffect(() => {\r\n\t\tconst addGlobalMoveEvent = (event: Event) => {\r\n\t\t\tif (!isResizePanelClickRef.current || !panelRef.current) {\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\t\t\tevent.preventDefault();\r\n\r\n\t\t\tconst dir = directionRef.current;\r\n\t\t\tconst mode = movementModeRef.current;\r\n\r\n\t\t\tconst targetElement = panelRef.current\r\n\t\t\t\t.previousElementSibling as HTMLDivElement;\r\n\t\t\tconst targetPanel = panelRef.current;\r\n\t\t\tif (!targetElement || !targetPanel) return;\r\n\r\n\t\t\tlet move = { movementX: 0, movementY: 0 };\r\n\t\t\tif (window.TouchEvent && event instanceof window.TouchEvent) {\r\n\t\t\t\tconst prev = prevTouchEventRef.current;\r\n\t\t\t\tif (!prev) {\r\n\t\t\t\t\tprevTouchEventRef.current = event;\r\n\t\t\t\t\treturn;\r\n\t\t\t\t}\r\n\r\n\t\t\t\tmove.movementX =\r\n\t\t\t\t\t(prev.touches[0].pageX - event.touches[0].pageX) * -1;\r\n\t\t\t\tmove.movementY =\r\n\t\t\t\t\t(prev.touches[0].pageY - event.touches[0].pageY) * -1;\r\n\t\t\t\tprevTouchEventRef.current = event;\r\n\t\t\t} else {\r\n\t\t\t\tmove.movementX = (event as globalThis.MouseEvent).movementX;\r\n\t\t\t\tmove.movementY = (event as globalThis.MouseEvent).movementY;\r\n\t\t\t}\r\n\r\n\t\t\tmoveMouseFlex(targetElement, targetPanel, move, dir, mode);\r\n\t\t};\r\n\r\n\t\t[\"mousemove\", \"touchmove\"].forEach((eventName) => {\r\n\t\t\twindow.addEventListener(eventName, addGlobalMoveEvent, {\r\n\t\t\t\tpassive: false,\r\n\t\t\t});\r\n\t\t});\r\n\t\t[\"mouseup\", \"touchend\"].forEach((eventName) => {\r\n\t\t\twindow.addEventListener(eventName, panelMouseUpEvent);\r\n\t\t});\r\n\r\n\t\treturn () => {\r\n\t\t\t[\"mousemove\", \"touchmove\"].forEach((eventName) => {\r\n\t\t\t\twindow.removeEventListener(eventName, addGlobalMoveEvent);\r\n\t\t\t});\r\n\t\t\t[\"mouseup\", \"touchend\"].forEach((eventName) => {\r\n\t\t\t\twindow.removeEventListener(eventName, panelMouseUpEvent);\r\n\t\t\t});\r\n\t\t};\r\n\t}, []);\r\n\r\n\tuseEffect(() => {\r\n\t\tif (!panelRef.current) return;\r\n\t\tsetResizePanelRef(layoutName, containerName, panelRef);\r\n\t}, [containerName, layoutName]);\r\n\r\n\treturn (\r\n\t\t<div\r\n\t\t\tid={containerName + \"_resize_panel\"}\r\n\t\t\tclassName={`${styles[\"flex-resize-panel\"]} ${styles[panelMode as keyof typeof styles]} ${panelClassName && panelClassName !== \"\" ? panelClassName : \"\"}`}\r\n\t\t\tref={panelRef}\r\n\t\t\tonMouseDown={panelMouseDownEvent}\r\n\t\t\tonTouchStart={panelMouseDownEvent}\r\n\t\t>\r\n\t\t\t<div className={styles.hover}></div>\r\n\t\t</div>\r\n\t);\r\n}\r\n"]}

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

@@ -0,0 +1,186 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { setResizePanelRef } from '../store/FlexLayoutContainerStore';
+import styles from '../styles/FlexLayout.module.css';
+import { findNotCloseFlexContent, isOverMove } from '../utils/FlexLayoutUtils';
+
+const flexDirectionModel = {
+  row: {
+    xy: "x",
+    targetDirection: "left",
+    nextDirection: "right",
+    sizeName: "width",
+    resizeCursor: "ew-resize"
+  },
+  column: {
+    xy: "y",
+    targetDirection: "top",
+    nextDirection: "bottom",
+    sizeName: "height",
+    resizeCursor: "ns-resize"
+  }
+};
+function FlexLayoutResizePanel({
+  direction,
+  containerCount,
+  panelMode = "default",
+  containerName,
+  layoutName,
+  panelClassName,
+  panelMovementMode
+}) {
+  const directionRef = useRef(direction);
+  const movementModeRef = useRef(panelMovementMode);
+  useEffect(() => {
+    directionRef.current = direction;
+  }, [direction]);
+  useEffect(() => {
+    movementModeRef.current = panelMovementMode;
+  }, [panelMovementMode]);
+  const isResizePanelClickRef = useRef(false);
+  const prevTouchEventRef = useRef(null);
+  const parentSizeRef = useRef(0);
+  const totalMovementRef = useRef(0);
+  const containerCountRef = useRef(containerCount);
+  const panelRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      document.body.style.cursor = "";
+    };
+  }, []);
+  useEffect(() => {
+    containerCountRef.current = containerCount;
+  }, [containerCount]);
+  const panelMouseDownEvent = (event) => {
+    if (!panelRef.current || !panelRef.current.parentElement) return;
+    isResizePanelClickRef.current = 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];
+    prevTouchEventRef.current = null;
+    totalMovementRef.current = 0;
+    if (!parentSizeRef.current) return;
+    document.body.style.cursor = flexDirectionModel[direction].resizeCursor;
+  };
+  const panelMouseUpEvent = () => {
+    isResizePanelClickRef.current = false;
+    parentSizeRef.current = 0;
+    totalMovementRef.current = 0;
+    prevTouchEventRef.current = null;
+    document.body.style.cursor = "";
+  };
+  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 = findNotCloseFlexContent(
+      originTarget,
+      "previousElementSibling"
+    );
+    if (panelMovementMode === "divorce" && totalMovementRef.current > 0 || panelMovementMode === "bulldozer" && movement > 0 || !targetElement)
+      targetElement = originTarget;
+    let nextElement = findNotCloseFlexContent(
+      resizePanel.nextElementSibling,
+      "nextElementSibling"
+    );
+    if (panelMovementMode === "divorce" && totalMovementRef.current < 0 || panelMovementMode === "bulldozer" && movement < 0 || !nextElement)
+      nextElement = resizePanel.nextElementSibling;
+    if (!targetElement || !nextElement) return;
+    const targetRect = targetElement.getBoundingClientRect();
+    const targetStyle = window.getComputedStyle(targetElement);
+    const targetMinSize = parseFloat(targetStyle.getPropertyValue(minSizeName)) || 0;
+    const targetMaxSize = parseFloat(targetStyle.getPropertyValue(maxSizeName)) || 0;
+    const nextRect = nextElement.getBoundingClientRect();
+    const nextStyle = window.getComputedStyle(nextElement);
+    const nextMinSize = parseFloat(nextStyle.getPropertyValue(minSizeName)) || 0;
+    const nextMaxSize = parseFloat(nextStyle.getPropertyValue(maxSizeName)) || 0;
+    let targetSize = targetRect[model.sizeName] + movement;
+    let nextElementSize = nextRect[model.sizeName] - movement;
+    if (targetMaxSize > 0 && targetSize > targetMaxSize) {
+      return;
+    }
+    if (nextMaxSize > 0 && nextElementSize > nextMaxSize) {
+      return;
+    }
+    if (isOverMove(targetSize, targetMinSize)) {
+      targetSize = 0;
+      nextElementSize = nextRect[model.sizeName];
+    } else if (isOverMove(nextElementSize, nextMinSize)) {
+      nextElementSize = 0;
+      targetSize = targetRect[model.sizeName];
+    }
+    const targetFlexGrow = targetSize / (parentSizeRef.current - 1) * containerCountRef.current;
+    const nextElementFlexGrow = nextElementSize / (parentSizeRef.current - 1) * containerCountRef.current;
+    if (!(targetElement instanceof HTMLElement)) return;
+    if (!(nextElement instanceof HTMLElement)) return;
+    targetElement.style.flex = `${targetFlexGrow} 1 0%`;
+    nextElement.style.flex = `${nextElementFlexGrow} 1 0%`;
+  }
+  useEffect(() => {
+    const addGlobalMoveEvent = (event) => {
+      if (!isResizePanelClickRef.current || !panelRef.current) {
+        return;
+      }
+      event.preventDefault();
+      const dir = directionRef.current;
+      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) {
+        const prev = prevTouchEventRef.current;
+        if (!prev) {
+          prevTouchEventRef.current = event;
+          return;
+        }
+        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, dir);
+    };
+    ["mousemove", "touchmove"].forEach((eventName) => {
+      window.addEventListener(eventName, addGlobalMoveEvent, {
+        passive: false
+      });
+    });
+    ["mouseup", "touchend"].forEach((eventName) => {
+      window.addEventListener(eventName, panelMouseUpEvent);
+    });
+    return () => {
+      ["mousemove", "touchmove"].forEach((eventName) => {
+        window.removeEventListener(eventName, addGlobalMoveEvent);
+      });
+      ["mouseup", "touchend"].forEach((eventName) => {
+        window.removeEventListener(eventName, panelMouseUpEvent);
+      });
+    };
+  }, []);
+  useEffect(() => {
+    if (!panelRef.current) return;
+    setResizePanelRef(layoutName, containerName, panelRef);
+  }, [containerName, layoutName]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id: containerName + "_resize_panel",
+      className: `${styles["flex-resize-panel"]} ${styles[panelMode]} ${panelClassName && panelClassName !== "" ? panelClassName : ""}`,
+      ref: panelRef,
+      onMouseDown: panelMouseDownEvent,
+      onTouchStart: panelMouseDownEvent,
+      children: /* @__PURE__ */ jsx("div", { className: styles.hover })
+    }
+  );
+}
+
+export { FlexLayoutResizePanel as default };
+//# sourceMappingURL=FlexLayoutResizePanel.js.map
+//# sourceMappingURL=FlexLayoutResizePanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutResizePanel.tsx"],"names":[],"mappings":"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","file":"FlexLayoutResizePanel.js","sourcesContent":["\"use client\";\r\n\r\nimport type { TouchEvent } from \"react\";\r\nimport { MouseEvent, useEffect, useRef } from \"react\";\r\nimport { setResizePanelRef } from \"../store/FlexLayoutContainerStore\";\r\nimport styles from \"../styles/FlexLayout.module.css\";\r\nimport { FlexDirectionModelType } from \"../types/FlexDirectionTypes\";\r\nimport { FlexLayoutResizePanelProps } from \"../types/FlexLayoutTypes\";\r\nimport { findNotCloseFlexContent, isOverMove } from \"../utils/FlexLayoutUtils\";\r\n\r\nconst flexDirectionModel = {\r\n\trow: {\r\n\t\txy: \"x\",\r\n\t\ttargetDirection: \"left\",\r\n\t\tnextDirection: \"right\",\r\n\t\tsizeName: \"width\",\r\n\t\tresizeCursor: \"ew-resize\",\r\n\t} as FlexDirectionModelType,\r\n\tcolumn: {\r\n\t\txy: \"y\",\r\n\t\ttargetDirection: \"top\",\r\n\t\tnextDirection: \"bottom\",\r\n\t\tsizeName: \"height\",\r\n\t\tresizeCursor: \"ns-resize\",\r\n\t} as FlexDirectionModelType,\r\n} as Record<string, FlexDirectionModelType>;\r\n\r\nexport default function FlexLayoutResizePanel({\r\n\tdirection,\r\n\tcontainerCount,\r\n\tpanelMode = \"default\",\r\n\tcontainerName,\r\n\tlayoutName,\r\n\tpanelClassName,\r\n\tpanelMovementMode,\r\n}: FlexLayoutResizePanelProps) {\r\n\tconst directionRef = useRef(direction);\r\n\tconst movementModeRef = useRef(panelMovementMode);\r\n\r\n\tuseEffect(() => {\r\n\t\tdirectionRef.current = direction;\r\n\t}, [direction]);\r\n\tuseEffect(() => {\r\n\t\tmovementModeRef.current = panelMovementMode;\r\n\t}, [panelMovementMode]);\r\n\r\n\tconst isResizePanelClickRef = useRef<boolean>(false);\r\n\tconst prevTouchEventRef = useRef<globalThis.TouchEvent | null>(null);\r\n\tconst parentSizeRef = useRef<number>(0);\r\n\tconst totalMovementRef = useRef<number>(0);\r\n\r\n\tconst containerCountRef = useRef<number>(containerCount);\r\n\r\n\tconst panelRef = useRef<HTMLDivElement>(null);\r\n\r\n\tuseEffect(() => {\r\n\t\treturn () => {\r\n\t\t\tdocument.body.style.cursor = \"\";\r\n\t\t};\r\n\t}, []);\r\n\tuseEffect(() => {\r\n\t\tcontainerCountRef.current = containerCount;\r\n\t}, [containerCount]);\r\n\r\n\tconst panelMouseDownEvent = (\r\n\t\tevent: MouseEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>,\r\n\t) => {\r\n\t\tif (!panelRef.current || !panelRef.current.parentElement) return;\r\n\t\tisResizePanelClickRef.current = true;\r\n\t\tcontainerCountRef.current = [\r\n\t\t\t...panelRef.current.parentElement.children,\r\n\t\t].filter((e) => e.hasAttribute(\"data-container_name\")).length;\r\n\t\tconst sizeName = flexDirectionModel[direction].sizeName;\r\n\t\tparentSizeRef.current =\r\n\t\t\tpanelRef.current.parentElement.getBoundingClientRect()[\r\n\t\t\t\tsizeName\r\n\t\t\t] as number;\r\n\t\tprevTouchEventRef.current = null;\r\n\t\ttotalMovementRef.current = 0;\r\n\r\n\t\tif (!parentSizeRef.current) return;\r\n\t\tdocument.body.style.cursor = flexDirectionModel[direction].resizeCursor;\r\n\t};\r\n\r\n\tconst panelMouseUpEvent = () => {\r\n\t\tisResizePanelClickRef.current = false;\r\n\t\tparentSizeRef.current = 0;\r\n\t\ttotalMovementRef.current = 0;\r\n\t\tprevTouchEventRef.current = null;\r\n\t\tdocument.body.style.cursor = \"\";\r\n\t};\r\n\r\n\tfunction moveMouseFlex(\r\n\t\toriginTarget: HTMLDivElement,\r\n\t\tresizePanel: HTMLDivElement,\r\n\t\tmoveEvent: { movementX: number; movementY: number },\r\n\t\tdir: string,\r\n\t\tmode: string,\r\n\t) {\r\n\t\t//return new Promise<void>(resolve => {\r\n\t\tconst model = flexDirectionModel[dir];\r\n\t\tconst movement =\r\n\t\t\tmoveEvent[\r\n\t\t\t\t(\"movement\" + model.xy.toUpperCase()) as\r\n\t\t\t\t\t| \"movementX\"\r\n\t\t\t\t\t| \"movementY\"\r\n\t\t\t];\r\n\t\ttotalMovementRef.current += movement;\r\n\r\n\t\tconst minSizeName = \"min-\" + model.sizeName;\r\n\t\tconst maxSizeName = \"max-\" + model.sizeName;\r\n\r\n\t\t// 이전 방향으로 가까운 열린 패널 찾기\r\n\t\tlet targetElement = findNotCloseFlexContent(\r\n\t\t\toriginTarget,\r\n\t\t\t\"previousElementSibling\",\r\n\t\t);\r\n\r\n\t\tif (\r\n\t\t\t(panelMovementMode === \"divorce\" && totalMovementRef.current > 0) ||\r\n\t\t\t(panelMovementMode === \"bulldozer\" && movement > 0) ||\r\n\t\t\t!targetElement\r\n\t\t)\r\n\t\t\t//if (!targetElement || movement > 0)\r\n\t\t\ttargetElement = originTarget;\r\n\r\n\t\t// 다음 방향으로 가까운 열린 패널 찾기\r\n\t\tlet nextElement = findNotCloseFlexContent(\r\n\t\t\tresizePanel.nextElementSibling,\r\n\t\t\t\"nextElementSibling\",\r\n\t\t);\r\n\r\n\t\tif (\r\n\t\t\t(panelMovementMode === \"divorce\" && totalMovementRef.current < 0) ||\r\n\t\t\t(panelMovementMode === \"bulldozer\" && movement < 0) ||\r\n\t\t\t!nextElement\r\n\t\t)\r\n\t\t\t//if (!nextElement || movement < 0)\r\n\t\t\tnextElement = resizePanel.nextElementSibling as HTMLDivElement;\r\n\r\n\t\tif (!targetElement || !nextElement) return;\r\n\r\n\t\tconst targetRect = targetElement.getBoundingClientRect();\r\n\t\tconst targetStyle = window.getComputedStyle(targetElement);\r\n\t\tconst targetMinSize =\r\n\t\t\tparseFloat(targetStyle.getPropertyValue(minSizeName)) || 0;\r\n\t\tconst targetMaxSize =\r\n\t\t\tparseFloat(targetStyle.getPropertyValue(maxSizeName)) || 0;\r\n\r\n\t\tconst nextRect = nextElement.getBoundingClientRect();\r\n\t\tconst nextStyle = window.getComputedStyle(nextElement);\r\n\t\tconst nextMinSize =\r\n\t\t\tparseFloat(nextStyle.getPropertyValue(minSizeName)) || 0;\r\n\t\tconst nextMaxSize =\r\n\t\t\tparseFloat(nextStyle.getPropertyValue(maxSizeName)) || 0;\r\n\r\n\t\t// 변경하고자 하는 target 사이즈와 next 사이즈 계산\r\n\t\tlet targetSize = (targetRect[model.sizeName] as number) + movement;\r\n\t\tlet nextElementSize = (nextRect[model.sizeName] as number) - movement;\r\n\r\n\t\t// Max size 조건 확인\r\n\t\tif (targetMaxSize > 0 && targetSize > targetMaxSize) {\r\n\t\t\t// target이 max size 초과면 조정 불가\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tif (nextMaxSize > 0 && nextElementSize > nextMaxSize) {\r\n\t\t\t// next가 max size 초과면 조정 불가\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\t// 2024 11 29 자기 자신이 close 상태일 때 다음 타겟을 따라가도록 하되 30px만큼 움직일 때는 자기 자신을 open 상태로 하는 코드 주석처리\r\n\t\t//if (!nextElement || 30 < movement * -1) {\r\n\t\t//    nextElement = resizePanel.nextElementSibling as HTMLDivElement;\r\n\t\t//}\r\n\r\n\t\t// Min size 조건 확인 후 조정\r\n\t\tif (isOverMove(targetSize, targetMinSize)) {\r\n\t\t\t// target이 너무 작아지면 0으로 처리 (close 상태)\r\n\t\t\ttargetSize = 0;\r\n\t\t\tnextElementSize = nextRect[model.sizeName] as number; // next는 변화 없음\r\n\t\t} else if (isOverMove(nextElementSize, nextMinSize)) {\r\n\t\t\t// next가 너무 작아지면 0으로 처리 (close 상태)\r\n\t\t\tnextElementSize = 0;\r\n\t\t\ttargetSize = targetRect[model.sizeName] as number; // target은 변화 없음\r\n\t\t}\r\n\r\n\t\t// flex-grow 재계산\r\n\t\tconst targetFlexGrow =\r\n\t\t\t(targetSize / (parentSizeRef.current - 1)) *\r\n\t\t\tcontainerCountRef.current;\r\n\t\tconst nextElementFlexGrow =\r\n\t\t\t(nextElementSize / (parentSizeRef.current - 1)) *\r\n\t\t\tcontainerCountRef.current;\r\n\r\n\t\tif (!(targetElement instanceof HTMLElement)) return;\r\n\t\tif (!(nextElement instanceof HTMLElement)) return;\r\n\r\n\t\ttargetElement.style.flex = `${targetFlexGrow} 1 0%`;\r\n\t\tnextElement.style.flex = `${nextElementFlexGrow} 1 0%`;\r\n\r\n\t\t//     resolve();\r\n\t\t// });\r\n\t}\r\n\r\n\tuseEffect(() => {\r\n\t\tconst addGlobalMoveEvent = (event: Event) => {\r\n\t\t\tif (!isResizePanelClickRef.current || !panelRef.current) {\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\t\t\tevent.preventDefault();\r\n\r\n\t\t\tconst dir = directionRef.current;\r\n\t\t\tconst mode = movementModeRef.current;\r\n\r\n\t\t\tconst targetElement = panelRef.current\r\n\t\t\t\t.previousElementSibling as HTMLDivElement;\r\n\t\t\tconst targetPanel = panelRef.current;\r\n\t\t\tif (!targetElement || !targetPanel) return;\r\n\r\n\t\t\tlet move = { movementX: 0, movementY: 0 };\r\n\t\t\tif (window.TouchEvent && event instanceof window.TouchEvent) {\r\n\t\t\t\tconst prev = prevTouchEventRef.current;\r\n\t\t\t\tif (!prev) {\r\n\t\t\t\t\tprevTouchEventRef.current = event;\r\n\t\t\t\t\treturn;\r\n\t\t\t\t}\r\n\r\n\t\t\t\tmove.movementX =\r\n\t\t\t\t\t(prev.touches[0].pageX - event.touches[0].pageX) * -1;\r\n\t\t\t\tmove.movementY =\r\n\t\t\t\t\t(prev.touches[0].pageY - event.touches[0].pageY) * -1;\r\n\t\t\t\tprevTouchEventRef.current = event;\r\n\t\t\t} else {\r\n\t\t\t\tmove.movementX = (event as globalThis.MouseEvent).movementX;\r\n\t\t\t\tmove.movementY = (event as globalThis.MouseEvent).movementY;\r\n\t\t\t}\r\n\r\n\t\t\tmoveMouseFlex(targetElement, targetPanel, move, dir, mode);\r\n\t\t};\r\n\r\n\t\t[\"mousemove\", \"touchmove\"].forEach((eventName) => {\r\n\t\t\twindow.addEventListener(eventName, addGlobalMoveEvent, {\r\n\t\t\t\tpassive: false,\r\n\t\t\t});\r\n\t\t});\r\n\t\t[\"mouseup\", \"touchend\"].forEach((eventName) => {\r\n\t\t\twindow.addEventListener(eventName, panelMouseUpEvent);\r\n\t\t});\r\n\r\n\t\treturn () => {\r\n\t\t\t[\"mousemove\", \"touchmove\"].forEach((eventName) => {\r\n\t\t\t\twindow.removeEventListener(eventName, addGlobalMoveEvent);\r\n\t\t\t});\r\n\t\t\t[\"mouseup\", \"touchend\"].forEach((eventName) => {\r\n\t\t\t\twindow.removeEventListener(eventName, panelMouseUpEvent);\r\n\t\t\t});\r\n\t\t};\r\n\t}, []);\r\n\r\n\tuseEffect(() => {\r\n\t\tif (!panelRef.current) return;\r\n\t\tsetResizePanelRef(layoutName, containerName, panelRef);\r\n\t}, [containerName, layoutName]);\r\n\r\n\treturn (\r\n\t\t<div\r\n\t\t\tid={containerName + \"_resize_panel\"}\r\n\t\t\tclassName={`${styles[\"flex-resize-panel\"]} ${styles[panelMode as keyof typeof styles]} ${panelClassName && panelClassName !== \"\" ? panelClassName : \"\"}`}\r\n\t\t\tref={panelRef}\r\n\t\t\tonMouseDown={panelMouseDownEvent}\r\n\t\t\tonTouchStart={panelMouseDownEvent}\r\n\t\t>\r\n\t\t\t<div className={styles.hover}></div>\r\n\t\t</div>\r\n\t);\r\n}\r\n"]}