matterviz 0.3.6 → 0.3.7

package/dist/src/lib/plot/PlotLegend.svelte

@@ -1,569 +0,0 @@
-<script lang="ts">
-  import type { LegendItem, Orientation } from '$lib/plot'
-  import { sanitize_html } from '$lib/sanitize'
-  import { strip_html } from '$lib/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,
-    on_item_hover,
-    active_series_idx = null,
-    filterable = true,
-    filter_threshold = 12,
-    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
-    on_item_hover?: (series_idx: number | null) => void
-    active_series_idx?: number | null
-    filterable?: boolean
-    filter_threshold?: number
-    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)
-  let legend_filter = $state(``)
-
-  // Group series by legend_group, preserving order
-  type GroupedData = {
-    group_name: string | null
-    items: LegendItem[]
-    all_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
-      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
-    ),
-  )
-
-  let show_filter = $derived(filterable && series_data.length >= filter_threshold)
-
-  let filtered_grouped_series = $derived.by<GroupedData[]>(() => {
-    const filter = show_filter ? legend_filter.trim().toLowerCase() : ``
-    if (!filter) return grouped_series
-    return grouped_series
-      .map(({ group_name, items }) => ({
-        group_name,
-        all_items: items,
-        items: items.filter((item) =>
-          `${group_name ?? ``} ${strip_html(item.label)}`.toLowerCase().includes(filter)
-        ),
-      }))
-      .filter(({ items }) => 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)
-    }
-    // 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: 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`
-    }
-  }
-  onDestroy(() => {
-    cleanup_drag_listeners()
-    on_item_hover?.(null)
-  })
-
-  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)
-
-    // Add global event listeners
-    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: 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)}
-  {@const is_fill_item = series.item_type === `fill`}
-  <div
-    class="legend-item"
-    class:hidden={!series.visible}
-    class:active={active_series_idx === series.series_idx}
-    class:indented={indent}
-    class:fill-item={is_fill_item}
-    style={item_style}
-    onclick={(event: MouseEvent) => {
-      event.preventDefault()
-      event.stopPropagation()
-      toggle_item(series)
-    }}
-    ondblclick={(event: MouseEvent) => {
-      event.preventDefault()
-      event.stopPropagation()
-      double_click_item(series)
-    }}
-    onkeydown={(event) => {
-      if ([`Enter`, ` `].includes(event.key)) {
-        event.preventDefault()
-        toggle_item(series)
-      }
-    }}
-    onmouseenter={() => on_item_hover?.(series.series_idx)}
-    onmouseleave={() => on_item_hover?.(null)}
-    onfocus={() => on_item_hover?.(series.series_idx)}
-    onblur={() => on_item_hover?.(null)}
-    role="button"
-    tabindex="0"
-    aria-pressed={series.visible}
-    aria-label="Toggle visibility for {strip_html(series.label)}"
-  >
-    <span class="legend-marker">
-      <!-- Fill region swatch -->
-      {#if is_fill_item &&
-        (series.display_style.fill_color || series.display_style.fill_gradient)}
-        {@const gradient = series.display_style.fill_gradient}
-        {@const gradient_id = `legend-grad-${instance_id}-${series.fill_idx}`}
-        <svg width="16" height="12" viewBox="0 0 16 12" class="fill-swatch">
-          {#if gradient}
-            <defs>
-              {#if gradient.type === `linear`}
-                <linearGradient
-                  id={gradient_id}
-                  gradientTransform="rotate({gradient.angle ?? 0}, 0.5, 0.5)"
-                >
-                  {#each gradient.stops as [offset, color], stop_idx (stop_idx)}
-                    <stop offset="{offset * 100}%" stop-color={color} />
-                  {/each}
-                </linearGradient>
-              {:else if gradient.type === `radial`}
-                <radialGradient
-                  id={gradient_id}
-                  cx={gradient.center?.x ?? 0.5}
-                  cy={gradient.center?.y ?? 0.5}
-                  r="0.5"
-                >
-                  {#each gradient.stops as [offset, color], stop_idx (stop_idx)}
-                    <stop offset="{offset * 100}%" stop-color={color} />
-                  {/each}
-                </radialGradient>
-              {/if}
-            </defs>
-          {/if}
-          <rect
-            x="1"
-            y="1"
-            width="14"
-            height="10"
-            rx="2"
-            fill={gradient
-            ? `url(#${gradient_id})`
-            : (series.display_style.fill_color ?? `steelblue`)}
-            fill-opacity={series.display_style.fill_opacity ?? 0.3}
-            stroke={series.display_style.edge_color ?? `none`}
-            stroke-width="1"
-          />
-        </svg>
-      {:else}
-        <!-- Line segment -->
-        {#if series.display_style.line_color}
-          <svg width="20" height="10" viewBox="0 0 20 10">
-            <line
-              x1="0"
-              y1="5"
-              x2="20"
-              y2="5"
-              stroke={series.display_style.line_color ?? `currentColor`}
-              stroke-width="2"
-              stroke-dasharray={series.display_style.line_dash ?? `none`}
-            />
-          </svg>
-        {/if}
-
-        <!-- Marker symbol -->
-        {#if series.display_style.symbol_type}
-          {@const color = series.display_style.symbol_color ?? `currentColor`}
-          <svg width="10" height="10" viewBox="0 0 10 10">
-            {#if series.display_style.symbol_type === `Circle`}
-              <circle cx="5" cy="5" r="4" fill={color} />
-            {:else if series.display_style.symbol_type === `Square`}
-              <rect x="1" y="1" width="8" height="8" fill={color} />
-            {:else if series.display_style.symbol_type === `Triangle`}
-              <polygon points="5,1 9,9 1,9" fill={color} />
-            {:else if series.display_style.symbol_type === `Cross`}
-              <polygon
-                points="4,0 6,0 6,4 10,4 10,6 6,6 6,10 4,10 4,6 0,6 0,4 4,4"
-                fill={color}
-              />
-            {:else if series.display_style.symbol_type === `Star`}
-              <polygon
-                points="5,0 6.1,3.5 9.8,4.1 7.4,6.7 7.9,10 5,8.3 2.1,10 2.6,6.7 0.2,4.1 3.9,3.5"
-                fill={color}
-              />
-            {/if}
-          </svg>
-        {/if}
-      {/if}
-    </span>
-    <span class="legend-label">{@html sanitize_html(series.label)}</span>
-  </div>
-{/snippet}
-
-<div
-  bind:this={root_element}
-  onmousedown={handle_legend_mouse_down}
-  onmouseenter={() => on_hover_change?.(true)}
-  onmouseleave={() => on_hover_change?.(false)}
-  {...rest}
-  style={div_style}
-  class="legend {rest.class ?? ``}"
-  class:draggable
-  class:is-dragging={is_dragging}
-  class:grouped={has_groups}
->
-  {#if show_filter}
-    <input
-      class="legend-filter"
-      type="search"
-      bind:value={legend_filter}
-      placeholder="Filter legend"
-      aria-label="Filter legend items"
-      onclick={(event) => event.stopPropagation()}
-      onmousedown={(event) => event.stopPropagation()}
-    />
-  {/if}
-  {#if show_filter && legend_filter && filtered_grouped_series.length === 0}
-    <span class="legend-empty">No legend items</span>
-  {/if}
-  {#each filtered_grouped_series as { group_name, items, all_items } (group_name ?? `__ungrouped__`)}
-    {#if group_name !== null && has_groups}
-      <!-- Group header -->
-      {@const group_items = all_items ?? items}
-      {@const is_collapsed = collapsed_groups.has(group_name)}
-      {@const group_visible = group_items.some((item) => item.visible)}
-      <div
-        class="legend-group-header"
-        class:hidden={!group_visible}
-        onclick={(event: MouseEvent) => {
-          event.preventDefault()
-          event.stopPropagation()
-          handle_group_click(group_name, group_items)
-        }}
-        ondblclick={(event: MouseEvent) => {
-          event.preventDefault()
-          event.stopPropagation()
-          on_group_double_click?.(group_name, group_items.map((item) => item.series_idx))
-        }}
-        onkeydown={(event) => {
-          if ([`Enter`, ` `].includes(event.key)) {
-            event.preventDefault()
-            handle_group_click(group_name, group_items)
-          }
-        }}
-        role="button"
-        tabindex="0"
-        aria-expanded={!is_collapsed}
-        aria-label="Toggle group {strip_html(group_name)}"
-      >
-        <span
-          class="group-chevron"
-          class:collapsed={is_collapsed}
-          onclick={(event: MouseEvent) => {
-            event.preventDefault()
-            event.stopPropagation()
-            toggle_group_collapse(group_name)
-          }}
-          onkeydown={(event) => {
-            if ([`Enter`, ` `].includes(event.key)) {
-              event.preventDefault()
-              event.stopPropagation()
-              toggle_group_collapse(group_name)
-            }
-          }}
-          role="button"
-          tabindex="0"
-          aria-label="{is_collapsed ? `Expand` : `Collapse`} group {strip_html(group_name)}"
-        >
-          ▶
-        </span>
-        <span class="group-label">{@html sanitize_html(group_name)}</span>
-      </div>
-      <!-- Group items (collapsible) -->
-      {#if !is_collapsed}
-        {#each items as
-          series
-          (series.item_type === `fill`
-      ? `fill-${series.fill_idx}`
-      : `series-${series.series_idx}`)
-        }
-          {@render legend_item(series, true)}
-        {/each}
-      {/if}
-    {:else}
-      <!-- Ungrouped items -->
-      {#each items as
-        series
-        (series.item_type === `fill`
-      ? `fill-${series.fill_idx}`
-      : `series-${series.series_idx}`)
-      }
-        {@render legend_item(series, false)}
-      {/each}
-    {/if}
-  {/each}
-</div>
-
-<style>
-  .legend {
-    display: grid;
-    gap: 1px 6px; /* row-gap column-gap */
-    background-color: var(
-      --plot-legend-bg-color,
-      light-dark(rgba(255, 255, 255, 0.75), rgba(40, 40, 40, 0.75))
-    );
-    border: var(--plot-legend-border);
-    border-radius: var(--plot-legend-border-radius, var(--border-radius, 3pt));
-    font-size: var(--plot-legend-font-size, 0.8em);
-    max-width: var(--plot-legend-max-width);
-    width: fit-content;
-    z-index: var(--plot-legend-z-index, 2);
-    box-sizing: border-box;
-  }
-  .legend.draggable {
-    cursor: grab;
-  }
-  .legend.draggable:active {
-    cursor: grabbing;
-  }
-  .legend.is-dragging {
-    cursor: move;
-    user-select: none;
-  }
-  .legend-item {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    white-space: nowrap;
-    padding: var(--plot-legend-item-padding, 1px 8px 1px 3px);
-    opacity: var(--plot-legend-item-opacity, 1);
-    transition: var(--plot-legend-item-transition, opacity 0.3s ease);
-    color: var(--plot-legend-item-color);
-  }
-  .legend-filter {
-    box-sizing: border-box;
-    width: calc(100% - 6px);
-    min-width: 10em;
-    margin: 3px;
-    padding: 2px 5px;
-    border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
-    border-radius: var(--border-radius, 3pt);
-    background: color-mix(in srgb, var(--plot-legend-bg-color, Canvas) 88%, currentColor);
-    color: inherit;
-    font: inherit;
-  }
-  .legend-empty {
-    padding: var(--plot-legend-item-padding, 1px 8px 1px 3px);
-    opacity: 0.7;
-  }
-  .legend-item.indented {
-    padding: var(--plot-legend-item-padding, 0 8px 1px 3px);
-    padding-left: var(--plot-legend-group-indent, 16px);
-  }
-  .legend-item.hidden {
-    opacity: var(--plot-legend-item-hidden-opacity, 0.5);
-  }
-  .legend-item:hover, .legend-item:focus, .legend-item.active {
-    background-color: var(--plot-legend-item-hover-bg-color);
-  }
-  .legend-item.active {
-    box-shadow: inset 2px 0 0 var(--accent-color, currentColor);
-  }
-  .legend-marker {
-    display: inline-flex; /* Use flex to align items */
-    align-items: center; /* Vertically center items */
-    justify-content: center; /* Horizontally center items */
-    width: var(--plot-legend-marker-width, 25px); /* Fixed width for alignment */
-    margin: var(--plot-legend-marker-margin, 0 3px 0 0);
-    /* Prevent extra space from svg */
-    line-height: var(--plot-legend-marker-line-height, 0);
-  }
-  .legend-marker svg {
-    vertical-align: middle;
-  }
-  .legend-marker svg.fill-swatch {
-    margin-left: 2px;
-  }
-  .legend-item.fill-item .legend-marker {
-    width: var(--plot-legend-fill-marker-width, 20px);
-  }
-  .legend-label {
-    display: inline-block;
-  }
-  /* Group header styles */
-  .legend-group-header {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    white-space: nowrap;
-    padding: var(--plot-legend-group-padding, 2px 8px 0 3px);
-    font-weight: var(--plot-legend-group-font-weight, 600);
-    color: var(--plot-legend-group-color, inherit);
-    opacity: var(--plot-legend-group-opacity, 1);
-    transition: var(--plot-legend-item-transition, opacity 0.3s ease);
-  }
-  .legend-group-header.hidden {
-    opacity: var(--plot-legend-item-hidden-opacity, 0.5);
-  }
-  .legend-group-header:hover, .legend-group-header:focus {
-    background-color: var(--plot-legend-item-hover-bg-color);
-  }
-  .group-chevron {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 12px;
-    height: 12px;
-    margin-right: 4px;
-    font-size: 0.6em;
-    transition: transform 0.15s ease;
-    transform: rotate(90deg);
-    cursor: pointer;
-  }
-  .group-chevron.collapsed {
-    transform: rotate(0deg);
-  }
-  .group-chevron:hover {
-    color: var(--accent-color, #4a90d9);
-  }
-  .group-label {
-    display: inline-block;
-  }
-</style>

package/dist/src/lib/plot/PlotTooltip.svelte

@@ -1,67 +0,0 @@
-<script lang="ts">
-  import { luminance } from '$lib/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
-  {...rest}
-  class="plot-tooltip {rest.class ?? ``}"
-  style:background-color={bg_color}
-  style:color={text_color}
-  {style}
-  bind:this={wrapper}
->
-  {@render children()}
-</div>
-
-<style>
-  .plot-tooltip {
-    padding: var(--plot-tooltip-padding, 2px 6px);
-    border-radius: var(--plot-tooltip-border-radius, 4px);
-    font-size: var(--plot-tooltip-font-size, 0.8em);
-    white-space: nowrap;
-    z-index: var(--plot-tooltip-z-index, 1000);
-  }
-</style>