Does this library have an event that triggers on node deletion?

[DoaaRadwan]

Hi,

Is there an event that triggers on node deletion, pressing the backspace and whatever the delete key is set to? like onNodeDelete or something similar.

We need to implement additional logic on deletion, so currently we have the delete key disabled and rely on a custom delete button on our modals but it would be really helpful to the users to see the same behaviour of deletion whether they press the keyboard key or click the custom delete button.

[bcakmakoglu]

There is an event for changes, called onNodesChange which will receive an array of changes as an arg.

const { onNodesChange } = useVueFlow()

onNodesChange(changes => {
	changes.forEach(change => {
		console.log(change.type) // 'position' | 'add' | 'remove' | 'select' | 'dimensions'
	})
})

[bcakmakoglu]

Store the change and apply it, that'd be the easiest way I'd say.

Or store the node id that was supposed to be deleted and then call removeNodes(nodeId)

[bcakmakoglu]

Something like this

openDeleteModal({
	onConfirm: () => applyNodeChanges([change])
})

[DoaaRadwan]

This does work and I have progresses a bit using it however it's really difficult when applying for nodes that has nested nodes inside and you would want the confirmation modal to open for the selected node one and if confirmed you would delete all nodes inside - but since the way onNodesChange works, it will loop through all nodes inside.

I think I will just disable the delete via backspace for now till I figure a better way to deal with it.

Thank you for your support !

[DoaaRadwan]

I think this problem can be solved by applying :delete-key-code="false" and then triggering our logic on a keypress of backspace if there is an event that fires on a that keypress

[DoaaRadwan]

I have managed to get it to partially work using this

<template>
 <div @keyup.delete="openDeleteModalOnKey" class="dndflow" @drop="onDrop">
    <VueFlow
      :class="{ dark }"
      :default-zoom="1"
      :elevate-edges-on-select="true"
      :delete-key-code="false"
      :min-zoom="0.2"
      :max-zoom="4"
      class="basicflow"
      fit-view-on-init
      @dragover="onDragOver"
    >
    </VueFlow>
 </div>
</template> 

<script setup>
onEdgeClick(({ edge }) => {
  selectedEdge = edge;
});

onNodeClick(({ node }) => {
  selectedNode = node;
});

const openDeleteModalOnKey = () => {
  toggleModalVisibility("deleteModal");
};

</script>

it's working as expected for nodes, still trying to get it to work on edges as the keyup-delete event is not firing for edges (at least the ones inside a parent node)