ExternalObjectsDropped subject got empty count 0

this is a very tricky behavior puzzled me two days.
ExternalObjectsDropped event, the subject got empty or count is 0.
because I need to identify diagram objects, add diagramKey property to the diagram.

diagramA.diagramKey = “MxPSYQYxLwJvtifq9TldiNNNNNNNNNNNNNNNNN”;
function ExternalObjectsDropped(e) {
e.subject.each(function (node) {
console.log(“>>Node<<”);
});
console.log(“>>ExternalObjectsDropped<<”);
}

diagramA.addDiagramListener(“ExternalObjectsDropped”, ExternalObjectsDropped);

// change key and load new json
$(“#bbb”).click(function(){
diagramA.diagramKey = “MxPSYQYxLwJvtifq9Tld/iXHvOYB7dYQ0iZ44smiNNNNNNNNNNNNNNNNN/sssdfasdf”;
diagramB.model = go.Model.fromJson(diagramJSON);
});

after load new JSON e.subject.count == 0 and don’t enter the loop.
it is shape dropped success, but e.subject got empty! ,
if you write simple code with 2 diagrams to test this not occur. my real code is too big not convenient to paste here.

then I add this code to my script, everything work fine.

var div = diagramA.div;
diagramA.div = null;
diagramA.div = div;

any suggestions?

I’m sorry, but I cannot tell what might be wrong. You should not have to re-initialize the diagram with the HTML DIV element. I would suggest that you review all of the event listeners that you have registered and make sure they get setup only once.

this is screen capture screen20200112 - YouTube
at the first diagram it works well. and I change to the second diagram, the diagram model reloads new second JSON from server. also, change the diagramKey property. then dropped subject count is 0, i can’t get the dropped node. why it the first time ok? and load from server new other JSON is changing the event Behavior, or add diagramKey property to diagram object is not good?
now I only can do, diagram.div = null; diagram.div = div; this.
I did not re-initialize every time, it calls once at the end of all initialize.

I am always thinking how it could be, you see in the video object already dropped, evet has occurred but subject is null or empty!

“diagramKey” is not a defined property of the Diagram class, so setting it can have no effect on any GoJS code. But it might be affecting the behavior of your code. If you do not set that property, does a drag-and-drop work after loading a new model without resetting Diagram.div?

if I set diagramKey back to the previous value it works no problem. if don’t use diagramKey also work.
but why just a property effect to event param ?
I need diagramKey because no this key I can’t identify which diagram is what for.
by the way Diagram class have some key or some ID to identify the instance?

Usually one can identify a Diagram via its Diagram.div’s “id”.

But adding a property to a Diagram should work too. The problem must be in your code somewhere. Search for all uses of that property.

wow, it is good information.
when I load new diagram JSON to diagram and change the div id ? , I think is not best idea. but make a Map to keep diagramID and link to div id is an idea, but I will cost me to change a lot code. diagramKey everywhere on the code.

var diagramDiv = diagram.div;
diagram.div = null;
diagram.div = diagramDiv;

what does this code mean? why after I execute this everything works well.

That code disassociates the Diagram instance from the “host” HTMLDivElement in the DOM, and then reassociates them. That includes unregistering various DOM event listeners and then reregistering them. That is why I suggested that you review all of your code that add or removes any listeners, as well as reviewing what they do.

I checked out all listeners I did not remove any listeners, and double add them. It is annoying me two days, I already did almost all possible case I could imagine. After re-attaching the div again just once end of the code anything work, change diagramKey not effect any event and e.subject.

the tricky thing is I wrote simple code, set diagramKey property to 2 diagrams, and drop graph object from one to another, always work fine without problem. but on my long code it happens. so, hard to say diagramKey is the only reason.

On the this page say, it can set diagram.div to null and re-attach it.
https://gojs.net/latest/intro/replacingDeleting.html

Yes, you can. But clearly it seems that doing so is only covering up the actual bug.

yes it is, Now , I completely don’t use diagramKey, use div.id to identify diagram instance. Already rewrite all the code but it still occur, so problem is in the other place. I will continue to debug this.

I found when dropped the selection state gone. the dropped object is unselected!, maybe it is the reason. but I still can’t figure out how to fix it.
here is the capture. 13%20PM

What are all of the DOM event listeners that you have declared on the DIV element? What do they do? You should not be touching any elements inside the DIV – those belong to the Diagram implementation.

What are all of the DiagramEvent listeners and event handlers on Diagram that you have declared, and what do they do?

I got the answer, it is event problem, complicated, simply to say I need to now what diagram is on editing, so I set focus event on canvas, and this code has a bug to set node to unselected. ExternalObjectsDropped e.subject will empty.

It took such a long time to figure it out. (^ ^)
but it was mostly my fault, but still wonder why e.subject is related to selections.

Thank you so much walter ! 😃

Yes, as documented, you should not be touching the HTMLCanvasElement (or anything else that the GoJS implementation might create) within the HTMLDivElement that you give to GoJS.

If you want to get a focus event, use the “GainedFocus” DiagramEvent: GoJS Events -- Northwoods Software