@stocksharp/diagram 0.1.0 → 0.2.0

package/README.md

@@ -11,6 +11,7 @@ renderer, read-only web embed, and versioned diagram document model.
 ![StockSharp JS Strategy Diagram — visual strategy editor with typed connections and element palette](sample.png)
 
 [Live demo](https://stocksharp.github.io/Diagram/demo/) ·
+[StockSharp website](https://stocksharp.com/) ·
 [GitHub repository](https://github.com/StockSharp/Diagram) ·
 [Issue tracker](https://github.com/StockSharp/Diagram/issues)
 
@@ -312,6 +313,9 @@ npm run build
 npm run serve
 npm run pack:check
 npm run release:check -- v0.1.0
+npm run release:patch
+npm run release:minor
+npm run release:major
 npm run api:check
 npm run api:update  # only after reviewing an intentional public API change
 npm run test:browser
@@ -326,10 +330,19 @@ CI verifies type checking, the reviewed declaration snapshot, unit/integration
 tests, Chromium smoke/interaction/lifecycle checks, all bundles and tarball
 contents. GitHub Pages publishes the demo from `main`.
 
-Publishing is release-driven. Set `package.json` to the intended version and
-publish a GitHub Release tagged `v<version>`. The `release.yml` workflow rejects
-a mismatched tag, rebuilds and tests the repository, attaches the exact `.tgz`
-artifact to the release, and publishes that tarball to npm with provenance.
+Publishing is tag-driven. Create the version commit and tag, then push both:
+
+```sh
+npm run release:patch
+git push origin main --follow-tags
+```
+
+Use `release:minor` or `release:major` when appropriate. A pushed `v<version>`
+tag starts `release.yml`, which rejects a mismatched version, rebuilds and tests
+the repository, creates the GitHub Release, attaches the exact `.tgz` artifact,
+and publishes that tarball to npm with provenance. A failed publication can be
+retried for the existing tag through the workflow's `Run workflow` action;
+already-published versions are detected and skipped.
 
 The first publication needs a short-lived npm granular access token in the
 repository Actions secret `NPM_TOKEN`. After `@stocksharp/diagram` exists on npm,

package/dist/esm/canvas-renderer.js

@@ -170,6 +170,7 @@ const RELINK_DRAG_THRESHOLD_PX = 4;
 const PORT_SQ = 9; // socket square size — sits outside the node
 const LINK_STUB = 22; // min horizontal lead-in/out before the elbow
 const LINK_HOP = 5; // jump-over arc radius at crossings
+const LINK_CORNER = 8; // corner rounding radius at elbows
 const SNAP_PX = 32; // plug↔socket magnet radius (screen px)
 const DEFAULT_GRID_SIZE = 28;
 const ZOOM_MIN = 0.15;
@@ -1345,6 +1346,8 @@ export class Diagram {
             this.opts.gridColor = t.gridColor;
         if (t.linkMaxLightness !== undefined)
             this.opts.linkMaxLightness = t.linkMaxLightness;
+        if (t.typedLinkColors !== undefined)
+            this.opts.typedLinkColors = t.typedLinkColors;
         if (t.overviewBackground !== undefined)
             this.opts.overviewBackground = t.overviewBackground;
         if (t.overviewBorderColor !== undefined)
@@ -1455,6 +1458,16 @@ export class Diagram {
         const base = map[type] ?? `hsl(${hashHue(type)}, 62%, 58%)`;
         return maxL !== undefined ? clampLightness(base, maxL) : base;
     }
+    // Selection/hover accent. The dark-canvas blue washes out on a light canvas, so a light theme
+    // (linkMaxLightness < 0.5) inverts to a darker, more saturated blue that stays clearly visible.
+    selectionColor() {
+        const maxL = this.opts.linkMaxLightness;
+        return maxL !== undefined && maxL < 0.5 ? '#0d6efd' : '#4aa3ff';
+    }
+    linkHoverColor() {
+        const maxL = this.opts.linkMaxLightness;
+        return maxL !== undefined && maxL < 0.5 ? '#6aa9f0' : '#cfe3ff';
+    }
     // ---- hit testing (world coords) ---------------------------------
     portAt(wx, wy) {
         for (let i = this.nodes.length - 1; i >= 0; i -= 1) {
@@ -2379,14 +2392,16 @@ export class Diagram {
             if (a === null || b === null)
                 continue;
             const fp = this.nodes.find((n) => n.id === l.from)?.outPorts.find((p) => p.id === l.fromPort);
-            const baseColor = fp ? this.portColor(fp.type) : '#7d828a';
+            const baseColor = (this.opts.typedLinkColors ?? false) && fp !== undefined
+                ? this.portColor(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' ? '#4aa3ff' : state === 'hov' ? '#cfe3ff' : baseColor;
+            const color = state === 'sel' ? this.selectionColor() : state === 'hov' ? this.linkHoverColor() : baseColor;
             const width = state === 'sel' ? 3 : state === 'hov' ? 2.6 : 2;
             const pts = this.routeLink(a, b, new Set([l.from, l.to]));
             this.strokeRoute(pts, color, width, prior);
@@ -2599,7 +2614,7 @@ export class Diagram {
         ctx.fillStyle = hasLoadError ? ERROR_BACKGROUND : active ? '#ffd1dc' : n.color;
         ctx.fill();
         ctx.lineWidth = selected ? 2 : 1.5;
-        ctx.strokeStyle = selected ? '#4aa3ff' : n.border;
+        ctx.strokeStyle = selected ? this.selectionColor() : n.border;
         ctx.stroke();
         if (hasLoadError || hasRuntimeError) {
             let alpha = 1;
@@ -2706,6 +2721,20 @@ export class Diagram {
         ctx.beginPath();
         ctx.moveTo(pts[0][0], pts[0][1]);
         const H = LINK_HOP;
+        // End a segment at its elbow with a rounded corner toward the next point (arcTo), clamped so it never
+        // eats more than half of either adjacent segment. The final segment ends straight into the port.
+        const finish = (i, x1, y1, x2, y2) => {
+            if (i < pts.length - 1) {
+                const nx = pts[i + 1][0];
+                const ny = pts[i + 1][1];
+                const seg1 = Math.abs(x2 - x1) + Math.abs(y2 - y1);
+                const seg2 = Math.abs(nx - x2) + Math.abs(ny - y2);
+                ctx.arcTo(x2, y2, nx, ny, Math.min(LINK_CORNER, seg1 / 2, seg2 / 2));
+            }
+            else {
+                ctx.lineTo(x2, y2);
+            }
+        };
         for (let i = 1; i < pts.length; i += 1) {
             const [x1, y1] = pts[i - 1];
             const [x2, y2] = pts[i];
@@ -2723,7 +2752,7 @@ export class Diagram {
                     else
                         ctx.arc(cx, y1, H, 0, Math.PI, true);
                 }
-                ctx.lineTo(x2, y2);
+                finish(i, x1, y1, x2, y2);
             }
             else if (x1 === x2 && y1 !== y2) {
                 const dir = y2 > y1 ? 1 : -1;
@@ -2739,7 +2768,7 @@ export class Diagram {
                     else
                         ctx.arc(x1, cy, H, Math.PI / 2, -Math.PI / 2, true);
                 }
-                ctx.lineTo(x2, y2);
+                finish(i, x1, y1, x2, y2);
             }
             else {
                 ctx.lineTo(x2, y2);