Echo JS 0.11.0

<~>

germanov_dev 4 days ago. link 1 point
Published release 1.0.6 of SmartShape component. In this version added export to SVG and PNG, revised events subsystem and implemented high-precission mouse events. 

It's available to install here:

https://www.npmjs.com/package/smart_shape

What is a meaning of high-precission events by the way? Let's discuss it by comparing with a regular mouse events in Javascript. Regular DOM listeners of mouse events, like "click", "mousedown" or "mouseover" trigger if a mouse cursor located inside rectangular area of an element. But what if your HTML element is not rectangular? What if it's a triangle or a circle? In this case, regular mouse events will trigger when you click not only on the element itself, but also on a whitespace around it. It results in many visual inconsistencies. For example, if two elements overlap each other, then you can't click on the bottom item, if it's covered by a whitespace of the top one.

In contrast, hight precission mouse events in SmartShape trigger only if the mouse cursor is exactly inside the body of the element. The next video shows how it looks on practice.

https://youtu.be/JTIJ7xxFDJk

#javascript #frontend #ui #graphics #npm #component #html #svg #vectorgraphics #design