Skip to content
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

Troubles with event #52

Open
Omega-Phone opened this issue Jul 2, 2020 · 1 comment
Open

Troubles with event #52

Omega-Phone opened this issue Jul 2, 2020 · 1 comment

Comments

@Omega-Phone
Copy link

Hi,
I'm exploring Grafana's possibilities and i came across this plug-in. I'm a completely beginner in JS and SVG but i'm trying anyway.
But currently i have troubles with event management. Is it possible to do some specific function after user event such as mouse click or something else ? I saw the "element.click()" or "element.mouseup()" functions on Snap.svg doc but cannot make them work properly.
If it is possible, could you provide a minimal example code ?
Thanks a lot !

@MarcusCalidus
Copy link
Owner

sorry for my late reply. Here a simple example of how to implement events on SVG objects

All you need is

a simple SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1000 1000" >
     <rect id="myRect" width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

This code in onInit()

var mySvg = Snap(svgnode);
var myRect = mySvg.select('#myRect');

myRect.hover(
    () => myRect.attr('fill', 'red'),
    () => myRect.attr('fill', 'blue')
);

myRect.mousedown(
    () => myRect.attr('fill', 'yellow')
);


myRect.mouseup(
    () => myRect.attr('fill', 'red')
);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants