@stroke-stabilizer/core 0.2.15 → 0.3.1

package/README.md

@@ -1,6 +1,8 @@
 # @stroke-stabilizer/core
 
 [![npm version](https://img.shields.io/npm/v/@stroke-stabilizer/core.svg)](https://www.npmjs.com/package/@stroke-stabilizer/core)
+[![CI](https://github.com/usapopopooon/stroke-stabilizer/actions/workflows/ci.yml/badge.svg)](https://github.com/usapopopooon/stroke-stabilizer/actions/workflows/ci.yml)
+[![Coverage](https://img.shields.io/badge/coverage-99.65%25-brightgreen)](https://github.com/usapopopooon/stroke-stabilizer)
 
 [日本語](./docs/README.ja.md)
 
@@ -14,11 +16,15 @@ Reduce hand tremor and smooth pen/mouse input in real-time using a flexible filt
 
 ## Features
 
-- **[Dynamic Pipeline Pattern](https://dev.to/usapopopooon/the-dynamic-pipeline-pattern-a-mutable-method-chaining-for-real-time-processing-16e1)** - Add, remove, and update filters at runtime without rebuilding
+- **[Mutable Pipeline Pattern](https://medium.com/@usapopopooon/the-mutable-pipeline-pattern-when-method-chains-need-to-change-at-runtime-8e835829de07)** - Add, remove, and update filters at runtime without rebuilding
 - **Two-layer Processing** - Real-time filters + post-processing convolution
 - **Automatic Endpoint Correction** - Strokes end at the actual input point
 - **rAF Batch Processing** - Coalesce high-frequency pointer events into animation frames
 - **8 Built-in Filters** - From simple moving average to adaptive One Euro Filter
+- **Douglas-Peucker Simplification** - Reduce point count while preserving shape
+- **SVG Path Output** - Convert strokes to SVG path data
+- **Stroke Prediction** - Reduce perceived latency with velocity-based prediction
+- **Catmull-Rom Interpolation** - Generate smooth curves between points
 - **Edge-preserving Smoothing** - Bilateral kernel for sharp corner preservation
 - **TypeScript First** - Full type safety with exported types
 - **Zero Dependencies** - Pure JavaScript, works anywhere
@@ -120,6 +126,7 @@ Without `getCoalescedEvents()`, fast strokes will appear jagged regardless of fi
 | `stringFilter`           | Lazy Brush algorithm              | Delayed, smooth strokes            |
 | `oneEuroFilter`          | Adaptive lowpass filter           | Best balance of smoothness/latency |
 | `linearPredictionFilter` | Predicts next position            | Lag compensation                   |
+| `douglasPeuckerFilter`   | Simplifies point sequences        | Reduce data size                   |
 
 ### Post-processing Kernels
 
@@ -390,6 +397,103 @@ bilateralKernel({
 })
 ```
 
+### Douglas-Peucker Simplification
+
+Reduce the number of points while preserving the shape of the stroke.
+
+```ts
+import { douglasPeuckerFilter, simplify } from '@stroke-stabilizer/core'
+
+// As a filter in the pipeline
+const pointer = new StabilizedPointer().addFilter(
+  douglasPeuckerFilter({ epsilon: 2 })
+)
+
+// As a standalone function
+const simplified = simplify(points, 2) // epsilon = 2px tolerance
+```
+
+### SVG Path Output
+
+Convert processed strokes to SVG path data for rendering or export.
+
+```ts
+import {
+  toSVGPath,
+  toSVGPathSmooth,
+  toSVGPathCubic,
+} from '@stroke-stabilizer/core'
+
+const points = pointer.finish()
+
+// Simple polyline (M/L commands)
+const pathData = toSVGPath(points)
+// "M 10.00 20.00 L 30.00 40.00 L 50.00 60.00"
+
+// Quadratic Bezier curves (smoother)
+const smoothPath = toSVGPathSmooth(points, { tension: 0.5 })
+
+// Cubic Bezier curves (smoothest)
+const cubicPath = toSVGPathCubic(points, { smoothing: 0.25 })
+
+// Use in SVG
+svgElement.innerHTML = `<path d="${pathData}" stroke="black" fill="none"/>`
+```
+
+### Stroke Prediction
+
+Reduce perceived latency by predicting the next pen position based on velocity.
+
+```ts
+import { StrokePredictor } from '@stroke-stabilizer/core'
+
+const predictor = new StrokePredictor({
+  historySize: 4, // Points used for velocity estimation
+  maxPredictionMs: 50, // Maximum prediction time
+  minVelocity: 0.1, // Minimum velocity to trigger prediction
+})
+
+canvas.addEventListener('pointermove', (e) => {
+  const stabilized = pointer.process({
+    x: e.offsetX,
+    y: e.offsetY,
+    timestamp: e.timeStamp,
+  })
+
+  if (stabilized) {
+    predictor.addPoint(stabilized)
+
+    // Get predicted point 16ms ahead
+    const predicted = predictor.predict(16)
+    if (predicted) {
+      drawPreview(predicted.x, predicted.y)
+    }
+  }
+})
+```
+
+### Catmull-Rom Spline Interpolation
+
+Generate smooth curves through a series of points, useful for upsampling or rendering.
+
+```ts
+import {
+  interpolateCatmullRom,
+  resampleByArcLength,
+} from '@stroke-stabilizer/core'
+
+const points = pointer.finish()
+
+// Interpolate with Catmull-Rom spline
+const smooth = interpolateCatmullRom(points, {
+  tension: 0.5, // 0=loose, 1=tight
+  segmentDivisions: 10, // Points per segment
+})
+
+// Resample at uniform arc length intervals
+const uniform = resampleByArcLength(points, 5) // 5px between points
+```
+
 ## API Reference
 
 ### StabilizedPointer
@@ -435,8 +539,10 @@ interface Point {
 }
 
 interface PointerPoint extends Point {
-  pressure?: number
-  timestamp: number
+  pressure?: number // Pen pressure (0-1)
+  tiltX?: number // Pen tilt on X axis (-90 to 90 degrees)
+  tiltY?: number // Pen tilt on Y axis (-90 to 90 degrees)
+  timestamp: number // Event timestamp in ms
 }
 
 type PaddingMode = 'reflect' | 'edge' | 'zero'

package/dist/StabilizedPointer.d.ts

@@ -21,7 +21,7 @@ export interface StabilizedPointerOptions {
     appendEndpoint?: boolean;
 }
 /**
- * Dynamic Pipeline Pattern implementation
+ * Mutable Pipeline Pattern implementation
  *
  * A pipeline that allows adding, removing, and updating filters at runtime.
  * Always ready to execute without requiring a .build() call.

package/dist/filters/DouglasPeuckerFilter.d.ts

@@ -0,0 +1,37 @@
+import type { Filter, PointerPoint } from '../types';
+export interface DouglasPeuckerFilterParams {
+    /** Distance threshold (px). Points with perpendicular distance less than this are removed */
+    epsilon: number;
+}
+/**
+ * Create a Douglas-Peucker simplification filter
+ *
+ * This filter reduces the number of points while preserving the overall shape
+ * of the stroke. Useful for reducing data size or smoothing jaggy lines.
+ *
+ * @example
+ * ```ts
+ * const pointer = new StabilizedPointer()
+ *   .addFilter(douglasPeuckerFilter({ epsilon: 2 }))
+ *
+ * // Process points
+ * points.forEach(p => pointer.process(p))
+ *
+ * // Get simplified result
+ * const filter = pointer.getFilter('douglasPeucker') as ReturnType<typeof douglasPeuckerFilter>
+ * const simplified = filter.getSimplified()
+ * ```
+ */
+export declare function douglasPeuckerFilter(params: DouglasPeuckerFilterParams): Filter;
+/**
+ * Simplify an array of points using the Douglas-Peucker algorithm
+ *
+ * Standalone function for one-shot simplification without using a filter.
+ *
+ * @example
+ * ```ts
+ * const simplified = simplify(points, 2)
+ * ```
+ */
+export declare function simplify(points: PointerPoint[], epsilon: number): PointerPoint[];
+//# sourceMappingURL=DouglasPeuckerFilter.d.ts.map

package/dist/filters/DouglasPeuckerFilter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DouglasPeuckerFilter.d.ts","sourceRoot":"","sources":["../../src/filters/DouglasPeuckerFilter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,YAAY,EAAmB,MAAM,UAAU,CAAA;AAErE,MAAM,WAAW,0BAA0B;IACzC,6FAA6F;IAC7F,OAAO,EAAE,MAAM,CAAA;CAChB;AA2HD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,0BAA0B,GACjC,MAAM,CAER;AAED;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CACtB,MAAM,EAAE,YAAY,EAAE,EACtB,OAAO,EAAE,MAAM,GACd,YAAY,EAAE,CAKhB"}

package/dist/filters/EmaFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmaFilter.d.ts","sourceRoot":"","sources":["../../src/filters/EmaFilter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAiC,MAAM,UAAU,CAAA;AAErE,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAA;CACd;AA6DD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,MAAM,EAAE,eAAe,GAAG,MAAM,CAEzD"}
+{"version":3,"file":"EmaFilter.d.ts","sourceRoot":"","sources":["../../src/filters/EmaFilter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAiC,MAAM,UAAU,CAAA;AAErE,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAA;CACd;AA+ED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,MAAM,EAAE,eAAe,GAAG,MAAM,CAEzD"}

package/dist/filters/KalmanFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KalmanFilter.d.ts","sourceRoot":"","sources":["../../src/filters/KalmanFilter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAiC,MAAM,UAAU,CAAA;AAErE,MAAM,WAAW,kBAAkB;IACjC,4DAA4D;IAC5D,YAAY,EAAE,MAAM,CAAA;IACpB,wEAAwE;IACxE,gBAAgB,EAAE,MAAM,CAAA;CACzB;AA4ED;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,kBAAkB,GAAG,MAAM,CAE/D"}
+{"version":3,"file":"KalmanFilter.d.ts","sourceRoot":"","sources":["../../src/filters/KalmanFilter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAiC,MAAM,UAAU,CAAA;AAErE,MAAM,WAAW,kBAAkB;IACjC,4DAA4D;IAC5D,YAAY,EAAE,MAAM,CAAA;IACpB,wEAAwE;IACxE,gBAAgB,EAAE,MAAM,CAAA;CACzB;AA8ED;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,kBAAkB,GAAG,MAAM,CAE/D"}

package/dist/filters/LinearPredictionFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinearPredictionFilter.d.ts","sourceRoot":"","sources":["../../src/filters/LinearPredictionFilter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAiC,MAAM,UAAU,CAAA;AAErE,MAAM,WAAW,4BAA4B;IAC3C;;;;OAIG;IACH,WAAW,EAAE,MAAM,CAAA;IACnB;;;;;OAKG;IACH,gBAAgB,EAAE,MAAM,CAAA;IACxB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA8OD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,4BAA4B,GACnC,MAAM,CAER"}
+{"version":3,"file":"LinearPredictionFilter.d.ts","sourceRoot":"","sources":["../../src/filters/LinearPredictionFilter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAiC,MAAM,UAAU,CAAA;AAErE,MAAM,WAAW,4BAA4B;IAC3C;;;;OAIG;IACH,WAAW,EAAE,MAAM,CAAA;IACnB;;;;;OAKG;IACH,gBAAgB,EAAE,MAAM,CAAA;IACxB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA0PD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,4BAA4B,GACnC,MAAM,CAER"}

package/dist/filters/MovingAverageFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MovingAverageFilter.d.ts","sourceRoot":"","sources":["../../src/filters/MovingAverageFilter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAiC,MAAM,UAAU,CAAA;AAErE,MAAM,WAAW,yBAAyB;IACxC,kCAAkC;IAClC,UAAU,EAAE,MAAM,CAAA;CACnB;AAoED;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,yBAAyB,GAAG,MAAM,CAE7E"}
+{"version":3,"file":"MovingAverageFilter.d.ts","sourceRoot":"","sources":["../../src/filters/MovingAverageFilter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAiC,MAAM,UAAU,CAAA;AAErE,MAAM,WAAW,yBAAyB;IACxC,kCAAkC;IAClC,UAAU,EAAE,MAAM,CAAA;CACnB;AAoFD;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,yBAAyB,GAAG,MAAM,CAE7E"}

package/dist/filters/OneEuroFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OneEuroFilter.d.ts","sourceRoot":"","sources":["../../src/filters/OneEuroFilter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAiC,MAAM,UAAU,CAAA;AAErE,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,SAAS,EAAE,MAAM,CAAA;IACjB;;;;;OAKG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAqKD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,mBAAmB,GAAG,MAAM,CAEjE"}
+{"version":3,"file":"OneEuroFilter.d.ts","sourceRoot":"","sources":["../../src/filters/OneEuroFilter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAiC,MAAM,UAAU,CAAA;AAErE,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,SAAS,EAAE,MAAM,CAAA;IACjB;;;;;OAKG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AA2LD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,mBAAmB,GAAG,MAAM,CAEjE"}

package/dist/filters/StringFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StringFilter.d.ts","sourceRoot":"","sources":["../../src/filters/StringFilter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAiC,MAAM,UAAU,CAAA;AAErE,MAAM,WAAW,kBAAkB;IACjC,2CAA2C;IAC3C,YAAY,EAAE,MAAM,CAAA;CACrB;AA8DD;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,kBAAkB,GAAG,MAAM,CAE/D"}
+{"version":3,"file":"StringFilter.d.ts","sourceRoot":"","sources":["../../src/filters/StringFilter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAiC,MAAM,UAAU,CAAA;AAErE,MAAM,WAAW,kBAAkB;IACjC,2CAA2C;IAC3C,YAAY,EAAE,MAAM,CAAA;CACrB;AAkED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,kBAAkB,GAAG,MAAM,CAE/D"}

package/dist/filters/index.d.ts

@@ -12,4 +12,6 @@ export { oneEuroFilter } from './OneEuroFilter';
 export type { OneEuroFilterParams } from './OneEuroFilter';
 export { linearPredictionFilter } from './LinearPredictionFilter';
 export type { LinearPredictionFilterParams } from './LinearPredictionFilter';
+export { douglasPeuckerFilter, simplify } from './DouglasPeuckerFilter';
+export type { DouglasPeuckerFilterParams } from './DouglasPeuckerFilter';
 //# sourceMappingURL=index.d.ts.map

package/dist/filters/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/filters/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,YAAY,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAEtD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,YAAY,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAExD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,YAAY,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAA;AAEtE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,YAAY,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAExD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,YAAY,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAElD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,YAAY,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAA;AAE1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AACjE,YAAY,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/filters/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,YAAY,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAEtD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,YAAY,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAExD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,YAAY,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAA;AAEtE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,YAAY,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAExD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,YAAY,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAElD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,YAAY,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAA;AAE1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AACjE,YAAY,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAA;AAE5E,OAAO,EAAE,oBAAoB,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AACvE,YAAY,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAA"}