@pompadour/react-native-skia 1.4.0

package/lib/module/skia/web/JsiSkia.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["JsiSkPoint","JsiSkPaint","JsiSkRect","Color","JsiSkSurfaceFactory","JsiSkRRect","JsiSkRSXform","JsiSkContourMeasureIter","JsiSkPictureRecorder","JsiSkPictureFactory","JsiSkPathFactory","JsiSkMatrix","JsiSkColorFilterFactory","JsiSkTypefaceFactory","JsiSkMaskFilterFactory","JsiSkRuntimeEffectFactory","JsiSkImageFilterFactory","JsiSkShaderFactory","JsiSkPathEffectFactory","JsiSkDataFactory","JsiSkImageFactory","JsiSkSVGFactory","JsiSkTextBlobFactory","JsiSkFont","MakeVertices","JsiSkPath","JsiSkTypeface","JsiSkTypefaceFontProviderFactory","JsiSkFontMgrFactory","JsiSkAnimatedImageFactory","JsiSkParagraphBuilderFactory","JsiSkNativeBufferFactory","createVideo","JsiSkApi","CanvasKit","Point","x","y","Float32Array","of","RuntimeShaderBuilder","_","Error","RRectXY","rect","rx","ry","RSXform","scos","ssin","tx","ty","RSXformFromRadians","scale","r","px","py","s","Math","sin","c","cos","ContourMeasureIter","path","forceClosed","resScale","fromValue","Paint","paint","setAntiAlias","PictureRecorder","Picture","Path","Matrix","matrix","identity","ColorFilter","Font","typeface","size","undefined","Typeface","MaskFilter","RuntimeEffect","ImageFilter","Shader","PathEffect","bind","Data","Image","AnimatedImage","SVG","TextBlob","XYWHRect","width","height","Surface","TypefaceFontProvider","FontMgr","ParagraphBuilder","NativeBuffer","Video"],"sources":["JsiSkia.ts"],"sourcesContent":["import type { CanvasKit } from \"canvaskit-wasm\";\n\nimport type {\n  SkContourMeasureIter,\n  Skia,\n  SkPath,\n  SkRect,\n  SkRuntimeEffect,\n  SkRuntimeShaderBuilder,\n  SkTypeface,\n} from \"../types\";\n\nimport { JsiSkPoint } from \"./JsiSkPoint\";\nimport { JsiSkPaint } from \"./JsiSkPaint\";\nimport { JsiSkRect } from \"./JsiSkRect\";\nimport { Color } from \"./JsiSkColor\";\nimport { JsiSkSurfaceFactory } from \"./JsiSkSurfaceFactory\";\nimport { JsiSkRRect } from \"./JsiSkRRect\";\nimport { JsiSkRSXform } from \"./JsiSkRSXform\";\nimport { JsiSkContourMeasureIter } from \"./JsiSkContourMeasureIter\";\nimport { JsiSkPictureRecorder } from \"./JsiSkPictureRecorder\";\nimport { JsiSkPictureFactory } from \"./JsiSkPictureFactory\";\nimport { JsiSkPathFactory } from \"./JsiSkPathFactory\";\nimport { JsiSkMatrix } from \"./JsiSkMatrix\";\nimport { JsiSkColorFilterFactory } from \"./JsiSkColorFilterFactory\";\nimport { JsiSkTypefaceFactory } from \"./JsiSkTypefaceFactory\";\nimport { JsiSkMaskFilterFactory } from \"./JsiSkMaskFilterFactory\";\nimport { JsiSkRuntimeEffectFactory } from \"./JsiSkRuntimeEffectFactory\";\nimport { JsiSkImageFilterFactory } from \"./JsiSkImageFilterFactory\";\nimport { JsiSkShaderFactory } from \"./JsiSkShaderFactory\";\nimport { JsiSkPathEffectFactory } from \"./JsiSkPathEffectFactory\";\nimport { JsiSkDataFactory } from \"./JsiSkDataFactory\";\nimport { JsiSkImageFactory } from \"./JsiSkImageFactory\";\nimport { JsiSkSVGFactory } from \"./JsiSkSVGFactory\";\nimport { JsiSkTextBlobFactory } from \"./JsiSkTextBlobFactory\";\nimport { JsiSkFont } from \"./JsiSkFont\";\nimport { MakeVertices } from \"./JsiSkVerticesFactory\";\nimport { JsiSkPath } from \"./JsiSkPath\";\nimport { JsiSkTypeface } from \"./JsiSkTypeface\";\nimport { JsiSkTypefaceFontProviderFactory } from \"./JsiSkTypefaceFontProviderFactory\";\nimport { JsiSkFontMgrFactory } from \"./JsiSkFontMgrFactory\";\nimport { JsiSkAnimatedImageFactory } from \"./JsiSkAnimatedImageFactory\";\nimport { JsiSkParagraphBuilderFactory } from \"./JsiSkParagraphBuilderFactory\";\nimport { JsiSkNativeBufferFactory } from \"./JsiSkNativeBufferFactory\";\nimport { createVideo } from \"./JsiVideo\";\n\nexport const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({\n  Point: (x: number, y: number) =>\n    new JsiSkPoint(CanvasKit, Float32Array.of(x, y)),\n  RuntimeShaderBuilder: (_: SkRuntimeEffect): SkRuntimeShaderBuilder => {\n    throw new Error(\"Not implemented on React Native Web\");\n  },\n  RRectXY: (rect: SkRect, rx: number, ry: number) =>\n    new JsiSkRRect(CanvasKit, rect, rx, ry),\n  RSXform: (scos: number, ssin: number, tx: number, ty: number) =>\n    new JsiSkRSXform(CanvasKit, Float32Array.of(scos, ssin, tx, ty)),\n  RSXformFromRadians: (\n    scale: number,\n    r: number,\n    tx: number,\n    ty: number,\n    px: number,\n    py: number\n  ) => {\n    const s = Math.sin(r) * scale;\n    const c = Math.cos(r) * scale;\n    return new JsiSkRSXform(\n      CanvasKit,\n      Float32Array.of(c, s, tx - c * px + s * py, ty - s * px - c * py)\n    );\n  },\n  Color,\n  ContourMeasureIter: (\n    path: SkPath,\n    forceClosed: boolean,\n    resScale: number\n  ): SkContourMeasureIter =>\n    new JsiSkContourMeasureIter(\n      CanvasKit,\n      new CanvasKit.ContourMeasureIter(\n        JsiSkPath.fromValue(path),\n        forceClosed,\n        resScale\n      )\n    ),\n  Paint: () => {\n    const paint = new JsiSkPaint(CanvasKit, new CanvasKit.Paint());\n    paint.setAntiAlias(true);\n    return paint;\n  },\n  PictureRecorder: () =>\n    new JsiSkPictureRecorder(CanvasKit, new CanvasKit.PictureRecorder()),\n  Picture: new JsiSkPictureFactory(CanvasKit),\n  Path: new JsiSkPathFactory(CanvasKit),\n  Matrix: (matrix?: readonly number[]) =>\n    new JsiSkMatrix(\n      CanvasKit,\n      matrix\n        ? Float32Array.of(...matrix)\n        : Float32Array.of(...CanvasKit.Matrix.identity())\n    ),\n  ColorFilter: new JsiSkColorFilterFactory(CanvasKit),\n  Font: (typeface?: SkTypeface, size?: number) =>\n    new JsiSkFont(\n      CanvasKit,\n      new CanvasKit.Font(\n        typeface === undefined ? null : JsiSkTypeface.fromValue(typeface),\n        size\n      )\n    ),\n  Typeface: new JsiSkTypefaceFactory(CanvasKit),\n  MaskFilter: new JsiSkMaskFilterFactory(CanvasKit),\n  RuntimeEffect: new JsiSkRuntimeEffectFactory(CanvasKit),\n  ImageFilter: new JsiSkImageFilterFactory(CanvasKit),\n  Shader: new JsiSkShaderFactory(CanvasKit),\n  PathEffect: new JsiSkPathEffectFactory(CanvasKit),\n  MakeVertices: MakeVertices.bind(null, CanvasKit),\n  Data: new JsiSkDataFactory(CanvasKit),\n  Image: new JsiSkImageFactory(CanvasKit),\n  AnimatedImage: new JsiSkAnimatedImageFactory(CanvasKit),\n  SVG: new JsiSkSVGFactory(CanvasKit),\n  TextBlob: new JsiSkTextBlobFactory(CanvasKit),\n  XYWHRect: (x: number, y: number, width: number, height: number) => {\n    return new JsiSkRect(CanvasKit, CanvasKit.XYWHRect(x, y, width, height));\n  },\n  Surface: new JsiSkSurfaceFactory(CanvasKit),\n  TypefaceFontProvider: new JsiSkTypefaceFontProviderFactory(CanvasKit),\n  FontMgr: new JsiSkFontMgrFactory(CanvasKit),\n  ParagraphBuilder: new JsiSkParagraphBuilderFactory(CanvasKit),\n  NativeBuffer: new JsiSkNativeBufferFactory(CanvasKit),\n  Video: createVideo.bind(null, CanvasKit),\n});\n"],"mappings":"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"}

package/lib/module/skia/web/JsiVideo.d.ts

@@ -0,0 +1,24 @@
+import type { CanvasKit, Surface } from "canvaskit-wasm";
+import type { Video, ImageFactory } from "../types";
+export declare const createVideo: (CanvasKit: CanvasKit, url: string) => Promise<Video>;
+export declare class JsiVideo implements Video {
+    private ImageFactory;
+    private videoElement;
+    __typename__: "Video";
+    private webglBuffer;
+    constructor(ImageFactory: ImageFactory, videoElement: HTMLVideoElement);
+    duration(): number;
+    framerate(): number;
+    setSurface(surface: Surface): void;
+    nextImage(): import("../types").SkImage;
+    seek(time: number): void;
+    rotation(): 0;
+    size(): {
+        width: number;
+        height: number;
+    };
+    pause(): void;
+    play(): void;
+    setVolume(volume: number): void;
+    dispose(): void;
+}

package/lib/module/skia/web/JsiVideo.js

@@ -0,0 +1,75 @@
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { CanvasKitWebGLBufferImpl } from "./CanvasKitWebGLBufferImpl";
+import { JsiSkImageFactory } from "./JsiSkImageFactory";
+export const createVideo = async (CanvasKit, url) => {
+  const video = document.createElement("video");
+  return new Promise((resolve, reject) => {
+    video.src = url;
+    video.style.display = "none";
+    video.crossOrigin = "anonymous";
+    video.volume = 0;
+    video.addEventListener("loadedmetadata", () => {
+      document.body.appendChild(video);
+      resolve(new JsiVideo(new JsiSkImageFactory(CanvasKit), video));
+    });
+    video.addEventListener("error", () => {
+      reject(new Error(`Failed to load video from URL: ${url}`));
+    });
+  });
+};
+export class JsiVideo {
+  constructor(ImageFactory, videoElement) {
+    this.ImageFactory = ImageFactory;
+    this.videoElement = videoElement;
+    _defineProperty(this, "__typename__", "Video");
+    _defineProperty(this, "webglBuffer", null);
+    document.body.appendChild(this.videoElement);
+  }
+  duration() {
+    return this.videoElement.duration * 1000;
+  }
+  framerate() {
+    throw new Error("Video.frame is not available on React Native Web");
+  }
+  setSurface(surface) {
+    // If we have the surface, we can use the WebGL buffer which is slightly faster
+    // This is because WebGL cannot be shared across contextes.
+    // This can be removed with WebGPU
+    this.webglBuffer = new CanvasKitWebGLBufferImpl(surface, this.videoElement);
+  }
+  nextImage() {
+    return this.ImageFactory.MakeImageFromNativeBuffer(this.webglBuffer ? this.webglBuffer : this.videoElement);
+  }
+  seek(time) {
+    if (isNaN(time)) {
+      throw new Error(`Invalid time: ${time}`);
+    }
+    this.videoElement.currentTime = time / 1000;
+  }
+  rotation() {
+    return 0;
+  }
+  size() {
+    return {
+      width: this.videoElement.videoWidth,
+      height: this.videoElement.videoHeight
+    };
+  }
+  pause() {
+    this.videoElement.pause();
+  }
+  play() {
+    this.videoElement.play();
+  }
+  setVolume(volume) {
+    this.videoElement.volume = volume;
+  }
+  dispose() {
+    if (this.videoElement.parentNode) {
+      this.videoElement.parentNode.removeChild(this.videoElement);
+    }
+  }
+}
+//# sourceMappingURL=JsiVideo.js.map

package/lib/module/skia/web/JsiVideo.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["CanvasKitWebGLBufferImpl","JsiSkImageFactory","createVideo","CanvasKit","url","video","document","createElement","Promise","resolve","reject","src","style","display","crossOrigin","volume","addEventListener","body","appendChild","JsiVideo","Error","constructor","ImageFactory","videoElement","_defineProperty","duration","framerate","setSurface","surface","webglBuffer","nextImage","MakeImageFromNativeBuffer","seek","time","isNaN","currentTime","rotation","size","width","videoWidth","height","videoHeight","pause","play","setVolume","dispose","parentNode","removeChild"],"sources":["JsiVideo.ts"],"sourcesContent":["import type { CanvasKit, Surface } from \"canvaskit-wasm\";\n\nimport type { CanvasKitWebGLBuffer, Video, ImageFactory } from \"../types\";\n\nimport { CanvasKitWebGLBufferImpl } from \"./CanvasKitWebGLBufferImpl\";\nimport { JsiSkImageFactory } from \"./JsiSkImageFactory\";\n\nexport const createVideo = async (\n  CanvasKit: CanvasKit,\n  url: string\n): Promise<Video> => {\n  const video = document.createElement(\"video\");\n  return new Promise((resolve, reject) => {\n    video.src = url;\n    video.style.display = \"none\";\n    video.crossOrigin = \"anonymous\";\n    video.volume = 0;\n    video.addEventListener(\"loadedmetadata\", () => {\n      document.body.appendChild(video);\n      resolve(new JsiVideo(new JsiSkImageFactory(CanvasKit), video));\n    });\n    video.addEventListener(\"error\", () => {\n      reject(new Error(`Failed to load video from URL: ${url}`));\n    });\n  });\n};\n\nexport class JsiVideo implements Video {\n  __typename__ = \"Video\" as const;\n\n  private webglBuffer: CanvasKitWebGLBuffer | null = null;\n\n  constructor(\n    private ImageFactory: ImageFactory,\n    private videoElement: HTMLVideoElement\n  ) {\n    document.body.appendChild(this.videoElement);\n  }\n\n  duration() {\n    return this.videoElement.duration * 1000;\n  }\n\n  framerate(): number {\n    throw new Error(\"Video.frame is not available on React Native Web\");\n  }\n\n  setSurface(surface: Surface) {\n    // If we have the surface, we can use the WebGL buffer which is slightly faster\n    // This is because WebGL cannot be shared across contextes.\n    // This can be removed with WebGPU\n    this.webglBuffer = new CanvasKitWebGLBufferImpl(surface, this.videoElement);\n  }\n\n  nextImage() {\n    return this.ImageFactory.MakeImageFromNativeBuffer(\n      this.webglBuffer ? this.webglBuffer : this.videoElement\n    );\n  }\n\n  seek(time: number) {\n    if (isNaN(time)) {\n      throw new Error(`Invalid time: ${time}`);\n    }\n    this.videoElement.currentTime = time / 1000;\n  }\n\n  rotation() {\n    return 0 as const;\n  }\n\n  size() {\n    return {\n      width: this.videoElement.videoWidth,\n      height: this.videoElement.videoHeight,\n    };\n  }\n\n  pause() {\n    this.videoElement.pause();\n  }\n\n  play() {\n    this.videoElement.play();\n  }\n\n  setVolume(volume: number) {\n    this.videoElement.volume = volume;\n  }\n\n  dispose() {\n    if (this.videoElement.parentNode) {\n      this.videoElement.parentNode.removeChild(this.videoElement);\n    }\n  }\n}\n"],"mappings":";;;AAIA,SAASA,wBAAwB,QAAQ,4BAA4B;AACrE,SAASC,iBAAiB,QAAQ,qBAAqB;AAEvD,OAAO,MAAMC,WAAW,GAAG,MAAAA,CACzBC,SAAoB,EACpBC,GAAW,KACQ;EACnB,MAAMC,KAAK,GAAGC,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;EAC7C,OAAO,IAAIC,OAAO,CAAC,CAACC,OAAO,EAAEC,MAAM,KAAK;IACtCL,KAAK,CAACM,GAAG,GAAGP,GAAG;IACfC,KAAK,CAACO,KAAK,CAACC,OAAO,GAAG,MAAM;IAC5BR,KAAK,CAACS,WAAW,GAAG,WAAW;IAC/BT,KAAK,CAACU,MAAM,GAAG,CAAC;IAChBV,KAAK,CAACW,gBAAgB,CAAC,gBAAgB,EAAE,MAAM;MAC7CV,QAAQ,CAACW,IAAI,CAACC,WAAW,CAACb,KAAK,CAAC;MAChCI,OAAO,CAAC,IAAIU,QAAQ,CAAC,IAAIlB,iBAAiB,CAACE,SAAS,CAAC,EAAEE,KAAK,CAAC,CAAC;IAChE,CAAC,CAAC;IACFA,KAAK,CAACW,gBAAgB,CAAC,OAAO,EAAE,MAAM;MACpCN,MAAM,CAAC,IAAIU,KAAK,CAAE,kCAAiChB,GAAI,EAAC,CAAC,CAAC;IAC5D,CAAC,CAAC;EACJ,CAAC,CAAC;AACJ,CAAC;AAED,OAAO,MAAMe,QAAQ,CAAkB;EAKrCE,WAAWA,CACDC,YAA0B,EAC1BC,YAA8B,EACtC;IAAA,KAFQD,YAA0B,GAA1BA,YAA0B;IAAA,KAC1BC,YAA8B,GAA9BA,YAA8B;IAAAC,eAAA,uBANzB,OAAO;IAAAA,eAAA,sBAE6B,IAAI;IAMrDlB,QAAQ,CAACW,IAAI,CAACC,WAAW,CAAC,IAAI,CAACK,YAAY,CAAC;EAC9C;EAEAE,QAAQA,CAAA,EAAG;IACT,OAAO,IAAI,CAACF,YAAY,CAACE,QAAQ,GAAG,IAAI;EAC1C;EAEAC,SAASA,CAAA,EAAW;IAClB,MAAM,IAAIN,KAAK,CAAC,kDAAkD,CAAC;EACrE;EAEAO,UAAUA,CAACC,OAAgB,EAAE;IAC3B;IACA;IACA;IACA,IAAI,CAACC,WAAW,GAAG,IAAI7B,wBAAwB,CAAC4B,OAAO,EAAE,IAAI,CAACL,YAAY,CAAC;EAC7E;EAEAO,SAASA,CAAA,EAAG;IACV,OAAO,IAAI,CAACR,YAAY,CAACS,yBAAyB,CAChD,IAAI,CAACF,WAAW,GAAG,IAAI,CAACA,WAAW,GAAG,IAAI,CAACN,YAC7C,CAAC;EACH;EAEAS,IAAIA,CAACC,IAAY,EAAE;IACjB,IAAIC,KAAK,CAACD,IAAI,CAAC,EAAE;MACf,MAAM,IAAIb,KAAK,CAAE,iBAAgBa,IAAK,EAAC,CAAC;IAC1C;IACA,IAAI,CAACV,YAAY,CAACY,WAAW,GAAGF,IAAI,GAAG,IAAI;EAC7C;EAEAG,QAAQA,CAAA,EAAG;IACT,OAAO,CAAC;EACV;EAEAC,IAAIA,CAAA,EAAG;IACL,OAAO;MACLC,KAAK,EAAE,IAAI,CAACf,YAAY,CAACgB,UAAU;MACnCC,MAAM,EAAE,IAAI,CAACjB,YAAY,CAACkB;IAC5B,CAAC;EACH;EAEAC,KAAKA,CAAA,EAAG;IACN,IAAI,CAACnB,YAAY,CAACmB,KAAK,CAAC,CAAC;EAC3B;EAEAC,IAAIA,CAAA,EAAG;IACL,IAAI,CAACpB,YAAY,CAACoB,IAAI,CAAC,CAAC;EAC1B;EAEAC,SAASA,CAAC7B,MAAc,EAAE;IACxB,IAAI,CAACQ,YAAY,CAACR,MAAM,GAAGA,MAAM;EACnC;EAEA8B,OAAOA,CAAA,EAAG;IACR,IAAI,IAAI,CAACtB,YAAY,CAACuB,UAAU,EAAE;MAChC,IAAI,CAACvB,YAAY,CAACuB,UAAU,CAACC,WAAW,CAAC,IAAI,CAACxB,YAAY,CAAC;IAC7D;EACF;AACF"}

package/lib/module/skia/web/index.d.ts

@@ -0,0 +1 @@
+export * from "./JsiSkia";

package/lib/module/skia/web/index.js

@@ -0,0 +1,2 @@
+export * from "./JsiSkia";
+//# sourceMappingURL=index.js.map

package/lib/module/skia/web/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./JsiSkia\";\n"],"mappings":"AAAA,cAAc,WAAW"}

package/lib/module/specs/NativeSkiaModule.d.ts

@@ -0,0 +1,6 @@
+import type { TurboModule } from "react-native/Libraries/TurboModule/RCTExport";
+export interface Spec extends TurboModule {
+    install: () => boolean;
+}
+declare const _default: Spec;
+export default _default;

package/lib/module/specs/NativeSkiaModule.js

@@ -0,0 +1,4 @@
+import { TurboModuleRegistry } from "react-native";
+// eslint-disable-next-line import/no-default-export
+export default TurboModuleRegistry.getEnforcing("RNSkiaModule");
+//# sourceMappingURL=NativeSkiaModule.js.map

package/lib/module/specs/NativeSkiaModule.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["TurboModuleRegistry","getEnforcing"],"sources":["NativeSkiaModule.ts"],"sourcesContent":["import type { TurboModule } from \"react-native/Libraries/TurboModule/RCTExport\";\nimport { TurboModuleRegistry } from \"react-native\";\n\nexport interface Spec extends TurboModule {\n  install: () => boolean;\n}\n\n// eslint-disable-next-line import/no-default-export\nexport default TurboModuleRegistry.getEnforcing<Spec>(\"RNSkiaModule\");\n"],"mappings":"AACA,SAASA,mBAAmB,QAAQ,cAAc;AAMlD;AACA,eAAeA,mBAAmB,CAACC,YAAY,CAAO,cAAc,CAAC"}

package/lib/module/specs/NativeSkiaModule.web.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=NativeSkiaModule.web.js.map

package/lib/module/specs/NativeSkiaModule.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["NativeSkiaModule.web.ts"],"sourcesContent":[""],"mappings":""}

package/lib/module/specs/SkiaDomViewNativeComponent.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react-native/types/modules/Codegen" />
+import type { ViewProps } from "react-native";
+export interface NativeProps extends ViewProps {
+    mode: string;
+    debug?: boolean;
+}
+declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;
+export default _default;

package/lib/module/specs/SkiaDomViewNativeComponent.js

@@ -0,0 +1,4 @@
+import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";
+// eslint-disable-next-line import/no-default-export
+export default codegenNativeComponent("SkiaDomView");
+//# sourceMappingURL=SkiaDomViewNativeComponent.js.map

package/lib/module/specs/SkiaDomViewNativeComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["codegenNativeComponent"],"sources":["SkiaDomViewNativeComponent.ts"],"sourcesContent":["import codegenNativeComponent from \"react-native/Libraries/Utilities/codegenNativeComponent\";\nimport type { ViewProps } from \"react-native\";\n\nexport interface NativeProps extends ViewProps {\n  mode: string;\n  debug?: boolean;\n}\n\n// eslint-disable-next-line import/no-default-export\nexport default codegenNativeComponent<NativeProps>(\"SkiaDomView\");\n"],"mappings":"AAAA,OAAOA,sBAAsB,MAAM,yDAAyD;AAQ5F;AACA,eAAeA,sBAAsB,CAAc,aAAa,CAAC"}

package/lib/module/specs/SkiaPictureViewNativeComponent.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react-native/types/modules/Codegen" />
+import type { ViewProps } from "react-native";
+export interface NativeProps extends ViewProps {
+    mode: string;
+    debug?: boolean;
+}
+declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;
+export default _default;

package/lib/module/specs/SkiaPictureViewNativeComponent.js

@@ -0,0 +1,4 @@
+import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";
+// eslint-disable-next-line import/no-default-export
+export default codegenNativeComponent("SkiaPictureView");
+//# sourceMappingURL=SkiaPictureViewNativeComponent.js.map

package/lib/module/specs/SkiaPictureViewNativeComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["codegenNativeComponent"],"sources":["SkiaPictureViewNativeComponent.ts"],"sourcesContent":["import codegenNativeComponent from \"react-native/Libraries/Utilities/codegenNativeComponent\";\nimport type { ViewProps } from \"react-native\";\n\nexport interface NativeProps extends ViewProps {\n  mode: string;\n  debug?: boolean;\n}\n\n// eslint-disable-next-line import/no-default-export\nexport default codegenNativeComponent<NativeProps>(\"SkiaPictureView\");\n"],"mappings":"AAAA,OAAOA,sBAAsB,MAAM,yDAAyD;AAQ5F;AACA,eAAeA,sBAAsB,CAAc,iBAAiB,CAAC"}

package/lib/module/views/SkiaBaseWebView.d.ts

@@ -0,0 +1,60 @@
+import React from "react";
+import type { PointerEvent } from "react";
+import type { SkRect, SkCanvas } from "../skia/types";
+import type { DrawMode, SkiaBaseViewProps, TouchInfo } from "./types";
+import { TouchType } from "./types";
+export declare abstract class SkiaBaseWebView<TProps extends SkiaBaseViewProps> extends React.Component<TProps> {
+    constructor(props: TProps);
+    private _surface;
+    private _unsubscriptions;
+    private _touches;
+    private _canvas;
+    private _canvasRef;
+    private _mode;
+    private _redrawRequests;
+    private requestId;
+    protected width: number;
+    protected height: number;
+    private unsubscribeAll;
+    private onLayoutEvent;
+    protected getSize(): {
+        width: number;
+        height: number;
+    };
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    /**
+     * Creates a snapshot from the canvas in the surface
+     * @param rect Rect to use as bounds. Optional.
+     * @returns An Image object.
+     */
+    makeImageSnapshot(rect?: SkRect): import("../skia/types").SkImage | undefined;
+    /**
+     * Override to render
+     */
+    protected abstract renderInCanvas(canvas: SkCanvas, touches: TouchInfo[]): void;
+    /**
+     * Sends a redraw request to the native SkiaView.
+     */
+    private tick;
+    redraw(): void;
+    /**
+     * Updates the drawing mode for the skia view. This is the same
+     * as declaratively setting the mode property on the SkiaView.
+     * There are two drawing modes, "continuous" and "default",
+     * where the continuous mode will continuously redraw the view and
+     * the default mode will only redraw when any of the regular react
+     * properties are changed like size and margins.
+     * @param mode Drawing mode to use.
+     */
+    setDrawMode(mode: DrawMode): void;
+    private handleTouchEvent;
+    createTouchHandler(touchType: TouchType): (evt: PointerEvent) => void;
+    private onStart;
+    private onActive;
+    private onCancel;
+    private onEnd;
+    private onLayout;
+    render(): React.JSX.Element;
+}

package/lib/module/views/SkiaBaseWebView.js

@@ -0,0 +1,178 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/* global HTMLCanvasElement */
+import React from "react";
+import { JsiSkSurface } from "../skia/web/JsiSkSurface";
+import { Platform } from "../Platform";
+import { TouchType } from "./types";
+const pd = Platform.PixelRatio;
+export class SkiaBaseWebView extends React.Component {
+  constructor(props) {
+    var _props$mode;
+    super(props);
+    _defineProperty(this, "_surface", null);
+    _defineProperty(this, "_unsubscriptions", []);
+    _defineProperty(this, "_touches", []);
+    _defineProperty(this, "_canvas", null);
+    _defineProperty(this, "_canvasRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "_mode", void 0);
+    _defineProperty(this, "_redrawRequests", 0);
+    _defineProperty(this, "requestId", 0);
+    _defineProperty(this, "width", 0);
+    _defineProperty(this, "height", 0);
+    _defineProperty(this, "onStart", this.createTouchHandler(TouchType.Start));
+    _defineProperty(this, "onActive", this.createTouchHandler(TouchType.Active));
+    _defineProperty(this, "onCancel", this.createTouchHandler(TouchType.Cancelled));
+    _defineProperty(this, "onEnd", this.createTouchHandler(TouchType.End));
+    _defineProperty(this, "onLayout", this.onLayoutEvent.bind(this));
+    this._mode = (_props$mode = props.mode) !== null && _props$mode !== void 0 ? _props$mode : "default";
+  }
+  unsubscribeAll() {
+    this._unsubscriptions.forEach(u => u());
+    this._unsubscriptions = [];
+  }
+  onLayoutEvent(evt) {
+    const {
+      CanvasKit
+    } = global;
+    // Reset canvas / surface on layout change
+    const canvas = this._canvasRef.current;
+    if (canvas) {
+      this.width = canvas.clientWidth;
+      this.height = canvas.clientHeight;
+      canvas.width = this.width * pd;
+      canvas.height = this.height * pd;
+      const surface = CanvasKit.MakeWebGLCanvasSurface(canvas);
+      if (!surface) {
+        throw new Error("Could not create surface");
+      }
+      this._surface = new JsiSkSurface(CanvasKit, surface);
+      this._canvas = this._surface.getCanvas();
+      this.redraw();
+    }
+    // Call onLayout callback if it exists
+    if (this.props.onLayout) {
+      this.props.onLayout(evt);
+    }
+  }
+  getSize() {
+    return {
+      width: this.width,
+      height: this.height
+    };
+  }
+  componentDidMount() {
+    // Start render loop
+    this.tick();
+  }
+  componentDidUpdate() {
+    this.redraw();
+  }
+  componentWillUnmount() {
+    this.unsubscribeAll();
+    cancelAnimationFrame(this.requestId);
+    // eslint-disable-next-line max-len
+    // https://stackoverflow.com/questions/23598471/how-do-i-clean-up-and-unload-a-webgl-canvas-context-from-gpu-after-use
+    // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context
+    // We delete the context, only if the context has been intialized
+    if (this._surface) {
+      var _this$_canvasRef$curr;
+      (_this$_canvasRef$curr = this._canvasRef.current) === null || _this$_canvasRef$curr === void 0 || (_this$_canvasRef$curr = _this$_canvasRef$curr.getContext("webgl2")) === null || _this$_canvasRef$curr === void 0 || (_this$_canvasRef$curr = _this$_canvasRef$curr.getExtension("WEBGL_lose_context")) === null || _this$_canvasRef$curr === void 0 || _this$_canvasRef$curr.loseContext();
+    }
+  }
+
+  /**
+   * Creates a snapshot from the canvas in the surface
+   * @param rect Rect to use as bounds. Optional.
+   * @returns An Image object.
+   */
+  makeImageSnapshot(rect) {
+    var _this$_surface, _this$_surface2;
+    this._canvas.clear(CanvasKit.TRANSPARENT);
+    this.renderInCanvas(this._canvas, []);
+    (_this$_surface = this._surface) === null || _this$_surface === void 0 || _this$_surface.ref.flush();
+    return (_this$_surface2 = this._surface) === null || _this$_surface2 === void 0 ? void 0 : _this$_surface2.makeImageSnapshot(rect);
+  }
+
+  /**
+   * Override to render
+   */
+
+  /**
+   * Sends a redraw request to the native SkiaView.
+   */
+  tick() {
+    if (this._mode === "continuous" || this._redrawRequests > 0) {
+      this._redrawRequests = 0;
+      if (this._canvas) {
+        var _this$_surface3;
+        const touches = [...this._touches];
+        this._touches = [];
+        const canvas = this._canvas;
+        canvas.clear(Float32Array.of(0, 0, 0, 0));
+        canvas.save();
+        canvas.scale(pd, pd);
+        this.renderInCanvas(canvas, touches);
+        canvas.restore();
+        (_this$_surface3 = this._surface) === null || _this$_surface3 === void 0 || _this$_surface3.ref.flush();
+      }
+    }
+    this.requestId = requestAnimationFrame(this.tick.bind(this));
+  }
+  redraw() {
+    this._redrawRequests++;
+  }
+
+  /**
+   * Updates the drawing mode for the skia view. This is the same
+   * as declaratively setting the mode property on the SkiaView.
+   * There are two drawing modes, "continuous" and "default",
+   * where the continuous mode will continuously redraw the view and
+   * the default mode will only redraw when any of the regular react
+   * properties are changed like size and margins.
+   * @param mode Drawing mode to use.
+   */
+  setDrawMode(mode) {
+    this._mode = mode;
+    this.tick();
+  }
+  handleTouchEvent(evt, touchType) {
+    this._touches.push({
+      id: evt.pointerId,
+      x: evt.clientX - evt.currentTarget.getClientRects()[0].left,
+      y: evt.clientY - evt.currentTarget.getClientRects()[0].top,
+      force: evt.pressure,
+      type: touchType,
+      timestamp: Date.now()
+    });
+    this.redraw();
+  }
+  createTouchHandler(touchType) {
+    return evt => this.handleTouchEvent(evt, touchType);
+  }
+  render() {
+    const {
+      mode,
+      debug = false,
+      ...viewProps
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Platform.View, _extends({}, viewProps, {
+      onLayout: this.onLayout
+    }), /*#__PURE__*/React.createElement("canvas", {
+      ref: this._canvasRef,
+      style: {
+        display: "flex",
+        flex: 1
+      },
+      onPointerDown: this.onStart,
+      onPointerMove: this.onActive,
+      onPointerUp: this.onEnd,
+      onPointerCancel: this.onCancel,
+      onPointerLeave: this.onEnd,
+      onPointerOut: this.onEnd
+    }));
+  }
+}
+//# sourceMappingURL=SkiaBaseWebView.js.map

package/lib/module/views/SkiaBaseWebView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","JsiSkSurface","Platform","TouchType","pd","PixelRatio","SkiaBaseWebView","Component","constructor","props","_props$mode","_defineProperty","createRef","createTouchHandler","Start","Active","Cancelled","End","onLayoutEvent","bind","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","evt","CanvasKit","global","canvas","_canvasRef","current","width","clientWidth","height","clientHeight","surface","MakeWebGLCanvasSurface","Error","_surface","_canvas","getCanvas","redraw","onLayout","getSize","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","_this$_canvasRef$curr","getContext","getExtension","loseContext","makeImageSnapshot","rect","_this$_surface","_this$_surface2","clear","TRANSPARENT","renderInCanvas","ref","flush","_redrawRequests","_this$_surface3","touches","_touches","Float32Array","of","save","scale","restore","requestAnimationFrame","setDrawMode","handleTouchEvent","touchType","push","id","pointerId","x","clientX","currentTarget","getClientRects","left","y","clientY","top","force","pressure","type","timestamp","Date","now","render","debug","viewProps","createElement","View","_extends","style","display","flex","onPointerDown","onStart","onPointerMove","onActive","onPointerUp","onEnd","onPointerCancel","onCancel","onPointerLeave","onPointerOut"],"sources":["SkiaBaseWebView.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\nimport { Platform } from \"../Platform\";\n\nimport type { DrawMode, SkiaBaseViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst pd = Platform.PixelRatio;\n\nexport abstract class SkiaBaseWebView<\n  TProps extends SkiaBaseViewProps\n> extends React.Component<TProps> {\n  constructor(props: TProps) {\n    super(props);\n    this._mode = props.mode ?? \"default\";\n  }\n\n  private _surface: JsiSkSurface | null = null;\n  private _unsubscriptions: Array<() => void> = [];\n  private _touches: Array<TouchInfo> = [];\n  private _canvas: SkCanvas | null = null;\n  private _canvasRef = React.createRef<HTMLCanvasElement>();\n  private _mode: DrawMode;\n  private _redrawRequests = 0;\n  private requestId = 0;\n\n  protected width = 0;\n  protected height = 0;\n\n  private unsubscribeAll() {\n    this._unsubscriptions.forEach((u) => u());\n    this._unsubscriptions = [];\n  }\n\n  private onLayoutEvent(evt: LayoutChangeEvent) {\n    const { CanvasKit } = global;\n    // Reset canvas / surface on layout change\n    const canvas = this._canvasRef.current;\n    if (canvas) {\n      this.width = canvas.clientWidth;\n      this.height = canvas.clientHeight;\n      canvas.width = this.width * pd;\n      canvas.height = this.height * pd;\n      const surface = CanvasKit.MakeWebGLCanvasSurface(canvas);\n      if (!surface) {\n        throw new Error(\"Could not create surface\");\n      }\n      this._surface = new JsiSkSurface(CanvasKit, surface);\n      this._canvas = this._surface.getCanvas();\n      this.redraw();\n    }\n    // Call onLayout callback if it exists\n    if (this.props.onLayout) {\n      this.props.onLayout(evt);\n    }\n  }\n\n  protected getSize() {\n    return { width: this.width, height: this.height };\n  }\n\n  componentDidMount() {\n    // Start render loop\n    this.tick();\n  }\n\n  componentDidUpdate() {\n    this.redraw();\n  }\n\n  componentWillUnmount() {\n    this.unsubscribeAll();\n    cancelAnimationFrame(this.requestId);\n    // eslint-disable-next-line max-len\n    // https://stackoverflow.com/questions/23598471/how-do-i-clean-up-and-unload-a-webgl-canvas-context-from-gpu-after-use\n    // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context\n    // We delete the context, only if the context has been intialized\n    if (this._surface) {\n      this._canvasRef.current\n        ?.getContext(\"webgl2\")\n        ?.getExtension(\"WEBGL_lose_context\")\n        ?.loseContext();\n    }\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    this._canvas!.clear(CanvasKit.TRANSPARENT);\n    this.renderInCanvas(this._canvas!, []);\n    this._surface?.ref.flush();\n    return this._surface?.makeImageSnapshot(rect);\n  }\n\n  /**\n   * Override to render\n   */\n  protected abstract renderInCanvas(\n    canvas: SkCanvas,\n    touches: TouchInfo[]\n  ): void;\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  private tick() {\n    if (this._mode === \"continuous\" || this._redrawRequests > 0) {\n      this._redrawRequests = 0;\n      if (this._canvas) {\n        const touches = [...this._touches];\n        this._touches = [];\n        const canvas = this._canvas!;\n        canvas.clear(Float32Array.of(0, 0, 0, 0));\n        canvas.save();\n        canvas.scale(pd, pd);\n        this.renderInCanvas(canvas, touches);\n        canvas.restore();\n        this._surface?.ref.flush();\n      }\n    }\n    this.requestId = requestAnimationFrame(this.tick.bind(this));\n  }\n\n  public redraw() {\n    this._redrawRequests++;\n  }\n\n  /**\n   * Updates the drawing mode for the skia view. This is the same\n   * as declaratively setting the mode property on the SkiaView.\n   * There are two drawing modes, \"continuous\" and \"default\",\n   * where the continuous mode will continuously redraw the view and\n   * the default mode will only redraw when any of the regular react\n   * properties are changed like size and margins.\n   * @param mode Drawing mode to use.\n   */\n  public setDrawMode(mode: DrawMode) {\n    this._mode = mode;\n    this.tick();\n  }\n\n  private handleTouchEvent(evt: PointerEvent, touchType: TouchType) {\n    this._touches.push({\n      id: evt.pointerId,\n      x: evt.clientX - evt.currentTarget.getClientRects()[0].left,\n      y: evt.clientY - evt.currentTarget.getClientRects()[0].top,\n      force: evt.pressure,\n      type: touchType,\n      timestamp: Date.now(),\n    });\n    this.redraw();\n  }\n\n  createTouchHandler(touchType: TouchType) {\n    return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType);\n  }\n\n  private onStart = this.createTouchHandler(TouchType.Start);\n  private onActive = this.createTouchHandler(TouchType.Active);\n  private onCancel = this.createTouchHandler(TouchType.Cancelled);\n  private onEnd = this.createTouchHandler(TouchType.End);\n  private onLayout = this.onLayoutEvent.bind(this);\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <Platform.View {...viewProps} onLayout={this.onLayout}>\n        <canvas\n          ref={this._canvasRef}\n          style={{ display: \"flex\", flex: 1 }}\n          onPointerDown={this.onStart}\n          onPointerMove={this.onActive}\n          onPointerUp={this.onEnd}\n          onPointerCancel={this.onCancel}\n          onPointerLeave={this.onEnd}\n          onPointerOut={this.onEnd}\n        />\n      </Platform.View>\n    );\n  }\n}\n"],"mappings":"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"}

package/lib/module/views/SkiaDomView.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import type { SkRect } from "../skia/types";
+import type { SkiaDomViewProps } from "./types";
+export declare class SkiaDomView extends React.Component<SkiaDomViewProps> {
+    constructor(props: SkiaDomViewProps);
+    private _nativeId;
+    get nativeId(): number;
+    componentDidUpdate(prevProps: SkiaDomViewProps): void;
+    /**
+     * Creates a snapshot from the canvas in the surface
+     * @param rect Rect to use as bounds. Optional.
+     * @returns An Image object.
+     */
+    makeImageSnapshot(rect?: SkRect): import("../skia/types").SkImage;
+    /**
+     * Creates a snapshot from the canvas in the surface
+     * @param rect Rect to use as bounds. Optional.
+     * @returns An Image object.
+     */
+    makeImageSnapshotAsync(rect?: SkRect): Promise<import("../skia/types").SkImage>;
+    /**
+     * Sends a redraw request to the native SkiaView.
+     */
+    redraw(): void;
+    /**
+     * Clear up the dom node when unmounting to release resources.
+     */
+    componentWillUnmount(): void;
+    render(): React.JSX.Element;
+}

package/lib/module/views/SkiaDomView.js

@@ -0,0 +1,115 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from "react";
+import { Platform } from "../Platform";
+import SkiaDomViewNativeComponent from "../specs/SkiaDomViewNativeComponent";
+import { SkiaViewApi } from "./api";
+import { SkiaViewNativeId } from "./SkiaViewNativeId";
+const NativeSkiaDomView = Platform.OS !== "web" ? SkiaDomViewNativeComponent :
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+null;
+export class SkiaDomView extends React.Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "_nativeId", void 0);
+    this._nativeId = SkiaViewNativeId.current++;
+    const {
+      root,
+      onTouch,
+      onSize
+    } = props;
+    if (root) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "root", root);
+    }
+    if (onTouch) {
+      assertSkiaViewApi();
+      console.warn(`The onTouch property is deprecated and will be removed in the next Skia release.
+See: https://shopify.github.io/react-native-skia/docs/animations/gestures`);
+      SkiaViewApi.setJsiProperty(this._nativeId, "onTouch", onTouch);
+    }
+    if (onSize) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
+    }
+  }
+  get nativeId() {
+    return this._nativeId;
+  }
+  componentDidUpdate(prevProps) {
+    const {
+      root,
+      onTouch,
+      onSize
+    } = this.props;
+    if (root !== prevProps.root) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "root", root);
+    }
+    if (onTouch !== prevProps.onTouch) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "onTouch", onTouch);
+    }
+    if (onSize !== prevProps.onSize) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
+    }
+  }
+
+  /**
+   * Creates a snapshot from the canvas in the surface
+   * @param rect Rect to use as bounds. Optional.
+   * @returns An Image object.
+   */
+  makeImageSnapshot(rect) {
+    assertSkiaViewApi();
+    return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);
+  }
+
+  /**
+   * Creates a snapshot from the canvas in the surface
+   * @param rect Rect to use as bounds. Optional.
+   * @returns An Image object.
+   */
+  makeImageSnapshotAsync(rect) {
+    assertSkiaViewApi();
+    return SkiaViewApi.makeImageSnapshotAsync(this._nativeId, rect);
+  }
+
+  /**
+   * Sends a redraw request to the native SkiaView.
+   */
+  redraw() {
+    assertSkiaViewApi();
+    SkiaViewApi.requestRedraw(this._nativeId);
+  }
+
+  /**
+   * Clear up the dom node when unmounting to release resources.
+   */
+  componentWillUnmount() {
+    assertSkiaViewApi();
+    SkiaViewApi.setJsiProperty(this._nativeId, "root", null);
+  }
+  render() {
+    const {
+      mode,
+      debug = false,
+      ...viewProps
+    } = this.props;
+    return /*#__PURE__*/React.createElement(NativeSkiaDomView, _extends({
+      collapsable: false,
+      nativeID: `${this._nativeId}`,
+      mode: mode,
+      debug: debug
+    }, viewProps));
+  }
+}
+const assertSkiaViewApi = () => {
+  if (SkiaViewApi === null || SkiaViewApi.setJsiProperty === null || SkiaViewApi.requestRedraw === null || SkiaViewApi.makeImageSnapshot === null) {
+    throw Error("Skia View Api was not found.");
+  }
+};
+//# sourceMappingURL=SkiaDomView.js.map