svelte-plots-basic 2.3.6 → 2.4.0

package/README.md

@@ -11,6 +11,10 @@ These websites and web-applications use `svelte-plots-basic` library:
 
 ## News
 
+### 2.4.0
+
+* added possibility to copy a plot to clipboard.
+
 
 ### 2.3.0
 

package/package.json

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

package/src/2d/Axes.svelte

@@ -8,7 +8,7 @@
 	import { setContext, createEventDispatcher, onMount, onDestroy } from 'svelte';
 	import { writable } from 'svelte/store';
    import { isvector, vector, Vector } from 'mdatools/arrays';
-   import { roundCoords, getScale, downloadSVG, downloadPNG } from '../Utils.js';
+   import { roundCoords, getScale, downloadSVG, downloadPNG, createPngBlob } from '../Utils.js';
 
 
    /*****************************************/
@@ -23,14 +23,16 @@
    export let margins = [1.0, 0.75, 0.5, 0.5];        // margins [bottom, left, top, right] )
 
 
-   /*****************************************/
-   /* Input parameters for downloading      */
-   /*****************************************/
-   export let downloadLinks = 'hover';                // how to show download links panel ('none', 'hover', 'fixed')
+   /***********************************************/
+   /* Input parameters for downloading and copy   */
+   /***********************************************/
+   export let downloadLinks = 'none';                // how to show download links panel ('none', 'hover', 'fixed')
    export let fileName = 'plot';                      // file name for download (without extension)
    export let pngWidth = 8;                           // width of PNG image in cm
    export let pngHeight = 8;                          // height of PNG image in cm
    export let pngRes = 300;                           // resolution of PNG image (pixels per inch)
+   export let clipboardWidth = 1200;                  // width of PNG image to copy to clipboard in pixels
+   export let clipboardHeight = 800;                  // height of PNG image to copy to clipboard in pixels
 
 
    /*****************************************/
@@ -129,7 +131,7 @@
    }
 
    /**
-    * Handler (router) for click events.
+    * Handler (router) for axes or series click events.
     *
     * @param {event} e - event object.
     *
@@ -155,12 +157,52 @@
       dispatch('axesclick');
    }
 
+
+   /**
+    * Handler (router) for click event on copy plot button.
+    *
+    * @description
+    * Copy plot to clipboard as PNG image.
+    *
+    */
+   async function handleClickCopy(e) {
+      navigator.clipboard.write([
+         new ClipboardItem({ 'image/png': createPngBlob(plotElement, clipboardWidth, clipboardHeight) })
+      ]).catch(function (error) { console.error(error); });
+
+      const content = e.target.textContent;
+      e.target.classList.add('copied');
+      e.target.textContent = '✓ done';
+
+      // Remove the class after 1 second and revert the text
+      setTimeout(() => {
+        e.target.classList.remove('copied');
+        e.target.textContent = content;
+      }, 500);
+   }
+
+
+   /**
+    * Handler (router) for click event to download SVG image.
+    *
+    * @description
+    * Copy plot to clipboard as SVG image.
+    *
+    */
    function handleClickSVG() {
-      downloadSVG(plotElement, fileName)
+      downloadSVG(plotElement, fileName);
    }
 
+
+   /**
+    * Handler (router) for click event to download PNG image.
+    *
+    * @description
+    * Copy plot to clipboard as PNG image.
+    *
+    */
    function handleClickPNG() {
-      downloadPNG(plotElement, fileName, pngWidth, pngHeight, pngRes)
+      downloadPNG(plotElement, fileName, pngWidth, pngHeight, pngRes);
    }
 
    /**
@@ -413,6 +455,7 @@
    <div class="download-links">
       <button on:click={handleClickSVG} on:keydown={handleClickSVG}>⇩ svg</button>
       <button on:click={handleClickPNG} on:keydown={handleClickPNG}>⇩ png</button>
+      <button on:click={handleClickCopy} on:keydown={handleClickCopy}>⧉ copy</button>
    </div>
    {/if}
 
@@ -432,6 +475,7 @@
    }
 
    .download-links {
+      box-sizing: border-box;
       bottom: right 0.5s ease;
       position: absolute;
       font-size: 0.8em;
@@ -442,8 +486,8 @@
       background: #fefefe;
       border-radius: 0.5em;
       transition: bottom 0.35s ease;
-      box-shadow: 0 0 1em #00000040;
-      margin: 0.5em;
+      box-shadow: 0 0 1em #00000060;
+      margin: 0.6em;
       box-sizing: border-box;
 
       display: flex;
@@ -452,6 +496,7 @@
    }
 
    .download-links > button{
+      box-sizing: border-box;
       color: #606060;
       border: none;
       box-shadow: none;
@@ -465,6 +510,7 @@
       color: #fafafa;
    }
 
+
    /* Plot container */
    .plot-container {
       font-family: Arial, Helvetica, sans-serif;

package/src/Utils.js

@@ -243,115 +243,115 @@ export function getScale(width, height) {
 }
 
 
-   /*************************************************************/
-   /* 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;
-   }
+/*************************************************************/
+/* Functions needed to adjust DPI of resulting PNG image     */
+/* taken from: https://github.com/shutterstock/changeDPI     */
+/* and modified                                              */
+/*************************************************************/
 
-   /**
-    * 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);
+/**
+ * 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;
       }
-      return c ^ -1;
+      crcTable[n] = c;
    }
+   return crcTable;
+}
 
-   /**
-    * 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;
+/**
+ * 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 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('');
+/**
+ * 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('');
+}
 
 
 /**
@@ -417,6 +417,7 @@ export function downloadPNG (svg, fileName, width, height, res) {
       canvas.width =  svgWidth * scaleFactor;
       canvas.height = svgHeight * scaleFactor;
 
+   // set corresponding attributes for SVG element
       svg.setAttribute('width', canvas.width);
       svg.setAttribute('height', canvas.height);
 
@@ -484,3 +485,74 @@ export function downloadSVG(svg, fileName) {
    a.click()
 }
 
+
+/**
+ * Returns plot BLOB to copy it to clipboard.
+ *
+ * @param {SVGElement} svg - root SVG element of a plot
+ * @param {number} width - desired image width in pixels
+ * @param {number} height - desired image height in pixels
+ *
+ */
+export async function createPngBlob(svg, width, height) {
+
+   // compute canvas size based on SVG size and scaling factor
+   // based on desired size in pixels
+   const svgHeight = svg.clientHeight;
+   const svgWidth = svg.clientWidth;
+   const scaleFactor = Math.max(width / svgWidth, height / svgHeight);
+
+   // create a new canvas element and 2D context for it
+   const canvas = document.createElement('canvas');
+   const context = canvas.getContext('2d');
+
+   // set the canvas size to match the size of SVG element
+   canvas.width =  svgWidth * scaleFactor;
+   canvas.height = svgHeight * scaleFactor;
+
+   // scale the context
+   context.scale(scaleFactor, scaleFactor)
+
+   // set corresponding attributes for SVG element
+   svg.setAttribute('width', canvas.width);
+   svg.setAttribute('height', canvas.height);
+
+   // create promise
+   const promise = new Promise((resolve, reject) => {
+
+      // serialzie SVG, create blob and URL for it
+      const svgData = new XMLSerializer().serializeToString(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);
+
+      // create image an image and add callback
+      const img = new Image();
+      img.onload = function () {
+
+         // draw the image
+         context.drawImage(img, 0, 0, canvas.width, canvas.height);
+         DOMURL.revokeObjectURL(url);
+
+         // convert canvas to blob
+         canvas.toBlob(function (blob) {
+            if (blob) {
+               resolve(blob);
+            } else {
+               reject(new Error('Failed to create blob'));
+            }
+         }, 'image/png');
+      };
+
+      // add error callback
+      img.onerror = function (err) {
+         reject(err);
+      };
+
+      // assign value to run the onload callback
+      img.src = url;
+   });
+
+   // resolve promise and return the result
+   return (await promise);
+}