svelte-plots-basic 3.2.1 → 3.3.0

package/README.md

@@ -15,7 +15,13 @@ These websites and web-applications use `svelte-plots-basic` library:
 
 ## News
 
-### 3.2.0
+### 3.3.0
+
+* Added advanced "save as PNG" option where user can select size and resolution of the image as well as change the filename.
+* several small improvements and bug fixes.
+
+
+### 3.2.1
 
 * Added mouse click handler option for `Heatmap.svelte` component (returns row and column index of the element).
 

package/package.json

@@ -1,7 +1,7 @@
 {
    "name": "svelte-plots-basic",
    "description": "Svelte components for creating simple plots",
-   "version": "3.2.1",
+   "version": "3.3.0",
    "author": "Sergey Kucheryavskiy",
    "license": "MIT",
    "private": false,

package/src/2d/Axes.svelte

@@ -37,6 +37,7 @@
 
    import AxisLines from './AxisLines.svelte';
    import AxisTickLabels from './AxisTickLabels.svelte';
+   import ExportDialog from '../ExportDialog.svelte';
 
 
    let {
@@ -103,9 +104,14 @@
       downloadPNG(plotElement, fileName, pngWidth, pngHeight, pngRes);
    }
 
+   /* Open advanced PNG export dialog. */
+   let showExportDialog = $state(false);
+   function handleClickPNGAdvanced() { showExportDialog = true; }
+   function handleCloseExportDialog() { showExportDialog = false; }
+
 
    // unique ID for clip path
-   const clipPathID = 'plottingArea' + Math.round(Math.random() * 10000);
+   const clipPathID = 'plottingArea' + Math.random().toString(36).slice(2);
 
    // pointers to plot DOM element and its width and height
    let plotElement = $state(0);
@@ -166,7 +172,7 @@
 
    // parameters of plot title
    const plotTitle = $derived(text2svg(title));
-   const titleHeight = $derived(plotTitle ? (plotTitle.length === title.left ? 1.0 : 1.4) : 0);
+   const titleHeight = $derived(plotTitle ? (plotTitle.length === title.length ? 1.0 : 1.4) : 0);
 
    // default parameters of box, axis elements, colomap legend and group legend
    let box = $state({show: false});
@@ -220,7 +226,7 @@
 
       {#if coords.tickCoords.length === 2 && coords.tickLabels.length === coords.tickCoords[1][0].length}
       <AxisTickLabels las={params.las} pos={params.pos} tickCoords={coords.tickCoords}
-         tickLabels={coords.tickLabels} tickColor={Colors.DARKGRAY} hideLast={params.hideLast}/>
+         tickLabels={coords.tickLabels} textColor={Colors.DARKGRAY} />
       {/if}
 
       <!-- tick factor -->
@@ -262,7 +268,7 @@
       <text {x} y={coords.ltop} dx="1.2em" dy="-0.25em" dominant-baseline="hanging"
          fill={params.labelColor}
          font-size="{params.fontSize}em"
-         text-anchor="right"
+         text-anchor="end"
       >{@html getTickFactorLabel(params.labelsFactor)}</text>
    {/if}
 {/snippet}
@@ -340,11 +346,6 @@
             user-select: none;
          }
 
-         .series-points text {
-            /* dominant-baseline: central;
-            alignment-baseline: central */
-         }
-
          .tick-labels text,
          .tick-labels tspan,
          .series-textlabels text,
@@ -444,27 +445,16 @@
 
             <!-- box -->
             <g class="axes-box">
-            {#if box.show}
-            <rect stroke={box.lineColor} stroke-width="{box.lineWidth}px" fill="transparent"
-               x={cpx[0]} y={cpy[1]} width={cpx[1] - cpx[0]} height={cpy[0] - cpy[1]}
-               id="axes-box"
-               onkeydown={handleClick}
-               onclick={handleClick}
-               onmousemove={handleMove}
-               onmousedown={handleDown}
-               onmouseup={handleUp}
-            />
-            {:else}
-            <rect stroke="transparent" fill="transparent"
+            <rect stroke={box.show ? box.lineColor : 'transparent'}
+               stroke-width={box.show ? box.lineWidth + 'px' : '0'}
+               fill="transparent"
                x={cpx[0]} y={cpy[1]} width={cpx[1] - cpx[0]} height={cpy[0] - cpy[1]}
                id="axes-box"
-               onkeydown={handleClick}
                onclick={handleClick}
                onmousemove={handleMove}
                onmousedown={handleDown}
                onmouseup={handleUp}
             />
-            {/if}
             </g>
 
 
@@ -501,11 +491,18 @@
    </p>
    {:else}
    <div class="download-links">
-      <button onclick={handleClickSVG} onkeydown={handleClickSVG}>⇩ svg</button>
-      <button onclick={handleClickPNG} onkeydown={handleClickPNG}>⇩ png</button>
-      <button onclick={handleClickCopy} onkeydown={handleClickCopy}>⧉ copy</button>
+      <button onclick={handleClickSVG}>⇩ svg</button>
+      <button onclick={handleClickPNG}>⇩ png</button>
+      <button onclick={handleClickPNGAdvanced}>⇩ png+</button>
+      <button onclick={handleClickCopy}>⧉ copy</button>
    </div>
    {/if}
+
+   {#if showExportDialog}
+      <ExportDialog {plotElement} {fileName}
+         initialWidth={pngWidth} initialRes={pngRes}
+         onclose={handleCloseExportDialog} />
+   {/if}
 </div>
 
 <style>
@@ -534,7 +531,6 @@
       transition: bottom 0.35s ease;
       box-shadow: 0 0 0.75em #00000060;
       margin: 0.6em;
-      box-sizing: border-box;
 
       display: flex;
       align-items: center;

package/src/2d/Bars.svelte

@@ -68,11 +68,10 @@
          console.error('Bars: if only one bar must be shown, value for property "barWidthExact" should be provided.');
          return null;
       } else {
-         w = 0;
-         let lw = 0;
+         w = Infinity;
          for (let i = 1; i < n; i++) {
-            lw = Math.abs(xv.v[i - 1] - xv.v[i]);
-            if (lw > w) w = lw;
+            const lw = Math.abs(xv.v[i - 1] - xv.v[i]);
+            if (lw < w) w = lw;
          }
       }
 

package/src/2d/Heatmap.svelte

@@ -83,6 +83,8 @@
       const nb = lb.length;    // number of breaks
       const rl = Array(nb).fill().map(() => []);     // coordinates of left for every break
       const rt = Array(nb).fill().map(() => []);     // coordinates of top for every break
+      const rr = Array(nb).fill().map(() => []);     // row indices for every break
+      const rc = Array(nb).fill().map(() => []);     // column indices for every break
 
       // adjust left side for the first break and right side for the last
       const llb = lb.slice();
@@ -97,11 +99,13 @@
             if (vj > llb[i] && vj <= llb[i + 1]) {
                rl[i].push(left.v[j] - 0.5);
                rt[i].push(v.nrows - top.v[j] + 1.5);
+               rr[i].push(top.v[j]);
+               rc[i].push(left.v[j]);
                break;
             }
          }
       };
-      return {rl, rt};
+      return {rl, rt, rr, rc};
    });
 
 
@@ -119,13 +123,12 @@
       const el = e.target;
       if (el.tagName !== 'rect') return;
 
-      const pel = el.parentNode.parentNode;
-      const pr = pel.getBoundingClientRect();
-      const r = el.getBoundingClientRect();
-      const x = (r.x - pr.x) + r.width * 0.2;
-      const y = (r.y - pr.y) + r.height * 0.2;
-      onclick(Math.abs(Math.round(y / r.height)), Math.abs(Math.round(x / r.width)))
-      e.stopPropagation();
+      const row = parseInt(el.getAttribute('data-row'));
+      const col = parseInt(el.getAttribute('data-col'));
+      if (!isNaN(row) && !isNaN(col)) {
+         onclick(row, col);
+         e.stopPropagation();
+      }
    }
 
 
@@ -143,7 +146,7 @@
       {#if rx[i].length > 0}
          <!-- loop over elements which fall into the interval -->
          {#each rx[i] as v, j}
-            <rect x={rx[i][j]} y={ry[i][j]} width={rw} height={rh}/>
+            <rect x={rx[i][j]} y={ry[i][j]} width={rw} height={rh} data-row={wc.rr[i][j]} data-col={wc.rc[i][j]}/>
          {/each}
       {/if}
       </g>

package/src/2d/Legend.svelte

@@ -78,8 +78,9 @@
          return null;
       }
 
+      const result = [];
       for (let i = 0; i < items.length; i++) {
-         const item = items[i];
+         const item = {...items[i]};
 
          // check and transform label
          if (!item.label) {
@@ -88,13 +89,14 @@
          }
 
          const newLabel = text2svg(item.label);
-         const labelHeight = newLabel.length === item.label ? 1 : 1.4;
+         const labelHeight = newLabel.length === item.label.length ? 1 : 1.4;
          item.label = newLabel;
-         item['labelHeight'] = labelHeight;
+         item.labelHeight = labelHeight;
 
          // set default values for lines
          if (item.line) {
-            if (!item.line.lineType) item.line['lineType'] = 1
+            item.line = {...item.line};
+            if (!item.line.lineType) item.line.lineType = 1
             if (!(item.line.lineType > 0 && item.line.lineType <= 4)) {
                console.error('Legend: parameter "lineType" for legend item ' + (i + 1) + ' is incorrect.');
             }
@@ -104,7 +106,8 @@
 
          // set default values for markers
          if (item.point) {
-            if (!item.point.marker) item.point['marker'] = 1
+            item.point = {...item.point};
+            if (!item.point.marker) item.point.marker = 1
             if (!(item.point.marker > 0 && item.point.marker <= MARKER_SYMBOLS.length)) {
                console.error('Legend: parameter "marker" for legend item ' + (i + 1) + ' is incorrect.');
             }
@@ -113,8 +116,10 @@
             item.point.markerSize = item.point.markerSize ? item.point.markerSize : 1;
             item.point.lineColor = item.point.lineColor ? item.point.lineColor : Colors.PRIMARY;
          }
+
+         result.push(item);
       }
-      return items;
+      return result;
    }
 
    // get context and update group legend parameters reactivey
@@ -124,7 +129,7 @@
       const newPosition = checkPosition(position);
       axes.setGroupLegend(
          newItems && newPosition ?
-         {show, position, items, lineColor, faceColor, lineWidth, fontSize} :
+         {show, position, items: newItems, lineColor, faceColor, lineWidth, fontSize} :
          {show: false, position: null, items: null}
       );
    });

package/src/2d/TextLegend.svelte

@@ -1,6 +1,7 @@
 <script>
    import { getContext } from 'svelte';
    import { Colors } from '../constants';
+   import { transformCoords } from '../methods';
 
    let {
       left,                                // vector/array with coordinates of lef side of each text box

package/src/3d/Axes.svelte

@@ -5,8 +5,8 @@
    - `limX` - array with limits for x-axis (in plot units), default: `[0, 1]`.
    - `limY` - array with limits for y-axis (in plot units), default: `[0, 1]`.
    - `limZ` - array with limits for y-axis (in plot units), default: `[0, 1]`.
-   - `theta` - angle (in degrees) for orientation of projection plane, default: `-10`.
-   - `phi` - angle (in degrees) for orientation of projection plane, default: `-10`.
+   - `theta` - angle (in radians) for orientation of projection plane, default: `-10`.
+   - `phi` - angle (in radians) for orientation of projection plane, default: `-10`.
    - `zoom` - zooming factor, default: `0.5`.
 
    Properties for downloading the plot as PNG or SVG file or copying it to clipboard:
@@ -48,7 +48,7 @@
       theta = -10,
       phi = -10,
       zoom = 0.5,
-      downloadLinks = 'hover',
+      downloadLinks = 'none',
       fileName = 'plot',
       pngWidth = 8,
       pngHeight = 8,
@@ -290,9 +290,9 @@
    </p>
    {:else}
    <div class="download-links">
-      <button onclick={handleClickSVG} onkeydown={handleClickSVG}>⇩ svg</button>
-      <button onclick={handleClickPNG} onkeydown={handleClickPNG}>⇩ png</button>
-      <button onclick={handleClickCopy} onkeydown={handleClickCopy}>⧉ copy</button>
+      <button onclick={handleClickSVG}>⇩ svg</button>
+      <button onclick={handleClickPNG}>⇩ png</button>
+      <button onclick={handleClickCopy}>⧉ copy</button>
    </div>
    {/if}
 </div>
@@ -370,7 +370,6 @@
       transition: bottom 0.35s ease;
       box-shadow: 0 0 0.75em #00000060;
       margin: 0.6em;
-      box-sizing: border-box;
 
       display: flex;
       align-items: center;

package/src/3d/Mesh.svelte

@@ -101,14 +101,14 @@
                // x-direction - start
                x1s.v[n1] = ux.v[x];
                z1s.v[n1] = uz.v[z];
-               y1s.v[n1] = Uy.v[z * nz + x];
+               y1s.v[n1] = Uy.v[z * nx + x];
 
                // x-direction - end
                x1e.v[n1] = ux.v[x + 1];
                z1e.v[n1] = uz.v[z];
-               y1e.v[n1] = Uy.v[z * nz + x + 1];
+               y1e.v[n1] = Uy.v[z * nx + x + 1];
 
-               const colInd = Math.round(((Uy.v[z * nz + x] + Uy.v[z * nz + x + 1]) / 2 - left) / span * (nbins - 1));
+               const colInd = Math.round(((Uy.v[z * nx + x] + Uy.v[z * nx + x + 1]) / 2 - left) / span * (nbins - 1));
                color1.v[n1] = colInd;
                n1 = n1 + 1;
             }
@@ -118,14 +118,14 @@
                // z-direction - start
                x2s.v[n2] = ux.v[x];
                z2s.v[n2] = uz.v[z];
-               y2s.v[n2] = Uy.v[z * nz + x];
+               y2s.v[n2] = Uy.v[z * nx + x];
 
                // z-direction - end
                x2e.v[n2] = ux.v[x];
                z2e.v[n2] = uz.v[z + 1];
-               y2e.v[n2] = Uy.v[(z + 1) * nz + x];
+               y2e.v[n2] = Uy.v[(z + 1) * nx + x];
 
-               const colInd = Math.round(((Uy.v[z * nz + x] + Uy.v[(z + 1) * nz + x]) / 2 - left) / span * (nbins - 1));
+               const colInd = Math.round(((Uy.v[z * nx + x] + Uy.v[(z + 1) * nx + x]) / 2 - left) / span * (nbins - 1));
                color2.v[n2] = colInd;
                n2 = n2 + 1;
             }

package/src/3d/Segments.svelte

@@ -60,8 +60,8 @@
    const uz1 = $derived(uy1 ? checkCoords(zStart, 'Segments (3D)', ux1.length) : null);
 
    const ux2 = $derived(uz1 ? checkCoords(xEnd, 'Segments (3D)', ux1.length) : null);
-   const uy2 = $derived(ux1 ? checkCoords(yEnd, 'Segments (3D)', ux1.length) : null);
-   const uz2 = $derived(uy1 ? checkCoords(zEnd, 'Segments (3D)', ux1.length) : null);
+   const uy2 = $derived(ux2 ? checkCoords(yEnd, 'Segments (3D)', ux1.length) : null);
+   const uz2 = $derived(uy2 ? checkCoords(zEnd, 'Segments (3D)', ux1.length) : null);
 
    // combine world coordinates to matrices
    const uW1 = $derived(ux1 && uy1 && uz1 ? cbind(ux1, uy1, uz1) : null);

package/src/3d/TextLabels.svelte

@@ -55,6 +55,7 @@
    const U = $derived(ux && uy && uz ? cbind(ux, uy, uz) : null);
 
    const l = $derived.by(() => {
+      if (!ux) return null;
       if(Array.isArray(labels) && labels.length !== ux.length ) {
          console.error('TextLabels: labels provided as an array should have the same number of elements as number of coordinates.');
          return null;
@@ -79,7 +80,7 @@
       <text data-id={i} x={s.x[i]} y={s.y[i]} dx={0} dy={0}>{@html l}</text>
    {/each}
    {:else}
-   {#each x as v, i}
+   {#each s.x as v, i}
       <text data-id={i} x={s.x[i]} y={s.y[i]} dx={0} dy={0}>{@html l[i]}</text>
    {/each}
    {/if}

package/src/ExportDialog.svelte

@@ -0,0 +1,359 @@
+<!--
+@component Modal dialog for advanced PNG export with live preview and dimension/resolution controls.
+
+   Properties:
+   - `plotElement` - reference to the SVG element to export.
+   - `fileName` - file name for download (without extension).
+   - `initialWidth` - initial width in cm (default: 8).
+   - `initialRes` - initial resolution in DPI (default: 300).
+   - `onclose` - callback when dialog is closed.
+-->
+<script>
+   import { downloadPNG } from './methods.js';
+
+   let {
+      plotElement,
+      fileName = 'plot',
+      initialWidth = 8,
+      initialRes = 300,
+      onclose
+   } = $props();
+
+   // aspect ratio from the actual SVG element
+   const svgWidth = plotElement ? (plotElement.clientWidth || plotElement.getBoundingClientRect().width) : 1;
+   const svgHeight = plotElement ? (plotElement.clientHeight || plotElement.getBoundingClientRect().height) : 1;
+   const aspectRatio = svgWidth / svgHeight;
+
+   // editable state — height always derived from width to preserve aspect ratio
+   let width = $state(initialWidth);
+   const height = $derived(Math.max(4, Math.min(20, Math.round(width / aspectRatio * 10) / 10)));
+   let res = $state(initialRes);
+   let name = $state(fileName);
+   const nameValid = $derived(name.trim().length > 0);
+
+   // preview container ref
+   let previewContainer = $state(null);
+
+   // max preview width in pixels
+   const maxPreviewWidth = 400;
+   const previewHeight = $derived(Math.round(maxPreviewWidth / aspectRatio));
+
+   // clone SVG into preview container on mount
+   $effect(() => {
+      if (!previewContainer || !plotElement) return;
+
+      // clear previous content
+      previewContainer.innerHTML = '';
+
+      // clone the SVG
+      const clone = plotElement.cloneNode(true);
+
+      clone.setAttribute('viewBox', `0 0 ${svgWidth} ${svgHeight}`);
+      clone.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+      clone.style.width = '100%';
+      clone.style.height = '100%';
+      clone.style.position = 'static';
+
+      // fixes duplicate clipPath IDs
+      const clipPaths = clone.querySelectorAll('clipPath');
+      clipPaths.forEach((cp) => {
+         const oldId = cp.getAttribute('id');
+         if (oldId) {
+            const newId = 'preview_' + oldId;
+            cp.setAttribute('id', newId);
+            const refs = clone.querySelectorAll(`[clip-path="url(#${oldId})"]`);
+            refs.forEach((ref) => ref.setAttribute('clip-path', `url(#${newId})`));
+         }
+      });
+
+      previewContainer.appendChild(clone);
+   });
+
+   function handleWidthChange(e) {
+      width = parseFloat(e.target.value);
+   }
+
+   const resOptions = [100, 150, 300, 600];
+   let saving = $state(false);
+
+   function handleSave() {
+      if (saving) return;
+      saving = true;
+
+      const container = plotElement.parentElement;
+      const origStyle = container.style.cssText;
+
+      // scale reference width with export width so smaller plots get
+      // a smaller scale category → relatively larger fonts and details
+      // 4cm → 360px (small), 8cm → 520px (medium), 16cm → 840px (large), 20cm → 1000px (xlarge)
+      const refWidth = Math.round(200 + width * 40);
+      const refHeight = Math.round(refWidth / aspectRatio);
+
+      function doExport() {
+         requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+               // onSerialize callback fires after downloadPNG has serialized the SVG,
+               // so we can safely restore the container and close the dialog
+               downloadPNG(plotElement, name.trim(), width, height, res, () => {
+                  container.style.cssText = origStyle;
+                  saving = false;
+                  onclose();
+               });
+            });
+         });
+      }
+
+      // temporarily resize plot container to a fixed reference size (off-screen,
+      // hidden behind the dialog backdrop) so Svelte recomputes the layout
+      container.style.cssText = `position:fixed;left:-9999px;top:-9999px;width:${refWidth}px;height:${refHeight}px;overflow:hidden;`;
+
+      // wait for ResizeObserver → Svelte bindings → derived recomputation → DOM update
+      // fallback timeout in case container is already at the target size
+      const fallbackTimer = setTimeout(() => { observer.disconnect(); doExport(); }, 500);
+      const observer = new ResizeObserver(() => {
+         observer.disconnect();
+         clearTimeout(fallbackTimer);
+         doExport();
+      });
+      observer.observe(plotElement);
+   }
+
+   function handleBackdropClick() {
+      if (!saving) onclose();
+   }
+
+   function handleDialogClick(e) {
+      e.stopPropagation();
+   }
+
+   // close on Escape key
+   $effect(() => {
+      function handleKeydown(e) {
+         if (e.key === 'Escape' && !saving) {
+            onclose();
+         }
+      }
+      document.addEventListener('keydown', handleKeydown);
+      return () => document.removeEventListener('keydown', handleKeydown);
+   });
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="export-dialog-backdrop" onclick={handleBackdropClick}>
+   <div class="export-dialog" onclick={handleDialogClick}>
+      <div class="export-dialog-title">Export as PNG</div>
+
+      <div class="export-dialog-body">
+         <!-- Preview -->
+         <div class="export-dialog-preview"
+            style="width:{maxPreviewWidth}px;height:{previewHeight}px;"
+            bind:this={previewContainer}
+         ></div>
+
+         <!-- Controls -->
+         <div class="export-dialog-controls">
+            <div class="export-dialog-control">
+               <label for="export-name">File name:</label>
+               <input id="export-name" class="export-dialog-name" class:invalid={!nameValid} type="text" bind:value={name} />
+            </div>
+
+            <div class="export-dialog-control">
+               <label for="export-width">Size, cm: ({width} × {height})</label>
+               <input id="export-width" type="range" min="4" max="20" step="1" value={width} oninput={handleWidthChange} />
+            </div>
+
+            <div class="export-dialog-res">
+               <span class="export-dialog-res-label">Resolution, dpi:</span>
+               <div class="export-dialog-res-options">
+                  {#each resOptions as opt}
+                     <label class="export-dialog-res-btn" class:selected={res === opt}>
+                        <input type="radio" name="export-res" value={opt} checked={res === opt}
+                           onchange={() => res = opt} />
+                        {opt}
+                     </label>
+                  {/each}
+               </div>
+            </div>
+         </div>
+      </div>
+
+      <div class="export-dialog-actions">
+         <button class="export-dialog-cancel" onclick={onclose} disabled={saving}>Cancel</button>
+         <button class="export-dialog-save" onclick={handleSave} disabled={!nameValid}>Save</button>
+      </div>
+   </div>
+</div>
+
+<style>
+   .export-dialog-backdrop {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.4);
+      z-index: 1000;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+   }
+
+   .export-dialog {
+      background: #fefefe;
+      border-radius: 0.5em;
+      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
+      padding: 1.25em;
+      min-width: 440px;
+      max-width: 90vw;
+      font-family: Arial, Helvetica, sans-serif;
+      color: #606060;
+   }
+
+   .export-dialog-title {
+      font-size: 1.1em;
+      font-weight: bold;
+      margin-bottom: 1em;
+      color: #303030;
+   }
+
+   .export-dialog-body {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 1em;
+   }
+
+   .export-dialog-preview {
+      border: 1px solid #dadada;
+      background: #fff;
+      overflow: hidden;
+      border-radius: 0.25em;
+   }
+
+   .export-dialog-controls {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 0.5em;
+   }
+
+   .export-dialog-control {
+      display: flex;
+      align-items: center;
+      gap: 0.5em;
+   }
+
+   .export-dialog-control label {
+      min-width: 110px;
+      font-size: 0.85em;
+      white-space: nowrap;
+   }
+
+   .export-dialog-control input[type="range"] {
+      flex: 1;
+      accent-color: #443333;
+   }
+
+   .export-dialog-name {
+      flex: 1;
+      padding: 0.25em 0.4em;
+      border: 1px solid #dadada;
+      border-radius: 0.35em;
+      font-size: 0.85em;
+      color: #606060;
+      background: #fafafa;
+      outline: none;
+   }
+
+   .export-dialog-name:focus {
+      border-color: #909090;
+   }
+
+   .export-dialog-name.invalid {
+      border-color: crimson;
+   }
+
+   .export-dialog-res {
+      display: flex;
+      align-items: center;
+      gap: 0.5em;
+   }
+
+   .export-dialog-res-label {
+      min-width: 110px;
+      font-size: 0.85em;
+      white-space: nowrap;
+   }
+
+   .export-dialog-res-options {
+      display: flex;
+      gap: 0.25em;
+   }
+
+   .export-dialog-res-btn {
+      box-sizing: border-box;
+      color: #606060;
+      border: none;
+      box-shadow: none;
+      background: #fafafa;
+      border-radius: 0.35em;
+      padding: 0.25em 0.5em;
+      font-size: 0.85em;
+      cursor: pointer;
+      user-select: none;
+   }
+
+   .export-dialog-res-btn:hover {
+      background: #dadada;
+   }
+
+   .export-dialog-res-btn.selected {
+      background: #443333;
+      color: #fafafa;
+   }
+
+   .export-dialog-res-btn input {
+      display: none;
+   }
+
+   .export-dialog-actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 0.5em;
+      margin-top: 1em;
+   }
+
+   .export-dialog-actions button {
+      padding: 0.4em 1.2em;
+      border-radius: 0.35em;
+      border: none;
+      cursor: pointer;
+      font-size: 0.85em;
+   }
+
+   .export-dialog-cancel {
+      background: #fafafa;
+      color: #606060;
+   }
+
+   .export-dialog-cancel:hover {
+      background: #dadada;
+   }
+
+   .export-dialog-save {
+      background: #443333;
+      color: #fafafa;
+   }
+
+   .export-dialog-save:hover {
+      background: #665555;
+      color: #fafafa;
+   }
+
+   .export-dialog-save:disabled {
+      background: #dadada;
+      color: #909090;
+      cursor: default;
+   }
+</style>

package/src/methods.js

@@ -290,7 +290,7 @@ export function validateTicks(ticks, lim) {
    const right = lim[0] < lim[1] ? lim[1] : lim[0];
 
    // check if provided ticks values are outside the axis limit range continue with automatic ticks
-   const newTicks = ticks.filter(x => x >= left & x <= right);
+   const newTicks = ticks.filter(x => x >= left && x <= right);
    if (newTicks.length !== ticks.length) {
       return [null, 'some of ticks values are outside axis limits.'];
    }
@@ -381,7 +381,7 @@ export function getAxisTicks(ticks, limIn, maxTickNum, round, whole, deltaFactor
    }
 
    // make sure the ticks are not aligned with axes limits
-   return ticks.filter(x => x >= lim[0] & x <= lim[1]);
+   return ticks.filter(x => x >= lim[0] && x <= lim[1]);
 }
 
 
@@ -456,7 +456,7 @@ export function getScale(width, height) {
  * @returns {text} the scale level ("small", "medium" or "large").
  *
  */
-export function getAxisScale(width, size) {
+export function getAxisScale(width) {
    if (width < 400.2) return "small";
    if (width < 700.2) return "medium";
    if (width < 900.2) return "large";
@@ -588,7 +588,7 @@ function changeDPI(base64Image, dpi) {
  * @param {number} res - resolution (pixels per inch)
  *
  */
-export function downloadPNG (svg, fileName, width, height, res) {
+export function downloadPNG (svg, fileName, width, height, res, onSerialize) {
 
    if (!width) width = 10;
    if (!height) height = 10;
@@ -645,7 +645,9 @@ export function downloadPNG (svg, fileName, width, height, res) {
       canvas.width =  svgWidth * (specialScale < 1 ? specialScale : scaleFactor);
       canvas.height = svgHeight * (specialScale < 1 ? specialScale : scaleFactor);
 
-      // set corresponding attributes for SVG element
+      // save and set corresponding attributes for SVG element
+      const origWidth = svg.getAttribute('width');
+      const origHeight = svg.getAttribute('height');
       svg.setAttribute('width', svgWidth * scaleFactor);
       svg.setAttribute('height', svgHeight * scaleFactor);
 
@@ -659,12 +661,19 @@ export function downloadPNG (svg, fileName, width, height, res) {
       const blob = new Blob([svgXml], { type: 'image/svg+xml;charset=utf-8' });
       const url = URL.createObjectURL(blob);
 
+      // restore original attributes
+      origWidth ? svg.setAttribute('width', origWidth) : svg.removeAttribute('width');
+      origHeight ? svg.setAttribute('height', origHeight) : svg.removeAttribute('height');
+
+      // notify caller that serialization is done (used by ExportDialog to restore container)
+      if (onSerialize) onSerialize();
+
       const img = new Image();
 
       img.onload = function () {
 
          // downscale image if it must be smaller than the current SVG element
-         if (specialScale < 0) {
+         if (specialScale < 1) {
             img.width = img.width * specialScale;
             img.height = img.height * specialScale;
          }
@@ -708,6 +717,12 @@ export function downloadSVG(svg, fileName) {
 
    const svgHeight = svg.clientHeight;
    const svgWidth = svg.clientWidth;
+
+   // save original attributes
+   const origWidth = svg.getAttribute('width');
+   const origHeight = svg.getAttribute('height');
+   const origViewBox = svg.getAttribute('viewBox');
+
    svg.setAttribute('width', svgWidth + 'px');
    svg.setAttribute('height', svgHeight + 'px');
    svg.setAttribute('viewBox', `0 0 ${svgWidth} ${svgHeight}`);
@@ -718,6 +733,11 @@ export function downloadSVG(svg, fileName) {
    a.setAttribute('href', url)
    a.setAttribute('download', `${fileName}.svg`);
    a.click()
+
+   // restore original attributes
+   origWidth ? svg.setAttribute('width', origWidth) : svg.removeAttribute('width');
+   origHeight ? svg.setAttribute('height', origHeight) : svg.removeAttribute('height');
+   origViewBox ? svg.setAttribute('viewBox', origViewBox) : svg.removeAttribute('viewBox');
 }
 
 /**
@@ -793,15 +813,21 @@ export async function createPngBlob(svg, width, height) {
    // scale the context
    context.scale(scaleFactor, scaleFactor)
 
-   // set corresponding attributes for SVG element
+   // save and set corresponding attributes for SVG element
+   const origWidth = svg.getAttribute('width');
+   const origHeight = svg.getAttribute('height');
    svg.setAttribute('width', canvas.width);
    svg.setAttribute('height', canvas.height);
 
+   // serialize SVG with export dimensions, then restore original attributes
+   const svgData = new XMLSerializer().serializeToString(svg);
+   origWidth ? svg.setAttribute('width', origWidth) : svg.removeAttribute('width');
+   origHeight ? svg.setAttribute('height', origHeight) : svg.removeAttribute('height');
+
    // create promise
    const promise = new Promise((resolve, reject) => {
 
-      // serialzie SVG, create blob and URL for it
-      const svgData = new XMLSerializer().serializeToString(svg);
+      // create blob and URL for serialized SVG
       const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
       const DOMURL = window.URL || window.webkitURL || window;
       const url = DOMURL.createObjectURL(svgBlob);
@@ -1035,10 +1061,6 @@ export function getYAxisParams(limX, limY, scales, tX, axis) {
       tickLabels[pos] = ' ';
    }
 
-   // old version of the code above - remove after testing
-   // if (tfLabel.length > 0 && (limY[1] - ticksY.v[ticksY.length - 1]) < ((limY[1] - limY[0]) * 0.05)) {
-   //    tickLabels[tickLabels.length - 1] = ' ';
-   // }
 
    return {grid, axisLine, tickCoords, tfCoords, ticks, tickLabels, tickFactor, tfLabel};
 }
@@ -1248,8 +1270,6 @@ export function text2svg(text) {
    }
 
    let i = 0;
-   const dy = 0.5;
-   const fs = 0.8;
    let svgText = '';
    while (i < text.length) {
 
@@ -1445,7 +1465,7 @@ export function getYAxisCoords3D(yaxis, limX, limY, limZ, scale) {
 
 /**
  * Computes coordinates of all elements (lines, labels, etc) for z-axis ticks.
- * @param {Object} yaxis - JSON with z-axis paramaters.
+ * @param {Object} zaxis - JSON with z-axis paramaters.
  * @param {Array} limX - array with x-axis limits.
  * @param {Array} limY - array with y-axis limits.
  * @param {Array} limZ - array with z-axis limits.
@@ -1469,8 +1489,8 @@ export function getZAxisCoords3D(zaxis, limX, limY, limZ, scale) {
 
    // tick labels
    const tickLabels = (!zaxis.ticks || !zaxis.tickLabels) ? ticksZ.v : zaxis.tickLabels;
-   if (tickLabels.length !== ticksX.length) {
-      console.error('XAxis (3D): "tickLabels" must be a array of the same size as ticks.');
+   if (tickLabels.length !== ticksZ.length) {
+      console.error('ZAxis (3D): "tickLabels" must be a array of the same size as ticks.');
    }
 
    // combine all coordinates together