Finished: Fix property is not updating

Author: HerrMotz

query-by-graph/src/components/PropertyConnection.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="z-10">
     <svg width="250" height="250" xmlns="http://www.w3.org/2000/svg">
       <!-- This highlights the path on selection -->
       <path :d="path"
@@ -13,9 +13,12 @@
           dropdown-classes="w-80 -ml-40"
           @pointerdown.stop=""
           @dblclick.stop=""
-          @selected-entity="(prop) => {value = prop; $emit('changed', value)}"
+          @selected-entity="(prop) => {value = prop; $emit('changedEntitySelector', value)}"
       />
-      <h3 v-if="value" class="font-bold font-mono w-32 -ml-16">
+      <h3 v-if="value" class="font-bold font-mono w-32 -ml-16 bg-amber-50">
+        {{ value.label }}
+      </h3>
+      <h3 v-if="value" class="font-bold font-mono w-32 -ml-16 bg-amber-50">
         {{value.prefix.abbreviation}}{{ value.prefix.abbreviation && ':'}}{{value.id}}
       </h3>
     </div>
@@ -37,7 +40,7 @@ export default defineComponent({
   name: "CustomConnection",
   components: {EntitySelector},
   props: ['data', 'start', 'end', 'path'],
-  emits: ['changed'],
+  emits: ['changedEntitySelector'],
   data() {
     return {
       isMounted: false,
@@ -46,9 +49,6 @@ export default defineComponent({
   },
   mounted() {
     this.isMounted = true;
-    this.$emit("changed",
-      variableEntity
-    )
   },
   computed: {
     centerX() {

query-by-graph/src/lib/rete/editor.ts

@@ -1,25 +1,19 @@
-import {NodeEditor, GetSchemes, ClassicPreset} from "rete";
-import {AreaPlugin, AreaExtensions, Area2D} from "rete-area-plugin";
-import {
-    ConnectionPlugin,
-    Presets as ConnectionPresets
-} from "rete-connection-plugin";
+import {ClassicPreset, GetSchemes, NodeEditor} from "rete";
+import {Area2D, AreaExtensions, AreaPlugin} from "rete-area-plugin";
+import {ConnectionPlugin, Presets as ConnectionPresets} from "rete-connection-plugin";
 import {ConnectionPathPlugin} from "rete-connection-path-plugin";
-import {
-    HistoryExtensions,
-    HistoryPlugin,
-    Presets as HistoryPresets
-} from "rete-history-plugin";
-import {VuePlugin, Presets, VueArea2D} from "rete-vue-plugin";
+import {HistoryExtensions, HistoryPlugin, Presets as HistoryPresets} from "rete-history-plugin";
+import {Presets, VueArea2D, VuePlugin} from "rete-vue-plugin";
 import {h} from "vue";
 import CustomConnection from "../../components/PropertyConnection.vue";
 import {removeNodeWithConnections} from "./utils.ts";
 import EntityType from "../types/EntityType.ts";
 import ConnectionInterfaceType from "../types/ConnectionInterfaceType.ts";
 import EntityNodeComponent from "../../components/EntityNode.vue";
 import CustomInputControl from "../../components/EntitySelectorInputControl.vue";
-import {noEntity,variableEntityConstructor} from "./constants.ts";
+import {noEntity, variableEntityConstructor} from "./constants.ts";
 import {noDataSource} from "../constants";
+import {deepCopy} from "../utils";
 
 // Each connection holds additional data, which is defined here
 class Connection extends ClassicPreset.Connection<
@@ -96,7 +90,10 @@ export async function createEditor(container: HTMLElement) {
             increaseVariablePropCounter = false;
             highestIdCount++;
         }
-        props.data.property = variableEntityConstructor(highestIdCount.toString())
+
+        if (!props.data.property) {
+            props.data.property = variableEntityConstructor(highestIdCount.toString())
+        }
 
         const label = "connection";
 
@@ -122,9 +119,18 @@ export async function createEditor(container: HTMLElement) {
                 props.data.selected = true;
                 area.update("connection", id);
             },
-            onChanged: (value: EntityType) => {
-                props.data.property = value;
-                area.update("connection", id);
+            onChangedEntitySelector: (value: EntityType) => {
+                // in order to force the editor to notice the change,
+                // I need to create a copy of the connection,
+                // change the entity and add it back.
+                const thisConnection = deepCopy(editor.getConnection(id));
+
+                if (thisConnection) {
+                    thisConnection.property = value
+                    editor.removeConnection(id).then(() => {
+                        editor.addConnection(thisConnection);
+                    });
+                }
             }
         });
     }