Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
@blitzarx1
blitzarx1 authored Apr 28, 2023
1 parent f551885 commit bd86d43
Showing 1 changed file with 19 additions and 51 deletions.
70 changes: 19 additions & 51 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,77 +2,45 @@
[![docs.rs](https://img.shields.io/docsrs/egui_graphs)](https://docs.rs/egui_graphs)

# egui_graphs
Grpah visualization implementation using [egui](https://github.com/emilk/egui)
Grpah visualization with rust and [egui](https://github.com/emilk/egui)

![Screenshot 2023-04-23 at 22 02 42](https://user-images.githubusercontent.com/32969427/233856916-4b3cf1a7-85a3-4ca4-8d07-bac9fd0d95d6.png)

## Status
The project is close to the first stable version.

Currently not optimized for large graphs. The goal is to match egui drawing speed. Further optimizations are unnecessary.

## Concept
The goal is to create a crate that expands egui's visualization capabilities and offers an easy-to-integrate, customizable graph visualization widget.
![Screenshot 2023-04-28 at 23 14 38](https://user-images.githubusercontent.com/32969427/235233765-23b0673b-70e5-4138-9384-180804392dba.png)

## Features
* Customization and interactivity;
* Ability to draw arbitrarily complex graphs with self-references, loops, etc.;
* Widget does not modify the provided graph and properties; instead, it generates changes, in case of any interactions, which the client can apply.

## Roadmap for v0.1.0 - first stable release
<pre>
done
-------------------------------------+----
basic graph drawing | [x]
self-references, multi-connections | [x]
zoom & pan, fit-to-screen | [x]
drag node | [x]
select, multiselect | [x]
support egui dark/light theme | [x]
documentation, tests, example | [ ]
</pre>
* Zoom & pan;
* Dragging, Selecting;
* The `GraphView` widget does not modify the provided graph and properties, instead in case of any interactions, it generates changes which the client can apply;
* Support for egui dark/light mode;

![ezgif-4-3e4e4469e6](https://user-images.githubusercontent.com/32969427/233863786-11459176-b741-4343-8b42-7d9b3a8239ee.gif)

---
## Applying changes from GraphView widget

The `GraphView` widget in the egui_graphs crate provides a way to visualize a graph and interact with it by dragging nodes, selecting nodes and edges, and more. However, in order to update the underlying graph data structure with these changes, we need to apply the changes returned by the widget.
The `GraphView` widget provides a way to visualize a graph and interact with it by dragging nodes, selecting nodes and edges, and more. However, in order to update the underlying graph data structure with these changes, we need to apply the changes returned by the widget.

This is where the `Elements` struct comes in. The `Elements` struct contains the graph data that is used to render the `GraphView` widget, and provides methods to apply changes to this data.
This is where the `Elements` struct comes in. The `Elements` struct contains the graph data that is used to render the `GraphView` widget, and provides a method to apply the changes to this data.

The simplest way to apply changes is to call the `apply_changes` method on the `Elements` struct. This method accepts a `Changes` struct which contains information about the changes that were made in the `GraphView` widget, and applies these changes to the `Elements` struct. For example:
The simplest way to apply changes is to call the `apply_changes` method on the `Elements` struct. This method accepts a `Changes` struct which contains information about the changes that were made in the `GraphView` widget, and applies these changes to the `Elements` struct.

```rust
let mut elements = construct_elements();
let changes = graph_view.last_changes();
elements.apply_changes(changes, &mut on_node_change, &mut on_edge_change);
elements.apply_changes(changes, &mut |elements, node_idx, change| {
// some additional manipulation with changed node using its idx `node_idx`
// or manipulations with other elements via mutable reference to `elements`
})
```

In this example, `construct_elements()` is a function that creates an initial `Elements` struct, and `graph_view` is a reference to the `GraphView` widget. The `last_changes` method on the GraphView widget returns a `Changes` struct containing the changes made in the widget. Finally, the `apply_changes` method on the `Elements` struct applies these changes, calling the `on_node_change` and `on_edge_change` callbacks for each node and edge that was changed after default changes has been applied.

The `apply_changes` method is flexible and allows for custom behavior when changes are applied. For example, if you want to update some external data structure when a node is moved in the `GraphView` widget, you can provide a callback function to the `apply_changes` method:

```rust
fn on_node_change(node: &mut Node, change: &NodeChange) {
if let Some(location_change) = change.location {
// update external data structure with new location
update_location(node.id, location_change.x, location_change.y);
}
}
`apply_changes` method on the `Elements` struct applies changes, calling the user callback for each node that was changed after default changes has been applied.

let mut elements = construct_elements();
let changes = graph_view.last_changes();
elements.apply_changes(changes, &mut on_node_change, &mut on_edge_change);
```

In this example, the `on_node_change` function is called for each node that was changed in the `GraphView` widget. If the `location` field in the `NodeChange` struct is present, the function updates some external data structure with the new location of the node.
The `apply_changes` method is flexible and allows for custom behavior when changes are applied. For example, if you want to update some external data structure when a node is moved in the `GraphView` widget, you can provide a callback function to the `apply_changes` method.

By using the `apply_changes` method and providing custom callback functions, we can easily apply changes made in the `GraphView` widget to our graph data structure and perform any additional tasks we need to when changes are made.

---
## Examples

![ezgif-4-3e4e4469e6](https://user-images.githubusercontent.com/32969427/233863786-11459176-b741-4343-8b42-7d9b3a8239ee.gif)

### Basic
### Basic setup example
#### Step 1: Setting up the BasicApp struct.

First, let's define the `BasicApp` 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.
Expand Down

0 comments on commit bd86d43

Please sign in to comment.