@stocksharp/diagram 0.3.0 → 0.4.1

package/dist/esm/canvas-renderer.js

@@ -143,11 +143,12 @@ export class NodeModel {
     }
 }
 export class LinkModel {
-    constructor(from, fromPort, to, toPort, id = '', metadata) {
+    constructor(from, fromPort, to, toPort, id = '', metadata, style = 'solid') {
         this.from = from;
         this.fromPort = fromPort;
         this.to = to;
         this.toPort = toPort;
+        this.style = style;
         this.id = id;
         this.metadata = copyJsonObject(metadata);
     }
@@ -159,6 +160,7 @@ export class LinkModel {
             fromPort: this.fromPort,
             to: this.to,
             toPort: this.toPort,
+            style: this.style,
             metadata: copyJsonObject(this.metadata),
         };
     }
@@ -219,6 +221,7 @@ export class Diagram {
     constructor(opts) {
         this.nodes = [];
         this.links = [];
+        this.zones = [];
         this.idSeq = 1;
         this.linkSeq = 1;
         this.documentMetadata = {};
@@ -565,7 +568,7 @@ export class Diagram {
             if (!validation.allowed)
                 return false;
         }
-        const link = new LinkModel(init.from, init.fromPort, init.to, init.toPort, init.id ?? this.nextLinkId(), init.metadata);
+        const link = new LinkModel(init.from, init.fromPort, init.to, init.toPort, init.id ?? this.nextLinkId(), init.metadata, init.style ?? 'solid');
         if (this.links.some((l) => l.id === link.id))
             return false;
         this.links.splice(clamp(Math.trunc(index), 0, this.links.length), 0, link);
@@ -975,7 +978,7 @@ export class Diagram {
             if (this.links.some((existing) => existing.id === id)) {
                 throw new Error(`ssdiagram: duplicate link id "${id}"`);
             }
-            const model = new LinkModel(link.from, link.fromPort, link.to, link.toPort, id, link.metadata);
+            const model = new LinkModel(link.from, link.fromPort, link.to, link.toPort, id, link.metadata, link.style ?? 'solid');
             if (!this.links.some((existing) => existing.key() === model.key()))
                 this.links.push(model);
         }
@@ -1007,8 +1010,10 @@ export class Diagram {
             fromPort: link.from.portId,
             to: link.to.nodeId,
             toPort: link.to.portId,
+            style: link.style,
             metadata: link.metadata,
         })));
+        this.zones = document.zones.map((zone) => ({ ...zone, metadata: copyJsonObject(zone.metadata) }));
         this.documentMetadata = copyJsonObject(document.metadata);
     }
     saveDocument() {
@@ -1018,8 +1023,10 @@ export class Diagram {
                 id: link.id,
                 from: { nodeId: link.from, portId: link.fromPort },
                 to: { nodeId: link.to, portId: link.toPort },
+                style: link.style,
                 metadata: link.metadata,
             })),
+            zones: this.zones.map((zone) => ({ ...zone, metadata: copyJsonObject(zone.metadata) })),
             metadata: this.documentMetadata,
         });
     }
@@ -2388,7 +2395,10 @@ export class Diagram {
         if (options.grid)
             this.drawGrid();
         ctx.setTransform(this.dpr * this.scale, 0, 0, this.dpr * this.scale, this.dpr * this.offX, this.dpr * (this.offY + introDy));
-        // Links first. Each link jumps over the verticals of the links
+        // Zones sit under everything: they say where things are, and a place that painted over
+        // its occupants would be worse than no place at all.
+        this.drawZones();
+        // Links next. Each link jumps over the verticals of the links
         // drawn before it (deterministic bridge — Link.JumpOver parity).
         const prior = []; // segments of links already drawn
         const hoveredNode = this.hoverPort?.node ?? this.hoverNode;
@@ -2410,7 +2420,7 @@ export class Diagram {
             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);
+            this.strokeRoute(pts, color, width, prior, l.style);
             this.drawArrow(pts, color);
             for (let k = 1; k < pts.length; k += 1) {
                 const [x1, y1] = pts[k - 1];
@@ -2577,6 +2587,37 @@ export class Diagram {
         }
         return lines.length > 0 ? lines : [''];
     }
+    drawZones() {
+        if (this.zones.length === 0)
+            return;
+        const ctx = this.ctx;
+        for (const zone of this.zones) {
+            const tint = zone.color.length > 0 ? zone.color : (this.opts.zoneColor ?? '#8a8f98');
+            ctx.save();
+            roundRect(ctx, zone.x, zone.y, zone.width, zone.height, 10);
+            ctx.globalAlpha = 0.12;
+            ctx.fillStyle = tint;
+            ctx.fill();
+            ctx.globalAlpha = 0.5;
+            ctx.setLineDash([10, 6]);
+            ctx.lineWidth = 1.5;
+            ctx.strokeStyle = tint;
+            ctx.stroke();
+            ctx.restore();
+            if (zone.name.length === 0)
+                continue;
+            ctx.save();
+            ctx.globalAlpha = 0.75;
+            ctx.fillStyle = tint;
+            ctx.font = '600 12px Segoe UI, Tahoma, sans-serif';
+            ctx.textAlign = 'left';
+            ctx.textBaseline = 'top';
+            // Inside the top-left corner: a caption outside the box would collide with whatever
+            // sits above it, and the corner is the one spot a rectangle always has to spare.
+            ctx.fillText(zone.name, zone.x + 12, zone.y + 9, Math.max(0, zone.width - 24));
+            ctx.restore();
+        }
+    }
     drawGrid() {
         const ctx = this.ctx;
         const step = this.gridSize * this.scale;
@@ -2718,10 +2759,13 @@ export class Diagram {
     // Symmetric jump-over: any segment of THIS link hops the perpendicular
     // segments of links drawn before it (H over earlier V, V over earlier
     // H). Exactly one bridge per real crossing, consistent everywhere.
-    strokeRoute(pts, color, width, prior) {
+    strokeRoute(pts, color, width, prior, style = 'solid') {
         const ctx = this.ctx;
         ctx.strokeStyle = color;
         ctx.lineWidth = width;
+        // The dash is measured in world units, so it keeps its rhythm as the canvas is zoomed.
+        if (style === 'dashed')
+            ctx.setLineDash([9, 6]);
         ctx.lineJoin = 'miter';
         ctx.lineCap = 'butt';
         ctx.beginPath();
@@ -2781,6 +2825,7 @@ export class Diagram {
             }
         }
         ctx.stroke();
+        ctx.setLineDash([]);
     }
     drawArrow(pts, color) {
         const n = pts.length;