Dialog Box

[JValGLZ]

Hello, I am working to make it so that when a node is pressed twice, a dialog box appears that would contain text boxes and a confirmation button so that the text inputted can be evaluated. I wanted to know where I would go to start this. Thank you.

[planger]

Hi @JValGLZ,

typically something like that is implemented with a UI Extension, which implements the UI (text boxes, etc.) with plain HTML on top of the diagram.

In particular, you would

1. Register your UI extension
2. Register a mouse listener that reacts e.g. on double-click and shows the UI extension
3. Ensure your UI extension is placed on top of the diagram on the correct location, typically in the onBeforeShow method of your UI extension (see e.g. the implementation of the label editing on double-click)

Roughly it would look as follows:

// in your module
...
   // 1.
    bind(YourUIExtension).toSelf().inSingletonScope();
    bind(TYPES.IUIExtension).toService(YourUIExtension);
   // 2.
    bind(YourMouseListener).toSelf().inSingletonScope();
    bind(TYPES.MouseListener).toService(YourMouseListener);

...
// your mouse listener
export class YourMouseListener extends MouseListener {
    override doubleClick(target: SModelElementImpl, event: MouseEvent): (Action | Promise<Action>)[] {
        if (/** a condition e.g. to only enable the UI extension for certain target elements**/) {
            return [SetUIExtensionVisibilityAction.create({ extensionId: <your-ui-extension-id>, visible: true})];
        }
        return [];
    }
}

See also #745 (comment)