@stocksharp/diagram 1.2.2 → 1.3.0

package/dist/esm/canvas-renderer.js

@@ -1,5 +1,5 @@
 import { SvgSurface } from './svg-surface.js';
-import { readableTextOn } from './color.js';
+import { readableOutlineOn, readableTextOn } from './color.js';
 // Internal dependency-free canvas renderer used by StockSharpDiagram.
 //
 // Dependency-free, pure 2D canvas. Demonstrates the hard parts: typed
@@ -227,6 +227,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 = [];
@@ -2671,8 +2673,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;
@@ -3033,7 +3039,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;