svelte-plots-basic 3.4.0 → 4.0.0

package/src/2d/Multilines.svelte

@@ -2,10 +2,10 @@
 @component Adds a series of polylines (like `<Lines>` but with several of those).
 
    Main properties:
-   - `xValues` - array of vector with x-coordinates of the points.
-   - `yValues` - Matrix (object of class `Matrix` from `mdatools/array`) with y-coordinates of the points.
+   - `xValues` - array or vector with x-coordinates of the points.
+   - `yValues` - Matrix (object of class `Matrix` from `mdatools/arrays`) with y-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 segment lines (`1` - solid, `2` - dashed, `3` - dotted, `4` - dashdot).
    - `onclick` - function (callback) to be called when user clicks on a polyline.
 
@@ -16,8 +16,8 @@
       import { Vector, cbind } from 'mdatools/arrays';
       import { Axes, Multilines } from 'svelte-plots-basic/2d';
 
-      const xValues = Vector.seq(0, 100, 100);
-      const YY = cbind(
+      const xValues = Vector.seq(0, 10, 0.1);
+      const yValues = cbind(
          xValues.apply(v => Math.sin(v)),
          xValues.apply(v => Math.sin(v + 0.5) + 0.1),
          xValues.apply(v => Math.sin(v - 0.5) - 0.1),
@@ -35,12 +35,12 @@
    import { getContext } from 'svelte';
    import { ismatrix } from 'mdatools/arrays';
    import { Colors } from '../constants';
-   import { val2p, checkCoords, handleClick } from '../methods';
+   import { val2p, checkCoords, handleClick, normalizeLineType } from '../methods';
    import { LINE_STYLES } from '../constants';
 
    let {
 	   xValues,                       // vector or array with x-coordinates of the points
-      yValues,                       // vector or array with y-coordinates of the points
+      yValues,                       // matrix with y-coordinates of the points
       lineColor = Colors.PRIMARY,    // color of segment lines
       lineType = 1,                  // type of segment lines (1 - solid, 2 - dashed, 3 - dotted, 4 - dashdot)
       lineWidth = 1,                 // width (thickness) of segment lines
@@ -49,6 +49,7 @@
 
    // check user provided coordinates
    const xv = $derived(checkCoords(xValues, 'Multilines'));
+   const validLineType = $derived(normalizeLineType(lineType, 'Multilines'));
    const yv = $derived.by(() => {
 
       if (!xv) return null;
@@ -79,7 +80,7 @@
    });
 
    // 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.scales().plot][lineType-1]}`);
+   const lineStyleStr = $derived(`fill:transparent;stroke:${lineColor};stroke-width: ${lineWidth}px; stroke-dasharray:${LINE_STYLES[axes.scales().plot][validLineType - 1]}`);
 </script>
 
 {#if pp && pp.length > 0}

package/src/2d/Points.svelte

@@ -2,13 +2,13 @@
 @component Adds a series of points.
 
    Main properties:
-   - `xValues` - array of vector with x-coordinates of the points.
-   - `yValues` - array of vector with y-coordinates of the points.
+   - `xValues` - array or vector with x-coordinates of the points.
+   - `yValues` - array or vector with y-coordinates of the points.
    - `marker` - index for a point symbol (from 1 - default - to 8): `"●", "◼", "▲", "▼", "⬥", "＋", "*", "✕"`.
    - `faceColor` - face (fill) color of the markers, default: `'transparent'`.
    - `lineColor` - border color of the markers, default: `Colors.PRIMARY`.
-   - `lineWidth` - width (thickness) of the markers' border in pixels, defailt: `1`.
-   - `markerSize` - size of the markers in em, defailt: `1`.
+   - `lineWidth` - width (thickness) of the markers' border in pixels, default: `1`.
+   - `markerSize` - size of the markers in em, default: `1`.
    - `onclick` - function (callback) to be called when user clicks on a marker.
 
    Example:
@@ -32,8 +32,8 @@
    import { checkCoords, transformCoords, handleClick } from '../methods';
 
    let {
-	   xValues,                          // array of vector with x-coordinates of points
-      yValues,                          // array of vector with y-coordinates of points
+	   xValues,                          // array or vector with x-coordinates of points
+      yValues,                          // array or vector with y-coordinates of points
       marker = 1,                       // index for point symbol (from 1 to 8): "●", "◼", "▲", "▼", "⬥", "＋", "*", "✕"
       faceColor = 'transparent',        // face (fill) color of the points
       lineColor = Colors.PRIMARY,     // border color of the points
@@ -45,8 +45,8 @@
 
    // select which symbol to use as a marker
    const markerSymbol = $derived.by(() => {
-      if (typeof(marker) !== 'number' || marker < 1 || marker > MARKER_SYMBOLS.length) {
-         console.error('Points: parameter "marker" must be a number from 1 to ' + MARKER_SYMBOLS.length + '.');
+      if (!Number.isInteger(marker) || marker < 1 || marker > MARKER_SYMBOLS.length) {
+         console.error('Points: parameter "marker" must be a whole number from 1 to ' + MARKER_SYMBOLS.length + '.');
          return null;
       }
       return MARKER_SYMBOLS[marker - 1]
@@ -70,7 +70,7 @@
    const className = $derived(['◼', '⬥', '＋', '✳', '✕'].includes(markerSymbol)  ? 'series-points2' : 'series-points1');
 
    // check if all coordinates are correct
-   const isOk = $derived(x && y && x.length === y.length);
+   const isOk = $derived(markerSymbol && x && y && x.length === y.length);
 </script>
 
 {#if isOk}

package/src/2d/Rectangles.svelte

@@ -3,20 +3,19 @@
 
    Main properties:
    - `left` - array or vector with world coordinates of left side of the rectangles.
-   - `top` - array or vector with world coordinates of left side of the rectangles.
+   - `top` - array or vector with world coordinates of top side of the rectangles.
    - `width` - width of the rectangles (one value or array/vector with individual values).
    - `height` - height of the rectangles (one value or array/vector with individual values).
-   - `facColor` - face color of the rectangles (same for all).
+   - `faceColor` - face color of the rectangles (same for all).
    - `lineColor` - border color of each rectangle.
    - `lineWidth` - width (thickness) of border lines in pixels.
-   - `className`- CSS class name for the labels group, default: `'series-rect'`.
+   - `className` - CSS class name for the rectangles group, default: `'series-rect'`.
    - `onclick` - function (callback) to be called when user clicks on any rectangle.
 
 
    Example:
-   ```jsx
+   ```svelte
    <script>
-      import { Matrix } from 'mdatools/arrays';
       import { Axes, Rectangles } from 'svelte-plots-basic/2d';
 
       const left = [0, 10, 20, 30];
@@ -32,27 +31,58 @@
 -->
 <script>
    import { getContext } from 'svelte';
-   import { Vector } from 'mdatools/arrays';
+   import { Vector, isvector } from 'mdatools/arrays';
    import { Colors } from '../constants';
    import { checkCoords, transformCoords, transformObjects, handleClick } from '../methods';
 
    let {
-	   left,                          // array of vector with coordinates of left sides of the bars
-      top,                           // array of vector with coordinates of top sides of the bars
-      width,                         // single value (same for all) or vector/array with bar width
-      height,                        // single value (same for all) or vector/array with bar height
-      faceColor = Colors.PRIMARY,    // color of bar faces (fill)
-      lineColor = faceColor,       // color of bar borders
-      lineWidth = 1,                 // width (thickness) of bar border lines
+	   left,                          // array or vector with coordinates of left sides of the rectangles
+      top,                           // array or vector with coordinates of top sides of the rectangles
+      width,                         // single value (same for all) or vector/array with rectangle width
+      height,                        // single value (same for all) or vector/array with rectangle height
+      faceColor = Colors.PRIMARY,    // color of rectangle faces (fill)
+      lineColor = faceColor,         // color of rectangle borders
+      lineWidth = 1,                 // width (thickness) of rectangle border lines
       className = 'series-rect',     // CSS class name of the SVG group
       onclick,                       // function to be called if onclick event fires
    } = $props();
 
+   function checkDimensions(value, name, len) {
+      const canConvert =
+         typeof value === 'number' ||
+         (typeof value === 'string' && value.trim() !== '');
+      let dimensions;
+
+      if (canConvert) {
+         const scalar = Number(value);
+         if (!Number.isFinite(scalar) || scalar < 0) {
+            console.error(`Rectangles: parameter "${name}" must contain only finite non-negative values.`);
+            return null;
+         }
+         dimensions = Vector.fill(scalar, len);
+      } else if (Array.isArray(value) || isvector(value)) {
+         dimensions = checkCoords(value, `Rectangles (${name})`, len);
+         if (!dimensions) return null;
+      } else {
+         console.error(`Rectangles: parameter "${name}" must be a number, array, or Vector.`);
+         return null;
+      }
+
+      for (let i = 0; i < dimensions.length; i++) {
+         if (dimensions.v[i] < 0) {
+            console.error(`Rectangles: parameter "${name}" must contain only finite non-negative values.`);
+            return null;
+         }
+      }
+
+      return dimensions;
+   }
+
    // process provided values and compute world coordinates of rectangles
    const l = $derived(checkCoords(left, 'Rectangles (left)'));
    const t = $derived(l ? checkCoords(top, 'Rectangles (top)', l.length) : null);
-   const w = $derived(t ? (typeof width !== 'object' ? Vector.fill(width, l.length) : width) : null);
-   const h = $derived(t ? (typeof height !== 'object' ? Vector.fill(height, l.length) : height) : null);
+   const w = $derived(t ? checkDimensions(width, 'width', l.length) : null);
+   const h = $derived(t ? checkDimensions(height, 'height', l.length) : null);
 
    // get axes context and compute screen coordinates
    const axes = getContext('axes');
@@ -62,11 +92,11 @@
    const rw = $derived(w ? transformObjects(w, axes.tX()) : null);
    const rh = $derived(h ? transformObjects(h, axes.tY()) : null);
 
-   // styles for bars and labels
+   // styles for rectangles
    const barsStyleStr = $derived(`fill:${faceColor};stroke:${lineColor};stroke-width:${lineWidth}px;`);
 
    // check if all coordinates are correct
-   const isOk = $derived(rx && ry && rw && rh && (rw.length === rx.length) && (rh.length === rx.length));
+   const isOk = $derived(rx && ry && rw && rh);
 </script>
 
 {#if isOk}
@@ -78,4 +108,3 @@
    {/each}
    </g>
 {/if}
-

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

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,24 +47,31 @@
    } = $props()
 
    const axes = getContext('axes');
-   const x = $derived(
-      left !== undefined && left !== null
-         ? transformCoords([left], axes.tX())
-         : null
+   const lx = $derived(
+      left !== undefined && left !== null ? checkCoords([left], 'TextLegend (left)') : null
    );
-   const y = $derived(
-      top !== undefined && top !== null
-         ? transformCoords([top], axes.tY())
-         : 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>

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`.

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,18 +15,16 @@
    - `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>

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 = '',
@@ -46,6 +47,7 @@
    // check user defined coordinates
    const ux = $derived(checkCoords(xValues, 'Mesh (3D)'));
    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)) {
@@ -184,16 +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:${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:${colors[mesh.color2.v[i]]};`} />
    {/each}
-{/if}
 </g>
+{/if}

package/src/3d/Points.svelte

@@ -2,18 +2,18 @@
 @component Adds a series of points (markers).
 
    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.
    - `marker` - marker number (from 1 to 8), default: `1`.
    - `faceColor` - face (fill) color of the markers, default: `'transparent'`.
-   - `borderColor` - color markers' borders, default: `Colors.PRIMARY`.
+   - `borderColor` - color of the markers' borders, default: `Colors.PRIMARY`.
    - `borderWidth` - width (thickness) of the markers' borders in pixels, default: `1`.
    - `markerSize` - size of the markers in em, default: `1`.
-   - `title` - title of the line series group.
+   - `title` - title of the point series group, default: `''`.
 
    Example:
-   ```jsx
+   ```svelte
    <script>
       import { Axes, Points } from 'svelte-plots-basic/3d';
 
@@ -46,8 +46,8 @@
 
    // reactive variables for coordinates of data points in pixels (and line style)
    const markerSymbol = $derived.by(() => {
-      if (typeof(marker) !== "number" || marker < 1 || marker > MARKER_SYMBOLS.length) {
-         console.error(`Points (3D): parameter 'marker' must be a number from 1 to ${MARKER_SYMBOLS.length}."`);
+      if (!Number.isInteger(marker) || marker < 1 || marker > MARKER_SYMBOLS.length) {
+         console.error(`Points (3D): parameter "marker" must be a whole number from 1 to ${MARKER_SYMBOLS.length}.`);
          return null;
       }
 
@@ -66,7 +66,6 @@
 
 <style>
    :global(.series-scatter > text) {
-      font-size: 1em;
       cursor: default;
    }