@stocksharp/diagram 0.6.0 → 0.7.0

package/src/diagram/context-menu.ts

@@ -124,6 +124,12 @@ export class ContextMenuView {
             if (SEPARATE_AFTER.has(id) && index < items.length - 1) root.appendChild(this.separator(owner));
         });
 
+        // A right-click inside our own menu is not "outside", so the dismissal watcher lets it
+        // through -- and the canvas listener that suppresses the native menu never sees it,
+        // because the menu is not a child of the canvas. Without this the browser drew its own
+        // menu on top of ours, leaving two stacked over each other.
+        this.on(root, 'contextmenu', (event) => { event.preventDefault(); });
+
         this.container.appendChild(root);
         this.root = root;
         this.place(root, x, y);
@@ -291,6 +297,17 @@ export class ContextMenuView {
         this.submenu = null;
     }
 
+    /**
+     * The window the menu actually lives in. A component created from one document and mounted
+     * into another -- a same-origin iframe, a popup -- must be measured and dismissed against
+     * that document's window, not the one this module happened to be evaluated in.
+     */
+    private get view(): (Window & typeof globalThis) | null {
+        const owner = this.container.ownerDocument ?? (typeof document === 'undefined' ? null : document);
+        const view = owner?.defaultView ?? (typeof window === 'undefined' ? null : window);
+        return view ?? null;
+    }
+
     // Reads the resolved writing direction so the submenu's side and its arrow agree with it.
     private rtl(): boolean {
         if (typeof getComputedStyle !== 'function') return false;
@@ -304,13 +321,14 @@ export class ContextMenuView {
 
     /** Keeps the panel inside the viewport, flipping it left when it would run off the edge. */
     private keepOnScreen(panel: HTMLElement): void {
-        if (typeof panel.getBoundingClientRect !== 'function' || typeof window === 'undefined') return;
+        const view = this.view;
+        if (typeof panel.getBoundingClientRect !== 'function' || view === null) return;
         const box = panel.getBoundingClientRect();
-        if (box.right > window.innerWidth - 4 || box.left < 4) {
+        if (box.right > view.innerWidth - 4 || box.left < 4) {
             panel.style.insetInlineStart = 'auto';
             panel.style.insetInlineEnd = '100%';
         }
-        if (box.bottom > window.innerHeight - 4) {
+        if (box.bottom > view.innerHeight - 4) {
             panel.style.top = 'auto';
             panel.style.bottom = '-5px';
         }
@@ -319,12 +337,13 @@ export class ContextMenuView {
     private place(root: HTMLElement, x: number, y: number): void {
         root.style.left = `${x}px`;
         root.style.top = `${y}px`;
-        if (typeof root.getBoundingClientRect !== 'function' || typeof window === 'undefined') return;
+        const view = this.view;
+        if (typeof root.getBoundingClientRect !== 'function' || view === null) return;
         const box = root.getBoundingClientRect();
         // Flip rather than clamp: a menu shoved back onto the screen would cover the very
         // thing that was right-clicked.
-        if (box.right > window.innerWidth - 4) root.style.left = `${Math.max(4, x - box.width)}px`;
-        if (box.bottom > window.innerHeight - 4) root.style.top = `${Math.max(4, y - box.height)}px`;
+        if (box.right > view.innerWidth - 4) root.style.left = `${Math.max(4, x - box.width)}px`;
+        if (box.bottom > view.innerHeight - 4) root.style.top = `${Math.max(4, y - box.height)}px`;
     }
 
     private watchForDismissal(owner: Document): void {
@@ -341,12 +360,13 @@ export class ContextMenuView {
         this.on(owner, 'keydown', (event: Event) => {
             if ((event as KeyboardEvent).key === 'Escape') this.hide();
         });
-        if (typeof window !== 'undefined') {
+        const view = this.view;
+        if (view !== null) {
             // Scroll and resize move the diagram out from under the menu, which would otherwise
             // hang in place pointing at nothing.
-            this.on(window, 'blur', dismiss);
-            this.on(window, 'resize', dismiss);
-            this.on(window, 'scroll', dismiss, true);
+            this.on(view, 'blur', dismiss);
+            this.on(view, 'resize', dismiss);
+            this.on(view, 'scroll', dismiss, true);
         }
     }
 

package/src/diagram/event-emitter.ts

@@ -32,7 +32,13 @@ export class EventEmitter<TEvents extends object> {
         if (set === undefined) {
             return;
         }
-        for (const handler of set) {
+        // Snapshot: a Set iterated live delivers to handlers subscribed during the very
+        // delivery, and the ordinary "unsubscribe then resubscribe" throttle appends to the
+        // set being walked -- with two such listeners that never terminates and hangs the tab.
+        // Re-checking membership then keeps an unsubscribe honest: a handler removed by an
+        // earlier one, or by clearEventHandlers/destroy, must not still be called.
+        for (const handler of [...set]) {
+            if (!set.has(handler)) continue;
             try {
                 (handler as EventHandler<TEvents[K]>)(payload);
             } catch (err) {
@@ -50,6 +56,9 @@ export class EventEmitter<TEvents extends object> {
     }
 
     protected clearEventHandlers(): void {
+        // Empty the sets as well as the map: an emit already in flight holds a reference to its
+        // set, and dropping only the map entry would leave it delivering to a torn-down subject.
+        for (const set of this.handlers.values()) set.clear();
         this.handlers.clear();
     }
 }

package/src/diagram/palette.ts

@@ -1,6 +1,7 @@
+import { t } from '../i18n.js';
 import { EventEmitter } from './event-emitter.js';
 import { StockSharpCatalog } from './catalog.js';
-import { Node } from './types.js';
+import { DEFAULT_GROUP_NAME, Node } from './types.js';
 
 export interface PaletteOptions {
     div: HTMLElement;
@@ -300,7 +301,13 @@ export class StockSharpPalette extends EventEmitter<PaletteEvents> {
 }
 
 function groupNameOf(node: Node): string {
-    return node.groupName.length > 0 ? node.groupName : 'Common';
+    // The only caption the palette invents. Left hardcoded it was the one English word surviving
+    // in a fully translated palette. The default arrives here either as an empty group name or as
+    // the substitute Node's constructor already put in, so both spellings resolve to the same key.
+    const group = node.groupName;
+    return group.length > 0 && group !== DEFAULT_GROUP_NAME
+        ? group
+        : t('paletteCommonGroup', DEFAULT_GROUP_NAME);
 }
 
 function normalizeTypeId(typeId: string): string {

package/src/diagram/stocksharp-diagram.ts

@@ -134,6 +134,11 @@ export class StockSharpDiagram extends EventEmitter<DiagramEvents> {
         this.fullscreenButton = this.createFullscreenButton();
         this.updateFullscreenButton();
         this.setContextMenuEnabled(options.showContextMenu ?? true);
+        // The keyboard is an entry point like the menu and the toolbar, so it goes through the
+        // same undo()/redo() -- which respect enableUndo/enableRedo and emit undoRequested.
+        this.canvas.setHistoryShortcutHandler((direction) => {
+            if (direction === 'undo') this.undo(); else this.redo();
+        });
         this.registerContextActions();
         this.bindCanvasEvents();
         this.disposables.push(this.catalog.on('portTypesChanged', () => this.applySocketTheme()));

package/src/diagram/types.ts

@@ -1,5 +1,25 @@
 import { toPortDynamicMode } from '../core/model.js';
-import type { JsonObject, PortDynamicMode } from '../core/model.js';
+import { setJsonKey } from '../core/json.js';
+import type { JsonObject, JsonValue, PortDynamicMode } from '../core/model.js';
+
+/**
+ * Metadata handed to a public object is copied, never aliased. Event payloads are built from the
+ * live model, and a host writing its own note onto payload.link.metadata was reaching straight
+ * into that model -- past transactions and past history, so the write turned up in the next saved
+ * document and an undo/redo of the link silently reverted it.
+ */
+function copyJsonValue(value: JsonValue): JsonValue {
+    if (Array.isArray(value)) return value.map(copyJsonValue);
+    if (value !== null && typeof value === 'object') return copyJsonObject(value);
+    return value;
+}
+
+function copyJsonObject(value: JsonObject | undefined): JsonObject {
+    if (value === undefined) return {};
+    const result: JsonObject = {};
+    for (const [key, item] of Object.entries(value)) setJsonKey(result, key, copyJsonValue(item));
+    return result;
+}
 
 // Core data model — node/port catalog (palette) and the live diagram (DiagramNode + Link).
 
@@ -132,7 +152,7 @@ export class Node {
         this.id = init.id;
         this.name = init.name;
         this.description = init.description ?? '';
-        this.groupName = init.groupName ?? 'Common';
+        this.groupName = init.groupName ?? DEFAULT_GROUP_NAME;
         this.inPorts = (init.inPorts ?? []).map((p) => (p instanceof Port ? p : new Port(p)));
         this.outPorts = (init.outPorts ?? []).map((p) => (p instanceof Port ? p : new Port(p)));
         this.icon = init.icon ?? '';
@@ -224,6 +244,12 @@ export class DiagramNode extends Node {
 
 export type LinkEndpoint = string | { id: string };
 
+/**
+ * Heading an element falls under when it declares no group. Shared so the palette can recognise
+ * the value it substituted here and translate it, rather than every layer spelling it separately.
+ */
+export const DEFAULT_GROUP_NAME = 'Common';
+
 export interface LinkInit {
     id?: string;
     outNode: LinkEndpoint;
@@ -247,7 +273,7 @@ export class Link {
         this.outPort = init.outPort;
         this.inNode = init.inNode;
         this.inPort = init.inPort;
-        this.metadata = init.metadata ?? {};
+        this.metadata = copyJsonObject(init.metadata);
     }
 }
 

package/src/embed.ts

@@ -73,12 +73,61 @@ function iconUrl(name: string): string {
 
 // Perceived luminance (0..255) of a #rrggbb colour; used to tell a light diagram canvas from a dark
 // one so the (dark-canvas-tuned) link palette can be darkened when the canvas is light.
-function luminance(hex: string): number {
-	const m = hex.match(/^#?([0-9a-fA-F]{6})$/);
-	if (m === null)
-		return 0;
-	const n = parseInt(m[1], 16);
-	return 0.299 * ((n >> 16) & 255) + 0.587 * ((n >> 8) & 255) + 0.114 * (n & 255);
+const CSS_COLOR_KEYWORDS: Readonly<Record<string, [number, number, number]>> = {
+	white: [255, 255, 255],
+	black: [0, 0, 0],
+	transparent: [255, 255, 255],
+};
+
+/**
+ * Perceived brightness of a CSS colour, or -1 when it cannot be read.
+ *
+ * Six-digit hex was the only form understood, and everything else answered 0 -- black. A page
+ * writing --diagram-bg as #fff, white or rgb(255 255 255) therefore had its white canvas
+ * classified as dark and got the dark link palette: near-white wires on a near-white background.
+ * Unreadable is now -1 rather than 0, so the caller can keep its own default instead of being
+ * told the page is black.
+ */
+function luminance(color: string): number {
+	const value = color.trim().toLowerCase();
+	if (value === '')
+		return -1;
+
+	const keyword = CSS_COLOR_KEYWORDS[value];
+	if (keyword !== undefined)
+		return 0.299 * keyword[0] + 0.587 * keyword[1] + 0.114 * keyword[2];
+
+	const long = value.match(/^#?([0-9a-f]{6})$/);
+	if (long !== null) {
+		const n = parseInt(long[1], 16);
+		return 0.299 * ((n >> 16) & 255) + 0.587 * ((n >> 8) & 255) + 0.114 * (n & 255);
+	}
+
+	// #abc is shorthand for #aabbcc, and the eight-digit forms carry an alpha we ignore.
+	const short = value.match(/^#?([0-9a-f]{3})([0-9a-f])?$/);
+	if (short !== null) {
+		const [r, g, b] = [...short[1]].map((digit) => parseInt(digit + digit, 16));
+		return 0.299 * r + 0.587 * g + 0.114 * b;
+	}
+	const long8 = value.match(/^#?([0-9a-f]{6})[0-9a-f]{2}$/);
+	if (long8 !== null) {
+		const n = parseInt(long8[1], 16);
+		return 0.299 * ((n >> 16) & 255) + 0.587 * ((n >> 8) & 255) + 0.114 * (n & 255);
+	}
+
+	// rgb()/rgba(), both the comma and the space syntax.
+	const rgb = value.match(/^rgba?\(([^)]+)\)$/);
+	if (rgb !== null) {
+		const parts = rgb[1].split(/[\s,/]+/).filter((part) => part !== '');
+		if (parts.length >= 3) {
+			const [r, g, b] = parts.slice(0, 3).map((part) => part.endsWith('%')
+				? (parseFloat(part) / 100) * 255
+				: parseFloat(part));
+			if ([r, g, b].every((channel) => Number.isFinite(channel)))
+				return 0.299 * r + 0.587 * g + 0.114 * b;
+		}
+	}
+	return -1;
 }
 
 function makePort(p: PalettePort): Port {
@@ -396,6 +445,7 @@ async function renderSchemeAtRevision(
 			diagram.setTheme({
 				diagramBackground: bg,
 				gridColor,
+				// Unreadable colours keep the dark default rather than being treated as black.
 				linkMaxLightness: luminance(bg) > 140 ? 0.42 : 1,
 			});
 		};
@@ -604,17 +654,28 @@ export function renderAll(root: ParentNode = document, options: DiagramEmbedOpti
 		if (host.dataset.rendered === '1')
 			return;
 
+		// The flag is a re-entry guard, not a record of success: it goes up before the async
+		// render so a second renderAll() cannot start the same host twice, and comes back down if
+		// that render produced nothing. Left up, a host whose source failed once -- an unreachable
+		// URL, a transient network error -- kept its error note for the life of the page, because
+		// every later renderAll() skipped it even after the source came back.
+		const started = (run: Promise<DiagramEmbedHandle | null>): void => {
+			host.dataset.rendered = '1';
+			void run.then(
+				(handle) => { if (handle === null) delete host.dataset.rendered; },
+				() => { delete host.dataset.rendered; },
+			);
+		};
+
 		const src = host.dataset.diagramSrc;
 		if (src) {
-			host.dataset.rendered = '1';
-			void renderFromSource(host, PALETTE_URL, src, options);
+			started(renderFromSource(host, PALETTE_URL, src, options));
 			return;
 		}
 
 		const inline = host.querySelector('script[type="application/json"]');
 		if (inline) {
-			host.dataset.rendered = '1';
-			void renderFromInline(host, PALETTE_URL, inline.textContent ?? '', options);
+			started(renderFromInline(host, PALETTE_URL, inline.textContent ?? '', options));
 		}
 	});
 }

package/src/i18n.ts

@@ -108,6 +108,8 @@ export interface DesignerI18n {
     ctxExportPng?: string;
     ctxExportSvg?: string;
     ctxOverview?: string;
+    /** Palette heading for elements that declare no group of their own. */
+    paletteCommonGroup?: string;
     properties?: string;
     ctxHelp?: string;
 

package/src/svg-surface.ts

@@ -333,17 +333,26 @@ export class SvgSurface implements DrawSurface {
 
     // ===== text ==========================================================
 
-    fillText(text: string, x: number, y: number): void {
+    fillText(text: string, x: number, y: number, maxWidth?: number): void {
         if (text === '') return;
 
         const anchor = ANCHOR[this.state.textAlign] ?? 'start';
         const baseline = BASELINE[this.state.textBaseline] ?? 'alphabetic';
 
+        // Canvas squeezes the glyphs to fit maxWidth; SVG needs to be told, and only when the text
+        // would actually overflow -- textLength on text that already fits would stretch it.
+        // Dropping the argument left node titles and zone captions running past the box the
+        // renderer had sized for them, so the vector export disagreed with the raster one.
+        let constraint = '';
+        if (maxWidth !== undefined && maxWidth > 0 && this.measureText(text).width > maxWidth) {
+            constraint = ` textLength="${n(maxWidth)}" lengthAdjust="spacingAndGlyphs"`;
+        }
+
         // The canvas font string is CSS font shorthand, so it transfers verbatim -- no parsing, and
         // no chance of losing the weight or the fallback list on the way.
         this.emit(
             `<text x="${n(x)}" y="${n(y)}" style="font:${escapeXml(this.state.font)}" ` +
-            `text-anchor="${anchor}" dominant-baseline="${baseline}" ${this.fillAttrs()}>` +
+            `text-anchor="${anchor}" dominant-baseline="${baseline}"${constraint} ${this.fillAttrs()}>` +
             `${escapeXml(text)}</text>`);
     }