<template>
|
<div class="absolute bottom-0 left-0 right-0 top-0">
|
<div class="relative flex h-full w-full flex-col">
|
<Header />
|
<main class="relative flex h-full w-full flex-1">
|
|
<Sidebar @dragstart="handleOnDragStart"/>
|
<div class="relative h-full flex-1 overflow-hidden">
|
<MainCanvas />
|
</div>
|
</main>
|
</div>
|
</div>
|
<!-- <Toaster /> -->
|
</template>
|
<script setup lang="ts">
|
// import { PlusIcon, GhostIcon } from 'lucide-vue-next'
|
import { useVueFlow } from '@vue-flow/core';
|
import { useClipboard } from '@vueuse/core';
|
// import MainCanvas from '@/components/vue-flow/MainCanvas.vue';
|
import MainCanvas from '/@/components/vue-flow/MainCanvas.vue';
|
import Header from './components/Header.vue';
|
import Sidebar from './components/Sidebar.vue';
|
|
// import { Button } from '@/components/ui/button';
|
// import { Toaster, useToast } from '@/components/ui/toast';
|
|
function handleOnDragStart(event: DragEvent, nodeType: any) {
|
if (event.dataTransfer) {
|
event.dataTransfer.setData('application/vueflow', nodeType);
|
event.dataTransfer.effectAllowed = 'move';
|
}
|
}
|
|
const { toObject } = useVueFlow();
|
const { copy } = useClipboard();
|
// const { toast } = useToast();
|
// function handleClickGetData() {
|
// copy(JSON.stringify(toObject())).then(() => {
|
// toast({
|
// title: 'copied success',
|
// });
|
// });
|
// }
|
|
// function handleClickPublishBtn() {
|
// toast({
|
// title: 'Save Data',
|
// description: '1.valid data 2.fetch backend api to save result',
|
// });
|
// }
|
</script>
|
