Render board in 2D

[slz4025]

Existing solutions, like in React, are too big, or others are too specific. May need to cook-up something ourselves.

Need:

• seemingly infinite space, with origin (in center of div), and maybe bounding box
• panning => library?
• zoom in/out => library?
• rendering of basic shapes, like rectangles and arrows (arrows could get messy!)
• drag and drop, but on a grid => will have to worry a bit about arrow rendering

How do existing methods do it, like mind-mappers or design spaces? Excalidraw, kinopio.club, Figma. Excalidraw and others use a more heavy solution, which feels rather slow.

For now, maybe use kinopio solution. Origin is at top-left, uses native scrollbars and zooming. For "arrows", there is a line that draws from one point to another. This is a pretty smart idea. The nodes are always rendered above the lines. The lines don't have directionality. Maybe instead of having an arrow point at the end, the line itself has chevrons on it indicating direction. Also, requires dragging to make line. Would be nicer to do a click-click.

[cbroms]

For panning and zooming, panzoom seems promising. It seems small enough.

[slz4025]

Also, we want some key buttons to allow people to do common operations. I.e. make a unit, make a link, make a beam, group together units under a new set-unit, etc.

[slz4025]

We also want a very nice visual way to focus on a particular unit. We should be able to get a view of what sets it is in, what units are within it, what links it has. It would be great if from this focused view, we could click on the "parents", "children", and "linked units" to focus on them, thereby creating a chain of hierarchical-like or network-like movement.

[slz4025]

ASAP Position of units needs to be stored on backend! This means when adding a unit, give original position. Need a move operation as well.

[slz4025]

Implemented backend in 2d_board. Now frontend needs to use full_size in board's store to render element and use move_unit.