@stonecrop/node-editor 0.31.0 → 0.32.0

package/dist/node-editor.d.ts

@@ -1,60 +0,0 @@
-import { App } from 'vue';
-import { Element as Element_2 } from '@vue-flow/core';
-import { Elements } from '@vue-flow/core';
-import NodeEditor from './components/NodeEditor.vue';
-import { Position } from '@vue-flow/core';
-import StateEditor from './components/StateEditor.vue';
-import { XYPosition } from '@vue-flow/core';
-
-/**
- * Flow element
- * @public
- */
-export declare type FlowElement = Element_2<{
-    hasInput?: boolean;
-    hasOutput?: boolean;
-}, {
-    hasInput?: boolean;
-    hasOutput?: boolean;
-    actionKey?: string;
-}>;
-
-/**
- * Flow elements
- * @public
- */
-export declare type FlowElements = Elements<{
-    hasInput?: boolean;
-    hasOutput?: boolean;
-}, {
-    hasInput?: boolean;
-    hasOutput?: boolean;
-    actionKey?: string;
-}>;
-
-/**
- * Install all Node Editor components
- * @param app - Vue app instance
- * @public
- */
-export declare function install(app: App): void;
-
-/**
- * Node layout
- * @public
- */
-export declare type Layout = {
-    [key: string]: {
-        position?: XYPosition;
-        targetPosition?: Position;
-        sourcePosition?: Position;
-    };
-};
-
-export { NodeEditor }
-
-export { Position }
-
-export { StateEditor }
-
-export { }

package/dist/node_editor.tsbuildinfo

@@ -1 +0,0 @@
-{"version":"6.0.3"}

package/dist/src/index.js

@@ -1,16 +0,0 @@
-import NodeEditor from './components/NodeEditor.vue';
-import StateEditor from './components/StateEditor.vue';
-// `Layout` types its handle placement as this enum, so a consumer cannot fill that field without
-// naming it. It is an enum rather than a string union, which makes the obvious `'left'` a type
-// error, and @vue-flow/core is a transitive dependency a consumer should not have to add.
-export { Position } from '@vue-flow/core';
-/**
- * Install all Node Editor components
- * @param app - Vue app instance
- * @public
- */
-function install(app) {
-    app.component('NodeEditor', NodeEditor);
-    app.component('StateEditor', StateEditor);
-}
-export { install, NodeEditor, StateEditor };

package/dist/src/utils/autoLayout.js

@@ -1,50 +0,0 @@
-import { Graph, layout } from '@dagrejs/dagre';
-/**
- * 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, options = {}) {
-    const { rankdir = 'LR', nodeWidth = 160, nodeHeight = 40, dimensions } = options;
-    const sizeOf = (id) => dimensions?.[id] ?? { width: nodeWidth, height: nodeHeight };
-    // Nodes are the elements without a `source` (the same discriminator flowElementsToStates uses).
-    const nodeIds = [];
-    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 } };
-    });
-}

package/dist/src/utils/stateTransforms.js

@@ -1,148 +0,0 @@
-import { Position } from '@vue-flow/core';
-export function statesToFlowElements(workflow, layout) {
-    const { states = [], actions = {} } = workflow;
-    const edges = [];
-    const nodes = [];
-    for (const [actionKey, actionDef] of Object.entries(actions)) {
-        // Stateless commands (print/email) have no graph presence; anything graph-owned needs states.
-        if (actionDef.stateless || !actionDef.allowedStates?.length)
-            continue;
-        // A self-transition (mutate-in-place `save`) renders as a self-loop on each allowed state:
-        // `source === target`, tagged `selfloop` so NodeEditor routes it to the arc renderer.
-        if (actionDef.selfTransition) {
-            for (const source of actionDef.allowedStates) {
-                edges.push({
-                    id: `${actionKey}-${source}`,
-                    source,
-                    target: source,
-                    label: actionDef.label ?? actionKey,
-                    data: { actionKey },
-                    animated: true,
-                    type: 'selfloop',
-                    interactionWidth: 40,
-                });
-            }
-            continue;
-        }
-        // A cross-state transition needs a target; a malformed action with neither is skipped.
-        if (!actionDef.nextState)
-            continue;
-        for (const source of actionDef.allowedStates) {
-            edges.push({
-                id: `${actionKey}-${source}`,
-                source,
-                target: actionDef.nextState,
-                // The edge paints the human display label; its identity (the action key) rides in
-                // `data.actionKey`, so relabeling the edge renames the action without re-keying it.
-                label: actionDef.label ?? actionKey,
-                data: { actionKey },
-                animated: true,
-                type: 'smoothstep',
-                interactionWidth: 40,
-            });
-        }
-    }
-    for (let index = 0; index < states.length; index++) {
-        const state = states[index];
-        const node = {
-            id: state,
-            label: state,
-            position: layout?.[state]?.position ?? { x: 200 * index, y: 100 },
-            targetPosition: layout?.[state]?.targetPosition ?? Position.Left,
-            sourcePosition: layout?.[state]?.sourcePosition ?? Position.Right,
-        };
-        // Every state renders identically — both handles, no start-state styling — so any transition
-        // (including a returning `reject`/`reopen` into the initial state) is authorable and a
-        // self-loop can anchor both ends. Marking an entry state is deferred (YAGNI) until needed.
-        nodes.push(node);
-    }
-    return [...edges, ...nodes];
-}
-export function flowElementsToStates(nextElements, existingWorkflow) {
-    const idToLabel = {};
-    const nextLayout = {};
-    const stateNames = [];
-    for (const el of nextElements) {
-        if ('source' in el)
-            continue;
-        const label = typeof el.label === 'string' ? el.label : el.id;
-        idToLabel[el.id] = label;
-        stateNames.push(label);
-        if (el.position) {
-            nextLayout[label] = {
-                position: el.position,
-                ...(el.targetPosition !== undefined && { targetPosition: el.targetPosition }),
-                ...(el.sourcePosition !== undefined && { sourcePosition: el.sourcePosition }),
-            };
-        }
-    }
-    // Group directed edges by their stable action key. A round-tripped edge carries the key in
-    // `data.actionKey`; a freshly-drawn edge (no data yet) falls back to its label as the key — the
-    // one moment label and key coincide, when the action is first born. The edge's label is captured
-    // separately as the display name, so a later relabel renames the action without re-keying it.
-    const transitionGroups = {};
-    for (const el of nextElements) {
-        if (!('source' in el))
-            continue;
-        const edgeLabel = typeof el.label === 'string' ? el.label : el.id;
-        const actionKey = el.data?.actionKey ?? edgeLabel;
-        const sourceLabel = idToLabel[el.source] || el.source;
-        const targetLabel = idToLabel[el.target] || el.target;
-        // Classify by topology, not by edge `type`: a self-loop (source === target) round-trips to a
-        // self-transition regardless of how it was authored (drawn node→itself, or re-rendered from a
-        // `selfTransition` action). A group's kind is set by its first edge; a multi-state self-loop
-        // (e.g. `save` on Draft AND Pending) accumulates each source into allowedStates.
-        const isSelf = el.source === el.target;
-        if (!transitionGroups[actionKey]) {
-            transitionGroups[actionKey] = {
-                allowedStates: [sourceLabel],
-                label: edgeLabel,
-                selfLoop: isSelf,
-                ...(isSelf ? {} : { nextState: targetLabel }),
-            };
-        }
-        else {
-            transitionGroups[actionKey].allowedStates.push(sourceLabel);
-        }
-    }
-    const nextActions = {};
-    // Transitions (and self-transitions) derived from graph edges
-    for (const [actionKey, group] of Object.entries(transitionGroups)) {
-        const existing = existingWorkflow?.actions?.[actionKey];
-        nextActions[actionKey] = {
-            // Spread existing first so every field the graph does NOT own — clientHandler,
-            // requiredFields and any field added to ActionDefinition later — survives the
-            // round-trip. The graph owns topology (allowedStates/nextState/selfTransition) and the
-            // display label. (Enumerating named fields here previously dropped clientHandler.)
-            ...existing,
-            // The edge's label is the display name (decoupled from the key). Fall back to the
-            // existing label, then the key, if an edge ever arrives label-less.
-            label: group.label || existing?.label || actionKey,
-            // The graph owns topology only. A self-transition (self-loop) stays in place: mark
-            // `selfTransition`, carry NO `nextState`. A cross-state transition carries `nextState`
-            // and clears any stale self flag (a self-loop redrawn as a normal edge). Explicit
-            // `undefined` on the unused field is dropped by JSON.stringify, so no format churn.
-            allowedStates: group.allowedStates,
-            nextState: group.selfLoop ? undefined : group.nextState,
-            selfTransition: group.selfLoop ? true : undefined,
-        };
-    }
-    // Pass through Verbs (stateless: true) and global Workflow actions (no allowedStates) verbatim
-    for (const [actionKey, actionDef] of Object.entries(existingWorkflow?.actions ?? {})) {
-        if (actionKey in transitionGroups)
-            continue;
-        if (actionDef.stateless || !actionDef.allowedStates?.length) {
-            nextActions[actionKey] = actionDef;
-        }
-        // Workflow action with allowedStates not in graph = user deleted its edges → remove
-    }
-    return {
-        // Spread existingWorkflow first so every top-level key the graph does NOT own — the
-        // sibling `triggers` map (field-validation triggers), and any WorkflowMeta key added
-        // later — survives the round-trip. The graph owns topology only: states + actions,
-        // overridden below. (Same principle the per-action spread applies above; enumerating
-        // only states+actions here previously dropped `triggers` on every graph edit.)
-        workflow: { ...existingWorkflow, states: stateNames, actions: nextActions },
-        layout: nextLayout,
-    };
-}

package/src/components/EditableEdge.vue

@@ -1,92 +0,0 @@
-<template>
-	<!-- transparent ghost path gives a ~20px click zone around the 2px visible stroke -->
-	<path :d="path[0]" fill="none" stroke="transparent" stroke-width="20" class="vue-flow__edge-interaction" />
-	<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()"
-			@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, getBezierPath /* useVueFlow */ } from '@vue-flow/core'
-import { computed, ref, nextTick, useTemplateRef } from 'vue'
-
-const props = defineProps<EdgeProps>()
-const emit = defineEmits(['change', 'remove'])
-
-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)
-}
-
-const path = computed(() => getBezierPath(props))
-</script>
-
-<script lang="ts">
-export default {
-	inheritAttrs: false,
-}
-</script>
-
-<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;
-	width: 40ch;
-}
-</style>

package/src/components/EditableNode.vue

@@ -1,65 +0,0 @@
-<template>
-	<div @click="nodeOnClick()">
-		<div>{{ 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>
-		<Handle v-if="data.hasInput" id="a" type="target" :position="targetPosition" />
-		<Handle v-if="data.hasOutput" id="b" type="source" :position="sourcePosition" />
-	</div>
-</template>
-
-<script setup lang="ts">
-import { NodeProps, Handle } from '@vue-flow/core'
-import { ref, nextTick, useTemplateRef } from 'vue'
-
-const props = defineProps<NodeProps>()
-const emit = defineEmits(['change'])
-
-const inputRef = useTemplateRef<HTMLInputElement>('labelInput')
-const newLabel = ref<NodeProps['label']>('')
-const showInput = ref(false)
-let lastClick = 0
-
-const nodeOnClick = 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>
-
-<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>