@byeolnaerim/flex-layout 0.0.8 → 0.0.10

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

@@ -1,192 +1 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var FlexLayoutContainerStore = require('../store/FlexLayoutContainerStore');
-var styles = require('../styles/FlexLayout.module.css');
-var FlexLayoutUtils = require('../utils/FlexLayoutUtils');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-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
-}) {
-  const directionRef = react.useRef(direction);
-  const movementModeRef = react.useRef(panelMovementMode);
-  react.useEffect(() => {
-    directionRef.current = direction;
-  }, [direction]);
-  react.useEffect(() => {
-    movementModeRef.current = panelMovementMode;
-  }, [panelMovementMode]);
-  const isResizePanelClickRef = react.useRef(false);
-  const prevTouchEventRef = react.useRef(null);
-  const parentSizeRef = react.useRef(0);
-  const totalMovementRef = react.useRef(0);
-  const containerCountRef = react.useRef(containerCount);
-  const panelRef = react.useRef(null);
-  react.useEffect(() => {
-    return () => {
-      document.body.style.cursor = "";
-    };
-  }, []);
-  react.useEffect(() => {
-    containerCountRef.current = containerCount;
-  }, [containerCount]);
-  const panelMouseDownEvent = (event) => {
-    if (!panelRef.current || !panelRef.current.parentElement) return;
-    isResizePanelClickRef.current = 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;
-    if (!parentSizeRef.current) return;
-    document.body.style.cursor = flexDirectionModel[direction].resizeCursor;
-  };
-  const panelMouseUpEvent = () => {
-    isResizePanelClickRef.current = false;
-    parentSizeRef.current = 0;
-    totalMovementRef.current = 0;
-    prevTouchEventRef.current = null;
-    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 = FlexLayoutUtils.findNotCloseFlexContent(
-      originTarget,
-      "previousElementSibling"
-    );
-    if (panelMovementMode === "divorce" && totalMovementRef.current > 0 || panelMovementMode === "bulldozer" && movement > 0 || !targetElement)
-      targetElement = originTarget;
-    let nextElement = 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 (FlexLayoutUtils.isOverMove(targetSize, targetMinSize)) {
-      targetSize = 0;
-      nextElementSize = nextRect[model.sizeName];
-    } else if (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%`;
-  }
-  react.useEffect(() => {
-    const addGlobalMoveEvent = (event) => {
-      if (!isResizePanelClickRef.current || !panelRef.current) {
-        return;
-      }
-      event.preventDefault();
-      const dir = directionRef.current;
-      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);
-    };
-    ["mousemove", "touchmove"].forEach((eventName) => {
-      window.addEventListener(eventName, addGlobalMoveEvent, {
-        passive: false
-      });
-    });
-    ["mouseup", "touchend"].forEach((eventName) => {
-      window.addEventListener(eventName, panelMouseUpEvent);
-    });
-    return () => {
-      ["mousemove", "touchmove"].forEach((eventName) => {
-        window.removeEventListener(eventName, addGlobalMoveEvent);
-      });
-      ["mouseup", "touchend"].forEach((eventName) => {
-        window.removeEventListener(eventName, panelMouseUpEvent);
-      });
-    };
-  }, []);
-  react.useEffect(() => {
-    if (!panelRef.current) return;
-    FlexLayoutContainerStore.setResizePanelRef(layoutName, containerName, panelRef);
-  }, [containerName, layoutName]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      id: containerName + "_resize_panel",
-      className: `${styles__default.default["flex-resize-panel"]} ${styles__default.default[panelMode]} ${panelClassName && panelClassName !== "" ? panelClassName : ""}`,
-      ref: panelRef,
-      onMouseDown: panelMouseDownEvent,
-      onTouchStart: panelMouseDownEvent,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.hover })
-    }
-  );
-}
-
-module.exports = FlexLayoutResizePanel;
-//# sourceMappingURL=FlexLayoutResizePanel.cjs.map
-//# 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})})}

package/dist/flex-layout/components/FlexLayoutResizePanel.d.ts

@@ -1,2 +1,2 @@
 import { FlexLayoutResizePanelProps } from "../types/FlexLayoutTypes";
-export default function FlexLayoutResizePanel({ direction, containerCount, panelMode, containerName, layoutName, panelClassName, panelMovementMode, }: FlexLayoutResizePanelProps): import("react/jsx-runtime").JSX.Element;
+export default function FlexLayoutResizePanel({ direction, containerCount, panelMode, containerName, layoutName, panelClassName, panelMovementMode, onResizingChange, }: FlexLayoutResizePanelProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,186 +1 @@
-import { jsx } from 'react/jsx-runtime';
-import { useRef, useEffect } from 'react';
-import { setResizePanelRef } from '../store/FlexLayoutContainerStore';
-import styles from '../styles/FlexLayout.module.css';
-import { findNotCloseFlexContent, isOverMove } from '../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
-}) {
-  const directionRef = useRef(direction);
-  const movementModeRef = useRef(panelMovementMode);
-  useEffect(() => {
-    directionRef.current = direction;
-  }, [direction]);
-  useEffect(() => {
-    movementModeRef.current = panelMovementMode;
-  }, [panelMovementMode]);
-  const isResizePanelClickRef = useRef(false);
-  const prevTouchEventRef = useRef(null);
-  const parentSizeRef = useRef(0);
-  const totalMovementRef = useRef(0);
-  const containerCountRef = useRef(containerCount);
-  const panelRef = useRef(null);
-  useEffect(() => {
-    return () => {
-      document.body.style.cursor = "";
-    };
-  }, []);
-  useEffect(() => {
-    containerCountRef.current = containerCount;
-  }, [containerCount]);
-  const panelMouseDownEvent = (event) => {
-    if (!panelRef.current || !panelRef.current.parentElement) return;
-    isResizePanelClickRef.current = 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;
-    if (!parentSizeRef.current) return;
-    document.body.style.cursor = flexDirectionModel[direction].resizeCursor;
-  };
-  const panelMouseUpEvent = () => {
-    isResizePanelClickRef.current = false;
-    parentSizeRef.current = 0;
-    totalMovementRef.current = 0;
-    prevTouchEventRef.current = null;
-    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 = findNotCloseFlexContent(
-      originTarget,
-      "previousElementSibling"
-    );
-    if (panelMovementMode === "divorce" && totalMovementRef.current > 0 || panelMovementMode === "bulldozer" && movement > 0 || !targetElement)
-      targetElement = originTarget;
-    let nextElement = 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 (isOverMove(targetSize, targetMinSize)) {
-      targetSize = 0;
-      nextElementSize = nextRect[model.sizeName];
-    } else if (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%`;
-  }
-  useEffect(() => {
-    const addGlobalMoveEvent = (event) => {
-      if (!isResizePanelClickRef.current || !panelRef.current) {
-        return;
-      }
-      event.preventDefault();
-      const dir = directionRef.current;
-      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);
-    };
-    ["mousemove", "touchmove"].forEach((eventName) => {
-      window.addEventListener(eventName, addGlobalMoveEvent, {
-        passive: false
-      });
-    });
-    ["mouseup", "touchend"].forEach((eventName) => {
-      window.addEventListener(eventName, panelMouseUpEvent);
-    });
-    return () => {
-      ["mousemove", "touchmove"].forEach((eventName) => {
-        window.removeEventListener(eventName, addGlobalMoveEvent);
-      });
-      ["mouseup", "touchend"].forEach((eventName) => {
-        window.removeEventListener(eventName, panelMouseUpEvent);
-      });
-    };
-  }, []);
-  useEffect(() => {
-    if (!panelRef.current) return;
-    setResizePanelRef(layoutName, containerName, panelRef);
-  }, [containerName, layoutName]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      id: containerName + "_resize_panel",
-      className: `${styles["flex-resize-panel"]} ${styles[panelMode]} ${panelClassName && panelClassName !== "" ? panelClassName : ""}`,
-      ref: panelRef,
-      onMouseDown: panelMouseDownEvent,
-      onTouchStart: panelMouseDownEvent,
-      children: /* @__PURE__ */ jsx("div", { className: styles.hover })
-    }
-  );
-}
-
-export { FlexLayoutResizePanel as default };
-//# sourceMappingURL=FlexLayoutResizePanel.js.map
-//# sourceMappingURL=FlexLayoutResizePanel.js.map
+"use client";import{jsx as se}from"react/jsx-runtime";import{useEffect as H,useMemo as de,useRef as S}from"react";import{isResizingSubject as W,resizeDragSubject as I}from"../hooks";import{setResizePanelRef as Z}from"../store/FlexLayoutContainerStore";import P from"../styles/FlexLayout.module.css";import{findNotCloseFlexContent as ee,getClientXy as te,isOverMove as ne}from"../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"}},d=4,re=(n,e,r,t)=>{const g=new Map,l=(c,p)=>{const s=document.elementsFromPoint(c,p);for(const u of s){const v=u.closest?.(`.${P["flex-resize-panel"]}`);if(!v)continue;const a=v.dataset.resize_panel_key;a&&(g.has(a)||g.set(a,{el:v,key:a,dir:v.dataset.direction}))}};if([[0,0],[-d,0],[d,0],[0,-d],[0,d],[-d,-d],[d,-d],[-d,d],[d,d]].forEach(([c,p])=>l(n+c,e+p)),r&&t){const c=r.getBoundingClientRect(),p=t==="row"?c.width:t==="column"?c.height:1,s=Math.max(1,Math.ceil(p/2)),u=Math.ceil(d+p*2),f=Math.max(d,Math.ceil(p*2)),v=Array.from(new Set([1,Math.floor(f/2),Math.max(1,f-1)]));if(t==="row")for(let a=-u;a<=u;a+=s)for(const y of v)l(c.left-y,e+a),l(c.right+y,e+a);else if(t==="column")for(let a=-u;a<=u;a+=s)for(const y of v)l(n+a,c.top-y),l(n+a,c.bottom+y)}if(t){const p=[...g.values()].filter(s=>s.dir&&s.dir!==t);for(const s of p){const u=s.el.getBoundingClientRect(),f=s.dir==="row"?u.width:s.dir==="column"?u.height:1,v=Math.max(1,Math.ceil(f/2)),a=Math.ceil(d+f*2),y=Math.max(d,Math.ceil(f*2)),T=Array.from(new Set([1,Math.floor(y/2),Math.max(1,y-1)]));if(t==="column"&&s.dir==="row")for(let M=-a;M<=a;M+=v)for(const o of T)l(u.left-o,e+M),l(u.right+o,e+M);else if(t==="row"&&s.dir==="column")for(let M=-a;M<=a;M+=v)for(const o of T)l(n+M,u.top-o),l(n+M,u.bottom+o)}}return[...g.values()]},C=(n,e)=>{if(!n||n==="auto")return null;if(n.endsWith("px")){const t=parseFloat(n);return Number.isFinite(t)?t:null}if(n.endsWith("%")){const t=parseFloat(n);return Number.isFinite(t)?e*t/100:null}const r=parseFloat(n);return Number.isFinite(r)?r:null},pe=(n,e,r)=>n>=r.left&&n<=r.right&&e>=r.top&&e<=r.bottom,he=n=>{const e=n.getBoundingClientRect(),r=getComputedStyle(n,"::after");if(!r||r.content==="none"||r.content==="normal"||r.display==="none"||r.visibility==="hidden")return null;const t=C(r.width,e.width),g=C(r.height,e.height);if(!t||!g)return null;const l=C(r.left,e.width),c=C(r.right,e.width),p=C(r.top,e.height),s=C(r.bottom,e.height);let u=e.left;l!==null?u=e.left+l:c!==null&&(u=e.right-c-t);let f=e.top;return p!==null?f=e.top+p:s!==null&&(f=e.bottom-s-g),{left:u,top:f,right:u+t,bottom:f+g}},oe=(n,e,r,t,g)=>{const l=r.getBoundingClientRect(),c=he(r);if(c&&pe(n,e,c))return!1;const p=t==="row"?l.width:t==="column"?l.height:1,s=Math.max(g,Math.ceil(p));return t==="row"?n>=l.left-s&&n<=l.right+s:t==="column"?e>=l.top-s&&e<=l.bottom+s:!0};function ge({direction:n,containerCount:e,panelMode:r="default",containerName:t,layoutName:g,panelClassName:l,panelMovementMode:c,onResizingChange:p}){const s=S(n),u=S(c),f=de(()=>`${g}::${t}`,[g,t]);H(()=>{s.current=n},[n]),H(()=>{u.current=c},[c]);const v=S(!1),a=S(null),y=S(0),T=S(0),M=S(e),o=S(null),V=S(null),D=S(null);H(()=>()=>{W.next(!1),document.body.style.cursor="",D.current?.()},[]),H(()=>{M.current=e},[e]);const ie=()=>{if(!o.current||!o.current.parentElement)return;v.current=!0,p?.(!0),M.current=[...o.current.parentElement.children].filter(i=>i.hasAttribute("data-container_name")).length;const m=j[n].sizeName;y.current=o.current.parentElement.getBoundingClientRect()[m],a.current=null,T.current=0,W.next(!0)},le=()=>{v.current=!1,p?.(!1),y.current=0,T.current=0,V.current=null,W.next(!1),document.body.style.cursor="",B()};function ce(m,i,b,z,x){const h=j[z],L=b["movement"+h.xy.toUpperCase()];T.current+=L;const k="min-"+h.sizeName,O="max-"+h.sizeName;let R=ee(m,"previousElementSibling");(x==="divorce"&&T.current>0||x==="bulldozer"&&L>0||!R)&&(R=m);let w=ee(i.nextElementSibling,"nextElementSibling");if((x==="divorce"&&T.current<0||x==="bulldozer"&&L<0||!w)&&(w=i.nextElementSibling),!R||!w)return;const A=R.getBoundingClientRect(),N=window.getComputedStyle(R),X=parseFloat(N.getPropertyValue(k))||0,E=parseFloat(N.getPropertyValue(O))||0,F=w.getBoundingClientRect(),Y=window.getComputedStyle(w),U=parseFloat(Y.getPropertyValue(k))||0,Q=parseFloat(Y.getPropertyValue(O))||0;let $=A[h.sizeName]+L,_=F[h.sizeName]-L;if(E>0&&$>E||Q>0&&_>Q)return;ne($,X)?($=0,_=F[h.sizeName]):ne(_,U)&&(_=0,$=A[h.sizeName]);const me=$/(y.current-1)*M.current,fe=_/(y.current-1)*M.current;R instanceof HTMLElement&&w instanceof HTMLElement&&(R.style.flex=`${me} 1 0%`,w.style.flex=`${fe} 1 0%`)}H(()=>{const m=I.subscribe(i=>{if(i.type==="START"){if(!i.targets.includes(f))return;V.current=i.sessionId,ie(),i.cursor&&(document.body.style.cursor=i.cursor);return}if(i.type==="MOVE"){if(V.current!==i.sessionId||!v.current||!o.current)return;const b=s.current,z=u.current,x=o.current.previousElementSibling,h=o.current;if(!x||!h)return;ce(x,h,{movementX:i.movementX,movementY:i.movementY},b,z);return}if(i.type==="END"){if(V.current!==i.sessionId)return;le()}});return()=>m.unsubscribe()},[f]);const K=m=>{if(!o.current)return;m.preventDefault?.();const i=m.nativeEvent,b=te(i);if(!b)return;const z=s.current,x=oe(b.clientX,b.clientY,o.current,z,d),h=x?re(b.clientX,b.clientY,o.current,z):[{el:o.current,key:f,dir:z}],L=new Set([f]);h.forEach(E=>L.add(E.key));const k=[...L],O=x&&k.length>=2?"move":j[z].resizeCursor,R=`${Date.now()}_${Math.random().toString(16).slice(2)}`;I.next({type:"START",sessionId:R,targets:k,cursor:O}),D.current?.();let w=b.clientX,A=b.clientY;const N=E=>{E.preventDefault?.();const F=te(E);if(!F)return;const Y=F.clientX-w,U=F.clientY-A;w=F.clientX,A=F.clientY,I.next({type:"MOVE",sessionId:R,movementX:Y,movementY:U})},X=()=>{D.current?.(),D.current=null,I.next({type:"END",sessionId:R})};["mousemove","touchmove"].forEach(E=>{window.addEventListener(E,N,{passive:!1})}),["mouseup","touchend","touchcancel","pointerup","pointercancel","blur"].forEach(E=>window.addEventListener(E,X)),D.current=()=>{["mousemove","touchmove"].forEach(E=>window.removeEventListener(E,N)),["mouseup","touchend","touchcancel","pointerup","pointercancel","blur"].forEach(E=>window.removeEventListener(E,X))}};H(()=>{if(o.current)return Z(g,t,o),()=>{Z(g,t,null)}},[t,g]);const G=S([]),q=S(null),B=()=>{for(const m of G.current)m.querySelector(`.${P.hover}`)?.removeAttribute("data-is_hover");G.current=[]},ue=m=>{B();for(const i of m)i.querySelector(`.${P.hover}`)?.setAttribute("data-is_hover","");G.current=m},J=m=>{o.current&&(q.current&&cancelAnimationFrame(q.current),q.current=requestAnimationFrame(()=>{const i=s.current;if(!oe(m.clientX,m.clientY,o.current,i,d)){o.current.style.cursor="",B();return}const x=re(m.clientX,m.clientY,o.current,i).filter(h=>h.dir&&h.dir!==i).map(h=>h.el);o.current.style.cursor=x.length>0?"move":"",ue(x)}))},ae=()=>{o.current&&(o.current.style.cursor="",B())};return se("div",{id:t+"_resize_panel","data-resize_panel_key":f,"data-direction":n,className:`${P["flex-resize-panel"]} ${P[r]} ${l&&l!==""?l:""}`,ref:o,onMouseDown:K,onTouchStart:K,onMouseMove:J,onMouseEnter:J,onMouseLeave:ae,children:se("div",{className:P.hover,"aria-hidden":!0})})}export{ge as default};