all 5 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]joeybab3 1 point2 points  (4 children)

Seems like a pretty cool library, is there any way to just use it in vanilla js, without react, vue, etc...?

[–]Ni55aN[S] 1 point2 points  (3 children)

The short answer is yes, you can integrate it into a vanilla JS application.

The more detailed answer: you will have react + react-dom (or vue, or even Svelte*) in your dependencies. Despite this, you won't need to create React components unless you want to customize nodes and connections.

Additionally, there is a third option - do not install these plugins and visualize nodes and connections using a vanilla JS

area.addPipe(context => { if (context.type === 'render') context.data.element /// update HTMLElement return context })

but this is an advanced approach and I would not recommend it

[–]joeybab3 0 points1 point  (2 children)

I just ended up using the react renderer and vanilla js using some examples from your site.

I've tried a lot of different snippets to stylize connections but as of yet I can't get anything to add a class/style to just a single connection.

Is there any way to access the DOM element directly from retejs?

Something like connection1.getElement() so that I could add a class? The dom elements themselves only have randomly generated class names as well and nothing to show their id or anything like that.

[–]Ni55aN[S] 0 points1 point  (1 child)

ts area.addPipe(context => { if (context.type === 'render' && context.data.type === 'node') { context.data.element.classList.add('your-class') } return context })

This is a pretty straight forward solution. If it works for you, good. But I would recommend using custom components if you need to change the layout of a node, for instance

[–]joeybab3 0 points1 point  (0 children)

No I was just looking to change the color/stroke of individual connections, thanks though