Nodes are hidden by/go below panels when zooming out

[Thibault Lavoisey]

Hello,

First of all, congrats for your work on this library, it's very pleasant to play with!

My question is the following: is there a way to prevent nodes to be hidden by/to go below panels when zooming out? I tried to change workspace config (position, scale, canvas size, view container size) and also to use a bit of CSS to achieve what I want, without success.

It seems that AWS IoT Consoles that use Diagram Maker achieve this behaviour successfully.

Steps to reproduce the behavior:

1. Go to https://awslabs.github.io/diagram-maker/iframe.html?id=demos-diagram-maker--left-right-rectangular&viewMode=story
2. Zoom out
3. Nodes are hidden by/go below left panel

I expect panels to act like canvas boundaries (or to have an option to enable this behaviour), i don't expect nodes to go below panels when zooming out.

Thanks,
Thibault

[Sameer Goyal]

Hello,

Nodes going under the panels is by design. Diagram maker was designed with floating panels in mind, that could be moved around in the screen to whichever position was most convenient. With that model of panels, letting the canvas as well as nodes go under the panels was the only option.

However, the most common positions of panels are snapped to top right & top left. Therefore, sometimes nodes in the corners become inaccessible. One way to solve it & this is what IoT events console does as well is to place your nodes in the center of the canvas and when showing blank canvas to the users, center the canvas, so that even if they bring in a node onto the canvas, it has lots of open space around it. If it does, users can pan the canvas & can both send nodes under the panels and out of the screen and also bring it back.

You can achieve this by calling the resetZoom method on the API like so which will set the zoom level to 1 and set the canvas to the center position:
diagramMaker.api.resetZoom();

Alternatively, in the initial state, you can set the position under the workspace state to pan the workspace initially by predefined values.

However, if nodes are brought onto the canvas into the top left corner, they cannot pan the canvas enough to bring the node into view. That's because there's not enough empty space on around the node.

Hope that helps.

Thanks,
Sameer