Added behave-flow to repo.

Made editor so that you can toggle between split editor and not, depending on if you have a model file code cleanup - already have graph json so we just grab it and render it instead of regneerate from nodes and edges Fixed flow editor with new build and subfolder. Added a readme in examples
bhouston · Nov 22, 2022 · 2f263f7 · 2f263f7
1 parent 5d35731
commit 2f263f7
Show file tree

Hide file tree

Showing 77 changed files with 5,526 additions and 13 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -30,7 +30,6 @@
         "argsIgnorePattern": "^_"
       }
     ],
-    "import/extensions": ["error", "always", {"ignorePackages": true} ],
     "simple-import-sort/imports": "error",
     "promise/always-return": "error",
     "promise/no-return-wrap": "error",

diff --git a/.gitignore b/.gitignore
@@ -5,3 +5,4 @@ package-lock.json
 node-spec.json
 *.blend1
 node-spec.csv
+yarn.lock
diff --git a/examples/flow/.gitignore b/examples/flow/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/flow/README.md b/examples/flow/README.md
@@ -0,0 +1,13 @@
+# Behave-Graph Flow Editor
+
+This example contains a real-time flow-editor for behave-graph originally created by @beeglebug in a separate repository [behave-flow](https://github.com/beeglebug/behave-flow) by @beeglebug.  It has been imported into this monorepo to enable both the editor code and core framework code to be developed against/update in tandem.
+
+It is built in react and typescript, with the front-end hosted in a a serverless vite app.
+
+To Build:
+
+    npm run build
+
+To Run:
+
+    npm run dev
diff --git a/examples/flow/index.html b/examples/flow/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Behave Graph Flow Editor</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/flow/package.json b/examples/flow/package.json
@@ -0,0 +1,48 @@
+{
+  "name": "@behave-graph/examples-flow",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@behave-graph/core": "*",
+    "@fortawesome/fontawesome-svg-core": "^6.2.0",
+    "@fortawesome/free-solid-svg-icons": "^6.2.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@headlessui/react": "^1.7.4",
+    "@heroicons/react": "^2.0.13",
+    "@rainbow-me/rainbowkit": "^0.7.1",
+    "@react-three/drei": "^9.42.2",
+    "@react-three/fiber": "^8.9.1",
+    "clsx": "^1.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
+    "react-icons": "^4.6.0",
+    "react-router-dom": "^6.4.3",
+    "react-split-pane": "^0.1.92",
+    "reactflow": "^11.2.0",
+    "three": "^0.146.0",
+    "uuid": "^9.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.22",
+    "@types/react-dom": "^18.0.7",
+    "@types/three": "^0.146.0",
+    "@types/uuid": "^8.3.4",
+    "@typescript-eslint/parser": "^5.42.0",
+    "@vitejs/plugin-react": "^2.2.0",
+    "autoprefixer": "^10.4.13",
+    "eslint": "^8.26.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-react-app": "^7.0.1",
+    "postcss": "^8.4.18",
+    "tailwindcss": "^3.2.2",
+    "typescript": "^4.6.4",
+    "vite": "^3.2.0"
+  }
+}
diff --git a/examples/flow/postcss.config.cjs b/examples/flow/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/examples/flow/public/examples/graphs/ClickButtonToAnimate.json b/examples/flow/public/examples/graphs/ClickButtonToAnimate.json
@@ -0,0 +1,130 @@
+{
+  "nodes": [
+    {
+      "id": "d71ccb9c-0fea-4ce9-bf92-a31485e9b5a6",
+      "type": "scene/set/color",
+      "metadata": {
+        "positionX": "184.79620709295074",
+        "positionY": "18.913444261875217"
+      },
+      "parameters": {
+        "jsonPath": {
+          "value": "materials/2/color"
+        },
+        "value": {
+          "link": {
+            "nodeId": "5394babc-dcc0-4735-9daf-465c73a66e80",
+            "socket": "result"
+          }
+        }
+      }
+    },
+    {
+      "id": "5394babc-dcc0-4735-9daf-465c73a66e80",
+      "type": "math/toColor/rgb",
+      "metadata": {
+        "positionX": "-145.20682021207682",
+        "positionY": "90.16020188760152"
+      },
+      "parameters": {
+        "g": {
+          "value": ".9"
+        }
+      }
+    },
+    {
+      "id": "267d676e-79d4-49e5-9be8-c7dd8b157f00",
+      "type": "math/toColor/rgb",
+      "metadata": {
+        "positionX": "-140.0557507122972",
+        "positionY": "344.03584956239894"
+      },
+      "parameters": {
+        "r": {
+          "value": ".9"
+        }
+      }
+    },
+    {
+      "id": "98da1b8b-b49e-489d-80ff-24ce601ac0c0",
+      "type": "scene/set/color",
+      "metadata": {
+        "positionX": "181.70354627203167",
+        "positionY": "272.5116315772409"
+      },
+      "parameters": {
+        "jsonPath": {
+          "value": "materials/2/color"
+        },
+        "value": {
+          "link": {
+            "nodeId": "267d676e-79d4-49e5-9be8-c7dd8b157f00",
+            "socket": "result"
+          }
+        }
+      }
+    },
+    {
+      "id": "d326d57f-198b-41e8-9d2b-182130f1398f",
+      "type": "flow/flipFlop",
+      "metadata": {
+        "positionX": "-51.98681837156558",
+        "positionY": "-342.24335289662594"
+      },
+      "flows": {
+        "on": {
+          "nodeId": "d71ccb9c-0fea-4ce9-bf92-a31485e9b5a6",
+          "socket": "flow"
+        },
+        "off": {
+          "nodeId": "98da1b8b-b49e-489d-80ff-24ce601ac0c0",
+          "socket": "flow"
+        }
+      }
+    },
+    {
+      "id": "85179702-7634-4cf5-95ca-5908224cd4f0",
+      "type": "scene/nodeClick",
+      "metadata": {
+        "positionX": "-517.3783747475436",
+        "positionY": "-184.38358132733035"
+      },
+      "parameters": {
+        "jsonPath": {
+          "value": "nodes/2"
+        }
+      },
+      "flows": {
+        "secondFlow": {
+          "nodeId": "fcb81837-650c-42fb-a708-236f2ee64abc",
+          "socket": "flow"
+        },
+        "flow": {
+          "nodeId": "d326d57f-198b-41e8-9d2b-182130f1398f",
+          "socket": "flow"
+        }
+      }
+    },
+    {
+      "id": "fcb81837-650c-42fb-a708-236f2ee64abc",
+      "type": "scene/set/boolean",
+      "metadata": {
+        "positionX": "174.3147945277493",
+        "positionY": "-187.0779606350799"
+      },
+      "parameters": {
+        "jsonPath": {
+          "value": "animations/0/playing"
+        },
+        "value": {
+          "link": {
+            "nodeId": "d326d57f-198b-41e8-9d2b-182130f1398f",
+            "socket": "isOn"
+          }
+        }
+      }
+    }
+  ],
+  "variables": [],
+  "customEvents": []
+}