svelte-plots-basic 2.2.3 → 2.3.0

package/src/Utils.js

@@ -240,4 +240,248 @@ export function getScale(width, height) {
    if (height < 600.2 || width < 600.2) return "medium";
    if (height < 850.2 || width < 850.2) return "large";
    return "xlarge";
-}
+}
+
+
+   /*************************************************************/
+   /* Functions needed to adjust DPI of resulting PNG image     */
+   /* taken from: https://github.com/shutterstock/changeDPI     */
+   /* and modified                                              */
+   /*************************************************************/
+
+   /**
+    * Create table for PNG CRC calculation
+    */
+   function createPngDataTable() {
+      const crcTable = new Int32Array(256);
+      for (let n = 0; n < 256; n++) {
+         let c = n;
+         for (let k = 0; k < 8; k++) {
+            c = (c & 1) ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
+         }
+         crcTable[n] = c;
+      }
+      return crcTable;
+   }
+
+   /**
+    * Calculate CRC for PNG image
+    * @param buf image data
+    */
+   function calcCrc(buf) {
+      let c = -1;
+      let pngDataTable = createPngDataTable();
+      for (let n = 0; n < buf.length; n++) {
+         c = pngDataTable[(c ^ buf[n]) & 0xFF] ^ (c >>> 8);
+      }
+      return c ^ -1;
+   }
+
+   /**
+    * Change DPI of PNG image
+    * @param dataArray image data
+    * @param dpi new DPI
+    */
+   function changeDpiOnArray(dataArray, dpi) {
+
+      const physChunk = new Uint8Array(13);
+      // chunk header pHYs
+      // 9 bytes of data
+      // 4 bytes of crc
+      // this multiplication is because the standard is dpi per meter.
+      dpi *= 39.3701;
+      physChunk[0] = 'p'.charCodeAt(0);
+      physChunk[1] = 'H'.charCodeAt(0);
+      physChunk[2] = 'Y'.charCodeAt(0);
+      physChunk[3] = 's'.charCodeAt(0);
+      physChunk[4] = dpi >>> 24; // dpiX byte 3
+      physChunk[5] = dpi >>> 16; // dpiX byte 2
+      physChunk[6] = dpi >>> 8;  // dpiX byte 1
+      physChunk[7] = dpi & 0xff; // dpiX byte 0
+      physChunk[8] = physChunk[4];  // dpiY byte 3
+      physChunk[9] = physChunk[5];  // dpiY byte 2
+      physChunk[10] = physChunk[6]; // dpiY byte 1
+      physChunk[11] = physChunk[7]; // dpiY byte 0
+      physChunk[12] = 1; // dot per meter....
+
+      // compute and add CRC for physChunk
+      const crc = calcCrc(physChunk);
+      const crcChunk = new Uint8Array(4);
+      crcChunk[0] = crc >>> 24;
+      crcChunk[1] = crc >>> 16;
+      crcChunk[2] = crc >>> 8;
+      crcChunk[3] = crc & 0xff;
+
+      // chunk structur 4 bytes for length is 9
+      const chunkLength = new Uint8Array(4);
+      chunkLength[0] = 0;
+      chunkLength[1] = 0;
+      chunkLength[2] = 0;
+      chunkLength[3] = 9;
+
+      const finalHeader = new Uint8Array(54);
+      finalHeader.set(dataArray, 0);
+      finalHeader.set(chunkLength, 33);
+      finalHeader.set(physChunk, 37);
+      finalHeader.set(crcChunk, 50);
+      return finalHeader;
+   }
+
+   /**
+    * Change DPI of PNG image
+    * @param base64Image image data
+    * @param dpi new DPI
+    */
+   function changeDPI(base64Image, dpi) {
+
+      const dataSplitted = base64Image.split(',');
+      const format = dataSplitted[0];
+      const body = dataSplitted[1];
+
+      // here we assume there is pHYS chunk in the header
+      const headerLength = 33 / 3 * 4;
+
+      const stringHeader = body.substring(0, headerLength);
+      const restOfData = body.substring(headerLength);
+      const headerBytes = atob(stringHeader);
+      const dataArray = new Uint8Array(headerBytes.length);
+      for (let i = 0; i < dataArray.length; i++) {
+         dataArray[i] = headerBytes.charCodeAt(i);
+      }
+      const finalArray = changeDpiOnArray(dataArray, dpi, 'image/png');
+      const base64Header = btoa(String.fromCharCode(...finalArray));
+      return [format, ',', base64Header, restOfData].join('');
+   }
+
+
+/**
+ * Downloads plot (or any other SVG image) as a PNG file.
+ *
+ * @param {SVGElement} svg - root SVG element of a plot
+ * @param {string} fileName - filename to save with (without extension)
+ * @param {number} width - desired image width in cm
+ * @param {number} height - desired image height in cm
+ * @param {number} res - resolution (pixels per inch)
+ *
+ */
+export function downloadPNG (svg, fileName, width, height, res) {
+
+   if (!width) {
+      width = 10;
+   }
+
+   if (!height) {
+      height = 10;
+   }
+
+   if (!res) {
+      res = 300;
+   }
+
+   if (width < 1 || width > 30) {
+      throw Error('Parameter "width" must be between 1 and 30 (cm).');
+   }
+
+   if (height < 1 || height > 30) {
+      throw Error('Parameter "height" must be between 1 and 30 (cm).');
+   }
+
+   if (res < 50 || res > 1200) {
+      throw Error('Parameter "res" must be between 50 and 1200 (ppi).');
+   }
+
+   if (!svg || !(svg instanceof SVGElement)) {
+      throw Error('Parameter "svg" is not an instance of SVGElement.');
+   }
+
+   if (!fileName || fileName.trim() === '') {
+      fileName = 'plot';
+   }
+
+   // recalculate width and height to pixels
+   width = width / 2.54 * res;
+   height = height / 2.54 * res;
+
+   setTimeout(() => {
+
+      // compute canvas size based on SVG size and desired PNG WIDTH in pixels
+      const svgHeight = svg.clientHeight;
+      const svgWidth = svg.clientWidth;
+      const scaleFactor = Math.max(width / svgWidth, height / svgHeight);
+
+      // 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 * scaleFactor;
+      canvas.height = svgHeight * scaleFactor;
+
+      console.log([svgHeight, svgWidth, height, width])
+      svg.setAttribute('width', canvas.width);
+      svg.setAttribute('height', canvas.height);
+
+      // draw a white background
+      context.fillStyle = 'white';
+      context.scale(scaleFactor, scaleFactor)
+      context.fillRect(0, 0, canvas.width, canvas.height);
+
+      // draw the SVG onto the canvas
+      const svgXml = new XMLSerializer().serializeToString(svg);
+      const blob = new Blob([svgXml], { type: 'image/svg+xml;charset=utf-8' });
+      const url = URL.createObjectURL(blob);
+
+      const img = new Image();
+
+      img.onload = function () {
+
+         // draw the image
+         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();
+      };
+
+      // set the image source
+      img.src = url;
+   }, 20);
+}
+
+
+/**
+ * Downloads plot (or any other SVG image) as an SVG file.
+ *
+ * @param {SVGElement} svg - root SVG element of a plot
+ * @param {string} fileName - filename to save with (without extension)
+ */
+export function downloadSVG(svg, fileName) {
+
+   if (!svg || !(svg instanceof SVGElement)) {
+      throw Error('Variable "svg" is not an instance of SVGElement.');
+   }
+
+   if (!fileName || fileName.trim() === "") {
+      fileName = "plot";
+   }
+
+   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' });
+   const url = window.URL.createObjectURL(blob)
+   const a = document.createElement('a')
+   a.setAttribute('href', url)
+   a.setAttribute('download', `${fileName}.svg`);
+   a.click()
+}
+

package/src/2d/ColorLegend.svelte

@@ -1,36 +0,0 @@
-<script>
-   /****************************************************
-   * ColorLegend                                       *
-   * --------------------                              *
-   * shows color legend on top part of the plot        *
-   *****************************************************/
-
-   import { getContext } from 'svelte';
-   import { Colors } from '../Colors';
-
-
-   /*****************************************/
-   /* Input parameters                      */
-   /*****************************************/
-
-	export let colormap;    // colormap returned by method getcolormap() from colors
-
-   /*****************************************/
-   /* Component code                        */
-   /*****************************************/
-
-   const axes = getContext('axes');
-   const xLim = axes.xLim;
-   const yLim = axes.yLim;
-   const tX = axes.tX;
-   const tY = axes.tY;
-   const isOk = axes.isOk;
-
-
-   // TODO: will be implemented as a sequence of rectangles and text labels beneath them
-
-   // compute coordinates of rectangles and their colors
-
-   // compute coordinates of text labels
-</script>
-