@react-opencv/fiber 0.1.2 → 0.1.3

package/README.md

@@ -1,5 +1,7 @@
 # react-opencv-fiber
 
+[![npm version](https://img.shields.io/npm/v/@react-opencv/fiber.svg)](https://www.npmjs.com/package/@react-opencv/fiber)
+
 A React renderer for OpenCV.js. Write image-processing pipelines as JSX — each element maps to an OpenCV operation, and the tree executes bottom-up through a custom React reconciler.
 
 [**Live demo**](https://erasta.github.io/react-opencv-fiber/)
@@ -89,6 +91,19 @@ Operations are nested inside-out — the innermost element runs first:
 
 Props map directly to OpenCV function parameters. Array values are coerced to the appropriate OpenCV types (`Size`, `Point`, `Scalar`).
 
+#### `__srcParam` / `__dstParam`
+
+By default, each operation is called as `cv.op(src, dst, ...params)` — matching the OpenCV.js convention of `src` at position 0 and `dst` at position 1. Some functions use a different argument order. Use `__srcParam` and `__dstParam` to override the position:
+
+```tsx
+{/* applyColorMap expects cv.applyColorMap(src, colormap, dst) */}
+<cvApplyColorMap colormap={2} __dstParam={2}>
+  <cvCvtColor code={11}>
+    <cvImage src="photo.jpg" />
+  </cvCvtColor>
+</cvApplyColorMap>
+```
+
 ### `<cvImage>`
 
 Special element that loads an image (URL or data URI) into a `Mat`.
@@ -97,14 +112,28 @@ Special element that loads an image (URL or data URI) into a `Mat`.
 <cvImage src="https://example.com/photo.jpg" />
 ```
 
-## Demo
+## Examples
+
+The `examples/` directory contains interactive demos with different filter combinations. [**Live demo**](https://erasta.github.io/react-opencv-fiber/)
+
+<p>
+  <img src="gifs/canny-gaussian.gif" width="400" />
+  <img src="gifs/adaptive-threshold-blur.gif" width="400" />
+</p>
+<p>
+  <img src="gifs/edge-preserving-canny.gif" width="400" />
+  <img src="gifs/laplacian-blur.gif" width="400" />
+</p>
+<p>
+  <img src="gifs/median-equalize.gif" width="400" />
+</p>
 
-The `demo/` directory contains a small app with a slider-driven pipeline (blur + grayscale + Canny edge detection). To run it:
+To run locally:
 
 ```sh
 npm install
-cd demo && npm install
-npm run dev
+npm run build
+cd examples && npm install && npx vite
 ```
 
 ## Acknowledgements

package/dist/components/OpenCvProvider.d.ts

@@ -1,8 +1,8 @@
-import type { OpenCVContextValue } from "../types";
+import type { CvDebugConfig, OpenCVContextValue } from "../types";
 export declare function useOpenCv(): OpenCVContextValue;
-export declare const OpenCvProvider: ({ openCvVersion, openCvPath, verbose, children, }: {
+export declare const OpenCvProvider: ({ openCvVersion, openCvPath, debug, children, }: {
     openCvVersion?: string;
     openCvPath?: string;
-    verbose?: boolean;
+    debug?: CvDebugConfig;
     children: any;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/fiber/executePipeline.d.ts

@@ -1,3 +1,3 @@
-import type { CV, Mat } from "../types";
+import type { CV, Mat, CvDebugConfig } from "../types";
 import { CvNode } from "./CvNode";
-export declare function executePipeline(cv: CV, node: CvNode): Promise<Mat | null>;
+export declare function executePipeline(cv: CV, node: CvNode, missingOps?: Set<string>, debug?: CvDebugConfig): Promise<Mat | null>;

package/dist/fiber/matDebug.d.ts

@@ -0,0 +1,2 @@
+import type { Mat } from "../types";
+export declare const descMat: (m: Mat) => string;

package/dist/index.d.ts

@@ -3,4 +3,4 @@ export { CvCanvas } from "./fiber/CvCanvas";
 export type { CvCanvasProps } from "./fiber/CvCanvas";
 export type { CvOpProps } from "./fiber/types";
 import "./fiber/types";
-export type { CV, Mat, OpenCVContextValue, ParamConfig, SignatureParam, SignatureOverload, SignatureEntry, } from "./types";
+export type { CV, Mat, CvDebugConfig, OpenCVContextValue, ParamConfig, SignatureParam, SignatureOverload, SignatureEntry, } from "./types";