Rambox-CE/ext/src/dashboard/DropZone.js

/**
 * Internal class that manages drag/drop for the `Dashboard`.
 * @private
 */
Ext.define('Ext.dashboard.DropZone', {
    extend: 'Ext.dd.DropTarget',

    ddScrollConfig: {
        vthresh: 75,
        hthresh: -1,
        animate: true,
        increment: 200
    },

    containerScroll: true,

    // This causes overflow to go hidden during the drag so that we don't cause panels to
    // wrap by triggering overflow.
    overClass: Ext.baseCSSPrefix + 'dashboard-dd-over',

    constructor: function (dashboard, cfg) {
        this.dashboard = dashboard;
        dashboard.body.ddScrollConfig = this.ddScrollConfig;

        this.callParent([dashboard.body, cfg]);
    },

    getOverEvent: function (dd, e, data) {
        var dashboard = this.dashboard,
            dbody = dashboard.body,
            items = dashboard.items.items,
            bodyBox = dbody.getBox(),
            count = items.length,
            xy = e.getXY(),
            x = xy[0] - bodyBox.x + dbody.getScrollLeft(),
            y = xy[1] - bodyBox.y + dbody.getScrollTop(),
            over = {
                columnIndex: 0,
                column: null,
                dashboard: dashboard,
                above: null,
                extensible : false,
                beforeAfter : 0,
                data: data,
                panel: data.panel,
                rawEvent: e,
                source: dd,
                status: this.dropAllowed
            },
            t, ht, i, k, item, w, childCount, childItems, childItem;

        for (i = 0; i < count; i += 2) {
            item = items[i];
            w = item.lastBox.width;
            if (items[i+1]) {
                w += items[i+1].lastBox.width;
            }

            //if (x < w) {
            if (e.within(item.el)) {
                over.columnIndex = i;
                over.column = item;
                over.extensible = this.isRowExtensible(item.rowIndex);

                t = Math.min(80, w * 0.2);
                over.beforeAfter = t = (over.extensible && ((x < t) ? -1 : ((x > w - t) ? 1 : 0)));

                if (!t || !over.extensible) {
                    childItems = item.items.items;
                    // if we are not on an edge OR reached maxColumns (which means "insert the panel in
                    // between the columns"), we need to dig one more level down
                    //console.log('inside of column ' + i + ': x=' + x + ', y=' + y);
                    for (k = 0, childCount = childItems.length; k < childCount; ++k) {
                        childItem = childItems[k];
                        ht = childItem.el.getHeight();
                        //console.log(childItem.id + '.ht = ' + ht);
                        if (y < ht / 2) {
                            //console.log('above child ' + k);
                            // if mouse is above the current child's top, Y coord, it
                            // is considered as "above" the previous child
                            over.above = childItem;
                            break;
                        }
                        //console.log('below child ' + k);
                        y -= ht;
                    }

                }

                break;
            }

            x -= w;
        }

        return over;
    },

    notifyOver: function (dd, e, data) {
        var me = this,
            dashboard = me.dashboard,
            over = me.getOverEvent(dd, e, data),
            colEl = over.column && over.column.el,
            proxy = dd.proxy,
            proxyProxy,
            aboveItem = over.above,
            colWidth, width = 0,
            padding,
            hasListeners = dashboard.hasListeners;

        data.lastOver = over;

        if ((!hasListeners.validatedrop || dashboard.fireEvent('validatedrop', over) !== false) &&
            (!hasListeners.beforedragover || dashboard.fireEvent('beforedragover', over) !== false ))
            {

            proxyProxy = dd.panelProxy.getProxy();

            // make sure proxy width is fluid in different width columns
            proxy.getProxy().setWidth('auto');

            if ( colEl) {

                width = colWidth = colEl.getWidth();
                // A floating column was targeted
                if (over.beforeAfter) {

                    dd.panelProxy.moveProxy(colEl.dom, colEl.dom.firstChild);

                    width = colWidth / 2;
                    proxyProxy.setWidth(width);

                } else {
                    if (aboveItem) {
                        dd.panelProxy.moveProxy(aboveItem.el.dom.parentNode, aboveItem.el.dom);
                    } else {
                        dd.panelProxy.moveProxy(colEl.dom, null);
                    }
                    proxyProxy.setWidth('auto');

                }
                if (width) {
                    //proxy.getProxy().setWidth(width);
                }
                proxyProxy.setStyle({
                    'float': 'none',
                    'clear' : 'none',
                    'margin-left': (over.beforeAfter > 0) ? (colWidth - width - colEl.getPadding('lr')) + 'px' : '',
                    'margin-top' : '7px'
                });

            } else {
                padding = dashboard.body.getPadding('lr');
                proxyProxy.setStyle({
                    'float' : 'left',
                    'clear' : 'left',
                    'margin': '0 7px 0 7px'
                });
                proxyProxy.setWidth(dashboard.body.getWidth() - padding);

                // Target the innerCt for the move
                dd.panelProxy.moveProxy(dashboard.body.dom.firstChild.firstChild, null);
            }

            this.scrollPos = dashboard.body.getScroll();

            if (hasListeners.dragover) {
                dashboard.fireEvent('dragover', over);
            }
        }

        return over.status;
    },

    isRowExtensible : function(rowIndex) {
      var me = this,
          dashboard = me.dashboard,
          maxColumns = dashboard.getMaxColumns() || 1;

      return Ext.Array.from(dashboard.query('>dashboard-column[rowIndex=' + rowIndex + ']')).length < maxColumns;
    },

    notifyDrop: function (dd, e, data) {
        this.callParent(arguments);

        var dashboard = this.dashboard,
            over = data.lastOver,
            panel = over.panel,
            fromCt = panel.ownerCt,
            toCt = over.column,
            side = toCt ? over.beforeAfter : 1,
            currentIndex = fromCt.items.indexOf(panel),
            newIndex = toCt ? (over.above ? toCt.items.indexOf(over.above) : toCt.items.getCount()) : 0,
            colIndex, newCol,
            hasListeners = dashboard.hasListeners;

//        console.log('DROP: ' + panel.id + '@' + currentIndex +
//                // ' from ' + fromCt.id +
//                (side ? ((side < 0) ? ' BEFORE ' : ' AFTER ')
//                      : (' AT ' + newIndex + ' IN ')) + toCt.id +
//                (over.above ? ' ABOVE ' + over.above.id : ' AT END'));

        //Same column tests
        if (fromCt === toCt) {
            if (fromCt.items.getCount() === 1) {
                //console.log('Null op');
                return;
            }
            if (!side) {
                if (currentIndex < newIndex) {
                    --newIndex;
                    //console.log('Adjusted newIndex=' + newIndex);
                }
                if (currentIndex === newIndex) {
                    //console.log('No change');
                    return;
                }
            }
        }

        if ((hasListeners.validatedrop && dashboard.fireEvent('validatedrop', over) === false) ||
            (hasListeners.beforedrop && dashboard.fireEvent('beforedrop', over) === false)) {
            return;
        }

        Ext.suspendLayouts();

        panel.isMoving = true;
        if (side) {
            colIndex = dashboard.items.indexOf(toCt);

            // inserting into new Row ?
            if (colIndex < 0) {
                colIndex = dashboard.items.getCount();
            } else if (side > 0) {
                ++colIndex;
            }

            newCol = dashboard.createColumn();

            if (toCt) {
                newCol.columnWidth = toCt.columnWidth = toCt.columnWidth / 2;
                delete toCt.width;
            } else {
                newCol.columnWidth = 1;  //full row
            }

            toCt = dashboard.insert(colIndex, newCol);
            newIndex = 0;
        }

        // make sure panel is visible prior to inserting so the layout doesn't ignore it
        panel.el.dom.style.display = '';

        toCt.insert(newIndex, panel);

        panel.isMoving = false;

        toCt.updateLayout();
        Ext.resumeLayouts(true);

        if (hasListeners.drop) {
            dashboard.fireEvent('drop', over);
        }
    }
});