https://github.com/cypriluc/editable-polyline

use d3.js to draw and edit a polyline
https://github.com/cypriluc/editable-polyline

d3-js html-css-javascript

Last synced: 5 days ago
JSON representation

use d3.js to draw and edit a polyline

• Host: GitHub
• URL: https://github.com/cypriluc/editable-polyline
• Owner: cypriluc
• Created: 2021-01-07T15:31:02.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-02-16T10:05:27.000Z (over 3 years ago)
• Last Synced: 2023-08-25T07:54:16.268Z (about 1 year ago)
• Topics: d3-js, html-css-javascript
• Language: JavaScript
• Homepage:
• Size: 89.8 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Simple HTML SVG Editor

Javascript project for drawing and editing Svg polylines

### Built with  

* [jQuery](https://jquery.com/)

* [Bootstrap](https://getbootstrap.com/)

* [D3.js](https://d3js.org/)

## Getting started

Clone or download the repository and run the files locally through a local web server (e.g. [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) for VS code)

## Usage

![screen](https://user-images.githubusercontent.com/64001284/107651753-29554580-6c80-11eb-8919-322b60593b97.png)

Start drawing a polyline by clicking on the canvas.

Finish the polyline by:

* _click on the last point_ / or press _Esc key_ -> as opened polyline

* _click on the first point_ / or press _Enter key_ -> as closed polyline

Select active polyline:

* _click on the inactive polyline_ -> in edit or move mode

Deselect active polyline:

* _Esc key_ -> when not drawing

### Navigation panel buttons:

* _Draw_ -> mode to draw polylines on canvas

* _Edit_ -> mode to edit active polyline shape - drag by control points

* _Move_ -> mode to drag whole polyline within the canvas

* _Show grid_ -> toggle the grid visibility on and off

* _Snap_ -> toggle snapping to the grid on and off

* _Resolution_ -> set the grid resolution in pixels

* _Undo / Ctrl+Z_ -> Step backward

* _Redo / CTRL+Y_ -> Step forward

* _Delete path_ -> delete active polyline

* _Clear canvas_ -> delete all polylines

## Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

## License

[MIT](https://choosealicense.com/licenses/mit/)