When deleting a node, the neighboring edge deletes about vue-flow HOT 11 CLOSED

Can you add a sandbox as well?
Here's a template: https://codesandbox.io/s/frosty-minsky-20b0ge

That would be very helpful thank you :)

from vue-flow.

Using your instructions doesn't yield the results you describe.
All the edges seem to be deleted properly.

As mentioned, please provide a sandbox reproduction please :)

from vue-flow.

For some reason i have an error during running the sandbox, so i just created the repository and recorded the video.
Repo: https://github.com/insssomniac/vue-flow-example , just clone it, install and run npm run serve
Video: https://drive.google.com/file/d/1qvd8SP2lU--ZHR3uxPgONOPWZ3L3q503/view?usp=sharing

To create a node, just drag&drop it from the top pane
To remove a node, dbl-click to it

from vue-flow.

Mh....I am using your repo and can't seem to be able to reproduce the issue as in your video.

Are there any specific logs when the issue appears?
What browser are you using?

from vue-flow.

Very strange. I'm on Chrome Version 106.0.5249.61 (Official Build) (64-bit) also tried on Firefox, and had the same issue. Also my colleague faced to the same issue
I recorded again with console opened, maybe it will help
vue-flow-error-2nd.webm

from vue-flow.

I can't view the video you linked, can you link it in a different way? 😄

from vue-flow.

Also can you make sure that your browser isn't somehow overwriting the css rule for .vue-flow__edges?

It needs to have the overflow rule

.vue-flow__edges {
  overflow: visible;
}

from vue-flow.

If you just open the video in the new tab, it doesn't show? :))
prev. video, from post above (2): https://drive.google.com/file/d/1fcfoT21kOW3LFSsh6nvCAYat2Hrxqfb3/view?usp=sharing

3-rd video, i showed here elements list, and it seems edge really disapearing https://drive.google.com/file/d/1bl7xeJh-rqbzBMbrKaepwP3Y4j5sT1VR/view?usp=sharing

from vue-flow.

@insssomniac

Replace the following code:

const {
  onNodeDoubleClick,
  onNodeClick,
  onPaneClick,
  onEdgeClick,
  toObject,
  onConnect,
  addNodes,
  addEdges,
  getSelectedNodes,
  applyEdgeChanges,
  applyNodeChanges,
  project
} = useVueFlow()

// ...

onNodeDoubleClick((e) => {
  if (confirm('Delete node?')) {
    applyNodeChanges([{type: 'remove', id: e.node.id}])
  }
})

onEdgeClick((e) => {
  if (confirm('Delete edge?')) {
    applyEdgeChanges([{ type: 'remove', id: e.edge.id }])
  }
})

with

const {
  onNodeDoubleClick,
  onNodeClick,
  onPaneClick,
  onEdgeClick,
  toObject,
  onConnect,
  addNodes,
  addEdges,
  getSelectedNodes,
  removeEdges,
  removeNodes,
  project
} = useVueFlow()

onNodeDoubleClick((e) => {
  if (confirm('Delete node?')) {
		removeNodes([e.node])
  }
})

onEdgeClick((e) => {
  if (confirm('Delete edge?')) {
    removeEdges([e.edge])
  }
})

In most cases you should not be using applyNodeChanges or applyEdgeChanges yourself and if you do then only to intercept the change handlers (for some possible validation for example).
Instead use the appropriate actions for that like addNodes or removeNodes etc. which will emit these changes through the proper channels and you should not have any issues as seen in the clips.

What happens here is that you remove the node by applying the change yourself, thus Vue Flow never checks if any edges should be removed as well.
After the node gets removed, the edge is seen as "orphaned" and there will be an attempt to remove it.
That apparently doesn't work properly in this case, which I will fix, and instead it removes an edge at another index position.

Anyway, these issues don't appear when you use the actions instead :)

from vue-flow.

@bcakmakoglu removeNodes([e.node]) instead applyNodeChanges solved the issue, thanks!
I don't remeber why i decided to use applyNodeChanges, but i'll replace as you said for nodes and for edges.

from vue-flow.

@insssomniac
With 0.4.41 it should work with applyEdgeChanes as well - you should still use removeEdges instead though 😄

from vue-flow.