@stocksharp/diagram 0.5.0 → 0.6.0

package/src/diagram/stocksharp-diagram.ts

@@ -28,6 +28,7 @@ import {
 } from '../canvas-renderer.js';
 import { StockSharpCatalog } from './catalog.js';
 import { ContextMenuView } from './context-menu.js';
+import { t } from '../i18n.js';
 import { EventEmitter } from './event-emitter.js';
 import type {
     DiagramEvents,
@@ -80,10 +81,16 @@ const CONTEXT_MENU: readonly ContextMenuEntry[] = [
     'open',
     'delete',
     { group: 'export', commands: ['exportDocument', 'exportPng', 'exportSvg'] },
+    'overview',
     'properties',
     'help',
 ];
 
+/** Commands that toggle rather than do, so the menu reports their state instead of just enabling them. */
+const CONTEXT_CHECKED: Partial<Record<ContextCommand, (diagram: StockSharpDiagram) => boolean>> = {
+    overview: (diagram) => diagram.getViewState().overviewVisible,
+};
+
 export class StockSharpDiagram extends EventEmitter<DiagramEvents> {
     private readonly div: HTMLElement;
     private readonly catalog: StockSharpCatalog;
@@ -101,7 +108,10 @@ export class StockSharpDiagram extends EventEmitter<DiagramEvents> {
     private destroyed = false;
     private fullscreen = false;
     private fullscreenButtonVisible = true;
-    private fullscreenLabels: DiagramFullscreenLabels = { enter: 'Enter fullscreen', exit: 'Exit fullscreen' };
+    // null means the host never named the button, so its wording comes from the shared bundle.
+    // Keeping the two apart is what lets an explicit label win while an untouched control still
+    // follows the page's language instead of being stuck in English.
+    private fullscreenLabels: DiagramFullscreenLabels | null = null;
     private readonly contextActions = new DiagramActionRegistry<ContextCommand, ContextActionContext>();
     private contextMenu: ContextMenuView | null = null;
 
@@ -119,7 +129,7 @@ export class StockSharpDiagram extends EventEmitter<DiagramEvents> {
             gridSize: options.gridSize,
         });
         this.fullscreenButtonVisible = options.showFullscreenButton ?? true;
-        this.fullscreenLabels = options.fullscreenLabels ?? this.fullscreenLabels;
+        this.fullscreenLabels = options.fullscreenLabels ?? null;
         this.prepareFullscreenButtonHost();
         this.fullscreenButton = this.createFullscreenButton();
         this.updateFullscreenButton();
@@ -443,8 +453,24 @@ export class StockSharpDiagram extends EventEmitter<DiagramEvents> {
         this.updateFullscreenButton();
     }
 
+    /**
+     * Re-reads the shared bundle for text the control renders itself. Call it after changing
+     * the page language: the context menu is rebuilt on every open and needs nothing, but the
+     * fullscreen button is drawn once and would otherwise keep the old wording.
+     */
+    refreshLabels(): void {
+        this.updateFullscreenButton();
+    }
+
     getFullscreenLabels(): DiagramSnapshot<DiagramFullscreenLabels> {
-        return { ...this.fullscreenLabels };
+        return { ...this.resolveFullscreenLabels() };
+    }
+
+    private resolveFullscreenLabels(): DiagramFullscreenLabels {
+        return this.fullscreenLabels ?? {
+            enter: t('fullscreenEnter', 'Enter fullscreen'),
+            exit: t('fullscreenExit', 'Exit fullscreen'),
+        };
     }
 
     /** Updates only the control's state after the host changed its own layout. */
@@ -565,10 +591,14 @@ export class StockSharpDiagram extends EventEmitter<DiagramEvents> {
 
     getContextCommands(): ContextMenuItemState[] {
         const context = this.contextActionContext();
-        const state = (command: ContextCommand): ContextCommandState => ({
-            command,
-            enabled: this.contextActions.canExecute(command, context),
-        });
+        const state = (command: ContextCommand): ContextCommandState => {
+            const checked = CONTEXT_CHECKED[command];
+            return {
+                command,
+                enabled: this.contextActions.canExecute(command, context),
+                ...(checked === undefined ? {} : { checked: checked(this) }),
+            };
+        };
         return CONTEXT_MENU.map((entry) => {
             if (typeof entry === 'string') return state(entry);
             const commands = entry.commands.map(state);
@@ -709,7 +739,8 @@ export class StockSharpDiagram extends EventEmitter<DiagramEvents> {
 
     private updateFullscreenButton(): void {
         const fullscreen = this.fullscreen;
-        const label = fullscreen ? this.fullscreenLabels.exit : this.fullscreenLabels.enter;
+        const labels = this.resolveFullscreenLabels();
+        const label = fullscreen ? labels.exit : labels.enter;
         const path = fullscreen
             ? 'M4 9h5V4M20 9h-5V4M4 15h5v5M20 15h-5v5'
             : 'M9 4H4v5M15 4h5v5M9 20H4v-5M15 20h5v-5';
@@ -886,6 +917,12 @@ export class StockSharpDiagram extends EventEmitter<DiagramEvents> {
                 canExecute: ({ document }) => document.nodes.length > 0,
                 execute: () => this.emit('exportRequested', { format: 'svg' }),
             },
+            // Always available: it shows the overview as readily as it hides it, and an empty
+            // diagram is exactly when someone may want the panel out of the way.
+            overview: {
+                canExecute: () => true,
+                execute: () => this.setOverviewVisible(!this.getViewState().overviewVisible),
+            },
             properties: {
                 canExecute: ({ nodes }) => nodes.length > 0,
                 execute: ({ nodes }) => this.emit('nodeProperties', { nodes }),

package/src/embed.ts

@@ -1,3 +1,4 @@
+import { t } from './i18n.js';
 // Shared read-only diagram embed layer. Rendering, palette loading and theming
 // live next to the diagram engine so web applications do not copy that logic.
 //
@@ -407,7 +408,7 @@ async function renderSchemeAtRevision(
 		diagram.setLinkValidator(() => true);
 		diagram.setOverviewVisible(false);
 		const missingTypeTemplate = div.dataset.diagramMissingElement
-			?? 'Element type "{typeId}" is missing from the palette.';
+			?? t('embedMissingElement', 'Element type "{typeId}" is missing from the palette.');
 		const converted = toDiagramNodes(
 			scheme,
 			catalog,
@@ -508,10 +509,12 @@ interface EmbedErrorTexts {
 // default would never fire and the note would render blank.
 function errorTexts(div: HTMLElement): EmbedErrorTexts {
 	const parts = (div.dataset.diagramErrors ?? '').split('|');
+	// The attribute stays the override; without it the wording comes from the shared bundle, so
+	// a page that already translated the menu does not have to repeat itself per embed.
 	return {
-		load: parts[0] || 'Diagram source could not be loaded.',
-		empty: parts[1] || 'Diagram is empty or malformed.',
-		draw: parts[2] || 'Diagram could not be rendered.',
+		load: parts[0] || t('embedErrorLoad', 'Diagram source could not be loaded.'),
+		empty: parts[1] || t('embedErrorEmpty', 'Diagram is empty or malformed.'),
+		draw: parts[2] || t('embedErrorDraw', 'Diagram could not be rendered.'),
 	};
 }
 

package/src/i18n.ts

@@ -95,6 +95,11 @@ export interface DesignerI18n {
     copy?: string;
     paste?: string;
     ctxOpen?: string;
+    // Deletes the selected nodes and links. Deliberately not the solution explorer's
+    // `delete`, which removes a whole strategy: same English word, but the object differs,
+    // and a language that declines it -- or a host that writes "Delete strategy..." -- cannot
+    // serve both from one key.
+    ctxDelete?: string;
     // Submenu title, and deliberately not `ctxExport` -- that one is the solution
     // explorer's "export this strategy", a different action that a host may well word
     // differently. Reads as its own item too: "Export as > SVG image".
@@ -102,8 +107,23 @@ export interface DesignerI18n {
     ctxExportDocument?: string;
     ctxExportPng?: string;
     ctxExportSvg?: string;
+    ctxOverview?: string;
     properties?: string;
     ctxHelp?: string;
+
+    // Everything else the control renders by itself. Each of these also has a per-instance
+    // override -- the fullscreenLabels option, or a data-diagram-* attribute on an embedded
+    // host -- and that override wins; these are the defaults when none was given.
+    fullscreenEnter?: string;
+    fullscreenExit?: string;
+    embedErrorLoad?: string;
+    embedErrorEmpty?: string;
+    embedErrorDraw?: string;
+    embedMissingElement?: string;
+
+    // Not the diagram menu: it has no collapse/expand command. Kept for hosts already
+    // shipping them, but moved out of the block above so nobody translates them expecting
+    // to see them in the context menu.
     collapse?: string;
     expand?: string;
 
@@ -205,13 +225,21 @@ export interface DesignerI18n {
     opterr_plotly_missing?: string;
 }
 
-const i18n: DesignerI18n =
-    typeof window === 'undefined'
-        ? {}
-        : (window as unknown as { __designerI18n?: DesignerI18n }).__designerI18n ?? {};
-
 /// Localized string for `key`, or `fallback` (English) when the host
 /// didn't provide it.
+///
+/// The bundle is read on every call rather than captured when this module loads. Capturing
+/// it meant the host had to assign `window.__designerI18n` before the bundle evaluated --
+/// the opposite of the usual order, and impossible for a lazily loaded chunk -- and a host
+/// that assigned it afterwards silently got English with nothing to explain why. Reading it
+/// live also makes assigning and mutating the object behave the same, and lets the language
+/// change mid-session: the only thing reading these keys is the context menu, and it is
+/// built fresh on every right-click.
+///
+/// An empty string counts as missing. Half-finished translation exports routinely emit one,
+/// and a blank menu entry is worse than an English one.
 export function t(key: keyof DesignerI18n, fallback: string): string {
-    return i18n[key] ?? fallback;
+    if (typeof window === 'undefined') return fallback;
+    const value = (window as unknown as { __designerI18n?: DesignerI18n }).__designerI18n?.[key];
+    return value === undefined || value === '' ? fallback : value;
 }

package/src/index.ts

@@ -85,6 +85,11 @@ export {
     StockSharpDiagram,
 } from './diagram/stocksharp-diagram.js';
 
+// The menu resolves its labels through this, so a host needs the type to write a bundle the
+// compiler can check. Without it the key names get hand-copied, and a typo shows up only as an
+// English label on screen.
+export type { DesignerI18n } from './i18n.js';
+
 export type {
     ContextCommand,
     ContextCommandGroup,