matterviz 0.3.2 → 0.3.4

package/dist/plot/PlotLegend.svelte

@@ -1,100 +1,183 @@
-<script lang="ts">import { onDestroy } from 'svelte';
-import { SvelteMap, SvelteSet } from 'svelte/reactivity';
-// Unique instance ID to prevent gradient ID collisions when multiple legends render on the same page
-const instance_id = crypto.randomUUID().slice(0, 8);
-let { series_data = [], layout = `vertical`, layout_tracks = 1, // Default to 1 column/row
-style = ``, item_style = ``, collapsed_groups = $bindable(new SvelteSet()), on_toggle = () => { }, on_double_click = () => { }, on_fill_toggle, on_fill_double_click, on_group_toggle, on_group_double_click, on_drag_start = () => { }, on_drag = () => { }, on_drag_end = () => { }, on_hover_change, draggable = true, root_element = $bindable(undefined), ...rest } = $props();
-let is_dragging = $state(false);
-let drag_start_coords = $state(null);
-let grouped_series = $derived.by(() => {
-    const groups = [];
-    const group_map = new SvelteMap();
+<script lang="ts">
+  import type { LegendItem, Orientation } from './'
+  import { sanitize_html } from '../sanitize'
+  import { strip_html } from '../table'
+  import { onDestroy } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { SvelteMap, SvelteSet } from 'svelte/reactivity'
+
+  // Unique instance ID to prevent gradient ID collisions when multiple legends render on the same page
+  const instance_id = crypto.randomUUID().slice(0, 8)
+
+  let {
+    series_data = [],
+    layout = `vertical`,
+    layout_tracks = 1, // Default to 1 column/row
+    style = ``,
+    item_style = ``,
+    collapsed_groups = $bindable(new SvelteSet<string>()),
+    on_toggle = () => {},
+    on_double_click = () => {},
+    on_fill_toggle,
+    on_fill_double_click,
+    on_group_toggle,
+    on_group_double_click,
+    on_drag_start = () => {},
+    on_drag = () => {},
+    on_drag_end = () => {},
+    on_hover_change,
+    draggable = true,
+    root_element = $bindable<HTMLDivElement | undefined>(undefined),
+    ...rest
+  }: Omit<HTMLAttributes<HTMLDivElement>, `style`> & {
+    series_data: LegendItem[]
+    layout?: Orientation
+    layout_tracks?: number // Number of columns for horizontal, rows for vertical
+    style?: string // Inline styles forwarded to wrapper div
+    item_style?: string
+    // Bindable set of collapsed group names (pass initial values to collapse groups by default)
+    collapsed_groups?: Set<string>
+    on_toggle?: (series_idx: number) => void
+    on_double_click?: (series_idx: number) => void
+    on_fill_toggle?: (
+      source_type: `fill_region` | `error_band`,
+      source_idx: number,
+    ) => void
+    on_fill_double_click?: (
+      source_type: `fill_region` | `error_band`,
+      source_idx: number,
+    ) => void
+    on_group_toggle?: (group_name: string, series_indices: number[]) => void
+    on_group_double_click?: (group_name: string, series_indices: number[]) => void
+    on_drag_start?: (event: MouseEvent) => void
+    on_drag?: (event: MouseEvent) => void
+    on_drag_end?: (event: MouseEvent) => void
+    // Callback when hover state changes (for placement stability)
+    on_hover_change?: (is_hovered: boolean) => void
+    draggable?: boolean
+    // Bindable reference to the root DOM element for size measurements
+    root_element?: HTMLDivElement
+  } = $props()
+
+  let is_dragging = $state(false)
+  let drag_start_coords = $state<{ x: number; y: number } | null>(null)
+
+  // Group series by legend_group, preserving order
+  type GroupedData = { group_name: string | null; items: LegendItem[] }
+  let grouped_series = $derived.by<GroupedData[]>(() => {
+    const groups: GroupedData[] = []
+    const group_map = new SvelteMap<string | null, LegendItem[]>()
+
     for (const item of series_data) {
-        const group_key = item.legend_group ?? null;
-        if (!group_map.has(group_key)) {
-            group_map.set(group_key, []);
-            groups.push({ group_name: group_key, items: group_map.get(group_key) });
-        }
-        group_map.get(group_key).push(item);
+      const group_key = item.legend_group ?? null
+      let group_items = group_map.get(group_key)
+      if (!group_items) {
+        group_items = []
+        group_map.set(group_key, group_items)
+        groups.push({ group_name: group_key, items: group_items })
+      }
+      group_items.push(item)
     }
-    return groups;
-});
-// Check if any grouping is present
-let has_groups = $derived(grouped_series.some((group) => group.group_name !== null && group.items.length > 0));
-function toggle_group_collapse(group_name) {
+    return groups
+  })
+
+  // Check if any grouping is present
+  let has_groups = $derived(
+    grouped_series.some((group) =>
+      group.group_name !== null && group.items.length > 0
+    ),
+  )
+
+  function toggle_group_collapse(group_name: string) {
     // Normalize to SvelteSet if a plain Set was passed (ensures reactivity)
     if (!(collapsed_groups instanceof SvelteSet)) {
-        collapsed_groups = new SvelteSet(collapsed_groups);
+      collapsed_groups = new SvelteSet(collapsed_groups)
     }
     // Set.delete returns true if element existed, so add if delete failed
-    if (!collapsed_groups.delete(group_name))
-        collapsed_groups.add(group_name);
-}
-const handle_group_click = (group_name, items) => on_group_toggle?.(group_name, items.map((item) => item.series_idx));
-function cleanup_drag_listeners() {
+    if (!collapsed_groups.delete(group_name)) collapsed_groups.add(group_name)
+  }
+
+  const handle_group_click = (group_name: string, items: LegendItem[]) =>
+    on_group_toggle?.(group_name, items.map((item) => item.series_idx))
+
+  function cleanup_drag_listeners() {
     if (is_dragging) {
-        // Remove global event listeners
-        window.removeEventListener(`mousemove`, handle_window_mouse_move);
-        window.removeEventListener(`mouseup`, handle_window_mouse_up);
-        // Reset cursor and text selection
-        document.body.style.cursor = `default`;
-        document.body.style.userSelect = `auto`;
+      // Remove global event listeners
+      window.removeEventListener(`mousemove`, handle_window_mouse_move)
+      window.removeEventListener(`mouseup`, handle_window_mouse_up)
+
+      // Reset cursor and text selection
+      document.body.style.cursor = `default`
+      document.body.style.userSelect = `auto`
     }
-}
-onDestroy(cleanup_drag_listeners);
-function handle_legend_mouse_down(event) {
-    if (!draggable)
-        return;
+  }
+  onDestroy(cleanup_drag_listeners)
+
+  function handle_legend_mouse_down(event: MouseEvent) {
+    if (!draggable) return
+
     // Only start drag if clicking on empty areas (not on legend items)
-    const target = event.target;
-    if (target instanceof Element && target.closest(`.legend-item`))
-        return;
-    event.preventDefault();
-    event.stopPropagation();
-    is_dragging = true;
-    drag_start_coords = { x: event.clientX, y: event.clientY };
-    on_drag_start(event);
+    const target = event.target
+    if (target instanceof Element && target.closest(`.legend-item`)) return
+
+    event.preventDefault()
+    event.stopPropagation()
+
+    is_dragging = true
+    drag_start_coords = { x: event.clientX, y: event.clientY }
+
+    on_drag_start(event)
+
     // Add global event listeners
-    window.addEventListener(`mousemove`, handle_window_mouse_move);
-    window.addEventListener(`mouseup`, handle_window_mouse_up);
-}
-function handle_window_mouse_move(event) {
-    if (!is_dragging || !drag_start_coords)
-        return;
-    event.preventDefault();
-    on_drag(event);
-}
-function handle_window_mouse_up(event) {
-    if (!is_dragging)
-        return;
-    is_dragging = false;
-    drag_start_coords = null;
-    on_drag_end(event);
+    window.addEventListener(`mousemove`, handle_window_mouse_move)
+    window.addEventListener(`mouseup`, handle_window_mouse_up)
+  }
+
+  function handle_window_mouse_move(event: MouseEvent) {
+    if (!is_dragging || !drag_start_coords) return
+
+    event.preventDefault()
+    on_drag(event)
+  }
+
+  function handle_window_mouse_up(event: MouseEvent) {
+    if (!is_dragging) return
+
+    is_dragging = false
+    drag_start_coords = null
+
+    on_drag_end(event)
+
     // Remove global event listeners
-    window.removeEventListener(`mousemove`, handle_window_mouse_move);
-    window.removeEventListener(`mouseup`, handle_window_mouse_up);
-}
-let div_style = $derived({
-    horizontal: `grid-template-columns: repeat(${layout_tracks}, auto);`,
-    vertical: `grid-template-rows: repeat(${layout_tracks}, auto); grid-template-columns: auto;`,
-}[layout] + style);
-// Extracted toggle handlers to reduce duplication
-function toggle_item(item) {
-    if (item.item_type === `fill` && on_fill_toggle && item.fill_source_type &&
-        item.fill_source_idx !== undefined) {
-        on_fill_toggle(item.fill_source_type, item.fill_source_idx);
-    }
-    else
-        on_toggle(item.series_idx);
-}
-function double_click_item(item) {
-    if (item.item_type === `fill` && on_fill_double_click && item.fill_source_type &&
-        item.fill_source_idx !== undefined) {
-        on_fill_double_click(item.fill_source_type, item.fill_source_idx);
-    }
-    else
-        on_double_click(item.series_idx);
-}
+    window.removeEventListener(`mousemove`, handle_window_mouse_move)
+    window.removeEventListener(`mouseup`, handle_window_mouse_up)
+  }
+
+  let div_style = $derived(
+    {
+      horizontal: `grid-template-columns: repeat(${layout_tracks}, auto);`,
+      vertical:
+        `grid-template-rows: repeat(${layout_tracks}, auto); grid-template-columns: auto;`,
+    }[layout] + style,
+  )
+
+  // Extracted toggle handlers to reduce duplication
+  function toggle_item(item: LegendItem) {
+    if (
+      item.item_type === `fill` && on_fill_toggle && item.fill_source_type &&
+      item.fill_source_idx !== undefined
+    ) {
+      on_fill_toggle(item.fill_source_type, item.fill_source_idx)
+    } else on_toggle(item.series_idx)
+  }
+  function double_click_item(item: LegendItem) {
+    if (
+      item.item_type === `fill` && on_fill_double_click && item.fill_source_type &&
+      item.fill_source_idx !== undefined
+    ) {
+      on_fill_double_click(item.fill_source_type, item.fill_source_idx)
+    } else on_double_click(item.series_idx)
+  }
 </script>
 
 {#snippet legend_item(series: LegendItem, indent: boolean = false)}
@@ -124,7 +207,7 @@ function double_click_item(item) {
     role="button"
     tabindex="0"
     aria-pressed={series.visible}
-    aria-label="Toggle visibility for {series.label}"
+    aria-label="Toggle visibility for {strip_html(series.label)}"
   >
     <span class="legend-marker">
       <!-- Fill region swatch -->
@@ -213,7 +296,7 @@ function double_click_item(item) {
         {/if}
       {/if}
     </span>
-    <span class="legend-label">{@html series.label}</span>
+    <span class="legend-label">{@html sanitize_html(series.label)}</span>
   </div>
 {/snippet}
 
@@ -256,7 +339,7 @@ function double_click_item(item) {
         role="button"
         tabindex="0"
         aria-expanded={!is_collapsed}
-        aria-label="Toggle group {group_name}"
+        aria-label="Toggle group {strip_html(group_name)}"
       >
         <span
           class="group-chevron"
@@ -275,11 +358,11 @@ function double_click_item(item) {
           }}
           role="button"
           tabindex="0"
-          aria-label="{is_collapsed ? `Expand` : `Collapse`} group {group_name}"
+          aria-label="{is_collapsed ? `Expand` : `Collapse`} group {strip_html(group_name)}"
         >
           ▶
         </span>
-        <span class="group-label">{@html group_name}</span>
+        <span class="group-label">{@html sanitize_html(group_name)}</span>
       </div>
       <!-- Group items (collapsible) -->
       {#if !is_collapsed}

package/dist/plot/PlotTooltip.svelte

@@ -1,9 +1,48 @@
-<script lang="ts">import { luminance } from '../colors';
-let { x, y, bg_color, offset = { x: 6, y: 0 }, fixed = false, wrapper = $bindable(), children, ...rest } = $props();
-// Auto-compute contrasting text color based on background luminance only if bg_color is defined
-const text_color = $derived(bg_color != null ? (luminance(bg_color) > 0.5 ? `#000000` : `#ffffff`) : null);
-const style = $derived(`position: ${fixed ? `fixed` : `absolute`}; pointer-events: none;
-    left: ${x + offset.x}px; top: ${y + offset.y}px; ${rest.style ?? ``}`);
+<script lang="ts">
+  import { luminance } from '../colors'
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  let {
+    x,
+    y,
+    bg_color,
+    offset = { x: 6, y: 0 },
+    fixed = false,
+    wrapper = $bindable(),
+    children,
+    ...rest
+  }: HTMLAttributes<HTMLDivElement> & {
+    x: number
+    y: number
+    bg_color?: string | null
+    offset?: { x: number; y: number }
+    fixed?: boolean // Use position: fixed (for viewport coords) vs absolute
+    wrapper?: HTMLDivElement // Bindable reference for measuring tooltip size
+    children: Snippet
+  } = $props()
+
+  // Auto-compute contrasting text color based on background luminance only if bg_color is defined
+  const text_color = $derived(
+    bg_color != null ? (luminance(bg_color) > 0.5 ? `#000000` : `#ffffff`) : null,
+  )
+
+  // For fixed positioning (viewport coords), flip to opposite side when near viewport edges
+  const pos = $derived.by(() => {
+    const raw_x = x + offset.x
+    const raw_y = y + offset.y
+    if (!fixed) return { x: raw_x, y: raw_y }
+    const tw = wrapper?.offsetWidth ?? 0
+    const th = wrapper?.offsetHeight ?? 0
+    const cx = raw_x + tw > globalThis.innerWidth ? x - Math.abs(offset.x) - tw : raw_x
+    const cy = raw_y + th > globalThis.innerHeight ? y - Math.abs(offset.y) - th : raw_y
+    return { x: Math.max(0, cx), y: Math.max(0, cy) }
+  })
+
+  const style = $derived(
+    `position: ${fixed ? `fixed` : `absolute`}; pointer-events: none;
+    left: ${pos.x}px; top: ${pos.y}px; ${rest.style ?? ``}`,
+  )
 </script>
 
 <div