@stocksharp/diagram 0.1.0 → 0.2.1

package/README.md

@@ -1,4 +1,4 @@
-# @stocksharp/diagram
+# StockSharp JS Strategy Diagram
 
 [![Build and test](https://github.com/StockSharp/Diagram/actions/workflows/ci.yml/badge.svg)](https://github.com/StockSharp/Diagram/actions/workflows/ci.yml)
 [![npm version](https://img.shields.io/npm/v/%40stocksharp%2Fdiagram.svg)](https://www.npmjs.com/package/@stocksharp/diagram)
@@ -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)
 
@@ -311,7 +312,9 @@ npm test
 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
@@ -323,23 +326,30 @@ The browser suite covers Chromium smoke, interaction and lifecycle scenarios
 at DPR 1 and 2.
 
 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`.
+tests, all bundles and tarball contents. The Playwright browser suite runs
+locally via `npm run test:browser` (not in CI — the headless unit tests already
+cover the same behaviour). 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.
-
-The first publication needs a short-lived npm granular access token in the
-repository Actions secret `NPM_TOKEN`. After `@stocksharp/diagram` exists on npm,
-configure tokenless trusted publishing, then remove the secret and revoke the
-bootstrap token:
+Publishing is driven by the version in `package.json`. `release.yml` runs on
+every push to `main` and publishes only when that version is not yet on npm, so
+an ordinary push is a no-op. To cut a release, bump the version and push:
 
 ```sh
-npm trust github @stocksharp/diagram --file release.yml --repo StockSharp/Diagram --allow-publish
+npm run release:patch   # or release:minor / release:major
+git push
 ```
 
+The new version triggers `release.yml`, which rebuilds and tests the repository,
+publishes to npm with provenance, then creates the `v<version>` tag and GitHub
+Release. A failed publication can be retried from the workflow's `Run workflow`
+action; already-published versions are detected and skipped.
+
+Publishing authenticates through npm **trusted publishing (OIDC)** — there is no
+`NPM_TOKEN` secret. The workflow grants `id-token: write`, and npm exchanges the
+GitHub OIDC token for a short-lived publish token. The npm Trusted Publisher is
+bound to the workflow filename `release.yml`, so do not rename that workflow
+without updating the trusted publisher configuration on npmjs first.
+
 ## License
 
 Copyright © 2010-present StockSharp Platform LLC and/or its affiliates. All

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);