fix(stacking): align siblings horizontally

src/algo/calendar_tree.rs

@@ -3,7 +3,10 @@ use crate::prelude::*;
 #[derive(Debug, Clone)]
 pub struct FlattenedCalendarBlock {
     pub block: CalendarBlock,
+    /// The block's distance from the root
     pub stack_position: usize,
+    /// Height of the block's cluster (deepest leaf node to subtree parent)
+    pub cluster_height: usize,
 }
 
 pub struct CalendarBlockTree {
@@ -42,18 +45,6 @@ impl CalendarBlockTree {
         block: CalendarBlock,
         destination: Option<NodeIndex>,
     ) -> Result<(), Box<dyn std::error::Error>> {
-        // Recursive Add
-        // 1. find overlaps
-        //      if no overlap
-        //          add edge from destination to new block
-        //          return
-        //      else if new block gets swallowed
-        //          call add with new destination
-        // TODO:else
-        //          add edge from destination to new block
-        //          add edges from new block to overlapping blocks
-        //          remove edges from destination to overlapping blocks
-
         let destination = destination.unwrap_or(self.root_idx);
 
         let mut forward_neighbors = self
@@ -112,36 +103,43 @@ impl CalendarBlockTree {
     }
 
     pub fn traverse(&self) -> Vec<FlattenedCalendarBlock> {
-        let mut traversal_queue: VecDeque<(NodeIndex, usize)> =
+        let mut traversal_queue: VecDeque<(NodeIndex, usize, usize)> =
             VecDeque::with_capacity(self.id_to_block_map.iter().len());
 
-        let mut buffer: Vec<(NodeIndex, usize)> =
+        let mut buffer: Vec<(NodeIndex, usize, usize)> =
             Vec::with_capacity(self.id_to_block_map.iter().len());
 
-        traversal_queue.push_back((self.root_idx, 0));
+        traversal_queue.push_back((self.root_idx, 0, 0));
 
         while !traversal_queue.is_empty() {
-            let (node_idx, stack_position) = traversal_queue.pop_front().unwrap();
-            buffer.push((node_idx, stack_position));
+            let (node_idx, stack_position, cluster_height) = traversal_queue.pop_front().unwrap();
+            buffer.push((node_idx, stack_position, cluster_height));
 
             let forward_neighbors = self
                 .adjacency
                 .edges_directed(node_idx, petgraph::Direction::Outgoing)
                 .map(|e| e.target());
 
             forward_neighbors.for_each(|n| {
-                traversal_queue.push_back((n, stack_position + 1));
+                let child_cluster_height = if stack_position == 0 {
+                    let block_id = self.adjacency[n];
+                    1 + self.id_to_block_map.get(&block_id).unwrap().subtree_depth
+                } else {
+                    cluster_height
+                };
+                traversal_queue.push_back((n, stack_position + 1, child_cluster_height));
             });
         }
 
         buffer
             .iter()
-            .map(|(node_idx, stack_position)| {
+            .map(|(node_idx, stack_position, cluster_height)| {
                 let current_block_id = self.adjacency[*node_idx];
                 let current_block = self.id_to_block_map.get(&current_block_id).unwrap();
                 FlattenedCalendarBlock {
                     block: current_block.clone(),
                     stack_position: *stack_position,
+                    cluster_height: *cluster_height,
                 }
             })
             .collect()

src/components/calendar.rs

@@ -14,7 +14,7 @@ fn get_time_from_minutes(minutes: u32) -> String {
 }
 
 #[allow(non_snake_case)]
-pub fn Calendar<'app>(cx: Scope<'app, CalendarProps<'app>>) -> Element {
+pub fn Calendar<'app>(cx: Scope<'app, CalendarProps<'app>>) -> Element<'app> {
     let ghost_block_top = use_state(&cx, || 0_f64);
     let click_offset = use_state(&cx, || 0_f64);
     let dragged_block = use_state(&cx, || None::<FlattenedCalendarBlock>);
@@ -104,7 +104,7 @@ pub fn Calendar<'app>(cx: Scope<'app, CalendarProps<'app>>) -> Element {
         None => rsx!(empty_element::EmptyElement {}),
     };
 
-    return cx.render(rsx! {
+    cx.render(rsx! {
         button {
             class: "btn",
             onclick: move |_| {
@@ -129,7 +129,14 @@ pub fn Calendar<'app>(cx: Scope<'app, CalendarProps<'app>>) -> Element {
                         };
 
                         let (left, width) = match use_subtree_depth_algorithm.get() {
-                            true => get_subtree_depth_transforms(flattened_block.stack_position, flattened_block.block.subtree_depth),
+                            true => {
+                                    let height = flattened_block.cluster_height as f64;
+                                    get_subtree_depth_transforms(
+                                        (flattened_block.stack_position as f64 - 1.0) / height,
+                                        1.0 / height,
+                                        flattened_block.block.subtree_depth == 0,
+                                    )
+                            },
                             false => get_position_offsets(flattened_block.stack_position)
                         };
                         let top = format!("{}px", flattened_block.block.start_minute);
@@ -142,7 +149,7 @@ pub fn Calendar<'app>(cx: Scope<'app, CalendarProps<'app>>) -> Element {
                         let id = flattened_block.block.id;
                         let block_type = flattened_block.block.block_type;
 
-                        return rsx!(calendar_block::CalendarBlockListItem {
+                        rsx!(calendar_block::CalendarBlockListItem {
                             key: "{id}",
                             left: left,
                             top: top,
@@ -157,11 +164,11 @@ pub fn Calendar<'app>(cx: Scope<'app, CalendarProps<'app>>) -> Element {
                                 click_offset.set(evt.client_y  as f64 - flattened_block.block.start_minute as f64);
                             },
                             onmouseup: handle_move_calendar_block,
-                        });
+                        })
                     }
                 )
                 rsx!(ghost_block)
             }
         }
-    });
+    })
 }

src/components/calendar_block.rs

@@ -18,7 +18,7 @@ pub struct CalendarBlockListItemProps<'block> {
 #[allow(non_snake_case)]
 pub fn CalendarBlockListItem<'block>(
     cx: Scope<'block, CalendarBlockListItemProps<'block>>,
-) -> Element {
+) -> Element<'block> {
     let block_type_class = match cx.props.block_type {
         CalendarBlockType::Wrapper => "wrapper",
         CalendarBlockType::Busy => "busy",
@@ -29,7 +29,7 @@ pub fn CalendarBlockListItem<'block>(
         None => "".to_string(),
     };
 
-    return cx.render(rsx!(div {
+    cx.render(rsx!(div {
         class: "absolute calendar-block {block_type_class} {classes}",
         title: "{cx.props.label}",
         top: "{cx.props.top}",
@@ -49,5 +49,5 @@ pub fn CalendarBlockListItem<'block>(
             }
         },
         "{cx.props.label}"
-    }));
+    }))
 }