Ext.ux.WindowSnap.DD - Window Edge Snapping!

[mjlecomte]

Slider is nice to play with the effect. The recent version appears to have changed the drag behavior now, where before it was smooth drag (if the snap was on or off I think) and now it kind of moves on a grid and is a bit choppy.

Hopefully you are saving these in versions. You might want to save your versions as different demos perhaps so people can test the various implementations you have done.

You're still messing around I imagine...looks like high values of the range get some weird behavior where the window binds itself.

I was trying to play with multiple windows as I think the z-index may have an effect here, but I couldn't get far test it with some of the above mentioned problems (not able to turn off snap and reposition windows too easily).

All comments based on viewing with IE7.

Nice work though.

[abe.elias]

Nice work David.

[xantus]

There's a new version available! http://xant.us/ext-ux/examples/window-edge-snap/

Changelog

• v1.1: Added the viewport edges
• v1.2: Rewrote the edge detection algorythm
• v1.3: Increased response time of DropSnap on drag start
• v1.4: Fixed bug where a window would snap to the incorrect area

[xantus]

v1.6 is out! It will snap to the nearest window now, instead of the first window it was close enough to snap to.

Also note that I changed the the namespace in the source to match the advertised namespace.

Ext.ux.SnapWindow.DD -> Ext.ux.WindowSnap.DD

[Animal]

Hey xantus, could you make use of these overrides I've been working on to enable my MouseProximityFade plugin to help with your proximity detection algorithm?

Pixel geometry is best delegated to the base lib's "Region" class so it doesn't complicate UI code.

Ext.override(Ext.lib.Region, {
    /**
     * Returns the shortest distance between this Region and another Region.
     * Either or both Regions may be Points.
     * @param {Region} r The other Region
     * @return {Number} The shortest distance in pixels between the two Regions.
     */
    getDistanceBetween: function(r) {

//      We may need to mutate r, so make a copy.
        r = Ext.apply({}, r);
        
//      Translate r to the left of this
        if (r.left > this.right) {
            var rWidth = r.right - r.left;
            r.left = this.left - (r.left - this.right) - rWidth;
            r.right = r.left + rWidth;
        }

//      Translate r above this
        if (r.top > this.bottom) {
            var rHeight = r.bottom - r.top;
            r.top = this.top - (r.top - this.bottom) - rHeight;
            r.bottom = r.top + rHeight;
        }

//      If r is directly above
        if (r.right > this.left) {
            return this.top - r.bottom;
        }

//      If r is directly to the left
        if (r.bottom > this.top) {
            return this.left - r.right;
        }

//      r is on a diagonal path
        return Math.round(Math.sqrt(Math.pow(this.top - r.bottom, 2) + Math.pow(this.left - r.right, 2)));
    }
});

Ext.override(Ext.Element, {
    /**
     * Returns shortest distance between this Element and the specified point
     * @param {Number} x The x coordinate.
     * @param {Number} y The y coordinate.
     * @return {Number} The shortest distance in pixels between this Element and the specified point.
     */
    getDistanceTo: function(x, y) {
        return this.getRegion().getDistanceBetween(new Ext.lib.Point(x, y));
    },

    /**
     * Returns the shortest distance between this Element and another Element.
     * @param {Element/DOMElement/String} el The other Element, or its ID.
     * @return {Number} The shortest distance in pixels between the two Elements.
     */
    getDistanceBetween: function(el) {
        return this.getRegion().getDistanceBetween(Ext.fly(el).getRegion());
    }
});

[xantus]

Hey xantus, could you make use of these overrides I've been working on to enable my MouseProximityFade plugin to help with your proximity detection algorithm?

Pixel geometry is best delegated to the base lib's "Region" class so it doesn't complicate UI code.

Ext.override(Ext.lib.Region, {
    /**
     * Returns the shortest distance between this Region and another Region.
     * Either or both Regions may be Points.
     * @param {Region} r The other Region
     * @return {Number} The shortest distance in pixels between the two Regions.
     */
    getDistanceBetween: function(r) {

//      We may need to mutate r, so make a copy.
        r = Ext.apply({}, r);
        
//      Translate r to the left of this
        if (r.left > this.right) {
            var rWidth = r.right - r.left;
            r.left = this.left - (r.left - this.right) - rWidth;
            r.right = r.left + rWidth;
        }

//      Translate r above this
        if (r.top > this.bottom) {
            var rHeight = r.bottom - r.top;
            r.top = this.top - (r.top - this.bottom) - rHeight;
            r.bottom = r.top + rHeight;
        }

//      If r is directly above
        if (r.right > this.left) {
            return this.top - r.bottom;
        }

//      If r is directly to the left
        if (r.bottom > this.top) {
            return this.left - r.right;
        }

//      r is on a diagonal path
        return Math.round(Math.sqrt(Math.pow(this.top - r.bottom, 2) + Math.pow(this.left - r.right, 2)));
    }
});

Ext.override(Ext.Element, {
    /**
     * Returns shortest distance between this Element and the specified point
     * @param {Number} x The x coordinate.
     * @param {Number} y The y coordinate.
     * @return {Number} The shortest distance in pixels between this Element and the specified point.
     */
    getDistanceTo: function(x, y) {
        return this.getRegion().getDistanceBetween(new Ext.lib.Point(x, y));
    },

    /**
     * Returns the shortest distance between this Element and another Element.
     * @param {Element/DOMElement/String} el The other Element, or its ID.
     * @return {Number} The shortest distance in pixels between the two Elements.
     */
    getDistanceBetween: function(el) {
        return this.getRegion().getDistanceBetween(Ext.fly(el).getRegion());
    }
});

Thanks! I could use this next time I revisit that code, or if you'd like to tinker with it yourself?

[wm003]

Very nice widget!

[Animal]

The sample http://xant.us/ext-ux/examples/window-edge-snap/ does not appear to work any more. There's no snapping behaviour for me on FF 3.0.6

[xantus]

It's working here on every browser I have: FF 3.0.5, Chrome, IE6, IE7, IE8. Could it be something in FF 3.0.6?

The sample http://xant.us/ext-ux/examples/window-edge-snap/ does not appear to work any more. There's no snapping behaviour for me on FF 3.0.6

[mjlecomte]

Working for me FF3.0.6/FB 1.3X.2/Windows XP/