svelte-plots-basic 3.2.1 → 3.4.0

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';
 
 
 /**
@@ -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";
@@ -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);
    }
@@ -588,7 +595,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,9 +652,10 @@ 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
-      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';
@@ -655,31 +663,43 @@ export function downloadPNG (svg, fileName, width, height, res) {
       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);
 
+      // 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 < 0) {
-            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
@@ -708,16 +728,20 @@ export function downloadSVG(svg, fileName) {
 
    const svgHeight = svg.clientHeight;
    const svgWidth = svg.clientWidth;
-   svg.setAttribute('width', svgWidth + 'px');
-   svg.setAttribute('height', svgHeight + 'px');
-   svg.setAttribute('viewBox', `0 0 ${svgWidth} ${svgHeight}`);
 
-   const blob = new Blob([svg.outerHTML], { type: 'image/svg+xml' });
+   // 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([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()
+   setTimeout(() => window.URL.revokeObjectURL(url), 0);
 }
 
 /**
@@ -793,15 +817,16 @@ export async function createPngBlob(svg, width, height) {
    // scale the context
    context.scale(scaleFactor, scaleFactor)
 
-   // set corresponding attributes for SVG element
-   svg.setAttribute('width', canvas.width);
-   svg.setAttribute('height', canvas.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) => {
 
-      // 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);
@@ -826,6 +851,7 @@ export async function createPngBlob(svg, width, height) {
 
       // add error callback
       img.onerror = function (err) {
+         DOMURL.revokeObjectURL(url);
          reject(err);
       };
 
@@ -838,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.
  *
@@ -848,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;
 }
 
 
@@ -1035,10 +1108,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};
 }
@@ -1153,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;
 }
 
 
@@ -1248,8 +1322,6 @@ export function text2svg(text) {
    }
 
    let i = 0;
-   const dy = 0.5;
-   const fs = 0.8;
    let svgText = '';
    while (i < text.length) {
 
@@ -1445,7 +1517,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 +1541,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
@@ -1503,4 +1575,4 @@ export function getZAxisCoords3D(zaxis, limX, limY, limZ, scale) {
    ];
 
    return {grid1, grid2, axisLine, tickCoords, titleCoords, tickLabels};
-}
+}