@shopify/react-native-skia 0.1.151 → 0.1.152

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

@@ -5,219 +5,32 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SkiaView = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _reactNative = require("react-native");
 
-var _JsiSkSurface = require("../skia/web/JsiSkSurface");
-
-var _types = require("./types");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+var _SkiaBaseWebView = require("./SkiaBaseWebView");
 
 const pd = _reactNative.PixelRatio.get();
 
-class SkiaView extends _react.default.Component {
+class SkiaView extends _SkiaBaseWebView.SkiaBaseWebView {
   constructor(props) {
     super(props);
-
-    _defineProperty(this, "_surface", null);
-
-    _defineProperty(this, "_unsubscriptions", []);
-
-    _defineProperty(this, "_touches", []);
-
-    _defineProperty(this, "_canvas", null);
-
-    _defineProperty(this, "_canvasRef", /*#__PURE__*/_react.default.createRef());
-
-    _defineProperty(this, "_mode", void 0);
-
-    _defineProperty(this, "_redrawRequests", 0);
-
-    _defineProperty(this, "width", 0);
-
-    _defineProperty(this, "height", 0);
-
-    _defineProperty(this, "requestId", 0);
-
-    this._mode = props.mode ?? "default";
-  }
-
-  unsubscribeAll() {
-    this._unsubscriptions.forEach(u => u());
-
-    this._unsubscriptions = [];
   }
 
-  onLayout(evt) {
-    const {
-      CanvasKit
-    } = global;
-    const {
-      width,
-      height
-    } = evt.nativeEvent.layout;
-    this.width = width;
-    this.height = height; // Reset canvas / surface on layout change
-
-    if (this._canvasRef.current) {
-      const canvas = this._canvasRef.current;
-      canvas.width = canvas.clientWidth * pd;
-      canvas.height = canvas.clientHeight * pd;
-      const surface = CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current);
-
-      if (!surface) {
-        throw new Error("Could not create surface");
-      }
-
-      this._surface = new _JsiSkSurface.JsiSkSurface(CanvasKit, surface);
-      this._canvas = this._surface.getCanvas();
-      this.redraw();
+  renderInCanvas(canvas, touches) {
+    if (this.props.onDraw) {
+      const info = {
+        height: this.height,
+        width: this.width,
+        timestamp: Date.now(),
+        touches: touches.map(t => [t])
+      };
+      canvas.save();
+      canvas.scale(pd, pd);
+      this.props.onDraw(canvas, info);
+      canvas.restore();
     }
   }
 
-  componentDidMount() {
-    // Start render loop
-    this.tick();
-  }
-
-  componentDidUpdate() {
-    this.redraw();
-  }
-
-  componentWillUnmount() {
-    this.unsubscribeAll();
-    cancelAnimationFrame(this.requestId);
-  }
-  /**
-   * 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;
-
-    return (_this$_surface = this._surface) === null || _this$_surface === void 0 ? void 0 : _this$_surface.makeImageSnapshot(rect);
-  }
-  /**
-   * Sends a redraw request to the native SkiaView.
-   */
-
-
-  tick() {
-    if (this._mode === "continuous" || this._redrawRequests > 0) {
-      this._redrawRequests = 0;
-
-      if (this._canvas && this.props.onDraw) {
-        var _this$_surface2;
-
-        const touches = [...this._touches];
-        this._touches = [];
-        const info = {
-          height: this.height,
-          width: this.width,
-          timestamp: Date.now(),
-          touches: touches.map(t => [t])
-        };
-
-        if (this.props.onDraw) {
-          const canvas = this._canvas;
-          canvas.save();
-          canvas.scale(pd, pd);
-          this.props.onDraw(canvas, info);
-          canvas.restore();
-        }
-
-        (_this$_surface2 = this._surface) === null || _this$_surface2 === void 0 ? void 0 : _this$_surface2.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();
-  }
-  /**
-   * 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) {
-    // Unsubscribe from dependency values
-    this.unsubscribeAll(); // Register redraw dependencies on values
-
-    _values.forEach(v => {
-      this._unsubscriptions.push(v.addListener(() => {
-        this.redraw();
-      }));
-    });
-  }
-
-  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.default.createElement(_reactNative.View, _extends({}, viewProps, {
-      onLayout: this.onLayout.bind(this)
-    }), /*#__PURE__*/_react.default.createElement("canvas", {
-      ref: this._canvasRef,
-      style: {
-        display: "flex",
-        flex: 1
-      },
-      onPointerDown: this.createTouchHandler(_types.TouchType.Start),
-      onPointerMove: this.createTouchHandler(_types.TouchType.Active),
-      onPointerUp: this.createTouchHandler(_types.TouchType.End),
-      onPointerCancel: this.createTouchHandler(_types.TouchType.Cancelled),
-      onPointerLeave: this.createTouchHandler(_types.TouchType.End),
-      onPointerOut: this.createTouchHandler(_types.TouchType.End)
-    }));
-  }
-
 }
 
 exports.SkiaView = SkiaView;

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

@@ -1 +1 @@
-{"version":3,"names":["pd","PixelRatio","get","SkiaView","React","Component","constructor","props","createRef","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","onLayout","evt","CanvasKit","global","width","height","nativeEvent","layout","_canvasRef","current","canvas","clientWidth","clientHeight","surface","MakeWebGLCanvasSurface","Error","_surface","JsiSkSurface","_canvas","getCanvas","redraw","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","makeImageSnapshot","rect","_redrawRequests","onDraw","touches","_touches","info","timestamp","Date","now","map","t","save","scale","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","createTouchHandler","render","debug","viewProps","display","flex","TouchType","Start","Active","End","Cancelled"],"sources":["SkiaView.web.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 { DrawingInfo, DrawMode, SkiaViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst pd = PixelRatio.get();\n\nexport class SkiaView extends React.Component<SkiaViewProps> {\n  constructor(props: SkiaViewProps) {\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 width = 0;\n  private height = 0;\n  private requestId = 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 = canvas.clientWidth * pd;\n      canvas.height = canvas.clientHeight * 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  }\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   * 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 && this.props.onDraw) {\n        const touches = [...this._touches];\n        this._touches = [];\n        const info: DrawingInfo = {\n          height: this.height,\n          width: this.width,\n          timestamp: Date.now(),\n          touches: touches.map((t) => [t]),\n        };\n        if (this.props.onDraw) {\n          const canvas = this._canvas!;\n          canvas.save();\n          canvas.scale(pd, pd);\n          this.props.onDraw(canvas, info);\n          canvas.restore();\n        }\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":["pd","PixelRatio","get","SkiaView","SkiaBaseWebView","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;;AAKA;;AAEA,MAAMA,EAAE,GAAGC,uBAAA,CAAWC,GAAX,EAAX;;AAEO,MAAMC,QAAN,SAAuBC,gCAAvB,CAA0D;EAC/DC,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,CAAapB,EAAb,EAAiBA,EAAjB;MACA,KAAKM,KAAL,CAAWI,MAAX,CAAkBF,MAAlB,EAA0BG,IAA1B;MACAH,MAAM,CAACa,OAAP;IACD;EACF;;AAlB8D"}

package/lib/commonjs/views/index.js

@@ -17,6 +17,19 @@ Object.keys(_SkiaView).forEach(function (key) {
   });
 });
 
+var _SkiaPictureView = require("./SkiaPictureView");
+
+Object.keys(_SkiaPictureView).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SkiaPictureView[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SkiaPictureView[key];
+    }
+  });
+});
+
 var _types = require("./types");
 
 Object.keys(_types).forEach(function (key) {

package/lib/commonjs/views/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./SkiaView\";\nexport * from \"./types\";\nexport * from \"./useDrawCallback\";\nexport * from \"./useTouchHandler\";\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./SkiaView\";\nexport * from \"./SkiaPictureView\";\nexport * from \"./types\";\nexport * from \"./useDrawCallback\";\nexport * from \"./useTouchHandler\";\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/lib/commonjs/views/types.js.map

@@ -1 +1 @@
-{"version":3,"names":["TouchType"],"sources":["types.ts"],"sourcesContent":["import type { ViewProps } from \"react-native\";\n\nimport type { SkCanvas, SkImage, SkRect } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\n\nexport type DrawMode = \"continuous\" | \"default\";\n\nexport type NativeSkiaViewProps = ViewProps & {\n  mode?: DrawMode;\n  debug?: boolean;\n};\n\nexport enum TouchType {\n  Start,\n  Active,\n  End,\n  Cancelled,\n}\n\nexport interface TouchInfo {\n  x: number;\n  y: number;\n  force: number;\n  type: TouchType;\n  id: number;\n  timestamp: number;\n}\n\nexport interface DrawingInfo {\n  width: number;\n  height: number;\n  timestamp: number;\n  touches: Array<Array<TouchInfo>>;\n}\n\nexport type ExtendedTouchInfo = TouchInfo & {\n  // points per second\n  velocityX: number;\n  velocityY: number;\n};\n\nexport type TouchHandlers = {\n  onStart?: (touchInfo: TouchInfo) => void;\n  onActive?: (touchInfo: ExtendedTouchInfo) => void;\n  onEnd?: (touchInfo: ExtendedTouchInfo) => void;\n};\n\nexport type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;\n\nexport type RNSkiaDrawCallback = (canvas: SkCanvas, info: DrawingInfo) => void;\n\n/**\n * Listener interface for value changes\n */\nexport interface ValueListener {\n  addListener: (callback: () => void) => number;\n  removeListener: (id: number) => void;\n}\n\nexport interface ISkiaViewApi {\n  setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;\n  callJsiMethod: <T extends Array<unknown>>(\n    nativeId: number,\n    name: string,\n    ...args: T\n  ) => void;\n  registerValuesInView: (\n    nativeId: number,\n    values: SkiaValue<unknown>[]\n  ) => () => void;\n  requestRedraw: (nativeId: number) => void;\n  makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;\n}\n\nexport interface SkiaViewProps extends ViewProps {\n  /**\n   * Sets the drawing mode for the skia view. There are two drawing\n   * modes, \"continuous\" and \"default\", where the continuous mode will\n   * continuously redraw the view, and the default mode will only\n   * redraw when any of the regular react properties are changed like\n   * sizes and margins.\n   */\n  mode?: DrawMode;\n  /**\n   * When set to true the view will display information about the\n   * average time it takes to render.\n   */\n  debug?: boolean;\n  /**\n   * Draw callback. Will be called whenever the view is invalidated and\n   * needs to redraw. This is either caused by a change in a react\n   * property, a touch event, or a call to redraw. If the view is in\n   * continuous mode the callback will be called 60 frames per second\n   * by the native view.\n   */\n  onDraw?: RNSkiaDrawCallback;\n}\n"],"mappings":";;;;;;IAYYA,S;;;WAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;GAAAA,S,yBAAAA,S"}
+{"version":3,"names":["TouchType"],"sources":["types.ts"],"sourcesContent":["import type { ViewProps } from \"react-native\";\n\nimport type { SkCanvas, SkImage, SkPicture, SkRect } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\n\nexport type DrawMode = \"continuous\" | \"default\";\n\nexport type NativeSkiaViewProps = ViewProps & {\n  mode?: DrawMode;\n  debug?: boolean;\n};\n\nexport enum TouchType {\n  Start,\n  Active,\n  End,\n  Cancelled,\n}\n\nexport interface TouchInfo {\n  x: number;\n  y: number;\n  force: number;\n  type: TouchType;\n  id: number;\n  timestamp: number;\n}\n\nexport interface DrawingInfo {\n  width: number;\n  height: number;\n  timestamp: number;\n  touches: Array<Array<TouchInfo>>;\n}\n\nexport type ExtendedTouchInfo = TouchInfo & {\n  // points per second\n  velocityX: number;\n  velocityY: number;\n};\n\nexport type TouchHandlers = {\n  onStart?: (touchInfo: TouchInfo) => void;\n  onActive?: (touchInfo: ExtendedTouchInfo) => void;\n  onEnd?: (touchInfo: ExtendedTouchInfo) => void;\n};\n\nexport type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;\n\nexport type RNSkiaDrawCallback = (canvas: SkCanvas, info: DrawingInfo) => void;\n\n/**\n * Listener interface for value changes\n */\nexport interface ValueListener {\n  addListener: (callback: () => void) => number;\n  removeListener: (id: number) => void;\n}\n\nexport interface ISkiaViewApi {\n  setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;\n  callJsiMethod: <T extends Array<unknown>>(\n    nativeId: number,\n    name: string,\n    ...args: T\n  ) => void;\n  registerValuesInView: (\n    nativeId: number,\n    values: SkiaValue<unknown>[]\n  ) => () => void;\n  requestRedraw: (nativeId: number) => void;\n  makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;\n}\n\nexport interface SkiaBaseViewProps extends ViewProps {\n  /**\n   * Sets the drawing mode for the skia view. There are two drawing\n   * modes, \"continuous\" and \"default\", where the continuous mode will\n   * continuously redraw the view, and the default mode will only\n   * redraw when any of the regular react properties are changed like\n   * sizes and margins.\n   */\n  mode?: DrawMode;\n  /**\n   * When set to true the view will display information about the\n   * average time it takes to render.\n   */\n  debug?: boolean;\n}\n\nexport interface SkiaDrawViewProps extends SkiaBaseViewProps {\n  /**\n   * Draw callback. Will be called whenever the view is invalidated and\n   * needs to redraw. This is either caused by a change in a react\n   * property, a touch event, or a call to redraw. If the view is in\n   * continuous mode the callback will be called 60 frames per second\n   * by the native view.\n   */\n  onDraw?: RNSkiaDrawCallback;\n}\n\nexport interface SkiaPictureViewProps extends SkiaBaseViewProps {\n  picture?: SkPicture;\n}\n"],"mappings":";;;;;;IAYYA,S;;;WAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;GAAAA,S,yBAAAA,S"}

package/lib/module/views/SkiaBaseWebView.js

@@ -0,0 +1,198 @@
+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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/* global HTMLCanvasElement */
+import React from "react";
+import { PixelRatio, View } from "react-native";
+import { JsiSkSurface } from "../skia/web/JsiSkSurface";
+import { TouchType } from "./types";
+const pd = PixelRatio.get();
+export class SkiaBaseWebView extends React.Component {
+  constructor(props) {
+    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);
+
+    this._mode = props.mode ?? "default";
+  }
+
+  unsubscribeAll() {
+    this._unsubscriptions.forEach(u => u());
+
+    this._unsubscriptions = [];
+  }
+
+  onLayout(evt) {
+    const {
+      CanvasKit
+    } = global;
+    const {
+      width,
+      height
+    } = evt.nativeEvent.layout;
+    this.width = width;
+    this.height = height; // Reset canvas / surface on layout change
+
+    if (this._canvasRef.current) {
+      const canvas = this._canvasRef.current;
+      canvas.width = canvas.clientWidth * pd;
+      canvas.height = canvas.clientHeight * pd;
+      const surface = CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current);
+
+      if (!surface) {
+        throw new Error("Could not create surface");
+      }
+
+      this._surface = new JsiSkSurface(CanvasKit, surface);
+      this._canvas = this._surface.getCanvas();
+      this.redraw();
+    }
+  }
+
+  componentDidMount() {
+    // Start render loop
+    this.tick();
+  }
+
+  componentDidUpdate() {
+    this.redraw();
+  }
+
+  componentWillUnmount() {
+    this.unsubscribeAll();
+    cancelAnimationFrame(this.requestId);
+  }
+  /**
+   * 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;
+
+    return (_this$_surface = this._surface) === null || _this$_surface === void 0 ? void 0 : _this$_surface.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$_surface2;
+
+        const touches = [...this._touches];
+        this._touches = [];
+        this.renderInCanvas(this._canvas, touches);
+        (_this$_surface2 = this._surface) === null || _this$_surface2 === void 0 ? void 0 : _this$_surface2.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();
+  }
+  /**
+   * 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) {
+    // Unsubscribe from dependency values
+    this.unsubscribeAll(); // Register redraw dependencies on values
+
+    _values.forEach(v => {
+      this._unsubscriptions.push(v.addListener(() => {
+        this.redraw();
+      }));
+    });
+  }
+
+  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(View, _extends({}, viewProps, {
+      onLayout: this.onLayout.bind(this)
+    }), /*#__PURE__*/React.createElement("canvas", {
+      ref: this._canvasRef,
+      style: {
+        display: "flex",
+        flex: 1
+      },
+      onPointerDown: this.createTouchHandler(TouchType.Start),
+      onPointerMove: this.createTouchHandler(TouchType.Active),
+      onPointerUp: this.createTouchHandler(TouchType.End),
+      onPointerCancel: this.createTouchHandler(TouchType.Cancelled),
+      onPointerLeave: this.createTouchHandler(TouchType.End),
+      onPointerOut: this.createTouchHandler(TouchType.End)
+    }));
+  }
+
+}
+//# sourceMappingURL=SkiaBaseWebView.js.map

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

@@ -0,0 +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","clientWidth","clientHeight","surface","MakeWebGLCanvasSurface","Error","_surface","_canvas","getCanvas","redraw","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","makeImageSnapshot","rect","_redrawRequests","touches","_touches","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 = canvas.clientWidth * pd;\n      canvas.height = canvas.clientHeight * 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  }\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.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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"}

package/lib/module/views/SkiaPictureView.js

@@ -0,0 +1,94 @@
+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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import React from "react";
+import { requireNativeComponent } from "react-native";
+import { SkiaViewApi } from "./api";
+let SkiaViewNativeId = 1000;
+const NativeSkiaPictureView = requireNativeComponent("SkiaPictureView");
+export class SkiaPictureView extends React.Component {
+  constructor(props) {
+    super(props);
+
+    _defineProperty(this, "_nativeId", void 0);
+
+    this._nativeId = SkiaViewNativeId++;
+    const {
+      picture
+    } = props;
+
+    if (picture) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "picture", picture);
+    }
+  }
+
+  get nativeId() {
+    return this._nativeId;
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      picture
+    } = this.props;
+
+    if (picture !== prevProps.picture) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "picture", picture);
+    }
+  }
+  /**
+   * 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);
+  }
+  /**
+   * Sends a redraw request to the native SkiaView.
+   */
+
+
+  redraw() {
+    assertSkiaViewApi();
+    SkiaViewApi.requestRedraw(this._nativeId);
+  }
+  /**
+   * 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) {
+    assertSkiaViewApi();
+    return SkiaViewApi.registerValuesInView(this._nativeId, values);
+  }
+
+  render() {
+    const {
+      mode,
+      debug = false,
+      ...viewProps
+    } = this.props;
+    return /*#__PURE__*/React.createElement(NativeSkiaPictureView, _extends({
+      collapsable: false,
+      nativeID: `${this._nativeId}`,
+      mode: mode,
+      debug: debug
+    }, viewProps));
+  }
+
+}
+
+const assertSkiaViewApi = () => {
+  if (SkiaViewApi === null || SkiaViewApi.setJsiProperty === null || SkiaViewApi.callJsiMethod === null || SkiaViewApi.registerValuesInView === null || SkiaViewApi.requestRedraw === null || SkiaViewApi.makeImageSnapshot === null) {
+    throw Error("Skia View Api was not found.");
+  }
+};
+//# sourceMappingURL=SkiaPictureView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","requireNativeComponent","SkiaViewApi","SkiaViewNativeId","NativeSkiaPictureView","SkiaPictureView","Component","constructor","props","_nativeId","picture","assertSkiaViewApi","setJsiProperty","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","redraw","requestRedraw","registerValues","values","registerValuesInView","render","mode","debug","viewProps","callJsiMethod","Error"],"sources":["SkiaPictureView.tsx"],"sourcesContent":["import React from \"react\";\nimport { requireNativeComponent } from \"react-native\";\n\nimport type { SkRect } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\n\nimport { SkiaViewApi } from \"./api\";\nimport type { NativeSkiaViewProps, SkiaPictureViewProps } from \"./types\";\n\nlet SkiaViewNativeId = 1000;\n\nconst NativeSkiaPictureView =\n  requireNativeComponent<NativeSkiaViewProps>(\"SkiaPictureView\");\n\nexport class SkiaPictureView extends React.Component<SkiaPictureViewProps> {\n  constructor(props: SkiaPictureViewProps) {\n    super(props);\n    this._nativeId = SkiaViewNativeId++;\n    const { picture } = props;\n    if (picture) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"picture\", picture);\n    }\n  }\n\n  private _nativeId: number;\n\n  public get nativeId() {\n    return this._nativeId;\n  }\n\n  componentDidUpdate(prevProps: SkiaPictureViewProps) {\n    const { picture } = this.props;\n    if (picture !== prevProps.picture) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"picture\", picture);\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    assertSkiaViewApi();\n    return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);\n  }\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  public redraw() {\n    assertSkiaViewApi();\n    SkiaViewApi.requestRedraw(this._nativeId);\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>[]): () => void {\n    assertSkiaViewApi();\n    return SkiaViewApi.registerValuesInView(this._nativeId, values);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <NativeSkiaPictureView\n        collapsable={false}\n        nativeID={`${this._nativeId}`}\n        mode={mode}\n        debug={debug}\n        {...viewProps}\n      />\n    );\n  }\n}\n\nconst assertSkiaViewApi = () => {\n  if (\n    SkiaViewApi === null ||\n    SkiaViewApi.setJsiProperty === null ||\n    SkiaViewApi.callJsiMethod === null ||\n    SkiaViewApi.registerValuesInView === null ||\n    SkiaViewApi.requestRedraw === null ||\n    SkiaViewApi.makeImageSnapshot === null\n  ) {\n    throw Error(\"Skia View Api was not found.\");\n  }\n};\n"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,sBAAT,QAAuC,cAAvC;AAKA,SAASC,WAAT,QAA4B,OAA5B;AAGA,IAAIC,gBAAgB,GAAG,IAAvB;AAEA,MAAMC,qBAAqB,GACzBH,sBAAsB,CAAsB,iBAAtB,CADxB;AAGA,OAAO,MAAMI,eAAN,SAA8BL,KAAK,CAACM,SAApC,CAAoE;EACzEC,WAAW,CAACC,KAAD,EAA8B;IACvC,MAAMA,KAAN;;IADuC;;IAEvC,KAAKC,SAAL,GAAiBN,gBAAgB,EAAjC;IACA,MAAM;MAAEO;IAAF,IAAcF,KAApB;;IACA,IAAIE,OAAJ,EAAa;MACXC,iBAAiB;MACjBT,WAAW,CAACU,cAAZ,CAA2B,KAAKH,SAAhC,EAA2C,SAA3C,EAAsDC,OAAtD;IACD;EACF;;EAIkB,IAARG,QAAQ,GAAG;IACpB,OAAO,KAAKJ,SAAZ;EACD;;EAEDK,kBAAkB,CAACC,SAAD,EAAkC;IAClD,MAAM;MAAEL;IAAF,IAAc,KAAKF,KAAzB;;IACA,IAAIE,OAAO,KAAKK,SAAS,CAACL,OAA1B,EAAmC;MACjCC,iBAAiB;MACjBT,WAAW,CAACU,cAAZ,CAA2B,KAAKH,SAAhC,EAA2C,SAA3C,EAAsDC,OAAtD;IACD;EACF;EAED;AACF;AACA;AACA;AACA;;;EACSM,iBAAiB,CAACC,IAAD,EAAgB;IACtCN,iBAAiB;IACjB,OAAOT,WAAW,CAACc,iBAAZ,CAA8B,KAAKP,SAAnC,EAA8CQ,IAA9C,CAAP;EACD;EAED;AACF;AACA;;;EACSC,MAAM,GAAG;IACdP,iBAAiB;IACjBT,WAAW,CAACiB,aAAZ,CAA0B,KAAKV,SAA/B;EACD;EAED;AACF;AACA;AACA;AACA;;;EACSW,cAAc,CAACC,MAAD,EAA2C;IAC9DV,iBAAiB;IACjB,OAAOT,WAAW,CAACoB,oBAAZ,CAAiC,KAAKb,SAAtC,EAAiDY,MAAjD,CAAP;EACD;;EAEDE,MAAM,GAAG;IACP,MAAM;MAAEC,IAAF;MAAQC,KAAK,GAAG,KAAhB;MAAuB,GAAGC;IAA1B,IAAwC,KAAKlB,KAAnD;IACA,oBACE,oBAAC,qBAAD;MACE,WAAW,EAAE,KADf;MAEE,QAAQ,EAAG,GAAE,KAAKC,SAAU,EAF9B;MAGE,IAAI,EAAEe,IAHR;MAIE,KAAK,EAAEC;IAJT,GAKMC,SALN,EADF;EASD;;AAhEwE;;AAmE3E,MAAMf,iBAAiB,GAAG,MAAM;EAC9B,IACET,WAAW,KAAK,IAAhB,IACAA,WAAW,CAACU,cAAZ,KAA+B,IAD/B,IAEAV,WAAW,CAACyB,aAAZ,KAA8B,IAF9B,IAGAzB,WAAW,CAACoB,oBAAZ,KAAqC,IAHrC,IAIApB,WAAW,CAACiB,aAAZ,KAA8B,IAJ9B,IAKAjB,WAAW,CAACc,iBAAZ,KAAkC,IANpC,EAOE;IACA,MAAMY,KAAK,CAAC,8BAAD,CAAX;EACD;AACF,CAXD"}

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

@@ -0,0 +1,19 @@
+import { PixelRatio } from "react-native";
+import { SkiaBaseWebView } from "./SkiaBaseWebView";
+const pd = PixelRatio.get();
+export class SkiaPictureView extends SkiaBaseWebView {
+  constructor(props) {
+    super(props);
+  }
+
+  renderInCanvas(canvas) {
+    if (this.props.picture) {
+      canvas.save();
+      canvas.scale(pd, pd);
+      canvas.drawPicture(this.props.picture);
+      canvas.restore();
+    }
+  }
+
+}
+//# sourceMappingURL=SkiaPictureView.web.js.map

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

@@ -0,0 +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"}