matterviz 0.3.1 → 0.3.3

package/dist/overlays/ContextMenu.svelte

@@ -1,46 +1,72 @@
-<script lang="ts">import Icon from '../Icon.svelte';
-let { sections, selected_values = {}, on_select, position, visible, on_close, menu_element, ...rest } = $props();
-// Calculate smart position that keeps menu in viewport
-function get_smart_position() {
-    if (!menu_element)
-        return position;
-    const rect = menu_element.getBoundingClientRect();
-    let { x, y } = position;
-    if (x + rect.width > window.innerWidth)
-        x = position.x - rect.width;
-    if (y + rect.height > window.innerHeight)
-        y = position.y - rect.height;
-    return { x: Math.max(0, x), y: Math.max(0, y) };
-}
-// Handle click outside to close
-function handle_click_outside(event) {
-    const target = event.target;
-    if (visible) {
-        const menu = target.closest(`.context-menu`);
-        if (!menu)
-            on_close?.();
+<script lang="ts">
+  import Icon from '../Icon.svelte'
+  import type { IconName } from '../icons'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  interface MenuOption {
+    value: string
+    icon?: string
+    label?: string
+    disabled?: boolean
+  }
+  let {
+    sections,
+    selected_values = {},
+    on_select,
+    position,
+    visible,
+    on_close,
+    menu_element,
+    ...rest
+  }: HTMLAttributes<HTMLDivElement> & {
+    sections: Readonly<{ title: string; options: readonly MenuOption[] }[]>
+    selected_values?: Record<string, string>
+    on_select?: (section_title: string, option: MenuOption) => void
+    position: { x: number; y: number }
+    visible: boolean
+    on_close?: () => void
+    menu_element?: HTMLDivElement
+  } = $props()
+
+  // Calculate smart position that keeps menu in viewport
+  function get_smart_position() {
+    if (!menu_element) return position
+    const rect = menu_element.getBoundingClientRect()
+    let { x, y } = position
+    if (x + rect.width > window.innerWidth) x = position.x - rect.width
+    if (y + rect.height > window.innerHeight) y = position.y - rect.height
+    return { x: Math.max(0, x), y: Math.max(0, y) }
+  }
+
+  // Handle click outside to close
+  function handle_click_outside(event: MouseEvent) {
+    const target = event.target
+    if (target instanceof Element && visible) {
+      const menu = target.closest(`.context-menu`)
+      if (!menu) on_close?.()
     }
-}
-// Handle right-click outside to close
-function handle_right_click_outside(event) {
-    if (!visible)
-        return;
-    const menu = event.target.closest(`.context-menu`);
+  }
+
+  // Handle right-click outside to close
+  function handle_right_click_outside(event: MouseEvent) {
+    if (!visible) return
+    const target = event.target
+    const menu = target instanceof Element ? target.closest(`.context-menu`) : null
     if (!menu) {
-        event.preventDefault();
-        on_close?.();
+      event.preventDefault()
+      on_close?.()
     }
-}
-// Handle keyboard shortcuts
-function handle_keydown(event) {
-    if (event.key === `Escape` && visible)
-        on_close?.();
-}
-// Handle option selection
-function handle_option_click(section_title, option) {
-    if (!option.disabled)
-        on_select?.(section_title, option);
-}
+  }
+
+  // Handle keyboard shortcuts
+  function handle_keydown(event: KeyboardEvent) {
+    if (event.key === `Escape` && visible) on_close?.()
+  }
+
+  // Handle option selection
+  function handle_option_click(section_title: string, option: MenuOption) {
+    if (!option.disabled) on_select?.(section_title, option)
+  }
 </script>
 
 <svelte:document