Fix VectorFieldProps, add tests (#33)

* Fix type signature and add tests for VectorField

* Add a test for opacity

* Add color to the test

src/display/VectorField.test.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+import { Theme, VectorField } from ".."
+import renderToImage from "../tests/renderToImage"
+
+describe("<VectorField />", () => {
+  it("Renders", async () => {
+    const a = { x: 5.1, y: 5.1 }
+    expect(
+      await renderToImage(
+        <VectorField xy={(x, y) => [y - a.y - (x - a.x), -(x - a.x) - (y - a.y)]} step={0.5} />
+      )
+    ).toMatchImageSnapshot()
+  })
+
+  it("Supports opacity functions", async () => {
+    expect(
+      await renderToImage(
+        <VectorField
+          xy={() => [0.5, 0.5]}
+          step={1}
+          xyOpacity={(x, y) => Math.min(Math.sqrt(x ** 2 + y ** 2) / 10, 1)}
+          color={Theme.red}
+        />
+      )
+    ).toMatchImageSnapshot()
+  })
+})

src/display/VectorField.tsx

@@ -2,20 +2,19 @@ import clamp from "lodash.clamp"
 import React from "react"
 import * as vec from "vec-la"
 
+import { Vector2 } from "../math"
 import { usePaneContext } from "../view/PaneManager"
 import { useScaleContext } from "../view/ScaleContext"
 import { theme } from "./Theme"
 
 export interface VectorFieldProps {
   xy: (x: number, y: number) => [number, number]
-  xyOpacity: (x: number, y: number) => number
+  xyOpacity?: (x: number, y: number) => number
   step: number
-  opacityStep: number
+  opacityStep?: number
   color?: string
 }
 
-export type Vector = [number, number]
-
 const xyOpacityDefault = () => 1
 
 const VectorField: React.VFC<VectorFieldProps> = ({
@@ -38,7 +37,7 @@ const VectorField: React.VFC<VectorFieldProps> = ({
   function fieldForRegion(xMin: number, xMax: number, yMin: number, yMax: number) {
     for (let x = Math.floor(xMin); x <= Math.ceil(xMax); x += step) {
       for (let y = Math.floor(yMin); y <= Math.ceil(yMax); y += step) {
-        const tail: Vector = [x, y]
+        const tail: Vector2 = [x, y]
         const trueOffset = xy(x, y)
         const trueMag = vec.mag(trueOffset)
         const scaledOffset = vec.scale(vec.norm(trueOffset), Math.min(trueMag, step * 0.75))