crossflow_diagram_editor 0.0.6

Frontend for crossflow diagrams
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

# crossflow_diagram_editor

![](./docs/assets/diagram-editor-preview.webp)

This contains a SPA React web app to create and edit a `crossflow` diagram and an axum router to serve it.

## Embedding the Diagram Editor into a `crossflow` app

`crossflow_diagram_editor` contains an embedded version of the frontend. An `axum` router is provided
that can be used to serve the embedded frontend.

```bash
cargo add crossflow_diagram_editor
```

```rust
use crossflow_diagram_editor::basic_executor::{self, DiagramElementRegistry, Error};

fn main() -> Result<(), Box<dyn Error>> {
    let mut registry = DiagramElementRegistry::new();
    // register node builders, section builders etc.
    basic_executor::run(registry)
}
```

### Standalone Diagram Editor API server

The embedded frontend can be disabled:

```toml
[dependencies]
crossflow_diagram_editor = { version = "*", default-features = false, features = ["router"] }
```

This will cause the router to serve only the rest API.

See the [calculator demo](../examples/diagram/calculator) for more examples.

### WebAssembly Local Backend

If the bevy app can be compiled into a WebAssembly blob, the diagram editor can use it in place of an API server.

See [crossflow_diagram_editor_wasm](./wasm/README.md) for more info.

## Local development server

Normally the web stack is not required by using this crate as a dependency, but it is required when developing the frontend.

Requirements:

* nodejs
* pnpm

### Setup

Install pnpm and nodejs:

```bash
curl -fsSL https://get.pnpm.io/install.sh | bash -
pnpm env use --global lts
```

Install the dependencies:

```bash
pnpm install
```

First start the `dev` backend server:

```bash
pnpm dev:backend
```

then in another terminal, start the frontend `dev` server:

```bash
pnpm dev
```

When there are breaking changes in `crossflow`, the typescript definitions need to be regenerated:

```bash
pnpm generate-types
```

### Live Demo

We host a live demo of the diagram editor at [this link](https://open-rmf.github.io/crossflow/). The diagram editor and workflow executor both run in the client's web browser. The node catalog includes simple math operations.

> [!NOTE]
> Repo maintainers that want to update the web-hosted demo should run these commands:

```bash
cargo install wasm-pack
pnpm install
pnpm deploy-ghpages
```