@shopify/react-native-skia 0.1.116 → 0.1.118

package/src/skia/Picture/Picture.ts

@@ -0,0 +1,34 @@
+import type { InputColorMatrix } from "../ColorFilter";
+import type { FilterMode } from "../Image";
+import type { TileMode } from "../ImageFilter";
+import type { SkRect } from "../Rect";
+import type { IShader } from "../Shader";
+
+export interface SkPicture {
+  /**
+   *  Returns a new shader that will draw with this picture.
+   *
+   *  @param tmx  The tiling mode to use when sampling in the x-direction.
+   *  @param tmy  The tiling mode to use when sampling in the y-direction.
+   *  @param mode How to filter the tiles
+   *  @param localMatrix Optional matrix used when sampling
+   *  @param tileRect The tile rectangle in picture coordinates: this represents the subset
+   *              (or superset) of the picture used when building a tile. It is not
+   *              affected by localMatrix and does not imply scaling (only translation
+   *              and cropping). If null, the tile rect is considered equal to the picture
+   *              bounds.
+   */
+  makeShader(
+    tmx: TileMode,
+    tmy: TileMode,
+    mode: FilterMode,
+    localMatrix?: InputColorMatrix,
+    tileRect?: SkRect
+  ): IShader;
+
+  /**
+   * Returns the serialized format of this SkPicture. The format may change at anytime and
+   * no promises are made for backwards or forward compatibility.
+   */
+  serialize(): Uint8Array | null;
+}

package/src/skia/Picture/PictureFactory.ts

@@ -0,0 +1,9 @@
+import type { SkPicture } from "./Picture";
+
+export interface PictureFactory {
+  /**
+   * Returns an SkPicture which has been serialized previously to the given bytes.
+   * @param bytes
+   */
+  MakePicture(bytes: Uint8Array | ArrayBuffer): SkPicture | null;
+}

package/src/skia/Picture/PictureRecorder.ts

@@ -0,0 +1,18 @@
+import type { SkCanvas } from "../Canvas";
+import type { SkRect } from "../Rect";
+
+import type { SkPicture } from "./Picture";
+
+export interface SkPictureRecorder {
+  /**
+   * Returns a canvas on which to draw. When done drawing, call finishRecordingAsPicture()
+   *
+   * @param bounds - a rect to cull the results.
+   */
+  beginRecording(bounds: SkRect): SkCanvas;
+
+  /**
+   * Returns the captured draw commands as a picture and invalidates the canvas returned earlier.
+   */
+  finishRecordingAsPicture(): SkPicture;
+}

package/src/skia/Picture/index.ts

@@ -0,0 +1,4 @@
+export * from "./Picture";
+export * from "./PictureRecorder";
+export * from "./usePicture";
+export * from "./PictureFactory";

package/src/skia/Picture/usePicture.ts

@@ -0,0 +1,28 @@
+import type { DependencyList } from "react";
+import { useMemo } from "react";
+
+import type { SkCanvas } from "../Canvas";
+import type { SkRect } from "../Rect";
+import { Skia } from "../Skia";
+
+import type { SkPicture } from "./Picture";
+
+/**
+ * Memoizes and returns an SkPicture that can be drawn to another canvas.
+ * @param rect Picture bounds
+ * @param cb Callback for drawing to the canvas
+ * @returns SkPicture
+ */
+export const usePicture = (
+  rect: SkRect,
+  cb: (canvas: SkCanvas) => void,
+  deps: DependencyList = []
+): SkPicture => {
+  return useMemo(() => {
+    const recorder = Skia.PictureRecorder();
+    const canvas = recorder.beginRecording(rect);
+    cb(canvas);
+    return recorder.finishRecordingAsPicture();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cb, rect, deps]);
+};

package/src/skia/Skia.ts

@@ -26,6 +26,7 @@ import "./NativeSetup";
 import type { SkRSXform } from "./RSXform";
 import type { SkPath } from "./Path/Path";
 import type { SkContourMeasureIter } from "./ContourMeasure";
+import type { PictureFactory, SkPictureRecorder } from "./Picture";
 
 /**
  * Declares the interface for the native Skia API
@@ -41,6 +42,8 @@ export interface Skia {
     resScale: number
   ) => SkContourMeasureIter;
   Paint: () => SkPaint;
+  PictureRecorder: () => SkPictureRecorder;
+  Picture: PictureFactory;
   Path: PathFactory;
   Matrix: () => SkMatrix;
   ColorFilter: ColorFilterFactory;
@@ -106,6 +109,8 @@ export const Skia = {
   XYWHRect: SkiaApi.XYWHRect,
   RRectXY: SkiaApi.RRectXY,
   Paint: SkiaApi.Paint,
+  PictureRecorder: SkiaApi.PictureRecorder,
+  Picture: SkiaApi.Picture,
   Path: SkiaApi.Path,
   ColorFilter: SkiaApi.ColorFilter,
   ContourMeasureIter: SkiaApi.ContourMeasureIter,

package/src/skia/index.ts

@@ -20,4 +20,5 @@ export * from "./Surface";
 export * from "./FontMgr";
 export * from "./Vertices";
 export * from "./Color";
+export * from "./Picture";
 export * from "./Data";

package/src/values/hooks/useDerivedValue.ts

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 
 import { ValueApi } from "../api";
-import { isValue } from "../../renderer";
+import { isValue } from "../../renderer/processors";
 
 /**
  * Creates a new derived value - a value that will calculate its value depending

package/src/views/SkiaView.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import type { ViewProps } from "react-native";
 import { requireNativeComponent } from "react-native";
 
 import type { SkImage, SkRect } from "../skia";
@@ -6,7 +7,6 @@ import type { SkiaReadonlyValue } from "../values";
 
 import type {
   DrawMode,
-  SkiaViewProps,
   RNSkiaDrawCallback,
   NativeSkiaViewProps,
 } from "./types";
@@ -35,6 +35,30 @@ declare global {
 
 const { SkiaViewApi } = global;
 
+export interface SkiaViewProps extends ViewProps {
+  /**
+   * Sets the drawing mode for the skia view. 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
+   * sizes and margins.
+   */
+  mode?: DrawMode;
+  /**
+   * When set to true the view will display information about the
+   * average time it takes to render.
+   */
+  debug?: boolean;
+  /**
+   * 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;
+}
+
 export class SkiaView extends React.Component<SkiaViewProps> {
   constructor(props: SkiaViewProps) {
     super(props);
@@ -103,14 +127,14 @@ export class SkiaView extends React.Component<SkiaViewProps> {
   }
 
   render() {
-    const { style, mode, debug = false } = this.props;
+    const { mode, debug = false, ...viewProps } = this.props;
     return (
       <NativeSkiaView
-        style={style}
         collapsable={false}
         nativeID={`${this._nativeId}`}
         mode={mode}
         debug={debug}
+        {...viewProps}
       />
     );
   }

package/src/views/types.ts

@@ -47,31 +47,6 @@ export type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;
 
 export type RNSkiaDrawCallback = (canvas: SkCanvas, info: DrawingInfo) => void;
 
-export type SkiaViewProps = {
-  style?: ViewProps["style"];
-  /**
-   * Sets the drawing mode for the skia view. 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
-   * sizes and margins.
-   */
-  mode?: DrawMode;
-  /**
-   * When set to true the view will display information about the
-   * average time it takes to render.
-   */
-  debug?: boolean;
-  /**
-   * 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;
-};
-
 /**
  * Listener interface for value changes
  */

package/lib/commonjs/renderer/components/imageFilters/DropShadow.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["DropShadow.tsx"],"names":["onDeclare","children","dx","dy","blur","color","shadowOnly","opacity","input","factory","Skia","ImageFilter","MakeDropShadowOnly","MakeDropShadow","DropShadow","props"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AAGA;;AAEA;;;;;;AAUA,MAAMA,SAAS,GAAG,oCAChB,OAAsCC,QAAtC,YAAgE;AAAA,MAA/D;AAAEC,IAAAA,EAAF;AAAMC,IAAAA,EAAN;AAAUC,IAAAA,IAAV;AAAgBC,IAAAA,KAAhB;AAAuBC,IAAAA;AAAvB,GAA+D;AAAA,MAAhB;AAAEC,IAAAA;AAAF,GAAgB;AAC9D,QAAMC,KAAK,GAAG,wBAASP,QAAT,CAAd;AACA,QAAMQ,OAAO,GAAGH,UAAU,GACtBI,WAAKC,WAAL,CAAiBC,kBADK,GAEtBF,WAAKC,WAAL,CAAiBE,cAFrB;AAGA,SAAOJ,OAAO,CAACP,EAAD,EAAKC,EAAL,EAASC,IAAT,EAAeA,IAAf,EAAqB,yBAAaC,KAAb,EAAoBE,OAApB,CAArB,EAAmDC,KAAnD,CAAd;AACD,CAPe,CAAlB;;AAUO,MAAMM,UAAU,GAAIC,KAAD,IAA2C;AACnE,sBAAO;AAAe,IAAA,SAAS,EAAEf;AAA1B,KAAyCe,KAAzC,EAAP;AACD,CAFM","sourcesContent":["import React from \"react\";\n\nimport { Skia } from \"../../../skia\";\nimport { createDeclaration } from \"../../nodes/Declaration\";\nimport type { AnimatedProps } from \"../../processors/Animations/Animations\";\nimport type { Color } from \"../../../skia/Color\";\nimport { processColor } from \"../../../skia/Color\";\n\nimport { getInput } from \"./getInput\";\n\nexport interface DropShadowProps {\n  dx: number;\n  dy: number;\n  blur: number;\n  color: Color;\n  shadowOnly?: boolean;\n}\n\nconst onDeclare = createDeclaration<DropShadowProps>(\n  ({ dx, dy, blur, color, shadowOnly }, children, { opacity }) => {\n    const input = getInput(children);\n    const factory = shadowOnly\n      ? Skia.ImageFilter.MakeDropShadowOnly\n      : Skia.ImageFilter.MakeDropShadow;\n    return factory(dx, dy, blur, blur, processColor(color, opacity), input);\n  }\n);\n\nexport const DropShadow = (props: AnimatedProps<DropShadowProps>) => {\n  return <skDeclaration onDeclare={onDeclare} {...props} />;\n};\n"]}

package/lib/module/renderer/components/imageFilters/DropShadow.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["DropShadow.tsx"],"names":["React","Skia","createDeclaration","processColor","getInput","onDeclare","children","dx","dy","blur","color","shadowOnly","opacity","input","factory","ImageFilter","MakeDropShadowOnly","MakeDropShadow","DropShadow","props"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,IAAT,QAAqB,eAArB;AACA,SAASC,iBAAT,QAAkC,yBAAlC;AAGA,SAASC,YAAT,QAA6B,qBAA7B;AAEA,SAASC,QAAT,QAAyB,YAAzB;AAUA,MAAMC,SAAS,GAAGH,iBAAiB,CACjC,OAAsCI,QAAtC,YAAgE;AAAA,MAA/D;AAAEC,IAAAA,EAAF;AAAMC,IAAAA,EAAN;AAAUC,IAAAA,IAAV;AAAgBC,IAAAA,KAAhB;AAAuBC,IAAAA;AAAvB,GAA+D;AAAA,MAAhB;AAAEC,IAAAA;AAAF,GAAgB;AAC9D,QAAMC,KAAK,GAAGT,QAAQ,CAACE,QAAD,CAAtB;AACA,QAAMQ,OAAO,GAAGH,UAAU,GACtBV,IAAI,CAACc,WAAL,CAAiBC,kBADK,GAEtBf,IAAI,CAACc,WAAL,CAAiBE,cAFrB;AAGA,SAAOH,OAAO,CAACP,EAAD,EAAKC,EAAL,EAASC,IAAT,EAAeA,IAAf,EAAqBN,YAAY,CAACO,KAAD,EAAQE,OAAR,CAAjC,EAAmDC,KAAnD,CAAd;AACD,CAPgC,CAAnC;AAUA,OAAO,MAAMK,UAAU,GAAIC,KAAD,IAA2C;AACnE,sBAAO;AAAe,IAAA,SAAS,EAAEd;AAA1B,KAAyCc,KAAzC,EAAP;AACD,CAFM","sourcesContent":["import React from \"react\";\n\nimport { Skia } from \"../../../skia\";\nimport { createDeclaration } from \"../../nodes/Declaration\";\nimport type { AnimatedProps } from \"../../processors/Animations/Animations\";\nimport type { Color } from \"../../../skia/Color\";\nimport { processColor } from \"../../../skia/Color\";\n\nimport { getInput } from \"./getInput\";\n\nexport interface DropShadowProps {\n  dx: number;\n  dy: number;\n  blur: number;\n  color: Color;\n  shadowOnly?: boolean;\n}\n\nconst onDeclare = createDeclaration<DropShadowProps>(\n  ({ dx, dy, blur, color, shadowOnly }, children, { opacity }) => {\n    const input = getInput(children);\n    const factory = shadowOnly\n      ? Skia.ImageFilter.MakeDropShadowOnly\n      : Skia.ImageFilter.MakeDropShadow;\n    return factory(dx, dy, blur, blur, processColor(color, opacity), input);\n  }\n);\n\nexport const DropShadow = (props: AnimatedProps<DropShadowProps>) => {\n  return <skDeclaration onDeclare={onDeclare} {...props} />;\n};\n"]}

package/src/renderer/components/imageFilters/DropShadow.tsx

@@ -1,31 +0,0 @@
-import React from "react";
-
-import { Skia } from "../../../skia";
-import { createDeclaration } from "../../nodes/Declaration";
-import type { AnimatedProps } from "../../processors/Animations/Animations";
-import type { Color } from "../../../skia/Color";
-import { processColor } from "../../../skia/Color";
-
-import { getInput } from "./getInput";
-
-export interface DropShadowProps {
-  dx: number;
-  dy: number;
-  blur: number;
-  color: Color;
-  shadowOnly?: boolean;
-}
-
-const onDeclare = createDeclaration<DropShadowProps>(
-  ({ dx, dy, blur, color, shadowOnly }, children, { opacity }) => {
-    const input = getInput(children);
-    const factory = shadowOnly
-      ? Skia.ImageFilter.MakeDropShadowOnly
-      : Skia.ImageFilter.MakeDropShadow;
-    return factory(dx, dy, blur, blur, processColor(color, opacity), input);
-  }
-);
-
-export const DropShadow = (props: AnimatedProps<DropShadowProps>) => {
-  return <skDeclaration onDeclare={onDeclare} {...props} />;
-};