From 7ad0ea06e4b127f56334177e1ecd90f0c21e6500 Mon Sep 17 00:00:00 2001
From: Vinzenz Aubry <vinzenzaubry@gmail.com>
Date: Sun, 23 Jul 2023 08:40:38 +0200
Subject: [PATCH 01/51] init dual vue

---
 caster-editor/package-lock.json        | 309 ++++++++++++++++++++++++-
 caster-editor/package.json             |   1 +
 caster-editor/src/components/Graph.vue |  12 +-
 3 files changed, 311 insertions(+), 11 deletions(-)

diff --git a/caster-editor/package-lock.json b/caster-editor/package-lock.json
index 1f2a1561..d17c21fe 100644
--- a/caster-editor/package-lock.json
+++ b/caster-editor/package-lock.json
@@ -16,6 +16,7 @@
         "@toast-ui/editor": "^3.2.2",
         "@urql/exchange-multipart-fetch": "^1.0.1",
         "@urql/vue": "^1.0.4",
+        "@vue-flow/core": "^1.21.2",
         "codemirror": "^6.0.1",
         "element-plus": "^2.3.5",
         "graphql": "^16.6.0",
@@ -3695,6 +3696,108 @@
         "typescript": "*"
       }
     },
+    "node_modules/@vue-flow/core": {
+      "version": "1.21.2",
+      "resolved": "https://registry.npmjs.org/@vue-flow/core/-/core-1.21.2.tgz",
+      "integrity": "sha512-XsxE6o85zWjyjEZuxZYT02I1aujWptRfw+8GMzAiGXzsl2Fxy3TRaLDkmqcSlrWRU3y4X6o1fX6WEKPIVkURQQ==",
+      "dependencies": {
+        "@vueuse/core": "^10.1.2",
+        "d3-drag": "^3.0.0",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.25"
+      }
+    },
+    "node_modules/@vue-flow/core/node_modules/@types/web-bluetooth": {
+      "version": "0.0.17",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.17.tgz",
+      "integrity": "sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA=="
+    },
+    "node_modules/@vue-flow/core/node_modules/@vueuse/core": {
+      "version": "10.2.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.2.1.tgz",
+      "integrity": "sha512-c441bfMbkAwTNwVRHQ0zdYZNETK//P84rC01aP2Uy/aRFCiie9NE/k9KdIXbno0eDYP5NPUuWv0aA/I4Unr/7w==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.17",
+        "@vueuse/metadata": "10.2.1",
+        "@vueuse/shared": "10.2.1",
+        "vue-demi": ">=0.14.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vue-flow/core/node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.5.tgz",
+      "integrity": "sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue-flow/core/node_modules/@vueuse/metadata": {
+      "version": "10.2.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.2.1.tgz",
+      "integrity": "sha512-3Gt68mY/i6bQvFqx7cuGBzrCCQu17OBaGWS5JdwISpMsHnMKKjC2FeB5OAfMcCQ0oINfADP3i9A4PPRo0peHdQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vue-flow/core/node_modules/@vueuse/shared": {
+      "version": "10.2.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.2.1.tgz",
+      "integrity": "sha512-QWHq2bSuGptkcxx4f4M/fBYC3Y8d3M2UYyLsyzoPgEoVzJURQ0oJeWXu79OiLlBb8gTKkqe4mO85T/sf39mmiw==",
+      "dependencies": {
+        "vue-demi": ">=0.14.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vue-flow/core/node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.5.tgz",
+      "integrity": "sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vue/compiler-core": {
       "version": "3.2.47",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.47.tgz",
@@ -5615,12 +5718,38 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-dispatch": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
       "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
-      "optional": true,
-      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
       "engines": {
         "node": ">=12"
       }
@@ -5640,6 +5769,17 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-quadtree": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
@@ -5650,12 +5790,51 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-timer": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
       "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
-      "optional": true,
-      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
       "engines": {
         "node": ">=12"
       }
@@ -15377,6 +15556,64 @@
         "@volar/vue-language-core": "1.6.5"
       }
     },
+    "@vue-flow/core": {
+      "version": "1.21.2",
+      "resolved": "https://registry.npmjs.org/@vue-flow/core/-/core-1.21.2.tgz",
+      "integrity": "sha512-XsxE6o85zWjyjEZuxZYT02I1aujWptRfw+8GMzAiGXzsl2Fxy3TRaLDkmqcSlrWRU3y4X6o1fX6WEKPIVkURQQ==",
+      "requires": {
+        "@vueuse/core": "^10.1.2",
+        "d3-drag": "^3.0.0",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0"
+      },
+      "dependencies": {
+        "@types/web-bluetooth": {
+          "version": "0.0.17",
+          "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.17.tgz",
+          "integrity": "sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA=="
+        },
+        "@vueuse/core": {
+          "version": "10.2.1",
+          "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.2.1.tgz",
+          "integrity": "sha512-c441bfMbkAwTNwVRHQ0zdYZNETK//P84rC01aP2Uy/aRFCiie9NE/k9KdIXbno0eDYP5NPUuWv0aA/I4Unr/7w==",
+          "requires": {
+            "@types/web-bluetooth": "^0.0.17",
+            "@vueuse/metadata": "10.2.1",
+            "@vueuse/shared": "10.2.1",
+            "vue-demi": ">=0.14.5"
+          },
+          "dependencies": {
+            "vue-demi": {
+              "version": "0.14.5",
+              "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.5.tgz",
+              "integrity": "sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==",
+              "requires": {}
+            }
+          }
+        },
+        "@vueuse/metadata": {
+          "version": "10.2.1",
+          "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.2.1.tgz",
+          "integrity": "sha512-3Gt68mY/i6bQvFqx7cuGBzrCCQu17OBaGWS5JdwISpMsHnMKKjC2FeB5OAfMcCQ0oINfADP3i9A4PPRo0peHdQ=="
+        },
+        "@vueuse/shared": {
+          "version": "10.2.1",
+          "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.2.1.tgz",
+          "integrity": "sha512-QWHq2bSuGptkcxx4f4M/fBYC3Y8d3M2UYyLsyzoPgEoVzJURQ0oJeWXu79OiLlBb8gTKkqe4mO85T/sf39mmiw==",
+          "requires": {
+            "vue-demi": ">=0.14.5"
+          },
+          "dependencies": {
+            "vue-demi": {
+              "version": "0.14.5",
+              "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.5.tgz",
+              "integrity": "sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==",
+              "requires": {}
+            }
+          }
+        }
+      }
+    },
     "@vue/compiler-core": {
       "version": "3.2.47",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.47.tgz",
@@ -16868,12 +17105,29 @@
         }
       }
     },
+    "d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="
+    },
     "d3-dispatch": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
-      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
-      "optional": true,
-      "peer": true
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg=="
+    },
+    "d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      }
+    },
+    "d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="
     },
     "d3-force": {
       "version": "3.0.0",
@@ -16887,6 +17141,14 @@
         "d3-timer": "1 - 3"
       }
     },
+    "d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "requires": {
+        "d3-color": "1 - 3"
+      }
+    },
     "d3-quadtree": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
@@ -16894,12 +17156,39 @@
       "optional": true,
       "peer": true
     },
+    "d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ=="
+    },
     "d3-timer": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
-      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
-      "optional": true,
-      "peer": true
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA=="
+    },
+    "d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "requires": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      }
+    },
+    "d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      }
     },
     "dashdash": {
       "version": "1.14.1",
diff --git a/caster-editor/package.json b/caster-editor/package.json
index 24c43689..a3629d61 100644
--- a/caster-editor/package.json
+++ b/caster-editor/package.json
@@ -28,6 +28,7 @@
     "@toast-ui/editor": "^3.2.2",
     "@urql/exchange-multipart-fetch": "^1.0.1",
     "@urql/vue": "^1.0.4",
+    "@vue-flow/core": "^1.21.2",
     "codemirror": "^6.0.1",
     "element-plus": "^2.3.5",
     "graphql": "^16.6.0",
diff --git a/caster-editor/src/components/Graph.vue b/caster-editor/src/components/Graph.vue
index 0d854e48..3cfa791a 100644
--- a/caster-editor/src/components/Graph.vue
+++ b/caster-editor/src/components/Graph.vue
@@ -363,6 +363,8 @@ const graphSettings = {
       :event-handlers="eventHandlers"
     />
 
+    <div class="flow-graph" />
+
     <div
       v-if="!showNodeEditor"
       class="stats"
@@ -403,7 +405,15 @@ const graphSettings = {
 .graph {
   position: relative;
   width: 100%;
-  height: calc(100vh - 64px);
+  height: calc(50vh - 64px);
+  background-color: yellow;
+}
+
+.flow-graph {
+  position: relative;
+  width: 100%;
+  height: calc(50vh);
+  background-color: light-grey;
 }
 
 .stats {

From 0929054cf3d15115419d531ebc00227f0b79ce02 Mon Sep 17 00:00:00 2001
From: Vinzenz Aubry <vinzenzaubry@gmail.com>
Date: Sun, 23 Jul 2023 08:55:23 +0200
Subject: [PATCH 02/51] added basic styling

---
 caster-editor/src/components/Graph.vue | 35 ++++++++++++++++++++++++--
 caster-editor/src/main.ts              |  4 +++
 2 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/caster-editor/src/components/Graph.vue b/caster-editor/src/components/Graph.vue
index 3cfa791a..033be590 100644
--- a/caster-editor/src/components/Graph.vue
+++ b/caster-editor/src/components/Graph.vue
@@ -19,6 +19,8 @@ import { VNetworkGraph } from "v-network-graph";
 import variables from "@/assets/scss/variables.module.scss";
 import DialogExitNode from "@/components/DialogExitNode.vue";
 
+import { VueFlow  } from '@vue-flow/core';
+
 const props = defineProps<{
   graph: GraphSubscription["graph"];
 }>();
@@ -347,6 +349,20 @@ const graphSettings = {
     },
   }),
 };
+
+// Flow
+const nodesF = ref([
+  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
+  { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
+  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
+  { id: '4', type: 'output', label: 'Node 4', position: { x: 400, y: 200 } },
+]);
+
+const edgesF = ref([
+  { id: 'e1-3', source: '1', target: '3', animated: true },
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+]);
+
 </script>
 
 <template>
@@ -363,8 +379,16 @@ const graphSettings = {
       :event-handlers="eventHandlers"
     />
 
-    <div class="flow-graph" />
-
+    <div class="flow-graph">
+      <VueFlow 
+        :default-zoom="1"
+        :max-zoom="1"
+        :min-zoom="1"
+        :nodes="nodesF"
+        :edges="edgesF"
+        :nodes-connectable="true"
+      />
+    </div>
     <div
       v-if="!showNodeEditor"
       class="stats"
@@ -402,6 +426,13 @@ const graphSettings = {
 <style lang="scss" scoped>
 @import "@/assets/scss/variables.module.scss";
 
+.flow-graph {
+  --vf-node-bg: white;
+  --vf-node-text: $black;
+  --vf-connection-path:  $black;
+  --vf-handle: $grey-dark;
+}
+
 .graph {
   position: relative;
   width: 100%;
diff --git a/caster-editor/src/main.ts b/caster-editor/src/main.ts
index 70610754..fe7c5145 100644
--- a/caster-editor/src/main.ts
+++ b/caster-editor/src/main.ts
@@ -20,6 +20,10 @@ import router from "@/router";
 import "./assets/scss/main.scss";
 import "v-network-graph/lib/style.css";
 
+import '@vue-flow/core/dist/style.css';
+/* this contains the default theme, these are optional styles */
+import '@vue-flow/core/dist/theme-default.css';
+
 const app = createApp(App);
 
 if (

From 4aa8523ed4b532adabe61429f436229a04299f44 Mon Sep 17 00:00:00 2001
From: Vinzenz Aubry <vinzenzaubry@gmail.com>
Date: Tue, 8 Aug 2023 00:09:39 +0200
Subject: [PATCH 03/51] basic display synchronisation is working

---
 caster-editor/src/components/Graph.vue | 65 +++++++++++++++++++-------
 caster-editor/src/main.ts              |  4 +-
 2 files changed, 50 insertions(+), 19 deletions(-)

diff --git a/caster-editor/src/components/Graph.vue b/caster-editor/src/components/Graph.vue
index 033be590..be3c8595 100644
--- a/caster-editor/src/components/Graph.vue
+++ b/caster-editor/src/components/Graph.vue
@@ -8,6 +8,8 @@ import type {
   Nodes as GraphNodes,
 } from "v-network-graph";
 
+import type { Node as GraphNodeF, Edge as GraphEdgeF } from "@vue-flow/core";
+
 import { ref, type Ref, watch, nextTick } from "vue";
 import { storeToRefs } from "pinia";
 import { gsap } from "gsap";
@@ -19,7 +21,7 @@ import { VNetworkGraph } from "v-network-graph";
 import variables from "@/assets/scss/variables.module.scss";
 import DialogExitNode from "@/components/DialogExitNode.vue";
 
-import { VueFlow  } from '@vue-flow/core';
+import { VueFlow } from "@vue-flow/core";
 
 const props = defineProps<{
   graph: GraphSubscription["graph"];
@@ -199,6 +201,23 @@ function nodes(): GraphNodes {
   return n;
 }
 
+function nodesF(): GraphNodeF[] {
+  const n: GraphNodeF[] = [];
+
+  props.graph.nodes.forEach((node) => {
+    const graphNode: GraphNodeF = {
+      label: node.name,
+      id: node.uuid,
+      position: {
+        x: node.positionX,
+        y: node.positionY,
+      },
+    };
+    n.push(graphNode);
+  });
+  return n;
+}
+
 function edges(): GraphEdges {
   const e: GraphEdges = {};
   props.graph.edges.forEach((edge) => {
@@ -211,6 +230,20 @@ function edges(): GraphEdges {
   return e;
 }
 
+function edgesF(): GraphEdgeF[] {
+  const e: GraphEdgeF[] = [];
+  props.graph.edges.forEach((edge) => {
+    const graphEdge: GraphEdgeF = {
+      id: edge.uuid,
+      source: edge.inNode.uuid,
+      target: edge.outNode.uuid,
+      animated: true,
+    };
+    e.push(graphEdge);
+  });
+  return e;
+}
+
 function layouts(): GraphNodes {
   const n: GraphNodes = {};
   props.graph.nodes.forEach((node) => {
@@ -351,18 +384,16 @@ const graphSettings = {
 };
 
 // Flow
-const nodesF = ref([
-  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
-  { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
-  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
-  { id: '4', type: 'output', label: 'Node 4', position: { x: 400, y: 200 } },
-]);
-
-const edgesF = ref([
-  { id: 'e1-3', source: '1', target: '3', animated: true },
-  { id: 'e1-2', source: '1', target: '2', animated: true },
-]);
-
+// const nodesF = ref([
+//   { id: '1', label: 'Start', position: { x: 250, y: 5 } },
+//   { id: '2', label: 'Node 1', position: { x: 100, y: 100 } },
+//   { id: '3', label: 'Node 2', position: { x: 400, y: 100 } },
+// ]);
+
+// const edgesF = ref([
+//   // { id: 'e1-3', source: '1', target: '2', animated: true },
+//   // { id: 'e1-2', source: '2', target: '3', animated: true },
+// ]);
 </script>
 
 <template>
@@ -380,12 +411,12 @@ const edgesF = ref([
     />
 
     <div class="flow-graph">
-      <VueFlow 
+      <VueFlow
         :default-zoom="1"
         :max-zoom="1"
         :min-zoom="1"
-        :nodes="nodesF"
-        :edges="edgesF"
+        :nodes="nodesF()"
+        :edges="edgesF()"
         :nodes-connectable="true"
       />
     </div>
@@ -429,7 +460,7 @@ const edgesF = ref([
 .flow-graph {
   --vf-node-bg: white;
   --vf-node-text: $black;
-  --vf-connection-path:  $black;
+  --vf-connection-path: $black;
   --vf-handle: $grey-dark;
 }
 
diff --git a/caster-editor/src/main.ts b/caster-editor/src/main.ts
index fe7c5145..189cfa9d 100644
--- a/caster-editor/src/main.ts
+++ b/caster-editor/src/main.ts
@@ -20,9 +20,9 @@ import router from "@/router";
 import "./assets/scss/main.scss";
 import "v-network-graph/lib/style.css";
 
-import '@vue-flow/core/dist/style.css';
+import "@vue-flow/core/dist/style.css";
 /* this contains the default theme, these are optional styles */
-import '@vue-flow/core/dist/theme-default.css';
+import "@vue-flow/core/dist/theme-default.css";
 
 const app = createApp(App);
 

From fd222cdc0853d44904578eec7c3b37abd48f2adb Mon Sep 17 00:00:00 2001
From: Vinzenz Aubry <vinzenzaubry@gmail.com>
Date: Tue, 8 Aug 2023 00:35:35 +0200
Subject: [PATCH 04/51] flow node drag syncs with props

---
 caster-editor/src/components/Graph.vue | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/caster-editor/src/components/Graph.vue b/caster-editor/src/components/Graph.vue
index be3c8595..0e5f01b6 100644
--- a/caster-editor/src/components/Graph.vue
+++ b/caster-editor/src/components/Graph.vue
@@ -8,7 +8,11 @@ import type {
   Nodes as GraphNodes,
 } from "v-network-graph";
 
-import type { Node as GraphNodeF, Edge as GraphEdgeF } from "@vue-flow/core";
+import type {
+  Node as GraphNodeF,
+  Edge as GraphEdgeF,
+  NodeDragEvent,
+} from "@vue-flow/core";
 
 import { ref, type Ref, watch, nextTick } from "vue";
 import { storeToRefs } from "pinia";
@@ -183,6 +187,23 @@ const eventHandlers: GraphEventHandlers = {
   },
 };
 
+const onNodeDragStop = (nodeDragEvent: NodeDragEvent) => {
+  const draggedNode = props.graph.nodes.find(
+    (x) => x.uuid === nodeDragEvent.node.id,
+  );
+
+  if (draggedNode === undefined) {
+    console.log(`Dragged unknown node ${nodeDragEvent.node.label}`);
+    return;
+  }
+
+  updateNodeMutation.executeMutation({
+    nodeUuid: draggedNode.uuid,
+    positionX: nodeDragEvent.node.computedPosition.x,
+    positionY: nodeDragEvent.node.computedPosition.y,
+  });
+};
+
 /*
   transforms the edges, nodes and layout from our StoryGraph model to
   v-network-graph model. Maybe this can be done in a nicer,
@@ -418,6 +439,7 @@ const graphSettings = {
         :nodes="nodesF()"
         :edges="edgesF()"
         :nodes-connectable="true"
+        @node-drag-stop="onNodeDragStop"
       />
     </div>
     <div

From d6375034cf47c2296d359bef9a61175a91e0229d Mon Sep 17 00:00:00 2001
From: Vinzenz Aubry <vinzenzaubry@gmail.com>
Date: Tue, 8 Aug 2023 01:25:52 +0200
Subject: [PATCH 05/51] added double click functionality

---
 caster-editor/src/components/DefaultNode.vue  | 126 ++++++++++++++++++
 .../src/components/FlowNodeDefault.vue        |  82 ++++++++++++
 caster-editor/src/components/Graph.vue        |  57 ++++++--
 3 files changed, 252 insertions(+), 13 deletions(-)
 create mode 100644 caster-editor/src/components/DefaultNode.vue
 create mode 100644 caster-editor/src/components/FlowNodeDefault.vue

diff --git a/caster-editor/src/components/DefaultNode.vue b/caster-editor/src/components/DefaultNode.vue
new file mode 100644
index 00000000..69bd9485
--- /dev/null
+++ b/caster-editor/src/components/DefaultNode.vue
@@ -0,0 +1,126 @@
+<script lang="ts" setup>
+import { Handle, Position } from "@vue-flow/core";
+import { computed } from "vue";
+
+interface DataInput {
+  name: {
+    type: String;
+    required: true;
+  };
+  uuid: {
+    type: String;
+    required: true;
+  };
+  scriptCells: {
+    type: Array;
+    required: true;
+  };
+}
+
+const props = defineProps({
+  //TODO: needs to be typed correctly
+  data: {
+    type: Object as PropType<DataInput>,
+    required: true,
+  },
+});
+
+const emit = defineEmits(["dblclick"]);
+
+function onDblClick() {
+  emit("dblclick", uuid);
+}
+
+// function onGradient() {
+//   emit('gradient');
+// }
+
+// const presets = {
+//   sumi: '#1C1C1C',
+//   gofun: '#FFFFFB',
+//   byakuroku: '#A8D8B9',
+//   mizu: '#81C7D4',
+//   asagi: '#33A6B8',
+//   ukon: '#EFBB24',
+//   mushikuri: '#D9CD90',
+//   hiwa: '#BEC23F',
+//   ichigo: '#B5495B',
+//   kurenai: '#CB1B45',
+//   syojyohi: '#E83015',
+//   konjyo: '#113285',
+//   fuji: '#8B81C3',
+//   ayame: '#6F3381',
+//   torinoko: '#DAC9A6',
+//   kurotsurubami: '#0B1013',
+//   ohni: '#F05E1C',
+//   kokikuchinashi: '#FB9966',
+//   beniukon: '#E98B2A',
+//   sakura: '#FEDFE1',
+//   toki: '#EEA9A9',
+// };
+
+// const colors = Object.keys(presets).map((color) => {
+//   return {
+//     name: color,
+//     value: presets[color],
+//   };
+// });
+
+// const sourceHandleStyleA = computed(() => ({ backgroundColor: props.data.color, filter: 'invert(100%)', top: '10px' }));
+
+// const sourceHandleStyleB = computed(() => ({
+//   backgroundColor: props.data.color,
+//   filter: 'invert(100%)',
+//   bottom: '10px',
+//   top: 'auto',
+// }));
+
+const sourceHandleStyleA = computed(() => ({
+  backgroundColor: "red",
+  top: "10px",
+  width: "10px",
+  height: "10px",
+}));
+
+// const sourceHandleStyleB = computed(() => ({
+//   backgroundColor: 'red', top: '10px', width: '10px', height: '10px',
+// }));
+</script>
+
+<template>
+  <div class="node default-node">
+    <p>{{ data.name }}</p>
+    <p>{{ data.uuid }}</p>
+
+    <button @click="onDblClick">
+      dblclick
+    </button>
+
+    <Handle
+      id="a"
+      type="source"
+      :position="Position.Bottom"
+      :style="sourceHandleStyleA"
+    />
+
+    <!-- <Handle
+      id="b"
+      type="source"
+      :position="Position.Right"
+      :style="sourceHandleStyleB"
+    /> -->
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "@/assets/scss/variables.module.scss";
+
+.node {
+  padding: 10px;
+  border-radius: 4px;
+  height: auto;
+  background-color: yellow;
+  width: 200px;
+  border: 1px solid black;
+}
+</style>
diff --git a/caster-editor/src/components/FlowNodeDefault.vue b/caster-editor/src/components/FlowNodeDefault.vue
new file mode 100644
index 00000000..f09a79cb
--- /dev/null
+++ b/caster-editor/src/components/FlowNodeDefault.vue
@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import { Handle, Position } from "@vue-flow/core";
+import { computed } from "vue";
+
+interface DataInput {
+  name: {
+    type: String;
+    required: true;
+  };
+  uuid: {
+    type: String;
+    required: true;
+  };
+  scriptCells: {
+    type: Array;
+    required: true;
+  };
+}
+
+const props = defineProps({
+  //TODO: needs to be typed correctly
+  data: {
+    type: Object as PropType<DataInput>,
+    required: true,
+  },
+});
+
+const emit = defineEmits(["dblclick"]);
+
+function onDblClick() {
+  // console.log(`dblclicked ${props.data.uuid}`);
+  emit("dblclick", props.data.uuid);
+}
+
+const sourceHandleStyleA = computed(() => ({
+  backgroundColor: "red",
+  width: "10px",
+  height: "10px",
+}));
+
+const sourceHandleStyleB = computed(() => ({
+  backgroundColor: "blue",
+  width: "10px",
+  height: "10px",
+}));
+</script>
+
+<template>
+  <div
+    class="node default-node"
+    @dblclick="onDblClick"
+  >
+    <p>{{ data.name }}</p>
+
+    <Handle
+      id="a"
+      type="target"
+      :position="Position.Top"
+      :style="sourceHandleStyleA"
+    />
+
+    <Handle
+      id="b"
+      type="source"
+      :position="Position.Bottom"
+      :style="sourceHandleStyleB"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "@/assets/scss/variables.module.scss";
+
+.node {
+  padding: 10px;
+  border-radius: 4px;
+  height: auto;
+  background-color: yellow;
+  width: 200px;
+  border: 1px solid black;
+}
+</style>
diff --git a/caster-editor/src/components/Graph.vue b/caster-editor/src/components/Graph.vue
index 0e5f01b6..1a8a6c47 100644
--- a/caster-editor/src/components/Graph.vue
+++ b/caster-editor/src/components/Graph.vue
@@ -13,6 +13,7 @@ import type {
   Edge as GraphEdgeF,
   NodeDragEvent,
 } from "@vue-flow/core";
+import DefaultNode from "@/components/FlowNodeDefault.vue";
 
 import { ref, type Ref, watch, nextTick } from "vue";
 import { storeToRefs } from "pinia";
@@ -204,6 +205,23 @@ const onNodeDragStop = (nodeDragEvent: NodeDragEvent) => {
   });
 };
 
+const onNodeDoubleClick = (uuid: string) => {
+  console.log(uuid);
+
+  nextNodeDoubleClicked.value = uuid;
+
+  if (showNodeEditor.value && newScriptCellUpdates.value.size > 0) {
+    showSwitchNodeDialog.value = true;
+    return;
+  }
+
+  lastNodeDoubleClicked.value = uuid;
+  selectedNodeUUIDs.value = [uuid];
+
+  showNodeEditor.value = true;
+  selectedNodeForEditorUuid.value = uuid;
+};
+
 /*
   transforms the edges, nodes and layout from our StoryGraph model to
   v-network-graph model. Maybe this can be done in a nicer,
@@ -222,12 +240,30 @@ function nodes(): GraphNodes {
   return n;
 }
 
+// Flow
+// const nodesF = ref([
+//   { id: '1', label: 'Start', position: { x: 250, y: 5 } },
+//   { id: '2', label: 'Node 1', position: { x: 100, y: 100 } },
+//   { id: '3', label: 'Node 2', position: { x: 400, y: 100 } },
+// ]);
+
+// const edgesF = ref([
+//   // { id: 'e1-3', source: '1', target: '2', animated: true },
+//   // { id: 'e1-2', source: '2', target: '3', animated: true },
+// ]);
+
 function nodesF(): GraphNodeF[] {
   const n: GraphNodeF[] = [];
 
   props.graph.nodes.forEach((node) => {
     const graphNode: GraphNodeF = {
       label: node.name,
+      type: "custom",
+      data: {
+        name: node.name,
+        uuid: node.uuid,
+        scriptCells: node.scriptCells,
+      },
       id: node.uuid,
       position: {
         x: node.positionX,
@@ -403,18 +439,6 @@ const graphSettings = {
     },
   }),
 };
-
-// Flow
-// const nodesF = ref([
-//   { id: '1', label: 'Start', position: { x: 250, y: 5 } },
-//   { id: '2', label: 'Node 1', position: { x: 100, y: 100 } },
-//   { id: '3', label: 'Node 2', position: { x: 400, y: 100 } },
-// ]);
-
-// const edgesF = ref([
-//   // { id: 'e1-3', source: '1', target: '2', animated: true },
-//   // { id: 'e1-2', source: '2', target: '3', animated: true },
-// ]);
 </script>
 
 <template>
@@ -440,7 +464,14 @@ const graphSettings = {
         :edges="edgesF()"
         :nodes-connectable="true"
         @node-drag-stop="onNodeDragStop"
-      />
+      >
+        <template #node-custom="{ data }">
+          <DefaultNode
+            :data="data"
+            @dblclick="onNodeDoubleClick"
+          />
+        </template>
+      </VueFlow>
     </div>
     <div
       v-if="!showNodeEditor"

From de5095a34cf91d438654ee2520c52ec27f07c0c1 Mon Sep 17 00:00:00 2001
From: Vinzenz Aubry <vinzenzaubry@gmail.com>
Date: Tue, 8 Aug 2023 01:42:26 +0200
Subject: [PATCH 06/51] node syncsadded connectionlinestyle

---
 caster-editor/src/components/Graph.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/caster-editor/src/components/Graph.vue b/caster-editor/src/components/Graph.vue
index 1a8a6c47..758f78e6 100644
--- a/caster-editor/src/components/Graph.vue
+++ b/caster-editor/src/components/Graph.vue
@@ -252,6 +252,8 @@ function nodes(): GraphNodes {
 //   // { id: 'e1-2', source: '2', target: '3', animated: true },
 // ]);
 
+const connectionLineStyle = { stroke: "#000" };
+
 function nodesF(): GraphNodeF[] {
   const n: GraphNodeF[] = [];
 
@@ -463,6 +465,7 @@ const graphSettings = {
         :nodes="nodesF()"
         :edges="edgesF()"
         :nodes-connectable="true"
+        :connection-line-style="connectionLineStyle"
         @node-drag-stop="onNodeDragStop"
       >
         <template #node-custom="{ data }">

From 9ffcc5faefb900106a31c21ade025f2cc4e530ee Mon Sep 17 00:00:00 2001
From: Vinzenz Aubry <vinzenzaubry@gmail.com>
Date: Tue, 15 Aug 2023 00:10:04 +0200
Subject: [PATCH 07/51] added selected styling of flow nodes

---
 caster-editor/src/assets/scss/_vueflow.scss   |  17 +++
 caster-editor/src/assets/scss/main.scss       |   1 +
 caster-editor/src/components/DefaultNode.vue  | 126 ------------------
 .../src/components/FlowNodeDefault.vue        |   3 +-
 4 files changed, 19 insertions(+), 128 deletions(-)
 create mode 100644 caster-editor/src/assets/scss/_vueflow.scss
 delete mode 100644 caster-editor/src/components/DefaultNode.vue

diff --git a/caster-editor/src/assets/scss/_vueflow.scss b/caster-editor/src/assets/scss/_vueflow.scss
new file mode 100644
index 00000000..61b2896e
--- /dev/null
+++ b/caster-editor/src/assets/scss/_vueflow.scss
@@ -0,0 +1,17 @@
+/* ============ Vue Flow ============ */
+
+.vue-flow__pane.draggable {
+  cursor: move !important;
+}
+
+.vue-flow__node {
+  .node {
+    background-color: $grey-medium;
+  }
+
+  &.selected {
+    .node {
+      background-color: $green-light;
+    }
+  }
+}
diff --git a/caster-editor/src/assets/scss/main.scss b/caster-editor/src/assets/scss/main.scss
index 4eb9589c..4722f3b4 100644
--- a/caster-editor/src/assets/scss/main.scss
+++ b/caster-editor/src/assets/scss/main.scss
@@ -5,4 +5,5 @@
 @import "typography";
 @import "general";
 @import "elementplus";
+@import "vueflow";
 @import "interface"; // besides element plus
diff --git a/caster-editor/src/components/DefaultNode.vue b/caster-editor/src/components/DefaultNode.vue
deleted file mode 100644
index 69bd9485..00000000
--- a/caster-editor/src/components/DefaultNode.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<script lang="ts" setup>
-import { Handle, Position } from "@vue-flow/core";
-import { computed } from "vue";
-
-interface DataInput {
-  name: {
-    type: String;
-    required: true;
-  };
-  uuid: {
-    type: String;
-    required: true;
-  };
-  scriptCells: {
-    type: Array;
-    required: true;
-  };
-}
-
-const props = defineProps({
-  //TODO: needs to be typed correctly
-  data: {
-    type: Object as PropType<DataInput>,
-    required: true,
-  },
-});
-
-const emit = defineEmits(["dblclick"]);
-
-function onDblClick() {
-  emit("dblclick", uuid);
-}
-
-// function onGradient() {
-//   emit('gradient');
-// }
-
-// const presets = {
-//   sumi: '#1C1C1C',
-//   gofun: '#FFFFFB',
-//   byakuroku: '#A8D8B9',
-//   mizu: '#81C7D4',
-//   asagi: '#33A6B8',
-//   ukon: '#EFBB24',
-//   mushikuri: '#D9CD90',
-//   hiwa: '#BEC23F',
-//   ichigo: '#B5495B',
-//   kurenai: '#CB1B45',
-//   syojyohi: '#E83015',
-//   konjyo: '#113285',
-//   fuji: '#8B81C3',
-//   ayame: '#6F3381',
-//   torinoko: '#DAC9A6',
-//   kurotsurubami: '#0B1013',
-//   ohni: '#F05E1C',
-//   kokikuchinashi: '#FB9966',
-//   beniukon: '#E98B2A',
-//   sakura: '#FEDFE1',
-//   toki: '#EEA9A9',
-// };
-
-// const colors = Object.keys(presets).map((color) => {
-//   return {
-//     name: color,
-//     value: presets[color],
-//   };
-// });
-
-// const sourceHandleStyleA = computed(() => ({ backgroundColor: props.data.color, filter: 'invert(100%)', top: '10px' }));
-
-// const sourceHandleStyleB = computed(() => ({
-//   backgroundColor: props.data.color,
-//   filter: 'invert(100%)',
-//   bottom: '10px',
-//   top: 'auto',
-// }));
-
-const sourceHandleStyleA = computed(() => ({
-  backgroundColor: "red",
-  top: "10px",
-  width: "10px",
-  height: "10px",
-}));
-
-// const sourceHandleStyleB = computed(() => ({
-//   backgroundColor: 'red', top: '10px', width: '10px', height: '10px',
-// }));
-</script>
-
-<template>
-  <div class="node default-node">
-    <p>{{ data.name }}</p>
-    <p>{{ data.uuid }}</p>
-
-    <button @click="onDblClick">
-      dblclick
-    </button>
-
-    <Handle
-      id="a"
-      type="source"
-      :position="Position.Bottom"
-      :style="sourceHandleStyleA"
-    />
-
-    <!-- <Handle
-      id="b"
-      type="source"
-      :position="Position.Right"
-      :style="sourceHandleStyleB"
-    /> -->
-  </div>
-</template>
-
-<style lang="scss" scoped>
-@import "@/assets/scss/variables.module.scss";
-
-.node {
-  padding: 10px;
-  border-radius: 4px;
-  height: auto;
-  background-color: yellow;
-  width: 200px;
-  border: 1px solid black;
-}
-</style>
diff --git a/caster-editor/src/components/FlowNodeDefault.vue b/caster-editor/src/components/FlowNodeDefault.vue
index f09a79cb..ee066d65 100644
--- a/caster-editor/src/components/FlowNodeDefault.vue
+++ b/caster-editor/src/components/FlowNodeDefault.vue
@@ -75,8 +75,7 @@ const sourceHandleStyleB = computed(() => ({
   padding: 10px;
   border-radius: 4px;
   height: auto;
-  background-color: yellow;
   width: 200px;
-  border: 1px solid black;
+  // border: 1px solid black;
 }
 </style>

From 123536e102542895b6583d552386ffa7c8912b3c Mon Sep 17 00:00:00 2001
From: Vinzenz Aubry <vinzenzaubry@gmail.com>
Date: Tue, 15 Aug 2023 01:09:53 +0200
Subject: [PATCH 08/51] set up selection of nodes

---
 caster-editor/src/components/Graph.vue       | 41 ++++++++++++++------
 caster-editor/src/components/MenuTabEdit.vue | 21 +++++-----
 2 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/caster-editor/src/components/Graph.vue b/caster-editor/src/components/Graph.vue
index 758f78e6..2f4870f6 100644
--- a/caster-editor/src/components/Graph.vue
+++ b/caster-editor/src/components/Graph.vue
@@ -26,7 +26,13 @@ import { VNetworkGraph } from "v-network-graph";
 import variables from "@/assets/scss/variables.module.scss";
 import DialogExitNode from "@/components/DialogExitNode.vue";
 
-import { VueFlow } from "@vue-flow/core";
+import { VueFlow, useVueFlow } from "@vue-flow/core";
+
+const { getSelectedEdges, getSelectedNodes } = useVueFlow({});
+
+// watch(getNodes, (nodes) => console.log('nodes changed', nodes))
+watch(getSelectedNodes, (nodes) => onSelectionChangeNodes(nodes));
+watch(getSelectedEdges, (edges) => onSelectionChangeEdges(edges));
 
 const props = defineProps<{
   graph: GraphSubscription["graph"];
@@ -206,8 +212,6 @@ const onNodeDragStop = (nodeDragEvent: NodeDragEvent) => {
 };
 
 const onNodeDoubleClick = (uuid: string) => {
-  console.log(uuid);
-
   nextNodeDoubleClicked.value = uuid;
 
   if (showNodeEditor.value && newScriptCellUpdates.value.size > 0) {
@@ -222,6 +226,22 @@ const onNodeDoubleClick = (uuid: string) => {
   selectedNodeForEditorUuid.value = uuid;
 };
 
+const onSelectionChangeNodes = (nodes) => {
+  console.log("selection change");
+  selectedNodeUUIDs.value = [];
+  nodes.forEach((node) => {
+    selectedNodeUUIDs.value.push(node.id);
+  });
+};
+
+const onSelectionChangeEdges = (edges) => {
+  console.log("selection change");
+  selectedEdgeUUIDs.value = [];
+  edges.forEach((edge) => {
+    selectedEdgeUUIDs.value.push(edge.id);
+  });
+};
+
 /*
   transforms the edges, nodes and layout from our StoryGraph model to
   v-network-graph model. Maybe this can be done in a nicer,
@@ -447,8 +467,6 @@ const graphSettings = {
   <div>
     <VNetworkGraph
       ref="vNetworkGraph"
-      v-model:selected-nodes="selectedNodeUUIDs"
-      v-model:selected-edges="selectedEdgeUUIDs"
       class="graph"
       :nodes="nodes()"
       :edges="edges()"
@@ -518,20 +536,19 @@ const graphSettings = {
   --vf-node-text: $black;
   --vf-connection-path: $black;
   --vf-handle: $grey-dark;
-}
 
-.graph {
   position: relative;
   width: 100%;
-  height: calc(50vh - 64px);
-  background-color: yellow;
+  height: calc(50vh);
+  // height: calc(100vh - 64px);
+  background-color: light-grey;
 }
 
-.flow-graph {
+.graph {
   position: relative;
   width: 100%;
-  height: calc(50vh);
-  background-color: light-grey;
+  height: calc(50vh - 64px);
+  background-color: yellow;
 }
 
 .stats {
diff --git a/caster-editor/src/components/MenuTabEdit.vue b/caster-editor/src/components/MenuTabEdit.vue
index 4015adfa..14cd1b4a 100644
--- a/caster-editor/src/components/MenuTabEdit.vue
+++ b/caster-editor/src/components/MenuTabEdit.vue
@@ -55,16 +55,9 @@ const deleteNodeMutation = useDeleteNodeMutation();
 const deleteEdgeMutation = useDeleteEdgeMutation();
 
 const removeSelection = async () => {
-  selectedNodeUUIDs.value.forEach(async (nodeUuid) => {
-    const { error } = await deleteNodeMutation.executeMutation({
-      nodeUuid,
-    });
-    if (error) {
-      ElMessage.error(`Could not delete node ${nodeUuid}: ${error.message}`);
-    }
-    ElMessage.info(`Deleted node ${nodeUuid}`);
-  });
+  console.log("Removing selection");
 
+  // deleting edges first
   selectedEdgeUUIDs.value.forEach(async (edgeUuid) => {
     const { error } = await deleteEdgeMutation.executeMutation({
       edgeUuid,
@@ -74,6 +67,16 @@ const removeSelection = async () => {
     }
     ElMessage.info(`Deleted edge ${edgeUuid}`);
   });
+
+  selectedNodeUUIDs.value.forEach(async (nodeUuid) => {
+    const { error } = await deleteNodeMutation.executeMutation({
+      nodeUuid,
+    });
+    if (error) {
+      ElMessage.error(`Could not delete node ${nodeUuid}: ${error.message}`);
+    }
+    ElMessage.info(`Deleted node ${nodeUuid}`);
+  });
 };
 
 const createEdgeMutation = useCreateEdgeMutation();

From 1962fac2e80df5e042f40046428091b1b2511912 Mon Sep 17 00:00:00 2001
From: Vinzenz Aubry <vinzenzaubry@gmail.com>
Date: Wed, 16 Aug 2023 08:33:26 +0200
Subject: [PATCH 09/51] removed "add edges" menu

---
 caster-editor/src/components/MenuTabEdit.vue | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/caster-editor/src/components/MenuTabEdit.vue b/caster-editor/src/components/MenuTabEdit.vue
index 14cd1b4a..00dc2c0f 100644
--- a/caster-editor/src/components/MenuTabEdit.vue
+++ b/caster-editor/src/components/MenuTabEdit.vue
@@ -6,12 +6,6 @@
     >
       Add Scene
     </button>
-    <button
-      class="unstyled"
-      @click="createEdge()"
-    >
-      Add Connection
-    </button>
     <button
       class="unstyled"
       @click="removeSelection()"

From accb4def8e84b5631aa9c0308823bf951a095579 Mon Sep 17 00:00:00 2001
From: Vinzenz Aubry <vinzenzaubry@gmail.com>
Date: Wed, 16 Aug 2023 08:33:48 +0200
Subject: [PATCH 10/51] Rename menu

---
 caster-editor/src/components/MenuTabEdit.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/caster-editor/src/components/MenuTabEdit.vue b/caster-editor/src/components/MenuTabEdit.vue
index 00dc2c0f..d16e0f9a 100644
--- a/caster-editor/src/components/MenuTabEdit.vue
+++ b/caster-editor/src/components/MenuTabEdit.vue
@@ -10,7 +10,7 @@
       class="unstyled"
       @click="removeSelection()"
     >
-      Remove
+      Remove Selected
     </button>
     <DialogAddNode
       v-if="showAddNodeDialog"

From c6e94f107f5e4224039fc053cbbc6572a0c97b1c Mon Sep 17 00:00:00 2001
From: Vinzenz Aubry <vinzenzaubry@gmail.com>
Date: Wed, 16 Aug 2023 09:21:45 +0200
Subject: [PATCH 11/51] added edge connection

---
 .../src/components/FlowNodeDefault.vue        | 24 ++++++++++++--
 caster-editor/src/components/Graph.vue        | 33 +++++++++++++++++--
 2 files changed, 52 insertions(+), 5 deletions(-)

diff --git a/caster-editor/src/components/FlowNodeDefault.vue b/caster-editor/src/components/FlowNodeDefault.vue
index ee066d65..9b8d1d1f 100644
--- a/caster-editor/src/components/FlowNodeDefault.vue
+++ b/caster-editor/src/components/FlowNodeDefault.vue
@@ -43,6 +43,12 @@ const sourceHandleStyleB = computed(() => ({
   width: "10px",
   height: "10px",
 }));
+
+const isValidConnection = (connection: any) => {
+  // console.log(connection.targetHandle === "a");
+  // return connection.targetHandle === "a";
+  return true;
+};
 </script>
 
 <template>
@@ -55,15 +61,16 @@ const sourceHandleStyleB = computed(() => ({
     <Handle
       id="a"
       type="target"
-      :position="Position.Top"
+      :position="Position.Left"
       :style="sourceHandleStyleA"
     />
 
     <Handle
       id="b"
       type="source"
-      :position="Position.Bottom"
+      :position="Position.Right"
       :style="sourceHandleStyleB"
+      :is-valid-connection="isValidConnection"
     />
   </div>
 </template>
@@ -75,7 +82,18 @@ const sourceHandleStyleB = computed(() => ({
   padding: 10px;
   border-radius: 4px;
   height: auto;
-  width: 200px;
+  width: 160px;
   // border: 1px solid black;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  min-height: 50px;
+
+  p {
+    text-align: center;
+    height: 100%;
+    margin: 0;
+  }
 }
 </style>
diff --git a/caster-editor/src/components/Graph.vue b/caster-editor/src/components/Graph.vue
index 2f4870f6..478ee5c7 100644
--- a/caster-editor/src/components/Graph.vue
+++ b/caster-editor/src/components/Graph.vue
@@ -14,12 +14,12 @@ import type {
   NodeDragEvent,
 } from "@vue-flow/core";
 import DefaultNode from "@/components/FlowNodeDefault.vue";
-
+import { ElMessage } from "element-plus";
 import { ref, type Ref, watch, nextTick } from "vue";
 import { storeToRefs } from "pinia";
 import { gsap } from "gsap";
 import type { GraphSubscription, Scalars } from "@/graphql";
-import { useUpdateNodeMutation } from "@/graphql";
+import { useUpdateNodeMutation, useCreateEdgeMutation } from "@/graphql";
 import { useInterfaceStore } from "@/stores/InterfaceStore";
 import * as vNG from "v-network-graph";
 import { VNetworkGraph } from "v-network-graph";
@@ -461,6 +461,34 @@ const graphSettings = {
     },
   }),
 };
+
+const createEdgeMutation = useCreateEdgeMutation();
+const createEdge = (GraphEdge) => {
+  // if (selectedNodeUUIDs.value.length !== 2) {
+  //   ElMessage.info("Creating a connection requires exactly 2 selected scenes.");
+  //   return;
+  // }
+
+  console.log("create edge");
+  console.log(GraphEdge);
+};
+
+// this runs if mouse is released on connection
+const onConnect = async (connection) => {
+  // console.log(connection);
+
+  const nodeOutUuid = connection.target;
+  const nodeInUuid = connection.source;
+
+  const { error } = await createEdgeMutation.executeMutation({
+    nodeInUuid,
+    nodeOutUuid,
+  });
+  if (error) {
+    ElMessage.error(`Could not create edge: ${error.message}`);
+  }
+  ElMessage.success(`Created new edge`);
+};
 </script>
 
 <template>
@@ -485,6 +513,7 @@ const graphSettings = {
         :nodes-connectable="true"
         :connection-line-style="connectionLineStyle"
         @node-drag-stop="onNodeDragStop"
+        @connect="onConnect"
       >
         <template #node-custom="{ data }">
           <DefaultNode

From 9181748f5c0911bd9347c51469375201409139ca Mon Sep 17 00:00:00 2001
From: Vinzenz Aubry <vinzenzaubry@gmail.com>
Date: Wed, 16 Aug 2023 12:43:13 +0200
Subject: [PATCH 12/51] added animations for editor opening

---
 caster-editor/src/components/Graph.vue     | 124 ++++++++++++++++++---
 caster-editor/src/stores/InterfaceStore.ts |   5 +
 2 files changed, 111 insertions(+), 18 deletions(-)

diff --git a/caster-editor/src/components/Graph.vue b/caster-editor/src/components/Graph.vue
index 478ee5c7..40dfd85d 100644
--- a/caster-editor/src/components/Graph.vue
+++ b/caster-editor/src/components/Graph.vue
@@ -8,11 +8,6 @@ import type {
   Nodes as GraphNodes,
 } from "v-network-graph";
 
-import type {
-  Node as GraphNodeF,
-  Edge as GraphEdgeF,
-  NodeDragEvent,
-} from "@vue-flow/core";
 import DefaultNode from "@/components/FlowNodeDefault.vue";
 import { ElMessage } from "element-plus";
 import { ref, type Ref, watch, nextTick } from "vue";
@@ -26,9 +21,15 @@ import { VNetworkGraph } from "v-network-graph";
 import variables from "@/assets/scss/variables.module.scss";
 import DialogExitNode from "@/components/DialogExitNode.vue";
 
+import type {
+  Node as GraphNodeF,
+  Edge as GraphEdgeF,
+  NodeDragEvent,
+} from "@vue-flow/core";
 import { VueFlow, useVueFlow } from "@vue-flow/core";
 
-const { getSelectedEdges, getSelectedNodes } = useVueFlow({});
+const { getSelectedEdges, getSelectedNodes, getTransform, viewport } =
+  useVueFlow({});
 
 // watch(getNodes, (nodes) => console.log('nodes changed', nodes))
 watch(getSelectedNodes, (nodes) => onSelectionChangeNodes(nodes));
@@ -46,16 +47,21 @@ const {
   selectedEdgeUUIDs,
   newScriptCellUpdates,
   selectedNodeForEditorUuid,
+  vueFlowRef,
 } = storeToRefs(interfaceStore);
 
 watch(showNodeEditor, (visible) => {
   if (visible) {
-    graphPan(graphPanType.NodeEditor, lastNodeClick.value);
+    // graphPan(graphPanType.NodeEditor, lastNodeClick.value);
+    // flowPan(graphPanType.NodeEditor);
   } else {
-    graphPan(graphPanType.Center, lastNodeClick.value);
+    // graphPan(graphPanType.Center, lastNodeClick.value);
+    flowPan(graphPanType.Center);
   }
 });
 
+const lastPosition = ref<{ x: number; y: number }>({ x: 0, y: 0 });
+
 const lastNodeClick = ref<MouseEvent>();
 const lastPanMove = ref({ x: 0, y: 0 });
 enum graphPanType {
@@ -136,6 +142,94 @@ const graphPan = (location: graphPanType, event?: MouseEvent) => {
   });
 };
 
+const flowPan = (location: graphPanType) => {
+  if (!vueFlowRef.value) return;
+
+  const currentTransform = vueFlowRef.value.getTransform();
+  lastPosition.value.x = currentTransform.x;
+  lastPosition.value.y = currentTransform.y;
+
+  // get canvas size
+  console.log(vueFlowRef.value.dimensions);
+  const { height: gHeight, width: gWidth } = vueFlowRef.value.dimensions;
+
+  // screen aim
+  let aimPos: { x: number; y: number };
+  let moveBy: { x: number; y: number };
+
+  // node
+  const node = vueFlowRef.value.findNode(selectedNodeForEditorUuid.value);
+  const nodePosition = node?.position || { x: 0, y: 0 };
+  const nodeDimensions = node?.dimensions || { width: 0, height: 0 };
+
+  switch (location) {
+    case graphPanType.NodeEditor:
+      const editorWidth = 800; // this needs to be hard coded for transition purposes
+
+      aimPos = {
+        x: (gWidth - editorWidth) / 2,
+        y: (gHeight / 2) * 0.9, // 0.9 to visually center vertical
+      };
+
+      moveBy = {
+        x:
+          aimPos.x -
+          nodePosition.x -
+          nodeDimensions.width / 2 -
+          currentTransform.x,
+        y:
+          aimPos.y -
+          nodePosition.y -
+          nodeDimensions.height / 2 -
+          currentTransform.y,
+      };
+
+      lastPanMove.value = moveBy;
+
+      // console.log('starting position');
+      // console.log(vueFlowRef.value.getTransform());
+      // console.log('node Position');
+      // console.log(nodePosition);
+      // console.log('moveby');
+      // console.log(moveBy);
+      break;
+    case graphPanType.Center:
+      moveBy = {
+        x: -lastPanMove.value.x,
+        y: -lastPanMove.value.y,
+      };
+      break;
+  }
+
+  const progress = {
+    absolute: 0,
+  };
+
+  let prevProgress = 0;
+  // const { height: gHeight, width: gWidth } = vueFlowRef.value.getSizes();
+
+  const moveGraph = () => {
+    const delta = progress.absolute - prevProgress;
+    const shift = {
+      x: moveBy.x * delta,
+      y: moveBy.y * delta,
+    };
+
+    vueFlowRef.value?.panBy(shift);
+    prevProgress = progress.absolute;
+  };
+
+  // animate
+  gsap.to(progress, {
+    absolute: 1,
+    duration: 0.3,
+    ease: "power3.inOut",
+    onUpdate: () => {
+      moveGraph();
+    },
+  });
+};
+
 const panToFirstNode = async () => {
   const nodes = props.graph.nodes;
   const firstNode = nodes.find((x) => x.name == "Start") || nodes[0];
@@ -222,8 +316,10 @@ const onNodeDoubleClick = (uuid: string) => {
   lastNodeDoubleClicked.value = uuid;
   selectedNodeUUIDs.value = [uuid];
 
-  showNodeEditor.value = true;
   selectedNodeForEditorUuid.value = uuid;
+  showNodeEditor.value = true;
+
+  flowPan(graphPanType.NodeEditor);
 };
 
 const onSelectionChangeNodes = (nodes) => {
@@ -463,15 +559,6 @@ const graphSettings = {
 };
 
 const createEdgeMutation = useCreateEdgeMutation();
-const createEdge = (GraphEdge) => {
-  // if (selectedNodeUUIDs.value.length !== 2) {
-  //   ElMessage.info("Creating a connection requires exactly 2 selected scenes.");
-  //   return;
-  // }
-
-  console.log("create edge");
-  console.log(GraphEdge);
-};
 
 // this runs if mouse is released on connection
 const onConnect = async (connection) => {
@@ -505,6 +592,7 @@ const onConnect = async (connection) => {
 
     <div class="flow-graph">
       <VueFlow
+        ref="vueFlowRef"
         :default-zoom="1"
         :max-zoom="1"
         :min-zoom="1"
diff --git a/caster-editor/src/stores/InterfaceStore.ts b/caster-editor/src/stores/InterfaceStore.ts
index a4aaa92f..5b6401eb 100644
--- a/caster-editor/src/stores/InterfaceStore.ts
+++ b/caster-editor/src/stores/InterfaceStore.ts
@@ -7,6 +7,7 @@ import {
   useUpdateScriptCellsMutation,
 } from "@/graphql";
 import type { Instance as GraphInstance } from "v-network-graph";
+import type { VueFlowStore as GraphInstanceFlow } from "@vue-flow/core";
 import { ElMessage } from "element-plus";
 
 export enum Tab {
@@ -17,6 +18,7 @@ export enum Tab {
 // some hack to avoid
 // https://github.com/microsoft/TypeScript/issues/5711
 interface CustomGraph extends GraphInstance {}
+interface CustomGraphFlow extends GraphInstanceFlow {}
 
 export const useInterfaceStore = defineStore("interface", () => {
   const showNodeEditor: Ref<boolean> = ref(false);
@@ -27,6 +29,8 @@ export const useInterfaceStore = defineStore("interface", () => {
 
   const vNetworkGraph: Ref<CustomGraph | undefined> = ref(undefined);
 
+  const vueFlowRef: Ref<CustomGraphFlow | undefined> = ref(undefined);
+
   const tab: Ref<Tab> = ref(Tab.Edit);
 
   // this acts as a clutch between our local changes and the
@@ -69,6 +73,7 @@ export const useInterfaceStore = defineStore("interface", () => {
     selectedEdgeUUIDs,
     tab,
     vNetworkGraph,
+    vueFlowRef,
     cachedNodeData,
     waitForScriptCellsUpdate,
     newScriptCellUpdates,

From 93e9e58155313ac934f8998c83b9b602d28b03c5 Mon Sep 17 00:00:00 2001
From: Vinzenz Aubry <vinzenzaubry@gmail.com>
Date: Wed, 16 Aug 2023 12:48:14 +0200
Subject: [PATCH 13/51] removed vnetwork graph

---
 caster-editor/src/components/Graph.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/caster-editor/src/components/Graph.vue b/caster-editor/src/components/Graph.vue
index 40dfd85d..e8d7ad7f 100644
--- a/caster-editor/src/components/Graph.vue
+++ b/caster-editor/src/components/Graph.vue
@@ -580,7 +580,7 @@ const onConnect = async (connection) => {
 
 <template>
   <div>
-    <VNetworkGraph
+    <!-- <VNetworkGraph
       ref="vNetworkGraph"
       class="graph"
       :nodes="nodes()"
@@ -588,7 +588,7 @@ const onConnect = async (connection) => {
       :configs="graphSettings.standard"
       :layouts="layouts()"
       :event-handlers="eventHandlers"
-    />
+    /> -->
 
     <div class="flow-graph">
       <VueFlow
@@ -656,8 +656,8 @@ const onConnect = async (connection) => {
 
   position: relative;
   width: 100%;
-  height: calc(50vh);
-  // height: calc(100vh - 64px);
+  // height: calc(50vh);
+  height: calc(100vh - 64px);
   background-color: light-grey;
 }
 

From e3de19bf4c62ec858b26c0175e86bd1c6c546ae8 Mon Sep 17 00:00:00 2001
From: Vinzenz Aubry <vinzenzaubry@gmail.com>
Date: Sat, 19 Aug 2023 03:00:31 +0200
Subject: [PATCH 14/51] disable delete key

---
 caster-editor/src/components/Graph.vue | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/caster-editor/src/components/Graph.vue b/caster-editor/src/components/Graph.vue
index e8d7ad7f..7f8e8b6b 100644
--- a/caster-editor/src/components/Graph.vue
+++ b/caster-editor/src/components/Graph.vue
@@ -580,16 +580,6 @@ const onConnect = async (connection) => {
 
 <template>
   <div>
-    <!-- <VNetworkGraph
-      ref="vNetworkGraph"
-      class="graph"
-      :nodes="nodes()"
-      :edges="edges()"
-      :configs="graphSettings.standard"
-      :layouts="layouts()"
-      :event-handlers="eventHandlers"
-    /> -->
-
     <div class="flow-graph">
       <VueFlow
         ref="vueFlowRef"
@@ -600,6 +590,7 @@ const onConnect = async (connection) => {
         :edges="edgesF()"
         :nodes-connectable="true"
         :connection-line-style="connectionLineStyle"
+        :delete-key-code="'null'"
         @node-drag-stop="onNodeDragStop"
         @connect="onConnect"
       >

From 8c1a815209bb785ac5be2c8a909f0e9106847ea5 Mon Sep 17 00:00:00 2001
From: Vinzenz Aubry <vinzenzaubry@gmail.com>
Date: Sat, 19 Aug 2023 03:21:33 +0200
Subject: [PATCH 15/51] Removed vnetworggraph + adding pos new node

---
 caster-editor/package-lock.json               |  94 -----
 caster-editor/package.json                    |   1 -
 .../src/assets/scss/variables.module.scss     |   4 +
 .../src/components/DialogAddNode.vue          |  82 +++--
 .../src/components/FlowNodeDefault.vue        |   2 +-
 caster-editor/src/components/Graph.vue        | 343 +-----------------
 caster-editor/src/main.ts                     |   4 -
 caster-editor/src/stores/InterfaceStore.ts    |   5 -
 8 files changed, 52 insertions(+), 483 deletions(-)

diff --git a/caster-editor/package-lock.json b/caster-editor/package-lock.json
index d17c21fe..c6cd754c 100644
--- a/caster-editor/package-lock.json
+++ b/caster-editor/package-lock.json
@@ -23,7 +23,6 @@
         "gsap": "^3.11.4",
         "pinia": "^2.0.33",
         "subscriptions-transport-ws": "^0.11.0",
-        "v-network-graph": "^0.9.3",
         "vue": "^3.2.45",
         "vue-codemirror": "^6.1.1",
         "vue-router": "^4.1.6",
@@ -1350,11 +1349,6 @@
         "ms": "^2.1.1"
       }
     },
-    "node_modules/@dash14/svg-pan-zoom": {
-      "version": "3.6.9",
-      "resolved": "https://registry.npmjs.org/@dash14/svg-pan-zoom/-/svg-pan-zoom-3.6.9.tgz",
-      "integrity": "sha512-6u+KTQec+9+3bRdk2mReix8AGsp2mB40cw0iYfQQzo22QBkeCNpXl2amnfwQzK7xB9oH/62Wvf2z7l6l2w+csA=="
-    },
     "node_modules/@element-plus/icons-vue": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.1.0.tgz",
@@ -5754,21 +5748,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/d3-force": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
-      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "d3-dispatch": "1 - 3",
-        "d3-quadtree": "1 - 3",
-        "d3-timer": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/d3-interpolate": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
@@ -5780,16 +5759,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/d3-quadtree": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
-      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/d3-selection": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
@@ -9195,11 +9164,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/mitt": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.0.tgz",
-      "integrity": "sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ=="
-    },
     "node_modules/mlly": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.2.0.tgz",
@@ -11879,25 +11843,6 @@
         "uuid": "dist/bin/uuid"
       }
     },
-    "node_modules/v-network-graph": {
-      "version": "0.9.3",
-      "resolved": "https://registry.npmjs.org/v-network-graph/-/v-network-graph-0.9.3.tgz",
-      "integrity": "sha512-po6IyJ7VBNSsXa6EV+oyjuktZnQM+pCSLR/DAcMkZjJ9c2oNLi0G6Et9RjK/mCO/4r3mnk8u1Z/XmjkRPLbT5w==",
-      "dependencies": {
-        "@dash14/svg-pan-zoom": "^3.6.9",
-        "lodash-es": "^4.17.21",
-        "mitt": "^3.0.0"
-      },
-      "peerDependencies": {
-        "d3-force": "^3.0.0",
-        "vue": "^3.2.45"
-      },
-      "peerDependenciesMeta": {
-        "d3-force": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/v8-compile-cache-lib": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
@@ -13799,11 +13744,6 @@
         }
       }
     },
-    "@dash14/svg-pan-zoom": {
-      "version": "3.6.9",
-      "resolved": "https://registry.npmjs.org/@dash14/svg-pan-zoom/-/svg-pan-zoom-3.6.9.tgz",
-      "integrity": "sha512-6u+KTQec+9+3bRdk2mReix8AGsp2mB40cw0iYfQQzo22QBkeCNpXl2amnfwQzK7xB9oH/62Wvf2z7l6l2w+csA=="
-    },
     "@element-plus/icons-vue": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.1.0.tgz",
@@ -17129,18 +17069,6 @@
       "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
       "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="
     },
-    "d3-force": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
-      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "d3-dispatch": "1 - 3",
-        "d3-quadtree": "1 - 3",
-        "d3-timer": "1 - 3"
-      }
-    },
     "d3-interpolate": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
@@ -17149,13 +17077,6 @@
         "d3-color": "1 - 3"
       }
     },
-    "d3-quadtree": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
-      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
-      "optional": true,
-      "peer": true
-    },
     "d3-selection": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
@@ -19703,11 +19624,6 @@
       "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==",
       "dev": true
     },
-    "mitt": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.0.tgz",
-      "integrity": "sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ=="
-    },
     "mlly": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.2.0.tgz",
@@ -21691,16 +21607,6 @@
       "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
       "dev": true
     },
-    "v-network-graph": {
-      "version": "0.9.3",
-      "resolved": "https://registry.npmjs.org/v-network-graph/-/v-network-graph-0.9.3.tgz",
-      "integrity": "sha512-po6IyJ7VBNSsXa6EV+oyjuktZnQM+pCSLR/DAcMkZjJ9c2oNLi0G6Et9RjK/mCO/4r3mnk8u1Z/XmjkRPLbT5w==",
-      "requires": {
-        "@dash14/svg-pan-zoom": "^3.6.9",
-        "lodash-es": "^4.17.21",
-        "mitt": "^3.0.0"
-      }
-    },
     "v8-compile-cache-lib": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
diff --git a/caster-editor/package.json b/caster-editor/package.json
index a3629d61..8d10224a 100644
--- a/caster-editor/package.json
+++ b/caster-editor/package.json
@@ -35,7 +35,6 @@
     "gsap": "^3.11.4",
     "pinia": "^2.0.33",
     "subscriptions-transport-ws": "^0.11.0",
-    "v-network-graph": "^0.9.3",
     "vue": "^3.2.45",
     "vue-codemirror": "^6.1.1",
     "vue-router": "^4.1.6",
diff --git a/caster-editor/src/assets/scss/variables.module.scss b/caster-editor/src/assets/scss/variables.module.scss
index 117815a5..5c6cd36f 100644
--- a/caster-editor/src/assets/scss/variables.module.scss
+++ b/caster-editor/src/assets/scss/variables.module.scss
@@ -45,6 +45,9 @@ $buttonScale: 1.1;
 // menu
 $menuHeight: 32px;
 
+// node
+$nodeDefaultWidth: 160px;
+
 // old
 $bodyBackground: white;
 $mainWhite: white;
@@ -64,4 +67,5 @@ $hoverColor: lightgrey;
   alertRed: $alertRed;
   white: $white;
   white08: $white08;
+  nodeDefaultWidth: $nodeDefaultWidth;
 }
diff --git a/caster-editor/src/components/DialogAddNode.vue b/caster-editor/src/components/DialogAddNode.vue
index 84b84a1a..69f06144 100644
--- a/caster-editor/src/components/DialogAddNode.vue
+++ b/caster-editor/src/components/DialogAddNode.vue
@@ -1,40 +1,10 @@
-<template>
-  <div>
-    <ElDialog
-      v-model="showDialog"
-      title="Create new node"
-      :show-close="true"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      :append-to-body="true"
-    >
-      <ElInput
-        id="graphNameInput"
-        v-model="newNodeName"
-        placeholder="New node name"
-      />
-      <template #footer>
-        <span class="dialog-footer">
-          <ElButton @click="() => emit('closed')">Cancel</ElButton>
-          <ElButton
-            type="primary"
-            :disabled="!hasName"
-            @click="createNode()"
-          >
-            Create
-          </ElButton>
-        </span>
-      </template>
-    </ElDialog>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { useCreateNodeMutation } from "@/graphql";
 import { useInterfaceStore } from "@/stores/InterfaceStore";
 import { ElMessage, ElDialog } from "element-plus";
 import { storeToRefs } from "pinia";
 import { computed, ref, type Ref } from "vue";
+import variables from "@/assets/scss/variables.module.scss";
 
 const props = defineProps<{
   graphUuid: string;
@@ -44,7 +14,7 @@ const emit = defineEmits<{
   (e: "closed"): void;
 }>();
 
-const { vNetworkGraph } = storeToRefs(useInterfaceStore());
+const { vueFlowRef } = storeToRefs(useInterfaceStore());
 
 const newNodeName: Ref<string> = ref("");
 
@@ -57,14 +27,15 @@ const createNodeMutation = useCreateNodeMutation();
 const createNode = async () => {
   let positionX = 0;
   let positionY = 0;
-  if (vNetworkGraph.value) {
-    const { height, width } = vNetworkGraph.value.getSizes();
-    const pos = vNetworkGraph.value.translateFromDomToSvgCoordinates({
-      x: width / 2,
-      y: height / 2,
-    });
-    positionX = pos.x;
-    positionY = pos.y;
+  if (vueFlowRef.value) {
+    const { height, width } = vueFlowRef.value.dimensions;
+    const currentTransform = vueFlowRef.value.getTransform();
+
+    console.log(height, width, currentTransform);
+
+    positionX =
+      width / 2 - currentTransform.x - parseInt(variables.nodeDefaultWidth) / 2;
+    positionY = (height / 2 - currentTransform.y) * 0.9;
   }
 
   console.log("Props are", props.graphUuid);
@@ -82,3 +53,34 @@ const createNode = async () => {
   emit("closed");
 };
 </script>
+
+<template>
+  <div>
+    <ElDialog
+      v-model="showDialog"
+      title="Create new node"
+      :show-close="true"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :append-to-body="true"
+    >
+      <ElInput
+        id="graphNameInput"
+        v-model="newNodeName"
+        placeholder="New node name"
+      />
+      <template #footer>
+        <span class="dialog-footer">
+          <ElButton @click="() => emit('closed')">Cancel</ElButton>
+          <ElButton
+            type="primary"
+            :disabled="!hasName"
+            @click="createNode()"
+          >
+            Create
+          </ElButton>
+        </span>
+      </template>
+    </ElDialog>
+  </div>
+</template>
diff --git a/caster-editor/src/components/FlowNodeDefault.vue b/caster-editor/src/components/FlowNodeDefault.vue
index 9b8d1d1f..a62b05b2 100644
--- a/caster-editor/src/components/FlowNodeDefault.vue
+++ b/caster-editor/src/components/FlowNodeDefault.vue
@@ -82,7 +82,7 @@ const isValidConnection = (connection: any) => {
   padding: 10px;
   border-radius: 4px;
   height: auto;
-  width: 160px;
+  width: $nodeDefaultWidth;
   // border: 1px solid black;
   display: flex;
   align-items: center;
diff --git a/caster-editor/src/components/Graph.vue b/caster-editor/src/components/Graph.vue
index 7f8e8b6b..4c498fd6 100644
--- a/caster-editor/src/components/Graph.vue
+++ b/caster-editor/src/components/Graph.vue
@@ -1,25 +1,15 @@
 <!-- eslint-disable vue/no-v-model-argument -->
 <script lang="ts" setup>
-import type {
-  EventHandlers as GraphEventHandlers,
-  Edge as GraphEdge,
-  Edges as GraphEdges,
-  Node as GraphNode,
-  Nodes as GraphNodes,
-} from "v-network-graph";
-
 import DefaultNode from "@/components/FlowNodeDefault.vue";
 import { ElMessage } from "element-plus";
-import { ref, type Ref, watch, nextTick } from "vue";
+import { ref, type Ref, watch } from "vue";
 import { storeToRefs } from "pinia";
 import { gsap } from "gsap";
 import type { GraphSubscription, Scalars } from "@/graphql";
 import { useUpdateNodeMutation, useCreateEdgeMutation } from "@/graphql";
 import { useInterfaceStore } from "@/stores/InterfaceStore";
-import * as vNG from "v-network-graph";
-import { VNetworkGraph } from "v-network-graph";
-import variables from "@/assets/scss/variables.module.scss";
 import DialogExitNode from "@/components/DialogExitNode.vue";
+// import variables from "@/assets/scss/variables.module.scss";
 
 import type {
   Node as GraphNodeF,
@@ -28,8 +18,7 @@ import type {
 } from "@vue-flow/core";
 import { VueFlow, useVueFlow } from "@vue-flow/core";
 
-const { getSelectedEdges, getSelectedNodes, getTransform, viewport } =
-  useVueFlow({});
+const { getSelectedEdges, getSelectedNodes } = useVueFlow({});
 
 // watch(getNodes, (nodes) => console.log('nodes changed', nodes))
 watch(getSelectedNodes, (nodes) => onSelectionChangeNodes(nodes));
@@ -42,7 +31,6 @@ const props = defineProps<{
 const interfaceStore = useInterfaceStore();
 const {
   showNodeEditor,
-  vNetworkGraph,
   selectedNodeUUIDs,
   selectedEdgeUUIDs,
   newScriptCellUpdates,
@@ -62,86 +50,12 @@ watch(showNodeEditor, (visible) => {
 
 const lastPosition = ref<{ x: number; y: number }>({ x: 0, y: 0 });
 
-const lastNodeClick = ref<MouseEvent>();
 const lastPanMove = ref({ x: 0, y: 0 });
 enum graphPanType {
   NodeEditor = "NODE_EDITOR",
   Center = "CENTER",
 }
 
-const graphPan = (location: graphPanType, event?: MouseEvent) => {
-  if (!vNetworkGraph.value) return;
-
-  // get click position
-  const clickPos = {
-    x: event?.offsetX || 0,
-    y: event?.offsetY || 0,
-  };
-
-  // get canvas size
-  const { height: gHeight, width: gWidth } = vNetworkGraph.value.getSizes();
-
-  // screen aim
-  let aimPos: { x: number; y: number };
-  let moveBy: { x: number; y: number };
-
-  switch (location) {
-    case graphPanType.NodeEditor:
-      // const editorWidth = document.getElementsByClassName('node-editor')[0]?.clientWidth || 0;
-      const editorWidth = 800; // this needs to be hard coded for transition purposes
-      aimPos = {
-        x: (gWidth - editorWidth) / 2,
-        y: (gHeight / 2) * 0.9, // 0.9 to visually center vertical
-      };
-
-      moveBy = {
-        x: aimPos.x - clickPos.x,
-        y: aimPos.y - clickPos.y,
-      };
-
-      lastPanMove.value = moveBy;
-      break;
-    case graphPanType.Center:
-      aimPos = {
-        x: gWidth / 2,
-        y: (gHeight / 2) * 0.9, // 0.9 to visually center vertical
-      };
-
-      moveBy = {
-        x: -lastPanMove.value.x,
-        y: -lastPanMove.value.y,
-      };
-      break;
-  }
-
-  const progress = {
-    absolute: 0,
-  };
-
-  let prevProgress = 0;
-
-  const moveGraph = () => {
-    const delta = progress.absolute - prevProgress;
-    const shift = {
-      x: moveBy.x * delta,
-      y: moveBy.y * delta,
-    };
-
-    vNetworkGraph.value?.panBy(shift);
-    prevProgress = progress.absolute;
-  };
-
-  // animate
-  gsap.to(progress, {
-    absolute: 1,
-    duration: 0.3,
-    ease: "power3.inOut",
-    onUpdate: () => {
-      moveGraph();
-    },
-  });
-};
-
 const flowPan = (location: graphPanType) => {
   if (!vueFlowRef.value) return;
 
@@ -185,13 +99,6 @@ const flowPan = (location: graphPanType) => {
       };
 
       lastPanMove.value = moveBy;
-
-      // console.log('starting position');
-      // console.log(vueFlowRef.value.getTransform());
-      // console.log('node Position');
-      // console.log(nodePosition);
-      // console.log('moveby');
-      // console.log(moveBy);
       break;
     case graphPanType.Center:
       moveBy = {
@@ -206,7 +113,6 @@ const flowPan = (location: graphPanType) => {
   };
 
   let prevProgress = 0;
-  // const { height: gHeight, width: gWidth } = vueFlowRef.value.getSizes();
 
   const moveGraph = () => {
     const delta = progress.absolute - prevProgress;
@@ -230,64 +136,8 @@ const flowPan = (location: graphPanType) => {
   });
 };
 
-const panToFirstNode = async () => {
-  const nodes = props.graph.nodes;
-  const firstNode = nodes.find((x) => x.name == "Start") || nodes[0];
-  const viewBox = vNetworkGraph.value?.getViewBox() || {
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-  };
-
-  await nextTick();
-  vNetworkGraph.value?.panTo({
-    x: -firstNode.positionX + Math.abs(viewBox.left - viewBox.right) / 2,
-    y:
-      -firstNode.positionY + (Math.abs(viewBox.top - viewBox.bottom) / 2) * 0.9,
-  });
-};
-
 const updateNodeMutation = useUpdateNodeMutation();
 
-const eventHandlers: GraphEventHandlers = {
-  // see https://dash14.github.io/v-network-graph/reference/events.html#events-with-event-handlers
-  "view:load": () => {
-    panToFirstNode();
-  },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  "node:dblclick": async ({ node, event }) => {
-    nextNodeDoubleClicked.value = node;
-
-    if (showNodeEditor.value && newScriptCellUpdates.value.size > 0) {
-      showSwitchNodeDialog.value = true;
-      return;
-    }
-
-    lastNodeDoubleClicked.value = node;
-    selectedNodeUUIDs.value = [node];
-
-    showNodeEditor.value = true;
-    selectedNodeForEditorUuid.value = node;
-    lastNodeClick.value = event;
-  },
-  "node:dragend": (dragEvent: { [id: string]: { x: number; y: number } }) => {
-    for (const p in dragEvent) {
-      const draggedNode = props.graph.nodes.find((x) => x.uuid === p);
-      if (draggedNode === undefined) {
-        console.log(`Dragged unknown node ${p}`);
-        continue;
-      }
-
-      updateNodeMutation.executeMutation({
-        nodeUuid: draggedNode.uuid,
-        positionX: dragEvent[p].x,
-        positionY: dragEvent[p].y,
-      });
-    }
-  },
-};
-
 const onNodeDragStop = (nodeDragEvent: NodeDragEvent) => {
   const draggedNode = props.graph.nodes.find(
     (x) => x.uuid === nodeDragEvent.node.id,
@@ -323,7 +173,7 @@ const onNodeDoubleClick = (uuid: string) => {
 };
 
 const onSelectionChangeNodes = (nodes) => {
-  console.log("selection change");
+  console.log("nodes selection change");
   selectedNodeUUIDs.value = [];
   nodes.forEach((node) => {
     selectedNodeUUIDs.value.push(node.id);
@@ -331,43 +181,13 @@ const onSelectionChangeNodes = (nodes) => {
 };
 
 const onSelectionChangeEdges = (edges) => {
-  console.log("selection change");
+  console.log("edges selection change");
   selectedEdgeUUIDs.value = [];
   edges.forEach((edge) => {
     selectedEdgeUUIDs.value.push(edge.id);
   });
 };
 
-/*
-  transforms the edges, nodes and layout from our StoryGraph model to
-  v-network-graph model. Maybe this can be done in a nicer,
-  two way support via urql as some kind of type transformation?
-*/
-function nodes(): GraphNodes {
-  const n: GraphNodes = {};
-  props.graph.nodes.forEach((node) => {
-    const graphNode: GraphNode = {
-      name: node.name,
-      color: node.color,
-      scriptCells: node.scriptCells,
-    };
-    n[node.uuid] = graphNode;
-  });
-  return n;
-}
-
-// Flow
-// const nodesF = ref([
-//   { id: '1', label: 'Start', position: { x: 250, y: 5 } },
-//   { id: '2', label: 'Node 1', position: { x: 100, y: 100 } },
-//   { id: '3', label: 'Node 2', position: { x: 400, y: 100 } },
-// ]);
-
-// const edgesF = ref([
-//   // { id: 'e1-3', source: '1', target: '2', animated: true },
-//   // { id: 'e1-2', source: '2', target: '3', animated: true },
-// ]);
-
 const connectionLineStyle = { stroke: "#000" };
 
 function nodesF(): GraphNodeF[] {
@@ -393,18 +213,6 @@ function nodesF(): GraphNodeF[] {
   return n;
 }
 
-function edges(): GraphEdges {
-  const e: GraphEdges = {};
-  props.graph.edges.forEach((edge) => {
-    const graphEdge: GraphEdge = {
-      source: edge.inNode.uuid,
-      target: edge.outNode.uuid,
-    };
-    e[edge.uuid] = graphEdge;
-  });
-  return e;
-}
-
 function edgesF(): GraphEdgeF[] {
   const e: GraphEdgeF[] = [];
   props.graph.edges.forEach((edge) => {
@@ -419,145 +227,11 @@ function edgesF(): GraphEdgeF[] {
   return e;
 }
 
-function layouts(): GraphNodes {
-  const n: GraphNodes = {};
-  props.graph.nodes.forEach((node) => {
-    const graphNode: GraphNode = {
-      x: node.positionX,
-      y: node.positionY,
-    };
-    n[node.uuid] = graphNode;
-  });
-  const layout = {
-    nodes: n,
-  };
-  return layout;
-}
-
 // Dialogs
 const lastNodeDoubleClicked = ref<Scalars["UUID"]>("");
 const nextNodeDoubleClicked = ref<Scalars["UUID"]>("");
 const showSwitchNodeDialog: Ref<boolean> = ref(false);
 
-const graphSettings = {
-  standard: vNG.defineConfigs({
-    node: {
-      selectable: true,
-      normal: {
-        type: "circle",
-        radius: 16,
-        strokeWidth: 0,
-        color: variables.grey,
-      },
-      hover: {
-        type: "circle",
-        radius: 16,
-        strokeWidth: 0,
-        color: variables.greenLight,
-      },
-      selected: {
-        type: "circle",
-        radius: 16,
-        strokeWidth: 0,
-        color: variables.greenLight,
-      },
-      label: {
-        fontSize: 15,
-        fontFamily: "arial",
-        color: variables.black,
-        margin: 5,
-        background: {
-          visible: true,
-          color: variables.white08,
-          padding: {
-            vertical: 1,
-            horizontal: 4,
-          },
-          borderRadius: 2,
-        },
-      },
-      focusring: { visible: false },
-      zOrder: {
-        enabled: true, // whether the z-order control is enable or not. default: false
-        bringToFrontOnHover: true, // whether to bring to front on hover.    default: true
-        bringToFrontOnSelected: true, // whether to bring to front on selected. default: true
-      },
-    },
-    edge: {
-      selectable: true,
-      normal: {
-        width: 3,
-        color: "black",
-        dasharray: 0,
-        animationSpeed: 5,
-        linecap: "square",
-        animate: false,
-      },
-      hover: {
-        width: 4,
-        color: variables.greenLight,
-        dasharray: "0",
-        linecap: "square",
-        animate: false,
-      },
-      selected: {
-        width: 3,
-        color: variables.greenLight,
-        dasharray: "0",
-        linecap: "square",
-        animate: false,
-      },
-      gap: 5,
-      // type: "straight",
-      type: "curve",
-      // gap: 40,
-      margin: 8, // margin between the edge and the node
-      marker: {
-        source: {
-          type: "none",
-          width: 4,
-          height: 4,
-          margin: -1,
-          units: "strokeWidth",
-          color: null,
-        },
-        target: {
-          type: "arrow",
-          width: 4,
-          height: 6,
-          margin: -1,
-          units: "strokeWidth",
-          color: null,
-        },
-      },
-      zOrder: {
-        enabled: true, // whether the z-order control is enable or not. default: false
-        bringToFrontOnHover: true, // whether to bring to front on hover.    default: true
-        bringToFrontOnSelected: true, // whether to bring to front on selected. default: true
-      },
-    },
-    view: {
-      zoomEnabled: false,
-      grid: {
-        visible: false,
-        interval: 30,
-        thickIncrements: 0,
-        line: {
-          color: "#F5F5F5",
-          width: 1,
-          dasharray: 0,
-        },
-        thick: {
-          color: "#F5F5F5",
-          width: 1,
-          dasharray: 0,
-        },
-      },
-      // layoutHandler: new vNG.GridLayout({ grid: 30 })
-    },
-  }),
-};
-
 const createEdgeMutation = useCreateEdgeMutation();
 
 // this runs if mouse is released on connection
@@ -652,13 +326,6 @@ const onConnect = async (connection) => {
   background-color: light-grey;
 }
 
-.graph {
-  position: relative;
-  width: 100%;
-  height: calc(50vh - 64px);
-  background-color: yellow;
-}
-
 .stats {
   position: fixed;
   bottom: 10px;
diff --git a/caster-editor/src/main.ts b/caster-editor/src/main.ts
index 189cfa9d..c1ac35e0 100644
--- a/caster-editor/src/main.ts
+++ b/caster-editor/src/main.ts
@@ -5,10 +5,8 @@ import urql, {
   dedupExchange,
   cacheExchange,
 } from "@urql/vue";
-import VNetworkGraph from "v-network-graph";
 import { SubscriptionClient } from "subscriptions-transport-ws";
 import { multipartFetchExchange } from "@urql/exchange-multipart-fetch";
-import "v-network-graph/lib/style.css";
 import * as Sentry from "@sentry/vue";
 
 import ElementPlus from "element-plus";
@@ -18,7 +16,6 @@ import App from "@/App.vue";
 import router from "@/router";
 
 import "./assets/scss/main.scss";
-import "v-network-graph/lib/style.css";
 
 import "@vue-flow/core/dist/style.css";
 /* this contains the default theme, these are optional styles */
@@ -73,6 +70,5 @@ app.use(urql, {
   ],
 });
 app.use(createPinia());
-app.use(VNetworkGraph);
 app.use(ElementPlus);
 app.mount("#app");
diff --git a/caster-editor/src/stores/InterfaceStore.ts b/caster-editor/src/stores/InterfaceStore.ts
index 5b6401eb..f2bf7b9e 100644
--- a/caster-editor/src/stores/InterfaceStore.ts
+++ b/caster-editor/src/stores/InterfaceStore.ts
@@ -6,7 +6,6 @@ import {
   type User,
   useUpdateScriptCellsMutation,
 } from "@/graphql";
-import type { Instance as GraphInstance } from "v-network-graph";
 import type { VueFlowStore as GraphInstanceFlow } from "@vue-flow/core";
 import { ElMessage } from "element-plus";
 
@@ -17,7 +16,6 @@ export enum Tab {
 
 // some hack to avoid
 // https://github.com/microsoft/TypeScript/issues/5711
-interface CustomGraph extends GraphInstance {}
 interface CustomGraphFlow extends GraphInstanceFlow {}
 
 export const useInterfaceStore = defineStore("interface", () => {
@@ -27,8 +25,6 @@ export const useInterfaceStore = defineStore("interface", () => {
   const selectedNodeUUIDs: Ref<string[]> = ref([]);
   const selectedEdgeUUIDs: Ref<string[]> = ref([]);
 
-  const vNetworkGraph: Ref<CustomGraph | undefined> = ref(undefined);
-
   const vueFlowRef: Ref<CustomGraphFlow | undefined> = ref(undefined);
 
   const tab: Ref<Tab> = ref(Tab.Edit);
@@ -72,7 +68,6 @@ export const useInterfaceStore = defineStore("interface", () => {
     selectedNodeUUIDs,
     selectedEdgeUUIDs,
     tab,
-    vNetworkGraph,
     vueFlowRef,
     cachedNodeData,
     waitForScriptCellsUpdate,

From a4935af00d779d3207697f0f8b20722da1828a58 Mon Sep 17 00:00:00 2001
From: Vinzenz Aubry <vinzenzaubry@gmail.com>
Date: Sat, 19 Aug 2023 03:29:25 +0200
Subject: [PATCH 16/51] cleaning and renaming

---
 .../src/assets/scss/variables.module.scss     |  1 +
 caster-editor/src/components/Graph.vue        | 31 +++++++------------
 caster-editor/src/stores/InterfaceStore.ts    |  6 ++--
 3 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/caster-editor/src/assets/scss/variables.module.scss b/caster-editor/src/assets/scss/variables.module.scss
index 5c6cd36f..bce471d5 100644
--- a/caster-editor/src/assets/scss/variables.module.scss
+++ b/caster-editor/src/assets/scss/variables.module.scss
@@ -57,6 +57,7 @@ $hoverColor: lightgrey;
 // transition
 // $transitionDefault: 300ms ease;
 // $transitionFast: 1750ms ease;
+
 :export {
   greenLight: $green-light;
   grey: $grey;
diff --git a/caster-editor/src/components/Graph.vue b/caster-editor/src/components/Graph.vue
index 4c498fd6..ef2ccc5d 100644
--- a/caster-editor/src/components/Graph.vue
+++ b/caster-editor/src/components/Graph.vue
@@ -9,18 +9,15 @@ import type { GraphSubscription, Scalars } from "@/graphql";
 import { useUpdateNodeMutation, useCreateEdgeMutation } from "@/graphql";
 import { useInterfaceStore } from "@/stores/InterfaceStore";
 import DialogExitNode from "@/components/DialogExitNode.vue";
-// import variables from "@/assets/scss/variables.module.scss";
 
 import type {
-  Node as GraphNodeF,
-  Edge as GraphEdgeF,
+  Node as GraphNode,
+  Edge as GraphEdge,
   NodeDragEvent,
 } from "@vue-flow/core";
 import { VueFlow, useVueFlow } from "@vue-flow/core";
 
 const { getSelectedEdges, getSelectedNodes } = useVueFlow({});
-
-// watch(getNodes, (nodes) => console.log('nodes changed', nodes))
 watch(getSelectedNodes, (nodes) => onSelectionChangeNodes(nodes));
 watch(getSelectedEdges, (edges) => onSelectionChangeEdges(edges));
 
@@ -39,17 +36,12 @@ const {
 } = storeToRefs(interfaceStore);
 
 watch(showNodeEditor, (visible) => {
-  if (visible) {
-    // graphPan(graphPanType.NodeEditor, lastNodeClick.value);
-    // flowPan(graphPanType.NodeEditor);
-  } else {
-    // graphPan(graphPanType.Center, lastNodeClick.value);
+  if (!visible) {
     flowPan(graphPanType.Center);
   }
 });
 
 const lastPosition = ref<{ x: number; y: number }>({ x: 0, y: 0 });
-
 const lastPanMove = ref({ x: 0, y: 0 });
 enum graphPanType {
   NodeEditor = "NODE_EDITOR",
@@ -64,7 +56,6 @@ const flowPan = (location: graphPanType) => {
   lastPosition.value.y = currentTransform.y;
 
   // get canvas size
-  console.log(vueFlowRef.value.dimensions);
   const { height: gHeight, width: gWidth } = vueFlowRef.value.dimensions;
 
   // screen aim
@@ -190,11 +181,11 @@ const onSelectionChangeEdges = (edges) => {
 
 const connectionLineStyle = { stroke: "#000" };
 
-function nodesF(): GraphNodeF[] {
-  const n: GraphNodeF[] = [];
+function nodes(): GraphNode[] {
+  const n: GraphNode[] = [];
 
   props.graph.nodes.forEach((node) => {
-    const graphNode: GraphNodeF = {
+    const graphNode: GraphNode = {
       label: node.name,
       type: "custom",
       data: {
@@ -213,10 +204,10 @@ function nodesF(): GraphNodeF[] {
   return n;
 }
 
-function edgesF(): GraphEdgeF[] {
-  const e: GraphEdgeF[] = [];
+function edges(): GraphEdge[] {
+  const e: GraphEdge[] = [];
   props.graph.edges.forEach((edge) => {
-    const graphEdge: GraphEdgeF = {
+    const graphEdge: GraphEdge = {
       id: edge.uuid,
       source: edge.inNode.uuid,
       target: edge.outNode.uuid,
@@ -260,8 +251,8 @@ const onConnect = async (connection) => {
         :default-zoom="1"
         :max-zoom="1"
         :min-zoom="1"
-        :nodes="nodesF()"
-        :edges="edgesF()"
+        :nodes="nodes()"
+        :edges="edges()"
         :nodes-connectable="true"
         :connection-line-style="connectionLineStyle"
         :delete-key-code="'null'"
diff --git a/caster-editor/src/stores/InterfaceStore.ts b/caster-editor/src/stores/InterfaceStore.ts
index f2bf7b9e..9d2e3c66 100644
--- a/caster-editor/src/stores/InterfaceStore.ts
+++ b/caster-editor/src/stores/InterfaceStore.ts
@@ -6,7 +6,7 @@ import {
   type User,
   useUpdateScriptCellsMutation,
 } from "@/graphql";
-import type { VueFlowStore as GraphInstanceFlow } from "@vue-flow/core";
+import type { VueFlowStore as GraphInstance } from "@vue-flow/core";
 import { ElMessage } from "element-plus";
 
 export enum Tab {
@@ -16,7 +16,7 @@ export enum Tab {
 
 // some hack to avoid
 // https://github.com/microsoft/TypeScript/issues/5711
-interface CustomGraphFlow extends GraphInstanceFlow {}
+interface CustomGraph extends GraphInstance {}
 
 export const useInterfaceStore = defineStore("interface", () => {
   const showNodeEditor: Ref<boolean> = ref(false);
@@ -25,7 +25,7 @@ export const useInterfaceStore = defineStore("interface", () => {
   const selectedNodeUUIDs: Ref<string[]> = ref([]);
   const selectedEdgeUUIDs: Ref<string[]> = ref([]);
 
-  const vueFlowRef: Ref<CustomGraphFlow | undefined> = ref(undefined);
+  const vueFlowRef: Ref<CustomGraph | undefined> = ref(undefined);
 
   const tab: Ref<Tab> = ref(Tab.Edit);
 

From 815a2aea63a201f296d452870a63322715e71f01 Mon Sep 17 00:00:00 2001
From: Vinzenz Aubry <vinzenzaubry@gmail.com>
Date: Sat, 19 Aug 2023 16:17:15 +0200
Subject: [PATCH 17/51] Typed everything

---
 .../src/components/FlowNodeDefault.vue        | 44 +++++++++----------
 caster-editor/src/components/Graph.vue        |  9 ++--
 2 files changed, 26 insertions(+), 27 deletions(-)

diff --git a/caster-editor/src/components/FlowNodeDefault.vue b/caster-editor/src/components/FlowNodeDefault.vue
index a62b05b2..6bc6bf74 100644
--- a/caster-editor/src/components/FlowNodeDefault.vue
+++ b/caster-editor/src/components/FlowNodeDefault.vue
@@ -1,34 +1,30 @@
 <script lang="ts" setup>
+import type { NodeSubscription } from "@/graphql";
 import { Handle, Position } from "@vue-flow/core";
 import { computed } from "vue";
 
 interface DataInput {
-  name: {
-    type: String;
-    required: true;
-  };
-  uuid: {
-    type: String;
-    required: true;
-  };
-  scriptCells: {
-    type: Array;
-    required: true;
+  data: {
+    name: {
+      type: String;
+      required: true;
+    };
+    uuid: {
+      type: String;
+      required: true;
+    };
+    scriptCells: {
+      type: NodeSubscription["node"]["scriptCells"];
+      required: true;
+    };
   };
 }
 
-const props = defineProps({
-  //TODO: needs to be typed correctly
-  data: {
-    type: Object as PropType<DataInput>,
-    required: true,
-  },
-});
+const props = defineProps<DataInput>();
 
 const emit = defineEmits(["dblclick"]);
 
 function onDblClick() {
-  // console.log(`dblclicked ${props.data.uuid}`);
   emit("dblclick", props.data.uuid);
 }
 
@@ -44,11 +40,15 @@ const sourceHandleStyleB = computed(() => ({
   height: "10px",
 }));
 
-const isValidConnection = (connection: any) => {
-  // console.log(connection.targetHandle === "a");
-  // return connection.targetHandle === "a";
+const isValidConnection = () => {
   return true;
 };
+// vallidator for later
+// const isValidConnection = (connection: Connection) => {
+//   // console.log(connection.targetHandle === "a");
+//   // return connection.targetHandle === "a";
+//   return true;
+// };
 </script>
 
 <template>
diff --git a/caster-editor/src/components/Graph.vue b/caster-editor/src/components/Graph.vue
index ef2ccc5d..54abc0da 100644
--- a/caster-editor/src/components/Graph.vue
+++ b/caster-editor/src/components/Graph.vue
@@ -14,6 +14,7 @@ import type {
   Node as GraphNode,
   Edge as GraphEdge,
   NodeDragEvent,
+  Connection,
 } from "@vue-flow/core";
 import { VueFlow, useVueFlow } from "@vue-flow/core";
 
@@ -163,7 +164,7 @@ const onNodeDoubleClick = (uuid: string) => {
   flowPan(graphPanType.NodeEditor);
 };
 
-const onSelectionChangeNodes = (nodes) => {
+const onSelectionChangeNodes = (nodes: Array<GraphNode>) => {
   console.log("nodes selection change");
   selectedNodeUUIDs.value = [];
   nodes.forEach((node) => {
@@ -171,7 +172,7 @@ const onSelectionChangeNodes = (nodes) => {
   });
 };
 
-const onSelectionChangeEdges = (edges) => {
+const onSelectionChangeEdges = (edges: Array<GraphEdge>) => {
   console.log("edges selection change");
   selectedEdgeUUIDs.value = [];
   edges.forEach((edge) => {
@@ -226,9 +227,7 @@ const showSwitchNodeDialog: Ref<boolean> = ref(false);
 const createEdgeMutation = useCreateEdgeMutation();
 
 // this runs if mouse is released on connection
-const onConnect = async (connection) => {
-  // console.log(connection);
-
+const onConnect = async (connection: Connection) => {
   const nodeOutUuid = connection.target;
   const nodeInUuid = connection.source;
 

From a46c90e954b6192b795be8f92d0a1e1ce6e416ce Mon Sep 17 00:00:00 2001
From: Vinzenz Aubry <vinzenzaubry@gmail.com>
Date: Sat, 19 Aug 2023 16:24:57 +0200
Subject: [PATCH 18/51] Refac Code

---
 .../src/components/FlowNodeDefault.vue        |   4 +-
 caster-editor/src/components/Graph.vue        | 225 +++++++++---------
 2 files changed, 116 insertions(+), 113 deletions(-)

diff --git a/caster-editor/src/components/FlowNodeDefault.vue b/caster-editor/src/components/FlowNodeDefault.vue
index 6bc6bf74..d1248967 100644
--- a/caster-editor/src/components/FlowNodeDefault.vue
+++ b/caster-editor/src/components/FlowNodeDefault.vue
@@ -24,9 +24,9 @@ const props = defineProps<DataInput>();
 
 const emit = defineEmits(["dblclick"]);
 
-function onDblClick() {
+const onDblClick = () => {
   emit("dblclick", props.data.uuid);
-}
+};
 
 const sourceHandleStyleA = computed(() => ({
   backgroundColor: "red",
diff --git a/caster-editor/src/components/Graph.vue b/caster-editor/src/components/Graph.vue
index 54abc0da..8b6ec240 100644
--- a/caster-editor/src/components/Graph.vue
+++ b/caster-editor/src/components/Graph.vue
@@ -1,7 +1,7 @@
 <!-- eslint-disable vue/no-v-model-argument -->
 <script lang="ts" setup>
-import DefaultNode from "@/components/FlowNodeDefault.vue";
 import { ElMessage } from "element-plus";
+import DefaultNode from "@/components/FlowNodeDefault.vue";
 import { ref, type Ref, watch } from "vue";
 import { storeToRefs } from "pinia";
 import { gsap } from "gsap";
@@ -9,7 +9,6 @@ import type { GraphSubscription, Scalars } from "@/graphql";
 import { useUpdateNodeMutation, useCreateEdgeMutation } from "@/graphql";
 import { useInterfaceStore } from "@/stores/InterfaceStore";
 import DialogExitNode from "@/components/DialogExitNode.vue";
-
 import type {
   Node as GraphNode,
   Edge as GraphEdge,
@@ -18,14 +17,17 @@ import type {
 } from "@vue-flow/core";
 import { VueFlow, useVueFlow } from "@vue-flow/core";
 
-const { getSelectedEdges, getSelectedNodes } = useVueFlow({});
-watch(getSelectedNodes, (nodes) => onSelectionChangeNodes(nodes));
-watch(getSelectedEdges, (edges) => onSelectionChangeEdges(edges));
+// mutations
+const updateNodeMutation = useUpdateNodeMutation();
+const createEdgeMutation = useCreateEdgeMutation();
 
-const props = defineProps<{
-  graph: GraphSubscription["graph"];
-}>();
+// types
+enum graphPanType {
+  NodeEditor = "NODE_EDITOR",
+  Center = "CENTER",
+}
 
+// store
 const interfaceStore = useInterfaceStore();
 const {
   showNodeEditor,
@@ -35,20 +37,120 @@ const {
   selectedNodeForEditorUuid,
   vueFlowRef,
 } = storeToRefs(interfaceStore);
+const { getSelectedEdges, getSelectedNodes } = useVueFlow({});
 
+// props
+const props = defineProps<{
+  graph: GraphSubscription["graph"];
+}>();
+
+// watchers
+watch(getSelectedNodes, (nodes) => onSelectionChangeNodes(nodes));
+watch(getSelectedEdges, (edges) => onSelectionChangeEdges(edges));
 watch(showNodeEditor, (visible) => {
   if (!visible) {
     flowPan(graphPanType.Center);
   }
 });
 
+// vars
 const lastPosition = ref<{ x: number; y: number }>({ x: 0, y: 0 });
 const lastPanMove = ref({ x: 0, y: 0 });
-enum graphPanType {
-  NodeEditor = "NODE_EDITOR",
-  Center = "CENTER",
+const lastNodeDoubleClicked = ref<Scalars["UUID"]>("");
+const nextNodeDoubleClicked = ref<Scalars["UUID"]>("");
+const showSwitchNodeDialog: Ref<boolean> = ref(false);
+
+// styling
+const connectionLineStyle = { stroke: "#000" };
+
+//functions
+function nodes(): GraphNode[] {
+  const n: GraphNode[] = [];
+
+  props.graph.nodes.forEach((node) => {
+    const graphNode: GraphNode = {
+      label: node.name,
+      type: "custom",
+      data: {
+        name: node.name,
+        uuid: node.uuid,
+        scriptCells: node.scriptCells,
+      },
+      id: node.uuid,
+      position: {
+        x: node.positionX,
+        y: node.positionY,
+      },
+    };
+    n.push(graphNode);
+  });
+  return n;
 }
 
+function edges(): GraphEdge[] {
+  const e: GraphEdge[] = [];
+  props.graph.edges.forEach((edge) => {
+    const graphEdge: GraphEdge = {
+      id: edge.uuid,
+      source: edge.inNode.uuid,
+      target: edge.outNode.uuid,
+      animated: true,
+    };
+    e.push(graphEdge);
+  });
+  return e;
+}
+
+const onNodeDragStop = (nodeDragEvent: NodeDragEvent) => {
+  const draggedNode = props.graph.nodes.find(
+    (x) => x.uuid === nodeDragEvent.node.id,
+  );
+
+  if (draggedNode === undefined) {
+    console.log(`Dragged unknown node ${nodeDragEvent.node.label}`);
+    return;
+  }
+
+  updateNodeMutation.executeMutation({
+    nodeUuid: draggedNode.uuid,
+    positionX: nodeDragEvent.node.computedPosition.x,
+    positionY: nodeDragEvent.node.computedPosition.y,
+  });
+};
+
+const onNodeDoubleClick = (uuid: string) => {
+  nextNodeDoubleClicked.value = uuid;
+
+  if (showNodeEditor.value && newScriptCellUpdates.value.size > 0) {
+    showSwitchNodeDialog.value = true;
+    return;
+  }
+
+  lastNodeDoubleClicked.value = uuid;
+  selectedNodeUUIDs.value = [uuid];
+
+  selectedNodeForEditorUuid.value = uuid;
+  showNodeEditor.value = true;
+
+  flowPan(graphPanType.NodeEditor);
+};
+
+const onSelectionChangeNodes = (nodes: Array<GraphNode>) => {
+  console.log("nodes selection change");
+  selectedNodeUUIDs.value = [];
+  nodes.forEach((node) => {
+    selectedNodeUUIDs.value.push(node.id);
+  });
+};
+
+const onSelectionChangeEdges = (edges: Array<GraphEdge>) => {
+  console.log("edges selection change");
+  selectedEdgeUUIDs.value = [];
+  edges.forEach((edge) => {
+    selectedEdgeUUIDs.value.push(edge.id);
+  });
+};
+
 const flowPan = (location: graphPanType) => {
   if (!vueFlowRef.value) return;
 
@@ -63,7 +165,7 @@ const flowPan = (location: graphPanType) => {
   let aimPos: { x: number; y: number };
   let moveBy: { x: number; y: number };
 
-  // node
+  // get node
   const node = vueFlowRef.value.findNode(selectedNodeForEditorUuid.value);
   const nodePosition = node?.position || { x: 0, y: 0 };
   const nodeDimensions = node?.dimensions || { width: 0, height: 0 };
@@ -128,104 +230,6 @@ const flowPan = (location: graphPanType) => {
   });
 };
 
-const updateNodeMutation = useUpdateNodeMutation();
-
-const onNodeDragStop = (nodeDragEvent: NodeDragEvent) => {
-  const draggedNode = props.graph.nodes.find(
-    (x) => x.uuid === nodeDragEvent.node.id,
-  );
-
-  if (draggedNode === undefined) {
-    console.log(`Dragged unknown node ${nodeDragEvent.node.label}`);
-    return;
-  }
-
-  updateNodeMutation.executeMutation({
-    nodeUuid: draggedNode.uuid,
-    positionX: nodeDragEvent.node.computedPosition.x,
-    positionY: nodeDragEvent.node.computedPosition.y,
-  });
-};
-
-const onNodeDoubleClick = (uuid: string) => {
-  nextNodeDoubleClicked.value = uuid;
-
-  if (showNodeEditor.value && newScriptCellUpdates.value.size > 0) {
-    showSwitchNodeDialog.value = true;
-    return;
-  }
-
-  lastNodeDoubleClicked.value = uuid;
-  selectedNodeUUIDs.value = [uuid];
-
-  selectedNodeForEditorUuid.value = uuid;
-  showNodeEditor.value = true;
-
-  flowPan(graphPanType.NodeEditor);
-};
-
-const onSelectionChangeNodes = (nodes: Array<GraphNode>) => {
-  console.log("nodes selection change");
-  selectedNodeUUIDs.value = [];
-  nodes.forEach((node) => {
-    selectedNodeUUIDs.value.push(node.id);
-  });
-};
-
-const onSelectionChangeEdges = (edges: Array<GraphEdge>) => {
-  console.log("edges selection change");
-  selectedEdgeUUIDs.value = [];
-  edges.forEach((edge) => {
-    selectedEdgeUUIDs.value.push(edge.id);
-  });
-};
-
-const connectionLineStyle = { stroke: "#000" };
-
-function nodes(): GraphNode[] {
-  const n: GraphNode[] = [];
-
-  props.graph.nodes.forEach((node) => {
-    const graphNode: GraphNode = {
-      label: node.name,
-      type: "custom",
-      data: {
-        name: node.name,
-        uuid: node.uuid,
-        scriptCells: node.scriptCells,
-      },
-      id: node.uuid,
-      position: {
-        x: node.positionX,
-        y: node.positionY,
-      },
-    };
-    n.push(graphNode);
-  });
-  return n;
-}
-
-function edges(): GraphEdge[] {
-  const e: GraphEdge[] = [];
-  props.graph.edges.forEach((edge) => {
-    const graphEdge: GraphEdge = {
-      id: edge.uuid,
-      source: edge.inNode.uuid,
-      target: edge.outNode.uuid,
-      animated: true,
-    };
-    e.push(graphEdge);
-  });
-  return e;
-}
-
-// Dialogs
-const lastNodeDoubleClicked = ref<Scalars["UUID"]>("");
-const nextNodeDoubleClicked = ref<Scalars["UUID"]>("");
-const showSwitchNodeDialog: Ref<boolean> = ref(false);
-
-const createEdgeMutation = useCreateEdgeMutation();
-
 // this runs if mouse is released on connection
 const onConnect = async (connection: Connection) => {
   const nodeOutUuid = connection.target;
@@ -311,7 +315,6 @@ const onConnect = async (connection: Connection) => {
 
   position: relative;
   width: 100%;
-  // height: calc(50vh);
   height: calc(100vh - 64px);
   background-color: light-grey;
 }

From e9166a150149f923d81196e86687fe59537e83bf Mon Sep 17 00:00:00 2001
From: Dennis Scheiba <dennis.scheiba@gmx.de>
Date: Mon, 4 Sep 2023 22:06:49 +0200
Subject: [PATCH 19/51] exclude django methods in docs

---
 docs/conf.py | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/conf.py b/docs/conf.py
index 99743cd2..3d129e92 100644
--- a/docs/conf.py
+++ b/docs/conf.py
@@ -84,3 +84,7 @@
     "path_to_docs": "docs",
     "use_repository_button": True,
 }
+
+autodoc_default_options = {
+    "exclude-members": "DoesNotExist,MultipleObjectsReturned",
+}

From 93f231d1df5bd04705688fbc6334957d383d6199 Mon Sep 17 00:00:00 2001
From: Dennis Scheiba <dennis.scheiba@gmx.de>
Date: Mon, 4 Sep 2023 22:12:01 +0200
Subject: [PATCH 20/51] add highlight to class name in docs

---
 docs/_static/custom.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/_static/custom.css b/docs/_static/custom.css
index fea655e6..eeb2c93a 100644
--- a/docs/_static/custom.css
+++ b/docs/_static/custom.css
@@ -49,3 +49,7 @@ html[data-theme='light'] a {
 }
 
 /* {--background-color: #212a2e;--text-color: #F7F8F8;--link-color: #828fff;} */
+
+.sig-name.descname .pre {
+    background-color: var(--green);
+}

From ce7f46e263606b57d104cec27f4130191148d6bb Mon Sep 17 00:00:00 2001
From: Dennis Scheiba <dennis.scheiba@gmx.de>
Date: Mon, 4 Sep 2023 22:26:57 +0200
Subject: [PATCH 21/51] add python vscode plugins

---
 .pre-commit-config.yaml | 7 ++++++-
 .vscode/extensions.json | 4 +++-
 .vscode/settings.json   | 8 ++++++--
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 637538a4..fa388378 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -8,7 +8,12 @@ repos:
     -   id: check-added-large-files
         args: ['--maxkb=1024']
     -   id: check-json
-        exclude: caster-editor/tsconfig.json
+        exclude: |
+            (?x)^(
+                caster-editor/tsconfig.json|
+                .vscode/settings.json|
+                .vscode/extensions.json
+            )$
     -   id: check-merge-conflict
 -   repo: https://github.com/psf/black
     rev: 22.3.0
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index bc40a1b0..71fc4900 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,6 +1,8 @@
 {
     "recommendations": [
         "Vue.volar",
-        "Vue.vscode-typescript-vue-plugin"
+        "Vue.vscode-typescript-vue-plugin",
+        "ms-python.mypy-type-checker",
+        "ms-python.python",
     ]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 8b0b917f..d09175d1 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,5 +1,8 @@
 {
-    "python.analysis.typeCheckingMode": "basic",
+    // "python.analysis.typeCheckingMode": "basic",
+    "mypy-type-checker.args": [
+        "--config-file=${workspaceFolder}/caster-back/setup.cfg"
+    ],
     "cSpell.words": [
         "Gencaster",
         "pythonosc",
@@ -14,5 +17,6 @@
         "javascript",
         "javascriptreact",
         "vue"
-    ]
+    ],
+    "python.analysis.typeCheckingMode": "basic"
 }

From 106d0a0eb19b97a62205761d4ca7a70df91236ff Mon Sep 17 00:00:00 2001
From: Dennis Scheiba <dennis.scheiba@gmx.de>
Date: Mon, 4 Sep 2023 22:29:29 +0200
Subject: [PATCH 22/51] improve docs on dialog

---
 caster-back/stream/frontend_types.py | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/caster-back/stream/frontend_types.py b/caster-back/stream/frontend_types.py
index d742f546..b00da944 100644
--- a/caster-back/stream/frontend_types.py
+++ b/caster-back/stream/frontend_types.py
@@ -113,7 +113,7 @@ def ok(
         ],
         **kwargs
     ):
-        """Constructor for a OK button which will"""
+        """Constructor for a OK button which will set the StreamVariable ``button`` to ``OK``."""
         return cls(
             text=text,
             value=value,
@@ -134,8 +134,7 @@ def cancel(
         **kwargs
     ):
         """Constructor for a cancel button which will simply close
-        the dialog and set the :class:`~story_graph.models.StreamVariable` ``CANCEL`` to ``'true'``
-        (but as a string!).
+        the dialog and set the :class:`~story_graph.models.StreamVariable` ``button`` to ``'cancel'``.
         """
         return cls(
             text=text,

From 7894cbf84be0b929e13d84f07576028ba2481e52 Mon Sep 17 00:00:00 2001
From: Dennis Scheiba <dennis.scheiba@gmx.de>
Date: Mon, 4 Sep 2023 22:30:03 +0200
Subject: [PATCH 23/51] add reverse operation on drifter template migration

---
 ...5_alter_graph_about_text_alter_graph_end_text_and_more.py | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/caster-back/story_graph/migrations/0015_alter_graph_about_text_alter_graph_end_text_and_more.py b/caster-back/story_graph/migrations/0015_alter_graph_about_text_alter_graph_end_text_and_more.py
index 3a39a7ba..9eb6ee1c 100644
--- a/caster-back/story_graph/migrations/0015_alter_graph_about_text_alter_graph_end_text_and_more.py
+++ b/caster-back/story_graph/migrations/0015_alter_graph_about_text_alter_graph_end_text_and_more.py
@@ -14,7 +14,10 @@ class Migration(migrations.Migration):
     ]
 
     operations = [
-        migrations.RunPython(change_drifter_to_default_template),
+        migrations.RunPython(
+            code=change_drifter_to_default_template,
+            reverse_code=migrations.RunPython.noop,
+        ),
         migrations.AlterField(
             model_name="graph",
             name="about_text",

From b8881fed53363b06058523865c3d80c051f2defd Mon Sep 17 00:00:00 2001
From: Dennis Scheiba <dennis.scheiba@gmx.de>
Date: Mon, 4 Sep 2023 22:31:38 +0200
Subject: [PATCH 24/51] introduce node doors

---
 .../story_graph/migrations/0001_initial.py    |   2 +
 ...nique_edge_remove_edge_in_node_and_more.py | 201 ++++++++++
 caster-back/story_graph/models.py             | 358 +++++++++++++++++-
 3 files changed, 543 insertions(+), 18 deletions(-)
 create mode 100644 caster-back/story_graph/migrations/0016_nodedoor_remove_edge_unique_edge_remove_edge_in_node_and_more.py

diff --git a/caster-back/story_graph/migrations/0001_initial.py b/caster-back/story_graph/migrations/0001_initial.py
index c53ca0c9..1cab42c8 100644
--- a/caster-back/story_graph/migrations/0001_initial.py
+++ b/caster-back/story_graph/migrations/0001_initial.py
@@ -128,6 +128,7 @@ class Migration(migrations.Migration):
                         on_delete=django.db.models.deletion.CASCADE,
                         related_name="out_edges",
                         to="story_graph.node",
+                        null=True,
                     ),
                 ),
                 (
@@ -136,6 +137,7 @@ class Migration(migrations.Migration):
                         on_delete=django.db.models.deletion.CASCADE,
                         related_name="in_edges",
                         to="story_graph.node",
+                        null=True,
                     ),
                 ),
             ],
diff --git a/caster-back/story_graph/migrations/0016_nodedoor_remove_edge_unique_edge_remove_edge_in_node_and_more.py b/caster-back/story_graph/migrations/0016_nodedoor_remove_edge_unique_edge_remove_edge_in_node_and_more.py
new file mode 100644
index 00000000..691fbd9d
--- /dev/null
+++ b/caster-back/story_graph/migrations/0016_nodedoor_remove_edge_unique_edge_remove_edge_in_node_and_more.py
@@ -0,0 +1,201 @@
+# Generated by Django 4.2.4 on 2023-08-30 22:53
+#
+# The migration transforms the old Node - Edge - Node
+# connection scheme to a Node - NodeExit - Edge - NodeExit - Node
+# scheme which allows to have multiple outputs of a Node
+# which is necessary to reflect visuals programming exits
+
+import uuid
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+def edge_migration(apps, schema_editor):
+    Edge = apps.get_model("story_graph", "Edge")
+    NodeDoor = apps.get_model("story_graph", "NodeDoor")
+    Node = apps.get_model("story_graph", "Node")
+
+    # create default in- and out door for every node
+    for node in Node.objects.all():
+        # hardcoded from enums as import of it is not available
+        for t in ["input", "output"]:
+            NodeDoor.objects.create(
+                door_type=t,
+                node=node,
+                name="default",
+                is_default=True,
+                code="",
+            )
+
+    # transfer the node-connecting edge to a
+    # door-connecting edge by using the default doors
+    for edge in Edge.objects.all():
+        in_door = NodeDoor.objects.get(
+            # pay attention - switcheroo!
+            #
+            # old (focussed on edge terminology)
+            # Node_A --in_node--> edge --out_node--> Node_B
+            #
+            # new
+            # Node_A --out_door --> edge --in_door--> Node_B
+            node=edge.out_node,
+            door_type="input",
+            is_default=True,
+        )
+        out_door = NodeDoor.objects.get(
+            node=edge.in_node,
+            door_type="output",
+            is_default=True,
+        )
+        edge.in_node_door = in_door
+        edge.out_node_door = out_door
+        edge.save()
+
+
+def reverse_edge_migration(apps, schema_editor):
+    Edge = apps.get_model("story_graph", "Edge")
+    # transfer each node door to a edge
+    for edge in Edge.objects.all():
+        # remember the switcheroo
+        edge.out_node = edge.in_node_door.node
+        edge.in_node = edge.out_node_door.node
+        edge.save()
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("story_graph", "0015_alter_graph_about_text_alter_graph_end_text_and_more"),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name="NodeDoor",
+            fields=[
+                (
+                    "uuid",
+                    models.UUIDField(
+                        default=uuid.uuid4,
+                        editable=False,
+                        primary_key=True,
+                        serialize=False,
+                        unique=True,
+                    ),
+                ),
+                (
+                    "door_type",
+                    models.CharField(
+                        choices=[("input", "Input"), ("output", "output")],
+                        default="output",
+                        max_length=20,
+                    ),
+                ),
+                ("name", models.CharField(max_length=512)),
+                ("order", models.IntegerField(default=0)),
+                ("is_default", models.BooleanField(default=False)),
+                ("code", models.TextField(default="")),
+            ],
+            options={
+                "verbose_name": "Node exit",
+                "verbose_name_plural": "Node exits",
+                "ordering": ["node", "is_default", "order", "name"],
+            },
+        ),
+        migrations.RemoveConstraint(
+            model_name="edge",
+            name="unique_edge",
+        ),
+        migrations.AlterField(
+            model_name="graph",
+            name="about_text",
+            field=models.TextField(
+                blank=True,
+                default="",
+                help_text="Text about the graph which can be accessed during a stream - only if this is set",
+                verbose_name="About text (markdown)",
+            ),
+        ),
+        migrations.AlterField(
+            model_name="graph",
+            name="end_text",
+            field=models.TextField(
+                blank=True,
+                default="",
+                help_text="Text which will be displayed at the end of a stream",
+                verbose_name="End text (markdown)",
+            ),
+        ),
+        migrations.AlterField(
+            model_name="graph",
+            name="slug_name",
+            field=models.SlugField(
+                help_text="Will be used as a URL",
+                max_length=256,
+                unique=True,
+                verbose_name="Slug name",
+            ),
+        ),
+        migrations.AlterField(
+            model_name="graph",
+            name="start_text",
+            field=models.TextField(
+                blank=True,
+                default="",
+                help_text="Text about the graph which will be displayed at the start of a stream - only if this is set",
+                verbose_name="Start text (markdown)",
+            ),
+        ),
+        migrations.AddField(
+            model_name="nodedoor",
+            name="node",
+            field=models.ForeignKey(
+                on_delete=django.db.models.deletion.CASCADE, to="story_graph.node"
+            ),
+        ),
+        migrations.AddField(
+            model_name="edge",
+            name="in_node_door",
+            field=models.ForeignKey(
+                null=True,
+                on_delete=django.db.models.deletion.CASCADE,
+                related_name="in_edges",
+                to="story_graph.nodedoor",
+            ),
+        ),
+        migrations.AddField(
+            model_name="edge",
+            name="out_node_door",
+            field=models.ForeignKey(
+                null=True,
+                on_delete=django.db.models.deletion.CASCADE,
+                related_name="out_edges",
+                to="story_graph.nodedoor",
+            ),
+        ),
+        migrations.AddConstraint(
+            model_name="edge",
+            constraint=models.UniqueConstraint(
+                fields=("in_node_door", "out_node_door"), name="unique_edge"
+            ),
+        ),
+        migrations.AddConstraint(
+            model_name="nodedoor",
+            constraint=models.UniqueConstraint(
+                condition=models.Q(("is_default", True)),
+                fields=("node", "door_type"),
+                name="unique_default_per_type_and_node",
+            ),
+        ),
+        migrations.RunPython(
+            code=edge_migration,
+            reverse_code=reverse_edge_migration,
+        ),
+        migrations.RemoveField(
+            model_name="edge",
+            name="in_node",
+        ),
+        migrations.RemoveField(
+            model_name="edge",
+            name="out_node",
+        ),
+    ]
diff --git a/caster-back/story_graph/models.py b/caster-back/story_graph/models.py
index 4d81ed0d..4c9acda3 100644
--- a/caster-back/story_graph/models.py
+++ b/caster-back/story_graph/models.py
@@ -3,11 +3,21 @@
 ======
 """
 
+import logging
 import uuid
 
+from asgiref.sync import async_to_sync, sync_to_async
+from channels.layers import get_channel_layer
+from django.core.exceptions import ValidationError
 from django.db import models
-from django.db.models import Q
+from django.db.models import Q, signals
+from django.dispatch import receiver
 from django.utils.translation import gettext as _
+from django_stubs_ext.db.models import TypedModelMeta
+
+from gencaster.distributor import GenCasterChannel
+
+log = logging.getLogger(__name__)
 
 
 class Graph(models.Model):
@@ -209,6 +219,45 @@ class Node(models.Model):
         default=False,
     )
 
+    async def aget_default_out_door(self) -> "NodeDoor":
+        return await sync_to_async(self.get_default_out_door)()
+
+    def get_default_out_door(self) -> "NodeDoor":
+        default_out_door = NodeDoor.objects.filter(
+            node=self,
+            door_type=NodeDoor.DoorType.OUTPUT,
+            is_default=True,
+        ).first()
+        if default_out_door is None:
+            raise NodeDoorMissing(f"Default out door for node {self} is missing")
+        return default_out_door
+
+    async def aget_default_in_door(self) -> "NodeDoor":
+        return await sync_to_async(self.get_default_in_door)()
+
+    def get_default_in_door(self) -> "NodeDoor":
+        default_in_door = NodeDoor.objects.filter(
+            node=self,
+            door_type=NodeDoor.DoorType.INPUT,
+            is_default=True,
+        ).first()
+        if default_in_door is None:
+            raise NodeDoorMissing(f"Default in door for node {self} is missing")
+        return default_in_door
+
+    def save(self, *args, **kwargs):
+        create_default_doors = self._state.adding
+        super().save(*args, **kwargs)
+        if create_default_doors:
+            for t in NodeDoor.DoorType:
+                NodeDoor(
+                    node=self,
+                    name="default",
+                    door_type=t,
+                    is_default=True,
+                    code="True",
+                ).save()
+
     class Meta:
         ordering = ["graph"]
         constraints = [
@@ -223,17 +272,52 @@ def __str__(self) -> str:
         return self.name
 
 
-class Edge(models.Model):
-    """Connects two :class:`~Node` with each other.
+class NodeDoorMissing(Exception):
+    """Exception that can be thrown if a node door is missing.
+    Normally each node should have a default in- and out
+    :class:`~NodeDoor` via a signal, but as this is not forced
+    via the database it is necessary to check for it.
+    In case this check fails, this exception can be raised.
+    """
 
-    .. todo::
 
-        With a script we can also jump to any other node
-        so it is not clear how to use this.
-        Maybe take a look at visual programming languages
-        such as MSP or Scratch how they handle this?
+class NodeDoor(models.Model):
+    """A :class:`~Node` can be entered and exited via
+    multiple paths, where each of these exits and
+    entrances is called a *door*.
+
+    A connection between nodes can only be made via their
+    doors.
+    There are two types of doors:
+
+    .. list-table:: Door types
+        :header-rows: 1
+
+        * - Kind
+          - Description
+        * - **INPUT**
+          - Allows to enter a node.
+            Currently each Node only has one entry point
+            but for future development and a nicer
+            database operations it is also represented.
+        * - **OUTPUT**
+          - Allows to exit a node.
+            After all script cells of a node has been
+            executed, the condition of each door will
+            be evaluated (like in a switch case).
+            Once a condition has been met, the door
+            will be stepped through.
+            This allows to have a visual representation
+            of logic branches.
+
+    It is only possible to connect an **OUTPUT** to an
+    **INPUT** door via an :class:`~Edge`.
     """
 
+    class DoorType(models.TextChoices):
+        INPUT = "input", _("Input")
+        OUTPUT = "output", _("output")
+
     uuid = models.UUIDField(
         primary_key=True,
         editable=False,
@@ -241,32 +325,221 @@ class Edge(models.Model):
         unique=True,
     )
 
-    in_node = models.ForeignKey(
-        Node,
-        related_name="out_edges",
+    door_type = models.CharField(
+        max_length=20,
+        blank=False,
+        null=False,
+        choices=DoorType.choices,
+        default=DoorType.OUTPUT,
+    )
+
+    node = models.ForeignKey(
+        to=Node,
         on_delete=models.CASCADE,
+        related_name="node_doors",
     )
 
-    out_node = models.ForeignKey(
-        Node,
+    name = models.CharField(
+        max_length=512,
+        blank=False,
+        null=False,
+    )
+
+    order = models.IntegerField(
+        default=0,
+    )
+
+    is_default = models.BooleanField(
+        default=False,
+    )
+
+    code = models.TextField(
+        null=False,
+        blank=False,
+        default="",
+    )
+
+    # only here for type-hints on reverse-relations
+    out_edges: models.QuerySet["Edge"]
+    in_edges: models.QuerySet["Edge"]
+
+    class Meta(TypedModelMeta):
+        ordering = [
+            "node",
+            "is_default",
+            "order",
+            "name",
+        ]
+        verbose_name = _("Node door")
+        verbose_name_plural = _("Node doors")
+
+        constraints = [
+            models.UniqueConstraint(
+                fields=["node", "door_type"],
+                # see https://stackoverflow.com/a/72586940
+                condition=Q(is_default=True),
+                name="unique_default_per_type_and_node",
+            ),
+        ]
+
+    def __str__(self) -> str:
+        return f"{self.node}: {self.door_type}_{self.name}"
+
+
+@receiver(signals.post_save, sender=NodeDoor, dispatch_uid="update_node_door_ws")
+def update_node_door_ws(sender, instance: NodeDoor, **kwargs) -> None:
+    channel_layer = get_channel_layer()
+    if channel_layer is None:
+        log.error(
+            "Failed to obtain a handle on the channel layer to distribute node_door updates"
+        )
+        return
+    async_to_sync(GenCasterChannel.send_node_update)(channel_layer, instance.node.uuid)
+    async_to_sync(GenCasterChannel.send_graph_update)(
+        channel_layer, instance.node.graph.uuid
+    )
+
+
+@receiver(signals.post_delete, sender=NodeDoor, dispatch_uid="delete_node_door_ws")
+def delete_node_door_ws(*args, **kwargs):
+    return update_node_door_ws(*args, **kwargs)
+
+
+class Edge(models.Model):
+    """Connects two :class:`~Node` with each other by
+    using their respective :class:`~NodeDoor`.
+
+    .. important::
+
+        It is important to note that an edge flows from
+        ``out_node_door`` to ``in_node_door`` as we follow
+        the notion from the perspective of a
+        :class:`story_graph.models.Node` rather than from the
+        edge.
+
+
+    .. graphviz::
+
+        digraph Connection {
+            rank = same;
+            subgraph cluster_node_a {
+                rank = same;
+                label = "NODE_A";
+                NODE_A [shape=Msquare, label="NODE_A\\n\\nscript_cell_1\\nscript_cell_2"];
+                subgraph cluster_in_nodes_a {
+                    label = "IN_NODES";
+                    in_node_door_a [label="in_node_door"];
+                }
+                subgraph cluster_out_nodes_a {
+                    label = "OUT_NODES";
+                    out_node_door_a_1 [label="out_node_door 1"];
+                    out_node_door_a_2 [label="out_node_door 2"];
+                }
+                in_node_door_a -> NODE_A [label="DB\\nreference"];
+                {out_node_door_a_1, out_node_door_a_2} -> NODE_A;
+                in_node_door_a -> NODE_A [style=dashed, color=red, fontcolor=red, label="Engine\\nProgression"];
+                NODE_A -> out_node_door_a_1 [style=dashed, color=red];
+            }
+
+            edge_ [shape=Msquare, label="EDGE"];
+            edge_ -> out_node_door_a_1 [label="out_node_door"];
+            edge_ -> in_node_door_b [label="in_node_door"];
+            out_node_door_a_1 -> edge_ [style=dashed, color=red];
+            edge_ -> in_node_door_b [style=dashed, color=red];
+
+            subgraph cluster_node_b {
+                rank = same;
+                label = "NODE_B";
+                NODE_B [shape=Msquare];
+                subgraph cluster_in_nodes_b {
+                    label = "IN_NODES";
+                    in_node_door_b [label="in_node_door"];
+                }
+                subgraph cluster_out_nodes_b {
+                    label = "OUT_NODES";
+                    out_node_door_b_1 [label="out_node_door 1"];
+                    out_node_door_b_2 [label="out_node_door 2"];
+                }
+                in_node_door_b -> NODE_B;
+                {out_node_door_b_1, out_node_door_b_2} -> NODE_B;
+                in_node_door_b -> NODE_B [style=dashed, color=red];
+                NODE_B -> out_node_door_b_1 [style=dashed, color=red];
+            }
+        }
+    """
+
+    uuid = models.UUIDField(
+        primary_key=True,
+        editable=False,
+        default=uuid.uuid4,
+        unique=True,
+    )
+
+    in_node_door = models.ForeignKey(
+        NodeDoor,
         related_name="in_edges",
         on_delete=models.CASCADE,
+        # this should not be none but as we
+        # added it during the lifecycle of
+        # gencaster it is optional as otherwise
+        # all prior data has to be deleted
+        null=True,
     )
 
-    class Meta:
+    out_node_door = models.ForeignKey(
+        NodeDoor,
+        related_name="out_edges",
+        on_delete=models.CASCADE,
+        # see in_node_door
+        null=True,
+    )
+
+    def save(self, *args, **kwargs):
+        """Checks if ``in_node_door`` and ``out_node_door`` have their
+        respective types in order to avoid any *wrong* directions within
+        our graph.
+        """
+        if self.in_node_door:
+            if self.in_node_door.door_type != NodeDoor.DoorType.INPUT:
+                raise ValidationError(_("in_node_door needs to be an input door"))
+        if self.out_node_door:
+            if self.out_node_door.door_type != NodeDoor.DoorType.OUTPUT:
+                raise ValidationError(_("out_node_door needs to be an output door"))
+        super().save(*args, **kwargs)
+
+    class Meta(TypedModelMeta):
         constraints = [
             models.UniqueConstraint(
-                fields=["in_node", "out_node"],
+                fields=["in_node_door", "out_node_door"],
                 name="unique_edge",
-            )
+            ),
         ]
 
     def __str__(self) -> str:
-        return f"{self.in_node} -> {self.out_node}"
+        return f"{self.in_node_door} -> {self.out_node_door}"
 
 
 class AudioCell(models.Model):
+    """Stores information for playback of static audio files."""
+
     class PlaybackChoices(models.TextChoices):
+        """Different kinds of playback.
+
+        .. list-table:: Playback types
+            :header-rows: 1
+
+            * - Name
+              - Description
+            * - ``SYNC``
+              - Plays back an audio file and waits for the
+                playback to finish before continuing the
+                execution of the script cells.
+            * - ``ASYNC``
+              - Plays back an audio file and immediately
+                continues the execution of script cells.
+                This is fitting for e.g. background music.
+        """
+
         SYNC_PLAYBACK = ["sync_playback", _("Sync playback")]
         ASYNC_PLAYBACK = ["async_playback", _("Async playback")]
 
@@ -302,7 +575,56 @@ def __str__(self) -> str:
 
 
 class CellType(models.TextChoices):
-    """Choice of foobar"""
+    """A :class:`~story_graph.models.ScriptCell` can contain
+    different types of code, each with unique functionality.
+
+    Both, the database and :class:`~story_graph.engine.Engine`,
+    implement some specific details according to these types.
+
+    .. list-table:: Cell types
+        :header-rows: 1
+
+        * - Name
+          - Description
+          - Database
+          - Engine
+        * - Markdown
+          - Allows to write arbitrary text which will get
+            rendered as an audio file via a text to speech service,
+            see :class:`~stream.models.TextToSpeech` for conversion
+            and :class:`~story_graph.markdown_parser.GencasterRenderer`
+            for the extended Markdown syntax.
+          - - :class:`~stream.models.TextToSpeech`
+          - - :func:`~story_graph.engine.Engine.execute_markdown_code`
+            - :class:`~story_graph.markdown_parser.GencasterRenderer`
+        * - Python
+          - Allows to execute python code via :func:`exec` which allows
+            to trigger e.g. Dialogs in the frontend
+            (see :class:`~stream.frontend_types.Dialog`)
+            or calculate or fetch any kind of data and store its value
+            as a :class:`~stream.models.StreamVariable`.
+          -
+          - - :func:`~story_graph.engine.Engine.execute_python_cell`
+        * - SuperCollider
+          - Executes *sclang* code on the associated server.
+            This can be used to control the sonic content on the server.
+          - - :class:`~stream.models.StreamInstruction`
+          - - :func:`~story_graph.engine.Engine.execute_sc_code`
+            - :ref:`OSC Server`
+        * - Comment
+          - Does not get executed, but allows to put comments into
+            the graph.
+          -
+          -
+        * - Audio
+          - Allows to playback static audio files.
+            The instruction will be translated into *sclang* code and will
+            be executed as such on the associated stream.
+          - - :class:`~story_graph.models.AudioCell`
+            - :class:`~stream.models.AudioFile`
+          - - :func:`~story_graph.engine.Engine.execute_audio_cell`
+
+    """
 
     MARKDOWN = ["markdown", _("Markdown")]
     PYTHON = ["python", _("Python")]

From faefda6af854cbccfe627f8ec2ed7f0b6d0fd472 Mon Sep 17 00:00:00 2001
From: Dennis Scheiba <dennis.scheiba@gmx.de>
Date: Mon, 4 Sep 2023 22:33:35 +0200
Subject: [PATCH 25/51] add type to queue

---
 caster-back/stream/apps.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/caster-back/stream/apps.py b/caster-back/stream/apps.py
index c9c38939..d33f56a1 100644
--- a/caster-back/stream/apps.py
+++ b/caster-back/stream/apps.py
@@ -75,7 +75,7 @@ def emit(self, record: LogRecord) -> None:
             self._queue.put(record)
 
     # see https://docs.python.org/3/howto/logging-cookbook.html#dealing-with-handlers-that-block
-    log_queue = Queue(-1)
+    log_queue: Queue = Queue(-1)
 
     root_logger = logging.getLogger()
     QueueHandler(log_queue)

From 6a5154c8fe9cea6ef00694f0fd5a4f1a5782288e Mon Sep 17 00:00:00 2001
From: Dennis Scheiba <dennis.scheiba@gmx.de>
Date: Mon, 4 Sep 2023 22:34:17 +0200
Subject: [PATCH 26/51] change HttpResponse import

---
 caster-back/gencaster/urls.py | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/caster-back/gencaster/urls.py b/caster-back/gencaster/urls.py
index 6983e9e9..c503a8f6 100644
--- a/caster-back/gencaster/urls.py
+++ b/caster-back/gencaster/urls.py
@@ -20,8 +20,7 @@
 from django.conf import settings
 from django.conf.urls.static import static
 from django.contrib import admin
-from django.http import HttpRequest
-from django.shortcuts import HttpResponse
+from django.http import HttpRequest, HttpResponse
 from django.urls import path
 from django.utils.decorators import method_decorator
 from django.views.decorators.csrf import csrf_exempt

From 7ef780e72bcadf3171e91c3a81a7ff830bb2aee0 Mon Sep 17 00:00:00 2001
From: Dennis Scheiba <dennis.scheiba@gmx.de>
Date: Mon, 4 Sep 2023 22:34:37 +0200
Subject: [PATCH 27/51] add django-stubs-ext

---
 caster-back/requirements.txt | 1 +
 1 file changed, 1 insertion(+)

diff --git a/caster-back/requirements.txt b/caster-back/requirements.txt
index fb53e023..20c758a9 100644
--- a/caster-back/requirements.txt
+++ b/caster-back/requirements.txt
@@ -11,3 +11,4 @@ mistletoe==1.0.1
 pydantic==1.10.7
 channels-redis==4.1.0
 sentry-sdk==1.29.0
+django-stubs-ext==4.2.2

From 5908c2a294b3120ac011308278e1ebfde4ce05b0 Mon Sep 17 00:00:00 2001
From: Dennis Scheiba <dennis.scheiba@gmx.de>
Date: Mon, 4 Sep 2023 22:35:27 +0200
Subject: [PATCH 28/51] adjust engine to node doors

---
 caster-back/story_graph/engine.py | 107 ++++++++++++++++++++++++++----
 1 file changed, 93 insertions(+), 14 deletions(-)

diff --git a/caster-back/story_graph/engine.py b/caster-back/story_graph/engine.py
index ed7c5b6c..78ec7bb7 100644
--- a/caster-back/story_graph/engine.py
+++ b/caster-back/story_graph/engine.py
@@ -17,7 +17,7 @@
 from stream.models import Stream, StreamInstruction, StreamVariable
 
 from .markdown_parser import md_to_ssml
-from .models import AudioCell, CellType, Graph, Node, ScriptCell
+from .models import AudioCell, CellType, Graph, Node, NodeDoor, ScriptCell
 
 log = logging.getLogger(__name__)
 
@@ -26,6 +26,14 @@ class ScriptCellTimeout(Exception):
     pass
 
 
+class GraphDeadEnd(Exception):
+    pass
+
+
+class InvalidPythonCode(Exception):
+    pass
+
+
 class Engine:
     """An engine executes a :class:`~story_graph.models.Graph` for a given
     :class:`~stream.models.StreamPoint`.
@@ -265,7 +273,10 @@ async def execute_python_cell(self, cell_code: str) -> AsyncGenerator[Dialog, No
         stream_variables.get("return", None)
 
     async def wait_for_finished_instruction(
-        self, instruction: StreamInstruction, timeout: int = 30, interval: float = 0.2
+        self,
+        instruction: StreamInstruction,
+        timeout: float = 300.0,
+        interval: float = 0.2,
     ) -> None:
         log.debug(f"Wait for finished instruction {instruction.uuid}")
         for _ in range(int(timeout / interval)):
@@ -274,6 +285,7 @@ async def wait_for_finished_instruction(
                 return
             await asyncio.sleep(interval)
         log.info(f"Timed out on waiting for stream instruction {instruction.uuid}")
+        raise asyncio.TimeoutError()
 
     async def execute_node(
         self, node: Node, blocking_sleep_time: int = 10000
@@ -311,6 +323,79 @@ async def execute_node(
             else:
                 log.error(f"Occured invalid/unknown CellType {cell_type}")
 
+    async def _evaluate_python_code(self, code: str) -> bool:
+        stream_variables = await self.get_stream_variables()
+        try:
+            r = eval(
+                code,
+                self.get_engine_global_vars(
+                    {
+                        "loop": asyncio.get_event_loop(),
+                        "vars": stream_variables,
+                        "self": self,
+                        "get_stream_variables": self.get_stream_variables,
+                        "wait_for_stream_variable": self.wait_for_stream_variable,
+                    }
+                ),
+            )
+        except Exception:
+            raise InvalidPythonCode()
+        if not isinstance(r, bool):
+            log.debug(f"Return type of '{code}' is not a boolean but {type(r)}")
+            raise InvalidPythonCode()
+        return r
+
+    async def get_next_node(self) -> Node:
+        """Iterates over each exit :class:`~NodeDoor`
+        of the current node and evaluates its boolean value
+        and decides.
+
+        If the node door code consists of invalid code it will be skipped.
+        If all boolean evaluations result in ``False`` or invalid code,
+        the default exit will be used.
+
+        If multiple out-going edges are connected to an active door,
+        a random edge will be picked to follow for the next node.
+
+        If the node does not have any out-going edges a :class:`~GraphDeadEnd`
+        exception will be raised.
+        """
+        exit_door: Optional[NodeDoor]
+        async for node_door in NodeDoor.objects.filter(
+            node=self._current_node,
+            door_type=NodeDoor.DoorType.OUTPUT,
+        ).prefetch_related("node"):
+            try:
+                active_exit = await self._evaluate_python_code(node_door.code)
+            # a broad exception because many things can go wrong here while evaluating
+            # python code (e.g. even raising a custom exception), therefore we catch all
+            # possible exceptions here
+            except Exception:
+                log.debug(
+                    f"Exception raised on evaluating code of node door {node_door}"
+                )
+                continue
+            if active_exit:
+                log.debug(f"Choose exit {node_door} on {self._current_node}")
+                exit_door = node_door
+                break
+        else:
+            log.debug(f"Fallback to default node door on {self._current_node}")
+            exit_door = await NodeDoor.objects.filter(
+                node=self._current_node,
+                door_type=NodeDoor.DoorType.OUTPUT,
+                is_default=True,
+            ).afirst()
+        # else return default out
+
+        if exit_door is None:
+            raise GraphDeadEnd()
+
+        try:
+            return (await exit_door.out_edges.order_by("?").select_related("in_node_door__node").afirst()).in_node_door.node  # type: ignore
+        except AttributeError:
+            raise GraphDeadEnd()
+
     async def start(
         self, max_steps: int = 1000
     ) -> AsyncGenerator[Union[StreamInstruction, Dialog], None]:
@@ -334,17 +419,11 @@ async def start(
                 await asyncio.sleep(self.blocking_time)
 
             # search for next node
-            if (
-                new_node := await Node.objects.filter(
-                    in_edges__in_node=self._current_node
-                )
-                .order_by("?")
-                .afirst()
-            ):
-                self._current_node = new_node
-            else:
-                log.error(
-                    f"Ran into a dead end on {self.graph} on {self._current_node}"
-                )
+            try:
+                await self.get_next_node()
+            except GraphDeadEnd:
+                log.info(f"Ran into a dead end on {self.graph} on {self._current_node}")
                 return
             await asyncio.sleep(0.1)
+        else:
+            log.info(f"Reached maximum steps on graph {self.graph} - stop execution")

From 3bf03300897a05e9687aa6afc80807bb0f9f46ff Mon Sep 17 00:00:00 2001
From: Dennis Scheiba <dennis.scheiba@gmx.de>
Date: Mon, 4 Sep 2023 22:36:13 +0200
Subject: [PATCH 29/51] add node door graphql operations

---
 caster-back/gencaster/schema.py | 92 ++++++++++++++++++++++++++-------
 1 file changed, 72 insertions(+), 20 deletions(-)

diff --git a/caster-back/gencaster/schema.py b/caster-back/gencaster/schema.py
index dc4d190e..66fab030 100644
--- a/caster-back/gencaster/schema.py
+++ b/caster-back/gencaster/schema.py
@@ -39,11 +39,15 @@
 from story_graph.types import (
     AddGraphInput,
     AudioCellInput,
+    Edge,
     EdgeInput,
     Graph,
     GraphFilter,
     Node,
     NodeCreate,
+    NodeDoor,
+    NodeDoorInputCreate,
+    NodeDoorInputUpdate,
     NodeUpdate,
     ScriptCell,
     ScriptCellInputCreate,
@@ -275,29 +279,27 @@ async def update_node(self, info: Info, node_update: NodeUpdate) -> None:
         return None
 
     @strawberry.mutation
-    async def add_edge(self, info: Info, new_edge: EdgeInput) -> None:
+    async def add_edge(self, info: Info, new_edge: EdgeInput) -> Edge:
         """Creates a :class:`~story_graph.models.Edge` for a given
         :class:`~story_graph.models.Graph`.
-        It does not return the created edge.
+        It returns the created edge.
         """
         await graphql_check_authenticated(info)
-        in_node: story_graph_models.Node = (
-            await story_graph_models.Node.objects.select_related("graph").aget(
-                uuid=new_edge.node_in_uuid
-            )
-        )
-        out_node: story_graph_models.Node = await story_graph_models.Node.objects.aget(
-            uuid=new_edge.node_out_uuid
+        in_node_door = await story_graph_models.NodeDoor.objects.select_related(
+            "node__graph"
+        ).aget(uuid=new_edge.node_door_in_uuid)
+        out_node_door = await story_graph_models.NodeDoor.objects.aget(
+            uuid=new_edge.node_door_out_uuid
         )
-        edge: story_graph_models.Edge = await story_graph_models.Edge.objects.acreate(
-            in_node=in_node,
-            out_node=out_node,
+        edge = await story_graph_models.Edge.objects.acreate(
+            in_node_door=in_node_door,
+            out_node_door=out_node_door,
         )
         await GenCasterChannel.send_graph_update(
             layer=info.context.channel_layer,
-            graph_uuid=in_node.graph.uuid,
+            graph_uuid=in_node_door.node.graph.uuid,
         )
-        return None
+        return edge  # type: ignore
 
     @strawberry.mutation
     async def delete_edge(self, info, edge_uuid: uuid.UUID) -> None:
@@ -306,16 +308,17 @@ async def delete_edge(self, info, edge_uuid: uuid.UUID) -> None:
         try:
             edge: story_graph_models.Edge = (
                 await story_graph_models.Edge.objects.select_related(
-                    "in_node__graph"
+                    "in_node_door__node__graph"
                 ).aget(uuid=edge_uuid)
             )
             await story_graph_models.Edge.objects.filter(uuid=edge_uuid).adelete()
         except Exception:
             raise Exception(f"Could not delete edge {edge_uuid}")
-        await GenCasterChannel.send_graph_update(
-            layer=info.context.channel_layer,
-            graph_uuid=edge.in_node.graph.uuid,
-        )
+        if edge.in_node_door:
+            await GenCasterChannel.send_graph_update(
+                layer=info.context.channel_layer,
+                graph_uuid=edge.in_node_door.node.graph.uuid,
+            )
         return None
 
     @strawberry.mutation
@@ -528,6 +531,55 @@ async def create_update_stream_variable(
 
         return stream_vars  # type: ignore
 
+    @strawberry.mutation
+    async def create_node_door(
+        self,
+        info,
+        node_door_input: NodeDoorInputCreate,
+        node_uuid: uuid.UUID,
+    ) -> NodeDoor:
+        await graphql_check_authenticated(info)
+        node = await story_graph_models.Node.objects.aget(uuid=node_uuid)
+        return await story_graph_models.NodeDoor.objects.acreate(
+            door_type=node_door_input.door_type,
+            node=node,
+            name=node_door_input.name,
+            order=node_door_input.order,
+            code=node_door_input.code,
+        )  # type: ignore
+
+    @strawberry.mutation
+    async def update_node_door(
+        self,
+        info,
+        node_door_input: NodeDoorInputUpdate,
+    ) -> NodeDoor:
+        await graphql_check_authenticated(info)
+        node_door = await story_graph_models.NodeDoor.objects.aget(
+            uuid=node_door_input.uuid
+        )
+        node_door.door_type = node_door_input.door_type
+        if node_door_input.code:
+            node_door.code = node_door_input.code
+        if node_door_input.name:
+            node_door.name = node_door_input.name
+        if node_door_input.order:
+            node_door.order = node_door_input.order
+        await node_door.asave()
+        return node_door  # type: ignore
+
+    @strawberry.mutation
+    async def delete_node_door(self, info, node_door_uuid: uuid.UUID) -> bool:
+        """Allows to delete a non-default NodeDoor.
+        If a node door was deleted it will return ``True``, otherwise ``False``.
+        """
+        await graphql_check_authenticated(info)
+        deleted_objects, _ = await story_graph_models.NodeDoor.objects.filter(
+            is_default=False,
+            uuid=node_door_uuid,
+        ).adelete()
+        return deleted_objects >= 1
+
 
 @strawberry.type
 class Subscription:
@@ -656,7 +708,7 @@ async def get_streams() -> List[Stream]:
             async for stream in stream_models.Stream.objects.order_by("-created_date")[
                 0:limit
             ]:
-                streams_db.append(stream)
+                streams_db.append(stream)  # type: ignore
             return streams_db
 
         yield await get_streams()

From 7dc609b8c798fa4fff0325fcf80e6a6f85148286 Mon Sep 17 00:00:00 2001
From: Dennis Scheiba <dennis.scheiba@gmx.de>
Date: Mon, 4 Sep 2023 22:36:50 +0200
Subject: [PATCH 30/51] switch to autocomplete fields in admin

---
 caster-back/story_graph/admin.py | 91 +++++++++++++++++++++++++++-----
 caster-back/stream/admin.py      | 58 +++++++++++++++++++-
 2 files changed, 134 insertions(+), 15 deletions(-)

diff --git a/caster-back/story_graph/admin.py b/caster-back/story_graph/admin.py
index 0d7fc3aa..db40aace 100644
--- a/caster-back/story_graph/admin.py
+++ b/caster-back/story_graph/admin.py
@@ -1,6 +1,6 @@
 from django.contrib import admin
 
-from .models import AudioCell, Edge, Graph, Node, ScriptCell
+from .models import AudioCell, Edge, Graph, Node, NodeDoor, ScriptCell
 
 
 class NodeInline(admin.TabularInline):
@@ -8,16 +8,10 @@ class NodeInline(admin.TabularInline):
     extra: int = 0
 
 
-class InEdgeInline(admin.TabularInline):
-    model = Edge
+class NodeDoorInline(admin.TabularInline):
+    model = NodeDoor
     extra = 1
-    fk_name: str = "in_node"
-
-
-class OutEdgeInline(admin.TabularInline):
-    model = Edge
-    extra = 1
-    fk_name: str = "out_node"
+    fk_name = "node"
 
 
 class ScriptCellInline(admin.TabularInline):
@@ -25,6 +19,33 @@ class ScriptCellInline(admin.TabularInline):
     extra: int = 1
 
 
+@admin.register(NodeDoor)
+class NodeDoorAdmin(admin.ModelAdmin):
+    list_display = [
+        "uuid",
+        "node",
+        "name",
+        "door_type",
+        "is_default",
+    ]
+
+    autocomplete_fields = [
+        "node",
+    ]
+
+    search_fields = [
+        "name",
+        "node__graph__name",
+        "node__name",
+    ]
+
+    list_filter = [
+        "door_type",
+        "node__graph",
+        "is_default",
+    ]
+
+
 @admin.register(Graph)
 class GraphAdmin(admin.ModelAdmin):
     inlines = [NodeInline]
@@ -36,6 +57,12 @@ class GraphAdmin(admin.ModelAdmin):
         "public_visible",
     ]
 
+    search_fields = [
+        "name",
+        "display_name",
+        "slug_name",
+    ]
+
     prepopulated_fields = {
         "slug_name": ["name"],
         "display_name": ["name"],
@@ -46,7 +73,7 @@ class GraphAdmin(admin.ModelAdmin):
 
 @admin.register(Node)
 class NodeAdmin(admin.ModelAdmin):
-    inlines = [ScriptCellInline, InEdgeInline, OutEdgeInline]
+    inlines = [ScriptCellInline, NodeDoorInline]
     list_display = [
         "name",
         "graph",
@@ -60,17 +87,36 @@ class NodeAdmin(admin.ModelAdmin):
         "is_blocking_node",
     ]
 
+    search_fields = [
+        "name",
+        "graph__name",
+    ]
+
+    autocomplete_fields = [
+        "graph",
+    ]
+
 
 @admin.register(Edge)
 class EdgeAdmin(admin.ModelAdmin):
     list_display = [
         "uuid",
-        "in_node",
-        "out_node",
+        "in_node_door",
+        "out_node_door",
+    ]
+
+    search_fields = [
+        "in_node_door__node__name",
+        "out_node_door__node__name",
+    ]
+
+    autocomplete_fields = [
+        "in_node_door",
+        "out_node_door",
     ]
 
     list_filter = [
-        "in_node__graph",
+        "in_node_door__node__graph",
     ]
 
 
@@ -87,10 +133,18 @@ class ScriptCellAdmin(admin.ModelAdmin):
         "cell_type",
     ]
 
+    search_fields = [
+        "node__name",
+    ]
+
     readonly_fields = [
         "uuid",
     ]
 
+    autocomplete_fields = [
+        "node",
+    ]
+
 
 @admin.register(AudioCell)
 class AudioCellAdmin(admin.ModelAdmin):
@@ -98,8 +152,17 @@ class AudioCellAdmin(admin.ModelAdmin):
 
     readonly_fields = ["uuid"]
 
+    search_fields = [
+        "uuid",
+        "node__name",
+    ]
+
     list_filter = [
         "playback",
         "script_cell__node__graph",
         "script_cell__node",
     ]
+
+    autocomplete_fields = [
+        "audio_file",
+    ]
diff --git a/caster-back/stream/admin.py b/caster-back/stream/admin.py
index 9b5d1a3e..7b6b058d 100644
--- a/caster-back/stream/admin.py
+++ b/caster-back/stream/admin.py
@@ -22,7 +22,13 @@ class StreamLogInline(admin.TabularInline):
 
     fields = ["created_date", "name", "level", "message"]
 
-    readonly_fields = fields
+    search_fields = [
+        "name",
+        "level",
+        "message",
+    ]
+
+    readonly_fields = ["created_date", "name", "level", "message"]
 
 
 @admin.register(Stream)
@@ -41,6 +47,14 @@ class StreamAdmin(admin.ModelAdmin):
         "num_listeners",
     ]
 
+    autocomplete_fields = [
+        "stream_point",
+    ]
+
+    search_fields = [
+        "uuid",
+    ]
+
 
 @admin.register(StreamPoint)
 class StreamPointAdmin(admin.ModelAdmin):
@@ -55,12 +69,19 @@ class StreamPointAdmin(admin.ModelAdmin):
         "host",
         "port",
         "last_live",
+        "uuid",
     ]
 
     list_filter = [
         "host",
     ]
 
+    search_fields = [
+        "host",
+        "port",
+        "uuid",
+    ]
+
 
 @admin.register(StreamInstruction)
 class StreamInstructionAdmin(admin.ModelAdmin):
@@ -82,6 +103,15 @@ class StreamInstructionAdmin(admin.ModelAdmin):
         "return_value",
     ]
 
+    search_fields = [
+        "uuid",
+        "return_value",
+    ]
+
+    autocomplete_fields = [
+        "stream_point",
+    ]
+
 
 @admin.register(AudioFile)
 class AudioFileAdmin(admin.ModelAdmin):
@@ -98,6 +128,11 @@ class AudioFileAdmin(admin.ModelAdmin):
         "modified_date",
     ]
 
+    search_fields = [
+        "uuid",
+        "name",
+    ]
+
     list_filter = ["created_date", "auto_generated"]
 
 
@@ -123,6 +158,11 @@ class TextToSpeechAdmin(admin.ModelAdmin):
         "voice_name",
     ]
 
+    search_fields = [
+        "text",
+        "uuid",
+    ]
+
 
 @admin.register(StreamVariable)
 class StreamVariableAdmin(admin.ModelAdmin):
@@ -138,6 +178,17 @@ class StreamVariableAdmin(admin.ModelAdmin):
         "stream__stream_point",
     ]
 
+    search_fields = [
+        "uuid",
+        "key",
+        "value",
+        "stream__graph__name",
+    ]
+
+    autocomplete_fields = [
+        "stream",
+    ]
+
 
 @admin.register(StreamLog)
 class StreamLogAdmin(admin.ModelAdmin):
@@ -152,4 +203,9 @@ class StreamLogAdmin(admin.ModelAdmin):
         "level",
     ]
 
+    autocomplete_fields = [
+        "stream_point",
+        "stream",
+    ]
+
     search_fields = ["message"]

From f09eceb42eb1abdf9b5c88d10192a930c36d62a8 Mon Sep 17 00:00:00 2001
From: Dennis Scheiba <dennis.scheiba@gmx.de>
Date: Mon, 4 Sep 2023 22:37:32 +0200
Subject: [PATCH 31/51] replace edge with node door gql types

---
 caster-back/story_graph/types.py | 60 ++++++++++++++++++++++++++++----
 1 file changed, 53 insertions(+), 7 deletions(-)

diff --git a/caster-back/story_graph/types.py b/caster-back/story_graph/types.py
index 899a1fb2..a6d5854b 100644
--- a/caster-back/story_graph/types.py
+++ b/caster-back/story_graph/types.py
@@ -21,6 +21,7 @@
 CellType = strawberry.enum(models.CellType)  # type: ignore
 PlaybackType = strawberry.enum(models.AudioCell.PlaybackChoices)  # type: ignore
 TemplateType = strawberry.enum(models.Graph.GraphDetailTemplate)  # type: ignore
+NodeDoorType = strawberry.enum(models.NodeDoor.DoorType)  # type: ignore
 
 
 @strawberry.input
@@ -43,8 +44,8 @@ class NodeUpdate:
 
 @strawberry.input
 class EdgeInput:
-    node_in_uuid: uuid.UUID
-    node_out_uuid: uuid.UUID
+    node_door_in_uuid: uuid.UUID
+    node_door_out_uuid: uuid.UUID
 
 
 @strawberry.django.filters.filter(models.Graph, lookups=True)
@@ -67,7 +68,7 @@ class Graph:
 
     @strawberry.django.field
     def edges(self) -> List["Edge"]:
-        return models.Edge.objects.filter(in_node__graph=self)  # type: ignore
+        return models.Edge.objects.filter(out_node_door__node__graph=self)  # type: ignore
 
 
 @strawberry.django.type(models.Node)
@@ -79,16 +80,61 @@ class Node:
     position_y: auto
     is_entry_node: auto
 
-    in_edges: List["Edge"]
-    out_edges: List["Edge"]
     script_cells: List["ScriptCell"]
+    node_doors: List["NodeDoor"]
+
+    @strawberry.django.field
+    def in_node_doors(self) -> List["NodeDoor"]:
+        return models.NodeDoor.objects.filter(
+            node=self,
+            door_type=models.NodeDoor.DoorType.INPUT,
+        )  # type: ignore
+
+    @strawberry.django.field
+    def out_node_doors(self) -> List["NodeDoor"]:
+        return models.NodeDoor.objects.filter(
+            node=self,
+            door_type=models.NodeDoor.DoorType.OUTPUT,
+        )  # type: ignore
+
+
+@strawberry.django.type(models.NodeDoor)
+class NodeDoor:
+    uuid: auto
+    door_type: NodeDoorType  # type: ignore
+    node: Node
+    name: auto
+    order: auto
+    is_default: auto
+    code: auto
+
+
+@strawberry.django.input(models.NodeDoor)
+class NodeDoorInputCreate:
+    # default is disabled as it is not possible for a user
+    # to create a default door
+    door_type: NodeDoorType  # type: ignore
+    name: auto
+    order: auto
+    code: auto
+
+
+# @strawberry.django.input(models.NodeDoor) - using this makes
+# some mandatory fields optional - so we use a manual setup
+@strawberry.input
+class NodeDoorInputUpdate:
+    uuid: uuid.UUID
+    door_type: NodeDoorType = models.NodeDoor.DoorType.OUTPUT  # type: ignore
+    name: Optional[str] = None
+    order: Optional[int] = None
+    code: Optional[str] = None
 
 
 @strawberry.django.type(models.Edge)
 class Edge:
     uuid: auto
-    in_node: Node
-    out_node: Node
+    in_node_door: NodeDoor
+    out_node_door: NodeDoor
 
 
 @strawberry.django.type(models.AudioCell)

From 30cb22d6fbcf88c5ae6597e5816168fc8e2ac4bb Mon Sep 17 00:00:00 2001
From: Dennis Scheiba <dennis.scheiba@gmx.de>
Date: Mon, 4 Sep 2023 22:38:23 +0200
Subject: [PATCH 32/51] adjust gql tests to node door

---
 caster-back/gencaster/tests.py | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/caster-back/gencaster/tests.py b/caster-back/gencaster/tests.py
index 9defd75e..4974a497 100644
--- a/caster-back/gencaster/tests.py
+++ b/caster-back/gencaster/tests.py
@@ -118,16 +118,18 @@ async def test_add_edge(self):
         out_node: Node = await sync_to_async(NodeTestCase.get_node)(graph=graph)
 
         mutation = """
-            mutation TestMutation($nodeInUuid:UUID!, $nodeOutUuid:UUID!) {
-                addEdge(newEdge: {nodeInUuid: $nodeInUuid, nodeOutUuid: $nodeOutUuid})
+            mutation TestMutation($nodeDoorInUuid:UUID!, $nodeDoorOutUuid:UUID!) {
+                addEdge(newEdge: {nodeDoorInUuid: $nodeDoorInUuid, nodeDoorOutUuid: $nodeDoorOutUuid}) {
+                    uuid
+                }
             }
         """
 
         resp = await schema.execute(
             mutation,
             variable_values={
-                "nodeInUuid": str(in_node.uuid),
-                "nodeOutUuid": str(out_node.uuid),
+                "nodeDoorInUuid": str((await in_node.aget_default_in_door()).uuid),
+                "nodeDoorOutUuid": str((await out_node.aget_default_out_door()).uuid),
             },
             context_value=self.get_login_context(),
         )
@@ -137,8 +139,8 @@ async def test_add_edge(self):
         self.assertEqual(await Edge.objects.all().acount(), 1)
 
         edge: Edge = await Edge.objects.all().afirst()  # type: ignore
-        self.assertEqual(await sync_to_async(lambda: edge.in_node)(), in_node)
-        self.assertEqual(await sync_to_async(lambda: edge.out_node)(), out_node)
+        self.assertEqual((await sync_to_async(lambda: edge.in_node_door.node)()).uuid, in_node.uuid)  # type: ignore
+        self.assertEqual((await sync_to_async(lambda: edge.out_node_door.node)()).uuid, out_node.uuid)  # type: ignore
 
     GRAPH_QUERY = """
         query TestQuery {

From e8b5abbccb4b3e2702235e12e874c59da8ccd888 Mon Sep 17 00:00:00 2001
From: Dennis Scheiba <dennis.scheiba@gmx.de>
Date: Mon, 4 Sep 2023 22:39:14 +0200
Subject: [PATCH 33/51] add tests for node door

---
 caster-back/story_graph/tests.py | 416 +++++++++++++++++++++++++++++--
 1 file changed, 398 insertions(+), 18 deletions(-)

diff --git a/caster-back/story_graph/tests.py b/caster-back/story_graph/tests.py
index b01550a8..b02e30aa 100644
--- a/caster-back/story_graph/tests.py
+++ b/caster-back/story_graph/tests.py
@@ -2,8 +2,10 @@
 import random
 from datetime import datetime
 from typing import Dict, Optional
+from unittest import mock
 
 from asgiref.sync import async_to_sync, sync_to_async
+from django.core.exceptions import ValidationError
 from django.db.utils import IntegrityError
 from django.test import TransactionTestCase
 from mistletoe import Document
@@ -11,9 +13,18 @@
 
 from stream.models import StreamVariable
 
-from .engine import Engine, ScriptCellTimeout
+from .engine import Engine, GraphDeadEnd, InvalidPythonCode, ScriptCellTimeout
 from .markdown_parser import GencasterRenderer
-from .models import AudioCell, CellType, Edge, Graph, Node, ScriptCell
+from .models import (
+    AudioCell,
+    CellType,
+    Edge,
+    Graph,
+    Node,
+    NodeDoor,
+    NodeDoorMissing,
+    ScriptCell,
+)
 
 
 class GraphTestCase(TransactionTestCase):
@@ -62,34 +73,110 @@ def setUp(self) -> None:
         self.out_node: Node = mixer.blend(Node, graph=self.graph)  # type: ignore
 
     @staticmethod
-    def get_edge(**kwargs) -> Edge:
+    def get_edge(create_nodes: bool = True, **kwargs) -> Edge:
+        if create_nodes:
+            node_a = NodeTestCase.get_node()
+            node_b = NodeTestCase.get_node()
+            kwargs["in_node_door"] = node_b.get_default_in_door()
+            kwargs["out_node_door"] = node_a.get_default_out_door()
         return mixer.blend(Edge, **kwargs)  # type: ignore
 
     def test_fail_unique(self):
         Edge(
-            in_node=self.in_node,
-            out_node=self.out_node,
+            in_node_door=self.in_node.get_default_in_door(),
+            out_node_door=self.out_node.get_default_out_door(),
         ).save()
 
         # creating the same edge should fail
         with self.assertRaises(IntegrityError):
             Edge(
-                in_node=self.in_node,
-                out_node=self.out_node,
+                in_node_door=self.in_node.get_default_in_door(),
+                out_node_door=self.out_node.get_default_out_door(),
             ).save()
 
-        # but reverse is possible
-        Edge(
-            in_node=self.out_node,
-            out_node=self.in_node,
-        ).save()
-
     def test_loop(self):
         Edge(
-            in_node=self.in_node,
-            out_node=self.in_node,
+            in_node_door=self.in_node.get_default_in_door(),
+            out_node_door=self.out_node.get_default_out_door(),
         ).save()
 
+    def test_in_node_door_is_input_door(self):
+        node = NodeTestCase.get_node()
+        edge = Edge(
+            in_node_door=node.get_default_out_door(),
+            out_node_door=node.get_default_out_door(),
+        )
+
+        with self.assertRaises(ValidationError):
+            edge.save()
+
+        edge = Edge(
+            in_node_door=node.get_default_in_door(),
+            out_node_door=node.get_default_in_door(),
+        )
+
+        with self.assertRaises(ValidationError):
+            edge.save()
+
+    async def test_outgoing_edges(self):
+        graph = await sync_to_async(GraphTestCase.get_graph)()
+        node_a = await sync_to_async(NodeTestCase.get_node)(
+            graph=graph,
+        )
+        node_b = await sync_to_async(NodeTestCase.get_node)(
+            graph=graph,
+        )
+        node_door_out_a = await node_a.aget_default_out_door()
+        node_door_in_b = await node_b.aget_default_in_door()
+        edge = await Edge.objects.acreate(
+            in_node_door=node_door_in_b,
+            out_node_door=node_door_out_a,
+        )
+        self.assertEqual((await node_door_out_a.out_edges.afirst()).uuid, edge.uuid)  # type: ignore
+        self.assertEqual((await node_door_in_b.in_edges.afirst()).uuid, edge.uuid)  # type: ignore
+
+
+class NodeDoorTestCase(TransactionTestCase):
+    @staticmethod
+    def get_node_door(**kwargs) -> NodeDoor:
+        return mixer.blend(NodeDoor, **kwargs)  # type: ignore
+
+    def test_create_default_doors(self):
+        node = NodeTestCase.get_node()
+        self.assertEqual(NodeDoor.objects.count(), 2)
+        default_in_door = node.get_default_in_door()
+        self.assertEqual(default_in_door.door_type, NodeDoor.DoorType.INPUT)
+        self.assertEqual(default_in_door.node.uuid, node.uuid)
+
+        default_out_door = node.get_default_out_door()
+        self.assertEqual(default_out_door.door_type, NodeDoor.DoorType.OUTPUT)
+        self.assertEqual(default_out_door.node.uuid, node.uuid)
+
+    def test_default_unique(self):
+        node = NodeTestCase.get_node()
+
+        with self.assertRaises(IntegrityError):
+            NodeDoor(
+                node=node,
+                is_default=True,
+                door_type=NodeDoor.DoorType.INPUT,
+            ).save()
+
+        with self.assertRaises(IntegrityError):
+            NodeDoor(
+                node=node,
+                is_default=True,
+                door_type=NodeDoor.DoorType.OUTPUT,
+            ).save()
+
+    def test_get_default_door_missing_exception(self):
+        node = NodeTestCase.get_node()
+        NodeDoor.objects.all().delete()
+        with self.assertRaises(NodeDoorMissing):
+            node.get_default_in_door()
+        with self.assertRaises(NodeDoorMissing):
+            node.get_default_out_door()
+
 
 class GencasterMarkdownTestCase(TransactionTestCase):
     @staticmethod
@@ -256,8 +343,8 @@ async def test_non_blocking_exhausting(self):
         await sync_to_async(self.setup_graph_without_start)()
         entry_node = await self.graph.acreate_entry_node()
         await Edge.objects.acreate(
-            out_node=self.node,
-            in_node=entry_node,
+            out_node_door=await self.node.aget_default_out_door(),
+            in_node_door=await entry_node.aget_default_in_door(),
         )
         self.node.is_blocking_node = False
         await sync_to_async(self.node.save)()
@@ -273,14 +360,20 @@ def setup_with_script_cell(
         cell_code: str,
         stream_variables: Optional[Dict] = None,
         cell_type: CellType = CellType.PYTHON,
+        cell_kwargs: Optional[Dict] = None,
     ):
         from stream.tests import StreamTestCase
 
+        cell_kwargs = cell_kwargs if cell_kwargs else {}
+
         self.graph = GraphTestCase.get_graph()
         self.stream = StreamTestCase.get_stream()
         entry_node = async_to_sync(self.graph.acreate_entry_node)
         self.script_cell = ScriptCellTestCase.get_script_cell(
-            node=entry_node, cell_type=cell_type, cell_code=cell_code
+            node=entry_node,
+            cell_type=cell_type,
+            cell_code=cell_code,
+            **cell_kwargs,
         )
 
     async def helper_create_delayed_stream_variable(
@@ -455,3 +548,290 @@ async def test_yield_dialog(self):
         self.assertEqual(dialog.content[0].text, "Hello World")  # type: ignore
         self.assertEqual(len(dialog.buttons), 1)
         self.assertEqual(dialog.buttons[0].text, "OK")
+
+    @mock.patch("stream.models.StreamPoint.speak_on_stream")
+    async def test_execute_markdown_code(self, speak_mock: mock.MagicMock):
+        await sync_to_async(self.setup_with_script_cell)(
+            "Hello world",
+            None,
+            cell_type=CellType.MARKDOWN,
+        )
+        engine = Engine(self.graph, self.stream, raise_exceptions=True)
+        with mock.patch.object(engine, "wait_for_finished_instruction") as patch:
+            x = engine.start().__aiter__()
+            with self.assertRaises(StopAsyncIteration):
+                for _ in range(2):
+                    await asyncio.wait_for(x.__anext__(), 0.2)
+            assert patch.called
+        speak_mock.assert_called_once_with("<speak>Hello world</speak>")
+
+    @mock.patch("stream.models.StreamPoint.send_raw_instruction")
+    async def text_execute_sc_code(self, sc_instruction_mock: mock.MagicMock):
+        # @todo this yields no coverage although the tests makes it obvious
+        # that the code is executed
+        from stream.models import StreamInstruction
+
+        await sync_to_async(self.setup_with_script_cell)(
+            "2+2",
+            None,
+            cell_type=CellType.SUPERCOLLIDER,
+        )
+        engine = Engine(self.graph, self.stream, raise_exceptions=True)
+        with mock.patch.object(engine, "wait_for_finished_instruction") as patch:
+            x = engine.start().__aiter__()
+            with self.assertRaises(StopAsyncIteration):
+                for _ in range(4):
+                    await asyncio.wait_for(x.__anext__(), 0.2)
+            assert patch.called
+        self.assertEqual(await StreamInstruction.objects.acount(), 1)
+        sc_instruction_mock.assert_called_once_with("2+2")
+
+    @mock.patch("stream.models.StreamPoint.play_audio_file")
+    async def test_execute_audio_cell(self, play_audio_file_mock: mock.MagicMock):
+        audio_cell = await sync_to_async(AudioCellTestCase.get_audio_cell)()
+        await sync_to_async(self.setup_with_script_cell)(
+            cell_code="2+2",
+            stream_variables=None,
+            cell_type=CellType.AUDIO,
+            cell_kwargs={"audio_cell": audio_cell},
+        )
+        engine = Engine(self.graph, self.stream, raise_exceptions=True)
+        with mock.patch.object(engine, "wait_for_finished_instruction") as patch:
+            x = engine.start().__aiter__()
+            with self.assertRaises(StopAsyncIteration):
+                for _ in range(4):
+                    await asyncio.wait_for(x.__anext__(), 0.2)
+            assert patch.called
+        play_audio_file_mock.assert_called_once_with(
+            audio_cell.audio_file, audio_cell.playback
+        )
+
+    async def test_wait_for_finished_instruction_timeout(self):
+        from stream.models import StreamInstruction
+
+        await sync_to_async(self.setup_with_script_cell)(
+            cell_code="2+2",
+            cell_type=CellType.SUPERCOLLIDER,
+        )
+        engine = Engine(self.graph, self.stream, raise_exceptions=True)
+        instruction = StreamInstruction(
+            stream_point=self.stream.stream_point,
+            state=StreamInstruction.InstructionState.SENT,
+            instruction_text="",
+        )
+        await instruction.asave()
+
+        with self.assertRaises(asyncio.TimeoutError):
+            await engine.wait_for_finished_instruction(
+                instruction=instruction,
+                timeout=0.01,
+                interval=0.001,
+            )
+
+    async def test_wait_for_finished_instruction(self):
+        from stream.models import StreamInstruction
+
+        async def set_instruction_finished_with_delay(
+            stream_instruction: StreamInstruction, delay: float
+        ):
+            await asyncio.sleep(delay)
+            stream_instruction.state = StreamInstruction.InstructionState.FINISHED
+            await stream_instruction.asave()
+
+        await sync_to_async(self.setup_with_script_cell)(
+            cell_code="2+2",
+            cell_type=CellType.SUPERCOLLIDER,
+        )
+        engine = Engine(self.graph, self.stream, raise_exceptions=True)
+        instruction = StreamInstruction(
+            stream_point=self.stream.stream_point,
+            state=StreamInstruction.InstructionState.SENT,
+            instruction_text="",
+        )
+        await instruction.asave()
+
+        job = asyncio.gather(
+            set_instruction_finished_with_delay(instruction, 0.1),
+            engine.wait_for_finished_instruction(
+                instruction=instruction,
+                timeout=1.0,
+                interval=0.1,
+            ),
+        )
+        await asyncio.wait_for(job, timeout=0.5)
+
+        self.assertEqual((await StreamInstruction.objects.afirst()).state, StreamInstruction.InstructionState.FINISHED)  # type: ignore
+
+    async def test_evaluate_python_code(self):
+        await sync_to_async(self.setup_with_script_cell)(
+            cell_code="2+2",
+            cell_type=CellType.SUPERCOLLIDER,
+        )
+        engine = Engine(self.graph, self.stream, raise_exceptions=True)
+
+        with self.assertRaises(InvalidPythonCode):
+            await engine._evaluate_python_code("2+")
+
+        with self.assertRaises(InvalidPythonCode):
+            await engine._evaluate_python_code("'foobar'")
+
+        self.assertTrue(await engine._evaluate_python_code("2==2"))
+        self.assertFalse(await engine._evaluate_python_code("2==1"))
+
+    async def test_get_next_node(self):
+        await sync_to_async(self.setup_with_script_cell)(
+            "2+2",
+            None,
+            cell_type=CellType.PYTHON,
+        )
+        engine = Engine(self.graph, self.stream, raise_exceptions=True)
+        # start node
+        node_a: Node = await Node.objects.afirst()  # type: ignore
+        node_b = await Node.objects.acreate(
+            graph=self.graph,
+        )
+        # make sure all default doors are there
+        self.assertEqual(await NodeDoor.objects.acount(), 4)
+        await Edge.objects.acreate(
+            out_node_door=await node_a.aget_default_out_door(),
+            in_node_door=await node_b.aget_default_in_door(),
+        )
+        self.assertEqual(await Edge.objects.acount(), 1)
+        engine._current_node = node_a
+        next_node = await engine.get_next_node()
+        self.assertEqual(next_node.uuid, node_b.uuid)
+
+    async def test_get_next_node_with_vars(self):
+        await sync_to_async(self.setup_with_script_cell)(
+            "2+2",
+            None,
+            cell_type=CellType.PYTHON,
+        )
+        engine = Engine(self.graph, self.stream, raise_exceptions=True)
+        # start node
+        node_a: Node = await Node.objects.afirst()  # type: ignore
+        node_b = await Node.objects.acreate(
+            graph=self.graph,
+        )
+        node_c = await Node.objects.acreate(
+            graph=self.graph,
+        )
+        await Edge.objects.acreate(
+            out_node_door=await node_a.aget_default_out_door(),
+            in_node_door=await node_b.aget_default_in_door(),
+        )
+        custom_node_door = await NodeDoor.objects.acreate(
+            door_type=NodeDoor.DoorType.OUTPUT,
+            node=node_a,
+            name="foobar",
+            is_default=False,
+            code="2==2",
+        )
+
+        await Edge.objects.acreate(
+            out_node_door=custom_node_door,
+            in_node_door=await node_c.aget_default_in_door(),
+        )
+        self.assertEqual(await Edge.objects.acount(), 2)
+        # make sure all default doors are there
+        self.assertEqual(await NodeDoor.objects.acount(), 7)
+
+        engine._current_node = node_a
+        next_node = await engine.get_next_node()
+        self.assertEqual(next_node.uuid, node_c.uuid)
+
+    async def test_failed_node_door_code(self):
+        await sync_to_async(self.setup_with_script_cell)(
+            "2+2",
+            None,
+            cell_type=CellType.PYTHON,
+        )
+        engine = Engine(self.graph, self.stream, raise_exceptions=True)
+        # start node
+        node_a: Node = await Node.objects.afirst()  # type: ignore
+        node_b = await Node.objects.acreate(
+            graph=self.graph,
+        )
+        node_c = await Node.objects.acreate(
+            graph=self.graph,
+        )
+        await Edge.objects.acreate(
+            out_node_door=await node_a.aget_default_out_door(),
+            in_node_door=await node_b.aget_default_in_door(),
+        )
+        custom_node_door = await NodeDoor.objects.acreate(
+            door_type=NodeDoor.DoorType.OUTPUT,
+            node=node_a,
+            name="foobar",
+            is_default=False,
+            code="2==",
+        )
+
+        await Edge.objects.acreate(
+            out_node_door=custom_node_door,
+            in_node_door=await node_c.aget_default_in_door(),
+        )
+        self.assertEqual(await Edge.objects.acount(), 2)
+        # make sure all default doors are there
+        self.assertEqual(await NodeDoor.objects.acount(), 7)
+
+        engine._current_node = node_a
+        next_node = await engine.get_next_node()
+        self.assertEqual(next_node.uuid, node_b.uuid)
+
+    async def test_node_door_code_false(self):
+        await sync_to_async(self.setup_with_script_cell)(
+            "2+2",
+            None,
+            cell_type=CellType.PYTHON,
+        )
+        engine = Engine(self.graph, self.stream, raise_exceptions=True)
+        # start node
+        node_a: Node = await Node.objects.afirst()  # type: ignore
+        node_b = await Node.objects.acreate(
+            graph=self.graph,
+        )
+        node_c = await Node.objects.acreate(
+            graph=self.graph,
+        )
+        await Edge.objects.acreate(
+            out_node_door=await node_a.aget_default_out_door(),
+            in_node_door=await node_b.aget_default_in_door(),
+        )
+        stream_variable = await StreamVariable.objects.acreate(
+            stream=self.stream,
+            key="foo",
+            value="bar",
+        )
+        custom_node_door = await NodeDoor.objects.acreate(
+            door_type=NodeDoor.DoorType.OUTPUT,
+            node=node_a,
+            name="foobar",
+            is_default=False,
+            code='vars["foo"]=="bar"',
+        )
+
+        await Edge.objects.acreate(
+            out_node_door=custom_node_door,
+            in_node_door=await node_c.aget_default_in_door(),
+        )
+        self.assertEqual(await Edge.objects.acount(), 2)
+        # make sure all default doors are there
+        self.assertEqual(await NodeDoor.objects.acount(), 7)
+
+        engine._current_node = node_a
+        next_node = await engine.get_next_node()
+        self.assertEqual(next_node.uuid, node_c.uuid)
+
+    async def test_run_into_dead_end(self):
+        await sync_to_async(self.setup_with_script_cell)(
+            "2+2",
+            None,
+            cell_type=CellType.PYTHON,
+        )
+        start_node = await Node.objects.afirst()
+        engine = Engine(self.graph, self.stream, raise_exceptions=True)
+        engine._current_node = start_node  # type: ignore
+
+        with self.assertRaises(GraphDeadEnd):
+            await engine.get_next_node()

From 4d430445572d3dc29991b84c21029bbabd165cd8 Mon Sep 17 00:00:00 2001
From: Dennis Scheiba <dennis.scheiba@gmx.de>
Date: Mon, 4 Sep 2023 22:40:35 +0200
Subject: [PATCH 34/51] add node door operations

---
 caster-back/operations.gql   |  66 ++++-
 caster-back/schema.gql       | 215 ++++++++++++++--
 caster-editor/src/graphql.ts | 486 ++++++++++++++++++++++++++++++++---
 caster-front/src/graphql.ts  | 486 ++++++++++++++++++++++++++++++++---
 4 files changed, 1167 insertions(+), 86 deletions(-)

diff --git a/caster-back/operations.gql b/caster-back/operations.gql
index 963a32a8..efb659fe 100644
--- a/caster-back/operations.gql
+++ b/caster-back/operations.gql
@@ -67,8 +67,10 @@ query GetGraphsMeta($slug: String!) {
   }
 }
 
-mutation createEdge($nodeInUuid:UUID!, $nodeOutUuid:UUID!) {
-  addEdge(newEdge: {nodeInUuid: $nodeInUuid, nodeOutUuid: $nodeOutUuid})
+mutation createEdge($nodeDoorInUuid:UUID!, $nodeDoorOutUuid:UUID!) {
+  addEdge(newEdge: {nodeDoorInUuid: $nodeDoorInUuid, nodeDoorOutUuid: $nodeDoorOutUuid}) {
+    uuid
+  }
 }
 
 mutation createNode($name: String!, $graphUuid: UUID!, $color: String, $positionX: Float, $positionY: Float) {
@@ -112,17 +114,27 @@ mutation deleteScriptCell($scriptCellUuid:UUID!) {
   deleteScriptCell(scriptCellUuid: $scriptCellUuid)
 }
 
+fragment NodeDoorBasic on NodeDoor {
+  uuid
+  name
+  order
+  isDefault
+  node {
+    uuid
+  }
+}
+
 subscription graph($uuid: UUID!) {
   graph(graphUuid: $uuid) {
     name
     uuid
     edges {
       uuid
-      outNode {
-        uuid
+      inNodeDoor {
+        ...NodeDoorBasic
       }
-      inNode {
-        uuid
+      outNodeDoor {
+        ...NodeDoorBasic
       }
     }
     nodes {
@@ -137,12 +149,33 @@ subscription graph($uuid: UUID!) {
       positionX
       positionY
       color
+      inNodeDoors {
+        ...NodeDoorBasic
+      }
+      outNodeDoors {
+        ...NodeDoorBasic
+      }
     }
   }
 }
 
+fragment NodeDoorDetail on NodeDoor {
+  uuid
+  name
+  order
+  isDefault
+  code
+  doorType
+}
+
 subscription node($uuid: UUID!) {
   node(nodeUuid: $uuid) {
+    inNodeDoors {
+      ...NodeDoorDetail
+    }
+    outNodeDoors {
+      ...NodeDoorDetail
+    }
     color
     name
     positionX
@@ -355,3 +388,24 @@ subscription StreamLogs($streamUuid: UUID, $streamPointUuid: UUID) {
     }
   }
 }
+
+mutation createNodeDoor($nodeUuid: UUID!, $name: String!, $code: String! = "", $doorType: DoorType = OUTPUT, $order: Int) {
+  createNodeDoor(
+    nodeDoorInput: {name: $name, code: $code, doorType: $doorType, order: $order}
+    nodeUuid: $nodeUuid
+  ) {
+    uuid
+  }
+}
+
+mutation deleteNodeDoor($nodeDoorUuid: UUID!) {
+  deleteNodeDoor(nodeDoorUuid: $nodeDoorUuid)
+}
+
+mutation updateNodeDoor($uuid: UUID!, $name: String, $code: String, $order: Int) {
+  updateNodeDoor(
+    nodeDoorInput: {name: $name, code: $code, order: $order, uuid: $uuid}
+  ) {
+    uuid
+  }
+}
diff --git a/caster-back/schema.gql b/caster-back/schema.gql
index 2d23164c..320c5aa1 100644
--- a/caster-back/schema.gql
+++ b/caster-back/schema.gql
@@ -1,4 +1,3 @@
-### START LOGGING THREAD LOOP ###
 input AddAudioFile {
   file: Upload!
   description: String!
@@ -56,7 +55,7 @@ input AddGraphInput {
   templateName: GraphDetailTemplate
 }
 
-"""AudioCell(uuid, playback, audio_file, volume)"""
+"""Stores information for playback of static audio files."""
 type AudioCell {
   uuid: UUID!
   playback: PlaybackChoices!
@@ -64,7 +63,7 @@ type AudioCell {
   audioFile(pagination: OffsetPaginationInput): AudioFile!
 }
 
-"""AudioCell(uuid, playback, audio_file, volume)"""
+"""Stores information for playback of static audio files."""
 input AudioCellInput {
   uuid: UUID = null
   playback: PlaybackChoices
@@ -164,7 +163,7 @@ enum CallbackAction {
   SEND_VARIABLE
 }
 
-"""Choice of foobar"""
+"A :class:`~story_graph.models.ScriptCell` can contain\ndifferent types of code, each with unique functionality.\n\nBoth, the database and :class:`~story_graph.engine.Engine`,\nimplement some specific details according to these types.\n\n.. list-table:: Cell types\n    :header-rows: 1\n\n    * - Name\n      - Description\n      - Database\n      - Engine\n    * - Markdown\n      - Allows to write arbitrary text which will get\n        rendered as an audio file via a text to speech service,\n        see :class:`~stream.models.TextToSpeech` for conversion\n        and :class:`~story_graph.markdown_parser.GencasterRenderer`\n        for the extended Markdown syntax.\n      - - :class:`~stream.models.TextToSpeech`\n      - - :func:`~story_graph.engine.Engine.execute_markdown_code`\n        - :class:`~story_graph.markdown_parser.GencasterRenderer`\n    * - Python\n      - Allows to execute python code via :func:`exec` which allows\n        to trigger e.g. Dialogs in the frontend\n        (see :class:`~stream.frontend_types.Dialog`)\n        or calculate or fetch any kind of data and store its value\n        as a :class:`~stream.models.StreamVariable`.\n      - \n      - - :func:`~story_graph.engine.Engine.execute_python_cell`\n    * - SuperCollider\n      - Executes *sclang* code on the associated server.\n        This can be used to control the sonic content on the server.\n      - - :class:`~stream.models.StreamInstruction`\n      - - :func:`~story_graph.engine.Engine.execute_sc_code`\n        - :ref:`OSC Server`\n    * - Comment\n      - Does not get executed, but allows to put comments into\n        the graph.\n      - \n      -\n    * - Audio\n      - Allows to playback static audio files.\n        The instruction will be translated into *sclang* code and will\n        be executed as such on the associated stream.\n      - - :class:`~story_graph.models.AudioCell`\n        - :class:`~stream.models.AudioFile`\n      - - :func:`~story_graph.engine.Engine.execute_audio_cell`\n    "
 enum CellType {
   MARKDOWN
   PYTHON
@@ -203,25 +202,83 @@ type DjangoFileType {
   url: String!
 }
 
-"""
-Connects two :class:`~Node` with each other.
-
-.. todo::
-
-    With a script we can also jump to any other node
-    so it is not clear how to use this.
-    Maybe take a look at visual programming languages
-    such as MSP or Scratch how they handle this?
+"""An enumeration."""
+enum DoorType {
+  INPUT
+  OUTPUT
+}
+
+"""
+Connects two :class:`~Node` with each other by
+using their respective :class:`~NodeDoor`.
+
+.. important::
+
+    It is important to note that an edge flows from
+    ``out_node_door`` to ``in_node_door`` as we follow
+    the notion from the perspective of a
+    :class:`story_graph.models.Node` rather than from the
+    edge.
+
+
+.. graphviz::
+
+    digraph Connection {
+        rank = same;
+        subgraph cluster_node_a {
+            rank = same;
+            label = "NODE_A";
+            NODE_A [shape=Msquare, label="NODE_A\n\nscript_cell_1\nscript_cell_2"];
+            subgraph cluster_in_nodes_a {
+                label = "IN_NODES";
+                in_node_door_a [label="in_node_door"];
+            }
+            subgraph cluster_out_nodes_a {
+                label = "OUT_NODES";
+                out_node_door_a_1 [label="out_node_door 1"];
+                out_node_door_a_2 [label="out_node_door 2"];
+            }
+            in_node_door_a -> NODE_A [label="DB\nreference"];
+            {out_node_door_a_1, out_node_door_a_2} -> NODE_A;
+            in_node_door_a -> NODE_A [style=dashed, color=red, fontcolor=red, label="Engine\nProgression"];
+            NODE_A -> out_node_door_a_1 [style=dashed, color=red];
+        }
+
+        edge_ [shape=Msquare, label="EDGE"];
+        edge_ -> out_node_door_a_1 [label="out_node_door"];
+        edge_ -> in_node_door_b [label="in_node_door"];
+        out_node_door_a_1 -> edge_ [style=dashed, color=red];
+        edge_ -> in_node_door_b [style=dashed, color=red];
+
+        subgraph cluster_node_b {
+            rank = same;
+            label = "NODE_B";
+            NODE_B [shape=Msquare];
+            subgraph cluster_in_nodes_b {
+                label = "IN_NODES";
+                in_node_door_b [label="in_node_door"];
+            }
+            subgraph cluster_out_nodes_b {
+                label = "OUT_NODES";
+                out_node_door_b_1 [label="out_node_door 1"];
+                out_node_door_b_2 [label="out_node_door 2"];
+            }
+            in_node_door_b -> NODE_B;
+            {out_node_door_b_1, out_node_door_b_2} -> NODE_B;
+            in_node_door_b -> NODE_B [style=dashed, color=red];
+            NODE_B -> out_node_door_b_1 [style=dashed, color=red];
+        }
+    }
 """
 type Edge {
   uuid: UUID!
-  inNode: Node!
-  outNode: Node!
+  inNodeDoor: NodeDoor
+  outNodeDoor: NodeDoor
 }
 
 input EdgeInput {
-  nodeInUuid: UUID!
-  nodeOutUuid: UUID!
+  nodeDoorInUuid: UUID!
+  nodeDoorOutUuid: UUID!
 }
 
 """
@@ -361,9 +418,9 @@ type Mutation {
   """
   Creates a :class:`~story_graph.models.Edge` for a given
   :class:`~story_graph.models.Graph`.
-  It does not return the created edge.
+  It returns the created edge.
   """
-  addEdge(newEdge: EdgeInput!): Void
+  addEdge(newEdge: EdgeInput!): Edge!
 
   """Deletes a given :class:`~story_graph.models.Edge`."""
   deleteEdge(edgeUuid: UUID!): Void
@@ -382,6 +439,14 @@ type Mutation {
   addGraph(graphInput: AddGraphInput!): Graph!
   addAudioFile(newAudioFile: AddAudioFile!): AudioFileUploadResponse!
   createUpdateStreamVariable(streamVariables: [StreamVariableInput!]!): [StreamVariable!]!
+  createNodeDoor(nodeDoorInput: NodeDoorInputCreate!, nodeUuid: UUID!): NodeDoor!
+  updateNodeDoor(nodeDoorInput: NodeDoorInputUpdate!): NodeDoor!
+
+  """
+  Allows to delete a non-default NodeDoor.
+  If a node door was deleted it will return ``True``, otherwise ``False``.
+  """
+  deleteNodeDoor(nodeDoorUuid: UUID!): Boolean!
 }
 
 """Matches :class:`gencaster.stream.exceptions.NoStreamAvailable`."""
@@ -407,9 +472,10 @@ type Node {
   Acts as a singular entrypoint for our graph.Only one such node can exist per graph.
   """
   isEntryNode: Boolean!
-  inEdges: [Edge!]!
-  outEdges: [Edge!]!
   scriptCells: [ScriptCell!]!
+  nodeDoors: [NodeDoor!]!
+  inNodeDoors: [NodeDoor!]!
+  outNodeDoors: [NodeDoor!]!
 }
 
 input NodeCreate {
@@ -420,6 +486,95 @@ input NodeCreate {
   color: String = null
 }
 
+"""
+A :class:`~Node` can be entered and exited via
+multiple paths, where each of these exits and
+entrances is called a *door*.
+
+A connection between nodes can only be made via their
+doors.
+There are two types of doors:
+
+.. list-table:: Door types
+    :header-rows: 1
+
+    * - Kind
+      - Description
+    * - **INPUT**
+      - Allows to enter a node.
+        Currently each Node only has one entry point
+        but for future development and a nicer
+        database operations it is also represented.
+    * - **OUTPUT**
+      - Allows to exit a node.
+        After all script cells of a node has been
+        executed, the condition of each door will
+        be evaluated (like in a switch case).
+        Once a condition has been met, the door
+        will be stepped through.
+        This allows to have a visual representation
+        of logic branches.
+
+It is only possible to connect an **OUTPUT** to an
+**INPUT** door via an :class:`~Edge`.
+"""
+type NodeDoor {
+  uuid: UUID!
+  doorType: DoorType!
+  node: Node!
+  name: String!
+  order: Int!
+  isDefault: Boolean!
+  code: String!
+}
+
+"""
+A :class:`~Node` can be entered and exited via
+multiple paths, where each of these exits and
+entrances is called a *door*.
+
+A connection between nodes can only be made via their
+doors.
+There are two types of doors:
+
+.. list-table:: Door types
+    :header-rows: 1
+
+    * - Kind
+      - Description
+    * - **INPUT**
+      - Allows to enter a node.
+        Currently each Node only has one entry point
+        but for future development and a nicer
+        database operations it is also represented.
+    * - **OUTPUT**
+      - Allows to exit a node.
+        After all script cells of a node has been
+        executed, the condition of each door will
+        be evaluated (like in a switch case).
+        Once a condition has been met, the door
+        will be stepped through.
+        This allows to have a visual representation
+        of logic branches.
+
+It is only possible to connect an **OUTPUT** to an
+**INPUT** door via an :class:`~Edge`.
+"""
+input NodeDoorInputCreate {
+  doorType: DoorType
+  name: String!
+  order: Int
+  code: String
+}
+
+input NodeDoorInputUpdate {
+  uuid: UUID!
+  doorType: DoorType! = OUTPUT
+  name: String = null
+  order: Int = null
+  code: String = null
+}
+
 input NodeUpdate {
   uuid: UUID!
   name: String = null
@@ -433,7 +588,23 @@ input OffsetPaginationInput {
   limit: Int! = -1
 }
 
-"""An enumeration."""
+"""
+Different kinds of playback.
+
+.. list-table:: Playback types
+    :header-rows: 1
+
+    * - Name
+      - Description
+    * - ``SYNC``
+      - Plays back an audio file and waits for the
+        playback to finish before continuing the
+        execution of the script cells.
+    * - ``ASYNC``
+      - Plays back an audio file and immediately
+        continues the execution of script cells.
+        This is fitting for e.g. background music.
+"""
 enum PlaybackChoices {
   SYNC_PLAYBACK
   ASYNC_PLAYBACK
diff --git a/caster-editor/src/graphql.ts b/caster-editor/src/graphql.ts
index f2ea908a..a931782c 100644
--- a/caster-editor/src/graphql.ts
+++ b/caster-editor/src/graphql.ts
@@ -68,7 +68,7 @@ export type AddGraphInput = {
   templateName?: InputMaybe<GraphDetailTemplate>;
 };
 
-/** AudioCell(uuid, playback, audio_file, volume) */
+/** Stores information for playback of static audio files. */
 export type AudioCell = {
   audioFile: AudioFile;
   playback: PlaybackChoices;
@@ -76,12 +76,12 @@ export type AudioCell = {
   volume: Scalars["Float"];
 };
 
-/** AudioCell(uuid, playback, audio_file, volume) */
+/** Stores information for playback of static audio files. */
 export type AudioCellAudioFileArgs = {
   pagination?: InputMaybe<OffsetPaginationInput>;
 };
 
-/** AudioCell(uuid, playback, audio_file, volume) */
+/** Stores information for playback of static audio files. */
 export type AudioCellInput = {
   audioFile: AudioFileReference;
   playback?: InputMaybe<PlaybackChoices>;
@@ -174,7 +174,57 @@ export enum CallbackAction {
   SendVariables = "SEND_VARIABLES",
 }
 
-/** Choice of foobar */
+/**
+ * A :class:`~story_graph.models.ScriptCell` can contain
+ * different types of code, each with unique functionality.
+ *
+ * Both, the database and :class:`~story_graph.engine.Engine`,
+ * implement some specific details according to these types.
+ *
+ * .. list-table:: Cell types
+ *     :header-rows: 1
+ *
+ *     * - Name
+ *       - Description
+ *       - Database
+ *       - Engine
+ *     * - Markdown
+ *       - Allows to write arbitrary text which will get
+ *         rendered as an audio file via a text to speech service,
+ *         see :class:`~stream.models.TextToSpeech` for conversion
+ *         and :class:`~story_graph.markdown_parser.GencasterRenderer`
+ *         for the extended Markdown syntax.
+ *       - - :class:`~stream.models.TextToSpeech`
+ *       - - :func:`~story_graph.engine.Engine.execute_markdown_code`
+ *         - :class:`~story_graph.markdown_parser.GencasterRenderer`
+ *     * - Python
+ *       - Allows to execute python code via :func:`exec` which allows
+ *         to trigger e.g. Dialogs in the frontend
+ *         (see :class:`~stream.frontend_types.Dialog`)
+ *         or calculate or fetch any kind of data and store its value
+ *         as a :class:`~stream.models.StreamVariable`.
+ *       -
+ *       - - :func:`~story_graph.engine.Engine.execute_python_cell`
+ *     * - SuperCollider
+ *       - Executes *sclang* code on the associated server.
+ *         This can be used to control the sonic content on the server.
+ *       - - :class:`~stream.models.StreamInstruction`
+ *       - - :func:`~story_graph.engine.Engine.execute_sc_code`
+ *         - :ref:`OSC Server`
+ *     * - Comment
+ *       - Does not get executed, but allows to put comments into
+ *         the graph.
+ *       -
+ *       -
+ *     * - Audio
+ *       - Allows to playback static audio files.
+ *         The instruction will be translated into *sclang* code and will
+ *         be executed as such on the associated stream.
+ *       - - :class:`~story_graph.models.AudioCell`
+ *         - :class:`~stream.models.AudioFile`
+ *       - - :func:`~story_graph.engine.Engine.execute_audio_cell`
+ *
+ */
 export enum CellType {
   Audio = "AUDIO",
   Comment = "COMMENT",
@@ -210,25 +260,83 @@ export type DjangoFileType = {
   url: Scalars["String"];
 };
 
+/** An enumeration. */
+export enum DoorType {
+  Input = "INPUT",
+  Output = "OUTPUT",
+}
+
 /**
- * Connects two :class:`~Node` with each other.
+ * Connects two :class:`~Node` with each other by
+ * using their respective :class:`~NodeDoor`.
+ *
+ * .. important::
  *
- * .. todo::
+ *     It is important to note that an edge flows from
+ *     ``out_node_door`` to ``in_node_door`` as we follow
+ *     the notion from the perspective of a
+ *     :class:`story_graph.models.Node` rather than from the
+ *     edge.
  *
- *     With a script we can also jump to any other node
- *     so it is not clear how to use this.
- *     Maybe take a look at visual programming languages
- *     such as MSP or Scratch how they handle this?
+ *
+ * .. graphviz::
+ *
+ *     digraph Connection {
+ *         rank = same;
+ *         subgraph cluster_node_a {
+ *             rank = same;
+ *             label = "NODE_A";
+ *             NODE_A [shape=Msquare, label="NODE_A\n\nscript_cell_1\nscript_cell_2"];
+ *             subgraph cluster_in_nodes_a {
+ *                 label = "IN_NODES";
+ *                 in_node_door_a [label="in_node_door"];
+ *             }
+ *             subgraph cluster_out_nodes_a {
+ *                 label = "OUT_NODES";
+ *                 out_node_door_a_1 [label="out_node_door 1"];
+ *                 out_node_door_a_2 [label="out_node_door 2"];
+ *             }
+ *             in_node_door_a -> NODE_A [label="DB\nreference"];
+ *             {out_node_door_a_1, out_node_door_a_2} -> NODE_A;
+ *             in_node_door_a -> NODE_A [style=dashed, color=red, fontcolor=red, label="Engine\nProgression"];
+ *             NODE_A -> out_node_door_a_1 [style=dashed, color=red];
+ *         }
+ *
+ *         edge_ [shape=Msquare, label="EDGE"];
+ *         edge_ -> out_node_door_a_1 [label="out_node_door"];
+ *         edge_ -> in_node_door_b [label="in_node_door"];
+ *         out_node_door_a_1 -> edge_ [style=dashed, color=red];
+ *         edge_ -> in_node_door_b [style=dashed, color=red];
+ *
+ *         subgraph cluster_node_b {
+ *             rank = same;
+ *             label = "NODE_B";
+ *             NODE_B [shape=Msquare];
+ *             subgraph cluster_in_nodes_b {
+ *                 label = "IN_NODES";
+ *                 in_node_door_b [label="in_node_door"];
+ *             }
+ *             subgraph cluster_out_nodes_b {
+ *                 label = "OUT_NODES";
+ *                 out_node_door_b_1 [label="out_node_door 1"];
+ *                 out_node_door_b_2 [label="out_node_door 2"];
+ *             }
+ *             in_node_door_b -> NODE_B;
+ *             {out_node_door_b_1, out_node_door_b_2} -> NODE_B;
+ *             in_node_door_b -> NODE_B [style=dashed, color=red];
+ *             NODE_B -> out_node_door_b_1 [style=dashed, color=red];
+ *         }
+ *     }
  */
 export type Edge = {
-  inNode: Node;
-  outNode: Node;
+  inNodeDoor?: Maybe<NodeDoor>;
+  outNodeDoor?: Maybe<NodeDoor>;
   uuid: Scalars["UUID"];
 };
 
 export type EdgeInput = {
-  nodeInUuid: Scalars["UUID"];
-  nodeOutUuid: Scalars["UUID"];
+  nodeDoorInUuid: Scalars["UUID"];
+  nodeDoorOutUuid: Scalars["UUID"];
 };
 
 /**
@@ -336,9 +444,9 @@ export type Mutation = {
   /**
    * Creates a :class:`~story_graph.models.Edge` for a given
    * :class:`~story_graph.models.Graph`.
-   * It does not return the created edge.
+   * It returns the created edge.
    */
-  addEdge?: Maybe<Scalars["Void"]>;
+  addEdge: Edge;
   addGraph: Graph;
   /**
    * Creates a new :class:`~story_graph.models.Node` in a given
@@ -348,6 +456,7 @@ export type Mutation = {
   addNode?: Maybe<Scalars["Void"]>;
   authLogin: LoginRequestResponse;
   authLogout: Scalars["Boolean"];
+  createNodeDoor: NodeDoor;
   /** Creates or updates a given :class:`~story_graph.models.ScriptCell` to change its content. */
   createScriptCells: Array<ScriptCell>;
   createUpdateStreamVariable: Array<StreamVariable>;
@@ -355,6 +464,11 @@ export type Mutation = {
   deleteEdge?: Maybe<Scalars["Void"]>;
   /** Deletes a given :class:`~story_graph.models.Node`. */
   deleteNode?: Maybe<Scalars["Void"]>;
+  /**
+   * Allows to delete a non-default NodeDoor.
+   * If a node door was deleted it will return ``True``, otherwise ``False``.
+   */
+  deleteNodeDoor: Scalars["Boolean"];
   /** Deletes a given :class:`~story_graph.models.ScriptCell`. */
   deleteScriptCell?: Maybe<Scalars["Void"]>;
   /** Update metadata of an :class:`~stream.models.AudioFile` via a UUID */
@@ -364,6 +478,7 @@ export type Mutation = {
    * for renaming or moving it across the canvas.
    */
   updateNode?: Maybe<Scalars["Void"]>;
+  updateNodeDoor: NodeDoor;
   updateScriptCells: Array<ScriptCell>;
 };
 
@@ -393,6 +508,12 @@ export type MutationAuthLoginArgs = {
   username: Scalars["String"];
 };
 
+/** Mutations for Gencaster via GraphQL. */
+export type MutationCreateNodeDoorArgs = {
+  nodeDoorInput: NodeDoorInputCreate;
+  nodeUuid: Scalars["UUID"];
+};
+
 /** Mutations for Gencaster via GraphQL. */
 export type MutationCreateScriptCellsArgs = {
   nodeUuid: Scalars["UUID"];
@@ -414,6 +535,11 @@ export type MutationDeleteNodeArgs = {
   nodeUuid: Scalars["UUID"];
 };
 
+/** Mutations for Gencaster via GraphQL. */
+export type MutationDeleteNodeDoorArgs = {
+  nodeDoorUuid: Scalars["UUID"];
+};
+
 /** Mutations for Gencaster via GraphQL. */
 export type MutationDeleteScriptCellArgs = {
   scriptCellUuid: Scalars["UUID"];
@@ -430,6 +556,11 @@ export type MutationUpdateNodeArgs = {
   nodeUpdate: NodeUpdate;
 };
 
+/** Mutations for Gencaster via GraphQL. */
+export type MutationUpdateNodeDoorArgs = {
+  nodeDoorInput: NodeDoorInputUpdate;
+};
+
 /** Mutations for Gencaster via GraphQL. */
 export type MutationUpdateScriptCellsArgs = {
   scriptCellInputs: Array<ScriptCellInputUpdate>;
@@ -443,12 +574,13 @@ export type NoStreamAvailable = {
 /** A node. */
 export type Node = {
   color: Scalars["String"];
-  inEdges: Array<Edge>;
+  inNodeDoors: Array<NodeDoor>;
   /** Acts as a singular entrypoint for our graph.Only one such node can exist per graph. */
   isEntryNode: Scalars["Boolean"];
   /** Name of the node */
   name: Scalars["String"];
-  outEdges: Array<Edge>;
+  nodeDoors: Array<NodeDoor>;
+  outNodeDoors: Array<NodeDoor>;
   /** x-Position in graph canvas */
   positionX: Scalars["Float"];
   /** y-Position in graph canvas */
@@ -465,6 +597,95 @@ export type NodeCreate = {
   positionY?: InputMaybe<Scalars["Float"]>;
 };
 
+/**
+ * A :class:`~Node` can be entered and exited via
+ * multiple paths, where each of these exits and
+ * entrances is called a *door*.
+ *
+ * A connection between nodes can only be made via their
+ * doors.
+ * There are two types of doors:
+ *
+ * .. list-table:: Door types
+ *     :header-rows: 1
+ *
+ *     * - Kind
+ *       - Description
+ *     * - **INPUT**
+ *       - Allows to enter a node.
+ *         Currently each Node only has one entry point
+ *         but for future development and a nicer
+ *         database operations it is also represented.
+ *     * - **OUTPUT**
+ *       - Allows to exit a node.
+ *         After all script cells of a node has been
+ *         executed, the condition of each door will
+ *         be evaluated (like in a switch case).
+ *         Once a condition has been met, the door
+ *         will be stepped through.
+ *         This allows to have a visual representation
+ *         of logic branches.
+ *
+ * It is only possible to connect an **OUTPUT** to an
+ * **INPUT** door via an :class:`~Edge`.
+ */
+export type NodeDoor = {
+  code: Scalars["String"];
+  doorType: DoorType;
+  isDefault: Scalars["Boolean"];
+  name: Scalars["String"];
+  node: Node;
+  order: Scalars["Int"];
+  uuid: Scalars["UUID"];
+};
+
+/**
+ * A :class:`~Node` can be entered and exited via
+ * multiple paths, where each of these exits and
+ * entrances is called a *door*.
+ *
+ * A connection between nodes can only be made via their
+ * doors.
+ * There are two types of doors:
+ *
+ * .. list-table:: Door types
+ *     :header-rows: 1
+ *
+ *     * - Kind
+ *       - Description
+ *     * - **INPUT**
+ *       - Allows to enter a node.
+ *         Currently each Node only has one entry point
+ *         but for future development and a nicer
+ *         database operations it is also represented.
+ *     * - **OUTPUT**
+ *       - Allows to exit a node.
+ *         After all script cells of a node has been
+ *         executed, the condition of each door will
+ *         be evaluated (like in a switch case).
+ *         Once a condition has been met, the door
+ *         will be stepped through.
+ *         This allows to have a visual representation
+ *         of logic branches.
+ *
+ * It is only possible to connect an **OUTPUT** to an
+ * **INPUT** door via an :class:`~Edge`.
+ */
+export type NodeDoorInputCreate = {
+  code?: InputMaybe<Scalars["String"]>;
+  doorType?: InputMaybe<DoorType>;
+  name: Scalars["String"];
+  order?: InputMaybe<Scalars["Int"]>;
+};
+
+export type NodeDoorInputUpdate = {
+  code?: InputMaybe<Scalars["String"]>;
+  doorType?: DoorType;
+  name?: InputMaybe<Scalars["String"]>;
+  order?: InputMaybe<Scalars["Int"]>;
+  uuid: Scalars["UUID"];
+};
+
 export type NodeUpdate = {
   color?: InputMaybe<Scalars["String"]>;
   name?: InputMaybe<Scalars["String"]>;
@@ -478,7 +699,23 @@ export type OffsetPaginationInput = {
   offset?: Scalars["Int"];
 };
 
-/** An enumeration. */
+/**
+ * Different kinds of playback.
+ *
+ * .. list-table:: Playback types
+ *     :header-rows: 1
+ *
+ *     * - Name
+ *       - Description
+ *     * - ``SYNC``
+ *       - Plays back an audio file and waits for the
+ *         playback to finish before continuing the
+ *         execution of the script cells.
+ *     * - ``ASYNC``
+ *       - Plays back an audio file and immediately
+ *         continues the execution of script cells.
+ *         This is fitting for e.g. background music.
+ */
 export enum PlaybackChoices {
   AsyncPlayback = "ASYNC_PLAYBACK",
   SyncPlayback = "SYNC_PLAYBACK",
@@ -884,11 +1121,11 @@ export type GetGraphsMetaQuery = {
 };
 
 export type CreateEdgeMutationVariables = Exact<{
-  nodeInUuid: Scalars["UUID"];
-  nodeOutUuid: Scalars["UUID"];
+  nodeDoorInUuid: Scalars["UUID"];
+  nodeDoorOutUuid: Scalars["UUID"];
 }>;
 
-export type CreateEdgeMutation = { addEdge?: any | null };
+export type CreateEdgeMutation = { addEdge: { uuid: any } };
 
 export type CreateNodeMutationVariables = Exact<{
   name: Scalars["String"];
@@ -945,6 +1182,14 @@ export type DeleteScriptCellMutationVariables = Exact<{
 
 export type DeleteScriptCellMutation = { deleteScriptCell?: any | null };
 
+export type NodeDoorBasicFragment = {
+  uuid: any;
+  name: string;
+  order: number;
+  isDefault: boolean;
+  node: { uuid: any };
+};
+
 export type GraphSubscriptionVariables = Exact<{
   uuid: Scalars["UUID"];
 }>;
@@ -953,7 +1198,23 @@ export type GraphSubscription = {
   graph: {
     name: string;
     uuid: any;
-    edges: Array<{ uuid: any; outNode: { uuid: any }; inNode: { uuid: any } }>;
+    edges: Array<{
+      uuid: any;
+      inNodeDoor?: {
+        uuid: any;
+        name: string;
+        order: number;
+        isDefault: boolean;
+        node: { uuid: any };
+      } | null;
+      outNodeDoor?: {
+        uuid: any;
+        name: string;
+        order: number;
+        isDefault: boolean;
+        node: { uuid: any };
+      } | null;
+    }>;
     nodes: Array<{
       name: string;
       uuid: any;
@@ -966,10 +1227,33 @@ export type GraphSubscription = {
         cellType: CellType;
         uuid: any;
       }>;
+      inNodeDoors: Array<{
+        uuid: any;
+        name: string;
+        order: number;
+        isDefault: boolean;
+        node: { uuid: any };
+      }>;
+      outNodeDoors: Array<{
+        uuid: any;
+        name: string;
+        order: number;
+        isDefault: boolean;
+        node: { uuid: any };
+      }>;
     }>;
   };
 };
 
+export type NodeDoorDetailFragment = {
+  uuid: any;
+  name: string;
+  order: number;
+  isDefault: boolean;
+  code: string;
+  doorType: DoorType;
+};
+
 export type NodeSubscriptionVariables = Exact<{
   uuid: Scalars["UUID"];
 }>;
@@ -981,6 +1265,22 @@ export type NodeSubscription = {
     positionX: number;
     positionY: number;
     uuid: any;
+    inNodeDoors: Array<{
+      uuid: any;
+      name: string;
+      order: number;
+      isDefault: boolean;
+      code: string;
+      doorType: DoorType;
+    }>;
+    outNodeDoors: Array<{
+      uuid: any;
+      name: string;
+      order: number;
+      isDefault: boolean;
+      code: string;
+      doorType: DoorType;
+    }>;
     scriptCells: Array<{
       cellCode: string;
       cellOrder: number;
@@ -1259,6 +1559,31 @@ export type StreamLogsSubscription = {
   };
 };
 
+export type CreateNodeDoorMutationVariables = Exact<{
+  nodeUuid: Scalars["UUID"];
+  name: Scalars["String"];
+  code?: Scalars["String"];
+  doorType?: InputMaybe<DoorType>;
+  order?: InputMaybe<Scalars["Int"]>;
+}>;
+
+export type CreateNodeDoorMutation = { createNodeDoor: { uuid: any } };
+
+export type DeleteNodeDoorMutationVariables = Exact<{
+  nodeDoorUuid: Scalars["UUID"];
+}>;
+
+export type DeleteNodeDoorMutation = { deleteNodeDoor: boolean };
+
+export type UpdateNodeDoorMutationVariables = Exact<{
+  uuid: Scalars["UUID"];
+  name?: InputMaybe<Scalars["String"]>;
+  code?: InputMaybe<Scalars["String"]>;
+  order?: InputMaybe<Scalars["Int"]>;
+}>;
+
+export type UpdateNodeDoorMutation = { updateNodeDoor: { uuid: any } };
+
 export const FullStreamInfoFragmentDoc = gql`
   fragment FullStreamInfo on StreamInfo {
     __typename
@@ -1309,6 +1634,27 @@ export const AudioFileInfoFragmentDoc = gql`
     }
   }
 `;
+export const NodeDoorBasicFragmentDoc = gql`
+  fragment NodeDoorBasic on NodeDoor {
+    uuid
+    name
+    order
+    isDefault
+    node {
+      uuid
+    }
+  }
+`;
+export const NodeDoorDetailFragmentDoc = gql`
+  fragment NodeDoorDetail on NodeDoor {
+    uuid
+    name
+    order
+    isDefault
+    code
+    doorType
+  }
+`;
 export const StreamInfoFragmentFragmentDoc = gql`
   fragment StreamInfoFragment on Stream {
     uuid
@@ -1376,8 +1722,15 @@ export function useGetGraphsMetaQuery(
   });
 }
 export const CreateEdgeDocument = gql`
-  mutation createEdge($nodeInUuid: UUID!, $nodeOutUuid: UUID!) {
-    addEdge(newEdge: { nodeInUuid: $nodeInUuid, nodeOutUuid: $nodeOutUuid })
+  mutation createEdge($nodeDoorInUuid: UUID!, $nodeDoorOutUuid: UUID!) {
+    addEdge(
+      newEdge: {
+        nodeDoorInUuid: $nodeDoorInUuid
+        nodeDoorOutUuid: $nodeDoorOutUuid
+      }
+    ) {
+      uuid
+    }
   }
 `;
 
@@ -1511,11 +1864,11 @@ export const GraphDocument = gql`
       uuid
       edges {
         uuid
-        outNode {
-          uuid
+        inNodeDoor {
+          ...NodeDoorBasic
         }
-        inNode {
-          uuid
+        outNodeDoor {
+          ...NodeDoorBasic
         }
       }
       nodes {
@@ -1530,9 +1883,16 @@ export const GraphDocument = gql`
         positionX
         positionY
         color
+        inNodeDoors {
+          ...NodeDoorBasic
+        }
+        outNodeDoors {
+          ...NodeDoorBasic
+        }
       }
     }
   }
+  ${NodeDoorBasicFragmentDoc}
 `;
 
 export function useGraphSubscription<R = GraphSubscription>(
@@ -1550,6 +1910,12 @@ export function useGraphSubscription<R = GraphSubscription>(
 export const NodeDocument = gql`
   subscription node($uuid: UUID!) {
     node(nodeUuid: $uuid) {
+      inNodeDoors {
+        ...NodeDoorDetail
+      }
+      outNodeDoors {
+        ...NodeDoorDetail
+      }
       color
       name
       positionX
@@ -1578,6 +1944,7 @@ export const NodeDocument = gql`
       uuid
     }
   }
+  ${NodeDoorDetailFragmentDoc}
 `;
 
 export function useNodeSubscription<R = NodeSubscription>(
@@ -1897,3 +2264,64 @@ export function useStreamLogsSubscription<R = StreamLogsSubscription>(
     StreamLogsSubscriptionVariables
   >({ query: StreamLogsDocument, ...options }, handler);
 }
+export const CreateNodeDoorDocument = gql`
+  mutation createNodeDoor(
+    $nodeUuid: UUID!
+    $name: String!
+    $code: String! = ""
+    $doorType: DoorType = OUTPUT
+    $order: Int
+  ) {
+    createNodeDoor(
+      nodeDoorInput: {
+        name: $name
+        code: $code
+        doorType: $doorType
+        order: $order
+      }
+      nodeUuid: $nodeUuid
+    ) {
+      uuid
+    }
+  }
+`;
+
+export function useCreateNodeDoorMutation() {
+  return Urql.useMutation<
+    CreateNodeDoorMutation,
+    CreateNodeDoorMutationVariables
+  >(CreateNodeDoorDocument);
+}
+export const DeleteNodeDoorDocument = gql`
+  mutation deleteNodeDoor($nodeDoorUuid: UUID!) {
+    deleteNodeDoor(nodeDoorUuid: $nodeDoorUuid)
+  }
+`;
+
+export function useDeleteNodeDoorMutation() {
+  return Urql.useMutation<
+    DeleteNodeDoorMutation,
+    DeleteNodeDoorMutationVariables
+  >(DeleteNodeDoorDocument);
+}
+export const UpdateNodeDoorDocument = gql`
+  mutation updateNodeDoor(
+    $uuid: UUID!
+    $name: String
+    $code: String
+    $order: Int
+  ) {
+    updateNodeDoor(
+      nodeDoorInput: { name: $name, code: $code, order: $order, uuid: $uuid }
+    ) {
+      uuid
+    }
+  }
+`;
+
+export function useUpdateNodeDoorMutation() {
+  return Urql.useMutation<
+    UpdateNodeDoorMutation,
+    UpdateNodeDoorMutationVariables
+  >(UpdateNodeDoorDocument);
+}
diff --git a/caster-front/src/graphql.ts b/caster-front/src/graphql.ts
index f2ea908a..a931782c 100644
--- a/caster-front/src/graphql.ts
+++ b/caster-front/src/graphql.ts
@@ -68,7 +68,7 @@ export type AddGraphInput = {
   templateName?: InputMaybe<GraphDetailTemplate>;
 };
 
-/** AudioCell(uuid, playback, audio_file, volume) */
+/** Stores information for playback of static audio files. */
 export type AudioCell = {
   audioFile: AudioFile;
   playback: PlaybackChoices;
@@ -76,12 +76,12 @@ export type AudioCell = {
   volume: Scalars["Float"];
 };
 
-/** AudioCell(uuid, playback, audio_file, volume) */
+/** Stores information for playback of static audio files. */
 export type AudioCellAudioFileArgs = {
   pagination?: InputMaybe<OffsetPaginationInput>;
 };
 
-/** AudioCell(uuid, playback, audio_file, volume) */
+/** Stores information for playback of static audio files. */
 export type AudioCellInput = {
   audioFile: AudioFileReference;
   playback?: InputMaybe<PlaybackChoices>;
@@ -174,7 +174,57 @@ export enum CallbackAction {
   SendVariables = "SEND_VARIABLES",
 }
 
-/** Choice of foobar */
+/**
+ * A :class:`~story_graph.models.ScriptCell` can contain
+ * different types of code, each with unique functionality.
+ *
+ * Both, the database and :class:`~story_graph.engine.Engine`,
+ * implement some specific details according to these types.
+ *
+ * .. list-table:: Cell types
+ *     :header-rows: 1
+ *
+ *     * - Name
+ *       - Description
+ *       - Database
+ *       - Engine
+ *     * - Markdown
+ *       - Allows to write arbitrary text which will get
+ *         rendered as an audio file via a text to speech service,
+ *         see :class:`~stream.models.TextToSpeech` for conversion
+ *         and :class:`~story_graph.markdown_parser.GencasterRenderer`
+ *         for the extended Markdown syntax.
+ *       - - :class:`~stream.models.TextToSpeech`
+ *       - - :func:`~story_graph.engine.Engine.execute_markdown_code`
+ *         - :class:`~story_graph.markdown_parser.GencasterRenderer`
+ *     * - Python
+ *       - Allows to execute python code via :func:`exec` which allows
+ *         to trigger e.g. Dialogs in the frontend
+ *         (see :class:`~stream.frontend_types.Dialog`)
+ *         or calculate or fetch any kind of data and store its value
+ *         as a :class:`~stream.models.StreamVariable`.
+ *       -
+ *       - - :func:`~story_graph.engine.Engine.execute_python_cell`
+ *     * - SuperCollider
+ *       - Executes *sclang* code on the associated server.
+ *         This can be used to control the sonic content on the server.
+ *       - - :class:`~stream.models.StreamInstruction`
+ *       - - :func:`~story_graph.engine.Engine.execute_sc_code`
+ *         - :ref:`OSC Server`
+ *     * - Comment
+ *       - Does not get executed, but allows to put comments into
+ *         the graph.
+ *       -
+ *       -
+ *     * - Audio
+ *       - Allows to playback static audio files.
+ *         The instruction will be translated into *sclang* code and will
+ *         be executed as such on the associated stream.
+ *       - - :class:`~story_graph.models.AudioCell`
+ *         - :class:`~stream.models.AudioFile`
+ *       - - :func:`~story_graph.engine.Engine.execute_audio_cell`
+ *
+ */
 export enum CellType {
   Audio = "AUDIO",
   Comment = "COMMENT",
@@ -210,25 +260,83 @@ export type DjangoFileType = {
   url: Scalars["String"];
 };
 
+/** An enumeration. */
+export enum DoorType {
+  Input = "INPUT",
+  Output = "OUTPUT",
+}
+
 /**
- * Connects two :class:`~Node` with each other.
+ * Connects two :class:`~Node` with each other by
+ * using their respective :class:`~NodeDoor`.
+ *
+ * .. important::
  *
- * .. todo::
+ *     It is important to note that an edge flows from
+ *     ``out_node_door`` to ``in_node_door`` as we follow
+ *     the notion from the perspective of a
+ *     :class:`story_graph.models.Node` rather than from the
+ *     edge.
  *
- *     With a script we can also jump to any other node
- *     so it is not clear how to use this.
- *     Maybe take a look at visual programming languages
- *     such as MSP or Scratch how they handle this?
+ *
+ * .. graphviz::
+ *
+ *     digraph Connection {
+ *         rank = same;
+ *         subgraph cluster_node_a {
+ *             rank = same;
+ *             label = "NODE_A";
+ *             NODE_A [shape=Msquare, label="NODE_A\n\nscript_cell_1\nscript_cell_2"];
+ *             subgraph cluster_in_nodes_a {
+ *                 label = "IN_NODES";
+ *                 in_node_door_a [label="in_node_door"];
+ *             }
+ *             subgraph cluster_out_nodes_a {
+ *                 label = "OUT_NODES";
+ *                 out_node_door_a_1 [label="out_node_door 1"];
+ *                 out_node_door_a_2 [label="out_node_door 2"];
+ *             }
+ *             in_node_door_a -> NODE_A [label="DB\nreference"];
+ *             {out_node_door_a_1, out_node_door_a_2} -> NODE_A;
+ *             in_node_door_a -> NODE_A [style=dashed, color=red, fontcolor=red, label="Engine\nProgression"];
+ *             NODE_A -> out_node_door_a_1 [style=dashed, color=red];
+ *         }
+ *
+ *         edge_ [shape=Msquare, label="EDGE"];
+ *         edge_ -> out_node_door_a_1 [label="out_node_door"];
+ *         edge_ -> in_node_door_b [label="in_node_door"];
+ *         out_node_door_a_1 -> edge_ [style=dashed, color=red];
+ *         edge_ -> in_node_door_b [style=dashed, color=red];
+ *
+ *         subgraph cluster_node_b {
+ *             rank = same;
+ *             label = "NODE_B";
+ *             NODE_B [shape=Msquare];
+ *             subgraph cluster_in_nodes_b {
+ *                 label = "IN_NODES";
+ *                 in_node_door_b [label="in_node_door"];
+ *             }
+ *             subgraph cluster_out_nodes_b {
+ *                 label = "OUT_NODES";
+ *                 out_node_door_b_1 [label="out_node_door 1"];
+ *                 out_node_door_b_2 [label="out_node_door 2"];
+ *             }
+ *             in_node_door_b -> NODE_B;
+ *             {out_node_door_b_1, out_node_door_b_2} -> NODE_B;
+ *             in_node_door_b -> NODE_B [style=dashed, color=red];
+ *             NODE_B -> out_node_door_b_1 [style=dashed, color=red];
+ *         }
+ *     }
  */
 export type Edge = {
-  inNode: Node;
-  outNode: Node;
+  inNodeDoor?: Maybe<NodeDoor>;
+  outNodeDoor?: Maybe<NodeDoor>;
   uuid: Scalars["UUID"];
 };
 
 export type EdgeInput = {
-  nodeInUuid: Scalars["UUID"];
-  nodeOutUuid: Scalars["UUID"];
+  nodeDoorInUuid: Scalars["UUID"];
+  nodeDoorOutUuid: Scalars["UUID"];
 };
 
 /**
@@ -336,9 +444,9 @@ export type Mutation = {
   /**
    * Creates a :class:`~story_graph.models.Edge` for a given
    * :class:`~story_graph.models.Graph`.
-   * It does not return the created edge.
+   * It returns the created edge.
    */
-  addEdge?: Maybe<Scalars["Void"]>;
+  addEdge: Edge;
   addGraph: Graph;
   /**
    * Creates a new :class:`~story_graph.models.Node` in a given
@@ -348,6 +456,7 @@ export type Mutation = {
   addNode?: Maybe<Scalars["Void"]>;
   authLogin: LoginRequestResponse;
   authLogout: Scalars["Boolean"];
+  createNodeDoor: NodeDoor;
   /** Creates or updates a given :class:`~story_graph.models.ScriptCell` to change its content. */
   createScriptCells: Array<ScriptCell>;
   createUpdateStreamVariable: Array<StreamVariable>;
@@ -355,6 +464,11 @@ export type Mutation = {
   deleteEdge?: Maybe<Scalars["Void"]>;
   /** Deletes a given :class:`~story_graph.models.Node`. */
   deleteNode?: Maybe<Scalars["Void"]>;
+  /**
+   * Allows to delete a non-default NodeDoor.
+   * If a node door was deleted it will return ``True``, otherwise ``False``.
+   */
+  deleteNodeDoor: Scalars["Boolean"];
   /** Deletes a given :class:`~story_graph.models.ScriptCell`. */
   deleteScriptCell?: Maybe<Scalars["Void"]>;
   /** Update metadata of an :class:`~stream.models.AudioFile` via a UUID */
@@ -364,6 +478,7 @@ export type Mutation = {
    * for renaming or moving it across the canvas.
    */
   updateNode?: Maybe<Scalars["Void"]>;
+  updateNodeDoor: NodeDoor;
   updateScriptCells: Array<ScriptCell>;
 };
 
@@ -393,6 +508,12 @@ export type MutationAuthLoginArgs = {
   username: Scalars["String"];
 };
 
+/** Mutations for Gencaster via GraphQL. */
+export type MutationCreateNodeDoorArgs = {
+  nodeDoorInput: NodeDoorInputCreate;
+  nodeUuid: Scalars["UUID"];
+};
+
 /** Mutations for Gencaster via GraphQL. */
 export type MutationCreateScriptCellsArgs = {
   nodeUuid: Scalars["UUID"];
@@ -414,6 +535,11 @@ export type MutationDeleteNodeArgs = {
   nodeUuid: Scalars["UUID"];
 };
 
+/** Mutations for Gencaster via GraphQL. */
+export type MutationDeleteNodeDoorArgs = {
+  nodeDoorUuid: Scalars["UUID"];
+};
+
 /** Mutations for Gencaster via GraphQL. */
 export type MutationDeleteScriptCellArgs = {
   scriptCellUuid: Scalars["UUID"];
@@ -430,6 +556,11 @@ export type MutationUpdateNodeArgs = {
   nodeUpdate: NodeUpdate;
 };
 
+/** Mutations for Gencaster via GraphQL. */
+export type MutationUpdateNodeDoorArgs = {
+  nodeDoorInput: NodeDoorInputUpdate;
+};
+
 /** Mutations for Gencaster via GraphQL. */
 export type MutationUpdateScriptCellsArgs = {
   scriptCellInputs: Array<ScriptCellInputUpdate>;
@@ -443,12 +574,13 @@ export type NoStreamAvailable = {
 /** A node. */
 export type Node = {
   color: Scalars["String"];
-  inEdges: Array<Edge>;
+  inNodeDoors: Array<NodeDoor>;
   /** Acts as a singular entrypoint for our graph.Only one such node can exist per graph. */
   isEntryNode: Scalars["Boolean"];
   /** Name of the node */
   name: Scalars["String"];
-  outEdges: Array<Edge>;
+  nodeDoors: Array<NodeDoor>;
+  outNodeDoors: Array<NodeDoor>;
   /** x-Position in graph canvas */
   positionX: Scalars["Float"];
   /** y-Position in graph canvas */
@@ -465,6 +597,95 @@ export type NodeCreate = {
   positionY?: InputMaybe<Scalars["Float"]>;
 };
 
+/**
+ * A :class:`~Node` can be entered and exited via
+ * multiple paths, where each of these exits and
+ * entrances is called a *door*.
+ *
+ * A connection between nodes can only be made via their
+ * doors.
+ * There are two types of doors:
+ *
+ * .. list-table:: Door types
+ *     :header-rows: 1
+ *
+ *     * - Kind
+ *       - Description
+ *     * - **INPUT**
+ *       - Allows to enter a node.
+ *         Currently each Node only has one entry point
+ *         but for future development and a nicer
+ *         database operations it is also represented.
+ *     * - **OUTPUT**
+ *       - Allows to exit a node.
+ *         After all script cells of a node has been
+ *         executed, the condition of each door will
+ *         be evaluated (like in a switch case).
+ *         Once a condition has been met, the door
+ *         will be stepped through.
+ *         This allows to have a visual representation
+ *         of logic branches.
+ *
+ * It is only possible to connect an **OUTPUT** to an
+ * **INPUT** door via an :class:`~Edge`.
+ */
+export type NodeDoor = {
+  code: Scalars["String"];
+  doorType: DoorType;
+  isDefault: Scalars["Boolean"];
+  name: Scalars["String"];
+  node: Node;
+  order: Scalars["Int"];
+  uuid: Scalars["UUID"];
+};
+
+/**
+ * A :class:`~Node` can be entered and exited via
+ * multiple paths, where each of these exits and
+ * entrances is called a *door*.
+ *
+ * A connection between nodes can only be made via their
+ * doors.
+ * There are two types of doors:
+ *
+ * .. list-table:: Door types
+ *     :header-rows: 1
+ *
+ *     * - Kind
+ *       - Description
+ *     * - **INPUT**
+ *       - Allows to enter a node.
+ *         Currently each Node only has one entry point
+ *         but for future development and a nicer
+ *         database operations it is also represented.
+ *     * - **OUTPUT**
+ *       - Allows to exit a node.
+ *         After all script cells of a node has been
+ *         executed, the condition of each door will
+ *         be evaluated (like in a switch case).
+ *         Once a condition has been met, the door
+ *         will be stepped through.
+ *         This allows to have a visual representation
+ *         of logic branches.
+ *
+ * It is only possible to connect an **OUTPUT** to an
+ * **INPUT** door via an :class:`~Edge`.
+ */
+export type NodeDoorInputCreate = {
+  code?: InputMaybe<Scalars["String"]>;
+  doorType?: InputMaybe<DoorType>;
+  name: Scalars["String"];
+  order?: InputMaybe<Scalars["Int"]>;
+};
+
+export type NodeDoorInputUpdate = {
+  code?: InputMaybe<Scalars["String"]>;
+  doorType?: DoorType;
+  name?: InputMaybe<Scalars["String"]>;
+  order?: InputMaybe<Scalars["Int"]>;
+  uuid: Scalars["UUID"];
+};
+
 export type NodeUpdate = {
   color?: InputMaybe<Scalars["String"]>;
   name?: InputMaybe<Scalars["String"]>;
@@ -478,7 +699,23 @@ export type OffsetPaginationInput = {
   offset?: Scalars["Int"];
 };
 
-/** An enumeration. */
+/**
+ * Different kinds of playback.
+ *
+ * .. list-table:: Playback types
+ *     :header-rows: 1
+ *
+ *     * - Name
+ *       - Description
+ *     * - ``SYNC``
+ *       - Plays back an audio file and waits for the
+ *         playback to finish before continuing the
+ *         execution of the script cells.
+ *     * - ``ASYNC``
+ *       - Plays back an audio file and immediately
+ *         continues the execution of script cells.
+ *         This is fitting for e.g. background music.
+ */
 export enum PlaybackChoices {
   AsyncPlayback = "ASYNC_PLAYBACK",
   SyncPlayback = "SYNC_PLAYBACK",
@@ -884,11 +1121,11 @@ export type GetGraphsMetaQuery = {
 };
 
 export type CreateEdgeMutationVariables = Exact<{
-  nodeInUuid: Scalars["UUID"];
-  nodeOutUuid: Scalars["UUID"];
+  nodeDoorInUuid: Scalars["UUID"];
+  nodeDoorOutUuid: Scalars["UUID"];
 }>;
 
-export type CreateEdgeMutation = { addEdge?: any | null };
+export type CreateEdgeMutation = { addEdge: { uuid: any } };
 
 export type CreateNodeMutationVariables = Exact<{
   name: Scalars["String"];
@@ -945,6 +1182,14 @@ export type DeleteScriptCellMutationVariables = Exact<{
 
 export type DeleteScriptCellMutation = { deleteScriptCell?: any | null };
 
+export type NodeDoorBasicFragment = {
+  uuid: any;
+  name: string;
+  order: number;
+  isDefault: boolean;
+  node: { uuid: any };
+};
+
 export type GraphSubscriptionVariables = Exact<{
   uuid: Scalars["UUID"];
 }>;
@@ -953,7 +1198,23 @@ export type GraphSubscription = {
   graph: {
     name: string;
     uuid: any;
-    edges: Array<{ uuid: any; outNode: { uuid: any }; inNode: { uuid: any } }>;
+    edges: Array<{
+      uuid: any;
+      inNodeDoor?: {
+        uuid: any;
+        name: string;
+        order: number;
+        isDefault: boolean;
+        node: { uuid: any };
+      } | null;
+      outNodeDoor?: {
+        uuid: any;
+        name: string;
+        order: number;
+        isDefault: boolean;
+        node: { uuid: any };
+      } | null;
+    }>;
     nodes: Array<{
       name: string;
       uuid: any;
@@ -966,10 +1227,33 @@ export type GraphSubscription = {
         cellType: CellType;
         uuid: any;
       }>;
+      inNodeDoors: Array<{
+        uuid: any;
+        name: string;
+        order: number;
+        isDefault: boolean;
+        node: { uuid: any };
+      }>;
+      outNodeDoors: Array<{
+        uuid: any;
+        name: string;
+        order: number;
+        isDefault: boolean;
+        node: { uuid: any };
+      }>;
     }>;
   };
 };
 
+export type NodeDoorDetailFragment = {
+  uuid: any;
+  name: string;
+  order: number;
+  isDefault: boolean;
+  code: string;
+  doorType: DoorType;
+};
+
 export type NodeSubscriptionVariables = Exact<{
   uuid: Scalars["UUID"];
 }>;
@@ -981,6 +1265,22 @@ export type NodeSubscription = {
     positionX: number;
     positionY: number;
     uuid: any;
+    inNodeDoors: Array<{
+      uuid: any;
+      name: string;
+      order: number;
+      isDefault: boolean;
+      code: string;
+      doorType: DoorType;
+    }>;
+    outNodeDoors: Array<{
+      uuid: any;
+      name: string;
+      order: number;
+      isDefault: boolean;
+      code: string;
+      doorType: DoorType;
+    }>;
     scriptCells: Array<{
       cellCode: string;
       cellOrder: number;
@@ -1259,6 +1559,31 @@ export type StreamLogsSubscription = {
   };
 };
 
+export type CreateNodeDoorMutationVariables = Exact<{
+  nodeUuid: Scalars["UUID"];
+  name: Scalars["String"];
+  code?: Scalars["String"];
+  doorType?: InputMaybe<DoorType>;
+  order?: InputMaybe<Scalars["Int"]>;
+}>;
+
+export type CreateNodeDoorMutation = { createNodeDoor: { uuid: any } };
+
+export type DeleteNodeDoorMutationVariables = Exact<{
+  nodeDoorUuid: Scalars["UUID"];
+}>;
+
+export type DeleteNodeDoorMutation = { deleteNodeDoor: boolean };
+
+export type UpdateNodeDoorMutationVariables = Exact<{
+  uuid: Scalars["UUID"];
+  name?: InputMaybe<Scalars["String"]>;
+  code?: InputMaybe<Scalars["String"]>;
+  order?: InputMaybe<Scalars["Int"]>;
+}>;
+
+export type UpdateNodeDoorMutation = { updateNodeDoor: { uuid: any } };
+
 export const FullStreamInfoFragmentDoc = gql`
   fragment FullStreamInfo on StreamInfo {
     __typename
@@ -1309,6 +1634,27 @@ export const AudioFileInfoFragmentDoc = gql`
     }
   }
 `;
+export const NodeDoorBasicFragmentDoc = gql`
+  fragment NodeDoorBasic on NodeDoor {
+    uuid
+    name
+    order
+    isDefault
+    node {
+      uuid
+    }
+  }
+`;
+export const NodeDoorDetailFragmentDoc = gql`
+  fragment NodeDoorDetail on NodeDoor {
+    uuid
+    name
+    order
+    isDefault
+    code
+    doorType
+  }
+`;
 export const StreamInfoFragmentFragmentDoc = gql`
   fragment StreamInfoFragment on Stream {
     uuid
@@ -1376,8 +1722,15 @@ export function useGetGraphsMetaQuery(
   });
 }
 export const CreateEdgeDocument = gql`
-  mutation createEdge($nodeInUuid: UUID!, $nodeOutUuid: UUID!) {
-    addEdge(newEdge: { nodeInUuid: $nodeInUuid, nodeOutUuid: $nodeOutUuid })
+  mutation createEdge($nodeDoorInUuid: UUID!, $nodeDoorOutUuid: UUID!) {
+    addEdge(
+      newEdge: {
+        nodeDoorInUuid: $nodeDoorInUuid
+        nodeDoorOutUuid: $nodeDoorOutUuid
+      }
+    ) {
+      uuid
+    }
   }
 `;
 
@@ -1511,11 +1864,11 @@ export const GraphDocument = gql`
       uuid
       edges {
         uuid
-        outNode {
-          uuid
+        inNodeDoor {
+          ...NodeDoorBasic
         }
-        inNode {
-          uuid
+        outNodeDoor {
+          ...NodeDoorBasic
         }
       }
       nodes {
@@ -1530,9 +1883,16 @@ export const GraphDocument = gql`
         positionX
         positionY
         color
+        inNodeDoors {
+          ...NodeDoorBasic
+        }
+        outNodeDoors {
+          ...NodeDoorBasic
+        }
       }
     }
   }
+  ${NodeDoorBasicFragmentDoc}
 `;
 
 export function useGraphSubscription<R = GraphSubscription>(
@@ -1550,6 +1910,12 @@ export function useGraphSubscription<R = GraphSubscription>(
 export const NodeDocument = gql`
   subscription node($uuid: UUID!) {
     node(nodeUuid: $uuid) {
+      inNodeDoors {
+        ...NodeDoorDetail
+      }
+      outNodeDoors {
+        ...NodeDoorDetail
+      }
       color
       name
       positionX
@@ -1578,6 +1944,7 @@ export const NodeDocument = gql`
       uuid
     }
   }
+  ${NodeDoorDetailFragmentDoc}
 `;
 
 export function useNodeSubscription<R = NodeSubscription>(
@@ -1897,3 +2264,64 @@ export function useStreamLogsSubscription<R = StreamLogsSubscription>(
     StreamLogsSubscriptionVariables
   >({ query: StreamLogsDocument, ...options }, handler);
 }
+export const CreateNodeDoorDocument = gql`
+  mutation createNodeDoor(
+    $nodeUuid: UUID!
+    $name: String!
+    $code: String! = ""
+    $doorType: DoorType = OUTPUT
+    $order: Int
+  ) {
+    createNodeDoor(
+      nodeDoorInput: {
+        name: $name
+        code: $code
+        doorType: $doorType
+        order: $order
+      }
+      nodeUuid: $nodeUuid
+    ) {
+      uuid
+    }
+  }
+`;
+
+export function useCreateNodeDoorMutation() {
+  return Urql.useMutation<
+    CreateNodeDoorMutation,
+    CreateNodeDoorMutationVariables
+  >(CreateNodeDoorDocument);
+}
+export const DeleteNodeDoorDocument = gql`
+  mutation deleteNodeDoor($nodeDoorUuid: UUID!) {
+    deleteNodeDoor(nodeDoorUuid: $nodeDoorUuid)
+  }
+`;
+
+export function useDeleteNodeDoorMutation() {
+  return Urql.useMutation<
+    DeleteNodeDoorMutation,
+    DeleteNodeDoorMutationVariables
+  >(DeleteNodeDoorDocument);
+}
+export const UpdateNodeDoorDocument = gql`
+  mutation updateNodeDoor(
+    $uuid: UUID!
+    $name: String
+    $code: String
+    $order: Int
+  ) {
+    updateNodeDoor(
+      nodeDoorInput: { name: $name, code: $code, order: $order, uuid: $uuid }
+    ) {
+      uuid
+    }
+  }
+`;
+
+export function useUpdateNodeDoorMutation() {
+  return Urql.useMutation<
+    UpdateNodeDoorMutation,
+    UpdateNodeDoorMutationVariables
+  >(UpdateNodeDoorDocument);
+}

From 3e57ca79273ac7771fad7fcc3c289c6dc1a1a7fa Mon Sep 17 00:00:00 2001
From: Dennis Scheiba <dennis.scheiba@gmx.de>
Date: Mon, 4 Sep 2023 22:42:01 +0200
Subject: [PATCH 35/51] add custom GencasterNode

---
 .../src/components/GencasterNode.vue          | 83 +++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 caster-editor/src/components/GencasterNode.vue

diff --git a/caster-editor/src/components/GencasterNode.vue b/caster-editor/src/components/GencasterNode.vue
new file mode 100644
index 00000000..a1ce1349
--- /dev/null
+++ b/caster-editor/src/components/GencasterNode.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { Handle, Position } from "@vue-flow/core";
+import { onMounted } from "vue";
+import type { Node } from "@/graphql";
+import { useVueFlow } from "@vue-flow/core";
+
+const props = defineProps<{
+  data: Pick<Node, "name" | "uuid" | "inNodeDoors" | "outNodeDoors">;
+}>();
+
+const { updateNodeInternals } = useVueFlow();
+
+onMounted(() => {
+  updateNodeInternals();
+});
+</script>
+
+<template>
+  <div class="gencaster-node">
+    <div>{{ data.name }}</div>
+
+    <div class="in-nodes">
+      <div
+        v-for="inDoor in data.inNodeDoors"
+        :key="inDoor.uuid"
+        class="in-node"
+      >
+        <Handle
+          :id="inDoor.uuid"
+          style="background-color: red"
+          type="target"
+          :position="Position.Left"
+        >
+          <span>{{ inDoor.name }}</span>
+        </Handle>
+      </div>
+    </div>
+
+    <div class="out-nodes">
+      <div
+        v-for="outDoor in data.outNodeDoors"
+        :key="outDoor.uuid"
+        class="out-node"
+      >
+        <Handle
+          :id="outDoor.uuid"
+          :position="Position.Right"
+          type="source"
+          style="background-color: green; top: unset"
+        >
+          <div>
+            <span class="node-exit-name">
+              {{ outDoor.name }}
+            </span>
+          </div>
+        </Handle>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.gencaster-node {
+  background-color: greenyellow;
+  min-height: 10vh;
+  min-width: 10vw;
+  display: flex;
+  flex-direction: row;
+  border: 1px dashed black;
+}
+
+.out-nodes {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  width: 5vw;
+}
+
+.out-node {
+  height: 1vh;
+  margin: 10px;
+}
+</style>

From 3bc340bd83f1e7427a641cbf5408630f0593850f Mon Sep 17 00:00:00 2001
From: Dennis Scheiba <dennis.scheiba@gmx.de>
Date: Mon, 4 Sep 2023 22:43:13 +0200
Subject: [PATCH 36/51] add node doors component in editor

---
 caster-editor/src/components/NodeDoor.vue  | 116 +++++++++++++++++++++
 caster-editor/src/components/NodeDoors.vue |  76 ++++++++++++++
 2 files changed, 192 insertions(+)
 create mode 100644 caster-editor/src/components/NodeDoor.vue
 create mode 100644 caster-editor/src/components/NodeDoors.vue

diff --git a/caster-editor/src/components/NodeDoor.vue b/caster-editor/src/components/NodeDoor.vue
new file mode 100644
index 00000000..4df19b77
--- /dev/null
+++ b/caster-editor/src/components/NodeDoor.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { useDeleteNodeDoorMutation, type NodeDoor } from "@/graphql";
+import { ElRow, ElCol, ElInput, ElIcon, ElMessage } from "element-plus";
+import { Delete } from "@element-plus/icons-vue";
+import { computed, ref, type Ref } from "vue";
+import { storeToRefs } from "pinia";
+import { useInterfaceStore } from "@/stores/InterfaceStore";
+
+type NodeDoorPick = Pick<
+  NodeDoor,
+  "code" | "doorType" | "isDefault" | "name" | "order" | "uuid"
+>;
+
+const props = defineProps<{
+  nodeDoor: NodeDoorPick;
+}>();
+
+const { newNodeDoorUpdates } = storeToRefs(useInterfaceStore());
+
+const deleteNodeDoorMutation = useDeleteNodeDoorMutation();
+
+const deleteNodeDoor = async () => {
+  const { error, data } = await deleteNodeDoorMutation.executeMutation({
+    nodeDoorUuid: props.nodeDoor.uuid,
+  });
+  if (error || !data?.deleteNodeDoor) {
+    ElMessage.error(`Failed to delete node door`);
+  }
+};
+
+const name: Ref<string> = ref(props.nodeDoor.name);
+const nodeDoorName = computed<string>({
+  get() {
+    return name.value;
+  },
+  set(value) {
+    console.log(`Name is now ${value}`);
+    name.value = value;
+    let update = newNodeDoorUpdates.value.get(props.nodeDoor.uuid);
+
+    if (update) {
+      update.name = name.value;
+    } else {
+      newNodeDoorUpdates.value.set(props.nodeDoor.uuid, {
+        uuid: props.nodeDoor.uuid,
+        name: name.value,
+      });
+    }
+    return name.value;
+  },
+});
+
+const code: Ref<string> = ref(props.nodeDoor.code);
+const nodeDoorCode = computed<string>({
+  get() {
+    return code.value;
+  },
+  set(value) {
+    code.value = value;
+    let update = newNodeDoorUpdates.value.get(props.nodeDoor.uuid);
+
+    if (update) {
+      update.code = code.value;
+    } else {
+      newNodeDoorUpdates.value.set(props.nodeDoor.uuid, {
+        uuid: props.nodeDoor.uuid,
+        code: code.value,
+      });
+    }
+    return code.value;
+  },
+});
+</script>
+
+<template>
+  <div class="node-door radius">
+    <ElRow :gutter="10">
+      <ElCol :span="6">
+        <span
+          class="node-door-name"
+          :class="{
+            'default-door': nodeDoor.isDefault,
+          }"
+        >
+          <ElInput
+            v-model="nodeDoorName"
+            :disabled="nodeDoor.isDefault"
+          />
+        </span>
+      </ElCol>
+      <ElCol :span="16">
+        <ElInput v-model="nodeDoorCode" />
+      </ElCol>
+      <ElCol :span="2">
+        <ElButton
+          type="danger"
+          :disabled="nodeDoor.isDefault"
+          @click="deleteNodeDoor()"
+        >
+          <ElIcon><Delete /></ElIcon>
+        </ElButton>
+      </ElCol>
+    </ElRow>
+  </div>
+</template>
+
+<style scoped>
+.node-door {
+  border-radius: 4px;
+  border: 1px solid var(--el-border-color);
+}
+
+.default-door {
+  background-color: aquamarine;
+}
+</style>
diff --git a/caster-editor/src/components/NodeDoors.vue b/caster-editor/src/components/NodeDoors.vue
new file mode 100644
index 00000000..e994734e
--- /dev/null
+++ b/caster-editor/src/components/NodeDoors.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import type { NodeDoor as NodeDoorType } from "@/graphql";
+import NodeDoor from "@/components/NodeDoor.vue";
+import { ElButton, type ElCol } from "element-plus";
+import { ref, type Ref } from "vue";
+import DialogAddNodeDoor from "@/components/DialogAddNodeDoor.vue";
+
+type DoorData = Pick<
+  NodeDoorType,
+  "code" | "doorType" | "isDefault" | "name" | "order" | "uuid"
+>;
+
+const props = defineProps<{
+  inNodeDoors: DoorData[];
+  outNodeDoors: DoorData[];
+  nodeUuid: string;
+}>();
+
+const showAddNodeDoorDialog: Ref<boolean> = ref(false);
+</script>
+
+<template>
+  <div class="node-doors">
+    <span class="node-doors-headline">Node doors</span>
+    <div
+      v-if="inNodeDoors.length > 0"
+      class="node-doors-in"
+    >
+      <span class="node-door-headline">In</span><br>
+      <NodeDoor
+        v-for="nodeDoor in inNodeDoors"
+        :key="nodeDoor.uuid"
+        :node-door="nodeDoor"
+      />
+    </div>
+    <div
+      v-if="outNodeDoors.length > 0"
+      class="node-doors-out"
+    >
+      <span class="node-door-headline">Out</span><br>
+      <NodeDoor
+        v-for="nodeDoor in outNodeDoors"
+        :key="nodeDoor.uuid"
+        :node-door="nodeDoor"
+      />
+      <ElRow style="padding-top: 10px">
+        <ElButton
+          style="width: 100%"
+          @click="
+            () => {
+              showAddNodeDoorDialog = true;
+            }
+          "
+        >
+          +
+        </ElButton>
+      </ElRow>
+    </div>
+    <DialogAddNodeDoor
+      v-if="showAddNodeDoorDialog"
+      :node-uuid="nodeUuid"
+      @closed="() => (showAddNodeDoorDialog = false)"
+    />
+  </div>
+</template>
+
+<style scoped>
+span.node-door-headline {
+  background-color: lightgray;
+  font-size: larger;
+}
+
+span.node-doors-headline {
+  font-size: x-large;
+}
+</style>

From 6b2385afdbf89f774c2440b014aa5ec647f23a91 Mon Sep 17 00:00:00 2001
From: Dennis Scheiba <dennis.scheiba@gmx.de>
Date: Mon, 4 Sep 2023 22:44:27 +0200
Subject: [PATCH 37/51] add dialog for node door creation

---
 .../src/components/DialogAddNodeDoor.vue      | 68 +++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 caster-editor/src/components/DialogAddNodeDoor.vue

diff --git a/caster-editor/src/components/DialogAddNodeDoor.vue b/caster-editor/src/components/DialogAddNodeDoor.vue
new file mode 100644
index 00000000..7eb1fe9b
--- /dev/null
+++ b/caster-editor/src/components/DialogAddNodeDoor.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { DoorType, useCreateNodeDoorMutation } from "@/graphql";
+import { ElMessage, ElDialog } from "element-plus";
+import { ref, type Ref } from "vue";
+
+const props = defineProps<{
+  nodeUuid: string;
+}>();
+
+const emit = defineEmits<{
+  (e: "closed"): void;
+}>();
+
+const newDoorName: Ref<string> = ref("");
+
+const showDialog: Ref<boolean> = ref(true);
+
+const createDoorMutation = useCreateNodeDoorMutation();
+
+const createDoor = async () => {
+  const { error } = await createDoorMutation.executeMutation({
+    nodeUuid: props.nodeUuid,
+    name: newDoorName.value,
+    code: "",
+    doorType: DoorType.Output,
+    order: 10,
+  });
+  if (error) {
+    ElMessage.error(`Could not create new node door: ${error.message}`);
+  } else {
+    emit("closed");
+  }
+};
+</script>
+
+<template>
+  <div>
+    <ElDialog
+      v-model="showDialog"
+      title="Create new node exit"
+      align-center
+      :show-close="true"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :append-to-body="true"
+    >
+      <ElInput
+        v-model="newDoorName"
+        placeholder="New exit name"
+      />
+      <template #footer>
+        <span class="dialog-footer">
+          <ElButton
+            type="danger"
+            @click="() => emit('closed')"
+          >Cancel</ElButton>
+          <ElButton
+            type="primary"
+            :disabled="newDoorName.length < 1"
+            @click="createDoor()"
+          >
+            Create
+          </ElButton>
+        </span>
+      </template>
+    </ElDialog>
+  </div>
+</template>

From 68737db14a4cac5852d2322589b8263968ef14d8 Mon Sep 17 00:00:00 2001
From: Dennis Scheiba <dennis.scheiba@gmx.de>
Date: Mon, 4 Sep 2023 22:46:09 +0200
Subject: [PATCH 38/51] switch to GencasterNode within Graph

---
 caster-editor/src/components/Graph.vue | 41 ++++++++++++++++----------
 1 file changed, 25 insertions(+), 16 deletions(-)

diff --git a/caster-editor/src/components/Graph.vue b/caster-editor/src/components/Graph.vue
index 8b6ec240..45304522 100644
--- a/caster-editor/src/components/Graph.vue
+++ b/caster-editor/src/components/Graph.vue
@@ -16,6 +16,7 @@ import type {
   Connection,
 } from "@vue-flow/core";
 import { VueFlow, useVueFlow } from "@vue-flow/core";
+import GencasterNode from "@/components/GencasterNode.vue";
 
 // mutations
 const updateNodeMutation = useUpdateNodeMutation();
@@ -74,7 +75,8 @@ function nodes(): GraphNode[] {
       data: {
         name: node.name,
         uuid: node.uuid,
-        scriptCells: node.scriptCells,
+        inNodeDoors: node.inNodeDoors,
+        outNodeDoors: node.outNodeDoors,
       },
       id: node.uuid,
       position: {
@@ -90,13 +92,18 @@ function nodes(): GraphNode[] {
 function edges(): GraphEdge[] {
   const e: GraphEdge[] = [];
   props.graph.edges.forEach((edge) => {
-    const graphEdge: GraphEdge = {
-      id: edge.uuid,
-      source: edge.inNode.uuid,
-      target: edge.outNode.uuid,
-      animated: true,
-    };
-    e.push(graphEdge);
+    // @todo make inNodeDoor non-nullable
+    if (edge.inNodeDoor && edge.outNodeDoor) {
+      const graphEdge: GraphEdge = {
+        id: edge.uuid,
+        source: edge.inNodeDoor.node.uuid,
+        sourceHandle: edge.inNodeDoor.uuid,
+        target: edge.outNodeDoor.node.uuid,
+        targetHandle: edge.outNodeDoor.uuid,
+        animated: true,
+      };
+      e.push(graphEdge);
+    }
   });
   return e;
 }
@@ -119,6 +126,7 @@ const onNodeDragStop = (nodeDragEvent: NodeDragEvent) => {
 };
 
 const onNodeDoubleClick = (uuid: string) => {
+  console.log("uuid is", uuid);
   nextNodeDoubleClicked.value = uuid;
 
   if (showNodeEditor.value && newScriptCellUpdates.value.size > 0) {
@@ -232,12 +240,12 @@ const flowPan = (location: graphPanType) => {
 
 // this runs if mouse is released on connection
 const onConnect = async (connection: Connection) => {
-  const nodeOutUuid = connection.target;
-  const nodeInUuid = connection.source;
+  const nodeDoorOutUuid = connection.sourceHandle;
+  const nodeDoorInUuid = connection.targetHandle;
 
   const { error } = await createEdgeMutation.executeMutation({
-    nodeInUuid,
-    nodeOutUuid,
+    nodeDoorInUuid,
+    nodeDoorOutUuid,
   });
   if (error) {
     ElMessage.error(`Could not create edge: ${error.message}`);
@@ -256,16 +264,17 @@ const onConnect = async (connection: Connection) => {
         :min-zoom="1"
         :nodes="nodes()"
         :edges="edges()"
-        :nodes-connectable="true"
         :connection-line-style="connectionLineStyle"
-        :delete-key-code="'null'"
+        fit-view-on-init
+        :nodes-connectable="true"
         @node-drag-stop="onNodeDragStop"
         @connect="onConnect"
       >
         <template #node-custom="{ data }">
-          <DefaultNode
+          <GencasterNode
             :data="data"
-            @dblclick="onNodeDoubleClick"
+            :connectable="true"
+            @dblclick="() => onNodeDoubleClick(data.uuid)"
           />
         </template>
       </VueFlow>

From 55f546ff49e4e876f5d22d88a6699ac22b9d1790 Mon Sep 17 00:00:00 2001
From: Dennis Scheiba <dennis.scheiba@gmx.de>
Date: Mon, 4 Sep 2023 22:50:20 +0200
Subject: [PATCH 39/51] add node door mutations to editor store

---
 caster-editor/src/components/NodeEditor.vue   | 18 ++++--
 .../src/components/NodeEditorCells.vue        |  5 +-
 .../src/components/NodeEditorHeader.vue       | 14 ++---
 caster-editor/src/stores/InterfaceStore.ts    | 57 +++++++++++++++----
 4 files changed, 70 insertions(+), 24 deletions(-)

diff --git a/caster-editor/src/components/NodeEditor.vue b/caster-editor/src/components/NodeEditor.vue
index 502fabb8..6c231aa7 100644
--- a/caster-editor/src/components/NodeEditor.vue
+++ b/caster-editor/src/components/NodeEditor.vue
@@ -2,6 +2,7 @@
 import NodeEditorHeader from "@/components/NodeEditorHeader.vue";
 
 import NodeEditorCells from "./NodeEditorCells.vue";
+import NodeDoors from "@/components/NodeDoors.vue";
 import { useNodeSubscription } from "@/graphql";
 import { computed, watch, type Ref, toRef } from "vue";
 import { useInterfaceStore } from "@/stores/InterfaceStore";
@@ -14,8 +15,9 @@ const props = defineProps<{
 
 const refUuid: Ref<string> = toRef(props, "uuid");
 
-const { waitForScriptCellsUpdate, newScriptCellUpdates, cachedNodeData } =
-  storeToRefs(useInterfaceStore());
+const { waitForNodeUpdate, newScriptCellUpdates, cachedNodeData } = storeToRefs(
+  useInterfaceStore(),
+);
 
 const { data, error } = useNodeSubscription(
   {
@@ -28,7 +30,7 @@ const { data, error } = useNodeSubscription(
   (messages, response) => {
     // callback on receiving an update from subscription
     console.log("Received node update", response);
-    waitForScriptCellsUpdate.value = false;
+    waitForNodeUpdate.value = false;
     cachedNodeData.value = response;
     return response;
   },
@@ -41,7 +43,7 @@ watch(error, (x) => {
 
 <template>
   <div
-    v-loading="!data || waitForScriptCellsUpdate || data.node.uuid != refUuid"
+    v-loading="!data || waitForNodeUpdate || data.node.uuid != refUuid"
     class="node-editor"
   >
     <NodeEditorHeader
@@ -53,6 +55,14 @@ watch(error, (x) => {
       v-if="cachedNodeData"
       v-model:script-cells="cachedNodeData.node.scriptCells"
     />
+    <div>
+      <NodeDoors
+        v-if="data"
+        :in-node-doors="[]"
+        :out-node-doors="data.node.outNodeDoors"
+        :node-uuid="data.node.uuid"
+      />
+    </div>
   </div>
 </template>
 
diff --git a/caster-editor/src/components/NodeEditorCells.vue b/caster-editor/src/components/NodeEditorCells.vue
index 253bf79d..83d658e3 100644
--- a/caster-editor/src/components/NodeEditorCells.vue
+++ b/caster-editor/src/components/NodeEditorCells.vue
@@ -12,15 +12,14 @@ const props = defineProps<{
 
 const drag: Ref<boolean> = ref(false);
 const interfaceStore = useInterfaceStore();
-const { waitForScriptCellsUpdate, newScriptCellUpdates } =
-  storeToRefs(interfaceStore);
+const { waitForNodeUpdate, newScriptCellUpdates } = storeToRefs(interfaceStore);
 
 const updateOrder = async (
   newOrder: NodeSubscription["node"]["scriptCells"],
 ) => {
   // block dragging if script cell has not been updated
   console.log("Calculate new script cell order");
-  waitForScriptCellsUpdate.value = true;
+  waitForNodeUpdate.value = true;
   newOrder.map((x, i) => {
     let update = newScriptCellUpdates.value.get(x.uuid);
     if (update) {
diff --git a/caster-editor/src/components/NodeEditorHeader.vue b/caster-editor/src/components/NodeEditorHeader.vue
index 8ee2dbd1..eca968b5 100644
--- a/caster-editor/src/components/NodeEditorHeader.vue
+++ b/caster-editor/src/components/NodeEditorHeader.vue
@@ -13,8 +13,8 @@
       <div class="right">
         <button
           class="unstyled"
-          :disabled="newScriptCellUpdates.size < 1"
-          @click="interfaceStore.executeScriptCellUpdates()"
+          :disabled="!unsavedNodeChanges"
+          @click="interfaceStore.executeUpdates()"
         >
           Save Scene
         </button>
@@ -53,14 +53,14 @@
       v-if="showNodeExitDialog"
       @save="
         () => {
-          interfaceStore.executeScriptCellUpdates();
+          interfaceStore.executeUpdates();
           showNodeEditor = false;
           cachedNodeData = undefined;
         }
       "
       @no-save="
         () => {
-          newScriptCellUpdates = new Map();
+          interfaceStore.resetUpdates();
           showNodeEditor = false;
           cachedNodeData = undefined;
         }
@@ -102,7 +102,7 @@ const emit = defineEmits<{
 }>();
 
 const interfaceStore = useInterfaceStore();
-const { showNodeEditor, newScriptCellUpdates, cachedNodeData } =
+const { showNodeEditor, unsavedNodeChanges, cachedNodeData } =
   storeToRefs(interfaceStore);
 
 const showAudioFileBrowser: Ref<boolean> = ref(false);
@@ -112,7 +112,7 @@ const showRenameNodeDialog: Ref<boolean> = ref(false);
 const createScriptCellMutation = useCreateScriptCellsMutation();
 
 const closeScriptCellEditor = async () => {
-  if (newScriptCellUpdates.value.size < 1) {
+  if (!unsavedNodeChanges.value) {
     showNodeEditor.value = false;
   } else {
     showNodeExitDialog.value = true;
@@ -120,7 +120,7 @@ const closeScriptCellEditor = async () => {
 };
 
 const addScriptCell = async (cellType: CellType) => {
-  if (newScriptCellUpdates.value.size > 0) {
+  if (unsavedNodeChanges) {
     ElMessage.warning(
       "Please save your changes before adding a new script cell",
     );
diff --git a/caster-editor/src/stores/InterfaceStore.ts b/caster-editor/src/stores/InterfaceStore.ts
index 9d2e3c66..ce8d3db4 100644
--- a/caster-editor/src/stores/InterfaceStore.ts
+++ b/caster-editor/src/stores/InterfaceStore.ts
@@ -1,10 +1,12 @@
 import { defineStore } from "pinia";
-import { type Ref, ref } from "vue";
+import { type Ref, ref, computed } from "vue";
 import {
   type NodeSubscription,
   type ScriptCellInputUpdate,
   type User,
+  type NodeDoorInputUpdate,
   useUpdateScriptCellsMutation,
+  useUpdateNodeDoorMutation,
 } from "@/graphql";
 import type { VueFlowStore as GraphInstance } from "@vue-flow/core";
 import { ElMessage } from "element-plus";
@@ -35,33 +37,66 @@ export const useInterfaceStore = defineStore("interface", () => {
   const newScriptCellUpdates: Ref<Map<string, ScriptCellInputUpdate>> = ref(
     new Map(),
   );
-  const waitForScriptCellsUpdate: Ref<boolean> = ref(false);
+  const newNodeDoorUpdates: Ref<Map<string, NodeDoorInputUpdate>> = ref(
+    new Map(),
+  );
+  const waitForNodeUpdate: Ref<boolean> = ref(false);
 
   const user: Ref<User | undefined> = ref(undefined);
 
   const updateScriptCellsMutation = useUpdateScriptCellsMutation();
+  const updateNodeDoorMutation = useUpdateNodeDoorMutation();
 
-  const resetScriptCellUpdates = () => {
+  const resetUpdates = () => {
     newScriptCellUpdates.value = new Map();
+    newNodeDoorUpdates.value = new Map();
   };
 
-  const executeScriptCellUpdates = async () => {
-    waitForScriptCellsUpdate.value = true;
+  const executeUpdates = async () => {
+    waitForNodeUpdate.value = true;
+    await executeScriptCellUpdates();
+    await executeNodeDoorUpdates();
+    waitForNodeUpdate.value = false;
+  };
+
+  const unsavedNodeChanges = computed<boolean>((): boolean => {
+    return (
+      newNodeDoorUpdates.value.size > 0 || newScriptCellUpdates.value.size > 1
+    );
+  });
 
+  const executeScriptCellUpdates = async () => {
     const { error } = await updateScriptCellsMutation.executeMutation({
       scriptCellInputs: Array.from(newScriptCellUpdates.value.values()),
     });
 
     if (error) {
       ElMessage.error(`Could not update script cells: ${error.message}`);
-      waitForScriptCellsUpdate.value = false;
       return;
     } else {
-      resetScriptCellUpdates();
+      newScriptCellUpdates.value = new Map();
       ElMessage.success(`Successfully saved script cells`);
     }
   };
 
+  const executeNodeDoorUpdates = async () => {
+    const toDelete: string[] = [];
+    newNodeDoorUpdates.value.forEach(async (nodeDoor, nodeDoorUUID) => {
+      const { error } = await updateNodeDoorMutation.executeMutation({
+        ...nodeDoor,
+      });
+      if (error) {
+        ElMessage.error(
+          `Failed to update node door ${nodeDoorUUID}: ${error.message}`,
+        );
+      } else {
+        toDelete.push(nodeDoorUUID);
+      }
+    });
+    // @todo should only delete successful transactions
+    newNodeDoorUpdates.value = new Map();
+  };
+
   return {
     showNodeEditor,
     selectedNodeForEditorUuid,
@@ -70,10 +105,12 @@ export const useInterfaceStore = defineStore("interface", () => {
     tab,
     vueFlowRef,
     cachedNodeData,
-    waitForScriptCellsUpdate,
+    waitForNodeUpdate,
     newScriptCellUpdates,
-    resetScriptCellUpdates,
-    executeScriptCellUpdates,
+    newNodeDoorUpdates,
+    unsavedNodeChanges,
+    resetUpdates,
+    executeUpdates,
     user,
   };
 });

From 4ecda49c6029c65b75bc0522ecd7392f3e5cd070 Mon Sep 17 00:00:00 2001
From: Dennis Scheiba <dennis.scheiba@gmx.de>
Date: Tue, 5 Sep 2023 11:50:11 +0200
Subject: [PATCH 40/51] replace update method with executeUpdates

---
 caster-editor/src/components/DialogExitGraph.vue | 2 +-
 caster-editor/src/components/Graph.vue           | 4 ++--
 caster-editor/src/components/NodeEditorCells.vue | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/caster-editor/src/components/DialogExitGraph.vue b/caster-editor/src/components/DialogExitGraph.vue
index c8687c96..976caa11 100644
--- a/caster-editor/src/components/DialogExitGraph.vue
+++ b/caster-editor/src/components/DialogExitGraph.vue
@@ -55,7 +55,7 @@ const exitGraph = () => {
   showDialog.value = false;
 
   selectedNodeForEditorUuid.value = undefined;
-  interfaceStore.resetScriptCellUpdates();
+  interfaceStore.resetUpdates();
 
   router.push({
     path: "/graph",
diff --git a/caster-editor/src/components/Graph.vue b/caster-editor/src/components/Graph.vue
index 45304522..0a921f80 100644
--- a/caster-editor/src/components/Graph.vue
+++ b/caster-editor/src/components/Graph.vue
@@ -297,14 +297,14 @@ const onConnect = async (connection: Connection) => {
       "
       @save="
         async () => {
-          await interfaceStore.executeScriptCellUpdates();
+          await interfaceStore.executeUpdates();
           selectedNodeForEditorUuid = nextNodeDoubleClicked;
           showSwitchNodeDialog = false;
         }
       "
       @no-save="
         () => {
-          interfaceStore.resetScriptCellUpdates();
+          interfaceStore.resetUpdates();
           selectedNodeForEditorUuid = nextNodeDoubleClicked;
           showSwitchNodeDialog = false;
         }
diff --git a/caster-editor/src/components/NodeEditorCells.vue b/caster-editor/src/components/NodeEditorCells.vue
index 83d658e3..24f347ff 100644
--- a/caster-editor/src/components/NodeEditorCells.vue
+++ b/caster-editor/src/components/NodeEditorCells.vue
@@ -31,7 +31,7 @@ const updateOrder = async (
       });
     }
   });
-  interfaceStore.executeScriptCellUpdates();
+  interfaceStore.executeUpdates();
 };
 
 const moveableScriptCells = computed<NodeSubscription["node"]["scriptCells"]>({

From cc0f3cc9dbce92e14bb54a912a66c0dc8d67cba6 Mon Sep 17 00:00:00 2001
From: Dennis Scheiba <dennis.scheiba@gmx.de>
Date: Fri, 8 Sep 2023 00:02:20 +0200
Subject: [PATCH 41/51] remove create edge buttion in menu tab

---
 caster-editor/src/components/MenuTabEdit.vue | 23 +-------------------
 1 file changed, 1 insertion(+), 22 deletions(-)

diff --git a/caster-editor/src/components/MenuTabEdit.vue b/caster-editor/src/components/MenuTabEdit.vue
index d16e0f9a..6ed7c67e 100644
--- a/caster-editor/src/components/MenuTabEdit.vue
+++ b/caster-editor/src/components/MenuTabEdit.vue
@@ -22,11 +22,7 @@
 
 <script setup lang="ts">
 import type { Graph } from "@/graphql";
-import {
-  useCreateEdgeMutation,
-  useDeleteEdgeMutation,
-  useDeleteNodeMutation,
-} from "@/graphql";
+import { useDeleteEdgeMutation, useDeleteNodeMutation } from "@/graphql";
 import { useInterfaceStore } from "@/stores/InterfaceStore";
 import { ElMessage } from "element-plus";
 import { storeToRefs } from "pinia";
@@ -72,21 +68,4 @@ const removeSelection = async () => {
     ElMessage.info(`Deleted node ${nodeUuid}`);
   });
 };
-
-const createEdgeMutation = useCreateEdgeMutation();
-const createEdge = async () => {
-  if (selectedNodeUUIDs.value.length !== 2) {
-    ElMessage.info("Creating a connection requires exactly 2 selected scenes.");
-    return;
-  }
-  const [nodeInUuid, nodeOutUuid] = selectedNodeUUIDs.value;
-  const { error } = await createEdgeMutation.executeMutation({
-    nodeInUuid,
-    nodeOutUuid,
-  });
-  if (error) {
-    ElMessage.error(`Could not create edge: ${error.message}`);
-  }
-  ElMessage.success(`Created new edge`);
-};
 </script>

From 9debced6c63b81853fb3344f923a342e177e9e58 Mon Sep 17 00:00:00 2001
From: Dennis Scheiba <dennis.scheiba@gmx.de>
Date: Sat, 9 Sep 2023 00:27:52 +0200
Subject: [PATCH 42/51] fix edge direction flow

---
 caster-editor/src/components/Graph.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/caster-editor/src/components/Graph.vue b/caster-editor/src/components/Graph.vue
index 0a921f80..1b04a6fa 100644
--- a/caster-editor/src/components/Graph.vue
+++ b/caster-editor/src/components/Graph.vue
@@ -96,10 +96,10 @@ function edges(): GraphEdge[] {
     if (edge.inNodeDoor && edge.outNodeDoor) {
       const graphEdge: GraphEdge = {
         id: edge.uuid,
-        source: edge.inNodeDoor.node.uuid,
-        sourceHandle: edge.inNodeDoor.uuid,
-        target: edge.outNodeDoor.node.uuid,
-        targetHandle: edge.outNodeDoor.uuid,
+        source: edge.outNodeDoor.node.uuid,
+        sourceHandle: edge.outNodeDoor.uuid,
+        target: edge.inNodeDoor.node.uuid,
+        targetHandle: edge.inNodeDoor.uuid,
         animated: true,
       };
       e.push(graphEdge);

From 961b765d86648f37b7f26025cb74574ad74bc6d1 Mon Sep 17 00:00:00 2001
From: Dennis Scheiba <dennis.scheiba@gmx.de>
Date: Sat, 9 Sep 2023 00:30:04 +0200
Subject: [PATCH 43/51] Fix drag and drop of edges

---
 caster-editor/src/components/GencasterNode.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/caster-editor/src/components/GencasterNode.vue b/caster-editor/src/components/GencasterNode.vue
index a1ce1349..02f74d37 100644
--- a/caster-editor/src/components/GencasterNode.vue
+++ b/caster-editor/src/components/GencasterNode.vue
@@ -31,7 +31,9 @@ onMounted(() => {
           type="target"
           :position="Position.Left"
         >
-          <span>{{ inDoor.name }}</span>
+          <slot>
+            <span style="pointer-events: none"> {{ inDoor.name }} </span>
+          </slot>
         </Handle>
       </div>
     </div>
@@ -48,11 +50,9 @@ onMounted(() => {
           type="source"
           style="background-color: green; top: unset"
         >
-          <div>
-            <span class="node-exit-name">
-              {{ outDoor.name }}
-            </span>
-          </div>
+          <slot>
+            <span style="pointer-events: none"> {{ outDoor.name }} </span>
+          </slot>
         </Handle>
       </div>
     </div>

From 123c3521353846a29cd944583b85e533f5b3a906 Mon Sep 17 00:00:00 2001
From: Dennis Scheiba <dennis.scheiba@gmx.de>
Date: Sat, 9 Sep 2023 13:03:27 +0200
Subject: [PATCH 44/51] add checks for valid python code in node door

---
 caster-back/gencaster/schema.py            | 14 ++++-
 caster-back/operations.gql                 | 11 +++-
 caster-back/schema.gql                     | 61 +++++++++++++++++++++-
 caster-back/story_graph/models.py          | 13 +++++
 caster-back/story_graph/tests.py           | 19 ++++++-
 caster-back/story_graph/types.py           | 27 ++++++++++
 caster-editor/src/graphql.ts               | 33 ++++++++++--
 caster-editor/src/stores/InterfaceStore.ts | 16 +++++-
 caster-front/src/graphql.ts                | 33 ++++++++++--
 9 files changed, 211 insertions(+), 16 deletions(-)

diff --git a/caster-back/gencaster/schema.py b/caster-back/gencaster/schema.py
index 66fab030..d8db5834 100644
--- a/caster-back/gencaster/schema.py
+++ b/caster-back/gencaster/schema.py
@@ -43,15 +43,18 @@
     EdgeInput,
     Graph,
     GraphFilter,
+    InvalidPythonCode,
     Node,
     NodeCreate,
     NodeDoor,
     NodeDoorInputCreate,
     NodeDoorInputUpdate,
+    NodeDoorResponse,
     NodeUpdate,
     ScriptCell,
     ScriptCellInputCreate,
     ScriptCellInputUpdate,
+    create_python_highlight_string,
 )
 from stream.exceptions import NoStreamAvailableException
 from stream.frontend_types import Dialog
@@ -553,7 +556,7 @@ async def update_node_door(
         self,
         info,
         node_door_input: NodeDoorInputUpdate,
-    ) -> NodeDoor:
+    ) -> NodeDoorResponse:
         await graphql_check_authenticated(info)
         node_door = await story_graph_models.NodeDoor.objects.aget(
             uuid=node_door_input.uuid
@@ -565,7 +568,14 @@ async def update_node_door(
             node_door.name = node_door_input.name
         if node_door_input.order:
             node_door.order = node_door_input.order
-        await node_door.asave()
+        try:
+            await node_door.asave()
+        except SyntaxError as e:
+            return InvalidPythonCode(
+                error_type=e.msg,
+                error_code=e.text if e.text else "",
+                error_message=create_python_highlight_string(e),
+            )
         return node_door  # type: ignore
 
     @strawberry.mutation
diff --git a/caster-back/operations.gql b/caster-back/operations.gql
index efb659fe..cfa44e96 100644
--- a/caster-back/operations.gql
+++ b/caster-back/operations.gql
@@ -406,6 +406,15 @@ mutation updateNodeDoor($uuid: UUID!, $name: String, $code: String, $order: Int)
   updateNodeDoor(
     nodeDoorInput: {name: $name, code: $code, order: $order, uuid: $uuid}
   ) {
-    uuid
+    ... on NodeDoor {
+      __typename
+      uuid
+    }
+    ... on InvalidPythonCode {
+      __typename
+      errorCode
+      errorMessage
+      errorType
+    }
   }
 }
diff --git a/caster-back/schema.gql b/caster-back/schema.gql
index 320c5aa1..b3f6906f 100644
--- a/caster-back/schema.gql
+++ b/caster-back/schema.gql
@@ -163,7 +163,56 @@ enum CallbackAction {
   SEND_VARIABLE
 }
 
-"A :class:`~story_graph.models.ScriptCell` can contain\ndifferent types of code, each with unique functionality.\n\nBoth, the database and :class:`~story_graph.engine.Engine`,\nimplement some specific details according to these types.\n\n.. list-table:: Cell types\n    :header-rows: 1\n\n    * - Name\n      - Description\n      - Database\n      - Engine\n    * - Markdown\n      - Allows to write arbitrary text which will get\n        rendered as an audio file via a text to speech service,\n        see :class:`~stream.models.TextToSpeech` for conversion\n        and :class:`~story_graph.markdown_parser.GencasterRenderer`\n        for the extended Markdown syntax.\n      - - :class:`~stream.models.TextToSpeech`\n      - - :func:`~story_graph.engine.Engine.execute_markdown_code`\n        - :class:`~story_graph.markdown_parser.GencasterRenderer`\n    * - Python\n      - Allows to execute python code via :func:`exec` which allows\n        to trigger e.g. Dialogs in the frontend\n        (see :class:`~stream.frontend_types.Dialog`)\n        or calculate or fetch any kind of data and store its value\n        as a :class:`~stream.models.StreamVariable`.\n      - \n      - - :func:`~story_graph.engine.Engine.execute_python_cell`\n    * - SuperCollider\n      - Executes *sclang* code on the associated server.\n        This can be used to control the sonic content on the server.\n      - - :class:`~stream.models.StreamInstruction`\n      - - :func:`~story_graph.engine.Engine.execute_sc_code`\n        - :ref:`OSC Server`\n    * - Comment\n      - Does not get executed, but allows to put comments into\n        the graph.\n      - \n      -\n    * - Audio\n      - Allows to playback static audio files.\n        The instruction will be translated into *sclang* code and will\n        be executed as such on the associated stream.\n      - - :class:`~story_graph.models.AudioCell`\n        - :class:`~stream.models.AudioFile`\n      - - :func:`~story_graph.engine.Engine.execute_audio_cell`\n    "
+"""
+A :class:`~story_graph.models.ScriptCell` can contain
+different types of code, each with unique functionality.
+
+Both, the database and :class:`~story_graph.engine.Engine`,
+implement some specific details according to these types.
+
+.. list-table:: Cell types
+    :header-rows: 1
+
+    * - Name
+      - Description
+      - Database
+      - Engine
+    * - Markdown
+      - Allows to write arbitrary text which will get
+        rendered as an audio file via a text to speech service,
+        see :class:`~stream.models.TextToSpeech` for conversion
+        and :class:`~story_graph.markdown_parser.GencasterRenderer`
+        for the extended Markdown syntax.
+      - - :class:`~stream.models.TextToSpeech`
+      - - :func:`~story_graph.engine.Engine.execute_markdown_code`
+        - :class:`~story_graph.markdown_parser.GencasterRenderer`
+    * - Python
+      - Allows to execute python code via :func:`exec` which allows
+        to trigger e.g. Dialogs in the frontend
+        (see :class:`~stream.frontend_types.Dialog`)
+        or calculate or fetch any kind of data and store its value
+        as a :class:`~stream.models.StreamVariable`.
+      -
+      - - :func:`~story_graph.engine.Engine.execute_python_cell`
+    * - SuperCollider
+      - Executes *sclang* code on the associated server.
+        This can be used to control the sonic content on the server.
+      - - :class:`~stream.models.StreamInstruction`
+      - - :func:`~story_graph.engine.Engine.execute_sc_code`
+        - :ref:`OSC Server`
+    * - Comment
+      - Does not get executed, but allows to put comments into
+        the graph.
+      -
+      -
+    * - Audio
+      - Allows to playback static audio files.
+        The instruction will be translated into *sclang* code and will
+        be executed as such on the associated stream.
+      - - :class:`~story_graph.models.AudioCell`
+        - :class:`~stream.models.AudioFile`
+      - - :func:`~story_graph.engine.Engine.execute_audio_cell`
+"""
 enum CellType {
   MARKDOWN
   PYTHON
@@ -388,6 +437,12 @@ type InvalidAudioFile {
   error: String!
 }
 
+type InvalidPythonCode {
+  errorType: String!
+  errorMessage: String!
+  errorCode: String!
+}
+
 type LoginError {
   errorMessage: String
 }
@@ -440,7 +495,7 @@ type Mutation {
   addAudioFile(newAudioFile: AddAudioFile!): AudioFileUploadResponse!
   createUpdateStreamVariable(streamVariables: [StreamVariableInput!]!): [StreamVariable!]!
   createNodeDoor(nodeDoorInput: NodeDoorInputCreate!, nodeUuid: UUID!): NodeDoor!
-  updateNodeDoor(nodeDoorInput: NodeDoorInputUpdate!): NodeDoor!
+  updateNodeDoor(nodeDoorInput: NodeDoorInputUpdate!): NodeDoorResponse!
 
   """
   Allows to delete a non-default NodeDoor.
@@ -575,6 +630,8 @@ input NodeDoorInputUpdate {
   code: String = null
 }
 
+union NodeDoorResponse = NodeDoor | InvalidPythonCode
+
 input NodeUpdate {
   uuid: UUID!
   name: String = null
diff --git a/caster-back/story_graph/models.py b/caster-back/story_graph/models.py
index 4c9acda3..c062be81 100644
--- a/caster-back/story_graph/models.py
+++ b/caster-back/story_graph/models.py
@@ -3,6 +3,7 @@
 ======
 """
 
+import ast
 import logging
 import uuid
 
@@ -382,6 +383,18 @@ class Meta(TypedModelMeta):
             ),
         ]
 
+    def save(self, *args, **kwargs):
+        try:
+            ast.parse(self.code)
+        except SyntaxError as e:
+            log.debug(f"Syntax error on node door {self}: {e}")
+            raise e
+        except Exception as e:
+            log.error(f"Unexpected error on saving {self}: {e}")
+            raise e
+        # ignore args/kwargs b/c of "Cannot force both insert and updating in model saving" problem
+        return super().save()
+
     def __str__(self) -> str:
         return f"{self.node}: {self.door_type}_{self.name}"
 
diff --git a/caster-back/story_graph/tests.py b/caster-back/story_graph/tests.py
index b02e30aa..f4f38fce 100644
--- a/caster-back/story_graph/tests.py
+++ b/caster-back/story_graph/tests.py
@@ -177,6 +177,23 @@ def test_get_default_door_missing_exception(self):
         with self.assertRaises(NodeDoorMissing):
             node.get_default_out_door()
 
+    def test_invalid_python_code(self):
+        node = NodeTestCase.get_node()
+        door = node.get_default_in_door()
+        door.code = "2+/+2"
+        with self.assertRaises(SyntaxError):
+            door.save()
+
+    # same as above but async as gql runs async
+    # therefore it makes sense to also test if the
+    # async variant calls the sync save code
+    async def test_invalid_python_code_async(self):
+        node = await sync_to_async(NodeTestCase.get_node)()
+        door = await node.aget_default_in_door()
+        door.code = "2+/+2"
+        with self.assertRaises(SyntaxError):
+            await door.asave()
+
 
 class GencasterMarkdownTestCase(TransactionTestCase):
     @staticmethod
@@ -764,7 +781,7 @@ async def test_failed_node_door_code(self):
             node=node_a,
             name="foobar",
             is_default=False,
-            code="2==",
+            code="foo+bar",
         )
 
         await Edge.objects.acreate(
diff --git a/caster-back/story_graph/types.py b/caster-back/story_graph/types.py
index a6d5854b..20f19a23 100644
--- a/caster-back/story_graph/types.py
+++ b/caster-back/story_graph/types.py
@@ -24,6 +24,30 @@
 NodeDoorType = strawberry.enum(models.NodeDoor.DoorType)  # type: ignore
 
 
+def create_python_highlight_string(e: SyntaxError) -> str:
+    """Creates from a given error a string which highlights
+    the error, so it will return for example
+
+        foo++
+             ^
+
+    """
+    if not (e.text and e.lineno and e.offset and e.end_offset):
+        raise Exception(f"Missing syntax error information {e}")
+    t = e.text.split("\n")
+    patch = [" "] * e.end_offset
+    patch[max(e.offset - 1, 0) : max(e.end_offset - 1, 0)] = "^"
+    t.insert(e.lineno, "".join(patch))
+    return "\n".join(t)
+
+
+@strawberry.type
+class InvalidPythonCode:
+    error_type: str
+    error_message: str
+    error_code: str
+
+
 @strawberry.input
 class NodeCreate:
     name: str
@@ -130,6 +154,9 @@ class NodeDoorInputUpdate:
     code: Optional[str] = None
 
 
+NodeDoorResponse = strawberry.union("NodeDoorResponse", [NodeDoor, InvalidPythonCode])
+
+
 @strawberry.django.type(models.Edge)
 class Edge:
     uuid: auto
diff --git a/caster-editor/src/graphql.ts b/caster-editor/src/graphql.ts
index a931782c..bdab626e 100644
--- a/caster-editor/src/graphql.ts
+++ b/caster-editor/src/graphql.ts
@@ -223,7 +223,6 @@ export enum CallbackAction {
  *       - - :class:`~story_graph.models.AudioCell`
  *         - :class:`~stream.models.AudioFile`
  *       - - :func:`~story_graph.engine.Engine.execute_audio_cell`
- *
  */
 export enum CellType {
   Audio = "AUDIO",
@@ -432,6 +431,12 @@ export type InvalidAudioFile = {
   error: Scalars["String"];
 };
 
+export type InvalidPythonCode = {
+  errorCode: Scalars["String"];
+  errorMessage: Scalars["String"];
+  errorType: Scalars["String"];
+};
+
 export type LoginError = {
   errorMessage?: Maybe<Scalars["String"]>;
 };
@@ -478,7 +483,7 @@ export type Mutation = {
    * for renaming or moving it across the canvas.
    */
   updateNode?: Maybe<Scalars["Void"]>;
-  updateNodeDoor: NodeDoor;
+  updateNodeDoor: NodeDoorResponse;
   updateScriptCells: Array<ScriptCell>;
 };
 
@@ -686,6 +691,8 @@ export type NodeDoorInputUpdate = {
   uuid: Scalars["UUID"];
 };
 
+export type NodeDoorResponse = InvalidPythonCode | NodeDoor;
+
 export type NodeUpdate = {
   color?: InputMaybe<Scalars["String"]>;
   name?: InputMaybe<Scalars["String"]>;
@@ -1582,7 +1589,16 @@ export type UpdateNodeDoorMutationVariables = Exact<{
   order?: InputMaybe<Scalars["Int"]>;
 }>;
 
-export type UpdateNodeDoorMutation = { updateNodeDoor: { uuid: any } };
+export type UpdateNodeDoorMutation = {
+  updateNodeDoor:
+    | {
+        __typename: "InvalidPythonCode";
+        errorCode: string;
+        errorMessage: string;
+        errorType: string;
+      }
+    | { __typename: "NodeDoor"; uuid: any };
+};
 
 export const FullStreamInfoFragmentDoc = gql`
   fragment FullStreamInfo on StreamInfo {
@@ -2314,7 +2330,16 @@ export const UpdateNodeDoorDocument = gql`
     updateNodeDoor(
       nodeDoorInput: { name: $name, code: $code, order: $order, uuid: $uuid }
     ) {
-      uuid
+      ... on NodeDoor {
+        __typename
+        uuid
+      }
+      ... on InvalidPythonCode {
+        __typename
+        errorCode
+        errorMessage
+        errorType
+      }
     }
   }
 `;
diff --git a/caster-editor/src/stores/InterfaceStore.ts b/caster-editor/src/stores/InterfaceStore.ts
index ce8d3db4..8805f199 100644
--- a/caster-editor/src/stores/InterfaceStore.ts
+++ b/caster-editor/src/stores/InterfaceStore.ts
@@ -82,10 +82,22 @@ export const useInterfaceStore = defineStore("interface", () => {
   const executeNodeDoorUpdates = async () => {
     const toDelete: string[] = [];
     newNodeDoorUpdates.value.forEach(async (nodeDoor, nodeDoorUUID) => {
-      const { error } = await updateNodeDoorMutation.executeMutation({
+      const { data, error } = await updateNodeDoorMutation.executeMutation({
         ...nodeDoor,
       });
-      if (error) {
+      if (data?.updateNodeDoor.__typename == "InvalidPythonCode") {
+        console.log(data.updateNodeDoor);
+        ElMessage.error({
+          message: `Invalid python code on node door ${
+            nodeDoor.uuid
+          }<br/><pre style="white-space: pre; font-family: monospace !important;">${data.updateNodeDoor.errorMessage.replace(
+            "\n",
+            "<br/>",
+          )}</pre>`,
+          dangerouslyUseHTMLString: true,
+          duration: 6000,
+        });
+      } else if (error) {
         ElMessage.error(
           `Failed to update node door ${nodeDoorUUID}: ${error.message}`,
         );
diff --git a/caster-front/src/graphql.ts b/caster-front/src/graphql.ts
index a931782c..bdab626e 100644
--- a/caster-front/src/graphql.ts
+++ b/caster-front/src/graphql.ts
@@ -223,7 +223,6 @@ export enum CallbackAction {
  *       - - :class:`~story_graph.models.AudioCell`
  *         - :class:`~stream.models.AudioFile`
  *       - - :func:`~story_graph.engine.Engine.execute_audio_cell`
- *
  */
 export enum CellType {
   Audio = "AUDIO",
@@ -432,6 +431,12 @@ export type InvalidAudioFile = {
   error: Scalars["String"];
 };
 
+export type InvalidPythonCode = {
+  errorCode: Scalars["String"];
+  errorMessage: Scalars["String"];
+  errorType: Scalars["String"];
+};
+
 export type LoginError = {
   errorMessage?: Maybe<Scalars["String"]>;
 };
@@ -478,7 +483,7 @@ export type Mutation = {
    * for renaming or moving it across the canvas.
    */
   updateNode?: Maybe<Scalars["Void"]>;
-  updateNodeDoor: NodeDoor;
+  updateNodeDoor: NodeDoorResponse;
   updateScriptCells: Array<ScriptCell>;
 };
 
@@ -686,6 +691,8 @@ export type NodeDoorInputUpdate = {
   uuid: Scalars["UUID"];
 };
 
+export type NodeDoorResponse = InvalidPythonCode | NodeDoor;
+
 export type NodeUpdate = {
   color?: InputMaybe<Scalars["String"]>;
   name?: InputMaybe<Scalars["String"]>;
@@ -1582,7 +1589,16 @@ export type UpdateNodeDoorMutationVariables = Exact<{
   order?: InputMaybe<Scalars["Int"]>;
 }>;
 
-export type UpdateNodeDoorMutation = { updateNodeDoor: { uuid: any } };
+export type UpdateNodeDoorMutation = {
+  updateNodeDoor:
+    | {
+        __typename: "InvalidPythonCode";
+        errorCode: string;
+        errorMessage: string;
+        errorType: string;
+      }
+    | { __typename: "NodeDoor"; uuid: any };
+};
 
 export const FullStreamInfoFragmentDoc = gql`
   fragment FullStreamInfo on StreamInfo {
@@ -2314,7 +2330,16 @@ export const UpdateNodeDoorDocument = gql`
     updateNodeDoor(
       nodeDoorInput: { name: $name, code: $code, order: $order, uuid: $uuid }
     ) {
-      uuid
+      ... on NodeDoor {
+        __typename
+        uuid
+      }
+      ... on InvalidPythonCode {
+        __typename
+        errorCode
+        errorMessage
+        errorType
+      }
     }
   }
 `;

From 1f9124e1e53a2661da646fc27df97a915bf41133 Mon Sep 17 00:00:00 2001
From: Dennis Scheiba <dennis.scheiba@gmx.de>
Date: Sat, 9 Sep 2023 13:23:00 +0200
Subject: [PATCH 45/51] improve node update procedure

---
 caster-editor/src/components/Graph.vue     |  4 +--
 caster-editor/src/stores/InterfaceStore.ts | 32 ++++++++++++++--------
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/caster-editor/src/components/Graph.vue b/caster-editor/src/components/Graph.vue
index 1b04a6fa..56987f6d 100644
--- a/caster-editor/src/components/Graph.vue
+++ b/caster-editor/src/components/Graph.vue
@@ -34,7 +34,7 @@ const {
   showNodeEditor,
   selectedNodeUUIDs,
   selectedEdgeUUIDs,
-  newScriptCellUpdates,
+  unsavedNodeChanges,
   selectedNodeForEditorUuid,
   vueFlowRef,
 } = storeToRefs(interfaceStore);
@@ -129,7 +129,7 @@ const onNodeDoubleClick = (uuid: string) => {
   console.log("uuid is", uuid);
   nextNodeDoubleClicked.value = uuid;
 
-  if (showNodeEditor.value && newScriptCellUpdates.value.size > 0) {
+  if (showNodeEditor.value && unsavedNodeChanges.value > 0) {
     showSwitchNodeDialog.value = true;
     return;
   }
diff --git a/caster-editor/src/stores/InterfaceStore.ts b/caster-editor/src/stores/InterfaceStore.ts
index 8805f199..3720670c 100644
--- a/caster-editor/src/stores/InterfaceStore.ts
+++ b/caster-editor/src/stores/InterfaceStore.ts
@@ -54,39 +54,44 @@ export const useInterfaceStore = defineStore("interface", () => {
 
   const executeUpdates = async () => {
     waitForNodeUpdate.value = true;
-    await executeScriptCellUpdates();
-    await executeNodeDoorUpdates();
+    const scriptUpdateSuccess = await executeScriptCellUpdates();
+    const nodeDoorUpdateSuccess = await executeNodeDoorUpdates();
+    if (scriptUpdateSuccess && nodeDoorUpdateSuccess) {
+      console.log(`Node door update is ${nodeDoorUpdateSuccess}`);
+      ElMessage.success(`Successfully saved node`);
+    }
     waitForNodeUpdate.value = false;
   };
 
   const unsavedNodeChanges = computed<boolean>((): boolean => {
     return (
-      newNodeDoorUpdates.value.size > 0 || newScriptCellUpdates.value.size > 1
+      newNodeDoorUpdates.value.size > 0 || newScriptCellUpdates.value.size > 0
     );
   });
 
-  const executeScriptCellUpdates = async () => {
+  const executeScriptCellUpdates = async (): Promise<boolean> => {
     const { error } = await updateScriptCellsMutation.executeMutation({
       scriptCellInputs: Array.from(newScriptCellUpdates.value.values()),
     });
 
     if (error) {
       ElMessage.error(`Could not update script cells: ${error.message}`);
-      return;
+      return false;
     } else {
       newScriptCellUpdates.value = new Map();
-      ElMessage.success(`Successfully saved script cells`);
+      return true;
     }
   };
 
-  const executeNodeDoorUpdates = async () => {
+  const executeNodeDoorUpdates = async (): Promise<Boolean> => {
     const toDelete: string[] = [];
-    newNodeDoorUpdates.value.forEach(async (nodeDoor, nodeDoorUUID) => {
+    let onlySuccess = true;
+    for (const [nodeDoorUUID, nodeDoor] of newNodeDoorUpdates.value) {
       const { data, error } = await updateNodeDoorMutation.executeMutation({
         ...nodeDoor,
       });
       if (data?.updateNodeDoor.__typename == "InvalidPythonCode") {
-        console.log(data.updateNodeDoor);
+        onlySuccess = false;
         ElMessage.error({
           message: `Invalid python code on node door ${
             nodeDoor.uuid
@@ -98,15 +103,18 @@ export const useInterfaceStore = defineStore("interface", () => {
           duration: 6000,
         });
       } else if (error) {
+        onlySuccess = false;
         ElMessage.error(
           `Failed to update node door ${nodeDoorUUID}: ${error.message}`,
         );
       } else {
         toDelete.push(nodeDoorUUID);
       }
-    });
-    // @todo should only delete successful transactions
-    newNodeDoorUpdates.value = new Map();
+    }
+    for (const uuid of toDelete) {
+      newNodeDoorUpdates.value.delete(uuid);
+    }
+    return onlySuccess;
   };
 
   return {

From 2f4cb9ce448f8c87b0ca5ffa816d7ec8ced0d7ec Mon Sep 17 00:00:00 2001
From: Dennis Scheiba <dennis.scheiba@gmx.de>
Date: Sat, 9 Sep 2023 13:28:51 +0200
Subject: [PATCH 46/51] fix node updates on node switch

---
 caster-editor/src/components/Graph.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/caster-editor/src/components/Graph.vue b/caster-editor/src/components/Graph.vue
index 56987f6d..a55d41b3 100644
--- a/caster-editor/src/components/Graph.vue
+++ b/caster-editor/src/components/Graph.vue
@@ -126,10 +126,9 @@ const onNodeDragStop = (nodeDragEvent: NodeDragEvent) => {
 };
 
 const onNodeDoubleClick = (uuid: string) => {
-  console.log("uuid is", uuid);
   nextNodeDoubleClicked.value = uuid;
 
-  if (showNodeEditor.value && unsavedNodeChanges.value > 0) {
+  if (showNodeEditor.value && unsavedNodeChanges.value) {
     showSwitchNodeDialog.value = true;
     return;
   }

From 83cfa677823ecd4ef7b57394c19c288eb8faa31d Mon Sep 17 00:00:00 2001
From: Vinzenz Aubry <vinzenzaubry@gmail.com>
Date: Sun, 10 Sep 2023 01:00:30 -0400
Subject: [PATCH 47/51] styled flowNodeDefault

---
 .../src/components/FlowNodeDefault.vue        | 177 ++++++++++--------
 .../src/components/GencasterNode.vue          |  83 --------
 caster-editor/src/components/Graph.vue        |   5 +-
 3 files changed, 102 insertions(+), 163 deletions(-)
 delete mode 100644 caster-editor/src/components/GencasterNode.vue

diff --git a/caster-editor/src/components/FlowNodeDefault.vue b/caster-editor/src/components/FlowNodeDefault.vue
index d1248967..4b071295 100644
--- a/caster-editor/src/components/FlowNodeDefault.vue
+++ b/caster-editor/src/components/FlowNodeDefault.vue
@@ -1,99 +1,122 @@
-<script lang="ts" setup>
-import type { NodeSubscription } from "@/graphql";
+<script setup lang="ts">
 import { Handle, Position } from "@vue-flow/core";
-import { computed } from "vue";
+import { onMounted } from "vue";
+import type { Node } from "@/graphql";
+import { useVueFlow } from "@vue-flow/core";
 
-interface DataInput {
-  data: {
-    name: {
-      type: String;
-      required: true;
-    };
-    uuid: {
-      type: String;
-      required: true;
-    };
-    scriptCells: {
-      type: NodeSubscription["node"]["scriptCells"];
-      required: true;
-    };
-  };
-}
-
-const props = defineProps<DataInput>();
-
-const emit = defineEmits(["dblclick"]);
-
-const onDblClick = () => {
-  emit("dblclick", props.data.uuid);
-};
+const props = defineProps<{
+  data: Pick<Node, "name" | "uuid" | "inNodeDoors" | "outNodeDoors">;
+}>();
 
-const sourceHandleStyleA = computed(() => ({
-  backgroundColor: "red",
-  width: "10px",
-  height: "10px",
-}));
+const { updateNodeInternals } = useVueFlow();
 
-const sourceHandleStyleB = computed(() => ({
-  backgroundColor: "blue",
-  width: "10px",
-  height: "10px",
-}));
-
-const isValidConnection = () => {
-  return true;
-};
-// vallidator for later
-// const isValidConnection = (connection: Connection) => {
-//   // console.log(connection.targetHandle === "a");
-//   // return connection.targetHandle === "a";
-//   return true;
-// };
+onMounted(() => {
+  updateNodeInternals();
+});
 </script>
 
 <template>
-  <div
-    class="node default-node"
-    @dblclick="onDblClick"
-  >
-    <p>{{ data.name }}</p>
+  <div class="gencaster-default-node">
+    <div class="title">
+      <p>
+        {{ data.name }}
+      </p>
+    </div>
 
-    <Handle
-      id="a"
-      type="target"
-      :position="Position.Left"
-      :style="sourceHandleStyleA"
-    />
+    <div class="nodes">
+      <div class="in-nodes">
+        <div
+          v-for="(inDoor, index) in data.inNodeDoors"
+          :key="inDoor.uuid"
+          class="in-node"
+        >
+          <Handle
+            :id="inDoor.uuid"
+            class="handle"
+            :position="Position.Left"
+            :style="'top: ' + (index * 24 + 42) + 'px' + '; left: -6px'"
+            type="target"
+          >
+            <!-- <slot>
+              <span style="pointer-events: none"> {{ inDoor.name }} </span>
+            </slot> -->
+          </Handle>
+        </div>
+      </div>
 
-    <Handle
-      id="b"
-      type="source"
-      :position="Position.Right"
-      :style="sourceHandleStyleB"
-      :is-valid-connection="isValidConnection"
-    />
+      <div
+        class="out-nodes"
+        :style="'height: ' + data.outNodeDoors.length * 24 + 'px'"
+      >
+        <div
+          v-for="(outDoor, index) in data.outNodeDoors"
+          :key="outDoor.uuid"
+          class="out-node"
+        >
+          <Handle
+            :id="outDoor.uuid"
+            class="handle"
+            :position="Position.Right"
+            :style="'top: ' + (index * 24 + 42) + 'px' + '; right: -6px'"
+            type="source"
+          >
+            <slot>
+              <span style="pointer-events: none"> {{ outDoor.name }} </span>
+            </slot>
+          </Handle>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
 @import "@/assets/scss/variables.module.scss";
-
-.node {
-  padding: 10px;
-  border-radius: 4px;
+.gencaster-default-node {
+  background-color: $white;
+  min-height: 55px;
   height: auto;
   width: $nodeDefaultWidth;
-  // border: 1px solid black;
   display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  min-height: 50px;
+  flex-direction: column;
+  border: 1px solid $mainBlack;
 
-  p {
-    text-align: center;
-    height: 100%;
+  .title {
+    background-color: $grey-light;
+    height: 24px;
+    padding: 2px 8px 0 8px;
     margin: 0;
   }
 }
+
+.handle {
+  width: 12px;
+  height: 12px;
+  border-radius: 12px;
+  border: 1px solid $mainBlack;
+  background-color: $grey-light;
+}
+
+.out-nodes {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  width: 100px;
+  margin-bottom: 12px;
+
+  .out-node {
+    span {
+      position: absolute;
+      text-align: right;
+      pointer-events: none;
+      right: 0;
+      height: 20px;
+      width: calc($nodeDefaultWidth - 24px);
+      transform: translateX(-16px) translateY(-5px);
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  }
+}
 </style>
diff --git a/caster-editor/src/components/GencasterNode.vue b/caster-editor/src/components/GencasterNode.vue
deleted file mode 100644
index 02f74d37..00000000
--- a/caster-editor/src/components/GencasterNode.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<script setup lang="ts">
-import { Handle, Position } from "@vue-flow/core";
-import { onMounted } from "vue";
-import type { Node } from "@/graphql";
-import { useVueFlow } from "@vue-flow/core";
-
-const props = defineProps<{
-  data: Pick<Node, "name" | "uuid" | "inNodeDoors" | "outNodeDoors">;
-}>();
-
-const { updateNodeInternals } = useVueFlow();
-
-onMounted(() => {
-  updateNodeInternals();
-});
-</script>
-
-<template>
-  <div class="gencaster-node">
-    <div>{{ data.name }}</div>
-
-    <div class="in-nodes">
-      <div
-        v-for="inDoor in data.inNodeDoors"
-        :key="inDoor.uuid"
-        class="in-node"
-      >
-        <Handle
-          :id="inDoor.uuid"
-          style="background-color: red"
-          type="target"
-          :position="Position.Left"
-        >
-          <slot>
-            <span style="pointer-events: none"> {{ inDoor.name }} </span>
-          </slot>
-        </Handle>
-      </div>
-    </div>
-
-    <div class="out-nodes">
-      <div
-        v-for="outDoor in data.outNodeDoors"
-        :key="outDoor.uuid"
-        class="out-node"
-      >
-        <Handle
-          :id="outDoor.uuid"
-          :position="Position.Right"
-          type="source"
-          style="background-color: green; top: unset"
-        >
-          <slot>
-            <span style="pointer-events: none"> {{ outDoor.name }} </span>
-          </slot>
-        </Handle>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.gencaster-node {
-  background-color: greenyellow;
-  min-height: 10vh;
-  min-width: 10vw;
-  display: flex;
-  flex-direction: row;
-  border: 1px dashed black;
-}
-
-.out-nodes {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  width: 5vw;
-}
-
-.out-node {
-  height: 1vh;
-  margin: 10px;
-}
-</style>
diff --git a/caster-editor/src/components/Graph.vue b/caster-editor/src/components/Graph.vue
index a55d41b3..a4e37d53 100644
--- a/caster-editor/src/components/Graph.vue
+++ b/caster-editor/src/components/Graph.vue
@@ -1,7 +1,7 @@
 <!-- eslint-disable vue/no-v-model-argument -->
 <script lang="ts" setup>
 import { ElMessage } from "element-plus";
-import DefaultNode from "@/components/FlowNodeDefault.vue";
+import NodeDefault from "@/components/FlowNodeDefault.vue";
 import { ref, type Ref, watch } from "vue";
 import { storeToRefs } from "pinia";
 import { gsap } from "gsap";
@@ -16,7 +16,6 @@ import type {
   Connection,
 } from "@vue-flow/core";
 import { VueFlow, useVueFlow } from "@vue-flow/core";
-import GencasterNode from "@/components/GencasterNode.vue";
 
 // mutations
 const updateNodeMutation = useUpdateNodeMutation();
@@ -270,7 +269,7 @@ const onConnect = async (connection: Connection) => {
         @connect="onConnect"
       >
         <template #node-custom="{ data }">
-          <GencasterNode
+          <NodeDefault
             :data="data"
             :connectable="true"
             @dblclick="() => onNodeDoubleClick(data.uuid)"

From 48d1c60e84926aaaaf3f1cd890ecd4bbf7fc65ff Mon Sep 17 00:00:00 2001
From: Vinzenz Aubry <vinzenzaubry@gmail.com>
Date: Sun, 10 Sep 2023 02:30:43 -0400
Subject: [PATCH 48/51] Added scriptcell styling

---
 .../src/assets/scss/_elementplus.scss         |  17 +++
 .../src/components/FlowNodeDefault.vue        |   2 +-
 caster-editor/src/components/NodeDoor.vue     |  91 ++++++++---
 caster-editor/src/components/NodeDoors.vue    | 142 ++++++++++++------
 4 files changed, 184 insertions(+), 68 deletions(-)

diff --git a/caster-editor/src/assets/scss/_elementplus.scss b/caster-editor/src/assets/scss/_elementplus.scss
index 11758d39..9cafd4f5 100644
--- a/caster-editor/src/assets/scss/_elementplus.scss
+++ b/caster-editor/src/assets/scss/_elementplus.scss
@@ -12,12 +12,18 @@
 
   --el-button-text-color: #{$black} !important;
   --el-button-hover-text-color: #{$black} !important;
+
+  --el-input-border-radius: 0 !important;
+  --el-input-focus-border-color: #{$green-light} !important;
+  --el-disabled-bg-color: #{$grey-light} !important;
 }
 
 .el-button--primary {
   --el-color-primary: #{$green-light} !important;
   --el-button-hover-border-color: #{$green-light} !important;
   --el-button-hover-bg-color: #{$green-light} !important;
+  --el-button-disabled-bg-color: #{$grey} !important;
+  --el-button-disabled-border-color: #{$grey} !important;
 }
 
 .el-button--danger {
@@ -56,6 +62,17 @@
   }
 }
 
+.el-input {
+  background-color: #{$grey-light};
+  box-shadow: unset;
+}
+
+.el-textarea,
+.el-textarea__inner {
+  background-color: #{$grey-light};
+  box-shadow: unset;
+}
+
 /* MODALS */
 .el-overlay-dialog,
 .el-overlay {
diff --git a/caster-editor/src/components/FlowNodeDefault.vue b/caster-editor/src/components/FlowNodeDefault.vue
index 4b071295..910f3b1f 100644
--- a/caster-editor/src/components/FlowNodeDefault.vue
+++ b/caster-editor/src/components/FlowNodeDefault.vue
@@ -4,7 +4,7 @@ import { onMounted } from "vue";
 import type { Node } from "@/graphql";
 import { useVueFlow } from "@vue-flow/core";
 
-const props = defineProps<{
+defineProps<{
   data: Pick<Node, "name" | "uuid" | "inNodeDoors" | "outNodeDoors">;
 }>();
 
diff --git a/caster-editor/src/components/NodeDoor.vue b/caster-editor/src/components/NodeDoor.vue
index 4df19b77..9ffbc5ef 100644
--- a/caster-editor/src/components/NodeDoor.vue
+++ b/caster-editor/src/components/NodeDoor.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useDeleteNodeDoorMutation, type NodeDoor } from "@/graphql";
-import { ElRow, ElCol, ElInput, ElIcon, ElMessage } from "element-plus";
+import { ElRow, ElCol, ElInput, ElMessage } from "element-plus";
 import { Delete } from "@element-plus/icons-vue";
 import { computed, ref, type Ref } from "vue";
 import { storeToRefs } from "pinia";
@@ -73,8 +73,11 @@ const nodeDoorCode = computed<string>({
 </script>
 
 <template>
-  <div class="node-door radius">
-    <ElRow :gutter="10">
+  <div class="node-door">
+    <ElRow
+      :gutter="10"
+      class="input"
+    >
       <ElCol :span="6">
         <span
           class="node-door-name"
@@ -88,29 +91,77 @@ const nodeDoorCode = computed<string>({
           />
         </span>
       </ElCol>
-      <ElCol :span="16">
-        <ElInput v-model="nodeDoorCode" />
-      </ElCol>
-      <ElCol :span="2">
-        <ElButton
-          type="danger"
-          :disabled="nodeDoor.isDefault"
-          @click="deleteNodeDoor()"
-        >
-          <ElIcon><Delete /></ElIcon>
-        </ElButton>
+      <ElCol :span="18">
+        <ElInput
+          v-if="nodeDoor.isDefault"
+          v-model="nodeDoorCode"
+          autosize
+          type="textarea"
+          placeholder="Default"
+          disabled
+        />
+        <ElInput
+          v-else
+          v-model="nodeDoorCode"
+          autosize
+          type="textarea"
+          placeholder="Please input"
+        />
       </ElCol>
     </ElRow>
+    <button
+      class="unstyled"
+      :disabled="nodeDoor.isDefault"
+      @click="deleteNodeDoor()"
+    >
+      <div class="icon">
+        <Delete />
+      </div>
+    </button>
   </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
+@import "@/assets/scss/variables.module.scss";
+
 .node-door {
-  border-radius: 4px;
-  border: 1px solid var(--el-border-color);
-}
+  margin-bottom: 12px;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+
+  .input {
+    width: calc(100% - 25px);
+  }
+
+  button {
+    border: none;
+    background-color: transparent;
+    width: 31px;
+    height: 31px;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: $borderRadius;
+    transform: translateX(5px);
+    .icon {
+      width: 20px;
+      height: 20px;
+    }
+
+    &:disabled {
+      opacity: 0.4;
+    }
 
-.default-door {
-  background-color: aquamarine;
+    &:disabled:hover {
+      background-color: transparent;
+    }
+
+    &:hover:not([disabled]) {
+      background-color: $grey-light;
+    }
+  }
 }
 </style>
diff --git a/caster-editor/src/components/NodeDoors.vue b/caster-editor/src/components/NodeDoors.vue
index e994734e..993c4a8a 100644
--- a/caster-editor/src/components/NodeDoors.vue
+++ b/caster-editor/src/components/NodeDoors.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { NodeDoor as NodeDoorType } from "@/graphql";
 import NodeDoor from "@/components/NodeDoor.vue";
-import { ElButton, type ElCol } from "element-plus";
 import { ref, type Ref } from "vue";
 import DialogAddNodeDoor from "@/components/DialogAddNodeDoor.vue";
 
@@ -10,7 +9,7 @@ type DoorData = Pick<
   "code" | "doorType" | "isDefault" | "name" | "order" | "uuid"
 >;
 
-const props = defineProps<{
+defineProps<{
   inNodeDoors: DoorData[];
   outNodeDoors: DoorData[];
   nodeUuid: string;
@@ -20,57 +19,106 @@ const showAddNodeDoorDialog: Ref<boolean> = ref(false);
 </script>
 
 <template>
-  <div class="node-doors">
-    <span class="node-doors-headline">Node doors</span>
-    <div
-      v-if="inNodeDoors.length > 0"
-      class="node-doors-in"
-    >
-      <span class="node-door-headline">In</span><br>
-      <NodeDoor
-        v-for="nodeDoor in inNodeDoors"
-        :key="nodeDoor.uuid"
-        :node-door="nodeDoor"
-      />
-    </div>
-    <div
-      v-if="outNodeDoors.length > 0"
-      class="node-doors-out"
-    >
-      <span class="node-door-headline">Out</span><br>
-      <NodeDoor
-        v-for="nodeDoor in outNodeDoors"
-        :key="nodeDoor.uuid"
-        :node-door="nodeDoor"
-      />
-      <ElRow style="padding-top: 10px">
-        <ElButton
-          style="width: 100%"
-          @click="
-            () => {
-              showAddNodeDoorDialog = true;
-            }
-          "
-        >
-          +
-        </ElButton>
+  <div>
+    <hr>
+    <div class="node-doors">
+      <h3
+        v-if="inNodeDoors.length > 0"
+        class="node-doors-headline"
+      >
+        Scene Entry Doors
+      </h3>
+      <div
+        v-if="inNodeDoors.length > 0"
+        class="node-doors-in"
+      >
+        <NodeDoor
+          v-for="nodeDoor in inNodeDoors"
+          :key="nodeDoor.uuid"
+          :node-door="nodeDoor"
+        />
+      </div>
+      <h3 class="node-doors-headline">
+        Scene Exit Doors
+      </h3>
+      <ElRow
+        :gutter="10"
+        class="legend"
+      >
+        <ElCol :span="6">
+          <span>Name</span>
+        </ElCol>
+        <ElCol :span="18">
+          <span>Python</span>
+        </ElCol>
       </ElRow>
+      <div
+        v-if="outNodeDoors.length > 0"
+        class="node-doors-out"
+      >
+        <NodeDoor
+          v-for="nodeDoor in outNodeDoors"
+          :key="nodeDoor.uuid"
+          :node-door="nodeDoor"
+        />
+        <ElRow>
+          <button
+            class="node-add unstyled"
+            @click="
+              () => {
+                showAddNodeDoorDialog = true;
+              }
+            "
+          >
+            +
+          </button>
+        </ElRow>
+      </div>
+      <DialogAddNodeDoor
+        v-if="showAddNodeDoorDialog"
+        :node-uuid="nodeUuid"
+        @closed="() => (showAddNodeDoorDialog = false)"
+      />
     </div>
-    <DialogAddNodeDoor
-      v-if="showAddNodeDoorDialog"
-      :node-uuid="nodeUuid"
-      @closed="() => (showAddNodeDoorDialog = false)"
-    />
   </div>
 </template>
 
-<style scoped>
-span.node-door-headline {
-  background-color: lightgray;
-  font-size: larger;
+<style lang="scss" scoped>
+@import "@/assets/scss/variables.module.scss";
+
+hr {
+  border-top: 1px solid $grey;
+  border-bottom: 0px;
+  margin-bottom: $spacingM;
+}
+
+.node-doors-headline {
+  margin-bottom: $spacingM;
+}
+
+.node-doors {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.node-add {
+  background-color: transparent;
+  border: 1px solid $grey;
+  width: 100%;
+  height: 31px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    background-color: $grey-light;
+  }
 }
 
-span.node-doors-headline {
-  font-size: x-large;
+.legend {
+  width: calc(100% - 25px); // same width as door
+  margin-bottom: 4px;
+  color: $grey-dark;
+  font-size: 14px;
 }
 </style>

From f71f486c1c22cf8343b7e4c7eef5c898fe046f09 Mon Sep 17 00:00:00 2001
From: Dennis Scheiba <dennis.scheiba@gmx.de>
Date: Sun, 10 Sep 2023 10:42:41 +0200
Subject: [PATCH 49/51] fix check for unsaved changes

---
 caster-editor/src/components/NodeEditorHeader.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/caster-editor/src/components/NodeEditorHeader.vue b/caster-editor/src/components/NodeEditorHeader.vue
index eca968b5..bc4d59bd 100644
--- a/caster-editor/src/components/NodeEditorHeader.vue
+++ b/caster-editor/src/components/NodeEditorHeader.vue
@@ -120,7 +120,7 @@ const closeScriptCellEditor = async () => {
 };
 
 const addScriptCell = async (cellType: CellType) => {
-  if (unsavedNodeChanges) {
+  if (unsavedNodeChanges.value) {
     ElMessage.warning(
       "Please save your changes before adding a new script cell",
     );

From 462073d6732b1f6fede1686ad99de4fa6082f4be Mon Sep 17 00:00:00 2001
From: Dennis Scheiba <dennis.scheiba@gmx.de>
Date: Sun, 10 Sep 2023 11:31:04 +0200
Subject: [PATCH 50/51] fix race condition on notification of node door update

---
 caster-back/story_graph/models.py | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/caster-back/story_graph/models.py b/caster-back/story_graph/models.py
index c062be81..30f6c9f5 100644
--- a/caster-back/story_graph/models.py
+++ b/caster-back/story_graph/models.py
@@ -10,7 +10,7 @@
 from asgiref.sync import async_to_sync, sync_to_async
 from channels.layers import get_channel_layer
 from django.core.exceptions import ValidationError
-from django.db import models
+from django.db import models, transaction
 from django.db.models import Q, signals
 from django.dispatch import receiver
 from django.utils.translation import gettext as _
@@ -407,9 +407,23 @@ def update_node_door_ws(sender, instance: NodeDoor, **kwargs) -> None:
             "Failed to obtain a handle on the channel layer to distribute node_door updates"
         )
         return
-    async_to_sync(GenCasterChannel.send_node_update)(channel_layer, instance.node.uuid)
-    async_to_sync(GenCasterChannel.send_graph_update)(
-        channel_layer, instance.node.graph.uuid
+    # sorry for this atrocity - there seems to be race conditions with signals
+    # which makes updates out-dated, see
+    # https://docs.djangoproject.com/en/dev/topics/db/transactions/#performing-actions-after-commit
+    # it is possible that the instance is not available anymore after the commit, so
+    # so we store it here in memory
+    node_uuid = instance.node.uuid
+    graph_uuid = instance.node.graph.uuid
+    transaction.on_commit(
+        lambda: async_to_sync(GenCasterChannel.send_node_update)(
+            channel_layer, node_uuid
+        )
+    )
+    transaction.on_commit(
+        lambda: async_to_sync(GenCasterChannel.send_graph_update)(
+            channel_layer,
+            graph_uuid,
+        )
     )
 
 

From 3b59e4311749c71148ea37fdbc6133e03214447f Mon Sep 17 00:00:00 2001
From: Vinzenz Aubry <vinzenzaubry@gmail.com>
Date: Sun, 10 Sep 2023 11:20:47 -0400
Subject: [PATCH 51/51] added highlighting for nodes

---
 caster-editor/src/assets/scss/_vueflow.scss      | 11 ++++-------
 caster-editor/src/components/DialogAddNode.vue   |  2 --
 caster-editor/src/components/FlowNodeDefault.vue |  8 +++++---
 caster-editor/src/components/Graph.vue           |  1 +
 4 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/caster-editor/src/assets/scss/_vueflow.scss b/caster-editor/src/assets/scss/_vueflow.scss
index 61b2896e..0b889e08 100644
--- a/caster-editor/src/assets/scss/_vueflow.scss
+++ b/caster-editor/src/assets/scss/_vueflow.scss
@@ -4,14 +4,11 @@
   cursor: move !important;
 }
 
-.vue-flow__node {
-  .node {
-    background-color: $grey-medium;
-  }
+.gencaster-default-node {
+  background-color: $white;
+  border: 1px solid $mainBlack;
 
   &.selected {
-    .node {
-      background-color: $green-light;
-    }
+    box-shadow: 0px 0px 7px 0px $green-light;
   }
 }
diff --git a/caster-editor/src/components/DialogAddNode.vue b/caster-editor/src/components/DialogAddNode.vue
index 1bb35994..16af314b 100644
--- a/caster-editor/src/components/DialogAddNode.vue
+++ b/caster-editor/src/components/DialogAddNode.vue
@@ -31,8 +31,6 @@ const createNode = async () => {
     const { height, width } = vueFlowRef.value.dimensions;
     const currentTransform = vueFlowRef.value.getTransform();
 
-    console.log(height, width, currentTransform);
-
     positionX =
       width / 2 - currentTransform.x - parseInt(variables.nodeDefaultWidth) / 2;
     positionY = (height / 2 - currentTransform.y) * 0.9;
diff --git a/caster-editor/src/components/FlowNodeDefault.vue b/caster-editor/src/components/FlowNodeDefault.vue
index 910f3b1f..0f45c981 100644
--- a/caster-editor/src/components/FlowNodeDefault.vue
+++ b/caster-editor/src/components/FlowNodeDefault.vue
@@ -6,6 +6,7 @@ import { useVueFlow } from "@vue-flow/core";
 
 defineProps<{
   data: Pick<Node, "name" | "uuid" | "inNodeDoors" | "outNodeDoors">;
+  selected: boolean;
 }>();
 
 const { updateNodeInternals } = useVueFlow();
@@ -16,7 +17,10 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="gencaster-default-node">
+  <div
+    class="gencaster-default-node"
+    :class="{ selected: selected }"
+  >
     <div class="title">
       <p>
         {{ data.name }}
@@ -73,13 +77,11 @@ onMounted(() => {
 <style lang="scss" scoped>
 @import "@/assets/scss/variables.module.scss";
 .gencaster-default-node {
-  background-color: $white;
   min-height: 55px;
   height: auto;
   width: $nodeDefaultWidth;
   display: flex;
   flex-direction: column;
-  border: 1px solid $mainBlack;
 
   .title {
     background-color: $grey-light;
diff --git a/caster-editor/src/components/Graph.vue b/caster-editor/src/components/Graph.vue
index a4e37d53..ffa5e124 100644
--- a/caster-editor/src/components/Graph.vue
+++ b/caster-editor/src/components/Graph.vue
@@ -272,6 +272,7 @@ const onConnect = async (connection: Connection) => {
           <NodeDefault
             :data="data"
             :connectable="true"
+            :selected="selectedNodeUUIDs.includes(data.uuid)"
             @dblclick="() => onNodeDoubleClick(data.uuid)"
           />
         </template>