@shopify/react-native-skia 0.1.171 → 0.1.173

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

@@ -0,0 +1,13 @@
+import type { CanvasKit } from "canvaskit-wasm";
+import type { SkFont } from "../types";
+import type { TextBlobFactory } from "../types/TextBlob";
+import type { SkRSXform } from "../types/RSXform";
+import { Host } from "./Host";
+import { JsiSkTextBlob } from "./JsiSkTextBlob";
+export declare class JsiSkTextBlobFactory extends Host implements TextBlobFactory {
+    constructor(CanvasKit: CanvasKit);
+    MakeFromText(str: string, font: SkFont): JsiSkTextBlob;
+    MakeFromGlyphs(glyphs: number[], font: SkFont): JsiSkTextBlob;
+    MakeFromRSXform(str: string, rsxforms: SkRSXform[], font: SkFont): JsiSkTextBlob;
+    MakeFromRSXformGlyphs(glyphs: number[], rsxforms: SkRSXform[], font: SkFont): JsiSkTextBlob;
+}

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

@@ -0,0 +1,8 @@
+import type { CanvasKit, Typeface } from "canvaskit-wasm";
+import type { SkTypeface } from "../types";
+import { HostObject } from "./Host";
+export declare class JsiSkTypeface extends HostObject<Typeface, "Typeface"> implements SkTypeface {
+    constructor(CanvasKit: CanvasKit, ref: Typeface);
+    get bold(): boolean;
+    get italic(): boolean;
+}

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

@@ -0,0 +1,8 @@
+import type { CanvasKit } from "canvaskit-wasm";
+import type { SkData, TypefaceFactory } from "../types";
+import { Host } from "./Host";
+import { JsiSkTypeface } from "./JsiSkTypeface";
+export declare class JsiSkTypefaceFactory extends Host implements TypefaceFactory {
+    constructor(CanvasKit: CanvasKit);
+    MakeFreeTypeFaceFromData(data: SkData): JsiSkTypeface | null;
+}

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

@@ -0,0 +1,9 @@
+import type { CanvasKit, Vertices } from "canvaskit-wasm";
+import type { SkVertices } from "../types";
+import { HostObject } from "./Host";
+import { JsiSkRect } from "./JsiSkRect";
+export declare class JsiSkVertices extends HostObject<Vertices, "Vertices"> implements SkVertices {
+    constructor(CanvasKit: CanvasKit, ref: Vertices);
+    bounds(): JsiSkRect;
+    uniqueID(): number;
+}

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

@@ -0,0 +1,4 @@
+import type { CanvasKit } from "canvaskit-wasm";
+import type { SkColor, SkPoint, VertexMode } from "../types";
+import { JsiSkVertices } from "./JsiSkVertices";
+export declare const MakeVertices: (CanvasKit: CanvasKit, mode: VertexMode, positions: SkPoint[], textureCoordinates?: SkPoint[] | null, colors?: SkColor[], indices?: number[] | null, isVolatile?: boolean) => JsiSkVertices;

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

@@ -0,0 +1,3 @@
+import type { CanvasKit } from "canvaskit-wasm";
+import type { Skia } from "../types";
+export declare const JsiSkApi: (CanvasKit: CanvasKit) => Skia;

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

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

package/lib/module/values/api.d.ts

@@ -0,0 +1,5 @@
+import type { ISkiaValueApi } from "./types";
+declare global {
+    var SkiaValueApi: ISkiaValueApi;
+}
+export declare const ValueApi: ISkiaValueApi;

package/lib/module/values/api.web.d.ts

@@ -0,0 +1,2 @@
+export declare const ValueApi: import("./types").ISkiaValueApi;
+export declare const createValue: <T>(initialValue: T) => import("./types").SkiaMutableValue<T>, createComputedValue: <R>(cb: () => R, values: import("./types").SkiaValue<unknown>[]) => import("./types").SkiaValue<R>;

package/lib/module/values/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./useClockValue";
+export * from "./useComputedValue";
+export * from "./useValue";
+export * from "./useValueEffect";

package/lib/module/values/hooks/useClockValue.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @returns A new value that will be updated on every frame redraw with the
+ * number of milliseconds elapsed since the value was started.
+ * The clock is created in the stopped state.
+ */
+export declare const useClockValue: () => import("..").SkiaClockValue;

package/lib/module/values/hooks/useComputedValue.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Creates a new computed value - a value that will calculate its value depending
+ * on other values.
+ * @param cb Callback to calculate new value
+ * @param values Dependant values
+ * @returns A readonly value
+ */
+export declare const useComputedValue: <R>(cb: () => R, values: unknown[]) => import("..").SkiaValue<R>;

package/lib/module/values/hooks/useValue.d.ts

@@ -0,0 +1,7 @@
+import type { SkiaMutableValue } from "../types";
+/**
+ * Creates a new value that holds some data.
+ * @param v Value to hold
+ * @returns A Value of type of v
+ */
+export declare const useValue: <T>(v: T) => SkiaMutableValue<T>;

package/lib/module/values/hooks/useValueEffect.d.ts

@@ -0,0 +1,7 @@
+import type { SkiaValue } from "../types";
+/**
+ * Sets up an effect that will be run whenever the value changes
+ * @param value Value to subscribe to changes on
+ * @param cb Callback to run when value changes
+ */
+export declare const useValueEffect: <T>(value: SkiaValue<T>, cb: (v: T) => void) => void;

package/lib/module/values/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./types";
+export * from "./hooks";
+export * from "./api";
+export * from "./selector";

package/lib/module/values/selector.d.ts

@@ -0,0 +1,14 @@
+import type { SkiaValue } from "./types";
+export declare type SkiaSelector<TReturn, TInput = unknown> = {
+    value: SkiaValue<TInput>;
+    selector: (v: TInput) => TReturn;
+};
+/**
+ * Wraps a Skia Value with a selector function. The selector function can access the
+ * inner values of the Skia Value so that we can dynamically ready array values and
+ * object values when doing animations in Skia.
+ * @param value Dependant value
+ * @param selector Selector function to calculate new value from the Skia Value's value
+ * @returns A descriptor that will be used by the reconciler to calculate the value
+ */
+export declare const Selector: <TInput, TReturn>(value: SkiaValue<TInput>, selector: (v: TInput) => TReturn) => SkiaSelector<TReturn, TInput>;

package/lib/module/values/types.d.ts

@@ -0,0 +1,63 @@
+export interface SkiaValue<T = number> {
+    /**
+     * Gets the value hold by the Value object
+     */
+    readonly current: T;
+    /**
+     * Adds a listener that is called when value changes.
+     * Returns unsubscribe method.
+     */
+    addListener: (cb: (value: T) => void) => () => void;
+    /**
+     * Invalidates the value. Has different meaning depending on the type of the value.
+     */
+    __invalidate: () => void;
+    /**
+     * Field to make typechecking easier
+     */
+    __typename__: "RNSkValue";
+}
+export interface SkiaMutableValue<T = number> extends SkiaValue<T> {
+    /**
+     * Get/sets the value hold by the Value object
+     */
+    current: T;
+    /**
+     * Get/sets the animation controlling the value
+     * */
+    animation: SkiaAnimation | undefined;
+}
+export interface SkiaClockValue extends SkiaValue<number> {
+    start: () => void;
+    stop: () => void;
+}
+export interface SkiaAnimation extends SkiaClockValue {
+    cancel: () => void;
+}
+export interface AnimationState {
+    current: number;
+    finished: boolean;
+}
+export interface ISkiaValueApi {
+    /**
+     * Creates a new value that holds the initial value and that
+     * can be changed.
+     */
+    createValue: <T>(initialValue: T) => SkiaMutableValue<T>;
+    /**
+     * Creates a computed value. This is a calculated value that returns the result of
+     * a function that is called with the values of the dependencies.
+     */
+    createComputedValue: <R>(cb: () => R, values: Array<SkiaValue<unknown>>) => SkiaValue<R>;
+    /**
+     * Creates a clock value where the value is the number of milliseconds elapsed
+     * since the clock was created
+     */
+    createClockValue: () => SkiaClockValue;
+    /**
+     * Creates an animation that is driven from a clock and updated every frame.
+     * @param cb Callback to calculate next value from time.
+     * @returns An animation object that can control a value.
+     */
+    createAnimation: <S extends AnimationState = AnimationState>(cb: (t: number, state: S | undefined) => S) => SkiaAnimation;
+}

package/lib/module/values/web/RNSkAnimation.d.ts

@@ -0,0 +1,9 @@
+import type { AnimationState, SkiaAnimation } from "../types";
+import { RNSkClockValue } from "./RNSkClockValue";
+export declare class RNSkAnimation<S extends AnimationState = AnimationState> extends RNSkClockValue implements SkiaAnimation {
+    constructor(callback: (t: number, state: S | undefined) => S, raf: (callback: (time: number) => void) => number);
+    private _callback;
+    private _animationState;
+    cancel(): void;
+    protected update(nextValue: number): void;
+}

package/lib/module/values/web/RNSkClockValue.d.ts

@@ -0,0 +1,13 @@
+import type { SkiaClockValue } from "../types";
+import { RNSkReadonlyValue } from "./RNSkReadonlyValue";
+export declare class RNSkClockValue extends RNSkReadonlyValue<number> implements SkiaClockValue {
+    constructor(raf: (callback: (time: number) => void) => number);
+    private _raf;
+    private _start;
+    private _stop;
+    private _state;
+    private notifyUpdate;
+    protected tick(value: number): void;
+    start(): void;
+    stop(): void;
+}

package/lib/module/values/web/RNSkComputedValue.d.ts

@@ -0,0 +1,10 @@
+import type { DependencyList } from "react";
+import { RNSkReadonlyValue } from "./RNSkReadonlyValue";
+export declare class RNSkComputedValue<T> extends RNSkReadonlyValue<T> {
+    constructor(callback: () => T, dependencies: DependencyList);
+    private dependecyUpdated;
+    private _callback;
+    private _unsubscribers;
+    unsubscribe(): void;
+    __invalidate(): void;
+}

package/lib/module/values/web/RNSkReadonlyValue.d.ts

@@ -0,0 +1,12 @@
+import type { SkiaValue } from "../types";
+export declare class RNSkReadonlyValue<T> implements SkiaValue<T> {
+    constructor(value: T);
+    private _current;
+    private _listeners;
+    private notifyListeners;
+    protected update(nextValue: T): void;
+    readonly __typename__ = "RNSkValue";
+    get current(): T;
+    addListener(cb: (value: T) => void): () => void;
+    __invalidate(): void;
+}

package/lib/module/values/web/RNSkValue.d.ts

@@ -0,0 +1,14 @@
+import type { SkiaAnimation, SkiaValue } from "../types";
+import { RNSkReadonlyValue } from "./RNSkReadonlyValue";
+export declare class RNSkValue<T> extends RNSkReadonlyValue<T> implements SkiaValue<T> {
+    constructor(value: T);
+    set current(value: T);
+    get current(): T;
+    private _unsubscribe;
+    private unsubscribe;
+    private subscribe;
+    private animationDidUpdate;
+    private _animation;
+    get animation(): SkiaAnimation | undefined;
+    set animation(v: SkiaAnimation | undefined);
+}

package/lib/module/values/web/api.d.ts

@@ -0,0 +1,2 @@
+import type { ISkiaValueApi } from "../types";
+export declare const ValueApi: ISkiaValueApi;

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

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

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

@@ -0,0 +1,62 @@
+import React from "react";
+import type { PointerEvent } from "react";
+import type { SkRect, SkCanvas } from "../skia/types";
+import type { SkiaValue } from "../values";
+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 onLayout;
+    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;
+    /**
+     * Registers one or move values as a dependant value of the Skia View. The view will
+     * The view will redraw itself when any of the values change.
+     * @param values Values to register
+     */
+    registerValues(_values: SkiaValue<unknown>[]): void;
+    private handleTouchEvent;
+    createTouchHandler(touchType: TouchType): (evt: PointerEvent) => void;
+    render(): JSX.Element;
+}

package/lib/module/views/SkiaBaseWebView.js

@@ -124,10 +124,12 @@ export class SkiaBaseWebView extends React.Component {
 
         const touches = [...this._touches];
         this._touches = [];
-
-        this._canvas.clear(CanvasKit.TRANSPARENT);
-
-        this.renderInCanvas(this._canvas, 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$_surface2 = this._surface) === null || _this$_surface2 === void 0 ? void 0 : _this$_surface2.ref.flush();
       }
     }

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

@@ -1 +1 @@
-{"version":3,"names":["React","PixelRatio","View","JsiSkSurface","TouchType","pd","get","SkiaBaseWebView","Component","constructor","props","createRef","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","onLayout","evt","CanvasKit","global","width","height","nativeEvent","layout","_canvasRef","current","canvas","surface","MakeWebGLCanvasSurface","Error","_surface","_canvas","getCanvas","redraw","getSize","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","makeImageSnapshot","rect","_redrawRequests","touches","_touches","clear","TRANSPARENT","renderInCanvas","ref","flush","requestAnimationFrame","bind","setDrawMode","registerValues","_values","v","push","addListener","handleTouchEvent","touchType","id","pointerId","x","clientX","currentTarget","getClientRects","left","y","clientY","top","force","pressure","type","timestamp","Date","now","createTouchHandler","render","debug","viewProps","display","flex","Start","Active","End","Cancelled"],"sources":["SkiaBaseWebView.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\nimport { PixelRatio, View } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\n\nimport type { DrawMode, SkiaBaseViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst pd = PixelRatio.get();\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 onLayout(evt: LayoutChangeEvent) {\n    const { CanvasKit } = global;\n    const { width, height } = evt.nativeEvent.layout;\n    this.width = width;\n    this.height = height;\n    // Reset canvas / surface on layout change\n    if (this._canvasRef.current) {\n      const canvas = this._canvasRef.current;\n      canvas.width = width * pd;\n      canvas.height = height * pd;\n      const surface = CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current);\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  }\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    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        this._canvas!.clear(CanvasKit.TRANSPARENT);\n        this.renderInCanvas(this._canvas!, touches);\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  /**\n   * Registers one or move values as a dependant value of the Skia View. The view will\n   * The view will redraw itself when any of the values change.\n   * @param values Values to register\n   */\n  public registerValues(_values: SkiaValue<unknown>[]) {\n    // Unsubscribe from dependency values\n    this.unsubscribeAll();\n    // Register redraw dependencies on values\n    _values.forEach((v) => {\n      this._unsubscriptions.push(\n        v.addListener(() => {\n          this.redraw();\n        })\n      );\n    });\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  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <View {...viewProps} onLayout={this.onLayout.bind(this)}>\n        <canvas\n          ref={this._canvasRef}\n          style={{ display: \"flex\", flex: 1 }}\n          onPointerDown={this.createTouchHandler(TouchType.Start)}\n          onPointerMove={this.createTouchHandler(TouchType.Active)}\n          onPointerUp={this.createTouchHandler(TouchType.End)}\n          onPointerCancel={this.createTouchHandler(TouchType.Cancelled)}\n          onPointerLeave={this.createTouchHandler(TouchType.End)}\n          onPointerOut={this.createTouchHandler(TouchType.End)}\n        />\n      </View>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["React","PixelRatio","View","JsiSkSurface","TouchType","pd","get","SkiaBaseWebView","Component","constructor","props","createRef","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","onLayout","evt","CanvasKit","global","width","height","nativeEvent","layout","_canvasRef","current","canvas","surface","MakeWebGLCanvasSurface","Error","_surface","_canvas","getCanvas","redraw","getSize","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","makeImageSnapshot","rect","_redrawRequests","touches","_touches","clear","Float32Array","of","save","scale","renderInCanvas","restore","ref","flush","requestAnimationFrame","bind","setDrawMode","registerValues","_values","v","push","addListener","handleTouchEvent","touchType","id","pointerId","x","clientX","currentTarget","getClientRects","left","y","clientY","top","force","pressure","type","timestamp","Date","now","createTouchHandler","render","debug","viewProps","display","flex","Start","Active","End","Cancelled"],"sources":["SkiaBaseWebView.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\nimport { PixelRatio, View } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\n\nimport type { DrawMode, SkiaBaseViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst pd = PixelRatio.get();\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 onLayout(evt: LayoutChangeEvent) {\n    const { CanvasKit } = global;\n    const { width, height } = evt.nativeEvent.layout;\n    this.width = width;\n    this.height = height;\n    // Reset canvas / surface on layout change\n    if (this._canvasRef.current) {\n      const canvas = this._canvasRef.current;\n      canvas.width = width * pd;\n      canvas.height = height * pd;\n      const surface = CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current);\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  }\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    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  /**\n   * Registers one or move values as a dependant value of the Skia View. The view will\n   * The view will redraw itself when any of the values change.\n   * @param values Values to register\n   */\n  public registerValues(_values: SkiaValue<unknown>[]) {\n    // Unsubscribe from dependency values\n    this.unsubscribeAll();\n    // Register redraw dependencies on values\n    _values.forEach((v) => {\n      this._unsubscriptions.push(\n        v.addListener(() => {\n          this.redraw();\n        })\n      );\n    });\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  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <View {...viewProps} onLayout={this.onLayout.bind(this)}>\n        <canvas\n          ref={this._canvasRef}\n          style={{ display: \"flex\", flex: 1 }}\n          onPointerDown={this.createTouchHandler(TouchType.Start)}\n          onPointerMove={this.createTouchHandler(TouchType.Active)}\n          onPointerUp={this.createTouchHandler(TouchType.End)}\n          onPointerCancel={this.createTouchHandler(TouchType.Cancelled)}\n          onPointerLeave={this.createTouchHandler(TouchType.End)}\n          onPointerOut={this.createTouchHandler(TouchType.End)}\n        />\n      </View>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,31 @@
+import React from "react";
+import type { SkRect } from "../skia/types";
+import type { SkiaValue } from "../values";
+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;
+    /**
+     * Sends a redraw request to the native SkiaView.
+     */
+    redraw(): void;
+    /**
+     * Registers one or move values as a dependant value of the Skia View. The view will
+     * The view will redraw itself when any of the values change.
+     * @param values Values to register
+     */
+    registerValues(values: SkiaValue<unknown>[]): () => void;
+    /**
+     * Clear up the dom node when unmounting to release resources.
+     */
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+}

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

@@ -0,0 +1,7 @@
+import type { SkCanvas } from "../skia/types";
+import { SkiaBaseWebView } from "./SkiaBaseWebView";
+import type { SkiaDomViewProps, TouchInfo } from "./types";
+export declare class SkiaDomView extends SkiaBaseWebView<SkiaDomViewProps> {
+    constructor(props: SkiaDomViewProps);
+    protected renderInCanvas(canvas: SkCanvas, touches: TouchInfo[]): void;
+}

package/lib/module/views/SkiaDomView.web.js

@@ -1,7 +1,6 @@
-import { PixelRatio } from "react-native";
 import { Skia } from "../skia";
+import { JsiDrawingContext } from "../dom/types/DrawingContext";
 import { SkiaBaseWebView } from "./SkiaBaseWebView";
-const pd = PixelRatio.get();
 export class SkiaDomView extends SkiaBaseWebView {
   constructor(props) {
     super(props);
@@ -24,16 +23,8 @@ export class SkiaDomView extends SkiaBaseWebView {
     }
 
     if (this.props.root) {
-      const paint = Skia.Paint();
-      const ctx = {
-        canvas,
-        paint,
-        opacity: 1
-      };
-      canvas.save();
-      canvas.scale(pd, pd);
+      const ctx = new JsiDrawingContext(Skia, canvas);
       this.props.root.render(ctx);
-      canvas.restore();
     }
   }
 

package/lib/module/views/SkiaDomView.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["PixelRatio","Skia","SkiaBaseWebView","pd","get","SkiaDomView","constructor","props","renderInCanvas","canvas","touches","onTouch","onSize","width","height","getSize","current","root","paint","Paint","ctx","opacity","save","scale","render","restore"],"sources":["SkiaDomView.web.tsx"],"sourcesContent":["import { PixelRatio } from \"react-native\";\n\nimport { Skia } from \"../skia\";\nimport type { SkCanvas } from \"../skia/types\";\n\nimport { SkiaBaseWebView } from \"./SkiaBaseWebView\";\nimport type { SkiaDomViewProps, TouchInfo } from \"./types\";\n\nconst pd = PixelRatio.get();\n\nexport class SkiaDomView extends SkiaBaseWebView<SkiaDomViewProps> {\n  constructor(props: SkiaDomViewProps) {\n    super(props);\n  }\n\n  protected renderInCanvas(canvas: SkCanvas, touches: TouchInfo[]): void {\n    if (this.props.onTouch) {\n      this.props.onTouch([touches]);\n    }\n    if (this.props.onSize) {\n      const { width, height } = this.getSize();\n      this.props.onSize.current = { width, height };\n    }\n    if (this.props.root) {\n      const paint = Skia.Paint();\n      const ctx = {\n        canvas,\n        paint,\n        opacity: 1,\n      };\n      canvas.save();\n      canvas.scale(pd, pd);\n      this.props.root.render(ctx);\n      canvas.restore();\n    }\n  }\n}\n"],"mappings":"AAAA,SAASA,UAAT,QAA2B,cAA3B;AAEA,SAASC,IAAT,QAAqB,SAArB;AAGA,SAASC,eAAT,QAAgC,mBAAhC;AAGA,MAAMC,EAAE,GAAGH,UAAU,CAACI,GAAX,EAAX;AAEA,OAAO,MAAMC,WAAN,SAA0BH,eAA1B,CAA4D;EACjEI,WAAW,CAACC,KAAD,EAA0B;IACnC,MAAMA,KAAN;EACD;;EAESC,cAAc,CAACC,MAAD,EAAmBC,OAAnB,EAA+C;IACrE,IAAI,KAAKH,KAAL,CAAWI,OAAf,EAAwB;MACtB,KAAKJ,KAAL,CAAWI,OAAX,CAAmB,CAACD,OAAD,CAAnB;IACD;;IACD,IAAI,KAAKH,KAAL,CAAWK,MAAf,EAAuB;MACrB,MAAM;QAAEC,KAAF;QAASC;MAAT,IAAoB,KAAKC,OAAL,EAA1B;MACA,KAAKR,KAAL,CAAWK,MAAX,CAAkBI,OAAlB,GAA4B;QAAEH,KAAF;QAASC;MAAT,CAA5B;IACD;;IACD,IAAI,KAAKP,KAAL,CAAWU,IAAf,EAAqB;MACnB,MAAMC,KAAK,GAAGjB,IAAI,CAACkB,KAAL,EAAd;MACA,MAAMC,GAAG,GAAG;QACVX,MADU;QAEVS,KAFU;QAGVG,OAAO,EAAE;MAHC,CAAZ;MAKAZ,MAAM,CAACa,IAAP;MACAb,MAAM,CAACc,KAAP,CAAapB,EAAb,EAAiBA,EAAjB;MACA,KAAKI,KAAL,CAAWU,IAAX,CAAgBO,MAAhB,CAAuBJ,GAAvB;MACAX,MAAM,CAACgB,OAAP;IACD;EACF;;AAzBgE"}
+{"version":3,"names":["Skia","JsiDrawingContext","SkiaBaseWebView","SkiaDomView","constructor","props","renderInCanvas","canvas","touches","onTouch","onSize","width","height","getSize","current","root","ctx","render"],"sources":["SkiaDomView.web.tsx"],"sourcesContent":["import { Skia } from \"../skia\";\nimport type { SkCanvas } from \"../skia/types\";\nimport { JsiDrawingContext } from \"../dom/types/DrawingContext\";\n\nimport { SkiaBaseWebView } from \"./SkiaBaseWebView\";\nimport type { SkiaDomViewProps, TouchInfo } from \"./types\";\n\nexport class SkiaDomView extends SkiaBaseWebView<SkiaDomViewProps> {\n  constructor(props: SkiaDomViewProps) {\n    super(props);\n  }\n\n  protected renderInCanvas(canvas: SkCanvas, touches: TouchInfo[]): void {\n    if (this.props.onTouch) {\n      this.props.onTouch([touches]);\n    }\n    if (this.props.onSize) {\n      const { width, height } = this.getSize();\n      this.props.onSize.current = { width, height };\n    }\n    if (this.props.root) {\n      const ctx = new JsiDrawingContext(Skia, canvas);\n      this.props.root.render(ctx);\n    }\n  }\n}\n"],"mappings":"AAAA,SAASA,IAAT,QAAqB,SAArB;AAEA,SAASC,iBAAT,QAAkC,6BAAlC;AAEA,SAASC,eAAT,QAAgC,mBAAhC;AAGA,OAAO,MAAMC,WAAN,SAA0BD,eAA1B,CAA4D;EACjEE,WAAW,CAACC,KAAD,EAA0B;IACnC,MAAMA,KAAN;EACD;;EAESC,cAAc,CAACC,MAAD,EAAmBC,OAAnB,EAA+C;IACrE,IAAI,KAAKH,KAAL,CAAWI,OAAf,EAAwB;MACtB,KAAKJ,KAAL,CAAWI,OAAX,CAAmB,CAACD,OAAD,CAAnB;IACD;;IACD,IAAI,KAAKH,KAAL,CAAWK,MAAf,EAAuB;MACrB,MAAM;QAAEC,KAAF;QAASC;MAAT,IAAoB,KAAKC,OAAL,EAA1B;MACA,KAAKR,KAAL,CAAWK,MAAX,CAAkBI,OAAlB,GAA4B;QAAEH,KAAF;QAASC;MAAT,CAA5B;IACD;;IACD,IAAI,KAAKP,KAAL,CAAWU,IAAf,EAAqB;MACnB,MAAMC,GAAG,GAAG,IAAIf,iBAAJ,CAAsBD,IAAtB,EAA4BO,MAA5B,CAAZ;MACA,KAAKF,KAAL,CAAWU,IAAX,CAAgBE,MAAhB,CAAuBD,GAAvB;IACD;EACF;;AAjBgE"}

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

@@ -0,0 +1,27 @@
+import React from "react";
+import type { SkRect } from "../skia/types";
+import type { SkiaValue } from "../values";
+import type { SkiaPictureViewProps } from "./types";
+export declare class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
+    constructor(props: SkiaPictureViewProps);
+    private _nativeId;
+    get nativeId(): number;
+    componentDidUpdate(prevProps: SkiaPictureViewProps): 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;
+    /**
+     * Sends a redraw request to the native SkiaView.
+     */
+    redraw(): void;
+    /**
+     * Registers one or move values as a dependant value of the Skia View. The view will
+     * The view will redraw itself when any of the values change.
+     * @param values Values to register
+     */
+    registerValues(values: SkiaValue<unknown>[]): () => void;
+    render(): JSX.Element;
+}

package/lib/module/views/SkiaPictureView.web.d.ts

@@ -0,0 +1,7 @@
+import type { SkCanvas } from "../skia/types";
+import type { SkiaPictureViewProps } from "./types";
+import { SkiaBaseWebView } from "./SkiaBaseWebView";
+export declare class SkiaPictureView extends SkiaBaseWebView<SkiaPictureViewProps> {
+    constructor(props: SkiaPictureViewProps);
+    protected renderInCanvas(canvas: SkCanvas): void;
+}

package/lib/module/views/SkiaPictureView.web.js

@@ -1,6 +1,4 @@
-import { PixelRatio } from "react-native";
 import { SkiaBaseWebView } from "./SkiaBaseWebView";
-const pd = PixelRatio.get();
 export class SkiaPictureView extends SkiaBaseWebView {
   constructor(props) {
     super(props);
@@ -8,10 +6,7 @@ export class SkiaPictureView extends SkiaBaseWebView {
 
   renderInCanvas(canvas) {
     if (this.props.picture) {
-      canvas.save();
-      canvas.scale(pd, pd);
       canvas.drawPicture(this.props.picture);
-      canvas.restore();
     }
   }
 

package/lib/module/views/SkiaPictureView.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["PixelRatio","SkiaBaseWebView","pd","get","SkiaPictureView","constructor","props","renderInCanvas","canvas","picture","save","scale","drawPicture","restore"],"sources":["SkiaPictureView.web.tsx"],"sourcesContent":["import { PixelRatio } from \"react-native\";\n\nimport type { SkCanvas } from \"../skia/types\";\n\nimport type { SkiaPictureViewProps } from \"./types\";\nimport { SkiaBaseWebView } from \"./SkiaBaseWebView\";\n\nconst pd = PixelRatio.get();\n\nexport class SkiaPictureView extends SkiaBaseWebView<SkiaPictureViewProps> {\n  constructor(props: SkiaPictureViewProps) {\n    super(props);\n  }\n\n  protected renderInCanvas(canvas: SkCanvas): void {\n    if (this.props.picture) {\n      canvas.save();\n      canvas.scale(pd, pd);\n      canvas.drawPicture(this.props.picture);\n      canvas.restore();\n    }\n  }\n}\n"],"mappings":"AAAA,SAASA,UAAT,QAA2B,cAA3B;AAKA,SAASC,eAAT,QAAgC,mBAAhC;AAEA,MAAMC,EAAE,GAAGF,UAAU,CAACG,GAAX,EAAX;AAEA,OAAO,MAAMC,eAAN,SAA8BH,eAA9B,CAAoE;EACzEI,WAAW,CAACC,KAAD,EAA8B;IACvC,MAAMA,KAAN;EACD;;EAESC,cAAc,CAACC,MAAD,EAAyB;IAC/C,IAAI,KAAKF,KAAL,CAAWG,OAAf,EAAwB;MACtBD,MAAM,CAACE,IAAP;MACAF,MAAM,CAACG,KAAP,CAAaT,EAAb,EAAiBA,EAAjB;MACAM,MAAM,CAACI,WAAP,CAAmB,KAAKN,KAAL,CAAWG,OAA9B;MACAD,MAAM,CAACK,OAAP;IACD;EACF;;AAZwE"}
+{"version":3,"names":["SkiaBaseWebView","SkiaPictureView","constructor","props","renderInCanvas","canvas","picture","drawPicture"],"sources":["SkiaPictureView.web.tsx"],"sourcesContent":["import type { SkCanvas } from \"../skia/types\";\n\nimport type { SkiaPictureViewProps } from \"./types\";\nimport { SkiaBaseWebView } from \"./SkiaBaseWebView\";\n\nexport class SkiaPictureView extends SkiaBaseWebView<SkiaPictureViewProps> {\n  constructor(props: SkiaPictureViewProps) {\n    super(props);\n  }\n\n  protected renderInCanvas(canvas: SkCanvas): void {\n    if (this.props.picture) {\n      canvas.drawPicture(this.props.picture);\n    }\n  }\n}\n"],"mappings":"AAGA,SAASA,eAAT,QAAgC,mBAAhC;AAEA,OAAO,MAAMC,eAAN,SAA8BD,eAA9B,CAAoE;EACzEE,WAAW,CAACC,KAAD,EAA8B;IACvC,MAAMA,KAAN;EACD;;EAESC,cAAc,CAACC,MAAD,EAAyB;IAC/C,IAAI,KAAKF,KAAL,CAAWG,OAAf,EAAwB;MACtBD,MAAM,CAACE,WAAP,CAAmB,KAAKJ,KAAL,CAAWG,OAA9B;IACD;EACF;;AATwE"}

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

@@ -0,0 +1,30 @@
+import React from "react";
+import type { SkRect } from "../skia/types";
+import type { SkiaValue } from "../values";
+import type { SkiaDrawViewProps } from "./types";
+export declare const SkiaViewNativeId: {
+    current: number;
+};
+export declare class SkiaView extends React.Component<SkiaDrawViewProps> {
+    constructor(props: SkiaDrawViewProps);
+    private _nativeId;
+    get nativeId(): number;
+    componentDidUpdate(prevProps: SkiaDrawViewProps): 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;
+    /**
+     * Sends a redraw request to the native SkiaView.
+     */
+    redraw(): void;
+    /**
+     * Registers one or move values as a dependant value of the Skia View. The view will
+     * The view will redraw itself when any of the values change.
+     * @param values Values to register
+     */
+    registerValues(values: SkiaValue<unknown>[]): () => void;
+    render(): JSX.Element;
+}

package/lib/module/views/SkiaView.web.d.ts

@@ -0,0 +1,7 @@
+import type { SkCanvas } from "../skia/types";
+import type { SkiaDrawViewProps, TouchInfo } from "./types";
+import { SkiaBaseWebView } from "./SkiaBaseWebView";
+export declare class SkiaView extends SkiaBaseWebView<SkiaDrawViewProps> {
+    constructor(props: SkiaDrawViewProps);
+    protected renderInCanvas(canvas: SkCanvas, touches: TouchInfo[]): void;
+}

package/lib/module/views/SkiaView.web.js

@@ -1,6 +1,4 @@
-import { PixelRatio } from "react-native";
 import { SkiaBaseWebView } from "./SkiaBaseWebView";
-const pd = PixelRatio.get();
 export class SkiaView extends SkiaBaseWebView {
   constructor(props) {
     super(props);
@@ -14,10 +12,7 @@ export class SkiaView extends SkiaBaseWebView {
         timestamp: Date.now(),
         touches: touches.map(t => [t])
       };
-      canvas.save();
-      canvas.scale(pd, pd);
       this.props.onDraw(canvas, info);
-      canvas.restore();
     }
   }
 

package/lib/module/views/SkiaView.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["PixelRatio","SkiaBaseWebView","pd","get","SkiaView","constructor","props","renderInCanvas","canvas","touches","onDraw","info","height","width","timestamp","Date","now","map","t","save","scale","restore"],"sources":["SkiaView.web.tsx"],"sourcesContent":["import { PixelRatio } from \"react-native\";\n\nimport type { SkCanvas } from \"../skia/types\";\n\nimport type { DrawingInfo, SkiaDrawViewProps, TouchInfo } from \"./types\";\nimport { SkiaBaseWebView } from \"./SkiaBaseWebView\";\n\nconst pd = PixelRatio.get();\n\nexport class SkiaView extends SkiaBaseWebView<SkiaDrawViewProps> {\n  constructor(props: SkiaDrawViewProps) {\n    super(props);\n  }\n\n  protected renderInCanvas(canvas: SkCanvas, touches: TouchInfo[]): void {\n    if (this.props.onDraw) {\n      const info: DrawingInfo = {\n        height: this.height,\n        width: this.width,\n        timestamp: Date.now(),\n        touches: touches.map((t) => [t]),\n      };\n      canvas.save();\n      canvas.scale(pd, pd);\n      this.props.onDraw(canvas, info);\n      canvas.restore();\n    }\n  }\n}\n"],"mappings":"AAAA,SAASA,UAAT,QAA2B,cAA3B;AAKA,SAASC,eAAT,QAAgC,mBAAhC;AAEA,MAAMC,EAAE,GAAGF,UAAU,CAACG,GAAX,EAAX;AAEA,OAAO,MAAMC,QAAN,SAAuBH,eAAvB,CAA0D;EAC/DI,WAAW,CAACC,KAAD,EAA2B;IACpC,MAAMA,KAAN;EACD;;EAESC,cAAc,CAACC,MAAD,EAAmBC,OAAnB,EAA+C;IACrE,IAAI,KAAKH,KAAL,CAAWI,MAAf,EAAuB;MACrB,MAAMC,IAAiB,GAAG;QACxBC,MAAM,EAAE,KAAKA,MADW;QAExBC,KAAK,EAAE,KAAKA,KAFY;QAGxBC,SAAS,EAAEC,IAAI,CAACC,GAAL,EAHa;QAIxBP,OAAO,EAAEA,OAAO,CAACQ,GAAR,CAAaC,CAAD,IAAO,CAACA,CAAD,CAAnB;MAJe,CAA1B;MAMAV,MAAM,CAACW,IAAP;MACAX,MAAM,CAACY,KAAP,CAAalB,EAAb,EAAiBA,EAAjB;MACA,KAAKI,KAAL,CAAWI,MAAX,CAAkBF,MAAlB,EAA0BG,IAA1B;MACAH,MAAM,CAACa,OAAP;IACD;EACF;;AAlB8D"}
+{"version":3,"names":["SkiaBaseWebView","SkiaView","constructor","props","renderInCanvas","canvas","touches","onDraw","info","height","width","timestamp","Date","now","map","t"],"sources":["SkiaView.web.tsx"],"sourcesContent":["import type { SkCanvas } from \"../skia/types\";\n\nimport type { DrawingInfo, SkiaDrawViewProps, TouchInfo } from \"./types\";\nimport { SkiaBaseWebView } from \"./SkiaBaseWebView\";\n\nexport class SkiaView extends SkiaBaseWebView<SkiaDrawViewProps> {\n  constructor(props: SkiaDrawViewProps) {\n    super(props);\n  }\n\n  protected renderInCanvas(canvas: SkCanvas, touches: TouchInfo[]): void {\n    if (this.props.onDraw) {\n      const info: DrawingInfo = {\n        height: this.height,\n        width: this.width,\n        timestamp: Date.now(),\n        touches: touches.map((t) => [t]),\n      };\n      this.props.onDraw(canvas, info);\n    }\n  }\n}\n"],"mappings":"AAGA,SAASA,eAAT,QAAgC,mBAAhC;AAEA,OAAO,MAAMC,QAAN,SAAuBD,eAAvB,CAA0D;EAC/DE,WAAW,CAACC,KAAD,EAA2B;IACpC,MAAMA,KAAN;EACD;;EAESC,cAAc,CAACC,MAAD,EAAmBC,OAAnB,EAA+C;IACrE,IAAI,KAAKH,KAAL,CAAWI,MAAf,EAAuB;MACrB,MAAMC,IAAiB,GAAG;QACxBC,MAAM,EAAE,KAAKA,MADW;QAExBC,KAAK,EAAE,KAAKA,KAFY;QAGxBC,SAAS,EAAEC,IAAI,CAACC,GAAL,EAHa;QAIxBP,OAAO,EAAEA,OAAO,CAACQ,GAAR,CAAaC,CAAD,IAAO,CAACA,CAAD,CAAnB;MAJe,CAA1B;MAMA,KAAKZ,KAAL,CAAWI,MAAX,CAAkBF,MAAlB,EAA0BG,IAA1B;IACD;EACF;;AAf8D"}