80 lines
1.7 KiB
Vue
80 lines
1.7 KiB
Vue
<script lang="ts" setup>
|
|
import { ref } from 'vue'
|
|
import { Background } from '@vue-flow/background'
|
|
import { Controls } from '@vue-flow/controls'
|
|
import { MiniMap } from '@vue-flow/minimap'
|
|
import type { Elements } from '@vue-flow/core'
|
|
import { MarkerType, VueFlow, useVueFlow } from '@vue-flow/core'
|
|
import CustomNode from './CustomNode.vue'
|
|
import CustomConnectionLine from './CustomConnectionLine.vue'
|
|
import FloatingEdge from './FloatingEdge.vue'
|
|
|
|
const { onConnect, addEdges } = useVueFlow()
|
|
|
|
const defaultEdgeOptions = {
|
|
style: { strokeWidth: 3, stroke: 'black' },
|
|
type: 'floating',
|
|
markerEnd: {
|
|
type: MarkerType.ArrowClosed,
|
|
color: 'black',
|
|
},
|
|
}
|
|
|
|
const elements = ref<Elements>([
|
|
{
|
|
id: '1',
|
|
type: 'custom',
|
|
position: { x: 0, y: 0 },
|
|
},
|
|
{
|
|
id: '2',
|
|
type: 'custom',
|
|
position: { x: 250, y: 320 },
|
|
},
|
|
{
|
|
id: '3',
|
|
type: 'custom',
|
|
position: { x: 40, y: 300 },
|
|
},
|
|
{
|
|
id: '4',
|
|
type: 'custom',
|
|
position: { x: 300, y: 0 },
|
|
},
|
|
])
|
|
|
|
onConnect(addEdges)
|
|
</script>
|
|
|
|
<template>
|
|
<div style="height: 100vh">
|
|
<VueFlow
|
|
v-model="elements"
|
|
:elevate-nodes-on-select="false"
|
|
class="vue-flow-basic-example"
|
|
:default-zoom="1.5"
|
|
:default-edge-options="defaultEdgeOptions"
|
|
:min-zoom="0.2"
|
|
:max-zoom="4"
|
|
>
|
|
<Background pattern-color="#aaa" :gap="8" />
|
|
|
|
<MiniMap />
|
|
|
|
<Controls />
|
|
|
|
<template #node-custom="props">
|
|
<CustomNode :id="props.id" />
|
|
</template>
|
|
|
|
<template #edge-floating="fProps">
|
|
<FloatingEdge v-bind="fProps" />
|
|
</template>
|
|
|
|
<template #connection-line="cProps">
|
|
<CustomConnectionLine v-bind="cProps" />
|
|
</template>
|
|
</VueFlow>
|
|
</div>
|
|
</template>
|