react-window-manager-ui
Version:
A lightweight React component library for creating draggable, resizable windows with TypeScript support
796 lines (795 loc) • 34.1 kB
JavaScript
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".react-window-manager{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;color:#1a1a1a}.react-window-manager *,.react-window-manager *:before,.react-window-manager *:after{box-sizing:inherit}.react-window-manager.window{position:absolute;overflow:hidden;display:flex;flex-direction:column;border:none;background-color:#fff;color:#1a1a1a;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;border-radius:.5rem}.react-window-manager.window.active{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.react-window-manager.window.fullscreen{border-radius:0}.react-window-manager .header{padding:.5rem;display:flex;align-items:center;justify-content:space-between;cursor:move;background-color:#f8f9fa;color:#1a1a1a;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.react-window-manager .header .toolbar{display:flex;align-items:center}.react-window-manager .header .title{margin-left:.5rem;margin-right:.5rem;flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.react-window-manager .header .controls{display:flex;gap:.25rem}.react-window-manager .content{flex:1;overflow:auto;padding:0}.react-window-manager .button{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:.375rem;font-size:.875rem;font-weight:500;border:none;background:none;cursor:pointer;transition:all .15s ease-in-out;outline:none;text-decoration:none}.react-window-manager .button:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.react-window-manager .button:disabled{pointer-events:none;opacity:.5}.react-window-manager .button.default{background-color:#1a1a1a;color:#fff}.react-window-manager .button.default:hover{background-color:#1a1a1ae6}.react-window-manager .button.ghost{background-color:transparent;color:inherit}.react-window-manager .button.ghost:hover{background-color:#0000000d}.react-window-manager .button.ghost.destructive:hover{background-color:#dc2626;color:#fff}.react-window-manager .button.size-default{height:2.5rem;padding:.5rem 1rem}.react-window-manager .button.size-sm{height:2.25rem;padding:.5rem .75rem;border-radius:.375rem}.react-window-manager .button.size-lg{height:2.75rem;padding:.5rem 2rem;border-radius:.375rem}.react-window-manager .button.size-icon{height:2.5rem;width:2.5rem}.react-window-manager .header .button.size-icon{height:1.5rem;width:1.5rem;padding:.25rem;border-radius:9999px}.react-window-manager .header .button.size-icon:hover{background-color:#0000001a}.react-window-manager .header .button.size-icon.destructive:hover{background-color:#dc2626;color:#fff}.react-window-manager .resize-handle{position:absolute;z-index:10}.react-window-manager .resize-handle.se{bottom:0;right:0;width:1rem;height:1rem;cursor:se-resize}.react-window-manager .resize-handle.sw{bottom:0;left:0;width:1rem;height:1rem;cursor:sw-resize}.react-window-manager .resize-handle.ne{top:0;right:0;width:1rem;height:1rem;cursor:ne-resize}.react-window-manager .resize-handle.nw{top:0;left:0;width:1rem;height:1rem;cursor:nw-resize}.react-window-manager .resize-handle.n{top:0;left:1rem;right:1rem;height:.5rem;cursor:n-resize}.react-window-manager .resize-handle.s{bottom:0;left:1rem;right:1rem;height:.5rem;cursor:s-resize}.react-window-manager .resize-handle.e{top:1rem;bottom:1rem;right:0;width:.5rem;cursor:e-resize}.react-window-manager .resize-handle.w{top:1rem;bottom:1rem;left:0;width:.5rem;cursor:w-resize}@keyframes react-window-manager-fade-in{0%{opacity:0}to{opacity:1}}@keyframes react-window-manager-fade-out{0%{opacity:1}to{opacity:0}}@keyframes react-window-manager-scale-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes react-window-manager-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}@keyframes react-window-manager-slide-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes react-window-manager-slide-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}.react-window-manager .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.react-window-manager .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.react-window-manager .flex{display:flex}.react-window-manager .flex-1{flex:1}.react-window-manager .items-center{align-items:center}.react-window-manager .justify-center{justify-content:center}.react-window-manager .justify-between{justify-content:space-between}.react-window-manager .gap-1{gap:.25rem}.react-window-manager .text-center{text-align:center}.react-window-manager .font-medium{font-weight:500}.react-window-manager .select-none{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.react-window-manager .cursor-move{cursor:move}.react-window-manager .overflow-hidden{overflow:hidden}.react-window-manager .overflow-auto{overflow:auto}.react-window-manager .rounded-full{border-radius:9999px}.react-window-manager .p-0{padding:0}.react-window-manager .p-1{padding:.25rem}.react-window-manager .p-2{padding:.5rem}.react-window-manager .mx-2{margin-left:.5rem;margin-right:.5rem}.react-window-manager .h-6{height:1.5rem}.react-window-manager .w-6{width:1.5rem}")),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
import { jsx as u, jsxs as N, Fragment as De } from "react/jsx-runtime";
import * as I from "react";
import le, { useRef as A, useState as G, useEffect as U } from "react";
const de = (n) => {
let t;
const e = /* @__PURE__ */ new Set(), s = (v, f) => {
const S = typeof v == "function" ? v(t) : v;
if (!Object.is(S, t)) {
const O = t;
t = f ?? (typeof S != "object" || S === null) ? S : Object.assign({}, t, S), e.forEach((q) => q(t, O));
}
}, o = () => t, d = { setState: s, getState: o, getInitialState: () => z, subscribe: (v) => (e.add(v), () => e.delete(v)) }, z = t = n(s, o, d);
return d;
}, Ee = (n) => n ? de(n) : de, Le = (n) => n;
function $e(n, t = Le) {
const e = le.useSyncExternalStore(
n.subscribe,
() => t(n.getState()),
() => t(n.getInitialState())
);
return le.useDebugValue(e), e;
}
const ue = (n) => {
const t = Ee(n), e = (s) => $e(t, s);
return Object.assign(e, t), e;
}, Re = (n) => n ? ue(n) : ue, ke = Re((n) => ({
windows: [],
activeWindowId: null,
previousWindowId: null,
windowHistory: [],
isAltQOpen: !1,
selectedWindowIndex: 0,
splitterPosition: 50,
isSplitterVisible: !1,
windowAnimation: "fade",
addWindow: (t) => n((e) => {
if (e.windows.some((l) => l.id === t.id))
return e;
const s = Math.max(...e.windows.map((l) => l.zIndex), 0), o = {
...t,
zIndex: s + 1,
originalSize: t.size
}, c = e.activeWindowId ? [
e.activeWindowId,
...e.windowHistory.filter((l) => l !== e.activeWindowId)
] : e.windowHistory;
return {
windows: [...e.windows, o],
activeWindowId: t.id,
previousWindowId: e.activeWindowId,
windowHistory: c
};
}),
removeWindow: (t) => n((e) => {
const s = e.windows.filter((d) => d.id !== t);
let o = e.activeWindowId;
const c = e.windowHistory.filter((d) => d !== t);
e.activeWindowId === t && (o = c.length > 0 ? c[0] : null);
let l = e.previousWindowId;
return e.previousWindowId === t && (l = c.length > 1 ? c[1] : null), {
windows: s,
activeWindowId: o,
previousWindowId: l,
windowHistory: c
};
}),
updateWindow: (t, e) => n((s) => ({ windows: s.windows.map((c) => {
if (c.id === t) {
const l = e.size && !c.snapPosition && (!e.snapPosition || e.snapPosition === "none");
return {
...c,
...e,
originalSize: l ? e.size : c.originalSize
};
}
return c;
}) })),
setActiveWindow: (t) => n((e) => {
const s = Math.max(...e.windows.map((l) => l.zIndex), 0), o = e.activeWindowId && e.activeWindowId !== t ? [
e.activeWindowId,
...e.windowHistory.filter(
(l) => l !== e.activeWindowId && l !== t
)
] : e.windowHistory.filter((l) => l !== t), c = e.windows.map((l) => l.id === t ? { ...l, zIndex: s + 1 } : l);
return {
activeWindowId: t,
previousWindowId: e.activeWindowId !== t ? e.activeWindowId : e.previousWindowId,
windowHistory: o,
windows: c
};
}),
bringToFront: (t) => n((e) => {
const s = Math.max(...e.windows.map((d) => d.zIndex), 0), o = e.windows.find((d) => d.id === t);
if (o && o.zIndex === s)
return {
activeWindowId: t,
previousWindowId: e.activeWindowId !== t ? e.activeWindowId : e.previousWindowId,
windowHistory: e.windowHistory
};
const c = e.activeWindowId && e.activeWindowId !== t ? [
e.activeWindowId,
...e.windowHistory.filter(
(d) => d !== e.activeWindowId && d !== t
)
] : e.windowHistory.filter((d) => d !== t), l = e.windows.map((d) => d.id === t ? { ...d, zIndex: s + 1 } : d);
return {
activeWindowId: t,
previousWindowId: e.activeWindowId !== t ? e.activeWindowId : e.previousWindowId,
windowHistory: c,
windows: l
};
}),
endSplitOnDrag: (t) => {
console.log("End split on drag:", t);
},
setWindowAnimation: (t) => n({ windowAnimation: t })
}));
function Ae(n) {
return /* @__PURE__ */ u(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24,
viewBox: "0 0 24 24",
...n,
children: /* @__PURE__ */ N("g", { fill: "none", fillRule: "evenodd", children: [
/* @__PURE__ */ u("path", { d: "m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" }),
/* @__PURE__ */ u(
"path",
{
fill: "currentColor",
d: "m12 14.122l5.303 5.303a1.5 1.5 0 0 0 2.122-2.122L14.12 12l5.304-5.303a1.5 1.5 0 1 0-2.122-2.121L12 9.879L6.697 4.576a1.5 1.5 0 1 0-2.122 2.12L9.88 12l-5.304 5.304a1.5 1.5 0 1 0 2.122 2.12z"
}
)
] })
}
);
}
function Ce(n) {
return /* @__PURE__ */ u(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24,
viewBox: "0 0 24 24",
...n,
children: /* @__PURE__ */ N("g", { fill: "none", children: [
/* @__PURE__ */ u("path", { d: "M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" }),
/* @__PURE__ */ u(
"path",
{
fill: "currentColor",
d: "M8.94 12.94a1.5 1.5 0 0 1 2.224 2.007l-.103.114L7.12 19H8.5a1.5 1.5 0 0 1 .144 2.993L8.5 22h-5a1.5 1.5 0 0 1-1.493-1.356L2 20.5v-5a1.5 1.5 0 0 1 2.993-.144L5 15.5v1.379zM20.5 2a1.5 1.5 0 0 1 1.493 1.356L22 3.5v5a1.5 1.5 0 0 1-2.993.144L19 8.5V7.121l-3.94 3.94a1.5 1.5 0 0 1-2.224-2.008l.103-.114L16.88 5H15.5a1.5 1.5 0 0 1-.144-2.993L15.5 2z"
}
)
] })
}
);
}
function Ne(n) {
return /* @__PURE__ */ u(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24,
viewBox: "0 0 24 24",
...n,
children: /* @__PURE__ */ N("g", { fill: "none", children: [
/* @__PURE__ */ u("path", { d: "M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" }),
/* @__PURE__ */ u(
"path",
{
fill: "currentColor",
d: "M10.5 12a1.5 1.5 0 0 1 1.493 1.356L12 13.5v5a1.5 1.5 0 0 1-2.993.144L9 18.5v-1.379l-3.94 3.94a1.5 1.5 0 0 1-2.224-2.008l.103-.114L6.88 15H5.5a1.5 1.5 0 0 1-.144-2.993L5.5 12zm8.44-9.06a1.5 1.5 0 0 1 2.224 2.007l-.103.114L17.12 9h1.38a1.5 1.5 0 0 1 .144 2.993L18.5 12h-5a1.5 1.5 0 0 1-1.493-1.356L12 10.5v-5a1.5 1.5 0 0 1 2.993-.144L15 5.5v1.379l3.94-3.94Z"
}
)
] })
}
);
}
function we(n, t) {
if (typeof n == "function")
return n(t);
n != null && (n.current = t);
}
function Pe(...n) {
return (t) => {
let e = !1;
const s = n.map((o) => {
const c = we(o, t);
return !e && typeof c == "function" && (e = !0), c;
});
if (e)
return () => {
for (let o = 0; o < s.length; o++) {
const c = s[o];
typeof c == "function" ? c() : we(n[o], null);
}
};
};
}
// @__NO_SIDE_EFFECTS__
function _e(n) {
const t = /* @__PURE__ */ Oe(n), e = I.forwardRef((s, o) => {
const { children: c, ...l } = s, d = I.Children.toArray(c), z = d.find(Te);
if (z) {
const v = z.props.children, f = d.map((S) => S === z ? I.Children.count(v) > 1 ? I.Children.only(null) : I.isValidElement(v) ? v.props.children : null : S);
return /* @__PURE__ */ u(t, { ...l, ref: o, children: I.isValidElement(v) ? I.cloneElement(v, void 0, f) : null });
}
return /* @__PURE__ */ u(t, { ...l, ref: o, children: c });
});
return e.displayName = `${n}.Slot`, e;
}
var Fe = /* @__PURE__ */ _e("Slot");
// @__NO_SIDE_EFFECTS__
function Oe(n) {
const t = I.forwardRef((e, s) => {
const { children: o, ...c } = e;
if (I.isValidElement(o)) {
const l = Ve(o), d = je(c, o.props);
return o.type !== I.Fragment && (d.ref = s ? Pe(s, l) : l), I.cloneElement(o, d);
}
return I.Children.count(o) > 1 ? I.Children.only(null) : null;
});
return t.displayName = `${n}.SlotClone`, t;
}
var qe = Symbol("radix.slottable");
function Te(n) {
return I.isValidElement(n) && typeof n.type == "function" && "__radixId" in n.type && n.type.__radixId === qe;
}
function je(n, t) {
const e = { ...t };
for (const s in t) {
const o = n[s], c = t[s];
/^on[A-Z]/.test(s) ? o && c ? e[s] = (...d) => {
const z = c(...d);
return o(...d), z;
} : o && (e[s] = o) : s === "style" ? e[s] = { ...o, ...c } : s === "className" && (e[s] = [o, c].filter(Boolean).join(" "));
}
return { ...n, ...e };
}
function Ve(n) {
let t = Object.getOwnPropertyDescriptor(n.props, "ref")?.get, e = t && "isReactWarning" in t && t.isReactWarning;
return e ? n.ref : (t = Object.getOwnPropertyDescriptor(n, "ref")?.get, e = t && "isReactWarning" in t && t.isReactWarning, e ? n.props.ref : n.props.ref || n.ref);
}
const ie = I.forwardRef(
({ className: n, variant: t = "default", size: e = "default", asChild: s = !1, ...o }, c) => {
const l = s ? Fe : "button", d = "react-window-manager button", z = t, v = `size-${e}`, f = [d, z, v, n].filter(Boolean).join(" ");
return /* @__PURE__ */ u(
l,
{
className: f,
ref: c,
...o
}
);
}
);
ie.displayName = "Button";
const Qe = ({
id: n,
title: t = "Window",
children: e,
position: s = { x: 100, y: 100 },
size: o = { width: 800, height: 600 },
toolbar: c,
className: l = "",
animation: d,
icons: z,
resize: v = !0,
minSize: f = { width: 200, height: 150 },
maxSize: S,
allowFullscreen: O = !0,
onClose: q,
onToggleFullscreen: re,
onResize: oe
}) => {
const {
updateWindow: Q,
removeWindow: J,
activeWindowId: he,
setActiveWindow: T,
bringToFront: j,
endSplitOnDrag: ae,
windows: fe,
windowAnimation: pe
} = ke(), V = d || pe, a = A(null), me = A(null), [x, C] = G(s), [y, B] = G(o), [H, se] = G(!1), [Z, ge] = G({
position: s,
size: o
});
U(() => {
oe && oe({
width: y.width,
height: y.height
});
}, [y]);
const L = A(!1), P = A(!1), _ = A({ mouseX: 0, mouseY: 0, windowX: 0, windowY: 0 }), r = A({
mouseX: 0,
mouseY: 0,
width: 0,
height: 0,
cursorType: "",
initialX: 0,
initialY: 0
}), F = A({
touchX: 0,
touchY: 0,
windowX: 0,
windowY: 0
}), M = A(null), K = fe.find((i) => i.id === n)?.zIndex || 1, ee = (i, p) => {
const W = window.innerWidth, R = window.innerHeight, D = Math.max(0, Math.min(i, W - y.width)), b = Math.max(0, Math.min(p, R - y.height));
return { x: D, y: b };
}, ve = (i) => {
(i.target === i.currentTarget || i.currentTarget.contains(i.target)) && (T(n), j(n));
};
U(() => {
const i = (b) => {
!L.current && !P.current || (b.preventDefault(), L.current ? (M.current !== null && cancelAnimationFrame(M.current), M.current = requestAnimationFrame(() => {
const g = b.clientX - _.current.mouseX, Y = b.clientY - _.current.mouseY, m = _.current.windowX + g, w = _.current.windowY + Y, { x: h, y: X } = ee(
m,
w
);
C({ x: h, y: X }), M.current = null;
})) : P.current && (M.current !== null && cancelAnimationFrame(M.current), M.current = requestAnimationFrame(() => {
const g = b.clientX - r.current.mouseX, Y = b.clientY - r.current.mouseY, m = r.current.cursorType;
let w = r.current.width, h = r.current.height, X = r.current.initialX, E = r.current.initialY;
if (m === "se-resize" ? (w = Math.max(
f.width,
r.current.width + g
), h = Math.max(
f.height,
r.current.height + Y
)) : m === "sw-resize" ? (w = Math.max(
f.width,
r.current.width - g
), h = Math.max(
f.height,
r.current.height + Y
), X = r.current.initialX + r.current.width - w) : m === "ne-resize" ? (w = Math.max(
f.width,
r.current.width + g
), h = Math.max(
f.height,
r.current.height - Y
), E = r.current.initialY + r.current.height - h) : m === "nw-resize" ? (w = Math.max(
f.width,
r.current.width - g
), h = Math.max(
f.height,
r.current.height - Y
), X = r.current.initialX + r.current.width - w, E = r.current.initialY + r.current.height - h) : m === "n-resize" ? (h = Math.max(
f.height,
r.current.height - Y
), E = r.current.initialY + r.current.height - h) : m === "s-resize" ? h = Math.max(
f.height,
r.current.height + Y
) : m === "e-resize" ? w = Math.max(
f.width,
r.current.width + g
) : m === "w-resize" && (w = Math.max(
f.width,
r.current.width - g
), X = r.current.initialX + r.current.width - w), S) {
const ne = w, te = h;
w = Math.min(w, S.width), h = Math.min(h, S.height), m === "nw-resize" ? (w !== ne && (X = r.current.initialX + r.current.width - w), h !== te && (E = r.current.initialY + r.current.height - h)) : m === "ne-resize" ? h !== te && (E = r.current.initialY + r.current.height - h) : m === "sw-resize" ? w !== ne && (X = r.current.initialX + r.current.width - w) : m === "n-resize" ? h !== te && (E = r.current.initialY + r.current.height - h) : m === "w-resize" && w !== ne && (X = r.current.initialX + r.current.width - w);
}
const Ye = window.innerWidth - X, Se = window.innerHeight - E, Xe = Math.min(w, Ye), He = Math.min(h, Se);
B({ width: Xe, height: He }), C({ x: X, y: E }), M.current = null;
})));
}, p = (b) => {
if (!L.current)
return;
b.preventDefault();
const g = b.touches[0];
if (!g) return;
const Y = g.clientX - F.current.touchX, m = g.clientY - F.current.touchY, w = F.current.windowX + Y, h = F.current.windowY + m, { x: X, y: E } = ee(w, h);
C({ x: X, y: E });
}, W = () => {
L.current && (L.current = !1, Q(n, { position: x }), ae(n)), P.current && (P.current = !1, Q(n, { position: x, size: y })), M.current !== null && (cancelAnimationFrame(M.current), M.current = null);
}, R = () => {
L.current && (L.current = !1, ae(n));
}, D = () => {
const b = window.innerWidth, g = window.innerHeight;
H ? (C({ x: 0, y: 0 }), B({
width: b,
height: g
})) : C((Y) => {
const { x: m, y: w } = ee(
Y.x,
Y.y
);
return { x: m, y: w };
});
};
return document.addEventListener("mousemove", i), document.addEventListener("mouseup", W), document.addEventListener("touchmove", p), document.addEventListener("touchend", R), window.addEventListener("resize", D), () => {
document.removeEventListener("mousemove", i), document.removeEventListener("mouseup", W), document.removeEventListener("touchmove", p), document.removeEventListener("touchend", R), window.removeEventListener("resize", D), M.current !== null && cancelAnimationFrame(M.current);
};
}, [n, y.width, y.height, H]);
const ye = (i) => {
H || (i.preventDefault(), i.stopPropagation(), L.current = !0, _.current = {
mouseX: i.clientX,
mouseY: i.clientY,
windowX: x.x,
windowY: x.y
}, T(n), j(n));
}, xe = (i) => {
i.preventDefault(), i.stopPropagation(), O && ce();
}, We = (i) => {
if (H) return;
i.preventDefault(), i.stopPropagation();
const p = i.touches[0];
p && (L.current = !0, F.current = {
touchX: p.clientX,
touchY: p.clientY,
windowX: x.x,
windowY: x.y
}, T(n), j(n));
}, k = (i) => {
i.preventDefault(), i.stopPropagation(), P.current = !0;
const p = i.target, W = window.getComputedStyle(p).cursor;
r.current = {
mouseX: i.clientX,
mouseY: i.clientY,
width: y.width,
height: y.height,
cursorType: W,
initialX: x.x,
initialY: x.y
}, T(n), j(n);
}, Ie = () => {
if (a.current) {
let i;
switch (V) {
case "fade":
i = a.current.animate(
[{ opacity: 1 }, { opacity: 0 }],
{ duration: 200, easing: "ease-out", fill: "forwards" }
);
break;
case "scale":
i = a.current.animate(
[
{ opacity: 1, transform: "scale(1)" },
{ opacity: 0, transform: "scale(0.8)" }
],
{ duration: 200, easing: "ease-out", fill: "forwards" }
);
break;
case "slide":
i = a.current.animate(
[
{ opacity: 1, transform: "translateY(0)" },
{ opacity: 0, transform: "translateY(20px)" }
],
{ duration: 200, easing: "ease-out", fill: "forwards" }
);
break;
case "flip":
i = a.current.animate(
[
{ opacity: 1, transform: "rotateX(0deg)" },
{ opacity: 0, transform: "rotateX(15deg)" }
],
{ duration: 300, easing: "ease-out", fill: "forwards" }
);
break;
case "rotate":
i = a.current.animate(
[
{ opacity: 1, transform: "rotate(0deg)" },
{ opacity: 0, transform: "rotate(2deg)" }
],
{ duration: 300, easing: "ease-out", fill: "forwards" }
);
break;
case "jellyfish":
i = a.current.animate(
[
{ opacity: 1, transform: "scale(1)" },
{ opacity: 0, transform: "scale(0.8) translateY(10px)" }
],
{ duration: 300, easing: "ease-in-out", fill: "forwards" }
);
break;
default:
J(n);
return;
}
i.onfinish = () => {
J(n), q && q();
};
} else
J(n);
}, ce = () => {
const i = !H;
if (H) {
const p = { ...Z.position }, W = { ...Z.size };
if (a.current) {
a.current.getAnimations().forEach((g) => g.cancel());
let R = "cubic-bezier(0.4, 0, 0.2, 1)", D = 300;
V === "jellyfish" && (R = "cubic-bezier(0.34, 1.56, 0.64, 1)", D = 400);
const b = a.current.animate(
[
{
left: `${x.x}px`,
top: `${x.y}px`,
width: `${y.width}px`,
height: `${y.height}px`,
borderRadius: "0"
},
{
left: `${p.x}px`,
top: `${p.y}px`,
width: `${W.width}px`,
height: `${W.height}px`,
borderRadius: "0.5rem"
}
],
{
duration: D,
easing: R,
fill: "forwards"
}
);
b.onfinish = () => {
a.current && (a.current.getAnimations().forEach((g) => g.cancel()), a.current.style.cssText = "", a.current.style.position = "absolute", a.current.style.left = `${p.x}px`, a.current.style.top = `${p.y}px`, a.current.style.width = `${W.width}px`, a.current.style.height = `${W.height}px`, a.current.style.transformOrigin = "top center", a.current.style.zIndex = K.toString()), C(p), B(W), se(!1);
};
}
} else if (ge({
position: { ...x },
size: { ...y }
}), se(!0), a.current) {
a.current.getAnimations().forEach((D) => D.cancel());
let p = "cubic-bezier(0.4, 0, 0.2, 1)", W = 300;
V === "jellyfish" && (p = "cubic-bezier(0.34, 1.56, 0.64, 1)", W = 400);
const R = a.current.animate(
[
{
left: `${x.x}px`,
top: `${x.y}px`,
width: `${y.width}px`,
height: `${y.height}px`,
borderRadius: "0.5rem"
},
{
left: "0px",
top: "0px",
width: `${window.innerWidth}px`,
height: `${window.innerHeight}px`,
borderRadius: "0"
}
],
{
duration: W,
easing: p,
fill: "forwards"
}
);
R.onfinish = () => {
a.current && (a.current.getAnimations().forEach((D) => D.cancel()), a.current.style.cssText = "", a.current.style.position = "absolute", a.current.style.left = "0px", a.current.style.top = "0px", a.current.style.width = `${window.innerWidth}px`, a.current.style.height = `${window.innerHeight}px`, a.current.style.transformOrigin = "top center", a.current.style.zIndex = K.toString()), C({ x: 0, y: 0 }), B({
width: window.innerWidth,
height: window.innerHeight
});
};
}
Q(n, {
position: H ? Z.position : { x: 0, y: 0 },
size: H ? Z.size : {
width: window.innerWidth,
height: window.innerHeight
}
}), re && re(i);
};
U(() => {
if (a.current)
switch (V) {
case "fade":
a.current.animate(
[{ opacity: 0 }, { opacity: 1 }],
{ duration: 200, easing: "ease-out", fill: "forwards" }
);
break;
case "scale":
a.current.animate(
[
{ opacity: 0, transform: "scale(0.8)" },
{ opacity: 1, transform: "scale(1)" }
],
{ duration: 200, easing: "ease-out", fill: "forwards" }
);
break;
case "slide":
a.current.animate(
[
{ opacity: 0, transform: "translateY(20px)" },
{ opacity: 1, transform: "translateY(0)" }
],
{ duration: 200, easing: "ease-out", fill: "forwards" }
);
break;
case "flip":
a.current.animate(
[
{ opacity: 0, transform: "rotateX(15deg)" },
{ opacity: 1, transform: "rotateX(0deg)" }
],
{ duration: 300, easing: "ease-out", fill: "forwards" }
);
break;
case "rotate":
a.current.animate(
[
{ opacity: 0, transform: "rotate(-2deg)" },
{ opacity: 1, transform: "rotate(0deg)" }
],
{ duration: 300, easing: "ease-out", fill: "forwards" }
);
break;
case "jellyfish":
a.current.animate(
[
{ opacity: 0, transform: "scale(0.7)" },
{ opacity: 1, transform: "scale(1)" }
],
{
duration: 400,
easing: "cubic-bezier(0.34, 1.56, 0.64, 1)",
// Spring-like easing
fill: "forwards"
}
);
break;
}
}, [n]), U(() => (window.__WINDOW_ID__ = n, () => {
window.__WINDOW_ID__ === n && delete window.__WINDOW_ID__;
}), [n]);
const be = /* @__PURE__ */ u(Ce, {}), ze = /* @__PURE__ */ u(Ne, {}), Me = /* @__PURE__ */ u(Ae, {}), $ = (() => {
if (v === !1) return [];
const i = [];
switch (v) {
case !0:
case "both":
i.push("se", "sw", "ne", "nw", "n", "s", "e", "w");
break;
case "horizontal":
i.push("e", "w", "ne", "nw", "se", "sw");
break;
case "vertical":
i.push("n", "s", "ne", "nw", "se", "sw");
break;
case "left":
i.push("w", "nw", "sw");
break;
case "right":
i.push("e", "ne", "se");
break;
case "top":
i.push("n");
break;
case "bottom":
i.push("s");
break;
default:
i.push("se", "sw", "ne", "nw", "n", "s", "e", "w");
break;
}
return i;
})();
return /* @__PURE__ */ N(
"div",
{
ref: a,
style: {
position: "absolute",
width: y.width,
height: y.height,
left: x.x,
top: x.y,
transformOrigin: "top center",
zIndex: K
},
className: `react-window-manager window ${H ? "fullscreen" : ""} ${he === n ? "active" : ""} ${l}`,
onMouseDown: ve,
"data-window-id": n,
children: [
/* @__PURE__ */ N(
"div",
{
ref: me,
onMouseDown: ye,
onTouchStart: We,
onDoubleClick: xe,
className: "react-window-manager header",
children: [
/* @__PURE__ */ u("div", { className: "react-window-manager toolbar", children: c }),
/* @__PURE__ */ u("div", { className: "react-window-manager title", children: t }),
/* @__PURE__ */ N("div", { className: "react-window-manager controls", children: [
O && /* @__PURE__ */ u(
ie,
{
onClick: (i) => {
i.preventDefault(), i.stopPropagation(), ce();
},
onMouseDown: (i) => i.stopPropagation(),
size: "icon",
variant: "ghost",
children: H ? z?.fullscreenExit || ze : z?.fullscreen || be
}
),
/* @__PURE__ */ u(
ie,
{
onClick: Ie,
onMouseDown: (i) => i.stopPropagation(),
size: "icon",
variant: "ghost",
className: "destructive",
children: z?.close || Me
}
)
] })
]
}
),
/* @__PURE__ */ u("div", { className: "react-window-manager content", children: e }),
!H && $.length > 0 && /* @__PURE__ */ N(De, { children: [
$.includes("se") && /* @__PURE__ */ u(
"div",
{
onMouseDown: k,
className: "react-window-manager resize-handle se"
}
),
$.includes("sw") && /* @__PURE__ */ u(
"div",
{
onMouseDown: k,
className: "react-window-manager resize-handle sw"
}
),
$.includes("ne") && /* @__PURE__ */ u(
"div",
{
onMouseDown: k,
className: "react-window-manager resize-handle ne"
}
),
$.includes("nw") && /* @__PURE__ */ u(
"div",
{
onMouseDown: k,
className: "react-window-manager resize-handle nw"
}
),
$.includes("n") && /* @__PURE__ */ u(
"div",
{
onMouseDown: k,
className: "react-window-manager resize-handle n"
}
),
$.includes("s") && /* @__PURE__ */ u(
"div",
{
onMouseDown: k,
className: "react-window-manager resize-handle s"
}
),
$.includes("e") && /* @__PURE__ */ u(
"div",
{
onMouseDown: k,
className: "react-window-manager resize-handle e"
}
),
$.includes("w") && /* @__PURE__ */ u(
"div",
{
onMouseDown: k,
className: "react-window-manager resize-handle w"
}
)
] })
]
}
);
};
export {
Qe as Window,
ke as useWindowManagerStore
};