svelte-plots-basic 2.5.7 → 3.0.0

package/src/3d/Axes.svelte

@@ -1,333 +1,324 @@
+<!--
+@component Parent component for any plot, all other components should be nested inside `<Axes></Axes>`.
+
+   Main properties:
+   - `limX` - array with limits for x-axis (in plot units), default: `[0, 1]`.
+   - `limY` - array with limits for y-axis (in plot units), default: `[0, 1]`.
+   - `limZ` - array with limits for y-axis (in plot units), default: `[0, 1]`.
+   - `theta` - angle (in degrees) for orientation of projection plane, default: `-10`.
+   - `phi` - angle (in degrees) for orientation of projection plane, default: `-10`.
+   - `zoom` - zooming factor, default: `0.5`.
+
+   Properties for downloading the plot as PNG or SVG file or copying it to clipboard:
+   - `downloadLinks` - how to show download links panel (`'none'` - default, `'hover'`, `'fixed'`).
+   - `fileName` - file name for download (without extension), default: `'plot'`.
+   - `pngWidth` - width of PNG image in cm, default `8`
+   - `pngHeight` - height of PNG image in cm, default `8`.
+   - `pngRes` - resolution of PNG image (pixels per inch), default `300`.
+   - `clipboardWidth` - width of plot image to copy to clipboard in pixels.
+   - `clipboardHeight` - height of plot image to copy to clipboard in pixels.
+
+   Example:
+   ```jsx
+   <script>
+      import {Axes} from 'svelte-plots-basic/3d';
+   </script>
+
+   <Axes limX={[-10, 10]} limY={[-10, 10]} limZ={[-10, 10]}>
+      //all other plotting components are here
+   </Axes>
+   ```
+-->
 <script>
-   /****************************************************
-   * Axes for 3D plots                                 *
-   * --------------------                              *
-   * root item for any plot                            *
-   *****************************************************/
-
-	import { setContext, onMount, onDestroy } from 'svelte';
-	import { writable } from 'svelte/store';
-   import { cbind, matrix, Matrix, Vector } from 'mdatools/arrays';
-   import { getScale, roundCoords } from '../Utils.js';
-
-
-   /*****************************************/
-   /* Input parameters                      */
-   /*****************************************/
-
-   export let limX;        // limits for x-axis (in plot units) [min, max]
-   export let limY;        // limits for y-axis (in plot units) [min, max]
-   export let limZ;        // limits for z-axis (in plot units) [min, max]
-   export let theta = -10;
-   export let phi = -10;
-   export let zoom = 0.5;
-
-
-   /*****************************************/
-   /* Constants                             */
-   /*****************************************/
-
-   // number of ticks along each axis
-   const TICK_NUM = {
-      "small": 5,
-      "medium": 8,
-      "large": 12,
-      "xlarge": 15
-   };
-
-   // margin between plot series elements and data labels
-   const LABELS_MARGIN = {
-      "small": 5,
-      "medium": 10,
-      "large": 15,
-      "xlarge": 20
-   };
-
-   // line styles for different scales and types
-   const LINE_STYLES = {
-      small:  ["0", "3,3", "1,1", "3,1"],
-      medium: ["0", "5,5", "2,2", "5,2"],
-      large:  ["0", "7,7", "3,3", "7,3"],
-      xlarge:  ["0", "9,9", "5,5", "9,5"],
+   import { matrix, Matrix } from 'mdatools/arrays';
+   import { setContext } from 'svelte';
+   import { PLOT_FONT_SIZE } from '../constants.js';
+   import { checkArray, 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],
+      limZ = [0, 1],
+      theta = -10,
+      phi = -10,
+      zoom = 0.5,
+      downloadLinks = 'hover',
+      fileName = 'plot',
+      pngWidth = 8,
+      pngHeight = 8,
+      pngRes = 300,
+      clipboardWidth = 1200,
+      clipboardHeight = 800,
+      children
+   } = $props();
+
+
+
+   /* Copy plot to clipboard as PNG image. */
+   async function handleClickCopy(e) {
+      copyToClipboard(e.target, plotElement, clipboardWidth, clipboardHeight);
    }
 
+   /* Download plot as SVG image when user clicks on corresponding button. */
+   function handleClickSVG() {
+      downloadSVG(plotElement, fileName);
+   }
+
+   /* Download plot as PNG image when user clicks on corresponding button. */
+   function handleClickPNG() {
+      downloadPNG(plotElement, fileName, pngWidth, pngHeight, pngRes);
+   }
+
+
    // translation matrix to move points to center of a unit cube
    const T1 = matrix([
-      1, 0, 0, 0,
-      0, 1, 0, 0,
-      0, 0, 1, 0,
-      0.5, 0.5, 0.5, 1
+      1.0, 0.0, 0.0, 0.0,
+      0.0, 1.0, 0.0, 0.0,
+      0.0, 0.0, 1.0, 0.0,
+      0.5, 0.5, 0.5, 1.0
    ], 4, 4);
 
    // inverse translation matrix for T1
    const T2 = matrix([
-      1, 0, 0, 0,
-      0, 1, 0, 0,
-      0, 0, 1, 0,
-      -0.5, -0.5, -0.5, 1
+       1.0,  0.0,  0.0, 0.0,
+       0.0,  1.0,  0.0, 0.0,
+       0.0,  0.0,  1.0, 0.0,
+      -0.5, -0.5, -0.5, 1.0
    ], 4, 4);
 
-   // constant to make clip path ID unique
-   const clipPathID = "plottingArea" + Math.round(Math.random() * 10000);
-
-
-   /*****************************************/
-   /* Variable parameters for internal use  */
-   /*****************************************/
-
-   // bindings to plot DOM elements
-   let plotElement;
-   let axesElement;
-   let width, height = 100;
-
-
-   /*****************************************/
-   /* Helper functions                      */
-   /*****************************************/
-
-   /**
-    * Transforms world coordinates to 2D scene pixels by applying the transformation matrix 'tM'.
-    *
-    * @param {Matrix} coords - matrix with coordinates [X, Y, Z]
-    * @param {Matrix} tM - transformation matrix
-    *
-    * @returns {Array} array with transformed coordinates as two vectors [x, y].
-    *
-    */
-   const transform = function(coords, tM) {
-//      const coords2D = cbind(coords, Vector.ones(coords.nrows)).dot(tM);
-//      const coords2D = tcrossprod(tM, cbind(coords, Vector.ones(coords.nrows))).t();
-      const coords2D = cbind(coords, Vector.ones(coords.nrows)).dot(tM);
-      return [coords2D.getcolref(1).map(v => roundCoords(v)), coords2D.getcolref(2).map(v => roundCoords(v))];
-   }
-
-
-   /*****************************************/
-   /* Storage to share with children        */
-   /*****************************************/
-
-   const tM = writable(Matrix.eye(4));    // transformation matrix
-   const scale = writable('medium');      // plot scale (small/medium/large)
-   const xLim = writable(limX);           // x-axis limits in 3D (before projection)
-   const yLim = writable(limY);           // y-axis limits in 3D (before projection)
-   const zLim = writable(limZ);           // z-axis limits in 3D (before projection)
-   const isOk = writable(false);          // indicator that axes works fine
-
 
-   /*****************************************/
-   /* Axes context                          */
-   /*****************************************/
-
-   let context = {
-
-      // methods
-      transform: transform,
-
-      // state proporties
-      scale: scale,
-      isOk: isOk,
-      xLim: xLim,
-      yLim: yLim,
-      zLim: zLim,
-      tM: tM,
-
-      // constants
-      LINE_STYLES: LINE_STYLES,
-      LABELS_MARGIN: LABELS_MARGIN,
-      TICK_NUM: TICK_NUM
-   }
 
-	setContext('axes', context);
+   // pointers to plot DOM element and its width and height
+   let plotElement = $state(0);
+   let width = $state(100);
+   let height = $state(100);
 
+   // scale factor and dependent font size
+   const scale = $derived(getScale(width, height));
+   const fontSize = $derived(PLOT_FONT_SIZE[scale]);
 
-   /*****************************************/
-   /* Reactive updates of the parameters    */
-   /*****************************************/
-
-   // update limits if necessary
-   $: xLim.update(v => limX);
-   $: yLim.update(v => limY);
-   $: zLim.update(v => limZ);
+   // 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] &&
+      width > 50 &&
+      height > 50
+   );
 
    // projection matrix (step 1)
-   $: P2 = matrix([
+   const P2 = $derived(matrix([
          1, 0, 0, 0,
          0, Math.cos(theta), Math.sin(theta), 0,
          0, -Math.sin(theta),  Math.cos(theta), 0,
          0, 0, 0, 1,
-   ], 4, 4);
+   ], 4, 4));
 
    // projection matrix (step 2)
-   $: P1 = matrix([
+   const P1 = $derived(matrix([
          Math.cos(phi), 0, -Math.sin(phi), 0,
          0, 1, 0, 0,
          Math.sin(phi), 0, Math.cos(phi), 0,
          0, 0, 0, 1
-      ], 4, 4);
+      ], 4, 4));
 
    // zoom matrix
-   $: Z = matrix([
+   const Z = $derived(matrix([
       zoom, 0, 0, 0,
       0, zoom, 0, 0,
       0, 0, zoom, 0,
       0, 0, 0, 1
-   ], 4, 4);
+   ], 4, 4));
 
-   // matrix for projection and zooming
+   // matrix for projection and zooming inside unit cube
    // we shift [0, 1] cube to center, project, zoom, and then shift back
-   $: P = T1.dot(Z.dot(P2.dot(P1.dot(T2))))
-
-   // update transformation matrix if angles of the norm vectors are changed
-   $: {
-      if ($isOk) {
-         // translate
-         const TT1 = matrix([
-            1, 0, 0, 0,
-            0, 1, 0, 0,
-            0, 0, 1, 0,
-            -$xLim[0], -$yLim[0], -$zLim[0], 1
-         ], 4, 4);
-
-         // scale the whole cube to [0, 1] limits
-         const SS1 = matrix([
-            1 / ($xLim[1] - $xLim[0]) ,  0, 0, 0,
-            0, 1 / ($yLim[1] - $yLim[0]), 0, 0,
-            0, 0, 1 / ($zLim[1] - $zLim[0]), 0,
-            0, 0, 0, 1
-         ], 4, 4);
-
-         // scale to screen coordinates
-         const SS2 = matrix([
-            width,  0, 0, 0,
-            0, height, 0, 0,
-            0, 0, 1, 0,
-            0, 0, 0, 1
-         ], 4, 4);
-
-         tM.update(x => SS2.dot(P.dot(SS1.dot(TT1))).t());
-      } else {
-         tM.update(x => Matrix.eye(4));
-      }
-   }
-
+   const P = $derived(T1.dot(Z.dot(P2.dot(P1.dot(T2)))));
 
-   /*****************************************/
-   /* Events observers                      */
-   /*****************************************/
-
-   // observer for the plot area size — to update scale
-   const ro1 = new ResizeObserver(entries => {
-      for (let entry of entries) {
-         const pcr = plotElement.getBoundingClientRect();
-         scale.update(x => getScale(pcr.width, pcr.height));
-      }
-   });
-
-   // observer for the axes area size - to update size of axes
-   const ro2 = new ResizeObserver(entries => {
-      for (let entry of entries) {
-         const acr = axesElement.getBoundingClientRect();
-         width = acr.width;
-         height = acr.height;
-      }
-   });
+   // translation in world coordinates to origin (0, 0, 0)
+   const TT1 = $derived(isOk ? matrix([
+      1, 0, 0, 0,
+      0, 1, 0, 0,
+      0, 0, 1, 0,
+      -limX[0], -limY[0], -limZ[0], 1
+   ], 4, 4) : null);
+
+   // scale world coordinates to unit cube
+   const SS1 = $derived(isOk ? matrix([
+      1 / (limX[1] - limX[0]) ,  0, 0, 0,
+      0, 1 / (limY[1] - limY[0]), 0, 0,
+      0, 0, 1 / (limZ[1] - limZ[0]), 0,
+      0, 0, 0, 1
+   ], 4, 4) : null);
 
-   onMount(() => {
-      ro1.observe(plotElement);
-      ro2.observe(plotElement);
+   // scale unit cube to screen coordinates
+   const SS2 = $derived(isOk ? matrix([
+      width,  0, 0, 0,
+      0, height, 0, 0,
+      0, 0, 1, 0,
+      0, 0, 0, 1
+   ], 4, 4) : null);
+
+   // main transformation matrix
+   const tM = $derived(SS2 && P && SS1 && TT1 ?
+      SS2.dot(P.dot(SS1.dot(TT1))).t() :
+      Matrix.eye(4)
+   );
+
+   // containers for axis properties
+   let xaxis = $state({show: false, label: ""});
+   let yaxis = $state({show: false, label: ""});
+   let zaxis = $state({show: false, label: ""});
+
+   // axes context to share with children
+   setContext('axes', {
+      scale: () => scale,
+      tM: () => tM,
+      setXAxis: (v) => xaxis = v,
+      setYAxis: (v) => yaxis = v,
+      setZAxis: (v) => zaxis = v,
    });
 
-   onDestroy(() => {
-      ro1.unobserve(plotElement);
-      ro2.unobserve(plotElement);
-   })
-
-   // check if everything is ok regarding the axis limits
-   $: isOk.update(v =>
-      !$yLim.some(v => v === undefined) &&
-      !$xLim.some(v => v === undefined) &&
-      !$zLim.some(v => v === undefined) &&
-      !$yLim.some(v => isNaN(v)) &&
-      !$xLim.some(v => isNaN(v)) &&
-      !$zLim.some(v => isNaN(v))
-   )
+   // compute screen coordinates for the axis
+   const xaxisCoords = $derived(xaxis && xaxis.show ? getXAxisCoords3D(xaxis, limX, limY, limZ, scale) : null);
+   const yaxisCoords = $derived(yaxis && yaxis.show ? getYAxisCoords3D(yaxis, limX, limY, limZ, scale) : null);
+   const zaxisCoords = $derived(zaxis && zaxis.show ? getZAxisCoords3D(zaxis, limX, limY, limZ, scale) : null);
 </script>
 
-
-<div class="plot {'plot_' + $scale}"  bind:this={plotElement} class:plot_error={!$isOk}>
-
-   <!-- axes (coordinate system) -->
-   <div class="axes-wrapper" bind:this={axesElement} >
-      <slot name="title"></slot>
-
-      <svg vector-effect="non-scaling-stroke" preserveAspectRatio="none" class="axes">
-
-         <!-- axis and box -->
-         <slot name="xaxis"></slot>
-         <slot name="yaxis"></slot>
-         <slot name="zaxis"></slot>
-
-         <!-- main plot content -->
-         <g class="axes-content" >
-            <slot></slot>
-         </g>
-
-         <!-- axis and box -->
-         <slot name="box"></slot>
-      </svg>
-
-      {#if !$isOk}
-      <p class="message_error">
-         Axes component was not properly initialized. <br />
-         Add plot series (check that coordinates are numeric) or define axes limits manually.
-      </p>
-      {/if}
+<!-- snipped for axis -->
+{#snippet axis(axis, coords)}
+
+   <g class="axis" >
+
+   <!-- grid -->
+   {#if axis.showGrid }
+      <AxisLines lineCoords={coords.grid1} lineColor={axis.gridColor} lineType={3} />
+      <AxisLines lineCoords={coords.grid2} lineColor={axis.gridColor} lineType={3} />
+   {/if}
+
+   <!-- main axis line -->
+   <AxisLines lineCoords={coords.axisLine} lineColor={axis.lineColor} lineType={1} />
+
+   <!-- ticks-->
+   <AxisLines lineCoords={[coords.tickCoords[0], coords.tickCoords[1]]} lineColor={axis.lineColor} lineType={1} />
+   <AxisLines lineCoords={[coords.tickCoords[0], coords.tickCoords[2]]} lineColor={axis.lineColor} lineType={1} />
+
+   <!-- labels -->
+   {#if coords.tickCoords }
+   <AxisTickLabels tickCoords={coords.tickCoords[4]} textColor={axis.textColor} tickLabels={coords.tickLabels}  />
+   {/if}
+
+   <!-- title -->
+   {#if coords.titleCoords && axis.label !== ''}
+   <TextLabels
+      xValues={coords.titleCoords[0]} yValues={coords.titleCoords[1]} zValues={coords.titleCoords[2]}
+      faceColor={axis.textColor}
+      labels={axis.label}
+      textSize={1.0}
+      fontWeight="bold"
+   />
+   {/if}
+   </g>
+{/snippet}
+
+<div class="plot-container show-download-links-{downloadLinks}" class:plot_error={!isOk}>
+   <svg class="plot" bind:this={plotElement} bind:clientWidth={width} bind:clientHeight={height}
+      xmlns="http://www.w3.org/2000/svg" style="font-size:{fontSize}px">
+      <style>
+         .plot {
+            font-family: Arial, Helvetica, sans-serif;
+         }
+
+         polyline, line {
+            vector-effect: "non-scaling-stroke";
+         }
+
+         .plot-labels text {
+            font-weight:bold;
+            text-anchor:middle;
+         }
+
+         .tick-labels text,
+         .tick-labels tspan,
+         .series-text text,
+         .series-text tspan,
+         .series-points text,
+         .series-points tspan {
+            dominant-baseline: middle;
+            cursor: default;
+         }
+
+         .series-text text,
+         .series-text tspan {
+            text-anchor: middle;
+         }
+
+         .tick-labels text,
+         .tick-labels tspan {
+            font-size:1em;
+         }
+
+         text, tspan {
+            user-select: none;
+            -webkit-user-select: none;
+         }
+      </style>
+
+      <!-- axis -->
+      {#if xaxis && xaxis.show} {@render axis(xaxis, xaxisCoords)} {/if}
+      {#if yaxis && yaxis.show} {@render axis(yaxis, yaxisCoords)} {/if}
+      {#if zaxis && zaxis.show} {@render axis(zaxis, zaxisCoords)} {/if}
+
+      <!-- main plot content -->
+      <g class="axes-content" >
+         {@render children?.()}
+      </g>
+   </svg>
+
+   {#if !isOk}
+   <p class="message_error">
+      Axes component was not properly initialized. <br />
+      Add plot series (check that coordinates are numeric) or define axes limits manually.
+   </p>
+   {:else}
+   <div class="download-links">
+      <button onclick={handleClickSVG} onkeydown={handleClickSVG}>⇩ svg</button>
+      <button onclick={handleClickPNG} onkeydown={handleClickPNG}>⇩ png</button>
+      <button onclick={handleClickCopy} onkeydown={handleClickCopy}>⧉ copy</button>
    </div>
-
-
+   {/if}
 </div>
 
 <style>
 
-   /* Plot (main container) */
-   .plot {
+   /* Plot container */
+   .plot-container {
       font-family: Arial, Helvetica, sans-serif;
-
-      display: grid;
-      grid-template-columns: min-content auto;
-      grid-template-rows: min-content auto min-content;
-      grid-template-areas:
-         ". title"
-         "ylab axes"
-         ". xlab";
-
       box-sizing: border-box;
+      position: relative;
       min-width: 100px;
       min-height: 50px;
       width: 100%;
       height: 100%;
       padding: 0;
       margin: 0;
-      background-color: white;
-   }
-
-   :global(.plot_small) {
-      font-size: 11px;
-   }
-
-   :global(.plot_medium) {
-      font-size: 13px;
+      overflow: hidden;
+      background: #fff;
    }
 
-   :global(.plot_large) {
-      font-size: 16px;
-   }
-
-   :global(.plot_error) {
+   .plot_error {
       display: flex;
    }
 
-   :global(.plot_error > .axes-wrapper) {
+   .plot_error > .plot {
       display: none;
    }
 
@@ -339,107 +330,74 @@
       width: 100%;
    }
 
-   /* Axes (coordinate system) */
-   .axes-wrapper {
-      grid-area: axes;
-      position:relative;
-      box-sizing: border-box;
-      display: flex;
-      width: 100%;
-      height: 100%;
-      padding: 0;
-      margin: 0;
-   }
-
-   .axes {
+   .plot {
       display: block;
       box-sizing: border-box;
       position:absolute;
-      user-select: none;
-      cursor: default;
       padding: 0;
       margin: 0;
-      height: 100%;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      right: 0;
       width: 100%;
-      max-height: 100%;
-      max-width: 100%;
-      min-height: 100%;
-      min-width: 100%;
+      height: 100%;
    }
 
-   .axes :global(text) {
-       -webkit-user-select: none;
-      user-select: none;
-      cursor: default;
-   }
 
-   :global(.axes-content) {
-      padding: 0;
-      margin: 0;
-      height: 100%;
-      width: 100%;
-      max-height: 100%;
-      max-width: 100%;
-      min-height: 100%;
-      min-width: 100%;
+   .show-download-links-none > .download-links{
+      display: none;
+   }
 
+   .show-download-links-hover:hover > .download-links {
+      bottom: 0;
    }
 
-   :global(.axes__xlabel) {
-      grid-area: xlab;
-      font-size: 1.0em;
-      font-weight: 600;
-      padding: 0.25em;
-      text-align: center;
+   .show-download-links-fixed > .download-links{
+      bottom: 0;
    }
 
+   .download-links {
+      box-sizing: border-box;
+      position: absolute;
+      font-size: 0.8em;
+      bottom: -50%;
+      right: 0;
+      z-index: 10;
+      padding: 0.5em 1em 0.5em 1em;
+      background: #fefefe;
+      border-radius: 0.5em;
+      transition: bottom 0.35s ease;
+      box-shadow: 0 0 0.75em #00000060;
+      margin: 0.6em;
+      box-sizing: border-box;
 
-   :global(.axes__ylabel) {
-      grid-area: ylab;
-      font-size: 1.0em;
-      font-weight: 600;
-      padding: 0.25em;
-      text-align: center;
-      vertical-align: middle;
       display: flex;
+      align-items: center;
+      justify-content: center;
    }
 
-   :global(.axes__ylabel > span) {
-      width: 1.5em;
-      line-height: 1.5em;
-      display: inline-block;
-      writing-mode: vertical-rl;
-      transform: rotate(180deg);
-   }
-
-
-   :global(.axes__title) {
-      background: transparent;
-      grid-area: title;
-
-      font-size: 1.3em;
-      font-weight: bold;
-      line-height: 1.2em;
-      padding: 0.5em 0;
-      text-align: center;
+   .download-links > button{
+      box-sizing: border-box;
+      color: #606060;
+      border: none;
+      box-shadow: none;
+      background: #fafafa;
+      border-radius: 0.35em;
+      padding: 0.25em 0.5em;
    }
 
-   /* Axis */
-   :global(.axis-labels) {
-      fill: #303030;
-      font-size: 0.95em;
+   .download-links > button:hover{
+      background: #443333;
+      color: #fafafa;
    }
 
-   /* Data labels */
-   :global(.labels) {
-      fill: #606060;
-      font-size: 0.90em;
+   .download-links > :global(button.error){
+      background: #ee4433;
    }
 
-   :global(.labels) {
-      visibility: hidden;
-      transition:visibility 0.25s linear, opacity 0.25s linear;
-      opacity: 0;
+   .download-links > :global(button.copied){
+      background: #4488ee;
    }
 
 </style>