@byeolnaerim/flex-layout 0.0.3 → 0.0.4

package/dist/providers.cjs

@@ -0,0 +1,411 @@
+'use strict';
+
+var react = require('react');
+require('fast-deep-equal');
+var rxjs = require('rxjs');
+var operators = require('rxjs/operators');
+
+// src/flex-layout/providers/FlexLayoutHooks.tsx
+var scrollPositions = {};
+new rxjs.BehaviorSubject(scrollPositions);
+new rxjs.BehaviorSubject({});
+var flexContainerStore = new rxjs.BehaviorSubject({});
+var flexResizePanelStore = new rxjs.BehaviorSubject({});
+var getLayoutInfos = (layoutName) => {
+  return rxjs.combineLatest([flexContainerStore, flexResizePanelStore]).pipe(
+    operators.map(([containerRefs, resizePanelRefs]) => {
+      const containerData = containerRefs[layoutName] || {};
+      const resizePanelData = resizePanelRefs[layoutName] || {};
+      return {
+        container: containerData,
+        resizePanel: resizePanelData
+      };
+    }),
+    operators.filter((result) => result.container !== null)
+    // 빈 객체 제외
+  );
+};
+var getResizePanelRef = ({
+  containerName,
+  layoutName
+}) => {
+  return flexResizePanelStore.pipe(
+    operators.map((refs) => {
+      if (layoutName) {
+        return refs[layoutName]?.[containerName] || null;
+      } else {
+        return Object.entries(refs).find(
+          ([key, value]) => refs[key][containerName]
+        )?.[1][containerName];
+      }
+    }),
+    operators.filter((ref) => ref !== null)
+  );
+};
+
+// src/flex-layout/utils/FlexLayoutUtils.ts
+function resize(list, totalGrow) {
+  return new Promise((resolve) => {
+    let resizeWeight = totalGrow / list.length;
+    list.forEach((e) => {
+      e.dataset.grow = resizeWeight.toString();
+      e.style.flex = `${resizeWeight} 1 0%`;
+    });
+    resolve(resizeWeight);
+  });
+}
+function mathGrow(childSize, parentSize, containerCount) {
+  return containerCount * (childSize / parentSize);
+}
+function getGrow(growTarget) {
+  const target = growTarget instanceof Element ? growTarget : growTarget;
+  return parseFloat(target.style.flex.split(" ")[0]) || parseFloat(target.dataset.grow || "");
+}
+function closeFlex(resizeTarget, containers, {
+  isResize = false,
+  isDsiabledResizePanel = false,
+  sizeName
+}) {
+  return new Promise((resolve) => {
+    if (!resizeTarget.hasAttribute("data-is_resize_panel")) ; else if (isDsiabledResizePanel) {
+      resizeTarget.dataset.is_resize_panel = "false";
+    }
+    resizeTarget.dataset.prev_grow = getGrow(resizeTarget).toString();
+    let notCloseList = containers.filter(
+      (e) => e.style.flex != "0 1 0%" && e != resizeTarget
+    );
+    let notCloseAndOpenTargetList = [...notCloseList, resizeTarget];
+    notCloseAndOpenTargetList.forEach((e) => {
+      e.style.transition = "flex 0.5s";
+      e.ontransitionend = (event) => {
+        if (event.propertyName != "flex-grow") {
+          return;
+        }
+        notCloseAndOpenTargetList.forEach(
+          (e2) => e2.style.transition = ""
+        );
+        e.ontransitionend = () => {
+        };
+      };
+      if (e == resizeTarget) {
+        e.dataset.grow = "0";
+        e.style.flex = `0 1 0%`;
+        return;
+      }
+      if (isResize) {
+        return;
+      }
+      let percent = getGrow(e) / containers.length;
+      if (notCloseList.length == 1) {
+        e.dataset.grow = containers.length.toString();
+        e.style.flex = `${containers.length} 1 0%`;
+        return;
+      }
+      e.dataset.grow = (containers.length * percent).toString();
+      e.style.flex = `${containers.length * percent} 1 0%`;
+    });
+    if (isResize) {
+      resize(notCloseList, containers.length);
+    }
+    resolve(resizeTarget);
+  });
+}
+function openFlex(resizeTarget, containers, {
+  isPrevSizeOpen = false,
+  isResize = false,
+  openGrowImportant = 0,
+  sizeName
+}) {
+  return new Promise((resolve) => {
+    if (!resizeTarget.hasAttribute("data-is_resize_panel")) ; else if (resizeTarget.hasAttribute("data-is_resize_panel") && resizeTarget.dataset.is_resize_panel == "false") {
+      resizeTarget.dataset.is_resize_panel = "true";
+    }
+    let notCloseList = containers.filter(
+      (e) => e.style.flex != "0 1 0%" && e != resizeTarget
+    );
+    let notCloseAndOpenTargetList = [...notCloseList, resizeTarget];
+    let openTargetGrow = 1;
+    const sizeStyleName = "client" + sizeName.charAt(0).toUpperCase() + sizeName.substring(1);
+    const parentSize = sizeName && resizeTarget.parentElement && resizeTarget.parentElement[sizeStyleName] || 0;
+    if (isPrevSizeOpen && resizeTarget.hasAttribute("data-prev_grow")) {
+      openTargetGrow = parseFloat(resizeTarget.dataset.prev_grow || "1") || 1;
+    } else if (parentSize && parentSize !== 0) {
+      openTargetGrow = parentSize / notCloseList.length / (parentSize - 1) * containers.length;
+    } else {
+      openTargetGrow = 1;
+    }
+    if (openGrowImportant) {
+      openTargetGrow = openGrowImportant;
+    }
+    openTargetGrow = openTargetGrow === Infinity ? 1 : openTargetGrow;
+    notCloseAndOpenTargetList.forEach((e) => {
+      e.style.transition = "flex 0.5s";
+      e.ontransitionend = (event) => {
+        if (event.propertyName != "flex-grow") {
+          return;
+        }
+        notCloseAndOpenTargetList.forEach(
+          (e2) => e2.style.transition = ""
+        );
+        e.ontransitionend = () => {
+        };
+      };
+      if (e == resizeTarget) {
+        resizeTarget.dataset.grow = openTargetGrow.toString();
+        resizeTarget.style.flex = `${openTargetGrow} 1 0%`;
+        return;
+      }
+      if (isResize) {
+        return;
+      }
+      let grow = parentSize / notCloseList.length / (parentSize - 1) * (containers.length - openTargetGrow);
+      grow = grow === Infinity ? 1 : grow;
+      e.dataset.grow = grow.toString();
+      e.style.flex = `${grow} 1 0%`;
+    });
+    if (isResize) {
+      resize(notCloseAndOpenTargetList, containers.length);
+    }
+    resolve(openTargetGrow);
+  });
+}
+var g = globalThis;
+g.__FLEX_SUBJECTS__ ?? (g.__FLEX_SUBJECTS__ = { openClose: {}, spread: {} });
+var containerOpenCloseSubjectMap = g.__FLEX_SUBJECTS__.openClose;
+var containerSpreadSubjectMap = g.__FLEX_SUBJECTS__.spread;
+var ContainerOpenCloseProvider = ({
+  layoutName,
+  containerName,
+  sizeName
+}) => {
+  if (!containerOpenCloseSubjectMap[containerName]) {
+    containerOpenCloseSubjectMap[containerName] = new rxjs.Subject();
+  }
+  if (!containerSpreadSubjectMap[containerName]) {
+    containerSpreadSubjectMap[containerName] = new rxjs.Subject();
+  }
+  const [containers, setContainers] = react.useState([]);
+  const [container, setContainer] = react.useState();
+  react.useEffect(() => {
+    const subscription = getLayoutInfos(layoutName).subscribe(
+      (layout) => {
+        if (!layout || !layout.container[containerName] || !layout.container[containerName].current)
+          return;
+        setContainers(
+          Object.values(layout.container).filter(
+            (e) => e.current !== null
+          ).map((e) => e.current)
+        );
+        setContainer(layout.container[containerName].current);
+      }
+    );
+    return () => subscription.unsubscribe();
+  }, [containerName, layoutName]);
+  react.useEffect(() => {
+    const styleName = `${sizeName.charAt(0).toUpperCase() + sizeName.substring(1)}`;
+    const clientSize = "client" + styleName;
+    const outerSize = "outer" + styleName;
+    const maxSize = "max" + styleName;
+    const subscribe = containerOpenCloseSubjectMap[containerName].subscribe(
+      ({
+        mode,
+        initOpenState: isOpenState,
+        onClose,
+        onOpen,
+        openOption = {},
+        closeOption = {}
+      }) => {
+        if (!container || containers.length === 0) return;
+        const currentGrow = getGrow(container);
+        const styleMap = window.getComputedStyle(container);
+        const maxSizeGrow = mathGrow(
+          parseInt(styleMap[maxSize]),
+          container.parentElement && container.parentElement[clientSize] || window[outerSize],
+          containers.length
+        );
+        const open = () => openFlex(container, containers, {
+          sizeName,
+          ...isNaN(maxSizeGrow) ? {} : {
+            openGrowImportant: maxSizeGrow
+          },
+          ...openOption
+        }).then((openTargetGrow) => {
+          if (onOpen) onOpen();
+          containerSpreadSubjectMap[containerName].next({
+            isOpen: true,
+            grow: openTargetGrow,
+            targetContainer: container
+          });
+        });
+        const close = () => closeFlex(container, containers, {
+          sizeName,
+          ...closeOption
+        }).then(() => {
+          if (onClose) onClose();
+          containerSpreadSubjectMap[containerName].next({
+            isOpen: false,
+            grow: 0,
+            targetContainer: container
+          });
+        });
+        if (mode === "toggle") {
+          if (currentGrow === 0) {
+            open();
+          } else {
+            close();
+          }
+        } else if (mode === "open") {
+          if (currentGrow === 0) {
+            open();
+          }
+        } else if (mode === "close") {
+          if (currentGrow !== 0) {
+            close();
+          }
+        }
+      }
+    );
+    return () => {
+      subscribe.unsubscribe();
+    };
+  }, [containerName, container, containers, sizeName]);
+  return null;
+};
+var useContainers = (layoutName) => {
+  const [containers, setContainers] = react.useState([]);
+  react.useEffect(() => {
+    const subscription = getLayoutInfos(layoutName).subscribe(
+      (layout) => {
+        setContainers(
+          Object.values(layout.container).filter(
+            (e) => e.current !== null
+          ).map((e) => e.current)
+        );
+      }
+    );
+    return () => subscription.unsubscribe();
+  }, [layoutName]);
+  return containers;
+};
+var useLayoutName = (containerName) => {
+  const [layoutName, setLayoutName] = react.useState();
+  react.useEffect(() => {
+    const subscribe = flexContainerStore.pipe(
+      rxjs.map(
+        (layouts) => Object.entries(layouts).filter(([_, v]) => v[containerName]).map(([k]) => k)[0]
+        // 첫 번째 결과 가져오기
+      )
+    ).subscribe(setLayoutName);
+    return () => subscribe.unsubscribe();
+  }, [containerName]);
+  return layoutName;
+};
+var useDecompositionLayout = ({
+  layoutName: initialLayoutName,
+  containerName
+}) => {
+  const derivedLayoutName = useLayoutName(containerName);
+  const finalLayoutName = initialLayoutName || derivedLayoutName;
+  const [containers, setContainers] = react.useState([]);
+  const [container, setContainer] = react.useState();
+  const [resizePanel, setResizePanel] = react.useState();
+  react.useEffect(() => {
+    if (!finalLayoutName) return;
+    const subscription = getLayoutInfos(finalLayoutName).subscribe(
+      (layout) => {
+        if (!layout) return;
+        setContainers(
+          Object.values(layout.container).filter(
+            (e) => e.current !== null
+          ).map((e) => e.current)
+        );
+        if (containerName && layout.container[containerName] && layout.container[containerName].current) {
+          setContainer(layout.container[containerName].current);
+          if (layout.resizePanel[containerName] && layout.resizePanel[containerName].current) {
+            setResizePanel(
+              layout.resizePanel[containerName].current
+            );
+          }
+        }
+      }
+    );
+    return () => subscription.unsubscribe();
+  }, [containerName, finalLayoutName]);
+  return { layout: containers, container, resizePanel };
+};
+var useContainerSize = (containerName) => {
+  const { layout, container, resizePanel } = useDecompositionLayout({
+    containerName
+  });
+  const [size, setSize] = react.useState();
+  react.useEffect(() => {
+    if (!container) return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setSize({
+          width: entry.contentRect.width,
+          height: entry.contentRect.height
+        });
+      }
+    });
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [container]);
+  return { size };
+};
+var useDoubleClick = (containerName, opt) => {
+  const [isOpen, setIsOpen] = react.useState();
+  const [isDoubleClick, setIsDoubleClick] = react.useState();
+  react.useEffect(() => {
+    const resizePanelClickEvent = getResizePanelRef({
+      containerName
+    }).pipe(
+      rxjs.filter(
+        (resizePanelref) => resizePanelref != void 0 && resizePanelref.current != void 0
+      ),
+      //take(1),
+      rxjs.switchMap((resizePanelref) => {
+        if (!resizePanelref || !resizePanelref.current) return rxjs.EMPTY;
+        return rxjs.fromEvent(resizePanelref.current, "click");
+      })
+    );
+    const subscribe = resizePanelClickEvent.pipe(
+      rxjs.buffer(resizePanelClickEvent.pipe(rxjs.debounceTime(500))),
+      rxjs.filter((clickEventArray) => clickEventArray.length >= 2),
+      rxjs.map((events) => {
+        containerOpenCloseSubjectMap[containerName].next({
+          ...opt,
+          openOption: {
+            ...opt.openOption,
+            isPrevSizeOpen: false
+          },
+          onClose: () => {
+            if (opt.onClose) opt.onClose();
+            setIsOpen(false);
+            setIsDoubleClick(true);
+          },
+          onOpen: () => {
+            if (opt.onOpen) opt.onOpen();
+            setIsOpen(true);
+            setIsDoubleClick(true);
+          }
+        });
+      })
+    ).subscribe();
+    return () => {
+      subscribe.unsubscribe();
+    };
+  }, [containerName]);
+  return { isOpen, isDoubleClick, setIsDoubleClick };
+};
+
+exports.ContainerOpenCloseProvider = ContainerOpenCloseProvider;
+exports.containerOpenCloseSubjectMap = containerOpenCloseSubjectMap;
+exports.containerSpreadSubjectMap = containerSpreadSubjectMap;
+exports.useContainerSize = useContainerSize;
+exports.useContainers = useContainers;
+exports.useDecompositionLayout = useDecompositionLayout;
+exports.useDoubleClick = useDoubleClick;
+exports.useLayoutName = useLayoutName;
+//# sourceMappingURL=providers.cjs.map
+//# sourceMappingURL=providers.cjs.map

package/dist/providers.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/flex-layout/store/FlexLayoutContainerStore.ts","../src/flex-layout/utils/FlexLayoutUtils.ts","../src/flex-layout/providers/FlexLayoutHooks.tsx"],"names":["BehaviorSubject","combineLatest","map","filter","e","Subject","useState","useEffect","switchMap","EMPTY","fromEvent","buffer","debounceTime"],"mappings":"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","file":"providers.cjs","sourcesContent":["\"use client\";\r\nimport equal from \"fast-deep-equal\";\r\nimport { RefObject } from \"react\";\r\nimport { BehaviorSubject, combineLatest } from \"rxjs\";\r\nimport { distinctUntilChanged, filter, map } from \"rxjs/operators\";\r\nimport { DropTargetComponent } from \"../hooks/useDrag\";\r\n\r\n/**\r\n * 이전 값과 새 값이 동일하지 않을 때만 store를 업데이트하는 유틸 함수\r\n */\r\nfunction updateScrollStore<T>(subject: BehaviorSubject<T>, newValue: T) {\r\n\tconst currentValue = subject.getValue();\r\n\t// deep 비교를 통해 실제 변경이 있는 경우만 next\r\n\tif (!equal(currentValue, newValue)) {\r\n\t\tsubject.next(newValue);\r\n\t}\r\n}\r\n// 동일한지 확인 후 업데이트하는 유틸\r\nfunction updateRefStore(store: BehaviorSubject<RefStore>, newState: RefStore) {\r\n\tconst prevState = store.getValue();\r\n\tif (!equal(prevState, newState)) {\r\n\t\tstore.next(newState);\r\n\t}\r\n}\r\n\r\nfunction updateSplitScreenStore(newValue: LayoutSplitScreenState) {\r\n\tconst prevValue = layoutSplitScreenStore.getValue();\r\n\t// deep-equal 로 비교\r\n\tif (!equal(prevValue, newValue)) {\r\n\t\tlayoutSplitScreenStore.next(newValue);\r\n\t}\r\n}\r\n\r\n// 구독 시 이전 상태들을 축적하여 관리\r\n// const stateWithHistory$ = flexContainerStore.pipe(\r\n//     scan((acc, newState) => [...acc, newState], [] as RefStore[])\r\n// );\r\n\r\nexport interface ScrollPosition {\r\n\tx: number;\r\n\ty: number;\r\n}\r\n\r\nexport const scrollPositions: Record<string, ScrollPosition> = {};\r\n\r\nconst scrollPositionsSubject = new BehaviorSubject<\r\n\tRecord<string, ScrollPosition>\r\n>(scrollPositions);\r\n\r\n/**\r\n * 스크롤 위치 업데이트 함수\r\n *\r\n * 기존: 항상 store.next()가 호출됨 → 바뀌지 않았다면 건너뛰도록 변경\r\n */\r\nexport const setScrollPosition = (\r\n\tlayoutName: string,\r\n\tposition: ScrollPosition,\r\n) => {\r\n\tconst current = scrollPositionsSubject.getValue();\r\n\tconst prevPos = current[layoutName];\r\n\r\n\t// x, y 모두 동일하면 업데이트할 필요가 없으므로 조기 반환\r\n\tif (prevPos && prevPos.x === position.x && prevPos.y === position.y) {\r\n\t\treturn;\r\n\t}\r\n\r\n\t// 변경사항이 있으면 새 객체를 만들어 넘김\r\n\tconst newPositions = {\r\n\t\t...current,\r\n\t\t[layoutName]: position,\r\n\t};\r\n\r\n\tupdateScrollStore(scrollPositionsSubject, newPositions);\r\n};\r\n\r\n/**\r\n * 스크롤 위치 구독\r\n */\r\nexport const getScrollPosition = (layoutName: string) => {\r\n\treturn scrollPositionsSubject.pipe(\r\n\t\t// 해당 layoutName이 정의되지 않았을 때는 제외\r\n\t\tfilter((e) => e[layoutName] !== undefined),\r\n\t\tmap((positions) => positions[layoutName]),\r\n\t\tdistinctUntilChanged(\r\n\t\t\t(prev, curr) => prev?.x === curr?.x && prev?.y === curr?.y,\r\n\t\t),\r\n\t);\r\n};\r\n\r\nexport const removeScrollPosition = (layoutName: string) => {\r\n\tconst current = scrollPositionsSubject.getValue();\r\n\tdelete current[layoutName];\r\n\r\n\t// 꼭 삭제 후에도 이전 상태와 달라졌는지 확인\r\n\tconst newPositions = { ...current };\r\n\tupdateScrollStore(scrollPositionsSubject, newPositions);\r\n};\r\n\r\nexport type SplitScreenComponents = {\r\n\tafterDropTargetComponent: DropTargetComponent[];\r\n\tbeforeDropTargetComponent: DropTargetComponent[];\r\n\tcenterDropTargetComponent: DropTargetComponent[];\r\n\tdirection: \"row\" | \"column\";\r\n};\r\n\r\nexport type LayoutSplitScreenState = Record<\r\n\tstring,\r\n\tRecord<string, SplitScreenComponents>\r\n>;\r\n\r\nexport const layoutSplitScreenStore =\r\n\tnew BehaviorSubject<LayoutSplitScreenState>({});\r\n\r\nexport const setSplitScreen = (\r\n\trootName: string,\r\n\tlayoutName: string,\r\n\tnewComponents: SplitScreenComponents,\r\n) => {\r\n\tconst current = layoutSplitScreenStore.getValue();\r\n\tconst updatedLayout = { ...(current[rootName] || {}) };\r\n\tupdatedLayout[layoutName] = newComponents;\r\n\r\n\tconst newStoreValue = {\r\n\t\t...current,\r\n\t\t[rootName]: updatedLayout,\r\n\t};\r\n\tupdateSplitScreenStore(newStoreValue);\r\n};\r\n\r\nexport const resetRootSplitScreen = (rootName: string) => {\r\n\tconst current = layoutSplitScreenStore.getValue();\r\n\t// rootName 아래만 초기화\r\n\tconst newStoreValue = {\r\n\t\t...current,\r\n\t\t[rootName]: {},\r\n\t};\r\n\tupdateSplitScreenStore(newStoreValue);\r\n};\r\n\r\nexport const removeSplitScreenChild = (\r\n\trootName: string,\r\n\tlayoutName: string,\r\n) => {\r\n\tconst current = layoutSplitScreenStore.getValue();\r\n\tif (!current[rootName]) return;\r\n\r\n\tconst updatedLayout = { ...current[rootName] };\r\n\tdelete updatedLayout[layoutName];\r\n\r\n\tconst newStoreValue = {\r\n\t\t...current,\r\n\t\t[rootName]: updatedLayout,\r\n\t};\r\n\tupdateSplitScreenStore(newStoreValue);\r\n};\r\n\r\nexport const getCurrentSplitScreenComponents = (\r\n\trootName: string,\r\n\tlayoutName: string,\r\n) => {\r\n\tconst current = layoutSplitScreenStore.getValue();\r\n\tif (!current[rootName]) return;\r\n\treturn current[rootName][layoutName];\r\n};\r\n\r\nexport const getSplitScreen = (rootName: string, layoutName: string) => {\r\n\treturn layoutSplitScreenStore.pipe(\r\n\t\tmap((splitScreen) => splitScreen[rootName][layoutName]),\r\n\t\tdistinctUntilChanged((prev, curr) => {\r\n\t\t\t// 이전 상태와 현재 상태를 비교하여 동일하면 필터링\r\n\t\t\tconst filterChildren = (obj: any) => {\r\n\t\t\t\t// 객체 복사 후 children 속성 제거\r\n\t\t\t\tconst { children, component, targetComponent, x, y, ...rest } =\r\n\t\t\t\t\tobj || {};\r\n\t\t\t\treturn rest;\r\n\t\t\t};\r\n\t\t\treturn equal(filterChildren(prev), filterChildren(curr));\r\n\t\t}),\r\n\t);\r\n};\r\n\r\n// 중첩된 객체 구조로 ref를 관리하는 타입\r\ntype RefStore = {\r\n\t[layoutName: string]: {\r\n\t\t[containerName: string]: RefObject<HTMLElement | null>;\r\n\t};\r\n};\r\n\r\n// 초기값으로 빈 객체를 설정한 BehaviorSubject 생성\r\nexport const flexContainerStore = new BehaviorSubject<RefStore>({});\r\n\r\nexport const flexResizePanelStore = new BehaviorSubject<RefStore>({});\r\n/**\r\n * ref를 업데이트하는 함수\r\n * - 기존: 무조건 next() → 새/이전 상태 비교 후 다를 경우에만 next()\r\n */\r\nexport const setContainerRef = <T extends HTMLElement>(\r\n\tlayoutName: string,\r\n\tcontainerName: string,\r\n\tref: React.RefObject<T | null> | null,\r\n) => {\r\n\tconst currentRefs = flexContainerStore.getValue();\r\n\tconst updatedLayoutRefs = { ...(currentRefs[layoutName] || {}) };\r\n\r\n\tif (ref === null) {\r\n\t\tdelete updatedLayoutRefs[containerName];\r\n\t} else {\r\n\t\tupdatedLayoutRefs[containerName] = ref;\r\n\t}\r\n\r\n\tconst newRefs: RefStore = {\r\n\t\t...currentRefs,\r\n\t\t[layoutName]: updatedLayoutRefs,\r\n\t};\r\n\r\n\tupdateRefStore(flexContainerStore, newRefs);\r\n};\r\n\r\nexport const setResizePanelRef = <T extends HTMLElement>(\r\n\tlayoutName: string,\r\n\tcontainerName: string,\r\n\tref: React.RefObject<T | null> | null,\r\n) => {\r\n\tconst currentRefs = flexResizePanelStore.getValue();\r\n\tconst updatedLayoutRefs = { ...(currentRefs[layoutName] || {}) };\r\n\r\n\tif (ref === null) {\r\n\t\tdelete updatedLayoutRefs[containerName];\r\n\t} else {\r\n\t\tupdatedLayoutRefs[containerName] = ref;\r\n\t}\r\n\r\n\tconst newRefs: RefStore = {\r\n\t\t...currentRefs,\r\n\t\t[layoutName]: updatedLayoutRefs,\r\n\t};\r\n\r\n\tupdateRefStore(flexResizePanelStore, newRefs);\r\n};\r\n\r\nexport const getLayoutInfos = (layoutName: string) => {\r\n\treturn combineLatest([flexContainerStore, flexResizePanelStore]).pipe(\r\n\t\tmap(([containerRefs, resizePanelRefs]) => {\r\n\t\t\t// 두 Store에서 layoutName에 해당하는 값을 병합\r\n\t\t\tconst containerData = containerRefs[layoutName] || {};\r\n\t\t\tconst resizePanelData = resizePanelRefs[layoutName] || {};\r\n\r\n\t\t\t// container와 resizePanel 데이터 합치기\r\n\t\t\treturn {\r\n\t\t\t\tcontainer: containerData,\r\n\t\t\t\tresizePanel: resizePanelData,\r\n\t\t\t};\r\n\t\t}),\r\n\t\tfilter((result) => result.container !== null), // 빈 객체 제외\r\n\t);\r\n};\r\n\r\n// 특정 containerName의 ref를 구독하는 함수\r\n// layoutName이 지정되지 않으면 전체 layout에서 해당하는 containerName의 ref를 찾음\r\nexport const getContainerRef = ({\r\n\tcontainerName,\r\n\tlayoutName,\r\n}: {\r\n\tcontainerName: string;\r\n\tlayoutName?: string;\r\n}) => {\r\n\treturn flexContainerStore.pipe(\r\n\t\tmap((refs: RefStore) => {\r\n\t\t\tif (layoutName) {\r\n\t\t\t\t// 지정된 layoutName에서 해당 containerName의 ref 반환\r\n\t\t\t\treturn refs[layoutName]?.[containerName] || null;\r\n\t\t\t} else {\r\n\t\t\t\t// 모든 layout에서 해당 containerName의 ref 찾기\r\n\t\t\t\treturn Object.entries(refs).find(\r\n\t\t\t\t\t([key, value]) => refs[key][containerName],\r\n\t\t\t\t)?.[1][containerName];\r\n\t\t\t}\r\n\t\t\t// else {\r\n\t\t\t//     // 모든 layout에서 해당 containerName의 ref 찾기\r\n\t\t\t//     for (const layout in refs) {\r\n\t\t\t//         if (refs[layout][containerName]) {\r\n\t\t\t//             return refs[layout][containerName];\r\n\t\t\t//         }\r\n\t\t\t//     }\r\n\t\t\t//     return null;\r\n\t\t\t// }\r\n\t\t}),\r\n\t\tfilter((ref) => ref !== null),\r\n\t);\r\n};\r\n\r\nexport const getResizePanelRef = ({\r\n\tcontainerName,\r\n\tlayoutName,\r\n}: {\r\n\tcontainerName: string;\r\n\tlayoutName?: string;\r\n}) => {\r\n\treturn flexResizePanelStore.pipe(\r\n\t\tmap((refs: RefStore) => {\r\n\t\t\tif (layoutName) {\r\n\t\t\t\t// 지정된 layoutName에서 해당 containerName의 ref 반환\r\n\t\t\t\treturn refs[layoutName]?.[containerName] || null;\r\n\t\t\t} else {\r\n\t\t\t\t// 모든 layout에서 해당 containerName의 ref 찾기\r\n\t\t\t\treturn Object.entries(refs).find(\r\n\t\t\t\t\t([key, value]) => refs[key][containerName],\r\n\t\t\t\t)?.[1][containerName];\r\n\t\t\t}\r\n\t\t\t// else {\r\n\t\t\t//     // 모든 layout에서 해당 containerName의 ref 찾기\r\n\t\t\t//     for (const layout in refs) {\r\n\t\t\t//         if (refs[layout][containerName]) {\r\n\t\t\t//             return refs[layout][containerName];\r\n\t\t\t//         }\r\n\t\t\t//     }\r\n\t\t\t//     return null;\r\n\t\t\t// }\r\n\t\t}),\r\n\t\tfilter((ref) => ref !== null),\r\n\t);\r\n};\r\n","export function isDocumentOut({ x, y }: { x: number; y: number }) {\r\n    if (typeof window == 'undefined') return;\r\n    const { innerWidth, innerHeight, scrollX, scrollY } = window;\r\n\r\n    return (\r\n        x < 0 || y < 0 || x > innerWidth + scrollX || y > innerHeight + scrollY\r\n    );\r\n}\r\n\r\nlet lastTouchEvent: globalThis.TouchEvent;\r\nexport function getClientXy(event: Event) {\r\n    let clientX: number;\r\n    let clientY: number;\r\n    if (window.MouseEvent && event instanceof window.MouseEvent) {\r\n        clientX = event.clientX;\r\n        clientY = event.clientY;\r\n    } else if (window.TouchEvent && event instanceof window.TouchEvent) {\r\n        const _event = event.touches.length == 0 ? lastTouchEvent : event;\r\n        clientX = _event!.touches[0].clientX;\r\n        clientY = _event!.touches[0].clientY;\r\n        lastTouchEvent = event;\r\n    } else {\r\n        return; // 해당 이벤트 타입이 MouseEvent나 TouchEvent가 아니라면 무시\r\n    }\r\n    return { clientX, clientY };\r\n}\r\n\r\nexport function isOverMove(elementSize: number, elementMinSize: number) {\r\n    return (\r\n        Math.floor(elementSize) <= 0 ||\r\n        (isNaN(elementMinSize)\r\n            ? false\r\n            : elementMinSize >= Math.floor(elementSize))\r\n    );\r\n}\r\n\r\nexport function findNotCloseFlexContent(\r\n    target: HTMLElement | Element | null,\r\n    direction: 'previousElementSibling' | 'nextElementSibling'\r\n) {\r\n    if (!target) return target;\r\n    let _target = target as HTMLElement;\r\n    const isCloseCheck = () => {\r\n        let grow =\r\n            parseFloat(window.getComputedStyle(_target).flex.split(' ')[0]) ||\r\n            0;\r\n        if (grow == 0) {\r\n            return true;\r\n        } else {\r\n            return false;\r\n        }\r\n    };\r\n    while (isCloseCheck()) {\r\n        let nextTarget = _target[direction]?.[direction];\r\n        _target = nextTarget as HTMLElement;\r\n        if (!_target) {\r\n            break;\r\n        }\r\n    }\r\n    return _target as HTMLElement | HTMLDivElement | null;\r\n}\r\n\r\nexport function remain(flexContainerList: Array<HTMLElement>) {\r\n    return new Promise(resolve => {\r\n        let notGrowList: Array<HTMLElement> = [];\r\n        let totalGrow = flexContainerList.reduce((t, e, i) => {\r\n            if (e.hasAttribute('data-grow') == false) {\r\n                notGrowList.push(e);\r\n                return t;\r\n            }\r\n            let grow = parseFloat(e.dataset.grow || '');\r\n            e.style.flex = `${grow} 1 0%`;\r\n            t -= grow;\r\n            return t;\r\n        }, flexContainerList.length);\r\n\r\n        if (notGrowList.length != 0) {\r\n            resize(notGrowList, totalGrow);\r\n        }\r\n\r\n        resolve(flexContainerList);\r\n    });\r\n}\r\n\r\nexport function resize(list: Array<HTMLElement>, totalGrow: number) {\r\n    return new Promise(resolve => {\r\n        // totalGrow 값을 리스트의 개수로 나누어 균등 할당\r\n        let resizeWeight = totalGrow / list.length;\r\n        list.forEach(e => {\r\n            e.dataset.grow = resizeWeight.toString();\r\n            e.style.flex = `${resizeWeight} 1 0%`;\r\n        });\r\n        resolve(resizeWeight);\r\n    });\r\n}\r\n\r\nexport function mathWeight(totalCount: number, totalGrow: number) {\r\n    return 1 + (totalGrow - totalCount) / totalCount;\r\n}\r\nexport function mathGrow(\r\n    childSize: number,\r\n    parentSize: number,\r\n    containerCount: number\r\n) {\r\n    return containerCount * (childSize / parentSize);\r\n}\r\n\r\nexport function getGrow(growTarget: HTMLElement | Element) {\r\n    const target =\r\n        growTarget instanceof Element\r\n            ? (growTarget as HTMLElement)\r\n            : growTarget;\r\n    return (\r\n        parseFloat(target.style.flex.split(' ')[0]) ||\r\n        parseFloat(target.dataset.grow || '')\r\n    );\r\n}\r\n\r\nexport function closeFlex(\r\n    resizeTarget: HTMLElement,\r\n    containers: HTMLElement[],\r\n    {\r\n        isResize = false,\r\n        isDsiabledResizePanel = false,\r\n        sizeName,\r\n    }: {\r\n        isResize?: boolean;\r\n        isDsiabledResizePanel?: boolean;\r\n        sizeName: 'width' | 'height';\r\n    }\r\n) {\r\n    return new Promise(resolve => {\r\n        if (!resizeTarget.hasAttribute('data-is_resize_panel')) {\r\n            // resolve(resizeTarget);\r\n            // return;\r\n        } else if (isDsiabledResizePanel) {\r\n            resizeTarget.dataset.is_resize_panel = 'false';\r\n        }\r\n\r\n        resizeTarget.dataset.prev_grow = getGrow(resizeTarget).toString();\r\n\r\n        let notCloseList = containers.filter(\r\n            e => e.style.flex != '0 1 0%' && e != resizeTarget\r\n        );\r\n        let notCloseAndOpenTargetList = [...notCloseList, resizeTarget];\r\n        //let resizeWeight = this.mathWeight(notCloseList, this.#forResizeList.length);\r\n        notCloseAndOpenTargetList.forEach(e => {\r\n            e.style.transition = 'flex 0.5s';\r\n            e.ontransitionend = event => {\r\n                if (event.propertyName != 'flex-grow') {\r\n                    return;\r\n                }\r\n                notCloseAndOpenTargetList.forEach(\r\n                    e => (e.style.transition = '')\r\n                );\r\n                //e.style.transition = '';\r\n                e.ontransitionend = () => {};\r\n            };\r\n\r\n            if (e == resizeTarget) {\r\n                e.dataset.grow = '0';\r\n                e.style.flex = `0 1 0%`;\r\n                return;\r\n            }\r\n\r\n            if (isResize) {\r\n                return;\r\n            }\r\n\r\n            let percent = getGrow(e) / containers.length;\r\n            //let percentWeight = this.#forResizeList.length * percent;\r\n            //let remainWeight = resizeWeight * percent;\r\n            if (notCloseList.length == 1) {\r\n                e.dataset.grow = containers.length.toString();\r\n                e.style.flex = `${containers.length} 1 0%`;\r\n                return;\r\n            }\r\n            e.dataset.grow = (containers.length * percent).toString();\r\n            e.style.flex = `${containers.length * percent} 1 0%`;\r\n        });\r\n\r\n        if (isResize) {\r\n            resize(notCloseList, containers.length);\r\n        }\r\n\r\n        resolve(resizeTarget);\r\n    });\r\n}\r\n\r\nexport function openFlex(\r\n    resizeTarget: HTMLElement,\r\n    containers: HTMLElement[],\r\n    {\r\n        isPrevSizeOpen = false,\r\n        isResize = false,\r\n        openGrowImportant = 0,\r\n        sizeName,\r\n    }: {\r\n        isPrevSizeOpen?: boolean;\r\n        isResize?: boolean;\r\n        openGrowImportant?: number;\r\n        sizeName?: 'width' | 'height'; // 유니언 타입으로 수정\r\n    }\r\n) {\r\n    return new Promise(resolve => {\r\n        if (!resizeTarget.hasAttribute('data-is_resize_panel')) {\r\n            // resolve(resizeTarget);\r\n            // return;\r\n        } else if (\r\n            resizeTarget.hasAttribute('data-is_resize_panel') &&\r\n            resizeTarget.dataset.is_resize_panel == 'false'\r\n        ) {\r\n            resizeTarget.dataset.is_resize_panel = 'true';\r\n        }\r\n\r\n        let notCloseList = containers.filter(\r\n            e => e.style.flex != '0 1 0%' && e != resizeTarget\r\n        );\r\n        let notCloseAndOpenTargetList = [...notCloseList, resizeTarget];\r\n        //let resizeWeight = this.mathWeight(notCloseAndOpenTargetList, this.#forResizeList.length);\r\n        let openTargetGrow = 1;\r\n        const sizeStyleName = ('client' +\r\n            sizeName!.charAt(0).toUpperCase() +\r\n            sizeName!.substring(1)) as 'clientHeight' | 'clientWidth';\r\n        const parentSize =\r\n            (sizeName &&\r\n                resizeTarget.parentElement &&\r\n                resizeTarget.parentElement[sizeStyleName]) ||\r\n            0;\r\n        if (isPrevSizeOpen && resizeTarget.hasAttribute('data-prev_grow')) {\r\n            openTargetGrow =\r\n                parseFloat(resizeTarget.dataset.prev_grow || '1') || 1;\r\n            //resizeTarget.removeAttribute('data-prev_grow');\r\n        } else if (parentSize && parentSize !== 0) {\r\n            openTargetGrow =\r\n                (parentSize / notCloseList.length / (parentSize - 1)) *\r\n                containers.length;\r\n        } else {\r\n            openTargetGrow = 1;\r\n        }\r\n        if (openGrowImportant) {\r\n            openTargetGrow = openGrowImportant;\r\n        }\r\n        openTargetGrow = openTargetGrow === Infinity ? 1 : openTargetGrow;\r\n        //notCloseList.forEach(e=>{\r\n        notCloseAndOpenTargetList.forEach(e => {\r\n            e.style.transition = 'flex 0.5s';\r\n            e.ontransitionend = event => {\r\n                if (event.propertyName != 'flex-grow') {\r\n                    return;\r\n                }\r\n                notCloseAndOpenTargetList.forEach(\r\n                    e => (e.style.transition = '')\r\n                );\r\n                //e.style.transition = '';\r\n                e.ontransitionend = () => {};\r\n            };\r\n\r\n            if (e == resizeTarget) {\r\n                resizeTarget.dataset.grow = openTargetGrow.toString();\r\n                resizeTarget.style.flex = `${openTargetGrow} 1 0%`;\r\n                return;\r\n            }\r\n\r\n            if (isResize) {\r\n                return;\r\n            }\r\n\r\n            let grow =\r\n                (parentSize / notCloseList.length / (parentSize - 1)) *\r\n                (containers.length - openTargetGrow);\r\n            grow = grow === Infinity ? 1 : grow;\r\n            //let percent = getGrow(e) / totalGrow - openTargetGrow / totalGrow;\r\n            e.dataset.grow = grow.toString();\r\n\r\n            e.style.flex = `${grow} 1 0%`;\r\n        });\r\n\r\n        if (isResize) {\r\n            resize(notCloseAndOpenTargetList, containers.length);\r\n        }\r\n\r\n        resolve(openTargetGrow);\r\n    });\r\n}\r\n","\"use client\";\r\n\r\nimport { useEffect, useState } from \"react\";\r\nimport {\r\n\tflexContainerStore,\r\n\tgetLayoutInfos,\r\n\tgetResizePanelRef,\r\n} from \"../store/FlexLayoutContainerStore\";\r\nimport {\r\n\tcloseFlex,\r\n\tgetGrow,\r\n\tmathGrow,\r\n\topenFlex,\r\n} from \"../utils/FlexLayoutUtils\";\r\n\r\nimport {\r\n\tbuffer,\r\n\tdebounceTime,\r\n\tEMPTY,\r\n\tfilter,\r\n\tfromEvent,\r\n\tmap,\r\n\tSubject,\r\n\tswitchMap,\r\n} from \"rxjs\";\r\nconst g = globalThis as any;\r\ng.__FLEX_SUBJECTS__ ??= { openClose: {}, spread: {} };\r\n\r\nexport type SubjectMap<T> = Record<string, Subject<T>>;\r\n\r\n// 컨테이너 상태 타입 정의\r\ninterface ContainerStateRequest {\r\n\tmode: \"toggle\" | \"open\" | \"close\";\r\n\tinitOpenState?: boolean;\r\n\tonOpen?: () => void;\r\n\tonClose?: () => void;\r\n\topenOption?: {\r\n\t\tisPrevSizeOpen?: boolean;\r\n\t\tisResize?: boolean;\r\n\t\topenGrowImportant?: number;\r\n\t};\r\n\tcloseOption?: { isResize?: boolean; isDsiabledResizePanel?: boolean };\r\n}\r\n\r\ninterface ContainerState {\r\n\tisOpen: boolean;\r\n\ttargetContainer: HTMLElement;\r\n\tgrow: number;\r\n}\r\nexport const containerOpenCloseSubjectMap: SubjectMap<ContainerStateRequest> =\r\n\tg.__FLEX_SUBJECTS__.openClose;\r\nexport const containerSpreadSubjectMap: SubjectMap<ContainerState> =\r\n\tg.__FLEX_SUBJECTS__.spread;\r\n\r\n// export const containerOpenCloseSubjectMap: SubjectMap<ContainerStateRequest> = (\r\n//     Object.keys({}) as Array<string>\r\n// ).reduce((total, key) => {\r\n//     total[key] = new Subject<ContainerStateRequest>();\r\n//     return total;\r\n// }, {} as SubjectMap<ContainerStateRequest>);\r\n\r\n// export const containerSpreadSubjectMap: SubjectMap<ContainerState> = (\r\n//     Object.keys({}) as Array<string>\r\n// ).reduce((total, key) => {\r\n//     total[key] = new Subject<ContainerState>();\r\n//     return total;\r\n// }, {} as SubjectMap<ContainerState>);\r\n\r\nexport const ContainerOpenCloseProvider = ({\r\n\tlayoutName,\r\n\tcontainerName,\r\n\tsizeName,\r\n}: {\r\n\tlayoutName: string;\r\n\tcontainerName: string;\r\n\tsizeName: \"width\" | \"height\";\r\n}) => {\r\n\t// SubjectMap에 중복 체크 후 Subject 추가\r\n\tif (!containerOpenCloseSubjectMap[containerName]) {\r\n\t\tcontainerOpenCloseSubjectMap[containerName] =\r\n\t\t\tnew Subject<ContainerStateRequest>();\r\n\t}\r\n\tif (!containerSpreadSubjectMap[containerName]) {\r\n\t\tcontainerSpreadSubjectMap[containerName] =\r\n\t\t\tnew Subject<ContainerState>();\r\n\t}\r\n\r\n\tconst [containers, setContainers] = useState<HTMLElement[]>([]);\r\n\tconst [container, setContainer] = useState<HTMLElement>();\r\n\r\n\tuseEffect(() => {\r\n\t\t// 특정 layoutName과 containerName을 통해 ref를 구독\r\n\t\tconst subscription = getLayoutInfos(layoutName as string).subscribe(\r\n\t\t\t(layout) => {\r\n\t\t\t\tif (\r\n\t\t\t\t\t!layout ||\r\n\t\t\t\t\t!layout.container[containerName] ||\r\n\t\t\t\t\t!layout.container[containerName].current\r\n\t\t\t\t)\r\n\t\t\t\t\treturn;\r\n\t\t\t\tsetContainers(\r\n\t\t\t\t\tObject.values(layout.container)\r\n\t\t\t\t\t\t.filter(\r\n\t\t\t\t\t\t\t(e): e is { current: HTMLElement } =>\r\n\t\t\t\t\t\t\t\te.current !== null,\r\n\t\t\t\t\t\t)\r\n\t\t\t\t\t\t.map((e) => e.current),\r\n\t\t\t\t);\r\n\t\t\t\tsetContainer(layout.container[containerName].current);\r\n\t\t\t},\r\n\t\t);\r\n\r\n\t\t// 구독 해제\r\n\t\treturn () => subscription.unsubscribe();\r\n\t}, [containerName, layoutName]);\r\n\tuseEffect(() => {\r\n\t\tconst styleName = `${sizeName.charAt(0).toUpperCase() + sizeName.substring(1)}`;\r\n\t\tconst clientSize = (\"client\" + styleName) as\r\n\t\t\t| \"clientWidth\"\r\n\t\t\t| \"clientHeight\";\r\n\t\tconst outerSize = (\"outer\" + styleName) as \"outerWidth\" | \"outerHeight\";\r\n\t\tconst maxSize = (\"max\" + styleName) as \"maxWidth\" | \"maxHeight\";\r\n\t\tconst subscribe = containerOpenCloseSubjectMap[containerName].subscribe(\r\n\t\t\t({\r\n\t\t\t\tmode,\r\n\t\t\t\tinitOpenState: isOpenState,\r\n\t\t\t\tonClose,\r\n\t\t\t\tonOpen,\r\n\t\t\t\topenOption = {},\r\n\t\t\t\tcloseOption = {},\r\n\t\t\t}) => {\r\n\t\t\t\tif (!container || containers.length === 0) return;\r\n\t\t\t\tconst currentGrow = getGrow(container);\r\n\t\t\t\tconst styleMap = window.getComputedStyle(container);\r\n\t\t\t\tconst maxSizeGrow = mathGrow(\r\n\t\t\t\t\tparseInt(styleMap[maxSize]),\r\n\t\t\t\t\t(container.parentElement &&\r\n\t\t\t\t\t\tcontainer.parentElement[clientSize]) ||\r\n\t\t\t\t\t\twindow[outerSize],\r\n\t\t\t\t\tcontainers.length,\r\n\t\t\t\t);\r\n\t\t\t\tconst open = () =>\r\n\t\t\t\t\topenFlex(container, containers, {\r\n\t\t\t\t\t\tsizeName,\r\n\t\t\t\t\t\t...(isNaN(maxSizeGrow)\r\n\t\t\t\t\t\t\t? {}\r\n\t\t\t\t\t\t\t: {\r\n\t\t\t\t\t\t\t\t\topenGrowImportant: maxSizeGrow,\r\n\t\t\t\t\t\t\t\t}),\r\n\t\t\t\t\t\t...openOption,\r\n\t\t\t\t\t}).then((openTargetGrow) => {\r\n\t\t\t\t\t\tif (onOpen) onOpen();\r\n\t\t\t\t\t\tcontainerSpreadSubjectMap[containerName].next({\r\n\t\t\t\t\t\t\tisOpen: true,\r\n\t\t\t\t\t\t\tgrow: openTargetGrow as any,\r\n\t\t\t\t\t\t\ttargetContainer: container,\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t});\r\n\t\t\t\tconst close = () =>\r\n\t\t\t\t\tcloseFlex(container, containers, {\r\n\t\t\t\t\t\tsizeName,\r\n\t\t\t\t\t\t...closeOption,\r\n\t\t\t\t\t}).then(() => {\r\n\t\t\t\t\t\tif (onClose) onClose();\r\n\t\t\t\t\t\tcontainerSpreadSubjectMap[containerName].next({\r\n\t\t\t\t\t\t\tisOpen: false,\r\n\t\t\t\t\t\t\tgrow: 0,\r\n\t\t\t\t\t\t\ttargetContainer: container,\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t});\r\n\t\t\t\tif (mode === \"toggle\") {\r\n\t\t\t\t\tif (currentGrow === 0) {\r\n\t\t\t\t\t\topen();\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tclose();\r\n\t\t\t\t\t}\r\n\t\t\t\t} else if (mode === \"open\") {\r\n\t\t\t\t\tif (currentGrow === 0) {\r\n\t\t\t\t\t\topen();\r\n\t\t\t\t\t}\r\n\t\t\t\t} else if (mode === \"close\") {\r\n\t\t\t\t\tif (currentGrow !== 0) {\r\n\t\t\t\t\t\tclose();\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t);\r\n\r\n\t\treturn () => {\r\n\t\t\tsubscribe.unsubscribe();\r\n\t\t};\r\n\t}, [containerName, container, containers, sizeName]);\r\n\r\n\treturn null;\r\n};\r\n\r\nexport const useContainers = (layoutName: string) => {\r\n\tconst [containers, setContainers] = useState<HTMLElement[]>([]);\r\n\r\n\tuseEffect(() => {\r\n\t\t// 특정 layoutName과 containerName을 통해 ref를 구독\r\n\t\tconst subscription = getLayoutInfos(layoutName as string).subscribe(\r\n\t\t\t(layout) => {\r\n\t\t\t\tsetContainers(\r\n\t\t\t\t\tObject.values(layout.container)\r\n\t\t\t\t\t\t.filter(\r\n\t\t\t\t\t\t\t(e): e is { current: HTMLElement } =>\r\n\t\t\t\t\t\t\t\te.current !== null,\r\n\t\t\t\t\t\t)\r\n\t\t\t\t\t\t.map((e) => e.current),\r\n\t\t\t\t);\r\n\t\t\t},\r\n\t\t);\r\n\r\n\t\t// 구독 해제\r\n\t\treturn () => subscription.unsubscribe();\r\n\t}, [layoutName]);\r\n\treturn containers;\r\n};\r\n\r\nexport const useLayoutName = (containerName: string) => {\r\n\tconst [layoutName, setLayoutName] = useState<string>();\r\n\tuseEffect(() => {\r\n\t\tconst subscribe = flexContainerStore\r\n\t\t\t.pipe(\r\n\t\t\t\tmap(\r\n\t\t\t\t\t(layouts) =>\r\n\t\t\t\t\t\tObject.entries(layouts)\r\n\t\t\t\t\t\t\t.filter(([_, v]) => v[containerName])\r\n\t\t\t\t\t\t\t.map(([k]) => k)[0] as string, // 첫 번째 결과 가져오기\r\n\t\t\t\t),\r\n\t\t\t)\r\n\t\t\t.subscribe(setLayoutName);\r\n\r\n\t\t// 컴포넌트 언마운트 시 구독 해제\r\n\t\treturn () => subscribe.unsubscribe();\r\n\t}, [containerName]);\r\n\r\n\treturn layoutName;\r\n};\r\n\r\nexport const useDecompositionLayout = ({\r\n\tlayoutName: initialLayoutName,\r\n\tcontainerName,\r\n}: {\r\n\tlayoutName?: string;\r\n\tcontainerName: string;\r\n}) => {\r\n\tconst derivedLayoutName = useLayoutName(containerName);\r\n\tconst finalLayoutName = initialLayoutName || derivedLayoutName;\r\n\r\n\tconst [containers, setContainers] = useState<HTMLElement[]>([]);\r\n\tconst [container, setContainer] = useState<HTMLElement>();\r\n\tconst [resizePanel, setResizePanel] = useState<HTMLElement>();\r\n\r\n\tuseEffect(() => {\r\n\t\tif (!finalLayoutName) return; // layoutName이 준비될 때까지 대기\r\n\t\t// 특정 layoutName과 containerName을 통해 ref를 구독\r\n\t\tconst subscription = getLayoutInfos(finalLayoutName).subscribe(\r\n\t\t\t(layout) => {\r\n\t\t\t\tif (!layout) return;\r\n\t\t\t\tsetContainers(\r\n\t\t\t\t\tObject.values(layout.container)\r\n\t\t\t\t\t\t.filter(\r\n\t\t\t\t\t\t\t(e): e is { current: HTMLElement } =>\r\n\t\t\t\t\t\t\t\te.current !== null,\r\n\t\t\t\t\t\t)\r\n\t\t\t\t\t\t.map((e) => e.current),\r\n\t\t\t\t);\r\n\t\t\t\tif (\r\n\t\t\t\t\tcontainerName &&\r\n\t\t\t\t\tlayout.container[containerName] &&\r\n\t\t\t\t\tlayout.container[containerName].current\r\n\t\t\t\t) {\r\n\t\t\t\t\tsetContainer(layout.container[containerName].current);\r\n\t\t\t\t\tif (\r\n\t\t\t\t\t\tlayout.resizePanel[containerName] &&\r\n\t\t\t\t\t\tlayout.resizePanel[containerName].current\r\n\t\t\t\t\t) {\r\n\t\t\t\t\t\tsetResizePanel(\r\n\t\t\t\t\t\t\tlayout.resizePanel[containerName].current,\r\n\t\t\t\t\t\t);\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t);\r\n\r\n\t\t// 구독 해제\r\n\t\treturn () => subscription.unsubscribe();\r\n\t}, [containerName, finalLayoutName]);\r\n\r\n\treturn { layout: containers, container, resizePanel };\r\n};\r\n\r\nexport const useContainerSize = (containerName: string) => {\r\n\tconst { layout, container, resizePanel } = useDecompositionLayout({\r\n\t\tcontainerName,\r\n\t});\r\n\tconst [size, setSize] = useState<{ width: number; height: number }>();\r\n\tuseEffect(() => {\r\n\t\tif (!container) return;\r\n\t\tconst observer = new ResizeObserver((entries) => {\r\n\t\t\tfor (const entry of entries) {\r\n\t\t\t\tsetSize({\r\n\t\t\t\t\twidth: entry.contentRect.width,\r\n\t\t\t\t\theight: entry.contentRect.height,\r\n\t\t\t\t});\r\n\t\t\t}\r\n\t\t});\r\n\t\tobserver.observe(container);\r\n\t\treturn () => observer.disconnect();\r\n\t}, [container]);\r\n\treturn { size };\r\n};\r\n\r\nexport const useDoubleClick = (\r\n\tcontainerName: string,\r\n\topt: ContainerStateRequest,\r\n) => {\r\n\tconst [isOpen, setIsOpen] = useState<boolean>();\r\n\tconst [isDoubleClick, setIsDoubleClick] = useState<boolean>();\r\n\tuseEffect(() => {\r\n\t\tconst resizePanelClickEvent = getResizePanelRef({\r\n\t\t\tcontainerName,\r\n\t\t}).pipe(\r\n\t\t\tfilter(\r\n\t\t\t\t(resizePanelref) =>\r\n\t\t\t\t\tresizePanelref != undefined &&\r\n\t\t\t\t\tresizePanelref.current != undefined,\r\n\t\t\t),\r\n\t\t\t//take(1),\r\n\t\t\tswitchMap((resizePanelref) => {\r\n\t\t\t\tif (!resizePanelref || !resizePanelref.current) return EMPTY;\r\n\t\t\t\treturn fromEvent(resizePanelref.current, \"click\");\r\n\t\t\t}),\r\n\t\t);\r\n\t\tconst subscribe = resizePanelClickEvent\r\n\t\t\t.pipe(\r\n\t\t\t\tbuffer(resizePanelClickEvent.pipe(debounceTime(500))),\r\n\t\t\t\tfilter((clickEventArray) => clickEventArray.length >= 2),\r\n\t\t\t\tmap((events) => {\r\n\t\t\t\t\tcontainerOpenCloseSubjectMap[containerName].next({\r\n\t\t\t\t\t\t...opt,\r\n\t\t\t\t\t\topenOption: {\r\n\t\t\t\t\t\t\t...opt.openOption,\r\n\t\t\t\t\t\t\tisPrevSizeOpen: false,\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t\tonClose: () => {\r\n\t\t\t\t\t\t\tif (opt.onClose) opt.onClose();\r\n\t\t\t\t\t\t\tsetIsOpen(false);\r\n\t\t\t\t\t\t\tsetIsDoubleClick(true);\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t\tonOpen: () => {\r\n\t\t\t\t\t\t\tif (opt.onOpen) opt.onOpen();\r\n\t\t\t\t\t\t\tsetIsOpen(true);\r\n\t\t\t\t\t\t\tsetIsDoubleClick(true);\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t});\r\n\t\t\t\t}),\r\n\t\t\t)\r\n\t\t\t.subscribe();\r\n\t\treturn () => {\r\n\t\t\tsubscribe.unsubscribe();\r\n\t\t};\r\n\t}, [containerName]);\r\n\treturn { isOpen, isDoubleClick, setIsDoubleClick };\r\n};\r\n"]}

package/dist/providers.d.cts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { Subject } from 'rxjs';
+
+type SubjectMap<T> = Record<string, Subject<T>>;
+interface ContainerStateRequest {
+    mode: "toggle" | "open" | "close";
+    initOpenState?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+    openOption?: {
+        isPrevSizeOpen?: boolean;
+        isResize?: boolean;
+        openGrowImportant?: number;
+    };
+    closeOption?: {
+        isResize?: boolean;
+        isDsiabledResizePanel?: boolean;
+    };
+}
+interface ContainerState {
+    isOpen: boolean;
+    targetContainer: HTMLElement;
+    grow: number;
+}
+declare const containerOpenCloseSubjectMap: SubjectMap<ContainerStateRequest>;
+declare const containerSpreadSubjectMap: SubjectMap<ContainerState>;
+declare const ContainerOpenCloseProvider: ({ layoutName, containerName, sizeName, }: {
+    layoutName: string;
+    containerName: string;
+    sizeName: "width" | "height";
+}) => null;
+declare const useContainers: (layoutName: string) => HTMLElement[];
+declare const useLayoutName: (containerName: string) => string | undefined;
+declare const useDecompositionLayout: ({ layoutName: initialLayoutName, containerName, }: {
+    layoutName?: string;
+    containerName: string;
+}) => {
+    layout: HTMLElement[];
+    container: HTMLElement | undefined;
+    resizePanel: HTMLElement | undefined;
+};
+declare const useContainerSize: (containerName: string) => {
+    size: {
+        width: number;
+        height: number;
+    } | undefined;
+};
+declare const useDoubleClick: (containerName: string, opt: ContainerStateRequest) => {
+    isOpen: boolean | undefined;
+    isDoubleClick: boolean | undefined;
+    setIsDoubleClick: React.Dispatch<React.SetStateAction<boolean | undefined>>;
+};
+
+export { ContainerOpenCloseProvider, type SubjectMap, containerOpenCloseSubjectMap, containerSpreadSubjectMap, useContainerSize, useContainers, useDecompositionLayout, useDoubleClick, useLayoutName };

package/dist/providers.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { Subject } from 'rxjs';
+
+type SubjectMap<T> = Record<string, Subject<T>>;
+interface ContainerStateRequest {
+    mode: "toggle" | "open" | "close";
+    initOpenState?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+    openOption?: {
+        isPrevSizeOpen?: boolean;
+        isResize?: boolean;
+        openGrowImportant?: number;
+    };
+    closeOption?: {
+        isResize?: boolean;
+        isDsiabledResizePanel?: boolean;
+    };
+}
+interface ContainerState {
+    isOpen: boolean;
+    targetContainer: HTMLElement;
+    grow: number;
+}
+declare const containerOpenCloseSubjectMap: SubjectMap<ContainerStateRequest>;
+declare const containerSpreadSubjectMap: SubjectMap<ContainerState>;
+declare const ContainerOpenCloseProvider: ({ layoutName, containerName, sizeName, }: {
+    layoutName: string;
+    containerName: string;
+    sizeName: "width" | "height";
+}) => null;
+declare const useContainers: (layoutName: string) => HTMLElement[];
+declare const useLayoutName: (containerName: string) => string | undefined;
+declare const useDecompositionLayout: ({ layoutName: initialLayoutName, containerName, }: {
+    layoutName?: string;
+    containerName: string;
+}) => {
+    layout: HTMLElement[];
+    container: HTMLElement | undefined;
+    resizePanel: HTMLElement | undefined;
+};
+declare const useContainerSize: (containerName: string) => {
+    size: {
+        width: number;
+        height: number;
+    } | undefined;
+};
+declare const useDoubleClick: (containerName: string, opt: ContainerStateRequest) => {
+    isOpen: boolean | undefined;
+    isDoubleClick: boolean | undefined;
+    setIsDoubleClick: React.Dispatch<React.SetStateAction<boolean | undefined>>;
+};
+
+export { ContainerOpenCloseProvider, type SubjectMap, containerOpenCloseSubjectMap, containerSpreadSubjectMap, useContainerSize, useContainers, useDecompositionLayout, useDoubleClick, useLayoutName };

package/dist/providers.js

@@ -0,0 +1,6 @@
+import './chunk-3EDKZTM3.js';
+export { ContainerOpenCloseProvider, containerOpenCloseSubjectMap, containerSpreadSubjectMap, useContainerSize, useContainers, useDecompositionLayout, useDoubleClick, useLayoutName } from './chunk-JM3CZ5DU.js';
+import './chunk-W4CNFJTK.js';
+import './chunk-CFQQ6ZDC.js';
+//# sourceMappingURL=providers.js.map
+//# sourceMappingURL=providers.js.map

package/dist/providers.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"providers.js"}