matterviz 0.3.1 → 0.3.3

package/dist/phase-diagram/PhaseDiagramExportPane.svelte

@@ -1,46 +1,74 @@
-<script lang="ts">import DraggablePane from '../overlays/DraggablePane.svelte';
-import { export_svg_as_png, export_svg_as_svg } from '../io/export';
-import { tooltip } from 'svelte-multiselect/attachments';
-let { export_pane_open = $bindable(false), data, wrapper, filename = `phase-diagram`, png_dpi = $bindable(150), ...rest } = $props();
-// Copy button feedback state
-let copy_status = $state({
-    json: false,
-    svg: false,
-});
-const copy_confirm = `✅`;
-// Generate filename with components if available (requires exactly 2 components)
-const full_filename = $derived(data?.components?.length === 2
-    ? `${filename}-${data.components[0]}-${data.components[1]}`
-    : filename);
-const svg = $derived(wrapper?.querySelector(`svg.binary-phase-diagram`));
-async function copy_svg() {
-    if (!svg)
-        return;
-    const svg_string = new XMLSerializer().serializeToString(svg);
-    await navigator.clipboard.writeText(svg_string);
-    copy_status.svg = true;
-    setTimeout(() => (copy_status.svg = false), 1500);
-}
-function download_json() {
-    if (!data)
-        return;
-    const json_string = JSON.stringify(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);
-}
-async function copy_json() {
-    if (!data)
-        return;
-    const json_string = JSON.stringify(data, null, 2);
-    await navigator.clipboard.writeText(json_string);
-    copy_status.json = true;
-    setTimeout(() => (copy_status.json = false), 1500);
-}
+<script lang="ts">
+  import { export_svg_as_png, export_svg_as_svg } from '../io/export'
+  import DraggablePane from '../overlays/DraggablePane.svelte'
+  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'
+
+  let {
+    export_pane_open = $bindable(false),
+    data,
+    json_payload = undefined,
+    wrapper,
+    svg_element = undefined,
+    svg_query_selector = `svg.binary-phase-diagram`,
+    filename = `phase-diagram`,
+    png_dpi = $bindable(150),
+    icon_style = ``,
+    toggle_props: caller_toggle_props = {},
+    ...rest
+  }: HTMLAttributes<HTMLDivElement> & {
+    export_pane_open?: boolean
+    data?: PhaseDiagramData
+    json_payload?: unknown
+    wrapper?: HTMLDivElement
+    svg_element?: SVGSVGElement | null
+    svg_query_selector?: string
+    filename?: string
+    png_dpi?: number
+    icon_style?: string
+    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
+  } = $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
+      ? `${filename}-${data.components[0]}-${data.components[1]}`
+      : filename,
+  )
+
+  const svg = $derived(
+    svg_element ??
+      (wrapper?.querySelector(svg_query_selector) as SVGSVGElement | null),
+  )
+
+  const json_export_data = $derived(json_payload ?? data)
+
+  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,
+  )
 </script>
 
 <DraggablePane
@@ -48,95 +76,117 @@ async function copy_json() {
   open_icon="Cross"
   closed_icon="Export"
   pane_props={{ ...rest, class: `export-pane ${rest.class ?? ``}` }}
+  {icon_style}
   toggle_props={{
     class: `pd-export-toggle`,
     title: export_pane_open ? `` : `Export phase diagram`,
+    ...caller_toggle_props,
   }}
 >
-  <h4 id="export-as-image"
-    {@attach tooltip({
-      content: `Download or copy the phase diagram`,
-    })}
-  >
-    Export as image
-  </h4>
-  <label>
-    SVG
-    <button
-      type="button"
-      onclick={() => svg && export_svg_as_svg(svg, `${full_filename}.svg`)}
-      disabled={!svg}
-      title="Download SVG"
+  <div class="export-grid">
+    <h4 id="image"
+      {@attach tooltip({
+        content: `Download or copy the phase diagram`,
+      })}
     >
-      ⬇
-    </button>
-    <button
-      type="button"
-      onclick={copy_svg}
-      disabled={!svg}
-      title="Copy SVG to clipboard"
-    >
-      {copy_status.svg ? copy_confirm : `📋`}
-    </button>
-  </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>
-    &nbsp;(DPI: <input
-      type="number"
-      min={50}
-      max={600}
-      bind:value={png_dpi}
-      title="Export resolution in dots per inch"
-    />)
-  </label>
+      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="export-as-data"
-    {@attach tooltip({
-      content: `Export phase diagram data as JSON`,
-    })}
-  >
-    Export as data
-  </h4>
-  <label>
-    JSON
-    <button type="button" onclick={download_json} disabled={!data} title="Download JSON">
-      ⬇
-    </button>
-    <button
-      type="button"
-      onclick={copy_json}
-      disabled={!data}
-      title="Copy JSON to clipboard"
+    <h4 id="data"
+      {@attach tooltip({
+        content: `Export phase diagram data as JSON`,
+      })}
     >
-      {copy_status.json ? copy_confirm : `📋`}
-    </button>
-  </label>
+      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>
-  label {
+  .export-grid {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: 4pt;
+    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;
-    margin: 0 0 0 4pt;
     box-sizing: border-box;
   }
   input {
-    margin: 0 0 0 2pt;
+    width: 3.5em;
   }
 </style>

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

@@ -1,12 +1,19 @@
+import DraggablePane from '../overlays/DraggablePane.svelte';
+import type { ComponentProps } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { PhaseDiagramData } from './types';
 type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     export_pane_open?: boolean;
     data?: PhaseDiagramData;
+    json_payload?: unknown;
     wrapper?: HTMLDivElement;
+    svg_element?: SVGSVGElement | null;
+    svg_query_selector?: string;
     filename?: string;
     png_dpi?: number;
+    icon_style?: string;
+    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
 };
-declare const PhaseDiagramExportPane: import("svelte").Component<$$ComponentProps, {}, "export_pane_open" | "png_dpi">;
+declare const PhaseDiagramExportPane: import("svelte").Component<$$ComponentProps, {}, "png_dpi" | "export_pane_open">;
 type PhaseDiagramExportPane = ReturnType<typeof PhaseDiagramExportPane>;
 export default PhaseDiagramExportPane;