https://github.com/adobe-webplatform/css-shapes-editor
Standalone in-browser editor for CSS Shapes.
https://github.com/adobe-webplatform/css-shapes-editor
Last synced: about 2 months ago
JSON representation
Standalone in-browser editor for CSS Shapes.
- Host: GitHub
- URL: https://github.com/adobe-webplatform/css-shapes-editor
- Owner: adobe-webplatform
- License: other
- Created: 2013-11-06T15:07:01.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2015-05-21T14:19:03.000Z (almost 11 years ago)
- Last Synced: 2025-04-01T19:19:04.725Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 1.48 MB
- Stars: 120
- Watchers: 45
- Forks: 23
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING
- License: LICENSE.md
Awesome Lists containing this project
README
# CSS Shapes Editor
JavaScript library for interactive editing of CSS Shapes values right in the browser. It works with functional values like `polygon()`, `circle()` and `ellipse()`.
## Demo
See the `demo/` folder for examples.
## Basic usage
Load `dist/CSSShapesEditor.js` into the page:
```js
```
Setup the editor to edit a CSS shape value of an element. An interactive editor for the shape is drawn on top of the element.
```js
var element = document.querySelector('#element');
var shape = window.getComputedStyle(element)['shape-outside'];
var editor = CSSShapesEditor(element, shape);
editor.on('shapechange', function(){
// update the CSS shape value on the element
element.style['shape-outside'] = editor.getCSSValue();
})
```
Supported shape values:
- `polygon()`
- `circle()`
- `ellipse()`
Create a new shape from scratch by passing a shape declaration with no coordinates.
```js
var editor = CSSShapesEditor(element, 'polygon()');
```
## Events
The `"ready"` event is dispatched after the editor was initialized
```js
editor.on('ready', function(){
// editor is ready to work with
})
```
The `"shapechange"` event is dispatched after the shape was changed in the editor
```js
editor.on('shapechange', function(){
// update the CSS shape value on the element
element.style['shape-outside'] = editor.getCSSValue();
})
```
The `"removed"` event is dispatched after the editor has been turned off and removed by using `editor.remove()`.
```js
editor.on('removed', function(){
// editor is gone; do other clean-up
})
```
## API
Get the CSS shape value as a string to use in a stylesheet:
```js
editor.getCSSValue()
```
Get the CSS shape value as a string with coordinates converted to a specific unit type:
```js
editor.getCSSValue('%')
// supported values: ["px", "in", "cm", "mm", "pt", "pc", "em", "rem", "vw", "vh", "%"]
```
Programmatically update the shape editor with a new shape value:
```js
editor.update("circle(50% at center)")
```
Toggle the free-transform editor (scale, move, rotate) for the shape:
```js
editor.toggleFreeTransform();
```
Turn off editor and remove if from the page. **Unsaved changes will be lost.**
```js
editor.remove()
```
## Contributing
Your system needs:
- [Node.JS](http://nodejs.org/)
- [Grunt](http://gruntjs.com/)
### Setup dev environment
Install dependencies:
$ npm install
### Build
Edit source in the `src/` directory. Build with Grunt:
$ grunt build
Build output goes into `dist/`. Do not edit source in `dist/`, it gets replaced automatically by the Grunt build process.
### Test
Add tests to `test/spec/`. Run tests with [Testem](https://github.com/airportyh/testem):
$ testem
Testem uses the configuration found in `testem.json`
## License
Apache 2.0. See [LICENSE.md](./LICENSE.md)
## Thanks
The work of many people has contributed, both directly and indirectly, to building the CSS Shapes Editor library:
- [Razvan Caliman](https://github.com/oslego)
- [Bear Travis](https://github.com/betravis)
- [François Remy](https://github.com/FremyCompany)
- [Laurence Mclister](https://github.com/lmclister)
- [Hans Muller](https://github.com/hansmuller)
- [Lawrence Hsu](https://github.com/larz0)
- [Dmitry Baranovskiy](https://github.com/DmitryBaranovskiy) for creating [Snap.svg](http://snapsvg.io/)
- [Elbert Alias](https://github.com/elbertf) for creating [Raphael.FreeTransform ](https://github.com/ElbertF/Raphael.FreeTransform)
and many, many others. Thank you!