curvity 0.0.0 → 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +103 -95
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,95 +1,103 @@
|
|
|
1
|
-
# Curvity
|
|
2
|
-
|
|
3
|
-
A Maya-style animation curve editor built with TypeScript and SVG — no canvas, no dependencies.
|
|
4
|
-
|
|
5
|
-
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
Installation with npm:
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm i curvity
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Usage
|
|
16
|
+
|
|
17
|
+
```js
|
|
18
|
+
import { Graph } from 'graphly'
|
|
19
|
+
|
|
20
|
+
const container = document.querySelector('#graph')!
|
|
21
|
+
const editor = new Graph(container)
|
|
22
|
+
|
|
23
|
+
// Bring your own data
|
|
24
|
+
const editor2 = new Graph(container, undefined, {
|
|
25
|
+
curves: [
|
|
26
|
+
{
|
|
27
|
+
name: 'translateX',
|
|
28
|
+
color: '#e06060',
|
|
29
|
+
keyframes: [
|
|
30
|
+
{ time: 0, value: 0, inTangent: { type: 'spline', slope: 0 }, outTangent: { type: 'spline', slope: 0 } },
|
|
31
|
+
{ time: 1.0, value: 5, inTangent: { type: 'spline', slope: 0 }, outTangent: { type: 'spline', slope: 0 } },
|
|
32
|
+
{ time: 2.0, value: 0, inTangent: { type: 'spline', slope: 0 }, outTangent: { type: 'spline', slope: 0 } },
|
|
33
|
+
],
|
|
34
|
+
},
|
|
35
|
+
],
|
|
36
|
+
})
|
|
37
|
+
|
|
38
|
+
// Public API
|
|
39
|
+
editor.autoFit() // fit all curves in view
|
|
40
|
+
editor.frameSelection() // zoom to selected keyframes
|
|
41
|
+
editor.deleteSelected() // delete selected keyframes
|
|
42
|
+
editor.redraw() // force a redraw
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Features
|
|
46
|
+
|
|
47
|
+
- **Bezier curves** with per-keyframe tangent handles (spline, linear, flat, stepped)
|
|
48
|
+
- **Fixed-length tangent handles** — always 40 px on screen regardless of zoom, direction encodes slope
|
|
49
|
+
- **Unified vs. independent tangent tilt** — select a keyframe to tilt both handles together; select only a handle to move it independently
|
|
50
|
+
- **Marquee selection** with Shift-additive mode
|
|
51
|
+
- **Live keyframe reordering** — keyframes swap order in real time as you drag past each other
|
|
52
|
+
- **Pan & zoom** on both axes independently
|
|
53
|
+
- **Playhead scrubbing** from the ruler or the vertical line in the chart area
|
|
54
|
+
- SVG `clipPath` keeps curves clipped to the chart area
|
|
55
|
+
- Responsive via `ResizeObserver`
|
|
56
|
+
|
|
57
|
+
## Controls
|
|
58
|
+
|
|
59
|
+
| Input | Action |
|
|
60
|
+
|---|---|
|
|
61
|
+
| Drag keyframe | Move in time and value |
|
|
62
|
+
| Shift + drag keyframe | Axis-locked move (dominant axis after 5 px threshold) |
|
|
63
|
+
| Drag tangent handle | Rotate tangent (unified if keyframe selected, independent otherwise) |
|
|
64
|
+
| Alt + drag | Pan |
|
|
65
|
+
| Scroll | Zoom time axis (centered on cursor) |
|
|
66
|
+
| Alt + scroll | Zoom value axis (centered on cursor) |
|
|
67
|
+
| Click empty area | Clear selection |
|
|
68
|
+
| Shift + click | Add to / remove from selection |
|
|
69
|
+
| Drag empty area | Marquee select |
|
|
70
|
+
| Drag playhead line | Scrub playhead |
|
|
71
|
+
|
|
72
|
+
## Keyboard Shortcuts
|
|
73
|
+
|
|
74
|
+
| Key | Action |
|
|
75
|
+
|---|---|
|
|
76
|
+
| `A` | Fit all keyframes in view |
|
|
77
|
+
| `F` | Frame selected keyframes |
|
|
78
|
+
| `S` | Insert a keyframe on every curve at the current playhead position |
|
|
79
|
+
| `Delete` / `Backspace` | Delete selected keyframes |
|
|
80
|
+
|
|
81
|
+
## Getting Started
|
|
82
|
+
|
|
83
|
+
```bash
|
|
84
|
+
npm install
|
|
85
|
+
npm run dev
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
Then open `http://localhost:5173`.
|
|
89
|
+
|
|
90
|
+
### Build
|
|
91
|
+
|
|
92
|
+
```bash
|
|
93
|
+
npm run build
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
Output goes to `dist/`.
|
|
97
|
+
|
|
98
|
+
## Tech Stack
|
|
99
|
+
|
|
100
|
+
- **TypeScript** — strict types throughout
|
|
101
|
+
- **SVG** — all rendering via `innerHTML`-free DOM construction
|
|
102
|
+
- **Vite** — dev server and bundler
|
|
103
|
+
- No runtime dependencies
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "curvity",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.1",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/curvity.umd.cjs",
|
|
7
7
|
"module": "./dist/curvity.js",
|
|
@@ -45,4 +45,4 @@
|
|
|
45
45
|
"vite": "^8.0.4",
|
|
46
46
|
"vite-plugin-dts": "^4.5.4"
|
|
47
47
|
}
|
|
48
|
-
}
|
|
48
|
+
}
|