pixelweaver 0.1.0

package/src/lib/ui/ContextMenu.svelte

@@ -0,0 +1,216 @@
+<!--
+  ContextMenu -- a floating context menu that appears at the cursor position.
+
+  Reads menu items from the menuRegistry filtered by a given menuPath
+  (e.g. "context/canvas", "context/layer", "context/frame"). Reuses the
+  same visual styling as the MenuBar dropdown. Dismissed via Escape, clicking
+  outside, or clicking a menu item.
+-->
+<script lang="ts">
+  import { menuRegistry } from '../core/registries.svelte.js';
+  import { executeOrDispatch, getCommandForDispatch } from '../core/command-runner.js';
+
+  interface Props {
+    /** The context menu path to show items for (e.g. "context/canvas") */
+    menuPath: string;
+    /** Pixel position */
+    x: number;
+    y: number;
+    /** Close callback */
+    onClose: () => void;
+  }
+
+  let { menuPath, x, y, onClose }: Props = $props();
+
+  // Portal action: moves the element to document.body so position:fixed
+  // works correctly even inside dockview panels that use transforms.
+  function portal(node: HTMLElement) {
+    document.body.appendChild(node);
+    return { destroy() { node.remove(); } };
+  }
+
+  // Gather items for this context
+  let items = $derived(buildContextItems(menuPath));
+
+  function buildContextItems(path: string) {
+    const result: { label: string; action?: () => void; disabled: boolean; separator?: boolean; shortcut?: string; group: string; order: number }[] = [];
+
+    for (const [_name, contrib] of menuRegistry.getAll()) {
+      if (contrib.menuPath !== path) continue;
+      if (contrib.when && !contrib.when()) continue;
+
+      const cmd = getCommandForDispatch(contrib.commandId);
+      const label = contrib.label ?? cmd?.label ?? contrib.commandId.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+      const disabled = contrib.enabled ? !contrib.enabled() : false;
+      const shortcut = cmd?.defaultShortcut;
+
+      result.push({
+        label,
+        action: cmd ? () => { executeOrDispatch(contrib.commandId, cmd); } : undefined,
+        disabled,
+        shortcut,
+        group: contrib.group,
+        order: contrib.order,
+      });
+    }
+
+    // Sort by group then order
+    result.sort((a, b) => {
+      const gc = a.group.localeCompare(b.group);
+      if (gc !== 0) return gc;
+      return a.order - b.order;
+    });
+
+    // Insert separators between groups
+    const withSeps: typeof result = [];
+    let lastGroup = '';
+    for (const item of result) {
+      if (lastGroup && item.group !== lastGroup) {
+        withSeps.push({ label: '', separator: true, disabled: false, group: '', order: 0 });
+      }
+      withSeps.push(item);
+      lastGroup = item.group;
+    }
+
+    return withSeps;
+  }
+
+  function handleItemClick(item: typeof items[0]) {
+    if (item.disabled || item.separator) return;
+    item.action?.();
+    onClose();
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      onClose();
+    }
+  }
+
+  // Clamp the menu position to the viewport after it mounts, so it does
+  // not spill off the right or bottom edges when opened near the edges.
+  // Bound to a reactive state so the inline style updates if measurements
+  // change (e.g. after the items list becomes ready).
+  let menuEl: HTMLElement | undefined = $state();
+  let clampedX = $state(x);
+  let clampedY = $state(y);
+
+  $effect(() => {
+    if (!menuEl) return;
+    // Re-read x/y to re-run when props change
+    const _x = x;
+    const _y = y;
+    // Wait a microtask so the menu has been measured after items render.
+    // Capture menuEl fresh inside the microtask -- the effect could be
+    // re-run or the element removed between now and then.
+    queueMicrotask(() => {
+      // TS narrows menuEl to HTMLElement here from the outer check; if the
+      // component was removed in between, Svelte skips the microtask's
+      // effects anyway so we don't need a runtime guard.
+      const el = menuEl;
+      const rect = el.getBoundingClientRect();
+      const vw = window.innerWidth;
+      const vh = window.innerHeight;
+      const margin = 4;
+      let nx = _x;
+      let ny = _y;
+      if (nx + rect.width > vw - margin) nx = Math.max(margin, vw - rect.width - margin);
+      if (ny + rect.height > vh - margin) ny = Math.max(margin, vh - rect.height - margin);
+      clampedX = nx;
+      clampedY = ny;
+    });
+  });
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if items.length > 0}
+  <!-- svelte-ignore a11y_no_static_element_interactions, a11y_click_events_have_key_events -->
+  <div class="context-backdrop" use:portal onclick={onClose}>
+    <!-- svelte-ignore a11y_no_static_element_interactions, a11y_click_events_have_key_events -->
+    <div
+      bind:this={menuEl}
+      class="context-menu"
+      style:left="{clampedX}px"
+      style:top="{clampedY}px"
+      onclick={(e) => { e.stopPropagation(); }}
+    >
+      {#each items as item, i (i)}
+        {#if item.separator}
+          <div class="separator"></div>
+        {:else}
+          <button
+            class="context-item"
+            class:disabled={item.disabled}
+            disabled={item.disabled}
+            onclick={() => { handleItemClick(item); }}
+          >
+            <span class="item-label">{item.label}</span>
+            {#if item.shortcut}
+              <span class="item-shortcut">{item.shortcut}</span>
+            {/if}
+          </button>
+        {/if}
+      {/each}
+    </div>
+  </div>
+{/if}
+
+<style>
+  .context-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 2000;
+  }
+
+  .context-menu {
+    position: fixed;
+    min-width: 160px;
+    background: var(--bg-panel);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-md);
+    padding: 0;
+    overflow: hidden;
+    z-index: 2001;
+  }
+
+  .context-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 5px 12px;
+    background: none;
+    border: none;
+    color: var(--text-primary);
+    font-size: var(--text-lg);
+    cursor: pointer;
+    text-align: left;
+    gap: 24px;
+    white-space: nowrap;
+  }
+
+  .context-item:hover:not(:disabled) {
+    background: var(--bg-secondary);
+  }
+
+  .context-item:disabled,
+  .context-item.disabled {
+    color: var(--text-secondary);
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  .item-shortcut {
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+  }
+
+  .separator {
+    height: 1px;
+    background: var(--border);
+    margin: 4px 0;
+  }
+</style>