@byeolnaerim/flex-layout 0.0.5 → 0.0.7

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

@@ -0,0 +1,1197 @@
+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