@cratis/scene 0.158.1 → 0.159.0

package/dist/Prototypes/Editor/fitOverlay.d.ts

@@ -0,0 +1,14 @@
+export interface OverlayViewport {
+    width: number;
+    height: number;
+}
+export interface FittedOverlay {
+    width: number;
+    height: number;
+    offsetX: number;
+}
+export declare const overlayMargin = 8;
+export declare function fitOverlay(size: {
+    width: number;
+    height: number;
+}, viewport: OverlayViewport, requestedOffsetX: number): FittedOverlay;

package/dist/ScreenEditor/index.js

@@ -1,14 +1,22 @@
-import { c as B, u as q, x as A } from "../Scene-DaQtzf1e.js";
-import { i as J, r as K, t as Q } from "../renderPrototypeElement-Xm7OIVPs.js";
-import { useCallback as f, useEffect as V, useRef as W, useState as b } from "react";
-import { jsx as y, jsxs as x } from "react/jsx-runtime";
-var $ = 900, k = 640, Z = 320, tt = 300, dt = 360, et = (t) => t ? {
-  width: t.width > 0 ? t.width : $,
-  height: t.height > 0 ? t.height : k
+import { c as J, u as K, x as Q } from "../Scene-DaQtzf1e.js";
+import { i as Z, r as tt, t as et } from "../renderPrototypeElement-Xm7OIVPs.js";
+import { useCallback as f, useEffect as X, useRef as E, useState as v } from "react";
+import { jsx as w, jsxs as z } from "react/jsx-runtime";
+function ot(t, r, n) {
+  const i = Math.max(1, Math.min(t.width, r.width - 16)), h = Math.max(1, Math.min(t.height, r.height - 16)), a = Math.max(0, (r.width - i) / 2 - 8);
+  return {
+    width: i,
+    height: h,
+    offsetX: Math.min(a, Math.max(-a, n))
+  };
+}
+var L = 900, $ = 640, rt = 320, nt = 300, yt = 360, it = (t) => t ? {
+  width: t.width > 0 ? t.width : L,
+  height: t.height > 0 ? t.height : $
 } : {
-  width: $,
-  height: k
-}, ot = [
+  width: L,
+  height: $
+}, at = [
   "n",
   "s",
   "e",
@@ -17,153 +25,164 @@ var $ = 900, k = 640, Z = 320, tt = 300, dt = 360, et = (t) => t ? {
   "nw",
   "se",
   "sw"
-], ht = ({ sourceRect: t, initialSize: r, centerOffsetX: n = 0, children: a, renderInspector: g, canClose: s, onClosed: c }) => {
-  const [l, m] = b("entering"), [i, D] = b(() => et(r)), v = W(i);
-  v.current = i;
-  const [u, X] = b(!1), _ = f(() => X((e) => !e), []), C = W(null);
-  V(() => {
-    const e = requestAnimationFrame(() => m("visible"));
+], gt = ({ sourceRect: t, initialSize: r, centerOffsetX: n = 0, children: i, renderInspector: h, canClose: a, onClosed: l }) => {
+  const [s, y] = v("entering"), [p, H] = v(() => it(r)), C = E(p);
+  C.current = p;
+  const [g, k] = v(!1), [P, _] = v(() => ({
+    width: window.innerWidth,
+    height: window.innerHeight
+  }));
+  X(() => {
+    const e = () => _({
+      width: window.innerWidth,
+      height: window.innerHeight
+    });
+    return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+  }, []);
+  const O = f(() => k((e) => !e), []), b = E(null);
+  X(() => {
+    const e = requestAnimationFrame(() => y("visible"));
     return () => cancelAnimationFrame(e);
   }, []);
   const I = f(async () => {
-    s && !await s(v.current) || (m("closing"), setTimeout(() => c(v.current), 300));
-  }, [s, c]), E = (e, o) => {
-    o.stopPropagation(), o.preventDefault(), C.current = {
+    a && !await a(C.current) || (y("closing"), setTimeout(() => l(C.current), 300));
+  }, [a, l]), Y = (e, o) => {
+    o.stopPropagation(), o.preventDefault(), b.current = {
       direction: e,
       startX: o.clientX,
       startY: o.clientY,
-      startWidth: i.width,
-      startHeight: i.height
+      startWidth: p.width,
+      startHeight: p.height
     }, o.target.setPointerCapture(o.pointerId);
-  }, L = f((e) => {
-    const o = C.current;
+  }, G = f((e) => {
+    const o = b.current;
     if (!o) return;
-    const { direction: d } = o;
+    const { direction: m } = o;
     let F = o.startWidth, T = o.startHeight;
-    if (d.includes("e") || d.includes("w")) {
-      const P = d.includes("e") ? e.clientX - o.startX : o.startX - e.clientX;
-      F = Math.max(Z, o.startWidth + P * 2);
+    if (m.includes("e") || m.includes("w")) {
+      const M = m.includes("e") ? e.clientX - o.startX : o.startX - e.clientX;
+      F = Math.max(rt, o.startWidth + M * 2);
     }
-    if (d.includes("s") || d.includes("n")) {
-      const P = d.includes("s") ? e.clientY - o.startY : o.startY - e.clientY;
-      T = Math.max(tt, o.startHeight + P * 2);
+    if (m.includes("s") || m.includes("n")) {
+      const M = m.includes("s") ? e.clientY - o.startY : o.startY - e.clientY;
+      T = Math.max(nt, o.startHeight + M * 2);
     }
-    D({
+    H({
       width: F,
       height: T
     });
   }, []), N = f(() => {
-    C.current = null;
-  }, []), H = n - (u ? 360 / 2 : 0), S = {
-    size: i,
-    setSize: D,
-    isInspectorOpen: u,
-    toggleInspector: _,
+    b.current = null;
+  }, []), c = ot(p, P, n - (g ? 360 / 2 : 0)), S = c.offsetX, W = {
+    size: p,
+    setSize: H,
+    isInspectorOpen: g,
+    toggleInspector: O,
     close: () => {
       I();
     }
-  }, Y = t.left + t.width / 2, G = t.top + t.height / 2, M = window.innerWidth / 2 + H - i.width / 2, O = window.innerHeight / 2 - i.height / 2, R = `${Y - M}px ${G - O}px`, j = [
+  }, R = t.left + t.width / 2, j = t.top + t.height / 2, U = P.width / 2 + S - c.width / 2, B = P.height / 2 - c.height / 2, q = `${R - U}px ${j - B}px`, A = [
     "prototype-editor-overlay-content",
-    l === "visible" ? "prototype-editor-overlay-content--visible" : "",
-    l === "closing" ? "prototype-editor-overlay-content--closing" : ""
-  ].join(" "), U = ["prototype-editor-overlay-backdrop", l === "visible" ? "prototype-editor-overlay-backdrop--visible" : ""].join(" ");
-  return /* @__PURE__ */ x("div", {
-    className: U,
+    s === "visible" ? "prototype-editor-overlay-content--visible" : "",
+    s === "closing" ? "prototype-editor-overlay-content--closing" : ""
+  ].join(" "), V = ["prototype-editor-overlay-backdrop", s === "visible" ? "prototype-editor-overlay-backdrop--visible" : ""].join(" ");
+  return /* @__PURE__ */ z("div", {
+    className: V,
     "data-testid": "studio-screen-editor-backdrop",
     onClick: I,
-    children: [/* @__PURE__ */ x("div", {
-      className: j,
+    children: [/* @__PURE__ */ z("div", {
+      className: A,
       "data-testid": "studio-screen-editor-frame",
       style: {
-        transformOrigin: R,
-        width: i.width,
-        height: i.height,
-        marginLeft: -(i.width / 2) + H,
-        marginTop: -(i.height / 2)
+        transformOrigin: q,
+        width: c.width,
+        height: c.height,
+        marginLeft: -(c.width / 2) + S,
+        marginTop: -(c.height / 2)
       },
       onClick: (e) => e.stopPropagation(),
       onPointerDown: (e) => e.stopPropagation(),
-      children: [l === "visible" && ot.map((e) => /* @__PURE__ */ y("div", {
+      children: [s === "visible" && at.map((e) => /* @__PURE__ */ w("div", {
         className: `prototype-editor-overlay-resize prototype-editor-overlay-resize--${e}`,
-        onPointerDown: (o) => E(e, o),
-        onPointerMove: L,
+        onPointerDown: (o) => Y(e, o),
+        onPointerMove: G,
         onPointerUp: N,
         onPointerCancel: N
-      }, e)), a(S)]
-    }), g && /* @__PURE__ */ y("aside", {
-      className: `prototype-editor-overlay-inspector${u && l === "visible" ? " prototype-editor-overlay-inspector--open" : ""}`,
+      }, e)), i(W)]
+    }), h && /* @__PURE__ */ w("aside", {
+      className: `prototype-editor-overlay-inspector${g && s === "visible" ? " prototype-editor-overlay-inspector--open" : ""}`,
       style: { width: 360 },
-      "aria-hidden": !u,
-      inert: !u,
+      "aria-hidden": !g,
+      inert: !g,
       onClick: (e) => e.stopPropagation(),
       onPointerDown: (e) => e.stopPropagation(),
-      children: g(S)
+      children: h(W)
     })]
   });
-}, p = /* @__PURE__ */ (function(t) {
+}, d = /* @__PURE__ */ (function(t) {
   return t.Row = "row", t.Column = "column", t.Grid = "grid", t.Wrap = "wrap", t.Freeform = "freeform", t.Grouping = "grouping", t;
-})({}), w = 8, rt = (t) => {
+})({}), x = 8, st = (t) => {
   switch (t) {
-    case p.Row:
+    case d.Row:
       return {
         display: "flex",
         flexDirection: "row",
-        gap: w
+        gap: x
       };
-    case p.Wrap:
+    case d.Wrap:
       return {
         display: "flex",
         flexDirection: "row",
         flexWrap: "wrap",
-        gap: w
+        gap: x
       };
-    case p.Grid:
+    case d.Grid:
       return {
         display: "grid",
         gridTemplateColumns: "repeat(auto-fill, minmax(120px, 1fr))",
-        gap: w
+        gap: x
       };
-    case p.Freeform:
+    case d.Freeform:
       return { position: "relative" };
-    case p.Column:
-    case p.Grouping:
+    case d.Column:
+    case d.Grouping:
       return {
         display: "flex",
         flexDirection: "column",
-        gap: w
+        gap: x
       };
   }
-}, nt = (t) => t !== p.Freeform, it = ({ component: t, arrangement: r, isDragOver: n }) => {
-  const a = (t.children ?? []).filter(Boolean).map(B), g = nt(r);
-  return /* @__PURE__ */ x("div", {
+}, lt = (t) => t !== d.Freeform, ct = ({ component: t, arrangement: r, isDragOver: n }) => {
+  const i = (t.children ?? []).filter(Boolean).map(J), h = lt(r);
+  return /* @__PURE__ */ z("div", {
     className: `prototype-layout-container${n ? " prototype-layout-container--drag-over" : ""}`,
     "data-layout-arrangement": r,
-    style: rt(r),
-    children: [a.length === 0 && /* @__PURE__ */ y("div", {
+    style: st(r),
+    children: [i.length === 0 && /* @__PURE__ */ w("div", {
       className: "prototype-layout-container__empty",
       "aria-hidden": "true"
-    }), a.map((s) => {
-      const c = J(s), l = K(s), m = {
-        width: c.width > 0 ? c.width : void 0,
-        height: c.height > 0 ? c.height : void 0
+    }), i.map((a) => {
+      const l = Z(a), s = tt(a), y = {
+        width: l.width > 0 ? l.width : void 0,
+        height: l.height > 0 ? l.height : void 0
       };
-      return /* @__PURE__ */ y("div", {
+      return /* @__PURE__ */ w("div", {
         className: "prototype-layout-container__item",
-        style: g ? m : {
+        style: h ? y : {
           position: "absolute",
-          left: l.x,
-          top: l.y,
-          ...m
+          left: s.x,
+          top: s.y,
+          ...y
         },
-        children: Q(s)
-      }, String(s.id));
+        children: et(a)
+      }, String(a.id));
     })]
   });
-}, h = "StudioLayout", z = "Layout", at = (t) => {
-  class r extends A {
+}, u = "StudioLayout", D = "Layout", dt = (t) => {
+  class r extends Q {
     componentName = t.type;
-    category = z;
-    library = h;
+    category = D;
+    library = u;
     initialSize = {
       width: 260,
       height: 140
@@ -173,44 +192,44 @@ var $ = 900, k = 640, Z = 320, tt = 300, dt = 360, et = (t) => t ? {
     get toolbarIcon() {
       return t.icon;
     }
-    RenderPrototype(a) {
-      return /* @__PURE__ */ y(it, {
-        ...a,
+    RenderPrototype(i) {
+      return /* @__PURE__ */ w(ct, {
+        ...i,
         arrangement: t.arrangement
       });
     }
   }
   return r;
-}, mt = (t) => {
+}, wt = (t) => {
   const r = {};
   for (const n of t) {
-    const a = at(n);
-    r[n.type] = a, r[`${h}.${n.type}`] = a;
+    const i = dt(n);
+    r[n.type] = i, r[`${u}.${n.type}`] = i;
   }
-  return q(h, r), {
-    name: h,
+  return K(u, r), {
+    name: u,
     bundlePath: "",
     categories: [{
-      name: z,
+      name: D,
       components: t.map((n) => ({
         name: n.name,
-        category: z,
-        library: h,
+        category: D,
+        library: u,
         bundlePath: "",
-        type: `${h}.${n.type}`,
+        type: `${u}.${n.type}`,
         component: new r[n.type]()
       }))
     }]
   };
 };
 export {
-  p as LayoutArrangement,
-  ht as PrototypeOverlayFrame,
-  rt as arrangementStyle,
-  at as createLayoutContainerComponent,
-  dt as inspectorWidth,
-  nt as isFlowArrangement,
-  z as layoutContainerCategory,
-  h as layoutContainerLibrary,
-  mt as registerLayoutContainers
+  d as LayoutArrangement,
+  gt as PrototypeOverlayFrame,
+  st as arrangementStyle,
+  dt as createLayoutContainerComponent,
+  yt as inspectorWidth,
+  lt as isFlowArrangement,
+  D as layoutContainerCategory,
+  u as layoutContainerLibrary,
+  wt as registerLayoutContainers
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cratis/scene",
-  "version": "0.158.1",
+  "version": "0.159.0",
   "description": "Cratis Scene: renders Studio prototypes as thumbnails and previews.",
   "license": "MIT",
   "author": "Cratis",