# cubic-bezier-editor

> Editor for generating cubic bezier value to use in css animations

Latest version **1.0.6** (published 2020-12-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install cubic-bezier-editor
pnpm add cubic-bezier-editor
yarn add cubic-bezier-editor
bun add cubic-bezier-editor
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2020-12-02 |
| First published | 2020-09-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 98.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 15 |
| Author | Brendon Ngirazi |
| Maintainers | ju99ernaut |
| Keywords | cubic-bezier, easing, editor |

## Links

- npm: https://www.npmjs.com/package/cubic-bezier-editor
- Repository: https://github.com/Ju99ernaut/cubic-bezier
- Homepage: https://github.com/Ju99ernaut/cubic-bezier#readme
- Issues: https://github.com/Ju99ernaut/cubic-bezier/issues
- npm.io page: https://npm.io/package/cubic-bezier-editor

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 1.0.6 (latest) — 2020-12-02
- 1.0.5 — 2020-11-16
- 1.0.4 — 2020-10-08
- 1.0.3 — 2020-09-26
- 1.0.2 — 2020-09-26
- 1.0.0 — 2020-09-26

## README

# Cubic Bezier

>Cubic bezier curve editor based on [cubic-bezier.com](https://cubic-bezier.com/) modified to be easily customizable for embeding into other webapps.

[DEMO](https://codepen.io/ju99ernaut/pen/JjXzLoq)

## Quickstart

### HTML
```html
<head>
    <meta charset="utf-8" />
    <title>cubic-bezier</title>
    <link href="https://unpkg.com/cubic-bezier-editor/dist/cubic-bezier-editor.min.css" rel="stylesheet">
    <script src="https://unpkg.com/cubic-bezier-editor"></script>
</head>
<body></body>
```

### JS
```js
const bezierEditor = cubicBezier({
    /* Your options */
});
bezierEditor.init();
```

### CSS
```css
* {
	margin: 0;
}

body {
	background: rgb(46, 42, 42);
	font-family: 'Helvetica Neue', sans-serif;
	line-height: 1.4;
}
```

## Options

| Option | Description | Type | Default |
|-|-|-|-
| `appendTo` | Element or selector to append the editor | `HTMLElement` or `string` | `<body></body>` |
| `onUpdate` | Callback to run when canvas is updated | `Function` | `() => {}` |
| `width` | width of the canvas, `height = width * 2`  | `number` | `150` |
| `default` | editor default values | `string` | `.25, .1, .25, 1` |
| `bezierThickness` | bezier curve thickness | `number` | `.015` |
| `handleThickness` | handle thickness | `number` | `.01` |
| `bezierColor` | bezier curve color | `string` | `#aaa4aa` |
| `handleColor` | handle color | `string` | `rgba(0,255,0,.6)` |
| `arrowKeys` | allow moving handle with arrow keys | `boolean` | `true` |
| `onClick` | when canvas is clicked move the closest handle to mouse position | `boolean` | `true` |
| `predefined` | predefined curves | `object` | `{'ease': '.25,.1,.25,1','linear': '0,0,1,1','ease-in': '.42,0,1,1','ease-out': '0,0,.58,1','ease-in-out': '.42,0,.58,1'}` |
| `padding` | canvas padding | `array` or `number` | `[.25, 0]` |
| `bezierLibrary` | bezier library options `width and height apply to each library item` | `object` | `{width:30,height:30,handleColor:'rgba(0,255,0,.6)',bezierColor:'#aaa4aa',handleThickness:.01,bezierThickness:.015}` |
| `input` | show input | `boolean` | `true` |
| `preview` | show preview animation | `boolean` | `true` |
| `duration` | preview animation duration | `number` | `1.5` |
| `transformPos` | custom callback function for modifying position onupdate | `Function` | `undefined` |

## Reference
```js
cubicBezier.getValueArrayNum();//[0.25, 0.1, 0.25, 1]
cubicBezier.getValueArray();//[".25", " .1", " .25", " 1"]
cubicBezier.getValueString();//'.42,0,.58,1'
cubicBezier.getValueCss();//'cubic-bezier(.42,0,.58,1)'
cubicBezier.getDuration();//1.5
cubicBezier.checkCoordinates([".25", " .1", " .25", " 1"]);//true
```

### transformPos Callback
By default all position data is obtained by using `getBoundingClientRect`, the `transformPos` callback can be used if you want to tweek these positions;

```js
const bezierEditor = cubicBezier({
    transformPos(l, t) {
        // transform
        return { left, top };
    },
});
```

## Download

* CDN
    * `https://unpkg.com/cubic-bezier-editor`
* NPM
    * `npm i cubic-bezier-editor`
* GIT 
    * `git clone https://github.com/Ju99ernaut/cubic-bezier.git`

## Usage

Browser
```js
<link href="https://unpkg.com/cubic-bezier-editor/dist/cubic-bezier-editor.min.css" rel="stylesheet">
<script src="https://unpkg.com/cubic-bezier-editor"></script>

<script>
    const bezierEditor = cubicBezier({
        /* Your options */
    });
    bezierEditor.init();
</script>
```

Modern Javascript
```js
import cubicBezier from 'cubic-bezier-editor';
import 'cubic-bezier-editor/dist/cubic-bezier-editor.min.css';

const bezierEditor = cubicBezier({
    /* Your options */
});
bezierEditor.init();
```

## Development

Clone repository

```sh
$ git clone https://github.com/Ju99ernaut/cubic-bezier.git
$ cd cubic-bezier
```

Install dependencies

```sh
$ npm i
```

Start dev server

```sh
$ npm start
```

Build

```sh
$ npm run build
```

## License

MIT

---
_Source: https://npm.io/package/cubic-bezier-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._