search

MarcusCalidus / marcuscalidus-svg-panel

Grafana panel for displaying metric sensitive SVG images using the snap svg library
MIT License
62 stars 28 forks source link

Troubles with event #52

Open Omega-Phone opened 4 years ago

Omega-Phone commented 4 years ago

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 commented 4 years ago

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')
);