diff --git a/docs/docs/shapes/vertices.md b/docs/docs/shapes/vertices.md index 827ee4a894..ada150c53b 100644 --- a/docs/docs/shapes/vertices.md +++ b/docs/docs/shapes/vertices.md @@ -10,7 +10,7 @@ Draws vertices. | Name | Type | Description | | :--------- | :----------- | :----------------------- | | vertices | `Point[]` | Vertices to draw | -| mode? | `VertexMode` | Can be `triangles`, `trianglesStrip` or `triangleFan`. Default is `triangles` | +| mode? | `VertexMode` | Can be `triangles`, `triangleStrip` or `triangleFan`. Default is `triangles` | | indices? | `number[]` | Indices of the vertices that form the triangles. If not provided, the order of the vertices will be taken. Using this property enables you not to duplicate vertices. | | textures | `Point[]`. | [Texture mapping](https://en.wikipedia.org/wiki/Texture_mapping). The texture is the shader provided by the paint. | | colors? | `string[]` | Optional colors to be associated to each vertex | diff --git a/package/src/__tests__/snapshots/vertices/strip.png b/package/src/__tests__/snapshots/vertices/strip.png new file mode 100644 index 0000000000..d1291793e0 Binary files /dev/null and b/package/src/__tests__/snapshots/vertices/strip.png differ diff --git a/package/src/__tests__/snapshots/vertices/vertices.png b/package/src/__tests__/snapshots/vertices/vertices.png new file mode 100644 index 0000000000..1190272231 Binary files /dev/null and b/package/src/__tests__/snapshots/vertices/vertices.png differ diff --git a/package/src/renderer/__tests__/e2e/Vertices.spec.tsx b/package/src/renderer/__tests__/e2e/Vertices.spec.tsx new file mode 100644 index 0000000000..916de23f37 --- /dev/null +++ b/package/src/renderer/__tests__/e2e/Vertices.spec.tsx @@ -0,0 +1,30 @@ +import React from "react"; + +import { checkImage } from "../../../__tests__/setup"; +import { Vertices } from "../../components"; +import { surface, importSkia } from "../setup"; + +describe("Vertices", () => { + it("should draw a single triangle", async () => { + const { vec } = importSkia(); + const vertices = [vec(64, 0), vec(128, 256), vec(0, 256)]; + const colors = ["#61dafb", "#fb61da", "#dafb61"]; + const img = await surface.draw( + <> + + + ); + checkImage(img, "snapshots/vertices/vertices.png"); + }); + it("should draw a single triangle strip", async () => { + const { vec } = importSkia(); + const vertices = [vec(0, 0), vec(128, 0), vec(0, 256), vec(128, 256)]; + const colors = ["#61dafb", "#fb61da", "#dafb61", "cyan"]; + const img = await surface.draw( + <> + + + ); + checkImage(img, "snapshots/vertices/strip.png"); + }); +}); diff --git a/package/src/skia/__tests__/Enums.spec.ts b/package/src/skia/__tests__/Enums.spec.ts index c02229b634..cbb09c3547 100644 --- a/package/src/skia/__tests__/Enums.spec.ts +++ b/package/src/skia/__tests__/Enums.spec.ts @@ -95,7 +95,11 @@ describe("Enums", () => { }); it("Should match VertexMode enums values with CanvasKit", () => { const { CanvasKit } = setupSkia(); - checkEnum(VertexMode, CanvasKit.VertexMode); + expect(VertexMode.TriangleFan).toBe(CanvasKit.VertexMode.TriangleFan.value); + expect(VertexMode.TriangleStrip).toBe( + CanvasKit.VertexMode.TrianglesStrip.value + ); + expect(VertexMode.Triangles).toBe(CanvasKit.VertexMode.Triangles.value); }); it("Should match Canvas enums values with CanvasKit", () => { const { CanvasKit } = setupSkia(); diff --git a/package/src/skia/types/Vertices/Vertices.tsx b/package/src/skia/types/Vertices/Vertices.tsx index 49f023d7a0..a1b098e1e4 100644 --- a/package/src/skia/types/Vertices/Vertices.tsx +++ b/package/src/skia/types/Vertices/Vertices.tsx @@ -3,7 +3,7 @@ import type { SkJSIInstance } from "../JsiInstance"; export enum VertexMode { Triangles, - TrianglesStrip, + TriangleStrip, TriangleFan, }