@byeolnaerim/flex-layout 0.0.7 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/flex-layout/components/FlexLayoutResizePanel.cjs +26 -15
  2. package/dist/flex-layout/components/FlexLayoutResizePanel.cjs.map +1 -1
  3. package/dist/flex-layout/components/FlexLayoutResizePanel.js +26 -15
  4. package/dist/flex-layout/components/FlexLayoutResizePanel.js.map +1 -1
  5. package/package.json +1 -1
package/dist/flex-layout/components/FlexLayoutResizePanel.cjs CHANGED
@@ -35,11 +35,20 @@ function FlexLayoutResizePanel({
35
35
  panelClassName,
36
36
  panelMovementMode
37
37
  }) {
38
- let isResizePanelClickRef = react.useRef(false);
39
- let prevTouchEvent = null;
40
- let parentSizeRef = react.useRef(0);
41
- let totalMovementRef = react.useRef(0);
38
+ const directionRef = react.useRef(direction);
39
+ const movementModeRef = react.useRef(panelMovementMode);
40
+ react.useEffect(() => {
41
+ directionRef.current = direction;
42
+ }, [direction]);
43
+ react.useEffect(() => {
44
+ movementModeRef.current = panelMovementMode;
45
+ }, [panelMovementMode]);
46
+ const isResizePanelClickRef = react.useRef(false);
47
+ const prevTouchEventRef = react.useRef(null);
48
+ const parentSizeRef = react.useRef(0);
49
+ const totalMovementRef = react.useRef(0);
42
50
  const containerCountRef = react.useRef(containerCount);
51
+ const panelRef = react.useRef(null);
43
52
  react.useEffect(() => {
44
53
  return () => {
45
54
  document.body.style.cursor = "";
@@ -48,7 +57,6 @@ function FlexLayoutResizePanel({
48
57
  react.useEffect(() => {
49
58
  containerCountRef.current = containerCount;
50
59
  }, [containerCount]);
51
- const panelRef = react.useRef(null);
52
60
  const panelMouseDownEvent = (event) => {
53
61
  if (!panelRef.current || !panelRef.current.parentElement) return;
54
62
  isResizePanelClickRef.current = true;
@@ -57,7 +65,7 @@ function FlexLayoutResizePanel({
57
65
  ].filter((e) => e.hasAttribute("data-container_name")).length;
58
66
  const sizeName = flexDirectionModel[direction].sizeName;
59
67
  parentSizeRef.current = panelRef.current.parentElement.getBoundingClientRect()[sizeName];
60
- prevTouchEvent = null;
68
+ prevTouchEventRef.current = null;
61
69
  totalMovementRef.current = 0;
62
70
  if (!parentSizeRef.current) return;
63
71
  document.body.style.cursor = flexDirectionModel[direction].resizeCursor;
@@ -65,12 +73,12 @@ function FlexLayoutResizePanel({
65
73
  const panelMouseUpEvent = () => {
66
74
  isResizePanelClickRef.current = false;
67
75
  parentSizeRef.current = 0;
68
- prevTouchEvent = null;
69
76
  totalMovementRef.current = 0;
77
+ prevTouchEventRef.current = null;
70
78
  document.body.style.cursor = "";
71
79
  };
72
- function moveMouseFlex(originTarget, resizePanel, moveEvent) {
73
- const model = flexDirectionModel[direction];
80
+ function moveMouseFlex(originTarget, resizePanel, moveEvent, dir, mode) {
81
+ const model = flexDirectionModel[dir];
74
82
  const movement = moveEvent["movement" + model.xy.toUpperCase()];
75
83
  totalMovementRef.current += movement;
76
84
  const minSizeName = "min-" + model.sizeName;
@@ -124,23 +132,26 @@ function FlexLayoutResizePanel({
124
132
  return;
125
133
  }
126
134
  event.preventDefault();
135
+ const dir = directionRef.current;
136
+ movementModeRef.current;
127
137
  const targetElement = panelRef.current.previousElementSibling;
128
138
  const targetPanel = panelRef.current;
129
139
  if (!targetElement || !targetPanel) return;
130
140
  let move = { movementX: 0, movementY: 0 };
131
141
  if (window.TouchEvent && event instanceof window.TouchEvent) {
132
- if (!prevTouchEvent) {
133
- prevTouchEvent = event;
142
+ const prev = prevTouchEventRef.current;
143
+ if (!prev) {
144
+ prevTouchEventRef.current = event;
134
145
  return;
135
146
  }
136
- move.movementX = (prevTouchEvent.touches[0].pageX - event.touches[0].pageX) * -2;
137
- move.movementY = (prevTouchEvent.touches[0].pageY - event.touches[0].pageY) * -2;
138
- prevTouchEvent = event;
147
+ move.movementX = (prev.touches[0].pageX - event.touches[0].pageX) * -1;
148
+ move.movementY = (prev.touches[0].pageY - event.touches[0].pageY) * -1;
149
+ prevTouchEventRef.current = event;
139
150
  } else {
140
151
  move.movementX = event.movementX;
141
152
  move.movementY = event.movementY;
142
153
  }
143
- moveMouseFlex(targetElement, targetPanel, move);
154
+ moveMouseFlex(targetElement, targetPanel, move, dir);
144
155
  };
145
156
  ["mousemove", "touchmove"].forEach((eventName) => {
146
157
  window.addEventListener(eventName, addGlobalMoveEvent, {
package/dist/flex-layout/components/FlexLayoutResizePanel.cjs.map CHANGED
@@ -1 +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"]}
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 CHANGED
@@ -29,11 +29,20 @@ function FlexLayoutResizePanel({
29
29
  panelClassName,
30
30
  panelMovementMode
31
31
  }) {
32
- let isResizePanelClickRef = useRef(false);
33
- let prevTouchEvent = null;
34
- let parentSizeRef = useRef(0);
35
- let totalMovementRef = useRef(0);
32
+ const directionRef = useRef(direction);
33
+ const movementModeRef = useRef(panelMovementMode);
34
+ useEffect(() => {
35
+ directionRef.current = direction;
36
+ }, [direction]);
37
+ useEffect(() => {
38
+ movementModeRef.current = panelMovementMode;
39
+ }, [panelMovementMode]);
40
+ const isResizePanelClickRef = useRef(false);
41
+ const prevTouchEventRef = useRef(null);
42
+ const parentSizeRef = useRef(0);
43
+ const totalMovementRef = useRef(0);
36
44
  const containerCountRef = useRef(containerCount);
45
+ const panelRef = useRef(null);
37
46
  useEffect(() => {
38
47
  return () => {
39
48
  document.body.style.cursor = "";
@@ -42,7 +51,6 @@ function FlexLayoutResizePanel({
42
51
  useEffect(() => {
43
52
  containerCountRef.current = containerCount;
44
53
  }, [containerCount]);
45
- const panelRef = useRef(null);
46
54
  const panelMouseDownEvent = (event) => {
47
55
  if (!panelRef.current || !panelRef.current.parentElement) return;
48
56
  isResizePanelClickRef.current = true;
@@ -51,7 +59,7 @@ function FlexLayoutResizePanel({
51
59
  ].filter((e) => e.hasAttribute("data-container_name")).length;
52
60
  const sizeName = flexDirectionModel[direction].sizeName;
53
61
  parentSizeRef.current = panelRef.current.parentElement.getBoundingClientRect()[sizeName];
54
- prevTouchEvent = null;
62
+ prevTouchEventRef.current = null;
55
63
  totalMovementRef.current = 0;
56
64
  if (!parentSizeRef.current) return;
57
65
  document.body.style.cursor = flexDirectionModel[direction].resizeCursor;
@@ -59,12 +67,12 @@ function FlexLayoutResizePanel({
59
67
  const panelMouseUpEvent = () => {
60
68
  isResizePanelClickRef.current = false;
61
69
  parentSizeRef.current = 0;
62
- prevTouchEvent = null;
63
70
  totalMovementRef.current = 0;
71
+ prevTouchEventRef.current = null;
64
72
  document.body.style.cursor = "";
65
73
  };
66
- function moveMouseFlex(originTarget, resizePanel, moveEvent) {
67
- const model = flexDirectionModel[direction];
74
+ function moveMouseFlex(originTarget, resizePanel, moveEvent, dir, mode) {
75
+ const model = flexDirectionModel[dir];
68
76
  const movement = moveEvent["movement" + model.xy.toUpperCase()];
69
77
  totalMovementRef.current += movement;
70
78
  const minSizeName = "min-" + model.sizeName;
@@ -118,23 +126,26 @@ function FlexLayoutResizePanel({
118
126
  return;
119
127
  }
120
128
  event.preventDefault();
129
+ const dir = directionRef.current;
130
+ movementModeRef.current;
121
131
  const targetElement = panelRef.current.previousElementSibling;
122
132
  const targetPanel = panelRef.current;
123
133
  if (!targetElement || !targetPanel) return;
124
134
  let move = { movementX: 0, movementY: 0 };
125
135
  if (window.TouchEvent && event instanceof window.TouchEvent) {
126
- if (!prevTouchEvent) {
127
- prevTouchEvent = event;
136
+ const prev = prevTouchEventRef.current;
137
+ if (!prev) {
138
+ prevTouchEventRef.current = event;
128
139
  return;
129
140
  }
130
- move.movementX = (prevTouchEvent.touches[0].pageX - event.touches[0].pageX) * -2;
131
- move.movementY = (prevTouchEvent.touches[0].pageY - event.touches[0].pageY) * -2;
132
- prevTouchEvent = event;
141
+ move.movementX = (prev.touches[0].pageX - event.touches[0].pageX) * -1;
142
+ move.movementY = (prev.touches[0].pageY - event.touches[0].pageY) * -1;
143
+ prevTouchEventRef.current = event;
133
144
  } else {
134
145
  move.movementX = event.movementX;
135
146
  move.movementY = event.movementY;
136
147
  }
137
- moveMouseFlex(targetElement, targetPanel, move);
148
+ moveMouseFlex(targetElement, targetPanel, move, dir);
138
149
  };
139
150
  ["mousemove", "touchmove"].forEach((eventName) => {
140
151
  window.addEventListener(eventName, addGlobalMoveEvent, {
package/dist/flex-layout/components/FlexLayoutResizePanel.js.map CHANGED
@@ -1 +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"]}
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"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@byeolnaerim/flex-layout",
3
- "version": "0.0.7",
3
+ "version": "0.0.8",
4
4
  "type": "module",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Joohyoung Kim (@oozu1994)",