Add Board widget for absolute positioning

masonry/src/widget/mod.rs

@@ -14,11 +14,13 @@ mod widget_state;
 mod tests;
 
 mod align;
+mod board;
 mod button;
 mod checkbox;
 mod flex;
 mod grid;
 mod image;
+mod kurbo;
 mod label;
 mod portal;
 mod progress_bar;
@@ -34,10 +36,12 @@ mod widget_arena;
 
 pub use self::image::Image;
 pub use align::Align;
+pub use board::{Board, BoardParams, PositionedElement, SvgElement};
 pub use button::Button;
 pub use checkbox::Checkbox;
 pub use flex::{Axis, CrossAxisAlignment, Flex, FlexParams, MainAxisAlignment};
 pub use grid::{Grid, GridParams};
+pub use kurbo::{ConcreteShape, KurboShape};
 pub use label::{Label, LineBreaking};
 pub use portal::Portal;
 pub use progress_bar::ProgressBar;

masonry/src/widget/widget_pod.rs

@@ -57,6 +57,39 @@ impl<W: Widget> WidgetPod<W> {
  pub fn id(&self) -> WidgetId {
  self.id
  }
+
+ /// Take the inner widget, if it has not been inserted yet.
+ ///
+ /// Never call it outside of `Widget::lyfecycle` or `View::build`
+ pub fn inner(self) -> Option<W> {
+ if let WidgetPodInner::Created(w) = self.inner {
+ Some(w)
+ } else {
+ None
+ }
+ }
+
+ /// Get access to the inner widget, if it has not been inserted yet.
+ ///
+ /// Never call it outside of `Widget::lyfecycle` or `View::build`
+ pub fn as_ref(&self) -> Option<&W> {
+ if let WidgetPodInner::Created(w) = &self.inner {
+ Some(w)
+ } else {
+ None
+ }
+ }
+
+ /// Get access to the inner widget, if it has not been inserted yet.
+ ///
+ /// Never call it outside of `Widget::lyfecycle` or `View::build`
+ pub fn as_mut(&mut self) -> Option<&mut W> {
+ if let WidgetPodInner::Created(w) = &mut self.inner {
+ Some(w)
+ } else {
+ None
+ }
+ }
 }
 
 impl<W: Widget + 'static> WidgetPod<W> {

xilem/Cargo.toml

@@ -76,7 +76,7 @@ crate-type = ["cdylib"]
 workspace = true
 
 [dependencies]
-xilem_core.workspace = true
+xilem_core = { workspace = true, features = ["kurbo"] }
 masonry.workspace = true
 winit.workspace = true
 tracing.workspace = true

xilem/examples/board.rs

@@ -0,0 +1,78 @@
+// Copyright 2024 the Xilem Authors
+// SPDX-License-Identifier: Apache-2.0
+
+use masonry::{
+ widget::{CrossAxisAlignment, MainAxisAlignment},
+ Size,
+};
+use winit::error::EventLoopError;
+use xilem::view::{
+ board, button, flex, label, Axis, BoardExt, BoardParams, FlexExt as _, FlexSpacer, GraphicsExt,
+};
+use xilem::{Color, EventLoop, WidgetView, Xilem};
+
+struct AppState {
+ buttons: Vec<bool>,
+ clicked: Option<usize>,
+}
+
+impl AppState {
+ fn view(&mut self) -> impl WidgetView<Self> {
+ flex((
+ FlexSpacer::Fixed(30.0),
+ flex((
+ button("B", |state: &mut AppState| state.buttons.push(true)),
+ button("C", |state: &mut AppState| state.buttons.push(false)),
+ button("-", |state: &mut AppState| {
+ state.buttons.pop();
+ state.clicked = None;
+ }),
+ label(self.clicked.map_or_else(
+ || String::from("Nothing has been clicked."),
+ |i| format!("Button {i} has been clicked."),
+ )),
+ ))
+ .direction(Axis::Horizontal),
+ FlexSpacer::Fixed(10.0),
+ board(
+ self.buttons
+ .iter()
+ .copied()
+ .enumerate()
+ .map(|(i, is_button)| {
+ let origin = i as f64 * 15. + 10.;
+ let size = Size::new(30., 30.);
+ if is_button {
+ button(i.to_string(), move |state: &mut AppState| {
+ state.clicked = Some(i);
+ })
+ .positioned(BoardParams::new((origin, origin), size))
+ .into_any_board()
+ } else {
+ vello::kurbo::Circle::new((origin + 15., origin + 15.), 15.)
+ .fill(Color::NAVY)
+ .stroke(Color::PAPAYA_WHIP, vello::kurbo::Stroke::new(2.))
+ .into_any_board()
+ }
+ })
+ .collect::<Vec<_>>(),
+ )
+ .flex(1.),
+ ))
+ .direction(Axis::Vertical)
+ .cross_axis_alignment(CrossAxisAlignment::Center)
+ .main_axis_alignment(MainAxisAlignment::Center)
+ }
+}
+
+fn main() -> Result<(), EventLoopError> {
+ let app = Xilem::new(
+ AppState {
+ buttons: Vec::new(),
+ clicked: None,
+ },
+ AppState::view,
+ );
+ app.run_windowed(EventLoop::with_user_event(), "Board".into())?;
+ Ok(())
+}