shalu-agent-workflow/packages/workflow/src/components/Canvas.vue

<script lang="ts" setup>
import { computed } from 'vue'
import { VueFlow } from '@vue-flow/core'
import type { IWorkflow } from '../Interface'

import CanvasNode from './elements/CanvasNode.vue'
import CanvasEdge from './elements/CanvasEdge.vue'

defineOptions({
	name: 'workflow-canvas'
})

const props = withDefaults(defineProps<{
  workflow?: IWorkflow
}>(), {
})
// nodes
const nodes = computed(() => props.workflow?.nodes ?? [])

// edges
const edges = computed(() => props.workflow?.edges ?? [])
</script>

<template>
	<VueFlow :nodes="nodes" :edges="edges">
		<template #node-canvas-node="nodeProps">
			<CanvasNode v-bind="nodeProps" />
		</template>

		<template #edge-canvas-edge="edgeProps">
			<CanvasEdge v-bind="edgeProps" />
		</template>
	</VueFlow>
</template>

<style>
@import '@vue-flow/core/dist/style.css';
@import '@vue-flow/core/dist/theme-default.css';
</style>