@floegence/floe-webapp-core 0.36.52 → 0.36.53

package/dist/components/workbench/WorkbenchSurface.js

@@ -1,18 +1,19 @@
-import { use as X, spread as q, mergeProps as Y, insert as w, createComponent as s, Portal as z, addEventListener as V, template as D, delegateEvents as P } from "solid-js/web";
-import { createSignal as L, createMemo as f, untrack as p, createEffect as v, onCleanup as y, Show as H } from "solid-js";
-import { clientToCanvasWorld as $ } from "../ui/canvasGeometry.js";
-import { WorkbenchCanvas as U } from "./WorkbenchCanvas.js";
-import { WorkbenchContextMenu as K } from "./WorkbenchContextMenu.js";
-import { WorkbenchDock as j } from "./WorkbenchFilterBar.js";
-import { WorkbenchHud as Z } from "./WorkbenchHud.js";
-import { WorkbenchLockButton as G } from "./WorkbenchLockButton.js";
-import { installWorkbenchContextMenuDismissListeners as J } from "./workbenchContextMenuDismiss.js";
-import { createContextMenuPosition as Q, WORKBENCH_CONTEXT_MENU_WIDTH_PX as ee, estimateContextMenuHeight as te } from "./workbenchHelpers.js";
-import { useWorkbenchModel as ne } from "./useWorkbenchModel.js";
-import { resolveWorkbenchInteractionAdapter as oe } from "./workbenchInteractionAdapter.js";
-var re = /* @__PURE__ */ D("<div class=workbench-menu-backdrop data-floe-workbench-boundary=true>"), ie = /* @__PURE__ */ D("<div><div class=workbench-surface__body data-floe-workbench-canvas-frame=true>");
-const ae = "F1";
-function B(i) {
+import { use as q, spread as z, mergeProps as V, insert as f, createComponent as s, Portal as H, addEventListener as $, template as B, delegateEvents as U } from "solid-js/web";
+import { createSignal as A, createMemo as g, untrack as h, createEffect as v, onCleanup as y, Show as K } from "solid-js";
+import { clientToCanvasWorld as j } from "../ui/canvasGeometry.js";
+import { WorkbenchCanvas as Z } from "./WorkbenchCanvas.js";
+import { WorkbenchContextMenu as G } from "./WorkbenchContextMenu.js";
+import { WorkbenchDock as J } from "./WorkbenchFilterBar.js";
+import { WorkbenchHud as Q } from "./WorkbenchHud.js";
+import { WorkbenchLockButton as ee } from "./WorkbenchLockButton.js";
+import { installWorkbenchContextMenuDismissListeners as te } from "./workbenchContextMenuDismiss.js";
+import { createContextMenuPosition as ne, WORKBENCH_CONTEXT_MENU_WIDTH_PX as oe, estimateContextMenuHeight as re } from "./workbenchHelpers.js";
+import { resolveWorkbenchWidgetPlacementPreview as ie, resolveWorkbenchToolPlacementPreview as ae } from "./workbenchPlacement.js";
+import { useWorkbenchModel as ce } from "./useWorkbenchModel.js";
+import { resolveWorkbenchInteractionAdapter as de } from "./workbenchInteractionAdapter.js";
+var ue = /* @__PURE__ */ B("<div class=workbench-menu-backdrop data-floe-workbench-boundary=true>"), se = /* @__PURE__ */ B("<div><div class=workbench-surface__body data-floe-workbench-canvas-frame=true>");
+const le = "F1";
+function L(i) {
   if (i)
     try {
       i.focus({
@@ -22,8 +23,8 @@ function B(i) {
       i.focus();
     }
 }
-function Ae(i) {
-  const t = ne({
+function xe(i) {
+  const t = ce({
     state: () => i.state(),
     setState: (e) => i.setState(e),
     widgetDefinitions: () => i.widgetDefinitions,
@@ -31,18 +32,18 @@ function Ae(i) {
     backgroundLayerDefaults: () => i.backgroundLayerDefaults,
     onClose: () => {
     }
-  }), [u, T] = L(null), d = f(() => oe(i.interactionAdapter)), [A, l] = L(p(() => d().createInitialInputOwner())), C = f(() => {
+  }), [u, T] = A(null), [N, R] = A(null), d = g(() => de(i.interactionAdapter)), [C, l] = A(h(() => d().createInitialInputOwner())), W = g(() => {
     const e = i.launcherWidgetTypes;
     return !e || e.length <= 0 ? null : new Set(e);
-  }), N = f(() => {
-    const e = t.widgetDefinitions(), n = C();
+  }), O = g(() => {
+    const e = t.widgetDefinitions(), n = W();
     return n ? e.filter((o) => n.has(o.type)) : e;
-  }), h = f(() => {
-    const e = t.contextMenu.state(), n = t.contextMenu.items(), o = C(), r = o ? n.filter((m) => {
+  }), S = g(() => {
+    const e = t.contextMenu.state(), n = t.contextMenu.items(), o = W(), r = o ? n.filter((m) => {
       if (m.kind !== "action")
         return !0;
-      const M = /^add-(.+)$/.exec(String(m.id ?? ""));
-      return M ? o.has(M[1]) : !0;
+      const D = /^add-(.+)$/.exec(String(m.id ?? ""));
+      return D ? o.has(D[1]) : !0;
     }) : n;
     if (!e || !i.resolveContextMenuItems)
       return r;
@@ -54,17 +55,17 @@ function Ae(i) {
       widget: c,
       closeMenu: t.contextMenu.close
     });
-  }), W = f(() => {
+  }), b = g(() => {
     const e = t.contextMenu.state();
     if (!e) return;
-    const n = h(), o = n.filter((a) => a.kind === "action").length, r = n.filter((a) => a.kind === "separator").length;
-    return Q({
+    const n = S(), o = n.filter((a) => a.kind === "action").length, r = n.filter((a) => a.kind === "separator").length;
+    return ne({
       clientX: e.clientX,
       clientY: e.clientY,
-      menuWidth: ee,
-      menuHeight: te(o, r)
+      menuWidth: oe,
+      menuHeight: re(o, r)
     });
-  }), S = (e, n, o) => {
+  }), x = (e, n, o) => {
     const r = d(), a = r.findWidgetRoot(e), c = r.readWidgetId(a);
     if (c) {
       if (t.queries.findStickyNoteById(c)) {
@@ -76,17 +77,17 @@ function Ae(i) {
     }
     const m = u();
     m && e instanceof Node && m.contains(e) && l(r.createCanvasInputOwner(o));
-  }, b = (e = "selection_cleared") => {
+  }, I = (e = "selection_cleared") => {
     const n = d(), o = u();
     t.selection.clear(), l(n.createCanvasInputOwner(e)), queueMicrotask(() => {
       if (!o || typeof document > "u") return;
       const r = document.activeElement;
       if (!(r instanceof HTMLElement) || !o.contains(r)) {
-        B(o);
+        L(o);
         return;
       }
       const a = n.findWidgetRoot(r);
-      B(o), a && document.activeElement === r && r.isConnected && r.blur();
+      L(o), a && document.activeElement === r && r.isConnected && r.blur();
     });
   }, k = () => {
     const e = u()?.querySelector('[data-floe-workbench-canvas-frame="true"]'), n = t.viewport(), o = e?.getBoundingClientRect(), r = o?.width ?? 0, a = o?.height ?? 0;
@@ -94,17 +95,17 @@ function Ae(i) {
       worldX: r > 0 ? (r / 2 - n.x) / n.scale : 240,
       worldY: a > 0 ? (a / 2 - n.y) / n.scale : 180
     };
-  }, g = (e) => {
-    const n = p(d), o = p(u);
+  }, w = (e) => {
+    const n = h(d), o = h(u);
     queueMicrotask(() => {
       n.focusWidgetElement(o, e), l(n.createWidgetInputOwner(e, "activation"));
     });
-  }, R = (e) => {
+  }, E = (e) => {
     const n = t.navigation.fitWidget(e);
-    g(n.id);
-  }, O = (e) => {
+    w(n.id);
+  }, F = (e) => {
     const n = t.navigation.overviewWidget(e);
-    g(n.id);
+    w(n.id);
   };
   v(() => {
     i.onApiReady?.({
@@ -125,18 +126,18 @@ function Ae(i) {
         const n = k();
         return t.widgetActions.addBackgroundLayerAtCursor(e?.worldX ?? n.worldX, e?.worldY ?? n.worldY) ?? null;
       },
-      clearSelection: () => b("selection_cleared"),
+      clearSelection: () => I("selection_cleared"),
       focusWidget: (e, n) => {
         const o = t.navigation.focusWidget(e, n);
-        return g(o.id), o;
+        return w(o.id), o;
       },
       fitWidget: (e) => {
         const n = t.navigation.fitWidget(e);
-        return g(n.id), n;
+        return w(n.id), n;
       },
       overviewWidget: (e) => {
         const n = t.navigation.overviewWidget(e);
-        return g(n.id), n;
+        return w(n.id), n;
       },
       findWidgetByType: (e) => t.queries.findWidgetByType(e),
       findWidgetById: (e) => t.queries.findWidgetById(e),
@@ -163,32 +164,32 @@ function Ae(i) {
       i.onApiReady?.(null);
     });
   });
-  const I = () => i.lockShortcut === void 0 ? ae : i.lockShortcut;
+  const M = () => i.lockShortcut === void 0 ? le : i.lockShortcut;
   v(() => {
     if (typeof window > "u" || !t.contextMenu.state()) return;
-    const e = J({
+    const e = te({
       ownerWindow: window,
       onDismiss: t.contextMenu.close
     });
     y(() => e());
   }), v(() => {
-    const e = A();
+    const e = C();
     if (e.kind !== "widget") return;
     t.widgets().some((o) => o.id === e.widgetId) || l(d().createCanvasInputOwner("widget_removed"));
   }), v(() => {
     const e = u();
     if (!e) return;
     const n = (r) => {
-      S(r.target, "pointer", "background_pointer");
+      x(r.target, "pointer", "background_pointer");
     }, o = (r) => {
-      S(r.target, "focus", "background_focus");
+      x(r.target, "focus", "background_focus");
     };
     e.addEventListener("pointerdown", n, !0), e.addEventListener("focusin", o), y(() => {
       e.removeEventListener("pointerdown", n, !0), e.removeEventListener("focusin", o);
     });
   }), v(() => {
     if (i.enableKeyboard === !1 || typeof document > "u") return;
-    const e = I(), n = (o) => {
+    const e = M(), n = (o) => {
       if (!(o.defaultPrevented || o.isComposing)) {
         if (e !== null && o.key === e) {
           o.preventDefault(), t.lock.toggle();
@@ -197,7 +198,7 @@ function Ae(i) {
         if (!d().shouldBypassGlobalHotkeys({
           root: u(),
           target: o.target,
-          owner: A(),
+          owner: C(),
           interactiveSelector: d().interactiveSelector
         }))
           switch (o.key) {
@@ -222,19 +223,19 @@ function Ae(i) {
     };
     document.addEventListener("keydown", n, !0), y(() => document.removeEventListener("keydown", n, !0));
   });
-  const x = (e, n) => {
+  const p = (e, n) => {
     const o = u()?.querySelector('[data-floe-workbench-canvas-frame="true"]');
     if (!o) return null;
     const r = o.getBoundingClientRect();
-    return $(r, t.viewport(), {
+    return j(r, t.viewport(), {
       clientX: e,
       clientY: n
     });
-  }, E = (e, n, o) => {
-    const r = x(n, o);
+  }, X = (e, n, o) => {
+    const r = p(n, o);
     r && t.widgetActions.addWidgetAtWorldCenter(e, r.worldX, r.worldY);
-  }, F = (e, n, o) => {
-    const r = x(n, o);
+  }, _ = (e, n, o) => {
+    const r = p(n, o);
     if (r) {
       if (e === "sticky-note") {
         t.widgetActions.addStickyNoteAtCursor(r.worldX, r.worldY);
@@ -246,12 +247,29 @@ function Ae(i) {
       }
       e === "background-region" && t.widgetActions.addBackgroundLayerAtCursor(r.worldX, r.worldY);
     }
-  }, _ = (e) => {
-    e.button === 0 && b("background_pointer");
-  };
+  }, Y = (e) => {
+    e.button === 0 && I("background_pointer");
+  }, P = g(() => {
+    const e = N();
+    if (!e) return null;
+    const n = p(e.clientX, e.clientY);
+    return n ? e.kind === "widget" ? ie({
+      type: e.id,
+      widgetDefinitions: t.widgetDefinitions(),
+      worldX: n.worldX,
+      worldY: n.worldY
+    }) : ae({
+      tool: e.id,
+      label: e.label,
+      worldX: n.worldX,
+      worldY: n.worldY,
+      textDefaults: i.textAnnotationDefaults,
+      backgroundDefaults: i.backgroundLayerDefaults
+    }) : null;
+  });
   return (() => {
-    var e = ie(), n = e.firstChild;
-    return X(T, e), q(e, Y({
+    var e = se(), n = e.firstChild;
+    return q(T, e), z(e, V({
       get class() {
         return `workbench-surface${i.class ? ` ${i.class}` : ""}`;
       }
@@ -265,7 +283,7 @@ function Ae(i) {
         return t.mode();
       },
       tabIndex: -1
-    }), !1, !0), w(n, s(U, {
+    }), !1, !0), f(n, s(Z, {
       get widgetDefinitions() {
         return t.widgetDefinitions();
       },
@@ -281,6 +299,9 @@ function Ae(i) {
       get backgroundLayers() {
         return t.backgroundLayers();
       },
+      get placementPreview() {
+        return P();
+      },
       get viewport() {
         return t.viewport();
       },
@@ -320,7 +341,7 @@ function Ae(i) {
       get onCanvasContextMenu() {
         return t.canvas.openCanvasContextMenu;
       },
-      onCanvasPointerDown: _,
+      onCanvasPointerDown: Y,
       get onSelectWidget() {
         return t.canvas.selectWidget;
       },
@@ -399,8 +420,8 @@ function Ae(i) {
       get onDeleteBackgroundLayer() {
         return t.widgetActions.deleteBackgroundLayer;
       },
-      onRequestOverview: O,
-      onRequestFit: R,
+      onRequestOverview: F,
+      onRequestFit: E,
       get onRequestDelete() {
         return i.onRequestDelete ?? t.widgetActions.deleteWidget;
       },
@@ -410,7 +431,7 @@ function Ae(i) {
       get onLayoutInteractionEnd() {
         return i.onLayoutInteractionEnd;
       }
-    })), w(e, s(G, {
+    })), f(e, s(ee, {
       get locked() {
         return t.locked();
       },
@@ -418,11 +439,11 @@ function Ae(i) {
         return t.lock.toggle;
       },
       get shortcutLabel() {
-        return I() ?? void 0;
+        return M() ?? void 0;
       }
-    }), null), w(e, s(j, {
+    }), null), f(e, s(J, {
       get widgetDefinitions() {
-        return N();
+        return O();
       },
       get widgets() {
         return t.widgets();
@@ -446,9 +467,10 @@ function Ae(i) {
         return t.canvas.commitViewport;
       },
       onViewportInteractionStart: () => t.canvas.cancelViewportNavigation(),
-      onCreateAt: E,
-      onCreateToolAt: F
-    }), null), w(e, s(Z, {
+      onCreateAt: X,
+      onCreateToolAt: _,
+      onDragPreviewChange: R
+    }), null), f(e, s(Q, {
       get scaleLabel() {
         return t.scaleLabel();
       },
@@ -462,25 +484,25 @@ function Ae(i) {
         return t.theme();
       },
       onSelectTheme: (o) => t.appearance.setTheme(o)
-    }), null), w(e, s(H, {
+    }), null), f(e, s(K, {
       get when() {
         return t.contextMenu.state();
       },
       get children() {
-        return s(z, {
+        return s(H, {
           get children() {
             return [(() => {
-              var o = re();
-              return V(o, "contextmenu", t.contextMenu.retarget, !0), o;
-            })(), s(K, {
+              var o = ue();
+              return $(o, "contextmenu", t.contextMenu.retarget, !0), o;
+            })(), s(G, {
               get x() {
-                return W()?.left ?? 0;
+                return b()?.left ?? 0;
               },
               get y() {
-                return W()?.top ?? 0;
+                return b()?.top ?? 0;
               },
               get items() {
-                return h();
+                return S();
               }
             })];
           }
@@ -489,7 +511,7 @@ function Ae(i) {
     }), null), e;
   })();
 }
-P(["contextmenu"]);
+U(["contextmenu"]);
 export {
-  Ae as WorkbenchSurface
+  xe as WorkbenchSurface
 };