<template>
	<div class="w-full h-full">
		<Canvas :id="id" :nodes="nodes" :edges="edges" v-bind="$attrs" />
		<slot />
	</div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import Canvas from './components/Canvas.vue'
import type { IWorkflow } from './Interface'

defineOptions({
	inheritAttrs: false
})

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

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