Drag and Drop Slowness: dojo.dnd.HtmlDragManager's dropTargets array many times too large

[guest]

Hello,

I have stumbled across something I find rather funny in the drag and drop code which I noticed when I was trying to find out why the DND was so slow in an application I'm working on.

To explain this issue to you, I added some debug printouts in the DND code and when I loaded tests/widget/tree/test_Tree_4.html (for example) I got these messages:

DEBUG: TreeDragAndDrop?.js: dojo.dnd.TreeDropTarget?() ==> dojo.dnd.HtmlDropTarget?.apply() DEBUG: DragAndDrop?.js: dojo.dnd.DropTarget? ==> registerDropTarget() DEBUG: HtmlDragManager?.js: registerDropTarget: inserting node with widgetId = "TreeNode_1" DEBUG: DragAndDrop?.js: dojo.dnd.DropTarget? <== registerDropTarget() DEBUG: HtmlDragAndDrop?.js: dojo.dnd.HtmlDropTarget? ==> dojo.dnd.DropTarget?.call() DEBUG: DragAndDrop?.js: dojo.dnd.DropTarget? ==> registerDropTarget() DEBUG: HtmlDragManager?.js: registerDropTarget: inserting node with widgetId = "TreeNode_1" DEBUG: DragAndDrop?.js: dojo.dnd.DropTarget? <== registerDropTarget() DEBUG: HtmlDragAndDrop?.js: dojo.dnd.HtmlDropTarget? <== dojo.dnd.DropTarget?.call() DEBUG: HtmlDragAndDrop?.js: dojo.dnd.HtmlDropTarget? ==> dojo.dnd.DropTarget?.call() DEBUG: DragAndDrop?.js: dojo.dnd.DropTarget? ==> registerDropTarget() DEBUG: HtmlDragManager?.js: registerDropTarget: inserting node with widgetId = "TreeNode_1" DEBUG: DragAndDrop?.js: dojo.dnd.DropTarget? <== registerDropTarget() DEBUG: HtmlDragAndDrop?.js: dojo.dnd.HtmlDropTarget? <== dojo.dnd.DropTarget?.call() DEBUG: TreeDragAndDrop?.js: dojo.dnd.TreeDropTarget?() <== dojo.dnd.HtmlDropTarget?.apply() DEBUG: TreeDragAndDrop?.js: dojo.dnd.TreeDropTarget?() ==> dojo.dnd.HtmlDropTarget?.apply() DEBUG: DragAndDrop?.js: dojo.dnd.DropTarget? ==> registerDropTarget() DEBUG: HtmlDragManager?.js: registerDropTarget: inserting node with widgetId = "TreeNode_3" DEBUG: DragAndDrop?.js: dojo.dnd.DropTarget? <== registerDropTarget() DEBUG: HtmlDragAndDrop?.js: dojo.dnd.HtmlDropTarget? ==> dojo.dnd.DropTarget?.call() DEBUG: DragAndDrop?.js: dojo.dnd.DropTarget? ==> registerDropTarget() DEBUG: HtmlDragManager?.js: registerDropTarget: inserting node with widgetId = "TreeNode_3" DEBUG: DragAndDrop?.js: dojo.dnd.DropTarget? <== registerDropTarget() DEBUG: HtmlDragAndDrop?.js: dojo.dnd.HtmlDropTarget? <== dojo.dnd.DropTarget?.call() DEBUG: HtmlDragAndDrop?.js: dojo.dnd.HtmlDropTarget? ==> dojo.dnd.DropTarget?.call() DEBUG: DragAndDrop?.js: dojo.dnd.DropTarget? ==> registerDropTarget() DEBUG: HtmlDragManager?.js: registerDropTarget: inserting node with widgetId = "TreeNode_3" DEBUG: DragAndDrop?.js: dojo.dnd.DropTarget? <== registerDropTarget() DEBUG: HtmlDragAndDrop?.js: dojo.dnd.HtmlDropTarget? <== dojo.dnd.DropTarget?.call() DEBUG: TreeDragAndDrop?.js: dojo.dnd.TreeDropTarget?() <== dojo.dnd.HtmlDropTarget?.apply()

[Many more of these...]

==> means calling a function. <== means returning from a call.

What is happening is that in HtmlDragManager?.js's registerDropTarget() the same node gets inserted more than once. In this case with tests/widget/tree/test_Tree_4.html, the registerDropTarget() function was called three times with the same node.

It seems like the flow of execution goes something like this:

TreeDragAndDrop?.js: registerDNDNode()

| +-- TreeDragAndDrop?.js: dojo.dnd.TreeDropTarget?()

| +-- DragAndDrop?.js: dojo.dnd.DropTarget?() | | | +-- HtmlDragManager?.js: registerDropTarget() | +-- HtmlDragAndDrop?.js: dojo.dnd.HtmlDropTarget?()

| +-- DragAndDrop?.js: dojo.dnd.DropTarget?()

| +-- HtmlDragManager?.js: registerDropTarget()

This, I think, causes dojo.dnd.HtmlDragManager?'s dropTargets array to be three times as large as is necessary which makes the DND slow.

My head is spinning but my guess is that there is an issue with inheritance here.

For now I am thinking of modifying the registerDropTarget() function to look something like this:

registerDropTarget: function(dt){

if (dt.treeNode) {

var t = this.dropTargets; for (var i = 0; i < t.length; i++) {

if (t[i].treeNode && t[i].treeNode.widgetId == dt.treeNode.widgetId) {

return;

}

}

} this.dropTargets.push(dt);

},

[guest]

Image of the callstack.

[Adam Peller]

tree+dnd being completely rewritten for 0.9