@shopify/react-native-skia 0.1.157 → 0.1.159

package/src/views/SkiaDomView.tsx

@@ -0,0 +1,120 @@
+import React from "react";
+import { requireNativeComponent, Platform } from "react-native";
+import type { HostComponent } from "react-native";
+
+import type { SkRect } from "../skia/types";
+import type { SkiaValue } from "../values";
+
+import { SkiaViewApi } from "./api";
+import { SkiaViewNativeId } from "./SkiaView";
+import type { NativeSkiaViewProps, SkiaDomViewProps } from "./types";
+
+const NativeSkiaDomView: HostComponent<SkiaDomViewProps> =
+  Platform.OS !== "web"
+    ? requireNativeComponent<NativeSkiaViewProps>("SkiaDomView")
+    : // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (null as any);
+
+export class SkiaDomView extends React.Component<SkiaDomViewProps> {
+  constructor(props: SkiaDomViewProps) {
+    super(props);
+    this._nativeId = SkiaViewNativeId.current++;
+    const { root, onTouch, onSize } = props;
+    if (root) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "root", root);
+    }
+    if (onTouch) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "onTouch", onTouch);
+    }
+    if (onSize) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
+    }
+  }
+
+  private _nativeId: number;
+
+  public get nativeId() {
+    return this._nativeId;
+  }
+
+  componentDidUpdate(prevProps: SkiaDomViewProps) {
+    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.
+   */
+  public makeImageSnapshot(rect?: SkRect) {
+    assertSkiaViewApi();
+    return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);
+  }
+
+  /**
+   * Sends a redraw request to the native SkiaView.
+   */
+  public 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
+   */
+  public registerValues(values: SkiaValue<unknown>[]): () => void {
+    assertSkiaViewApi();
+    return SkiaViewApi.registerValuesInView(this._nativeId, values);
+  }
+
+  /**
+   * Clear up the dom node when unmounting to release resources.
+   */
+  componentWillUnmount(): void {
+    assertSkiaViewApi();
+    SkiaViewApi.setJsiProperty(this._nativeId, "root", null);
+  }
+
+  render() {
+    const { mode, debug = false, ...viewProps } = this.props;
+    return (
+      <NativeSkiaDomView
+        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.");
+  }
+};

package/src/views/SkiaDomView.web.tsx

@@ -0,0 +1,37 @@
+import { PixelRatio } from "react-native";
+
+import { Skia } from "../skia";
+import type { SkCanvas } from "../skia/types";
+
+import { SkiaBaseWebView } from "./SkiaBaseWebView";
+import type { SkiaDomViewProps, TouchInfo } from "./types";
+
+const pd = PixelRatio.get();
+
+export class SkiaDomView extends SkiaBaseWebView<SkiaDomViewProps> {
+  constructor(props: SkiaDomViewProps) {
+    super(props);
+  }
+
+  protected renderInCanvas(canvas: SkCanvas, touches: TouchInfo[]): void {
+    if (this.props.onTouch) {
+      this.props.onTouch([touches]);
+    }
+    if (this.props.onSize) {
+      const { width, height } = this.getSize();
+      this.props.onSize.current = { width, height };
+    }
+    if (this.props.root) {
+      const paint = Skia.Paint();
+      const ctx = {
+        canvas,
+        paint,
+        opacity: 1,
+      };
+      canvas.save();
+      canvas.scale(pd, pd);
+      this.props.root.render(ctx);
+      canvas.restore();
+    }
+  }
+}

package/src/views/SkiaPictureView.tsx

@@ -15,11 +15,15 @@ export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
   constructor(props: SkiaPictureViewProps) {
     super(props);
     this._nativeId = SkiaViewNativeId.current++;
-    const { picture } = props;
+    const { picture, onSize } = props;
     if (picture) {
       assertSkiaViewApi();
       SkiaViewApi.setJsiProperty(this._nativeId, "picture", picture);
     }
+    if (onSize) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
+    }
   }
 
   private _nativeId: number;
@@ -29,11 +33,15 @@ export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
   }
 
   componentDidUpdate(prevProps: SkiaPictureViewProps) {
-    const { picture } = this.props;
+    const { picture, onSize } = this.props;
     if (picture !== prevProps.picture) {
       assertSkiaViewApi();
       SkiaViewApi.setJsiProperty(this._nativeId, "picture", picture);
     }
+    if (onSize !== prevProps.onSize) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
+    }
   }
 
   /**

package/src/views/SkiaView.tsx

@@ -16,11 +16,15 @@ export class SkiaView extends React.Component<SkiaDrawViewProps> {
   constructor(props: SkiaDrawViewProps) {
     super(props);
     this._nativeId = SkiaViewNativeId.current++;
-    const { onDraw } = props;
+    const { onDraw, onSize } = props;
     if (onDraw) {
       assertSkiaViewApi();
       SkiaViewApi.setJsiProperty(this._nativeId, "drawCallback", onDraw);
     }
+    if (onSize) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
+    }
   }
 
   private _nativeId: number;
@@ -30,11 +34,15 @@ export class SkiaView extends React.Component<SkiaDrawViewProps> {
   }
 
   componentDidUpdate(prevProps: SkiaDrawViewProps) {
-    const { onDraw } = this.props;
+    const { onDraw, onSize } = this.props;
     if (onDraw !== prevProps.onDraw) {
       assertSkiaViewApi();
       SkiaViewApi.setJsiProperty(this._nativeId, "drawCallback", onDraw);
     }
+    if (onSize !== prevProps.onSize) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
+    }
   }
 
   /**
@@ -66,7 +74,7 @@ export class SkiaView extends React.Component<SkiaDrawViewProps> {
   }
 
   render() {
-    const { mode, debug = false, ...viewProps } = this.props;
+    const { mode, debug = false, onSize, ...viewProps } = this.props;
     return (
       <NativeSkiaView
         collapsable={false}

package/src/views/index.ts

@@ -1,5 +1,6 @@
 export * from "./SkiaView";
 export * from "./SkiaPictureView";
+export * from "./SkiaDomView";
 export * from "./types";
 export * from "./useDrawCallback";
 export * from "./useTouchHandler";

package/src/views/types.ts

@@ -1,7 +1,14 @@
 import type { ViewProps } from "react-native";
 
-import type { SkCanvas, SkImage, SkPicture, SkRect } from "../skia/types";
-import type { SkiaValue } from "../values";
+import type { GroupProps, RenderNode } from "../dom/types";
+import type {
+  SkCanvas,
+  SkImage,
+  SkPicture,
+  SkRect,
+  SkSize,
+} from "../skia/types";
+import type { SkiaMutableValue, SkiaValue } from "../values";
 
 export type DrawMode = "continuous" | "default";
 
@@ -86,6 +93,11 @@ export interface SkiaBaseViewProps extends ViewProps {
    * average time it takes to render.
    */
   debug?: boolean;
+  /**
+   * Pass an animated value to the onSize property to get updates when
+   * the Skia view is resized.
+   */
+  onSize?: SkiaMutableValue<SkSize>;
 }
 
 export interface SkiaDrawViewProps extends SkiaBaseViewProps {
@@ -102,3 +114,8 @@ export interface SkiaDrawViewProps extends SkiaBaseViewProps {
 export interface SkiaPictureViewProps extends SkiaBaseViewProps {
   picture?: SkPicture;
 }
+
+export interface SkiaDomViewProps extends SkiaBaseViewProps {
+  root?: RenderNode<GroupProps>;
+  onTouch?: TouchHandler;
+}

package/cpp/jsi/JsiSimpleValueWrapper.h

@@ -1,99 +0,0 @@
-#pragma once
-
-#include <memory>
-
-#include <jsi/jsi.h>
-
-namespace RNJsi {
-namespace jsi = facebook::jsi;
-
-/**
- Implements a simple wrapper class for JSI primitives like numbers and boolean
- values. Objects, strings and arrays are stored as values inside a property
- holder. The class also provides a method for comparing values that will compare
- numbers, booleans and strings.
- */
-class JsiSimpleValueWrapper {
-private:
-  enum ValueType { NonInitialized, Undefined, Null, Bool, Number, JsiValue };
-
-public:
-  explicit JsiSimpleValueWrapper(jsi::Runtime &runtime)
-      : _type(ValueType::NonInitialized),
-        _propNameId(jsi::PropNameID::forUtf8(runtime, "value")) {}
-
-  jsi::Value getCurrent(jsi::Runtime &runtime) {
-    switch (_type) {
-    case ValueType::NonInitialized:
-      return nullptr;
-    case ValueType::Undefined:
-      return jsi::Value::undefined();
-    case ValueType::Null:
-      return jsi::Value::null();
-    case ValueType::Bool:
-      return _boolValue;
-    case ValueType::Number:
-      return _numberValue;
-    case ValueType::JsiValue:
-      if (_valueHolder == nullptr) {
-        return jsi::Value::undefined();
-      }
-      return _valueHolder->getProperty(runtime, _propNameId);
-    }
-  }
-
-  void setCurrent(jsi::Runtime &runtime, const jsi::Value &value) {
-    if (value.isNumber()) {
-      _type = ValueType::Number;
-      _numberValue = value.asNumber();
-    } else if (value.isBool()) {
-      _type = ValueType::Bool;
-      _boolValue = value.getBool();
-    } else if (value.isUndefined()) {
-      _type = ValueType::Undefined;
-    } else if (value.isNull()) {
-      _type = ValueType::Null;
-    } else {
-      _type = ValueType::JsiValue;
-      // Save as javascript object - we don't want to have to copy strings,
-      // objects and values
-      if (_valueHolder == nullptr) {
-        _valueHolder = std::make_shared<jsi::Object>(runtime);
-      }
-      _valueHolder->setProperty(runtime, _propNameId, value);
-    }
-  }
-
-  bool equals(jsi::Runtime &runtime, const jsi::Value &value) {
-    if (_type == ValueType::NonInitialized) {
-      return false;
-    }
-    if (value.isNumber() && _type == ValueType::Number) {
-      return _numberValue == value.asNumber();
-    } else if (value.isBool() && _type == ValueType::Bool) {
-      return _boolValue == value.getBool();
-    } else if (value.isUndefined()) {
-      return _type == ValueType::Undefined;
-    } else if (value.isNull()) {
-      return _type == ValueType::Null;
-    } else if (value.isString()) {
-      auto current = getCurrent(runtime);
-      if (current.isString()) {
-        return jsi::String::strictEquals(runtime, value.asString(runtime),
-                                         current.asString(runtime));
-      }
-      return false;
-    }
-    return false;
-  }
-
-private:
-  jsi::PropNameID _propNameId;
-  std::shared_ptr<jsi::Object> _valueHolder;
-
-  bool _boolValue;
-  double _numberValue;
-
-  ValueType _type;
-};
-} // namespace RNJsi

package/cpp/skia/include/c/sk_canvas.h

@@ -1,159 +0,0 @@
-/*
- * Copyright 2014 Google Inc.
- *
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
-
-// EXPERIMENTAL EXPERIMENTAL EXPERIMENTAL EXPERIMENTAL
-// DO NOT USE -- FOR INTERNAL TESTING ONLY
-
-#ifndef sk_canvas_DEFINED
-#define sk_canvas_DEFINED
-
-#include "include/c/sk_types.h"
-
-SK_C_PLUS_PLUS_BEGIN_GUARD
-
-/**
-    Save the current matrix and clip on the canvas.  When the
-    balancing call to sk_canvas_restore() is made, the previous matrix
-    and clip are restored.
-*/
-SK_API void sk_canvas_save(sk_canvas_t*);
-/**
-    This behaves the same as sk_canvas_save(), but in addition it
-    allocates an offscreen surface. All drawing calls are directed
-    there, and only when the balancing call to sk_canvas_restore() is
-    made is that offscreen transfered to the canvas (or the previous
-    layer).
-
-    @param sk_rect_t* (may be null) This rect, if non-null, is used as
-                      a hint to limit the size of the offscreen, and
-                      thus drawing may be clipped to it, though that
-                      clipping is not guaranteed to happen. If exact
-                      clipping is desired, use sk_canvas_clip_rect().
-    @param sk_paint_t* (may be null) The paint is copied, and is applied
-                       to the offscreen when sk_canvas_restore() is
-                       called.
-*/
-SK_API void sk_canvas_save_layer(sk_canvas_t*, const sk_rect_t*, const sk_paint_t*);
-/**
-    This call balances a previous call to sk_canvas_save() or
-    sk_canvas_save_layer(), and is used to remove all modifications to
-    the matrix and clip state since the last save call.  It is an
-    error to call sk_canvas_restore() more times than save and
-    save_layer were called.
-*/
-SK_API void sk_canvas_restore(sk_canvas_t*);
-
-/**
-    Preconcat the current coordinate transformation matrix with the
-    specified translation.
-*/
-SK_API void sk_canvas_translate(sk_canvas_t*, float dx, float dy);
-/**
-    Preconcat the current coordinate transformation matrix with the
-    specified scale.
-*/
-SK_API void sk_canvas_scale(sk_canvas_t*, float sx, float sy);
-/**
-    Preconcat the current coordinate transformation matrix with the
-    specified rotation in degrees.
-*/
-SK_API void sk_canvas_rotate_degrees(sk_canvas_t*, float degrees);
-/**
-    Preconcat the current coordinate transformation matrix with the
-    specified rotation in radians.
-*/
-SK_API void sk_canvas_rotate_radians(sk_canvas_t*, float radians);
-/**
-    Preconcat the current coordinate transformation matrix with the
-    specified skew.
-*/
-SK_API void sk_canvas_skew(sk_canvas_t*, float sx, float sy);
-/**
-    Preconcat the current coordinate transformation matrix with the
-    specified matrix.
-*/
-SK_API void sk_canvas_concat(sk_canvas_t*, const sk_matrix_t*);
-
-/**
-    Modify the current clip with the specified rectangle.  The new
-    current clip will be the intersection of the old clip and the
-    rectange.
-*/
-SK_API void sk_canvas_clip_rect(sk_canvas_t*, const sk_rect_t*);
-/**
-    Modify the current clip with the specified path.  The new
-    current clip will be the intersection of the old clip and the
-    path.
-*/
-SK_API void sk_canvas_clip_path(sk_canvas_t*, const sk_path_t*);
-
-/**
-    Fill the entire canvas (restricted to the current clip) with the
-    specified paint.
-*/
-SK_API void sk_canvas_draw_paint(sk_canvas_t*, const sk_paint_t*);
-/**
-    Draw the specified rectangle using the specified paint. The
-    rectangle will be filled or stroked based on the style in the
-    paint.
-*/
-SK_API void sk_canvas_draw_rect(sk_canvas_t*, const sk_rect_t*, const sk_paint_t*);
-/**
- *  Draw the circle centered at (cx, cy) with radius rad using the specified paint.
- *  The circle will be filled or framed based on the style in the paint
- */
-SK_API void sk_canvas_draw_circle(sk_canvas_t*, float cx, float cy, float rad, const sk_paint_t*);
-/**
-    Draw the specified oval using the specified paint. The oval will be
-    filled or framed based on the style in the paint
-*/
-SK_API void sk_canvas_draw_oval(sk_canvas_t*, const sk_rect_t*, const sk_paint_t*);
-/**
-    Draw the specified path using the specified paint. The path will be
-    filled or framed based on the style in the paint
-*/
-SK_API void sk_canvas_draw_path(sk_canvas_t*, const sk_path_t*, const sk_paint_t*);
-/**
-    Draw the specified image, with its top/left corner at (x,y), using
-    the specified paint, transformed by the current matrix.
-
-    @param sk_paint_t* (may be NULL) the paint used to draw the image.
-*/
-SK_API void sk_canvas_draw_image(sk_canvas_t*, const sk_image_t*, float x, float y,
-                                 const sk_sampling_options_t*, const sk_paint_t*);
-/**
-    Draw the specified image, scaling and translating so that it fills
-    the specified dst rect. If the src rect is non-null, only that
-    subset of the image is transformed and drawn.
-
-    @param sk_paint_t* (may be NULL) The paint used to draw the image.
-*/
-SK_API void sk_canvas_draw_image_rect(sk_canvas_t*, const sk_image_t*,
-                                      const sk_rect_t* src, const sk_rect_t* dst,
-                                      const sk_sampling_options_t*, const sk_paint_t*);
-
-/**
-    Draw the picture into this canvas (replay the pciture's drawing commands).
-
-    @param sk_matrix_t* If non-null, apply that matrix to the CTM when
-                        drawing this picture. This is logically
-                        equivalent to: save, concat, draw_picture,
-                        restore.
-
-    @param sk_paint_t* If non-null, draw the picture into a temporary
-                       buffer, and then apply the paint's alpha,
-                       colorfilter, imagefilter, and xfermode to that
-                       buffer as it is drawn to the canvas.  This is
-                       logically equivalent to save_layer(paint),
-                       draw_picture, restore.
-*/
-SK_API void sk_canvas_draw_picture(sk_canvas_t*, const sk_picture_t*,
-                                   const sk_matrix_t*, const sk_paint_t*);
-
-SK_C_PLUS_PLUS_END_GUARD
-
-#endif

package/cpp/skia/include/c/sk_colorspace.h

@@ -1,25 +0,0 @@
-/*
- * Copyright 2018 Google Inc.
- *
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
-
-// EXPERIMENTAL EXPERIMENTAL EXPERIMENTAL EXPERIMENTAL
-// DO NOT USE -- FOR INTERNAL TESTING ONLY
-
-#ifndef sk_colorspace_DEFINED
-#define sk_colorspace_DEFINED
-
-#include "include/c/sk_types.h"
-
-SK_C_PLUS_PLUS_BEGIN_GUARD
-
-SK_API sk_colorspace_t* sk_colorspace_new_srgb();
-
-SK_API void sk_colorspace_ref(sk_colorspace_t*);
-SK_API void sk_colorspace_unref(sk_colorspace_t*);
-
-SK_C_PLUS_PLUS_END_GUARD
-
-#endif

package/cpp/skia/include/c/sk_data.h

@@ -1,65 +0,0 @@
-/*
- * Copyright 2014 Google Inc.
- *
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
-
-// EXPERIMENTAL EXPERIMENTAL EXPERIMENTAL EXPERIMENTAL
-// DO NOT USE -- FOR INTERNAL TESTING ONLY
-
-#ifndef sk_data_DEFINED
-#define sk_data_DEFINED
-
-#include "include/c/sk_types.h"
-
-SK_C_PLUS_PLUS_BEGIN_GUARD
-
-/**
-    Returns a new sk_data_t by copying the specified source data.
-    This call must be balanced with a call to sk_data_unref().
-*/
-SK_API sk_data_t* sk_data_new_with_copy(const void* src, size_t length);
-/**
-    Pass ownership of the given memory to a new sk_data_t, which will
-    call free() when the refernce count of the data goes to zero.  For
-    example:
-        size_t length = 1024;
-        void* buffer = malloc(length);
-        memset(buffer, 'X', length);
-        sk_data_t* data = sk_data_new_from_malloc(buffer, length);
-    This call must be balanced with a call to sk_data_unref().
-*/
-SK_API sk_data_t* sk_data_new_from_malloc(const void* memory, size_t length);
-/**
-    Returns a new sk_data_t using a subset of the data in the
-    specified source sk_data_t.  This call must be balanced with a
-    call to sk_data_unref().
-*/
-SK_API sk_data_t* sk_data_new_subset(const sk_data_t* src, size_t offset, size_t length);
-
-/**
-    Increment the reference count on the given sk_data_t. Must be
-    balanced by a call to sk_data_unref().
-*/
-SK_API void sk_data_ref(const sk_data_t*);
-/**
-    Decrement the reference count. If the reference count is 1 before
-    the decrement, then release both the memory holding the sk_data_t
-    and the memory it is managing.  New sk_data_t are created with a
-    reference count of 1.
-*/
-SK_API void sk_data_unref(const sk_data_t*);
-
-/**
-    Returns the number of bytes stored.
-*/
-SK_API size_t sk_data_get_size(const sk_data_t*);
-/**
-    Returns the pointer to the data.
- */
-SK_API const void* sk_data_get_data(const sk_data_t*);
-
-SK_C_PLUS_PLUS_END_GUARD
-
-#endif