newcat / baklavajs

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

[v2] Custom NodeInterface component can't inject Temporary Connection Handler #408

Open luhof opened 3 months ago

luhof commented 3 months ago

Hi newcat! Congrats for the work on the v2 💪!

I've been trying to fiddle with custom components to work around some features, like customizing the Node component to make it fully draggable and not just with the handler etc. It works well!

However, I wanted to use a custom NodeInterface component. My main objective was to play with the draggable handle to achieve some "magnetism".

I copy-pasted the default NodeInterface component as linked from the documentation. However, some internal imports used by the NodeInterface component are not available when using the component in my project, mostly imports from ../editor/temporaryConnection.ts. https://github.com/newcat/baklavajs/blob/master/packages/renderer-vue/src/node/NodeInterface.vue#L34-L37

For now I just tried to empirically re-use some bits of the temporary connection to my project without any success, and my interfaces are simply not draggable.

Is there any reason not to export the useTemporaryConnection composable? https://github.com/newcat/baklavajs/blob/master/packages/renderer-vue/src/editor/temporaryConnection.ts#L12

If so, is there any alternative you'd suggest to customize the NodeInterface component?

I hope I'm clear enough, have a nice day!

Doltario commented 1 month ago

Hey hi guys :)

I couldn't agree more with @luhof : Congrats for the work @newCat !

However I was wondering something : I am trying to customize the connections between my Nodes, and I think I am facing an issue similar to Luhof’s one.

I used https://github.com/newcat/baklavajs/blob/master/packages/renderer-vue/src/connection/ConnectionWrapper.vue.

But I can’t find exports for both following lines:

import resolveDom, { IResolvedDomElements } from "./domResolver";
import { TemporaryConnectionState } from "./connection";

I think It is related to what Luhof pointed, but do not hesitate to let me know if I did post in the wrong place.

Have a nice day guys !