88 lines
2.6 KiB
Vue
88 lines
2.6 KiB
Vue
<script lang="ts" setup>
|
|
import ZoomPane from '../ZoomPane/ZoomPane.vue'
|
|
import { createHooks, useHooks } from '../../store'
|
|
import { useVueFlow } from '../../composables'
|
|
import type { FlowProps } from '../../types/flow'
|
|
import useWatch from './watch'
|
|
|
|
const props = withDefaults(defineProps<FlowProps>(), {
|
|
snapToGrid: undefined,
|
|
onlyRenderVisibleElements: undefined,
|
|
edgesUpdatable: undefined,
|
|
nodesConnectable: undefined,
|
|
nodesDraggable: undefined,
|
|
elementsSelectable: undefined,
|
|
selectNodesOnDrag: undefined,
|
|
preventScrolling: undefined,
|
|
zoomOnScroll: undefined,
|
|
zoomOnPinch: undefined,
|
|
zoomOnDoubleClick: undefined,
|
|
panOnScroll: undefined,
|
|
paneMoveable: undefined,
|
|
applyDefault: undefined,
|
|
fitViewOnInit: undefined,
|
|
})
|
|
const emit = defineEmits([...Object.keys(createHooks()), 'update:modelValue', 'update:elements', 'update:edges', 'update:nodes'])
|
|
|
|
const {
|
|
id,
|
|
store,
|
|
hooks,
|
|
applyDefault,
|
|
setElements,
|
|
setEdges,
|
|
setNodes,
|
|
getNodeTypes,
|
|
getEdgeTypes,
|
|
onNodesChange,
|
|
onEdgesChange,
|
|
applyNodeChanges,
|
|
applyEdgeChanges,
|
|
nodes: storedNodes,
|
|
edges: storedEdges,
|
|
state,
|
|
} = useVueFlow(props)
|
|
useHooks(hooks.value, emit)
|
|
const { modelValue, nodes, edges } = useVModels(props, emit)
|
|
|
|
const foo = store.nodes
|
|
if (applyDefault.value) {
|
|
onNodesChange(applyNodeChanges)
|
|
onEdgesChange(applyEdgeChanges)
|
|
}
|
|
if (props.modelValue && !storedNodes.value.length) setElements(props.modelValue)
|
|
if (props.nodes && !storedNodes.value.length) setNodes(props.nodes)
|
|
if (props.edges && !storedEdges.value.length) setEdges(props.edges)
|
|
|
|
if (modelValue && modelValue.value) modelValue.value = [...store.nodes, ...store.edges]
|
|
if (nodes && nodes.value) nodes.value = store.nodes
|
|
if (edges && edges.value) edges.value = store.edges
|
|
|
|
onMounted(() => useWatch({ modelValue, nodes, edges }, props, store))
|
|
</script>
|
|
<script lang="ts">
|
|
export default {
|
|
name: 'VueFlow',
|
|
}
|
|
</script>
|
|
<template>
|
|
<div class="vue-flow">
|
|
<ZoomPane :key="`renderer-${id}`">
|
|
<template v-for="nodeName of Object.keys(getNodeTypes)" #[`node-${nodeName}`]="nodeProps" :key="`node-${nodeName}-${id}`">
|
|
<slot :name="`node-${nodeName}`" v-bind="nodeProps" />
|
|
</template>
|
|
<template v-for="edgeName of Object.keys(getEdgeTypes)" #[`edge-${edgeName}`]="edgeProps" :key="`edge-${edgeName}-${id}`">
|
|
<slot :name="`edge-${edgeName}`" v-bind="edgeProps" />
|
|
</template>
|
|
<template #connection-line="customConnectionLineProps">
|
|
<slot name="connection-line" v-bind="customConnectionLineProps" />
|
|
</template>
|
|
<slot name="zoom-pane" />
|
|
</ZoomPane>
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
<style>
|
|
@import '../../style.css';
|
|
</style>
|