Collapse Lines

Demo A simple page was created with one canvas element and a button

Description

Function

• User can add line by two clicks. First click creates the first position. Then user moves the mouse and the line is dynamicly resizing, if the user clicks left mouse button again the line adds to image. If user starts drawing and presses right mouse button, then the line will be disappear.
• If a line intersects with other line then is showed red dot of intersection (depends on line status - existing line or creating line).
• When the user clicks “collapse lines”, the lines were collapsed to the center of the line as a 3 second animation. The center of the line is painted by blue color.
• After collapsed lines, user can get initial images of lines by press right button mouse.
• For next animation, user should press F5.

Local development

• VS Code

Dependencies

• typescript
• JS
• HTML
• CSS
• Node v14.18.2 and higher
• NPM v6.14.12 and higher

Installing

• Fork and clone this repository
• Run npm install in your terminal
• Run npm start