@stonecrop/node-editor 0.30.0 → 0.32.0

package/src/components/NodeEditor.vue

@@ -1,397 +0,0 @@
-<template>
-	<div
-		class="node-editor-wrapper"
-		:class="nodeContainerClass"
-		@contextmenu.prevent
-		@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>
-					<button class="button-default" @click="autoArrange">Auto-arrange</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
-			v-if="vueFlowElements && vueFlowElements.length"
-			v-model="vueFlowElements"
-			class="nowheel"
-			:prevent-scrolling="true"
-			:zoom-on-scroll="false"
-			:fit-view-on-init="true"
-			:pan-activation-key-code="null"
-			@connect="handleConnect"
-			@pane-ready="setInstance"
-			@node-click="handleNodeClick"
-			@edge-click="handleEdgeClick"
-			@edge-context-menu="handleEdgeContextMenu"
-			@node-drag-stop="emitElements"
-			@wheel.prevent="onWheel">
-			<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)" @remove="removeEdge(props.id)" />
-			</template>
-			<template #edge-selfloop="props">
-				<SelfLoopEdge v-bind="props" @change="labelChanged($event, props.id)" @remove="removeEdge(props.id)" />
-			</template>
-		</VueFlow>
-	</div>
-</template>
-
-<script setup lang="ts">
-import {
-	type VueFlowStore,
-	Position,
-	VueFlow,
-	useVueFlow,
-	Connection,
-	Node,
-	NodeMouseEvent,
-	EdgeMouseEvent,
-	DefaultEdge,
-} from '@vue-flow/core'
-import { type HTMLAttributes, ref, computed, nextTick, onBeforeUnmount, onMounted } from 'vue'
-
-import EditableEdge from './EditableEdge.vue'
-import EditableNode from './EditableNode.vue'
-import SelfLoopEdge from './SelfLoopEdge.vue'
-import { autoLayout } from '../utils/autoLayout'
-import type { FlowElements } from '../types'
-
-const { modelValue, nodeContainerClass = '' } = defineProps<{
-	modelValue: FlowElements
-	nodeContainerClass?: HTMLAttributes['class']
-}>()
-const emit = defineEmits(['update:modelValue'])
-
-const hover = ref(false)
-const vueFlowElements = ref<FlowElements>([])
-const vueFlowInstance = ref<VueFlowStore>()
-
-const activeElementKey = ref('')
-const activeElementIndex = computed(() =>
-	vueFlowElements.value.findIndex(element => element.id === activeElementKey.value)
-)
-
-const elements = computed({
-	get: () => {
-		const items = modelValue
-
-		// Add rendering flags without clobbering caller-provided data. Edges carry `data.actionKey`
-		// (the stable action identity from stateTransforms); wiping data here would drop it before it
-		// round-trips back through emitElements, silently re-keying actions on every graph edit.
-		for (const element of items) {
-			element.data = { ...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 {
-				element.data.hasInput = true
-				element.data.hasOutput = true
-			}
-			element.class = 'vue-flow__node-default'
-			// A self-loop edge (source === target) routes to the SelfLoopEdge arc renderer; everything
-			// else (nodes and cross-state edges) uses the default editable slot. getBezierPath draws a
-			// useless near-straight segment for a self-loop, so it must not fall through to 'editable'.
-			element.type = 'source' in element && element.source === element.target ? 'selfloop' : 'editable'
-		}
-
-		return items
-	},
-	set: newValue => {
-		emit('update:modelValue', JSON.parse(JSON.stringify(newValue)))
-	},
-})
-const { addEdges, removeEdges } = useVueFlow()
-
-onMounted(() => {
-	document.removeEventListener('keypress', handleKeypress)
-	document.addEventListener('keypress', handleKeypress)
-})
-
-onBeforeUnmount(() => {
-	document.removeEventListener('keypress', handleKeypress)
-})
-
-const setInstance = (instance: VueFlowStore) => {
-	vueFlowInstance.value = instance
-}
-
-vueFlowElements.value = elements.value
-
-// Methods
-const shiftTerminal = (currentTerminal: Position) => {
-	return {
-		[Position.Top]: Position.Right,
-		[Position.Right]: Position.Bottom,
-		[Position.Bottom]: Position.Left,
-		[Position.Left]: Position.Top,
-	}[currentTerminal]
-}
-
-const shiftOutput = () => {
-	if (activeElementIndex.value > -1) {
-		const activeNode = vueFlowElements.value[activeElementIndex.value] as Node
-		if (!activeNode.sourcePosition) return
-		activeNode.sourcePosition = shiftTerminal(activeNode.sourcePosition)
-		emitElements()
-	}
-}
-
-const shiftInput = () => {
-	if (activeElementIndex.value > -1) {
-		const activeNode = vueFlowElements.value[activeElementIndex.value] as Node
-		if (!activeNode.targetPosition) return
-		activeNode.targetPosition = shiftTerminal(activeNode.targetPosition)
-		emitElements()
-	}
-}
-
-const onWheel = (event: WheelEvent) => {
-	window.scrollBy(0, event.deltaY)
-}
-
-const handleKeypress = (event: KeyboardEvent) => {
-	if (hover.value && event.ctrlKey == true) {
-		if (event.key == '+' || event.key == '=') {
-			void vueFlowInstance.value?.zoomIn()
-		}
-		if (event.key == '-') {
-			void vueFlowInstance.value?.zoomOut()
-		}
-	}
-}
-
-const fitView = async () => {
-	await vueFlowInstance.value?.fitView()
-}
-
-const autoArrange = async () => {
-	// Read measured node sizes from the VueFlow store so the layout fits actual box widths (state
-	// labels differ in length); autoLayout falls back to default dimensions for any unmeasured node.
-	const store = vueFlowInstance.value
-	const dimensions: Record<string, { width: number; height: number }> = {}
-	for (const el of vueFlowElements.value) {
-		if ('source' in el) continue
-		const dims = store?.findNode?.(el.id)?.dimensions
-		if (dims?.width && dims?.height) dimensions[el.id] = { width: dims.width, height: dims.height }
-	}
-
-	const laid = autoLayout(vueFlowElements.value, { dimensions })
-	const positionById = new Map<string, { x: number; y: number }>()
-	for (const el of laid) {
-		if ('source' in el) continue
-		positionById.set(el.id, el.position)
-	}
-	// Apply positions onto the v-model elements — VueFlow reacts to these, same as shiftInput/Output.
-	for (const el of vueFlowElements.value) {
-		if ('source' in el) continue
-		const position = positionById.get(el.id)
-		if (position) el.position = position
-	}
-
-	emitElements()
-	await nextTick()
-	await fitView()
-}
-
-const addNode = () => {
-	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 as Node).position.x + 200, y: (activeNode as Node).position.y + 50 }
-			makeEdge = true
-		}
-	}
-
-	const id = vueFlowElements.value.length
-	const nodeId = `node-${id}`
-	vueFlowElements.value.push({
-		id: nodeId,
-		label: 'Node ' + id,
-		sourcePosition: Position.Right,
-		targetPosition: Position.Left,
-		class: 'vue-flow__node-default',
-		type: 'editable',
-		data: {
-			hasInput: true,
-			hasOutput: true,
-		},
-		position: newNodePosition,
-	})
-
-	if (makeEdge) {
-		const edgeId = `edge-${id + 1}`
-		vueFlowElements.value.push({
-			id: edgeId,
-			source: activeElementKey.value,
-			target: nodeId,
-			type: 'editable',
-			label: `EDGE ${id + 1}`,
-			animated: true,
-		})
-	}
-	emitElements()
-}
-
-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 = event
-			break
-		}
-	}
-	emitElements()
-}
-
-const handleNodeClick = ({ node }: NodeMouseEvent) => {
-	activeElementKey.value = node.id
-}
-
-const handleEdgeClick = ({ edge }: EdgeMouseEvent) => {
-	activeElementKey.value = edge.id
-}
-
-const handleConnect = async (event: Connection) => {
-	const id = vueFlowElements.value.length
-	// A node connected to itself is a self-transition (mutate-in-place) — render it as a loop.
-	const isSelfLoop = event.source === event.target
-	const newEdge = {
-		id: `edge-${id}`,
-		source: event.source,
-		target: event.target,
-		type: isSelfLoop ? 'selfloop' : 'editable',
-		label: `New Edge`,
-		interactionWidth: 400,
-		animated: true,
-	}
-	addEdges([newEdge])
-	await nextTick()
-	emitElements()
-}
-
-const handleEdgeContextMenu = async (event: EdgeMouseEvent) => {
-	removeEdges([event.edge.id])
-	await nextTick()
-	emitElements()
-}
-
-const removeEdge = async (id: string) => {
-	removeEdges([id])
-	await nextTick()
-	emitElements()
-}
-
-const emitElements = () => {
-	emit('update:modelValue', JSON.parse(JSON.stringify(vueFlowElements.value)))
-}
-</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 {
-	position: absolute;
-	bottom: 0.5rem;
-	left: 0.5rem;
-	z-index: 10;
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	gap: 0.35rem;
-	padding: 0.4rem 0.5rem;
-	background: rgba(255, 255, 255, 0.92);
-	border: 1px solid #ccc;
-	border-radius: 4px;
-	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
-}
-
-.chart-controls div {
-	margin-bottom: 0;
-}
-
-.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/SelfLoopEdge.vue

@@ -1,88 +0,0 @@
-<template>
-	<!-- transparent ghost path gives a ~20px click zone around the 2px visible stroke -->
-	<path :d="path.d" fill="none" stroke="transparent" stroke-width="20" class="vue-flow__edge-interaction" />
-	<path :id="id" :style="style" class="vue-flow__edge-path" :d="path.d" :marker-end="markerEnd" />
-
-	<EdgeLabelRenderer>
-		<div
-			:style="{
-				pointerEvents: 'all',
-				position: 'absolute',
-				transform: `translate(-50%, -50%) translate(${path.labelX}px,${path.labelY}px)`,
-			}"
-			class="nodrag nopan editable-edge-label"
-			@click="labelOnClick()"
-			@contextmenu.prevent="$emit('remove', id)">
-			<div class="vue-flow__edge-label">{{ label }}</div>
-			<div v-if="showInput" class="label-input-wrapper">
-				<input
-					ref="labelInput"
-					v-model="newLabel"
-					class="label-input"
-					@blur="showInput = false"
-					@keypress.enter="submitNewLabel" />
-			</div>
-		</div>
-	</EdgeLabelRenderer>
-</template>
-
-<script setup lang="ts">
-import { type EdgeProps, EdgeLabelRenderer } from '@vue-flow/core'
-import { computed, ref, nextTick, useTemplateRef } from 'vue'
-
-const props = defineProps<EdgeProps>()
-const emit = defineEmits(['change', 'remove'])
-
-// A self-loop connects a node's source handle to its own target handle. getBezierPath draws a nearly
-// straight segment across the node for that (the two handles are on the same box), so it's useless
-// here — we hand-author an arc that leaves the source handle, loops up and over the node top, and
-// returns to the target handle. LOOP_HEIGHT is how far above the handles the arc bulges.
-const LOOP_HEIGHT = 90
-const LOOP_SPREAD = 45
-
-const path = computed(() => {
-	const { sourceX, sourceY, targetX, targetY } = props
-	const d = `M ${sourceX},${sourceY} C ${sourceX + LOOP_SPREAD},${sourceY - LOOP_HEIGHT} ${
-		targetX - LOOP_SPREAD
-	},${targetY - LOOP_HEIGHT} ${targetX},${targetY}`
-	// Place the label near the arc's apex (a cubic bezier peaks around 0.75 of the control offset).
-	const labelX = (sourceX + targetX) / 2
-	const labelY = Math.min(sourceY, targetY) - LOOP_HEIGHT * 0.72
-	return { d, labelX, labelY }
-})
-
-const inputRef = useTemplateRef<HTMLInputElement>('labelInput')
-const newLabel = ref<EdgeProps['label']>('')
-const showInput = ref(false)
-let lastClick = 0
-
-const labelOnClick = async () => {
-	let now = Date.now()
-	if (now - lastClick < 500 && !showInput.value) {
-		await showLabelInput()
-	}
-	lastClick = now
-}
-
-const showLabelInput = async () => {
-	newLabel.value = props.label
-	showInput.value = true
-	await nextTick()
-	inputRef.value?.focus()
-}
-
-const submitNewLabel = () => {
-	showInput.value = false
-	emit('change', newLabel.value)
-}
-</script>
-
-<script lang="ts">
-export default {
-	inheritAttrs: false,
-}
-</script>
-
-<style>
-/* Label + input styles are shared with EditableEdge (defined there, global scope). */
-</style>

package/src/components/StateEditor.vue

@@ -1,46 +0,0 @@
-<template>
-	<div>
-		<NodeEditor v-model="elements" :node-container-class="nodeContainerClass" />
-	</div>
-</template>
-
-<script setup lang="ts">
-import { type HTMLAttributes, computed, onMounted } from 'vue'
-import type { WorkflowMeta } from '@stonecrop/schema'
-
-import NodeEditor from './NodeEditor.vue'
-import type { FlowElements, Layout } from '../types'
-import { autoLayout } from '../utils/autoLayout'
-import { statesToFlowElements, flowElementsToStates } from '../utils/stateTransforms'
-
-const workflow = defineModel<WorkflowMeta>()
-const layout = defineModel<Layout>('layout')
-const { nodeContainerClass = '' } = defineProps<{
-	nodeContainerClass?: HTMLAttributes['class']
-}>()
-
-onMounted(() => {
-	if (layout.value === undefined) {
-		console.warn('[StateEditor] v-model:layout is not bound. Node position changes will not be persisted.')
-	}
-})
-
-const elements = computed<FlowElements>({
-	get: () => {
-		if (!workflow.value) return []
-		const els = statesToFlowElements(workflow.value, layout.value)
-		// Seed an un-arranged workflow with an auto-computed dagre layout instead of the naive row.
-		// Ephemeral: these positions are persisted only once the author drags a node (which routes
-		// through flowElementsToStates → layout). A workflow with any saved layout keeps it as-is.
-		const noSavedLayout = !layout.value || Object.keys(layout.value).length === 0
-		return noSavedLayout ? autoLayout(els) : els
-	},
-	set: newValue => {
-		const { workflow: nextWorkflow, layout: nextLayout } = flowElementsToStates(newValue, workflow.value)
-		workflow.value = nextWorkflow
-		if (layout.value !== undefined) {
-			layout.value = nextLayout
-		}
-	},
-})
-</script>

package/src/index.ts

@@ -1,17 +0,0 @@
-import { App } from 'vue'
-
-import NodeEditor from './components/NodeEditor.vue'
-import StateEditor from './components/StateEditor.vue'
-export type * from './types'
-
-/**
- * Install all Node Editor components
- * @param app - Vue app instance
- * @public
- */
-function install(app: App) {
-	app.component('NodeEditor', NodeEditor)
-	app.component('StateEditor', StateEditor)
-}
-
-export { install, NodeEditor, StateEditor }

package/src/shims-vue.d.ts

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

package/src/types/index.ts

@@ -1,33 +0,0 @@
-import { type Elements, type Element, type XYPosition, Position } from '@vue-flow/core'
-
-/**
- * Flow elements
- * @public
- */
-export type FlowElements = Elements<
-	{ hasInput?: boolean; hasOutput?: boolean },
-	// `actionKey` is the stable action identity carried on an edge, decoupled from its visible
-	// `label` (the display name). It lets an edge be relabeled without re-keying the action.
-	{ hasInput?: boolean; hasOutput?: boolean; actionKey?: string }
->
-
-/**
- * Flow element
- * @public
- */
-export type FlowElement = Element<
-	{ hasInput?: boolean; hasOutput?: boolean },
-	{ hasInput?: boolean; hasOutput?: boolean; actionKey?: string }
->
-
-/**
- * Node layout
- * @public
- */
-export type Layout = {
-	[key: string]: {
-		position?: XYPosition
-		targetPosition?: Position
-		sourcePosition?: Position
-	}
-}

package/src/utils/autoLayout.ts

@@ -1,67 +0,0 @@
-import { Graph, layout } from '@dagrejs/dagre'
-
-import type { FlowElements } from '../types'
-
-/**
- * Options for {@link autoLayout}.
- * @public
- */
-export interface AutoLayoutOptions {
-	/** Layout direction. Defaults to `'LR'` to match the editor's Left/Right handle defaults. */
-	rankdir?: 'LR' | 'RL' | 'TB' | 'BT'
-	/** Fallback node width when no measured size is supplied (the seed path has no DOM to measure). */
-	nodeWidth?: number
-	/** Fallback node height when no measured size is supplied. */
-	nodeHeight?: number
-	/** Measured per-node sizes (node id → box) — supplied by the on-demand "Auto-arrange" button. */
-	dimensions?: Record<string, { width: number; height: number }>
-}
-
-/**
- * Compute node positions for a workflow graph with dagre's layered (Sugiyama) algorithm.
- *
- * Pure and synchronous: takes VueFlow elements (nodes + edges) and returns a new elements array with
- * each node's `position` replaced by a laid-out coordinate; edges and every other node field are
- * passed through untouched. Used two ways — as the seed for an un-arranged workflow (fixed default
- * dimensions, no DOM) and behind the toolbar button (measured `dimensions`).
- *
- * Self-loop edges (`source === target`) are skipped: dagre doesn't rank them, and they're reserved
- * for the separate mutate-in-place self-transition feature.
- * @public
- */
-export function autoLayout(elements: FlowElements, options: AutoLayoutOptions = {}): FlowElements {
-	const { rankdir = 'LR', nodeWidth = 160, nodeHeight = 40, dimensions } = options
-	const sizeOf = (id: string) => dimensions?.[id] ?? { width: nodeWidth, height: nodeHeight }
-
-	// Nodes are the elements without a `source` (the same discriminator flowElementsToStates uses).
-	const nodeIds: string[] = []
-	for (const el of elements) {
-		if (!('source' in el)) nodeIds.push(el.id)
-	}
-	if (nodeIds.length === 0) return [...elements]
-
-	const graph = new Graph()
-	graph.setGraph({ rankdir, nodesep: 40, ranksep: 80, edgesep: 20 })
-	graph.setDefaultEdgeLabel(() => ({}))
-
-	for (const id of nodeIds) {
-		const { width, height } = sizeOf(id)
-		graph.setNode(id, { width, height })
-	}
-	for (const el of elements) {
-		if (!('source' in el)) continue
-		if (el.source === el.target) continue
-		graph.setEdge(el.source, el.target)
-	}
-
-	layout(graph)
-
-	// dagre reports each node by its CENTER; VueFlow positions nodes by their TOP-LEFT corner.
-	return elements.map(el => {
-		if ('source' in el) return el
-		const center = graph.node(el.id)
-		if (!center) return el
-		const { width, height } = sizeOf(el.id)
-		return { ...el, position: { x: center.x - width / 2, y: center.y - height / 2 } }
-	})
-}