@stocksharp/diagram 0.4.1 → 0.6.0

package/dist/esm/diagram/context-menu.js

@@ -0,0 +1,319 @@
+import { t } from '../i18n.js';
+/**
+ * The control's own context menu.
+ *
+ * It exists because right-click already suppresses the browser's menu whether or not anyone
+ * is listening. A control that takes the native menu away owes one back, so this is on by
+ * default; a host with its own menu turns it off (`showContextMenu: false`) and keeps using
+ * `contextMenuRequested`, which is emitted either way.
+ *
+ * Styling follows the fullscreen button: inline styles driven by `--ssdiagram-*` custom
+ * properties with sensible fallbacks, so the menu is usable with no stylesheet at all and
+ * retintable without one. Class names are stable for hosts that would rather use CSS.
+ */
+const ROOT_CLASS = 'ssdiagram-context-menu';
+const ITEM_CLASS = 'ssdiagram-context-menu-item';
+const SUBMENU_CLASS = 'ssdiagram-context-menu-submenu';
+const SEPARATOR_CLASS = 'ssdiagram-context-menu-separator';
+const LABEL_CLASS = 'ssdiagram-context-menu-label';
+const ARROW_CLASS = 'ssdiagram-context-menu-arrow';
+const CHECK_CLASS = 'ssdiagram-context-menu-check';
+/** A rule below these entries, so related commands read as blocks rather than one long list. */
+const SEPARATE_AFTER = new Set(['redo', 'paste', 'delete', 'overview']);
+function label(id) {
+    switch (id) {
+        case 'undo': return t('undo', 'Undo');
+        case 'redo': return t('redo', 'Redo');
+        case 'cut': return t('cut', 'Cut');
+        case 'copy': return t('copy', 'Copy');
+        case 'paste': return t('paste', 'Paste');
+        case 'open': return t('ctxOpen', 'Open');
+        case 'delete': return t('ctxDelete', 'Delete');
+        case 'export': return t('ctxExportAs', 'Export as');
+        case 'exportDocument': return t('ctxExportDocument', 'Scheme');
+        case 'exportPng': return t('ctxExportPng', 'PNG image');
+        case 'exportSvg': return t('ctxExportSvg', 'SVG image');
+        case 'overview': return t('ctxOverview', 'Overview');
+        case 'properties': return t('properties', 'Properties');
+        case 'help': return t('ctxHelp', 'Help');
+    }
+}
+const PANEL_STYLE = {
+    position: 'fixed',
+    zIndex: '2147483000',
+    minWidth: '176px',
+    // Translations run longer than English -- German and Russian routinely half again. Without
+    // a cap the panel just grows, and on a narrow viewport it leaves the screen entirely, which
+    // no amount of repositioning can recover.
+    maxWidth: 'min(320px, calc(100vw - 16px))',
+    padding: '4px',
+    border: '1px solid var(--ssdiagram-menu-border, var(--ssdiagram-control-border, var(--t-border, #3a4250)))',
+    borderRadius: '7px',
+    background: 'var(--ssdiagram-menu-background, var(--ssdiagram-control-background, var(--t-panel, #181a20)))',
+    color: 'var(--ssdiagram-menu-color, var(--ssdiagram-control-color, var(--t-text, #eaecef)))',
+    boxShadow: '0 12px 32px rgba(0, 0, 0, 0.45)',
+    font: 'var(--ssdiagram-menu-font, 12.5px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif)',
+    boxSizing: 'border-box',
+    userSelect: 'none',
+};
+const ITEM_STYLE = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '10px',
+    width: '100%',
+    padding: '6px 10px',
+    border: '0',
+    borderRadius: '4px',
+    background: 'transparent',
+    color: 'inherit',
+    font: 'inherit',
+    // Logical, not physical: on an RTL page these follow the writing direction instead of
+    // pinning the text left and truncating from the wrong end.
+    textAlign: 'start',
+    overflowWrap: 'anywhere',
+    cursor: 'pointer',
+    boxSizing: 'border-box',
+};
+const HOVER_BACKGROUND = 'var(--ssdiagram-menu-hover, var(--t-hover, rgba(255, 255, 255, 0.08)))';
+const DISABLED_COLOR = 'var(--ssdiagram-menu-disabled-color, var(--t-text-dim, #848e9c))';
+export class ContextMenuView {
+    constructor(options) {
+        this.root = null;
+        this.submenu = null;
+        this.submenuTriggers = new Map();
+        this.detach = [];
+        this.container = options.container;
+        this.execute = options.execute;
+    }
+    get isOpen() {
+        return this.root !== null;
+    }
+    show(x, y, items) {
+        this.hide();
+        const owner = this.container.ownerDocument ?? document;
+        const root = this.panel(owner);
+        root.className = ROOT_CLASS;
+        root.setAttribute('role', 'menu');
+        const gutter = items.some((item) => !('group' in item) && item.checked !== undefined);
+        items.forEach((item, index) => {
+            if ('group' in item)
+                root.appendChild(this.groupEntry(owner, item, gutter));
+            else
+                root.appendChild(this.commandEntry(owner, item.command, item.enabled, true, item.checked, gutter));
+            const id = 'group' in item ? item.group : item.command;
+            if (SEPARATE_AFTER.has(id) && index < items.length - 1)
+                root.appendChild(this.separator(owner));
+        });
+        this.container.appendChild(root);
+        this.root = root;
+        this.place(root, x, y);
+        this.watchForDismissal(owner);
+    }
+    hide() {
+        for (const dispose of this.detach.splice(0))
+            dispose();
+        this.submenu = null;
+        this.submenuTriggers.clear();
+        this.root?.remove();
+        this.root = null;
+    }
+    destroy() {
+        this.hide();
+    }
+    panel(owner) {
+        const panel = owner.createElement('div');
+        Object.assign(panel.style, PANEL_STYLE);
+        return panel;
+    }
+    separator(owner) {
+        const rule = owner.createElement('div');
+        rule.className = SEPARATOR_CLASS;
+        Object.assign(rule.style, {
+            height: '1px',
+            margin: '4px 6px',
+            background: 'var(--ssdiagram-menu-border, var(--t-border, #3a4250))',
+        });
+        return rule;
+    }
+    item(owner, text, enabled, arrow, checked, gutter) {
+        const button = owner.createElement('button');
+        button.type = 'button';
+        button.className = ITEM_CLASS;
+        button.setAttribute('role', checked === undefined ? 'menuitem' : 'menuitemcheckbox');
+        if (checked !== undefined)
+            button.setAttribute('aria-checked', String(checked));
+        Object.assign(button.style, ITEM_STYLE);
+        if (!enabled) {
+            button.disabled = true;
+            button.style.color = DISABLED_COLOR;
+            button.style.cursor = 'default';
+        }
+        // Every item in a panel that has a checkable entry gets the same gutter, so the
+        // captions stay on one line rather than one row sitting further in than the rest.
+        if (gutter) {
+            const tick = owner.createElement('span');
+            tick.className = CHECK_CLASS;
+            tick.textContent = checked === true ? '✓' : '';
+            tick.setAttribute('aria-hidden', 'true');
+            Object.assign(tick.style, { flex: 'none', width: '12px', textAlign: 'center' });
+            button.appendChild(tick);
+        }
+        const caption = owner.createElement('span');
+        caption.className = LABEL_CLASS;
+        caption.textContent = text;
+        caption.style.flex = '1';
+        button.appendChild(caption);
+        if (arrow) {
+            const chevron = owner.createElement('span');
+            chevron.className = ARROW_CLASS;
+            // Points the way the submenu actually opens, which on an RTL page is the other way.
+            chevron.textContent = this.rtl() ? '‹' : '›';
+            chevron.setAttribute('aria-hidden', 'true');
+            Object.assign(chevron.style, { flex: 'none', opacity: '0.7', fontSize: '14px' });
+            button.appendChild(chevron);
+        }
+        return button;
+    }
+    // `closesSubmenu` separates the two places an item can live. A top-level item shuts any
+    // open submenu when the pointer arrives, the way menus everywhere behave. An item inside
+    // the submenu must not: reaching it means the pointer has entered that very panel, and
+    // closing it there would pull it out from under the pointer and drop the click on the
+    // canvas behind.
+    commandEntry(owner, command, enabled, closesSubmenu, checked, gutter) {
+        const button = this.item(owner, label(command), enabled, false, checked, gutter);
+        this.on(button, 'pointerenter', () => {
+            if (closesSubmenu)
+                this.closeSubmenu();
+            if (enabled)
+                button.style.background = HOVER_BACKGROUND;
+        });
+        this.on(button, 'pointerleave', () => { button.style.background = 'transparent'; });
+        this.on(button, 'click', () => {
+            if (!enabled)
+                return;
+            // Hide first: a command may open a dialog, and a menu left on top of it looks stuck.
+            this.hide();
+            this.execute(command);
+        });
+        return button;
+    }
+    groupEntry(owner, group, gutter) {
+        const host = owner.createElement('div');
+        host.style.position = 'relative';
+        const button = this.item(owner, label(group.group), group.enabled, true, undefined, gutter);
+        button.setAttribute('aria-haspopup', 'menu');
+        button.setAttribute('aria-expanded', 'false');
+        host.appendChild(button);
+        const panel = this.panel(owner);
+        panel.className = SUBMENU_CLASS;
+        panel.setAttribute('role', 'menu');
+        panel.setAttribute('aria-label', label(group.group));
+        // insetInlineStart, not left: the submenu opens towards the end of the line, which
+        // is the right on an LTR page and the left on an RTL one.
+        Object.assign(panel.style, { position: 'absolute', insetInlineStart: '100%', top: '-5px', display: 'none' });
+        const childGutter = group.commands.some((child) => child.checked !== undefined);
+        for (const child of group.commands) {
+            panel.appendChild(this.commandEntry(owner, child.command, child.enabled, false, child.checked, childGutter));
+        }
+        host.appendChild(panel);
+        const open = () => {
+            if (!group.enabled)
+                return;
+            button.style.background = HOVER_BACKGROUND;
+            button.setAttribute('aria-expanded', 'true');
+            panel.style.display = 'block';
+            this.submenu = panel;
+            this.keepOnScreen(panel);
+        };
+        this.on(button, 'pointerenter', open);
+        // Tap opens it too: a touch device never sends pointerenter on its own.
+        this.on(button, 'click', open);
+        this.on(host, 'pointerleave', () => {
+            if (this.submenu !== panel)
+                return;
+            button.style.background = 'transparent';
+            button.setAttribute('aria-expanded', 'false');
+            panel.style.display = 'none';
+            this.submenu = null;
+        });
+        this.submenuTriggers.set(panel, button);
+        return host;
+    }
+    closeSubmenu() {
+        if (this.submenu === null)
+            return;
+        this.submenu.style.display = 'none';
+        this.submenuTriggers.get(this.submenu)?.setAttribute('aria-expanded', 'false');
+        this.submenu = null;
+    }
+    // Reads the resolved writing direction so the submenu's side and its arrow agree with it.
+    rtl() {
+        if (typeof getComputedStyle !== 'function')
+            return false;
+        try {
+            return getComputedStyle(this.container).direction === 'rtl';
+        }
+        catch {
+            // A detached or fake container has no computed style; left-to-right is the safe read.
+            return false;
+        }
+    }
+    /** Keeps the panel inside the viewport, flipping it left when it would run off the edge. */
+    keepOnScreen(panel) {
+        if (typeof panel.getBoundingClientRect !== 'function' || typeof window === 'undefined')
+            return;
+        const box = panel.getBoundingClientRect();
+        if (box.right > window.innerWidth - 4 || box.left < 4) {
+            panel.style.insetInlineStart = 'auto';
+            panel.style.insetInlineEnd = '100%';
+        }
+        if (box.bottom > window.innerHeight - 4) {
+            panel.style.top = 'auto';
+            panel.style.bottom = '-5px';
+        }
+    }
+    place(root, x, y) {
+        root.style.left = `${x}px`;
+        root.style.top = `${y}px`;
+        if (typeof root.getBoundingClientRect !== 'function' || typeof window === 'undefined')
+            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`;
+    }
+    watchForDismissal(owner) {
+        const dismiss = () => this.hide();
+        const outside = (event) => {
+            // Duck-typed rather than `target instanceof Node`: this runs in whatever document
+            // the host mounted us in, and a cross-document Node fails that check.
+            const root = this.root;
+            const target = event.target;
+            if (root !== null && target !== null && typeof root.contains === 'function' && root.contains(target))
+                return;
+            this.hide();
+        };
+        this.on(owner, 'pointerdown', outside, true);
+        this.on(owner, 'keydown', (event) => {
+            if (event.key === 'Escape')
+                this.hide();
+        });
+        if (typeof window !== 'undefined') {
+            // 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);
+        }
+    }
+    on(target, type, listener, capture = false) {
+        if (typeof target.addEventListener !== 'function')
+            return;
+        target.addEventListener(type, listener, capture);
+        this.detach.push(() => target.removeEventListener?.(type, listener, capture));
+    }
+}
+//# sourceMappingURL=context-menu.js.map

package/dist/esm/diagram/context-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.js","sourceRoot":"","sources":["../../../src/diagram/context-menu.ts"],"names":[],"mappings":"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"}

package/dist/esm/diagram/stocksharp-diagram.js

@@ -2,8 +2,30 @@ import { parseDiagramDocument, serializeDiagramDocument, } from '../core/documen
 import { parseDiagramViewState, serializeDiagramViewState, } from '../core/view-state.js';
 import { DiagramActionRegistry } from '../core/action-registry.js';
 import { Diagram as CanvasDiagram, } from '../canvas-renderer.js';
+import { ContextMenuView } from './context-menu.js';
+import { t } from '../i18n.js';
 import { EventEmitter } from './event-emitter.js';
 import { DiagramNode, Link, Node, Port, } from './types.js';
+/**
+ * Menu order, and the only place the nesting is declared. The registry is flat because
+ * every command must be runnable by id, so the shape of the menu cannot live there.
+ * A command missing from this list would be executable and never offered; the test suite
+ * walks both and refuses to let the two drift.
+ */
+const CONTEXT_MENU = [
+    'undo', 'redo',
+    'cut', 'copy', 'paste',
+    '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 = {
+    overview: (diagram) => diagram.getViewState().overviewVisible,
+};
 export class StockSharpDiagram extends EventEmitter {
     constructor(options) {
         super();
@@ -16,8 +38,12 @@ export class StockSharpDiagram extends EventEmitter {
         this.destroyed = false;
         this.fullscreen = false;
         this.fullscreenButtonVisible = true;
-        this.fullscreenLabels = { 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.
+        this.fullscreenLabels = null;
         this.contextActions = new DiagramActionRegistry();
+        this.contextMenu = null;
         this.div = options.div;
         this.catalog = options.catalog;
         this.overviewContainer = options.overviewContainer ?? null;
@@ -30,10 +56,11 @@ export class StockSharpDiagram extends EventEmitter {
             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();
+        this.setContextMenuEnabled(options.showContextMenu ?? true);
         this.registerContextActions();
         this.bindCanvasEvents();
         this.disposables.push(this.catalog.on('portTypesChanged', () => this.applySocketTheme()));
@@ -250,6 +277,10 @@ export class StockSharpDiagram extends EventEmitter {
     takeScreenshot(options = {}) {
         return this.canvas.takeScreenshot(options);
     }
+    /** The same picture as takeScreenshot, as an SVG document. */
+    takeSvg(options = {}) {
+        return this.canvas.takeSvg(options);
+    }
     getSelection() {
         return this.canvas.getSelection();
     }
@@ -281,8 +312,22 @@ export class StockSharpDiagram extends EventEmitter {
         this.fullscreenLabels = labels;
         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() {
+        this.updateFullscreenButton();
+    }
     getFullscreenLabels() {
-        return { ...this.fullscreenLabels };
+        return { ...this.resolveFullscreenLabels() };
+    }
+    resolveFullscreenLabels() {
+        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. */
     setFullscreenState(fullscreen) {
@@ -366,11 +411,46 @@ export class StockSharpDiagram extends EventEmitter {
         const fallback = this.canvas.getClipboardDocument();
         return fallback !== null && this.canvas.pasteDocument(fallback).length > 0;
     }
+    /**
+     * Turns the built-in menu on or off. Off leaves `contextMenuRequested` untouched, so a
+     * host that draws its own is only trading one menu for another, never losing the event.
+     */
+    setContextMenuEnabled(enabled) {
+        if (enabled === (this.contextMenu !== null))
+            return;
+        if (!enabled) {
+            this.contextMenu?.destroy();
+            this.contextMenu = null;
+            return;
+        }
+        this.contextMenu = new ContextMenuView({
+            container: this.div,
+            // Through the public entry point, so the built-in menu is exactly as privileged
+            // as a host's own -- same guards, same contextCommand event.
+            execute: (command) => { this.executeContextCommand(command); },
+        });
+    }
+    isContextMenuEnabled() {
+        return this.contextMenu !== null;
+    }
     getContextCommands() {
-        return this.contextActions.states(this.contextActionContext()).map(({ id, enabled }) => ({
-            command: id,
-            enabled,
-        }));
+        const context = this.contextActionContext();
+        const state = (command) => {
+            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);
+            // A submenu that opens onto nothing but greyed items is itself dead, and
+            // saying so here spares every host from working the same thing out again.
+            return { group: entry.group, enabled: commands.some(({ enabled }) => enabled), commands };
+        });
     }
     executeContextCommand(command) {
         const context = this.contextActionContext();
@@ -444,6 +524,8 @@ export class StockSharpDiagram extends EventEmitter {
         if (this.destroyed)
             return;
         this.destroyed = true;
+        this.contextMenu?.destroy();
+        this.contextMenu = null;
         for (const dispose of this.disposables.splice(0).reverse())
             dispose();
         this.canvas.destroy();
@@ -501,7 +583,8 @@ export class StockSharpDiagram extends EventEmitter {
     }
     updateFullscreenButton() {
         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';
@@ -595,6 +678,7 @@ export class StockSharpDiagram extends EventEmitter {
             this.overviewContainer?.classList.toggle('hidden', !state.overviewVisible);
             this.emit('viewChanged', state);
         }), this.canvas.on('undoStackChanged', (state) => this.emit('undoStackChanged', state)), this.canvas.on('contextMenu', ({ x, y, node, link, port }) => {
+            const commands = this.getContextCommands();
             this.emit('contextMenuRequested', {
                 x,
                 y,
@@ -602,8 +686,11 @@ export class StockSharpDiagram extends EventEmitter {
                 link: link === null ? null : this.fromCanvasLink(link),
                 port: port === null ? null : this.fromCanvasPort(port.port),
                 portDirection: port?.port.direction ?? null,
-                commands: this.getContextCommands(),
+                commands,
             });
+            // After the event, so a host that draws its own menu has already been told
+            // and can have switched this one off in the handler.
+            this.contextMenu?.show(x, y, commands);
         }));
     }
     registerContextActions() {
@@ -641,6 +728,30 @@ export class StockSharpDiagram extends EventEmitter {
                     && (selection.nodeIds.length > 0 || selection.linkIds.length > 0),
                 execute: () => this.canvas.deleteSelection(),
             },
+            // Export asks rather than does. Where the result goes -- a download, an upload,
+            // a clipboard, a print preview -- is the host's decision, and so is which options
+            // to render with, so the control reports the request and stops there.
+            // Availability follows the diagram, not the selection: all three export the whole
+            // picture, and an empty diagram has none to give. They stay on in read-only mode,
+            // which forbids changing the diagram, not looking at it.
+            exportDocument: {
+                canExecute: ({ document }) => document.nodes.length > 0,
+                execute: () => this.emit('exportRequested', { format: 'document' }),
+            },
+            exportPng: {
+                canExecute: ({ document }) => document.nodes.length > 0,
+                execute: () => this.emit('exportRequested', { format: 'png' }),
+            },
+            exportSvg: {
+                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 }),
@@ -658,6 +769,7 @@ export class StockSharpDiagram extends EventEmitter {
         const linkIds = new Set(selection.linkIds);
         return {
             selection,
+            document,
             nodes: document.nodes
                 .filter((node) => nodeIds.has(node.id))
                 .map((node) => this.fromCanvasInit(node)),