@stocksharp/diagram 0.6.0 → 0.7.0

package/dist/esm/canvas-renderer.js

@@ -6,7 +6,7 @@ import { SvgSurface } from './svg-surface.js';
 // 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 { getJsonKey, 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 = {
@@ -275,15 +275,26 @@ export class Diagram {
         this.introStart = null;
         this.overviewVisible = true;
         this.ovDragging = false;
+        this.historyShortcut = (direction) => { if (direction === 'undo')
+            this.undo();
+        else
+            this.redo(); };
         this.ovGeo = null;
         this.validator = null;
         this.handlers = new Map();
         this.opts = opts;
+        // Same normalization setTypeColors applies, so a palette handed in at construction is
+        // keyed like one handed in later.
+        if (opts.typeColors !== undefined)
+            this.setTypeColorsInternal(opts.typeColors);
         this.host = opts.host;
         this.gridSnapEnabled = opts.gridSnap ?? false;
         this.gridSize = this.normalizeGridSize(opts.gridSize ?? DEFAULT_GRID_SIZE);
-        this.history = new DiagramCommandHistory(({ canUndo, canRedo }) => {
-            this.emit('undoStackChanged', { canUndo, canRedo });
+        this.history = new DiagramCommandHistory(() => {
+            // The gated values, not the raw stack: setInteractionPermissions and setReadOnly
+            // already publish canUndo()/canRedo(), and a toolbar fed the raw pair enabled its
+            // Undo button for a call that undo() would refuse.
+            this.emit('undoStackChanged', { canUndo: this.canUndo(), canRedo: this.canRedo() });
         });
         this.canvas = document.createElement('canvas');
         this.canvas.style.display = 'block';
@@ -691,6 +702,14 @@ export class Diagram {
     clear() {
         this.nodes = [];
         this.links = [];
+        // Zones belong to the document like everything else here. Leaving them behind meant a
+        // discarded strategy kept drawing its zones over the next one and, worse, saveDocument()
+        // wrote them into that unrelated strategy's file.
+        this.zones = [];
+        // Every other path that empties the selection announces it. Staying silent here left a
+        // host's property panel showing a node from the document that had just been thrown away.
+        const hadSelection = this.selectedNode !== null || this.selectedNodes.size > 0
+            || this.selectedLink !== null || this.selectedPort !== null;
         this.selectedNode = null;
         this.selectedNodes.clear();
         this.selectedLink = null;
@@ -700,6 +719,8 @@ export class Diagram {
         this.runtimePulse = 0;
         this.globalErrorFlashStart = null;
         this.history.clear();
+        if (hadSelection)
+            this.emitSelectionChanged();
         this.emitRuntimeStateChanged();
     }
     relink(linkId, next) {
@@ -970,6 +991,28 @@ export class Diagram {
         // Initial load is "model seed" — should NOT be undoable, and
         // shouldn't leave the user with 12 entries to Ctrl+Z through
         // before their stack reaches their first real action.
+        // Validate before applying anything. doAddNode returns silently on a duplicate id, so a
+        // second node with the same id simply vanished and every wire meant for it attached to the
+        // first -- a quietly miswired strategy. The link check used to sit mid-loop, which threw
+        // with the diagram already half loaded and no loadFinished.
+        const seenNodeIds = new Set();
+        for (const node of nodes) {
+            const id = node.id ?? '';
+            if (id === '')
+                continue;
+            if (seenNodeIds.has(id))
+                throw new Error(`ssdiagram: duplicate node id "${id}"`);
+            seenNodeIds.add(id);
+        }
+        const seenLinkIds = new Set();
+        for (const link of links) {
+            const id = link.id ?? '';
+            if (id === '')
+                continue;
+            if (seenLinkIds.has(id))
+                throw new Error(`ssdiagram: duplicate link id "${id}"`);
+            seenLinkIds.add(id);
+        }
         for (const node of nodes) {
             const id = node.id ?? this.nextNodeId();
             this.doAddNode({ ...node, id });
@@ -988,7 +1031,7 @@ export class Diagram {
                 continue;
             const state = createDiagramNodeRuntimeState();
             state.errors.load = { kind: 'load', message: node.loadError, pulse: ++this.runtimePulse };
-            this.runtimeState.nodes[node.id] = state;
+            setJsonKey(this.runtimeState.nodes, node.id, state);
         }
         if (Object.keys(this.runtimeState.nodes).length > 0)
             this.emitRuntimeStateChanged();
@@ -1000,7 +1043,15 @@ export class Diagram {
     save() {
         return {
             nodes: this.nodes.map((node) => node.toInit(false)),
-            links: this.links.map((l) => ({ from: l.from, fromPort: l.fromPort, to: l.to, toPort: l.toPort })),
+            links: this.links.map((l) => ({
+                id: l.id,
+                from: l.from,
+                fromPort: l.fromPort,
+                to: l.to,
+                toPort: l.toPort,
+                style: l.style,
+                metadata: copyJsonObject(l.metadata),
+            })),
         };
     }
     loadDocument(source) {
@@ -1068,7 +1119,20 @@ export class Diagram {
             overviewVisible: this.overviewVisible,
         };
     }
+    /**
+     * Replaces what Ctrl+Z / Ctrl+Y do. Passing null restores the built-in behaviour, which is
+     * plain undo()/redo() -- so a renderer used on its own keeps its keyboard history.
+     */
+    setHistoryShortcutHandler(handler) {
+        this.historyShortcut = handler ?? ((direction) => { if (direction === 'undo')
+            this.undo();
+        else
+            this.redo(); });
+    }
     setViewState(state) {
+        if (!Number.isFinite(state.zoom) || !Number.isFinite(state.panX) || !Number.isFinite(state.panY)) {
+            throw new RangeError('ssdiagram: view state zoom and pan must be finite numbers');
+        }
         this.scale = clamp(state.zoom, ZOOM_MIN, ZOOM_MAX);
         this.offX = state.panX;
         this.offY = state.panY;
@@ -1092,6 +1156,12 @@ export class Diagram {
             throw new RangeError(`ssdiagram: unsupported screenshot scope "${String(scope)}"`);
         }
         if (scope === 'viewport' && Object.keys(options).length === 0) {
+            // Mutations only schedule a repaint, so the bitmap on screen is still the previous
+            // frame until it lands. Copying it as-is handed back a picture of the state before the
+            // edit -- or a blank one right after construction -- while the very same call with any
+            // option took the redraw path and came out current.
+            if (this.drawScheduled)
+                this.draw();
             const copy = document.createElement('canvas');
             copy.width = this.canvas.width;
             copy.height = this.canvas.height;
@@ -1121,6 +1191,9 @@ export class Diagram {
             offY: this.offY,
             overviewVisible: this.overviewVisible,
             background: this.opts.background,
+            // Drawing the overview recomputes this from the export frame. Left behind, the next
+            // click on the on-screen minimap panned to a point in the export's coordinates.
+            ovGeo: this.ovGeo,
         };
         try {
             this.ctx = outputContext;
@@ -1152,6 +1225,7 @@ export class Diagram {
             this.offY = previous.offY;
             this.overviewVisible = previous.overviewVisible;
             this.opts.background = previous.background;
+            this.ovGeo = previous.ovGeo;
         }
         return output;
     }
@@ -1215,9 +1289,19 @@ export class Diagram {
             offX: this.offX,
             offY: this.offY,
             overviewVisible: this.overviewVisible,
+            background: this.opts.background,
+            // Drawing the overview recomputes this from the export frame. Left behind, the next
+            // click on the on-screen minimap panned to a point in the export's coordinates.
+            ovGeo: this.ovGeo,
         };
         try {
             this.ctx = surface;
+            // draw() fills the frame with the theme background unconditionally, straight over the
+            // backdrop the surface was given -- so passing the override to SvgSurface alone left it
+            // invisible and the SVG disagreed with the PNG of the same options. takeScreenshot
+            // swaps the theme value for the duration of the export; this does the same.
+            if (options.background !== undefined)
+                this.opts.background = options.background;
             this.width = width;
             this.height = height;
             // 1: an SVG has no device pixels to multiply by, and the viewBox carries the size.
@@ -1243,6 +1327,8 @@ export class Diagram {
             this.offX = previous.offX;
             this.offY = previous.offY;
             this.overviewVisible = previous.overviewVisible;
+            this.opts.background = previous.background;
+            this.ovGeo = previous.ovGeo;
         }
         return surface.toSvg();
     }
@@ -1273,8 +1359,8 @@ export class Diagram {
         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 errors = this.runtimeState.nodes[node.id]?.errors;
-            const previousRuntime = previous.nodes[node.id]?.errors.runtime;
+            const errors = getJsonKey(this.runtimeState.nodes, node.id)?.errors;
+            const previousRuntime = getJsonKey(previous.nodes, node.id)?.errors.runtime;
             const runtimeError = errors?.runtime;
             node.runtimeError = runtimeError?.message ?? '';
             node.loadError = errors?.load?.message ?? '';
@@ -1308,8 +1394,10 @@ export class Diagram {
         if (node === undefined || port === undefined)
             return false;
         const state = this.getRuntimeState();
-        const nodeState = state.nodes[nodeId] ?? createDiagramNodeRuntimeState();
-        state.nodes[nodeId] = nodeState;
+        // Node ids come from documents, so "__proto__" is reachable: a bare assignment there
+        // writes the prototype instead of creating an entry, and the next read of it throws.
+        const nodeState = getJsonKey(state.nodes, nodeId) ?? createDiagramNodeRuntimeState();
+        setJsonKey(state.nodes, nodeId, nodeState);
         const current = nodeState.ports[direction][portId] ?? createDiagramPortRuntimeState();
         nodeState.ports[direction][portId] = { ...current, ...patch };
         this.setRuntimeState(state);
@@ -1337,8 +1425,8 @@ export class Diagram {
                 : null;
         }
         const state = this.getRuntimeState();
-        const nodeState = state.nodes[id] ?? createDiagramNodeRuntimeState();
-        state.nodes[id] = nodeState;
+        const nodeState = getJsonKey(state.nodes, id) ?? createDiagramNodeRuntimeState();
+        setJsonKey(state.nodes, id, nodeState);
         // 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)
@@ -1362,7 +1450,7 @@ export class Diagram {
         if (kind === undefined || kind === 'load')
             node.loadError = '';
         const state = this.getRuntimeState();
-        const nodeState = state.nodes[id];
+        const nodeState = getJsonKey(state.nodes, id);
         if (nodeState !== undefined) {
             if (kind === undefined || kind === 'runtime')
                 delete nodeState.errors.runtime;
@@ -1384,6 +1472,10 @@ export class Diagram {
         this.selectNode(node);
     }
     setZoom(scale) {
+        // clamp() passes NaN straight through, and a NaN scale poisons offX/offY on the very next
+        // line -- after which hit-testing, drawing and saveViewState are all dead, permanently.
+        if (!Number.isFinite(scale))
+            throw new RangeError('ssdiagram: zoom must be a finite number');
         const cx = this.width / 2;
         const cy = this.height / 2;
         const wx = (cx - this.offX) / this.scale;
@@ -1424,9 +1516,21 @@ export class Diagram {
         this.scheduleDraw();
     }
     setTypeColors(colors) {
-        this.opts.typeColors = { ...colors };
+        this.setTypeColorsInternal(colors);
         this.scheduleDraw();
     }
+    /**
+     * Keyed the way port types are compared everywhere else. Connection compatibility is case- and
+     * space-insensitive, so an imported scheme spelling a socket "candle " connects to "Candle" and
+     * then fell through to a hash colour, showing one logical type in two colours in one diagram.
+     */
+    setTypeColorsInternal(colors) {
+        const normalized = {};
+        for (const [type, color] of Object.entries(colors)) {
+            setJsonKey(normalized, normalizePortType(type), color);
+        }
+        this.opts.typeColors = normalized;
+    }
     setTheme(t) {
         if (t.background !== undefined)
             this.opts.background = t.background;
@@ -1543,7 +1647,8 @@ export class Diagram {
         if (type === '')
             return light ? '#585c62' : '#9aa0a6';
         const map = this.opts.typeColors ?? {};
-        const base = map[type] ?? `hsl(${hashHue(type)}, 62%, 58%)`;
+        const normalized = normalizePortType(type);
+        const base = getJsonKey(map, normalized) ?? `hsl(${hashHue(normalized)}, 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
@@ -1558,12 +1663,18 @@ export class Diagram {
     }
     // ---- hit testing (world coords) ---------------------------------
     portAt(wx, wy) {
+        // Walks front to back and stops at the first node whose BODY covers the point, so a socket
+        // hidden underneath a node drawn on top of it can no longer win the hit test. Without that
+        // stop, clicking the visible body of the front node selected the one behind it, and on an
+        // output socket started dragging a wire out of a port that is not on screen.
         for (let i = this.nodes.length - 1; i >= 0; i -= 1) {
             const n = this.nodes[i];
             for (const p of [...n.inPorts, ...n.outPorts]) {
                 if ((wx - p.cx) ** 2 + (wy - p.cy) ** 2 <= (PORT_R + 4) ** 2)
                     return { node: n, port: p };
             }
+            if (wx >= n.x && wx <= n.x + n.w && wy >= n.y && wy <= n.y + n.h)
+                return null;
         }
         return null;
     }
@@ -1868,6 +1979,9 @@ export class Diagram {
                         fromPort: l.from.portId,
                         to: t,
                         toPort: l.to.portId,
+                        // The clipboard is built from saveDocument(), so it carries the style;
+                        // rebuilding without it silently turned every pasted dashed link solid.
+                        style: l.style,
                         metadata: l.metadata,
                     });
             }
@@ -1958,14 +2072,21 @@ export class Diagram {
             // move-beyond-tolerance, pointerup, or any other gesture.
             this.cancelLongPress();
             this.relinkCandidate = null;
-            this.lpStart = { sx: e.clientX, sy: e.clientY, px: e.clientX, py: e.clientY };
-            const downSx = e.clientX, downSy = e.clientY;
-            const r0 = this.canvas.getBoundingClientRect();
-            const localSx = downSx - r0.left, localSy = downSy - r0.top;
-            this.lpTimer = setTimeout(() => {
-                this.lpTimer = null;
-                this.fireContextMenu(localSx, localSy, downSx, downSy);
-            }, this.lpDelayMs);
+            // Touch only. A mouse has a button for this, and arming the timer for it meant holding
+            // the left button still -- which is what positioning a node precisely looks like --
+            // opened the menu after half a second and wiped the drag in progress: the pixels the
+            // node had already travelled stayed, but never reached history, so Ctrl+Z could not
+            // take them back.
+            if (e.pointerType !== 'mouse') {
+                this.lpStart = { sx: e.clientX, sy: e.clientY, px: e.clientX, py: e.clientY };
+                const downSx = e.clientX, downSy = e.clientY;
+                const r0 = this.canvas.getBoundingClientRect();
+                const localSx = downSx - r0.left, localSy = downSy - r0.top;
+                this.lpTimer = setTimeout(() => {
+                    this.lpTimer = null;
+                    this.fireContextMenu(localSx, localSy, downSx, downSy);
+                }, this.lpDelayMs);
+            }
             this.canvas.focus();
             const [sx, sy] = localXY(e);
             if (this.ovHit(sx, sy)) {
@@ -2050,14 +2171,16 @@ export class Diagram {
             if (node !== null) {
                 const add = e.shiftKey || e.ctrlKey || e.metaKey;
                 if (this.permissions.select) {
-                    if (add) {
+                    // A right-click still selects what it landed on, so the menu that follows acts
+                    // on the node under the cursor -- but only the primary button may drag it.
+                    if (add && e.button === 0) {
                         this.toggleSelect(node);
                         return;
                     }
                     if (!this.selectedNodes.has(node))
                         this.selectNode(node);
                 }
-                if (this.permissions.moveNodes) {
+                if (this.permissions.moveNodes && e.button === 0) {
                     this.dragNode = node;
                     this.dragAnchor = { wx, wy };
                     const moving = this.selectedNodes.has(node) ? [...this.selectedNodes] : [node];
@@ -2073,6 +2196,10 @@ export class Diagram {
                     this.selectLink(link);
                 return;
             }
+            // A secondary button on empty canvas is on its way to the context menu: it must not
+            // clear the selection the menu is about to act on, nor start a rubber band.
+            if (e.button !== 0 && e.button !== 1)
+                return;
             // empty space: middle-button / Ctrl / Alt / touch = pan;
             // else rubber-band select. Touch always pans because mobile
             // users can't hold modifier keys and rubber-band drag-select
@@ -2228,8 +2355,14 @@ export class Diagram {
                 const moves = this.dragStart
                     .map((it) => ({ id: it.n.id, fromX: it.x, fromY: it.y, toX: it.n.x, toY: it.n.y }))
                     .filter((m) => m.fromX !== m.toX || m.fromY !== m.toY);
-                for (const it of this.dragStart)
-                    this.emit('nodeMoved', { node: it.n });
+                // Announce the same set the undo step records. Emitting for every node the drag
+                // touched reported a move for a plain selection click -- one per selected node --
+                // and a host doing dirty tracking marked the strategy modified for nothing.
+                const moved = new Set(moves.map((m) => m.id));
+                for (const it of this.dragStart) {
+                    if (moved.has(it.n.id))
+                        this.emit('nodeMoved', { node: it.n });
+                }
                 this.dragNode = null;
                 this.dragStart = [];
                 if (moves.length > 0) {
@@ -2321,6 +2454,10 @@ export class Diagram {
             const [wx, wy] = this.toWorld(sx, sy);
             if (this.portAt(wx, wy) !== null)
                 return;
+            // A wire is something, not empty canvas: without this the zoomToFit fallback below
+            // threw away the zoom and pan the user had set, on a double click aimed at a link.
+            if (this.linkAt(wx, wy) !== null)
+                return;
             const node = this.nodeAt(wx, wy);
             if (node !== null) {
                 if (this.permissions.inspect && node.openAction.length > 0) {
@@ -2367,6 +2504,11 @@ export class Diagram {
                 this.linking = null;
                 this.relinking = null;
                 this.relinkCandidate = null;
+                // The two the block used to miss: a finger that started on the minimap kept
+                // panning the viewport against the pinch, and a cancelled wire drag left its
+                // magnet highlight burned onto a socket until something else redrew it.
+                this.ovDragging = false;
+                this.linkSnap = null;
             }
         }, { passive: false });
         this.listen(this.canvas, 'touchmove', (e) => {
@@ -2429,15 +2571,18 @@ export class Diagram {
                 this.setSelection(this.nodes.slice());
                 return;
             }
-            // Ctrl+Z = undo; Ctrl+Y or Ctrl+Shift+Z = redo.
+            // Ctrl+Z = undo; Ctrl+Y or Ctrl+Shift+Z = redo. Routed through a handler rather than
+            // called directly: a component wrapping this renderer has its own rules about when
+            // history may run and its own events to announce it, and the keyboard must obey them
+            // like every other entry point.
             if (mod && this.permissions.history && e.code === 'KeyZ' && !e.shiftKey) {
                 e.preventDefault();
-                this.undo();
+                this.historyShortcut('undo');
                 return;
             }
             if (mod && this.permissions.history && (e.code === 'KeyY' || (e.code === 'KeyZ' && e.shiftKey))) {
                 e.preventDefault();
-                this.redo();
+                this.historyShortcut('redo');
                 return;
             }
         });
@@ -2532,20 +2677,26 @@ export class Diagram {
         if (options.overview)
             this.drawOverview();
         if (options.runtime)
-            this.drawGlobalError();
+            this.drawGlobalError(options.transient);
         if (options.transient)
             this.drawTooltip();
         if (options.transient && (this.introStart !== null || this.globalErrorFlashStart !== null
             || this.nodes.some((n) => n.errorFlashStart !== null)))
             this.scheduleDraw(); // keep entrance / error feedback animating
     }
-    drawGlobalError() {
+    /**
+     * `transient` gates the flash exactly as it gates every other animation, which an export must
+     * not see: it would bake in whatever point of the pulse it caught, so the same export taken
+     * twice differed in opacity. The gate also keeps the export from consuming the animation --
+     * clearing globalErrorFlashStart from an export cut the flash short on screen.
+     */
+    drawGlobalError(transient) {
         const error = this.runtimeState.globalError;
         if (error === null)
             return;
         const ctx = this.ctx;
         let flashAlpha = 1;
-        if (this.globalErrorFlashStart !== null) {
+        if (transient && this.globalErrorFlashStart !== null) {
             const elapsed = performance.now() - this.globalErrorFlashStart;
             if (elapsed >= ERROR_FLASH_MS) {
                 this.globalErrorFlashStart = null;
@@ -2734,7 +2885,7 @@ export class Diagram {
         const ctx = this.ctx;
         const hasLoadError = options.runtime && n.loadError.length > 0;
         const hasRuntimeError = options.runtime && n.runtimeError.length > 0;
-        const runtime = options.runtime ? this.runtimeState.nodes[n.id] : undefined;
+        const runtime = options.runtime ? getJsonKey(this.runtimeState.nodes, n.id) : undefined;
         const active = options.runtime
             && (this.runtimeState.activeNodeId === n.id || runtime?.active === true);
         roundRect(ctx, n.x, n.y, n.w, n.h, 6);
@@ -2834,7 +2985,7 @@ export class Diagram {
         }
     }
     portRuntimeState(node, port) {
-        return this.runtimeState.nodes[node.id]?.ports[port.direction][port.id] ?? null;
+        return getJsonKey(this.runtimeState.nodes, node.id)?.ports[port.direction][port.id] ?? null;
     }
     // Symmetric jump-over: any segment of THIS link hops the perpendicular
     // segments of links drawn before it (H over earlier V, V over earlier