source/widgets/tree/TreeDropZone.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 /**\r
  10  * @class Ext.tree.TreeDropZone\r
  11  * @extends Ext.dd.DropZone\r
  12  * @constructor\r
  13  * @param {String/HTMLElement/Element} tree The {@link Ext.tree.TreePanel} for which to enable dropping\r
  14  * @param {Object} config\r
  15  */\r
  16 if(Ext.dd.DropZone){\r
  17     \r
  18 Ext.tree.TreeDropZone = function(tree, config){\r
  19     /**\r
  20      * @cfg {Boolean} allowParentInsert\r
  21      * Allow inserting a dragged node between an expanded parent node and its first child that will become a\r
  22      * sibling of the parent when dropped (defaults to false)\r
  23      */\r
  24     this.allowParentInsert = false;\r
  25     /**\r
  26      * @cfg {String} allowContainerDrop\r
  27      * True if drops on the tree container (outside of a specific tree node) are allowed (defaults to false)\r
  28      */\r
  29     this.allowContainerDrop = false;\r
  30     /**\r
  31      * @cfg {String} appendOnly\r
  32      * True if the tree should only allow append drops (use for trees which are sorted, defaults to false)\r
  33      */\r
  34     this.appendOnly = false;\r
  35     Ext.tree.TreeDropZone.superclass.constructor.call(this, tree.innerCt, config);\r
  36     /**\r
  37     * The TreePanel for this drop zone\r
  38     * @type Ext.tree.TreePanel\r
  39     * @property\r
  40     */\r
  41     this.tree = tree;\r
  42     /**\r
  43     * Arbitrary data that can be associated with this tree and will be included in the event object that gets\r
  44     * passed to any nodedragover event handler (defaults to {})\r
  45     * @type Ext.tree.TreePanel\r
  46     * @property\r
  47     */\r
  48     this.dragOverData = {};\r
  49     // private\r
  50     this.lastInsertClass = "x-tree-no-status";\r
  51 };\r
  52 \r
  53 Ext.extend(Ext.tree.TreeDropZone, Ext.dd.DropZone, {\r
  54     /**\r
  55      * @cfg {String} ddGroup\r
  56      * A named drag drop group to which this object belongs.  If a group is specified, then this object will only\r
  57      * interact with other drag drop objects in the same group (defaults to 'TreeDD').\r
  58      */\r
  59     ddGroup : "TreeDD",\r
  60 \r
  61     /**\r
  62      * @cfg {String} expandDelay\r
  63      * The delay in milliseconds to wait before expanding a target tree node while dragging a droppable node\r
  64      * over the target (defaults to 1000)\r
  65      */\r
  66     expandDelay : 1000,\r
  67 \r
  68     // private\r
  69     expandNode : function(node){\r
  70         if(node.hasChildNodes() && !node.isExpanded()){\r
  71             node.expand(false, null, this.triggerCacheRefresh.createDelegate(this));\r
  72         }\r
  73     },\r
  74 \r
  75     // private\r
  76     queueExpand : function(node){\r
  77         this.expandProcId = this.expandNode.defer(this.expandDelay, this, [node]);\r
  78     },\r
  79 \r
  80     // private\r
  81     cancelExpand : function(){\r
  82         if(this.expandProcId){\r
  83             clearTimeout(this.expandProcId);\r
  84             this.expandProcId = false;\r
  85         }\r
  86     },\r
  87 \r
  88     // private\r
  89     isValidDropPoint : function(n, pt, dd, e, data){\r
  90         if(!n || !data){ return false; }\r
  91         var targetNode = n.node;\r
  92         var dropNode = data.node;\r
  93         // default drop rules\r
  94         if(!(targetNode && targetNode.isTarget && pt)){\r
  95             return false;\r
  96         }\r
  97         if(pt == "append" && targetNode.allowChildren === false){\r
  98             return false;\r
  99         }\r
 100         if((pt == "above" || pt == "below") && (targetNode.parentNode && targetNode.parentNode.allowChildren === false)){\r
 101             return false;\r
 102         }\r
 103         if(dropNode && (targetNode == dropNode || dropNode.contains(targetNode))){\r
 104             return false;\r
 105         }\r
 106         // reuse the object\r
 107         var overEvent = this.dragOverData;\r
 108         overEvent.tree = this.tree;\r
 109         overEvent.target = targetNode;\r
 110         overEvent.data = data;\r
 111         overEvent.point = pt;\r
 112         overEvent.source = dd;\r
 113         overEvent.rawEvent = e;\r
 114         overEvent.dropNode = dropNode;\r
 115         overEvent.cancel = false;  \r
 116         var result = this.tree.fireEvent("nodedragover", overEvent);\r
 117         return overEvent.cancel === false && result !== false;\r
 118     },\r
 119 \r
 120     // private\r
 121     getDropPoint : function(e, n, dd){\r
 122         var tn = n.node;\r
 123         if(tn.isRoot){\r
 124             return tn.allowChildren !== false ? "append" : false; // always append for root\r
 125         }\r
 126         var dragEl = n.ddel;\r
 127         var t = Ext.lib.Dom.getY(dragEl), b = t + dragEl.offsetHeight;\r
 128         var y = Ext.lib.Event.getPageY(e);\r
 129         var noAppend = tn.allowChildren === false || tn.isLeaf();\r
 130         if(this.appendOnly || tn.parentNode.allowChildren === false){\r
 131             return noAppend ? false : "append";\r
 132         }\r
 133         var noBelow = false;\r
 134         if(!this.allowParentInsert){\r
 135             noBelow = tn.hasChildNodes() && tn.isExpanded();\r
 136         }\r
 137         var q = (b - t) / (noAppend ? 2 : 3);\r
 138         if(y >= t && y < (t + q)){\r
 139             return "above";\r
 140         }else if(!noBelow && (noAppend || y >= b-q && y <= b)){\r
 141             return "below";\r
 142         }else{\r
 143             return "append";\r
 144         }\r
 145     },\r
 146 \r
 147     // private\r
 148     onNodeEnter : function(n, dd, e, data){\r
 149         this.cancelExpand();\r
 150     },\r
 151 \r
 152     // private\r
 153     onNodeOver : function(n, dd, e, data){\r
 154         var pt = this.getDropPoint(e, n, dd);\r
 155         var node = n.node;\r
 156         \r
 157         // auto node expand check\r
 158         if(!this.expandProcId && pt == "append" && node.hasChildNodes() && !n.node.isExpanded()){\r
 159             this.queueExpand(node);\r
 160         }else if(pt != "append"){\r
 161             this.cancelExpand();\r
 162         }\r
 163         \r
 164         // set the insert point style on the target node\r
 165         var returnCls = this.dropNotAllowed;\r
 166         if(this.isValidDropPoint(n, pt, dd, e, data)){\r
 167            if(pt){\r
 168                var el = n.ddel;\r
 169                var cls;\r
 170                if(pt == "above"){\r
 171                    returnCls = n.node.isFirst() ? "x-tree-drop-ok-above" : "x-tree-drop-ok-between";\r
 172                    cls = "x-tree-drag-insert-above";\r
 173                }else if(pt == "below"){\r
 174                    returnCls = n.node.isLast() ? "x-tree-drop-ok-below" : "x-tree-drop-ok-between";\r
 175                    cls = "x-tree-drag-insert-below";\r
 176                }else{\r
 177                    returnCls = "x-tree-drop-ok-append";\r
 178                    cls = "x-tree-drag-append";\r
 179                }\r
 180                if(this.lastInsertClass != cls){\r
 181                    Ext.fly(el).replaceClass(this.lastInsertClass, cls);\r
 182                    this.lastInsertClass = cls;\r
 183                }\r
 184            }\r
 185        }\r
 186        return returnCls;\r
 187     },\r
 188 \r
 189     // private\r
 190     onNodeOut : function(n, dd, e, data){\r
 191         this.cancelExpand();\r
 192         this.removeDropIndicators(n);\r
 193     },\r
 194 \r
 195     // private\r
 196     onNodeDrop : function(n, dd, e, data){\r
 197         var point = this.getDropPoint(e, n, dd);\r
 198         var targetNode = n.node;\r
 199         targetNode.ui.startDrop();\r
 200         if(!this.isValidDropPoint(n, point, dd, e, data)){\r
 201             targetNode.ui.endDrop();\r
 202             return false;\r
 203         }\r
 204         // first try to find the drop node\r
 205         var dropNode = data.node || (dd.getTreeNode ? dd.getTreeNode(data, targetNode, point, e) : null);\r
 206         var dropEvent = {\r
 207             tree : this.tree,\r
 208             target: targetNode,\r
 209             data: data,\r
 210             point: point,\r
 211             source: dd,\r
 212             rawEvent: e,\r
 213             dropNode: dropNode,\r
 214             cancel: !dropNode,\r
 215             dropStatus: false\r
 216         };\r
 217         var retval = this.tree.fireEvent("beforenodedrop", dropEvent);\r
 218         if(retval === false || dropEvent.cancel === true || !dropEvent.dropNode){\r
 219             targetNode.ui.endDrop();\r
 220             return dropEvent.dropStatus;\r
 221         }\r
 222         // allow target changing\r
 223         targetNode = dropEvent.target;\r
 224         if(point == "append" && !targetNode.isExpanded()){\r
 225             targetNode.expand(false, null, function(){\r
 226                 this.completeDrop(dropEvent);\r
 227             }.createDelegate(this));\r
 228         }else{\r
 229             this.completeDrop(dropEvent);\r
 230         }\r
 231         return true;\r
 232     },\r
 233 \r
 234     // private\r
 235     completeDrop : function(de){\r
 236         var ns = de.dropNode, p = de.point, t = de.target;\r
 237         if(!Ext.isArray(ns)){\r
 238             ns = [ns];\r
 239         }\r
 240         var n;\r
 241         for(var i = 0, len = ns.length; i < len; i++){\r
 242             n = ns[i];\r
 243             if(p == "above"){\r
 244                 t.parentNode.insertBefore(n, t);\r
 245             }else if(p == "below"){\r
 246                 t.parentNode.insertBefore(n, t.nextSibling);\r
 247             }else{\r
 248                 t.appendChild(n);\r
 249             }\r
 250         }\r
 251         n.ui.focus();\r
 252         if(Ext.enableFx && this.tree.hlDrop){\r
 253             n.ui.highlight();\r
 254         }\r
 255         t.ui.endDrop();\r
 256         this.tree.fireEvent("nodedrop", de);\r
 257     },\r
 258 \r
 259     // private\r
 260     afterNodeMoved : function(dd, data, e, targetNode, dropNode){\r
 261         if(Ext.enableFx && this.tree.hlDrop){\r
 262             dropNode.ui.focus();\r
 263             dropNode.ui.highlight();\r
 264         }\r
 265         this.tree.fireEvent("nodedrop", this.tree, targetNode, data, dd, e);\r
 266     },\r
 267 \r
 268     // private\r
 269     getTree : function(){\r
 270         return this.tree;\r
 271     },\r
 272 \r
 273     // private\r
 274     removeDropIndicators : function(n){\r
 275         if(n && n.ddel){\r
 276             var el = n.ddel;\r
 277             Ext.fly(el).removeClass([\r
 278                     "x-tree-drag-insert-above",\r
 279                     "x-tree-drag-insert-below",\r
 280                     "x-tree-drag-append"]);\r
 281             this.lastInsertClass = "_noclass";\r
 282         }\r
 283     },\r
 284 \r
 285     // private\r
 286     beforeDragDrop : function(target, e, id){\r
 287         this.cancelExpand();\r
 288         return true;\r
 289     },\r
 290 \r
 291     // private\r
 292     afterRepair : function(data){\r
 293         if(data && Ext.enableFx){\r
 294             data.node.ui.highlight();\r
 295         }\r
 296         this.hideProxy();\r
 297     }    \r
 298 });\r
 299 \r
 300 }