Aspect ratio box

CHANGELOG.md

@@ -31,6 +31,7 @@ You can find its changes [documented below](#070---2021-01-01).
 - New `TextBox` widget with IME integration ([#1636] by [@cmyr])
 - `Notification`s can be submitted while handling other `Notification`s ([#1640] by [@cmyr])
 - Added ListIter implementations for OrdMap ([#1641] by [@Lejero])
+- Add `AspectRatioBox` widget ([#1645] by [@arthmis])
 - `Padding` can now use `Key<Insets>` ([#1662] by [@cmyr])
 - `LifeCycle::DisabledChanged`, `InternalLifeCycle::RouteDisabledChanged` and the `set_disabled()` and `is_disabled()`
   context-methods to implement disabled ([#1632] by [@xarvic])
@@ -422,6 +423,7 @@ Last release without a changelog :(
 ## 0.1.1 - 2018-11-02
 ## 0.1.0 - 2018-11-02
 
+[@arthmis]: https://github.com/arthmis
 [@futurepaul]: https://github.com/futurepaul
 [@finnerale]: https://github.com/finnerale
 [@totsteps]: https://github.com/totsteps
@@ -688,6 +690,7 @@ Last release without a changelog :(
 [#1636]: https://github.com/linebender/druid/pull/1636
 [#1640]: https://github.com/linebender/druid/pull/1640
 [#1641]: https://github.com/linebender/druid/pull/1641
+[#1645]: https://github.com/linebender/druid/pull/1645
 [#1647]: https://github.com/linebender/druid/pull/1647
 [#1654]: https://github.com/linebender/druid/pull/1654
 [#1660]: https://github.com/linebender/druid/pull/1660

druid/examples/aspect_ratio_box.rs

@@ -0,0 +1,53 @@
+use druid::{
+    widget::{AspectRatioBox, Flex, Label, LineBreaking, MainAxisAlignment, SizedBox},
+    AppLauncher, Color, Data, Env, Lens, Widget, WidgetExt, WindowDesc,
+};
+
+fn main() {
+    let window = WindowDesc::new(ui());
+    let fixed_message =
+        "Hello there, this is a fixed size box and it will not change no matter what.";
+    let aspect_ratio_message =
+        "Hello there, this is a box that maintains it's aspect-ratio as best as possible. Notice text will overflow if box becomes too small.";
+    AppLauncher::with_window(window)
+        .launch(AppState {
+            fixed_box: fixed_message.to_string(),
+            aspect_ratio_box: aspect_ratio_message.to_string(),
+        })
+        .unwrap();
+}
+#[derive(Clone, Data, Lens, Debug)]
+struct AppState {
+    fixed_box: String,
+    aspect_ratio_box: String,
+}
+
+fn ui() -> impl Widget<AppState> {
+    let fixed_label = Label::new(|data: &String, _env: &Env| data.clone())
+        .with_text_color(Color::BLACK)
+        .with_line_break_mode(LineBreaking::WordWrap)
+        .center()
+        .lens(AppState::fixed_box);
+    let fixed_box = SizedBox::new(fixed_label)
+        .height(250.)
+        .width(250.)
+        .background(Color::WHITE);
+
+    let aspect_ratio_label = Label::new(|data: &String, _env: &Env| data.clone())
+        .with_text_color(Color::BLACK)
+        .with_line_break_mode(LineBreaking::WordWrap)
+        .center()
+        .lens(AppState::aspect_ratio_box);
+    let aspect_ratio_box = AspectRatioBox::new(aspect_ratio_label, 2.0)
+        .border(Color::BLACK, 1.0)
+        .background(Color::WHITE);
+
+    Flex::column()
+        .with_flex_child(fixed_box, 1.0)
+        // using flex child so that aspect_ratio doesn't get any infinite constraints
+        // you can use this in `with_child` but there might be some unintended behavior
+        // the aspect ratio box will work correctly but it might use up all the
+        // allotted space and make any flex children disappear
+        .with_flex_child(aspect_ratio_box, 1.0)
+        .main_axis_alignment(MainAxisAlignment::SpaceEvenly)
+}

druid/src/tests/layout_tests.rs

@@ -186,3 +186,90 @@ fn flex_paint_rect_overflow() {
         assert_eq!(state.paint_rect().size(), expected_paint_rect.size());
     })
 }
+
+use crate::tests::harness::*;
+use crate::widget::AspectRatioBox;
+use crate::widget::Label;
+use crate::WidgetExt;
+
+#[test]
+fn aspect_ratio_tight_constraints() {
+    let id = WidgetId::next();
+    let (width, height) = (400., 400.);
+    let aspect = AspectRatioBox::<()>::new(Label::new("hello!"), 1.0)
+        .with_id(id)
+        .fix_width(width)
+        .fix_height(height)
+        .center();
+
+    let (window_width, window_height) = (600., 600.);
+
+    Harness::create_simple((), aspect, |harness| {
+        harness.set_initial_size(Size::new(window_width, window_height));
+        harness.send_initial_events();
+        harness.just_layout();
+        let state = harness.get_state(id);
+        assert_eq!(state.layout_rect().size(), Size::new(width, height));
+    });
+}
+
+#[test]
+fn aspect_ratio_infinite_constraints() {
+    let id = WidgetId::next();
+    let (width, height) = (100., 100.);
+    let label = Label::new("hello!").fix_width(width).height(height);
+    let aspect = AspectRatioBox::<()>::new(label, 1.0)
+        .with_id(id)
+        .scroll()
+        .center();
+
+    let (window_width, window_height) = (600., 600.);
+
+    Harness::create_simple((), aspect, |harness| {
+        harness.set_initial_size(Size::new(window_width, window_height));
+        harness.send_initial_events();
+        harness.just_layout();
+        let state = harness.get_state(id);
+        assert_eq!(state.layout_rect().size(), Size::new(width, height));
+    });
+}
+
+#[test]
+fn aspect_ratio_tight_constraint_on_width() {
+    let id = WidgetId::next();
+    let label = Label::new("hello!");
+    let aspect = AspectRatioBox::<()>::new(label, 2.0)
+        .with_id(id)
+        .fix_width(300.)
+        .center();
+
+    let (window_width, window_height) = (600., 50.);
+
+    Harness::create_simple((), aspect, |harness| {
+        harness.set_initial_size(Size::new(window_width, window_height));
+        harness.send_initial_events();
+        harness.just_layout();
+        let state = harness.get_state(id);
+        assert_eq!(state.layout_rect().size(), Size::new(300., 50.));
+    });
+}
+
+#[test]
+fn aspect_ratio() {
+    let id = WidgetId::next();
+    let label = Label::new("hello!");
+    let aspect = AspectRatioBox::<()>::new(label, 2.0)
+        .with_id(id)
+        .center()
+        .center();
+
+    let (window_width, window_height) = (1000., 1000.);
+
+    Harness::create_simple((), aspect, |harness| {
+        harness.set_initial_size(Size::new(window_width, window_height));
+        harness.send_initial_events();
+        harness.just_layout();
+        let state = harness.get_state(id);
+        assert_eq!(state.layout_rect().size(), Size::new(1000., 500.));
+    });
+}

druid/src/widget/aspect_ratio_box.rs

@@ -0,0 +1,164 @@
+// Copyright 2021 The Druid Authors.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+use druid::widget::prelude::*;
+use druid::Data;
+use tracing::{instrument, warn};
+
+/// A widget that preserves the aspect ratio given to it.
+///
+/// If given a child, this widget forces the child to have a width and height that preserves
+/// the aspect ratio.
+///
+/// If not given a child, The box will try to size itself  as large or small as possible
+/// to preserve the aspect ratio.
+pub struct AspectRatioBox<T> {
+    inner: Box<dyn Widget<T>>,
+    ratio: f64,
+}
+
+impl<T> AspectRatioBox<T> {
+    /// Create container with a child and aspect ratio.
+    ///
+    /// The aspect ratio is defined as width / height.
+    ///
+    /// If aspect ratio <= 0.0, the ratio will be set to 1.0
+    pub fn new(inner: impl Widget<T> + 'static, ratio: f64) -> Self {
+        Self {
+            inner: Box::new(inner),
+            ratio: clamp_ratio(ratio),
+        }
+    }
+
+    /// Set the ratio of the box.
+    ///
+    /// The ratio has to be a value between 0 and f64::MAX, excluding 0. It will be clamped
+    /// to those values if they exceed the bounds. If the ratio is 0, then the ratio
+    /// will become 1.
+    pub fn set_ratio(&mut self, ratio: f64) {
+        self.ratio = clamp_ratio(ratio);
+    }
+
+    /// Generate `BoxConstraints` that fit within the provided `BoxConstraints`.
+    ///
+    /// If the generated constraints do not fit then they are constrained to the
+    /// provided `BoxConstraints`.
+    fn generate_constraints(&self, bc: &BoxConstraints) -> BoxConstraints {
+        let (mut new_width, mut new_height) = (bc.max().width, bc.max().height);
+
+        if new_width == f64::INFINITY {
+            new_width = new_height * self.ratio;
+        } else {
+            new_height = new_width / self.ratio;
+        }
+
+        if new_width > bc.max().width {
+            new_width = bc.max().width;
+            new_height = new_width / self.ratio;
+        }
+
+        if new_height > bc.max().height {
+            new_height = bc.max().height;
+            new_width = new_height * self.ratio;
+        }
+
+        if new_width < bc.min().width {
+            new_width = bc.min().width;
+            new_height = new_width / self.ratio;
+        }
+
+        if new_height < bc.min().height {
+            new_height = bc.min().height;
+            new_width = new_height * self.ratio;
+        }
+
+        BoxConstraints::tight(bc.constrain(Size::new(new_width, new_height)))
+    }
+}
+
+/// Clamps the ratio between 0.0 and f64::MAX
+/// If ratio is 0.0 then it will return 1.0 to avoid creating NaN
+fn clamp_ratio(mut ratio: f64) -> f64 {
+    ratio = f64::clamp(ratio, 0.0, f64::MAX);
+
+    if ratio == 0.0 {
+        warn!("Provided ratio was <= 0.0.");
+        1.0
+    } else {
+        ratio
+    }
+}
+
+impl<T: Data> Widget<T> for AspectRatioBox<T> {
+    #[instrument(
+        name = "AspectRatioBox",
+        level = "trace",
+        skip(self, ctx, event, data, env)
+    )]
+    fn event(&mut self, ctx: &mut EventCtx, event: &Event, data: &mut T, env: &Env) {
+        self.inner.event(ctx, event, data, env);
+    }
+
+    #[instrument(
+        name = "AspectRatioBox",
+        level = "trace",
+        skip(self, ctx, event, data, env)
+    )]
+    fn lifecycle(&mut self, ctx: &mut LifeCycleCtx, event: &LifeCycle, data: &T, env: &Env) {
+        self.inner.lifecycle(ctx, event, data, env)
+    }
+
+    #[instrument(
+        name = "AspectRatioBox",
+        level = "trace",
+        skip(self, ctx, old_data, data, env)
+    )]
+    fn update(&mut self, ctx: &mut UpdateCtx, old_data: &T, data: &T, env: &Env) {
+        self.inner.update(ctx, old_data, data, env);
+    }
+
+    #[instrument(
+        name = "AspectRatioBox",
+        level = "trace",
+        skip(self, ctx, bc, data, env)
+    )]
+    fn layout(&mut self, ctx: &mut LayoutCtx, bc: &BoxConstraints, data: &T, env: &Env) -> Size {
+        bc.debug_check("AspectRatioBox");
+
+        if bc.max() == bc.min() {
+            warn!("Box constraints are tight. Aspect ratio box will not be able to preserve aspect ratio.");
+
+            return self.inner.layout(ctx, &bc, data, env);
+        }
+
+        if bc.max().width == f64::INFINITY && bc.max().height == f64::INFINITY {
+            warn!("Box constraints are INFINITE. Aspect ratio box won't be able to choose a size because the constraints given by the parent widget are INFINITE.");
+
+            return self.inner.layout(ctx, &bc, data, env);
+        }
+
+        let bc = self.generate_constraints(bc);
+
+        self.inner.layout(ctx, &bc, data, env)
+    }
+
+    #[instrument(name = "AspectRatioBox", level = "trace", skip(self, ctx, data, env))]
+    fn paint(&mut self, ctx: &mut PaintCtx, data: &T, env: &Env) {
+        self.inner.paint(ctx, data, env);
+    }
+
+    fn id(&self) -> Option<WidgetId> {
+        self.inner.id()
+    }
+}

druid/src/widget/mod.rs

@@ -20,6 +20,7 @@ mod widget_wrapper;
 
 mod added;
 mod align;
+mod aspect_ratio_box;
 mod button;
 mod checkbox;
 mod click;
@@ -65,6 +66,7 @@ mod widget_ext;
 pub use self::image::Image;
 pub use added::Added;
 pub use align::Align;
+pub use aspect_ratio_box::AspectRatioBox;
 pub use button::Button;
 pub use checkbox::Checkbox;
 pub use click::Click;