New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Missing toFront() / .toBack() #121

Closed
oslego opened this Issue Nov 18, 2013 · 7 comments

Comments

Projects
None yet
5 participants
@oslego
Member

oslego commented Nov 18, 2013

element.toFront(), element.toBack() and paper.top from Raphael have no obvious correspondent in Snap.

They are useful util methods. An workaround with attr() and z-index may work, but built-in methods to handle this would be very welcome.

@DmitryBaranovskiy

This comment has been minimized.

Contributor

DmitryBaranovskiy commented Nov 19, 2013

While this could be useful addition, I would rather leverage groups. In Raphaël there were no way keep elements on separate layers, but with groups it’s very easy (and more efficient) to keep elements in the right position without juggling them around.
In case you badly need them, you can easily add them as this:

Snap.plugin(function (Snap, Element, Paper, glob) {
    var elproto = Element.prototype;
    elproto.toFront = function () {
        this.prependTo(this.paper);
    };
    elproto.toBack = function () {
        this.appendTo(this.paper);
    };
}
@oslego

This comment has been minimized.

Member

oslego commented Nov 19, 2013

Thanks for the opinion and solution! This plugin architecture should be expressed in the docs somewhere. It's very useful.

@oslego oslego closed this Nov 19, 2013

@oslego

This comment has been minimized.

Member

oslego commented Nov 19, 2013

I think the appends should be reversed for .toBack() and .toFront()
Elements added later in the DOM are closer to the screen, than the ones added earlier.

@prgsmall

This comment has been minimized.

prgsmall commented Dec 23, 2013

I've attempt to use this method to add toFront and toBack to the Element object, and when they are called the context is incorrect: "this" is window, not Element.

Is there any way to set the context before calling?

@oslego

This comment has been minimized.

Member

oslego commented Dec 28, 2013

Hi @prgsmall,

Have you used the exact code as shown above? It extends the Element prototype and this should point correctly to it, not the window. I have used this and it works fine. Can you share your code?

@seemsindie seemsindie referenced this issue Feb 19, 2015

Closed

Z Order #354

@vlalieu

This comment has been minimized.

vlalieu commented Oct 27, 2015

thanks Dimitry, your method works!

@olibou

This comment has been minimized.

olibou commented May 1, 2016

Hi!
I've tried toFront and toBack and it did not work for me. Below is my minimal example where I would like that when cursor is going over a box it scales it and brings it to the front. Any idea ?

var s = Snap('#test');
var  g = s.g(s.rect(50,50,150,50).attr({fill:'blue'}),
     s.text(75,80, 'Hello World'));
g.hover(enter_box, leave_box);

var  g = s.g(s.rect(70,60,150,60).attr({fill:'green'}),
     s.text(80,90, 'How good is Snap!'));
g.hover(enter_box, leave_box);
function enter_box() {
var bbr = this.getBBox();
this.animate({transform: (new Snap.Matrix()).scale(2, 2, bbr.cx, bbr.cy)}, 100);
}
function leave_box() {
this.animate({transform: 's1'},100); 
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment