@byeolnaerim/flex-layout 0.0.9 → 0.0.12

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

@@ -1,1236 +1 @@
-"use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import {
-  cloneElement,
-  useEffect,
-  useRef,
-  useState
-} from "react";
-import {
-  dropMovementEventSubject
-} from "../hooks/useDrag";
-import { useFlexLayoutSplitScreen } from "../hooks/useFlexLayoutSplitScreen";
-import {
-  getCurrentSplitScreenComponents,
-  getSplitScreen,
-  removeRootSplitScreen,
-  removeSplitScreenChild,
-  resetRootSplitScreen,
-  setSplitScreen
-} from "../store/FlexLayoutContainerStore";
-import styles from "../styles/FlexLayout.module.css";
-import FlexLayout from "./FlexLayout";
-import FlexLayoutContainer from "./FlexLayoutContainer";
-import FlexLayoutSplitScreenDragBox from "./FlexLayoutSplitScreenDragBox";
-import equal from "fast-deep-equal";
-import { distinctUntilChanged, take } from "rxjs";
-import FlexLayoutSplitScreenDragBoxContainer from "./FlexLayoutSplitScreenDragBoxContainer";
-import FlexLayoutSplitScreenDragBoxItem from "./FlexLayoutSplitScreenDragBoxItem";
-import FlexLayoutSplitScreenDragBoxTitleMore from "./FlexLayoutSplitScreenDragBoxTitleMore";
-import FlexLayoutSplitScreenScrollBox from "./FlexLayoutSplitScreenScrollBox";
-function isOverDrop({
-  x,
-  y,
-  element
-}) {
-  const {
-    x: elementX,
-    y: elementY,
-    right: elementRight,
-    bottom: elementBottom
-  } = element.getBoundingClientRect();
-  const isElementOver = x < elementX || x > elementRight || y < elementY || y > elementBottom;
-  return isElementOver;
-}
-function isInnerDrop({
-  x,
-  y,
-  element
-}) {
-  const {
-    x: elementX,
-    y: elementY,
-    right: elementRight,
-    bottom: elementBottom
-  } = element.getBoundingClientRect();
-  const isElementInner = x >= elementX && x <= elementRight && y >= elementY && y <= elementBottom;
-  return isElementInner;
-}
-const handleUpdateDropTargetComponents = ({
-  orderName,
-  parentOrderName,
-  containerName,
-  parentLayoutName,
-  layoutName,
-  dropComponent,
-  navigationTitle,
-  nextContainerName,
-  isUsePrefix = true,
-  beforeDropTargetComponent,
-  afterDropTargetComponent,
-  centerDropTargetComponent,
-  dropDocumentOutsideOption,
-  screenKey = Array.from(
-    window.crypto.getRandomValues(new Uint32Array(16)),
-    (e) => e.toString(32).padStart(2, "0")
-  ).join("")
-}) => {
-  const nextContainerNameOrderName = parentOrderName ? parentOrderName : orderName;
-  let listMap;
-  let list;
-  let key;
-  if (nextContainerNameOrderName === orderName || nextContainerNameOrderName === "center") {
-    listMap = orderName === "before" ? { beforeDropTargetComponent } : orderName === "after" ? { afterDropTargetComponent } : {
-      centerDropTargetComponent: centerDropTargetComponent.filter(
-        (e) => !e.containerName.split("_").at(0).startsWith(
-          containerName.split("_").at(0)
-        )
-      )
-    };
-  } else {
-    listMap = nextContainerNameOrderName === "before" ? { beforeDropTargetComponent } : { afterDropTargetComponent };
-  }
-  const entries = Object.entries(listMap)[0];
-  key = entries[0];
-  list = entries[1];
-  const newComponent = {
-    containerName: `${containerName + "_" + layoutName}${isUsePrefix ? "_" + orderName + "-" + list.length : ""}`,
-    component: cloneElement(
-      dropComponent,
-      { key: screenKey, screenKey }
-    ),
-    navigationTitle,
-    dropDocumentOutsideOption,
-    screenKey: screenKey || Array.from(
-      window.crypto.getRandomValues(new Uint32Array(16)),
-      (e) => e.toString(32).padStart(2, "0")
-    ).join("")
-  };
-  let allComponents;
-  if (nextContainerName) {
-    const index = list.findIndex(
-      (item) => item.containerName === nextContainerName
-    );
-    if (index !== -1) {
-      if (nextContainerNameOrderName === orderName) {
-        if (orderName === "before") {
-          allComponents = [
-            ...list.slice(0, index),
-            newComponent,
-            ...list.slice(index)
-          ];
-        } else {
-          allComponents = [
-            ...list.slice(0, index + 1),
-            newComponent,
-            ...list.slice(index + 1)
-          ];
-        }
-      } else {
-        if (nextContainerNameOrderName === "after" && orderName === "before") {
-          allComponents = [
-            ...list.slice(0, index),
-            newComponent,
-            ...list.slice(index)
-          ];
-        } else if (nextContainerNameOrderName === "before" && orderName === "after") {
-          allComponents = [
-            ...list.slice(0, index + 1),
-            newComponent,
-            ...list.slice(index + 1)
-          ];
-        } else {
-          if (orderName === "before") {
-            allComponents = [
-              ...list.slice(0, index),
-              newComponent,
-              ...list.slice(index)
-            ];
-          } else {
-            allComponents = [
-              ...list.slice(0, index + 1),
-              newComponent,
-              ...list.slice(index + 1)
-            ];
-          }
-        }
-      }
-    } else {
-      if (nextContainerNameOrderName === "center" && orderName === "after") {
-        allComponents = [newComponent, ...list];
-      } else if (nextContainerNameOrderName === "center" && orderName === "before") {
-        allComponents = [...list, newComponent];
-      } else {
-        allComponents = orderName === "before" ? [newComponent, ...list] : [...list, newComponent];
-      }
-    }
-  } else {
-    allComponents = orderName === "before" ? [newComponent, ...list] : [...list, newComponent];
-  }
-  const seen = /* @__PURE__ */ new Set();
-  const result = allComponents.filter((item) => {
-    if (seen.has(item.containerName)) {
-      return false;
-    }
-    seen.add(item.containerName);
-    return true;
-  });
-  dropMovementEventSubject.next({
-    state: "append",
-    targetParentLayoutName: parentLayoutName,
-    targetLayoutName: layoutName,
-    targetContainerName: containerName,
-    orderName
-  });
-  return { [key]: result };
-};
-const handleRemove = (list, targetContainerName, orderNameSetter) => {
-  const result = list.filter((e) => e.containerName !== targetContainerName);
-  if (result.length != list.length)
-    orderNameSetter(list.length - result.length);
-  return result;
-};
-function getAdjacentItem(items, currentIndex) {
-  if (currentIndex + 1 < items.length) {
-    return {
-      adjacentItem: items[currentIndex + 1],
-      adjacentIndex: currentIndex + 1
-    };
-  } else if (currentIndex - 1 >= 0) {
-    return {
-      adjacentItem: items[currentIndex - 1],
-      adjacentIndex: currentIndex - 1
-    };
-  }
-  return { adjacentItem: null, adjacentIndex: currentIndex };
-}
-const getSelfOrderName = (containerName) => {
-  const result = containerName.split("_").at(-1)?.split("-").at(0)?.split("=").at(0);
-  if (["before", "center", "after"].some((e) => e === result)) {
-    return result;
-  } else {
-    return;
-  }
-};
-function FlexLayoutSplitScreen({
-  children,
-  containerName,
-  layoutName,
-  navigationTitle,
-  dropDocumentOutsideOption,
-  screenKey
-}) {
-  const {
-    direction,
-    isSplit,
-    boundaryContainerSize,
-    afterDropTargetComponent,
-    beforeDropTargetComponent,
-    centerDropTargetComponent,
-    setAfterDropTargetComponent,
-    setBeforeDropTargetComponent,
-    setCenterDropTargetComponent,
-    layoutRef,
-    setIsSplit,
-    setDirection
-  } = useFlexLayoutSplitScreen({
-    isSplitInitial: false,
-    directionInitial: "row",
-    selfContainerName: containerName,
-    parentLayoutName: "",
-    layoutName
-  });
-  useEffect(() => {
-    resetRootSplitScreen(layoutName);
-    const subscribe = getSplitScreen(layoutName, layoutName).subscribe((layoutInfo) => {
-      if (layoutInfo) {
-        setBeforeDropTargetComponent([
-          ...layoutInfo.beforeDropTargetComponent
-        ]);
-        setAfterDropTargetComponent([
-          ...layoutInfo.afterDropTargetComponent
-        ]);
-        setCenterDropTargetComponent([
-          ...layoutInfo.centerDropTargetComponent
-        ]);
-        setDirection(layoutInfo.direction);
-        if (layoutInfo.beforeDropTargetComponent.length !== 0 || layoutInfo.afterDropTargetComponent.length !== 0) {
-          setIsSplit(true);
-        }
-      } else {
-        setSplitScreen(layoutName, layoutName, {
-          afterDropTargetComponent: [],
-          beforeDropTargetComponent: [],
-          centerDropTargetComponent: [
-            {
-              containerName,
-              component: children,
-              navigationTitle,
-              dropDocumentOutsideOption,
-              screenKey: screenKey ? screenKey : Array.from(
-                window.crypto.getRandomValues(
-                  new Uint32Array(16)
-                ),
-                (e) => e.toString(32).padStart(2, "0")
-              ).join("")
-            }
-          ],
-          direction
-        });
-      }
-    });
-    return () => {
-      subscribe.unsubscribe();
-      removeRootSplitScreen(layoutName);
-    };
-  }, [layoutName, screenKey, navigationTitle, children, direction]);
-  useEffect(() => {
-    const subscribe = dropMovementEventSubject.pipe(
-      distinctUntilChanged((prev, curr) => {
-        const filterChildren = (obj) => {
-          const {
-            children: children2,
-            component,
-            targetComponent,
-            x,
-            y,
-            ...rest
-          } = obj || {};
-          return rest;
-        };
-        return equal(filterChildren(prev), filterChildren(curr));
-      })
-    ).subscribe((event) => {
-      if (event.state === "remove") {
-        if (event.targetParentLayoutName === layoutName || event.targetParentLayoutName === "" && event.targetLayoutName === layoutName) {
-          requestAnimationFrame(() => {
-            let removeCallback = (removeOrderName) => {
-              if (event.nextContainerName && event.dropTargetComponentEvent && event.targetComponent) {
-                const targetComponentsMap = handleUpdateDropTargetComponents({
-                  orderName: removeOrderName,
-                  containerName: event.nextContainerName,
-                  parentLayoutName: "",
-                  layoutName,
-                  dropComponent: event.targetComponent,
-                  navigationTitle: event.dropTargetComponentEvent.navigationTitle,
-                  isUsePrefix: true,
-                  afterDropTargetComponent,
-                  beforeDropTargetComponent,
-                  centerDropTargetComponent,
-                  dropDocumentOutsideOption,
-                  screenKey: event.dropTargetComponentEvent.screenKey
-                });
-                setSplitScreen(layoutName, layoutName, {
-                  ...getCurrentSplitScreenComponents(
-                    layoutName,
-                    layoutName
-                  ) || {
-                    afterDropTargetComponent,
-                    beforeDropTargetComponent,
-                    centerDropTargetComponent,
-                    direction
-                  },
-                  ...targetComponentsMap
-                });
-                Promise.resolve().then(
-                  () => event.dropEndCallback && event.dropEndCallback({
-                    x: event.x,
-                    y: event.y,
-                    containerName
-                  })
-                );
-              }
-            };
-            const currentComponents = getCurrentSplitScreenComponents(
-              layoutName,
-              layoutName
-            );
-            const afterList = handleRemove(
-              currentComponents?.afterDropTargetComponent || afterDropTargetComponent,
-              event.targetContainerName,
-              () => removeCallback("after")
-            );
-            const beforList = handleRemove(
-              currentComponents?.beforeDropTargetComponent || beforeDropTargetComponent,
-              event.targetContainerName,
-              () => removeCallback("before")
-            );
-            const centerList = handleRemove(
-              currentComponents?.centerDropTargetComponent || centerDropTargetComponent,
-              event.targetContainerName,
-              () => removeCallback("center")
-            );
-            setSplitScreen(layoutName, layoutName, {
-              afterDropTargetComponent: afterList,
-              beforeDropTargetComponent: beforList,
-              centerDropTargetComponent: centerList,
-              direction
-            });
-          });
-        }
-      } else if (event.state === "append") {
-        const {
-          x,
-          y,
-          dropEndCallback,
-          dropTargetComponentEvent,
-          orderName,
-          parentOrderName,
-          targetLayoutName,
-          targetParentLayoutName,
-          targetContainerName,
-          targetComponent,
-          nextContainerName
-        } = event;
-        if (layoutRef.current && orderName && x && y && targetComponent && dropTargetComponentEvent && targetLayoutName === layoutName && isInnerDrop({ x, y, element: layoutRef.current })) {
-          const {
-            direction: dropDirection,
-            navigationTitle: navigationTitle2,
-            dropDocumentOutsideOption: dropDocumentOutsideOption2
-          } = dropTargetComponentEvent;
-          const isOrderNameNotCenter = orderName !== "center";
-          const isOrderNameCenterAndFirstScreen = orderName === "center" && centerDropTargetComponent.length <= 1;
-          if (isOrderNameNotCenter || isOrderNameCenterAndFirstScreen) {
-            setIsSplit(true);
-            if (isOrderNameNotCenter) {
-              setDirection(dropDirection);
-              const targetComponentsMap = handleUpdateDropTargetComponents({
-                orderName,
-                parentOrderName,
-                containerName: targetContainerName,
-                nextContainerName,
-                dropComponent: targetComponent,
-                parentLayoutName: "",
-                layoutName,
-                navigationTitle: navigationTitle2,
-                isUsePrefix: true,
-                afterDropTargetComponent,
-                beforeDropTargetComponent,
-                centerDropTargetComponent,
-                dropDocumentOutsideOption: dropDocumentOutsideOption2
-              });
-              setSplitScreen(layoutName, layoutName, {
-                ...{
-                  afterDropTargetComponent,
-                  beforeDropTargetComponent,
-                  centerDropTargetComponent,
-                  direction: dropDirection
-                },
-                ...targetComponentsMap,
-                ...{ direction: dropDirection }
-              });
-              Promise.resolve().then(
-                () => dropEndCallback && dropEndCallback({
-                  x: event.x,
-                  y: event.y,
-                  containerName
-                })
-              );
-            } else {
-              const childScreenInfo = getCurrentSplitScreenComponents(
-                layoutName,
-                `${layoutName}_center=${centerDropTargetComponent[0].screenKey}`
-              ) || {
-                afterDropTargetComponent: [],
-                beforeDropTargetComponent: [],
-                centerDropTargetComponent: [],
-                direction
-              };
-              setSplitScreen(
-                layoutName,
-                `${layoutName}_center=${centerDropTargetComponent[0].screenKey}`,
-                {
-                  ...childScreenInfo,
-                  ...{
-                    centerDropTargetComponent: [
-                      centerDropTargetComponent[0],
-                      {
-                        containerName: `${targetContainerName}_${layoutName}_${orderName}`,
-                        component: targetComponent,
-                        dropDocumentOutsideOption: dropDocumentOutsideOption2,
-                        screenKey: dropTargetComponentEvent.screenKey,
-                        navigationTitle: navigationTitle2
-                      }
-                    ]
-                  }
-                }
-              );
-            }
-          }
-        }
-      }
-    });
-    return () => {
-      subscribe.unsubscribe();
-    };
-  }, [
-    direction,
-    layoutName,
-    isSplit,
-    beforeDropTargetComponent,
-    afterDropTargetComponent,
-    centerDropTargetComponent
-  ]);
-  return /* @__PURE__ */ jsxs("div", { className: `${styles["flex-split-screen"]}`, ref: layoutRef, children: [
-    /* @__PURE__ */ jsxs(
-      FlexLayout,
-      {
-        direction,
-        layoutName,
-        "data-is_split": isSplit,
-        panelMovementMode: "bulldozer",
-        children: [
-          beforeDropTargetComponent.length != 0 ? /* @__PURE__ */ jsx(Fragment, { children: beforeDropTargetComponent.map(
-            ({
-              containerName: cName,
-              component,
-              navigationTitle: navigationTitle2,
-              dropDocumentOutsideOption: dropDocumentOutsideOption2,
-              screenKey: screenKey2
-            }, i) => /* @__PURE__ */ jsx(
-              FlexLayoutContainer,
-              {
-                containerName: cName,
-                isInitialResizable: true,
-                isResizePanel: true,
-                children: /* @__PURE__ */ jsx(
-                  FlexLayoutSplitScreenChild,
-                  {
-                    parentDirection: direction,
-                    layoutName: `${layoutName}_before`,
-                    parentLayoutName: layoutName,
-                    containerName: cName,
-                    depth: 1,
-                    rootRef: layoutRef,
-                    screenKey: screenKey2,
-                    initialCenterComponents: [
-                      {
-                        navigationTitle: navigationTitle2,
-                        component,
-                        containerName: cName,
-                        dropDocumentOutsideOption: dropDocumentOutsideOption2,
-                        screenKey: screenKey2
-                      }
-                    ],
-                    rootName: layoutName
-                  }
-                )
-              },
-              cName
-            )
-          ) }) : /* @__PURE__ */ jsx("div", {}),
-          centerDropTargetComponent.length === 0 ? /* @__PURE__ */ jsx("div", {}) : /* @__PURE__ */ jsx(
-            FlexLayoutContainer,
-            {
-              containerName: `${centerDropTargetComponent[0].containerName}`,
-              isInitialResizable: true,
-              isResizePanel: isSplit,
-              children: isSplit ? /* @__PURE__ */ jsx(
-                FlexLayoutSplitScreenChild,
-                {
-                  parentDirection: direction,
-                  layoutName: `${layoutName}_center`,
-                  parentLayoutName: layoutName,
-                  containerName: `${centerDropTargetComponent[0].containerName}`,
-                  depth: 0,
-                  rootRef: layoutRef,
-                  screenKey: centerDropTargetComponent[0].screenKey,
-                  initialCenterComponents: [
-                    {
-                      navigationTitle: centerDropTargetComponent[0].navigationTitle,
-                      component: centerDropTargetComponent[0].component,
-                      containerName: centerDropTargetComponent[0].containerName,
-                      dropDocumentOutsideOption: centerDropTargetComponent[0].dropDocumentOutsideOption,
-                      screenKey: centerDropTargetComponent[0].screenKey
-                    }
-                  ],
-                  rootName: layoutName
-                }
-              ) : /* @__PURE__ */ jsx(
-                FlexLayoutSplitScreenScrollBox,
-                {
-                  keyName: centerDropTargetComponent[0].containerName,
-                  isDefaultScrollStyle: true,
-                  children: centerDropTargetComponent[0].component
-                }
-              )
-            }
-          ),
-          afterDropTargetComponent.length != 0 ? /* @__PURE__ */ jsx(Fragment, { children: afterDropTargetComponent.map(
-            ({
-              containerName: cName,
-              component,
-              navigationTitle: navigationTitle2,
-              dropDocumentOutsideOption: dropDocumentOutsideOption2,
-              screenKey: screenKey2
-            }, i) => /* @__PURE__ */ jsx(
-              FlexLayoutContainer,
-              {
-                containerName: cName,
-                isInitialResizable: true,
-                isResizePanel: afterDropTargetComponent.length - 1 !== i,
-                children: /* @__PURE__ */ jsx(
-                  FlexLayoutSplitScreenChild,
-                  {
-                    parentDirection: direction,
-                    layoutName: `${layoutName}_after`,
-                    parentLayoutName: layoutName,
-                    containerName: cName,
-                    depth: 1,
-                    rootRef: layoutRef,
-                    screenKey: screenKey2,
-                    initialCenterComponents: [
-                      {
-                        navigationTitle: navigationTitle2,
-                        component,
-                        containerName: cName,
-                        dropDocumentOutsideOption: dropDocumentOutsideOption2,
-                        screenKey: screenKey2
-                      }
-                    ],
-                    rootName: layoutName
-                  }
-                )
-              },
-              cName
-            )
-          ) }) : /* @__PURE__ */ jsx("div", {})
-        ]
-      }
-    ),
-    boundaryContainerSize && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: `${styles["flex-split-screen-boundary-container"]}`,
-        style: { ...boundaryContainerSize },
-        children: "\u2B07\uFE0F\uB4DC\uB86D\uD558\uBA74 \uD654\uBA74\uC774 \uBD84\uD560\uB429\uB2C8\uB2E4."
-      }
-    )
-  ] });
-}
-function FlexLayoutSplitScreenChild({
-  containerName,
-  layoutName,
-  parentLayoutName,
-  parentDirection,
-  depth,
-  //isSplit: isSplitInitial,
-  rootRef,
-  rootName,
-  initialCenterComponents,
-  screenKey
-}) {
-  const {
-    direction,
-    isSplit,
-    boundaryContainerSize,
-    afterDropTargetComponent,
-    beforeDropTargetComponent,
-    centerDropTargetComponent,
-    setAfterDropTargetComponent,
-    setBeforeDropTargetComponent,
-    setCenterDropTargetComponent,
-    layoutRef,
-    setIsSplit,
-    setDirection
-  } = useFlexLayoutSplitScreen({
-    isSplitInitial: false,
-    directionInitial: "row",
-    parentDirection,
-    selfContainerName: containerName,
-    parentLayoutName,
-    layoutName
-  });
-  const [isEmptyContent, setIsEmptyContent] = useState(false);
-  const [activeIndex, setActiveIndex] = useState(0);
-  const centerDropTargetComponentRef = useRef(centerDropTargetComponent);
-  const initialCenterRef = useRef(
-    initialCenterComponents ?? []
-  );
-  const activeIndexRef = useRef(activeIndex);
-  useEffect(() => {
-    const storeKey = `${layoutName}=${screenKey}`;
-    const subscribe = getSplitScreen(rootName, storeKey).pipe(take(1)).subscribe((layoutInfo) => {
-      if (layoutInfo) return;
-      setSplitScreen(rootName, storeKey, {
-        afterDropTargetComponent: [],
-        beforeDropTargetComponent: [],
-        centerDropTargetComponent: initialCenterRef.current,
-        direction
-      });
-    });
-    return () => {
-      removeSplitScreenChild(rootName, `${layoutName}=${screenKey}`);
-      subscribe.unsubscribe();
-    };
-  }, [rootName, layoutName, screenKey]);
-  useEffect(() => {
-    const subscribe = getSplitScreen(rootName, `${layoutName}=${screenKey}`).subscribe((layoutInfo) => {
-      if (layoutInfo) {
-        setBeforeDropTargetComponent([
-          ...layoutInfo.beforeDropTargetComponent
-        ]);
-        setAfterDropTargetComponent([
-          ...layoutInfo.afterDropTargetComponent
-        ]);
-        setCenterDropTargetComponent([
-          ...layoutInfo.centerDropTargetComponent
-        ]);
-        setDirection(layoutInfo.direction);
-        if (layoutInfo.beforeDropTargetComponent.length !== 0 || layoutInfo.afterDropTargetComponent.length !== 0) {
-          setIsSplit(true);
-        } else if (layoutInfo.beforeDropTargetComponent.length === 0 && layoutInfo.centerDropTargetComponent.length === 0 && layoutInfo.afterDropTargetComponent.length === 0) {
-          dropMovementEventSubject.next({
-            state: "remove",
-            targetContainerName: containerName,
-            targetParentLayoutName: "",
-            targetLayoutName: parentLayoutName
-          });
-          setIsEmptyContent(true);
-        }
-      }
-    });
-    return () => {
-      subscribe.unsubscribe();
-      removeRootSplitScreen(layoutName);
-    };
-  }, [rootName, layoutName]);
-  useEffect(() => {
-    const subscribe = dropMovementEventSubject.pipe(
-      distinctUntilChanged((prev, curr) => {
-        const filterChildren = (obj) => {
-          const {
-            children,
-            component,
-            targetComponent,
-            x,
-            y,
-            ...rest
-          } = obj || {};
-          return rest;
-        };
-        return equal(filterChildren(prev), filterChildren(curr));
-      })
-    ).subscribe((event) => {
-      if (event.state === "remove") {
-        if (event.targetParentLayoutName === layoutName || event.targetParentLayoutName === "" && event.targetLayoutName === layoutName) {
-          requestAnimationFrame(() => {
-            let removeCallback = (removeOrderName) => {
-              if (event.nextContainerName && event.dropTargetComponentEvent && event.targetComponent) {
-                const targetComponentsMap = handleUpdateDropTargetComponents({
-                  orderName: removeOrderName,
-                  containerName: event.nextContainerName,
-                  parentLayoutName,
-                  layoutName,
-                  dropComponent: event.targetComponent,
-                  navigationTitle: event.dropTargetComponentEvent.navigationTitle,
-                  isUsePrefix: true,
-                  afterDropTargetComponent,
-                  beforeDropTargetComponent,
-                  centerDropTargetComponent,
-                  dropDocumentOutsideOption: event.dropTargetComponentEvent?.dropDocumentOutsideOption,
-                  screenKey: event.dropTargetComponentEvent.screenKey
-                });
-                setSplitScreen(
-                  rootName,
-                  `${layoutName}=${screenKey}`,
-                  {
-                    ...getCurrentSplitScreenComponents(
-                      rootName,
-                      `${layoutName}=${screenKey}`
-                    ) || {
-                      afterDropTargetComponent,
-                      beforeDropTargetComponent,
-                      centerDropTargetComponent,
-                      direction
-                    },
-                    ...targetComponentsMap
-                  }
-                );
-                Promise.resolve().then(
-                  () => event.dropEndCallback && event.dropEndCallback({
-                    x: event.x,
-                    y: event.y,
-                    containerName
-                  })
-                );
-              }
-            };
-            const currentComponents = getCurrentSplitScreenComponents(
-              rootName,
-              `${layoutName}=${screenKey}`
-            );
-            const afterList = handleRemove(
-              currentComponents?.afterDropTargetComponent || afterDropTargetComponent,
-              event.targetContainerName,
-              () => removeCallback("after")
-            );
-            const beforList = handleRemove(
-              currentComponents?.beforeDropTargetComponent || beforeDropTargetComponent,
-              event.targetContainerName,
-              () => removeCallback("before")
-            );
-            const centerList = handleRemove(
-              currentComponents?.centerDropTargetComponent || centerDropTargetComponent,
-              event.targetContainerName,
-              () => removeCallback("center")
-            );
-            setSplitScreen(
-              rootName,
-              `${layoutName}=${screenKey}`,
-              {
-                afterDropTargetComponent: afterList,
-                beforeDropTargetComponent: beforList,
-                centerDropTargetComponent: centerList,
-                direction
-              }
-            );
-          });
-        }
-      } else if (event.state === "append") {
-        const {
-          x,
-          y,
-          dropEndCallback,
-          dropTargetComponentEvent,
-          orderName,
-          targetLayoutName,
-          targetParentLayoutName,
-          targetContainerName,
-          targetComponent,
-          nextContainerName,
-          parentOrderName
-        } = event;
-        if (layoutRef.current && orderName && x && y && dropTargetComponentEvent && isInnerDrop({ x, y, element: layoutRef.current })) {
-          const {
-            direction: dropDirection,
-            navigationTitle,
-            dropDocumentOutsideOption,
-            screenKey: containerScreenKey
-          } = dropTargetComponentEvent;
-          if (
-            //orderName !== 'center' &&
-            targetLayoutName === layoutName && targetComponent
-          ) {
-            if (dropDirection === parentDirection && orderName !== "center") {
-              dropMovementEventSubject.next({
-                state: "append",
-                targetContainerName,
-                targetParentLayoutName: "",
-                targetLayoutName: parentLayoutName,
-                targetComponent,
-                nextContainerName: containerName,
-                parentOrderName: getSelfOrderName(layoutName) || orderName,
-                orderName,
-                x,
-                y,
-                dropEndCallback,
-                dropTargetComponentEvent: {
-                  navigationTitle,
-                  dropDocumentOutsideOption,
-                  direction: parentDirection,
-                  screenKey
-                }
-              });
-            } else {
-              if (orderName !== "center") {
-                setDirection(dropDirection);
-                setIsSplit(true);
-              }
-              const targetComponentsMap = handleUpdateDropTargetComponents({
-                orderName,
-                parentOrderName,
-                containerName: targetContainerName,
-                nextContainerName,
-                parentLayoutName,
-                layoutName,
-                dropComponent: targetComponent,
-                navigationTitle,
-                isUsePrefix: orderName !== "center",
-                afterDropTargetComponent,
-                beforeDropTargetComponent,
-                centerDropTargetComponent,
-                dropDocumentOutsideOption
-              });
-              setSplitScreen(
-                rootName,
-                `${layoutName}=${screenKey}`,
-                {
-                  ...getCurrentSplitScreenComponents(
-                    rootName,
-                    `${layoutName}=${screenKey}`
-                  ) || {
-                    afterDropTargetComponent,
-                    beforeDropTargetComponent,
-                    centerDropTargetComponent,
-                    direction
-                  },
-                  ...targetComponentsMap,
-                  ...{ direction: dropDirection }
-                }
-              );
-              Promise.resolve().then(
-                () => event.dropEndCallback && event.dropEndCallback({
-                  x: event.x,
-                  y: event.y,
-                  containerName
-                })
-              );
-            }
-          }
-        }
-      }
-    });
-    return () => {
-      subscribe.unsubscribe();
-    };
-  }, [
-    direction,
-    parentDirection,
-    parentLayoutName,
-    layoutName,
-    beforeDropTargetComponent,
-    afterDropTargetComponent,
-    centerDropTargetComponent
-  ]);
-  useEffect(() => {
-    centerDropTargetComponentRef.current = centerDropTargetComponent;
-  }, [centerDropTargetComponent]);
-  useEffect(() => {
-    activeIndexRef.current = activeIndex;
-  }, [activeIndex]);
-  const [isOnlyOneScreen, setIsOnlyOneScreen] = useState(false);
-  return /* @__PURE__ */ jsx(Fragment, { children: !isEmptyContent && /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: `${styles["flex-split-screen"]}`,
-      ref: layoutRef,
-      children: [
-        /* @__PURE__ */ jsxs(
-          FlexLayout,
-          {
-            direction,
-            layoutName: `${layoutName}`,
-            panelMovementMode: "bulldozer",
-            children: [
-              beforeDropTargetComponent.length != 0 ? /* @__PURE__ */ jsx(Fragment, { children: beforeDropTargetComponent.map(
-                ({
-                  containerName: cName,
-                  component,
-                  navigationTitle,
-                  dropDocumentOutsideOption,
-                  screenKey: screenKey2
-                }, i) => /* @__PURE__ */ jsx(
-                  FlexLayoutContainer,
-                  {
-                    containerName: cName,
-                    isInitialResizable: true,
-                    isResizePanel: true,
-                    children: /* @__PURE__ */ jsx(
-                      FlexLayoutSplitScreenChild,
-                      {
-                        parentDirection: direction,
-                        layoutName: `${layoutName}_before-${depth}`,
-                        parentLayoutName: layoutName,
-                        containerName: cName,
-                        depth: depth + 1,
-                        rootRef,
-                        screenKey: screenKey2,
-                        initialCenterComponents: [
-                          {
-                            navigationTitle,
-                            component,
-                            containerName: cName,
-                            dropDocumentOutsideOption,
-                            screenKey: screenKey2
-                          }
-                        ],
-                        rootName
-                      }
-                    )
-                  },
-                  cName
-                )
-              ) }) : /* @__PURE__ */ jsx("div", {}),
-              centerDropTargetComponent.length != 0 ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-                FlexLayoutContainer,
-                {
-                  containerName: `${(centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName}`,
-                  isInitialResizable: true,
-                  isResizePanel: isSplit,
-                  children: isSplit ? /* @__PURE__ */ jsx("div", { "data-key": screenKey, children: /* @__PURE__ */ jsx(
-                    FlexLayoutSplitScreenChild,
-                    {
-                      parentDirection: direction,
-                      layoutName: `${layoutName}_center-${depth}`,
-                      parentLayoutName: layoutName,
-                      containerName: `${(centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName}`,
-                      depth: depth + 1,
-                      rootRef,
-                      initialCenterComponents: centerDropTargetComponent.map(
-                        ({
-                          navigationTitle,
-                          component,
-                          containerName: cName,
-                          dropDocumentOutsideOption,
-                          screenKey: centerScreenKey
-                        }) => ({
-                          navigationTitle,
-                          component,
-                          containerName: cName,
-                          dropDocumentOutsideOption,
-                          screenKey: centerScreenKey
-                        })
-                      ),
-                      screenKey,
-                      rootName
-                    }
-                  ) }) : /* @__PURE__ */ jsxs(
-                    FlexLayoutSplitScreenScrollBox,
-                    {
-                      keyName: (centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName,
-                      isDefaultScrollStyle: true,
-                      children: [
-                        !isOnlyOneScreen && /* @__PURE__ */ jsx(
-                          "div",
-                          {
-                            className: `${styles["flex-split-screen-drag-box-title-wrapper-sticky"]}`,
-                            children: /* @__PURE__ */ jsxs(
-                              "div",
-                              {
-                                "data-is_split": isSplit,
-                                "data-layout_name": layoutName,
-                                "data-parent_layout_name": parentLayoutName,
-                                "data-container_name": `${(centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName}`,
-                                className: `${styles["flex-split-screen-drag-box-title-wrapper"]}`,
-                                children: [
-                                  /* @__PURE__ */ jsx(
-                                    FlexLayoutSplitScreenDragBoxContainer,
-                                    {
-                                      "data-layout_name": layoutName,
-                                      layoutName,
-                                      children: centerDropTargetComponent.map(
-                                        (item, index) => /* @__PURE__ */ jsx(
-                                          FlexLayoutSplitScreenDragBoxItem,
-                                          {
-                                            onClose: (ev) => {
-                                              if (activeIndexRef.current === index && centerDropTargetComponent.length === 1) {
-                                                dropMovementEventSubject.next(
-                                                  {
-                                                    state: "remove",
-                                                    targetContainerName: containerName,
-                                                    targetParentLayoutName: parentLayoutName,
-                                                    targetLayoutName: layoutName
-                                                  }
-                                                );
-                                              } else {
-                                                if (centerDropTargetComponent.length === activeIndexRef.current + 1) {
-                                                  setActiveIndex(
-                                                    activeIndexRef.current - 1
-                                                  );
-                                                }
-                                                setCenterDropTargetComponent(
-                                                  (prev) => {
-                                                    const next = handleRemove(
-                                                      prev,
-                                                      item.containerName,
-                                                      () => {
-                                                      }
-                                                    );
-                                                    const key = `${layoutName}=${screenKey}`;
-                                                    const current = getCurrentSplitScreenComponents(
-                                                      rootName,
-                                                      key
-                                                    ) || {
-                                                      afterDropTargetComponent,
-                                                      beforeDropTargetComponent,
-                                                      centerDropTargetComponent: prev,
-                                                      direction
-                                                    };
-                                                    setSplitScreen(
-                                                      rootName,
-                                                      key,
-                                                      {
-                                                        ...current,
-                                                        centerDropTargetComponent: next
-                                                      }
-                                                    );
-                                                    return next;
-                                                  }
-                                                );
-                                              }
-                                            },
-                                            isActive: activeIndex === index,
-                                            children: /* @__PURE__ */ jsx(
-                                              FlexLayoutSplitScreenDragBox,
-                                              {
-                                                screenKey: item.screenKey,
-                                                onClick: () => {
-                                                  setActiveIndex(
-                                                    index
-                                                  );
-                                                },
-                                                containerName: item.containerName,
-                                                dropDocumentOutsideOption: item.dropDocumentOutsideOption,
-                                                targetComponent: item.component,
-                                                navigationTitle: item.navigationTitle,
-                                                "data-container-name": item.containerName,
-                                                "data-layout-name": layoutName,
-                                                "data-parent-layout-name": parentLayoutName,
-                                                dropEndCallback: ({
-                                                  x,
-                                                  y,
-                                                  containerName: appendContainerName
-                                                }) => {
-                                                  if (!rootRef.current || !layoutRef.current)
-                                                    return;
-                                                  const isRootOver = isOverDrop(
-                                                    {
-                                                      x,
-                                                      y,
-                                                      element: rootRef.current
-                                                    }
-                                                  );
-                                                  const isLayoutInner = isInnerDrop(
-                                                    {
-                                                      x,
-                                                      y,
-                                                      element: layoutRef.current
-                                                    }
-                                                  );
-                                                  if (!isRootOver && !isLayoutInner || !isRootOver && isLayoutInner && centerDropTargetComponentRef.current.length > 1) {
-                                                    const option = {};
-                                                    if (centerDropTargetComponentRef.current.length > 1) {
-                                                      const {
-                                                        adjacentItem,
-                                                        adjacentIndex
-                                                      } = getAdjacentItem(
-                                                        centerDropTargetComponentRef.current,
-                                                        activeIndexRef.current
-                                                      );
-                                                      if (adjacentItem && activeIndexRef.current === index) {
-                                                        Object.assign(
-                                                          option,
-                                                          {
-                                                            x,
-                                                            y,
-                                                            targetComponent: adjacentItem.component,
-                                                            nextContainerName: adjacentItem.containerName,
-                                                            orderName: "center",
-                                                            dropTargetComponentEvent: {
-                                                              navigationTitle: adjacentItem.navigationTitle,
-                                                              dropDocumentOutsideOption: adjacentItem.dropDocumentOutsideOption,
-                                                              direction,
-                                                              screenKey
-                                                            }
-                                                          }
-                                                        );
-                                                      }
-                                                    }
-                                                    if (index === 0) {
-                                                      dropMovementEventSubject.next(
-                                                        {
-                                                          state: "remove",
-                                                          targetContainerName: item.containerName,
-                                                          targetParentLayoutName: parentLayoutName,
-                                                          targetLayoutName: layoutName,
-                                                          ...option
-                                                        }
-                                                      );
-                                                    } else {
-                                                      dropMovementEventSubject.next(
-                                                        {
-                                                          state: "remove",
-                                                          targetContainerName: item.containerName,
-                                                          targetParentLayoutName: "",
-                                                          targetLayoutName: layoutName,
-                                                          ...option
-                                                        }
-                                                      );
-                                                    }
-                                                  }
-                                                },
-                                                children: item.navigationTitle
-                                              }
-                                            )
-                                          },
-                                          item.navigationTitle + layoutName + item.containerName
-                                        )
-                                      )
-                                    },
-                                    layoutName
-                                  ),
-                                  /* @__PURE__ */ jsx(FlexLayoutSplitScreenDragBoxTitleMore, {})
-                                ]
-                              }
-                            )
-                          }
-                        ),
-                        (() => {
-                          const target = centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0];
-                          return target.component;
-                        })()
-                      ]
-                    }
-                  )
-                },
-                (centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName
-              ) }) : /* @__PURE__ */ jsx("div", {}),
-              afterDropTargetComponent.length != 0 ? /* @__PURE__ */ jsx(Fragment, { children: afterDropTargetComponent.map(
-                ({
-                  containerName: cName,
-                  component,
-                  navigationTitle,
-                  dropDocumentOutsideOption,
-                  screenKey: screenKey2
-                }, i) => /* @__PURE__ */ jsx(
-                  FlexLayoutContainer,
-                  {
-                    containerName: cName,
-                    isInitialResizable: true,
-                    isResizePanel: i !== afterDropTargetComponent.length - 1,
-                    children: /* @__PURE__ */ jsx(
-                      FlexLayoutSplitScreenChild,
-                      {
-                        parentDirection: direction,
-                        layoutName: `${layoutName}_after-${depth}`,
-                        parentLayoutName: layoutName,
-                        containerName: cName,
-                        depth: depth + 1,
-                        rootRef,
-                        screenKey: screenKey2,
-                        initialCenterComponents: [
-                          {
-                            navigationTitle,
-                            component,
-                            containerName: cName,
-                            dropDocumentOutsideOption,
-                            screenKey: screenKey2
-                          }
-                        ],
-                        rootName
-                      }
-                    )
-                  },
-                  cName
-                )
-              ) }) : /* @__PURE__ */ jsx("div", {})
-            ]
-          }
-        ),
-        boundaryContainerSize && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `${styles["flex-split-screen-boundary-container"]}`,
-            style: { ...boundaryContainerSize },
-            children: "\u2B07\uFE0F\uB4DC\uB86D\uD558\uBA74 \uD654\uBA74\uC774 \uBD84\uD560\uB429\uB2C8\uB2E4."
-          }
-        )
-      ]
-    }
-  ) });
-}
-export {
-  FlexLayoutSplitScreen as default
-};
-//# sourceMappingURL=FlexLayoutSplitScreen.js.map
+"use client";import{Fragment as G,jsx as c,jsxs as J}from"react/jsx-runtime";import{cloneElement as ue,useEffect as j,useRef as ee,useState as re}from"react";import{dropMovementEventSubject as w}from"../hooks/useDrag";import{useFlexLayoutSplitScreen as ce}from"../hooks/useFlexLayoutSplitScreen";import{getCurrentSplitScreenComponents as B,getSplitScreen as oe,removeRootSplitScreen as me,removeSplitScreenChild as De,resetRootSplitScreen as be,setSplitScreen as k}from"../store/FlexLayoutContainerStore";import Y from"../styles/FlexLayout.module.css";import le from"./FlexLayout";import V from"./FlexLayoutContainer";import Te from"./FlexLayoutSplitScreenDragBox";import ge from"fast-deep-equal/react";import{distinctUntilChanged as Ce,take as Se}from"rxjs";import xe from"./FlexLayoutSplitScreenDragBoxContainer";import Le from"./FlexLayoutSplitScreenDragBoxItem";import he from"./FlexLayoutSplitScreenDragBoxTitleMore";import de from"./FlexLayoutSplitScreenScrollBox";function $e({x:r,y:n,element:e}){const{x:T,y:u,right:y,bottom:l}=e.getBoundingClientRect();return r<T||r>y||n<u||n>l}function ie({x:r,y:n,element:e}){const{x:T,y:u,right:y,bottom:l}=e.getBoundingClientRect();return r>=T&&r<=y&&n>=u&&n<=l}const ae=()=>typeof window<"u"&&window.crypto?Array.from(window.crypto.getRandomValues(new Uint32Array(16)),r=>r.toString(32).padStart(2,"0")).join(""):Math.random().toString(36).substring(2,15)+Math.random().toString(36).substring(2,15),te=({orderName:r,parentOrderName:n,containerName:e,parentLayoutName:T,layoutName:u,dropComponent:y,navigationTitle:l,nextContainerName:M,isUsePrefix:g=!0,beforeDropTargetComponent:x,afterDropTargetComponent:K,centerDropTargetComponent:E,dropDocumentOutsideOption:D,screenKey:C=ae()})=>{const p=n||r;let I,d,F;p===r||p==="center"?I=r==="before"?{beforeDropTargetComponent:x}:r==="after"?{afterDropTargetComponent:K}:{centerDropTargetComponent:E.filter(a=>!a.containerName.split("_").at(0).startsWith(e.split("_").at(0)))}:I=p==="before"?{beforeDropTargetComponent:x}:{afterDropTargetComponent:K};const N=Object.entries(I)[0];F=N[0],d=N[1];const O={containerName:`${e+"_"+u}${g?"_"+r+"-"+d.length:""}`,component:ue(y,{key:C,screenKey:C}),navigationTitle:l,dropDocumentOutsideOption:D,screenKey:C||ae()};let R;if(M){const a=d.findIndex(X=>X.containerName===M);a!==-1?p===r?r==="before"?R=[...d.slice(0,a),O,...d.slice(a)]:R=[...d.slice(0,a+1),O,...d.slice(a+1)]:p==="after"&&r==="before"?R=[...d.slice(0,a),O,...d.slice(a)]:p==="before"&&r==="after"?R=[...d.slice(0,a+1),O,...d.slice(a+1)]:r==="before"?R=[...d.slice(0,a),O,...d.slice(a)]:R=[...d.slice(0,a+1),O,...d.slice(a+1)]:p==="center"&&r==="after"?R=[O,...d]:p==="center"&&r==="before"?R=[...d,O]:R=r==="before"?[O,...d]:[...d,O]}else R=r==="before"?[O,...d]:[...d,O];const A=new Set,Q=R.filter(a=>A.has(a.containerName)?!1:(A.add(a.containerName),!0));return w.next({state:"append",targetParentLayoutName:T,targetLayoutName:u,targetContainerName:e,orderName:r}),{[F]:Q}},H=(r,n,e)=>{const T=r.filter(u=>u.containerName!==n);return T.length!=r.length&&e(r.length-T.length),T};function Oe(r,n){return n+1<r.length?{adjacentItem:r[n+1],adjacentIndex:n+1}:n-1>=0?{adjacentItem:r[n-1],adjacentIndex:n-1}:{adjacentItem:null,adjacentIndex:n}}const ye=r=>{const n=r.split("_").at(-1)?.split("-").at(0)?.split("=").at(0);if(["before","center","after"].some(e=>e===n))return n};function Re({children:r,containerName:n,layoutName:e,navigationTitle:T,dropDocumentOutsideOption:u,screenKey:y,isResetOnChildrenChange:l=!0,isRemoveStoreOnUnmount:M=!0}){const{direction:g,isSplit:x,boundaryContainerSize:K,afterDropTargetComponent:E,beforeDropTargetComponent:D,centerDropTargetComponent:C,setAfterDropTargetComponent:p,setBeforeDropTargetComponent:I,setCenterDropTargetComponent:d,layoutRef:F,setIsSplit:N,setDirection:O}=ce({isSplitInitial:!1,directionInitial:"row",selfContainerName:n,parentLayoutName:"",layoutName:e}),R=ee(y??ae()),A=y??R.current;j(()=>{l&&be(e);const f=oe(e,e).subscribe(o=>{if(o){I([...o.beforeDropTargetComponent]),p([...o.afterDropTargetComponent]),d([...o.centerDropTargetComponent]),O(o.direction),(o.beforeDropTargetComponent.length!==0||o.afterDropTargetComponent.length!==0)&&N(!0);return}k(e,e,{afterDropTargetComponent:[],beforeDropTargetComponent:[],centerDropTargetComponent:[{containerName:n,component:r,navigationTitle:T,dropDocumentOutsideOption:u,screenKey:A}],direction:g})});return()=>{f.unsubscribe(),M&&me(e)}},[e,l]),j(()=>{if(l)return;const f=B(e,e);if(!f||f.centerDropTargetComponent.length===0)return;const o=f.centerDropTargetComponent[0],b=y??o.screenKey;if(o.screenKey!==b)return;const S={...o,component:r,navigationTitle:T,dropDocumentOutsideOption:u};if(o.component===S.component&&o.navigationTitle===S.navigationTitle&&o.dropDocumentOutsideOption===S.dropDocumentOutsideOption)return;k(e,e,{...f,centerDropTargetComponent:[S]});const v=o.screenKey,i=`${e}_center=${v}`,t=B(e,i);if(t?.centerDropTargetComponent?.length){const m=t.centerDropTargetComponent.findIndex(s=>s.screenKey===v);if(m!==-1){const s=[...t.centerDropTargetComponent];s[m]={...s[m],component:r,navigationTitle:T,dropDocumentOutsideOption:u},k(e,i,{...t,centerDropTargetComponent:s})}}},[l,e,r,T,u,y]),j(()=>{const f=w.pipe(Ce((o,b)=>{const S=v=>{const{children:i,component:t,targetComponent:m,x:s,y:L,...h}=v||{};return h};return ge(S(o),S(b))})).subscribe(o=>{if(o.state==="remove")(o.targetParentLayoutName===e||o.targetParentLayoutName===""&&o.targetLayoutName===e)&&requestAnimationFrame(()=>{let b=m=>{if(o.nextContainerName&&o.dropTargetComponentEvent&&o.targetComponent){const s=te({orderName:m,containerName:o.nextContainerName,parentLayoutName:"",layoutName:e,dropComponent:o.targetComponent,navigationTitle:o.dropTargetComponentEvent.navigationTitle,isUsePrefix:!0,afterDropTargetComponent:E,beforeDropTargetComponent:D,centerDropTargetComponent:C,dropDocumentOutsideOption:u,screenKey:o.dropTargetComponentEvent.screenKey});k(e,e,{...B(e,e)||{afterDropTargetComponent:E,beforeDropTargetComponent:D,centerDropTargetComponent:C,direction:g},...s}),Promise.resolve().then(()=>o.dropEndCallback&&o.dropEndCallback({x:o.x,y:o.y,containerName:n}))}};const S=B(e,e),v=H(S?.afterDropTargetComponent||E,o.targetContainerName,()=>b("after")),i=H(S?.beforeDropTargetComponent||D,o.targetContainerName,()=>b("before")),t=H(S?.centerDropTargetComponent||C,o.targetContainerName,()=>b("center"));k(e,e,{afterDropTargetComponent:v,beforeDropTargetComponent:i,centerDropTargetComponent:t,direction:g})});else if(o.state==="append"){const{x:b,y:S,dropEndCallback:v,dropTargetComponentEvent:i,orderName:t,parentOrderName:m,targetLayoutName:s,targetParentLayoutName:L,targetContainerName:h,targetComponent:$,nextContainerName:_}=o;if(F.current&&t&&b&&S&&$&&i&&s===e&&ie({x:b,y:S,element:F.current})){const{direction:P,navigationTitle:U,dropDocumentOutsideOption:z}=i,Z=t!=="center",ne=t==="center"&&C.length<=1;if(Z||ne)if(N(!0),Z){O(P);const q=te({orderName:t,parentOrderName:m,containerName:h,nextContainerName:_,dropComponent:$,parentLayoutName:"",layoutName:e,navigationTitle:U,isUsePrefix:!0,afterDropTargetComponent:E,beforeDropTargetComponent:D,centerDropTargetComponent:C,dropDocumentOutsideOption:z});k(e,e,{afterDropTargetComponent:E,beforeDropTargetComponent:D,centerDropTargetComponent:C,direction:P,...q,direction:P}),Promise.resolve().then(()=>v&&v({x:o.x,y:o.y,containerName:n}))}else{const q=B(e,`${e}_center=${C[0].screenKey}`)||{afterDropTargetComponent:[],beforeDropTargetComponent:[],centerDropTargetComponent:[],direction:g};k(e,`${e}_center=${C[0].screenKey}`,{...q,centerDropTargetComponent:[C[0],{containerName:`${h}_${e}_${t}`,component:$,dropDocumentOutsideOption:z,screenKey:i.screenKey,navigationTitle:U}]})}}}});return()=>{f.unsubscribe()}},[g,e,x,D,E,C]);const Q={containerName:n,component:r,navigationTitle:T,dropDocumentOutsideOption:u,screenKey:A},a=C[0]??Q,X=C.length>0;return J("div",{className:`${Y["flex-split-screen"]}`,ref:F,children:[J(le,{direction:g,layoutName:e,"data-is_split":x,panelMovementMode:"bulldozer",children:[D.length!=0?c(G,{children:D.map(({containerName:f,component:o,navigationTitle:b,dropDocumentOutsideOption:S,screenKey:v},i)=>c(V,{containerName:f,isInitialResizable:!0,isResizePanel:!0,children:c(W,{parentDirection:g,layoutName:`${e}_before`,parentLayoutName:e,containerName:f,depth:1,rootRef:F,screenKey:v,initialCenterComponents:[{navigationTitle:b,component:o,containerName:f,dropDocumentOutsideOption:S,screenKey:v}],rootName:e})},f))}):c("div",{}),c(V,{containerName:`${a.containerName}`,isInitialResizable:!0,isResizePanel:x,children:X&&x?c(W,{parentDirection:g,layoutName:`${e}_center`,parentLayoutName:e,containerName:a.containerName,depth:0,rootRef:F,screenKey:a.screenKey,initialCenterComponents:[{navigationTitle:a.navigationTitle,component:a.component,containerName:a.containerName,dropDocumentOutsideOption:a.dropDocumentOutsideOption,screenKey:a.screenKey}],rootName:e}):c(de,{keyName:a.containerName,isDefaultScrollStyle:!0,children:a.component})}),E.length!=0?c(G,{children:E.map(({containerName:f,component:o,navigationTitle:b,dropDocumentOutsideOption:S,screenKey:v},i)=>c(V,{containerName:f,isInitialResizable:!0,isResizePanel:E.length-1!==i,children:c(W,{parentDirection:g,layoutName:`${e}_after`,parentLayoutName:e,containerName:f,depth:1,rootRef:F,screenKey:v,initialCenterComponents:[{navigationTitle:b,component:o,containerName:f,dropDocumentOutsideOption:S,screenKey:v}],rootName:e})},f))}):c("div",{})]}),K&&c("div",{className:`${Y["flex-split-screen-boundary-container"]}`,style:{...K},children:"\u2B07\uFE0F\uB4DC\uB86D\uD558\uBA74 \uD654\uBA74\uC774 \uBD84\uD560\uB429\uB2C8\uB2E4."})]})}function W({containerName:r,layoutName:n,parentLayoutName:e,parentDirection:T,depth:u,rootRef:y,rootName:l,initialCenterComponents:M,screenKey:g}){const{direction:x,isSplit:K,boundaryContainerSize:E,afterDropTargetComponent:D,beforeDropTargetComponent:C,centerDropTargetComponent:p,setAfterDropTargetComponent:I,setBeforeDropTargetComponent:d,setCenterDropTargetComponent:F,layoutRef:N,setIsSplit:O,setDirection:R}=ce({isSplitInitial:!1,directionInitial:"row",parentDirection:T,selfContainerName:r,parentLayoutName:e,layoutName:n}),[A,Q]=re(!1),[a,X]=re(0),f=ee(p),o=ee(M??[]),b=ee(a);j(()=>{const i=`${n}=${g}`,t=oe(l,i).pipe(Se(1)).subscribe(m=>{m||k(l,i,{afterDropTargetComponent:[],beforeDropTargetComponent:[],centerDropTargetComponent:o.current,direction:x})});return()=>{De(l,`${n}=${g}`),t.unsubscribe()}},[l,n,g]),j(()=>{const i=oe(l,`${n}=${g}`).subscribe(t=>{t&&(d([...t.beforeDropTargetComponent]),I([...t.afterDropTargetComponent]),F([...t.centerDropTargetComponent]),R(t.direction),t.beforeDropTargetComponent.length!==0||t.afterDropTargetComponent.length!==0?O(!0):t.beforeDropTargetComponent.length===0&&t.centerDropTargetComponent.length===0&&t.afterDropTargetComponent.length===0&&(w.next({state:"remove",targetContainerName:r,targetParentLayoutName:"",targetLayoutName:e}),Q(!0)))});return()=>{i.unsubscribe(),me(n)}},[l,n]),j(()=>{const i=w.pipe(Ce((t,m)=>{const s=L=>{const{children:h,component:$,targetComponent:_,x:P,y:U,...z}=L||{};return z};return ge(s(t),s(m))})).subscribe(t=>{if(t.state==="remove")(t.targetParentLayoutName===n||t.targetParentLayoutName===""&&t.targetLayoutName===n)&&requestAnimationFrame(()=>{let m=_=>{if(t.nextContainerName&&t.dropTargetComponentEvent&&t.targetComponent){const P=te({orderName:_,containerName:t.nextContainerName,parentLayoutName:e,layoutName:n,dropComponent:t.targetComponent,navigationTitle:t.dropTargetComponentEvent.navigationTitle,isUsePrefix:!0,afterDropTargetComponent:D,beforeDropTargetComponent:C,centerDropTargetComponent:p,dropDocumentOutsideOption:t.dropTargetComponentEvent?.dropDocumentOutsideOption,screenKey:t.dropTargetComponentEvent.screenKey});k(l,`${n}=${g}`,{...B(l,`${n}=${g}`)||{afterDropTargetComponent:D,beforeDropTargetComponent:C,centerDropTargetComponent:p,direction:x},...P}),Promise.resolve().then(()=>t.dropEndCallback&&t.dropEndCallback({x:t.x,y:t.y,containerName:r}))}};const s=B(l,`${n}=${g}`),L=H(s?.afterDropTargetComponent||D,t.targetContainerName,()=>m("after")),h=H(s?.beforeDropTargetComponent||C,t.targetContainerName,()=>m("before")),$=H(s?.centerDropTargetComponent||p,t.targetContainerName,()=>m("center"));k(l,`${n}=${g}`,{afterDropTargetComponent:L,beforeDropTargetComponent:h,centerDropTargetComponent:$,direction:x})});else if(t.state==="append"){const{x:m,y:s,dropEndCallback:L,dropTargetComponentEvent:h,orderName:$,targetLayoutName:_,targetParentLayoutName:P,targetContainerName:U,targetComponent:z,nextContainerName:Z,parentOrderName:ne}=t;if(N.current&&$&&m&&s&&h&&ie({x:m,y:s,element:N.current})){const{direction:q,navigationTitle:pe,dropDocumentOutsideOption:se,screenKey:ve}=h;if(_===n&&z)if(q===T&&$!=="center")w.next({state:"append",targetContainerName:U,targetParentLayoutName:"",targetLayoutName:e,targetComponent:z,nextContainerName:r,parentOrderName:ye(n)||$,orderName:$,x:m,y:s,dropEndCallback:L,dropTargetComponentEvent:{navigationTitle:pe,dropDocumentOutsideOption:se,direction:T,screenKey:g}});else{$!=="center"&&(R(q),O(!0));const fe=te({orderName:$,parentOrderName:ne,containerName:U,nextContainerName:Z,parentLayoutName:e,layoutName:n,dropComponent:z,navigationTitle:pe,isUsePrefix:$!=="center",afterDropTargetComponent:D,beforeDropTargetComponent:C,centerDropTargetComponent:p,dropDocumentOutsideOption:se});k(l,`${n}=${g}`,{...B(l,`${n}=${g}`)||{afterDropTargetComponent:D,beforeDropTargetComponent:C,centerDropTargetComponent:p,direction:x},...fe,direction:q}),Promise.resolve().then(()=>t.dropEndCallback&&t.dropEndCallback({x:t.x,y:t.y,containerName:r}))}}}});return()=>{i.unsubscribe()}},[x,T,e,n,C,D,p]),j(()=>{f.current=p},[p]),j(()=>{b.current=a},[a]);const[S,v]=re(!1);return c(G,{children:!A&&J("div",{className:`${Y["flex-split-screen"]}`,ref:N,children:[J(le,{direction:x,layoutName:`${n}`,panelMovementMode:"bulldozer",children:[C.length!=0?c(G,{children:C.map(({containerName:i,component:t,navigationTitle:m,dropDocumentOutsideOption:s,screenKey:L},h)=>c(V,{containerName:i,isInitialResizable:!0,isResizePanel:!0,children:c(W,{parentDirection:x,layoutName:`${n}_before-${u}`,parentLayoutName:n,containerName:i,depth:u+1,rootRef:y,screenKey:L,initialCenterComponents:[{navigationTitle:m,component:t,containerName:i,dropDocumentOutsideOption:s,screenKey:L}],rootName:l})},i))}):c("div",{}),p.length!=0?c(G,{children:c(V,{containerName:`${(p[a]||p[0]).containerName}`,isInitialResizable:!0,isResizePanel:K,children:K?c("div",{"data-key":g,children:c(W,{parentDirection:x,layoutName:`${n}_center-${u}`,parentLayoutName:n,containerName:`${(p[a]||p[0]).containerName}`,depth:u+1,rootRef:y,initialCenterComponents:p.map(({navigationTitle:i,component:t,containerName:m,dropDocumentOutsideOption:s,screenKey:L})=>({navigationTitle:i,component:t,containerName:m,dropDocumentOutsideOption:s,screenKey:L})),screenKey:g,rootName:l})}):J(de,{keyName:(p[a]||p[0]).containerName,isDefaultScrollStyle:!0,children:[!S&&c("div",{className:`${Y["flex-split-screen-drag-box-title-wrapper-sticky"]}`,children:J("div",{"data-is_split":K,"data-layout_name":n,"data-parent_layout_name":e,"data-container_name":`${(p[a]||p[0]).containerName}`,className:`${Y["flex-split-screen-drag-box-title-wrapper"]}`,children:[c(xe,{"data-layout_name":n,layoutName:n,children:p.map((i,t)=>c(Le,{onClose:m=>{b.current===t&&p.length===1?w.next({state:"remove",targetContainerName:r,targetParentLayoutName:e,targetLayoutName:n}):(p.length===b.current+1&&X(b.current-1),F(s=>{const L=H(s,i.containerName,()=>{}),h=`${n}=${g}`,$=B(l,h)||{afterDropTargetComponent:D,beforeDropTargetComponent:C,centerDropTargetComponent:s,direction:x};return k(l,h,{...$,centerDropTargetComponent:L}),L}))},isActive:a===t,children:c(Te,{screenKey:i.screenKey,onClick:()=>{X(t)},containerName:i.containerName,dropDocumentOutsideOption:i.dropDocumentOutsideOption,targetComponent:i.component,navigationTitle:i.navigationTitle,"data-container-name":i.containerName,"data-layout-name":n,"data-parent-layout-name":e,dropEndCallback:({x:m,y:s,containerName:L})=>{if(!y.current||!N.current)return;const h=$e({x:m,y:s,element:y.current}),$=ie({x:m,y:s,element:N.current});if(!h&&!$||!h&&$&&f.current.length>1){const _={};if(f.current.length>1){const{adjacentItem:P,adjacentIndex:U}=Oe(f.current,b.current);P&&b.current===t&&Object.assign(_,{x:m,y:s,targetComponent:P.component,nextContainerName:P.containerName,orderName:"center",dropTargetComponentEvent:{navigationTitle:P.navigationTitle,dropDocumentOutsideOption:P.dropDocumentOutsideOption,direction:x,screenKey:g}})}t===0?w.next({state:"remove",targetContainerName:i.containerName,targetParentLayoutName:e,targetLayoutName:n,..._}):w.next({state:"remove",targetContainerName:i.containerName,targetParentLayoutName:"",targetLayoutName:n,..._})}},children:i.navigationTitle})},i.navigationTitle+n+i.containerName))},n),c(he,{})]})}),(p[a]||p[0]).component]})},(p[a]||p[0]).containerName)}):c("div",{}),D.length!=0?c(G,{children:D.map(({containerName:i,component:t,navigationTitle:m,dropDocumentOutsideOption:s,screenKey:L},h)=>c(V,{containerName:i,isInitialResizable:!0,isResizePanel:h!==D.length-1,children:c(W,{parentDirection:x,layoutName:`${n}_after-${u}`,parentLayoutName:n,containerName:i,depth:u+1,rootRef:y,screenKey:L,initialCenterComponents:[{navigationTitle:m,component:t,containerName:i,dropDocumentOutsideOption:s,screenKey:L}],rootName:l})},i))}):c("div",{})]}),E&&c("div",{className:`${Y["flex-split-screen-boundary-container"]}`,style:{...E},children:"\u2B07\uFE0F\uB4DC\uB86D\uD558\uBA74 \uD654\uBA74\uC774 \uBD84\uD560\uB429\uB2C8\uB2E4."})]})})}export{Re as default};