@stocksharp/diagram 0.1.0

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

@@ -0,0 +1,784 @@
+import { parseDiagramDocument, serializeDiagramDocument, } from '../core/document.js';
+import { parseDiagramViewState, serializeDiagramViewState, } from '../core/view-state.js';
+import { DiagramActionRegistry } from '../core/action-registry.js';
+import { Diagram as CanvasDiagram, } from '../canvas-renderer.js';
+import { EventEmitter } from './event-emitter.js';
+import { DiagramNode, Link, Node, Port, } from './types.js';
+export class StockSharpDiagram extends EventEmitter {
+    constructor(options) {
+        super();
+        this.disposables = [];
+        this.idCounter = 1;
+        this.undoEnabled = true;
+        this.redoEnabled = true;
+        this.helpEnabled = true;
+        this.loading = false;
+        this.destroyed = false;
+        this.fullscreen = false;
+        this.fullscreenButtonVisible = true;
+        this.linkValidator = null;
+        this.contextActions = new DiagramActionRegistry();
+        this.div = options.div;
+        this.catalog = options.catalog;
+        this.overviewContainer = options.overviewContainer ?? null;
+        this.zoomLabel = options.zoomLabel ?? null;
+        this.clipboard = this.resolveClipboard(options.clipboard);
+        this.canvas = new CanvasDiagram({
+            host: this.div,
+            typeColors: this.portTypeColors(),
+            gridSnap: options.gridSnap ?? true,
+            gridSize: options.gridSize,
+        });
+        this.fullscreenButtonVisible = options.showFullscreenButton ?? true;
+        this.prepareFullscreenButtonHost();
+        this.fullscreenButton = this.createFullscreenButton();
+        this.updateFullscreenButton();
+        this.registerContextActions();
+        this.bindCanvasEvents();
+        this.disposables.push(this.catalog.on('portTypesChanged', () => this.applySocketTheme()));
+        this.updateZoomLabel();
+    }
+    setLinkValidator(validator) {
+        this.linkValidator = validator;
+        this.canvas.setLinkValidator(validator === null ? null : ({ fromNode, fromPort, toNode, toPort }) => validator({
+            fromNode: this.fromCanvasNode(fromNode),
+            fromPort: this.fromCanvasPort(fromPort),
+            toNode: this.fromCanvasNode(toNode),
+            toPort: this.fromCanvasPort(toPort),
+        }));
+    }
+    addDiagramNode(node) {
+        return this.canvas.addDiagramNode(this.toCanvasNode(node));
+    }
+    dropNodeFromPalette(typeId, clientX, clientY) {
+        const rect = this.div.getBoundingClientRect();
+        const [x, y] = this.canvas.viewToWorld(clientX - rect.left, clientY - rect.top);
+        const definition = this.catalog.getNodeType(typeId) ?? new Node({ id: typeId, name: typeId });
+        const id = this.generateNodeId(definition.id);
+        const node = new DiagramNode({
+            id,
+            typeId: definition.id,
+            name: definition.name,
+            description: definition.description,
+            groupName: definition.groupName,
+            inPorts: definition.inPorts.map((port) => port.clone()),
+            outPorts: definition.outPorts.map((port) => port.clone()),
+            icon: definition.icon,
+            parameters: definition.parameters.map((parameter) => ({ ...parameter, options: [...parameter.options] })),
+            openAction: definition.openAction,
+            x,
+            y,
+        });
+        this.canvas.addDiagramNode(this.toCanvasNode(node));
+        this.canvas.selectNodeById(id);
+        return id;
+    }
+    removeDiagramNode(nodeId) {
+        this.canvas.removeDiagramNode(nodeId);
+    }
+    moveNode(nodeId, x, y) {
+        this.canvas.moveNode(nodeId, x, y);
+    }
+    getNodeBounds(nodeId) {
+        const node = this.canvas.findNode(nodeId);
+        return node === undefined
+            ? null
+            : { x: node.x, y: node.y, width: node.w, height: node.h };
+    }
+    getPortPosition(nodeId, direction, portId) {
+        const node = this.canvas.findNode(nodeId);
+        const port = direction === 'in'
+            ? node?.inPorts.find((candidate) => candidate.id === portId)
+            : node?.outPorts.find((candidate) => candidate.id === portId);
+        return port === undefined ? null : { x: port.cx, y: port.cy };
+    }
+    worldToView(x, y) {
+        const [viewX, viewY] = this.canvas.worldToView(x, y);
+        return { x: viewX, y: viewY };
+    }
+    setGridSnap(enabled, size) {
+        this.canvas.setGridSnap(enabled, size);
+    }
+    getGridSnap() {
+        return this.canvas.getGridSnap();
+    }
+    nudgeSelection(dx, dy) {
+        return this.canvas.nudgeSelection(dx, dy);
+    }
+    addLink(link) {
+        return this.canvas.addLink(this.toCanvasLink(link));
+    }
+    validateLink(link, excludeLinkId) {
+        return this.canvas.validateLink(this.toCanvasLink(link), excludeLinkId);
+    }
+    relink(linkId, link) {
+        return this.canvas.relink(linkId, this.toCanvasLink(link));
+    }
+    removeLink(link) {
+        this.canvas.removeLink(this.toCanvasLink(link));
+    }
+    addPort(nodeId, direction, port) {
+        this.canvas.addPort(nodeId, direction, this.toCanvasPort(port));
+    }
+    removePort(nodeId, direction, portId) {
+        this.canvas.removePort(nodeId, direction, portId);
+    }
+    updatePortType(nodeId, direction, portId, type) {
+        this.canvas.updatePortType(nodeId, direction, portId, type);
+    }
+    updatePort(nodeId, direction, portId, patch) {
+        return this.canvas.updatePort(nodeId, direction, portId, patch);
+    }
+    setNodePorts(nodeId, inPorts, outPorts) {
+        const current = this.canvas.findNode(nodeId);
+        if (current === undefined)
+            return;
+        const convert = (port) => ({
+            id: port.key,
+            name: port.name,
+            description: port.description,
+            type: port.type,
+            maxLinks: port.maxLinks,
+            availableTypes: [...(port.availableTypes ?? [])],
+            isDynamic: port.isDynamic ?? false,
+            dynamicMode: port.dynamicMode ?? '',
+        });
+        const nextIn = inPorts.map(convert);
+        const nextOut = outPorts.map(convert);
+        for (const sibling of current.inPorts.filter((port) => port.isSibling)) {
+            if (!nextIn.some((port) => port.id === sibling.id))
+                nextIn.push(sibling.toInit());
+        }
+        for (const sibling of current.outPorts.filter((port) => port.isSibling)) {
+            if (!nextOut.some((port) => port.id === sibling.id))
+                nextOut.push(sibling.toInit());
+        }
+        this.canvas.setNodePorts(nodeId, nextIn, nextOut);
+    }
+    updateNode(nodeId, patch) {
+        this.canvas.updateNode(nodeId, patch);
+    }
+    setNodeMessage(nodeId, message) {
+        this.canvas.updateNode(nodeId, { message });
+    }
+    setNodeError(nodeId, message, options = {}) {
+        return this.canvas.setNodeError(nodeId, message, options);
+    }
+    clearNodeError(nodeId, kind) {
+        return this.canvas.clearNodeError(nodeId, kind);
+    }
+    getRuntimeState() {
+        return this.canvas.getRuntimeState();
+    }
+    setRuntimeState(state) {
+        this.canvas.setRuntimeState(state);
+    }
+    clearRuntimeState() {
+        this.canvas.clearRuntimeState();
+    }
+    setActiveNode(nodeId) {
+        return this.canvas.setActiveNode(nodeId);
+    }
+    setPortRuntimeState(nodeId, direction, portId, patch) {
+        return this.canvas.setPortRuntimeState(nodeId, direction, portId, patch);
+    }
+    setGlobalError(message, kind = 'invalid') {
+        this.canvas.setGlobalError(message, kind);
+    }
+    setNodeParamValue(nodeId, paramName, value) {
+        this.canvas.setNodeParamValue(nodeId, paramName, value);
+    }
+    setNodeName(nodeId, value) {
+        this.canvas.updateNode(nodeId, { name: value });
+    }
+    /** Groups host-driven document edits into one undo/redo operation. */
+    transaction(label, action) {
+        return this.canvas.withTransaction(label, action);
+    }
+    setShowNodeMessages(show) {
+        this.canvas.setShowNodeMessages(show);
+    }
+    setReadOnly(readonly) {
+        this.canvas.setReadOnly(readonly);
+    }
+    getInteractionPermissions() {
+        return this.canvas.getInteractionPermissions();
+    }
+    setInteractionPermissions(patch) {
+        this.canvas.setInteractionPermissions(patch);
+    }
+    applySocketTheme() {
+        this.canvas.setTypeColors(this.portTypeColors());
+    }
+    applyOverviewTheme() {
+        this.canvas.requestRedraw();
+    }
+    setOverviewVisible(visible) {
+        this.canvas.setOverviewVisible(visible);
+        this.overviewContainer?.classList.toggle('hidden', !visible);
+    }
+    zoomToFit() {
+        this.canvas.zoomToFit();
+    }
+    setZoom(scale) {
+        this.canvas.setZoom(scale);
+    }
+    getViewState() {
+        return this.canvas.getViewState();
+    }
+    setViewState(state) {
+        this.canvas.setViewState(state);
+        this.overviewContainer?.classList.toggle('hidden', !state.overviewVisible);
+    }
+    /** Serializes only viewport preferences; strategy data stays in saveDocument(). */
+    saveViewState(space) {
+        return serializeDiagramViewState(this.canvas.getViewState(), space);
+    }
+    /** Restores a versioned viewport snapshot produced by saveViewState(). */
+    loadViewState(source) {
+        this.setViewState(parseDiagramViewState(source));
+    }
+    /** Detached PNG-ready canvas; use scope: 'content' for the complete scheme. */
+    takeScreenshot(options = {}) {
+        return this.canvas.takeScreenshot(options);
+    }
+    getSelection() {
+        return this.canvas.getSelection();
+    }
+    selectNodes(nodeIds) {
+        this.canvas.selectNodesById(nodeIds);
+    }
+    selectLink(linkId) {
+        this.canvas.selectLinkById(linkId);
+    }
+    selectPort(nodeId, direction, portId) {
+        this.canvas.selectPortById(nodeId, direction, portId);
+    }
+    resize(width, height) {
+        this.canvas.resize(width, height);
+    }
+    isFullscreen() {
+        return this.fullscreen;
+    }
+    setFullscreenButtonVisible(visible) {
+        this.fullscreenButtonVisible = visible;
+        this.fullscreenButton.hidden = !visible;
+        this.fullscreenButton.style.display = visible ? 'inline-flex' : 'none';
+    }
+    isFullscreenButtonVisible() {
+        return this.fullscreenButtonVisible;
+    }
+    /** Updates only the control's state after the host changed its own layout. */
+    setFullscreenState(fullscreen) {
+        if (this.fullscreen === fullscreen)
+            return;
+        this.fullscreen = fullscreen;
+        this.updateFullscreenButton();
+        this.emit('fullscreenChanged', { fullscreen });
+    }
+    setTheme(options) {
+        const { diagramBackground, overviewBackground, gridColor, linkMaxLightness, overviewBorderColor, overviewViewportColor, overviewViewportFill, } = options;
+        if (diagramBackground !== undefined) {
+            this.div.style.background = diagramBackground;
+            if (this.div.parentElement !== null)
+                this.div.parentElement.style.background = diagramBackground;
+        }
+        if (this.overviewContainer !== null && overviewBackground !== undefined) {
+            this.overviewContainer.style.background = overviewBackground;
+        }
+        this.canvas.setTheme({
+            background: diagramBackground,
+            gridColor,
+            linkMaxLightness,
+            overviewBackground,
+            overviewBorderColor,
+            overviewViewportColor,
+            overviewViewportFill,
+        });
+    }
+    enableUndo(enabled) { this.undoEnabled = enabled; }
+    enableRedo(enabled) { this.redoEnabled = enabled; }
+    enableHelp(enabled) { this.helpEnabled = enabled; }
+    canUndo() { return this.undoEnabled && this.canvas.canUndo(); }
+    canRedo() { return this.redoEnabled && this.canvas.canRedo(); }
+    undo() {
+        if (!this.canUndo())
+            return;
+        this.canvas.undo();
+        const snapshot = this.save();
+        this.emit('undoRequested', snapshot);
+    }
+    redo() {
+        if (!this.canRedo())
+            return;
+        this.canvas.redo();
+        const snapshot = this.save();
+        this.emit('redoRequested', snapshot);
+    }
+    cutSelection() { this.canvas.cutSelection(); }
+    copySelection() { this.canvas.copySelection(); }
+    pasteSelection() { this.canvas.pasteSelection(); }
+    deleteSelection() { this.canvas.deleteSelection(); }
+    async copySelectionToClipboard() {
+        const document = this.canvas.copySelectionDocument();
+        if (document === null)
+            return false;
+        if (this.clipboard !== null) {
+            try {
+                await this.clipboard.writeText(serializeDiagramDocument(document));
+            }
+            catch {
+                // The in-memory document remains available as a safe fallback.
+            }
+        }
+        return true;
+    }
+    async pasteSelectionFromClipboard() {
+        if (!this.canvas.getInteractionPermissions().paste)
+            return false;
+        if (this.clipboard !== null) {
+            try {
+                const text = await this.clipboard.readText();
+                const document = parseDiagramDocument(text);
+                return this.canvas.pasteDocument(document).length > 0;
+            }
+            catch {
+                // Fall through to the component's last valid in-memory copy.
+            }
+        }
+        const fallback = this.canvas.getClipboardDocument();
+        return fallback !== null && this.canvas.pasteDocument(fallback).length > 0;
+    }
+    getContextCommands() {
+        return this.contextActions.states(this.contextActionContext()).map(({ id, enabled }) => ({
+            command: id,
+            enabled,
+        }));
+    }
+    executeContextCommand(command) {
+        const context = this.contextActionContext();
+        if (!this.contextActions.execute(command, context))
+            return false;
+        this.emit('contextCommand', { command, nodes: context.nodes, links: context.links });
+        return true;
+    }
+    clear() {
+        this.loading = true;
+        try {
+            this.canvas.load([], []);
+        }
+        finally {
+            this.loading = false;
+        }
+        this.emit('runtimeStateChanged', { state: this.canvas.getRuntimeState() });
+    }
+    load(nodes, links, options = {}) {
+        this.loading = true;
+        try {
+            this.canvas.load(nodes.map((node) => this.toCanvasNode(node)), links.map((link) => this.toCanvasLink(link)));
+            for (const [nodeId, message] of Object.entries(options.nodeErrors ?? {})) {
+                this.canvas.setNodeError(nodeId, message, { kind: 'load', animate: false });
+            }
+        }
+        finally {
+            this.loading = false;
+        }
+        this.emit('runtimeStateChanged', { state: this.canvas.getRuntimeState() });
+        const snapshot = this.save();
+        this.emit('loadFinished', snapshot);
+    }
+    save() {
+        const snapshot = this.canvas.save();
+        return {
+            nodes: snapshot.nodes.map((node) => this.fromCanvasInit(node)),
+            links: snapshot.links.map((link) => this.fromCanvasLink(link)),
+        };
+    }
+    loadDocument(document, options = {}) {
+        let failure = null;
+        this.loading = true;
+        try {
+            this.canvas.loadDocument(document);
+            for (const [nodeId, message] of Object.entries(options.nodeErrors ?? {})) {
+                this.canvas.setNodeError(nodeId, message, { kind: 'load', animate: false });
+            }
+        }
+        catch (error) {
+            failure = error instanceof Error ? error : new Error(String(error));
+            this.canvas.setGlobalError(failure.message, 'load');
+        }
+        finally {
+            this.loading = false;
+        }
+        this.emit('runtimeStateChanged', { state: this.canvas.getRuntimeState() });
+        if (failure !== null) {
+            this.emit('documentLoadFailed', { message: failure.message, error: failure });
+            throw failure;
+        }
+        const saved = this.canvas.saveDocument();
+        this.emit('documentLoaded', { document: saved });
+        const snapshot = this.save();
+        this.emit('loadFinished', snapshot);
+    }
+    saveDocument() {
+        return this.canvas.saveDocument();
+    }
+    destroy() {
+        if (this.destroyed)
+            return;
+        this.destroyed = true;
+        for (const dispose of this.disposables.splice(0).reverse())
+            dispose();
+        this.canvas.destroy();
+    }
+    prepareFullscreenButtonHost() {
+        const previous = this.div.style.position;
+        const position = typeof getComputedStyle === 'function'
+            ? getComputedStyle(this.div).position
+            : previous;
+        if (position !== '' && position !== 'static' && position !== undefined)
+            return;
+        this.div.style.position = 'relative';
+        this.disposables.push(() => {
+            if (this.div.style.position === 'relative')
+                this.div.style.position = previous;
+        });
+    }
+    createFullscreenButton() {
+        const owner = this.div.ownerDocument ?? document;
+        const button = owner.createElement('button');
+        button.type = 'button';
+        button.className = 'ssdiagram-fullscreen-button';
+        button.setAttribute('data-ssdiagram-fullscreen-button', '');
+        Object.assign(button.style, {
+            position: 'absolute',
+            top: '8px',
+            right: '8px',
+            zIndex: '4',
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '30px',
+            height: '30px',
+            padding: '0',
+            border: '1px solid var(--ssdiagram-control-border, var(--t-border, #3a4250))',
+            borderRadius: '5px',
+            background: 'var(--ssdiagram-control-background, var(--t-surface, rgba(18, 21, 28, 0.9)))',
+            color: 'var(--ssdiagram-control-color, var(--t-text, #eaecef))',
+            boxSizing: 'border-box',
+            cursor: 'pointer',
+            opacity: '0.9',
+        });
+        const click = () => {
+            this.emit('fullscreenRequested', { fullscreen: !this.fullscreen });
+        };
+        button.addEventListener('click', click);
+        this.div.appendChild(button);
+        this.disposables.push(() => {
+            button.removeEventListener('click', click);
+            button.remove();
+        });
+        button.hidden = !this.fullscreenButtonVisible;
+        button.style.display = this.fullscreenButtonVisible ? 'inline-flex' : 'none';
+        return button;
+    }
+    updateFullscreenButton() {
+        const fullscreen = this.fullscreen;
+        const label = fullscreen ? 'Exit fullscreen' : 'Enter fullscreen';
+        const path = fullscreen
+            ? 'M4 9h5V4M20 9h-5V4M4 15h5v5M20 15h-5v5'
+            : 'M9 4H4v5M15 4h5v5M9 20H4v-5M15 20h5v-5';
+        this.fullscreenButton.className = fullscreen
+            ? 'ssdiagram-fullscreen-button is-active'
+            : 'ssdiagram-fullscreen-button';
+        this.fullscreenButton.title = label;
+        this.fullscreenButton.setAttribute('aria-label', label);
+        this.fullscreenButton.setAttribute('aria-pressed', String(fullscreen));
+        this.fullscreenButton.innerHTML = `<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" `
+            + 'fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" '
+            + `stroke-linejoin="round"><path d="${path}"/></svg>`;
+    }
+    bindCanvasEvents() {
+        this.disposables.push(this.canvas.on('nodeAdded', ({ node }) => {
+            if (!this.loading)
+                this.emit('nodeAdded', { nodes: [this.fromCanvasNode(node)] });
+        }), this.canvas.on('nodeRemoved', ({ node }) => {
+            if (!this.loading)
+                this.emit('nodeRemoved', { nodes: [this.fromCanvasNode(node)] });
+        }), this.canvas.on('nodeMoved', ({ node }) => {
+            if (!this.loading)
+                this.emit('nodeMoved', { node: this.fromCanvasNode(node) });
+        }), this.canvas.on('nodeChanged', ({ node }) => {
+            if (!this.loading)
+                this.emit('nodeEdit', { nodes: [this.fromCanvasNode(node)] });
+        }), this.canvas.on('linkAdded', ({ link }) => {
+            if (!this.loading)
+                this.emit('linkAdded', { links: [this.fromCanvasLink(link)] });
+        }), this.canvas.on('linkRemoved', ({ link }) => {
+            if (!this.loading)
+                this.emit('linkRemoved', { links: [this.fromCanvasLink(link)] });
+        }), this.canvas.on('linkRelinked', ({ link, previous }) => {
+            if (!this.loading)
+                this.emit('linkRelinked', {
+                    link: this.fromCanvasLink(link),
+                    previous: this.fromCanvasLink(previous),
+                });
+        }), this.canvas.on('nodeSelected', ({ node, selected }) => {
+            if (node !== null)
+                this.emit('nodeSelected', { node: this.fromCanvasNode(node), selected });
+        }), this.canvas.on('linkSelected', ({ link, selected }) => {
+            if (link !== null)
+                this.emit('linkSelected', { link: this.fromCanvasLink(link), selected });
+        }), this.canvas.on('selectionChanged', (selection) => this.emit('selectionChanged', selection)), this.canvas.on('runtimeStateChanged', ({ state }) => {
+            if (!this.loading)
+                this.emit('runtimeStateChanged', { state });
+        }), this.canvas.on('nodeHover', ({ node, hovering }) => {
+            this.emit('nodeHover', { node: this.fromCanvasNode(node), hovering });
+        }), this.canvas.on('portSelected', ({ node, port }) => {
+            this.emit('portSelected', {
+                node: this.fromCanvasNode(node),
+                port: this.fromCanvasPort(port),
+                direction: port.direction,
+            });
+        }), this.canvas.on('portClicked', ({ node, port, action, ctrlKey, shiftKey, altKey, metaKey }) => {
+            this.emit('portClicked', {
+                node: this.fromCanvasNode(node),
+                port: this.fromCanvasPort(port),
+                direction: port.direction,
+                action,
+                ctrlKey,
+                shiftKey,
+                altKey,
+                metaKey,
+            });
+        }), this.canvas.on('portHover', ({ node, port, hovering }) => {
+            this.emit('portHover', {
+                node: this.fromCanvasNode(node),
+                port: this.fromCanvasPort(port),
+                direction: port.direction,
+                hovering,
+            });
+        }), this.canvas.on('linkHover', ({ link, hovering }) => {
+            this.emit('linkHover', { link: this.fromCanvasLink(link), hovering });
+        }), this.canvas.on('linkValidation', ({ fromNode, from, toNode, to, allowed, reason }) => {
+            this.emit('linkValidation', {
+                fromNode: this.fromCanvasNode(fromNode),
+                fromPort: this.fromCanvasPort(from),
+                toNode: this.fromCanvasNode(toNode),
+                toPort: this.fromCanvasPort(to),
+                allowed,
+                reason,
+            });
+        }), this.canvas.on('nodeOpen', ({ node }) => {
+            this.emit('nodeOpen', { nodes: [this.fromCanvasNode(node)] });
+        }), this.canvas.on('zoomChanged', () => {
+            this.updateZoomLabel();
+            this.emit('zoomChanged', this.canvas.getViewState());
+        }), this.canvas.on('viewChanged', (state) => {
+            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 }) => {
+            this.emit('contextMenuRequested', {
+                x,
+                y,
+                node: node === null ? null : this.fromCanvasNode(node),
+                link: link === null ? null : this.fromCanvasLink(link),
+                port: port === null ? null : this.fromCanvasPort(port.port),
+                portDirection: port?.port.direction ?? null,
+                commands: this.getContextCommands(),
+            });
+        }));
+    }
+    registerContextActions() {
+        const permissions = () => this.canvas.getInteractionPermissions();
+        this.contextActions.register({
+            id: 'undo',
+            canExecute: () => this.canUndo(),
+            execute: () => this.undo(),
+        });
+        this.contextActions.register({
+            id: 'redo',
+            canExecute: () => this.canRedo(),
+            execute: () => this.redo(),
+        });
+        this.contextActions.register({
+            id: 'cut',
+            canExecute: ({ nodes }) => nodes.length > 0 && permissions().copy && permissions().deleteSelection,
+            execute: () => this.cutSelection(),
+        });
+        this.contextActions.register({
+            id: 'copy',
+            canExecute: ({ nodes }) => nodes.length > 0 && permissions().copy,
+            execute: () => this.copySelection(),
+        });
+        this.contextActions.register({
+            id: 'paste',
+            canExecute: () => this.canvas.hasClipboard() && permissions().paste,
+            execute: () => this.pasteSelection(),
+        });
+        this.contextActions.register({
+            id: 'open',
+            canExecute: ({ nodes }) => nodes.length === 1 && nodes[0].openAction.length > 0,
+            execute: ({ nodes }) => this.emit('nodeOpen', { nodes }),
+        });
+        this.contextActions.register({
+            id: 'delete',
+            canExecute: ({ selection }) => permissions().deleteSelection
+                && (selection.nodeIds.length > 0 || selection.linkIds.length > 0),
+            execute: () => this.canvas.deleteSelection(),
+        });
+        this.contextActions.register({
+            id: 'properties',
+            canExecute: ({ nodes }) => nodes.length > 0,
+            execute: ({ nodes }) => this.emit('nodeProperties', { nodes }),
+        });
+        this.contextActions.register({
+            id: 'help',
+            canExecute: ({ nodes }) => this.helpEnabled && nodes.length > 0,
+            execute: ({ nodes }) => this.emit('nodeHelp', { nodes }),
+        });
+    }
+    contextActionContext() {
+        const selection = this.canvas.getSelection();
+        const document = this.canvas.saveDocument();
+        const nodeIds = new Set(selection.nodeIds);
+        const linkIds = new Set(selection.linkIds);
+        return {
+            selection,
+            nodes: document.nodes
+                .filter((node) => nodeIds.has(node.id))
+                .map((node) => this.fromCanvasInit(node)),
+            links: document.links
+                .filter((link) => linkIds.has(link.id))
+                .map((link) => new Link({
+                id: link.id,
+                outNode: link.from.nodeId,
+                outPort: link.from.portId,
+                inNode: link.to.nodeId,
+                inPort: link.to.portId,
+                metadata: link.metadata,
+            })),
+        };
+    }
+    toCanvasNode(node) {
+        return {
+            id: node.id,
+            typeId: node.typeId,
+            name: node.name,
+            description: node.description,
+            groupName: node.groupName,
+            color: node.color,
+            border: node.border,
+            icon: node.icon,
+            openAction: node.openAction,
+            message: node.message,
+            isPlaceholder: node.isPlaceholder,
+            parameters: node.parameters.map((parameter) => ({ ...parameter, options: [...parameter.options] })),
+            paramValues: { ...node.paramValues },
+            x: node.x,
+            y: node.y,
+            inPorts: node.inPorts.map((port) => this.toCanvasPort(port)),
+            outPorts: node.outPorts.map((port) => this.toCanvasPort(port)),
+        };
+    }
+    fromCanvasNode(node) {
+        return this.fromCanvasInit(node.toInit(false));
+    }
+    fromCanvasInit(node) {
+        return new DiagramNode({
+            id: node.id,
+            typeId: node.typeId,
+            name: node.name,
+            description: node.description,
+            groupName: node.groupName,
+            color: node.color,
+            border: node.border,
+            icon: node.icon,
+            openAction: node.openAction,
+            message: node.message,
+            isPlaceholder: node.isPlaceholder,
+            parameters: (node.parameters ?? []).map((parameter) => ({ ...parameter, options: [...parameter.options] })),
+            paramValues: { ...(node.paramValues ?? {}) },
+            x: node.x,
+            y: node.y,
+            inPorts: (node.inPorts ?? []).map((port) => this.fromCanvasPortInit(port)),
+            outPorts: (node.outPorts ?? []).map((port) => this.fromCanvasPortInit(port)),
+        });
+    }
+    toCanvasPort(port) {
+        return {
+            id: port.id,
+            name: port.name,
+            description: port.description,
+            type: port.type,
+            maxLinks: port.maxLinks,
+            availableTypes: [...port.availableTypes],
+            isDynamic: port.isDynamic,
+            dynamicMode: port.dynamicMode,
+            isSibling: port.isSibling,
+        };
+    }
+    fromCanvasPort(port) {
+        return this.fromCanvasPortInit(port.toInit());
+    }
+    fromCanvasPortInit(port) {
+        return new Port({
+            id: port.id,
+            name: port.name,
+            description: port.description,
+            type: port.type,
+            maxLinks: port.maxLinks,
+            availableTypes: [...(port.availableTypes ?? [])],
+            isDynamic: port.isDynamic,
+            dynamicMode: port.dynamicMode,
+            isSibling: port.isSibling,
+        });
+    }
+    toCanvasLink(link) {
+        const idOf = (value) => typeof value === 'string' ? value : value.id;
+        return {
+            id: link.id || undefined,
+            from: idOf(link.outNode),
+            fromPort: idOf(link.outPort),
+            to: idOf(link.inNode),
+            toPort: idOf(link.inPort),
+            metadata: link.metadata,
+        };
+    }
+    fromCanvasLink(link) {
+        return new Link({
+            id: link.id,
+            outNode: link.from,
+            outPort: link.fromPort,
+            inNode: link.to,
+            inPort: link.toPort,
+            metadata: link.metadata,
+        });
+    }
+    portTypeColors() {
+        return Object.fromEntries(this.catalog.getPortTypes().map((portType) => [portType.name, portType.color]));
+    }
+    updateZoomLabel() {
+        if (this.zoomLabel !== null)
+            this.zoomLabel.textContent = `${Math.round(this.canvas.getViewState().zoom * 100)}%`;
+    }
+    resolveClipboard(explicit) {
+        if (explicit !== undefined)
+            return explicit;
+        if (typeof navigator === 'undefined' || navigator.clipboard === undefined)
+            return null;
+        return {
+            readText: () => navigator.clipboard.readText(),
+            writeText: (value) => navigator.clipboard.writeText(value),
+        };
+    }
+    generateNodeId(prefix) {
+        const safePrefix = prefix.replace(/[^a-zA-Z0-9_-]/g, '') || 'node';
+        let id;
+        do
+            id = `${safePrefix}_${this.idCounter++}`;
+        while (this.canvas.findNode(id) !== undefined);
+        return id;
+    }
+}
+//# sourceMappingURL=stocksharp-diagram.js.map