@byeolnaerim/flex-layout 0.0.9 → 0.0.12

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

@@ -1,216 +1 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
-import { isResizingSubject } from "../hooks";
-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,
-  onResizingChange
-}) {
-  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 () => {
-      isResizingSubject.next(false);
-      document.body.style.cursor = "";
-    };
-  }, []);
-  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;
-    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;
-    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 = 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;
-      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);
-      });
-    };
-  }, []);
-  useEffect(() => {
-    if (!panelRef.current) return;
-    setResizePanelRef(layoutName, containerName, panelRef);
-    return () => {
-      setResizePanelRef(layoutName, containerName, null);
-    };
-  }, [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
+"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};