@byeolnaerim/flex-layout 0.0.8 → 0.0.10

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

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