Declarative Paints (#390)

Shopify · Apr 11, 2022 · e965a5a · e965a5a
1 parent 7b1a642
commit e965a5a
Show file tree

Hide file tree

Showing 52 changed files with 1,112 additions and 1,129 deletions.
diff --git a/docs/docs/canvas/canvas.md b/docs/docs/canvas/canvas.md
@@ -14,17 +14,17 @@ Behind the scenes, it is using its own React renderer.
 | style?   | `ViewStyle` | View style |
 | ref?   | `Ref<SkiaView>` | Reference to the `SkiaView` object |
 | onTouch?    | `TouchHandler` | Touch handler for the Canvas (see [touch handler](/docs/animations/touch-events#usetouchhandler)) |
-| onLayout? | `NativeEvent<LayoutEvent>` | Invoked on mount and on layout changes. (see [onLayout](https://reactnative.dev/docs/view#onlayout)) |
+| onLayout? | `NativeEvent<LayoutEvent>` | Invoked on mount and on layout changes (see [onLayout](https://reactnative.dev/docs/view#onlayout)) |
 
 ## Getting the Canvas size
 
 If the size of the Canvas is unknown, there are two ways to access it:
-  * In React components using the `onLayout` prop like you would on any regular React Native View. 
-  * As a Skia value using `useCanvasSize()` (see [useCanvasSize()](/docs/animations/values#canvas-size)).
+  * In React components, using the [`onLayout`](https://reactnative.dev/docs/view#onlayout) prop like you would on any regular React Native View. 
+  * As a Skia value, using [`useCanvasSize()`](/docs/animations/values#canvas-size).
 
 ## Getting a Canvas Snapshot
 
-You can save your drawings as an image, using `makeImageSnapshot`. This method will return an [Image instance](/docs/images#instance-methods). This instance can be used to do anything: drawing it via the `<Image>` component, or being saved or shared using binary or base64 encoding.
+You can save your drawings as an image, using `makeImageSnapshot`. This method will return an [Image instance](/docs/images#instance-methods). This instance can be used to draw it via the `<Image>` component, or be saved or shared using binary or base64 encoding.
 
 ### Example
 

diff --git a/docs/docs/color-filters.md b/docs/docs/color-filters.md
@@ -16,28 +16,30 @@ A playground to build color matrices is available [here](https://fecolormatrix.c
 | children? | `ColorFilter` | Optional color filter to be applied first. |
 
 ```tsx twoslash
-import { Canvas, Paint, ColorMatrix, Image, useImage } from "@shopify/react-native-skia";
+import { Canvas,ColorMatrix, Image, useImage } from "@shopify/react-native-skia";
 
 const MatrixColorFilter = () => {
   const image = useImage(require("./assets/oslo.jpg"));
+  if (!image) {
+    return null;
+  }
   return (
     <Canvas style={{ flex: 1 }}>
-      <Paint>
-        <ColorMatrix
-          matrix={[
-            -0.578, 0.99, 0.588, 0, 0, 0.469, 0.535, -0.003, 0, 0, 0.015,
-            1.69, -0.703, 0, 0, 0, 0, 0, 1, 0,
-          ]}
-        />
-      </Paint>
-      { image && (<Image
-        x={0}
-        y={0}
-        width={256}
-        height={256}
-        image={image}
-        fit="cover"
-      />)}
+      <Image
+          x={0}
+          y={0}
+          width={256}
+          height={256}
+          image={image}
+          fit="cover"
+        >
+          <ColorMatrix
+            matrix={[
+              -0.578, 0.99, 0.588, 0, 0, 0.469, 0.535, -0.003, 0, 0, 0.015,
+              1.69, -0.703, 0, 0, 0, 0, 0, 1, 0,
+            ]}
+          />
+      </Image>
     </Canvas>
   );
 };

diff --git a/docs/docs/group.md b/docs/docs/group.md
@@ -23,7 +23,7 @@ It can apply the following operations to its children:
 
 ## Paint Properties
 
-Its children will inherit all paint properties applied to a group.
+Its children will inherit all paint attributes applied to a group. These attributes can be properties like `color` or `style` or children like `<Shader />`, or `<ImageFilter />` for instance ([see painting](/docs/paint/overview)).
 
 ```tsx twoslash
 import {Canvas, Circle, Group} from "@shopify/react-native-skia";
@@ -169,24 +169,21 @@ You can use it to apply effects.
 This is particularly useful to build effects that need to be applied to a group of elements and not one in particular.
 
 ```tsx twoslash
-import {Canvas, Group, Circle, Blur, Defs, Paint, ColorMatrix, usePaintRef} from "@shopify/react-native-skia";
+import {Canvas, Group, Circle, Blur, Paint, ColorMatrix, usePaintRef} from "@shopify/react-native-skia";
 
 const Clip = () => {
   const paint = usePaintRef();
   return (
     <Canvas style={{ flex: 1 }}>
-      {/* Here we use <Defs /> so the paint is not used by the siblings and descendants */}
-      <Defs>
-        <Paint ref={paint}>
-          <ColorMatrix
-            matrix={[
-              1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 18, -7,
-            ]}
-          >
-            <Blur blur={20} />
-          </ColorMatrix>
-        </Paint>
-      </Defs>
+      <Paint ref={paint}>
+        <ColorMatrix
+          matrix={[
+            1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 18, -7,
+          ]}
+        >
+          <Blur blur={20} />
+        </ColorMatrix>
+      </Paint>
       <Group color="lightblue" layer={paint}>
         <Circle cx={0} cy={128} r={128 * 0.95} />
         <Circle

diff --git a/docs/docs/image-filters/blur.md b/docs/docs/image-filters/blur.md
@@ -17,7 +17,7 @@ The provided tile mode is used when the blur kernel goes outside the input image
 ## Simple Blur
 
 ```tsx twoslash
-import { Canvas, Paint, Blur, Image, useImage } from "@shopify/react-native-skia";
+import { Canvas, Blur, Image, useImage } from "@shopify/react-native-skia";
 
 const BlurImageFilter = () => {
   const image = useImage(require("./assets/oslo.jpg"));
@@ -26,17 +26,16 @@ const BlurImageFilter = () => {
   }
   return (
     <Canvas style={{ flex: 1 }}>
-      <Paint>
-        <Blur blur={4} />
-      </Paint>
       <Image
         x={0}
         y={0}
         width={256}
         height={256}
         image={image}
         fit="cover"
-      />
+      >
+        <Blur blur={4} />
+      </Image>
     </Canvas>
   );
 };

diff --git a/docs/docs/image-filters/displacement-map.md b/docs/docs/image-filters/displacement-map.md
@@ -26,7 +26,7 @@ where `P(x,y)` is the child image, and `P'(x,y)` is the destination. `XC(x,y)` a
 We use a [Perlin Noise](/docs/shaders/perlin-noise) as a displacement map in the example below.
 
 ```tsx twoslash
-import { Canvas, Paint, Image, Turbulence, DisplacementMap, useImage } from "@shopify/react-native-skia";
+import { Canvas, Image, Turbulence, DisplacementMap, useImage } from "@shopify/react-native-skia";
 
 const Filter = () => {
   const image = useImage(require("./assets/oslo.jpg"));
@@ -35,19 +35,18 @@ const Filter = () => {
   }
   return (
     <Canvas style={{ width: 256, height: 256 }}>
-      <Paint>
-        <DisplacementMap channelX="g" channelY="a" scale={20}>
-          <Turbulence freqX={0.01} freqY={0.05} octaves={2} seed={2} />
-        </DisplacementMap>
-      </Paint>
       <Image
         image={image}
         x={0}
         y={0}
         width={256}
         height={256}
         fit="cover"
-      />
+      >
+        <DisplacementMap channelX="g" channelY="a" scale={20}>
+          <Turbulence freqX={0.01} freqY={0.05} octaves={2} seed={2} />
+        </DisplacementMap>
+      </Image>
     </Canvas>
   );
 };

diff --git a/docs/docs/image-filters/morphology.md b/docs/docs/image-filters/morphology.md
@@ -18,7 +18,7 @@ Its usefulness lies primarily in fattening or thinning effects.
 ## Example
 
 ```tsx twoslash
-import {Canvas, Text, Paint, Morphology} from "@shopify/react-native-skia";
+import {Canvas, Text, Morphology} from "@shopify/react-native-skia";
 
 export const MorphologyDemo = () => {
   return (
@@ -30,26 +30,24 @@ export const MorphologyDemo = () => {
         familyName="sans-serif"
         size={24}
       />
-      <Paint>
-        <Morphology radius={1} />
-      </Paint>
       <Text
         text="Hello World"
         x={32}
         y={64}
         familyName="sans-serif"
         size={24}
-      />
-      <Paint>
-        <Morphology radius={0.3} operator="erode" />
-      </Paint>
+      >
+        <Morphology radius={1} />
+      </Text>
       <Text
         text="Hello World"
         x={32}
         y={96}
         familyName="sans-serif"
         size={24}
-      />
+      >
+        <Morphology radius={0.3} operator="erode" />
+      </Text>
     </Canvas>
   );
 };

diff --git a/docs/docs/image-filters/offset.md b/docs/docs/image-filters/offset.md
@@ -16,7 +16,7 @@ This offset filter is identical to its [SVG counterpart](https://developer.mozil
 ## Example
 
 ```tsx twoslash
-import { Canvas, Paint, Image, Offset, useImage, Fill } from "@shopify/react-native-skia";
+import { Canvas, Image, Offset, useImage, Fill } from "@shopify/react-native-skia";
 
 const Filter = () => {
   const image = useImage(require("./assets/oslo.jpg"));
@@ -26,17 +26,16 @@ const Filter = () => {
   return (
     <Canvas style={{ width: 256, height: 256 }}>
       <Fill color="lightblue" />
-      <Paint>
-        <Offset x={64} y={64} />
-      </Paint>
       <Image
         image={image}
         x={0}
         y={0}
         width={256}
         height={256}
         fit="cover"
-      />
+      >
+        <Offset x={64} y={64} />
+      </Image>
     </Canvas>
   );
 };

diff --git a/docs/docs/image-filters/overview.md b/docs/docs/image-filters/overview.md
@@ -13,7 +13,7 @@ Color Filters and Shaders and also be used as Image filters.
 In the example below, we first apply a color matrix to the content and a blur image filter.
 
 ```tsx twoslash
-import { Canvas, Paint, Blur, Image, ColorMatrix, useImage } from "@shopify/react-native-skia";
+import { Canvas, Blur, Image, ColorMatrix, useImage } from "@shopify/react-native-skia";
 
 const ComposeImageFilter = () => {
   const image = useImage(require("./assets/oslo.jpg"));
@@ -22,7 +22,14 @@ const ComposeImageFilter = () => {
   }
   return (
     <Canvas style={{ flex: 1 }}>
-      <Paint>
+      <Image
+        x={0}
+        y={0}
+        width={256}
+        height={256}
+        image={image}
+        fit="cover"
+      >
         <Blur blur={2} mode="clamp">
           <ColorMatrix
             matrix={[
@@ -31,15 +38,7 @@ const ComposeImageFilter = () => {
             ]}
           />
         </Blur>
-      </Paint>
-      <Image
-        x={0}
-        y={0}
-        width={256}
-        height={256}
-        image={image}
-        fit="cover"
-      />
+      </Image>
     </Canvas>
   );
 };

diff --git a/docs/docs/image-filters/shadows.md b/docs/docs/image-filters/shadows.md
@@ -37,8 +37,6 @@ It is equivalent to the following CSS notation.
 import {
   Shadow,
   Fill,
-  Group,
-  Paint,
   RoundedRect,
   Canvas
 } from "@shopify/react-native-skia";
@@ -47,13 +45,10 @@ const Neumorphism = () => {
   return (
     <Canvas style={{ width: 256, height: 256 }}>
       <Fill color="lightblue" />
-      <Group>
-        <Paint>
-          <Shadow dx={12} dy={12} blur={25} color="#93b8c4" />
-          <Shadow dx={-12} dy={-12} blur={25} color="#c7f8ff" />
-        </Paint>
-        <RoundedRect x={32} y={32} width={192} height={192} r={32} color="lightblue" />
-      </Group>
+      <RoundedRect x={32} y={32} width={192} height={192} r={32} color="lightblue">
+        <Shadow dx={12} dy={12} blur={25} color="#93b8c4" />
+        <Shadow dx={-12} dy={-12} blur={25} color="#c7f8ff" />
+      </RoundedRect>
     </Canvas>
   );
 };
@@ -69,8 +64,6 @@ const Neumorphism = () => {
 import {
   Shadow,
   Fill,
-  Group,
-  Paint,
   RoundedRect,
   Canvas
 } from "@shopify/react-native-skia";
@@ -79,13 +72,10 @@ const Neumorphism = () => {
   return (
     <Canvas style={{ width: 256, height: 256 }}>
       <Fill color="lightblue" />
-      <Group>
-        <Paint>
-          <Shadow dx={12} dy={12} blur={25} color="#93b8c4" inner />
-          <Shadow dx={-12} dy={-12} blur={25} color="#c7f8ff" inner />
-        </Paint>
-        <RoundedRect x={32} y={32} width={192} height={192} r={32} color="lightblue" />
-      </Group>
+      <RoundedRect x={32} y={32} width={192} height={192} r={32} color="lightblue">
+        <Shadow dx={12} dy={12} blur={25} color="#93b8c4" inner />
+        <Shadow dx={-12} dy={-12} blur={25} color="#c7f8ff" inner />
+      </RoundedRect>
     </Canvas>
   );
 };

diff --git a/docs/docs/mask-filters.md b/docs/docs/mask-filters.md
@@ -20,15 +20,14 @@ Creates a blur mask filter.
 ### Example
 
 ```tsx twoslash
-import {Canvas, Fill, Paint, Circle, BlurMask, vec} from "@shopify/react-native-skia";
+import {Canvas, Fill, Circle, BlurMask, vec} from "@shopify/react-native-skia";
 
 const MaskFilterDemo = () => {
   return (
     <Canvas style={{ flex: 1}}>
-      <Paint>
+      <Circle c={vec(128)} r={128} color="lightblue">
         <BlurMask blur={20} style="normal" />
-      </Paint>
-      <Circle c={vec(128)} r={128} color="lightblue" />
+      </Circle>
     </Canvas>
   );
 };