Echo JS 0.11.0

Published version 1.1.2 of the SmartShape component. In this update, among other improvements and bugfixes, I've added an option to render a group of shapes as a single path. This opportunity allows to achieve some interesting effects. For example, to drill holes inside polygons, as demonstrated in the next video:

https://youtu.be/Vw_F5MIozZs

New version is available in NPM:

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

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

Published version 1.1.2 of the SmartShape component. In this update, among other improvements and bugfixes, I've added an option to render a group of shapes as a single path. This opportunity allows to achieve some interesting effects. For example, to drill holes inside polygons, as demonstrated in the next video:

https://youtu.be/Vw_F5MIozZs

New version is available in NPM:

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

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

Published version 1.1.1 of the SmartShape component. In this update, among other changes, added more helpful functions to modify shapes, like flip, move to top or to bottom, specify directions of points move. These functions can help to create more detailed shapes. Also they enriched user interface of SmartShape Studio. See the next video, that shows how to use them to create complex shapes and their compositions from simple triangles and squares.

https://youtu.be/r2p_rXhPMDQ

New version is available in NPM:

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

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

Install SmartShape from NPM: https://www.npmjs.com/package/smart_shape

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