@shopify/react-native-skia 0.1.229 → 0.1.230

package/src/renderer/processors/Animations/Animations.ts

@@ -1,58 +1,8 @@
-import type { SkiaSelector, SkiaValue } from "../../../values";
-
 export type SharedValueType<T = number> = {
   value: T;
 };
 
-export const isValue = (value: unknown): value is SkiaValue<unknown> => {
-  if (value === undefined || value === null) {
-    return false;
-  }
-  try {
-    if (
-      typeof value === "object" &&
-      "__typename__" in value &&
-      (value as unknown as SkiaValue<unknown>).__typename__ === "RNSkValue"
-    ) {
-      return true;
-    }
-  } catch {}
-  return false;
-};
-
-export const isSelector = <T, R>(
-  value: unknown
-): value is {
-  selector: (v: T) => R;
-  value: SkiaValue<T>;
-} => {
-  if (value) {
-    return (
-      typeof value === "object" &&
-      "selector" in value &&
-      "value" in value &&
-      (value as Record<string, unknown>).selector !== undefined &&
-      (value as Record<string, unknown>).value !== undefined
-    );
-  }
-  return false;
-};
-
-export const isAnimated = <T>(props: AnimatedProps<T>) => {
-  for (const value of Object.values(props)) {
-    if (isValue(value) || isSelector(value)) {
-      return true;
-    }
-  }
-  return false;
-};
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type AnimatedProp<T, P = any> =
-  | T
-  | SkiaValue<T>
-  | SkiaSelector<T, P>
-  | SharedValueType<T>;
+export type AnimatedProp<T> = T | SharedValueType<T>;
 
 export type AnimatedProps<T, O extends keyof T | never = never> = {
   [K in keyof T]: K extends "children"

package/src/skia/types/Paragraph/Paragraph.ts

@@ -32,6 +32,31 @@ export interface SkParagraph extends SkJSIInstance<"Paragraph"> {
    * method to have been called first.
    */
   getMaxWidth(): number;
+  /**
+   * Returns the minimum intrinsic width of the paragraph.
+   * The minimum intrinsic width is the width beyond which increasing the width of the paragraph
+   * does not decrease the height. This is effectively the width at which the paragraph
+   * can no longer wrap lines and is forced to overflow.
+   * This method requires the layout method to have been called first.
+   * @returns {number} The minimum intrinsic width of the paragraph.
+   */
+  getMinIntrinsicWidth(): number;
+  /**
+   * Returns the maximum intrinsic width of the paragraph.
+   * The maximum intrinsic width is the width at which the paragraph can layout its content without line breaks,
+   * meaning it's the width of the widest line or the widest word if the widest line is shorter than that.
+   * This width represents the ideal width for the paragraph to display all content in a single line without overflow.
+   * This method requires the layout method to have been called first.
+   * @returns {number} The maximum intrinsic width of the paragraph.
+   */
+  getMaxIntrinsicWidth(): number;
+
+  /**
+   * Returns the width of the longest line in the paragraph.
+   * This method requires the layout method to have been called first.
+   */
+  getLongestLine(): number;
+
   /**
    * Returns the index of the glyph at the given position. This method requires
    * the layout method to have been called first.

package/src/skia/web/JsiSkParagraph.ts

@@ -12,6 +12,17 @@ export class JsiSkParagraph
   constructor(CanvasKit: CanvasKit, ref: Paragraph) {
     super(CanvasKit, ref, "Paragraph");
   }
+  getMinIntrinsicWidth(): number {
+    return this.ref.getMinIntrinsicWidth();
+  }
+
+  getMaxIntrinsicWidth(): number {
+    return this.ref.getMaxIntrinsicWidth();
+  }
+
+  getLongestLine(): number {
+    return this.ref.getLongestLine();
+  }
 
   layout(width: number): void {
     this.ref.layout(width);

package/src/skia/web/JsiSkParagraphBuilderFactory.ts

@@ -9,7 +9,7 @@ import type {
 import { Host } from "./Host";
 import { JsiSkParagraphBuilder } from "./JsiSkParagraphBuilder";
 import { JsiSkParagraphStyle } from "./JsiSkParagraphStyle";
-import { JsiSkTypeface } from "./JsiSkTypeface";
+import { JsiSkTypefaceFontProvider } from "./JsiSkTypefaceFontProvider";
 
 export class JsiSkParagraphBuilderFactory
   extends Host
@@ -31,11 +31,17 @@ export class JsiSkParagraphBuilderFactory
         "SkTypefaceFontProvider is required on React Native Web."
       );
     }
+    const fontCollection = this.CanvasKit.FontCollection.Make();
+    fontCollection.setDefaultFontManager(
+      JsiSkTypefaceFontProvider.fromValue(typefaceProvider)
+    );
+    fontCollection.enableFontFallback();
+
     return new JsiSkParagraphBuilder(
       this.CanvasKit,
-      this.CanvasKit.ParagraphBuilder.MakeFromFontProvider(
+      this.CanvasKit.ParagraphBuilder.MakeFromFontCollection(
         style,
-        JsiSkTypeface.fromValue(typefaceProvider)
+        fontCollection
       )
     );
   }

package/src/views/SkiaBaseWebView.tsx

@@ -4,7 +4,6 @@ import type { PointerEvent } from "react";
 import type { LayoutChangeEvent } from "react-native";
 
 import type { SkRect, SkCanvas } from "../skia/types";
-import type { SkiaValue } from "../values";
 import { JsiSkSurface } from "../skia/web/JsiSkSurface";
 import { Platform } from "../Platform";
 
@@ -148,24 +147,6 @@ export abstract class SkiaBaseWebView<
     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
-   */
-  public registerValues(_values: SkiaValue<unknown>[]) {
-    // Unsubscribe from dependency values
-    this.unsubscribeAll();
-    // Register redraw dependencies on values
-    _values.forEach((v) => {
-      this._unsubscriptions.push(
-        v.addListener(() => {
-          this.redraw();
-        })
-      );
-    });
-  }
-
   private handleTouchEvent(evt: PointerEvent, touchType: TouchType) {
     this._touches.push({
       id: evt.pointerId,

package/src/views/SkiaDomView.tsx

@@ -2,13 +2,12 @@ import React from "react";
 import type { HostComponent } from "react-native";
 
 import type { SkRect } from "../skia/types";
-import type { SkiaValue } from "../values";
 import { Platform } from "../Platform";
 import SkiaDomViewNativeComponent from "../specs/SkiaDomViewNativeComponent";
 
 import { SkiaViewApi } from "./api";
-import { SkiaViewNativeId } from "./SkiaView";
 import type { SkiaDomViewProps } from "./types";
+import { SkiaViewNativeId } from "./SkiaViewNativeId";
 
 const NativeSkiaDomView: HostComponent<SkiaDomViewProps> =
   Platform.OS !== "web"
@@ -75,16 +74,6 @@ export class SkiaDomView extends React.Component<SkiaDomViewProps> {
     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.
    */
@@ -112,7 +101,6 @@ const assertSkiaViewApi = () => {
     SkiaViewApi === null ||
     SkiaViewApi.setJsiProperty === null ||
     SkiaViewApi.callJsiMethod === null ||
-    SkiaViewApi.registerValuesInView === null ||
     SkiaViewApi.requestRedraw === null ||
     SkiaViewApi.makeImageSnapshot === null
   ) {

package/src/views/SkiaDomView.web.tsx

@@ -1,7 +1,6 @@
 import { Skia } from "../skia";
 import type { SkCanvas } from "../skia/types";
 import { JsiDrawingContext } from "../dom/types/DrawingContext";
-import { isValue } from "../renderer/processors/Animations/Animations";
 
 import { SkiaBaseWebView } from "./SkiaBaseWebView";
 import type { SkiaDomViewProps, TouchInfo } from "./types";
@@ -17,11 +16,7 @@ export class SkiaDomView extends SkiaBaseWebView<SkiaDomViewProps> {
     }
     if (this.props.onSize) {
       const { width, height } = this.getSize();
-      if (isValue(this.props.onSize)) {
-        this.props.onSize.current = { width, height };
-      } else {
-        this.props.onSize.value = { width, height };
-      }
+      this.props.onSize.value = { width, height };
     }
     if (this.props.root) {
       const ctx = new JsiDrawingContext(Skia, canvas);

package/src/views/SkiaPictureView.tsx

@@ -1,12 +1,11 @@
 import React from "react";
 
 import type { SkRect } from "../skia/types";
-import type { SkiaValue } from "../values";
 import SkiaPictureViewNativeComponent from "../specs/SkiaPictureViewNativeComponent";
 
 import { SkiaViewApi } from "./api";
-import { SkiaViewNativeId } from "./SkiaView";
 import type { SkiaPictureViewProps } from "./types";
+import { SkiaViewNativeId } from "./SkiaViewNativeId";
 
 const NativeSkiaPictureView = SkiaPictureViewNativeComponent;
 
@@ -61,16 +60,6 @@ export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
     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);
-  }
-
   render() {
     const { mode, debug = false, ...viewProps } = this.props;
     return (
@@ -90,7 +79,6 @@ const assertSkiaViewApi = () => {
     SkiaViewApi === null ||
     SkiaViewApi.setJsiProperty === null ||
     SkiaViewApi.callJsiMethod === null ||
-    SkiaViewApi.registerValuesInView === null ||
     SkiaViewApi.requestRedraw === null ||
     SkiaViewApi.makeImageSnapshot === null
   ) {

package/src/views/SkiaViewNativeId.ts

@@ -0,0 +1 @@
+export const SkiaViewNativeId = { current: 1000 };

package/src/views/index.ts

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

package/src/views/types.ts

@@ -1,14 +1,7 @@
 import type { ViewProps } from "react-native";
 
 import type { GroupProps, RenderNode } from "../dom/types";
-import type {
-  SkCanvas,
-  SkImage,
-  SkPicture,
-  SkRect,
-  SkSize,
-} from "../skia/types";
-import type { SkiaMutableValue, SkiaValue } from "../values";
+import type { SkImage, SkPicture, SkRect, SkSize } from "../skia/types";
 import type { SharedValueType } from "../renderer/processors/Animations/Animations";
 
 export type DrawMode = "continuous" | "default";
@@ -55,8 +48,6 @@ export type TouchHandlers = {
 
 export type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;
 
-export type RNSkiaDrawCallback = (canvas: SkCanvas, info: DrawingInfo) => void;
-
 /**
  * Listener interface for value changes
  */
@@ -72,10 +63,6 @@ export interface ISkiaViewApi {
     name: string,
     ...args: T
   ) => void;
-  registerValuesInView: (
-    nativeId: number,
-    values: SkiaValue<unknown>[]
-  ) => () => void;
   requestRedraw: (nativeId: number) => void;
   makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;
 }
@@ -98,18 +85,7 @@ export interface SkiaBaseViewProps extends ViewProps {
    * Pass an animated value to the onSize property to get updates when
    * the Skia view is resized.
    */
-  onSize?: SkiaMutableValue<SkSize> | SharedValueType<SkSize>;
-}
-
-export interface SkiaDrawViewProps extends SkiaBaseViewProps {
-  /**
-   * Draw callback. Will be called whenever the view is invalidated and
-   * needs to redraw. This is either caused by a change in a react
-   * property, a touch event, or a call to redraw. If the view is in
-   * continuous mode the callback will be called 60 frames per second
-   * by the native view.
-   */
-  onDraw?: RNSkiaDrawCallback;
+  onSize?: SharedValueType<SkSize>;
 }
 
 export interface SkiaPictureViewProps extends SkiaBaseViewProps {

package/android/src/main/java/com/shopify/reactnative/skia/SkiaDrawView.java

@@ -1,44 +0,0 @@
-package com.shopify.reactnative.skia;
-
-import android.content.Context;
-
-import com.facebook.jni.HybridData;
-import com.facebook.jni.annotations.DoNotStrip;
-import com.facebook.react.bridge.ReactContext;
-
-public class SkiaDrawView extends SkiaBaseView {
-    @DoNotStrip
-    private HybridData mHybridData;
-
-    public SkiaDrawView(Context context) {
-        super(context, false);
-        RNSkiaModule skiaModule = ((ReactContext) context).getNativeModule(RNSkiaModule.class);
-        mHybridData = initHybrid(skiaModule.getSkiaManager());
-    }
-
-    @Override
-    protected void finalize() throws Throwable {
-        super.finalize();
-        mHybridData.resetNative();
-    }
-
-    private native HybridData initHybrid(SkiaManager skiaManager);
-
-    protected native void surfaceAvailable(Object surface, int width, int height);
-
-    protected native void surfaceSizeChanged(int width, int height);
-
-    protected native void surfaceDestroyed();
-
-    protected native void setBgColor(int color);
-
-    protected native void setMode(String mode);
-
-    protected native void setDebugMode(boolean show);
-
-    protected native void updateTouchPoints(double[] points);
-
-    protected native void registerView(int nativeId);
-
-    protected native void unregisterView();
-}

package/android/src/main/java/com/shopify/reactnative/skia/SkiaDrawViewManager.java

@@ -1,34 +0,0 @@
-package com.shopify.reactnative.skia;
-
-import com.facebook.react.uimanager.ThemedReactContext;
-import com.facebook.react.viewmanagers.SkiaDrawViewManagerDelegate;
-import com.facebook.react.viewmanagers.SkiaDrawViewManagerInterface;
-
-import androidx.annotation.NonNull;
-
-public class SkiaDrawViewManager extends SkiaBaseViewManager<SkiaDrawView> implements SkiaDrawViewManagerInterface<SkiaDrawView> {
-
-
-    protected SkiaDrawViewManagerDelegate mDelegate;
-
-    SkiaDrawViewManager() {
-        mDelegate = new SkiaDrawViewManagerDelegate(this);
-    }
-
-    protected SkiaDrawViewManagerDelegate getDelegate() {
-        return mDelegate;
-    }
-
-    @NonNull
-    @Override
-    public String getName() {
-        return "SkiaDrawView";
-    }
-
-    @NonNull
-    @Override
-    public SkiaDrawView createViewInstance(@NonNull ThemedReactContext reactContext) {
-        return new SkiaDrawView(reactContext);
-    }
-
-}

package/cpp/rnskia/RNSkAnimation.h

@@ -1,65 +0,0 @@
-#pragma once
-
-#include <array>
-#include <memory>
-
-#include "JsiHostObject.h"
-#include "RNSkClockValue.h"
-#include "RNSkPlatformContext.h"
-#include <jsi/jsi.h>
-
-namespace RNSkia {
-namespace jsi = facebook::jsi;
-
-/**
- Implements an animation that can be used to drive other values
- */
-class RNSkAnimation : public RNSkClockValue {
-
-public:
-  RNSkAnimation(std::shared_ptr<RNSkPlatformContext> platformContext,
-                size_t identifier, jsi::Runtime &runtime,
-                const jsi::Value *arguments, size_t count)
-      : RNSkClockValue(platformContext, identifier, runtime, arguments, count) {
-    // Save the update function
-    _updateFunction = std::make_shared<jsi::Function>(
-        arguments[0].asObject(runtime).asFunction(runtime));
-
-    // Set state to undefined initially.
-    _args[1] = jsi::Value::undefined();
-  }
-
-  JSI_HOST_FUNCTION(cancel) {
-    stopClock();
-    return jsi::Value::undefined();
-  }
-
-  JSI_EXPORT_FUNCTIONS(JSI_EXPORT_FUNC(RNSkAnimation, cancel))
-
-protected:
-  void tick(jsi::Runtime &runtime, const jsi::Value &value) override {
-    // Set up arguments and call the update function
-    _args[0] = value.asNumber();
-    _args[1] = _updateFunction->call(
-        runtime, static_cast<const jsi::Value *>(_args.data()), _args.size());
-
-    // Get finished
-    auto finished =
-        _args[1].asObject(runtime).getProperty(runtime, "finished").getBool();
-    if (finished) {
-      stopClock();
-    }
-
-    // Get the next value
-    auto nextValue =
-        _args[1].asObject(runtime).getProperty(runtime, "current").asNumber();
-
-    // Update self
-    update(runtime, nextValue);
-  }
-
-private:
-  std::shared_ptr<jsi::Function> _updateFunction;
-  std::array<jsi::Value, 2> _args;
-};
-} // namespace RNSkia

package/cpp/rnskia/RNSkValueApi.h

@@ -1,72 +0,0 @@
-#pragma once
-
-#include <memory>
-
-#include "JsiHostObject.h"
-#include "RNSkAnimation.h"
-#include "RNSkComputedValue.h"
-#include "RNSkPlatformContext.h"
-#include "RNSkValue.h"
-#include <jsi/jsi.h>
-
-namespace RNSkia {
-
-namespace jsi = facebook::jsi;
-
-class RNSkValueApi : public RNJsi::JsiHostObject {
-public:
-  /**
-   * Constructor
-   * @param platformContext Platform context
-   */
-  explicit RNSkValueApi(std::shared_ptr<RNSkPlatformContext> platformContext)
-      : JsiHostObject(), _platformContext(platformContext) {
-    _valueIdentifier = 50000;
-  }
-
-  /**
-   * Destructor
-   */
-  ~RNSkValueApi() {}
-
-  JSI_HOST_FUNCTION(createValue) {
-    return jsi::Object::createFromHostObject(
-        runtime, std::make_shared<RNSkValue>(_platformContext, runtime,
-                                             arguments, count));
-  }
-
-  JSI_HOST_FUNCTION(createComputedValue) {
-    // Creation and initialization is done in two steps to be able to use weak
-    // references when setting up dependencies - since weak_from_this needs our
-    // instance to be a shared_ptr before calling weak_from_this().
-    auto computedValue = std::make_shared<RNSkComputedValue>(
-        _platformContext, runtime, arguments, count);
-    computedValue->initializeDependencies(runtime, arguments, count);
-    return jsi::Object::createFromHostObject(runtime, computedValue);
-  }
-
-  JSI_HOST_FUNCTION(createAnimation) {
-    return jsi::Object::createFromHostObject(
-        runtime,
-        std::make_shared<RNSkAnimation>(_platformContext, ++_valueIdentifier,
-                                        runtime, arguments, count));
-  }
-
-  JSI_HOST_FUNCTION(createClockValue) {
-    return jsi::Object::createFromHostObject(
-        runtime,
-        std::make_shared<RNSkClockValue>(_platformContext, ++_valueIdentifier,
-                                         runtime, arguments, count));
-  }
-
-  JSI_EXPORT_FUNCTIONS(JSI_EXPORT_FUNC(RNSkValueApi, createValue),
-                       JSI_EXPORT_FUNC(RNSkValueApi, createComputedValue),
-                       JSI_EXPORT_FUNC(RNSkValueApi, createClockValue),
-                       JSI_EXPORT_FUNC(RNSkValueApi, createAnimation))
-
-private:
-  // Platform context
-  std::shared_ptr<RNSkPlatformContext> _platformContext;
-  std::atomic<long> _valueIdentifier;
-};
-} // namespace RNSkia