@stonecrop/node-editor 0.2.23 → 0.2.25

package/src/components/NodeEditor.vue

@@ -1,35 +1,33 @@
 <template>
-	<div class="node-editor-wrapper" :class="containerClass" @mouseover="hover = true" @mouseleave="hover = false">
+	<div class="node-editor-wrapper" :class="nodeContainerClass" @mouseover="hover = true" @mouseleave="hover = false">
 		<div class="chart-controls">
 			<div class="chart-controls-left">
 				<div><b>Selected Node:</b> {{ activeElementKey ? activeElementKey : 'none' }}</div>
 			</div>
 			<div class="chart-controls-right">
 				<div>
-					<button class="button-default" @click="addNode()">Add Node</button>
+					<button class="button-default" @click="addNode">Add Node</button>
 				</div>
 				<div>
-					<button class="button-default" @click="fitView()">Center</button>
+					<button class="button-default" @click="fitView">Center</button>
 				</div>
 				<div v-if="activeElementIndex > -1">
-					<button class="button-default" @click="shiftInput()">Shift Input Position</button>
+					<button class="button-default" @click="shiftInput">Shift Input Position</button>
 				</div>
 				<div v-if="activeElementIndex > -1">
-					<button class="button-default" @click="shiftOutput()">Shift Output Position</button>
+					<button class="button-default" @click="shiftOutput">Shift Output Position</button>
 				</div>
 			</div>
 		</div>
 
 		<VueFlow
-			@wheel.prevent="onWheel($event)"
+			v-if="vueFlowElements && vueFlowElements.length"
 			class="nowheel"
 			:prevent-scrolling="true"
 			:zoom-on-scroll="false"
 			:fit-view-on-init="true"
-			v-if="vueFlowElements && vueFlowElements.length"
 			v-model="vueFlowElements"
-			@connect="onConnect($event)"
-			@edge-double-click="onEdgeDoubleClick($event)">
+			@wheel.prevent="onWheel">
 			<template #node-editable="props">
 				<EditableNode v-bind="props" @change="labelChanged($event, props.id)" />
 			</template>
@@ -39,79 +37,62 @@
 		</VueFlow>
 	</div>
 </template>
-<script lang="ts" setup>
-import { VueFlow, useVueFlow } from '@vue-flow/core'
-import '@vue-flow/core/dist/style.css'
-import '@vue-flow/core/dist/theme-default.css'
-import EditableNode from './EditableNode.vue'
-import EditableEdge from './EditableEdge.vue'
-import { ref, computed, defineEmits, onBeforeUnmount, onMounted, watch, reactive } from 'vue'
 
-// Props
+<script setup lang="ts">
+import { type VueFlowStore, Position, VueFlow, useVueFlow, Node } from '@vue-flow/core'
+import { type HTMLAttributes, ref, computed, defineEmits, onBeforeUnmount, onMounted } from 'vue'
+
+import EditableEdge from '@/components/EditableEdge.vue'
+import EditableNode from '@/components/EditableNode.vue'
+import type { FlowElements } from '@/types'
 
 const props = defineProps<{
-	modelValue: any
-	nodeContainerClass: string
+	modelValue: FlowElements
+	nodeContainerClass?: HTMLAttributes['class']
 }>()
-
-// Emits
-
 const emit = defineEmits(['update:modelValue'])
 
-// Data
-
-const containerClass = ref('')
-const vueFlowInstance = ref({})
 const hover = ref(false)
-const labelEditor = ref({
-	x: 0,
-	y: 0,
-})
+const vueFlowElements = ref<FlowElements>([])
+const vueFlowInstance = ref<Partial<VueFlowStore>>()
 
 const activeElementKey = ref('')
-
-const vueFlowElements = ref([])
-
-// Computed variables
-
 const activeElementIndex = computed(() => {
-	for (let j = 0; j < vueFlowElements.value.length; j++) {
-		if (vueFlowElements.value[j].id == activeElementKey.value) return j
-	}
+	vueFlowElements.value.forEach((element, index) => {
+		if (element.id === activeElementKey.value) {
+			return index
+		}
+	})
+
 	return -1
 })
 
 const elements = computed({
 	get: () => {
-		let _elements = props.modelValue
-		if (props.nodeContainerClass) {
-			containerClass.value = props.nodeContainerClass
-		} else {
-			containerClass.value = 'defaultContainerClass'
-		}
-
-		for (let j = 0; j < _elements.length; j++) {
-			_elements[j].data = {}
-			if (_elements[j].type == 'input') {
-				_elements[j].data.hasInput = false
-				_elements[j].data.hasOutput = true
-			} else if (_elements[j].type == 'output') {
-				_elements[j].data.hasInput = true
-				_elements[j].data.hasOutput = false
+		const _elements = props.modelValue
+
+		// Add data to each element
+		for (const _element of _elements) {
+			_element.data = {}
+			if (_element.type === 'input') {
+				_element.data.hasInput = false
+				_element.data.hasOutput = true
+			} else if (_element.type === 'output') {
+				_element.data.hasInput = true
+				_element.data.hasOutput = false
 			} else {
-				_elements[j].data.hasInput = true
-				_elements[j].data.hasOutput = true
+				_element.data.hasInput = true
+				_element.data.hasOutput = true
 			}
-			_elements[j].class = 'vue-flow__node-default'
-			_elements[j].type = 'editable'
+			_element.class = 'vue-flow__node-default'
+			_element.type = 'editable'
 		}
 
-		for (let j = 0; j < _elements.length; j++) {
-			let key = _elements[j].id
-			let el = _elements[j]
-			_elements[j].events = {
+		// Add click event to each element
+		for (const _element of _elements) {
+			_element.events = {
 				click: () => {
-					activeElementKey.value = key
+					activeElementKey.value = _element.id
 				},
 			}
 		}
@@ -123,20 +104,6 @@ const elements = computed({
 	},
 })
 
-//VueFlow
-
-const { getNodes, onPaneReady } = useVueFlow({})
-
-onPaneReady(i => {
-	vueFlowInstance.value = i
-})
-
-// Setup
-
-vueFlowElements.value = elements.value
-
-// Lifecycle Hooks
-
 onMounted(() => {
 	document.removeEventListener('keypress', handleKeypress)
 	document.addEventListener('keypress', handleKeypress)
@@ -146,70 +113,74 @@ onBeforeUnmount(() => {
 	document.removeEventListener('keypress', handleKeypress)
 })
 
-// Methods
+const { onPaneReady } = useVueFlow()
+onPaneReady(instance => {
+	vueFlowInstance.value = instance
+})
 
-const shiftTerminal = currentTerminal => {
+vueFlowElements.value = elements.value
+
+// Methods
+const shiftTerminal = (currentTerminal: Position) => {
 	return {
-		top: 'right',
-		right: 'bottom',
-		bottom: 'left',
-		left: 'top',
+		[Position.Top]: Position.Right,
+		[Position.Right]: Position.Bottom,
+		[Position.Bottom]: Position.Left,
+		[Position.Left]: Position.Top,
 	}[currentTerminal]
 }
 
 const shiftOutput = () => {
 	if (activeElementIndex.value > -1) {
-		vueFlowElements.value[activeElementIndex.value].sourcePosition = shiftTerminal(
-			vueFlowElements.value[activeElementIndex.value].sourcePosition
-		)
+		const activeNode = vueFlowElements.value[activeElementIndex.value] as Node
+		activeNode.sourcePosition = shiftTerminal(activeNode.sourcePosition)
 	}
 }
 
 const shiftInput = () => {
 	if (activeElementIndex.value > -1) {
-		vueFlowElements.value[activeElementIndex.value].targetPosition = shiftTerminal(
-			vueFlowElements.value[activeElementIndex.value].targetPosition
-		)
+		const activeNode = vueFlowElements.value[activeElementIndex.value] as Node
+		activeNode.targetPosition = shiftTerminal(activeNode.targetPosition)
 	}
 }
 
-const onWheel = $event => {
-	window.scrollBy(0, $event.deltaY)
+const onWheel = (event: WheelEvent) => {
+	window.scrollBy(0, event.deltaY)
 }
 
-const handleKeypress = e => {
-	if (hover.value && e.ctrlKey == true) {
-		if (e.key == '+' || e.key == '=') {
-			vueFlowInstance.value.zoomIn()
+const handleKeypress = (event: KeyboardEvent) => {
+	if (hover.value && event.ctrlKey == true) {
+		if (event.key == '+' || event.key == '=') {
+			void vueFlowInstance.value.zoomIn()
 		}
-		if (e.key == '-') {
-			vueFlowInstance.value.zoomOut()
+		if (event.key == '-') {
+			void vueFlowInstance.value.zoomOut()
 		}
 	}
 }
 
-const fitView = () => {
-	vueFlowInstance.value.fitView()
+const fitView = async () => {
+	await vueFlowInstance.value.fitView()
 }
 
 const addNode = () => {
-	let newNodePosition = { x: Math.random() * 200, y: Math.random() * 200 }
 	let makeEdge = false
+	let newNodePosition = { x: Math.random() * 200, y: Math.random() * 200 }
 	if (activeElementIndex.value > -1) {
 		const activeNode = vueFlowElements.value[activeElementIndex.value]
 		if (activeNode.data.hasOutput) {
-			newNodePosition = { x: activeNode.position.x + 200, y: activeNode.position.y + 50 }
+			newNodePosition = { x: (activeNode as Node).position.x + 200, y: (activeNode as Node).position.y + 50 }
 			makeEdge = true
 		}
 	}
 
-	let id = vueFlowElements.value.length
-	let nodeId = `node-${id}`
+	const id = vueFlowElements.value.length
+	const nodeId = `node-${id}`
 	vueFlowElements.value.push({
 		id: nodeId,
 		label: 'Node ' + id,
-		sourcePosition: 'right',
-		targetPosition: 'left',
+		sourcePosition: Position.Right,
+		targetPosition: Position.Left,
 		class: 'vue-flow__node-default',
 		type: 'editable',
 		data: {
@@ -243,14 +214,6 @@ const addNode = () => {
 	}
 }
 
-const onConnect = e => {
-	console.log('edge connect', e)
-}
-
-const onEdgeDoubleClick = e => {
-	console.log('edge double click', e)
-}
-
 const labelChanged = (e, id) => {
 	for (let j = 0; j < vueFlowElements.value.length; j++) {
 		if (vueFlowElements.value[j].id == id) {
@@ -260,6 +223,7 @@ const labelChanged = (e, id) => {
 	}
 }
 </script>
+
 <style>
 @import '@vue-flow/core/dist/style.css';
 @import '@vue-flow/core/dist/theme-default.css';
@@ -272,9 +236,11 @@ const labelChanged = (e, id) => {
 	align-items: center;
 	padding-top: 0.2em;
 }
+
 .chart-controls-right div {
 	margin-left: 5px;
 }
+
 .chart-controls {
 	padding-left: 20px;
 	padding-right: 20px;
@@ -284,26 +250,32 @@ const labelChanged = (e, id) => {
 	flex-direction: row;
 	justify-content: space-between;
 }
+
 .chart-controls div {
 	margin-bottom: 5px;
 }
+
 .defaultContainerClass {
 	height: 90vh;
 	width: 100%;
 	border: 1px solid #ccc;
 }
+
 .default-input-node.vue-flow__node-input,
 .default-output-node.vue-flow__node-output {
 	border-color: #000;
 }
+
 .default-input-node.vue-flow__node-input .vue-flow__handle,
 .default-output-node.vue-flow__node-output .vue-flow__handle {
 	background-color: #000;
 }
+
 .default-input-node.vue-flow__node-input.selected,
 .default-output-node.vue-flow__node-output.selected {
 	box-shadow: 0 0 0 0.5px #000;
 }
+
 button.button-default {
 	background-color: #ffffff;
 	padding: 1px 12px;
@@ -316,14 +288,17 @@ button.button-default {
 button.button-default:hover {
 	background-color: #f2f2f2;
 }
+
 .vue-flow {
 	background-size: 40px 40px;
 	background-image: linear-gradient(to right, #ccc 1px, transparent 1px),
 		linear-gradient(to bottom, #ccc 1px, transparent 1px);
 }
+
 input.label-editor {
 	position: absolute;
 }
+
 .node-editor-wrapper {
 	position: relative;
 }

package/src/components/StateEditor.vue

@@ -3,120 +3,131 @@
 		<NodeEditor v-model="elements" :node-container-class="nodeContainerClass" />
 	</div>
 </template>
-<script lang="ts" setup>
-import { VueFlow } from '@vue-flow/core'
-import '@vue-flow/core/dist/style.css'
-import '@vue-flow/core/dist/theme-default.css'
-import NodeEditor from './NodeEditor.vue'
-import { ref, computed } from 'vue'
 
-// Props
+<script setup lang="ts">
+import { type Node, Position } from '@vue-flow/core'
+import { type HTMLAttributes, computed } from 'vue'
 
-const props = defineProps(['layout', 'nodeContainerClass', 'modelValue'])
-
-// Emits
+import NodeEditor from '@/components/NodeEditor.vue'
+import type { EditorStates, FlowElement, FlowElements, Layout } from '@/types'
 
+const states = defineModel<EditorStates>()
+const props = defineProps<{
+	layout: Layout
+	nodeContainerClass?: HTMLAttributes['class']
+}>()
 const emit = defineEmits(['update:modelValue'])
 
-// Computed variables
-
-const elements = computed({
+const elements = computed<FlowElements>({
 	get: () => {
-		let states = props.modelValue
-		let stateHash = {}
-		let hasInputs = {}
-		let j = 0
-		let stateElements = []
-		for (let key in states) {
-			let idx = stateElements.length
-			let el = {
+		const hasInputs = {}
+		const stateElements: FlowElements = []
+		const stateHash: Record<string, FlowElement> = {}
+
+		let index = 0
+		for (const [key, value] of Object.entries(states.value)) {
+			const el: Node = {
 				id: key,
 				label: key,
-				position: props.layout[key] && props.layout[key].position ? props.layout[key].position : { x: 200 * j, y: 100 },
-				targetPosition:
-					props.layout[key] && props.layout[key].targetPosition ? props.layout[key].targetPosition : 'left',
-				sourcePosition:
-					props.layout[key] && props.layout[key].sourcePosition ? props.layout[key].sourcePosition : 'right',
+				position: props.layout[key]?.position || { x: 200 * index, y: 100 },
+				targetPosition: props.layout[key]?.targetPosition || Position.Left,
+				sourcePosition: props.layout[key]?.sourcePosition || Position.Right,
 			}
-			if (states[key].type && states[key].type == 'final') {
+
+			if (value.type === 'final') {
 				el.type = 'output'
 				el.class = 'default-output-node'
 			}
+
 			stateHash[key] = el
-			let edges = states[key].on
-			for (let edgeKey in states[key].on) {
-				let target = edges[edgeKey]
-				if (typeof target === 'object' && target.constructor === Object) {
-					target = target.target
+
+			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
+						}
+					}
 				}
-				stateElements.push({
-					id: `${key}-${edges[edgeKey]}-${edgeKey}`,
-					target: target,
-					source: key,
-					label: edgeKey,
-					animated: true,
-				})
-				hasInputs[target] = true
 			}
-			j++
+
+			index++
 		}
-		for (let key in stateHash) {
+
+		for (const [key, value] of Object.entries(stateHash)) {
 			if (!hasInputs[key]) {
-				stateHash[key]['type'] = 'input'
-				stateHash[key]['class'] = 'default-input-node'
+				value['type'] = 'input'
+				value['class'] = 'default-input-node'
 			}
-			stateElements.push(stateHash[key])
+			stateElements.push(value)
 		}
+
 		return stateElements
 	},
 	set: newValue => {
 		// update modelValue when elements change
 		onElementsChange(newValue)
-		// emit('update:modelValue', props.modelValue)
+
+		// TODO: emit('update:modelValue', props.modelValue)
 	},
 })
 
-// Methods
+const onElementsChange = (elements: FlowElements) => {
+	const edges: Record<string, Record<string, any>> = {}
+	const idToLabel: Record<string, string> = {}
+	const states: EditorStates = {}
 
-const onElementsChange = elements => {
-	let states = {}
-	let edges = {}
-	let idToLabel = {}
-	for (let i = 0; i < elements.length; i++) {
-		let el = elements[i]
-		if (el.type == 'input') {
+	for (const el of elements) {
+		const label = el.label as string
+
+		if (el.type === 'input') {
 			// it's an input node
-			states[el.label] = {
+			states[label] = {
 				on: {},
 			}
-		} else if (el.type == 'output') {
+		} else if (el.type === 'output') {
 			// it's an output node
-			states[el.label] = {
+			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][el.label] = {
+			edges[el.source][label] = {
 				target: el.target,
 			}
-		} else {
+		} */ else {
 			// it's a state
-			states[el.label] = {
+			states[label] = {
 				on: {},
 			}
 		}
-		idToLabel[el.id] = el.label
+
+		idToLabel[el.id] = label
 	}
 
-	for (let key in edges) {
+	for (const [edgeKey, edgeValue] of Object.entries(edges)) {
 		// add edges to states
-		let label = idToLabel[key]
-		for (let edgeKey in edges[key]) {
-			states[label].on[edgeKey] = edges[key][edgeKey]
+		const label = idToLabel[edgeKey]
+		for (const [key, value] of Object.entries(edgeValue)) {
+			states[label].on[key] = value
 		}
 	}
+
 	emit('update:modelValue', states)
 }
 </script>
-<style scoped></style>

package/src/index.ts

@@ -2,8 +2,14 @@ import { App } from 'vue'
 
 import NodeEditor from '@/components/NodeEditor.vue'
 import StateEditor from '@/components/StateEditor.vue'
+export type { EditorStates, FlowElement, FlowElements, Layout } from '@/types'
 
-function install(app: App /* options */) {
+/**
+ * Install all Node Editor components
+ * @param app - Vue app instance
+ * @public
+ */
+function install(app: App) {
 	app.component('NodeEditor', NodeEditor)
 	app.component('StateEditor', StateEditor)
 }

package/src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+	import { ComponentOptions } from 'vue'
+	const Component: ComponentOptions
+	export default Component
+}

package/src/types/index.ts

@@ -0,0 +1,24 @@
+import { type Elements, type Element, type XYPosition, Position } from '@vue-flow/core'
+import type { AnyStateMachine, AnyStateNodeDefinition, StatesConfig } from 'xstate'
+
+export type EditorStates = {
+	[key: string]: Partial<AnyStateMachine | AnyStateNodeDefinition> | StatesConfig<any, any, any>
+}
+
+export type FlowElements = Elements<
+	{ hasInput?: boolean; hasOutput?: boolean },
+	{ hasInput?: boolean; hasOutput?: boolean }
+>
+
+export type FlowElement = Element<
+	{ hasInput?: boolean; hasOutput?: boolean },
+	{ hasInput?: boolean; hasOutput?: boolean }
+>
+
+export type Layout = {
+	[key: string]: {
+		position?: XYPosition
+		targetPosition?: Position
+		sourcePosition?: Position
+	}
+}

package/src/histoire.setup.ts

@@ -1,7 +0,0 @@
-import { defineSetupVue3 } from '@histoire/plugin-vue'
-//import { BaklavaVuePlugin } from '@baklavajs/plugin-renderer-vue3'
-
-export const setupVue3 = defineSetupVue3(({ app }) => {
-	// TODO: (typing) add typing for ADate
-	//app.use(BaklavaVuePlugin)
-})