pan with lmb and flex example (#200)

* pan with lmb
* flex size nodes example for #196

Author: blitzarx1

Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "egui_graphs"
-version = "0.21.0"
+version = "0.21.1"
 authors = ["Dmitrii Samsonov <blitzarx1@gmail.com>"]
 license = "MIT"
 homepage = "https://github.com/blitzarx1/egui_graphs"

Cargo.toml

@@ -21,7 +21,7 @@ impl IsClockwise for NodeData {
     }
 }
 
-/// Rotates node whent the node is being dragged.
+/// Rotates node when the node is being dragged.
 #[derive(Clone)]
 pub struct NodeShapeAnimated {
     label: String,
@@ -152,9 +152,8 @@ impl<N: Clone + IsClockwise, E: Clone, Ty: EdgeType, Ix: IndexType> DisplayNode<
 }
 
 fn find_intersection(center: Pos2, size: f32, direction: Vec2) -> Pos2 {
-    // Determine the intersection side based on the direction
     if direction.x.abs() > direction.y.abs() {
-        // Intersects left or right side
+        // intersects left or right side
         let x = if direction.x > 0.0 {
             center.x + size / 2.0
         } else {
@@ -163,7 +162,7 @@ fn find_intersection(center: Pos2, size: f32, direction: Vec2) -> Pos2 {
         let y = center.y + direction.y / direction.x * (x - center.x);
         Pos2::new(x, y)
     } else {
-        // Intersects top or bottom side
+        // intersects top or bottom side
         let y = if direction.y > 0.0 {
             center.y + size / 2.0
         } else {
@@ -179,22 +178,22 @@ fn rotate_point_around(center: Pos2, point: Pos2, angle: f32) -> Pos2 {
     let sin_angle = angle.sin();
     let cos_angle = angle.cos();
 
-    // Translate point back to origin
+    // translate point back to origin
     let translated_point = point - center;
 
-    // Rotate point
+    // rotate point
     let rotated_x = translated_point.x * cos_angle - translated_point.y * sin_angle;
     let rotated_y = translated_point.x * sin_angle + translated_point.y * cos_angle;
 
-    // Translate point back
+    // translate point back
     Pos2::new(rotated_x, rotated_y) + center.to_vec2()
 }
 
 fn rect_to_points(rect: Rect) -> Vec<Pos2> {
     let top_left = rect.min;
     let bottom_right = rect.max;
 
-    // Calculate the other two corners
+    // calculate the other two corners
     let top_right = Pos2::new(bottom_right.x, top_left.y);
     let bottom_left = Pos2::new(top_left.x, bottom_right.y);
 
@@ -216,7 +215,7 @@ mod tests {
     fn test_intersection_right_side() {
         let center = Pos2::new(0.0, 0.0);
         let size = 10.;
-        let direction = Vec2::new(1.0, 0.0); // Directly to the right
+        let direction = Vec2::new(1.0, 0.0);
         let expected = Pos2::new(5.0, 0.0);
         assert_eq!(find_intersection(center, size, direction), expected);
     }
@@ -225,7 +224,7 @@ mod tests {
     fn test_intersection_top_side() {
         let center = Pos2::new(0.0, 0.0);
         let size = 10.;
-        let direction = Vec2::new(0.0, 1.0); // Directly upwards
+        let direction = Vec2::new(0.0, 1.0);
         let expected = Pos2::new(0.0, 5.0);
         assert_eq!(find_intersection(center, size, direction), expected);
     }

examples/custom_draw/src/node.rs

@@ -0,0 +1,12 @@
+[package]
+name = "flex_nodes"
+version = "0.1.0"
+authors = ["Dmitrii Samsonov <blitzarx1@gmail.com>"]
+license = "MIT"
+edition = "2021"
+
+[dependencies]
+egui_graphs = { path = "../../" }
+egui = "0.28"
+eframe = "0.28"
+petgraph = "0.6"

examples/flex_nodes/Cargo.toml

@@ -0,0 +1,7 @@
+# Flex nodes
+Example demonstrates how to use custom drawing functions for nodes with flexible size which depends on their label size. 
+
+## run
+```bash
+cargo run --release -p flex_nodes
+```

examples/flex_nodes/README.md

@@ -0,0 +1,151 @@
+use eframe::{run_native, App, CreationContext};
+use egui::{CentralPanel, Context, SidePanel, TextEdit};
+use egui_graphs::{
+    DefaultEdgeShape, Graph, GraphView, SettingsInteraction, SettingsNavigation, SettingsStyle,
+};
+use node::NodeShapeFlex;
+use petgraph::{
+    stable_graph::{DefaultIx, EdgeIndex, NodeIndex, StableGraph},
+    Directed,
+};
+
+mod node;
+
+pub struct FlexNodesApp {
+    g: Graph<(), (), Directed, DefaultIx, NodeShapeFlex, DefaultEdgeShape>,
+    label_input: String,
+    selected_node: Option<NodeIndex>,
+    selected_edge: Option<EdgeIndex>,
+}
+
+impl FlexNodesApp {
+    fn new(_: &CreationContext<'_>) -> Self {
+        let g = generate_graph();
+        Self {
+            g: Graph::from(&g),
+            label_input: String::default(),
+            selected_node: Option::default(),
+            selected_edge: Option::default(),
+        }
+    }
+
+    fn read_data(&mut self) {
+        if !self.g.selected_nodes().is_empty() {
+            let idx = self.g.selected_nodes().first().unwrap();
+            self.selected_node = Some(*idx);
+            self.selected_edge = None;
+            self.label_input = self.g.node(*idx).unwrap().label();
+        }
+        if !self.g.selected_edges().is_empty() {
+            let idx = self.g.selected_edges().first().unwrap();
+            self.selected_edge = Some(*idx);
+            self.selected_node = None;
+            self.label_input = self.g.edge(*idx).unwrap().label();
+        }
+    }
+
+    fn render(&mut self, ctx: &Context) {
+        SidePanel::right("right_panel").show(ctx, |ui| {
+            ui.label("Change Label");
+            ui.add_enabled_ui(
+                self.selected_node.is_some() || self.selected_edge.is_some(),
+                |ui| {
+                    TextEdit::singleline(&mut self.label_input)
+                        .hint_text("select node or edge")
+                        .show(ui)
+                },
+            );
+            if ui.button("reset").clicked() {
+                self.reset()
+            }
+        });
+        CentralPanel::default().show(ctx, |ui| {
+            let widget =
+                &mut GraphView::<_, _, _, _, NodeShapeFlex, DefaultEdgeShape>::new(&mut self.g)
+                    .with_interactions(
+                        &SettingsInteraction::default()
+                            .with_dragging_enabled(true)
+                            .with_node_selection_enabled(true)
+                            .with_edge_selection_enabled(true),
+                    )
+                    .with_navigations(
+                        &SettingsNavigation::default()
+                            .with_fit_to_screen_enabled(false)
+                            .with_zoom_and_pan_enabled(true),
+                    );
+            ui.add(widget);
+        });
+    }
+
+    fn update_data(&mut self) {
+        if self.selected_node.is_none() && self.selected_edge.is_none() {
+            return;
+        }
+
+        if self.selected_node.is_some() {
+            let idx = self.selected_node.unwrap();
+            if idx.index().to_string() == self.label_input {
+                return;
+            }
+
+            self.g
+                .node_mut(idx)
+                .unwrap()
+                .set_label(self.label_input.clone());
+        }
+
+        if self.selected_edge.is_some() {
+            let idx = self.selected_edge.unwrap();
+            if idx.index().to_string() == self.label_input {
+                return;
+            }
+
+            self.g
+                .edge_mut(idx)
+                .unwrap()
+                .set_label(self.label_input.clone());
+        }
+    }
+
+    fn reset(&mut self) {
+        let g = generate_graph();
+        *self = Self {
+            g: Graph::from(&g),
+            label_input: String::default(),
+            selected_node: Option::default(),
+            selected_edge: Option::default(),
+        };
+    }
+}
+
+impl App for FlexNodesApp {
+    fn update(&mut self, ctx: &Context, _: &mut eframe::Frame) {
+        self.read_data();
+        self.render(ctx);
+        self.update_data();
+    }
+}
+
+fn generate_graph() -> StableGraph<(), ()> {
+    let mut g = StableGraph::new();
+
+    let a = g.add_node(());
+    let b = g.add_node(());
+    let c = g.add_node(());
+
+    g.add_edge(a, b, ());
+    g.add_edge(b, c, ());
+    g.add_edge(c, a, ());
+
+    g
+}
+
+fn main() {
+    let native_options = eframe::NativeOptions::default();
+    run_native(
+        "egui_graphs_flex_nodes_demo",
+        native_options,
+        Box::new(|cc| Ok(Box::new(FlexNodesApp::new(cc)))),
+    )
+    .unwrap();
+}