@byeolnaerim/flex-layout 0.0.9 → 0.0.10

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

@@ -1,232 +1 @@
-"use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { useSize } from "../hooks/useSizes";
-import { useFlexLayoutContext } from "../providers/FlexLayoutContext";
-import { setContainerRef } from "../store/FlexLayoutContainerStore";
-import styles from "../styles/FlexLayout.module.css";
-import { getGrow, mathGrow, mathWeight } from "../utils/FlexLayoutUtils";
-import FlexLayoutResizePanel from "./FlexLayoutResizePanel";
-function FlexLayoutContainer({
-  isFitContent,
-  isFitResize,
-  // fitContent,
-  // containerCount,
-  // layoutName,
-  containerName,
-  grow: initialGrow,
-  prevGrow: initialPrevGrow,
-  isInitialResizable,
-  isResizePanel,
-  children,
-  className,
-  panelMode
-}) {
-  const {
-    direction,
-    panelMovementMode,
-    panelClassName,
-    layoutName,
-    fitContent,
-    containerCount
-  } = useFlexLayoutContext();
-  const { ref, size } = (
-    // isFitContent && fitContent
-    //?
-    useSize(fitContent)
-  );
-  const flexContainerNodeRef = useRef(null);
-  const isUserResizingRef = useRef(false);
-  const handleResizingChange = useCallback((v) => {
-    isUserResizingRef.current = v;
-  }, []);
-  const flexContainerRef = useCallback(
-    (node) => {
-      flexContainerNodeRef.current = node;
-      if (node) {
-        setContainerRef(
-          layoutName,
-          containerName,
-          flexContainerNodeRef
-        );
-      } else {
-        setContainerRef(layoutName, containerName, null);
-      }
-    },
-    [layoutName, containerName]
-  );
-  const [growState, setGrowState] = useState(initialGrow);
-  useEffect(() => {
-    setGrowState(initialGrow);
-  }, [initialGrow]);
-  const [prevGrowState, setPrevGrowState] = useState(
-    initialPrevGrow
-  );
-  const [isFirstLoad, setIsFirstLoad] = useState(true);
-  useEffect(() => {
-    if (typeof window == "undefined" || flexContainerNodeRef.current === null)
-      return;
-    const storedGrow = sessionStorage.getItem(containerName);
-    if (storedGrow !== null) {
-      const parsed = parseFloat(storedGrow);
-      if (!isNaN(parsed)) {
-        flexContainerNodeRef.current.style.flex = `${parsed} 1 0%`;
-        setGrowState(parsed);
-      }
-    }
-  }, [containerName]);
-  useEffect(() => {
-    if (!flexContainerNodeRef.current) return;
-    const targetNode = flexContainerNodeRef.current;
-    const observer = new MutationObserver((mutations) => {
-      for (const mutation of mutations) {
-        if (mutation.type === "attributes" && mutation.attributeName === "style" && targetNode.style.flex) {
-          const flexValue = targetNode.style.flex;
-          const parsedGrow = parseFloat(flexValue.split(" ")[0]);
-          if (!isNaN(parsedGrow)) {
-            setGrowState(parsedGrow);
-          }
-        }
-      }
-    });
-    observer.observe(targetNode, {
-      attributes: true,
-      attributeFilter: ["style"],
-      attributeOldValue: true
-    });
-    return () => {
-      observer.disconnect();
-    };
-  }, [containerName]);
-  useEffect(() => {
-    if (!flexContainerNodeRef.current || !ref || !ref.current || !size || !fitContent || // getGrow(flexContainerNodeRef.current) == 0 ||
-    isUserResizingRef.current)
-      return;
-    requestAnimationFrame(() => {
-      if (!flexContainerNodeRef.current) return;
-      const sizeName = `${fitContent.charAt(0).toUpperCase() + fitContent.substring(1)}`;
-      const parentSize = flexContainerNodeRef.current.parentElement && flexContainerNodeRef.current.parentElement["client" + sizeName] || 0;
-      if (isFitContent) {
-        flexContainerNodeRef.current.style["max" + sizeName] = size + "px";
-      }
-      if (!isFitResize && isFirstLoad) {
-        setIsFirstLoad(false);
-        return;
-      }
-      if (getGrow(flexContainerNodeRef.current) != 0 && isFitResize) {
-        const newGrow = mathGrow(size, parentSize, containerCount);
-        setPrevGrowState(growState);
-        setGrowState(newGrow);
-      }
-    });
-  }, [size, containerCount, isFitResize, children]);
-  useEffect(() => {
-    if (!flexContainerNodeRef.current) return;
-    let notGrowList = [];
-    let containerList = [
-      ...flexContainerNodeRef.current.parentElement?.children || []
-    ].filter((e) => e.hasAttribute("data-container_name"));
-    let remainingGrow = containerList.reduce((t, e, i) => {
-      let item = e;
-      if (item.classList.contains(styles["flex-resize-panel"])) return t;
-      if (e.hasAttribute("data-grow") == false || e.getAttribute("data-is_resize") === "true") {
-        notGrowList.push(item);
-        return t;
-      }
-      let grow = parseFloat(item.dataset.grow || "");
-      item.style.flex = `${grow} 1 0%`;
-      t -= grow;
-      return t;
-    }, containerList.length);
-    if (notGrowList.length != 0) {
-      let resizeWeight = mathWeight(notGrowList.length, remainingGrow);
-      notGrowList.forEach((e) => {
-        e.dataset.grow = resizeWeight.toString();
-        e.style.flex = `${resizeWeight} 1 0%`;
-      });
-    }
-  }, []);
-  useEffect(() => {
-    if (!flexContainerNodeRef.current || !isFitContent || !fitContent || !size || getGrow(flexContainerNodeRef.current) == 0)
-      return;
-    const parent = flexContainerNodeRef.current.parentElement;
-    if (!parent) return;
-    const sizeName = fitContent.charAt(0).toUpperCase() + fitContent.substring(1);
-    const parentSize = parent["client" + sizeName] || 0;
-    if (!parentSize || containerCount <= 0) return;
-    const nextGrowRaw = mathGrow(size, parentSize, containerCount);
-    const nextGrow = Math.min(containerCount, Math.max(0, nextGrowRaw));
-    const currentGrow = getGrow(flexContainerNodeRef.current);
-    if (Math.abs(nextGrow - currentGrow) < 1e-3) return;
-    setPrevGrowState(currentGrow);
-    setGrowState(nextGrow);
-    const containers = [...parent.children || []].filter((el) => {
-      const item = el;
-      return item.hasAttribute("data-container_name") && !item.classList.contains(styles["flex-resize-panel"]);
-    });
-    const siblings = containers.filter(
-      (el) => el !== flexContainerNodeRef.current
-    );
-    const adjustable = siblings.filter((el) => el.style.flex !== "0 1 0%");
-    const remaining = containerCount - nextGrow;
-    if (remaining <= 0 || adjustable.length === 0) return;
-    const oldSum = adjustable.reduce((sum, el) => sum + getGrow(el), 0);
-    if (oldSum <= 0) {
-      const each = remaining / adjustable.length;
-      adjustable.forEach((el) => {
-        el.dataset.grow = each.toString();
-        el.style.flex = `${each} 1 0%`;
-      });
-    } else {
-      adjustable.forEach((el) => {
-        const g = getGrow(el);
-        const scaled = remaining * (g / oldSum);
-        el.dataset.grow = scaled.toString();
-        el.style.flex = `${scaled} 1 0%`;
-      });
-    }
-  }, [size, isFitContent, fitContent, containerCount]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        id: containerName,
-        "data-container_name": containerName,
-        ref: flexContainerRef,
-        className: `${styles["flex-container"]} ${className && className !== "" ? className : ""}`,
-        ...growState !== void 0 ? { ["data-grow"]: growState } : {},
-        ...prevGrowState != void 0 ? { ["data-prev_grow"]: prevGrowState } : {},
-        "data-is_resize": isInitialResizable,
-        "data-is_resize_panel": isResizePanel,
-        style: growState !== void 0 && {
-          flex: `${growState} 1 0%`
-        } || {},
-        children: isFitContent && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `${styles["flex-content-fit-wrapper"]}`,
-            ref,
-            children
-          }
-        ) || children
-      }
-    ),
-    isResizePanel && /* @__PURE__ */ jsx(
-      FlexLayoutResizePanel,
-      {
-        containerName,
-        layoutName,
-        direction,
-        containerCount,
-        panelMode,
-        panelClassName,
-        panelMovementMode,
-        onResizingChange: handleResizingChange
-      }
-    )
-  ] });
-}
-export {
-  FlexLayoutContainer as default
-};
-//# sourceMappingURL=FlexLayoutContainer.js.map
+"use client";import{Fragment as re,jsx as A,jsxs as ne}from"react/jsx-runtime";import{useCallback as W,useEffect as m,useRef as P,useState as $}from"react";import{useSize as X}from"../hooks/useSizes";import{useFlexLayoutContext as Y}from"../providers/FlexLayoutContext";import{setContainerRef as U}from"../store/FlexLayoutContainerStore";import L from"../styles/FlexLayout.module.css";import{getGrow as w,mathGrow as D,mathWeight as Z}from"../utils/FlexLayoutUtils";import ee from"./FlexLayoutResizePanel";function te({isFitContent:b,isFitResize:M,containerName:o,grow:v,prevGrow:I,isInitialResizable:O,isResizePanel:_,children:E,className:C,panelMode:V}){const{direction:k,panelMovementMode:q,panelClassName:j,layoutName:y,fitContent:l,containerCount:u}=Y(),{ref:z,size:f}=X(l),t=P(null),S=P(!1),B=W(e=>{S.current=e},[]),J=W(e=>{t.current=e,e?U(y,o,t):U(y,o,null)},[y,o]),[p,g]=$(v);m(()=>{g(v)},[v]);const[F,R]=$(I),[K,Q]=$(!0);return m(()=>{if(typeof window>"u"||t.current===null)return;const e=sessionStorage.getItem(o);if(e!==null){const s=parseFloat(e);isNaN(s)||(t.current.style.flex=`${s} 1 0%`,g(s))}},[o]),m(()=>{if(!t.current)return;const e=t.current,s=new MutationObserver(c=>{for(const r of c)if(r.type==="attributes"&&r.attributeName==="style"&&e.style.flex){const a=e.style.flex,d=parseFloat(a.split(" ")[0]);isNaN(d)||g(d)}});return s.observe(e,{attributes:!0,attributeFilter:["style"],attributeOldValue:!0}),()=>{s.disconnect()}},[o]),m(()=>{!t.current||!z||!z.current||!f||!l||S.current||requestAnimationFrame(()=>{if(!t.current)return;const e=`${l.charAt(0).toUpperCase()+l.substring(1)}`,s=t.current.parentElement&&t.current.parentElement["client"+e]||0;if(b&&(t.current.style["max"+e]=f+"px"),!M&&K){Q(!1);return}if(w(t.current)!=0&&M){const c=D(f,s,u);R(p),g(c)}})},[f,u,M,E]),m(()=>{if(!t.current)return;let e=[],s=[...t.current.parentElement?.children||[]].filter(r=>r.hasAttribute("data-container_name")),c=s.reduce((r,a,d)=>{let h=a;if(h.classList.contains(L["flex-resize-panel"]))return r;if(a.hasAttribute("data-grow")==!1||a.getAttribute("data-is_resize")==="true")return e.push(h),r;let G=parseFloat(h.dataset.grow||"");return h.style.flex=`${G} 1 0%`,r-=G,r},s.length);if(e.length!=0){let r=Z(e.length,c);e.forEach(a=>{a.dataset.grow=r.toString(),a.style.flex=`${r} 1 0%`})}},[]),m(()=>{if(!t.current||!b||!l||!f||w(t.current)==0||S.current)return;const e=t.current.parentElement;if(!e)return;const s=l.charAt(0).toUpperCase()+l.substring(1),c=e["client"+s]||0;if(!c||u<=0)return;const r=D(f,c,u),a=Math.min(u,Math.max(0,r)),d=w(t.current);if(Math.abs(a-d)<.001)return;R(d),g(a);const x=[...e.children||[]].filter(n=>{const i=n;return i.hasAttribute("data-container_name")&&!i.classList.contains(L["flex-resize-panel"])}).filter(n=>n!==t.current).filter(n=>n.style.flex!=="0 1 0%"),H=u-a;if(H<=0||x.length===0)return;const T=x.reduce((n,i)=>n+w(i),0);if(T<=0){const n=H/x.length;x.forEach(i=>{i.dataset.grow=n.toString(),i.style.flex=`${n} 1 0%`})}else x.forEach(n=>{const i=w(n),N=H*(i/T);n.dataset.grow=N.toString(),n.style.flex=`${N} 1 0%`})},[f,b,l,u]),ne(re,{children:[A("div",{id:o,"data-container_name":o,ref:J,className:`${L["flex-container"]} ${C&&C!==""?C:""}`,...p!==void 0?{"data-grow":p}:{},...F!=null?{"data-prev_grow":F}:{},"data-is_resize":O,"data-is_resize_panel":_,style:p!==void 0&&{flex:`${p} 1 0%`}||{},children:b&&A("div",{className:`${L["flex-content-fit-wrapper"]}`,ref:z,children:E})||E}),_&&A(ee,{containerName:o,layoutName:y,direction:k,containerCount:u,panelMode:V,panelClassName:j,panelMovementMode:q,onResizingChange:B})]})}export{te as default};

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

@@ -1,68 +1 @@
-"use strict";
-"use client";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var FlexLayoutIFramePane_exports = {};
-__export(FlexLayoutIFramePane_exports, {
-  FlexLayoutIFramePane: () => FlexLayoutIFramePane
-});
-module.exports = __toCommonJS(FlexLayoutIFramePane_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_rxjs = require("rxjs");
-var import_hooks = require("../hooks");
-function FlexLayoutIFramePane({
-  url,
-  screenKey
-}) {
-  const [blockPointer, setBlockPointer] = (0, import_react.useState)(false);
-  (0, import_react.useEffect)(() => {
-    const draggingSubject = import_hooks.dragStateSubject.pipe(
-      (0, import_rxjs.map)((s) => !!s?.isDragging),
-      (0, import_rxjs.startWith)(false),
-      (0, import_rxjs.distinctUntilChanged)()
-    );
-    const sub = (0, import_rxjs.combineLatest)([draggingSubject, import_hooks.isResizingSubject]).pipe(
-      (0, import_rxjs.map)(([dragging, resizing]) => dragging || resizing),
-      (0, import_rxjs.distinctUntilChanged)()
-    ).subscribe(setBlockPointer);
-    return () => sub.unsubscribe();
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "iframe",
-    {
-      src: url,
-      style: {
-        width: "100%",
-        height: "100%",
-        border: 0,
-        //리사이즈 및 드래깅 중 ifram이 이벤트 못먹게 방지
-        pointerEvents: blockPointer ? "none" : "auto"
-      },
-      sandbox: "allow-same-origin allow-scripts allow-forms allow-popups",
-      referrerPolicy: "no-referrer",
-      loading: "lazy"
-    },
-    screenKey
-  );
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  FlexLayoutIFramePane
-});
-//# sourceMappingURL=FlexLayoutIFramePane.cjs.map
+"use strict";"use client";var c=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var d=(t,e)=>{for(var o in e)c(t,o,{get:e[o],enumerable:!0})},y=(t,e,o,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of f(e))!m.call(t,i)&&i!==o&&c(t,i,{get:()=>e[i],enumerable:!(s=b(e,i))||s.enumerable});return t};var h=t=>y(c({},"__esModule",{value:!0}),t);var S={};d(S,{FlexLayoutIFramePane:()=>w});module.exports=h(S);var u=require("react/jsx-runtime"),n=require("react"),r=require("rxjs"),a=require("../hooks");function w({url:t,screenKey:e}){const[o,s]=(0,n.useState)(!1);return(0,n.useEffect)(()=>{const i=a.dragStateSubject.pipe((0,r.map)(l=>!!l?.isDragging),(0,r.startWith)(!1),(0,r.distinctUntilChanged)()),g=(0,r.combineLatest)([i,a.isResizingSubject]).pipe((0,r.map)(([l,p])=>l||p),(0,r.distinctUntilChanged)()).subscribe(s);return()=>g.unsubscribe()},[]),(0,u.jsx)("iframe",{src:t,style:{width:"100%",height:"100%",border:0,pointerEvents:o?"none":"auto"},sandbox:"allow-same-origin allow-scripts allow-forms allow-popups",referrerPolicy:"no-referrer",loading:"lazy"},e)}0&&(module.exports={FlexLayoutIFramePane});

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

@@ -1,44 +1 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { combineLatest, distinctUntilChanged, map, startWith } from "rxjs";
-import { dragStateSubject, isResizingSubject } from "../hooks";
-function FlexLayoutIFramePane({
-  url,
-  screenKey
-}) {
-  const [blockPointer, setBlockPointer] = useState(false);
-  useEffect(() => {
-    const draggingSubject = dragStateSubject.pipe(
-      map((s) => !!s?.isDragging),
-      startWith(false),
-      distinctUntilChanged()
-    );
-    const sub = combineLatest([draggingSubject, isResizingSubject]).pipe(
-      map(([dragging, resizing]) => dragging || resizing),
-      distinctUntilChanged()
-    ).subscribe(setBlockPointer);
-    return () => sub.unsubscribe();
-  }, []);
-  return /* @__PURE__ */ jsx(
-    "iframe",
-    {
-      src: url,
-      style: {
-        width: "100%",
-        height: "100%",
-        border: 0,
-        //리사이즈 및 드래깅 중 ifram이 이벤트 못먹게 방지
-        pointerEvents: blockPointer ? "none" : "auto"
-      },
-      sandbox: "allow-same-origin allow-scripts allow-forms allow-popups",
-      referrerPolicy: "no-referrer",
-      loading: "lazy"
-    },
-    screenKey
-  );
-}
-export {
-  FlexLayoutIFramePane
-};
-//# sourceMappingURL=FlexLayoutIFramePane.js.map
+"use client";import{jsx as d}from"react/jsx-runtime";import{useEffect as u,useState as g}from"react";import{combineLatest as p,distinctUntilChanged as r,map as t,startWith as b}from"rxjs";import{dragStateSubject as f,isResizingSubject as m}from"../hooks";function S({url:i,screenKey:o}){const[s,n]=g(!1);return u(()=>{const a=f.pipe(t(e=>!!e?.isDragging),b(!1),r()),l=p([a,m]).pipe(t(([e,c])=>e||c),r()).subscribe(n);return()=>l.unsubscribe()},[]),d("iframe",{src:i,style:{width:"100%",height:"100%",border:0,pointerEvents:s?"none":"auto"},sandbox:"allow-same-origin allow-scripts allow-forms allow-popups",referrerPolicy:"no-referrer",loading:"lazy"},o)}export{S as FlexLayoutIFramePane};

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

@@ -1,246 +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 FlexLayoutResizePanel_exports = {};
-__export(FlexLayoutResizePanel_exports, {
-  default: () => FlexLayoutResizePanel
-});
-module.exports = __toCommonJS(FlexLayoutResizePanel_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_hooks = require("../hooks");
-var import_FlexLayoutContainerStore = require("../store/FlexLayoutContainerStore");
-var import_FlexLayout = __toESM(require("../styles/FlexLayout.module.css"), 1);
-var import_FlexLayoutUtils = require("../utils/FlexLayoutUtils");
-const flexDirectionModel = {
-  row: {
-    xy: "x",
-    targetDirection: "left",
-    nextDirection: "right",
-    sizeName: "width",
-    resizeCursor: "ew-resize"
-  },
-  column: {
-    xy: "y",
-    targetDirection: "top",
-    nextDirection: "bottom",
-    sizeName: "height",
-    resizeCursor: "ns-resize"
-  }
-};
-function FlexLayoutResizePanel({
-  direction,
-  containerCount,
-  panelMode = "default",
-  containerName,
-  layoutName,
-  panelClassName,
-  panelMovementMode,
-  onResizingChange
-}) {
-  const directionRef = (0, import_react.useRef)(direction);
-  const movementModeRef = (0, import_react.useRef)(panelMovementMode);
-  (0, import_react.useEffect)(() => {
-    directionRef.current = direction;
-  }, [direction]);
-  (0, import_react.useEffect)(() => {
-    movementModeRef.current = panelMovementMode;
-  }, [panelMovementMode]);
-  const isResizePanelClickRef = (0, import_react.useRef)(false);
-  const prevTouchEventRef = (0, import_react.useRef)(null);
-  const parentSizeRef = (0, import_react.useRef)(0);
-  const totalMovementRef = (0, import_react.useRef)(0);
-  const containerCountRef = (0, import_react.useRef)(containerCount);
-  const panelRef = (0, import_react.useRef)(null);
-  (0, import_react.useEffect)(() => {
-    return () => {
-      import_hooks.isResizingSubject.next(false);
-      document.body.style.cursor = "";
-    };
-  }, []);
-  (0, import_react.useEffect)(() => {
-    containerCountRef.current = containerCount;
-  }, [containerCount]);
-  const panelMouseDownEvent = (event) => {
-    if (!panelRef.current || !panelRef.current.parentElement) return;
-    isResizePanelClickRef.current = true;
-    onResizingChange?.(true);
-    containerCountRef.current = [
-      ...panelRef.current.parentElement.children
-    ].filter((e) => e.hasAttribute("data-container_name")).length;
-    const sizeName = flexDirectionModel[direction].sizeName;
-    parentSizeRef.current = panelRef.current.parentElement.getBoundingClientRect()[sizeName];
-    prevTouchEventRef.current = null;
-    totalMovementRef.current = 0;
-    import_hooks.isResizingSubject.next(true);
-    if (!parentSizeRef.current) return;
-    document.body.style.cursor = flexDirectionModel[direction].resizeCursor;
-  };
-  const panelMouseUpEvent = () => {
-    isResizePanelClickRef.current = false;
-    onResizingChange?.(false);
-    parentSizeRef.current = 0;
-    totalMovementRef.current = 0;
-    prevTouchEventRef.current = null;
-    import_hooks.isResizingSubject.next(false);
-    document.body.style.cursor = "";
-  };
-  function moveMouseFlex(originTarget, resizePanel, moveEvent, dir, mode) {
-    const model = flexDirectionModel[dir];
-    const movement = moveEvent["movement" + model.xy.toUpperCase()];
-    totalMovementRef.current += movement;
-    const minSizeName = "min-" + model.sizeName;
-    const maxSizeName = "max-" + model.sizeName;
-    let targetElement = (0, import_FlexLayoutUtils.findNotCloseFlexContent)(
-      originTarget,
-      "previousElementSibling"
-    );
-    if (panelMovementMode === "divorce" && totalMovementRef.current > 0 || panelMovementMode === "bulldozer" && movement > 0 || !targetElement)
-      targetElement = originTarget;
-    let nextElement = (0, import_FlexLayoutUtils.findNotCloseFlexContent)(
-      resizePanel.nextElementSibling,
-      "nextElementSibling"
-    );
-    if (panelMovementMode === "divorce" && totalMovementRef.current < 0 || panelMovementMode === "bulldozer" && movement < 0 || !nextElement)
-      nextElement = resizePanel.nextElementSibling;
-    if (!targetElement || !nextElement) return;
-    const targetRect = targetElement.getBoundingClientRect();
-    const targetStyle = window.getComputedStyle(targetElement);
-    const targetMinSize = parseFloat(targetStyle.getPropertyValue(minSizeName)) || 0;
-    const targetMaxSize = parseFloat(targetStyle.getPropertyValue(maxSizeName)) || 0;
-    const nextRect = nextElement.getBoundingClientRect();
-    const nextStyle = window.getComputedStyle(nextElement);
-    const nextMinSize = parseFloat(nextStyle.getPropertyValue(minSizeName)) || 0;
-    const nextMaxSize = parseFloat(nextStyle.getPropertyValue(maxSizeName)) || 0;
-    let targetSize = targetRect[model.sizeName] + movement;
-    let nextElementSize = nextRect[model.sizeName] - movement;
-    if (targetMaxSize > 0 && targetSize > targetMaxSize) {
-      return;
-    }
-    if (nextMaxSize > 0 && nextElementSize > nextMaxSize) {
-      return;
-    }
-    if ((0, import_FlexLayoutUtils.isOverMove)(targetSize, targetMinSize)) {
-      targetSize = 0;
-      nextElementSize = nextRect[model.sizeName];
-    } else if ((0, import_FlexLayoutUtils.isOverMove)(nextElementSize, nextMinSize)) {
-      nextElementSize = 0;
-      targetSize = targetRect[model.sizeName];
-    }
-    const targetFlexGrow = targetSize / (parentSizeRef.current - 1) * containerCountRef.current;
-    const nextElementFlexGrow = nextElementSize / (parentSizeRef.current - 1) * containerCountRef.current;
-    if (!(targetElement instanceof HTMLElement)) return;
-    if (!(nextElement instanceof HTMLElement)) return;
-    targetElement.style.flex = `${targetFlexGrow} 1 0%`;
-    nextElement.style.flex = `${nextElementFlexGrow} 1 0%`;
-  }
-  (0, import_react.useEffect)(() => {
-    const addGlobalMoveEvent = (event) => {
-      if (!isResizePanelClickRef.current || !panelRef.current) {
-        return;
-      }
-      event.preventDefault();
-      const dir = directionRef.current;
-      const mode = movementModeRef.current;
-      const targetElement = panelRef.current.previousElementSibling;
-      const targetPanel = panelRef.current;
-      if (!targetElement || !targetPanel) return;
-      let move = { movementX: 0, movementY: 0 };
-      if (window.TouchEvent && event instanceof window.TouchEvent) {
-        const prev = prevTouchEventRef.current;
-        if (!prev) {
-          prevTouchEventRef.current = event;
-          return;
-        }
-        move.movementX = (prev.touches[0].pageX - event.touches[0].pageX) * -1;
-        move.movementY = (prev.touches[0].pageY - event.touches[0].pageY) * -1;
-        prevTouchEventRef.current = event;
-      } else {
-        move.movementX = event.movementX;
-        move.movementY = event.movementY;
-      }
-      moveMouseFlex(targetElement, targetPanel, move, dir, mode);
-    };
-    ["mousemove", "touchmove"].forEach((eventName) => {
-      window.addEventListener(eventName, addGlobalMoveEvent, {
-        passive: false
-      });
-    });
-    [
-      "mouseup",
-      "touchend",
-      "touchcancel",
-      // 터치 제스처 시스템 인터럽트
-      "pointerup",
-      // 범용 포인터 이벤트
-      "pointercancel",
-      "blur"
-      // 윈도우 포커스 아웃 (Alt+Tab 등)
-    ].forEach((eventName) => {
-      window.addEventListener(eventName, panelMouseUpEvent);
-    });
-    return () => {
-      ["mousemove", "touchmove"].forEach((eventName) => {
-        window.removeEventListener(eventName, addGlobalMoveEvent);
-      });
-      [
-        "mouseup",
-        "touchend",
-        "touchcancel",
-        // 터치 제스처 시스템 인터럽트
-        "pointerup",
-        // 범용 포인터 이벤트
-        "pointercancel",
-        "blur"
-        // 윈도우 포커스 아웃 (Alt+Tab 등)
-      ].forEach((eventName) => {
-        window.removeEventListener(eventName, panelMouseUpEvent);
-      });
-    };
-  }, []);
-  (0, import_react.useEffect)(() => {
-    if (!panelRef.current) return;
-    (0, import_FlexLayoutContainerStore.setResizePanelRef)(layoutName, containerName, panelRef);
-    return () => {
-      (0, import_FlexLayoutContainerStore.setResizePanelRef)(layoutName, containerName, null);
-    };
-  }, [containerName, layoutName]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      id: containerName + "_resize_panel",
-      className: `${import_FlexLayout.default["flex-resize-panel"]} ${import_FlexLayout.default[panelMode]} ${panelClassName && panelClassName !== "" ? panelClassName : ""}`,
-      ref: panelRef,
-      onMouseDown: panelMouseDownEvent,
-      onTouchStart: panelMouseDownEvent,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_FlexLayout.default.hover })
-    }
-  );
-}
-//# sourceMappingURL=FlexLayoutResizePanel.cjs.map
+"use strict";"use client";var fe=Object.create;var G=Object.defineProperty;var de=Object.getOwnPropertyDescriptor;var pe=Object.getOwnPropertyNames;var he=Object.getPrototypeOf,ge=Object.prototype.hasOwnProperty;var Ee=(e,t)=>{for(var n in t)G(e,n,{get:t[n],enumerable:!0})},te=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let c of pe(t))!ge.call(e,c)&&c!==n&&G(e,c,{get:()=>t[c],enumerable:!(r=de(t,c))||r.enumerable});return e};var ve=(e,t,n)=>(n=e!=null?fe(he(e)):{},te(t||!e||!e.__esModule?G(n,"default",{value:e,enumerable:!0}):n,e)),Me=e=>te(G({},"__esModule",{value:!0}),e);var xe={};Ee(xe,{default:()=>oe});module.exports=Me(xe);var J=require("react/jsx-runtime"),u=require("react"),T=require("../hooks"),K=require("../store/FlexLayoutContainerStore"),C=ve(require("../styles/FlexLayout.module.css"),1),L=require("../utils/FlexLayoutUtils");const j={row:{xy:"x",targetDirection:"left",nextDirection:"right",sizeName:"width",resizeCursor:"ew-resize"},column:{xy:"y",targetDirection:"top",nextDirection:"bottom",sizeName:"height",resizeCursor:"ns-resize"}},h=4,ne=(e,t,n,r)=>{const c=new Map,l=(a,g)=>{const s=document.elementsFromPoint(a,g);for(const m of s){const M=m.closest?.(`.${C.default["flex-resize-panel"]}`);if(!M)continue;const f=M.dataset.resize_panel_key;f&&(c.has(f)||c.set(f,{el:M,key:f,dir:M.dataset.direction}))}};if([[0,0],[-h,0],[h,0],[0,-h],[0,h],[-h,-h],[h,-h],[-h,h],[h,h]].forEach(([a,g])=>l(e+a,t+g)),n&&r){const a=n.getBoundingClientRect(),g=r==="row"?a.width:r==="column"?a.height:1,s=Math.max(1,Math.ceil(g/2)),m=Math.ceil(h+g*2),p=Math.max(h,Math.ceil(g*2)),M=Array.from(new Set([1,Math.floor(p/2),Math.max(1,p-1)]));if(r==="row")for(let f=-m;f<=m;f+=s)for(const b of M)l(a.left-b,t+f),l(a.right+b,t+f);else if(r==="column")for(let f=-m;f<=m;f+=s)for(const b of M)l(e+f,a.top-b),l(e+f,a.bottom+b)}if(r){const g=[...c.values()].filter(s=>s.dir&&s.dir!==r);for(const s of g){const m=s.el.getBoundingClientRect(),p=s.dir==="row"?m.width:s.dir==="column"?m.height:1,M=Math.max(1,Math.ceil(p/2)),f=Math.ceil(h+p*2),b=Math.max(h,Math.ceil(p*2)),F=Array.from(new Set([1,Math.floor(b/2),Math.max(1,b-1)]));if(r==="column"&&s.dir==="row")for(let y=-f;y<=f;y+=M)for(const o of F)l(m.left-o,t+y),l(m.right+o,t+y);else if(r==="row"&&s.dir==="column")for(let y=-f;y<=f;y+=M)for(const o of F)l(e+y,m.top-o),l(e+y,m.bottom+o)}}return[...c.values()]},D=(e,t)=>{if(!e||e==="auto")return null;if(e.endsWith("px")){const r=parseFloat(e);return Number.isFinite(r)?r:null}if(e.endsWith("%")){const r=parseFloat(e);return Number.isFinite(r)?t*r/100:null}const n=parseFloat(e);return Number.isFinite(n)?n:null},ye=(e,t,n)=>e>=n.left&&e<=n.right&&t>=n.top&&t<=n.bottom,be=e=>{const t=e.getBoundingClientRect(),n=getComputedStyle(e,"::after");if(!n||n.content==="none"||n.content==="normal"||n.display==="none"||n.visibility==="hidden")return null;const r=D(n.width,t.width),c=D(n.height,t.height);if(!r||!c)return null;const l=D(n.left,t.width),a=D(n.right,t.width),g=D(n.top,t.height),s=D(n.bottom,t.height);let m=t.left;l!==null?m=t.left+l:a!==null&&(m=t.right-a-r);let p=t.top;return g!==null?p=t.top+g:s!==null&&(p=t.bottom-s-c),{left:m,top:p,right:m+r,bottom:p+c}},re=(e,t,n,r,c)=>{const l=n.getBoundingClientRect(),a=be(n);if(a&&ye(e,t,a))return!1;const g=r==="row"?l.width:r==="column"?l.height:1,s=Math.max(c,Math.ceil(g));return r==="row"?e>=l.left-s&&e<=l.right+s:r==="column"?t>=l.top-s&&t<=l.bottom+s:!0};function oe({direction:e,containerCount:t,panelMode:n="default",containerName:r,layoutName:c,panelClassName:l,panelMovementMode:a,onResizingChange:g}){const s=(0,u.useRef)(e),m=(0,u.useRef)(a),p=(0,u.useMemo)(()=>`${c}::${r}`,[c,r]);(0,u.useEffect)(()=>{s.current=e},[e]),(0,u.useEffect)(()=>{m.current=a},[a]);const M=(0,u.useRef)(!1),f=(0,u.useRef)(null),b=(0,u.useRef)(0),F=(0,u.useRef)(0),y=(0,u.useRef)(t),o=(0,u.useRef)(null),B=(0,u.useRef)(null),k=(0,u.useRef)(null);(0,u.useEffect)(()=>()=>{T.isResizingSubject.next(!1),document.body.style.cursor="",k.current?.()},[]),(0,u.useEffect)(()=>{y.current=t},[t]);const se=()=>{if(!o.current||!o.current.parentElement)return;M.current=!0,g?.(!0),y.current=[...o.current.parentElement.children].filter(i=>i.hasAttribute("data-container_name")).length;const d=j[e].sizeName;b.current=o.current.parentElement.getBoundingClientRect()[d],f.current=null,F.current=0,T.isResizingSubject.next(!0)},ie=()=>{M.current=!1,g?.(!1),b.current=0,F.current=0,B.current=null,T.isResizingSubject.next(!1),document.body.style.cursor="",O()};function le(d,i,x,z,S){const E=j[z],H=x["movement"+E.xy.toUpperCase()];F.current+=H;const A="min-"+E.sizeName,X="max-"+E.sizeName;let R=(0,L.findNotCloseFlexContent)(d,"previousElementSibling");(S==="divorce"&&F.current>0||S==="bulldozer"&&H>0||!R)&&(R=d);let w=(0,L.findNotCloseFlexContent)(i.nextElementSibling,"nextElementSibling");if((S==="divorce"&&F.current<0||S==="bulldozer"&&H<0||!w)&&(w=i.nextElementSibling),!R||!w)return;const N=R.getBoundingClientRect(),$=window.getComputedStyle(R),Y=parseFloat($.getPropertyValue(A))||0,v=parseFloat($.getPropertyValue(X))||0,P=w.getBoundingClientRect(),I=window.getComputedStyle(w),W=parseFloat(I.getPropertyValue(A))||0,ee=parseFloat(I.getPropertyValue(X))||0;let _=N[E.sizeName]+H,V=P[E.sizeName]-H;if(v>0&&_>v||ee>0&&V>ee)return;(0,L.isOverMove)(_,Y)?(_=0,V=P[E.sizeName]):(0,L.isOverMove)(V,W)&&(V=0,_=N[E.sizeName]);const ae=_/(b.current-1)*y.current,me=V/(b.current-1)*y.current;R instanceof HTMLElement&&w instanceof HTMLElement&&(R.style.flex=`${ae} 1 0%`,w.style.flex=`${me} 1 0%`)}(0,u.useEffect)(()=>{const d=T.resizeDragSubject.subscribe(i=>{if(i.type==="START"){if(!i.targets.includes(p))return;B.current=i.sessionId,se(),i.cursor&&(document.body.style.cursor=i.cursor);return}if(i.type==="MOVE"){if(B.current!==i.sessionId||!M.current||!o.current)return;const x=s.current,z=m.current,S=o.current.previousElementSibling,E=o.current;if(!S||!E)return;le(S,E,{movementX:i.movementX,movementY:i.movementY},x,z);return}if(i.type==="END"){if(B.current!==i.sessionId)return;ie()}});return()=>d.unsubscribe()},[p]);const Q=d=>{if(!o.current)return;d.preventDefault?.();const i=d.nativeEvent,x=(0,L.getClientXy)(i);if(!x)return;const z=s.current,S=re(x.clientX,x.clientY,o.current,z,h),E=S?ne(x.clientX,x.clientY,o.current,z):[{el:o.current,key:p,dir:z}],H=new Set([p]);E.forEach(v=>H.add(v.key));const A=[...H],X=S&&A.length>=2?"move":j[z].resizeCursor,R=`${Date.now()}_${Math.random().toString(16).slice(2)}`;T.resizeDragSubject.next({type:"START",sessionId:R,targets:A,cursor:X}),k.current?.();let w=x.clientX,N=x.clientY;const $=v=>{v.preventDefault?.();const P=(0,L.getClientXy)(v);if(!P)return;const I=P.clientX-w,W=P.clientY-N;w=P.clientX,N=P.clientY,T.resizeDragSubject.next({type:"MOVE",sessionId:R,movementX:I,movementY:W})},Y=()=>{k.current?.(),k.current=null,T.resizeDragSubject.next({type:"END",sessionId:R})};["mousemove","touchmove"].forEach(v=>{window.addEventListener(v,$,{passive:!1})}),["mouseup","touchend","touchcancel","pointerup","pointercancel","blur"].forEach(v=>window.addEventListener(v,Y)),k.current=()=>{["mousemove","touchmove"].forEach(v=>window.removeEventListener(v,$)),["mouseup","touchend","touchcancel","pointerup","pointercancel","blur"].forEach(v=>window.removeEventListener(v,Y))}};(0,u.useEffect)(()=>{if(o.current)return(0,K.setResizePanelRef)(c,r,o),()=>{(0,K.setResizePanelRef)(c,r,null)}},[r,c]);const q=(0,u.useRef)([]),U=(0,u.useRef)(null),O=()=>{for(const d of q.current)d.querySelector(`.${C.default.hover}`)?.removeAttribute("data-is_hover");q.current=[]},ce=d=>{O();for(const i of d)i.querySelector(`.${C.default.hover}`)?.setAttribute("data-is_hover","");q.current=d},Z=d=>{o.current&&(U.current&&cancelAnimationFrame(U.current),U.current=requestAnimationFrame(()=>{const i=s.current;if(!re(d.clientX,d.clientY,o.current,i,h)){o.current.style.cursor="",O();return}const S=ne(d.clientX,d.clientY,o.current,i).filter(E=>E.dir&&E.dir!==i).map(E=>E.el);o.current.style.cursor=S.length>0?"move":"",ce(S)}))},ue=()=>{o.current&&(o.current.style.cursor="",O())};return(0,J.jsx)("div",{id:r+"_resize_panel","data-resize_panel_key":p,"data-direction":e,className:`${C.default["flex-resize-panel"]} ${C.default[n]} ${l&&l!==""?l:""}`,ref:o,onMouseDown:Q,onTouchStart:Q,onMouseMove:Z,onMouseEnter:Z,onMouseLeave:ue,children:(0,J.jsx)("div",{className:C.default.hover,"aria-hidden":!0})})}