From 89a672a0fa8e8b58519905edba4f75bda360b7ef Mon Sep 17 00:00:00 2001 From: cactice <14835424+Cactice@users.noreply.github.com> Date: Fri, 29 Dec 2023 16:49:15 +0900 Subject: [PATCH 1/8] Remove unnecessary arguments from functions --- examples/list/src/main.rs | 23 +++++++---------- experiment/src/responsive/clickable.rs | 2 +- .../src/responsive/common_constraint.rs | 5 ++-- experiment/src/responsive/constraint.rs | 23 ++++++----------- experiment/src/responsive/layout_machine.rs | 25 +++++++++++-------- 5 files changed, 35 insertions(+), 43 deletions(-) diff --git a/examples/list/src/main.rs b/examples/list/src/main.rs index 83a7372..ead0abf 100644 --- a/examples/list/src/main.rs +++ b/examples/list/src/main.rs @@ -1,13 +1,8 @@ -use experiment::{responsive::layout_machine::LayoutMachine, scroll::ScrollState, uses::use_svg}; +use experiment::{responsive::layout_machine::LayoutMachine, uses::use_svg}; use guppies::bytemuck::cast_slice; use guppies::{GpuRedraw, Guppy}; use mobile_entry_point::mobile_entry_point; -struct ListItem { - word: String, - icon: String, -} - pub fn main() { let mut layout_machine = LayoutMachine::default(); @@ -19,13 +14,13 @@ pub fn main() { None, ); - // let list = use_svg( - // include_str!("../Left.svg").to_string(), - // |node, mut pass_down| { - // layout_machine.add_node(&node, &mut pass_down); - // }, - // Some("ListItem".to_string()), - // ); + let list = use_svg( + include_str!("../Left.svg").to_string(), + |node, mut pass_down| { + layout_machine.add_node(&node, &mut pass_down); + }, + Some("ListItem".to_string()), + ); let mut guppy = Guppy::new([GpuRedraw::default()]); @@ -35,7 +30,7 @@ pub fn main() { gpu_redraws[0].update_triangles( svg_set .get_combined_geometries() - // .extend(&list.get_combined_geometries()) + .extend(&list.get_combined_geometries()) .triangles, 0, ); diff --git a/experiment/src/responsive/clickable.rs b/experiment/src/responsive/clickable.rs index c0db39d..9f960c2 100644 --- a/experiment/src/responsive/clickable.rs +++ b/experiment/src/responsive/clickable.rs @@ -22,7 +22,7 @@ impl ClickableBbox { }; let click = Mat4::from_translation([-1., 1., 0.].into()) * Mat4::from_scale([0.5, 0.5, 1.].into()) - * get_normalize_scale(display, Mat4::IDENTITY) + * get_normalize_scale(display) * click; let click = bbox.inverse() * click; if click.x.abs() < 1. && click.y.abs() < 1. { diff --git a/experiment/src/responsive/common_constraint.rs b/experiment/src/responsive/common_constraint.rs index 1f7d902..55eb002 100644 --- a/experiment/src/responsive/common_constraint.rs +++ b/experiment/src/responsive/common_constraint.rs @@ -26,8 +26,8 @@ impl From for CommonConstraint { impl From for CommonConstraint { fn from(y_constraint: YConstraint) -> Self { match y_constraint { - YConstraint::Top(top) => CommonConstraint::End(top), - YConstraint::Bottom(bottom) => CommonConstraint::Start(bottom), + YConstraint::Top(top) => CommonConstraint::Start(top), + YConstraint::Bottom(bottom) => CommonConstraint::End(bottom), YConstraint::TopAndBottom { top, bottom } => CommonConstraint::StartAndEnd { start: bottom, end: top, @@ -40,7 +40,6 @@ impl From for CommonConstraint { impl CommonConstraint { pub(crate) fn to_transform f32, G: Fn(f32, f32) -> Vec3>( self, - display: Mat4, bbox: Mat4, parent_bbox: Mat4, accessor: F, diff --git a/experiment/src/responsive/constraint.rs b/experiment/src/responsive/constraint.rs index 45e90e3..03aa1b4 100644 --- a/experiment/src/responsive/constraint.rs +++ b/experiment/src/responsive/constraint.rs @@ -2,7 +2,7 @@ use super::common_constraint::CommonConstraint; use guppies::glam::{Mat4, Vec3}; use serde::{Deserialize, Serialize}; -pub fn get_normalize_scale(display: Mat4, parent_bbox: Mat4) -> Mat4 { +pub fn get_normalize_scale(display: Mat4) -> Mat4 { display.inverse() } @@ -25,19 +25,14 @@ impl Default for XConstraint { } impl XConstraint { - pub(crate) fn to_pre_post_transform( - self, - display: Mat4, - bbox: Mat4, - parent_bbox: Mat4, - ) -> Mat4 { + pub(crate) fn to_transform(self, bbox: Mat4, parent_bbox: Mat4) -> Mat4 { let accessor = |Vec3 { x, .. }| x; let composer = |x, other| Vec3 { x, y: other, z: other, }; - CommonConstraint::from(self).to_transform(display, bbox, parent_bbox, accessor, composer) + CommonConstraint::from(self).to_transform(bbox, parent_bbox, accessor, composer) } } @@ -60,14 +55,14 @@ impl Default for YConstraint { } impl YConstraint { - pub(crate) fn to_transform(self, display: Mat4, bbox: Mat4, parent_bbox: Mat4) -> Mat4 { + pub(crate) fn to_transform(self, bbox: Mat4, parent_bbox: Mat4) -> Mat4 { let accessor = |Vec3 { y, .. }| y; let composer = |y, other| Vec3 { x: other, y, z: other, }; - CommonConstraint::from(self).to_transform(display, bbox, parent_bbox, accessor, composer) + CommonConstraint::from(self).to_transform(bbox, parent_bbox, accessor, composer) } } @@ -84,11 +79,9 @@ impl Constraint { y: constraint_y, } = self; - let x = constraint_x.to_pre_post_transform(display, bbox, parent_bbox); - let y = constraint_y.to_transform(display, bbox, parent_bbox); + let x = constraint_x.to_transform(bbox, parent_bbox); + let y = constraint_y.to_transform(bbox, parent_bbox); - let xy = x * y; - - return display.inverse() * xy; + return display.inverse() * x * y; } } diff --git a/experiment/src/responsive/layout_machine.rs b/experiment/src/responsive/layout_machine.rs index 1eda389..94cc191 100644 --- a/experiment/src/responsive/layout_machine.rs +++ b/experiment/src/responsive/layout_machine.rs @@ -1,5 +1,6 @@ use super::clickable::Clickable; use super::clickable::ClickableBbox; +use super::constraint::Constraint; use super::layout::bbox_to_mat4; use super::layout::size_to_mat4; use super::layout::Layout; @@ -18,6 +19,12 @@ use guppies::winit::event::WindowEvent; use regex::Regex; use salvage::usvg::Node; use salvage::usvg::NodeExt; +use serde::Deserialize; +use serde::Serialize; +use std::collections::HashMap; + +#[derive(Debug, Clone, Default, Serialize, Deserialize)] +pub struct ConstraintMap(HashMap); #[derive(Debug, Clone, Default)] pub struct LayoutMachine { @@ -60,11 +67,9 @@ impl LayoutMachine { .map(|parents| { parents .iter() - .enumerate() .fold( - (Mat4::IDENTITY, self.display_bbox_generator()), - |(_parent_result, parent_bbox), (i, layout)| { - dbg!(parent_bbox.to_scale_rotation_translation()); + (Mat4::IDENTITY, self.get_display_bbox()), + |(_parent_result, parent_bbox), layout| { let layout_result = layout.to_mat4(self.display_mat4, parent_bbox); ( Mat4::from_scale([2., -2., 1.].into()) * layout_result, @@ -76,14 +81,14 @@ impl LayoutMachine { }) .collect() } - fn display_bbox_generator(&self) -> Mat4 { - let display = self.display_mat4.to_scale_rotation_translation(); + fn get_display_bbox(&self) -> Mat4 { + let (scale, rot, _trans) = self.display_mat4.to_scale_rotation_translation(); Mat4::from_scale_rotation_translation( - display.0, - display.1, + scale, + rot, Vec3 { - x: -display.0.x / 2., - y: -display.0.y / 2., + x: -scale.x / 2., + y: -scale.y / 2., z: 0., }, ) From ca13a3442e70cd1735fe8fe7de8f6647a0ee4b5d Mon Sep 17 00:00:00 2001 From: cactice <14835424+Cactice@users.noreply.github.com> Date: Fri, 29 Dec 2023 19:57:42 +0900 Subject: [PATCH 2/8] Remove comment out --- examples/list/Left.svg | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/examples/list/Left.svg b/examples/list/Left.svg index c84a248..3e72b63 100644 --- a/examples/list/Left.svg +++ b/examples/list/Left.svg @@ -1,7 +1,7 @@ - + @@ -49,7 +49,7 @@ - [ ] From e8043a2a01bad887a043af533be7bec984ef5fd5 Mon Sep 17 00:00:00 2001 From: cactice <14835424+Cactice@users.noreply.github.com> Date: Fri, 29 Dec 2023 23:00:45 +0900 Subject: [PATCH 3/8] WIP: dysfunctional constraints.json loading --- examples/layout/src/constraints.json | 39 +++++++++++++++++++++ examples/layout/src/main.rs | 4 +++ examples/list/src/constraints.json | 39 +++++++++++++++++++++ examples/list/src/main.rs | 25 +++++++------ experiment/src/lib.rs | 2 ++ experiment/src/responsive/constraint.rs | 8 +++++ experiment/src/responsive/layout.rs | 15 +++++--- experiment/src/responsive/layout_machine.rs | 5 +-- experiment/src/scroll.rs | 2 +- 9 files changed, 121 insertions(+), 18 deletions(-) create mode 100644 examples/layout/src/constraints.json create mode 100644 examples/list/src/constraints.json diff --git a/examples/layout/src/constraints.json b/examples/layout/src/constraints.json new file mode 100644 index 0000000..edac5f5 --- /dev/null +++ b/examples/layout/src/constraints.json @@ -0,0 +1,39 @@ +{ + "VerticalMenuBar #transform": { + "x": { "Right": -248 }, + "y": { "TopAndBottom": { "top": 158, "bottom": 0.09423828125 } } + }, + "Ellipse 4": { "x": { "Center": 0 }, "y": { "Center": 0 } }, + "Ellipse 5": { "x": { "Center": 15 }, "y": { "Center": 0 } }, + "Ellipse 6": { "x": { "Center": 30 }, "y": { "Center": 0 } }, + "Ellipse 7": { "x": { "Center": 30 }, "y": { "Center": 15 } }, + "Ellipse 8": { "x": { "Center": 15 }, "y": { "Center": 15 } }, + "Ellipse 9": { "x": { "Center": 0 }, "y": { "Center": 15 } }, + "Rectangle": { "x": "Scale", "y": "Scale" }, + "MenuBar #transform #layout": { "x": "Scale", "y": { "Top": 118 } }, + "Vector": { "x": { "Right": -24.5 }, "y": { "Center": 0 } }, + "ListItem2 #transform #layout {\"x\":{\"Left\":0.0},\"y\":{\"Top\":100.0}}": { + "x": { "LeftAndRight": { "left": 0, "right": 0 } }, + "y": { "Top": 72.8955078125 } + }, + "word #dynamicText": { "x": "Scale", "y": "Scale" }, + "Vector 10": { "x": { "Right": -0.5 }, "y": "Scale" }, + "Vector 11": { "x": { "Right": 0 }, "y": "Scale" }, + "ListItem #transform #layout {\"x\":{\"Left\":0.0},\"y\":{\"Center\":30.0}}": { + "x": { "LeftAndRight": { "left": 0, "right": 0 } }, + "y": { "Top": 0 } + }, + "MenuBar #transform #layout {\"x\":\"Scale\",\"y\":{\"Center\":0.0}}": { + "x": { "LeftAndRight": { "left": 0, "right": 0 } }, + "y": { "Top": 0 } + }, + "Rectangle ": { "x": "Scale", "y": "Scale" }, + "Vector #transform #layout {\"x\":{\"Right\":-50.0},\"y\":{\"Center\":0.0}}": { + "x": { "Right": -13 }, + "y": { "Center": 14 } + }, + "[ ] #transform #layout {\"x\":{\"Left\":0.0},\"y\":{\"Top\":100.0}}": { + "x": { "Left": 6 }, + "y": "Scale" + } +} diff --git a/examples/layout/src/main.rs b/examples/layout/src/main.rs index db5ce86..f3558a3 100644 --- a/examples/layout/src/main.rs +++ b/examples/layout/src/main.rs @@ -1,3 +1,5 @@ +use experiment::responsive::layout_machine::ConstraintMap; +use experiment::serde_json; use experiment::{responsive::layout_machine::LayoutMachine, uses::use_svg}; use guppies::bytemuck::cast_slice; use guppies::{GpuRedraw, Guppy}; @@ -5,6 +7,8 @@ use mobile_entry_point::mobile_entry_point; pub fn main() { let mut layout_machine = LayoutMachine::default(); + let json = include_str!("constraints.json"); + // layout_machine.constraint_map = serde_json::from_str::(json).unwrap(); let svg_set = use_svg( include_str!("../MenuBar.svg").to_string(), diff --git a/examples/list/src/constraints.json b/examples/list/src/constraints.json new file mode 100644 index 0000000..edac5f5 --- /dev/null +++ b/examples/list/src/constraints.json @@ -0,0 +1,39 @@ +{ + "VerticalMenuBar #transform": { + "x": { "Right": -248 }, + "y": { "TopAndBottom": { "top": 158, "bottom": 0.09423828125 } } + }, + "Ellipse 4": { "x": { "Center": 0 }, "y": { "Center": 0 } }, + "Ellipse 5": { "x": { "Center": 15 }, "y": { "Center": 0 } }, + "Ellipse 6": { "x": { "Center": 30 }, "y": { "Center": 0 } }, + "Ellipse 7": { "x": { "Center": 30 }, "y": { "Center": 15 } }, + "Ellipse 8": { "x": { "Center": 15 }, "y": { "Center": 15 } }, + "Ellipse 9": { "x": { "Center": 0 }, "y": { "Center": 15 } }, + "Rectangle": { "x": "Scale", "y": "Scale" }, + "MenuBar #transform #layout": { "x": "Scale", "y": { "Top": 118 } }, + "Vector": { "x": { "Right": -24.5 }, "y": { "Center": 0 } }, + "ListItem2 #transform #layout {\"x\":{\"Left\":0.0},\"y\":{\"Top\":100.0}}": { + "x": { "LeftAndRight": { "left": 0, "right": 0 } }, + "y": { "Top": 72.8955078125 } + }, + "word #dynamicText": { "x": "Scale", "y": "Scale" }, + "Vector 10": { "x": { "Right": -0.5 }, "y": "Scale" }, + "Vector 11": { "x": { "Right": 0 }, "y": "Scale" }, + "ListItem #transform #layout {\"x\":{\"Left\":0.0},\"y\":{\"Center\":30.0}}": { + "x": { "LeftAndRight": { "left": 0, "right": 0 } }, + "y": { "Top": 0 } + }, + "MenuBar #transform #layout {\"x\":\"Scale\",\"y\":{\"Center\":0.0}}": { + "x": { "LeftAndRight": { "left": 0, "right": 0 } }, + "y": { "Top": 0 } + }, + "Rectangle ": { "x": "Scale", "y": "Scale" }, + "Vector #transform #layout {\"x\":{\"Right\":-50.0},\"y\":{\"Center\":0.0}}": { + "x": { "Right": -13 }, + "y": { "Center": 14 } + }, + "[ ] #transform #layout {\"x\":{\"Left\":0.0},\"y\":{\"Top\":100.0}}": { + "x": { "Left": 6 }, + "y": "Scale" + } +} diff --git a/examples/list/src/main.rs b/examples/list/src/main.rs index ead0abf..19cfd8a 100644 --- a/examples/list/src/main.rs +++ b/examples/list/src/main.rs @@ -1,3 +1,5 @@ +use experiment::responsive::layout_machine::ConstraintMap; +use experiment::serde_json; use experiment::{responsive::layout_machine::LayoutMachine, uses::use_svg}; use guppies::bytemuck::cast_slice; use guppies::{GpuRedraw, Guppy}; @@ -5,6 +7,8 @@ use mobile_entry_point::mobile_entry_point; pub fn main() { let mut layout_machine = LayoutMachine::default(); + let json = include_str!("constraints.json"); + layout_machine.constraint_map = serde_json::from_str::(json).unwrap(); let svg_set = use_svg( include_str!("../Left.svg").to_string(), @@ -14,13 +18,13 @@ pub fn main() { None, ); - let list = use_svg( - include_str!("../Left.svg").to_string(), - |node, mut pass_down| { - layout_machine.add_node(&node, &mut pass_down); - }, - Some("ListItem".to_string()), - ); + // let list = use_svg( + // include_str!("../Left.svg").to_string(), + // |node, mut pass_down| { + // layout_machine.add_node(&node, &mut pass_down); + // }, + // Some("ListItem".to_string()), + // ); let mut guppy = Guppy::new([GpuRedraw::default()]); @@ -28,10 +32,9 @@ pub fn main() { layout_machine.event_handler(event); gpu_redraws[0].update_texture([cast_slice(&layout_machine.transforms[..])].concat()); gpu_redraws[0].update_triangles( - svg_set - .get_combined_geometries() - .extend(&list.get_combined_geometries()) - .triangles, + svg_set.get_combined_geometries().triangles, + // .extend(&list.get_combined_geometries()) + // .triangles, 0, ); }); diff --git a/experiment/src/lib.rs b/experiment/src/lib.rs index 31b3ce2..1ea9fb6 100644 --- a/experiment/src/lib.rs +++ b/experiment/src/lib.rs @@ -1,5 +1,7 @@ pub mod responsive; pub mod scroll; +pub use serde; +pub use serde_json; pub mod spring; pub mod svg_init; pub mod uses; diff --git a/experiment/src/responsive/constraint.rs b/experiment/src/responsive/constraint.rs index 03aa1b4..cb92ed7 100644 --- a/experiment/src/responsive/constraint.rs +++ b/experiment/src/responsive/constraint.rs @@ -71,6 +71,14 @@ pub struct Constraint { pub x: XConstraint, pub y: YConstraint, } +impl Default for Constraint { + fn default() -> Self { + Self { + x: XConstraint::Scale, + y: YConstraint::Scale, + } + } +} impl Constraint { pub fn to_mat4(self, display: Mat4, bbox: Mat4, parent_bbox: Mat4) -> Mat4 { diff --git a/experiment/src/responsive/layout.rs b/experiment/src/responsive/layout.rs index 158b7e2..b3d8edc 100644 --- a/experiment/src/responsive/layout.rs +++ b/experiment/src/responsive/layout.rs @@ -1,4 +1,5 @@ use super::constraint::Constraint; +use super::layout_machine::ConstraintMap; use guppies::glam::Mat4; use guppies::winit::dpi::PhysicalSize; use html_escape::decode_html_entities; @@ -20,12 +21,18 @@ impl Layout { pub fn to_mat4(self, display: Mat4, parent_bbox: Mat4) -> Mat4 { self.constraint.to_mat4(display, self.bbox, parent_bbox) } - pub fn new(node: &usvg::Node) -> Self { + pub fn new(node: &usvg::Node, constraint_map: &ConstraintMap) -> Self { let id = node.id(); let re = Regex::new(r"#layout (.+)").unwrap(); - let json = &re.captures(&id).unwrap()[1]; - let json = decode_html_entities(json).to_string(); - let constraint = serde_json::from_str::(&json).unwrap(); + // let json = &re.captures(&id).unwrap()[1]; + // let json = decode_html_entities(json).to_string(); + // let constraint = serde_json::from_str::(&json).unwrap(); + + dbg!(&id); + let constraint = constraint_map.0.get(&id.to_string()).unwrap().clone(); + + // let constraint = serde_json::from_str::(&json).unwrap(); + let bbox_mat4 = bbox_to_mat4( node.calculate_bbox() .expect("Elements with #transform should be able to calculate bbox"), diff --git a/experiment/src/responsive/layout_machine.rs b/experiment/src/responsive/layout_machine.rs index 94cc191..d3ce3f0 100644 --- a/experiment/src/responsive/layout_machine.rs +++ b/experiment/src/responsive/layout_machine.rs @@ -24,7 +24,7 @@ use serde::Serialize; use std::collections::HashMap; #[derive(Debug, Clone, Default, Serialize, Deserialize)] -pub struct ConstraintMap(HashMap); +pub struct ConstraintMap(pub HashMap); #[derive(Debug, Clone, Default)] pub struct LayoutMachine { @@ -34,6 +34,7 @@ pub struct LayoutMachine { pub display_mat4: Mat4, pub scroll_state: ScrollState, pub transforms: Vec, + pub constraint_map: ConstraintMap, } impl LayoutMachine { @@ -114,7 +115,7 @@ impl LayoutMachine { let layout_regex = Regex::new(LAYOUT_REGEX).unwrap(); let id = &node.id().to_string(); if layout_regex.is_match(id) { - let layout = Layout::new(&node); + let layout = Layout::new(&node, &self.constraint_map); pass_down.parent_layouts.push(layout); self.layouts.push(pass_down.parent_layouts.clone()); if clickable_regex.is_match(&id) { diff --git a/experiment/src/scroll.rs b/experiment/src/scroll.rs index 2e6de8c..46577e2 100644 --- a/experiment/src/scroll.rs +++ b/experiment/src/scroll.rs @@ -19,10 +19,10 @@ pub struct ScrollState { pub mouse_down: Option, pub display_image_size: Vec2, } + impl ScrollState { pub fn new_from_svg_set(svg_set: &SvgSet) -> Self { // Below scale should get overridden by guppies' redraw event forced on init - let svg_scale = svg_set.bbox.size; let scale: Mat4 = get_scale(PhysicalSize::::new(100, 100)); let translate = Mat4::from_translation([-1., 1.0, 0.0].into()); Self { From b410b6c3709b25a8c8ce28b1fa220ebdb887a11d Mon Sep 17 00:00:00 2001 From: cactice <14835424+Cactice@users.noreply.github.com> Date: Sat, 30 Dec 2023 11:27:00 +0900 Subject: [PATCH 4/8] WIP: impl StartAndEnd --- Cargo.lock | 16 -- examples/layout/MenuBar.svg | 8 +- examples/layout/src/constraints.json | 51 +++---- examples/layout/src/main.rs | 2 +- examples/list/V2.svg | 141 ++++++++++++++++++ examples/list/src/constraints.json | 58 ++++--- examples/list/src/main.rs | 11 +- experiment/Cargo.toml | 1 - .../src/responsive/common_constraint.rs | 21 ++- experiment/src/responsive/layout.rs | 8 - experiment/src/responsive/layout_machine.rs | 27 ++-- 11 files changed, 235 insertions(+), 109 deletions(-) create mode 100644 examples/list/V2.svg diff --git a/Cargo.lock b/Cargo.lock index d9fb567..eeec71e 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -573,7 +573,6 @@ version = "0.1.0" dependencies = [ "fastrand 1.8.0", "guppies", - "html-escape", "natura", "regex", "salvage", @@ -906,15 +905,6 @@ version = "0.2.1" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "dfa686283ad6dd069f105e5ab091b04c62850d3e4cf5d67debad1933f55023df" -[[package]] -name = "html-escape" -version = "0.2.13" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "6d1ad449764d627e22bfd7cd5e8868264fc9236e07c752972b4080cd351cb476" -dependencies = [ - "utf8-width", -] - [[package]] name = "humantime" version = "2.1.0" @@ -2166,12 +2156,6 @@ dependencies = [ "xmlwriter", ] -[[package]] -name = "utf8-width" -version = "0.1.6" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "5190c9442dcdaf0ddd50f37420417d219ae5261bbf5db120d0f9bab996c9cba1" - [[package]] name = "version_check" version = "0.9.4" diff --git a/examples/layout/MenuBar.svg b/examples/layout/MenuBar.svg index 4b489aa..06574f9 100644 --- a/examples/layout/MenuBar.svg +++ b/examples/layout/MenuBar.svg @@ -1,7 +1,7 @@ - + - + @@ -11,7 +11,7 @@ stroke-linejoin="round" /> - + - + diff --git a/examples/layout/src/constraints.json b/examples/layout/src/constraints.json index edac5f5..f37731d 100644 --- a/examples/layout/src/constraints.json +++ b/examples/layout/src/constraints.json @@ -1,39 +1,24 @@ { - "VerticalMenuBar #transform": { - "x": { "Right": -248 }, - "y": { "TopAndBottom": { "top": 158, "bottom": 0.09423828125 } } + "Menu #transform #clickable #layout": { + "x": { "Left": 14 }, + "y": { "Center": 0.7432861328125 } }, - "Ellipse 4": { "x": { "Center": 0 }, "y": { "Center": 0 } }, - "Ellipse 5": { "x": { "Center": 15 }, "y": { "Center": 0 } }, - "Ellipse 6": { "x": { "Center": 30 }, "y": { "Center": 0 } }, - "Ellipse 7": { "x": { "Center": 30 }, "y": { "Center": 15 } }, - "Ellipse 8": { "x": { "Center": 15 }, "y": { "Center": 15 } }, - "Ellipse 9": { "x": { "Center": 0 }, "y": { "Center": 15 } }, - "Rectangle": { "x": "Scale", "y": "Scale" }, "MenuBar #transform #layout": { "x": "Scale", "y": { "Top": 118 } }, - "Vector": { "x": { "Right": -24.5 }, "y": { "Center": 0 } }, - "ListItem2 #transform #layout {\"x\":{\"Left\":0.0},\"y\":{\"Top\":100.0}}": { - "x": { "LeftAndRight": { "left": 0, "right": 0 } }, - "y": { "Top": 72.8955078125 } + "Group": { "x": { "Right": 0 }, "y": { "Center": 0 } }, + "Vector": { "x": { "Right": -24.5 }, "y": { "Center": -3.5 } }, + "Undo #transform #clickable #layout": { + "x": { "Right": -17.5 }, + "y": { "Center": -2.1209716796875 } }, - "word #dynamicText": { "x": "Scale", "y": "Scale" }, - "Vector 10": { "x": { "Right": -0.5 }, "y": "Scale" }, - "Vector 11": { "x": { "Right": 0 }, "y": "Scale" }, - "ListItem #transform #layout {\"x\":{\"Left\":0.0},\"y\":{\"Center\":30.0}}": { - "x": { "LeftAndRight": { "left": 0, "right": 0 } }, - "y": { "Top": 0 } + "Grab #transform #clickable #layout": { + "x": { "Center": 0 }, + "y": { "Center": 1.3790283203125 } }, - "MenuBar #transform #layout {\"x\":\"Scale\",\"y\":{\"Center\":0.0}}": { - "x": { "LeftAndRight": { "left": 0, "right": 0 } }, - "y": { "Top": 0 } - }, - "Rectangle ": { "x": "Scale", "y": "Scale" }, - "Vector #transform #layout {\"x\":{\"Right\":-50.0},\"y\":{\"Center\":0.0}}": { - "x": { "Right": -13 }, - "y": { "Center": 14 } - }, - "[ ] #transform #layout {\"x\":{\"Left\":0.0},\"y\":{\"Top\":100.0}}": { - "x": { "Left": 6 }, - "y": "Scale" - } + "Ellipse 4": { "x": { "Center": -15 }, "y": { "Center": -7.5 } }, + "Ellipse 5": { "x": { "Center": 0 }, "y": { "Center": -7.5 } }, + "Ellipse 6": { "x": { "Center": 15 }, "y": { "Center": -7.5 } }, + "Ellipse 7": { "x": { "Center": 15 }, "y": { "Center": 7.5 } }, + "Ellipse 8": { "x": { "Center": 0 }, "y": { "Center": 7.5 } }, + "Ellipse 9": { "x": { "Center": -15 }, "y": { "Center": 7.5 } }, + "Rectangle": { "x": "Scale", "y": "Scale" } } diff --git a/examples/layout/src/main.rs b/examples/layout/src/main.rs index f3558a3..059feec 100644 --- a/examples/layout/src/main.rs +++ b/examples/layout/src/main.rs @@ -8,7 +8,7 @@ use mobile_entry_point::mobile_entry_point; pub fn main() { let mut layout_machine = LayoutMachine::default(); let json = include_str!("constraints.json"); - // layout_machine.constraint_map = serde_json::from_str::(json).unwrap(); + layout_machine.constraint_map = serde_json::from_str::(json).unwrap(); let svg_set = use_svg( include_str!("../MenuBar.svg").to_string(), diff --git a/examples/list/V2.svg b/examples/list/V2.svg new file mode 100644 index 0000000..86bf8d1 --- /dev/null +++ b/examples/list/V2.svg @@ -0,0 +1,141 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + swap + + + + + + + + + + + + + + + + dup + + + + + + + + + + + + + + + + + + [ ] + + + + + + + + + + + + + + + + + + + + + + diff --git a/examples/list/src/constraints.json b/examples/list/src/constraints.json index edac5f5..ce89593 100644 --- a/examples/list/src/constraints.json +++ b/examples/list/src/constraints.json @@ -1,39 +1,53 @@ { - "VerticalMenuBar #transform": { + "VerticalMenuBar #transform #layout": { "x": { "Right": -248 }, "y": { "TopAndBottom": { "top": 158, "bottom": 0.09423828125 } } }, - "Ellipse 4": { "x": { "Center": 0 }, "y": { "Center": 0 } }, - "Ellipse 5": { "x": { "Center": 15 }, "y": { "Center": 0 } }, - "Ellipse 6": { "x": { "Center": 30 }, "y": { "Center": 0 } }, - "Ellipse 7": { "x": { "Center": 30 }, "y": { "Center": 15 } }, - "Ellipse 8": { "x": { "Center": 15 }, "y": { "Center": 15 } }, - "Ellipse 9": { "x": { "Center": 0 }, "y": { "Center": 15 } }, + "Grab #transform #layout": { + "x": { "Center": 1 }, + "y": { "Center": 0.547119140625 } + }, + "Ellipse 4": { "x": { "Center": -15 }, "y": { "Center": -7.5 } }, + "Ellipse 5": { "x": { "Center": 0 }, "y": { "Center": -7.5 } }, + "Ellipse 6": { "x": { "Center": 15 }, "y": { "Center": -7.5 } }, + "Ellipse 7": { "x": { "Center": 15 }, "y": { "Center": 7.5 } }, + "Ellipse 8": { "x": { "Center": 0 }, "y": { "Center": 7.5 } }, + "Ellipse 9": { "x": { "Center": -15 }, "y": { "Center": 7.5 } }, "Rectangle": { "x": "Scale", "y": "Scale" }, "MenuBar #transform #layout": { "x": "Scale", "y": { "Top": 118 } }, - "Vector": { "x": { "Right": -24.5 }, "y": { "Center": 0 } }, - "ListItem2 #transform #layout {\"x\":{\"Left\":0.0},\"y\":{\"Top\":100.0}}": { - "x": { "LeftAndRight": { "left": 0, "right": 0 } }, - "y": { "Top": 72.8955078125 } + "Menu #transform #clickable #layout": { + "x": { "Left": 14 }, + "y": { "Center": 0.7432861328125 } + }, + "Group": { "x": { "Right": 0 }, "y": { "Center": 0 } }, + "Vector": { "x": { "Right": -24.5 }, "y": { "Center": -3.5 } }, + "Undo #transform #clickable #layout": { + "x": { "Right": -17.5 }, + "y": { "Center": -2.1209716796875 } + }, + "Grab #transform #clickable #layout": { + "x": { "Center": -0.5 }, + "y": { "Center": 1.3790283203125 } }, + "Left #transform #layout": { + "x": { "LeftAndRight": { "left": 0, "right": -300 } }, + "y": { "Top": 171 } + }, + "#list": { "x": { "Right": 0 }, "y": "Scale" }, + "ListItem2": { "x": { "Right": 0 }, "y": "Scale" }, "word #dynamicText": { "x": "Scale", "y": "Scale" }, + "Group 2": { "x": { "Right": -16.5 }, "y": "Scale" }, "Vector 10": { "x": { "Right": -0.5 }, "y": "Scale" }, "Vector 11": { "x": { "Right": 0 }, "y": "Scale" }, - "ListItem #transform #layout {\"x\":{\"Left\":0.0},\"y\":{\"Center\":30.0}}": { - "x": { "LeftAndRight": { "left": 0, "right": 0 } }, - "y": { "Top": 0 } - }, - "MenuBar #transform #layout {\"x\":\"Scale\",\"y\":{\"Center\":0.0}}": { + "ListItem": { "x": { "Right": 0 }, "y": "Scale" }, + "MenuBar": { "x": { "LeftAndRight": { "left": 0, "right": 0 } }, "y": { "Top": 0 } }, "Rectangle ": { "x": "Scale", "y": "Scale" }, - "Vector #transform #layout {\"x\":{\"Right\":-50.0},\"y\":{\"Center\":0.0}}": { + "Vector #transform #layout": { "x": { "Right": -13 }, - "y": { "Center": 14 } + "y": { "Center": -0.6044921875 } }, - "[ ] #transform #layout {\"x\":{\"Left\":0.0},\"y\":{\"Top\":100.0}}": { - "x": { "Left": 6 }, - "y": "Scale" - } + "[ ] #transform #layout": { "x": { "Left": 6 }, "y": "Scale" } } diff --git a/examples/list/src/main.rs b/examples/list/src/main.rs index 19cfd8a..3d49304 100644 --- a/examples/list/src/main.rs +++ b/examples/list/src/main.rs @@ -11,7 +11,7 @@ pub fn main() { layout_machine.constraint_map = serde_json::from_str::(json).unwrap(); let svg_set = use_svg( - include_str!("../Left.svg").to_string(), + include_str!("../V2.svg").to_string(), |node, mut pass_down| { layout_machine.add_node(&node, &mut pass_down); }, @@ -19,7 +19,7 @@ pub fn main() { ); // let list = use_svg( - // include_str!("../Left.svg").to_string(), + // include_str!("../V2.svg").to_string(), // |node, mut pass_down| { // layout_machine.add_node(&node, &mut pass_down); // }, @@ -32,9 +32,10 @@ pub fn main() { layout_machine.event_handler(event); gpu_redraws[0].update_texture([cast_slice(&layout_machine.transforms[..])].concat()); gpu_redraws[0].update_triangles( - svg_set.get_combined_geometries().triangles, - // .extend(&list.get_combined_geometries()) - // .triangles, + svg_set + .get_combined_geometries() + // .extend(&list.get_combined_geometries()) + .triangles, 0, ); }); diff --git a/experiment/Cargo.toml b/experiment/Cargo.toml index e4432c2..816d2e3 100644 --- a/experiment/Cargo.toml +++ b/experiment/Cargo.toml @@ -11,7 +11,6 @@ natura = { git = "https://github.com/ziyasal/natura" } regex = "1" serde_json = "1.0" serde = { version = "1.0", features = ["derive"] } -html-escape = "0.2.13" [dev-dependencies] fastrand = "1.8.0" diff --git a/experiment/src/responsive/common_constraint.rs b/experiment/src/responsive/common_constraint.rs index 55eb002..ee41b53 100644 --- a/experiment/src/responsive/common_constraint.rs +++ b/experiment/src/responsive/common_constraint.rs @@ -45,9 +45,11 @@ impl CommonConstraint { accessor: F, composer: G, ) -> Mat4 { + let compose_translation = |number| Mat4::from_translation(composer(number, 0.)); + let access_scale = |mat4: Mat4| accessor(mat4.to_scale_rotation_translation().0); + let fill = Mat4::from_scale(composer( - accessor(parent_bbox.to_scale_rotation_translation().0) - / accessor(bbox.to_scale_rotation_translation().0), + access_scale(parent_bbox) / access_scale(bbox), 1.0, )); @@ -62,16 +64,23 @@ impl CommonConstraint { match self { CommonConstraint::Start(left) => { - parent_edge_left * left_align * Mat4::from_translation(composer(left, 0.)) + parent_edge_left * left_align * compose_translation(left) } CommonConstraint::End(right) => { - parent_edge_right * right_align * Mat4::from_translation(composer(right, 0.)) + parent_edge_right * right_align * compose_translation(right) } CommonConstraint::Center(rightward_from_center) => { - parent_center * center * Mat4::from_translation(composer(rightward_from_center, 0.)) + parent_center * center * compose_translation(rightward_from_center) } CommonConstraint::StartAndEnd { start, end } => { - todo!(); + let offset = compose_translation(start + end); + + dbg!(access_scale(parent_bbox), (start - end)); + let fill_partial = Mat4::from_scale(composer( + (access_scale(parent_bbox) - (start - end)) / access_scale(bbox), + 1.0, + )); + fill_partial } CommonConstraint::Scale => fill * center, } diff --git a/experiment/src/responsive/layout.rs b/experiment/src/responsive/layout.rs index b3d8edc..04bba85 100644 --- a/experiment/src/responsive/layout.rs +++ b/experiment/src/responsive/layout.rs @@ -2,7 +2,6 @@ use super::constraint::Constraint; use super::layout_machine::ConstraintMap; use guppies::glam::Mat4; use guppies::winit::dpi::PhysicalSize; -use html_escape::decode_html_entities; use regex::Regex; use salvage::usvg::{self}; use salvage::usvg::{NodeExt, PathBbox}; @@ -23,16 +22,9 @@ impl Layout { } pub fn new(node: &usvg::Node, constraint_map: &ConstraintMap) -> Self { let id = node.id(); - let re = Regex::new(r"#layout (.+)").unwrap(); - // let json = &re.captures(&id).unwrap()[1]; - // let json = decode_html_entities(json).to_string(); - // let constraint = serde_json::from_str::(&json).unwrap(); - dbg!(&id); let constraint = constraint_map.0.get(&id.to_string()).unwrap().clone(); - // let constraint = serde_json::from_str::(&json).unwrap(); - let bbox_mat4 = bbox_to_mat4( node.calculate_bbox() .expect("Elements with #transform should be able to calculate bbox"), diff --git a/experiment/src/responsive/layout_machine.rs b/experiment/src/responsive/layout_machine.rs index d3ce3f0..f431958 100644 --- a/experiment/src/responsive/layout_machine.rs +++ b/experiment/src/responsive/layout_machine.rs @@ -66,19 +66,20 @@ impl LayoutMachine { self.layouts .iter() .map(|parents| { - parents - .iter() - .fold( - (Mat4::IDENTITY, self.get_display_bbox()), - |(_parent_result, parent_bbox), layout| { - let layout_result = layout.to_mat4(self.display_mat4, parent_bbox); - ( - Mat4::from_scale([2., -2., 1.].into()) * layout_result, - self.display_mat4 * layout_result * layout.bbox, - ) - }, - ) - .0 + Mat4::from_scale([2., -2., 1.].into()) + * parents + .iter() + .fold( + (Mat4::IDENTITY, self.get_display_bbox()), + |(_parent_result, parent_bbox), layout| { + let layout_result = layout.to_mat4(self.display_mat4, parent_bbox); + ( + layout_result, + self.display_mat4 * layout_result * layout.bbox, + ) + }, + ) + .0 }) .collect() } From 40c9ecbbd351682803b4c5c6981e16d1f4f2e2e5 Mon Sep 17 00:00:00 2001 From: cactice <14835424+Cactice@users.noreply.github.com> Date: Sat, 30 Dec 2023 14:08:27 +0900 Subject: [PATCH 5/8] Fix start end calculation --- experiment/src/responsive/common_constraint.rs | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/experiment/src/responsive/common_constraint.rs b/experiment/src/responsive/common_constraint.rs index ee41b53..ebca44c 100644 --- a/experiment/src/responsive/common_constraint.rs +++ b/experiment/src/responsive/common_constraint.rs @@ -29,8 +29,8 @@ impl From for CommonConstraint { YConstraint::Top(top) => CommonConstraint::Start(top), YConstraint::Bottom(bottom) => CommonConstraint::End(bottom), YConstraint::TopAndBottom { top, bottom } => CommonConstraint::StartAndEnd { - start: bottom, - end: top, + start: top, + end: bottom, }, YConstraint::Center(y) => CommonConstraint::Center(y), YConstraint::Scale => CommonConstraint::Scale, @@ -73,14 +73,11 @@ impl CommonConstraint { parent_center * center * compose_translation(rightward_from_center) } CommonConstraint::StartAndEnd { start, end } => { - let offset = compose_translation(start + end); - - dbg!(access_scale(parent_bbox), (start - end)); let fill_partial = Mat4::from_scale(composer( (access_scale(parent_bbox) - (start - end)) / access_scale(bbox), 1.0, )); - fill_partial + compose_translation(start) * parent_edge_left * fill_partial * left_align } CommonConstraint::Scale => fill * center, } From a01f7428634fb7150c201b6723ee1466f6e443c6 Mon Sep 17 00:00:00 2001 From: cactice <14835424+Cactice@users.noreply.github.com> Date: Sat, 30 Dec 2023 14:53:53 +0900 Subject: [PATCH 6/8] Fix svg transformation issue --- salvage/src/fill/mod.rs | 16 ++++++++-------- salvage/src/stroke/mod.rs | 12 ++++++++---- 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/salvage/src/fill/mod.rs b/salvage/src/fill/mod.rs index 1ea4185..25c8e89 100644 --- a/salvage/src/fill/mod.rs +++ b/salvage/src/fill/mod.rs @@ -19,14 +19,14 @@ pub fn iterate_fill( .tessellate( convert_path(path), &FillOptions::tolerance(0.01), - &mut BuffersBuilder::new(geometry, |v: FillVertex| Vertex { - position: [ - v.position().x + path.transform.e as f32, - v.position().y + path.transform.f as f32, - 0., - ], - color: color.to_array(), - transform_id: id, + &mut BuffersBuilder::new(geometry, |v: FillVertex| { + let position = v.position(); + let (x, y) = path.transform.apply(position.x as f64, position.y as f64); + Vertex { + position: [x as f32, y as f32, 0.], + color: color.to_array(), + transform_id: id, + } }), ) .expect("Error during tesselation!"); diff --git a/salvage/src/stroke/mod.rs b/salvage/src/stroke/mod.rs index 7e1ee94..30d3791 100644 --- a/salvage/src/stroke/mod.rs +++ b/salvage/src/stroke/mod.rs @@ -36,10 +36,14 @@ pub fn iterate_stroke( let _ = stroke_tess.tessellate( convert_path(path), &stroke_opts, - &mut BuffersBuilder::new(geometry, |v: StrokeVertex| Vertex { - position: [v.position().x, v.position().y, 0.], - color: color.to_array(), - transform_id: id, + &mut BuffersBuilder::new(geometry, |v: StrokeVertex| { + let position = v.position(); + let (x, y) = path.transform.apply(position.x as f64, position.y as f64); + Vertex { + position: [x as f32, y as f32, 0.], + color: color.to_array(), + transform_id: id, + } }), ); } From 3fe846b4ba5c7c53607d0c13e71069fa3d6982fe Mon Sep 17 00:00:00 2001 From: cactice <14835424+Cactice@users.noreply.github.com> Date: Sat, 30 Dec 2023 15:04:37 +0900 Subject: [PATCH 7/8] Fix scale calculation --- examples/list/V2.svg | 86 +++---- examples/list/src/constraints.json | 230 ++++++++++++++---- examples/list/src/main.rs | 16 +- .../src/responsive/common_constraint.rs | 2 +- 4 files changed, 241 insertions(+), 93 deletions(-) diff --git a/examples/list/V2.svg b/examples/list/V2.svg index 86bf8d1..aefb5d7 100644 --- a/examples/list/V2.svg +++ b/examples/list/V2.svg @@ -1,27 +1,27 @@ - + - + - - - - - - - - + + + + + + + + - + - - + - - - - - - - + + + + + + - + - - + - + - - swap + swap - + - + - + - - dup + dup - + - - + + - + - @@ -119,10 +119,10 @@ - + - - + diff --git a/examples/list/src/constraints.json b/examples/list/src/constraints.json index ce89593..f5e6452 100644 --- a/examples/list/src/constraints.json +++ b/examples/list/src/constraints.json @@ -1,53 +1,201 @@ { "VerticalMenuBar #transform #layout": { - "x": { "Right": -248 }, - "y": { "TopAndBottom": { "top": 158, "bottom": 0.09423828125 } } - }, - "Grab #transform #layout": { - "x": { "Center": 1 }, - "y": { "Center": 0.547119140625 } - }, - "Ellipse 4": { "x": { "Center": -15 }, "y": { "Center": -7.5 } }, - "Ellipse 5": { "x": { "Center": 0 }, "y": { "Center": -7.5 } }, - "Ellipse 6": { "x": { "Center": 15 }, "y": { "Center": -7.5 } }, - "Ellipse 7": { "x": { "Center": 15 }, "y": { "Center": 7.5 } }, - "Ellipse 8": { "x": { "Center": 0 }, "y": { "Center": 7.5 } }, - "Ellipse 9": { "x": { "Center": -15 }, "y": { "Center": 7.5 } }, - "Rectangle": { "x": "Scale", "y": "Scale" }, - "MenuBar #transform #layout": { "x": "Scale", "y": { "Top": 118 } }, + "x": { + "Right": -248 + }, + "y": { + "TopAndBottom": { + "top": 158, + "bottom": 0.09423828125 + } + } + }, + "VerticalGrab #transform #layout": { + "x": { + "Center": 1 + }, + "y": { + "Center": 0.047119140625 + } + }, + "Ellipse 4": { + "x": { + "Center": -15 + }, + "y": { + "Center": -7.5 + } + }, + "Ellipse 5": { + "x": { + "Center": 0 + }, + "y": { + "Center": -7.5 + } + }, + "Ellipse 6": { + "x": { + "Center": 15 + }, + "y": { + "Center": -7.5 + } + }, + "Ellipse 7": { + "x": { + "Center": 15 + }, + "y": { + "Center": 7.5 + } + }, + "Ellipse 8": { + "x": { + "Center": 0 + }, + "y": { + "Center": 7.5 + } + }, + "Ellipse 9": { + "x": { + "Center": -15 + }, + "y": { + "Center": 7.5 + } + }, + "Rectangle": { + "x": "Scale", + "y": "Scale" + }, + "MenuBar #transform #layout": { + "x": "Scale", + "y": { + "Top": 118 + } + }, "Menu #transform #clickable #layout": { - "x": { "Left": 14 }, - "y": { "Center": 0.7432861328125 } + "x": { + "Left": 14 + }, + "y": { + "Center": 0.7432861328125 + } + }, + "Group": { + "x": { + "Right": 0 + }, + "y": { + "Center": 0 + } + }, + "Vector": { + "x": { + "Right": -24.5 + }, + "y": { + "Center": -3.5 + } }, - "Group": { "x": { "Right": 0 }, "y": { "Center": 0 } }, - "Vector": { "x": { "Right": -24.5 }, "y": { "Center": -3.5 } }, "Undo #transform #clickable #layout": { - "x": { "Right": -17.5 }, - "y": { "Center": -2.1209716796875 } + "x": { + "Right": -17.5 + }, + "y": { + "Center": -2.1209716796875 + } }, "Grab #transform #clickable #layout": { - "x": { "Center": -0.5 }, - "y": { "Center": 1.3790283203125 } + "x": { + "Center": -0.5 + }, + "y": { + "Center": 1.3790283203125 + } }, "Left #transform #layout": { - "x": { "LeftAndRight": { "left": 0, "right": -300 } }, - "y": { "Top": 171 } - }, - "#list": { "x": { "Right": 0 }, "y": "Scale" }, - "ListItem2": { "x": { "Right": 0 }, "y": "Scale" }, - "word #dynamicText": { "x": "Scale", "y": "Scale" }, - "Group 2": { "x": { "Right": -16.5 }, "y": "Scale" }, - "Vector 10": { "x": { "Right": -0.5 }, "y": "Scale" }, - "Vector 11": { "x": { "Right": 0 }, "y": "Scale" }, - "ListItem": { "x": { "Right": 0 }, "y": "Scale" }, - "MenuBar": { - "x": { "LeftAndRight": { "left": 0, "right": 0 } }, - "y": { "Top": 0 } - }, - "Rectangle ": { "x": "Scale", "y": "Scale" }, + "x": { + "LeftAndRight": { + "left": 0, + "right": -300 + } + }, + "y": { + "Top": 171 + } + }, + "#component": { + "x": { + "Right": 0 + }, + "y": "Scale" + }, + "ListItem2": { + "x": { + "Right": 0 + }, + "y": "Scale" + }, + "word #dynamicText": { + "x": "Scale", + "y": "Scale" + }, + "Group 2": { + "x": { + "Right": -16.5 + }, + "y": "Scale" + }, + "Vector 10": { + "x": { + "Right": -0.5 + }, + "y": "Scale" + }, + "Vector 11": { + "x": { + "Right": 0 + }, + "y": "Scale" + }, + "ListItem": { + "x": { + "Right": 0 + }, + "y": "Scale" + }, + "MenuBar2 #transform #layout": { + "x": { + "LeftAndRight": { + "left": 0, + "right": 0 + } + }, + "y": { + "Top": 0 + } + }, + "Rectangle ": { + "x": "Scale", + "y": "Scale" + }, "Vector #transform #layout": { - "x": { "Right": -13 }, - "y": { "Center": -0.6044921875 } + "x": { + "Right": -13 + }, + "y": { + "Center": -0.6044921875 + } }, - "[ ] #transform #layout": { "x": { "Left": 6 }, "y": "Scale" } + "[ ] #transform #layout": { + "x": { + "Left": 6 + }, + "y": { + "Center": 0.4925537109375 + } + } } diff --git a/examples/list/src/main.rs b/examples/list/src/main.rs index 3d49304..1a4c10c 100644 --- a/examples/list/src/main.rs +++ b/examples/list/src/main.rs @@ -18,13 +18,13 @@ pub fn main() { None, ); - // let list = use_svg( - // include_str!("../V2.svg").to_string(), - // |node, mut pass_down| { - // layout_machine.add_node(&node, &mut pass_down); - // }, - // Some("ListItem".to_string()), - // ); + let list = use_svg( + include_str!("../V2.svg").to_string(), + |node, mut pass_down| { + layout_machine.add_node(&node, &mut pass_down); + }, + Some("ListItem".to_string()), + ); let mut guppy = Guppy::new([GpuRedraw::default()]); @@ -34,7 +34,7 @@ pub fn main() { gpu_redraws[0].update_triangles( svg_set .get_combined_geometries() - // .extend(&list.get_combined_geometries()) + .extend(&list.get_combined_geometries()) .triangles, 0, ); diff --git a/experiment/src/responsive/common_constraint.rs b/experiment/src/responsive/common_constraint.rs index ebca44c..c60f274 100644 --- a/experiment/src/responsive/common_constraint.rs +++ b/experiment/src/responsive/common_constraint.rs @@ -79,7 +79,7 @@ impl CommonConstraint { )); compose_translation(start) * parent_edge_left * fill_partial * left_align } - CommonConstraint::Scale => fill * center, + CommonConstraint::Scale => parent_center * fill * center, } } } From 18a9580f31d54427e2a6b54b3daf40ace93b442d Mon Sep 17 00:00:00 2001 From: cactice <14835424+Cactice@users.noreply.github.com> Date: Sat, 30 Dec 2023 15:13:49 +0900 Subject: [PATCH 8/8] Organize constraint --- .../src/responsive/common_constraint.rs | 39 +++++++------------ 1 file changed, 15 insertions(+), 24 deletions(-) diff --git a/experiment/src/responsive/common_constraint.rs b/experiment/src/responsive/common_constraint.rs index c60f274..0d7e803 100644 --- a/experiment/src/responsive/common_constraint.rs +++ b/experiment/src/responsive/common_constraint.rs @@ -46,6 +46,7 @@ impl CommonConstraint { composer: G, ) -> Mat4 { let compose_translation = |number| Mat4::from_translation(composer(number, 0.)); + let compose_scale = |number| Mat4::from_scale(composer(number, 1.)); let access_scale = |mat4: Mat4| accessor(mat4.to_scale_rotation_translation().0); let fill = Mat4::from_scale(composer( @@ -53,33 +54,28 @@ impl CommonConstraint { 1.0, )); - let (left_align, right_align, center) = prepare_anchor_points(bbox, &accessor, &composer); - let (left_align, right_align, center) = ( - left_align.inverse(), - right_align.inverse(), - center.inverse(), - ); + let (left, right, center) = prepare_anchor_points(bbox, &accessor, &composer); + let (left_align, right_align, center_align) = + (left.inverse(), right.inverse(), center.inverse()); let (parent_edge_left, parent_edge_right, parent_center) = prepare_anchor_points(parent_bbox, &accessor, &composer); match self { CommonConstraint::Start(left) => { - parent_edge_left * left_align * compose_translation(left) + compose_translation(left) * parent_edge_left * left_align } CommonConstraint::End(right) => { - parent_edge_right * right_align * compose_translation(right) + compose_translation(right) * parent_edge_right * right_align } CommonConstraint::Center(rightward_from_center) => { - parent_center * center * compose_translation(rightward_from_center) + compose_translation(rightward_from_center) * parent_center * center_align } CommonConstraint::StartAndEnd { start, end } => { - let fill_partial = Mat4::from_scale(composer( - (access_scale(parent_bbox) - (start - end)) / access_scale(bbox), - 1.0, - )); + let fill_partial = + compose_scale((access_scale(parent_bbox) - (start - end)) / access_scale(bbox)); compose_translation(start) * parent_edge_left * fill_partial * left_align } - CommonConstraint::Scale => parent_center * fill * center, + CommonConstraint::Scale => parent_center * fill * center_align, } } } @@ -89,17 +85,12 @@ fn prepare_anchor_points f32, G: Fn(f32, f32) -> Vec3>( accessor: &F, composer: &G, ) -> (Mat4, Mat4, Mat4) { + let compose_translation = |number| Mat4::from_translation(composer(number, 0.)); let (bbox_scale, _, bbox_translation) = bbox.to_scale_rotation_translation(); - let start_align = Mat4::from_translation(composer(accessor(bbox_translation), 0.)); - let end_align = Mat4::from_translation(composer( - accessor(bbox_translation) + accessor(bbox_scale), - 0., - )); - let center = Mat4::from_translation(composer( - accessor(bbox_translation) + accessor(bbox_scale) / 2., - 0., - )); + let start = compose_translation(accessor(bbox_translation)); + let end = compose_translation(accessor(bbox_translation) + accessor(bbox_scale)); + let center = compose_translation(accessor(bbox_translation) + accessor(bbox_scale) / 2.); - (start_align, end_align, center) + (start, end, center) }