Getting started questions: How do I enable the context menu?

[andrejohansson]

Hello,

This seems to be a wonderful and fast library. I'm trying to see if I can use it, but I'm a bit lost regarding where to start. My setup is a react + typescript project. I've added litegraph.js using npm and inserted the "First project" and it works nicely.

What I can´t quite follow is how to add things seen in the demo like the right click context menu. Right clicking my canvas currently gives no menu.

I´ve tried adding a function to create the menu items but I guess I'm doing it wrong.

    const canvas = new LGraphCanvas('#' + canvasId, graph);

    canvas.getCanvasMenuOptions = () => {
      return [
        {
          title: 'Hello',
          content: 'content'
        }
      ]
    };

Furthermore the options to given to LGraphCanvas seems to be only

        options?: {
            skip_render?: boolean;
            autoresize?: boolean;
        }

But I can see that the LPGraphCanvas have a lot of other properties like allow_searchbox etc. how can I set them?

    canvas.allow_searchbox = true;
    canvas.allow_interaction = true;

[jagenjo]

Hi:

I dont have experience with react nor typescript so I cannot be sure of what is the problem. But the context menu, searchbox etc comes build-in in the class LGraphCanvas, you dont have to do anything to enable.

If the menu doesnt appear then something is not working with the mouse event, maybe is being held by another object in your app. Which browser are you using?

Also check the LiteGraph Editor js that contains its own editor with other features.

[andrejohansson]

Hmm weird.

This is the code I use to initialize the graph, and this gives me a blank LiteGraph canvas (with grid and fps meter):

    const graph = new LGraph();
    const canvas = new LGraphCanvas('#' + canvasId, graph);

    canvas.adjustNodesSize();
    graph.start();

    <canvas
      id={canvasId}
      width={device.viewportWidth}
      height={device.viewportHeight}
    >
    </canvas>

Results in:

I can zoom in/out using the mouse wheel and pan around using drag & drop. So I think mouse events are getting through?

I can also add nodes in code and they show perfectly fine. However, right clicking does nothing. Is it supposed to show a menu without any additional setup?

[jagenjo]

did you add the litegraph.css? it controls the positioning of the floating div that contains the context menu.

[andrejohansson]

That helped, I had forgotten that. Using npm for the package, I import the css using this line:

import 'litegraph.js/css/litegraph.css';

And now both the menu and the search box appears. Although the search box gets positioned weirdly (but the menu is alright). The position of the search box seems to be offset (red arrows) by the amount from where the litegraph canvas is offset regarding to the window (green arrows).

Are their positioning logic different? Perhaps using offset positions instead would do the trick?

[jagenjo]

you are right, I fixed it by adding the element to the document root and using a different positioning. tell me if the fix works.

[andrejohansson]

Works good! Thank you!

[EliCDavis]

So, to correct the search box position, the canvas must always be at the document root?