ppu-ocv 3.2.2 → 3.3.0

package/README.md

@@ -29,6 +29,7 @@ Based on [TechStark/opencv-js](https://github.com/TechStark/opencv-js).
 - [Usage (Node.js / Bun)](#usage-nodejs--bun)
 - [Canvas-only Usage (no OpenCV)](#canvas-only-usage-no-opencv)
 - [Web / Browser Support](#web--browser-support)
+- [React Native / Mobile Support](#react-native--mobile-support)
 - [Built-in Pipeline Operations](#built-in-pipeline-operations)
 - [Extending Operations](#extending-operations)
 - [Class Documentation](#class-documentation)
@@ -211,12 +212,13 @@ See the [interactive demo](./index.html) for a full working example.
 
 ### Entry point reference
 
-| Import path          | OpenCV | Canvas backend                        | `CanvasToolkit`      | Use case                                   |
-| -------------------- | ------ | ------------------------------------- | -------------------- | ------------------------------------------ |
-| `ppu-ocv`            | ✅     | `@napi-rs/canvas`                     | Full (with file I/O) | Full pipeline, Node.js / Bun               |
-| `ppu-ocv/web`        | ✅     | `HTMLCanvasElement`/`OffscreenCanvas` | Base only            | Full pipeline, browser                     |
-| `ppu-ocv/canvas`     | ❌     | `@napi-rs/canvas`                     | Full (with file I/O) | Canvas-only, Node (extensions, edge, etc.) |
-| `ppu-ocv/canvas-web` | ❌     | `HTMLCanvasElement`/`OffscreenCanvas` | Base only            | Canvas-only, browser extensions / SW       |
+| Import path             | OpenCV | Canvas backend                        | `CanvasToolkit`      | Use case                                   |
+| ----------------------- | ------ | ------------------------------------- | -------------------- | ------------------------------------------ |
+| `ppu-ocv`               | ✅     | `@napi-rs/canvas`                     | Full (with file I/O) | Full pipeline, Node.js / Bun               |
+| `ppu-ocv/web`           | ✅     | `HTMLCanvasElement`/`OffscreenCanvas` | Base only            | Full pipeline, browser                     |
+| `ppu-ocv/canvas`        | ❌     | `@napi-rs/canvas`                     | Full (with file I/O) | Canvas-only, Node (extensions, edge, etc.) |
+| `ppu-ocv/canvas-web`    | ❌     | `HTMLCanvasElement`/`OffscreenCanvas` | Base only            | Canvas-only, browser extensions / SW       |
+| `ppu-ocv/canvas-mobile` | ❌     | `@shopify/react-native-skia`          | Base only            | Canvas-only, React Native / Expo           |
 
 ### Platform abstraction
 
@@ -240,6 +242,57 @@ const myPlatform: CanvasPlatform = {
 setPlatform(myPlatform);
 ```
 
+## React Native / Mobile Support
+
+Import from `ppu-ocv/canvas-mobile` for React Native apps (iOS / Android). This
+entry point is backed by [`@shopify/react-native-skia`](https://shopify.github.io/react-native-skia/)
+and is functionally equivalent to `ppu-ocv/canvas-web` — it exposes `CanvasProcessor`,
+`CanvasToolkitBase`, and canvas factory types **without any OpenCV or WASM dependency**.
+
+### Installation
+
+```bash
+# In your React Native / Expo project
+npm install ppu-ocv @shopify/react-native-skia
+# or
+bun add ppu-ocv @shopify/react-native-skia
+```
+
+Follow the [react-native-skia setup guide](https://shopify.github.io/react-native-skia/docs/getting-started/installation)
+to complete native installation (pod install / Gradle sync). Skia **must** be
+initialised by the time you call any `ppu-ocv` API.
+
+### Usage
+
+```ts
+import { CanvasProcessor } from "ppu-ocv/canvas-mobile";
+
+// Load from an ArrayBuffer (e.g. from expo-file-system or fetch)
+const response = await fetch("https://example.com/receipt.jpg");
+const canvas = await CanvasProcessor.prepareCanvas(await response.arrayBuffer());
+
+// Or load directly from a URI (file:// or https://)
+const canvas = await CanvasProcessor.prepareCanvas("file:///path/to/photo.jpg");
+
+// Chainable canvas-only pipeline (no OpenCV)
+const regions = new CanvasProcessor(canvas)
+  .grayscale()
+  .threshold({ thresh: 127 })
+  .findRegions({ foreground: "light", minArea: 20 });
+
+// Export back to bytes
+const buffer = await CanvasProcessor.prepareBuffer(canvas);
+```
+
+### Requirements
+
+- `@shopify/react-native-skia` ≥ 1.0.0
+- React Native ≥ 0.74 / Expo SDK ≥ 51 (Hermes engine)
+
+> **Note:** OpenCV (`@techstark/opencv-js`) is never loaded by this entry point.
+> If you need full OpenCV operations in a React Native context, consider running
+> the processing server-side and streaming results to the device.
+
 ## Built-in pipeline operations
 
 To avoid bloat, we only ship essential operations for chaining. Currently shipped operations are:

package/canvas-factory.d.ts

@@ -12,7 +12,6 @@ export type CanvasLike = {
     getContext(contextId: "2d"): any;
     /** Serialize the canvas to a binary buffer (Node-side `@napi-rs/canvas`). Absent on browser canvases. */
     toBuffer?: (...args: any[]) => Buffer;
-    /** Serialize the canvas to a data-URL string (browser canvases). Absent on Node-side `@napi-rs/canvas`. */
     toDataURL?: (...args: any[]) => string;
     /** Asynchronously serialize to a `Blob` via callback (browser `HTMLCanvasElement`). */
     toBlob?: (callback: (blob: Blob | null) => void, type?: string, quality?: number) => void;

package/canvas-factory.js

@@ -1 +1 @@
-let _platform=null;export function setPlatform(platform){_platform=platform}export function getPlatform(){if(!_platform){throw new Error("No canvas platform registered. "+'Import "ppu-ocv" (Node), "ppu-ocv/web" (browser), '+'"ppu-ocv/canvas" (Node canvas-only), or "ppu-ocv/canvas-web" (browser canvas-only) to auto-register.')}return _platform}export function isCanvasLike(value){return typeof value==="object"&&value!==null&&typeof value.getContext==="function"&&typeof value.width==="number"&&typeof value.height==="number"}
+let _platform=null;export function setPlatform(platform){_platform=platform}export function getPlatform(){if(!_platform){throw new Error("No canvas platform registered. "+'Import "ppu-ocv" (Node), "ppu-ocv/web" (browser), '+'"ppu-ocv/canvas" (Node canvas-only), "ppu-ocv/canvas-web" (browser canvas-only), '+'or "ppu-ocv/canvas-mobile" (React Native / Skia) to auto-register.')}return _platform}export function isCanvasLike(value){return typeof value==="object"&&value!==null&&typeof value.getContext==="function"&&typeof value.width==="number"&&typeof value.height==="number"}

package/canvas-io.d.ts

@@ -5,10 +5,10 @@
  */
 import type { CanvasLike } from "./canvas-factory.js";
 /**
- * Convert an ArrayBuffer (image file bytes) to a CanvasLike. If the value is
+ * Convert an ArrayBuffer (image file bytes) or string URI to a CanvasLike. If the value is
  * already a CanvasLike it is returned as-is.
  */
-export declare function bufferToCanvas(file: ArrayBuffer): Promise<CanvasLike>;
+export declare function bufferToCanvas(file: ArrayBuffer | string | CanvasLike): Promise<CanvasLike>;
 /**
  * Convert a CanvasLike to an ArrayBuffer (PNG bytes). If the value is already
  * an ArrayBuffer it is returned as-is.

package/canvas-processor.d.ts

@@ -173,10 +173,10 @@ export declare class CanvasProcessor {
      */
     toCanvas(): CanvasLike;
     /**
-     * Convert an ArrayBuffer (image file bytes) to a CanvasLike.
+     * Convert an ArrayBuffer (image file bytes) or string URI to a CanvasLike.
      * If the value is already a CanvasLike it is returned as-is.
      */
-    static prepareCanvas(file: ArrayBuffer): Promise<CanvasLike>;
+    static prepareCanvas(file: ArrayBuffer | string | CanvasLike): Promise<CanvasLike>;
     /**
      * Convert a CanvasLike to an ArrayBuffer (PNG bytes).
      * If the value is already an ArrayBuffer it is returned as-is.

package/deskew-angles.js

@@ -1 +1 @@
-import{cv}from"./cv-provider.js";export function calculateLineAngle(points){if(points.length<2)return 0;let n=points.length;let sumX=points.reduce((sum,p)=>sum+p.x,0);let sumY=points.reduce((sum,p)=>sum+p.y,0);let sumXY=points.reduce((sum,p)=>sum+p.x*p.y,0);let sumXX=points.reduce((sum,p)=>sum+p.x*p.x,0);let denominator=n*sumXX-sumX*sumX;if(Math.abs(denominator)<0.0000000001)return 0;let slope=(n*sumXY-sumX*sumY)/denominator;let angle=Math.atan(slope)*180/Math.PI;if(angle>45)angle-=90;if(angle<-45)angle+=90;return angle}export function calculateMinRectAngles(textRegions){let angles=[];for(let region of textRegions){try{let minRect=cv.minAreaRect(region.contour);if(!minRect)continue;let angle=minRect.angle;if(angle>45){angle-=90}else if(angle<-45){angle+=90}let areaWeight=Math.log(region.area+1);let aspectWeight=Math.min(region.aspectRatio,1/region.aspectRatio)*2;let weight=areaWeight*aspectWeight;angles.push({angle,weight})}catch{continue}}return angles}export function calculateBaselineAngles(textRegions){let angles=[];for(let region of textRegions){try{let points=region.contour.data32S;if(!points||points.length<8)continue;let bottomPoints=[];for(let i=0;i<points.length;i+=2){let x=points[i];let y=points[i+1];if(x!==undefined&&y!==undefined){bottomPoints.push({x,y})}}if(bottomPoints.length<3)continue;bottomPoints.sort((a,b)=>a.x-b.x);let segments=3;let segmentSize=Math.floor(bottomPoints.length/segments);let baselinePoints=[];for(let seg=0;seg<segments;seg++){let start=seg*segmentSize;let end=seg===segments-1?bottomPoints.length:(seg+1)*segmentSize;let segmentPoints=bottomPoints.slice(start,end);if(segmentPoints.length>0){let maxYPoint=segmentPoints.reduce((max,point)=>point.y>max.y?point:max);baselinePoints.push(maxYPoint)}}if(baselinePoints.length>=2){let angle=calculateLineAngle(baselinePoints);let weight=region.area*Math.min(region.aspectRatio,1/region.aspectRatio);angles.push({angle,weight})}}catch{continue}}return angles}export function calculateHoughAngles(mat,minAngle,maxAngle,log){let angles=[];try{let kernel=cv.getStructuringElement(cv.MORPH_RECT,new cv.Size(3,1));let morphed=new cv.Mat;cv.morphologyEx(mat,morphed,cv.MORPH_CLOSE,kernel);let lines=new cv.Mat;cv.HoughLinesP(morphed,lines,1,Math.PI/180,30,50,10);for(let i=0;i<lines.rows;i++){let line=lines.data32S.subarray(i*4,(i+1)*4);const[x1,y1,x2,y2]=line;if(x1!==undefined&&y1!==undefined&&x2!==undefined&&y2!==undefined){let dx=x2-x1;let dy=y2-y1;if(Math.abs(dx)>1){let angle=Math.atan2(dy,dx)*180/Math.PI;if(angle>45)angle-=90;if(angle<-45)angle+=90;if(angle>=minAngle&&angle<=maxAngle){let lineLength=Math.sqrt(dx*dx+dy*dy);angles.push({angle,weight:lineLength})}}}}morphed.delete();lines.delete();kernel.delete()}catch{log("Hough transform failed, skipping this method.")}return angles}export function calculateConsensusAngle(angles,minAngle,maxAngle,log){if(angles.length===0)return 0;let sortedAngles=[...angles].sort((a,b)=>a.angle-b.angle);let q1Index=Math.floor(sortedAngles.length*0.25);let q3Index=Math.floor(sortedAngles.length*0.75);let q1=sortedAngles[q1Index]?.angle||0;let q3=sortedAngles[q3Index]?.angle||0;let iqr=q3-q1;let lowerBound=q1-1.5*iqr;let upperBound=q3+1.5*iqr;let filteredAngles=angles.filter((a)=>a.angle>=lowerBound&&a.angle<=upperBound&&a.angle>=minAngle&&a.angle<=maxAngle);if(filteredAngles.length===0){log("All angles filtered out as outliers, using median of original set.");let medianIndex=Math.floor(sortedAngles.length/2);return sortedAngles[medianIndex]?.angle||0}let totalWeight=filteredAngles.reduce((sum,a)=>sum+a.weight,0);if(totalWeight===0){let average=filteredAngles.reduce((sum,a)=>sum+a.angle,0)/filteredAngles.length;return average}let weightedSum=filteredAngles.reduce((sum,a)=>sum+a.angle*a.weight,0);let weightedAverage=weightedSum/totalWeight;let methodCounts=filteredAngles.reduce((counts,a)=>{counts[a.method]=(counts[a.method]||0)+1;return counts},{});log(`Angle methods used: ${Object.entries(methodCounts).map(([method,count])=>`${method}:${count}`).join(", ")}`);return Math.max(minAngle,Math.min(maxAngle,weightedAverage))}
+import{cv}from"./cv-provider.js";export function calculateLineAngle(points){if(points.length<2)return 0;let n=points.length;let sumX=0,sumY=0,sumXY=0,sumXX=0;for(let p of points){sumX+=p.x;sumY+=p.y;sumXY+=p.x*p.y;sumXX+=p.x*p.x}let denominator=n*sumXX-sumX*sumX;if(Math.abs(denominator)<0.0000000001)return 0;let slope=(n*sumXY-sumX*sumY)/denominator;let angle=Math.atan(slope)*180/Math.PI;if(angle>45)angle-=90;if(angle<-45)angle+=90;return angle}export function calculateMinRectAngles(textRegions){let angles=[];for(let region of textRegions){try{let minRect=cv.minAreaRect(region.contour);if(!minRect)continue;let angle=minRect.angle;if(angle>45){angle-=90}else if(angle<-45){angle+=90}let areaWeight=Math.log(region.area+1);let aspectWeight=Math.min(region.aspectRatio,1/region.aspectRatio)*2;let weight=areaWeight*aspectWeight;angles.push({angle,weight})}catch{continue}}return angles}export function calculateBaselineAngles(textRegions){let angles=[];for(let region of textRegions){try{let points=region.contour.data32S;if(!points||points.length<8)continue;let minX=1/0;let maxX=-1/0;for(let i=0;i<points.length;i+=2){let x=points[i];if(x!==undefined){if(x<minX)minX=x;if(x>maxX)maxX=x}}if(minX===1/0)continue;let bucketMaxY=[null,null,null];let xRange=maxX-minX||1;for(let i=0;i<points.length;i+=2){let x=points[i];let y=points[i+1];if(x===undefined||y===undefined)continue;let bucket=Math.min(2,Math.floor((x-minX)/xRange*3));let current=bucketMaxY[bucket];if(current===null||y>current.y){bucketMaxY[bucket]={x,y}}}let baselinePoints=bucketMaxY.filter((p)=>p!==null);if(baselinePoints.length>=2){let angle=calculateLineAngle(baselinePoints);let weight=region.area*Math.min(region.aspectRatio,1/region.aspectRatio);angles.push({angle,weight})}}catch{continue}}return angles}export function calculateHoughAngles(mat,minAngle,maxAngle,log){let angles=[];try{let kernel=cv.getStructuringElement(cv.MORPH_RECT,new cv.Size(3,1));let morphed=new cv.Mat;cv.morphologyEx(mat,morphed,cv.MORPH_CLOSE,kernel);let lines=new cv.Mat;cv.HoughLinesP(morphed,lines,1,Math.PI/180,30,50,10);for(let i=0;i<lines.rows;i++){let line=lines.data32S.subarray(i*4,(i+1)*4);const[x1,y1,x2,y2]=line;if(x1!==undefined&&y1!==undefined&&x2!==undefined&&y2!==undefined){let dx=x2-x1;let dy=y2-y1;if(Math.abs(dx)>1){let angle=Math.atan2(dy,dx)*180/Math.PI;if(angle>45)angle-=90;if(angle<-45)angle+=90;if(angle>=minAngle&&angle<=maxAngle){let lineLength=Math.sqrt(dx*dx+dy*dy);angles.push({angle,weight:lineLength})}}}}morphed.delete();lines.delete();kernel.delete()}catch{log("Hough transform failed, skipping this method.")}return angles}export function calculateConsensusAngle(angles,minAngle,maxAngle,log){if(angles.length===0)return 0;let sortedAngles=[...angles].sort((a,b)=>a.angle-b.angle);let q1Index=Math.floor(sortedAngles.length*0.25);let q3Index=Math.floor(sortedAngles.length*0.75);let q1=sortedAngles[q1Index]?.angle||0;let q3=sortedAngles[q3Index]?.angle||0;let iqr=q3-q1;let lowerBound=q1-1.5*iqr;let upperBound=q3+1.5*iqr;let filteredAngles=angles.filter((a)=>a.angle>=lowerBound&&a.angle<=upperBound&&a.angle>=minAngle&&a.angle<=maxAngle);if(filteredAngles.length===0){log("All angles filtered out as outliers, using median of original set.");let medianIndex=Math.floor(sortedAngles.length/2);return sortedAngles[medianIndex]?.angle||0}let totalWeight=0;let weightedSum=0;let unweightedSum=0;let methodCounts={};for(let a of filteredAngles){totalWeight+=a.weight;weightedSum+=a.angle*a.weight;unweightedSum+=a.angle;methodCounts[a.method]=(methodCounts[a.method]||0)+1}if(totalWeight===0){return unweightedSum/filteredAngles.length}log(`Angle methods used: ${Object.entries(methodCounts).map(([method,count])=>`${method}:${count}`).join(", ")}`);let weightedAverage=weightedSum/totalWeight;return Math.max(minAngle,Math.min(maxAngle,weightedAverage))}

package/index.canvas-mobile.d.ts

@@ -0,0 +1,6 @@
+export type { BoundingBox, Coordinate, Points } from "./index.interface.js";
+export { getPlatform, setPlatform } from "./canvas-factory.js";
+export type { CanvasLike, CanvasPlatform, Context2DLike } from "./canvas-factory.js";
+export { mobilePlatform } from "./platform/mobile.js";
+export { CanvasToolkitBase as CanvasToolkit, CanvasToolkitBase, type ContourLike, } from "./canvas-toolkit.base.js";
+export { CanvasProcessor, type DetectedRegion } from "./canvas-processor.js";

package/index.canvas-mobile.js

@@ -0,0 +1 @@
+import{setPlatform}from"./canvas-factory.js";import{mobilePlatform}from"./platform/mobile.js";setPlatform(mobilePlatform);export{getPlatform,setPlatform}from"./canvas-factory.js";export{mobilePlatform}from"./platform/mobile.js";export{CanvasToolkitBase as CanvasToolkit,CanvasToolkitBase}from"./canvas-toolkit.base.js";export{CanvasProcessor}from"./canvas-processor.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ppu-ocv",
-  "version": "3.2.2",
+  "version": "3.3.0",
   "description": "A type-safe, modular, chainable image processing library built on top of OpenCV.js with a fluent API leveraging pipeline processing.",
   "keywords": [
     "open-cv",
@@ -41,6 +41,10 @@
     "./canvas-web": {
       "types": "./index.canvas-web.d.ts",
       "default": "./index.canvas-web.js"
+    },
+    "./canvas-mobile": {
+      "types": "./index.canvas-mobile.d.ts",
+      "default": "./index.canvas-mobile.js"
     }
   },
   "repository": {
@@ -50,5 +54,16 @@
   "dependencies": {
     "@napi-rs/canvas": "^1.0.0",
     "@techstark/opencv-js": "^4.10.0-release.1"
-  }
+  },
+  "peerDependencies": {
+    "@shopify/react-native-skia": ">=1.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@shopify/react-native-skia": {
+      "optional": true
+    }
+  },
+  "trustedDependencies": [
+    "@shopify/react-native-skia"
+  ]
 }

package/platform/mobile.d.ts

@@ -0,0 +1,21 @@
+/**
+ * React Native platform adapter for ppu-ocv, backed by @shopify/react-native-skia.
+ *
+ * The Skia JS Canvas2D API surface is close enough to the browser's that a
+ * thin shim layer is all we need:
+ *
+ *  - SkiaCanvasLike  wraps an SkSurface and exposes width / height / getContext("2d")
+ *  - SkiaContext2DLike bridges Skia's SkCanvas drawing commands to the Context2DLike
+ *    interface consumed by CanvasProcessor and CanvasToolkitBase
+ *
+ * Import requirements:
+ *  - @shopify/react-native-skia ≥ 1.0.0 must be installed by the consuming app
+ *  - React Native ≥ 0.74 / Expo SDK ≥ 51 (Hermes engine)
+ *
+ * This file uses a **lazy import** pattern — the Skia module is only resolved at
+ * runtime inside mobilePlatform, so bundlers for other entries (Node / browser)
+ * never pull Skia code in.
+ */
+import type { CanvasPlatform } from "../canvas-factory.js";
+/** React Native canvas platform backed by @shopify/react-native-skia */
+export declare const mobilePlatform: CanvasPlatform;

package/platform/mobile.js

@@ -0,0 +1 @@
+class SkiaContext2DLike{_surface;_skCanvas;_path=null;_parentCanvas;strokeStyle="#000000";fillStyle="#000000";lineWidth=1;constructor(surface,parentCanvas){this._surface=surface;this._skCanvas=surface.getCanvas();this._parentCanvas=parentCanvas}get canvas(){return this._parentCanvas}getImageData(sx,sy,sw,sh){const{Skia,AlphaType,ColorType}=getSkia();let snapshot=this._surface.makeImageSnapshot();let info={width:sw,height:sh,colorType:ColorType.RGBA_8888,alphaType:AlphaType.Unpremul};let pixels=snapshot.readPixels(sx,sy,info);if(!pixels){throw new Error(`SkiaContext2DLike.getImageData: readPixels returned null `+`(surface may have been released, region: ${sx},${sy} ${sw}×${sh})`)}return{data:new Uint8ClampedArray(pixels.buffer,pixels.byteOffset,pixels.byteLength),width:sw,height:sh}}putImageData(imageData,dx,dy){const{Skia,AlphaType,ColorType}=getSkia();const{data,width,height}=imageData;let bytes=new Uint8Array(data.buffer,data.byteOffset,data.byteLength);let skData=Skia.Data.fromBytes(bytes);let img=Skia.Image.MakeImage({width,height,colorType:ColorType.RGBA_8888,alphaType:AlphaType.Unpremul},skData,width*4);if(!img){throw new Error("SkiaContext2DLike.putImageData: MakeImage returned null")}this._skCanvas.drawImage(img,dx,dy);this._surface.flush()}createImageData(width,height){return{data:new Uint8ClampedArray(width*height*4),width,height}}drawImage(...args){let src=args[0];let img;if(src instanceof SkiaCanvasLike){img=src._surface.makeImageSnapshot()}else if(src&&typeof src._skiaImage!=="undefined"){img=src._skiaImage}else{throw new Error("SkiaContext2DLike.drawImage: source must be a SkiaCanvasLike (use mobilePlatform.loadImage)")}if(args.length===3){this._skCanvas.drawImage(img,args[1],args[2])}else if(args.length===5){const{Skia}=getSkia();let dstRect=Skia.XYWHRect(args[1],args[2],args[3],args[4]);let srcRect=Skia.XYWHRect(0,0,img.width(),img.height());this._skCanvas.drawImageRect(img,srcRect,dstRect,Skia.Paint())}else if(args.length===9){const{Skia}=getSkia();let srcRect=Skia.XYWHRect(args[1],args[2],args[3],args[4]);let dstRect=Skia.XYWHRect(args[5],args[6],args[7],args[8]);this._skCanvas.drawImageRect(img,srcRect,dstRect,Skia.Paint())}else{throw new Error(`SkiaContext2DLike.drawImage: unsupported argument count (${args.length})`)}this._surface.flush()}fillRect(x,y,w,h){const{Skia}=getSkia();let paint=Skia.Paint();paint.setColor(Skia.Color(this.fillStyle));this._skCanvas.drawRect(Skia.XYWHRect(x,y,w,h),paint);this._surface.flush()}strokeRect(x,y,w,h){const{Skia,PaintStyle}=getSkia();let paint=Skia.Paint();paint.setColor(Skia.Color(this.strokeStyle));paint.setStyle(PaintStyle.Stroke);paint.setStrokeWidth(this.lineWidth);this._skCanvas.drawRect(Skia.XYWHRect(x,y,w,h),paint);this._surface.flush()}beginPath(){const{Skia}=getSkia();this._path=Skia.Path.Make()}closePath(){this._path?.close()}moveTo(x,y){this._path?.moveTo(x,y)}lineTo(x,y){this._path?.lineTo(x,y)}stroke(){if(!this._path)return;const{Skia,PaintStyle}=getSkia();let paint=Skia.Paint();paint.setColor(Skia.Color(this.strokeStyle));paint.setStyle(PaintStyle.Stroke);paint.setStrokeWidth(this.lineWidth);this._skCanvas.drawPath(this._path,paint);this._surface.flush()}save(){this._skCanvas.save()}restore(){this._skCanvas.restore()}translate(x,y){this._skCanvas.translate(x,y)}rotate(angle){this._skCanvas.rotate(angle*180/Math.PI,0,0)}}class SkiaCanvasLike{_surface;_ctx=null;constructor(surface){this._surface=surface}get width(){return this._surface.width()}get height(){return this._surface.height()}getContext(_contextId){if(!this._ctx){this._ctx=new SkiaContext2DLike(this._surface,this)}return this._ctx}}let _skia=null;function getSkia(){if(_skia)return _skia;_skia=require("@shopify/react-native-skia");return _skia}export let mobilePlatform={createCanvas(width,height){const{Skia}=getSkia();let surface=Skia.Surface.Make(width,height);if(!surface){throw new Error(`mobilePlatform.createCanvas: Skia.Surface.Make(${width}, ${height}) returned null. `+"Ensure @shopify/react-native-skia is correctly installed and Skia is initialised.")}return new SkiaCanvasLike(surface)},async loadImage(source){const{Skia,AlphaType,ColorType}=getSkia();let skData;if(source instanceof ArrayBuffer){skData=Skia.Data.fromBytes(new Uint8Array(source))}else if(typeof source==="string"){skData=await Skia.Data.fromURI(source)}else{throw new Error("mobilePlatform.loadImage: source must be an ArrayBuffer or string URI")}let image=Skia.Image.MakeImageFromEncoded(skData);if(!image){throw new Error("mobilePlatform.loadImage: MakeImageFromEncoded returned null — "+"the image data may be corrupt or in an unsupported format.")}let width=image.width();let height=image.height();let surface=Skia.Surface.Make(width,height);if(!surface){throw new Error("mobilePlatform.loadImage: Skia.Surface.Make returned null")}let canvas=surface.getCanvas();canvas.drawImage(image,0,0);surface.flush();return new SkiaCanvasLike(surface)},isCanvas(value){return value instanceof SkiaCanvasLike}};