@stocksharp/diagram 1.2.3 → 1.4.0

package/dist/esm/color.js

@@ -106,4 +106,95 @@ export function readableTextOn(fill) {
         ? LIGHT_TEXT
         : DARK_TEXT;
 }
+// Opaque on purpose: a translucent edge takes part of its colour from the fill underneath, so
+// two sockets side by side end up with visibly different edges and the one rule looks like two.
+const DARK_OUTLINE = '#3a3d45';
+const LIGHT_OUTLINE = '#c8ccd4';
+/// Outline colour for a shape drawn on `surface`.
+///
+/// A socket is filled with its type's colour, which comes from the host and spans the whole
+/// range -- StockSharp sends #000000 for Any. What the outline has to separate the socket
+/// from is the canvas, so it is measured against the canvas: one outline for every socket on
+/// it, and none of them left without an edge. Choosing per fill instead would edge two
+/// neighbouring sockets differently, which reads as a mistake rather than as a rule.
+///
+/// A surface this cannot read keeps the dark outline, for the same reason the title stays
+/// dark: the canvas shipped so far is dark, and a light outline on a light one would vanish.
+export 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;
+}
+/// A colour's hue, saturation and lightness, or null when it cannot be read.
+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];
+}
+/// Lightest a colour may be drawn on a light canvas, and darkest on a dark one. Wide enough
+/// that a hue is still itself, narrow enough that neither end of the palette disappears.
+const DARK_CANVAS_FLOOR = 0.42;
+const LIGHT_CANVAS_CEILING = 0.45;
+/// The same colour, moved into the band the canvas leaves room for.
+///
+/// A socket type's colour belongs to the host and spans the whole range -- StockSharp sends
+/// #000000 for Any and near-white for Side. As a socket that is fine: it is a filled square
+/// with an outline. As a wire it is a thin line with nothing behind it, so a colour at the
+/// same end of the range as the canvas cannot be seen at all. Only the lightness moves; the
+/// hue and saturation are the host's answer to which type this is, and are left alone.
+///
+/// A colour that already sits in the band is returned exactly as it came, and one that cannot
+/// be read is passed through: guessing at it would be worse than drawing what was asked for.
+export 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 * 1000) / 10}%, ${Math.round(moved * 1000) / 10}%)`;
+}
+/// The same colour with its lightness capped at `maxLightness` (0..1), hue and saturation kept.
+///
+/// Any colour, not only one already written as hsl(): a host's palette arrives as hex, and a
+/// ceiling that only understood one notation left exactly those colours uncapped -- so a light
+/// theme darkened the hues the control invents and left the ones it was given.
+///
+/// A colour that cannot be read is returned untouched.
+export 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 * 1000) / 10}%, ${Math.round(maxLightness * 1000) / 10}%)`;
+}
 //# sourceMappingURL=color.js.map

package/dist/esm/color.js.map

@@ -1 +1 @@
-{"version":3,"file":"color.js","sourceRoot":"","sources":["../../src/color.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"color.js","sourceRoot":"","sources":["../../src/color.ts"],"names":[],"mappings":"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"}

package/dist/ssdiagram-headless.js

@@ -410,6 +410,54 @@ var SSDiagramHeadless = (() => {
       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/json.ts
   function setJsonKey(target, key, value) {
@@ -1187,9 +1235,7 @@ var SSDiagramHeadless = (() => {
     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;
@@ -1206,6 +1252,8 @@ var SSDiagramHeadless = (() => {
   }
   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 = [];
@@ -2516,6 +2564,15 @@ var SSDiagramHeadless = (() => {
       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;
@@ -3355,8 +3412,10 @@ var SSDiagramHeadless = (() => {
     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) {
@@ -3385,7 +3444,7 @@ var SSDiagramHeadless = (() => {
         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;
@@ -3681,7 +3740,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;
@@ -3833,7 +3892,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;