add option to delete the selected element

[AmosSzust]

Hi

Like we have this.vueFlowInstance.getSelectedElements, please add this.vueFlowInstance.deleteSelectedElements
Thanks for a wonderful component.

[bcakmakoglu]

You'll be shocked to hear that removeSelectedElements exists.

[AmosSzust]

I'm not shocked, I know removeSelectedElements, which unselect selected elements, exists.
I'm shocked that this.vueFlowInstance.deleteSelectedElements that should delete selected element(s), doesn't exist :)

[bcakmakoglu]

You weren't really specific in your opening post.

You can just do removeNodes(getSelectedNodes.value).
Connected edges of a node are removed as well using removeNodes

type RemoveNodes = (
  nodes: (string | Node) | (Node | string)[] | ((nodes: GraphNode[]) => (string | Node) | (Node | string)[]),
  removeConnectedEdges?: boolean,
  removeChildren?: boolean,
) => void

An extra wrapper just do to removeNodes(getSelectedNodes.value) for you seems highly unnecessary to me.

[AmosSzust]

Thanks for this. 2 things:

1. The advantage of selectedElements is that it allows you to delete either a node or a connection line, if I understand correctly, removeNodes only removes selected nodes, what if the user selected a connection line?
2. I have the same issue as I reported here: getSelectedElements typescript issue? #1229 , see screenshot. If I view this.vueFlowInstance.getSelectedNodes, I see the selected node, if I view this.vueFlowInstance.getSelectedNodes.value it gives me undefined and obviously fails.

Thank you for a magnificent component!

[bcakmakoglu]

You'd be better off handling both element types separately instead of using a single handler for both types (nodes/edges).
For one, the concept of a unified elements array (which doesn't even exist in the state under the hood) is gonna be dropped in the next major anyway, so there won't be an introduction of a helper function like removeElements and I'll start deprecating these element related APIs soon 😅

So in your case sth like this

function deleteSelectedElements() {
	const selectedNodes = getSelectedNodes.value;

	const selectedEdges = getSelectedEdges.value;

	if (selectedNodes.length) {
		removeNodes(selectedNodes)
	}

	if (selectedEdges.length) {
		removeEdges(selectedEdges)
	}
}

[AmosSzust]

Thanks for the tip, what about the issue from the screenshot?
If I do useVueFlow().getSelectedNodes.value, this is what I get and the result is an empty array while there is one selected node.