@stocksharp/diagram 0.5.0 → 0.7.0

package/README.md

@@ -154,7 +154,9 @@ missing type. Sites can localize that message through
 `data-diagram-missing-element="Missing: {typeId}"` on the host.
 
 Every text the embedded control shows comes from the host, so a translated page
-carries no English leftovers:
+carries no English leftovers. These attributes are per-instance overrides on top
+of the page's translation bundle (see *Translating the control* below); set them
+when one diagram has to read differently from the rest of the page:
 
 | Host attribute | What it renames |
 |---|---|
@@ -163,7 +165,9 @@ carries no English leftovers:
 | `data-diagram-missing-element="Missing: {typeId}"` | the placeholder for an element the palette lacks |
 
 The same labels are available to custom integrations as the `fullscreenLabels`
-option and `setFullscreenLabels()` on `StockSharpDiagram`.
+option and `setFullscreenLabels()` on `StockSharpDiagram`. With neither the
+attribute nor the option, the wording comes from the bundle, so a page that has
+already been translated needs no per-diagram markup at all.
 
 ### Node actions and errors
 
@@ -190,10 +194,20 @@ the menu was opened over a socket.
 
 ### The context menu
 
-The control has no menu widget: right-click suppresses the browser's own menu
-and emits `contextMenuRequested` with page coordinates, whatever was hit, and
-the menu contents already resolved. Draw it however the host draws menus, then
-send the choice back through `executeContextCommand()`.
+Right-click opens the control's own menu, with an Export submenu. It is on by
+default, because right-click suppresses the browser's menu either way and a
+control that takes one away owes one back. It needs no stylesheet: it is styled
+inline over `--ssdiagram-*` custom properties (`--ssdiagram-menu-background`,
+`--ssdiagram-menu-border`, `--ssdiagram-menu-color`, `--ssdiagram-menu-hover`,
+`--ssdiagram-menu-disabled-color`, `--ssdiagram-menu-font`), falling back to the
+`--ssdiagram-control-*` values the fullscreen button uses. Its class names —
+`ssdiagram-context-menu`, `-item`, `-label`, `-arrow`, `-submenu`, `-separator` —
+are stable if you would rather use CSS.
+
+To draw your own instead, pass `showContextMenu: false` (or call
+`setContextMenuEnabled(false)`) and handle `contextMenuRequested`, which is
+emitted either way — and emitted *before* the built-in menu opens, so a handler
+can still switch it off.
 
 `commands` is a tree in display order. An entry with a `group` is a submenu;
 anything else is a command. `enabled` is computed for both — a submenu is off
@@ -209,8 +223,10 @@ diagram.on('contextMenuRequested', ({ x, y, commands }) => {
 menu.on('pick', (command) => diagram.executeContextCommand(command));
 ```
 
-`undo`, `redo`, `cut`, `copy`, `paste` and `delete` are carried out by the
-control itself. The rest are requests it cannot answer alone: `open`,
+`undo`, `redo`, `cut`, `copy`, `paste`, `delete` and `overview` are carried out
+by the control itself. `overview` toggles the corner minimap, and reports its
+current state as `checked` on the command so a menu can tick it rather than offer
+a dead show/hide pair. The rest are requests it cannot answer alone: `open`,
 `properties` and `help` raise `nodeOpen` / `nodeProperties` / `nodeHelp`, and
 the `export` submenu raises `exportRequested` with the chosen format. Nothing
 is produced until the host acts on it — only the host knows where the result
@@ -226,9 +242,54 @@ diagram.on('exportRequested', ({ format }) => {
 ```
 
 Export is offered whenever the diagram has a node, including in read-only mode,
-because it only reads. Menu labels come from the host's i18n bundle
-(`ctxExportAs`, `ctxExportDocument`, `ctxExportPng`, `ctxExportSvg`, and the
-keys named after the other commands).
+because it only reads.
+
+#### Translating the control
+
+There is one mechanism, and it is `window.__designerI18n`: an object typed by the
+exported `DesignerI18n`, holding every string the package renders itself — the
+menu, the fullscreen button's tooltip, and the embed failure notes. It is read on
+every lookup, so it can be assigned at any point, before or after the bundle
+loads, and reassigned later to change language. A key that is missing or empty
+falls back to English.
+
+Per-instance settings — the `fullscreenLabels` option, `setFullscreenLabels()`,
+and the `data-diagram-*` attributes above — override the bundle for one diagram.
+Resolution is: explicit setting, then bundle, then the built-in English.
+
+The context menu is rebuilt on every open and needs nothing after a language
+change. The fullscreen button is drawn once, so call `refreshLabels()` to
+re-read the bundle for it.
+
+```ts
+import type { DesignerI18n } from '@stocksharp/diagram';
+
+const labels: DesignerI18n = { cut: 'Вырезать', ctxDelete: 'Удалить', /* … */ };
+(window as unknown as { __designerI18n: DesignerI18n }).__designerI18n = labels;
+```
+
+The key is not always the command name, so here is the whole menu:
+
+| command | key | English |
+|---|---|---|
+| `undo` / `redo` | `undo` / `redo` | Undo / Redo |
+| `cut` / `copy` / `paste` | `cut` / `copy` / `paste` | Cut / Copy / Paste |
+| `open` | `ctxOpen` | Open |
+| `delete` | `ctxDelete` | Delete |
+| *(the submenu)* | `ctxExportAs` | Export as |
+| `exportDocument` | `ctxExportDocument` | Scheme |
+| `exportPng` / `exportSvg` | `ctxExportPng` / `ctxExportSvg` | PNG image / SVG image |
+| `overview` | `ctxOverview` | Overview |
+| `properties` | `properties` | Properties |
+| `help` | `ctxHelp` | Help |
+| *(fullscreen button)* | `fullscreenEnter` / `fullscreenExit` | Enter / Exit fullscreen |
+| *(embed failures)* | `embedErrorLoad` / `embedErrorEmpty` / `embedErrorDraw` | the three notes shown in place of a diagram |
+| *(embed placeholder)* | `embedMissingElement` | the missing-element tooltip |
+
+`ctxDelete` is separate from the solution explorer's `delete` on purpose: that
+one removes a whole strategy, this one the selected nodes and links, and a
+language that declines the object cannot serve both from one key. The same goes
+for `ctxExportAs` against `ctxExport`.
 
 Runtime failures flash the node border before leaving it red. Errors found
 while loading a scheme use a red background. Hovering either state shows the

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,
                     });
             }
@@ -1876,6 +1990,26 @@ export class Diagram {
         return added.map((node) => node.id);
     }
     // ---- input ------------------------------------------------------
+    // Ends hover and everything hanging off it: highlight, cursor and the delayed tooltip.
+    clearHover() {
+        if (this.hoverPort !== null)
+            this.emit('portHover', { node: this.hoverPort.node, port: this.hoverPort.port, hovering: false });
+        if (this.hoverNode !== null)
+            this.emit('nodeHover', { node: this.hoverNode, hovering: false });
+        if (this.hoveredLink !== null)
+            this.emit('linkHover', { link: this.hoveredLink, hovering: false });
+        this.hoverPort = null;
+        this.hoverNode = null;
+        this.hoveredLink = null;
+        this.tipTarget = null;
+        this.tipShow = false;
+        if (this.tipTimer !== null) {
+            clearTimeout(this.tipTimer);
+            this.tipTimer = null;
+        }
+        this.canvas.style.cursor = 'default';
+        this.scheduleDraw();
+    }
     cancelLongPress() {
         if (this.lpTimer !== null) {
             clearTimeout(this.lpTimer);
@@ -1914,7 +2048,10 @@ export class Diagram {
         this.relinking = null;
         this.relinkCandidate = null;
         this.linkSnap = null;
-        this.scheduleDraw();
+        // A menu is about to cover this spot, and it opens under a cursor that has not moved --
+        // which fires no boundary event, so nothing else would end the hover. Without this the
+        // tooltip armed by the last pointermove appears 400ms later, through the open menu.
+        this.clearHover();
         this.emit('contextMenu', { x: pageX, y: pageY, link, node, port });
     }
     listen(target, type, listener, options) {
@@ -1935,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)) {
@@ -2027,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];
@@ -2050,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
@@ -2205,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) {
@@ -2292,30 +2448,16 @@ export class Diagram {
             this.emitViewChanged(true);
             this.scheduleDraw();
         }, { passive: false });
-        this.listen(this.canvas, 'pointerleave', () => {
-            if (this.hoverPort !== null)
-                this.emit('portHover', { node: this.hoverPort.node, port: this.hoverPort.port, hovering: false });
-            if (this.hoverNode !== null)
-                this.emit('nodeHover', { node: this.hoverNode, hovering: false });
-            if (this.hoveredLink !== null)
-                this.emit('linkHover', { link: this.hoveredLink, hovering: false });
-            this.hoverPort = null;
-            this.hoverNode = null;
-            this.hoveredLink = null;
-            this.tipTarget = null;
-            this.tipShow = false;
-            if (this.tipTimer !== null) {
-                clearTimeout(this.tipTimer);
-                this.tipTimer = null;
-            }
-            this.canvas.style.cursor = 'default';
-            this.scheduleDraw();
-        });
+        this.listen(this.canvas, 'pointerleave', () => this.clearHover());
         this.listen(this.canvas, 'dblclick', (e) => {
             const [sx, sy] = localXY(e);
             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) {
@@ -2362,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) => {
@@ -2424,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;
             }
         });
@@ -2527,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;
@@ -2729,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);
@@ -2829,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