@shopify/react-native-skia 0.1.189 → 0.1.191

package/src/Platform/Platform.web.tsx

@@ -0,0 +1,136 @@
+import type { RefObject, CSSProperties } from "react";
+import React, { useLayoutEffect, useMemo, useRef } from "react";
+import type { LayoutChangeEvent, ViewComponent, ViewProps } from "react-native";
+
+import type { DataModule } from "../skia/types";
+import { isRNModule } from "../skia/types";
+
+import type { IPlatform } from "./IPlatform";
+
+// eslint-disable-next-line max-len
+// https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/modules/useElementLayout/index.js
+const DOM_LAYOUT_HANDLER_NAME = "__reactLayoutHandler";
+type OnLayout = ((event: LayoutChangeEvent) => void) | undefined;
+type Div = HTMLDivElement & {
+  __reactLayoutHandler: OnLayout;
+};
+
+let resizeObserver: ResizeObserver | null = null;
+
+const getObserver = () => {
+  if (resizeObserver == null) {
+    resizeObserver = new window.ResizeObserver(function (entries) {
+      entries.forEach((entry) => {
+        const node = entry.target as Div;
+        const { left, top, width, height } = entry.contentRect;
+        const onLayout = node[DOM_LAYOUT_HANDLER_NAME];
+        if (typeof onLayout === "function") {
+          // setTimeout 0 is taken from react-native-web (UIManager)
+          setTimeout(
+            () =>
+              onLayout({
+                timeStamp: Date.now(),
+                nativeEvent: { layout: { x: left, y: top, width, height } },
+                currentTarget: 0,
+                target: 0,
+                bubbles: false,
+                cancelable: false,
+                defaultPrevented: false,
+                eventPhase: 0,
+                isDefaultPrevented() {
+                  throw new Error("Method not supported on web.");
+                },
+                isPropagationStopped() {
+                  throw new Error("Method not supported on web.");
+                },
+                persist() {
+                  throw new Error("Method not supported on web.");
+                },
+                preventDefault() {
+                  throw new Error("Method not supported on web.");
+                },
+                stopPropagation() {
+                  throw new Error("Method not supported on web.");
+                },
+                isTrusted: true,
+                type: "",
+              }),
+            0
+          );
+        }
+      });
+    });
+  }
+  return resizeObserver;
+};
+
+const useElementLayout = (ref: RefObject<Div>, onLayout: OnLayout) => {
+  const observer = getObserver();
+
+  useLayoutEffect(() => {
+    const node = ref.current;
+    if (node !== null) {
+      node[DOM_LAYOUT_HANDLER_NAME] = onLayout;
+    }
+  }, [ref, onLayout]);
+
+  useLayoutEffect(() => {
+    const node = ref.current;
+    if (node != null && observer != null) {
+      if (typeof node[DOM_LAYOUT_HANDLER_NAME] === "function") {
+        observer.observe(node);
+      } else {
+        observer.unobserve(node);
+      }
+    }
+    return () => {
+      if (node != null && observer != null) {
+        observer.unobserve(node);
+      }
+    };
+  }, [observer, ref]);
+};
+
+const View = (({ children, onLayout, style: rawStyle }: ViewProps) => {
+  const style = useMemo(() => (rawStyle ?? {}) as CSSProperties, [rawStyle]);
+  const ref = useRef<Div>(null);
+  useElementLayout(ref, onLayout);
+  const cssStyles = useMemo(() => {
+    return {
+      ...style,
+      display: "flex",
+      flexDirection: style.flexDirection || "inherit",
+      flexWrap: style.flexWrap || "nowrap",
+      justifyContent: style.justifyContent || "flex-start",
+      alignItems: style.alignItems || "stretch",
+      alignContent: style.alignContent || "stretch",
+    };
+  }, [style]);
+
+  return (
+    <div ref={ref} style={cssStyles}>
+      {children}
+    </div>
+  );
+}) as unknown as typeof ViewComponent;
+
+export const Platform: IPlatform = {
+  OS: "web",
+  PixelRatio: window.devicePixelRatio,
+  requireNativeComponent: () => {
+    throw new Error("requireNativeComponent is not supported on the web");
+  },
+  resolveAsset: (source: DataModule) => {
+    if (isRNModule(source)) {
+      throw new Error(
+        "Image source is a number - this is not supported on the web"
+      );
+    }
+    return source.default;
+  },
+  findNodeHandle: () => {
+    throw new Error("findNodeHandle is not supported on the web");
+  },
+  NativeModules: {},
+  View,
+};

package/src/Platform/index.ts

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

package/src/dom/nodes/drawings/ImageSVG.ts

@@ -1,26 +1,37 @@
 import type { DrawingContext, ImageSVGProps } from "../../types";
 import { NodeType } from "../../types";
-import { processRect } from "../datatypes";
 import { JsiDrawingNode } from "../DrawingNode";
 import type { NodeContext } from "../Node";
 
-export class ImageSVGNode extends JsiDrawingNode<ImageSVGProps, null> {
+export class ImageSVGNode extends JsiDrawingNode<
+  ImageSVGProps,
+  Pick<ImageSVGProps, "x" | "y" | "width" | "height">
+> {
   constructor(ctx: NodeContext, props: ImageSVGProps) {
     super(ctx, NodeType.ImageSVG, props);
   }
 
   deriveProps() {
-    return null;
+    if (this.props.rect) {
+      return this.props.rect;
+    }
+    const { x, y, width, height } = this.props;
+    return { x, y, width, height };
   }
 
   draw({ canvas }: DrawingContext) {
     const { svg } = this.props;
-    if (!svg) {
+    if (!this.derived) {
+      throw new Error("ImageSVGNode: derived props unresolved");
+    }
+    const { x, y, width, height } = this.derived;
+    if (svg === null) {
       return;
     }
-    const { x, y, width, height } = processRect(this.Skia, this.props);
     canvas.save();
-    canvas.translate(x, y);
+    if (x && y) {
+      canvas.translate(x, y);
+    }
     canvas.drawSvg(svg, width, height);
     canvas.restore();
   }

package/src/dom/nodes/drawings/PathNode.ts

@@ -1,3 +1,4 @@
+import { saturate } from "../../../renderer/processors/math";
 import { FillType } from "../../../skia/types";
 import type { SkPath } from "../../../skia/types";
 import type { DrawingContext, PathProps } from "../../types";
@@ -12,7 +13,15 @@ export class PathNode extends JsiDrawingNode<PathProps, SkPath> {
   }
 
   protected deriveProps() {
-    const { start, end, fillType, stroke, ...pathProps } = this.props;
+    const {
+      start: trimStart,
+      end: trimEnd,
+      fillType,
+      stroke,
+      ...pathProps
+    } = this.props;
+    const start = saturate(trimStart);
+    const end = saturate(trimEnd);
     const hasStartOffset = start !== 0;
     const hasEndOffset = end !== 1;
     const hasStrokeOptions = stroke !== undefined;

package/src/dom/types/Drawings.ts

@@ -90,9 +90,14 @@ export interface VerticesProps extends DrawingNodeProps {
   indices?: number[];
 }
 
-export type ImageSVGProps = RectDef & {
+export interface ImageSVGProps extends DrawingNodeProps {
   svg: SkSVG | null;
-} & DrawingNodeProps;
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+  rect?: SkRect;
+}
 
 export interface PictureProps extends DrawingNodeProps {
   picture: SkPicture;

package/src/renderer/processors/math/Math.ts

@@ -24,3 +24,8 @@ export const clamp = (
   "worklet";
   return Math.min(Math.max(lowerBound, value), upperBound);
 };
+
+export const saturate = (value: number) => {
+  "worklet";
+  return clamp(value, 0, 1);
+};

package/src/skia/NativeSetup.ts

@@ -1,8 +1,8 @@
-import { NativeModules, Platform } from "react-native";
+import { Platform } from "../Platform";
 
 if (Platform.OS !== "web" && global.SkiaApi == null) {
   // Initialize RN Skia
-  const SkiaModule = NativeModules.RNSkia;
+  const SkiaModule = Platform.NativeModules.RNSkia;
   if (SkiaModule == null || typeof SkiaModule.install !== "function") {
     throw new Error(
       "Native RNSkia Module cannot be found! Make sure you correctly " +

package/src/skia/core/Data.ts

@@ -1,20 +1,8 @@
 import { useEffect, useRef, useState } from "react";
-import { Image } from "react-native";
 
 import { Skia } from "../Skia";
-import { isRNModule } from "../types";
-import type {
-  SkData,
-  DataModule,
-  DataSourceParam,
-  JsiDisposable,
-} from "../types";
-
-const resolveAsset = (source: DataModule) => {
-  return isRNModule(source)
-    ? Image.resolveAssetSource(source).uri
-    : source.default;
-};
+import type { SkData, DataSourceParam, JsiDisposable } from "../types";
+import { Platform } from "../../Platform";
 
 const factoryWrapper = <T>(
   data2: SkData,
@@ -42,7 +30,8 @@ const loadData = <T>(
       resolve(factoryWrapper(Skia.Data.fromBytes(source), factory, onError))
     );
   } else {
-    const uri = typeof source === "string" ? source : resolveAsset(source);
+    const uri =
+      typeof source === "string" ? source : Platform.resolveAsset(source);
     return Skia.Data.fromURI(uri).then((d) =>
       factoryWrapper(d, factory, onError)
     );

package/src/skia/core/Image.ts

@@ -1,5 +1,4 @@
-import { findNodeHandle, Platform } from "react-native";
-
+import { Platform } from "../../Platform";
 import { Skia } from "../Skia";
 import type { DataSourceParam, SkImage } from "../types";
 
@@ -48,7 +47,7 @@ export const makeImageFromView = <
       );
     }
   }
-  const viewTag = findNodeHandle(viewRef.current);
+  const viewTag = Platform.findNodeHandle(viewRef.current);
   if (viewTag !== null && viewTag !== 0) {
     return Skia.Image.MakeImageFromViewTag(viewTag);
   }

package/src/views/SkiaBaseWebView.tsx

@@ -2,16 +2,16 @@
 import React from "react";
 import type { PointerEvent } from "react";
 import type { LayoutChangeEvent } from "react-native";
-import { PixelRatio, View } 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";
 
 import type { DrawMode, SkiaBaseViewProps, TouchInfo } from "./types";
 import { TouchType } from "./types";
 
-const pd = PixelRatio.get();
+const pd = Platform.PixelRatio;
 
 export abstract class SkiaBaseWebView<
   TProps extends SkiaBaseViewProps
@@ -38,17 +38,16 @@ export abstract class SkiaBaseWebView<
     this._unsubscriptions = [];
   }
 
-  private onLayout(evt: LayoutChangeEvent) {
+  private onLayoutEvent(evt: LayoutChangeEvent) {
     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 = width * pd;
-      canvas.height = height * pd;
-      const surface = CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current);
+    const canvas = this._canvasRef.current;
+    if (canvas) {
+      this.width = canvas.clientWidth;
+      this.height = canvas.clientHeight;
+      canvas.width = this.width * pd;
+      canvas.height = this.height * pd;
+      const surface = CanvasKit.MakeWebGLCanvasSurface(canvas);
       if (!surface) {
         throw new Error("Could not create surface");
       }
@@ -78,11 +77,16 @@ export abstract class SkiaBaseWebView<
   componentWillUnmount() {
     this.unsubscribeAll();
     cancelAnimationFrame(this.requestId);
+    // eslint-disable-next-line max-len
+    // https://stackoverflow.com/questions/23598471/how-do-i-clean-up-and-unload-a-webgl-canvas-context-from-gpu-after-use
     // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context
-    this._canvasRef.current
-      ?.getContext("webgl2")
-      ?.getExtension("WEBGL_lose_context")
-      ?.loseContext();
+    // We delete the context, only if the context has been intialized
+    if (this._surface) {
+      this._canvasRef.current
+        ?.getContext("webgl2")
+        ?.getExtension("WEBGL_lose_context")
+        ?.loseContext();
+    }
   }
 
   /**
@@ -178,21 +182,27 @@ export abstract class SkiaBaseWebView<
     return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType);
   }
 
+  private onStart = this.createTouchHandler(TouchType.Start);
+  private onActive = this.createTouchHandler(TouchType.Active);
+  private onCancel = this.createTouchHandler(TouchType.Cancelled);
+  private onEnd = this.createTouchHandler(TouchType.End);
+  private onLayout = this.onLayoutEvent.bind(this);
+
   render() {
     const { mode, debug = false, ...viewProps } = this.props;
     return (
-      <View {...viewProps} onLayout={this.onLayout.bind(this)}>
+      <Platform.View {...viewProps} onLayout={this.onLayout}>
         <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)}
+          onPointerDown={this.onStart}
+          onPointerMove={this.onActive}
+          onPointerUp={this.onEnd}
+          onPointerCancel={this.onCancel}
+          onPointerLeave={this.onEnd}
+          onPointerOut={this.onEnd}
         />
-      </View>
+      </Platform.View>
     );
   }
 }

package/src/views/SkiaDomView.tsx

@@ -1,9 +1,9 @@
 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 { Platform } from "../Platform";
 
 import { SkiaViewApi } from "./api";
 import { SkiaViewNativeId } from "./SkiaView";
@@ -11,7 +11,7 @@ import type { NativeSkiaViewProps, SkiaDomViewProps } from "./types";
 
 const NativeSkiaDomView: HostComponent<SkiaDomViewProps> =
   Platform.OS !== "web"
-    ? requireNativeComponent<NativeSkiaViewProps>("SkiaDomView")
+    ? Platform.requireNativeComponent<NativeSkiaViewProps>("SkiaDomView")
     : // eslint-disable-next-line @typescript-eslint/no-explicit-any
       (null as any);
 

package/src/views/SkiaPictureView.tsx

@@ -1,15 +1,15 @@
 import React from "react";
-import { requireNativeComponent } from "react-native";
 
 import type { SkRect } from "../skia/types";
 import type { SkiaValue } from "../values";
+import { Platform } from "../Platform";
 
 import { SkiaViewApi } from "./api";
 import { SkiaViewNativeId } from "./SkiaView";
 import type { NativeSkiaViewProps, SkiaPictureViewProps } from "./types";
 
 const NativeSkiaPictureView =
-  requireNativeComponent<NativeSkiaViewProps>("SkiaPictureView");
+  Platform.requireNativeComponent<NativeSkiaViewProps>("SkiaPictureView");
 
 export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
   constructor(props: SkiaPictureViewProps) {

package/src/views/SkiaView.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import { requireNativeComponent } from "react-native";
 
 import type { SkRect } from "../skia/types";
 import type { SkiaValue } from "../values";
+import { Platform } from "../Platform";
 
 import { SkiaViewApi } from "./api";
 import type { NativeSkiaViewProps, SkiaDrawViewProps } from "./types";
@@ -10,7 +10,7 @@ import type { NativeSkiaViewProps, SkiaDrawViewProps } from "./types";
 export const SkiaViewNativeId = { current: 1000 };
 
 const NativeSkiaView =
-  requireNativeComponent<NativeSkiaViewProps>("SkiaDrawView");
+  Platform.requireNativeComponent<NativeSkiaViewProps>("SkiaDrawView");
 
 export class SkiaView extends React.Component<SkiaDrawViewProps> {
   constructor(props: SkiaDrawViewProps) {

package/src/views/useTouchHandler.ts

@@ -1,8 +1,8 @@
 import type { DependencyList } from "react";
 import { useCallback, useRef } from "react";
-import { PixelRatio } from "react-native";
 
 import type { Vector } from "../skia/types";
+import { Platform } from "../Platform";
 
 import type {
   ExtendedTouchInfo,
@@ -46,8 +46,8 @@ const useInternalTouchHandler = (
           timeDiffseconds > 0
         ) {
           prevVelocityRef.current[touch.id] = {
-            x: distX / timeDiffseconds / PixelRatio.get(),
-            y: distY / timeDiffseconds / PixelRatio.get(),
+            x: distX / timeDiffseconds / Platform.PixelRatio,
+            y: distY / timeDiffseconds / Platform.PixelRatio,
           };
         }
 

package/src/web/WithSkiaWeb.tsx

@@ -1,6 +1,7 @@
 import type { ComponentProps, ComponentType } from "react";
 import React, { useMemo, lazy, Suspense } from "react";
-import { Platform } from "react-native";
+
+import { Platform } from "../Platform";
 
 import { LoadSkiaWeb } from "./LoadSkiaWeb";