@stocksharp/diagram 1.2.3 → 1.4.0

package/dist/esm/canvas-renderer.js

@@ -1,5 +1,5 @@
 import { SvgSurface } from './svg-surface.js';
-import { 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)
@@ -227,6 +224,8 @@ function colorLuminance(color) {
 }
 export class Diagram {
     constructor(opts) {
+        /// Outline every socket is edged with, refreshed from the background each draw.
+        this.portOutline = readableOutlineOn('#1b1b1f');
         this.nodes = [];
         this.links = [];
         this.zones = [];
@@ -1689,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;
@@ -2671,8 +2679,12 @@ export class Diagram {
     draw(options = SCREEN_RENDER_OPTIONS) {
         const ctx = this.ctx;
         ctx.clearRect(0, 0, this.width, this.height);
-        ctx.fillStyle = this.opts.background ?? '#1b1b1f';
+        const background = this.opts.background ?? '#1b1b1f';
+        ctx.fillStyle = background;
         ctx.fillRect(0, 0, this.width, this.height);
+        // Read here rather than per socket: an export swaps the background for the duration of
+        // one draw, so this is the only point that sees the colour the sockets land on.
+        this.portOutline = readableOutlineOn(background);
         // Entrance animation — scheme rises from below + fades in over
         // the opaque background.
         let introDy = 0;
@@ -2704,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'
@@ -3033,7 +3045,7 @@ export class Diagram {
         ctx.fillStyle = this.portColor(this.portFillType(p));
         ctx.fill();
         ctx.lineWidth = magnet ? 1.5 : 1;
-        ctx.strokeStyle = magnet ? '#ffffff' : 'rgba(12,12,16,0.55)';
+        ctx.strokeStyle = magnet ? '#ffffff' : this.portOutline;
         ctx.stroke();
         const runtimeSelected = runtime?.selected === true || (options.selection && this.selectedPort?.port === p);
         const breakpoint = runtime?.breakpoint === true;
@@ -3219,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;