refactored styles, egui light mode support (#19)

blitzarx1 · Apr 27, 2023 · 24fd80c · 24fd80c
1 parent 3b83f10
commit 24fd80c
Show file tree

Hide file tree

Showing 10 changed files with 133 additions and 76 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "egui_graphs"
-version = "0.0.22"
+version = "0.0.23"
 authors = ["Dmitrii Samsonov <[email protected]>"]
 license = "MIT"
 homepage = "https://github.com/blitzarx1/egui_graphs"

diff --git a/README.md b/README.md
@@ -26,10 +26,8 @@ basic graph drawing                  | [x]
 self-references, multi-connections   | [x]
 zoom & pan, fit-to-screen            | [x]
 drag node                            | [x]
-select, multiselect.                 | [x]
-style customizations                 | [x]
-support egui dark/light theme        | [ ]
-interactions vs egui draw benchmarks | [ ]
+select, multiselect                 | [x]
+support egui dark/light theme        | [x]
 documentation, tests, example        | [ ]
 </pre>
 

diff --git a/examples/basic/Cargo.toml b/examples/basic/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "basic"
-version = "0.0.22"
+version = "0.0.23"
 authors = ["Dmitrii Samsonov <[email protected]>"]
 license = "MIT"
 edition = "2021"

diff --git a/examples/interactive/Cargo.toml b/examples/interactive/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "interactive"
-version = "0.0.22"
+version = "0.0.23"
 authors = ["Dmitrii Samsonov <[email protected]>"]
 license = "MIT"
 edition = "2021"

diff --git a/examples/interactive/src/main.rs b/examples/interactive/src/main.rs
@@ -3,7 +3,7 @@ use std::{collections::HashMap, time::Instant};
 
 use eframe::{run_native, App, CreationContext};
 use egui::plot::{Line, Plot, PlotPoints};
-use egui::{CollapsingHeader, Color32, Context, ScrollArea, Vec2};
+use egui::{CollapsingHeader, Color32, Context, ScrollArea, Vec2, Visuals, Ui};
 use egui_graphs::{
     Changes, Edge, Elements, GraphView, Node, SettingsInteraction, SettingsNavigation,
 };
@@ -17,7 +17,9 @@ const NODE_COUNT: usize = 300;
 const EDGE_COUNT: usize = 500;
 const SIMULATION_DT: f32 = 0.035;
 const EDGE_SCALE_WEIGHT: f32 = 1.;
-const FPS_LINE_COLOR: Color32 = Color32::from_rgb(255, 255, 255);
+const FPS_LINE_COLOR: Color32 = Color32::from_rgb(128, 128, 128);
+const LIGHT_MODE_SYMBOL: &str = "🔆";
+const DARK_MODE_SYMBOL: &str = "🌙";
 
 pub struct InteractiveApp {
     simulation: Simulation<usize, String>,
@@ -30,6 +32,7 @@ pub struct InteractiveApp {
     selected_edges: Vec<Edge>,
 
     simulation_stopped: bool,
+    dark_mode: bool,
 
     fps: f64,
     fps_history: Vec<f64>,
@@ -58,6 +61,7 @@ impl InteractiveApp {
             selected_edges: Default::default(),
 
             simulation_stopped: false,
+            dark_mode: true,
 
             fps: 0.,
             fps_history: Default::default(),
@@ -154,6 +158,23 @@ impl InteractiveApp {
             }
         }
     }
+
+    fn draw_dark_mode(&mut self, ui: &mut Ui) {
+        if self.dark_mode {
+            ui.ctx().set_visuals(Visuals::dark())
+        } else {
+            ui.ctx().set_visuals(Visuals::light())
+        }
+
+        if ui.button({
+            match self.dark_mode {
+                true => format!("{} Light", LIGHT_MODE_SYMBOL),
+                false => format!("{} Dark", DARK_MODE_SYMBOL),
+            }
+        }).clicked() {
+            self.dark_mode = !self.dark_mode
+        };
+    }
 }
 
 impl App for InteractiveApp {
@@ -238,6 +259,13 @@ impl App for InteractiveApp {
                     .show(ui, |ui| {
                         ui.add_space(10.);
 
+                        ui.label("Theme");
+                        ui.separator();
+
+                        self.draw_dark_mode(ui);
+
+                        ui.add_space(10.);
+
                         ui.label("Simulation");
                         ui.separator();
 

diff --git a/src/changes.rs b/src/changes.rs
@@ -1,6 +1,6 @@
 use std::collections::HashMap;
 
-use egui::{Color32, Vec2};
+use egui::Vec2;
 
 use crate::{Edge, Node};
 
@@ -105,7 +105,6 @@ impl Changes {
 #[derive(Default, Clone)]
 pub struct ChangesNode {
     pub location: Option<Vec2>,
-    pub color: Option<Color32>,
     pub radius: Option<f32>,
     pub selected: Option<bool>,
     pub dragged: Option<bool>,
@@ -118,11 +117,6 @@ impl ChangesNode {
         *location += delta;
     }
 
-    fn scale(&mut self, n: &Node, factor: f32) {
-        let radius = self.radius.get_or_insert(n.radius);
-        *radius *= factor;
-    }
-
     fn select(&mut self, n: &Node) {
         let selected = self.selected.get_or_insert(n.selected);
         *selected = true;
@@ -152,10 +146,6 @@ impl ChangesNode {
 /// Stores changes to the edge properties
 #[derive(Default, Clone)]
 pub struct ChangesEdge {
-    pub color: Option<Color32>,
-    pub width: Option<f32>,
-    pub tip_size: Option<f32>,
-    pub curve_size: Option<f32>,
     pub selected: Option<bool>,
 }
 

diff --git a/src/elements.rs b/src/elements.rs
@@ -71,9 +71,6 @@ impl Elements {
                 if let Some(radius_change) = change.radius {
                     node.radius = radius_change;
                 }
-                if let Some(color_change) = change.color {
-                    node.color = color_change;
-                }
                 if let Some(dragged_change) = change.dragged {
                     node.dragged = dragged_change;
                 }
@@ -87,15 +84,6 @@ impl Elements {
 
         for (idx, change) in changes.edges.iter() {
             if let Some(edge) = self.get_edge_mut(idx) {
-                if let Some(width_change) = change.width {
-                    edge.width = width_change;
-                }
-                if let Some(curve_size_change) = change.curve_size {
-                    edge.curve_size = curve_size_change;
-                }
-                if let Some(tip_size_change) = change.tip_size {
-                    edge.tip_size = tip_size_change;
-                }
                 if let Some(selected_change) = change.selected {
                     edge.selected = selected_change;
                 }
@@ -147,7 +135,7 @@ pub struct Node {
     pub id: usize,
     pub location: Vec2,
 
-    pub color: Color32,
+    pub color: Option<Color32>,
     pub radius: f32,
 
     pub selected: bool,
@@ -160,7 +148,7 @@ impl Node {
             id,
             location,
 
-            color: Color32::from_rgb(255, 255, 255),
+            color: None,
             radius: 5.,
 
             selected: false,
@@ -189,9 +177,10 @@ pub struct Edge {
 
     pub width: f32,
     pub tip_size: f32,
+    pub tip_angle: f32,
     pub curve_size: f32,
 
-    pub color: Color32,
+    pub color: Option<Color32>,
     pub selected: bool,
 }
 
@@ -204,9 +193,10 @@ impl Edge {
 
             width: 2.,
             tip_size: 15.,
+            tip_angle: std::f32::consts::TAU / 50.,
             curve_size: 20.,
 
-            color: Color32::from_rgb(128, 128, 128),
+            color: None,
             selected: false,
         }
     }
@@ -225,6 +215,7 @@ impl Edge {
             end: self.end,
             list_idx: self.list_idx,
             color: self.color,
+            tip_angle: self.tip_angle,
             selected: self.selected,
         }
     }