#1452 closed defect (invalid)
Drag and Drop Slowness: dojo.dnd.HtmlDragManager's dropTargets array many times too large
Reported by: | guest | Owned by: | psowden |
---|---|---|---|
Priority: | high | Milestone: | 0.9 |
Component: | DnD | Version: | 0.3 |
Keywords: | Cc: | ||
Blocked By: | Blocking: |
Description
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);
},
Attachments (1)
Change History (3)
comment:1 Changed 14 years ago by
Milestone: | → 0.5 |
---|
Changed 14 years ago by
Attachment: | callstack.jpg added |
---|
comment:2 Changed 14 years ago by
Resolution: | → invalid |
---|---|
Status: | new → closed |
tree+dnd being completely rewritten for 0.9
Image of the callstack.