search

retejs / rete

JavaScript framework for visual programming
https://retejs.org
MIT License
10.17k stars 653 forks source link

Resizing issue #498

Closed oddjobz closed 1 year ago

oddjobz commented 3 years ago

As things stand, "resize()" explicitly sets the size of the Rete work area based on the container's width and height. Where the container has a "width:100%;height:100%", for example in a flexbox type scenario, this resize mechanism breaks Rete's ability to resize properly in conjunction with other components.

In such instances, Rete does not need to do anything to resize, so disabling the resize() method actually fixes flow and resizing issues. Whereas I appreciate some applications may not embed within a responsive container, it seems like a common requirement. Could we possibly add an option to disable the 'resize' method?

Ni55aN commented 3 years ago

What is the need to disable resizing if you can just put the editor container into the additional parent?

oddjobz commented 3 years ago

The 'resize' event in rete explicitly tries to set it's size based on it's parent. When the parent is set to "100%", this doesn't work. Allowing Rete to have it's size dictated by it's parent (by setting Rete's size to 100%) works great, so long as the resize event doesn't interfere. (so my solution has been simply to comment out the resize event handler)

oddjobz commented 3 years ago

i.e. by having a resize handler that explicitly sets rete's size, you remove the possibility for the programmer to set the style of the rete object to a specific size.

Ni55aN commented 3 years ago

When the parent is set to "100%", this doesn't work.

It looks like the size of your container's parent element doesn't have a specific size, but it should

https://github.com/retejs/rete/blob/6bdec4f575e7ba5690fe673a6547270863b5013a/src/view/index.ts#L99-L100

oddjobz commented 3 years ago

If you're working with responsive layouts, typically one could expect the parent element to have a w/h=100%. I'm unsure "exactly" how this works, but my observations in this instance are that clientWidth/height are not being derived correctly by lines 99/100, whereas omitting lines 99/100 renders perfectly.

rete-js[bot] commented 1 year ago

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.