@byeolnaerim/flex-layout 0.0.9 → 0.0.12

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

@@ -1,1252 +1 @@
-"use strict";
-"use client";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var FlexLayoutSplitScreen_exports = {};
-__export(FlexLayoutSplitScreen_exports, {
-  default: () => FlexLayoutSplitScreen
-});
-module.exports = __toCommonJS(FlexLayoutSplitScreen_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_useDrag = require("../hooks/useDrag");
-var import_useFlexLayoutSplitScreen = require("../hooks/useFlexLayoutSplitScreen");
-var import_FlexLayoutContainerStore = require("../store/FlexLayoutContainerStore");
-var import_FlexLayout = __toESM(require("../styles/FlexLayout.module.css"), 1);
-var import_FlexLayout2 = __toESM(require("./FlexLayout"), 1);
-var import_FlexLayoutContainer = __toESM(require("./FlexLayoutContainer"), 1);
-var import_FlexLayoutSplitScreenDragBox = __toESM(require("./FlexLayoutSplitScreenDragBox"), 1);
-var import_fast_deep_equal = __toESM(require("fast-deep-equal"), 1);
-var import_rxjs = require("rxjs");
-var import_FlexLayoutSplitScreenDragBoxContainer = __toESM(require("./FlexLayoutSplitScreenDragBoxContainer"), 1);
-var import_FlexLayoutSplitScreenDragBoxItem = __toESM(require("./FlexLayoutSplitScreenDragBoxItem"), 1);
-var import_FlexLayoutSplitScreenDragBoxTitleMore = __toESM(require("./FlexLayoutSplitScreenDragBoxTitleMore"), 1);
-var import_FlexLayoutSplitScreenScrollBox = __toESM(require("./FlexLayoutSplitScreenScrollBox"), 1);
-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: (0, import_react.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;
-  });
-  import_useDrag.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
-  } = (0, import_useFlexLayoutSplitScreen.useFlexLayoutSplitScreen)({
-    isSplitInitial: false,
-    directionInitial: "row",
-    selfContainerName: containerName,
-    parentLayoutName: "",
-    layoutName
-  });
-  (0, import_react.useEffect)(() => {
-    (0, import_FlexLayoutContainerStore.resetRootSplitScreen)(layoutName);
-    const subscribe = (0, import_FlexLayoutContainerStore.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 {
-        (0, import_FlexLayoutContainerStore.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();
-      (0, import_FlexLayoutContainerStore.removeRootSplitScreen)(layoutName);
-    };
-  }, [layoutName, screenKey, navigationTitle, children, direction]);
-  (0, import_react.useEffect)(() => {
-    const subscribe = import_useDrag.dropMovementEventSubject.pipe(
-      (0, import_rxjs.distinctUntilChanged)((prev, curr) => {
-        const filterChildren = (obj) => {
-          const {
-            children: children2,
-            component,
-            targetComponent,
-            x,
-            y,
-            ...rest
-          } = obj || {};
-          return rest;
-        };
-        return (0, import_fast_deep_equal.default)(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
-                });
-                (0, import_FlexLayoutContainerStore.setSplitScreen)(layoutName, layoutName, {
-                  ...(0, import_FlexLayoutContainerStore.getCurrentSplitScreenComponents)(
-                    layoutName,
-                    layoutName
-                  ) || {
-                    afterDropTargetComponent,
-                    beforeDropTargetComponent,
-                    centerDropTargetComponent,
-                    direction
-                  },
-                  ...targetComponentsMap
-                });
-                Promise.resolve().then(
-                  () => event.dropEndCallback && event.dropEndCallback({
-                    x: event.x,
-                    y: event.y,
-                    containerName
-                  })
-                );
-              }
-            };
-            const currentComponents = (0, import_FlexLayoutContainerStore.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")
-            );
-            (0, import_FlexLayoutContainerStore.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
-              });
-              (0, import_FlexLayoutContainerStore.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 = (0, import_FlexLayoutContainerStore.getCurrentSplitScreenComponents)(
-                layoutName,
-                `${layoutName}_center=${centerDropTargetComponent[0].screenKey}`
-              ) || {
-                afterDropTargetComponent: [],
-                beforeDropTargetComponent: [],
-                centerDropTargetComponent: [],
-                direction
-              };
-              (0, import_FlexLayoutContainerStore.setSplitScreen)(
-                layoutName,
-                `${layoutName}_center=${centerDropTargetComponent[0].screenKey}`,
-                {
-                  ...childScreenInfo,
-                  ...{
-                    centerDropTargetComponent: [
-                      centerDropTargetComponent[0],
-                      {
-                        containerName: `${targetContainerName}_${layoutName}_${orderName}`,
-                        component: targetComponent,
-                        dropDocumentOutsideOption: dropDocumentOutsideOption2,
-                        screenKey: dropTargetComponentEvent.screenKey,
-                        navigationTitle: navigationTitle2
-                      }
-                    ]
-                  }
-                }
-              );
-            }
-          }
-        }
-      }
-    });
-    return () => {
-      subscribe.unsubscribe();
-    };
-  }, [
-    direction,
-    layoutName,
-    isSplit,
-    beforeDropTargetComponent,
-    afterDropTargetComponent,
-    centerDropTargetComponent
-  ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${import_FlexLayout.default["flex-split-screen"]}`, ref: layoutRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_FlexLayout2.default,
-      {
-        direction,
-        layoutName,
-        "data-is_split": isSplit,
-        panelMovementMode: "bulldozer",
-        children: [
-          beforeDropTargetComponent.length != 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: beforeDropTargetComponent.map(
-            ({
-              containerName: cName,
-              component,
-              navigationTitle: navigationTitle2,
-              dropDocumentOutsideOption: dropDocumentOutsideOption2,
-              screenKey: screenKey2
-            }, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_FlexLayoutContainer.default,
-              {
-                containerName: cName,
-                isInitialResizable: true,
-                isResizePanel: true,
-                children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", {}),
-          centerDropTargetComponent.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_FlexLayoutContainer.default,
-            {
-              containerName: `${centerDropTargetComponent[0].containerName}`,
-              isInitialResizable: true,
-              isResizePanel: isSplit,
-              children: isSplit ? /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
-                import_FlexLayoutSplitScreenScrollBox.default,
-                {
-                  keyName: centerDropTargetComponent[0].containerName,
-                  isDefaultScrollStyle: true,
-                  children: centerDropTargetComponent[0].component
-                }
-              )
-            }
-          ),
-          afterDropTargetComponent.length != 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: afterDropTargetComponent.map(
-            ({
-              containerName: cName,
-              component,
-              navigationTitle: navigationTitle2,
-              dropDocumentOutsideOption: dropDocumentOutsideOption2,
-              screenKey: screenKey2
-            }, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_FlexLayoutContainer.default,
-              {
-                containerName: cName,
-                isInitialResizable: true,
-                isResizePanel: afterDropTargetComponent.length - 1 !== i,
-                children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", {})
-        ]
-      }
-    ),
-    boundaryContainerSize && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      {
-        className: `${import_FlexLayout.default["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
-  } = (0, import_useFlexLayoutSplitScreen.useFlexLayoutSplitScreen)({
-    isSplitInitial: false,
-    directionInitial: "row",
-    parentDirection,
-    selfContainerName: containerName,
-    parentLayoutName,
-    layoutName
-  });
-  const [isEmptyContent, setIsEmptyContent] = (0, import_react.useState)(false);
-  const [activeIndex, setActiveIndex] = (0, import_react.useState)(0);
-  const centerDropTargetComponentRef = (0, import_react.useRef)(centerDropTargetComponent);
-  const initialCenterRef = (0, import_react.useRef)(
-    initialCenterComponents ?? []
-  );
-  const activeIndexRef = (0, import_react.useRef)(activeIndex);
-  (0, import_react.useEffect)(() => {
-    const storeKey = `${layoutName}=${screenKey}`;
-    const subscribe = (0, import_FlexLayoutContainerStore.getSplitScreen)(rootName, storeKey).pipe((0, import_rxjs.take)(1)).subscribe((layoutInfo) => {
-      if (layoutInfo) return;
-      (0, import_FlexLayoutContainerStore.setSplitScreen)(rootName, storeKey, {
-        afterDropTargetComponent: [],
-        beforeDropTargetComponent: [],
-        centerDropTargetComponent: initialCenterRef.current,
-        direction
-      });
-    });
-    return () => {
-      (0, import_FlexLayoutContainerStore.removeSplitScreenChild)(rootName, `${layoutName}=${screenKey}`);
-      subscribe.unsubscribe();
-    };
-  }, [rootName, layoutName, screenKey]);
-  (0, import_react.useEffect)(() => {
-    const subscribe = (0, import_FlexLayoutContainerStore.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) {
-          import_useDrag.dropMovementEventSubject.next({
-            state: "remove",
-            targetContainerName: containerName,
-            targetParentLayoutName: "",
-            targetLayoutName: parentLayoutName
-          });
-          setIsEmptyContent(true);
-        }
-      }
-    });
-    return () => {
-      subscribe.unsubscribe();
-      (0, import_FlexLayoutContainerStore.removeRootSplitScreen)(layoutName);
-    };
-  }, [rootName, layoutName]);
-  (0, import_react.useEffect)(() => {
-    const subscribe = import_useDrag.dropMovementEventSubject.pipe(
-      (0, import_rxjs.distinctUntilChanged)((prev, curr) => {
-        const filterChildren = (obj) => {
-          const {
-            children,
-            component,
-            targetComponent,
-            x,
-            y,
-            ...rest
-          } = obj || {};
-          return rest;
-        };
-        return (0, import_fast_deep_equal.default)(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
-                });
-                (0, import_FlexLayoutContainerStore.setSplitScreen)(
-                  rootName,
-                  `${layoutName}=${screenKey}`,
-                  {
-                    ...(0, import_FlexLayoutContainerStore.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 = (0, import_FlexLayoutContainerStore.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")
-            );
-            (0, import_FlexLayoutContainerStore.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") {
-              import_useDrag.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
-              });
-              (0, import_FlexLayoutContainerStore.setSplitScreen)(
-                rootName,
-                `${layoutName}=${screenKey}`,
-                {
-                  ...(0, import_FlexLayoutContainerStore.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
-  ]);
-  (0, import_react.useEffect)(() => {
-    centerDropTargetComponentRef.current = centerDropTargetComponent;
-  }, [centerDropTargetComponent]);
-  (0, import_react.useEffect)(() => {
-    activeIndexRef.current = activeIndex;
-  }, [activeIndex]);
-  const [isOnlyOneScreen, setIsOnlyOneScreen] = (0, import_react.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: !isEmptyContent && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "div",
-    {
-      className: `${import_FlexLayout.default["flex-split-screen"]}`,
-      ref: layoutRef,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          import_FlexLayout2.default,
-          {
-            direction,
-            layoutName: `${layoutName}`,
-            panelMovementMode: "bulldozer",
-            children: [
-              beforeDropTargetComponent.length != 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: beforeDropTargetComponent.map(
-                ({
-                  containerName: cName,
-                  component,
-                  navigationTitle,
-                  dropDocumentOutsideOption,
-                  screenKey: screenKey2
-                }, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_FlexLayoutContainer.default,
-                  {
-                    containerName: cName,
-                    isInitialResizable: true,
-                    isResizePanel: true,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", {}),
-              centerDropTargetComponent.length != 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_FlexLayoutContainer.default,
-                {
-                  containerName: `${(centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName}`,
-                  isInitialResizable: true,
-                  isResizePanel: isSplit,
-                  children: isSplit ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-key": screenKey, children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(
-                    import_FlexLayoutSplitScreenScrollBox.default,
-                    {
-                      keyName: (centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName,
-                      isDefaultScrollStyle: true,
-                      children: [
-                        !isOnlyOneScreen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                          "div",
-                          {
-                            className: `${import_FlexLayout.default["flex-split-screen-drag-box-title-wrapper-sticky"]}`,
-                            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                              "div",
-                              {
-                                "data-is_split": isSplit,
-                                "data-layout_name": layoutName,
-                                "data-parent_layout_name": parentLayoutName,
-                                "data-container_name": `${(centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName}`,
-                                className: `${import_FlexLayout.default["flex-split-screen-drag-box-title-wrapper"]}`,
-                                children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                                    import_FlexLayoutSplitScreenDragBoxContainer.default,
-                                    {
-                                      "data-layout_name": layoutName,
-                                      layoutName,
-                                      children: centerDropTargetComponent.map(
-                                        (item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                                          import_FlexLayoutSplitScreenDragBoxItem.default,
-                                          {
-                                            onClose: (ev) => {
-                                              if (activeIndexRef.current === index && centerDropTargetComponent.length === 1) {
-                                                import_useDrag.dropMovementEventSubject.next(
-                                                  {
-                                                    state: "remove",
-                                                    targetContainerName: containerName,
-                                                    targetParentLayoutName: parentLayoutName,
-                                                    targetLayoutName: layoutName
-                                                  }
-                                                );
-                                              } else {
-                                                if (centerDropTargetComponent.length === activeIndexRef.current + 1) {
-                                                  setActiveIndex(
-                                                    activeIndexRef.current - 1
-                                                  );
-                                                }
-                                                setCenterDropTargetComponent(
-                                                  (prev) => {
-                                                    const next = handleRemove(
-                                                      prev,
-                                                      item.containerName,
-                                                      () => {
-                                                      }
-                                                    );
-                                                    const key = `${layoutName}=${screenKey}`;
-                                                    const current = (0, import_FlexLayoutContainerStore.getCurrentSplitScreenComponents)(
-                                                      rootName,
-                                                      key
-                                                    ) || {
-                                                      afterDropTargetComponent,
-                                                      beforeDropTargetComponent,
-                                                      centerDropTargetComponent: prev,
-                                                      direction
-                                                    };
-                                                    (0, import_FlexLayoutContainerStore.setSplitScreen)(
-                                                      rootName,
-                                                      key,
-                                                      {
-                                                        ...current,
-                                                        centerDropTargetComponent: next
-                                                      }
-                                                    );
-                                                    return next;
-                                                  }
-                                                );
-                                              }
-                                            },
-                                            isActive: activeIndex === index,
-                                            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                                              import_FlexLayoutSplitScreenDragBox.default,
-                                              {
-                                                screenKey: item.screenKey,
-                                                onClick: () => {
-                                                  setActiveIndex(
-                                                    index
-                                                  );
-                                                },
-                                                containerName: item.containerName,
-                                                dropDocumentOutsideOption: item.dropDocumentOutsideOption,
-                                                targetComponent: item.component,
-                                                navigationTitle: item.navigationTitle,
-                                                "data-container-name": item.containerName,
-                                                "data-layout-name": layoutName,
-                                                "data-parent-layout-name": parentLayoutName,
-                                                dropEndCallback: ({
-                                                  x,
-                                                  y,
-                                                  containerName: appendContainerName
-                                                }) => {
-                                                  if (!rootRef.current || !layoutRef.current)
-                                                    return;
-                                                  const isRootOver = isOverDrop(
-                                                    {
-                                                      x,
-                                                      y,
-                                                      element: rootRef.current
-                                                    }
-                                                  );
-                                                  const isLayoutInner = isInnerDrop(
-                                                    {
-                                                      x,
-                                                      y,
-                                                      element: layoutRef.current
-                                                    }
-                                                  );
-                                                  if (!isRootOver && !isLayoutInner || !isRootOver && isLayoutInner && centerDropTargetComponentRef.current.length > 1) {
-                                                    const option = {};
-                                                    if (centerDropTargetComponentRef.current.length > 1) {
-                                                      const {
-                                                        adjacentItem,
-                                                        adjacentIndex
-                                                      } = getAdjacentItem(
-                                                        centerDropTargetComponentRef.current,
-                                                        activeIndexRef.current
-                                                      );
-                                                      if (adjacentItem && activeIndexRef.current === index) {
-                                                        Object.assign(
-                                                          option,
-                                                          {
-                                                            x,
-                                                            y,
-                                                            targetComponent: adjacentItem.component,
-                                                            nextContainerName: adjacentItem.containerName,
-                                                            orderName: "center",
-                                                            dropTargetComponentEvent: {
-                                                              navigationTitle: adjacentItem.navigationTitle,
-                                                              dropDocumentOutsideOption: adjacentItem.dropDocumentOutsideOption,
-                                                              direction,
-                                                              screenKey
-                                                            }
-                                                          }
-                                                        );
-                                                      }
-                                                    }
-                                                    if (index === 0) {
-                                                      import_useDrag.dropMovementEventSubject.next(
-                                                        {
-                                                          state: "remove",
-                                                          targetContainerName: item.containerName,
-                                                          targetParentLayoutName: parentLayoutName,
-                                                          targetLayoutName: layoutName,
-                                                          ...option
-                                                        }
-                                                      );
-                                                    } else {
-                                                      import_useDrag.dropMovementEventSubject.next(
-                                                        {
-                                                          state: "remove",
-                                                          targetContainerName: item.containerName,
-                                                          targetParentLayoutName: "",
-                                                          targetLayoutName: layoutName,
-                                                          ...option
-                                                        }
-                                                      );
-                                                    }
-                                                  }
-                                                },
-                                                children: item.navigationTitle
-                                              }
-                                            )
-                                          },
-                                          item.navigationTitle + layoutName + item.containerName
-                                        )
-                                      )
-                                    },
-                                    layoutName
-                                  ),
-                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FlexLayoutSplitScreenDragBoxTitleMore.default, {})
-                                ]
-                              }
-                            )
-                          }
-                        ),
-                        (() => {
-                          const target = centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0];
-                          return target.component;
-                        })()
-                      ]
-                    }
-                  )
-                },
-                (centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName
-              ) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
-              afterDropTargetComponent.length != 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: afterDropTargetComponent.map(
-                ({
-                  containerName: cName,
-                  component,
-                  navigationTitle,
-                  dropDocumentOutsideOption,
-                  screenKey: screenKey2
-                }, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_FlexLayoutContainer.default,
-                  {
-                    containerName: cName,
-                    isInitialResizable: true,
-                    isResizePanel: i !== afterDropTargetComponent.length - 1,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", {})
-            ]
-          }
-        ),
-        boundaryContainerSize && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "div",
-          {
-            className: `${import_FlexLayout.default["flex-split-screen-boundary-container"]}`,
-            style: { ...boundaryContainerSize },
-            children: "\u2B07\uFE0F\uB4DC\uB86D\uD558\uBA74 \uD654\uBA74\uC774 \uBD84\uD560\uB429\uB2C8\uB2E4."
-          }
-        )
-      ]
-    }
-  ) });
-}
-//# sourceMappingURL=FlexLayoutSplitScreen.cjs.map
+"use strict";"use client";var De=Object.create;var Z=Object.defineProperty;var be=Object.getOwnPropertyDescriptor;var Te=Object.getOwnPropertyNames;var Se=Object.getPrototypeOf,xe=Object.prototype.hasOwnProperty;var Le=(r,t)=>{for(var e in t)Z(r,e,{get:t[e],enumerable:!0})},me=(r,t,e,D)=>{if(t&&typeof t=="object"||typeof t=="function")for(let g of Te(t))!xe.call(r,g)&&g!==e&&Z(r,g,{get:()=>t[g],enumerable:!(D=be(t,g))||D.enumerable});return r};var M=(r,t,e)=>(e=r!=null?De(Se(r)):{},me(t||!r||!r.__esModule?Z(e,"default",{value:r,enumerable:!0}):e,r)),he=r=>me(Z({},"__esModule",{value:!0}),r);var Re={};Le(Re,{default:()=>fe});module.exports=he(Re);var o=require("react/jsx-runtime"),L=require("react"),z=require("../hooks/useDrag"),oe=require("../hooks/useFlexLayoutSplitScreen"),m=require("../store/FlexLayoutContainerStore"),X=M(require("../styles/FlexLayout.module.css"),1),ie=M(require("./FlexLayout"),1),Y=M(require("./FlexLayoutContainer"),1),le=M(require("./FlexLayoutSplitScreenDragBox"),1),ae=M(require("fast-deep-equal/react"),1),J=require("rxjs"),ge=M(require("./FlexLayoutSplitScreenDragBoxContainer"),1),Ce=M(require("./FlexLayoutSplitScreenDragBoxItem"),1),de=M(require("./FlexLayoutSplitScreenDragBoxTitleMore"),1),pe=M(require("./FlexLayoutSplitScreenScrollBox"),1);function $e({x:r,y:t,element:e}){const{x:D,y:g,right:v,bottom:C}=e.getBoundingClientRect();return r<D||r>v||t<g||t>C}function ne({x:r,y:t,element:e}){const{x:D,y:g,right:v,bottom:C}=e.getBoundingClientRect();return r>=D&&r<=v&&t>=g&&t<=C}const re=()=>typeof window<"u"&&window.crypto?Array.from(window.crypto.getRandomValues(new Uint32Array(16)),r=>r.toString(32).padStart(2,"0")).join(""):Math.random().toString(36).substring(2,15)+Math.random().toString(36).substring(2,15),ee=({orderName:r,parentOrderName:t,containerName:e,parentLayoutName:D,layoutName:g,dropComponent:v,navigationTitle:C,nextContainerName:j,isUsePrefix:d=!0,beforeDropTargetComponent:h,afterDropTargetComponent:B,centerDropTargetComponent:F,dropDocumentOutsideOption:T,screenKey:f=re()})=>{const s=t||r;let I,u,N;s===r||s==="center"?I=r==="before"?{beforeDropTargetComponent:h}:r==="after"?{afterDropTargetComponent:B}:{centerDropTargetComponent:F.filter(p=>!p.containerName.split("_").at(0).startsWith(e.split("_").at(0)))}:I=s==="before"?{beforeDropTargetComponent:h}:{afterDropTargetComponent:B};const _=Object.entries(I)[0];N=_[0],u=_[1];const R={containerName:`${e+"_"+g}${d?"_"+r+"-"+u.length:""}`,component:(0,L.cloneElement)(v,{key:f,screenKey:f}),navigationTitle:C,dropDocumentOutsideOption:T,screenKey:f||re()};let E;if(j){const p=u.findIndex(V=>V.containerName===j);p!==-1?s===r?r==="before"?E=[...u.slice(0,p),R,...u.slice(p)]:E=[...u.slice(0,p+1),R,...u.slice(p+1)]:s==="after"&&r==="before"?E=[...u.slice(0,p),R,...u.slice(p)]:s==="before"&&r==="after"?E=[...u.slice(0,p+1),R,...u.slice(p+1)]:r==="before"?E=[...u.slice(0,p),R,...u.slice(p)]:E=[...u.slice(0,p+1),R,...u.slice(p+1)]:s==="center"&&r==="after"?E=[R,...u]:s==="center"&&r==="before"?E=[...u,R]:E=r==="before"?[R,...u]:[...u,R]}else E=r==="before"?[R,...u]:[...u,R];const A=new Set,G=E.filter(p=>A.has(p.containerName)?!1:(A.add(p.containerName),!0));return z.dropMovementEventSubject.next({state:"append",targetParentLayoutName:D,targetLayoutName:g,targetContainerName:e,orderName:r}),{[N]:G}},H=(r,t,e)=>{const D=r.filter(g=>g.containerName!==t);return D.length!=r.length&&e(r.length-D.length),D};function Oe(r,t){return t+1<r.length?{adjacentItem:r[t+1],adjacentIndex:t+1}:t-1>=0?{adjacentItem:r[t-1],adjacentIndex:t-1}:{adjacentItem:null,adjacentIndex:t}}const ye=r=>{const t=r.split("_").at(-1)?.split("-").at(0)?.split("=").at(0);if(["before","center","after"].some(e=>e===t))return t};function fe({children:r,containerName:t,layoutName:e,navigationTitle:D,dropDocumentOutsideOption:g,screenKey:v,isResetOnChildrenChange:C=!0,isRemoveStoreOnUnmount:j=!0}){const{direction:d,isSplit:h,boundaryContainerSize:B,afterDropTargetComponent:F,beforeDropTargetComponent:T,centerDropTargetComponent:f,setAfterDropTargetComponent:s,setBeforeDropTargetComponent:I,setCenterDropTargetComponent:u,layoutRef:N,setIsSplit:_,setDirection:R}=(0,oe.useFlexLayoutSplitScreen)({isSplitInitial:!1,directionInitial:"row",selfContainerName:t,parentLayoutName:"",layoutName:e}),E=(0,L.useRef)(v??re()),A=v??E.current;(0,L.useEffect)(()=>{C&&(0,m.resetRootSplitScreen)(e);const b=(0,m.getSplitScreen)(e,e).subscribe(i=>{if(i){I([...i.beforeDropTargetComponent]),s([...i.afterDropTargetComponent]),u([...i.centerDropTargetComponent]),R(i.direction),(i.beforeDropTargetComponent.length!==0||i.afterDropTargetComponent.length!==0)&&_(!0);return}(0,m.setSplitScreen)(e,e,{afterDropTargetComponent:[],beforeDropTargetComponent:[],centerDropTargetComponent:[{containerName:t,component:r,navigationTitle:D,dropDocumentOutsideOption:g,screenKey:A}],direction:d})});return()=>{b.unsubscribe(),j&&(0,m.removeRootSplitScreen)(e)}},[e,C]),(0,L.useEffect)(()=>{if(C)return;const b=(0,m.getCurrentSplitScreenComponents)(e,e);if(!b||b.centerDropTargetComponent.length===0)return;const i=b.centerDropTargetComponent[0],S=v??i.screenKey;if(i.screenKey!==S)return;const x={...i,component:r,navigationTitle:D,dropDocumentOutsideOption:g};if(i.component===x.component&&i.navigationTitle===x.navigationTitle&&i.dropDocumentOutsideOption===x.dropDocumentOutsideOption)return;(0,m.setSplitScreen)(e,e,{...b,centerDropTargetComponent:[x]});const P=i.screenKey,a=`${e}_center=${P}`,n=(0,m.getCurrentSplitScreenComponents)(e,a);if(n?.centerDropTargetComponent?.length){const l=n.centerDropTargetComponent.findIndex(c=>c.screenKey===P);if(l!==-1){const c=[...n.centerDropTargetComponent];c[l]={...c[l],component:r,navigationTitle:D,dropDocumentOutsideOption:g},(0,m.setSplitScreen)(e,a,{...n,centerDropTargetComponent:c})}}},[C,e,r,D,g,v]),(0,L.useEffect)(()=>{const b=z.dropMovementEventSubject.pipe((0,J.distinctUntilChanged)((i,S)=>{const x=P=>{const{children:a,component:n,targetComponent:l,x:c,y:$,...O}=P||{};return O};return(0,ae.default)(x(i),x(S))})).subscribe(i=>{if(i.state==="remove")(i.targetParentLayoutName===e||i.targetParentLayoutName===""&&i.targetLayoutName===e)&&requestAnimationFrame(()=>{let S=l=>{if(i.nextContainerName&&i.dropTargetComponentEvent&&i.targetComponent){const c=ee({orderName:l,containerName:i.nextContainerName,parentLayoutName:"",layoutName:e,dropComponent:i.targetComponent,navigationTitle:i.dropTargetComponentEvent.navigationTitle,isUsePrefix:!0,afterDropTargetComponent:F,beforeDropTargetComponent:T,centerDropTargetComponent:f,dropDocumentOutsideOption:g,screenKey:i.dropTargetComponentEvent.screenKey});(0,m.setSplitScreen)(e,e,{...(0,m.getCurrentSplitScreenComponents)(e,e)||{afterDropTargetComponent:F,beforeDropTargetComponent:T,centerDropTargetComponent:f,direction:d},...c}),Promise.resolve().then(()=>i.dropEndCallback&&i.dropEndCallback({x:i.x,y:i.y,containerName:t}))}};const x=(0,m.getCurrentSplitScreenComponents)(e,e),P=H(x?.afterDropTargetComponent||F,i.targetContainerName,()=>S("after")),a=H(x?.beforeDropTargetComponent||T,i.targetContainerName,()=>S("before")),n=H(x?.centerDropTargetComponent||f,i.targetContainerName,()=>S("center"));(0,m.setSplitScreen)(e,e,{afterDropTargetComponent:P,beforeDropTargetComponent:a,centerDropTargetComponent:n,direction:d})});else if(i.state==="append"){const{x:S,y:x,dropEndCallback:P,dropTargetComponentEvent:a,orderName:n,parentOrderName:l,targetLayoutName:c,targetParentLayoutName:$,targetContainerName:O,targetComponent:y,nextContainerName:K}=i;if(N.current&&n&&S&&x&&y&&a&&c===e&&ne({x:S,y:x,element:N.current})){const{direction:k,navigationTitle:U,dropDocumentOutsideOption:w}=a,Q=n!=="center",te=n==="center"&&f.length<=1;if(Q||te)if(_(!0),Q){R(k);const q=ee({orderName:n,parentOrderName:l,containerName:O,nextContainerName:K,dropComponent:y,parentLayoutName:"",layoutName:e,navigationTitle:U,isUsePrefix:!0,afterDropTargetComponent:F,beforeDropTargetComponent:T,centerDropTargetComponent:f,dropDocumentOutsideOption:w});(0,m.setSplitScreen)(e,e,{afterDropTargetComponent:F,beforeDropTargetComponent:T,centerDropTargetComponent:f,direction:k,...q,direction:k}),Promise.resolve().then(()=>P&&P({x:i.x,y:i.y,containerName:t}))}else{const q=(0,m.getCurrentSplitScreenComponents)(e,`${e}_center=${f[0].screenKey}`)||{afterDropTargetComponent:[],beforeDropTargetComponent:[],centerDropTargetComponent:[],direction:d};(0,m.setSplitScreen)(e,`${e}_center=${f[0].screenKey}`,{...q,centerDropTargetComponent:[f[0],{containerName:`${O}_${e}_${n}`,component:y,dropDocumentOutsideOption:w,screenKey:a.screenKey,navigationTitle:U}]})}}}});return()=>{b.unsubscribe()}},[d,e,h,T,F,f]);const G={containerName:t,component:r,navigationTitle:D,dropDocumentOutsideOption:g,screenKey:A},p=f[0]??G,V=f.length>0;return(0,o.jsxs)("div",{className:`${X.default["flex-split-screen"]}`,ref:N,children:[(0,o.jsxs)(ie.default,{direction:d,layoutName:e,"data-is_split":h,panelMovementMode:"bulldozer",children:[T.length!=0?(0,o.jsx)(o.Fragment,{children:T.map(({containerName:b,component:i,navigationTitle:S,dropDocumentOutsideOption:x,screenKey:P},a)=>(0,o.jsx)(Y.default,{containerName:b,isInitialResizable:!0,isResizePanel:!0,children:(0,o.jsx)(W,{parentDirection:d,layoutName:`${e}_before`,parentLayoutName:e,containerName:b,depth:1,rootRef:N,screenKey:P,initialCenterComponents:[{navigationTitle:S,component:i,containerName:b,dropDocumentOutsideOption:x,screenKey:P}],rootName:e})},b))}):(0,o.jsx)("div",{}),(0,o.jsx)(Y.default,{containerName:`${p.containerName}`,isInitialResizable:!0,isResizePanel:h,children:V&&h?(0,o.jsx)(W,{parentDirection:d,layoutName:`${e}_center`,parentLayoutName:e,containerName:p.containerName,depth:0,rootRef:N,screenKey:p.screenKey,initialCenterComponents:[{navigationTitle:p.navigationTitle,component:p.component,containerName:p.containerName,dropDocumentOutsideOption:p.dropDocumentOutsideOption,screenKey:p.screenKey}],rootName:e}):(0,o.jsx)(pe.default,{keyName:p.containerName,isDefaultScrollStyle:!0,children:p.component})}),F.length!=0?(0,o.jsx)(o.Fragment,{children:F.map(({containerName:b,component:i,navigationTitle:S,dropDocumentOutsideOption:x,screenKey:P},a)=>(0,o.jsx)(Y.default,{containerName:b,isInitialResizable:!0,isResizePanel:F.length-1!==a,children:(0,o.jsx)(W,{parentDirection:d,layoutName:`${e}_after`,parentLayoutName:e,containerName:b,depth:1,rootRef:N,screenKey:P,initialCenterComponents:[{navigationTitle:S,component:i,containerName:b,dropDocumentOutsideOption:x,screenKey:P}],rootName:e})},b))}):(0,o.jsx)("div",{})]}),B&&(0,o.jsx)("div",{className:`${X.default["flex-split-screen-boundary-container"]}`,style:{...B},children:"\u2B07\uFE0F\uB4DC\uB86D\uD558\uBA74 \uD654\uBA74\uC774 \uBD84\uD560\uB429\uB2C8\uB2E4."})]})}function W({containerName:r,layoutName:t,parentLayoutName:e,parentDirection:D,depth:g,rootRef:v,rootName:C,initialCenterComponents:j,screenKey:d}){const{direction:h,isSplit:B,boundaryContainerSize:F,afterDropTargetComponent:T,beforeDropTargetComponent:f,centerDropTargetComponent:s,setAfterDropTargetComponent:I,setBeforeDropTargetComponent:u,setCenterDropTargetComponent:N,layoutRef:_,setIsSplit:R,setDirection:E}=(0,oe.useFlexLayoutSplitScreen)({isSplitInitial:!1,directionInitial:"row",parentDirection:D,selfContainerName:r,parentLayoutName:e,layoutName:t}),[A,G]=(0,L.useState)(!1),[p,V]=(0,L.useState)(0),b=(0,L.useRef)(s),i=(0,L.useRef)(j??[]),S=(0,L.useRef)(p);(0,L.useEffect)(()=>{const a=`${t}=${d}`,n=(0,m.getSplitScreen)(C,a).pipe((0,J.take)(1)).subscribe(l=>{l||(0,m.setSplitScreen)(C,a,{afterDropTargetComponent:[],beforeDropTargetComponent:[],centerDropTargetComponent:i.current,direction:h})});return()=>{(0,m.removeSplitScreenChild)(C,`${t}=${d}`),n.unsubscribe()}},[C,t,d]),(0,L.useEffect)(()=>{const a=(0,m.getSplitScreen)(C,`${t}=${d}`).subscribe(n=>{n&&(u([...n.beforeDropTargetComponent]),I([...n.afterDropTargetComponent]),N([...n.centerDropTargetComponent]),E(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.dropMovementEventSubject.next({state:"remove",targetContainerName:r,targetParentLayoutName:"",targetLayoutName:e}),G(!0)))});return()=>{a.unsubscribe(),(0,m.removeRootSplitScreen)(t)}},[C,t]),(0,L.useEffect)(()=>{const a=z.dropMovementEventSubject.pipe((0,J.distinctUntilChanged)((n,l)=>{const c=$=>{const{children:O,component:y,targetComponent:K,x:k,y:U,...w}=$||{};return w};return(0,ae.default)(c(n),c(l))})).subscribe(n=>{if(n.state==="remove")(n.targetParentLayoutName===t||n.targetParentLayoutName===""&&n.targetLayoutName===t)&&requestAnimationFrame(()=>{let l=K=>{if(n.nextContainerName&&n.dropTargetComponentEvent&&n.targetComponent){const k=ee({orderName:K,containerName:n.nextContainerName,parentLayoutName:e,layoutName:t,dropComponent:n.targetComponent,navigationTitle:n.dropTargetComponentEvent.navigationTitle,isUsePrefix:!0,afterDropTargetComponent:T,beforeDropTargetComponent:f,centerDropTargetComponent:s,dropDocumentOutsideOption:n.dropTargetComponentEvent?.dropDocumentOutsideOption,screenKey:n.dropTargetComponentEvent.screenKey});(0,m.setSplitScreen)(C,`${t}=${d}`,{...(0,m.getCurrentSplitScreenComponents)(C,`${t}=${d}`)||{afterDropTargetComponent:T,beforeDropTargetComponent:f,centerDropTargetComponent:s,direction:h},...k}),Promise.resolve().then(()=>n.dropEndCallback&&n.dropEndCallback({x:n.x,y:n.y,containerName:r}))}};const c=(0,m.getCurrentSplitScreenComponents)(C,`${t}=${d}`),$=H(c?.afterDropTargetComponent||T,n.targetContainerName,()=>l("after")),O=H(c?.beforeDropTargetComponent||f,n.targetContainerName,()=>l("before")),y=H(c?.centerDropTargetComponent||s,n.targetContainerName,()=>l("center"));(0,m.setSplitScreen)(C,`${t}=${d}`,{afterDropTargetComponent:$,beforeDropTargetComponent:O,centerDropTargetComponent:y,direction:h})});else if(n.state==="append"){const{x:l,y:c,dropEndCallback:$,dropTargetComponentEvent:O,orderName:y,targetLayoutName:K,targetParentLayoutName:k,targetContainerName:U,targetComponent:w,nextContainerName:Q,parentOrderName:te}=n;if(_.current&&y&&l&&c&&O&&ne({x:l,y:c,element:_.current})){const{direction:q,navigationTitle:se,dropDocumentOutsideOption:ce,screenKey:ve}=O;if(K===t&&w)if(q===D&&y!=="center")z.dropMovementEventSubject.next({state:"append",targetContainerName:U,targetParentLayoutName:"",targetLayoutName:e,targetComponent:w,nextContainerName:r,parentOrderName:ye(t)||y,orderName:y,x:l,y:c,dropEndCallback:$,dropTargetComponentEvent:{navigationTitle:se,dropDocumentOutsideOption:ce,direction:D,screenKey:d}});else{y!=="center"&&(E(q),R(!0));const ue=ee({orderName:y,parentOrderName:te,containerName:U,nextContainerName:Q,parentLayoutName:e,layoutName:t,dropComponent:w,navigationTitle:se,isUsePrefix:y!=="center",afterDropTargetComponent:T,beforeDropTargetComponent:f,centerDropTargetComponent:s,dropDocumentOutsideOption:ce});(0,m.setSplitScreen)(C,`${t}=${d}`,{...(0,m.getCurrentSplitScreenComponents)(C,`${t}=${d}`)||{afterDropTargetComponent:T,beforeDropTargetComponent:f,centerDropTargetComponent:s,direction:h},...ue,direction:q}),Promise.resolve().then(()=>n.dropEndCallback&&n.dropEndCallback({x:n.x,y:n.y,containerName:r}))}}}});return()=>{a.unsubscribe()}},[h,D,e,t,f,T,s]),(0,L.useEffect)(()=>{b.current=s},[s]),(0,L.useEffect)(()=>{S.current=p},[p]);const[x,P]=(0,L.useState)(!1);return(0,o.jsx)(o.Fragment,{children:!A&&(0,o.jsxs)("div",{className:`${X.default["flex-split-screen"]}`,ref:_,children:[(0,o.jsxs)(ie.default,{direction:h,layoutName:`${t}`,panelMovementMode:"bulldozer",children:[f.length!=0?(0,o.jsx)(o.Fragment,{children:f.map(({containerName:a,component:n,navigationTitle:l,dropDocumentOutsideOption:c,screenKey:$},O)=>(0,o.jsx)(Y.default,{containerName:a,isInitialResizable:!0,isResizePanel:!0,children:(0,o.jsx)(W,{parentDirection:h,layoutName:`${t}_before-${g}`,parentLayoutName:t,containerName:a,depth:g+1,rootRef:v,screenKey:$,initialCenterComponents:[{navigationTitle:l,component:n,containerName:a,dropDocumentOutsideOption:c,screenKey:$}],rootName:C})},a))}):(0,o.jsx)("div",{}),s.length!=0?(0,o.jsx)(o.Fragment,{children:(0,o.jsx)(Y.default,{containerName:`${(s[p]||s[0]).containerName}`,isInitialResizable:!0,isResizePanel:B,children:B?(0,o.jsx)("div",{"data-key":d,children:(0,o.jsx)(W,{parentDirection:h,layoutName:`${t}_center-${g}`,parentLayoutName:t,containerName:`${(s[p]||s[0]).containerName}`,depth:g+1,rootRef:v,initialCenterComponents:s.map(({navigationTitle:a,component:n,containerName:l,dropDocumentOutsideOption:c,screenKey:$})=>({navigationTitle:a,component:n,containerName:l,dropDocumentOutsideOption:c,screenKey:$})),screenKey:d,rootName:C})}):(0,o.jsxs)(pe.default,{keyName:(s[p]||s[0]).containerName,isDefaultScrollStyle:!0,children:[!x&&(0,o.jsx)("div",{className:`${X.default["flex-split-screen-drag-box-title-wrapper-sticky"]}`,children:(0,o.jsxs)("div",{"data-is_split":B,"data-layout_name":t,"data-parent_layout_name":e,"data-container_name":`${(s[p]||s[0]).containerName}`,className:`${X.default["flex-split-screen-drag-box-title-wrapper"]}`,children:[(0,o.jsx)(ge.default,{"data-layout_name":t,layoutName:t,children:s.map((a,n)=>(0,o.jsx)(Ce.default,{onClose:l=>{S.current===n&&s.length===1?z.dropMovementEventSubject.next({state:"remove",targetContainerName:r,targetParentLayoutName:e,targetLayoutName:t}):(s.length===S.current+1&&V(S.current-1),N(c=>{const $=H(c,a.containerName,()=>{}),O=`${t}=${d}`,y=(0,m.getCurrentSplitScreenComponents)(C,O)||{afterDropTargetComponent:T,beforeDropTargetComponent:f,centerDropTargetComponent:c,direction:h};return(0,m.setSplitScreen)(C,O,{...y,centerDropTargetComponent:$}),$}))},isActive:p===n,children:(0,o.jsx)(le.default,{screenKey:a.screenKey,onClick:()=>{V(n)},containerName:a.containerName,dropDocumentOutsideOption:a.dropDocumentOutsideOption,targetComponent:a.component,navigationTitle:a.navigationTitle,"data-container-name":a.containerName,"data-layout-name":t,"data-parent-layout-name":e,dropEndCallback:({x:l,y:c,containerName:$})=>{if(!v.current||!_.current)return;const O=$e({x:l,y:c,element:v.current}),y=ne({x:l,y:c,element:_.current});if(!O&&!y||!O&&y&&b.current.length>1){const K={};if(b.current.length>1){const{adjacentItem:k,adjacentIndex:U}=Oe(b.current,S.current);k&&S.current===n&&Object.assign(K,{x:l,y:c,targetComponent:k.component,nextContainerName:k.containerName,orderName:"center",dropTargetComponentEvent:{navigationTitle:k.navigationTitle,dropDocumentOutsideOption:k.dropDocumentOutsideOption,direction:h,screenKey:d}})}n===0?z.dropMovementEventSubject.next({state:"remove",targetContainerName:a.containerName,targetParentLayoutName:e,targetLayoutName:t,...K}):z.dropMovementEventSubject.next({state:"remove",targetContainerName:a.containerName,targetParentLayoutName:"",targetLayoutName:t,...K})}},children:a.navigationTitle})},a.navigationTitle+t+a.containerName))},t),(0,o.jsx)(de.default,{})]})}),(s[p]||s[0]).component]})},(s[p]||s[0]).containerName)}):(0,o.jsx)("div",{}),T.length!=0?(0,o.jsx)(o.Fragment,{children:T.map(({containerName:a,component:n,navigationTitle:l,dropDocumentOutsideOption:c,screenKey:$},O)=>(0,o.jsx)(Y.default,{containerName:a,isInitialResizable:!0,isResizePanel:O!==T.length-1,children:(0,o.jsx)(W,{parentDirection:h,layoutName:`${t}_after-${g}`,parentLayoutName:t,containerName:a,depth:g+1,rootRef:v,screenKey:$,initialCenterComponents:[{navigationTitle:l,component:n,containerName:a,dropDocumentOutsideOption:c,screenKey:$}],rootName:C})},a))}):(0,o.jsx)("div",{})]}),F&&(0,o.jsx)("div",{className:`${X.default["flex-split-screen-boundary-container"]}`,style:{...F},children:"\u2B07\uFE0F\uB4DC\uB86D\uD558\uBA74 \uD654\uBA74\uC774 \uBD84\uD560\uB429\uB2C8\uB2E4."})]})})}