Programmatically deleting a node after its dragged

GoJS
1

This is part two of my previous question which I figured out. This part however I’m still stumped.

I have a diagram listener, “ExternalObjectsDropped”, that is called when I drag a node into my diagram from a Palette next to it…

In response to that newly dragged node, I’ve created a new node and I want to delete the dragged node. But using diagram.model.removeNodeData causes errors: “Do not replace a Diagram.model while a transaction is in progress.”

Essentially, I just want this first node for representative rendering purposes as the node is being dragged from the palette onto the diagram. Once the node is dropped, I’d like to actually replace it with a different node type.

Is there anyway to prevent the dragged node from actually being created in the data model but still create the other node type in its place?

2

I just tried this:

          "ExternalObjectsDropped": function(e) {
            var loc = e.diagram.selection.first().location;
            e.diagram.removeParts(e.diagram.selection);
            e.diagram.model.addNodeData({ text: "replacement", color: "red", location: go.Point.stringify(loc) });
          },

and it worked well to remove whatever was dropped and add a single replacement node at the same location as the first dropped node.

Or are you looking to do something else?

3

Walter, thanks for the response. Unfortunately removeParts didn’t work for me. I’m still getting the following error. But everything else is working as expected.

"Uncaught Error: Collection was modified during iteration: Set(Part)#255
Perhaps you should iterate over a copy of the collection,
or you could collect items to be removed from the collection after the iteration."

Here’s my function:
onExternalObjectsDropped(e) {
var mousePos = e.diagram.lastInput.viewPoint;

for (var it = e.diagram.selection.iterator; it.next(); ) {
  var part = it.value;  // part is now a Node or a Group or a Link or maybe a simple Part
  if (part instanceof go.Node) { 
    if (part.data.key.startsWith("MY_NODE")) {
      const posHandleStart = part.position.x + ' ' + part.position.y;
      const posHandleEnd = part.position.x + ' ' + (part.position.y + 61);
      console.log(e);

      // Delete the dragged, temp node
      e.diagram.removeParts(e.diagram.selection);

      // Create two new keys for the line handles
      var keyHandleStart = My_new_handle_start;
      var keyHandleEnd = "My_new_handle_end";

      // Add the actual Line handle data
      e.diagram.model.addNodeData( 
        { key: keyHandleStart, pos: posHandleStart, start: true, category: "handle" }
      )
      e.diagram.model.addNodeData( 
        { key: keyHandleEnd, pos: posHandleEnd, category: "handle" }
      );

      // Add the link between the two handles
      e.diagram.model.addLinkData( 
        { from: keyHandleStart, to: keyHandleEnd, category: "line" },
      );
    }
  }
}

}

4

The error message is correct, as are its suggestions for how to fix the problem. Your loop is operating on the collection of selected parts while repeatedly removing all of the selected parts. I suggest you remove nothing until after your loop over the selection.

5

Walter, I totally overlooked that I was looping through the selection. I added my nodes to be deleted to a list to delete after the loop has completed, This solved my problem.

Thanks again.