fix(nodes): pass node as prop to wrapper
# What's changed? * instead of computed getter use prop to pass node * avoids error when node gets deleting from custom node with `removeNodes`
This commit is contained in:
@@ -1,6 +1,7 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
import { useVModel } from '@vueuse/core'
|
||||||
import { useDrag, useNodeHooks, useVueFlow } from '../../composables'
|
import { useDrag, useNodeHooks, useVueFlow } from '../../composables'
|
||||||
import type { NodeComponent, SnapGrid, XYZPosition } from '../../types'
|
import type { GraphNode, NodeComponent, SnapGrid, XYZPosition } from '../../types'
|
||||||
import { NodeId } from '../../context'
|
import { NodeId } from '../../context'
|
||||||
import { getConnectedEdges, getHandleBounds, getXYZPos, handleNodeClick } from '../../utils'
|
import { getConnectedEdges, getHandleBounds, getXYZPos, handleNodeClick } from '../../utils'
|
||||||
|
|
||||||
@@ -12,6 +13,7 @@ const { id, type, name, draggable, selectable, connectable, snapGrid, ...props }
|
|||||||
snapGrid?: SnapGrid
|
snapGrid?: SnapGrid
|
||||||
type: NodeComponent | Function | Object | false
|
type: NodeComponent | Function | Object | false
|
||||||
name: string
|
name: string
|
||||||
|
node: GraphNode
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
provide(NodeId, id)
|
provide(NodeId, id)
|
||||||
@@ -31,7 +33,8 @@ const {
|
|||||||
onUpdateNodeInternals,
|
onUpdateNodeInternals,
|
||||||
} = $(useVueFlow())
|
} = $(useVueFlow())
|
||||||
|
|
||||||
const node = $computed(() => getNode(id)!)
|
const node = $(useVModel(props, 'node'))
|
||||||
|
|
||||||
const parentNode = $computed(() => (node.parentNode ? getNode(node.parentNode) : undefined))
|
const parentNode = $computed(() => (node.parentNode ? getNode(node.parentNode) : undefined))
|
||||||
|
|
||||||
const nodeElement = ref()
|
const nodeElement = ref()
|
||||||
|
|||||||
@@ -64,6 +64,7 @@ export default {
|
|||||||
:draggable="draggable(node.draggable)"
|
:draggable="draggable(node.draggable)"
|
||||||
:selectable="selectable(node.selectable)"
|
:selectable="selectable(node.selectable)"
|
||||||
:connectable="connectable(node.connectable)"
|
:connectable="connectable(node.connectable)"
|
||||||
|
:node="node"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user