Diagram editor

.github/workflows/ci_linux.yaml

@@ -31,6 +31,14 @@ jobs:
     - name: Setup rust
       run: rustup default ${{ matrix.rust-version }}
 
+    - name: Setup pnpm
+      uses: pnpm/action-setup@v4
+      with:
+        version: latest
+
+    - name: Setup nodejs
+      run: pnpm env use --global lts
+
     - name: Build default features
       run: cargo build --workspace
     - name: Test default features

.gitignore

@@ -2,3 +2,14 @@ debug/
 target/
 
 Cargo.lock
+
+# nodejs
+node_modules
+
+# diagram-editor
+/diagram-editor/dist
+/diagram-editor/dist.tar.gz
+
+# storybook
+*storybook.log
+storybook-static

Cargo.toml

@@ -78,8 +78,10 @@ test-log = { version = "0.2.16", features = [
 
 [workspace]
 members = [
+
   "examples/diagram/calculator",
   "examples/zenoh-examples",
+  "diagram-editor",
 ]
 
 [[bin]]

biome.json

@@ -0,0 +1,63 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.0.5/schema.json",
+  "files": {
+    "includes": [
+      "**/*.tsx",
+      "**/*.ts",
+      "**/*.mjs",
+      "**/*.cjs",
+      "**/*.json",
+      "**/*.css",
+      "!**/*.schema.json",
+      "!node_modules/**"
+    ]
+  },
+  "assist": { "actions": { "source": { "organizeImports": "on" } } },
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "formatter": {
+    "indentStyle": "space"
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single"
+    }
+  },
+  "css": {
+    "parser": {
+      "cssModules": true
+    }
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "correctness": {
+        "useExhaustiveDependencies": {
+          "level": "error",
+          "options": {
+            "hooks": [
+              { "name": "useEditorMode", "stableResult": [1] },
+              { "name": "useTemplates", "stableResult": [1] }
+            ]
+          }
+        }
+      }
+    }
+  },
+  "overrides": [
+    {
+      "includes": ["**/*.test.ts", "**/*.test.tsx"],
+      "linter": {
+        "rules": {
+          "style": {
+            "noNonNullAssertion": "off"
+          }
+        }
+      }
+    }
+  ]
+}

diagram-editor/.gitignore

@@ -0,0 +1,4 @@
+/dist
+
+*storybook.log
+storybook-static

diagram-editor/.storybook/main.ts

@@ -0,0 +1,11 @@
+import type { StorybookConfig } from 'storybook-react-rsbuild';
+
+const config: StorybookConfig = {
+  stories: [
+    '../frontend/**/*.mdx',
+    '../frontend/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
+  addons: [],
+  framework: 'storybook-react-rsbuild',
+};
+export default config;

diagram-editor/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from 'storybook-react-rsbuild';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

diagram-editor/Cargo.toml

@@ -0,0 +1,67 @@
+[package]
+name = "bevy_impulse_diagram_editor"
+version = "0.0.1"
+edition = "2021"
+authors = ["Teo Koon Peng <[email protected]>"]
+license = "Apache-2.0"
+description = "Frontend for bevy_impulse diagrams"
+readme = "README.md"
+repository = "https://github.com/open-rmf/bevy_impulse"
+keywords = [
+  "reactive",
+  "workflow",
+  "behavior",
+  "agent",
+  "bevy",
+  "frontend",
+  "diagram",
+]
+categories = [
+  "science::robotics",
+  "asynchronous",
+  "concurrency",
+  "game-development",
+]
+exclude = ["/build.rs"]
+
+[lib]
+path = "server/lib.rs"
+
+[dependencies]
+axum = { version = "0.8.4", features = ["ws"] }
+bevy_app = "0.12.1"
+bevy_ecs = "0.12.1"
+bevy_impulse = { version = "0.0.2", path = "..", features = [
+  "diagram",
+  "trace",
+] }
+flate2 = { version = "1.1.1", optional = true }
+futures-util = "0.3.31"
+indexmap = { version = "2.10.0", optional = true, features = ["serde"] }
+mime_guess = "2.0.5"
+schemars = { version = "0.9", optional = true }
+serde = "1.0.219"
+serde_json = "1.0.140"
+tar = { version = "0.4.44", optional = true }
+tokio = "1.45.1"
+tracing = "0.1.41"
+
+[build-dependencies]
+flate2 = { version = "1.1.1", optional = true }
+tar = { version = "0.4.44", optional = true }
+
+[dev-dependencies]
+futures-channel = "0.3.31"
+test-log = "0.2.18"
+tokio = { version = "1.45.1", features = ["macros", "rt-multi-thread"] }
+tower = "0.5.2"
+
+[features]
+default = ["frontend"]
+frontend = ["dep:flate2", "dep:tar"]
+json_schema = ["dep:schemars", "dep:indexmap"]
+
+[[bin]]
+name = "print_schema"
+path = "server/bin/print_schema.rs"
+required-features = ["json_schema"]

diagram-editor/README.md

@@ -0,0 +1,77 @@
+# bevy_impulse_diagram_editor
+
+![](./docs/assets/diagram-editor-preview.webp)
+
+This contains a SPA React web app to create and edit a `bevy_impulse` diagram and an axum router to serve it.
+
+## 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
+```
+
+## Embedding the Diagram Editor into a `bevy_impulse` app
+
+The frontend is built using `rsbuild` and embedded inside the crate. The library exposes an axum router that can be used to serve both the frontend and backend:
+
+```rs
+use bevy_impulse_diagram_editor::{new_router, ServerOptions};
+
+fn main() {
+  let mut registry = DiagramElementRegistry::new();
+  // register node builders, section builders etc.
+
+  let mut app = bevy_app::App::new();
+  app.add_plugins(ImpulseAppPlugin::default());
+  let router = new_router(&mut app, registry, ServerOptions::default());
+  let listener = tokio::net::TcpListener::bind(("localhost", 3000))
+      .await
+      .unwrap();
+  axum::serve(listener, router).await?;
+}
+```
+
+To omit the frontend and serve only the backend API, disable the default features:
+
+```toml
+[dependencies]
+bevy_impulse_diagram_editor = { version = "0.0.1", default-features = false }
+```
+
+See the [calculator demo](../examples/diagram/calculator) for more examples.
+
+## 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
+
+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 `bevy_impulse`, the typescript definitions need to be regenerated:
+
+```bash
+pnpm generate-types
+```

diagram-editor/build.rs

@@ -0,0 +1,75 @@
+/// Builds the frontend and packages it into a tar.gz archive.
+/// This requires `pnpm` and all the js dependencies to be available.
+///
+/// This build script is excluded from the crate, the output tarball is included instead.
+/// This allows downstream to build the crate without any of the js stack.
+
+#[cfg(feature = "frontend")]
+mod frontend {
+    use flate2::{write::GzEncoder, Compression};
+    use std::fs::File;
+    use std::path::PathBuf;
+    use std::process::Command;
+    use tar::Builder;
+
+    pub fn build_frontend() {
+        println!("cargo:rerun-if-changed=build.rs");
+        println!("cargo:rerun-if-changed=package.json");
+        println!("cargo:rerun-if-changed=../pnpm-lock.yaml");
+        println!("cargo:rerun-if-changed=rsbuild.config.ts");
+        println!("cargo:rerun-if-changed=frontend");
+
+        let status = Command::new("pnpm")
+            .arg("install")
+            .arg("--frozen-lockfile")
+            .status()
+            .expect("Failed to execute pnpm install");
+
+        if !status.success() {
+            panic!("pnpm install failed with status: {:?}", status);
+        }
+
+        let status = Command::new("pnpm")
+            .arg("build")
+            .status()
+            .expect("Failed to execute pnpm build");
+
+        if !status.success() {
+            panic!("pnpm build failed with status: {:?}", status);
+        }
+
+        let dist_dir_path = "dist";
+        // We put the output in `CARGO_MANIFEST_DIR` instead of `OUT_DIR` because we want to include
+        // it in the crate.
+        let out_dir =
+            PathBuf::from(std::env::var("CARGO_MANIFEST_DIR").expect("CARGO_MANIFEST_DIR not set"));
+        let output_tar_gz_path = out_dir.join("dist.tar.gz");
+
+        if std::path::Path::new(dist_dir_path).exists() {
+            let tar_gz_file = File::create(&output_tar_gz_path)
+                .expect("Failed to create output tar.gz file in CARGO_MANIFEST_DIR");
+            let enc = GzEncoder::new(tar_gz_file, Compression::default());
+            let mut tar_builder = Builder::new(enc);
+
+            // Add the entire "dist" directory to the archive, preserving its name within the archive.
+            tar_builder
+                .append_dir_all(".", dist_dir_path)
+                .expect("Failed to add directory to tar archive");
+            tar_builder.finish().expect("Failed to finish tar archive");
+            println!(
+                "Successfully compressed '{}' into '{:?}'",
+                dist_dir_path, output_tar_gz_path
+            );
+        } else {
+            panic!(
+                "Directory '{}' not found after pnpm build. Frontend build might have failed.",
+                dist_dir_path
+            );
+        }
+    }
+}
+
+fn main() {
+    #[cfg(feature = "frontend")]
+    frontend::build_frontend();
+}