Sprotty diagram.open not found

[MathiasSJacobsen]

Hi, I know this isn't the sprotty repo, but saw one discussion about it. And really need some help.

I have tried to implement sprotty with langium, I have tried to replicate the "sprottyfiles" from this example: states-langium.

I have gotten the button and the meny text to show but when I click it is says that command 'hot-drink-dsl.diagram.open' not found. And I can't figure out why not

The reppo is private so can't link to it but here are the files that have something to do with sprotty.

Part of the package.json:

"contributes": {
        "languages": [
            {
                "id": "hot-drink-dsl",
                "aliases": [
                    "HotDrink DSL",
                    "hot-drink-dsl"
                ],
                "extensions": [
                    ".hd"
                ],
                "configuration": "./language-configuration.json"
            }
        ],
        "grammars": [
            {
                "language": "hot-drink-dsl",
                "scopeName": "source.hot-drink-dsl",
                "path": "./syntaxes/hot-drink-dsl.tmLanguage.json"
            }
        ],
        "commands": [
            {
                "command": "hot-drink-dsl.diagram.open",
                "title": "Open in Diagram",
                "icon": "$(symbol-structure)",
                "category": "HotDrink DSL Diagram"
            },
            {
                "command": "hot-drink-dsl.diagram.fit",
                "title": "Fit to Screen",
                "category": "HotDrink DSL Diagram"
            },
            {
                "command": "hot-drink-dsl.diagram.center",
                "title": "Center selection",
                "category": "HotDrink DSL Diagram"
            },
            {
                "command": "hot-drink-dsl.diagram.delete",
                "title": "Delete selected element",
                "category": "HotDrink DSL Diagram"
            },
            {
                "command": "hot-drink-dsl.diagram.export",
                "title": "Export diagram to SVG",
                "category": "HotDrink DSL Diagram"
            }
        ],
        "menus": {
            "commandPalette": [
                {
                    "command": "hot-drink-dsl.diagram.open",
                    "when": "editorLangId == 'hot-drink-dsl'"
                },
                {
                    "command": "hot-drink-dsl.diagram.fit",
                    "when": "hot-drink-dsl-diagram-focused"
                },
                {
                    "command": "hot-drink-dsl.diagram.center",
                    "when": "hot-drink-dsl-diagram-focused"
                },
                {
                    "command": "hot-drink-dsl.diagram.delete",
                    "when": "hot-drink-dsl-diagram-focused"
                },
                {
                    "command": "hot-drink-dsl.diagram.export",
                    "when": "hot-drink-dsl-diagram-focused"
                }
            ],
            "editor/context": [
                {
                    "command": "hot-drink-dsl.diagram.open",
                    "when": "editorLangId == 'hot-drink-dsl'",
                    "group": "navigation"
                }
            ],
            "editor/title": [
                {
                    "command": "hot-drink-dsl.diagram.open",
                    "when": "editorLangId == 'hot-drink-dsl'",
                    "group": "navigation"
                }
            ],
            "explorer/context": [
                {
                    "command": "hot-drink-dsl.diagram.open",
                    "when": "resourceExtname == '.hd'",
                    "group": "navigation"
                }
            ]
        },
        "keybindings": [
            {
                "key": "alt+f",
                "mac": "alt+f",
                "command": "hot-drink-dsl.diagram.fit",
                "when": "states-diagram-focused"
            },
            {
                "key": "alt+c",
                "mac": "alt+c",
                "command": "hot-drink-dsl.diagram.center",
                "when": "hot-drink-dsl-diagram-focused"
            },
            {
                "key": "alt+e",
                "mac": "alt+e",
                "command": "hot-drink-dsl.diagram.export",
                "when": "hot-drink-dsl-diagram-focused"
            },
            {
                "key": "delete",
                "mac": "delete",
                "command": "hot-drink-dsl.diagram.delete",
                "when": "hot-drink-dsl-diagram-focused"
            }
        ]
    },
    "activationEvents": [
        "onLanguage:hot-drink-dsl",
        "onCommand:hot-drink-dsl.diagram.open"
    ],

main.ts:

...
// Start the language server with the language-specific services
startLanguageServer(services.shared);
addDiagramHandler(connection, services.shared);

module.ts:

export const HotDrinkDslModule: Module<HotDrinkDslServices, PartialLangiumServices & HotDrinkDslAddedServices & SprottyDiagramServices> = {
    diagram: {
        DiagramGenerator: services => new HotDrinkDslDiagramGenerator(services),
    },
    lsp: {
        CodeActionProvider: () => new HotDrinkDslActionProvider(),
    },
    validation: {
        ValidationRegistry: (injector) => new HotDrinkDslValidationRegistry(injector),
        HotDrinkDslValidator: () => new HotDrinkDslValidator()
    },
    references : {
        ScopeProvider: (services) => new HotDrinkDslScopeProvider(services),
    }
    
};

/**
 * Inject the full set of language services by merging three modules:
 *  - Langium default services
 *  - Services generated by langium-cli
 *  - Services specified in this file
 */
export function createHotDrinkDslServices(context?: DefaultSharedModuleContext): {
    shared: LangiumSprottySharedServices,
    hotdrinkDSL: HotDrinkDslServices
} {

    const shared = inject(
        createDefaultSharedModule(context),
        HotDrinkDslGeneratedSharedModule,
        SprottySharedModule
    )

    const hotdrinkDSL = inject(
        createDefaultModule({ shared }),
        HotDrinkDslGeneratedModule,
        HotDrinkDslModule
    );
    shared.ServiceRegistry.register(hotdrinkDSL)
    return { shared, hotdrinkDSL };
}

spotty-extension.ts

import * as vscode from 'vscode';

import { SprottyLspVscodeExtension } from 'sprotty-vscode/lib/lsp';
import { HotDrinkDSLSprottyVscodeExtension } from './hot-drink-dsl-sprotty-lsp-extension';

let extension: SprottyLspVscodeExtension;

export function activate(context: vscode.ExtensionContext) {
    extension = new HotDrinkDSLSprottyVscodeExtension(context);
}

export function deactivate(): Thenable<void> {
    if (!extension) {
        return Promise.resolve();
    }
    return extension.deactivateLanguageClient();
}

sprotty-lsp-extension.ts

import path from "path";
import { SprottyDiagramIdentifier, SprottyWebview } from "sprotty-vscode";
import { SprottyLspVscodeExtension } from "sprotty-vscode/lib/lsp";
import * as vscode from "vscode";
import { CommonLanguageClient, LanguageClientOptions } from "vscode-languageclient";
import { ServerOptions, TransportKind, LanguageClient } from "vscode-languageclient/node";

export class HotDrinkDSLSprottyVscodeExtension extends SprottyLspVscodeExtension {

    constructor(context: vscode.ExtensionContext) {
        // Provide a prefix for registered commands (see further below)
        super("hot-drink-dsl", context);
    }

    protected getDiagramType(args: any[]): string | undefined {
        if (
            args.length === 0 ||
            // Check the file extension if the view is created for a source file
            (args[0] instanceof vscode.Uri && args[0].path.endsWith(".hd"))
        ) {
            // Return a Sprotty diagram type (this info is passed to the Sprotty model source)
            return "hot-drink-dsl-diagram";
        }
        return undefined;
    }

    createWebView(identifier: SprottyDiagramIdentifier): SprottyWebview {
        return new SprottyWebview({
            extension: this,
            identifier,
            // Root paths from which the webview can load local resources using URIs
            localResourceRoots: [this.getExtensionFileUri("pack")],
            // Path to the bundled webview implementation
            scriptUri: this.getExtensionFileUri("pack", "webview.js"),
            // Change this to `true` to enable a singleton view
            singleton: false,
        });
    }

    protected activateLanguageClient(
        context: vscode.ExtensionContext
    ): CommonLanguageClient {
        const serverModule = context.asAbsolutePath(path.join('pack', 'language-server'));
        // The debug options for the server
        // --inspect=6009: runs the server in Node's Inspector mode so VS Code can attach to the server for debugging.
        // By setting `process.env.DEBUG_BREAK` to a truthy value, the language server will wait until a debugger is attached.
        const debugOptions = { execArgv: ['--nolazy', `--inspect${process.env.DEBUG_BREAK ? '-brk' : ''}=${process.env.DEBUG_SOCKET || '6009'}`] };

        // If the extension is launched in debug mode then the debug server options are used
        // Otherwise the run options are used
        const serverOptions: ServerOptions = {
            run: { module: serverModule, transport: TransportKind.ipc },
            debug: { module: serverModule, transport: TransportKind.ipc, options: debugOptions }
        };

        const fileSystemWatcher = vscode.workspace.createFileSystemWatcher('**/*.hd');
        context.subscriptions.push(fileSystemWatcher);

        // Options to control the language client
        const clientOptions: LanguageClientOptions = {
            documentSelector: [{ scheme: 'file', language: 'hot-drink-dsl' }],
            synchronize: {
                // Notify the server about file changes to files contained in the workspace
                fileEvents: fileSystemWatcher
            }
        };

        // Create the language client and start the client.
        const languageClient = new LanguageClient(
            'hot-drink-dsl',
            'HotDrinkDsl',
            serverOptions,
            clientOptions
        );

        // Start the client. This will also launch the server
        context.subscriptions.push(languageClient.start());
        return languageClient;
    }
}

All help is appreciated!!

[msujew]

@spoenemann Any idea what could be wrong here?

[MathiasSJacobsen]

If anyone want some other files, just name them and ill happily provide them 🤓

[MathiasSJacobsen]

I found what made the command 'hot-drink-dsl.diagram.open' not found error was a duplicated file. with the wrong settings. But it seems that the sprotty extension don't use the diagram-generator file. So when the window opens its blank and it can't be interacted with. Any ideas? @spoenemann

[spoenemann]

Hi, hard to say, I'd need to debug with a live project.