Add get_content_rect to PaintCx and tweak inspector styling

lapce · Nov 2, 2023 · dd3149d · dd3149d
1 parent 0c124aa
commit dd3149d
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 10 deletions.
diff --git a/examples/counter/src/main.rs b/examples/counter/src/main.rs
@@ -74,6 +74,7 @@ fn app_view() -> impl View {
             .flex_col()
             .items_center()
             .justify_center()
+            .background(Color::WHITE)
     });
 
     let id = view.id();

diff --git a/src/context.rs b/src/context.rs
@@ -9,7 +9,7 @@ use floem_renderer::{
     cosmic_text::{LineHeightValue, Style as FontStyle, Weight},
     Renderer as FloemRenderer,
 };
-use kurbo::{Affine, Point, Rect, RoundedRect, Shape, Size, Vec2};
+use kurbo::{Affine, Insets, Point, Rect, RoundedRect, Shape, Size, Vec2};
 use peniko::Color;
 use taffy::{
     prelude::{Layout, Node},
@@ -25,9 +25,10 @@ use crate::{
     pointer::PointerInputEvent,
     responsive::{GridBreakpoints, ScreenSize, ScreenSizeBp},
     style::{
-        BuiltinStyleReader, ComputedStyle, CursorStyle, DisplayProp, Style, StyleMap, StyleProp,
-        StyleSelector, StyleSelectors,
+        BuiltinStyleReader, ComputedStyle, CursorStyle, DisplayProp, LayoutProps, Style, StyleMap,
+        StyleProp, StyleSelector, StyleSelectors,
     },
+    unit::PxPct,
 };
 
 pub type EventCallback = dyn Fn(&Event) -> bool;
@@ -52,6 +53,7 @@ pub struct ViewState {
     pub(crate) has_style_selectors: StyleSelectors,
     pub(crate) viewport: Option<Rect>,
     pub(crate) layout_rect: Rect,
+    pub(crate) layout_props: LayoutProps,
     pub(crate) animation: Option<Animation>,
     pub(crate) base_style: Option<Style>,
     pub(crate) style: Style,
@@ -79,6 +81,7 @@ impl ViewState {
             node: taffy.new_leaf(taffy::style::Style::DEFAULT).unwrap(),
             viewport: None,
             layout_rect: Rect::ZERO,
+            layout_props: Default::default(),
             request_layout: true,
             has_style_selectors: StyleSelectors::default(),
             animation: None,
@@ -444,6 +447,23 @@ impl AppState {
             .copied()
     }
 
+    pub(crate) fn get_content_rect(&mut self, id: Id) -> Rect {
+        let view_state = self.view_state(id);
+        let rect = view_state.layout_rect;
+        let props = &view_state.layout_props;
+        let pixels = |px_pct, abs| match px_pct {
+            PxPct::Px(v) => v,
+            PxPct::Pct(pct) => pct * abs,
+        };
+        let origin = rect.origin();
+        rect.inset(-Insets {
+            x0: props.border_left().0 + pixels(props.padding_left(), rect.width()),
+            x1: props.border_right().0 + pixels(props.padding_right(), rect.width()),
+            y0: props.border_top().0 + pixels(props.padding_top(), rect.height()),
+            y1: props.border_bottom().0 + pixels(props.padding_bottom(), rect.height()),
+        }) - origin.to_vec2()
+    }
+
     pub(crate) fn get_layout_rect(&mut self, id: Id) -> Rect {
         self.view_state(id).layout_rect
     }
@@ -952,6 +972,11 @@ impl<'a> PaintCx<'a> {
         self.app_state.get_layout(id)
     }
 
+    /// Returns the layout rect excluding borders, padding and position.
+    pub fn get_content_rect(&mut self, id: Id) -> Rect {
+        self.app_state.get_content_rect(id)
+    }
+
     pub fn get_computed_style(&mut self, id: Id) -> &ComputedStyle {
         self.app_state.get_computed_style(id)
     }

diff --git a/src/inspector.rs b/src/inspector.rs
@@ -17,6 +17,7 @@ use std::fmt::Display;
 use std::rc::Rc;
 use std::time::Instant;
 use taffy::style::AlignItems;
+use winit::keyboard::{Key, NamedKey};
 use winit::window::WindowId;
 
 #[derive(Clone, Debug)]
@@ -222,6 +223,7 @@ fn header(label: impl Display) -> Label {
         s.padding(5.0)
             .background(Color::WHITE_SMOKE)
             .width_full()
+            .height(27.0)
             .border_bottom(1.0)
             .border_color(Color::LIGHT_GRAY)
     })
@@ -273,6 +275,7 @@ fn selected_view(capture: &Rc<Capture>, selected: RwSignal<Option<Id>>) -> impl
                         selected.set(None);
                         true
                     });
+                let clear = stack((clear,));
                 Box::new(stack((name, count, x, y, w, h, clear)).style(|s| s.flex_col()))
             } else {
                 Box::new(info("No selection".to_string()))
@@ -386,7 +389,7 @@ fn capture_view(capture: &Rc<Capture>) -> impl View {
 
     let seperator = empty().style(move |s| {
         s.height_full()
-            .width(1.0)
+            .min_width(1.0)
             .background(Color::BLACK.with_alpha_factor(0.2))
     });
 
@@ -434,11 +437,25 @@ pub fn capture(window_id: WindowId) {
         RUNNING.set(true);
         new_window(
             move |_| {
-                dyn_container(
+                let view = dyn_container(
                     move || capture.get(),
                     |capture| Box::new(inspector_view(&capture.map(Rc::new))),
+                );
+                let id = view.id();
+                view.style(|s| s.width_full().height_full()).on_event(
+                    EventListener::KeyUp,
+                    move |e| {
+                        if let Event::KeyUp(e) = e {
+                            if e.key.logical_key == Key::Named(NamedKey::F11)
+                                && e.modifiers.shift_key()
+                            {
+                                id.inspect();
+                                return true;
+                            }
+                        }
+                        false
+                    },
                 )
-                .style(|s| s.width_full().height_full())
             },
             Some(WindowConfig {
                 size: Some(Size {

diff --git a/src/style.rs b/src/style.rs
@@ -685,6 +685,19 @@ prop_extracter! {
     }
 }
 
+prop_extracter! {
+    pub(crate) LayoutProps {
+        pub border_left: BorderLeft,
+        pub border_top: BorderTop,
+        pub border_right: BorderRight,
+        pub border_bottom: BorderBottom,
+        pub padding_left: PaddingLeft,
+        pub padding_top: PaddingTop,
+        pub padding_right: PaddingRight,
+        pub padding_bottom: PaddingBottom,
+    }
+}
+
 impl Style {
     pub fn get<P: StyleProp>(&self, _prop: P) -> P::Type {
         if let Some(other) = &self.other {

diff --git a/src/view.rs b/src/view.rs
@@ -95,7 +95,9 @@ use crate::{
     context::{AppState, DragState, EventCx, LayoutCx, PaintCx, UpdateCx},
     event::{Event, EventListener},
     id::Id,
-    style::{BoxShadowProp, ComputedStyle, Outline, OutlineColor, Style, StyleMap, ZIndex},
+    style::{
+        BoxShadowProp, ComputedStyle, LayoutProps, Outline, OutlineColor, Style, StyleMap, ZIndex,
+    },
 };
 
 bitflags! {
@@ -199,6 +201,12 @@ pub trait View {
         cx.style.direct = style.other.clone();
         StyleMap::apply_only_inherited(&mut cx.style.current, &cx.style.direct);
 
+        // Extract the relevant layout properties so the content rect can be calculated
+        // when painting.
+        let mut props = LayoutProps::default();
+        props.read(cx);
+        cx.app_state_mut().view_state(self.id()).layout_props = props;
+
         let node = self.layout(cx);
 
         cx.restore();

diff --git a/src/views/img.rs b/src/views/img.rs
@@ -3,7 +3,6 @@ use std::rc::Rc;
 use floem_reactive::create_effect;
 use floem_renderer::Renderer;
 use image::{DynamicImage, GenericImageView};
-use kurbo::Size;
 use sha2::{Digest, Sha256};
 
 use crate::{
@@ -194,8 +193,7 @@ impl View for Img {
 
     fn paint(&mut self, cx: &mut crate::context::PaintCx) {
         if let Some(img) = self.img.as_ref() {
-            let size = cx.get_layout(self.id).unwrap().size;
-            let rect = Size::new(size.width as f64, size.height as f64).to_rect();
+            let rect = cx.get_content_rect(self.id);
             cx.draw_img(
                 floem_renderer::Img {
                     img,