@floegence/floe-webapp-core 0.36.18 → 0.36.20

package/dist/components/workbench/WorkbenchSurface.js

@@ -1,231 +1,323 @@
-import { insert as c, createComponent as a, Portal as v, addEventListener as w, effect as h, className as k, setAttribute as p, template as g, delegateEvents as W } from "solid-js/web";
-import { createEffect as s, onCleanup as u, Show as b } from "solid-js";
-import { isTypingElement as C } from "../../utils/dom.js";
-import { clientToCanvasWorld as A } from "../ui/canvasGeometry.js";
-import { WorkbenchCanvas as D } from "./WorkbenchCanvas.js";
-import { WorkbenchContextMenu as y } from "./WorkbenchContextMenu.js";
-import { WorkbenchFilterBar as S } from "./WorkbenchFilterBar.js";
-import { WorkbenchHud as x } from "./WorkbenchHud.js";
-import { WorkbenchLockButton as M } from "./WorkbenchLockButton.js";
-import { installWorkbenchContextMenuDismissListeners as F } from "./workbenchContextMenuDismiss.js";
-import { useWorkbenchModel as R } from "./useWorkbenchModel.js";
-var T = /* @__PURE__ */ g("<div class=workbench-menu-backdrop data-floe-workbench-boundary=true>"), L = /* @__PURE__ */ g("<div><div class=workbench-surface__body data-floe-workbench-canvas-frame=true>");
-const E = "F1";
-function H(i) {
-  const e = R({
+import { use as L, spread as O, mergeProps as T, insert as g, createComponent as d, Portal as _, addEventListener as B, template as S, delegateEvents as q } from "solid-js/web";
+import { createSignal as y, createMemo as m, untrack as h, createEffect as f, onCleanup as v, Show as z } from "solid-js";
+import { clientToCanvasWorld as $ } from "../ui/canvasGeometry.js";
+import { WorkbenchCanvas as V } from "./WorkbenchCanvas.js";
+import { WorkbenchContextMenu as N } from "./WorkbenchContextMenu.js";
+import { WorkbenchFilterBar as P } from "./WorkbenchFilterBar.js";
+import { WorkbenchHud as X } from "./WorkbenchHud.js";
+import { WorkbenchLockButton as Y } from "./WorkbenchLockButton.js";
+import { installWorkbenchContextMenuDismissListeners as H } from "./workbenchContextMenuDismiss.js";
+import { useWorkbenchModel as K } from "./useWorkbenchModel.js";
+import { resolveWorkbenchInteractionAdapter as U } from "./workbenchInteractionAdapter.js";
+var Z = /* @__PURE__ */ S("<div class=workbench-menu-backdrop data-floe-workbench-boundary=true>"), G = /* @__PURE__ */ S("<div><div class=workbench-surface__body data-floe-workbench-canvas-frame=true>");
+const j = "F1";
+function ue(i) {
+  const t = K({
     state: () => i.state(),
-    setState: (t) => i.setState(t),
+    setState: (e) => i.setState(e),
     widgetDefinitions: () => i.widgetDefinitions,
     onClose: () => {
     }
-  });
-  s(() => {
+  }), [u, A] = y(null), a = m(() => U(i.interactionAdapter)), [W, w] = y(h(() => a().createInitialInputOwner())), p = m(() => {
+    const e = i.launcherWidgetTypes;
+    return !e || e.length <= 0 ? null : new Set(e);
+  }), I = m(() => {
+    const e = t.widgetDefinitions(), n = p();
+    return n ? e.filter((r) => n.has(r.type)) : e;
+  }), D = m(() => {
+    const e = t.contextMenu.items(), n = p();
+    return n ? e.filter((r) => {
+      if (r.kind !== "action")
+        return !0;
+      const o = /^add-(.+)$/.exec(String(r.id ?? ""));
+      return o ? n.has(o[1]) : !0;
+    }) : e;
+  }), k = (e, n, r) => {
+    const o = a(), c = o.findWidgetRoot(e), s = o.readWidgetId(c);
+    if (s) {
+      w(o.createWidgetInputOwner(s, n));
+      return;
+    }
+    const b = u();
+    b && e instanceof Node && b.contains(e) && w(o.createCanvasInputOwner(r));
+  }, x = () => {
+    const e = u()?.querySelector('[data-floe-workbench-canvas-frame="true"]'), n = t.viewport(), r = e?.getBoundingClientRect(), o = r?.width ?? 0, c = r?.height ?? 0;
+    return {
+      worldX: o > 0 ? (o / 2 - n.x) / n.scale : 240,
+      worldY: c > 0 ? (c / 2 - n.y) / n.scale : 180
+    };
+  }, l = (e) => {
+    const n = h(a), r = h(u);
+    queueMicrotask(() => {
+      n.focusWidgetElement(r, e), w(n.createWidgetInputOwner(e, "activation"));
+    });
+  }, M = (e) => {
+    const n = t.navigation.fitWidget(e);
+    l(n.id);
+  }, R = (e) => {
+    const n = t.navigation.overviewWidget(e);
+    l(n.id);
+  };
+  f(() => {
     i.onApiReady?.({
-      ensureWidget: (t, r) => e.widgetActions.ensureWidget(t, r) ?? null,
-      clearSelection: () => e.selection.clear(),
-      focusWidget: (t, r) => e.navigation.focusWidget(t, r),
-      fitWidget: (t) => e.navigation.fitWidget(t),
-      overviewWidget: (t) => e.navigation.overviewWidget(t),
-      findWidgetByType: (t) => e.queries.findWidgetByType(t)
-    }), u(() => {
+      ensureWidget: (e, n) => t.widgetActions.ensureWidget(e, n) ?? null,
+      createWidget: (e, n) => {
+        const r = x(), o = t.widgetActions.addWidgetAtCursor(e, n?.worldX ?? r.worldX, n?.worldY ?? r.worldY) ?? null;
+        return o && n?.centerViewport !== !1 && t.navigation.centerOnWidget(o), o;
+      },
+      clearSelection: () => t.selection.clear(),
+      focusWidget: (e, n) => {
+        const r = t.navigation.focusWidget(e, n);
+        return l(r.id), r;
+      },
+      fitWidget: (e) => {
+        const n = t.navigation.fitWidget(e);
+        return l(n.id), n;
+      },
+      overviewWidget: (e) => {
+        const n = t.navigation.overviewWidget(e);
+        return l(n.id), n;
+      },
+      findWidgetByType: (e) => t.queries.findWidgetByType(e),
+      findWidgetById: (e) => t.queries.findWidgetById(e),
+      updateWidgetTitle: (e, n) => {
+        const r = String(e ?? "").trim(), o = String(n ?? "").trim();
+        !r || !o || i.setState((c) => ({
+          ...c,
+          widgets: c.widgets.map((s) => s.id === r && s.title !== o ? {
+            ...s,
+            title: o
+          } : s)
+        }));
+      }
+    }), v(() => {
       i.onApiReady?.(null);
     });
   });
-  const l = () => i.lockShortcut === void 0 ? E : i.lockShortcut;
-  s(() => {
-    if (typeof window > "u" || !e.contextMenu.state()) return;
-    const t = F({
+  const C = () => i.lockShortcut === void 0 ? j : i.lockShortcut;
+  f(() => {
+    if (typeof window > "u" || !t.contextMenu.state()) return;
+    const e = H({
       ownerWindow: window,
-      onDismiss: e.contextMenu.close
+      onDismiss: t.contextMenu.close
+    });
+    v(() => e());
+  }), f(() => {
+    const e = W();
+    if (e.kind !== "widget") return;
+    t.widgets().some((r) => r.id === e.widgetId) || w(a().createCanvasInputOwner("widget_removed"));
+  }), f(() => {
+    const e = u();
+    if (!e) return;
+    const n = (o) => {
+      k(o.target, "pointer", "background_pointer");
+    }, r = (o) => {
+      k(o.target, "focus", "background_focus");
+    };
+    e.addEventListener("pointerdown", n, !0), e.addEventListener("focusin", r), v(() => {
+      e.removeEventListener("pointerdown", n, !0), e.removeEventListener("focusin", r);
     });
-    u(() => t());
-  }), s(() => {
+  }), f(() => {
     if (i.enableKeyboard === !1 || typeof document > "u") return;
-    const t = l(), r = (n) => {
-      if (n.defaultPrevented || n.isComposing) return;
-      if (t !== null && n.key === t) {
-        n.preventDefault(), e.lock.toggle();
-        return;
-      }
-      const o = n.target;
-      if (!(o instanceof Element && C(o)))
-        switch (n.key) {
-          case "ArrowUp":
-            n.preventDefault(), e.navigation.handleArrowNavigation("up");
-            break;
-          case "ArrowDown":
-            n.preventDefault(), e.navigation.handleArrowNavigation("down");
-            break;
-          case "ArrowLeft":
-            n.preventDefault(), e.navigation.handleArrowNavigation("left");
-            break;
-          case "ArrowRight":
-            n.preventDefault(), e.navigation.handleArrowNavigation("right");
-            break;
-          case "Delete":
-          case "Backspace":
-            e.selectedWidgetId() && (n.preventDefault(), e.widgetActions.deleteSelected());
-            break;
+    const e = C(), n = (r) => {
+      if (!(r.defaultPrevented || r.isComposing)) {
+        if (e !== null && r.key === e) {
+          r.preventDefault(), t.lock.toggle();
+          return;
         }
+        if (!a().shouldBypassGlobalHotkeys({
+          root: u(),
+          target: r.target,
+          owner: W(),
+          interactiveSelector: a().interactiveSelector
+        }))
+          switch (r.key) {
+            case "ArrowUp":
+              r.preventDefault(), t.navigation.handleArrowNavigation("up");
+              break;
+            case "ArrowDown":
+              r.preventDefault(), t.navigation.handleArrowNavigation("down");
+              break;
+            case "ArrowLeft":
+              r.preventDefault(), t.navigation.handleArrowNavigation("left");
+              break;
+            case "ArrowRight":
+              r.preventDefault(), t.navigation.handleArrowNavigation("right");
+              break;
+            case "Delete":
+            case "Backspace":
+              t.selectedWidgetId() && (r.preventDefault(), t.widgetActions.deleteSelected());
+              break;
+          }
+      }
     };
-    document.addEventListener("keydown", r, !0), u(() => document.removeEventListener("keydown", r, !0));
+    document.addEventListener("keydown", n, !0), v(() => document.removeEventListener("keydown", n, !0));
   });
-  const m = (t, r) => {
-    const n = document.querySelector('[data-floe-workbench-canvas-frame="true"]');
-    if (!n) return null;
-    const o = n.getBoundingClientRect();
-    return A(o, e.viewport(), {
-      clientX: t,
-      clientY: r
+  const E = (e, n) => {
+    const r = u()?.querySelector('[data-floe-workbench-canvas-frame="true"]');
+    if (!r) return null;
+    const o = r.getBoundingClientRect();
+    return $(o, t.viewport(), {
+      clientX: e,
+      clientY: n
     });
-  }, f = (t, r, n) => {
-    const o = m(r, n);
-    o && e.widgetActions.addWidgetAtCursor(t, o.worldX, o.worldY);
+  }, F = (e, n, r) => {
+    const o = E(n, r);
+    o && t.widgetActions.addWidgetAtCursor(e, o.worldX, o.worldY);
   };
   return (() => {
-    var t = L(), r = t.firstChild;
-    return c(r, a(D, {
+    var e = G(), n = e.firstChild;
+    return L(A, e), O(e, T({
+      get class() {
+        return `workbench-surface${i.class ? ` ${i.class}` : ""}`;
+      }
+    }, () => ({
+      [a().surfaceRootAttr]: "true"
+    }), {
+      get "data-workbench-theme"() {
+        return t.theme();
+      }
+    }), !1, !0), g(n, d(V, {
       get widgetDefinitions() {
-        return e.widgetDefinitions();
+        return t.widgetDefinitions();
       },
       get widgets() {
-        return e.widgets();
+        return t.widgets();
       },
       get viewport() {
-        return e.viewport();
+        return t.viewport();
       },
       get canvasFrameSize() {
-        return e.canvasFrameSize();
+        return t.canvasFrameSize();
       },
       get selectedWidgetId() {
-        return e.selectedWidgetId();
+        return t.selectedWidgetId();
       },
       get optimisticFrontWidgetId() {
-        return e.optimisticFrontWidgetId();
+        return t.optimisticFrontWidgetId();
       },
       get locked() {
-        return e.locked();
+        return t.locked();
       },
       get filters() {
-        return e.filters();
+        return t.filters();
+      },
+      get interactionAdapter() {
+        return a();
       },
       get setCanvasFrameRef() {
-        return e.setCanvasFrameRef;
+        return t.setCanvasFrameRef;
       },
       get onViewportCommit() {
-        return e.canvas.commitViewport;
+        return t.canvas.commitViewport;
       },
       get onViewportInteractionStart() {
-        return e.canvas.cancelViewportNavigation;
+        return t.canvas.cancelViewportNavigation;
       },
       get onCanvasContextMenu() {
-        return e.canvas.openCanvasContextMenu;
+        return t.canvas.openCanvasContextMenu;
       },
       get onCanvasPointerDown() {
-        return e.selection.clear;
+        return t.selection.clear;
       },
       get onSelectWidget() {
-        return e.canvas.selectWidget;
+        return t.canvas.selectWidget;
       },
       get onWidgetContextMenu() {
-        return e.canvas.openWidgetContextMenu;
+        return t.canvas.openWidgetContextMenu;
       },
       get onStartOptimisticFront() {
-        return e.canvas.startOptimisticFront;
+        return t.canvas.startOptimisticFront;
       },
       get onCommitFront() {
-        return e.canvas.commitFront;
+        return t.canvas.commitFront;
       },
       get onCommitMove() {
-        return e.canvas.commitMove;
+        return t.canvas.commitMove;
       },
       get onCommitResize() {
-        return e.canvas.commitResize;
+        return t.canvas.commitResize;
       },
-      get onRequestOverview() {
-        return e.navigation.overviewWidget;
+      onRequestOverview: R,
+      onRequestFit: M,
+      get onRequestDelete() {
+        return i.onRequestDelete ?? t.widgetActions.deleteWidget;
       },
-      get onRequestFit() {
-        return e.navigation.fitWidget;
+      get onLayoutInteractionStart() {
+        return i.onLayoutInteractionStart;
       },
-      get onRequestDelete() {
-        return e.widgetActions.deleteWidget;
+      get onLayoutInteractionEnd() {
+        return i.onLayoutInteractionEnd;
       }
-    })), c(t, a(M, {
+    })), g(e, d(Y, {
       get locked() {
-        return e.locked();
+        return t.locked();
       },
       get onToggle() {
-        return e.lock.toggle;
+        return t.lock.toggle;
       },
       get shortcutLabel() {
-        return l() ?? void 0;
+        return C() ?? void 0;
       }
-    }), null), c(t, a(S, {
+    }), null), g(e, d(P, {
       get widgetDefinitions() {
-        return e.widgetDefinitions();
+        return I();
       },
       get widgets() {
-        return e.widgets();
+        return t.widgets();
       },
       get filters() {
-        return e.filters();
+        return t.filters();
       },
       get onSoloFilter() {
-        return e.filter.solo;
+        return t.filter.solo;
       },
       get onShowAll() {
-        return e.filter.showAll;
+        return t.filter.showAll;
       },
-      onCreateAt: f
-    }), null), c(t, a(x, {
+      onCreateAt: F
+    }), null), g(e, d(X, {
       get scaleLabel() {
-        return e.scaleLabel();
+        return t.scaleLabel();
       },
       get onZoomOut() {
-        return e.hud.zoomOut;
+        return t.hud.zoomOut;
       },
       get onZoomIn() {
-        return e.hud.zoomIn;
+        return t.hud.zoomIn;
       },
       get activeTheme() {
-        return e.theme();
+        return t.theme();
       },
-      onSelectTheme: (n) => e.appearance.setTheme(n)
-    }), null), c(t, a(b, {
+      onSelectTheme: (r) => t.appearance.setTheme(r)
+    }), null), g(e, d(z, {
       get when() {
-        return e.contextMenu.state();
+        return t.contextMenu.state();
       },
       get children() {
-        return a(v, {
+        return d(_, {
           get children() {
             return [(() => {
-              var n = T();
-              return w(n, "contextmenu", e.contextMenu.retarget, !0), n;
-            })(), a(y, {
+              var r = Z();
+              return B(r, "contextmenu", t.contextMenu.retarget, !0), r;
+            })(), d(N, {
               get x() {
-                return e.contextMenu.position()?.left ?? 0;
+                return t.contextMenu.position()?.left ?? 0;
               },
               get y() {
-                return e.contextMenu.position()?.top ?? 0;
+                return t.contextMenu.position()?.top ?? 0;
               },
               get items() {
-                return e.contextMenu.items();
+                return D();
               }
             })];
           }
         });
       }
-    }), null), h((n) => {
-      var o = `workbench-surface${i.class ? ` ${i.class}` : ""}`, d = e.theme();
-      return o !== n.e && k(t, n.e = o), d !== n.t && p(t, "data-workbench-theme", n.t = d), n;
-    }, {
-      e: void 0,
-      t: void 0
-    }), t;
+    }), null), e;
   })();
 }
-W(["contextmenu"]);
+q(["contextmenu"]);
 export {
-  H as WorkbenchSurface
+  ue as WorkbenchSurface
 };

package/dist/components/workbench/WorkbenchWidget.d.ts

@@ -1,5 +1,6 @@
 import { type JSX } from 'solid-js';
-import type { WorkbenchViewport, WorkbenchWidgetDefinition, WorkbenchWidgetItem, WorkbenchWidgetRenderMode, WorkbenchWidgetType } from './types';
+import { type ResolvedWorkbenchInteractionAdapter } from './workbenchInteractionAdapter';
+import type { WorkbenchViewport, WorkbenchInteractionAdapter, WorkbenchWidgetDefinition, WorkbenchWidgetItem, WorkbenchWidgetRenderMode, WorkbenchWidgetType } from './types';
 export interface WorkbenchWidgetProps {
     definition: WorkbenchWidgetDefinition;
     widgetId: string;
@@ -20,6 +21,7 @@ export interface WorkbenchWidgetProps {
     layoutMode?: WorkbenchWidgetRenderMode;
     projectedViewport?: WorkbenchViewport;
     surfaceReady?: boolean;
+    interactionAdapter?: WorkbenchInteractionAdapter | ResolvedWorkbenchInteractionAdapter;
     onSelect: (widgetId: string) => void;
     onContextMenu: (event: MouseEvent, item: WorkbenchWidgetItem) => void;
     onStartOptimisticFront: (widgetId: string) => void;
@@ -35,5 +37,7 @@ export interface WorkbenchWidgetProps {
     onRequestOverview: (item: WorkbenchWidgetItem) => void;
     onRequestFit: (item: WorkbenchWidgetItem) => void;
     onRequestDelete: (widgetId: string) => void;
+    onLayoutInteractionStart?: () => void;
+    onLayoutInteractionEnd?: () => void;
 }
 export declare function WorkbenchWidget(props: WorkbenchWidgetProps): JSX.Element;