@byeolnaerim/flex-layout 0.0.7 → 0.0.9

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

@@ -1 +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\tlet isResizePanelClickRef = useRef<boolean>(false);\r\n\tlet prevTouchEvent: globalThis.TouchEvent | null = null;\r\n\tlet parentSizeRef = useRef<number>(0);\r\n\tlet totalMovementRef = useRef<number>(0);\r\n\r\n\tconst containerCountRef = useRef<number>(containerCount);\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\tconst panelRef = useRef<HTMLDivElement>(null);\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\tprevTouchEvent = 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\tprevTouchEvent = null;\r\n\t\ttotalMovementRef.current = 0;\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) {\r\n\t\t//return new Promise<void>(resolve => {\r\n\t\tconst model = flexDirectionModel[direction];\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\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\tif (!prevTouchEvent) {\r\n\t\t\t\t\tprevTouchEvent = event as globalThis.TouchEvent;\r\n\t\t\t\t\treturn;\r\n\t\t\t\t}\r\n\t\t\t\tmove.movementX =\r\n\t\t\t\t\t(prevTouchEvent.touches[0].pageX - event.touches[0].pageX) *\r\n\t\t\t\t\t-2;\r\n\t\t\t\tmove.movementY =\r\n\t\t\t\t\t(prevTouchEvent.touches[0].pageY - event.touches[0].pageY) *\r\n\t\t\t\t\t-2;\r\n\t\t\t\tprevTouchEvent = 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);\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"]}
+{"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutResizePanel.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport type { TouchEvent } from \"react\";\r\nimport { MouseEvent, useEffect, useRef } from \"react\";\r\nimport { isResizingSubject } from \"../hooks\";\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\tonResizingChange,\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\tisResizingSubject.next(false);\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\tonResizingChange?.(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\tisResizingSubject.next(true);\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\tonResizingChange?.(false);\r\n\t\tparentSizeRef.current = 0;\r\n\t\ttotalMovementRef.current = 0;\r\n\t\tprevTouchEventRef.current = null;\r\n\r\n\t\tisResizingSubject.next(false);\r\n\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[\r\n\t\t\t\"mouseup\",\r\n\t\t\t\"touchend\",\r\n\t\t\t\"touchcancel\", // 터치 제스처 시스템 인터럽트\r\n\t\t\t\"pointerup\", // 범용 포인터 이벤트\r\n\t\t\t\"pointercancel\",\r\n\t\t\t\"blur\", // 윈도우 포커스 아웃 (Alt+Tab 등)\r\n\t\t].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[\r\n\t\t\t\t\"mouseup\",\r\n\t\t\t\t\"touchend\",\r\n\t\t\t\t\"touchcancel\", // 터치 제스처 시스템 인터럽트\r\n\t\t\t\t\"pointerup\", // 범용 포인터 이벤트\r\n\t\t\t\t\"pointercancel\",\r\n\t\t\t\t\"blur\", // 윈도우 포커스 아웃 (Alt+Tab 등)\r\n\t\t\t].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\treturn () => {\r\n\t\t\tsetResizePanelRef(layoutName, containerName, null);\r\n\t\t};\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"],"mappings":"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","names":["styles"]}

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

@@ -1,2 +1,2 @@
 import { FlexLayoutResizePanelProps } from "../types/FlexLayoutTypes";
-export default function FlexLayoutResizePanel({ direction, containerCount, panelMode, containerName, layoutName, panelClassName, panelMovementMode, }: FlexLayoutResizePanelProps): import("react/jsx-runtime").JSX.Element;
+export default function FlexLayoutResizePanel({ direction, containerCount, panelMode, containerName, layoutName, panelClassName, panelMovementMode, onResizingChange, }: FlexLayoutResizePanelProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,9 +1,10 @@
-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';
-
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { isResizingSubject } from "../hooks";
+import { setResizePanelRef } from "../store/FlexLayoutContainerStore";
+import styles from "../styles/FlexLayout.module.css";
+import { findNotCloseFlexContent, isOverMove } from "../utils/FlexLayoutUtils";
 const flexDirectionModel = {
   row: {
     xy: "x",
@@ -27,44 +28,58 @@ function FlexLayoutResizePanel({
   containerName,
   layoutName,
   panelClassName,
-  panelMovementMode
+  panelMovementMode,
+  onResizingChange
 }) {
-  let isResizePanelClickRef = useRef(false);
-  let prevTouchEvent = null;
-  let parentSizeRef = useRef(0);
-  let totalMovementRef = useRef(0);
+  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 () => {
+      isResizingSubject.next(false);
       document.body.style.cursor = "";
     };
   }, []);
   useEffect(() => {
     containerCountRef.current = containerCount;
   }, [containerCount]);
-  const panelRef = 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;
+    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;
+    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;
@@ -118,37 +133,60 @@ function FlexLayoutResizePanel({
         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);
       });
     };
@@ -156,6 +194,9 @@ function FlexLayoutResizePanel({
   useEffect(() => {
     if (!panelRef.current) return;
     setResizePanelRef(layoutName, containerName, panelRef);
+    return () => {
+      setResizePanelRef(layoutName, containerName, null);
+    };
   }, [containerName, layoutName]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -169,7 +210,7 @@ function FlexLayoutResizePanel({
     }
   );
 }
-
-export { FlexLayoutResizePanel as default };
-//# sourceMappingURL=FlexLayoutResizePanel.js.map
+export {
+  FlexLayoutResizePanel as default
+};
 //# sourceMappingURL=FlexLayoutResizePanel.js.map

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

@@ -1 +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\tlet isResizePanelClickRef = useRef<boolean>(false);\r\n\tlet prevTouchEvent: globalThis.TouchEvent | null = null;\r\n\tlet parentSizeRef = useRef<number>(0);\r\n\tlet totalMovementRef = useRef<number>(0);\r\n\r\n\tconst containerCountRef = useRef<number>(containerCount);\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\tconst panelRef = useRef<HTMLDivElement>(null);\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\tprevTouchEvent = 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\tprevTouchEvent = null;\r\n\t\ttotalMovementRef.current = 0;\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) {\r\n\t\t//return new Promise<void>(resolve => {\r\n\t\tconst model = flexDirectionModel[direction];\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\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\tif (!prevTouchEvent) {\r\n\t\t\t\t\tprevTouchEvent = event as globalThis.TouchEvent;\r\n\t\t\t\t\treturn;\r\n\t\t\t\t}\r\n\t\t\t\tmove.movementX =\r\n\t\t\t\t\t(prevTouchEvent.touches[0].pageX - event.touches[0].pageX) *\r\n\t\t\t\t\t-2;\r\n\t\t\t\tmove.movementY =\r\n\t\t\t\t\t(prevTouchEvent.touches[0].pageY - event.touches[0].pageY) *\r\n\t\t\t\t\t-2;\r\n\t\t\t\tprevTouchEvent = 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);\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"]}
+{"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutResizePanel.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport type { TouchEvent } from \"react\";\r\nimport { MouseEvent, useEffect, useRef } from \"react\";\r\nimport { isResizingSubject } from \"../hooks\";\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\tonResizingChange,\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\tisResizingSubject.next(false);\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\tonResizingChange?.(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\tisResizingSubject.next(true);\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\tonResizingChange?.(false);\r\n\t\tparentSizeRef.current = 0;\r\n\t\ttotalMovementRef.current = 0;\r\n\t\tprevTouchEventRef.current = null;\r\n\r\n\t\tisResizingSubject.next(false);\r\n\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[\r\n\t\t\t\"mouseup\",\r\n\t\t\t\"touchend\",\r\n\t\t\t\"touchcancel\", // 터치 제스처 시스템 인터럽트\r\n\t\t\t\"pointerup\", // 범용 포인터 이벤트\r\n\t\t\t\"pointercancel\",\r\n\t\t\t\"blur\", // 윈도우 포커스 아웃 (Alt+Tab 등)\r\n\t\t].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[\r\n\t\t\t\t\"mouseup\",\r\n\t\t\t\t\"touchend\",\r\n\t\t\t\t\"touchcancel\", // 터치 제스처 시스템 인터럽트\r\n\t\t\t\t\"pointerup\", // 범용 포인터 이벤트\r\n\t\t\t\t\"pointercancel\",\r\n\t\t\t\t\"blur\", // 윈도우 포커스 아웃 (Alt+Tab 등)\r\n\t\t\t].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\treturn () => {\r\n\t\t\tsetResizePanelRef(layoutName, containerName, null);\r\n\t\t};\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"],"mappings":"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","names":[]}