shalu-agent-workflow/packages/workflow/src/Workflow.vue

<template>
	<div class="w-full h-full relative">
		<Canvas
			ref="vueflowRef"
			:id="id"
			:nodes="nodes"
			:edges="edges"
			:read-only="readOnly"
			:node-map="nodeMap"
			:default-viewport="workflow?.viewPort"
			hide-child-node
			v-bind="$attrs"
		/>
		<slot />
	</div>
</template>

<script setup lang="ts">
import { ref, computed, toRef } from 'vue'
import Canvas from './components/Canvas.vue'
import type { IWorkflow } from './Interface'
import { provideWorkflowContext } from './hooks/useWorkflowContext'

defineOptions({
	inheritAttrs: false
})

const props = withDefaults(
	defineProps<{
		id?: string
		workflow?: IWorkflow
		readOnly?: boolean
		nodeMap: Record<string, any>
	}>(),
	{
		id: 'canvas',
		readOnly: false
	}
)

const vueflowRef = ref<InstanceType<typeof Canvas> | null>(null)

// nodes
const nodes = computed(() => props.workflow?.nodes || [])
// edges
const edges = computed(() => props.workflow?.edges || [])

defineExpose({
	getVueFlow() {
		return vueflowRef.value?.vueFlow
	}
})

provideWorkflowContext(toRef(props, 'workflow'))
</script>