108 lines
2.9 KiB
Vue
108 lines
2.9 KiB
Vue
<script lang="ts" setup>
|
|
import { NodeWrapper } from '../../components'
|
|
import type { GraphNode, HandleConnectable, NodeComponent } from '../../types'
|
|
|
|
const slots = inject(Slots)
|
|
|
|
const {
|
|
nodesDraggable,
|
|
nodesFocusable,
|
|
elementsSelectable,
|
|
nodesConnectable,
|
|
getNodes,
|
|
getNodeTypes,
|
|
updateNodeDimensions,
|
|
emits,
|
|
} = $(useVueFlow())
|
|
|
|
const draggable = (d?: boolean) => (typeof d === 'undefined' ? nodesDraggable : d)
|
|
const selectable = (s?: boolean) => (typeof s === 'undefined' ? elementsSelectable : s)
|
|
const connectable = (c?: HandleConnectable) => (typeof c === 'undefined' ? nodesConnectable : c)
|
|
const focusable = (f?: boolean) => (typeof f === 'undefined' ? nodesFocusable : f)
|
|
|
|
const resizeObserver = ref<ResizeObserver>()
|
|
|
|
onMounted(() => {
|
|
const readyNodes = []
|
|
let initialized = false
|
|
|
|
const isReady = (id: string) => {
|
|
readyNodes.push(id)
|
|
|
|
if (readyNodes.length === getNodes.length) {
|
|
nextTick(() => {
|
|
initialized = true
|
|
emits.nodesInitialized()
|
|
})
|
|
}
|
|
}
|
|
|
|
resizeObserver.value = new ResizeObserver((entries) => {
|
|
const updates = entries.map((entry: ResizeObserverEntry) => {
|
|
const id = entry.target.getAttribute('data-id') as string
|
|
// if nodes initialized hasn't been emitted yet, add the node to the readyNodes array
|
|
if (!initialized) isReady(id)
|
|
|
|
return {
|
|
id,
|
|
nodeElement: entry.target as HTMLDivElement,
|
|
}
|
|
})
|
|
|
|
updateNodeDimensions(updates)
|
|
})
|
|
})
|
|
|
|
onBeforeUnmount(() => resizeObserver.value?.disconnect())
|
|
|
|
const getType = (type?: string, template?: GraphNode['template']) => {
|
|
const name = type || 'default'
|
|
let nodeType = template ?? getNodeTypes[name]
|
|
const instance = getCurrentInstance()
|
|
|
|
if (typeof nodeType === 'string') {
|
|
if (instance) {
|
|
const components = Object.keys(instance.appContext.components)
|
|
if (components && components.includes(name)) {
|
|
nodeType = resolveComponent(name, false) as NodeComponent
|
|
}
|
|
}
|
|
}
|
|
if (typeof nodeType !== 'string') return nodeType
|
|
|
|
const slot = slots?.[`node-${name}`]
|
|
if (!slot?.({})) {
|
|
warn(`Node type "${type}" not found and no node-slot detected. Using fallback type "default".`)
|
|
return false
|
|
}
|
|
|
|
return slot
|
|
}
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export default {
|
|
name: 'Nodes',
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="vue-flow__nodes vue-flow__container">
|
|
<template v-if="resizeObserver">
|
|
<NodeWrapper
|
|
v-for="node of getNodes"
|
|
:id="node.id"
|
|
:key="node.id"
|
|
:resize-observer="resizeObserver"
|
|
:type="getType(node.type, node.template)"
|
|
:name="node.type || 'default'"
|
|
:draggable="draggable(node.draggable)"
|
|
:selectable="selectable(node.selectable)"
|
|
:connectable="connectable(node.connectable)"
|
|
:focusable="focusable(node.focusable)"
|
|
:node="node"
|
|
/>
|
|
</template>
|
|
</div>
|
|
</template>
|