@stonecrop/node-editor 0.2.5

package/dist/style.css

@@ -0,0 +1 @@
+.editable-edge-label{background-color:#fff;position:relative;font-size:12px}.label-input-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center}.label-input{text-align:center}.vue-flow{position:relative;width:100%;height:100%;overflow:hidden;z-index:0}.vue-flow__container{position:absolute;height:100%;width:100%;left:0;top:0}.vue-flow__pane{z-index:1}.vue-flow__pane.draggable{cursor:grab}.vue-flow__pane.dragging{cursor:grabbing}.vue-flow__pane.selection{cursor:pointer}.vue-flow__transformationpane{transform-origin:0 0;z-index:2;pointer-events:none}.vue-flow__viewport{z-index:4}.vue-flow__selection{z-index:6}.vue-flow__edge-labels{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vue-flow__nodesselection-rect:focus,.vue-flow__nodesselection-rect:focus-visible{outline:none}.vue-flow .vue-flow__edges{pointer-events:none;overflow:visible}.vue-flow__edge-path,.vue-flow__connection-path{stroke:#b1b1b7;stroke-width:1;fill:none}.vue-flow__edge{pointer-events:visibleStroke;cursor:pointer}.vue-flow__edge.animated path{stroke-dasharray:5;animation:dashdraw .5s linear infinite}.vue-flow__edge.inactive{pointer-events:none}.vue-flow__edge.selected,.vue-flow__edge:focus,.vue-flow__edge:focus-visible{outline:none}.vue-flow__edge.selected .vue-flow__edge-path,.vue-flow__edge:focus .vue-flow__edge-path,.vue-flow__edge:focus-visible .vue-flow__edge-path{stroke:#555}.vue-flow__edge-textwrapper{pointer-events:all}.vue-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vue-flow__connection{pointer-events:none}.vue-flow__connection .animated{stroke-dasharray:5;animation:dashdraw .5s linear infinite}.vue-flow__connectionline{z-index:1001}.vue-flow__nodes{pointer-events:none;transform-origin:0 0}.vue-flow__node-default,.vue-flow__node-input,.vue-flow__node-output{border-width:1px;border-style:solid;border-color:#bbb}.vue-flow__node-default.selected,.vue-flow__node-default:focus,.vue-flow__node-default:focus-visible,.vue-flow__node-input.selected,.vue-flow__node-input:focus,.vue-flow__node-input:focus-visible,.vue-flow__node-output.selected,.vue-flow__node-output:focus,.vue-flow__node-output:focus-visible{outline:none;border:1px solid #555}.vue-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:grab}.vue-flow__node.dragging{cursor:grabbing}.vue-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.vue-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:grab}.vue-flow__nodesselection-rect.dragging{cursor:grabbing}.vue-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px}.vue-flow__handle.connectable{pointer-events:all;cursor:crosshair}.vue-flow__handle-bottom{top:auto;left:50%;bottom:-4px;transform:translate(-50%)}.vue-flow__handle-top{left:50%;top:-4px;transform:translate(-50%)}.vue-flow__handle-left{top:50%;left:-4px;transform:translateY(-50%)}.vue-flow__handle-right{right:-4px;top:50%;transform:translateY(-50%)}.vue-flow__edgeupdater{cursor:move;pointer-events:all}.vue-flow__panel{position:absolute;z-index:5;margin:15px}.vue-flow__panel.top{top:0}.vue-flow__panel.bottom{bottom:0}.vue-flow__panel.left{left:0}.vue-flow__panel.right{right:0}.vue-flow__panel.center{left:50%;transform:translate(-50%)}@keyframes dashdraw{0%{stroke-dashoffset:10}}:root{--vf-node-bg: #fff;--vf-node-text: #222;--vf-connection-path: #b1b1b7;--vf-handle: #555}.vue-flow__edge.updating .vue-flow__edge-path{stroke:#777}.vue-flow__edge-text{font-size:10px}.vue-flow__edge-textbg{fill:#fff}.vue-flow__connection-path{stroke:var(--vf-connection-path)}.vue-flow__node{cursor:grab}.vue-flow__node.selectable:focus,.vue-flow__node.selectable:focus-visible{outline:none}.vue-flow__node-default,.vue-flow__node-input,.vue-flow__node-output{padding:10px;border-radius:3px;width:150px;font-size:12px;text-align:center;border-width:1px;border-style:solid;color:var(--vf-node-text);background-color:var(--vf-node-bg);border-color:var(--vf-node-color)}.vue-flow__node-default.selected,.vue-flow__node-default.selected:hover,.vue-flow__node-input.selected,.vue-flow__node-input.selected:hover,.vue-flow__node-output.selected,.vue-flow__node-output.selected:hover{box-shadow:0 0 0 .5px var(--vf-box-shadow)}.vue-flow__node-default .vue-flow__handle,.vue-flow__node-input .vue-flow__handle,.vue-flow__node-output .vue-flow__handle{background:var(--vf-handle)}.vue-flow__node-default.selectable:hover,.vue-flow__node-input.selectable:hover,.vue-flow__node-output.selectable:hover{box-shadow:0 1px 4px 1px #00000014}.vue-flow__node-input{--vf-node-color: var(--vf-node-color, #0041d0);--vf-handle: var(--vf-node-color, #0041d0);--vf-box-shadow: var(--vf-node-color, #0041d0);background:var(--vf-node-bg);border-color:var(--vf-node-color, #0041d0)}.vue-flow__node-input.selected,.vue-flow__node-input:focus,.vue-flow__node-input:focus-visible{outline:none;border:1px solid var(--vf-node-color, #0041d0)}.vue-flow__node-default{--vf-handle: var(--vf-node-color, #1a192b);--vf-box-shadow: var(--vf-node-color, #1a192b);background:var(--vf-node-bg);border-color:var(--vf-node-color, #1a192b)}.vue-flow__node-default.selected,.vue-flow__node-default:focus,.vue-flow__node-default:focus-visible{outline:none;border:1px solid var(--vf-node-color, #1a192b)}.vue-flow__node-output{--vf-handle: var(--vf-node-color, #ff0072);--vf-box-shadow: var(--vf-node-color, #ff0072);background:var(--vf-node-bg);border-color:var(--vf-node-color, #ff0072)}.vue-flow__node-output.selected,.vue-flow__node-output:focus,.vue-flow__node-output:focus-visible{outline:none;border:1px solid var(--vf-node-color, #ff0072)}.vue-flow__nodesselection-rect,.vue-flow__selection{background:rgba(0,89,220,.08);border:1px dotted rgba(0,89,220,.8)}.vue-flow__nodesselection-rect:focus,.vue-flow__nodesselection-rect:focus-visible,.vue-flow__selection:focus,.vue-flow__selection:focus-visible{outline:none}.vue-flow__handle{width:6px;height:6px;background:var(--vf-handle);border:1px solid #fff;border-radius:100%}.chart-controls-left,.chart-controls-right{height:1.8em;display:flex;flex-direction:row;align-items:center;padding-top:.2em}.chart-controls-right div{margin-left:5px}.chart-controls{padding-left:20px;padding-right:20px;height:1.8em;border-bottom:1px solid #ccc;display:flex;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 .5px #000}button.button-default{background-color:#fff;padding:1px 12px;border-radius:3px;border:1px solid #ccc;cursor:pointer;white-space:nowrap}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/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@stonecrop/node-editor",
+  "version": "0.2.5",
+  "description": "Node editor UI for Stonecrop",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/node-editor.js",
+      "require": "./dist/node-editor.umd.cjs"
+    },
+    "./styles": "./dist/style.css"
+  },
+  "main": "index.js",
+  "files": [
+    "dist/*",
+    "src/**/*.vue"
+  ],
+  "dependencies": {
+    "@vue-flow/core": "~1.19.3",
+    "vue": "^3.2.47",
+    "vue-router": "^4",
+    "xstate": "~4.37.2"
+  },
+  "devDependencies": {
+    "@histoire/plugin-vue": "^0.16.1",
+    "@vitejs/plugin-vue": "^4.2.1",
+    "histoire": "^0.16.1",
+    "vite": "^4.3.5"
+  },
+  "engines": {
+    "node": ">=20.11.0"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "preview": "vite preview",
+    "story:build": "histoire build",
+    "story:dev": "histoire dev",
+    "story:preview": "histoire preview"
+  }
+}

package/src/components/EditableEdge.vue

@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+import type { EdgeProps, Position } from '@vue-flow/core'
+import { EdgeLabelRenderer, getBezierPath, useVueFlow } from '@vue-flow/core'
+import type { CSSProperties } from 'vue'
+import { computed, ref, nextTick } from 'vue'
+
+interface EditableEdgeProps<T = any> extends EdgeProps<T> {
+	id: string
+	sourceX: number
+	sourceY: number
+	targetX: number
+	targetY: number
+	sourcePosition: Position
+	targetPosition: Position
+	data: T
+	markerEnd: string
+	style: CSSProperties
+	label: string
+}
+
+const props = defineProps<EditableEdgeProps>()
+
+const { removeEdges } = useVueFlow()
+
+const emit = defineEmits(['change'])
+
+const labelInput = ref()
+const newLabel = ref('')
+const showInput = ref(false)
+let lastClick = 0
+
+const labelOnClick = () => {
+	let now = Date.now()
+	if (now - lastClick < 500 && !showInput.value) {
+		showLabelInput()
+	}
+	lastClick = now
+}
+
+const showLabelInput = async () => {
+	newLabel.value = props.label
+	showInput.value = true
+	await nextTick()
+	labelInput.value.focus()
+}
+
+const submitNewLabel = () => {
+	showInput.value = false
+	emit('change', newLabel.value)
+}
+
+const path = computed(() => getBezierPath(props))
+</script>
+
+<script lang="ts">
+export default {
+	inheritAttrs: false,
+}
+</script>
+
+<template>
+	<path :id="id" :style="style" class="vue-flow__edge-path" :d="path[0]" :marker-end="markerEnd" />
+
+	<EdgeLabelRenderer>
+		<div
+			:style="{
+				pointerEvents: 'all',
+				position: 'absolute',
+				transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`,
+			}"
+			class="nodrag nopan editable-edge-label"
+			@click="labelOnClick()">
+			<div class="vue-flow__edge-label">{{ props.label }}</div>
+			<div v-if="showInput" class="label-input-wrapper">
+				<input
+					ref="labelInput"
+					class="label-input"
+					v-model="newLabel"
+					@blur="showInput = false"
+					@keypress.enter="submitNewLabel" />
+			</div>
+		</div>
+	</EdgeLabelRenderer>
+</template>
+
+<style>
+.editable-edge-label {
+	background-color: white;
+	position: relative;
+	font-size: 12px;
+}
+.label-input-wrapper {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.label-input {
+	text-align: center;
+}
+</style>

package/src/components/EditableNode.vue

@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import { NodeProps, Handle, Position, NodeEventsOn } from '@vue-flow/core'
+import { computed, ref, nextTick } from 'vue'
+
+interface EditableNodeProps extends NodeProps {
+	id: string
+	label: string
+	sourcePosition: Position
+	targetPosition: Position
+	data: any
+}
+
+const props = defineProps<EditableNodeProps>()
+
+const emit = defineEmits(['change'])
+
+const positionMap = {
+	top: Position.Top,
+	right: Position.Right,
+	bottom: Position.Bottom,
+	left: Position.Left,
+}
+
+const sourcePosition = computed(() => positionMap[props.sourcePosition])
+const targetPosition = computed(() => positionMap[props.targetPosition])
+
+const labelInput = ref()
+const newLabel = ref('')
+const showInput = ref(false)
+let lastClick = 0
+
+const nodeOnClick = () => {
+	let now = Date.now()
+	if (now - lastClick < 500 && !showInput.value) {
+		showLabelInput()
+	}
+	lastClick = now
+}
+
+const showLabelInput = async () => {
+	newLabel.value = props.label
+	showInput.value = true
+	await nextTick()
+	labelInput.value.focus()
+}
+
+const submitNewLabel = () => {
+	showInput.value = false
+	emit('change', newLabel.value)
+}
+</script>
+
+<template>
+	<div @click="nodeOnClick()">
+		<div>{{ props.label }}</div>
+		<div v-if="showInput" class="label-input-wrapper">
+			<input
+				ref="labelInput"
+				class="label-input"
+				v-model="newLabel"
+				@blur="showInput = false"
+				@keypress.enter="submitNewLabel" />
+		</div>
+		<Handle v-if="props.data.hasInput" id="a" type="target" :position="targetPosition" />
+		<Handle v-if="props.data.hasOutput" id="b" type="source" :position="sourcePosition" />
+	</div>
+</template>
+
+<style>
+.label-input-wrapper {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.label-input {
+	text-align: center;
+}
+</style>

package/src/components/NodeEditor.vue

@@ -0,0 +1,330 @@
+<template>
+	<div class="node-editor-wrapper" :class="containerClass" @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>
+				</div>
+				<div>
+					<button class="button-default" @click="fitView()">Center</button>
+				</div>
+				<div v-if="activeElementIndex > -1">
+					<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>
+				</div>
+			</div>
+		</div>
+
+		<VueFlow
+			@wheel.prevent="onWheel($event)"
+			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)">
+			<template #node-editable="props">
+				<EditableNode v-bind="props" @change="labelChanged($event, props.id)" />
+			</template>
+			<template #edge-editable="props">
+				<EditableEdge v-bind="props" @change="labelChanged($event, props.id)" />
+			</template>
+		</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
+
+const props = defineProps<{
+	modelValue: any
+	nodeContainerClass: string
+}>()
+
+// 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 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
+	}
+	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
+			} else {
+				_elements[j].data.hasInput = true
+				_elements[j].data.hasOutput = true
+			}
+			_elements[j].class = 'vue-flow__node-default'
+			_elements[j].type = 'editable'
+		}
+
+		for (let j = 0; j < _elements.length; j++) {
+			let key = _elements[j].id
+			let el = _elements[j]
+			_elements[j].events = {
+				click: () => {
+					activeElementKey.value = key
+				},
+			}
+		}
+
+		return _elements
+	},
+	set: newValue => {
+		emit('update:modelValue', JSON.parse(JSON.stringify(newValue)))
+	},
+})
+
+//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)
+})
+
+onBeforeUnmount(() => {
+	document.removeEventListener('keypress', handleKeypress)
+})
+
+// Methods
+
+const shiftTerminal = currentTerminal => {
+	return {
+		top: 'right',
+		right: 'bottom',
+		bottom: 'left',
+		left: 'top',
+	}[currentTerminal]
+}
+
+const shiftOutput = () => {
+	if (activeElementIndex.value > -1) {
+		vueFlowElements.value[activeElementIndex.value].sourcePosition = shiftTerminal(
+			vueFlowElements.value[activeElementIndex.value].sourcePosition
+		)
+	}
+}
+
+const shiftInput = () => {
+	if (activeElementIndex.value > -1) {
+		vueFlowElements.value[activeElementIndex.value].targetPosition = shiftTerminal(
+			vueFlowElements.value[activeElementIndex.value].targetPosition
+		)
+	}
+}
+
+const onWheel = $event => {
+	window.scrollBy(0, $event.deltaY)
+}
+
+const handleKeypress = e => {
+	if (hover.value && e.ctrlKey == true) {
+		if (e.key == '+' || e.key == '=') {
+			vueFlowInstance.value.zoomIn()
+		}
+		if (e.key == '-') {
+			vueFlowInstance.value.zoomOut()
+		}
+	}
+}
+
+const fitView = () => {
+	vueFlowInstance.value.fitView()
+}
+
+const addNode = () => {
+	let newNodePosition = { x: Math.random() * 200, y: Math.random() * 200 }
+	let makeEdge = false
+	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 }
+			makeEdge = true
+		}
+	}
+
+	let id = vueFlowElements.value.length
+	let nodeId = `node-${id}`
+	vueFlowElements.value.push({
+		id: nodeId,
+		label: 'Node ' + id,
+		sourcePosition: 'right',
+		targetPosition: 'left',
+		class: 'vue-flow__node-default',
+		type: 'editable',
+		data: {
+			hasInput: true,
+			hasOutput: true,
+		},
+		events: {
+			click: () => {
+				activeElementKey.value = nodeId
+			},
+		},
+		// position: { x: Math.random() * vueFlowInstance.value.dimensions.width, y: Math.random() * vueFlowInstance.value.dimensions.height }
+		position: newNodePosition,
+	})
+
+	if (makeEdge) {
+		let edgeId = `edge-${id + 1}`
+		vueFlowElements.value.push({
+			id: edgeId,
+			source: activeElementKey.value,
+			target: nodeId,
+			type: 'editable',
+			label: `EDGE ${id + 1}`,
+			animated: true,
+			events: {
+				click: () => {
+					activeElementKey.value = edgeId
+				},
+			},
+		})
+	}
+}
+
+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) {
+			vueFlowElements.value[j].label = e
+			break
+		}
+	}
+}
+</script>
+<style>
+@import '@vue-flow/core/dist/style.css';
+@import '@vue-flow/core/dist/theme-default.css';
+
+.chart-controls-left,
+.chart-controls-right {
+	height: 1.8em;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	padding-top: 0.2em;
+}
+.chart-controls-right div {
+	margin-left: 5px;
+}
+.chart-controls {
+	padding-left: 20px;
+	padding-right: 20px;
+	height: 1.8em;
+	border-bottom: 1px solid #ccc;
+	display: flex;
+	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;
+	border-radius: 3px;
+	border: 1px solid #ccc;
+	cursor: pointer;
+	white-space: nowrap;
+}
+
+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;
+}
+</style>

package/src/components/StateEditor.vue

@@ -0,0 +1,122 @@
+<template>
+	<div>
+		<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
+
+const props = defineProps(['layout', 'nodeContainerClass', 'modelValue'])
+
+// Emits
+
+const emit = defineEmits(['update:modelValue'])
+
+// Computed variables
+
+const elements = computed({
+	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 = {
+				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',
+			}
+			if (states[key].type && states[key].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
+				}
+				stateElements.push({
+					id: `${key}-${edges[edgeKey]}-${edgeKey}`,
+					target: target,
+					source: key,
+					label: edgeKey,
+					animated: true,
+				})
+				hasInputs[target] = true
+			}
+			j++
+		}
+		for (let key in stateHash) {
+			if (!hasInputs[key]) {
+				stateHash[key]['type'] = 'input'
+				stateHash[key]['class'] = 'default-input-node'
+			}
+			stateElements.push(stateHash[key])
+		}
+		return stateElements
+	},
+	set: newValue => {
+		// update modelValue when elements change
+		onElementsChange(newValue)
+		// emit('update:modelValue', props.modelValue)
+	},
+})
+
+// Methods
+
+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') {
+			// it's an input node
+			states[el.label] = {
+				on: {},
+			}
+		} else if (el.type == 'output') {
+			// it's an output node
+			states[el.label] = {
+				type: 'final',
+			}
+		} else if (el.source && el.target) {
+			// it's an edge
+			edges[el.source] = edges[el.source] || {}
+			edges[el.source][el.label] = {
+				target: el.target,
+			}
+		} else {
+			// it's a state
+			states[el.label] = {
+				on: {},
+			}
+		}
+		idToLabel[el.id] = el.label
+	}
+
+	for (let key in edges) {
+		// add edges to states
+		let label = idToLabel[key]
+		for (let edgeKey in edges[key]) {
+			states[label].on[edgeKey] = edges[key][edgeKey]
+		}
+	}
+	emit('update:modelValue', states)
+}
+</script>
+<style scoped></style>