newcat / baklavajs

Graph / node editor in the browser using VueJS
http://baklava.tech
MIT License
1.6k stars 117 forks source link

Help with extending functionality. #387

Closed arthurwolf closed 7 months ago

arthurwolf commented 9 months ago

(awesome library)

The way my project works, each input and each output carries "data" (which is saved server side in a database, where a representation of the graph is also saved and synced with the client).

Because the data isn't specific to a node, but to each input/output, I can't just display the data in the node, I need a way for the user to "look into" what data is inside a given input or output.

Say it's an image (the first type I'm implementing), I need a way for users to double-click, or shift-click an input or output, and have something happen (probably a window opening showing the image).

So what I need is some kind of event that gets called when an input/output is shift-clicked, but still have the normal behavior (create a link) happen if it's normally clicked. I'll probably use vue-keypress for the shift-key reading.

Alternatively, if this is too difficult, I'd need the text besides each input/output/port (the "label") to have an icon (for images, an image icon), and when that is clicked, I get an event and I can do what I need (open the image in a window).

Alternatively (not as good, but still would be a step forward), make it so I can provide a custom way to fill in the tooltips, like these ones (which currently already contain data i can use to grab the image):

Screenshot from 2024-02-17 01-25-18

I realize this isn't supported, but I'm looking for advice on how to implement this. Any help would be extremely welcome. Or even ideas how to implement what I need (let users look into input/output data) in another way.

Thanks a lot for any help.

Cheers.

newcat commented 9 months ago

You could try adding a custom event handler like I do here: https://github.com/newcat/LedMusicStudio/blob/main/src/graph/GraphEditor.vue

Instead of listening for the contextmenu event, you could listen to a click or pointerdown event and go on from there.