Standardized layout definition system

[Keavon]

We need to create a reusable system for defining input widgets for the frontend to render and communicate changes back to Rust. This will be used in the Document Panel's options bar for tools (#114) in one row but grouped into sections, as well as the Properties Panel for a multi-row and column-based layout likely broken into sections and possibly tabs (#146), plus other future uses. This will involve defining a flexible API spec (likely JSON) for interface elements and their layout, and creating a modular, reusable system.

[Keavon]

Some examples of needed layout capabilities:

[Keavon]

Notes on this:

Layout system depends on a lot of things. We need to define some layout API approach that can properly encode all the designs and layouts we need throughout Graphite. This requires some additional design work to fully understand the needs. This also touches upon the extension system, since extensions should be able to add layouts. It also gets into the question of how far we want to go with this because it leans into the territory of the original XML-based layout system. That system was meant for defining composable components (much like Vue is used now for) and could be resurrected with the web and Vue as UI renderers, until we port that system over to a custom WGPU-based render backend. This could be a path towards gently transitioning to the native editor client.

[TrueDoctor]

some pseudocode:

trait Component {
	fn render(&self) -> HTML;
}

struct Checkbox {
	bool: checked,
}

impl Component for Checkbox {
	fn render(&self) -> HTML {
		html!("<box>{}</box>", self.checked)
	}
}
struct BarSeparator;
impl Component for BarSeparator {
	fn render(&self) -> HTML {
		html!("|", self.checked)
	}
}

type Icon = String;
const LEFT_ALIGN: Icon = "left_align";

struct AlignButton {
    icon: Icon,
    tooltip: Option<String>,
	callback: String,
}

fn callback(m: Message) -> HTML {
	html!("<div onclick=dispatch_message({})>", serde_json::to_string(m))
}

let shape_options = …;
shape_options.render()

const LEFT_ALIGN_BUTTON: AlignButton = AlignButton{icon: LEFT_ALIGN, tooltip:"left_align"};

#[derive(Component)]
#[Component(direction:horizontal)]
struct ShapeOptions { // 3c | 3b | 3c
    stroke_bitmask: Row<Checkbox>,
    #[separator(4px)]
    clicky_stuff: Row<Button>,
    other_stuff: Row<Checkbox>,
}

render() {
    match self.sides {
        1 => foo!,
        2..5 => bar!,
        _ => panic!,
    }
}

struct RowWithSeparator<U:Component, T: Component> {
    elements: Vec<U>
}

impl Component for RowWithSeparator<…> {
	fn render(&self) -> HTML {
        self.iter().map(|x|html!(x)).join(T::default().render())
	}
}

struct Row {
	elements: Vec<Box<Component>>,
}

impl Component for Vec<Box<Component>> {
	fn render(&self) -> HTML {
        self.iter().map(|x|html!(x)).join()
	}
}

impl Component for Checkbox {
	fn render(&self) -> HTML {
		html!("<row>{}</row>", self.checked)
	}
}

[Keavon]

Closed by PR #499.