svelte-plots-basic 3.0.1 → 3.0.3

package/package.json

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

package/src/2d/Axes.svelte

@@ -62,8 +62,8 @@
    /* handler for mouse  events */
    function handleMouse(e, f) {
       if (f && e.target.id == "axes-box") {
-         const x = invTransformCoords([e.offsetX - fontSize * 1.5], tX)[0];
-         const y = invTransformCoords([e.offsetY], tY)[0];
+         const x = invTransformCoords([e.offsetX - left], tX)[0];
+         const y = invTransformCoords([e.offsetY - top], tY)[0];
          f(x, y);
       }
    }
@@ -363,8 +363,22 @@
             -webkit-user-select: none;
          }
 
+         .series-points1 text,
+         .series-points1 tspan {
+            dominant-baseline: middle;
+            alignment-baseline: middle;
+         }
+
+         .series-points2 text,
+         .series-points2 tspan {
+            dominant-baseline: central;
+            alignment-baseline: central;
+         }
+
          .series-text text,
          .series-text tspan {
+            dominant-baseline: middle;
+            alignment-baseline: middle;
             text-anchor: middle;
             user-select: none;
             -webkit-user-select: none;

package/src/2d/Points.svelte

@@ -68,10 +68,8 @@
        `fill:${faceColor};stroke-width:${lineWidth}px;stroke:${lineColor}; font-size:${markerSize}em;`
    );
 
-   const alignStyleStr = $derived(['◼', '⬥', '＋', '✳', '✕'].includes(markerSymbol)  ?
-       `dominant-baseline:central;alignment-baseline:mathematical;` :
-       `dominant-baseline:middle;alignment-baseline:middle;`
-   );
+   const className = $derived(['◼', '⬥', '＋', '✳', '✕'].includes(markerSymbol)  ? 'series-points2' : 'series-points1');
+
    // check if all coordinates are correct
    const isOk = $derived(x && y && x.length === y.length);
 </script>
@@ -80,7 +78,7 @@
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <g onclick={(e) => handleClick(e, 'text', onclick)}
-   class="series series-points" style={textStyleStr + alignStyleStr} text-anchor="middle">
+   class="series series-points {className}" style={textStyleStr} text-anchor="middle">
    {#each x as v, i}
       <text x={x[i]} y={y[i]}>{markerSymbol}</text>
    {/each}

package/src/2d/TextLabels.svelte

@@ -10,7 +10,6 @@
    - `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`.
-   - `className`- CSS class name for the labels group, default: `'series-text'`.
    - `rotateAngle`- angle to rotate labels, default: `0`.
    - `onclick` - function (callback) to be called when user clicks on a label.
 
@@ -42,8 +41,8 @@
       labels,                              // array with labels (strings)
       pos = 0,                             // position of labels related to coordinates (middle, bottom, left, top, right)
       faceColor = Colors.PRIMARY_TEXT,     // face color of label symbols
-      lineColor = 'transparent',         // border colors of label symbols
-      lineWidth = 0,                     // border width of label symbols
+      lineColor = 'transparent',           // border colors of label symbols
+      lineWidth = 0,                       // border width of label symbols
       textSize = 1,                        // size of label symbols
       rotateAngle = 0,                     // angle to rotate labels
       onclick,                             // function to be called if onclick event fires
@@ -87,8 +86,8 @@
 
    // define x and y shifts for positioning
    const m = $derived(LABELS_MARGIN[axes.scales().plot]);
-   const dx = $derived([0, 0, m,  0, -m, m]);
-   const dy = $derived([0, m, 0, -m, 0, m]);
+   const dx = $derived([0, 0, -m,  0, m, m]);
+   const dy = $derived([0, m,  0, -m, 0, m]);
 
    // styles for the elements
    const textStyleStr = $derived(`fill:${faceColor};stroke-width:${lineWidth}px;stroke:${lineColor};font-size:${textSize}em;`);
@@ -113,13 +112,17 @@
    {: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]]} text-anchor={textAnchors[pos[i]]}>{@html labels[i]}</text>
+         <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]})` : ''}
+            text-anchor={textAnchors[pos[i]]}>{@html labels[i]}</text>
       {/each}
 
    {:else}
 
       {#each x as v, i}
-         <text data-id={i} x={x[i]} y={y[i]} dx={dx[pos]} dy={dy[pos]} text-anchor={textAnchors[pos]}>{@html labels[i]}</text>
+         <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]}>{@html labels[i]}</text>
       {/each}
 
    {/if}