@stocksharp/diagram 1.2.3 → 1.4.0

package/dist/ssdiagram.js

@@ -865,6 +865,54 @@ var SSDiagram = (() => {
       return DARK_TEXT;
     return contrast(background, relativeLuminance(LIGHT_TEXT)) > contrast(background, relativeLuminance(DARK_TEXT)) ? LIGHT_TEXT : DARK_TEXT;
   }
+  var DARK_OUTLINE = "#3a3d45";
+  var LIGHT_OUTLINE = "#c8ccd4";
+  function readableOutlineOn(surface) {
+    const background = relativeLuminance(surface);
+    if (background < 0)
+      return DARK_OUTLINE;
+    return contrast(background, relativeLuminance(LIGHT_OUTLINE)) > contrast(background, relativeLuminance(DARK_OUTLINE)) ? LIGHT_OUTLINE : DARK_OUTLINE;
+  }
+  function toHsl(color) {
+    const hsl = color.trim().match(/^hsl\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%\s*\)$/i);
+    if (hsl !== null)
+      return [+hsl[1], +hsl[2] / 100, +hsl[3] / 100];
+    const rgb = parseRgb(color);
+    if (rgb === null)
+      return null;
+    const [r, g, b] = rgb.map((channel) => channel / 255);
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const lightness = (max + min) / 2;
+    if (max === min)
+      return [0, 0, lightness];
+    const span = max - min;
+    const saturation = lightness > 0.5 ? span / (2 - max - min) : span / (max + min);
+    const hue = max === r ? (g - b) / span + (g < b ? 6 : 0) : max === g ? (b - r) / span + 2 : (r - g) / span + 4;
+    return [hue * 60, saturation, lightness];
+  }
+  var DARK_CANVAS_FLOOR = 0.42;
+  var LIGHT_CANVAS_CEILING = 0.45;
+  function legibleOn(color, background) {
+    const hsl = toHsl(color);
+    if (hsl === null)
+      return color;
+    const canvas = relativeLuminance(background);
+    const [hue, saturation, lightness] = hsl;
+    const moved = canvas < 0 ? lightness : canvas > 0.18 ? Math.min(lightness, LIGHT_CANVAS_CEILING) : Math.max(lightness, DARK_CANVAS_FLOOR);
+    if (moved === lightness && /^hsl/i.test(color.trim()))
+      return color;
+    return `hsl(${Math.round(hue * 10) / 10}, ${Math.round(saturation * 1e3) / 10}%, ${Math.round(moved * 1e3) / 10}%)`;
+  }
+  function cappedLightness(color, maxLightness) {
+    const hsl = toHsl(color);
+    if (hsl === null)
+      return color;
+    const [hue, saturation, lightness] = hsl;
+    if (lightness <= maxLightness)
+      return color;
+    return `hsl(${Math.round(hue * 10) / 10}, ${Math.round(saturation * 1e3) / 10}%, ${Math.round(maxLightness * 1e3) / 10}%)`;
+  }
 
   // src/core/history.ts
   var DiagramCommandHistory = class {
@@ -1248,9 +1296,7 @@ var SSDiagram = (() => {
     return (h % 360 + 360) % 360;
   }
   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 === void 0) return 0;
@@ -1267,6 +1313,8 @@ var SSDiagram = (() => {
   }
   var Diagram = class {
     constructor(opts) {
+      /// Outline every socket is edged with, refreshed from the background each draw.
+      this.portOutline = readableOutlineOn("#1b1b1f");
       this.nodes = [];
       this.links = [];
       this.zones = [];
@@ -2577,6 +2625,15 @@ var SSDiagram = (() => {
       if (p.direction !== "in" || p.type === "" || !isWildcardPortType(p.type)) 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 !== void 0 && maxL < 0.5;
@@ -3416,8 +3473,10 @@ var SSDiagram = (() => {
     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);
+      this.portOutline = readableOutlineOn(background);
       let introDy = 0;
       let introAlpha = 1;
       if (options.transient && this.introStart !== null) {
@@ -3446,7 +3505,7 @@ var SSDiagram = (() => {
         const b = this.endpoint(l, "to");
         if (a === null || b === null) continue;
         const fp = this.nodes.find((n2) => n2.id === l.from)?.outPorts.find((p) => p.id === l.fromPort);
-        const baseColor = (this.opts.typedLinkColors ?? false) && fp !== void 0 ? this.portColor(fp.type) : this.portColor("");
+        const baseColor = (this.opts.typedLinkColors ?? false) && fp !== void 0 ? this.linkColor(fp.type) : this.portColor("");
         const state = options.selection && l === this.selectedLink ? "sel" : options.transient && (l === this.hoveredLink || hoveredNode !== null && (l.from === hoveredNode.id || l.to === hoveredNode.id)) ? "hov" : "norm";
         const color = state === "sel" ? this.selectionColor() : state === "hov" ? this.linkHoverColor() : baseColor;
         const width = state === "sel" ? 3 : state === "hov" ? 2.6 : 2;
@@ -3742,7 +3801,7 @@ ${runtime.error}`;
       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;
@@ -3894,7 +3953,7 @@ ${runtime.error}`;
       }
       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;