svelte-plots-basic 3.3.0 → 4.0.0

package/src/2d/Segments.svelte

@@ -31,7 +31,7 @@
 <script>
    import { getContext } from 'svelte';
    import { Colors } from '../constants';
-   import { checkCoords, transformCoords, handleClick } from '../methods';
+   import { checkCoords, transformCoords, handleClick, normalizeLineType } from '../methods';
    import { LINE_STYLES } from '../constants';
 
    let {
@@ -51,6 +51,7 @@
    const sy = $derived(sx ? checkCoords(yStart, 'Segments', sx.length) : null);
    const ex = $derived(sy ? checkCoords(xEnd, 'Segments', sx.length) : null);
    const ey = $derived(ex ? checkCoords(yEnd, 'Segments', sx.length) : null);
+   const validLineType = $derived(normalizeLineType(lineType, 'Segments'));
 
    // get axes context and reactive variables needed to compute coordinates
    const axes = getContext('axes');
@@ -60,7 +61,7 @@
    const y2 = $derived(ey ? transformCoords(ey, axes.tY()) : null);
 
    // reactive variables for coordinates of data points in pixels (and line style)
-   const lineStyleStr = $derived(`stroke:${lineColor};stroke-width: ${lineWidth}px;stroke-dasharray:${LINE_STYLES[axes.scales().plot][lineType-1]}`);
+   const lineStyleStr = $derived(`stroke:${lineColor};stroke-width: ${lineWidth}px;stroke-dasharray:${LINE_STYLES[axes.scales().plot][validLineType - 1]}`);
 
    // local status
    const isOk = $derived(x1 && x2 && y1 && y2);
@@ -75,4 +76,3 @@
    {/each}
    </g>
 {/if}
-

package/src/2d/TextLabels.svelte

@@ -1,18 +1,20 @@
 <!--
-@component Adds a series with line segments.
+@component Adds text labels at specified plot coordinates.
 
    Main properties:
-   - `xValues`- vector or array with x-coordinates for each label.
-   - `yValues`- vector or array with y-coordinates for each label.
-   - `labels`- single string or array with labels (strings).
-   - `pos`- position of labels related to coordinates (`0` - middle - default, `1` - bottom, `2` - left, `3` - top, `4` - right).
-   - `faceColor`-  face color of label symbols, default: `Colors.PRIMARY_TEXT`.
-   - `lineColor`- border colors of label symbols, default: `'transparent'`.
-   - `lineWidth`- border width of label symbols in pixels, default: `0`.
-   - `textSize`- size of label symbols in em, default: `1`.
-   - `rotateAngle`- angle to rotate labels, default: `0`.
+   - `xValues` - vector or array with x-coordinates for each label.
+   - `yValues` - vector or array with y-coordinates for each label.
+   - `labels` - single string used at every coordinate or array with one string per coordinate.
+   - `pos` - one position used for every label, or an array/typed array with one position per label (`0` - middle - default, `1` - bottom, `2` - left, `3` - top, `4` - right).
+   - `faceColor` - text fill color, default: `Colors.PRIMARY_TEXT`.
+   - `lineColor` - text outline color, default: `'transparent'`.
+   - `lineWidth` - text outline width in pixels, default: `0`.
+   - `textSize` - text size in em, default: `1`.
+   - `rotateAngle` - angle to rotate labels, default: `0`.
    - `onclick` - function (callback) to be called when user clicks on a label.
 
+   Values in `labels` are rendered as raw SVG/HTML markup. Only pass trusted content.
+
    Example:
 
    ```svelte
@@ -71,8 +73,22 @@
    const p = $derived.by(() => {
       if (!l) return null;
 
-      if (typeof labels === 'string' && typeof pos !== 'number' ) {
-         console.error('TextLabels: parameter "labels" is provided as single string, so "pos" must be a single number.');
+      const hasIndividualPositions =
+         Array.isArray(pos) || ArrayBuffer.isView(pos);
+
+      if (typeof labels === 'string' && hasIndividualPositions) {
+         console.error('TextLabels: when "labels" is a single string, "pos" must be a single number.');
+         return null;
+      }
+
+      if (hasIndividualPositions && pos.length !== yv.length) {
+         console.error('TextLabels: the number of values in "pos" must match the number of coordinates.');
+         return null;
+      }
+
+      const positions = hasIndividualPositions ? Array.from(pos) : [pos];
+      if (positions.some(v => !Number.isInteger(v) || v < 0 || v > 4)) {
+         console.error('TextLabels: values in "pos" must be whole numbers from 0 to 4.');
          return null;
       }
 
@@ -106,14 +122,14 @@
       {#each x as v, i}
          <text data-id={i} x={x[i]} y={y[i]} dx={dx[pos]} dy={dy[pos]}
             transform={rotateAngle !== undefined ? `rotate(${rotateAngle}, ${x[i] + dx[pos]}, ${y[i] + dy[pos]})` : ''}
-            text-anchor={textAnchors[pos[i]]}>{@html labels}</text>
+            text-anchor={textAnchors[pos]}>{@html labels}</text>
       {/each}
 
    {:else if (Array.isArray(pos) || ArrayBuffer.isView(pos))}
 
       {#each x as v, i}
          <text data-id={i} x={x[i]} y={y[i]} dx={dx[pos[i]]} dy={dy[pos[i]]}
-            transform={rotateAngle !== undefined ? `rotate(${rotateAngle}, ${x[i] + dx[pos]}, ${y[i] + dy[pos]})` : ''}
+            transform={rotateAngle !== undefined ? `rotate(${rotateAngle}, ${x[i] + dx[pos[i]]}, ${y[i] + dy[pos[i]]})` : ''}
             text-anchor={textAnchors[pos[i]]}>{@html labels[i]}</text>
       {/each}
 

package/src/2d/TextLegend.svelte

@@ -1,7 +1,38 @@
+<!--
+@component Adds a vertical text legend at a specified plot position.
+
+   Main properties:
+   - `left` - x-coordinate of the legend in plot units.
+   - `top` - y-coordinate of the legend in plot units.
+   - `elements` - non-empty array of text labels. SVG/HTML markup is supported.
+   - `dx` - horizontal text offset, default: `"0"`.
+   - `dy` - vertical spacing between labels, default: `"1.25em"`.
+   - `faceColor` - text fill color, default: `Colors.PRIMARY_TEXT`.
+   - `lineColor` - text outline color, default: `"transparent"`.
+   - `lineWidth` - text outline width in pixels, default: `0`.
+   - `textSize` - text size in em, default: `1`.
+
+   Values in `elements` are rendered as raw SVG/HTML markup. Only pass trusted content.
+
+   Example:
+
+   ```svelte
+   <script>
+      import { Axes, TextLegend } from 'svelte-plots-basic/2d';
+
+      const elements = ['First group', 'Second group'];
+   </script>
+
+   <Axes limX={[0, 10]} limY={[0, 10]}>
+      <TextLegend left={1} top={9} {elements} />
+   </Axes>
+   ```
+-->
+
 <script>
    import { getContext } from 'svelte';
    import { Colors } from '../constants';
-   import { transformCoords } from '../methods';
+   import { checkCoords, transformCoords } from '../methods';
 
    let {
       left,                                // vector/array with coordinates of lef side of each text box
@@ -16,17 +47,32 @@
    } = $props()
 
    const axes = getContext('axes');
-   const x = $derived(left ? transformCoords([left], axes.tX()) : null);
-   const y = $derived(top ? transformCoords([top], axes.tY()) : null );
+   const lx = $derived(
+      left !== undefined && left !== null ? checkCoords([left], 'TextLegend (left)') : null
+   );
+   const ty = $derived(
+      top !== undefined && top !== null ? checkCoords([top], 'TextLegend (top)') : null
+   );
+   const x = $derived(lx ? transformCoords(lx, axes.tX()) : null);
+   const y = $derived(ty ? transformCoords(ty, axes.tY()) : null);
+
+   const validElements = $derived.by(() => {
+      if (!Array.isArray(elements) || elements.length < 1) {
+         console.error('TextLegend: parameter "elements" must be a non-empty array.');
+         return null;
+      }
+
+      return elements;
+   });
 
    // styles for bars and labels
    const textStyleStr = $derived(`fill:${faceColor};stroke-width:${lineWidth}px;stroke:${lineColor};font-size:${textSize}em;`);
 </script>
 
-{#if x && y && elements.length > 0}
+{#if x && y && validElements}
    <text style={textStyleStr} x={x} y={y} dx={dx} dy={dy} dominant-baseline="middle" text-anchor="start">
-      {#each elements as el, i}
+      {#each validElements as el, i}
          <tspan {x} {dx} dy={i === 0 ? 0 : dy}>{@html el}</tspan>
       {/each}
    </text>
-{/if}
+{/if}

package/src/2d/XAxis.svelte

@@ -21,7 +21,7 @@
 -->
 <script>
 
-   import { getContext } from 'svelte';
+   import { getContext, onDestroy } from 'svelte';
    import { text2svg, validateTicks, validateTickLabels } from '../methods';
 
    let {
@@ -60,4 +60,8 @@
       axes.setXAxis({show, error: error, label: axisLabel, ticks: ticksProcessed,
          labelHeight, showGrid, las, whole, tickLabels: tickLabelsProcessed});
    });
+
+   onDestroy(() => {
+      axes.setXAxis({show: false, error: ''});
+   });
 </script>

package/src/2d/YAxis.svelte

@@ -4,7 +4,7 @@
    Main properties:
    - `label` - text label for the axis (optional).
    - `showGrid` - logical, show or not horizontal grid lines, default: `false`.
-   - `ticks` - array or vector with tick positions (by default will be generated automatically based on `limX`).
+   - `ticks` - array or vector with tick positions (by default will be generated automatically based on `limY`).
    - `tickLabels` - array with tick labels to show at each tick (by default will be generated automatically).
    - `las` - orientation of tick labels (`1` - horizontal - default, `2` - vertical).
    - `whole` - logical, show numeric tick labels as whole numbers (without decimals) or not, default: `false`.
@@ -21,7 +21,7 @@
 -->
 <script>
 
-   import { getContext } from 'svelte';
+   import { getContext, onDestroy } from 'svelte';
    import { text2svg, validateTicks, validateTickLabels } from '../methods';
 
 
@@ -63,4 +63,8 @@
       axes.setYAxis({show, error: error, label: axisLabel, ticks: ticksProcessed,
          labelHeight, showGrid, las, whole, tickLabels: tickLabelsProcessed, pos: 4});
    });
+
+   onDestroy(() => {
+      axes.setYAxis({show: false, error: ''});
+   });
 </script>

package/src/3d/Axes.svelte

@@ -4,7 +4,7 @@
    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]`.
+   - `limZ` - array with limits for z-axis (in plot units), default: `[0, 1]`.
    - `theta` - angle (in radians) for orientation of projection plane, default: `-10`.
    - `phi` - angle (in radians) for orientation of projection plane, default: `-10`.
    - `zoom` - zooming factor, default: `0.5`.
@@ -15,32 +15,29 @@
    - `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.
+   - `clipboardWidth` - width of plot image to copy to clipboard in pixels, default `1200`.
+   - `clipboardHeight` - height of plot image to copy to clipboard in pixels, default `800`.
 
    Example:
-   ```jsx
+   ```svelte
    <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>
+   <Axes limX={[-10, 10]} limY={[-10, 10]} limZ={[-10, 10]} />
    ```
 -->
 <script>
    import { matrix, Matrix } from 'mdatools/arrays';
    import { setContext } from 'svelte';
    import { PLOT_FONT_SIZE } from '../constants.js';
-   import { checkArray, getScale, getXAxisCoords3D, getYAxisCoords3D, getZAxisCoords3D,
+   import { 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],
@@ -59,6 +56,21 @@
    } = $props();
 
 
+   function hasUsableRange(lim) {
+      if (!Array.isArray(lim) || lim.length !== 2) return false;
+      if (!lim.every(value =>
+         typeof value === 'number' && Number.isFinite(value)
+      )) return false;
+
+      const span = lim[1] - lim[0];
+      const scale = Math.max(Math.abs(lim[0]), Math.abs(lim[1]));
+
+      return span > 0 &&
+         Number.isFinite(1 / span) &&
+         span > Number.EPSILON * scale * 16;
+   }
+
+
 
    /* Copy plot to clipboard as PNG image. */
    async function handleClickCopy(e) {
@@ -105,12 +117,9 @@
 
    // 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] &&
+      hasUsableRange(limX) &&
+      hasUsableRange(limY) &&
+      hasUsableRange(limZ) &&
       width > 50 &&
       height > 50
    );
@@ -174,9 +183,9 @@
    );
 
    // containers for axis properties
-   let xaxis = $state({show: false, label: ""});
-   let yaxis = $state({show: false, label: ""});
-   let zaxis = $state({show: false, label: ""});
+   let xaxis = $state.raw({show: false, label: ""});
+   let yaxis = $state.raw({show: false, label: ""});
+   let zaxis = $state.raw({show: false, label: ""});
 
    // axes context to share with children
    setContext('axes', {
@@ -290,9 +299,9 @@
    </p>
    {:else}
    <div class="download-links">
-      <button onclick={handleClickSVG}>⇩ svg</button>
-      <button onclick={handleClickPNG}>⇩ png</button>
-      <button onclick={handleClickCopy}>⧉ copy</button>
+      <button type="button" onclick={handleClickSVG}>⇩ svg</button>
+      <button type="button" onclick={handleClickPNG}>⇩ png</button>
+      <button type="button" onclick={handleClickCopy}>⧉ copy</button>
    </div>
    {/if}
 </div>
@@ -399,4 +408,4 @@
       background: #4488ee;
    }
 
-</style>
+</style>

package/src/3d/AxisLines.svelte

@@ -1,5 +1,5 @@
 <!--
-@component draws line segments for axis elements (ticks. etc), not for manual use.
+@component Draws line segments for axis elements (ticks, etc.); not intended for direct use.
 -->
 <script>
    import { getContext } from 'svelte';
@@ -13,9 +13,9 @@
       lineWidth = 1,                   // line width (thickness) in pixels.
    } = $props();
 
-   // get axes context and and compute screen coordinates
+   // get axes context and compute screen coordinates
    const axes = getContext('axes');
-   const s1 = $derived(lineCoords.length == 2 ? transform3D(lineCoords[0], axes.tM()) : null);
+   const s1 = $derived(lineCoords.length === 2 ? transform3D(lineCoords[0], axes.tM()) : null);
    const s2 = $derived(s1 ? transform3D(lineCoords[1], axes.tM()) : null);
 
    // line style
@@ -29,4 +29,3 @@
    {/each}
 </g>
 {/if}
-

package/src/3d/AxisTickLabels.svelte

@@ -1,5 +1,5 @@
 <!--
-@component shows tick labels.
+@component Shows tick labels.
 -->
 <script>
 
@@ -34,4 +34,4 @@
       user-select: none;
       dominant-baseline: middle;
    }
-</style>
+</style>

package/src/3d/Lines.svelte

@@ -2,16 +2,16 @@
 @component Adds a series of lines connecting points with provided coordinates (polyline).
 
    Main properties:
-   - `xValues` - array of vector with x-coordinates of the points.
-   - `yValues` - array of vector with y-coordinates of the points.
-   - `zValues` - array of vector with z-coordinates of the points.
+   - `xValues` - array or vector with x-coordinates of the points.
+   - `yValues` - array or vector with y-coordinates of the points.
+   - `zValues` - array or vector with z-coordinates of the points.
    - `lineColor` - lines color, default: `Colors.PRIMARY`.
-   - `lineWidth` - width (thickness) of the lines in pixels, defailt: `1`.
+   - `lineWidth` - width (thickness) of the lines in pixels, default: `1`.
    - `lineType` -  type of lines (`1` - solid, `2` - dashed, `3` - dotted, `4` - dashdot).
    - `title` - title of the line series group.
 
    Example:
-   ```jsx
+   ```svelte
    <script>
       import { Axes, Lines } from 'svelte-plots-basic/3d';
 
@@ -29,7 +29,7 @@
    import { cbind } from 'mdatools/arrays';
    import { getContext } from 'svelte';
    import { Colors, LINE_STYLES } from '../constants';
-   import { checkCoords, transform3D } from '../methods';
+   import { checkCoords, transform3D, normalizeLineType } from '../methods';
 
    let {
 	   xValues,
@@ -55,6 +55,7 @@
    const ux = $derived(checkCoords(xValues, 'Lines (3D)'));
    const uy = $derived(ux ? checkCoords(yValues, 'Lines (3D)', ux.length) : null);
    const uz = $derived(uy ? checkCoords(zValues, 'Lines (3D)', ux.length) : null);
+   const validLineType = $derived(normalizeLineType(lineType, 'Lines (3D)'));
 
    // combine world coordinates to matrices
    const uW = $derived(ux && uy && uz ? cbind(ux, uy, uz) : null);
@@ -65,7 +66,7 @@
    const p = $derived(s ? coords2points(s) : null);
 
    // reactive variables for coordinates of data points in pixels
-   const lineStyleStr = $derived(`fill:transparent;stroke:${lineColor};stroke-width: ${lineWidth}px; stroke-dasharray:${LINE_STYLES[axes.scale()][lineType-1]}`);
+   const lineStyleStr = $derived(`fill:transparent;stroke:${lineColor};stroke-width: ${lineWidth}px; stroke-dasharray:${LINE_STYLES[axes.scale()][validLineType - 1]}`);
 </script>
 
 {#if p}
@@ -73,4 +74,3 @@
       <polyline class="line" points={p}/>
    </g>
 {/if}
-

package/src/3d/Mesh.svelte

@@ -1,20 +1,20 @@
 <!--
-@component Adds a mesh plot as a set of grid points and line segments connected them.
+@component Adds a mesh plot as a set of grid points and line segments connecting them.
 
    Main properties:
-   - `xValues` - array of vector with x-coordinates of the mesh points.
-   - `zValues` - array of vector with z-coordinates of the mesh points.
+   - `xValues` - array or vector with x-coordinates of the mesh points.
+   - `zValues` - array or vector with z-coordinates of the mesh points.
    - `yValues` - matrix (!) with y-coordinates of the points defining its height.
-   - `colmap` - array with colors to use for different height.
-   - `lineWidth` - width (thickness) of the lines in pixels, defailt: `1`.
+   - `colmap` - array with colors to use for different heights.
+   - `lineWidth` - width (thickness) of the lines in pixels, default: `1`.
    - `lineType` -  type of lines (`1` - solid, `2` - dashed, `3` - dotted, `4` - dashdot).
-   - `title` - title of the line series group.
+   - `title` - title of the mesh series group.
 
    Example:
-   ```jsx
+   ```svelte
    <script>
-      import { Axes, Mesh } from 'svelte-plots-basic/3d';
-      import { gecolmap } from 'svelte-plots-basic/utils';
+      import { Axes, Mesh, getcolmap } from 'svelte-plots-basic/3d';
+      import { Matrix, Vector } from 'mdatools/arrays';
 
       const xMesh = Vector.seq(-8, 8, 1);
       const zMesh = Vector.seq(-8, 8, 1);
@@ -24,6 +24,7 @@
    <Axes limX={[-10, 10]} limY={[-10, 10]} limZ={[-10, 10]}>
       <Mesh xValues={xMesh} yValues={yMesh} zValues={zMesh} colmap={getcolmap(16)}/>
    </Axes>
+   ```
 -->
 <script>
 
@@ -31,7 +32,7 @@
    import { range } from 'mdatools/stat';
    import { getContext } from 'svelte';
    import { Colors, LINE_STYLES } from '../constants';
-   import { checkCoords, transform3D } from '../methods';
+   import { checkCoords, transform3D, normalizeLineType } from '../methods';
 
    let {
       title = '',
@@ -45,25 +46,51 @@
 
    // check user defined coordinates
    const ux = $derived(checkCoords(xValues, 'Mesh (3D)'));
-   const uz = $derived(ux ? checkCoords(zValues, 'Mesh (3D)', ux.length) : null);
+   const uz = $derived(ux ? checkCoords(zValues, 'Mesh (3D)') : null);
+   const validLineType = $derived(normalizeLineType(lineType, 'Mesh (3D)'));
    const Uy = $derived.by(() => {
       if (!ux || !uz) return null;
       if (!ismatrix(yValues)) {
          console.error('Mesh: parameter "yValues" must be a matrix with height values of mesh points.');
          return null;
       }
+      if (yValues.nrows !== ux.length || yValues.ncols !== uz.length) {
+         console.error('Mesh: dimensions of "yValues" must match the lengths of "xValues" and "zValues".');
+         return null;
+      }
       return yValues;
    });
 
 
+   const colors = $derived.by(() => {
+      const isValid =
+         Array.isArray(colmap) &&
+         colmap.length > 0 &&
+         colmap.every(color =>
+            typeof color === 'string' && color.length > 0
+         );
+
+      if (!isValid) {
+         console.error(
+            'Mesh: parameter "colmap" must be a non-empty array of color strings.'
+         );
+         return null;
+      }
+
+      return colmap;
+   });
+
+
    // compute coordinates of mesh elements
    const mesh = $derived.by(() => {
 
-      if (!Uy) return null;
+      if (!Uy || !colors) return null;
 
-      const nbins = colmap.length;
+      const nbins = colors.length;
       const nx = Uy.nrows;
       const nz = Uy.ncols;
+      const nsegmentsX = (nx - 1) * nz;
+      const nsegmentsZ = nx * (nz - 1);
 
       const nr = range(Uy.v);
       const dnr = (nr[1] - nr[0]) / 100;
@@ -71,26 +98,36 @@
       const right = nr[1] + dnr;
       const span = right - left;
 
+      function getColorIndex(value) {
+         if (!(span > 0)) return Math.floor(nbins / 2);
+
+         const index = Math.round(
+            (value - left) / span * (nbins - 1)
+         );
+
+         return Math.max(0, Math.min(nbins - 1, index));
+      }
+
       // compute coordinates for mesh segments lines
-      const x1s = Vector.zeros((nx - 1) * nz);
-      const z1s = Vector.zeros((nx - 1) * nz);
-      const y1s = Vector.zeros((nx - 1) * nz);
+      const x1s = Vector.zeros(nsegmentsX);
+      const z1s = Vector.zeros(nsegmentsX);
+      const y1s = Vector.zeros(nsegmentsX);
 
-      const x2s = Vector.zeros((nx - 1) * nz);
-      const z2s = Vector.zeros((nx - 1) * nz);
-      const y2s = Vector.zeros((nx - 1) * nz);
+      const x2s = Vector.zeros(nsegmentsZ);
+      const z2s = Vector.zeros(nsegmentsZ);
+      const y2s = Vector.zeros(nsegmentsZ);
 
-      const color1 = Vector.zeros((nx - 1) * nz);
+      const color1 = Vector.zeros(nsegmentsX);
 
-      const x1e = Vector.zeros((nx - 1) * nz);
-      const z1e = Vector.zeros((nx - 1) * nz);
-      const y1e = Vector.zeros((nx - 1) * nz);
+      const x1e = Vector.zeros(nsegmentsX);
+      const z1e = Vector.zeros(nsegmentsX);
+      const y1e = Vector.zeros(nsegmentsX);
 
-      const x2e = Vector.zeros((nx - 1) * nz);
-      const z2e = Vector.zeros((nx - 1) * nz);
-      const y2e = Vector.zeros((nx - 1) * nz);
+      const x2e = Vector.zeros(nsegmentsZ);
+      const z2e = Vector.zeros(nsegmentsZ);
+      const y2e = Vector.zeros(nsegmentsZ);
 
-      const color2 = Vector.zeros((nx - 1) * nz);
+      const color2 = Vector.zeros(nsegmentsZ);
 
       let n1 = 0, n2 = 0;
       for (let z = 0; z < nz; z++) {
@@ -108,7 +145,8 @@
                z1e.v[n1] = uz.v[z];
                y1e.v[n1] = Uy.v[z * nx + x + 1];
 
-               const colInd = Math.round(((Uy.v[z * nx + x] + Uy.v[z * nx + x + 1]) / 2 - left) / span * (nbins - 1));
+               const meanHeight = (Uy.v[z * nx + x] + Uy.v[z * nx + x + 1]) / 2;
+               const colInd = getColorIndex(meanHeight);
                color1.v[n1] = colInd;
                n1 = n1 + 1;
             }
@@ -125,7 +163,8 @@
                z2e.v[n2] = uz.v[z + 1];
                y2e.v[n2] = Uy.v[(z + 1) * nx + x];
 
-               const colInd = Math.round(((Uy.v[z * nx + x] + Uy.v[(z + 1) * nx + x]) / 2 - left) / span * (nbins - 1));
+               const meanHeight = (Uy.v[z * nx + x] + Uy.v[(z + 1) * nx + x]) / 2;
+               const colInd = getColorIndex(meanHeight);
                color2.v[n2] = colInd;
                n2 = n2 + 1;
             }
@@ -147,17 +186,16 @@
    const s2s = $derived(mesh ? transform3D(mesh.M2s, axes.tM()) : null);
    const s2e = $derived(mesh ? transform3D(mesh.M2e, axes.tM()) : null);
 
-   const lineStyleStr = $derived(`stroke-width: ${lineWidth}px;stroke-dasharray:${LINE_STYLES[axes.scale()][lineType-1]};`);
+   const lineStyleStr = $derived(`stroke-width: ${lineWidth}px;stroke-dasharray:${LINE_STYLES[axes.scale()][validLineType - 1]};`);
 </script>
 
-<g class="series series_mesh" style={lineStyleStr} data-title={title}>
 {#if s1s && s1e && s2s && s2e }
+<g class="series series_mesh" style={lineStyleStr} data-title={title}>
    {#each s1s.x as v, i}
-   <line x1={s1s.x[i]} x2={s1e.x[i]} y1={s1s.y[i]} y2={s1e.y[i]} style={`stroke:${colmap[mesh.color1.v[i]]};`} />
+   <line x1={s1s.x[i]} x2={s1e.x[i]} y1={s1s.y[i]} y2={s1e.y[i]} style={`stroke:${colors[mesh.color1.v[i]]};`} />
    {/each}
    {#each s2s.x as v, i}
-   <line x1={s2s.x[i]} x2={s2e.x[i]} y1={s2s.y[i]} y2={s2e.y[i]} style={`stroke:${colmap[mesh.color2.v[i]]};`} />
+   <line x1={s2s.x[i]} x2={s2e.x[i]} y1={s2s.y[i]} y2={s2e.y[i]} style={`stroke:${colors[mesh.color2.v[i]]};`} />
    {/each}
-{/if}
 </g>
-
+{/if}