Fixed up DPI scaling issues.

README.md

@@ -18,11 +18,13 @@ Kayak UI is in the very early stages of development. Important features are miss
 ## Features
 - Easy to use declarative syntax using a custom proc macro
 - Basic widget and global state management
-- Input events
+- Input events (Mouse, Keyboard, Char)
 - Fast and accurate layouts using morphorm: https://github.com/geom3trik/morphorm
 - A few default widgets check out [kayak_widgets](./kayak_widgets)!
 - Style system built to kind of mimic CSS styles.
 - Image and Nine patch rendering.
+- Vec widgets see vec_widget example!
+- Removal of widgets.
 
 ## Bevy Renderer Features
 - Image and NinePatch renderer
@@ -30,13 +32,12 @@ Kayak UI is in the very early stages of development. Important features are miss
 - Quad renderer with rounded corners.
 - Custom UI node to ensure UI renders on top of 3D and 2D entities.
 - Fully integrated into bevy to capture input events, use bevy assets(images, etc).
+- Dpi Scaling
 
 ## Missing features
-- Widget diffing see issue: https://github.com/StarArawn/kayak_ui/issues/1
-- Removal of widgets.
+- Widget prop diffing see issue: https://github.com/StarArawn/kayak_ui/issues/1
 - More default widgets.
-- More events(keyboard events, etc)
-- Vec widgets IE: `{some_vec.map(|my_string| <Text content={my_string} />)}`
+- More events
 
 ## Example Screenshot
 <img src="images/screen1.png" alt="Kayak UI" width="600" />

bevy_kayak_ui/src/render/unified/font/extract.rs

@@ -17,6 +17,7 @@ pub fn extract_texts(
     render_primitive: &RenderPrimitive,
     fonts: &Res<Assets<KayakFont>>,
     font_mapping: &Res<FontMapping>,
+    _dpi: f32,
 ) -> Vec<ExtractQuadBundle> {
     let mut extracted_texts = Vec::new();
     let (background_color, layout, font_size, content, font) = match render_primitive {

bevy_kayak_ui/src/render/unified/image/extract.rs

@@ -9,6 +9,7 @@ use crate::{
 pub fn extract_images(
     render_command: &RenderPrimitive,
     image_manager: &Res<ImageManager>,
+    dpi: f32,
 ) -> Vec<ExtractQuadBundle> {
     let (layout, handle) = match render_command {
         RenderPrimitive::Image { layout, handle } => (layout, handle),
@@ -19,7 +20,7 @@ pub fn extract_images(
         extracted_quad: ExtractedQuad {
             rect: Rect {
                 min: Vec2::new(layout.posx, layout.posy),
-                max: Vec2::new(layout.posx + layout.width, layout.posy + layout.height),
+                max: Vec2::new(layout.posx + layout.width, layout.posy + layout.height) * dpi,
             },
             color: Color::WHITE,
             vertex_index: 0,

bevy_kayak_ui/src/render/unified/mod.rs

@@ -7,6 +7,7 @@ use bevy::{
         RenderApp, RenderStage,
     },
     sprite::Rect,
+    window::Windows,
 };
 use kayak_core::{render_primitive::RenderPrimitive, Binding, Bound};
 use kayak_font::KayakFont;
@@ -68,6 +69,7 @@ pub fn extract(
     font_mapping: Res<FontMapping>,
     image_manager: Res<ImageManager>,
     images: Res<Assets<Image>>,
+    windows: Res<Windows>,
     window_size: Res<Binding<WindowSize>>,
 ) {
     let render_primitives = if let Ok(context) = context.kayak_context.read() {
@@ -76,26 +78,32 @@ pub fn extract(
         vec![]
     };
 
+    let dpi = if let Some(window) = windows.get_primary() {
+        window.scale_factor() as f32
+    } else {
+        1.0
+    };
+
     // dbg!(&render_primitives);
 
     let mut extracted_quads = Vec::new();
     for render_primitive in render_primitives {
         match render_primitive {
             RenderPrimitive::Text { .. } => {
-                let text_quads = font::extract_texts(&render_primitive, &fonts, &font_mapping);
+                let text_quads = font::extract_texts(&render_primitive, &fonts, &font_mapping, dpi);
                 extracted_quads.extend(text_quads);
             }
             RenderPrimitive::Image { .. } => {
-                let image_quads = image::extract_images(&render_primitive, &image_manager);
+                let image_quads = image::extract_images(&render_primitive, &image_manager, dpi);
                 extracted_quads.extend(image_quads);
             }
             RenderPrimitive::Quad { .. } => {
-                let quad_quads = quad::extract_quads(&render_primitive);
+                let quad_quads = quad::extract_quads(&render_primitive, dpi);
                 extracted_quads.extend(quad_quads);
             }
             RenderPrimitive::NinePatch { .. } => {
                 let nine_patch_quads =
-                    nine_patch::extract_nine_patch(&render_primitive, &image_manager, &images);
+                    nine_patch::extract_nine_patch(&render_primitive, &image_manager, &images, dpi);
                 extracted_quads.extend(nine_patch_quads);
             }
             RenderPrimitive::Clip { layout } => {
@@ -103,7 +111,8 @@ pub fn extract(
                     extracted_quad: ExtractedQuad {
                         rect: Rect {
                             min: Vec2::new(layout.posx, layout.posy),
-                            max: Vec2::new(layout.posx + layout.width, layout.posy + layout.height),
+                            max: Vec2::new(layout.posx + layout.width, layout.posy + layout.height)
+                                * dpi,
                         },
                         color: Color::default(),
                         vertex_index: 0,

bevy_kayak_ui/src/render/unified/nine_patch/extract.rs

@@ -15,6 +15,7 @@ pub fn extract_nine_patch(
     render_primitive: &RenderPrimitive,
     image_manager: &Res<ImageManager>,
     images: &Res<Assets<Image>>,
+    dpi: f32,
 ) -> Vec<ExtractQuadBundle> {
     let mut extracted_quads = Vec::new();
 
@@ -44,7 +45,8 @@ pub fn extract_nine_patch(
                 i.texture_descriptor.size.height as f32,
             ))
         })
-        .unwrap();
+        .unwrap()
+        * dpi;
 
     let extracted_quad_template = ExtractedQuad {
         rect: Rect {

bevy_kayak_ui/src/render/unified/quad/extract.rs

@@ -6,7 +6,7 @@ use crate::{
     to_bevy_color,
 };
 
-pub fn extract_quads(render_primitive: &RenderPrimitive) -> Vec<ExtractQuadBundle> {
+pub fn extract_quads(render_primitive: &RenderPrimitive, dpi: f32) -> Vec<ExtractQuadBundle> {
     let (background_color, layout, border_radius) = match render_primitive {
         RenderPrimitive::Quad {
             background_color,
@@ -20,7 +20,7 @@ pub fn extract_quads(render_primitive: &RenderPrimitive) -> Vec<ExtractQuadBundl
         extracted_quad: ExtractedQuad {
             rect: Rect {
                 min: Vec2::new(layout.posx, layout.posy),
-                max: Vec2::new(layout.posx + layout.width, layout.posy + layout.height),
+                max: Vec2::new(layout.posx + layout.width, layout.posy + layout.height) * dpi,
             },
             color: to_bevy_color(background_color),
             vertex_index: 0,