From 61294b175ff020508ff65ea887a0957f0d22521a Mon Sep 17 00:00:00 2001
From: Robert Duncan <robirtduncan@gmail.com>
Date: Mon, 21 Oct 2024 21:10:56 -0400
Subject: [PATCH 1/4] wip: add edge create, remove

---
 node_editor/src/components/NodeEditor.vue | 34 +++++++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/node_editor/src/components/NodeEditor.vue b/node_editor/src/components/NodeEditor.vue
index 1a867df8..84988cb6 100644
--- a/node_editor/src/components/NodeEditor.vue
+++ b/node_editor/src/components/NodeEditor.vue
@@ -28,6 +28,7 @@
 			:fit-view-on-init="true"
 			v-model="vueFlowElements"
 			@wheel.prevent="onWheel">
+			@connect="onConnect"
 			<template #node-editable="props">
 				<EditableNode v-bind="props" @change="labelChanged($event, props.id)" />
 			</template>
@@ -39,7 +40,7 @@
 </template>
 
 <script setup lang="ts">
-import { type VueFlowStore, Position, VueFlow, useVueFlow, Node } from '@vue-flow/core'
+import { type VueFlowStore, Position, VueFlow, useVueFlow, Connection, Node } from '@vue-flow/core'
 import { type HTMLAttributes, ref, computed, defineEmits, onBeforeUnmount, onMounted } from 'vue'
 
 import EditableEdge from '@/components/EditableEdge.vue'
@@ -103,6 +104,7 @@ const elements = computed({
 		emit('update:modelValue', JSON.parse(JSON.stringify(newValue)))
 	},
 })
+const { onConnect, addEdges, onEdgeContextMenu, onPaneReady, removeEdges } = useVueFlow()
 
 onMounted(() => {
 	document.removeEventListener('keypress', handleKeypress)
@@ -113,7 +115,6 @@ onBeforeUnmount(() => {
 	document.removeEventListener('keypress', handleKeypress)
 })
 
-const { onPaneReady } = useVueFlow()
 onPaneReady(instance => {
 	vueFlowInstance.value = instance
 })
@@ -222,6 +223,35 @@ const labelChanged = (e, id) => {
 		}
 	}
 }
+
+const handleConnect = (connection: Connection) => {
+	const id = vueFlowElements.value.length
+	const newEdge = {
+		id: `edge-${id}`,
+		source: connection.source,
+		target: connection.target,
+		type: 'editable',
+		label: `New Edge`,
+		interactionWidth: 400,
+		animated: true,
+		events: {
+			click: () => {
+				activeElementKey.value = newEdge.id
+			},
+		},
+	}
+	addEdges([newEdge])
+}
+
+onConnect(handleConnect)
+
+const handleEdgeRemove = edgeId => {
+	removeEdges(edgeId)
+}
+
+onEdgeContextMenu(({ event, edge }) => {
+	handleEdgeRemove(edge.id)
+})
 </script>
 
 <style>

From 51df8fb9e77bc9ab8b2b0f00eaf03c09993945dd Mon Sep 17 00:00:00 2001
From: Robert Duncan <robirtduncan@gmail.com>
Date: Mon, 21 Oct 2024 21:18:14 -0400
Subject: [PATCH 2/4] chore: change file

---
 .../168_edge_connections_2024-10-22-01-17.json         | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 common/changes/@stonecrop/node-editor/168_edge_connections_2024-10-22-01-17.json

diff --git a/common/changes/@stonecrop/node-editor/168_edge_connections_2024-10-22-01-17.json b/common/changes/@stonecrop/node-editor/168_edge_connections_2024-10-22-01-17.json
new file mode 100644
index 00000000..970a1a3f
--- /dev/null
+++ b/common/changes/@stonecrop/node-editor/168_edge_connections_2024-10-22-01-17.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/node-editor",
+      "comment": "Add handling for edge creation and removal.",
+      "type": "none"
+    }
+  ],
+  "packageName": "@stonecrop/node-editor"
+}
\ No newline at end of file

From 653b796c9e077da966a00ec6fc0b3f981be3eddd Mon Sep 17 00:00:00 2001
From: Robert Duncan <robirtduncan@gmail.com>
Date: Sat, 26 Oct 2024 18:48:04 -0400
Subject: [PATCH 3/4] wip: remove onConnect string, add edge label width,
 modify edge state handling

---
 node_editor/src/components/EditableEdge.vue |  1 +
 node_editor/src/components/NodeEditor.vue   |  1 -
 node_editor/src/components/StateEditor.vue  | 42 +++++++++------------
 3 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/node_editor/src/components/EditableEdge.vue b/node_editor/src/components/EditableEdge.vue
index a8ad7d29..f9a7e231 100644
--- a/node_editor/src/components/EditableEdge.vue
+++ b/node_editor/src/components/EditableEdge.vue
@@ -87,5 +87,6 @@ export default {
 
 .label-input {
 	text-align: center;
+	width: 40ch;
 }
 </style>
diff --git a/node_editor/src/components/NodeEditor.vue b/node_editor/src/components/NodeEditor.vue
index 84988cb6..e909bbc2 100644
--- a/node_editor/src/components/NodeEditor.vue
+++ b/node_editor/src/components/NodeEditor.vue
@@ -28,7 +28,6 @@
 			:fit-view-on-init="true"
 			v-model="vueFlowElements"
 			@wheel.prevent="onWheel">
-			@connect="onConnect"
 			<template #node-editable="props">
 				<EditableNode v-bind="props" @change="labelChanged($event, props.id)" />
 			</template>
diff --git a/node_editor/src/components/StateEditor.vue b/node_editor/src/components/StateEditor.vue
index ba7c9575..c29e4655 100644
--- a/node_editor/src/components/StateEditor.vue
+++ b/node_editor/src/components/StateEditor.vue
@@ -40,31 +40,26 @@ const elements = computed<FlowElements>({
 			}
 
 			stateHash[key] = el
+		}
 
+		for (const [key, value] of Object.entries(states.value)) {
 			if (value.on) {
 				for (const [edgeKey, edgeValue] of Object.entries(value.on)) {
-					if (Array.isArray(edgeValue)) {
-						for (const edge of edgeValue) {
-							// TODO: handle typescript errors for both types of states
-							// eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
-							const edgeJson = edge.toJSON()
-							// eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
-							const target = edgeJson.target.toString()
-							stateElements.push({
-								id: `${key}-${edgeKey}`,
-								target: target,
-								source: key,
-								label: edgeKey,
-								animated: true,
-							})
-
-							// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-							hasInputs[target] = true
-						}
-					}
+					const target = edgeValue.target || edgeValue
+					// TODO: handle typescript errors for both types of states
+					// eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+					stateElements.push({
+						id: `${key}-${target}`,
+						source: key,
+						target: target,
+						label: edgeKey,
+						animated: true,
+					})
+
+					// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+					hasInputs[target] = true
 				}
 			}
-
 			index++
 		}
 
@@ -78,6 +73,7 @@ const elements = computed<FlowElements>({
 
 		return stateElements
 	},
+
 	set: newValue => {
 		// update modelValue when elements change
 		onElementsChange(newValue)
@@ -85,7 +81,6 @@ const elements = computed<FlowElements>({
 		// TODO: emit('update:modelValue', modelValue)
 	},
 })
-
 const onElementsChange = (elements: FlowElements) => {
 	const edges: Record<string, Record<string, any>> = {}
 	const idToLabel: Record<string, string> = {}
@@ -104,19 +99,18 @@ const onElementsChange = (elements: FlowElements) => {
 			states[label] = {
 				type: 'final',
 			}
-		} /* else if (el.source && el.target) {
+		} else if (el.source && el.target) {
 			// it's an edge
 			edges[el.source] = edges[el.source] || {}
 			edges[el.source][label] = {
 				target: el.target,
 			}
-		} */ else {
+		} else {
 			// it's a state
 			states[label] = {
 				on: {},
 			}
 		}
-
 		idToLabel[el.id] = label
 	}
 

From 86dce42529bcafd222aa7b743e60cfa261c4f77f Mon Sep 17 00:00:00 2001
From: Robert Duncan <robirtduncan@gmail.com>
Date: Sun, 3 Nov 2024 12:18:24 -0500
Subject: [PATCH 4/4] chore: update change log, add comment

---
 .../node-editor/168_edge_connections_2024-10-22-01-17.json      | 2 +-
 node_editor/src/components/StateEditor.vue                      | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/common/changes/@stonecrop/node-editor/168_edge_connections_2024-10-22-01-17.json b/common/changes/@stonecrop/node-editor/168_edge_connections_2024-10-22-01-17.json
index 970a1a3f..ad91f918 100644
--- a/common/changes/@stonecrop/node-editor/168_edge_connections_2024-10-22-01-17.json
+++ b/common/changes/@stonecrop/node-editor/168_edge_connections_2024-10-22-01-17.json
@@ -3,7 +3,7 @@
     {
       "packageName": "@stonecrop/node-editor",
       "comment": "Add handling for edge creation and removal.",
-      "type": "none"
+      "type": "patch"
     }
   ],
   "packageName": "@stonecrop/node-editor"
diff --git a/node_editor/src/components/StateEditor.vue b/node_editor/src/components/StateEditor.vue
index c29e4655..da868f6f 100644
--- a/node_editor/src/components/StateEditor.vue
+++ b/node_editor/src/components/StateEditor.vue
@@ -45,6 +45,8 @@ const elements = computed<FlowElements>({
 		for (const [key, value] of Object.entries(states.value)) {
 			if (value.on) {
 				for (const [edgeKey, edgeValue] of Object.entries(value.on)) {
+					// If the proxy array 'value.on' has more than one edge, 'edgeValue' will contain a proxy object
+					// where 'target' can be accessed. Otherwise, 'edgeValue' will be available directly.
 					const target = edgeValue.target || edgeValue
 					// TODO: handle typescript errors for both types of states
 					// eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access