@shopify/react-native-skia 2.0.3 → 2.0.4

package/lib/module/sksg/Recorder/commands/Paint.js

@@ -11,14 +11,18 @@ export const setPaintProperties = (Skia, ctx, {
   strokeMiter,
   antiAlias,
   dither
-}) => {
+}, standalone) => {
   "worklet";
 
   const {
     paint
   } = ctx;
   if (opacity !== undefined) {
-    ctx.setOpacity(ctx.getOpacity() * opacity);
+    if (standalone) {
+      paint.setAlphaf(paint.getAlphaf() * opacity);
+    } else {
+      ctx.setOpacity(ctx.getOpacity() * opacity);
+    }
   }
   if (color !== undefined) {
     paint.setShader(null);

package/lib/module/sksg/Recorder/commands/Paint.js.map

@@ -1 +1 @@
-{"version":3,"names":["enumKey","processColor","BlendMode","PaintStyle","StrokeCap","StrokeJoin","setPaintProperties","Skia","ctx","opacity","color","blendMode","strokeWidth","style","strokeJoin","strokeCap","strokeMiter","antiAlias","dither","paint","undefined","setOpacity","getOpacity","setShader","setColor","setBlendMode","setStrokeWidth","setStyle","setStrokeJoin","setStrokeCap","setStrokeMiter","setAntiAlias","setDither"],"sources":["Paint.ts"],"sourcesContent":["import { enumKey, processColor } from \"../../../dom/nodes\";\nimport type { PaintProps } from \"../../../dom/types\";\nimport {\n  BlendMode,\n  PaintStyle,\n  StrokeCap,\n  StrokeJoin,\n} from \"../../../skia/types\";\nimport type { Skia } from \"../../../skia/types\";\nimport type { DrawingContext } from \"../DrawingContext\";\n\nexport const setPaintProperties = (\n  Skia: Skia,\n  ctx: DrawingContext,\n  {\n    opacity,\n    color,\n    blendMode,\n    strokeWidth,\n    style,\n    strokeJoin,\n    strokeCap,\n    strokeMiter,\n    antiAlias,\n    dither,\n  }: PaintProps\n) => {\n  \"worklet\";\n  const { paint } = ctx;\n\n  if (opacity !== undefined) {\n    ctx.setOpacity(ctx.getOpacity() * opacity);\n  }\n  if (color !== undefined) {\n    paint.setShader(null);\n    paint.setColor(processColor(Skia, color));\n  }\n  if (blendMode !== undefined) {\n    paint.setBlendMode(BlendMode[enumKey(blendMode)]);\n  }\n  if (strokeWidth !== undefined) {\n    paint.setStrokeWidth(strokeWidth);\n  }\n  if (style !== undefined) {\n    paint.setStyle(PaintStyle[enumKey(style)]);\n  }\n  if (strokeJoin !== undefined) {\n    paint.setStrokeJoin(StrokeJoin[enumKey(strokeJoin)]);\n  }\n  if (strokeCap !== undefined) {\n    paint.setStrokeCap(StrokeCap[enumKey(strokeCap)]);\n  }\n  if (strokeMiter !== undefined) {\n    paint.setStrokeMiter(strokeMiter);\n  }\n  if (antiAlias !== undefined) {\n    paint.setAntiAlias(antiAlias);\n  }\n  if (dither !== undefined) {\n    paint.setDither(dither);\n  }\n};\n"],"mappings":"AAAA,SAASA,OAAO,EAAEC,YAAY,QAAQ,oBAAoB;AAE1D,SACEC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,UAAU,QACL,qBAAqB;AAI5B,OAAO,MAAMC,kBAAkB,GAAGA,CAChCC,IAAU,EACVC,GAAmB,EACnB;EACEC,OAAO;EACPC,KAAK;EACLC,SAAS;EACTC,WAAW;EACXC,KAAK;EACLC,UAAU;EACVC,SAAS;EACTC,WAAW;EACXC,SAAS;EACTC;AACU,CAAC,KACV;EACH,SAAS;;EACT,MAAM;IAAEC;EAAM,CAAC,GAAGX,GAAG;EAErB,IAAIC,OAAO,KAAKW,SAAS,EAAE;IACzBZ,GAAG,CAACa,UAAU,CAACb,GAAG,CAACc,UAAU,CAAC,CAAC,GAAGb,OAAO,CAAC;EAC5C;EACA,IAAIC,KAAK,KAAKU,SAAS,EAAE;IACvBD,KAAK,CAACI,SAAS,CAAC,IAAI,CAAC;IACrBJ,KAAK,CAACK,QAAQ,CAACvB,YAAY,CAACM,IAAI,EAAEG,KAAK,CAAC,CAAC;EAC3C;EACA,IAAIC,SAAS,KAAKS,SAAS,EAAE;IAC3BD,KAAK,CAACM,YAAY,CAACvB,SAAS,CAACF,OAAO,CAACW,SAAS,CAAC,CAAC,CAAC;EACnD;EACA,IAAIC,WAAW,KAAKQ,SAAS,EAAE;IAC7BD,KAAK,CAACO,cAAc,CAACd,WAAW,CAAC;EACnC;EACA,IAAIC,KAAK,KAAKO,SAAS,EAAE;IACvBD,KAAK,CAACQ,QAAQ,CAACxB,UAAU,CAACH,OAAO,CAACa,KAAK,CAAC,CAAC,CAAC;EAC5C;EACA,IAAIC,UAAU,KAAKM,SAAS,EAAE;IAC5BD,KAAK,CAACS,aAAa,CAACvB,UAAU,CAACL,OAAO,CAACc,UAAU,CAAC,CAAC,CAAC;EACtD;EACA,IAAIC,SAAS,KAAKK,SAAS,EAAE;IAC3BD,KAAK,CAACU,YAAY,CAACzB,SAAS,CAACJ,OAAO,CAACe,SAAS,CAAC,CAAC,CAAC;EACnD;EACA,IAAIC,WAAW,KAAKI,SAAS,EAAE;IAC7BD,KAAK,CAACW,cAAc,CAACd,WAAW,CAAC;EACnC;EACA,IAAIC,SAAS,KAAKG,SAAS,EAAE;IAC3BD,KAAK,CAACY,YAAY,CAACd,SAAS,CAAC;EAC/B;EACA,IAAIC,MAAM,KAAKE,SAAS,EAAE;IACxBD,KAAK,CAACa,SAAS,CAACd,MAAM,CAAC;EACzB;AACF,CAAC","ignoreList":[]}
+{"version":3,"names":["enumKey","processColor","BlendMode","PaintStyle","StrokeCap","StrokeJoin","setPaintProperties","Skia","ctx","opacity","color","blendMode","strokeWidth","style","strokeJoin","strokeCap","strokeMiter","antiAlias","dither","standalone","paint","undefined","setAlphaf","getAlphaf","setOpacity","getOpacity","setShader","setColor","setBlendMode","setStrokeWidth","setStyle","setStrokeJoin","setStrokeCap","setStrokeMiter","setAntiAlias","setDither"],"sources":["Paint.ts"],"sourcesContent":["import { enumKey, processColor } from \"../../../dom/nodes\";\nimport type { PaintProps } from \"../../../dom/types\";\nimport {\n  BlendMode,\n  PaintStyle,\n  StrokeCap,\n  StrokeJoin,\n} from \"../../../skia/types\";\nimport type { Skia } from \"../../../skia/types\";\nimport type { DrawingContext } from \"../DrawingContext\";\n\nexport const setPaintProperties = (\n  Skia: Skia,\n  ctx: DrawingContext,\n  {\n    opacity,\n    color,\n    blendMode,\n    strokeWidth,\n    style,\n    strokeJoin,\n    strokeCap,\n    strokeMiter,\n    antiAlias,\n    dither,\n  }: PaintProps,\n  standalone: boolean\n) => {\n  \"worklet\";\n  const { paint } = ctx;\n\n  if (opacity !== undefined) {\n    if (standalone) {\n      paint.setAlphaf(paint.getAlphaf() * opacity);\n    } else {\n      ctx.setOpacity(ctx.getOpacity() * opacity);\n    }\n  }\n  if (color !== undefined) {\n    paint.setShader(null);\n    paint.setColor(processColor(Skia, color));\n  }\n  if (blendMode !== undefined) {\n    paint.setBlendMode(BlendMode[enumKey(blendMode)]);\n  }\n  if (strokeWidth !== undefined) {\n    paint.setStrokeWidth(strokeWidth);\n  }\n  if (style !== undefined) {\n    paint.setStyle(PaintStyle[enumKey(style)]);\n  }\n  if (strokeJoin !== undefined) {\n    paint.setStrokeJoin(StrokeJoin[enumKey(strokeJoin)]);\n  }\n  if (strokeCap !== undefined) {\n    paint.setStrokeCap(StrokeCap[enumKey(strokeCap)]);\n  }\n  if (strokeMiter !== undefined) {\n    paint.setStrokeMiter(strokeMiter);\n  }\n  if (antiAlias !== undefined) {\n    paint.setAntiAlias(antiAlias);\n  }\n  if (dither !== undefined) {\n    paint.setDither(dither);\n  }\n};\n"],"mappings":"AAAA,SAASA,OAAO,EAAEC,YAAY,QAAQ,oBAAoB;AAE1D,SACEC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,UAAU,QACL,qBAAqB;AAI5B,OAAO,MAAMC,kBAAkB,GAAGA,CAChCC,IAAU,EACVC,GAAmB,EACnB;EACEC,OAAO;EACPC,KAAK;EACLC,SAAS;EACTC,WAAW;EACXC,KAAK;EACLC,UAAU;EACVC,SAAS;EACTC,WAAW;EACXC,SAAS;EACTC;AACU,CAAC,EACbC,UAAmB,KAChB;EACH,SAAS;;EACT,MAAM;IAAEC;EAAM,CAAC,GAAGZ,GAAG;EAErB,IAAIC,OAAO,KAAKY,SAAS,EAAE;IACzB,IAAIF,UAAU,EAAE;MACdC,KAAK,CAACE,SAAS,CAACF,KAAK,CAACG,SAAS,CAAC,CAAC,GAAGd,OAAO,CAAC;IAC9C,CAAC,MAAM;MACLD,GAAG,CAACgB,UAAU,CAAChB,GAAG,CAACiB,UAAU,CAAC,CAAC,GAAGhB,OAAO,CAAC;IAC5C;EACF;EACA,IAAIC,KAAK,KAAKW,SAAS,EAAE;IACvBD,KAAK,CAACM,SAAS,CAAC,IAAI,CAAC;IACrBN,KAAK,CAACO,QAAQ,CAAC1B,YAAY,CAACM,IAAI,EAAEG,KAAK,CAAC,CAAC;EAC3C;EACA,IAAIC,SAAS,KAAKU,SAAS,EAAE;IAC3BD,KAAK,CAACQ,YAAY,CAAC1B,SAAS,CAACF,OAAO,CAACW,SAAS,CAAC,CAAC,CAAC;EACnD;EACA,IAAIC,WAAW,KAAKS,SAAS,EAAE;IAC7BD,KAAK,CAACS,cAAc,CAACjB,WAAW,CAAC;EACnC;EACA,IAAIC,KAAK,KAAKQ,SAAS,EAAE;IACvBD,KAAK,CAACU,QAAQ,CAAC3B,UAAU,CAACH,OAAO,CAACa,KAAK,CAAC,CAAC,CAAC;EAC5C;EACA,IAAIC,UAAU,KAAKO,SAAS,EAAE;IAC5BD,KAAK,CAACW,aAAa,CAAC1B,UAAU,CAACL,OAAO,CAACc,UAAU,CAAC,CAAC,CAAC;EACtD;EACA,IAAIC,SAAS,KAAKM,SAAS,EAAE;IAC3BD,KAAK,CAACY,YAAY,CAAC5B,SAAS,CAACJ,OAAO,CAACe,SAAS,CAAC,CAAC,CAAC;EACnD;EACA,IAAIC,WAAW,KAAKK,SAAS,EAAE;IAC7BD,KAAK,CAACa,cAAc,CAACjB,WAAW,CAAC;EACnC;EACA,IAAIC,SAAS,KAAKI,SAAS,EAAE;IAC3BD,KAAK,CAACc,YAAY,CAACjB,SAAS,CAAC;EAC/B;EACA,IAAIC,MAAM,KAAKG,SAAS,EAAE;IACxBD,KAAK,CAACe,SAAS,CAACjB,MAAM,CAAC;EACzB;AACF,CAAC","ignoreList":[]}

package/lib/typescript/lib/commonjs/sksg/Recorder/ReanimatedRecorder.d.ts

@@ -7,7 +7,7 @@ export class ReanimatedRecorder {
     getSharedValues(): any[];
     saveGroup(): void;
     restoreGroup(): void;
-    savePaint(props: any): void;
+    savePaint(props: any, standalone: any): void;
     restorePaint(): void;
     restorePaintDeclaration(): void;
     materializePaint(): void;

package/lib/typescript/lib/commonjs/sksg/Recorder/Recorder.d.ts

@@ -12,7 +12,7 @@ export class Recorder {
     add(command: any): void;
     saveGroup(): void;
     restoreGroup(): void;
-    savePaint(props: any): void;
+    savePaint(props: any, standalone: any): void;
     restorePaint(): void;
     restorePaintDeclaration(): void;
     materializePaint(): void;

package/lib/typescript/lib/commonjs/sksg/Recorder/commands/Paint.d.ts

@@ -10,4 +10,4 @@ export function setPaintProperties(Skia: any, ctx: any, { opacity, color, blendM
     strokeMiter: any;
     antiAlias: any;
     dither: any;
-}): void;
+}, standalone: any): void;

package/lib/typescript/lib/module/sksg/Recorder/ReanimatedRecorder.d.ts

@@ -6,7 +6,7 @@ export class ReanimatedRecorder {
     getSharedValues(): any[];
     saveGroup(): void;
     restoreGroup(): void;
-    savePaint(props: any): void;
+    savePaint(props: any, standalone: any): void;
     restorePaint(): void;
     restorePaintDeclaration(): void;
     materializePaint(): void;

package/lib/typescript/lib/module/sksg/Recorder/Recorder.d.ts

@@ -11,7 +11,7 @@ export class Recorder {
     add(command: any): void;
     saveGroup(): void;
     restoreGroup(): void;
-    savePaint(props: any): void;
+    savePaint(props: any, standalone: any): void;
     restorePaint(): void;
     restorePaintDeclaration(): void;
     materializePaint(): void;

package/lib/typescript/lib/module/sksg/Recorder/commands/Paint.d.ts

@@ -9,4 +9,4 @@ export function setPaintProperties(Skia: any, ctx: any, { opacity, color, blendM
     strokeMiter: any;
     antiAlias: any;
     dither: any;
-}): void;
+}, standalone: any): void;

package/lib/typescript/src/skia/types/Recorder.d.ts

@@ -5,7 +5,7 @@ import type { SkPicture } from "./Picture";
 export interface BaseRecorder {
     saveGroup(): void;
     restoreGroup(): void;
-    savePaint(props: AnimatedProps<PaintProps>): void;
+    savePaint(props: AnimatedProps<PaintProps>, standalone: boolean): void;
     restorePaint(): void;
     restorePaintDeclaration(): void;
     materializePaint(): void;

package/lib/typescript/src/sksg/Recorder/ReanimatedRecorder.d.ts

@@ -11,7 +11,7 @@ export declare class ReanimatedRecorder implements BaseRecorder {
     getSharedValues(): SharedValue<unknown>[];
     saveGroup(): void;
     restoreGroup(): void;
-    savePaint(props: AnimatedProps<PaintProps>): void;
+    savePaint(props: AnimatedProps<PaintProps>, standalone: boolean): void;
     restorePaint(): void;
     restorePaintDeclaration(): void;
     materializePaint(): void;

package/lib/typescript/src/sksg/Recorder/Recorder.d.ts

@@ -21,7 +21,7 @@ export declare class Recorder implements BaseRecorder {
     private add;
     saveGroup(): void;
     restoreGroup(): void;
-    savePaint(props: AnimatedProps<PaintProps>): void;
+    savePaint(props: AnimatedProps<PaintProps>, standalone: boolean): void;
     restorePaint(): void;
     restorePaintDeclaration(): void;
     materializePaint(): void;

package/lib/typescript/src/sksg/Recorder/commands/Paint.d.ts

@@ -1,4 +1,4 @@
 import type { PaintProps } from "../../../dom/types";
 import type { Skia } from "../../../skia/types";
 import type { DrawingContext } from "../DrawingContext";
-export declare const setPaintProperties: (Skia: Skia, ctx: DrawingContext, { opacity, color, blendMode, strokeWidth, style, strokeJoin, strokeCap, strokeMiter, antiAlias, dither, }: PaintProps) => void;
+export declare const setPaintProperties: (Skia: Skia, ctx: DrawingContext, { opacity, color, blendMode, strokeWidth, style, strokeJoin, strokeCap, strokeMiter, antiAlias, dither, }: PaintProps, standalone: boolean) => void;

package/package.json

@@ -8,7 +8,7 @@
     "setup-skia-web": "scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",

package/src/renderer/__tests__/e2e/Opacity.spec.tsx

@@ -14,6 +14,7 @@ import {
   Group,
   Image,
   ImageShader,
+  Paint,
   RoundedRect,
 } from "../../components";
 import { setupSkia } from "../../../skia/__tests__/setup";
@@ -275,4 +276,26 @@ describe("Opacity", () => {
     );
     checkImage(img, "snapshots/drawings/opacity-image.png");
   });
+  it("Should apply opacity on a layer (1)", async () => {
+    const {} = importSkia();
+    const img = await surface.draw(
+      <Group>
+        <Group layer={<Paint opacity={0.5} />}>
+          <Fill color="lightblue" />
+        </Group>
+      </Group>
+    );
+    checkImage(img, "snapshots/drawings/semi-transparent-layer.png");
+  });
+  it("Should apply opacity on a layer (2)", async () => {
+    const {} = importSkia();
+    const img = await surface.draw(
+      <Group>
+        <Group layer={<Paint opacity={0} />}>
+          <Fill color="lightblue" />
+        </Group>
+      </Group>
+    );
+    checkImage(img, "snapshots/drawings/transparent-layer.png");
+  });
 });

package/src/skia/types/Recorder.ts

@@ -34,7 +34,7 @@ import type { SkPicture } from "./Picture";
 export interface BaseRecorder {
   saveGroup(): void;
   restoreGroup(): void;
-  savePaint(props: AnimatedProps<PaintProps>): void;
+  savePaint(props: AnimatedProps<PaintProps>, standalone: boolean): void;
   restorePaint(): void;
   restorePaintDeclaration(): void;
   materializePaint(): void;

package/src/sksg/Recorder/Player.ts

@@ -67,7 +67,13 @@ function play(ctx: DrawingContext, _command: Command) {
       ctx.paints.push(command.props.paint);
     } else {
       ctx.savePaint();
-      setPaintProperties(ctx.Skia, ctx, command.props);
+      setPaintProperties(
+        ctx.Skia,
+        ctx,
+        command.props,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (command as any).standalone
+      );
     }
   } else if (isCommand(command, CommandType.RestorePaint)) {
     ctx.restorePaint();

package/src/sksg/Recorder/ReanimatedRecorder.ts

@@ -69,9 +69,9 @@ export class ReanimatedRecorder implements BaseRecorder {
     this.recorder.restoreGroup();
   }
 
-  savePaint(props: AnimatedProps<PaintProps>): void {
+  savePaint(props: AnimatedProps<PaintProps>, standalone: boolean): void {
     this.processAnimationValues(props);
-    this.recorder.savePaint(props);
+    this.recorder.savePaint(props, standalone);
   }
 
   restorePaint(): void {

package/src/sksg/Recorder/Recorder.ts

@@ -102,8 +102,8 @@ export class Recorder implements BaseRecorder {
     this.cursors.pop();
   }
 
-  savePaint(props: AnimatedProps<PaintProps>) {
-    this.add({ type: CommandType.SavePaint, props });
+  savePaint(props: AnimatedProps<PaintProps>, standalone: boolean) {
+    this.add({ type: CommandType.SavePaint, props, standalone });
   }
 
   restorePaint() {

package/src/sksg/Recorder/Visitor.ts

@@ -188,7 +188,7 @@ const pushMaskFilters = (recorder: BaseRecorder, maskFilters: Node<any>[]) => {
 
 const pushPaints = (recorder: BaseRecorder, paints: Node<any>[]) => {
   paints.forEach((paint) => {
-    recorder.savePaint(paint.props);
+    recorder.savePaint(paint.props, true);
     const { colorFilters, maskFilters, shaders, imageFilters, pathEffects } =
       sortNodeChildren(paint);
     pushColorFilters(recorder, colorFilters);
@@ -223,7 +223,7 @@ const visitNode = (recorder: BaseRecorder, node: Node<any>) => {
     pathEffects.length > 0 ||
     shaders.length > 0;
   if (shouldPushPaint) {
-    recorder.savePaint(paint ?? {});
+    recorder.savePaint(paint ?? {}, false);
     pushColorFilters(recorder, colorFilters);
     pushImageFilters(recorder, imageFilters);
     pushMaskFilters(recorder, maskFilters);

package/src/sksg/Recorder/commands/Paint.ts

@@ -23,13 +23,18 @@ export const setPaintProperties = (
     strokeMiter,
     antiAlias,
     dither,
-  }: PaintProps
+  }: PaintProps,
+  standalone: boolean
 ) => {
   "worklet";
   const { paint } = ctx;
 
   if (opacity !== undefined) {
-    ctx.setOpacity(ctx.getOpacity() * opacity);
+    if (standalone) {
+      paint.setAlphaf(paint.getAlphaf() * opacity);
+    } else {
+      ctx.setOpacity(ctx.getOpacity() * opacity);
+    }
   }
   if (color !== undefined) {
     paint.setShader(null);