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:
braks
2022-08-09 22:49:41 +02:00
committed by Braks
parent 3255f95df9
commit 6221663448
2 changed files with 6 additions and 2 deletions
@@ -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>