@stocksharp/diagram 1.3.0 → 1.4.0

package/dist/esm/canvas-renderer.js

@@ -1,5 +1,5 @@
 import { SvgSurface } from './svg-surface.js';
-import { readableOutlineOn, readableTextOn } from './color.js';
+import { cappedLightness, legibleOn, readableOutlineOn, readableTextOn } from './color.js';
 // Internal dependency-free canvas renderer used by StockSharpDiagram.
 //
 // Dependency-free, pure 2D canvas. Demonstrates the hard parts: typed
@@ -202,10 +202,7 @@ function hashHue(s) {
 // wash out; a light theme passes a low ceiling to darken the links just enough to stay readable
 // while keeping each hue distinct. Non-hsl inputs are returned untouched.
 function clampLightness(color, maxL) {
-    const m = color.match(/^hsl\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%\s*\)$/i);
-    if (m === null)
-        return color;
-    return `hsl(${m[1]}, ${m[2]}%, ${Math.min(+m[3], maxL * 100)}%)`;
+    return cappedLightness(color, maxL);
 }
 function colorLuminance(color) {
     if (color === undefined)
@@ -1691,6 +1688,15 @@ export class Diagram {
             return p.type;
         return this.portFeed.get(p) ?? p.type;
     }
+    /// A type's colour as a wire.
+    ///
+    /// The same colour a socket of that type is filled with, moved into the band the canvas
+    /// leaves room for. A socket can afford the host's exact colour because it is a filled
+    /// square with an outline; a wire is a thin line with nothing behind it, and one drawn in
+    /// #000000 on a dark canvas is not there at all.
+    linkColor(type) {
+        return legibleOn(this.portColor(type), this.opts.background ?? '#1b1b1f');
+    }
     portColor(type) {
         const maxL = this.opts.linkMaxLightness;
         const light = maxL !== undefined && maxL < 0.5;
@@ -2710,7 +2716,7 @@ export class Diagram {
                 continue;
             const fp = this.nodes.find((n) => n.id === l.from)?.outPorts.find((p) => p.id === l.fromPort);
             const baseColor = (this.opts.typedLinkColors ?? false) && fp !== undefined
-                ? this.portColor(fp.type)
+                ? this.linkColor(fp.type)
                 : this.portColor('');
             const state = options.selection && l === this.selectedLink
                 ? 'sel'
@@ -3225,7 +3231,7 @@ export class Diagram {
         if (snapped !== null)
             excludedNodes.add(snapped.node.id);
         const points = this.routeLink(a, b, excludedNodes);
-        ctx.strokeStyle = this.portColor(colorType);
+        ctx.strokeStyle = this.linkColor(colorType);
         if (snapped !== null) {
             ctx.setLineDash([]);
             ctx.lineWidth = 2.6;