Merge pull request #99 from Shopify/feature/85-rename-rrect-drect

Renamed components DRect -> DiffRect and RRect -> RoundRect
Shopify · Jan 12, 2022 · 1356e0d · 1356e0d
2 parents 85b82bc + 49177bd
commit 1356e0d
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 54 deletions.
diff --git a/docs/docs/shapes/polygons.md b/docs/docs/shapes/polygons.md
@@ -9,37 +9,31 @@ slug: /shapes/polygons
 
 Draws a rectangle.
 
-| Name   | Type     |  Description                                                  |
-|:-------|:---------|:--------------------------------------------------------------|
-| x      | `number` | X coordinate.                                                 |
-| y      | `number` | Y coordinate.                                                 |
-| width  | `number` | Width of the rectangle.                                       |
-| height | `number` | Height of the rectangle.                                      |
+| Name   | Type     | Description              |
+| :----- | :------- | :----------------------- |
+| x      | `number` | X coordinate.            |
+| y      | `number` | Y coordinate.            |
+| width  | `number` | Width of the rectangle.  |
+| height | `number` | Height of the rectangle. |
 
 ```tsx twoslash
-import {Canvas, Rect} from "@shopify/react-native-skia";
+import { Canvas, Rect } from "@shopify/react-native-skia";
 
 const RectDemo = () => {
   return (
-    <Canvas style={{ flex: 1}}>
-      <Rect
-        x={0}
-        y={0}
-        width={256}
-        height={256}
-        color="lightblue"
-      />
+    <Canvas style={{ flex: 1 }}>
+      <Rect x={0} y={0} width={256} height={256} color="lightblue" />
     </Canvas>
   );
 };
 ```
 
-## RRect
+## RoundRect
 
 Draws a rounded rectangle.
 
-| Name   | Type     |  Description                                                  |
-|:-------|:---------|:--------------------------------------------------------------|
+| Name   | Type     | Description                                                   |
+| :----- | :------- | :------------------------------------------------------------ |
 | x      | `number` | X coordinate.                                                 |
 | y      | `number` | Y coordinate.                                                 |
 | width  | `number` | Width of the rectangle.                                       |
@@ -48,12 +42,12 @@ Draws a rounded rectangle.
 | ry?    | `number` | Vertical corner radius. Defaults to `rx` if specified or 0.   |
 
 ```tsx twoslash
-import {Canvas, RRect} from "@shopify/react-native-skia";
+import { Canvas, RoundRect } from "@shopify/react-native-skia";
 
 const RectDemo = () => {
   return (
-    <Canvas style={{ flex: 1}}>
-      <RRect
+    <Canvas style={{ flex: 1 }}>
+      <RoundRect
         x={0}
         y={0}
         width={256}
@@ -68,28 +62,24 @@ const RectDemo = () => {
 
 ![Rounded Rectangle](assets/polygons/rect.png)
 
-## DRect
+## DiffRect
 
 Draws the difference between two rectangles.
 
-| Name   | Type          |  Description     |
-|:-------|:--------------|:-----------------|
-| outer  | `RectOrRRect` | Outer rectangle. |
-| inner  | `RectOrRRect` | Inner rectangle. |
+| Name  | Type          | Description      |
+| :---- | :------------ | :--------------- |
+| outer | `RectOrRRect` | Outer rectangle. |
+| inner | `RectOrRRect` | Inner rectangle. |
 
 ```tsx twoslash
-import {Canvas, DRect, rect, rrect} from "@shopify/react-native-skia";
+import { Canvas, DiffRect, rect, rrect } from "@shopify/react-native-skia";
 
 const DRectDemo = () => {
   const outer = rrect(rect(0, 0, 256, 256), 25, 25);
-  const inner = rrect(
-    rect(50, 50, 256 - 100, 256 - 100),
-    50,
-    50
-  );
+  const inner = rrect(rect(50, 50, 256 - 100, 256 - 100), 50, 50);
   return (
-    <Canvas style={{ flex: 1}}>
-      <DRect inner={inner} outer={outer} color="lightblue" />
+    <Canvas style={{ flex: 1 }}>
+      <DiffRect inner={inner} outer={outer} color="lightblue" />
     </Canvas>
   );
 };
@@ -101,17 +91,17 @@ const DRectDemo = () => {
 
 Draws a line between two points.
 
-| Name | Type    |  Description     |
-|:-----|:--------|:-----------------|
-| p1   | `Point` | Start point.     |
-| p2   | `Point` | End point.       |
+| Name | Type    | Description  |
+| :--- | :------ | :----------- |
+| p1   | `Point` | Start point. |
+| p2   | `Point` | End point.   |
 
 ```tsx twoslash
-import {Canvas, Line, vec} from "@shopify/react-native-skia";
+import { Canvas, Line, vec } from "@shopify/react-native-skia";
 
 const LineDemo = () => {
   return (
-    <Canvas style={{ flex: 1}}>
+    <Canvas style={{ flex: 1 }}>
       <Line
         p1={vec(0, 0)}
         p2={vec(256, 256)}
@@ -130,13 +120,13 @@ const LineDemo = () => {
 
 Draws points and optionally draws the connection between them.
 
-| Name   | Type        |  Description     |
-|:-------|:------------|:-----------------|
-| points | `Point`     | Points to draw.  |
-| mode   | `PointMode` | How should the points be connected. Can be `points` (no connection), `lines` (connect pairs of points), or `polygon` (connect lines). Default is `points`.       |
+| Name   | Type        | Description                                                                                                                                                |
+| :----- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| points | `Point`     | Points to draw.                                                                                                                                            |
+| mode   | `PointMode` | How should the points be connected. Can be `points` (no connection), `lines` (connect pairs of points), or `polygon` (connect lines). Default is `points`. |
 
 ```tsx twoslash
-import {Canvas, Points, vec} from "@shopify/react-native-skia";
+import { Canvas, Points, vec } from "@shopify/react-native-skia";
 
 const PointsDemo = () => {
   const points = [

diff --git a/example/src/Examples/API/Shapes2.tsx b/example/src/Examples/API/Shapes2.tsx
@@ -5,7 +5,7 @@ import {
   PaintStyle,
   Canvas,
   Rect,
-  DRect,
+  DiffRect,
   Group,
   Oval,
   Line,
@@ -16,7 +16,7 @@ import {
   rrect,
   Paint,
   DashPathEffect,
-  RRect,
+  RoundRect,
 } from "@shopify/react-native-skia";
 
 import { Title } from "./components/Title";
@@ -66,14 +66,14 @@ export const Shapes = () => {
       <Canvas style={styles.container}>
         <Group color="#61DAFB">
           <Rect rect={{ x: PADDING, y: PADDING, width: 100, height: 100 }} />
-          <RRect
+          <RoundRect
             x={SIZE + 2 * PADDING}
             y={PADDING}
             width={SIZE}
             height={SIZE}
             rx={25}
           />
-          <DRect outer={outer} inner={inner} />
+          <DiffRect outer={outer} inner={inner} />
         </Group>
       </Canvas>
       <Title>Ovals & Circles</Title>

diff --git a/.../src/renderer/components/shapes/DRect.tsx → ...c/renderer/components/shapes/DiffRect.tsx b/.../src/renderer/components/shapes/DRect.tsx → ...c/renderer/components/shapes/DiffRect.tsx
@@ -5,12 +5,12 @@ import type { IRRect } from "../../../skia/RRect";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
 import { useDrawing } from "../../nodes/Drawing";
 
-export interface DRectProps extends CustomPaintProps {
+export interface DiffRectProps extends CustomPaintProps {
   inner: IRRect;
   outer: IRRect;
 }
 
-export const DRect = (props: AnimatedProps<DRectProps>) => {
+export const DiffRect = (props: AnimatedProps<DiffRectProps>) => {
   const onDraw = useDrawing(props, ({ canvas, paint }, { inner, outer }) => {
     canvas.drawDRRect(outer, inner, paint);
   });

diff --git a/package/src/renderer/components/shapes/Rect.tsx b/package/src/renderer/components/shapes/Rect.tsx
@@ -16,9 +16,9 @@ export const Rect = (props: AnimatedProps<RectProps>) => {
   return <skDrawing onDraw={onDraw} {...props} />;
 };
 
-export type RRectProps = RRectDef & CustomPaintProps;
+export type RoundRectProps = RRectDef & CustomPaintProps;
 
-export const RRect = (props: AnimatedProps<RRectProps>) => {
+export const RoundRect = (props: AnimatedProps<RoundRectProps>) => {
   const onDraw = useDrawing(props, ({ canvas, paint }, rectProps) => {
     const rrect = processRRect(rectProps);
     canvas.drawRRect(rrect, paint);

diff --git a/package/src/renderer/components/shapes/index.ts b/package/src/renderer/components/shapes/index.ts
@@ -1,6 +1,6 @@
 export * from "./Circle";
 export * from "./Rect";
-export * from "./DRect";
+export * from "./DiffRect";
 export * from "./Line";
 export * from "./Path";
 export * from "./Oval";