Where to add an onClick event? #11

Closed
MastaBaba opened this Issue Jan 17, 2012 · 6 comments

Comments

Projects
None yet
3 participants
@MastaBaba

I'm not too great with javascript, let alone the canvas element, and have been unable to add links to the nodes. I suspect I can do some magic inside the drawnode function in springyui.js, but I'm at a loss as to what, exactly.
An onClick event attached to ctx doesn't seem to work, but what would?

Also, it appears that I can't access canvas elements using jQuery (searching for any IDs of elements on the page), which I suppose shows my ignorance in relation to the canvas element.

Some help, or a pointer in the right direction would be much appreciated. Thanks in advance. And thanks for a small js library that's easy to implement :)

@dhotson

This comment has been minimized.

Show comment Hide comment
@dhotson

dhotson Jan 23, 2012

Owner

Yeah, you can't access elements in the canvas element. It's just a drawing surface—just a bunch of pixels, it has no concept of elements or objects.

To figure out what the user has clicked on you'll need to figure it out yourself. Luckily springy has a little bit of code to help out. :-)

Take a look at how I've implemented drag and drop in springyui.js for an example:

var p = fromScreen({x: e.pageX - pos.left, y: e.pageY - pos.top});
selected = nearest = dragged = layout.nearest(p);

See how I'm using the nearest method to figure out which node is closest to where the user clicked?

Hopefully that's enough to get you started. Let me know how it goes. Cheers! :-)

Owner

dhotson commented Jan 23, 2012

Yeah, you can't access elements in the canvas element. It's just a drawing surface—just a bunch of pixels, it has no concept of elements or objects.

To figure out what the user has clicked on you'll need to figure it out yourself. Luckily springy has a little bit of code to help out. :-)

Take a look at how I've implemented drag and drop in springyui.js for an example:

var p = fromScreen({x: e.pageX - pos.left, y: e.pageY - pos.top});
selected = nearest = dragged = layout.nearest(p);

See how I'm using the nearest method to figure out which node is closest to where the user clicked?

Hopefully that's enough to get you started. Let me know how it goes. Cheers! :-)

@MastaBaba

This comment has been minimized.

Show comment Hide comment
@MastaBaba

MastaBaba Feb 1, 2012

Wow. That was not very hard at all. I changed the code directly after your excerpt, above to...

    if (selected.node !== null) {
        // Part of the same bug mentioned later. Store the previous mass
        // before upscaling it for dragging.
        dragged.point.m = 10000.0;

        window.location = nearest.node.data.link;

    }

Of course, I added 'link' to the definition of each node.

This works, though I now no longer have the ability to drag nodes around. The above is tied to the mousedown event, which is why, I suppose. However, linking it to the mouseup event only would allow dragging until the mouse button is released, which still sort of defies the purpose of dragging.

I suppose what could work is that I set a variable in mousemove and then not redirect if that variable is set upon mouseup. Thoughts?

Wow. That was not very hard at all. I changed the code directly after your excerpt, above to...

    if (selected.node !== null) {
        // Part of the same bug mentioned later. Store the previous mass
        // before upscaling it for dragging.
        dragged.point.m = 10000.0;

        window.location = nearest.node.data.link;

    }

Of course, I added 'link' to the definition of each node.

This works, though I now no longer have the ability to drag nodes around. The above is tied to the mousedown event, which is why, I suppose. However, linking it to the mouseup event only would allow dragging until the mouse button is released, which still sort of defies the purpose of dragging.

I suppose what could work is that I set a variable in mousemove and then not redirect if that variable is set upon mouseup. Thoughts?

@dhotson

This comment has been minimized.

Show comment Hide comment
@dhotson

dhotson Feb 1, 2012

Owner

Cool!

One thing to try as you suggested might be to check onmouseup if the mouse has moved a certain distance.

Owner

dhotson commented Feb 1, 2012

Cool!

One thing to try as you suggested might be to check onmouseup if the mouse has moved a certain distance.

@MastaBaba

This comment has been minimized.

Show comment Hide comment
@MastaBaba

MastaBaba Feb 6, 2012

Well. It certainly ain't elegant, but it works. This is what I did:

In springyui.js, directly after the function is declared:

var xs = 0;
var ys = 0;

Then, in the function recording the mousdown:

xs = e.pageX;
ys = e.pageY;

And, when recording the mouseup:

if (xs - e.pageX < 5 && ys - e.pageY < 5)
window.location = nearest.node.data.link;

Many thanks for pointing me in the right direction!

Well. It certainly ain't elegant, but it works. This is what I did:

In springyui.js, directly after the function is declared:

var xs = 0;
var ys = 0;

Then, in the function recording the mousdown:

xs = e.pageX;
ys = e.pageY;

And, when recording the mouseup:

if (xs - e.pageX < 5 && ys - e.pageY < 5)
window.location = nearest.node.data.link;

Many thanks for pointing me in the right direction!

@dhotson

This comment has been minimized.

Show comment Hide comment
@dhotson

dhotson Feb 6, 2012

Owner

"If it's stupid and it works—it's not stupid". ;-)

Go with what works and have fun. :-)

Owner

dhotson commented Feb 6, 2012

"If it's stupid and it works—it's not stupid". ;-)

Go with what works and have fun. :-)

@dhotson dhotson closed this Feb 6, 2012

@getyouyou

This comment has been minimized.

Show comment Hide comment
@getyouyou

getyouyou Jun 2, 2016

Thank you very much! It's helpful

Thank you very much! It's helpful

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment