svelte-plots-basic 3.4.0 → 4.0.0

package/src/methods.js

@@ -31,6 +31,29 @@ export function checkArray(arr, len) {
 }
 
 
+/**
+ * Validate a line type and fall back to a solid line when it is invalid.
+ * Numeric strings are accepted for compatibility with HTML-style component attributes.
+ *
+ * @param {number|string} lineType - line type (1 - solid, 2 - dashed, 3 - dotted, 4 - dashdot).
+ * @param {string} source - name of the component which called the method.
+ * @returns {number} normalized line type.
+ */
+export function normalizeLineType(lineType, source = 'Plot') {
+   const canConvert =
+      typeof lineType === 'number' ||
+      (typeof lineType === 'string' && lineType.trim() !== '');
+   const normalized = canConvert ? Number(lineType) : NaN;
+
+   if (!Number.isInteger(normalized) || normalized < 1 || normalized > 4) {
+      console.error(`${source}: parameter "lineType" must be a whole number from 1 to 4.`);
+      return 1;
+   }
+
+   return normalized;
+}
+
+
 /**
  * Generic function to transform x or y-values from plot coordinates to screen (SVG) coordinates.
  *
@@ -94,7 +117,8 @@ export function invTransformObjects(v, t) {
  */
 export function getTickFactorLabel(tf) {
    if (tf === 0) return '';
-   return `<tspan>&times;10</tspan><tspan font-size="0.75em" dy="-0.5em">${(tf).toString()}</tspan>`;
+   return '<tspan dominant-baseline="inherit">&times;10</tspan>' +
+      `<tspan font-size="0.75em" dominant-baseline="inherit" baseline-shift="37.5%">${tf.toString()}</tspan>`;
 }
 
 
@@ -167,7 +191,7 @@ export function getTickLabels(ticks) {
 
 
 /**
- * Check coordinates and convert them to vector if necessary.
+ * Check coordinates, ensure all values are finite, and convert them to vector if necessary.
  *
  * @param {Array|Vector} x - vector or array with coordinates.
  * @param {string} source - name of component which called the method (needed for error message).
@@ -196,6 +220,13 @@ export function checkCoords(x, source, len) {
       return null;
    }
 
+   for (let i = 0; i < x.length; i++) {
+      if (!Number.isFinite(x.v[i])) {
+         console.error(source + ': coordinates must contain only finite numeric values.');
+         return null;
+      }
+   }
+
    return x;
 }
 
@@ -304,7 +335,7 @@ export function validateTicks(ticks, lim) {
  * @param {Array} ticks - vector with ticks if alredy available (if not, new will be computed).
  * @param {Array} lim - vector with axis limits tickets must be computed for.
  * @param {number} maxTickNum - maximum number of ticks to compute.
- * @param {boolean} round - round or not the fractions when computing nice numbers for the ticks.
+ * @param {boolean} round - round or not the fractions when computing nice numbers for the ticks, default: false.
  * @param {boolean} whole - should the ticks be a whole number.
  * @param {Number} deltaFactor - percent of range to use as internal margins
  *
@@ -314,7 +345,7 @@ export function validateTicks(ticks, lim) {
 export function getAxisTicks(ticks, limIn, maxTickNum, round, whole, deltaFactor) {
 
    if (round === undefined || round === null) {
-      round = true;
+      round = false;
    }
 
    if (whole === undefined || whole === null) {
@@ -325,19 +356,37 @@ export function getAxisTicks(ticks, limIn, maxTickNum, round, whole, deltaFactor
       deltaFactor = 0.0001;
    }
 
-   // correct limits internally if they are reverse
-   const lim = limIn[0] < limIn[1] ? limIn : [limIn[1], limIn[0]];
-
    // if ticks are already provided do not recompute them
    // the validation is done in corresponding component, so no need to do it again
    if (ticks) return ticks;
 
    // check if limits are ok
-   if (typeof(lim) !== "object" || lim[0] === undefined || lim[1] === undefined) {
+   if (!limIn || typeof(limIn) !== "object" || limIn[0] === undefined || limIn[1] === undefined) {
       console.error('getAxisTicks: provided axis limits are not valid.');
       return undefined;
    }
 
+   const limValues = [Number(limIn[0]), Number(limIn[1])];
+   if (!limValues.every(Number.isFinite) || limValues[0] === limValues[1]) {
+      console.error('getAxisTicks: provided axis limits are not valid.');
+      return undefined;
+   }
+
+   // correct limits internally if they are reverse
+   const lim = limValues[0] < limValues[1] ? limValues : [limValues[1], limValues[0]];
+
+   maxTickNum = Number(maxTickNum);
+   if (!Number.isInteger(maxTickNum) || maxTickNum < 1) {
+      console.error('getAxisTicks: parameter "maxTickNum" must be a finite positive whole number.');
+      return undefined;
+   }
+
+   deltaFactor = Number(deltaFactor);
+   if (!Number.isFinite(deltaFactor) || deltaFactor < 0 || deltaFactor >= 0.5) {
+      console.error('getAxisTicks: parameter "deltaFactor" must be a finite number from 0 up to, but not including, 0.5.');
+      return undefined;
+   }
+
    // get range as a nice number and compute min, max and steps for the tick sequence
    const delta = Math.abs((lim[1] - lim[0])) * deltaFactor;
    const localRange = lim[1] - lim[0] - 2 * delta;
@@ -345,7 +394,7 @@ export function getAxisTicks(ticks, limIn, maxTickNum, round, whole, deltaFactor
    const fraction =  1 / Math.pow(10, exponent - 1);
    const range = Math.round(localRange * fraction) / fraction;
 
-   let tickSpacing = niceNum(range / maxTickNum, false);
+   let tickSpacing = niceNum(range / maxTickNum, round);
    if (whole) {
       if (Math.abs(lim[1] - lim[0]) <= 1) {
          console.error('getAxisTicks: parameter "whole" will be ignored as axis limits are too narrow to fit whole ticks.');
@@ -593,26 +642,31 @@ function changeDPI(base64Image, dpi) {
  * @param {number} width - desired image width in cm
  * @param {number} height - desired image height in cm
  * @param {number} res - resolution (pixels per inch)
+ * @param {Function} [onSerialize] - callback invoked after serialization, or if export preparation fails
  *
  */
 export function downloadPNG (svg, fileName, width, height, res, onSerialize) {
 
-   if (!width) width = 10;
-   if (!height) height = 10;
-   if (!res) res = 300;
+   if (width === undefined || width === null || width === '') width = 10;
+   if (height === undefined || height === null || height === '') height = 10;
+   if (res === undefined || res === null || res === '') res = 300;
 
-   if (width < 1 || width > 30) {
-      console.error('Parameter "width" must be between 1 and 30 (cm).');
+   width = Number(width);
+   height = Number(height);
+   res = Number(res);
+
+   if (!Number.isFinite(width) || width < 1 || width > 30) {
+      console.error('Parameter "width" must be a finite number between 1 and 30 (cm).');
       return null;
    }
 
-   if (height < 1 || height > 30) {
-      console.error('Parameter "height" must be between 1 and 30 (cm).');
+   if (!Number.isFinite(height) || height < 1 || height > 30) {
+      console.error('Parameter "height" must be a finite number between 1 and 30 (cm).');
       return null;
    }
 
-   if (res < 50 || res > 1200) {
-      console.error('Parameter "res" must be between 50 and 1200 (ppi).');
+   if (!Number.isFinite(res) || res < 50 || res > 1200) {
+      console.error('Parameter "res" must be a finite number between 50 and 1200 (ppi).');
       return null;
    }
 
@@ -621,7 +675,7 @@ export function downloadPNG (svg, fileName, width, height, res, onSerialize) {
       return null;
    }
 
-   if (!fileName || fileName.trim() === '') {
+   if (typeof fileName !== 'string' || fileName.trim() === '') {
       fileName = 'plot';
    }
 
@@ -631,79 +685,105 @@ export function downloadPNG (svg, fileName, width, height, res, onSerialize) {
    const pxHeight = height / 2.54 * res;
 
    setTimeout(() => {
+      let url = null;
+      let callbackInvoked = false;
 
-      // compute canvas size based on SVG size and desired PNG WIDTH in pixels
-      const svgHeight = svg.clientHeight;
-      const svgWidth = svg.clientWidth;
-      let scaleFactor = Math.max(pxWidth / svgWidth, pxHeight / svgHeight);
-
-      // this is needed if SVG image is larger than the future PNG image
-      let specialScale = 1;
-      if (scaleFactor < 1) {
-         specialScale = scaleFactor;
-         scaleFactor = 1;
+      function notifyCaller() {
+         if (callbackInvoked) return;
+         callbackInvoked = true;
+         if (typeof onSerialize === 'function') onSerialize();
       }
 
-      // create a new canvas element
-      const canvas = document.createElement('canvas');
-      const context = canvas.getContext('2d');
-
-      // set the canvas size to match the SVG element
-      canvas.width =  svgWidth * (specialScale < 1 ? specialScale : scaleFactor);
-      canvas.height = svgHeight * (specialScale < 1 ? specialScale : 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);
+      try {
+         // compute canvas size based on SVG size and desired PNG WIDTH in pixels
+         const svgHeight = svg.clientHeight;
+         const svgWidth = svg.clientWidth;
 
-      // draw a white background
-      context.fillStyle = 'white';
-      context.fillRect(0, 0, canvas.width, canvas.height);
-      context.scale(scaleFactor, scaleFactor)
+         if (!Number.isFinite(svgWidth) || svgWidth <= 0 ||
+             !Number.isFinite(svgHeight) || svgHeight <= 0) {
+            throw new Error('The SVG must have finite, positive dimensions.');
+         }
 
-      // draw the SVG onto the canvas
-      const svgXml = new XMLSerializer().serializeToString(exportSvg);
-      const blob = new Blob([svgXml], { type: 'image/svg+xml;charset=utf-8' });
-      const url = URL.createObjectURL(blob);
+         let scaleFactor = Math.max(pxWidth / svgWidth, pxHeight / svgHeight);
 
-      // notify caller that serialization is done (used by ExportDialog to restore container)
-      if (onSerialize) onSerialize();
+         // this is needed if SVG image is larger than the future PNG image
+         let specialScale = 1;
+         if (scaleFactor < 1) {
+            specialScale = scaleFactor;
+            scaleFactor = 1;
+         }
 
-      const img = new Image();
+         // create a new canvas element
+         const canvas = document.createElement('canvas');
+         const context = canvas.getContext('2d');
 
-      img.onload = function () {
-         try {
+         if (!context) {
+            throw new Error('A 2D canvas context is not available.');
+         }
 
-            // 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;
+         // set the canvas size to match the SVG element
+         canvas.width =  svgWidth * (specialScale < 1 ? specialScale : scaleFactor);
+         canvas.height = svgHeight * (specialScale < 1 ? specialScale : 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';
+         context.fillRect(0, 0, canvas.width, canvas.height);
+         context.scale(scaleFactor, scaleFactor)
+
+         // draw the SVG onto the canvas
+         const svgXml = new XMLSerializer().serializeToString(exportSvg);
+         const blob = new Blob([svgXml], { type: 'image/svg+xml;charset=utf-8' });
+         url = URL.createObjectURL(blob);
+
+         // notify caller that serialization is done (used by ExportDialog to restore container)
+         notifyCaller();
+
+         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;
+               }
+
+               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 temporary link and trigger the download
+               const downloadLink = document.createElement('a');
+               downloadLink.href = dataURL2;
+               downloadLink.download = `${fileName}.png`;
+               downloadLink.click();
+            } finally {
+               URL.revokeObjectURL(url);
+               url = null;
             }
+         };
 
-            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 temporary link and trigger the download
-            const downloadLink = document.createElement('a');
-            downloadLink.href = dataURL2;
-            downloadLink.download = `${fileName}.png`;
-            downloadLink.click();
-         } finally {
+         img.onerror = function (error) {
             URL.revokeObjectURL(url);
-         }
-      };
-
-      img.onerror = function (error) {
-         URL.revokeObjectURL(url);
-         console.error('Failed to load the SVG for PNG export.', error);
-      };
-
-      // set the image source
-      img.src = url;
+            url = null;
+            console.error('Failed to load the SVG for PNG export.', error);
+         };
+
+         // set the image source
+         img.src = url;
+      } catch (error) {
+         if (url !== null) URL.revokeObjectURL(url);
+         notifyCaller();
+         console.error('Failed to prepare the SVG for PNG export.', error);
+      }
    }, 20);
 }
 
@@ -756,36 +836,43 @@ export function copyToClipboard(btn, svg, width, height) {
    // save button conent
    const content = btn.textContent;
 
-   navigator.clipboard.write([
-      new ClipboardItem({ 'image/png': createPngBlob(svg, width, height) })
-   ])
-   .then(
-      () => {
-         // add class "copied" for visual confirmation
-         btn.classList.add('copied');
-         btn.textContent = '✓ done';
-
-         // Remove the class after 0.5 seconds and revert the text
-         setTimeout(() => {
-            btn.classList.remove('copied');
-            btn.textContent = content;
-         }, 500);
-      },
-      (e) => {
-         console.error(e)
-
-         // add class "error" for visual confirmation
-         btn.classList.add('error');
-         btn.textContent = 'x copy';
-
-         // Remove the class after 0.5 seconds and revert the text
-         setTimeout(() => {
-            btn.classList.remove('error');
-            btn.textContent = content;
-         }, 500);
-      }
-   )
-   .catch((error) => console.error(error));
+   function showStatus(className, text) {
+      btn.classList.add(className);
+      btn.textContent = text;
+
+      // Remove the class after 0.5 seconds and revert the text
+      setTimeout(() => {
+         btn.classList.remove(className);
+         btn.textContent = content;
+      }, 500);
+   }
+
+   function showError(error) {
+      console.error(error);
+      showStatus('error', 'x copy');
+   }
+
+   if (typeof navigator === 'undefined' ||
+       !navigator.clipboard ||
+       typeof navigator.clipboard.write !== 'function' ||
+       typeof ClipboardItem === 'undefined') {
+      showError(new Error('Copying images to the clipboard is not supported in this environment.'));
+      return null;
+   }
+
+   try {
+      navigator.clipboard.write([
+         new ClipboardItem({ 'image/png': createPngBlob(svg, width, height) })
+      ])
+      .then(
+         () => showStatus('copied', '✓ done'),
+         showError
+      )
+      .catch(showError);
+   } catch (error) {
+      showError(error);
+      return null;
+   }
 
 }
 
@@ -964,7 +1051,7 @@ export function getXAxisParams(limX, limY, scales, tY, axis) {
    let tickFactor = 0;
 
    // compute x-coordinates of the ticks or take the ones manually specified by user
-   const ticksX = getAxisTicks(ticks, limX, XTICK_NUM[scales.x], true, axis.whole);
+   const ticksX = getAxisTicks(ticks, limX, XTICK_NUM[scales.x], false, axis.whole);
    const tickNum = ticksX.length;
 
    // compute tick y-coordinates (up and bottom)
@@ -1048,7 +1135,7 @@ export function getYAxisParams(limX, limY, scales, tX, axis) {
    let tickFactor = 0;
 
    // compute x-coordinates of the ticks or take the ones manually specified by user
-   const ticksY = getAxisTicks(axis.ticks, limY, YTICK_NUM[scales.y], true, axis.whole);
+   const ticksY = getAxisTicks(axis.ticks, limY, YTICK_NUM[scales.y], false, axis.whole);
    const tickNum = ticksY.length;
 
    // compute tick y-coordinates (up and bottom)
@@ -1240,12 +1327,11 @@ export function getTextWidth(text, font) {
  *
  * @param {Array} items - array of legend items and their properties.
  * @param {number} fontSize - font size of a legend element in pixels.
- * @param {string} position - position of the legend.
+ * @param {string} orientation - arrangement of legend items.
  *
- * @return {Array} array with height and width of graphical part of legend item, padding size,
- * height and width of text labels (all in pixels).
+ * @return {Object} coordinates and sizes of legend items (all in pixels).
  */
-function getLegendSize(items, fontSize)  {
+function getLegendSize(items, fontSize, orientation = 'vertical')  {
 
    // TODO: implement dynamic font family
    const fontName = 'Arial';
@@ -1255,25 +1341,49 @@ function getLegendSize(items, fontSize)  {
    const elw = fontSize * 1.5;  // width of legend element without label and padding
 
    // compute size of text label elements
-   // TODO: implement one row legend if position is "top" or "bottom"
+   const elx = Array(items.length);
    const elh = Array(items.length);
    const ely = Array(items.length);
-   let y = 0;
+   const eliw = Array(items.length);
    let lgh = 0;
+   let lgw = 0;
+
+   if (orientation === 'horizontal') {
+      for (let i = 0; i < items.length; i++) {
+         const labelWidth = getTextWidth('  ' + items[i].label + '  ', fontSize + 'px ' + fontName);
+         const itemWidth = elw + 2 * elp + labelWidth;
+         const itemHeight = fontSize * items[i].labelHeight + 2 * elp;
+
+         elx[i] = lgw;
+         ely[i] = 0;
+         eliw[i] = itemWidth;
+         elh[i] = itemHeight;
+         lgw = lgw + itemWidth;
+         lgh = itemHeight > lgh ? itemHeight : lgh;
+      }
+
+      // Use one common row height so all item centers are aligned.
+      elh.fill(lgh);
+      return {elx, ely, eliw, elh, elw, elp, lgh, lgw};
+   }
+
+   let y = 0;
    let lbw = 0;
 
    for (let i = 0; i < items.length; i++) {
       const w = getTextWidth('  ' + items[i].label + '  ', fontSize + 'px ' + fontName);
       lbw = w > lbw ? w : lbw;
       const h = fontSize * items[i].labelHeight + 2 * elp;
+      elx[i] = 0;
       elh[i] = h;
       ely[i] = y;
       y = y + h;
       lgh = lgh + h;
    }
 
-   const lgw = (elw + 2 * elp + lbw);
-   return [ely, elh, elw, elp, lgh, lgw];
+   lgw = (elw + 2 * elp + lbw);
+   eliw.fill(lgw);
+   return {elx, ely, eliw, elh, elw, elp, lgh, lgw};
 }
 
 
@@ -1288,7 +1398,11 @@ function getLegendSize(items, fontSize)  {
 export function getGroupLegendCoords(params, cpx, cpy, fontSize, ts) {
 
    // compute size of legend elements
-   const [ely, elh, elw, elp, lgh, lgw] = getLegendSize(params.items, fontSize * params.fontSize);
+   const {elx, ely, eliw, elh, elw, elp, lgh, lgw} = getLegendSize(
+      params.items,
+      fontSize * params.fontSize,
+      params.orientation
+   );
 
    // compute coordinates of top left corner of the legend box
    const lgl = params.position.includes("left") ? cpx[0] + ts :
@@ -1300,7 +1414,7 @@ export function getGroupLegendCoords(params, cpx, cpy, fontSize, ts) {
          (cpy[1] + cpy[0] - lgh) * 0.5;
 
 
-   return {lgl, lgt, lgw, lgh, ely, elh, elw, elp};
+   return {lgl, lgt, lgw, lgh, elx, ely, eliw, elh, elw, elp};
 }
 
 
@@ -1314,11 +1428,11 @@ export function text2svg(text) {
    if (!text || text.length < 1) return text;
 
    function toSuper(txt) {
-      return '<tspan font-size="0.75em" dy="-0.5em">' + txt + '</tspan><tspan dy="0.4em"> </tspan>';
+      return '<tspan font-size="0.6em" dominant-baseline="inherit" baseline-shift="30%">' + txt + '</tspan>';
    }
 
    function toSub(txt) {
-      return '<tspan font-size="0.75em" dy="0.5em">' + txt + '</tspan><tspan dy="-0.4em"> </tspan>';
+      return '<tspan font-size="0.6em" dominant-baseline="inherit" baseline-shift="-50%">' + txt + '</tspan>';
    }
 
    let i = 0;
@@ -1403,7 +1517,7 @@ export function getXAxisCoords3D(xaxis, limX, limY, limZ, scale) {
    const dX = (limX[1] - limX[0]) / 100; // 1% of axis size
    const dY = (limY[1] - limY[0]) / 100; // 1% of axis size
    const dZ = (limZ[1] - limZ[0]) / 100; // 1% of axis size
-   const ticksX = getAxisTicks(xaxis.ticks, limX, TICK_NUM[scale], true);
+   const ticksX = getAxisTicks(xaxis.ticks, limX, TICK_NUM[scale], false);
    const tickNum = ticksX.length;
 
    const [ticksY, ticksY1, ticksY2, ticksY3] = getLatentTicks(limY, tickNum);
@@ -1466,7 +1580,7 @@ export function getYAxisCoords3D(yaxis, limX, limY, limZ, scale) {
    const dX = (limX[1] - limX[0]) / 100; // 1% of axis size
    const dY = (limY[1] - limY[0]) / 100; // 1% of axis size
    const dZ = (limZ[1] - limZ[0]) / 100; // 1% of axis size
-   const ticksY = getAxisTicks(yaxis.ticks, limY, TICK_NUM[scale], true);
+   const ticksY = getAxisTicks(yaxis.ticks, limY, TICK_NUM[scale], false);
    const tickNum = ticksY.length;
 
    const [ticksX, ticksX1, ticksX2, ticksX3] = getLatentTicks(limX, tickNum);
@@ -1529,7 +1643,7 @@ export function getZAxisCoords3D(zaxis, limX, limY, limZ, scale) {
    const dX = (limX[1] - limX[0]) / 100; // 1% of axis size
    const dY = (limY[1] - limY[0]) / 100; // 1% of axis size
    const dZ = (limZ[1] - limZ[0]) / 100; // 1% of axis size
-   const ticksZ = getAxisTicks(zaxis.ticks, limZ, TICK_NUM[scale], true);
+   const ticksZ = getAxisTicks(zaxis.ticks, limZ, TICK_NUM[scale], false);
    const tickNum = ticksZ.length;
 
    const [ticksY, ticksY1, ticksY2, ticksY3] = getLatentTicks(limY, tickNum);