diff --git a/Cargo.lock b/Cargo.lock index bdcfdc3..ebe7d56 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -339,7 +339,7 @@ checksum = "d468802bab17cbc0cc575e9b053f41e72aa36bfa6b7f55e3529ffa43161b97fa" [[package]] name = "basic" -version = "0.0.15" +version = "0.0.16" dependencies = [ "eframe", "egui", @@ -738,7 +738,7 @@ dependencies = [ [[package]] name = "egui_graphs" -version = "0.0.15" +version = "0.0.16" dependencies = [ "egui", ] @@ -1130,7 +1130,7 @@ dependencies = [ [[package]] name = "interactive" -version = "0.0.15" +version = "0.0.16" dependencies = [ "eframe", "egui", diff --git a/Cargo.toml b/Cargo.toml index aea536c..25ed8d5 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "egui_graphs" -version = "0.0.15" +version = "0.0.16" authors = ["Dmitrii Samsonov "] license = "MIT" homepage = "https://github.com/blitzarx1/egui_graphs" diff --git a/README.md b/README.md index 7d24ea7..ceb0509 100644 --- a/README.md +++ b/README.md @@ -34,8 +34,78 @@ interactions vs egui draw benchmarks | [ ] documentation, tests, example | [ ] -## Example +## Examples ![ezgif-4-3e4e4469e6](https://user-images.githubusercontent.com/32969427/233863786-11459176-b741-4343-8b42-7d9b3a8239ee.gif) -You can also check the [example](https://github.com/blitzarx1/egui_graph/tree/master/example) for usage references and settings description. +### Basic +#### Step 1: Setting up the ExampleApp struct. + +First, let's define the ExampleApp struct that will hold the graph elements and settings. The struct contains two fields: elements and settings. The elements field stores the graph's nodes and edges, while settings contains the configuration options for the GraphView widget. +```rust +pub struct ExampleApp { + elements: Elements, + settings: Settings, +} +``` + +#### Step 2: Implementing the new() function. + +Next, implement the new() function for the ExampleApp struct. This function initializes the graph settings with default values and generates the graph elements. +```rust +impl ExampleApp { + fn new(_: &CreationContext<'_>) -> Self { + let settings = Settings::default(); + let elements = generate_graph(); + Self { settings, elements } + } +} +``` + +#### Step 3: Implementing the update() function. + +Now, implement the update() function for the ExampleApp. This function creates a GraphView widget with the elements and settings, and adds it to the central panel using the ui.add() function. +```rust +impl App for ExampleApp { + fn update(&mut self, ctx: &Context, _: &mut eframe::Frame) { + let widget = &GraphView::new(&self.elements, &self.settings); + egui::CentralPanel::default().show(ctx, |ui| { + ui.add(widget); + }); + } +} +``` +#### Step 4: Generating the graph elements. + +Create a helper function called generate_graph() that initializes the nodes and edges for the graph. In this example, we create three nodes with unique positions and three edges connecting them in a triangular pattern. +```rust +fn generate_graph() -> Elements { + let mut nodes = HashMap::new(); + nodes.insert(0, Node::new(egui::Vec2::new(0., 30.))); + nodes.insert(1, Node::new(egui::Vec2::new(-30., 0.))); + nodes.insert(2, Node::new(egui::Vec2::new(30., 0.))); let mut edges = HashMap::new(); + edges.insert((0, 1), vec![Edge::new(0, 1, 0)]); + edges.insert((1, 2), vec![Edge::new(1, 2, 0)]); + edges.insert((2, 0), vec![Edge::new(2, 0, 0)]); Elements::new(nodes, edges) +} +``` + +#### Step 5: Running the application. + +Finally, run the application using the run_native() function with the specified native options and the ExampleApp. +```rust +fn main() { + let native_options = eframe::NativeOptions::default(); + run_native( + "egui_graphs_basic_demo", + native_options, + Box::new(|cc| Box::new(ExampleApp::new(cc))), + ) + .unwrap(); +} +``` +You can further customize the appearance and behavior of your graph by modifying the settings or adding more nodes and edges as needed. Don't forget to apply changes return from the widget. + +--- + +You can check more advanced [interactive example](https://github.com/blitzarx1/egui_graph/tree/master/examples/interactive) for usage references, settings description and changes apply demonstration. diff --git a/examples/basic/Cargo.toml b/examples/basic/Cargo.toml index d6f7a9b..8ddc27a 100644 --- a/examples/basic/Cargo.toml +++ b/examples/basic/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "basic" -version = "0.0.15" +version = "0.0.16" authors = ["Dmitrii Samsonov "] license = "MIT" edition = "2021" diff --git a/examples/interactive/Cargo.toml b/examples/interactive/Cargo.toml index 485614c..8250d12 100644 --- a/examples/interactive/Cargo.toml +++ b/examples/interactive/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "interactive" -version = "0.0.15" +version = "0.0.16" authors = ["Dmitrii Samsonov "] license = "MIT" edition = "2021"