matterviz 0.3.6 → 0.3.7

package/dist/src/lib/phase-diagram/PhaseDiagramControls.svelte

@@ -1,444 +0,0 @@
-<script lang="ts">
-  // NOTE: Axis config objects must be reassigned (not mutated) to trigger $bindable reactivity.
-  import { css_color_to_hex } from '$lib/colors'
-  import { format_num } from '$lib/labels'
-  import SettingsSection from '$lib/layout/SettingsSection.svelte'
-  import DraggablePane from '$lib/overlays/DraggablePane.svelte'
-  import type { AxisConfig } from '$lib/plot'
-  import type { ComponentProps, Snippet } from 'svelte'
-  import { tooltip } from 'svelte-multiselect/attachments'
-  import type { LeverRuleMode, PhaseDiagramConfig, PhaseDiagramData } from './types'
-  import { merge_phase_diagram_config, PHASE_DIAGRAM_DEFAULTS } from './utils'
-
-  let {
-    controls_open = $bindable(false),
-    // Visibility toggles
-    show_boundaries = $bindable(PHASE_DIAGRAM_DEFAULTS.show_boundaries),
-    show_labels = $bindable(PHASE_DIAGRAM_DEFAULTS.show_labels),
-    show_special_points = $bindable(PHASE_DIAGRAM_DEFAULTS.show_special_points),
-    show_grid = $bindable(PHASE_DIAGRAM_DEFAULTS.show_grid),
-    show_component_labels = $bindable(PHASE_DIAGRAM_DEFAULTS.show_component_labels),
-    // Configuration
-    config = $bindable({}),
-    // Lever rule mode
-    lever_rule_mode = $bindable(`horizontal`),
-    // Axis configuration
-    x_axis = $bindable({}),
-    y_axis = $bindable({}),
-    // Data
-    data,
-    // Export
-    enable_export = true,
-    png_dpi = $bindable(PHASE_DIAGRAM_DEFAULTS.png_dpi),
-    // Pane props
-    pane_props = {},
-    toggle_props = {},
-    // Snippets
-    children,
-    post_children,
-    ...rest
-  }: Omit<ComponentProps<typeof DraggablePane>, `children`> & {
-    controls_open?: boolean
-    // Visibility toggles
-    show_boundaries?: boolean
-    show_labels?: boolean
-    show_special_points?: boolean
-    show_grid?: boolean
-    show_component_labels?: boolean
-    // Configuration
-    config?: Partial<PhaseDiagramConfig>
-    // Lever rule mode
-    lever_rule_mode?: LeverRuleMode
-    // Axis configuration
-    x_axis?: AxisConfig
-    y_axis?: AxisConfig
-    // Data for context (components, units, etc.)
-    data?: PhaseDiagramData
-    // Export settings
-    enable_export?: boolean
-    png_dpi?: number
-    // Pane customization
-    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`]
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
-    // Custom content snippets
-    children?: Snippet<[{ controls_open: boolean }]>
-    post_children?: Snippet<[{ controls_open: boolean }]>
-  } = $props()
-
-  // Merged config using shared helper
-  const merged_config = $derived(merge_phase_diagram_config(config))
-
-  // Helper to update top-level config properties (e.g., font_size, special_point_radius)
-  function update_config<K extends keyof PhaseDiagramConfig>(
-    key: K,
-    value: PhaseDiagramConfig[K],
-  ) {
-    config = { ...config, [key]: value }
-  }
-
-  // Helper to update nested config properties
-  function update_nested<
-    K extends keyof Pick<PhaseDiagramConfig, `colors` | `tie_line`>,
-  >(
-    key: K,
-    prop: string,
-    value: string | number,
-  ) {
-    config = { ...config, [key]: { ...config[key], [prop]: value } }
-  }
-
-  // Derive component info from data
-  const component_a = $derived(data?.components?.[0])
-  const component_b = $derived(data?.components?.[1])
-  const title = $derived(
-    component_a && component_b
-      ? `${component_a}-${component_b} Phase Diagram`
-      : `Phase Diagram Controls`,
-  )
-  const temp_unit = $derived(data?.temperature_unit ?? `K`)
-  const comp_unit = $derived(data?.composition_unit ?? `at%`)
-  const has_special_points = $derived((data?.special_points?.length ?? 0) > 0)
-</script>
-
-<!-- Reusable snippet for number + range input pairs -->
-{#snippet num_range(
-  label: string,
-  value: number,
-  min: number,
-  max: number,
-  step: number,
-  on_change: (val: number) => void,
-  tip: string,
-)}
-  {@const oninput = (ev: Event & { currentTarget: HTMLInputElement }) =>
-    on_change(Number(ev.currentTarget.value))}
-  <label {@attach tooltip({ content: tip })}>
-    {label}
-    <input type="number" {min} {max} {step} {value} {oninput} />
-    <input type="range" {min} {max} {step} {value} {oninput} />
-  </label>
-{/snippet}
-
-<DraggablePane
-  bind:show={controls_open}
-  pane_props={{
-    ...pane_props,
-    class: `phase-diagram-controls-pane ${pane_props?.class ?? ``}`,
-    style: pane_props?.style ?? ``,
-  }}
-  toggle_props={{
-    title: controls_open ? `` : `Phase diagram controls`,
-    class: `phase-diagram-controls-toggle`,
-    ...toggle_props,
-  }}
-  closed_icon="Settings"
-  open_icon="Cross"
-  {...rest}
->
-  <h4 style="margin: 0 0 8pt 0">{title}</h4>
-
-  {@render children?.({ controls_open })}
-
-  <!-- Visibility Section -->
-  <SettingsSection
-    title="Visibility"
-    current_values={{
-      show_boundaries,
-      show_labels,
-      show_special_points,
-      show_grid,
-      show_component_labels,
-    }}
-    on_reset={() => {
-      show_boundaries = PHASE_DIAGRAM_DEFAULTS.show_boundaries
-      show_labels = PHASE_DIAGRAM_DEFAULTS.show_labels
-      show_special_points = PHASE_DIAGRAM_DEFAULTS.show_special_points
-      show_grid = PHASE_DIAGRAM_DEFAULTS.show_grid
-      show_component_labels = PHASE_DIAGRAM_DEFAULTS.show_component_labels
-    }}
-  >
-    <div class="visibility-grid">
-      <label {@attach tooltip({ content: `Show phase boundary lines` })}>
-        <input type="checkbox" bind:checked={show_boundaries} />
-        Boundaries
-      </label>
-      <label {@attach tooltip({ content: `Show phase region labels` })}>
-        <input type="checkbox" bind:checked={show_labels} />
-        Labels
-      </label>
-      <label {@attach tooltip({ content: `Show background grid lines` })}>
-        <input type="checkbox" bind:checked={show_grid} />
-        Grid
-      </label>
-      {#if has_special_points}
-        <label {@attach tooltip({ content: `Show eutectic/peritectic points` })}>
-          <input type="checkbox" bind:checked={show_special_points} />
-          Special Pts
-        </label>
-      {/if}
-      <label
-        {@attach tooltip({ content: `Show component labels at axes` })}
-      >
-        <input type="checkbox" bind:checked={show_component_labels} />
-        Comp. Labels
-      </label>
-    </div>
-  </SettingsSection>
-
-  <!-- Appearance Section -->
-  <SettingsSection
-    title="Appearance"
-    current_values={{
-      font_size: merged_config.font_size,
-      special_point_radius: merged_config.special_point_radius,
-    }}
-    on_reset={() => {
-      update_config(`font_size`, PHASE_DIAGRAM_DEFAULTS.font_size)
-      update_config(
-        `special_point_radius`,
-        PHASE_DIAGRAM_DEFAULTS.special_point_radius,
-      )
-    }}
-  >
-    {@render num_range(
-        `Font size`,
-        merged_config.font_size,
-        8,
-        20,
-        1,
-        (val) => update_config(`font_size`, val),
-        `Font size for axis labels and tick marks`,
-      )}
-    {#if has_special_points}
-      {@render num_range(
-        `Special pt radius`,
-        merged_config.special_point_radius,
-        2,
-        12,
-        1,
-        (val) => update_config(`special_point_radius`, val),
-        `Radius of special point markers (eutectic, peritectic, etc.)`,
-      )}
-    {/if}
-  </SettingsSection>
-
-  <!-- Colors Section -->
-  {@const color_options = [
-      [`background`, `#ffffff`, `Background`, `Background color of the plot area`],
-      [`grid`, `#888888`, `Grid`, `Color of grid lines`],
-      [`boundary`, `#333333`, `Boundaries`, `Color of phase boundary lines`],
-      [`special_point`, `#d32f2f`, `Special Pts`, `Color of special point markers`],
-      [`axis`, `#333333`, `Axis`, `Color of axis lines`],
-      [`text`, `#333333`, `Text`, `Color of text labels`],
-    ] as const}
-  <SettingsSection
-    title="Colors"
-    current_values={{ ...merged_config.colors }}
-    on_reset={() => {
-      config = { ...config, colors: { ...PHASE_DIAGRAM_DEFAULTS.colors } }
-    }}
-  >
-    <div class="color-grid">
-      {#each color_options as [key, fallback, label, tip] (key)}
-        <label {@attach tooltip({ content: tip })}>
-          {label}
-          <input
-            type="color"
-            value={css_color_to_hex(merged_config.colors[key], fallback)}
-            oninput={(ev) => update_nested(`colors`, key, ev.currentTarget.value)}
-          />
-        </label>
-      {/each}
-    </div>
-  </SettingsSection>
-
-  <!-- Tie-line Section -->
-  <SettingsSection
-    title="Tie-line Display"
-    current_values={{
-      ...merged_config.tie_line,
-      lever_rule_mode,
-    }}
-    on_reset={() => {
-      config = {
-        ...config,
-        tie_line: { ...PHASE_DIAGRAM_DEFAULTS.tie_line },
-      }
-      lever_rule_mode = `horizontal`
-    }}
-  >
-    <span {@attach tooltip({ content: `Direction of the lever rule tie-line` })}>
-      Direction
-      <div class="pane-row">
-        <label>
-          <input type="radio" bind:group={lever_rule_mode} value="horizontal" />
-          Horizontal
-        </label>
-        <label>
-          <input type="radio" bind:group={lever_rule_mode} value="vertical" />
-          Vertical
-        </label>
-      </div>
-    </span>
-    {@render num_range(
-        `Line width`,
-        merged_config.tie_line.stroke_width,
-        0.5,
-        5,
-        0.5,
-        (val) => update_nested(`tie_line`, `stroke_width`, val),
-        `Thickness of the tie-line`,
-      )}
-    {@render num_range(
-        `Endpoint radius`,
-        merged_config.tie_line.endpoint_radius,
-        2,
-        10,
-        1,
-        (val) => update_nested(`tie_line`, `endpoint_radius`, val),
-        `Radius of phase boundary endpoint markers`,
-      )}
-    {@render num_range(
-        `Cursor radius`,
-        merged_config.tie_line.cursor_radius,
-        2,
-        10,
-        1,
-        (val) => update_nested(`tie_line`, `cursor_radius`, val),
-        `Radius of the cursor position marker`,
-      )}
-  </SettingsSection>
-
-  <!-- Axis Configuration Section -->
-  {@const axis_configs = [
-      [x_axis, `x`, comp_unit, `composition`],
-      [y_axis, `y`, temp_unit, `temperature`],
-    ] as const}
-  <SettingsSection
-    title="Axes"
-    current_values={{ x_ticks: x_axis.ticks, y_ticks: y_axis.ticks }}
-    on_reset={() => {
-      x_axis = { ...x_axis, ticks: PHASE_DIAGRAM_DEFAULTS.x_ticks }
-      y_axis = { ...y_axis, ticks: PHASE_DIAGRAM_DEFAULTS.y_ticks }
-    }}
-  >
-    <div class="pane-row">
-      {#each axis_configs as [axis_cfg, axis_name, unit, desc] (axis_name)}
-        <label {@attach tooltip({ content: `Ticks on ${desc} axis (${unit})` })}>
-          {axis_name.toUpperCase()}-axis ticks
-          <input
-            type="number"
-            min={2}
-            max={15}
-            value={axis_cfg.ticks ?? PHASE_DIAGRAM_DEFAULTS[`${axis_name}_ticks`]}
-            oninput={(ev) => {
-              const new_ticks = Number(ev.currentTarget.value)
-              if (axis_name === `x`) x_axis = { ...x_axis, ticks: new_ticks }
-              else if (axis_name === `y`) y_axis = { ...y_axis, ticks: new_ticks }
-            }}
-          />
-        </label>
-      {/each}
-    </div>
-  </SettingsSection>
-
-  <!-- Export Section (if enabled) -->
-  {#if enable_export}
-    <SettingsSection
-      title="Export"
-      current_values={{ png_dpi }}
-      on_reset={() => {
-        png_dpi = PHASE_DIAGRAM_DEFAULTS.png_dpi
-      }}
-    >
-      <label
-        {@attach tooltip({ content: `DPI (dots per inch) for PNG export. Higher values produce larger, higher-quality images.` })}
-      >
-        PNG DPI
-        <input
-          type="number"
-          min={72}
-          max={600}
-          step={50}
-          style="width: 3.5em"
-          bind:value={png_dpi}
-        />
-        <input
-          type="range"
-          min={72}
-          max={600}
-          step={50}
-          bind:value={png_dpi}
-        />
-        <span style="font-size: 0.85em; opacity: 0.7">{format_num(png_dpi, `d`)}
-          dpi</span>
-      </label>
-    </SettingsSection>
-  {/if}
-
-  {@render post_children?.({ controls_open })}
-</DraggablePane>
-
-<style>
-  :global(.phase-diagram-controls-pane) {
-    font-size: 0.85em;
-    max-width: 320px;
-    --pane-padding: 10px;
-    --pane-gap: 4px;
-  }
-  :global(.phase-diagram-controls-pane section) {
-    display: flex;
-    flex-direction: column;
-    gap: 4pt;
-  }
-  :global(.phase-diagram-controls-pane h4) {
-    margin: 6pt 0 2pt !important;
-  }
-  :global(.phase-diagram-controls-pane h4:first-of-type) {
-    margin-top: 0 !important;
-  }
-  .pane-row {
-    display: flex;
-    gap: 12pt;
-  }
-  .visibility-grid {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 4pt 10pt;
-  }
-  .color-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 6pt;
-  }
-  .color-grid label {
-    flex-direction: column;
-    align-items: center;
-    font-size: 0.9em;
-  }
-  label {
-    display: flex;
-    align-items: center;
-    gap: 6pt;
-  }
-  input {
-    font-size: inherit;
-    font-family: inherit;
-  }
-  input[type='number'] {
-    width: 3.5em;
-  }
-  input[type='range'] {
-    flex: 1;
-    min-width: 40px;
-  }
-  input[type='color'] {
-    width: 32px;
-    height: 24px;
-    box-sizing: border-box;
-    padding: 0;
-    border: 1px solid var(--border-color, #ccc);
-    border-radius: 4px;
-    cursor: pointer;
-  }
-</style>

package/dist/src/lib/phase-diagram/PhaseDiagramEditorPane.svelte

@@ -1,126 +0,0 @@
-<script lang="ts">
-  import { JsonTree } from '$lib/layout/json-tree'
-  import { set_at_path } from '$lib/layout/json-tree/utils'
-  import DraggablePane from '$lib/overlays/DraggablePane.svelte'
-  import type { ComponentProps } from 'svelte'
-  import { build_diagram } from './build-diagram'
-  import type { DiagramInput } from './diagram-input'
-  import type { PhaseDiagramData } from './types'
-
-  let {
-    editor_open = $bindable(false),
-    diagram_input = $bindable<DiagramInput | null>(null),
-    data = null,
-    ondata,
-    icon_style = ``,
-    toggle_props: caller_toggle_props = {},
-  }: {
-    editor_open?: boolean
-    diagram_input?: DiagramInput | null
-    data?: PhaseDiagramData | null
-    ondata?: (data: PhaseDiagramData) => void
-    icon_style?: string
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
-  } = $props()
-
-  // The source object currently displayed (DiagramInput or PhaseDiagramData)
-  const display_source = $derived(diagram_input ?? data)
-
-  const root_label = `diagram`
-
-  // Brief error flash when an edit is rejected by build_diagram
-  let rejection_msg = $state<string | null>(null)
-  let rejection_timer: ReturnType<typeof setTimeout> | undefined
-
-  function show_rejection(msg: string) {
-    if (rejection_timer) clearTimeout(rejection_timer)
-    rejection_msg = msg
-    rejection_timer = setTimeout(() => (rejection_msg = null), 3000)
-  }
-
-  // Shared format detection: true if obj looks like a DiagramInput
-  function is_diagram_input(obj: Record<string, unknown>): boolean {
-    const meta = obj.meta as Record<string, unknown> | undefined
-    return Boolean(meta && Array.isArray(meta.components) && `curves` in obj)
-  }
-
-  // Handle inline value edits from JsonTree
-  function handle_change(path: string, new_value: unknown, _old_value: unknown) {
-    if (!display_source) return
-    const updated = set_at_path(display_source, path, new_value, root_label)
-
-    if (is_diagram_input(updated as Record<string, unknown>)) {
-      try {
-        build_diagram(updated as DiagramInput)
-        diagram_input = updated as DiagramInput
-      } catch (error) {
-        const msg = error instanceof Error ? error.message : String(error)
-        show_rejection(msg)
-      }
-      return
-    }
-    // PhaseDiagramData format — clear diagram_input so rebuilt_data doesn't shadow
-    diagram_input = null
-    ondata?.(updated as PhaseDiagramData)
-  }
-</script>
-
-<DraggablePane
-  bind:show={editor_open}
-  open_icon="Cross"
-  closed_icon="Edit"
-  {icon_style}
-  persistent
-  pane_props={{ class: `pd-editor-pane` }}
-  toggle_props={{
-    class: `pd-editor-toggle`,
-    title: editor_open ? `` : `Edit diagram data`,
-    ...caller_toggle_props,
-  }}
-  max_width="600px"
->
-  {#if rejection_msg}
-    <div class="rejection-flash">{rejection_msg}</div>
-  {/if}
-  {#if display_source}
-    <JsonTree
-      value={display_source}
-      {root_label}
-      default_fold_level={2}
-      download_filename="diagram-data.json"
-      editable
-      onchange={handle_change}
-    />
-  {:else}
-    <p class="placeholder">
-      No diagram data loaded. Drop an SVG or JSON file onto the diagram.
-    </p>
-  {/if}
-</DraggablePane>
-
-<style>
-  .rejection-flash {
-    color: #d32f2f;
-    font-size: 11px;
-    padding: 4px 8px;
-    background: rgba(211, 47, 47, 0.08);
-    border-radius: 3px;
-    word-break: break-word;
-    animation: fade-out 3s ease-out forwards;
-  }
-  @keyframes fade-out {
-    0%, 80% {
-      opacity: 1;
-    }
-    100% {
-      opacity: 0;
-    }
-  }
-  .placeholder {
-    color: var(--text-muted, #888);
-    font-style: italic;
-    text-align: center;
-    padding: 20px;
-    margin: 0;
-  }
-</style>