Styled UI colors; Compiles release candidate 2 to WASM

Author: an-Iceberg

Cargo.lock

@@ -1,7 +1,9 @@
 [package]
 name = "rust_graph_visualiser"
-version = "1.9.0"
+version = "1.9.2"
 edition = "2021"
+authors = ["Sandra"]
+repository = "https://github.com/an-Iceberg/rust_graph_visualiser"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 

Cargo.toml

@@ -41,7 +41,7 @@
       event.preventDefault()
     }, false);
   </script>
-  <script>load("rust_graph_visualiser@v1.0.0.wasm");</script>
+  <script>load("rust_graph_visualiser@v1.9.2.wasm");</script>
 </body>
 
 </html>

docs/index.html

@@ -239,7 +239,6 @@ impl DijkstraGraph
         if !neighbour.visited
         { unvisited_points.push(edge.destination); }
 
-        // TODO: if both are same then toss coin
         if neighbour.distance.is_none() || neighbour.distance.unwrap() > possibly_lower_goal || (neighbour.distance.unwrap() == possibly_lower_goal && rand::random())
         {
           neighbour.distance = Some(possibly_lower_goal);
@@ -440,7 +439,7 @@ impl DijkstraGraph
     self.add_line(13, 2, 1);
     self.add_line(15, 8, 10);
     self.add_line(14, 8, 14);
-    self.add_line(1, 18, 10);
+    self.add_line(1, 18, 10); // TODO: reduce length to 9
     self.add_line(17, 18, 3);
     self.add_line(16, 17, 2);
     self.add_line(7, 3, 1);

docs/[email protected] renamed to docs/[email protected]

@@ -27,15 +27,16 @@ pub(crate) enum Mode {
   Path,
 }
 
-// TODO: extract some variables as const
 pub(crate) const VERSION: Option<&str> = option_env!("CARGO_PKG_VERSION");
+pub(crate) const AUTHORS: Option<&str> = option_env!("CARGO_PKG_AUTHORS");
 pub(crate) const UI_WIDTH: f32 = 200.;
 pub(crate) const PADDING: u8 = 3;
 pub(crate) const BG_COLOR: u32 = 0x400080;
 pub(crate) const PATH_COLOR: u32 = 0x00ff00;
-pub(crate) const LINE_COLOR: u32 = 0xff8000;
-pub(crate) const POINT_COLOR: u32 = 0x00ffff;
-pub(crate) const LINE_LENGTH_COLOR: u32 = 0xc0c0c0;
+pub(crate) const LINE_COLOR: u32 = 0x00c0c0;
+pub(crate) const POINT_COLOR: u32 = 0xff8000;
+pub(crate) const LINE_LENGTH_COLOR: u32 = 0xc09a9a;
+pub(crate) const  UI_SPACE: f32 = 225.;
 
 #[macroquad::main(window_configuration)]
 async fn main()

src/graph.rs

@@ -310,6 +310,7 @@ fn shortest_path_large_b()
   let mut graph = DijkstraGraph::new();
   graph.insert_large_graph();
 
+  // TODO: add second valid path
   let should_path = vec![6, 4, 1, 2, 16, 17, 18];
 
   graph.set_start(6);

src/main.rs

@@ -1,9 +1,10 @@
-use crate::{graph::DijkstraGraph, Mode, VERSION};
+use crate::{graph::DijkstraGraph, Mode, VERSION, AUTHORS, UI_SPACE};
+
 use egui_macroquad::{
-  egui::{epaint::Shadow, Align2, Rounding, Slider, Vec2, Visuals, Window, Response, Ui, Sense, WidgetInfo, WidgetType, lerp, pos2, vec2, Widget},
+  egui::{epaint::Shadow, Align2, Rounding, Slider, Vec2, Visuals, Window, Color32, Stroke},
   ui,
 };
-use macroquad::time::get_fps;
+
 
 // TODO: edit colour with hex values
 // TODO: make colours editable
@@ -22,7 +23,6 @@ pub(crate) fn paint_ui(
 )
 {
   ui(|egui_context| {
-    // Disabling all shadows
     egui_context.set_visuals(Visuals
     {
       window_shadow: Shadow::NONE,
@@ -33,19 +33,30 @@ pub(crate) fn paint_ui(
         sw: 10.,
         se: 0.,
       },
+      window_fill: Color32::from_rgb(32, 0, 64),
+      window_stroke: Stroke::new(2., Color32::from_rgb(0, 192, 192)),
+      override_text_color: Some(Color32::from_rgb(216, 167, 215)),
+      // widgets: Widgets::style(&self, response),
       ..Default::default()
     });
 
     // egui ❤ macroquad
     Window::new("Rust Graph Visualiser")
-      .anchor(Align2::RIGHT_TOP, Vec2::new(0., 10.))
+      .anchor(Align2::RIGHT_TOP, Vec2::new(-1.5, 10.))
       .constrain(true)
       .collapsible(false)
       .movable(false)
       .resizable(false)
       .fixed_size(Vec2::new(200., 0.))
       .show(egui_context, |ui|
       {
+        ui.style_mut().visuals.widgets.inactive.weak_bg_fill = Color32::from_rgb(0, 64, 64);
+        ui.style_mut().visuals.widgets.inactive.bg_fill = Color32::from_rgb(0, 64, 64);
+        ui.style_mut().visuals.widgets.hovered.weak_bg_fill = Color32::from_rgb(0, 128, 128);
+        ui.style_mut().visuals.widgets.hovered.bg_fill = Color32::from_rgb(0, 128, 128);
+        ui.style_mut().visuals.widgets.active.weak_bg_fill = Color32::from_rgb(0, 192, 192);
+        ui.style_mut().visuals.widgets.active.bg_fill = Color32::from_rgb(0, 192, 192);
+
         ui.label("Select a mode:");
         ui.horizontal(|ui|
         {
@@ -78,10 +89,15 @@ pub(crate) fn paint_ui(
           Mode::Path =>
           {
             ui.separator();
-            ui.add_enabled_ui(graph.start().is_some() && graph.end().is_some(), |ui|
+            ui.horizontal(|ui|
             {
-              if ui.button("Find shortest path").clicked()
-              { graph.find_shortest_path(); }
+              ui.add_enabled_ui(graph.start().is_some() && graph.end().is_some(), |ui|
+              {
+                if ui.button("Find shortest path").clicked()
+                { graph.find_shortest_path(); }
+              });
+              if ui.button("Clear path").clicked()
+              { graph.clear_path(); }
             });
             /*
             ui.horizontal(|ui|
@@ -98,11 +114,11 @@ pub(crate) fn paint_ui(
 
         ui.add_space(match (&mode, selected_point_id)
         {
-          (Mode::Move, _) => 215.,
-          (Mode::Line, None) => 182.,
-          (Mode::Line, Some(_)) => 140.,
-          (Mode::Point, _) => 201.,
-          (Mode::Path, _) => 136.
+          (Mode::Move, _) => UI_SPACE,
+          (Mode::Line, None) => UI_SPACE-33.,
+          (Mode::Line, Some(_)) => UI_SPACE-75.,
+          (Mode::Point, _) => UI_SPACE-14.,
+          (Mode::Path, _) => UI_SPACE-58.
         });
 
         ui.separator();
@@ -126,6 +142,7 @@ pub(crate) fn paint_ui(
 
         ui.horizontal(|ui|
         {
+          // TODO: print angle as plain text
           ui.label("Angle:");
           ui.add_enabled_ui(false, |ui|
           { ui.drag_angle(angle); });
@@ -169,11 +186,7 @@ pub(crate) fn paint_ui(
 
         ui.separator();
 
-        ui.horizontal(|ui|
-        {
-          ui.label("Hexagons:");
-          ui.add(toggle(hexagons));
-        });
+        ui.checkbox(hexagons, "Hexagons");
 
         /*
         ui.separator();
@@ -199,48 +212,14 @@ pub(crate) fn paint_ui(
 
         ui.separator();
 
+        // --- CREDITS (!important) ---
         ui.horizontal(|ui|
         {
           ui.label(format!("v{}", VERSION.unwrap_or("unknown")));
           ui.separator();
-          ui.label(format!("FPS:{}", get_fps()));
+          ui.label("Made by");
+          ui.hyperlink_to(format!("{}", AUTHORS.unwrap_or("unknown")), "https://github.com/an-Iceberg");
         });
       });
   });
 }
-
-fn toggle_ui(ui: &mut Ui, on: &mut bool) -> Response
-{
-  let desired_size = ui.spacing().interact_size.y * vec2(2.0, 1.0);
-  let (rect, mut response) = ui.allocate_exact_size(desired_size, Sense::click());
-  if response.clicked()
-  {
-    *on = !*on;
-    response.mark_changed();
-  }
-  response.widget_info(|| WidgetInfo::selected(WidgetType::Checkbox, *on, ""));
-
-  if ui.is_rect_visible(rect)
-  {
-    let how_on = ui.ctx().animate_bool(response.id, *on);
-    let visuals = ui.style().interact_selectable(&response, *on);
-    let rect = rect.expand(visuals.expansion);
-    let radius = 0.5 * rect.height();
-    ui.painter().rect(rect, radius, visuals.bg_fill, visuals.bg_stroke);
-    let circle_x = lerp((rect.left() + radius)..=(rect.right() - radius), how_on);
-    let center = pos2(circle_x, rect.center().y);
-    ui.painter().circle(center, 0.75 * radius, visuals.bg_fill, visuals.fg_stroke);
-  }
-
-  return response;
-}
-
-// A wrapper that allows the more idiomatic usage pattern: `ui.add(toggle(&mut my_bool))`
-/// iOS-style toggle switch.
-///
-/// ## Example:
-/// ``` ignore
-/// ui.add(toggle(&mut my_bool));
-/// ```
-pub(crate) fn toggle(on: &mut bool) -> impl Widget + '_
-{ move |ui: &mut Ui| toggle_ui(ui, on) }

src/tests/graph_tests.rs

@@ -3,7 +3,7 @@ use macroquad::{
   prelude::{
     mouse_position, Color,
   },
-  shapes::{draw_circle, draw_rectangle, draw_circle_lines, draw_line, draw_triangle, draw_hexagon}, text::{get_text_center, draw_text, measure_text}, math::{Vec4, Vec2}, color::{YELLOW, BLACK, MAGENTA, GREEN, RED},
+  shapes::{draw_circle, draw_rectangle, draw_circle_lines, draw_line, draw_triangle, draw_hexagon}, text::{get_text_center, draw_text, measure_text}, math::Vec2, color::{YELLOW, MAGENTA, GREEN},
 };
 use std::ops::{Div, Mul};
 use crate::Mode;