svelte-plots-basic 3.3.0 → 3.4.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-2026 Sergey Kucheryavskiy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -15,6 +15,24 @@ These websites and web-applications use `svelte-plots-basic` library:
 
 ## News
 
+### 3.4.0
+
+* Added the `plotActions` property to `Axes` for adding custom buttons to the download panel.
+* Added advanced validation for axis limits, text-label positions, heatmap breaks, and custom plot actions.
+* Fixed text-label positioning and rotation when individual positions are provided.
+* Fixed heatmaps with automatic, custom, or constant-value breaks.
+* Added support for rectangular and constant-height 3D meshes.
+* Improved PNG, SVG, and clipboard export by serializing a clone instead of modifying the visible plot.
+* Fixed the advanced PNG export dialog so a default resolution is always selected, falling back to 300 dpi when necessary.
+* Prevented plot controls from submitting an enclosing HTML form.
+* Added package validation before publishing and synchronized Svelte 5 peer-dependency metadata.
+* Fixed conditionally rendered axes, boxes, and legends so their parent state is cleared when they are removed.
+* Improved heatmap interval processing and added automatically generated colormaps with more than 16 colors.
+* Fixed `TextLegend` positioning at zero and strengthened finite-range validation for 3D axes.
+* Reduced reactive and repeated allocation overhead for axis configuration, text measurement, PNG export, and colormap generation.
+* Added dependency-free regression tests and made them run automatically before packaging.
+* Documented the trust requirements for labels rendered as SVG/HTML markup.
+
 ### 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.
@@ -57,6 +75,13 @@ In addition to Svelte 5 syntax and functionality, this release also introduces a
 
 * **Properites** — from 3.x.x the naming of the properties is more consistent. For example, before the library used properties `borderColor` and `borderWidth` for areas, rectangels, bars and markers, while for lines, segments and multilines the similar properties were named as `lineColor` and `lineWidth`. Now they all have prefix `line*` if it is something about lines or segments and `face*` if it is somthing inside a closed contour. So no more `border*` properties.
 
+
+## Security and label markup
+
+Several title and label properties support SVG/HTML markup and are rendered as raw markup using Svelte's `{@html}` mechanism. This enables formatted labels, HTML entities, subscripts, and superscripts.
+
+Only pass trusted content to these properties. Do not pass unsanitized user input or external data directly as a plot title, axis label, tick label, legend label, or text-label value. Escape untrusted text, or sanitize it with an allow-list appropriate for SVG markup, before passing it to a component.
+
 ## Installation
 
 The set up process is similar to any other Svelte component library. Just use:
@@ -140,6 +165,7 @@ Here is a table with properties of the component related to saving plot to a fil
  `pngRes` | `300` | resolution of PNG image (pixels per inch)
  `clipboardWidth` | `1200` | width of image in clipboard in pixels
  `clipboardHeight` | `800` | height of image in clipboard in pixels
+ `plotActions` | `[]` | array of `{ text, callback }` objects for adding custom buttons to the download panel.
 
 Please pay attention that most of the browsers enable clipboard functionality only if website is available via HTTPS.
 
@@ -841,15 +867,12 @@ Here is an example of simple 3D scatter plot:
 <Axes limX={[-10, 10]} limY={[-10, 10]} limZ={[-10, 10]} {zoom} {phi} {theta}>
 	<Points {xValues} {yValues} {zValues} />
 
-	<XAxis showGrid={true} title="X" />
-	<YAxis showGrid={true} title="Y" />
-	<ZAxis showGrid={true} title="Z" />
+	<XAxis showGrid={true} label="X" />
+	<YAxis showGrid={true} label="Y" />
+	<ZAxis showGrid={true} label="Z" />
 </Axes>
 ```
 
 You can also add `Lines`, `Segments` and `Mesh` series to 3D plots.
 
 Check more advanced example in Svelte REPL with mouse and keyboard support, and more: [plots-3d](https://svelte.dev/playground/2294eecba7d7477ab9a09c1734d32ac2)
-
-
-

package/package.json

@@ -1,10 +1,16 @@
 {
    "name": "svelte-plots-basic",
    "description": "Svelte components for creating simple plots",
-   "version": "3.3.0",
+   "version": "3.4.0",
    "author": "Sergey Kucheryavskiy",
    "license": "MIT",
    "private": false,
+   "type": "module",
+   "scripts": {
+      "check": "node scripts/check.cjs",
+      "test": "node --test",
+      "prepack": "npm run check && npm test"
+   },
    "exports": {
       "./constants":  "./src/constants.js",
       "./utils":  "./src/methods.js",
@@ -16,6 +22,9 @@
    "devDependencies": {
       "svelte": "^5.x.x"
    },
+   "peerDependencies": {
+      "svelte": "^5.0.0"
+   },
    "dependencies": {
       "mdatools": "^1.x.x"
    },

package/src/2d/Area.svelte

@@ -32,7 +32,6 @@
    import { val2p, checkCoords, handleClick, transformCoords } from '../methods';
    import { LINE_STYLES } from '../constants';
 
-   /** @type {Props} */
    let {
 	   xValues,                       // vector or array with x-coordinates of the points
       yValues,                       // vector or array with y-coordinates of the points
@@ -66,4 +65,3 @@
    <polygon points={pa}/>
 </g>
 {/if}
-

package/src/2d/Axes.svelte

@@ -30,7 +30,7 @@
 <script>
    import { setContext } from 'svelte';
    import { Colors, PLOT_FONT_SIZE, AXES_MARGIN_FACTORS, TICK_SIZE, LINE_STYLES, MARKER_SYMBOLS } from '../constants.js';
-   import { downloadSVG, downloadPNG, copyToClipboard, checkArray, getScale, getAxisScale, getXAxisParams, getYAxisParams,
+   import { downloadSVG, downloadPNG, copyToClipboard, getScale, getAxisScale, getXAxisParams, getYAxisParams,
             transformCoords, getColormapLegendParams, getColormapLegendCoords, getTickFactorLabel,
             getGroupLegendCoords, text2svg,
             invTransformCoords } from '../methods.js';
@@ -46,6 +46,7 @@
       limY = [0, 1],
       margins = [1.0, 1.1, 0.55, 0.60],
       downloadLinks = 'none',
+      plotActions = [],
       fileName = 'plot',
       pngWidth = 8,
       pngHeight = 8,
@@ -60,6 +61,44 @@
    } = $props();
 
 
+   const actions = $derived.by(() => {
+      if (plotActions == null) return [];
+
+      if (!Array.isArray(plotActions)) {
+         console.error('Axes: "plotActions" must be an array.');
+         return [];
+      }
+
+      return plotActions.filter((action, index) => {
+         const isValid =
+            action &&
+            typeof action.text === 'string' &&
+            typeof action.callback === 'function';
+
+         if (!isValid) {
+            console.error(
+               `Axes: plot action ${index + 1} must contain a text string and callback function.`
+            );
+         }
+
+         return isValid;
+      });
+   });
+
+
+   // Check that axis limits contain a finite, meaningful numeric range.
+   function hasUsableRange(lim) {
+      if (!Array.isArray(lim) || lim.length !== 2) return false;
+      if (!lim.every(v => typeof v === 'number' && Number.isFinite(v))) return false;
+
+      const span = Math.abs(lim[1] - lim[0]);
+      const scale = Math.max(Math.abs(lim[0]), Math.abs(lim[1]));
+
+      return Number.isFinite(1 / span) &&
+         span > Number.EPSILON * scale * 16;
+   }
+
+
    /* handler for mouse  events */
    function handleMouse(e, f) {
       if (f && e.target.id == "axes-box") {
@@ -138,8 +177,8 @@
 
    // plot status
    const isOk = $derived(
-      checkArray(limX, 2) &&
-      checkArray(limY, 2) &&
+      hasUsableRange(limX) &&
+      hasUsableRange(limY) &&
       width > (pxMargins[1] + pxMargins[3]) &&
       height > (pxMargins[0] + pxMargins[2])
    );
@@ -175,11 +214,11 @@
    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});
-   let xaxis = $state({show: false, error: ''});
-   let yaxis = $state({show: false, error: ''});
-   let clg = $state({show: false, colmap: null, breaks: null});
-   let glg = $state({show: false, items: null, position: null});
+   let box = $state.raw({show: false});
+   let xaxis = $state.raw({show: false, error: ''});
+   let yaxis = $state.raw({show: false, error: ''});
+   let clg = $state.raw({show: false, colmap: null, breaks: null});
+   let glg = $state.raw({show: false, items: null, position: null});
 
    // set colormap legend parameters if requested
    const clgParams = $derived(isOk && clg && clg.show ? getColormapLegendParams(clg) : null);
@@ -445,6 +484,8 @@
 
             <!-- box -->
             <g class="axes-box">
+            <!-- The plot callback requires real pointer coordinates; a keyboard-generated coordinate would be arbitrary. -->
+            <!-- svelte-ignore a11y_click_events_have_key_events -->
             <rect stroke={box.show ? box.lineColor : 'transparent'}
                stroke-width={box.show ? box.lineWidth + 'px' : '0'}
                fill="transparent"
@@ -491,10 +532,16 @@
    </p>
    {:else}
    <div class="download-links">
-      <button onclick={handleClickSVG}>⇩ svg</button>
-      <button onclick={handleClickPNG}>⇩ png</button>
-      <button onclick={handleClickPNGAdvanced}>⇩ png+</button>
-      <button onclick={handleClickCopy}>⧉ copy</button>
+      <button type="button" onclick={handleClickSVG}>↓   svg</button>
+      <button type="button" onclick={handleClickPNG}>↓ png</button>
+      <button type="button" onclick={handleClickPNGAdvanced}>↓ png+</button>
+      <button type="button" onclick={handleClickCopy}>⧉ copy</button>
+      {#if actions.length > 0}
+      <span class="divider">⋮</span>
+      {#each actions as ac}
+      <button type="button" onclick={ac.callback}>{ac.text}</button>
+      {/each}
+      {/if}
    </div>
    {/if}
 
@@ -545,6 +592,9 @@
       background: #fafafa;
       border-radius: 0.35em;
       padding: 0.25em 0.5em;
+      margin: 0 1px;
+
+      line-height: 1.25;
    }
 
    .download-links > button:hover{
@@ -560,6 +610,12 @@
       background: #4488ee;
    }
 
+   .download-links > .divider {
+      display: inline-block;
+      width: 1em;
+      text-align: center;
+      color: #909090;
+   }
 
    /* Plot container */
    .plot-container {
@@ -617,4 +673,4 @@
       min-width: 100%;
    }
 
-</style>
+</style>

package/src/2d/Bars.svelte

@@ -34,7 +34,6 @@
    import Rectangles from './Rectangles.svelte';
 
 
-   /** @type {Props} */
    let {
 	   xValues,                       // vector with x-coordinates of middle points of the bars.
       yValues,                       // vector with y-coordinates of top points of the bars.
@@ -116,4 +115,4 @@
 {#if isOk}
 <Rectangles className="series series-bar" left={x.left} width={x.width} top={y.top} height={y.height}
    lineWidth={lineWidth} {lineColor} {faceColor} {onclick} />
-{/if}
+{/if}

package/src/2d/Box.svelte

@@ -16,7 +16,7 @@
    ```
 -->
 <script>
-   import { getContext } from 'svelte';
+   import { getContext, onDestroy } from 'svelte';
 
    let {lineWidth = 1, lineColor = '#606060'} = $props();
    const axes = getContext('axes');
@@ -24,5 +24,8 @@
    $effect(() => {
       axes.setBox({show:true, lineWidth, lineColor});
    });
-</script>
 
+   onDestroy(() => {
+      axes.setBox({show: false});
+   });
+</script>

package/src/2d/ColormapLegend.svelte

@@ -34,7 +34,7 @@
    ```
 -->
 <script>
-   import { getContext } from 'svelte';
+   import { getContext, onDestroy } from 'svelte';
    import { Colors } from '../constants';
 
 
@@ -52,7 +52,10 @@
    $effect(() => {
       axes.setColmapLegend({show, breaks, colmap, labels, labelColor, fontSize})
    });
-</script>
 
+   onDestroy(() => {
+      axes.setColmapLegend({show: false});
+   });
+</script>
 
 

package/src/2d/Heatmap.svelte

@@ -27,13 +27,12 @@
    import { getContext } from 'svelte';
    import { ismatrix, isvector } from 'mdatools/arrays';
    import { expandgrid } from 'mdatools/misc';
-   import { split } from 'mdatools/stat';
+   import { range, split } from 'mdatools/stat';
 
    import { getcolmap, transformObjects, transformCoords, seq } from '../methods';
    import { HEATMAP_NUM_SPLITS } from '../constants';
 
 
-   /** @type {Props} */
    let {
       values,                        // Matrix with values to show heatmap for
       breaks,                        // vector with breaks to distribute the values in
@@ -42,6 +41,54 @@
    } = $props();
 
 
+   function validateBreaks(values) {
+      if (!values || values.length < 2) {
+         console.error('Heatmap: "breaks" must contain at least two values.');
+         return null;
+      }
+
+      const items = Array.from(values);
+
+      if (items.some(value =>
+         typeof value !== 'number' || Number.isNaN(value)
+      )) {
+         console.error('Heatmap: values in "breaks" must be numeric.');
+         return null;
+      }
+
+      if (items.some((value, index) =>
+         index > 0 && value <= items[index - 1]
+      )) {
+         console.error('Heatmap: values in "breaks" must be strictly increasing.');
+         return null;
+      }
+
+      return values;
+   }
+
+
+   function findInterval(value, breaks) {
+      let low = 1;
+      let high = breaks.length - 1;
+
+      while (low < high) {
+         const middle = Math.floor((low + high) / 2);
+
+         if (value <= breaks[middle]) {
+            high = middle;
+         } else {
+            low = middle + 1;
+         }
+      }
+
+      const index = low - 1;
+
+      return value > breaks[index] && value <= breaks[index + 1]
+         ? index
+         : -1;
+   }
+
+
 
    // check that values are provided as a matrix
    let v = $derived(ismatrix(values) && values.nrows > 0 && values.ncols > 0 ? values : null);
@@ -49,19 +96,37 @@
    // check and process left values for breaks
    let lb = $derived.by(() => {
       if (!v) return null;
-      if (breaks && Array.isArray(breaks)) return breaks;
-      if (breaks && isvector(breaks)) return breaks.v;
-      return split(v.v, HEATMAP_NUM_SPLITS).v;
+
+      if (breaks !== undefined && breaks !== null) {
+         if (Array.isArray(breaks)) return validateBreaks(breaks);
+         if (isvector(breaks)) return validateBreaks(breaks.v);
+
+         console.error('Heatmap: "breaks" must be an array or Vector.');
+         return null;
+      }
+
+      const valueRange = range(v.v);
+      if (valueRange[0] === valueRange[1]) {
+         const value = valueRange[0];
+         const delta = Math.abs(value) > 0 ? Math.abs(value) * 0.01 : 1;
+         const lower = Number.isFinite(value - delta) ? value - delta : value;
+         const upper = Number.isFinite(value + delta) ? value + delta : value;
+         return validateBreaks([lower, upper]);
+      }
+
+      return validateBreaks(split(v.v, HEATMAP_NUM_SPLITS).v);
    });
 
    // check and process colormap values
    let lc = $derived.by(() => {
+      if (!lb) return null;
+
       if (colmap) {
          if (!Array.isArray(colmap)) {
             console.error('Heatmap: parameter "colmap" must be array with colors.');
             return null;
          }
-         if (colmap.length !== breaks.length - 1) {
+         if (colmap.length !== lb.length - 1) {
             console.error('Heatmap: number of color values in colormap does not match number of intervals defined by breaks.');
             return null;
          }
@@ -81,10 +146,11 @@
       const [top, left] = lt;
       const nv = left.length;  // number of values in matrix
       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
+      const intervalCount = nb - 1;
+      const rl = Array.from({length: intervalCount}, () => []);  // coordinates of left for every interval
+      const rt = Array.from({length: intervalCount}, () => []);  // coordinates of top for every interval
+      const rr = Array.from({length: intervalCount}, () => []);  // row indices for every interval
+      const rc = Array.from({length: intervalCount}, () => []);  // column indices for every interval
 
       // adjust left side for the first break and right side for the last
       const llb = lb.slice();
@@ -95,15 +161,13 @@
       // loop over all breaks
       for (let j = 0; j < nv; j++) {
          const vj = v.v[j];
-         for (let i = 0; i < nb - 1; i++) {
-            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;
-            }
-         }
+         const i = findInterval(vj, llb);
+         if (i === -1) continue;
+
+         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]);
       };
       return {rl, rt, rr, rc};
    });

package/src/2d/Legend.svelte

@@ -40,7 +40,7 @@
    </Axes>
 -->
 <script>
-   import { getContext } from 'svelte';
+   import { getContext, onDestroy } from 'svelte';
    import { Colors, MARKER_SYMBOLS } from '../constants';
    import { text2svg } from '../methods';
 
@@ -133,4 +133,12 @@
          {show: false, position: null, items: null}
       );
    });
+
+   onDestroy(() => {
+      axes.setGroupLegend({
+         show: false,
+         position: null,
+         items: null
+      });
+   });
 </script>

package/src/2d/Lines.svelte

@@ -30,7 +30,6 @@
    import { val2p, checkCoords, handleClick } from '../methods';
    import { LINE_STYLES } from '../constants';
 
-   /** @type {Props} */
    let {
 	   xValues,                       // vector or array with x-coordinates of the points
       yValues,                       // vector or array with y-coordinates of the points
@@ -60,4 +59,3 @@
    <polyline class="line" points={p}/>
 </g>
 {/if}
-

package/src/2d/Multilines.svelte

@@ -38,7 +38,6 @@
    import { val2p, checkCoords, handleClick } from '../methods';
    import { LINE_STYLES } from '../constants';
 
-   /** @type {Props} */
    let {
 	   xValues,                       // vector or array with x-coordinates of the points
       yValues,                       // vector or array with y-coordinates of the points
@@ -61,6 +60,7 @@
 
       if (xv.length !== yValues.nrows) {
          console.error('Multilines: parameter "xValues" must have the same number of values as number of rows in "yValues".');
+         return null;
       }
 
       return yValues;
@@ -91,4 +91,3 @@
    {/each}
 </g>
 {/if}
-

package/src/2d/Points.svelte

@@ -31,7 +31,6 @@
    import { Colors, MARKER_SYMBOLS } from '../constants';
    import { checkCoords, transformCoords, handleClick } from '../methods';
 
-   /** @type {Props} */
    let {
 	   xValues,                          // array of vector with x-coordinates of points
       yValues,                          // array of vector with y-coordinates of points

package/src/2d/Rectangles.svelte

@@ -36,7 +36,6 @@
    import { Colors } from '../constants';
    import { checkCoords, transformCoords, transformObjects, handleClick } from '../methods';
 
-   /** @type {Props} */
    let {
 	   left,                          // array of vector with coordinates of left sides of the bars
       top,                           // array of vector with coordinates of top sides of the bars
@@ -80,4 +79,3 @@
    </g>
 {/if}
 
-

package/src/2d/TextLabels.svelte

@@ -71,8 +71,22 @@
    const p = $derived.by(() => {
       if (!l) return null;
 
-      if (typeof labels === 'string' && typeof pos !== 'number' ) {
-         console.error('TextLabels: parameter "labels" is provided as single string, so "pos" must be a single number.');
+      const hasIndividualPositions =
+         Array.isArray(pos) || ArrayBuffer.isView(pos);
+
+      if (typeof labels === 'string' && hasIndividualPositions) {
+         console.error('TextLabels: when "labels" is a single string, "pos" must be a single number.');
+         return null;
+      }
+
+      if (hasIndividualPositions && pos.length !== yv.length) {
+         console.error('TextLabels: the number of values in "pos" must match the number of coordinates.');
+         return null;
+      }
+
+      const positions = hasIndividualPositions ? Array.from(pos) : [pos];
+      if (positions.some(v => !Number.isInteger(v) || v < 0 || v > 4)) {
+         console.error('TextLabels: values in "pos" must be whole numbers from 0 to 4.');
          return null;
       }
 
@@ -106,14 +120,14 @@
       {#each x as v, i}
          <text data-id={i} x={x[i]} y={y[i]} dx={dx[pos]} dy={dy[pos]}
             transform={rotateAngle !== undefined ? `rotate(${rotateAngle}, ${x[i] + dx[pos]}, ${y[i] + dy[pos]})` : ''}
-            text-anchor={textAnchors[pos[i]]}>{@html labels}</text>
+            text-anchor={textAnchors[pos]}>{@html labels}</text>
       {/each}
 
    {:else if (Array.isArray(pos) || ArrayBuffer.isView(pos))}
 
       {#each x as v, i}
          <text data-id={i} x={x[i]} y={y[i]} dx={dx[pos[i]]} dy={dy[pos[i]]}
-            transform={rotateAngle !== undefined ? `rotate(${rotateAngle}, ${x[i] + dx[pos]}, ${y[i] + dy[pos]})` : ''}
+            transform={rotateAngle !== undefined ? `rotate(${rotateAngle}, ${x[i] + dx[pos[i]]}, ${y[i] + dy[pos[i]]})` : ''}
             text-anchor={textAnchors[pos[i]]}>{@html labels[i]}</text>
       {/each}
 

package/src/2d/TextLegend.svelte

@@ -16,8 +16,16 @@
    } = $props()
 
    const axes = getContext('axes');
-   const x = $derived(left ? transformCoords([left], axes.tX()) : null);
-   const y = $derived(top ? transformCoords([top], axes.tY()) : null );
+   const x = $derived(
+      left !== undefined && left !== null
+         ? transformCoords([left], axes.tX())
+         : null
+   );
+   const y = $derived(
+      top !== undefined && top !== null
+         ? transformCoords([top], axes.tY())
+         : null
+   );
 
    // styles for bars and labels
    const textStyleStr = $derived(`fill:${faceColor};stroke-width:${lineWidth}px;stroke:${lineColor};font-size:${textSize}em;`);
@@ -29,4 +37,4 @@
          <tspan {x} {dx} dy={i === 0 ? 0 : dy}>{@html el}</tspan>
       {/each}
    </text>
-{/if}
+{/if}

package/src/2d/XAxis.svelte

@@ -21,7 +21,7 @@
 -->
 <script>
 
-   import { getContext } from 'svelte';
+   import { getContext, onDestroy } from 'svelte';
    import { text2svg, validateTicks, validateTickLabels } from '../methods';
 
    let {
@@ -60,4 +60,8 @@
       axes.setXAxis({show, error: error, label: axisLabel, ticks: ticksProcessed,
          labelHeight, showGrid, las, whole, tickLabels: tickLabelsProcessed});
    });
+
+   onDestroy(() => {
+      axes.setXAxis({show: false, error: ''});
+   });
 </script>

package/src/2d/YAxis.svelte

@@ -21,7 +21,7 @@
 -->
 <script>
 
-   import { getContext } from 'svelte';
+   import { getContext, onDestroy } from 'svelte';
    import { text2svg, validateTicks, validateTickLabels } from '../methods';
 
 
@@ -63,4 +63,8 @@
       axes.setYAxis({show, error: error, label: axisLabel, ticks: ticksProcessed,
          labelHeight, showGrid, las, whole, tickLabels: tickLabelsProcessed, pos: 4});
    });
+
+   onDestroy(() => {
+      axes.setYAxis({show: false, error: ''});
+   });
 </script>

package/src/3d/Axes.svelte

@@ -33,14 +33,13 @@
    import { matrix, Matrix } from 'mdatools/arrays';
    import { setContext } from 'svelte';
    import { PLOT_FONT_SIZE } from '../constants.js';
-   import { checkArray, getScale, getXAxisCoords3D, getYAxisCoords3D, getZAxisCoords3D,
+   import { getScale, getXAxisCoords3D, getYAxisCoords3D, getZAxisCoords3D,
             downloadPNG, downloadSVG, copyToClipboard} from '../methods.js';
 
    import AxisLines from './AxisLines.svelte';
    import AxisTickLabels from './AxisTickLabels.svelte';
    import TextLabels from './TextLabels.svelte';
 
-   /** @type {Props} */
    let {
       limX = [0, 1],
       limY = [0, 1],
@@ -59,6 +58,21 @@
    } = $props();
 
 
+   function hasUsableRange(lim) {
+      if (!Array.isArray(lim) || lim.length !== 2) return false;
+      if (!lim.every(value =>
+         typeof value === 'number' && Number.isFinite(value)
+      )) return false;
+
+      const span = lim[1] - lim[0];
+      const scale = Math.max(Math.abs(lim[0]), Math.abs(lim[1]));
+
+      return span > 0 &&
+         Number.isFinite(1 / span) &&
+         span > Number.EPSILON * scale * 16;
+   }
+
+
 
    /* Copy plot to clipboard as PNG image. */
    async function handleClickCopy(e) {
@@ -105,12 +119,9 @@
 
    // check main plot parameters and set status
    const isOk = $derived(
-      checkArray(limX, 2) &&
-      checkArray(limY, 2) &&
-      checkArray(limZ, 2) &&
-      limX[0] < limX[1] &&
-      limY[0] < limY[1] &&
-      limZ[0] < limZ[1] &&
+      hasUsableRange(limX) &&
+      hasUsableRange(limY) &&
+      hasUsableRange(limZ) &&
       width > 50 &&
       height > 50
    );
@@ -174,9 +185,9 @@
    );
 
    // containers for axis properties
-   let xaxis = $state({show: false, label: ""});
-   let yaxis = $state({show: false, label: ""});
-   let zaxis = $state({show: false, label: ""});
+   let xaxis = $state.raw({show: false, label: ""});
+   let yaxis = $state.raw({show: false, label: ""});
+   let zaxis = $state.raw({show: false, label: ""});
 
    // axes context to share with children
    setContext('axes', {
@@ -290,9 +301,9 @@
    </p>
    {:else}
    <div class="download-links">
-      <button onclick={handleClickSVG}>⇩ svg</button>
-      <button onclick={handleClickPNG}>⇩ png</button>
-      <button onclick={handleClickCopy}>⧉ copy</button>
+      <button type="button" onclick={handleClickSVG}>⇩ svg</button>
+      <button type="button" onclick={handleClickPNG}>⇩ png</button>
+      <button type="button" onclick={handleClickCopy}>⧉ copy</button>
    </div>
    {/if}
 </div>
@@ -399,4 +410,4 @@
       background: #4488ee;
    }
 
-</style>
+</style>

package/src/3d/Mesh.svelte

@@ -45,25 +45,50 @@
 
    // check user defined coordinates
    const ux = $derived(checkCoords(xValues, 'Mesh (3D)'));
-   const uz = $derived(ux ? checkCoords(zValues, 'Mesh (3D)', ux.length) : null);
+   const uz = $derived(ux ? checkCoords(zValues, 'Mesh (3D)') : null);
    const Uy = $derived.by(() => {
       if (!ux || !uz) return null;
       if (!ismatrix(yValues)) {
          console.error('Mesh: parameter "yValues" must be a matrix with height values of mesh points.');
          return null;
       }
+      if (yValues.nrows !== ux.length || yValues.ncols !== uz.length) {
+         console.error('Mesh: dimensions of "yValues" must match the lengths of "xValues" and "zValues".');
+         return null;
+      }
       return yValues;
    });
 
 
+   const colors = $derived.by(() => {
+      const isValid =
+         Array.isArray(colmap) &&
+         colmap.length > 0 &&
+         colmap.every(color =>
+            typeof color === 'string' && color.length > 0
+         );
+
+      if (!isValid) {
+         console.error(
+            'Mesh: parameter "colmap" must be a non-empty array of color strings.'
+         );
+         return null;
+      }
+
+      return colmap;
+   });
+
+
    // compute coordinates of mesh elements
    const mesh = $derived.by(() => {
 
-      if (!Uy) return null;
+      if (!Uy || !colors) return null;
 
-      const nbins = colmap.length;
+      const nbins = colors.length;
       const nx = Uy.nrows;
       const nz = Uy.ncols;
+      const nsegmentsX = (nx - 1) * nz;
+      const nsegmentsZ = nx * (nz - 1);
 
       const nr = range(Uy.v);
       const dnr = (nr[1] - nr[0]) / 100;
@@ -71,26 +96,36 @@
       const right = nr[1] + dnr;
       const span = right - left;
 
+      function getColorIndex(value) {
+         if (!(span > 0)) return Math.floor(nbins / 2);
+
+         const index = Math.round(
+            (value - left) / span * (nbins - 1)
+         );
+
+         return Math.max(0, Math.min(nbins - 1, index));
+      }
+
       // compute coordinates for mesh segments lines
-      const x1s = Vector.zeros((nx - 1) * nz);
-      const z1s = Vector.zeros((nx - 1) * nz);
-      const y1s = Vector.zeros((nx - 1) * nz);
+      const x1s = Vector.zeros(nsegmentsX);
+      const z1s = Vector.zeros(nsegmentsX);
+      const y1s = Vector.zeros(nsegmentsX);
 
-      const x2s = Vector.zeros((nx - 1) * nz);
-      const z2s = Vector.zeros((nx - 1) * nz);
-      const y2s = Vector.zeros((nx - 1) * nz);
+      const x2s = Vector.zeros(nsegmentsZ);
+      const z2s = Vector.zeros(nsegmentsZ);
+      const y2s = Vector.zeros(nsegmentsZ);
 
-      const color1 = Vector.zeros((nx - 1) * nz);
+      const color1 = Vector.zeros(nsegmentsX);
 
-      const x1e = Vector.zeros((nx - 1) * nz);
-      const z1e = Vector.zeros((nx - 1) * nz);
-      const y1e = Vector.zeros((nx - 1) * nz);
+      const x1e = Vector.zeros(nsegmentsX);
+      const z1e = Vector.zeros(nsegmentsX);
+      const y1e = Vector.zeros(nsegmentsX);
 
-      const x2e = Vector.zeros((nx - 1) * nz);
-      const z2e = Vector.zeros((nx - 1) * nz);
-      const y2e = Vector.zeros((nx - 1) * nz);
+      const x2e = Vector.zeros(nsegmentsZ);
+      const z2e = Vector.zeros(nsegmentsZ);
+      const y2e = Vector.zeros(nsegmentsZ);
 
-      const color2 = Vector.zeros((nx - 1) * nz);
+      const color2 = Vector.zeros(nsegmentsZ);
 
       let n1 = 0, n2 = 0;
       for (let z = 0; z < nz; z++) {
@@ -108,7 +143,8 @@
                z1e.v[n1] = uz.v[z];
                y1e.v[n1] = Uy.v[z * nx + x + 1];
 
-               const colInd = Math.round(((Uy.v[z * nx + x] + Uy.v[z * nx + x + 1]) / 2 - left) / span * (nbins - 1));
+               const meanHeight = (Uy.v[z * nx + x] + Uy.v[z * nx + x + 1]) / 2;
+               const colInd = getColorIndex(meanHeight);
                color1.v[n1] = colInd;
                n1 = n1 + 1;
             }
@@ -125,7 +161,8 @@
                z2e.v[n2] = uz.v[z + 1];
                y2e.v[n2] = Uy.v[(z + 1) * nx + x];
 
-               const colInd = Math.round(((Uy.v[z * nx + x] + Uy.v[(z + 1) * nx + x]) / 2 - left) / span * (nbins - 1));
+               const meanHeight = (Uy.v[z * nx + x] + Uy.v[(z + 1) * nx + x]) / 2;
+               const colInd = getColorIndex(meanHeight);
                color2.v[n2] = colInd;
                n2 = n2 + 1;
             }
@@ -153,11 +190,10 @@
 <g class="series series_mesh" style={lineStyleStr} data-title={title}>
 {#if s1s && s1e && s2s && s2e }
    {#each s1s.x as v, i}
-   <line x1={s1s.x[i]} x2={s1e.x[i]} y1={s1s.y[i]} y2={s1e.y[i]} style={`stroke:${colmap[mesh.color1.v[i]]};`} />
+   <line x1={s1s.x[i]} x2={s1e.x[i]} y1={s1s.y[i]} y2={s1e.y[i]} style={`stroke:${colors[mesh.color1.v[i]]};`} />
    {/each}
    {#each s2s.x as v, i}
-   <line x1={s2s.x[i]} x2={s2e.x[i]} y1={s2s.y[i]} y2={s2e.y[i]} style={`stroke:${colmap[mesh.color2.v[i]]};`} />
+   <line x1={s2s.x[i]} x2={s2e.x[i]} y1={s2s.y[i]} y2={s2e.y[i]} style={`stroke:${colors[mesh.color2.v[i]]};`} />
    {/each}
 {/if}
 </g>
-

package/src/3d/XAxis.svelte

@@ -22,7 +22,7 @@
    ```
 -->
 <script>
-   import { getContext } from 'svelte';
+   import { getContext, onDestroy } from 'svelte';
    import { Colors } from '../constants';
 
    let {
@@ -41,6 +41,9 @@
    $effect(() => {
       axes.setXAxis({show: true, ticks, tickLabels, showGrid, label, lineColor, gridColor, textColor});
    });
-</script>
 
+   onDestroy(() => {
+      axes.setXAxis({show: false});
+   });
+</script>
 

package/src/3d/YAxis.svelte

@@ -22,7 +22,7 @@
    ```
 -->
 <script>
-   import { getContext } from 'svelte';
+   import { getContext, onDestroy } from 'svelte';
    import { Colors } from '../constants';
 
    let {
@@ -41,6 +41,9 @@
    $effect(() => {
       axes.setYAxis({show: true, ticks, tickLabels, showGrid, label, lineColor, gridColor, textColor});
    });
-</script>
 
+   onDestroy(() => {
+      axes.setYAxis({show: false});
+   });
+</script>
 

package/src/3d/ZAxis.svelte

@@ -22,7 +22,7 @@
    ```
 -->
 <script>
-   import { getContext } from 'svelte';
+   import { getContext, onDestroy } from 'svelte';
    import { Colors } from '../constants';
 
    let {
@@ -41,6 +41,9 @@
    $effect(() => {
       axes.setZAxis({show: true, ticks, tickLabels, showGrid, label, lineColor, gridColor, textColor});
    });
-</script>
 
+   onDestroy(() => {
+      axes.setZAxis({show: false});
+   });
+</script>
 

package/src/ExportDialog.svelte

@@ -25,9 +25,13 @@
    const aspectRatio = svgWidth / svgHeight;
 
    // editable state — height always derived from width to preserve aspect ratio
+   const resOptions = [100, 150, 300, 600];
+   const parsedInitialRes = Number(initialRes);
+   const defaultRes = resOptions.includes(parsedInitialRes) ? parsedInitialRes : 300;
+
    let width = $state(initialWidth);
    const height = $derived(Math.max(4, Math.min(20, Math.round(width / aspectRatio * 10) / 10)));
-   let res = $state(initialRes);
+   let res = $state(defaultRes);
    let name = $state(fileName);
    const nameValid = $derived(name.trim().length > 0);
 
@@ -73,7 +77,6 @@
       width = parseFloat(e.target.value);
    }
 
-   const resOptions = [100, 150, 300, 600];
    let saving = $state(false);
 
    function handleSave() {
@@ -168,8 +171,7 @@
                <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} />
+                        <input type="radio" name="export-res" value={opt} bind:group={res} />
                         {opt}
                      </label>
                   {/each}
@@ -179,8 +181,8 @@
       </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>
+         <button type="button" class="export-dialog-cancel" onclick={onclose} disabled={saving}>Cancel</button>
+         <button type="button" class="export-dialog-save" onclick={handleSave} disabled={!nameValid}>Save</button>
       </div>
    </div>
 </div>

package/src/methods.js

@@ -1,6 +1,6 @@
 import { cbind, vector, isvector, Vector, matrix } from 'mdatools/arrays';
 import { min, max, diff } from 'mdatools/stat';
-import { TICK_NUM, XTICK_NUM, YTICK_NUM, TICK_SIZE, COLMAP_WIDTH_RATIO, COLMAP_EL_HEIGHTS_PX, COLMAP_TOP_MARGIN } from './constants';
+import { TICK_NUM, XTICK_NUM, YTICK_NUM, TICK_SIZE, COLMAP_WIDTH_RATIO, COLMAP_EL_HEIGHTS_PX, COLMAP_TOP_MARGIN } from './constants.js';
 
 
 /**
@@ -486,13 +486,20 @@ function createPngDataTable() {
 }
 
 
+let pngDataTable = null;
+
+
 /**
  * Calculate CRC for PNG image
  * @param buf image data
  */
 function calcCrc(buf) {
    let c = -1;
-   let pngDataTable = createPngDataTable();
+
+   if (!pngDataTable) {
+      pngDataTable = createPngDataTable();
+   }
+
    for (let n = 0; n < buf.length; n++) {
       c = pngDataTable[(c ^ buf[n]) & 0xFF] ^ (c >>> 8);
    }
@@ -645,11 +652,10 @@ export function downloadPNG (svg, fileName, width, height, res, onSerialize) {
       canvas.width =  svgWidth * (specialScale < 1 ? specialScale : scaleFactor);
       canvas.height = svgHeight * (specialScale < 1 ? specialScale : scaleFactor);
 
-      // 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);
+      // clone the SVG and set export dimensions without changing the live plot
+      const exportSvg = svg.cloneNode(true);
+      exportSvg.setAttribute('width', svgWidth * scaleFactor);
+      exportSvg.setAttribute('height', svgHeight * scaleFactor);
 
       // draw a white background
       context.fillStyle = 'white';
@@ -657,38 +663,43 @@ export function downloadPNG (svg, fileName, width, height, res, onSerialize) {
       context.scale(scaleFactor, scaleFactor)
 
       // draw the SVG onto the canvas
-      const svgXml = new XMLSerializer().serializeToString(svg);
+      const svgXml = new XMLSerializer().serializeToString(exportSvg);
       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 () {
+         try {
 
-         // downscale image if it must be smaller than the current SVG element
-         if (specialScale < 1) {
-            img.width = img.width * specialScale;
-            img.height = img.height * specialScale;
-         }
+            // downscale image if it must be smaller than the current SVG element
+            if (specialScale < 1) {
+               img.width = img.width * specialScale;
+               img.height = img.height * specialScale;
+            }
 
-         context.drawImage(img, 0, 0, canvas.width, canvas.height);
+            context.drawImage(img, 0, 0, canvas.width, canvas.height);
+
+            // create a data URL for the canvas and adjust its DPI
+            const dataURL = canvas.toDataURL('image/png');
+            const dataURL2 = changeDPI(dataURL, res);
 
-         // create a data URL for the canvas and adjust its DPI
-         const dataURL = canvas.toDataURL('image/png');
-         const dataURL2 = changeDPI(dataURL, res);
+            // create a temporary link and trigger the download
+            const downloadLink = document.createElement('a');
+            downloadLink.href = dataURL2;
+            downloadLink.download = `${fileName}.png`;
+            downloadLink.click();
+         } finally {
+            URL.revokeObjectURL(url);
+         }
+      };
 
-         // create a temporary link and trigger the download
-         const downloadLink = document.createElement('a');
-         downloadLink.href = dataURL2;
-         downloadLink.download = `${fileName}.png`;
-         downloadLink.click();
+      img.onerror = function (error) {
+         URL.revokeObjectURL(url);
+         console.error('Failed to load the SVG for PNG export.', error);
       };
 
       // set the image source
@@ -718,26 +729,19 @@ 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}`);
+   // clone the SVG and set export dimensions without changing the live plot
+   const exportSvg = svg.cloneNode(true);
+   exportSvg.setAttribute('width', svgWidth + 'px');
+   exportSvg.setAttribute('height', svgHeight + 'px');
+   exportSvg.setAttribute('viewBox', `0 0 ${svgWidth} ${svgHeight}`);
 
-   const blob = new Blob([svg.outerHTML], { type: 'image/svg+xml' });
+   const blob = new Blob([exportSvg.outerHTML], { type: 'image/svg+xml' });
    const url = window.URL.createObjectURL(blob)
    const a = document.createElement('a')
    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');
+   setTimeout(() => window.URL.revokeObjectURL(url), 0);
 }
 
 /**
@@ -813,16 +817,11 @@ export async function createPngBlob(svg, width, height) {
    // scale the context
    context.scale(scaleFactor, scaleFactor)
 
-   // 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');
+   // clone and serialize the SVG with export dimensions without changing the live plot
+   const exportSvg = svg.cloneNode(true);
+   exportSvg.setAttribute('width', canvas.width);
+   exportSvg.setAttribute('height', canvas.height);
+   const svgData = new XMLSerializer().serializeToString(exportSvg);
 
    // create promise
    const promise = new Promise((resolve, reject) => {
@@ -852,6 +851,7 @@ export async function createPngBlob(svg, width, height) {
 
       // add error callback
       img.onerror = function (err) {
+         DOMURL.revokeObjectURL(url);
          reject(err);
       };
 
@@ -864,6 +864,66 @@ export async function createPngBlob(svg, width, height) {
 }
 
 
+let colmaps = null;
+
+
+function getColmaps() {
+   if (!colmaps) {
+      colmaps = [
+         ["#2679B2"],
+         ["#2679B2", "#D22C2F"],
+         ["#2679B2", "#92B42A", "#D22C2F"],
+         ["#2679B2", "#2E9658", "#F2B825", "#D22C2F"],
+         ["#2679B2", "#22988A", "#92B42A", "#F79426", "#D22C2F"],
+         ["#2679B2", "#1C9AA8", "#379531", "#EED524", "#FB7F28", "#D22C2F"],
+         ["#2679B2", "#1D94A9", "#2E9658", "#92B42A", "#F2B825", "#F47129", "#D22C2F"],
+         ["#2679B2", "#1E90AA", "#279775", "#519E2F", "#D3CB25", "#F5A326", "#EF672A", "#D22C2F"],
+         ["#2679B2", "#1F8DAB", "#22988A", "#33953F", "#92B42A", "#EFCA24", "#F79426", "#EB5F2A", "#D22C2F"],
+         ["#2679B2", "#208BAC", "#1E999A", "#2E9658", "#5FA32E", "#C5C626", "#F2B825", "#F98827", "#E85A2B", "#D22C2F"],
+         ["#2679B2", "#2089AD", "#1C9AA8", "#29976C", "#379531", "#92B42A", "#EED524", "#F4AA26", "#FB7F28", "#E6552B", "#D22C2F"],
+         ["#2679B2", "#2188AD", "#1C97A8", "#25987C", "#329546", "#68A62D", "#BCC327", "#F0C524", "#F69E26", "#F77728", "#E4512B", "#D22C2F"],
+         ["#2679B2", "#2186AD", "#1D94A9", "#22988A", "#2E9658", "#469A2F", "#92B42A", "#DECF25", "#F2B825", "#F79426", "#F47129", "#E34E2C", "#D22C2F"],
+         ["#2679B2", "#2285AE", "#1E92AA", "#209995", "#2A9767", "#34953A", "#6FA82D", "#B5C128", "#EFCE24", "#F3AD25", "#F98C27", "#F16B29", "#E14B2C", "#D22C2F"],
+         ["#2679B2", "#2284AE", "#1E90AA", "#1D999F", "#279775", "#31964A", "#519E2F", "#92B42A", "#D3CB25", "#F0C224", "#F5A326", "#FA8527", "#EF672A", "#E0492C", "#D22C2F"],
+         ["#2679B2", "#2283AE", "#1F8FAB", "#1C9AA8", "#249880", "#2E9658", "#379531", "#73AA2C", "#B0BF28", "#EDD424", "#F2B825", "#F69B26", "#FB7F28", "#ED632A", "#DF472C", "#D22C2F"]
+      ];
+   }
+
+   return colmaps;
+}
+
+
+function interpolateColor(start, end, amount) {
+   const channels = [1, 3, 5].map(offset => {
+      const from = parseInt(start.slice(offset, offset + 2), 16);
+      const to = parseInt(end.slice(offset, offset + 2), 16);
+
+      return Math.round(from + (to - from) * amount)
+         .toString(16)
+         .padStart(2, '0');
+   });
+
+   return `#${channels.join('')}`.toUpperCase();
+}
+
+
+function expandColmap(colors, length) {
+   const last = colors.length - 1;
+
+   return Array.from({length}, (_, index) => {
+      const position = index * last / (length - 1);
+      const start = Math.floor(position);
+      const end = Math.min(start + 1, last);
+
+      return interpolateColor(
+         colors[start],
+         colors[end],
+         position - start
+      );
+   });
+}
+
+
 /**
  * Returns an array with 'n' colors.
  *
@@ -874,27 +934,14 @@ export async function createPngBlob(svg, width, height) {
  *
  */
 export function getcolmap(n, alpha) {
-   if (n > 16) n = 16;
-   const colmap = [
-      ["#2679B2"],
-      ["#2679B2", "#D22C2F"],
-      ["#2679B2", "#92B42A", "#D22C2F"],
-      ["#2679B2", "#2E9658", "#F2B825", "#D22C2F"],
-      ["#2679B2", "#22988A", "#92B42A", "#F79426", "#D22C2F"],
-      ["#2679B2", "#1C9AA8", "#379531", "#EED524", "#FB7F28", "#D22C2F"],
-      ["#2679B2", "#1D94A9", "#2E9658", "#92B42A", "#F2B825", "#F47129", "#D22C2F"],
-      ["#2679B2", "#1E90AA", "#279775", "#519E2F", "#D3CB25", "#F5A326", "#EF672A", "#D22C2F"],
-      ["#2679B2", "#1F8DAB", "#22988A", "#33953F", "#92B42A", "#EFCA24", "#F79426", "#EB5F2A", "#D22C2F"],
-      ["#2679B2", "#208BAC", "#1E999A", "#2E9658", "#5FA32E", "#C5C626", "#F2B825", "#F98827", "#E85A2B", "#D22C2F"],
-      ["#2679B2", "#2089AD", "#1C9AA8", "#29976C", "#379531", "#92B42A", "#EED524", "#F4AA26", "#FB7F28", "#E6552B", "#D22C2F"],
-      ["#2679B2", "#2188AD", "#1C97A8", "#25987C", "#329546", "#68A62D", "#BCC327", "#F0C524", "#F69E26", "#F77728", "#E4512B", "#D22C2F"],
-      ["#2679B2", "#2186AD", "#1D94A9", "#22988A", "#2E9658", "#469A2F", "#92B42A", "#DECF25", "#F2B825", "#F79426", "#F47129", "#E34E2C", "#D22C2F"],
-      ["#2679B2", "#2285AE", "#1E92AA", "#209995", "#2A9767", "#34953A", "#6FA82D", "#B5C128", "#EFCE24", "#F3AD25", "#F98C27", "#F16B29", "#E14B2C", "#D22C2F"],
-      ["#2679B2", "#2284AE", "#1E90AA", "#1D999F", "#279775", "#31964A", "#519E2F", "#92B42A", "#D3CB25", "#F0C224", "#F5A326", "#FA8527", "#EF672A", "#E0492C", "#D22C2F"],
-      ["#2679B2", "#2283AE", "#1F8FAB", "#1C9AA8", "#249880", "#2E9658", "#379531", "#73AA2C", "#B0BF28", "#EDD424", "#F2B825", "#F69B26", "#FB7F28", "#ED632A", "#DF472C", "#D22C2F"]
-   ]
+   const palettes = getColmaps();
+   const colors = n <= 16
+      ? palettes[n - 1]?.slice()
+      : expandColmap(palettes[15], n);
+
+   if (!colors) return colors;
 
-   return alpha ? colmap[n - 1].map(v => v + alpha) : colmap[n - 1];
+   return alpha ? colors.map(v => v + alpha) : colors;
 }
 
 
@@ -1175,11 +1222,16 @@ export function handleClick(e, tagName, onclickCallback) {
  *
  * @return {number} size of element in pixels
  */
+let textMeasureContext = null;
+
 export function getTextWidth(text, font) {
-   const element = document.createElement('canvas');
-   const context = element.getContext('2d');
-   context.font = font;
-   return context.measureText(text.replace(/<(.|\n)*?>/g, '')).width;
+   if (!textMeasureContext) {
+      const canvas = document.createElement('canvas');
+      textMeasureContext = canvas.getContext('2d');
+   }
+
+   textMeasureContext.font = font;
+   return textMeasureContext.measureText(text.replace(/<(.|\n)*?>/g, '')).width;
 }
 
 
@@ -1523,4 +1575,4 @@ export function getZAxisCoords3D(zaxis, limX, limY, limZ, scale) {
    ];
 
    return {grid1, grid2, axisLine, tickCoords, titleCoords, tickLabels};
-}
+}