@byeolnaerim/flex-layout 0.0.9 → 0.0.10

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