@stonecrop/node-editor 0.4.36 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/node-editor",
-  "version": "0.4.36",
+  "version": "0.5.0",
   "description": "Node editor UI for Stonecrop",
   "license": "MIT",
   "type": "module",
@@ -36,21 +36,22 @@
     "src/*"
   ],
   "dependencies": {
-    "@vue-flow/core": "^1.45.0",
+    "@vue-flow/core": "^1.47.0",
     "vue": "^3.5.22",
     "vue-router": "^4.6.3",
     "xstate": "^5.20.1"
   },
   "devDependencies": {
-    "@microsoft/api-documenter": "^7.26.31",
-    "@rushstack/heft": "^0.74.2",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
+    "@eslint/js": "^9.38.0",
+    "@microsoft/api-documenter": "^7.27.3",
+    "@rushstack/heft": "^1.1.3",
     "@vitejs/plugin-vue": "^6.0.1",
-    "eslint": "^8.57.1",
-    "eslint-config-prettier": "^8.10.0",
-    "eslint-plugin-vue": "^9.33.0",
+    "eslint": "^9.38.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-vue": "^10.5.1",
+    "globals": "^16.4.0",
     "typescript": "^5.9.3",
+    "typescript-eslint": "^8.46.2",
     "vite": "^7.1.1",
     "stonecrop-rig": "0.2.22"
   },
@@ -66,7 +67,7 @@
     "build": "heft build && vite build && rushx docs",
     "dev": "vite",
     "docs": "cd ../common/autoinstallers/doc-tools && node generate-docs.mjs node_editor",
-    "lint": "eslint . --ext .ts,.vue",
+    "lint": "eslint .",
     "preview": "vite preview"
   }
 }

package/src/components/EditableEdge.vue

@@ -14,8 +14,8 @@
 			<div v-if="showInput" class="label-input-wrapper">
 				<input
 					ref="labelInput"
-					class="label-input"
 					v-model="newLabel"
+					class="label-input"
 					@blur="showInput = false"
 					@keypress.enter="submitNewLabel" />
 			</div>

package/src/components/EditableNode.vue

@@ -4,8 +4,8 @@
 		<div v-if="showInput" class="label-input-wrapper">
 			<input
 				ref="labelInput"
-				class="label-input"
 				v-model="newLabel"
+				class="label-input"
 				@blur="showInput = false"
 				@keypress.enter="submitNewLabel" />
 		</div>

package/src/components/NodeEditor.vue

@@ -22,11 +22,14 @@
 
 		<VueFlow
 			v-if="vueFlowElements && vueFlowElements.length"
+			v-model="vueFlowElements"
 			class="nowheel"
 			:prevent-scrolling="true"
 			:zoom-on-scroll="false"
 			:fit-view-on-init="true"
-			v-model="vueFlowElements"
+			@connect="handleConnect"
+			@pane-ready="setInstance"
+			@edge-context-menu="handleEdgeContextMenu"
 			@wheel.prevent="onWheel">
 			<template #node-editable="props">
 				<EditableNode v-bind="props" @change="labelChanged($event, props.id)" />
@@ -39,14 +42,23 @@
 </template>
 
 <script setup lang="ts">
-import { type VueFlowStore, Position, VueFlow, useVueFlow, Connection, Node } from '@vue-flow/core'
+import {
+	type VueFlowStore,
+	Position,
+	VueFlow,
+	useVueFlow,
+	Connection,
+	Node,
+	EdgeMouseEvent,
+	DefaultEdge,
+} from '@vue-flow/core'
 import { type HTMLAttributes, ref, computed, defineEmits, onBeforeUnmount, onMounted } from 'vue'
 
 import EditableEdge from './EditableEdge.vue'
 import EditableNode from './EditableNode.vue'
 import type { FlowElements } from '../types'
 
-const { modelValue, nodeContainerClass } = defineProps<{
+const { modelValue, nodeContainerClass = '' } = defineProps<{
 	modelValue: FlowElements
 	nodeContainerClass?: HTMLAttributes['class']
 }>()
@@ -103,7 +115,7 @@ const elements = computed({
 		emit('update:modelValue', JSON.parse(JSON.stringify(newValue)))
 	},
 })
-const { onConnect, addEdges, onEdgeContextMenu, onPaneReady, removeEdges } = useVueFlow()
+const { addEdges, removeEdges } = useVueFlow()
 
 onMounted(() => {
 	document.removeEventListener('keypress', handleKeypress)
@@ -114,9 +126,9 @@ onBeforeUnmount(() => {
 	document.removeEventListener('keypress', handleKeypress)
 })
 
-onPaneReady(instance => {
+const setInstance = (instance: VueFlowStore) => {
 	vueFlowInstance.value = instance
-})
+}
 
 vueFlowElements.value = elements.value
 
@@ -133,6 +145,7 @@ const shiftTerminal = (currentTerminal: Position) => {
 const shiftOutput = () => {
 	if (activeElementIndex.value > -1) {
 		const activeNode = vueFlowElements.value[activeElementIndex.value] as Node
+		if (!activeNode.sourcePosition) return
 		activeNode.sourcePosition = shiftTerminal(activeNode.sourcePosition)
 	}
 }
@@ -140,6 +153,7 @@ const shiftOutput = () => {
 const shiftInput = () => {
 	if (activeElementIndex.value > -1) {
 		const activeNode = vueFlowElements.value[activeElementIndex.value] as Node
+		if (!activeNode.targetPosition) return
 		activeNode.targetPosition = shiftTerminal(activeNode.targetPosition)
 	}
 }
@@ -151,16 +165,16 @@ const onWheel = (event: WheelEvent) => {
 const handleKeypress = (event: KeyboardEvent) => {
 	if (hover.value && event.ctrlKey == true) {
 		if (event.key == '+' || event.key == '=') {
-			void vueFlowInstance.value.zoomIn()
+			void vueFlowInstance.value?.zoomIn()
 		}
 		if (event.key == '-') {
-			void vueFlowInstance.value.zoomOut()
+			void vueFlowInstance.value?.zoomOut()
 		}
 	}
 }
 
 const fitView = async () => {
-	await vueFlowInstance.value.fitView()
+	await vueFlowInstance.value?.fitView()
 }
 
 const addNode = () => {
@@ -168,7 +182,7 @@ const addNode = () => {
 	let newNodePosition = { x: Math.random() * 200, y: Math.random() * 200 }
 	if (activeElementIndex.value > -1) {
 		const activeNode = vueFlowElements.value[activeElementIndex.value]
-		if (activeNode.data.hasOutput) {
+		if (activeNode.data?.hasOutput) {
 			newNodePosition = { x: (activeNode as Node).position.x + 200, y: (activeNode as Node).position.y + 50 }
 			makeEdge = true
 		}
@@ -214,21 +228,21 @@ const addNode = () => {
 	}
 }
 
-const labelChanged = (e, id) => {
+const labelChanged = (event: DefaultEdge['label'], id: DefaultEdge['id']) => {
 	for (let j = 0; j < vueFlowElements.value.length; j++) {
 		if (vueFlowElements.value[j].id == id) {
-			vueFlowElements.value[j].label = e
+			vueFlowElements.value[j].label = event
 			break
 		}
 	}
 }
 
-const handleConnect = (connection: Connection) => {
+const handleConnect = (event: Connection) => {
 	const id = vueFlowElements.value.length
 	const newEdge = {
 		id: `edge-${id}`,
-		source: connection.source,
-		target: connection.target,
+		source: event.source,
+		target: event.target,
 		type: 'editable',
 		label: `New Edge`,
 		interactionWidth: 400,
@@ -242,15 +256,9 @@ const handleConnect = (connection: Connection) => {
 	addEdges([newEdge])
 }
 
-onConnect(handleConnect)
-
-const handleEdgeRemove = edgeId => {
-	removeEdges(edgeId)
+const handleEdgeContextMenu = (event: EdgeMouseEvent) => {
+	removeEdges(event.edge.id)
 }
-
-onEdgeContextMenu(({ event, edge }) => {
-	handleEdgeRemove(edge.id)
-})
 </script>
 
 <style>

package/src/components/StateEditor.vue

@@ -13,7 +13,7 @@ import type { EditorStates, FlowElement, FlowElements, Layout } from '../types'
 
 const emit = defineEmits(['update:modelValue'])
 const states = defineModel<EditorStates>()
-const { layout, nodeContainerClass } = defineProps<{
+const { layout, nodeContainerClass = '' } = defineProps<{
 	layout: Layout
 	nodeContainerClass?: HTMLAttributes['class']
 }>()
@@ -53,7 +53,6 @@ const elements = computed<FlowElements>({
 					// where 'target' can be accessed. Otherwise, 'edgeValue' will be available directly.
 
 					// TODO: resolve type issues with xstate
-					// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
 					const target = edgeValue.target || edgeValue
 					stateElements.push({
 						id: `${key}-${target}`,
@@ -63,7 +62,6 @@ const elements = computed<FlowElements>({
 						animated: true,
 					})
 
-					// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
 					hasInputs[target] = true
 				}
 			}