Pull Request Plan: Infinite Canvas Container

[johannesvollmer]

Hi! Thanks for creating iced, it's very pleasant to use.

I'm missing a specific container widget, that I would like to contribute to iced.

Discussed in https://github.com/hecrj/iced/discussions/969

^{Originally posted by **johannesvollmer** July 27, 2021} I'm trying to build a [node editor](https://devtalk.blender.org/t/pbr-node-tree/12876). The user should be able to place and drag some nodes around on in infinite container. Furthermore, the container will have to support scaling and translating all children at once, in order to navigate the node graph. I couldn't find a Container suitable for this, as all containers would automatically layout their children. Is there a container for this? Is there a guide on Iced yet, where I could lookup something like this? I would love to contribute such a widget if there is none yet.

---

Behaviour

• elements positioned anywhere in infinite 2d space
• the container is a window into that infinite space
  • overflow hidden by default (or always?)
  • specify which region (rect/centerpoint?) of the infinite 2d space to show, including view position and view scale
• example: online node editor (use mouse wheel and middle mouse button to navigate the graph)

Use Cases

• Node Editors
• Maps
• Graphs
• Interactive Diagrams

My main concern is that this is quite a specific widget. Maybe together we can find one/multiple more generic and more flexible widgets that could be used to achieve the same behaviour? Maybe this could be split up into two widgets: A Place Elements Anywhere nested inside Container which can zoom in and out on its content.

Otherwise, my plan would look approximately as follows:

// name to be discussed
struct InfiniteCanvas<'a, Message, Renderer> {
    // padding, width, max width, ...
    view: Rect, // what section of the infinite canvas should be shown, could alternatively be (view_scale:f32+ view_center:Vector2)
    children: Vec<InfiniteCanvasElement<'a, Message, Renderer>>,
}

struct InfiniteCanvasElement<'a, Message, Renderer> {
    element: Element<'a, Message, Renderer>,
    absolute_position: Point,
    absolute_size: Option<(u16,u16)>, //  maybe? none = shrink to preferred size. for the node editor, this field is not required, as all elements shrink anyways
    alignment: Alignment2d // maybe? whether to center the widget around the position or place a widget corner at the position
}

What do you think? Would you welcome this contribution?

[johannesvollmer]

Possible atomic design:

manual position container widget

• each child has an offset from the center, manually specified
• intrinsic size is bounding box of all children?
• 1:1 length unit, no scaling
• no-clip/clip as option
• only useful inside zoom&dragv wrapper?

zoom & drag wrapper widget

• one child, which can be zoomed in and out, and moved around in 2d
• view control via Rectangle Bounds, or via center point & scaling factor
• optional min/may scale
• child layout is not recomputed when container layout changes, as only window into inner changes
• when container changes, child layout does not need to be recomputed

[hecrj]

Sounds interesting! I believe the main challenge will be handling overlapping widgets properly.

Keep in mind that if there are no core library changes necessary to build such a widget, there is nothing stopping you from publishing it in your own crate! If changes are necessary, then we should focus on those here.

Also, if you want the community to maintain it, then I would consider submitting a PR to iced_aw first!

[johannesvollmer]

Yes, I thought maybe this Widget would count as batteries included feature, especially when divided into two atomic widgets.

I'll try to build this, in my project, and I'll come back here in the unlikely case that any changes to iced would be needed:)

[wildwestrom]

@johannesvollmer Have you made any progress on this sort of widget?

[johannesvollmer]

I think I never had any usable code, sorry