Possible Zoom in/Zoom out and Minimap?

[agrawal-rohit]

Hey man, I really loved this repository of yours. I have been trying to replicate this in Svelte, and it has been pretty successful. I would like to add some extra functionality like zooming in and out of the Editor div and possibly adding a minimap.

Do you have any suggestions for how to achieve that? I have tried encapsulating all the nodes in a div and scaling them, but that causes issues with dragging the nodes (It's too fast when zoomed in, and too slow when zoomed out), and most of all, the svg paths go really haywire and all over the place.

Any help here would be really appreciated :))

[sketchpunk]

Not sure to be honest. A Mix of Html + Svg was just something I could easily do for prototyping. Maybe if the whole UI was done in an SVG document, the whole zooming part might become pretty easy after words. Another solution is to create the whole UI using HTML canvas, but animating the connectors might become trickier at that point, but you set a scale on the canvas and whatever you draw would be there.

If you built the UI data structure the right way, like the Data and Rendering is separate, you can probably make something that works in canvas, svg and probably webgl. I personally would probably go that route if I wanted to make this into some kind of productive tool.

And a mini map, Well, once you can render things at any scale level, you can always redraw at a smaller scale Or like I said keep the data and rendering separate, create a mini map renderer that knows how to draw the nodes and connectors differently that would look better as a mini map.

Side note, there was this tool you could buy called ShaderForge for unity3d. Since unity now has their own Shader Nodes tool, ShaderForge went opensourced since it was no longer a viable source of income for the developer. So it might be a great example if your interested in nodes as a tool.

https://www.acegikmo.com/shaderforge/

[agrawal-rohit]

I was finally able to create a working implementation of zoom in and pan. I encapsulated all my nodes (which are simply divs) by a large container div and mapped the CSS scale and translation to the mouse wheel and mouse drag respectively. Similarly, I grouped all my svg path elements by a g tag and controlled its scale and translation similar to the node groups.

One major thing I had gotten stuck with was maintaining the correct position of a dragging path to the mouse pointer regardless of the scale and translation. I was able to figure out a solution by the following formula:

// 'NodeEditorRefId' is my overall node viewport which spans across the entire width and height
// 'NContainer' is the parent <div> of all individual node <div>, who's scale and translation is being altered
let editor = document.getElementById('NodeEditorRefId')
let NCont = document.getElementById('NContainer')
let xOffset = editor.getBoundingClientRect().x + NCont.getBoundingClientRect().x;
let yOffset = editor.getBoundingClientRect().y + NCont.getBoundingClientRect().y;
let end_x = (e.pageX - xOffset) / scale       // scale is a value between [0.5, 1.5]
let end_y = (e.pageY - yOffset) / scale

// you can then set the curve of the active path dynamically while dragging the mouse
QcurveD(start_pos.x, start_pos.y,  (e.pageX - xOffset) / scale, (e.pageY - yOffset) / scale)