@stocksharp/diagram 0.2.3 → 0.4.0

package/dist/esm/canvas-renderer.js

@@ -5,6 +5,8 @@
 // selection, delete, zoom/pan, load/save round-trip.
 import { createDiagramDocument, parseDiagramDocument } from './core/document.js';
 import { DiagramCommandHistory } from './core/history.js';
+import { setJsonKey } from './core/json.js';
+import { toPortDynamicMode } from './core/model.js';
 import { cloneDiagramRuntimeState, createDiagramNodeRuntimeState, createDiagramPortRuntimeState, createDiagramRuntimeState, createEditableDiagramPermissions, createReadOnlyDiagramPermissions, } from './core/state.js';
 const SCREEN_RENDER_OPTIONS = {
     grid: true,
@@ -26,7 +28,7 @@ function copyJsonObject(value) {
         return {};
     const result = {};
     for (const [key, item] of Object.entries(value))
-        result[key] = copyJsonValue(item);
+        setJsonKey(result, key, copyJsonValue(item));
     return result;
 }
 function copyParameters(value) {
@@ -65,7 +67,7 @@ export class PortModel {
         this.maxLinks = typeof init.maxLinks === 'number' ? init.maxLinks : 0;
         this.availableTypes = [...(init.availableTypes ?? [])];
         this.isDynamic = init.isDynamic ?? false;
-        this.dynamicMode = init.dynamicMode ?? '';
+        this.dynamicMode = toPortDynamicMode(init.dynamicMode);
         this.isSibling = init.isSibling ?? false;
         this.metadata = copyJsonObject(init.metadata);
     }
@@ -141,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);
     }
@@ -157,14 +160,13 @@ export class LinkModel {
             fromPort: this.fromPort,
             to: this.to,
             toPort: this.toPort,
+            style: this.style,
             metadata: copyJsonObject(this.metadata),
         };
     }
 }
-const HEADER_H = 22;
 const PORT_R = 6;
 const PORT_ROW_H = 20;
-const NODE_PAD = 10;
 const RELINK_HANDLE_PX = 8; // WPF relink adornment is an 8x8 diamond
 const RELINK_DRAG_THRESHOLD_PX = 4;
 const PORT_SQ = 9; // socket square size — sits outside the node
@@ -219,6 +221,7 @@ export class Diagram {
     constructor(opts) {
         this.nodes = [];
         this.links = [];
+        this.zones = [];
         this.idSeq = 1;
         this.linkSeq = 1;
         this.documentMetadata = {};
@@ -241,8 +244,6 @@ export class Diagram {
         this.dragNode = null;
         this.dragStart = []; // group-drag origin
         this.dragAnchor = { wx: 0, wy: 0 };
-        this.dragDX = 0;
-        this.dragDY = 0;
         this.panning = false;
         this.panX = 0;
         this.panY = 0;
@@ -567,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);
@@ -894,7 +895,7 @@ export class Diagram {
             if (value === undefined)
                 delete node.paramValues[name];
             else
-                node.paramValues[name] = value;
+                setJsonKey(node.paramValues, name, value);
         });
     }
     setShowNodeMessages(show) {
@@ -977,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);
         }
@@ -985,7 +986,7 @@ export class Diagram {
             if (node.loadError.length === 0)
                 continue;
             const state = createDiagramNodeRuntimeState();
-            state.error = { kind: 'load', message: node.loadError, pulse: ++this.runtimePulse };
+            state.errors.load = { kind: 'load', message: node.loadError, pulse: ++this.runtimePulse };
             this.runtimeState.nodes[node.id] = state;
         }
         if (Object.keys(this.runtimeState.nodes).length > 0)
@@ -1009,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() {
@@ -1020,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,
         });
     }
@@ -1190,14 +1195,16 @@ export class Diagram {
         else if (previous.globalError?.pulse !== this.runtimeState.globalError.pulse) {
             this.globalErrorFlashStart = performance.now();
         }
-        this.runtimePulse = Math.max(this.runtimePulse, this.runtimeState.globalError?.pulse ?? 0, ...Object.values(this.runtimeState.nodes).map((node) => node.error?.pulse ?? 0));
+        this.runtimePulse = Math.max(this.runtimePulse, this.runtimeState.globalError?.pulse ?? 0, ...Object.values(this.runtimeState.nodes)
+            .flatMap((node) => [node.errors.runtime?.pulse ?? 0, node.errors.load?.pulse ?? 0]));
         for (const node of this.nodes) {
-            const error = this.runtimeState.nodes[node.id]?.error ?? null;
-            const previousError = previous.nodes[node.id]?.error ?? null;
-            node.runtimeError = error?.kind === 'runtime' ? error.message : '';
-            node.loadError = error?.kind === 'load' ? error.message : '';
-            if (error?.kind === 'runtime') {
-                if (previousError?.kind !== 'runtime' || previousError.pulse !== error.pulse) {
+            const errors = this.runtimeState.nodes[node.id]?.errors;
+            const previousRuntime = previous.nodes[node.id]?.errors.runtime;
+            const runtimeError = errors?.runtime;
+            node.runtimeError = runtimeError?.message ?? '';
+            node.loadError = errors?.load?.message ?? '';
+            if (runtimeError !== undefined) {
+                if (previousRuntime === undefined || previousRuntime.pulse !== runtimeError.pulse) {
                     node.errorFlashStart = performance.now();
                 }
             }
@@ -1257,7 +1264,14 @@ export class Diagram {
         const state = this.getRuntimeState();
         const nodeState = state.nodes[id] ?? createDiagramNodeRuntimeState();
         state.nodes[id] = nodeState;
-        nodeState.error = message.length === 0 ? null : { kind, message, pulse: ++this.runtimePulse };
+        // Only this kind's slot is written, so an error of the other kind that is
+        // already on the node survives.
+        if (message.length === 0)
+            delete nodeState.errors[kind];
+        else if (kind === 'load')
+            nodeState.errors.load = { kind, message, pulse: ++this.runtimePulse };
+        else
+            nodeState.errors.runtime = { kind, message, pulse: ++this.runtimePulse };
         this.runtimeState = state;
         this.emitRuntimeStateChanged();
         return true;
@@ -1274,12 +1288,11 @@ export class Diagram {
             node.loadError = '';
         const state = this.getRuntimeState();
         const nodeState = state.nodes[id];
-        if (nodeState !== undefined && (kind === undefined || nodeState.error?.kind === kind)) {
-            nodeState.error = node.runtimeError.length > 0
-                ? { kind: 'runtime', message: node.runtimeError, pulse: ++this.runtimePulse }
-                : node.loadError.length > 0
-                    ? { kind: 'load', message: node.loadError, pulse: ++this.runtimePulse }
-                    : null;
+        if (nodeState !== undefined) {
+            if (kind === undefined || kind === 'runtime')
+                delete nodeState.errors.runtime;
+            if (kind === undefined || kind === 'load')
+                delete nodeState.errors.load;
         }
         this.runtimeState = state;
         this.emitRuntimeStateChanged();
@@ -2382,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;
@@ -2404,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];
@@ -2571,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;
@@ -2712,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();
@@ -2775,6 +2825,7 @@ export class Diagram {
             }
         }
         ctx.stroke();
+        ctx.setLineDash([]);
     }
     drawArrow(pts, color) {
         const n = pts.length;