2024-05-23 01:42:10 -07:00
|
|
|
<script setup lang="ts">
|
|
|
|
import Canvas from '@/components/canvas/Canvas.vue';
|
|
|
|
import { toRef, useCssModule } from 'vue';
|
|
|
|
import type { Workflow } from 'n8n-workflow';
|
|
|
|
import type { IWorkflowDb } from '@/Interface';
|
|
|
|
import { useCanvasMapping } from '@/composables/useCanvasMapping';
|
|
|
|
|
2024-06-25 02:11:44 -07:00
|
|
|
defineOptions({
|
|
|
|
inheritAttrs: false,
|
|
|
|
});
|
|
|
|
|
2024-05-23 01:42:10 -07:00
|
|
|
const props = defineProps<{
|
|
|
|
id?: string;
|
|
|
|
workflow: IWorkflowDb;
|
|
|
|
workflowObject: Workflow;
|
|
|
|
}>();
|
|
|
|
|
|
|
|
const $style = useCssModule();
|
|
|
|
|
|
|
|
const workflow = toRef(props, 'workflow');
|
|
|
|
const workflowObject = toRef(props, 'workflowObject');
|
|
|
|
|
|
|
|
const { elements, connections } = useCanvasMapping({ workflow, workflowObject });
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<div :class="$style.wrapper">
|
|
|
|
<div :class="$style.canvas">
|
|
|
|
<Canvas v-if="workflow" :elements="elements" :connections="connections" v-bind="$attrs" />
|
|
|
|
</div>
|
|
|
|
<slot />
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<style lang="scss" module>
|
|
|
|
.wrapper {
|
|
|
|
display: block;
|
|
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
|
|
|
|
.canvas {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
position: relative;
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
</style>
|