matterviz 0.4.0 → 0.4.1

package/dist/phase-diagram/PhaseDiagramExportPane.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
+  import type { PaneToggleProps } from '../overlays'
+  import type { ExportSection } from '../io'
+  import ExportPane from '../io/ExportPane.svelte'
   import { export_svg_as_png, export_svg_as_svg } from '../io/export'
-  import DraggablePane from '../overlays/DraggablePane.svelte'
+  import { download } from '../io/fetch'
   import type { ComponentProps } from 'svelte'
-  import { CopyButton } from 'svelte-multiselect'
-  import { tooltip } from 'svelte-multiselect/attachments'
   import type { HTMLAttributes } from 'svelte/elements'
   import type { PhaseDiagramData } from './types'
 
@@ -29,12 +30,9 @@
     filename?: string
     png_dpi?: number
     icon_style?: string
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
+    toggle_props?: PaneToggleProps
   } = $props()
 
-  let json_copy_state = $state<ComponentProps<typeof CopyButton>[`state`]>(`ready`)
-  let svg_copy_state = $state<ComponentProps<typeof CopyButton>[`state`]>(`ready`)
-
   // Generate filename with components if available (requires exactly 2 components)
   const full_filename = $derived(
     data?.components?.length === 2
@@ -48,137 +46,54 @@
   )
 
   const json_export_data = $derived(json_payload ?? data)
+  const json_string = (): string | null =>
+    json_export_data ? JSON.stringify(json_export_data, null, 2) : null
 
-  const svg_string = $derived(svg ? new XMLSerializer().serializeToString(svg) : null)
-
-  function download_json() {
-    if (!json_export_data) return
-
-    const json_string = JSON.stringify(json_export_data, null, 2)
-    const blob = new Blob([json_string], { type: `application/json` })
-    const url = URL.createObjectURL(blob)
-
-    const link = document.createElement(`a`)
-    link.href = url
-    link.download = `${full_filename}.json`
-    link.click()
-
-    URL.revokeObjectURL(url)
-  }
-
-  const json_string = $derived(
-    json_export_data ? JSON.stringify(json_export_data, null, 2) : null,
-  )
+  const sections = $derived<ExportSection[]>([
+    {
+      title: `Image`,
+      tooltip: `Download or copy the phase diagram`,
+      items: [
+        {
+          label: `SVG`,
+          disabled: !svg,
+          on_download: () => svg && export_svg_as_svg(svg, `${full_filename}.svg`),
+          copy_text: () => (svg ? new XMLSerializer().serializeToString(svg) : null),
+        },
+        {
+          label: `PNG`,
+          disabled: !svg,
+          show_dpi: true,
+          on_download: () =>
+            svg && export_svg_as_png(svg, `${full_filename}.png`, png_dpi),
+        },
+      ],
+    },
+    {
+      title: `Data`,
+      tooltip: `Export phase diagram data as JSON`,
+      items: [{
+        label: `JSON`,
+        disabled: !json_export_data,
+        on_download: () => {
+          const content = json_string()
+          if (content) download(content, `${full_filename}.json`, `application/json`)
+        },
+        copy_text: json_string,
+      }],
+    },
+  ])
 </script>
 
-<DraggablePane
-  bind:show={export_pane_open}
-  open_icon="Cross"
-  closed_icon="Export"
-  pane_props={{ ...rest, class: `export-pane ${rest.class ?? ``}` }}
+<ExportPane
+  bind:export_pane_open
+  bind:png_dpi
+  {sections}
   {icon_style}
   toggle_props={{
     class: `pd-export-toggle`,
     title: export_pane_open ? `` : `Export phase diagram`,
     ...caller_toggle_props,
   }}
->
-  <div class="export-grid">
-    <h4 id="image" {@attach tooltip({ content: `Download or copy the phase diagram` })}>
-      Image
-    </h4>
-    <label>
-      SVG
-      <button
-        type="button"
-        onclick={() => svg && export_svg_as_svg(svg, `${full_filename}.svg`)}
-        disabled={!svg}
-        title="Download SVG"
-      >
-        ⬇
-      </button>
-      <CopyButton
-        content={svg_string ?? ``}
-        title="Copy SVG to clipboard"
-        bind:state={svg_copy_state}
-        disabled={!svg_string}
-      />
-    </label>
-    <label>
-      PNG
-      <button
-        type="button"
-        onclick={() => svg && export_svg_as_png(svg, `${full_filename}.png`, png_dpi)}
-        disabled={!svg}
-        title={`Download PNG (${png_dpi} DPI)`}
-      >
-        ⬇
-      </button>
-      <span class="dpi-input"
-      >(DPI: <input
-          type="number"
-          min={50}
-          max={600}
-          bind:value={png_dpi}
-          title="Export resolution in dots per inch"
-        />)</span>
-    </label>
-
-    <h4 id="data" {@attach tooltip({ content: `Export phase diagram data as JSON` })}>
-      Data
-    </h4>
-    <label>
-      JSON
-      <button
-        type="button"
-        onclick={download_json}
-        disabled={!json_export_data}
-        title="Download JSON"
-      >
-        ⬇
-      </button>
-      <CopyButton
-        content={json_string ?? ``}
-        title="Copy JSON to clipboard"
-        bind:state={json_copy_state}
-        disabled={!json_string}
-      />
-    </label>
-  </div>
-</DraggablePane>
-
-<style>
-  .export-grid {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 4pt 10pt;
-  }
-  .export-grid h4 {
-    display: inline-flex;
-    align-items: center;
-    margin: 0;
-  }
-  label {
-    display: flex;
-    align-items: center;
-    gap: 8pt;
-    font-size: 0.95em;
-    white-space: nowrap;
-  }
-  .dpi-input {
-    display: inline-flex;
-    align-items: center;
-    gap: 2pt;
-    white-space: nowrap;
-  }
-  button {
-    width: 1.9em;
-    height: 1.6em;
-    padding: 0 6pt;
-    box-sizing: border-box;
-  }
-  input {
-    width: 3.5em;
-  }
-</style>
+  {...rest}
+/>

package/dist/phase-diagram/PhaseDiagramExportPane.svelte.d.ts

@@ -1,5 +1,4 @@
-import DraggablePane from '../overlays/DraggablePane.svelte';
-import type { ComponentProps } from 'svelte';
+import type { PaneToggleProps } from '../overlays';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { PhaseDiagramData } from './types';
 type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
@@ -12,8 +11,8 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     filename?: string;
     png_dpi?: number;
     icon_style?: string;
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
+    toggle_props?: PaneToggleProps;
 };
-declare const PhaseDiagramExportPane: import("svelte").Component<$$ComponentProps, {}, "png_dpi" | "export_pane_open">;
+declare const PhaseDiagramExportPane: import("svelte").Component<$$ComponentProps, {}, "export_pane_open" | "png_dpi">;
 type PhaseDiagramExportPane = ReturnType<typeof PhaseDiagramExportPane>;
 export default PhaseDiagramExportPane;

package/dist/phase-diagram/colors.js

@@ -1,6 +1,6 @@
 // Phase diagram color palette
 // Keys can be referenced in diagram JSON files
-const rgba = (r, g, b, a = 0.6) => `rgba(${r}, ${g}, ${b}, ${a})`;
+const rgba = (red, green, blue, alpha = 0.6) => `rgba(${red}, ${green}, ${blue}, ${alpha})`;
 // Color palette for diagram JSON files - keyed colors that can be referenced by name
 export const DIAGRAM_COLORS = {
     // Single-phase regions (alpha=0.6)

package/dist/phase-diagram/parse.d.ts

@@ -1,3 +1,4 @@
+import type { Vec2 } from '../math';
 export declare const TDB_TEMP_DEFAULTS: {
     readonly min: 298.15;
     readonly max_fallback: 3000;
@@ -47,7 +48,7 @@ export interface TdbParseResult {
     error?: string;
     binary_system?: [string, string];
     available_phases?: string[];
-    temperature_range?: [number, number];
+    temperature_range?: Vec2;
 }
 export declare function parse_tdb(content: string): TdbParseResult;
 export declare const get_system_name: (elements: string[]) => string;