From e04757278d5bbd4058b6d3b958307ee893699d93 Mon Sep 17 00:00:00 2001
From: Kai Sassnowski <ksassnowski@users.noreply.github.com>
Date: Thu, 22 Aug 2024 11:53:32 +0200
Subject: [PATCH] feat: make components nestable

---
 src/components/Angle.vue           |  6 +++-
 src/components/Arc.vue             |  4 ++-
 src/components/Circle.vue          | 26 ++++++++------
 src/components/Ellipse.vue         | 30 ++++++++++-------
 src/components/FunctionPlot.vue    | 15 +++++----
 src/components/Graph.vue           | 10 +++---
 src/components/Label.vue           |  6 +++-
 src/components/Line.vue            |  6 +++-
 src/components/Point.vue           |  8 +++--
 src/components/PolyLine.vue        |  4 ++-
 src/components/Polygon.vue         |  8 +++--
 src/components/Sector.vue          | 24 +++++++------
 src/components/Vector.vue          |  4 ++-
 src/composables/useLocalToWorld.ts | 30 ++++++++++-------
 src/utils/Matrix2D.ts              | 54 ++++++++++++++++++------------
 tests/math/Matrix2D.test.ts        | 13 +++----
 16 files changed, 149 insertions(+), 99 deletions(-)

diff --git a/src/components/Angle.vue b/src/components/Angle.vue
index d5f5921..ded9518 100644
--- a/src/components/Angle.vue
+++ b/src/components/Angle.vue
@@ -22,6 +22,8 @@
       :color="color"
       :size="labelSize"
     />
+
+    <slot />
   </g>
 </template>
 
@@ -33,6 +35,7 @@ import { useGraphContext } from "../composables/useGraphContext.ts";
 import { Color } from "../types.ts";
 import { useColors } from "../composables/useColors.ts";
 import { usePointerIntersection } from "../composables/usePointerIntersection.ts";
+import { useLocalToWorld } from "../composables/useLocalToWorld.ts";
 import { pointInsideSector } from "../utils/geometry.ts";
 import Label from "./Label.vue";
 
@@ -58,7 +61,8 @@ const props = withDefaults(
   },
 );
 
-const { matrix, invScale } = useGraphContext();
+const { invScale } = useGraphContext();
+const matrix = useLocalToWorld(toRef(props, "position"));
 const { parseColor } = useColors();
 
 const stroke = parseColor(toRef(props, "color"), "stroke");
diff --git a/src/components/Arc.vue b/src/components/Arc.vue
index 887f0bb..06669bc 100644
--- a/src/components/Arc.vue
+++ b/src/components/Arc.vue
@@ -10,7 +10,9 @@
     :color="color"
     :label="label"
     :label-size="labelSize"
-  />
+  >
+    <slot />
+  </Angle>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Circle.vue b/src/components/Circle.vue
index 9f0ccca..b6c1cd4 100644
--- a/src/components/Circle.vue
+++ b/src/components/Circle.vue
@@ -1,14 +1,16 @@
 <template>
-  <circle
-    v-bind="$attrs"
-    :cx="position.x"
-    :cy="position.y"
-    :r="scaledRadius"
-    :fill="fill"
-    :stroke="stroke"
-    :stroke-width="lineWidth * invScale"
-    :stroke-dasharray="dashArray"
-  />
+  <g v-bind="$attrs">
+    <circle
+      :cx="position.x"
+      :cy="position.y"
+      :r="scaledRadius"
+      :fill="fill"
+      :stroke="stroke"
+      :stroke-width="lineWidth * invScale"
+      :stroke-dasharray="dashArray"
+    />
+    <slot />
+  </g>
 </template>
 
 <script setup lang="ts">
@@ -19,6 +21,7 @@ import { useGraphContext } from "../composables/useGraphContext.ts";
 import { type Color } from "../types.ts";
 import { useColors } from "../composables/useColors.ts";
 import { usePointerIntersection } from "../composables/usePointerIntersection.ts";
+import { useLocalToWorld } from "../composables/useLocalToWorld.ts";
 import { pointInsideCircle } from "../utils/geometry.ts";
 
 const props = withDefaults(
@@ -37,7 +40,8 @@ const props = withDefaults(
   },
 );
 
-const { matrix, invScale } = useGraphContext();
+const { invScale } = useGraphContext();
+const matrix = useLocalToWorld(toRef(props, "position"));
 const { parseColor } = useColors();
 
 const stroke = parseColor(toRef(props, "color"), "stroke");
diff --git a/src/components/Ellipse.vue b/src/components/Ellipse.vue
index f7832f7..fcdce9c 100644
--- a/src/components/Ellipse.vue
+++ b/src/components/Ellipse.vue
@@ -1,16 +1,18 @@
 <template>
-  <ellipse
-    v-bind="$attrs"
-    :cx="position.x"
-    :cy="position.y"
-    :rx="scaledRadius.x"
-    :ry="scaledRadius.y"
-    :fill="fill"
-    :stroke="stroke"
-    :stroke-width="lineWidth * invScale"
-    :stroke-dasharray="dashArray"
-    :transform="`rotate(${-rotation}, ${position.x}, ${position.y})`"
-  />
+  <g v-bind="$attrs">
+    <ellipse
+      :cx="position.x"
+      :cy="position.y"
+      :rx="scaledRadius.x"
+      :ry="scaledRadius.y"
+      :fill="fill"
+      :stroke="stroke"
+      :stroke-width="lineWidth * invScale"
+      :stroke-dasharray="dashArray"
+      :transform="`rotate(${-rotation}, ${position.x}, ${position.y})`"
+    />
+    <slot />
+  </g>
 </template>
 
 <script setup lang="ts">
@@ -21,6 +23,7 @@ import { useGraphContext } from "../composables/useGraphContext.ts";
 import { type Color } from "../types.ts";
 import { useColors } from "../composables/useColors.ts";
 import { usePointerIntersection } from "../composables/usePointerIntersection.ts";
+import { useLocalToWorld } from "../composables/useLocalToWorld.ts";
 import { pointInsideEllipse } from "../utils/geometry.ts";
 
 const props = withDefaults(
@@ -44,7 +47,8 @@ const props = withDefaults(
   },
 );
 
-const { matrix, invScale } = useGraphContext();
+const { invScale } = useGraphContext();
+const matrix = useLocalToWorld(toRef(props, "position"));
 const { parseColor } = useColors();
 
 const stroke = parseColor(toRef(props, "color"), "stroke");
diff --git a/src/components/FunctionPlot.vue b/src/components/FunctionPlot.vue
index a4e3cb3..f30a70e 100644
--- a/src/components/FunctionPlot.vue
+++ b/src/components/FunctionPlot.vue
@@ -12,6 +12,7 @@ import { computed, onMounted, ref, toRef, watch } from "vue";
 
 import { Color } from "../types.ts";
 import { useGraphContext } from "../composables/useGraphContext.ts";
+import { useLocalToWorld } from "../composables/useLocalToWorld.ts";
 import { PossibleVector2, Vector2 } from "../utils/Vector2.ts";
 import { useColors } from "../composables/useColors.ts";
 
@@ -35,7 +36,8 @@ const props = withDefaults(
 
 let animationFrameID: number | null = null;
 
-const { domain, scale, offset, size, invScale } = useGraphContext();
+const { domain, size, invScale } = useGraphContext();
+const matrix = useLocalToWorld();
 const { parseColor } = useColors();
 
 const color = parseColor(toRef(props, "color"), "stroke");
@@ -53,18 +55,17 @@ const visiblePoints = computed(() => {
 });
 
 const path = computed(() => {
-  const points = visiblePoints.value;
+  const points = visiblePoints.value.map((point) =>
+    point.transform(matrix.value),
+  );
 
   if (points.length === 0) {
     return "";
   }
 
-  return `M ${points[0].x * scale.value.x + offset.value.x} ${points[0].y * scale.value.y + offset.value.y} L ${points
+  return `M ${points[0].x} ${points[0].y} L ${points
     .slice(1)
-    .map(
-      (p) =>
-        `${p.x * scale.value.x + offset.value.x} ${p.y * scale.value.y + offset.value.y}`,
-    )
+    .map((p) => `${p.x} ${p.y}`)
     .join("L ")}`;
 });
 
diff --git a/src/components/Graph.vue b/src/components/Graph.vue
index 196f833..ce9433a 100644
--- a/src/components/Graph.vue
+++ b/src/components/Graph.vue
@@ -118,7 +118,7 @@
 <script setup lang="ts">
 import { computed, onMounted, provide, ref } from "vue";
 
-import { graphContext } from "../types.ts";
+import { graphContext, parentToWorld } from "../types.ts";
 import { PossibleVector2, Vector2 } from "../utils/Vector2.ts";
 import { useColors } from "../composables/useColors.ts";
 import { Matrix2D } from "../utils/Matrix2D.ts";
@@ -187,10 +187,9 @@ const size = computed(() => {
 const invScale = computed(() => Math.max(1, props.width / size.value.x));
 
 const matrixWorld = computed(() => {
-  const matrix = new Matrix2D();
-  matrix.translate([offset.value.x, offset.value.y]);
-  matrix.scale([scale.value.x, -scale.value.y]);
-  return matrix;
+  return new Matrix2D()
+    .translate([offset.value.x, offset.value.y])
+    .scale([scale.value.x, -scale.value.y]);
 });
 
 const cursor = computed<Vector2 | null>(() => {
@@ -215,6 +214,7 @@ const context = {
 };
 
 provide(graphContext, context);
+provide(parentToWorld, matrixWorld);
 
 function formatLabelValue(value: number) {
   return value.toFixed(2).replace(/\.?0+$/, "");
diff --git a/src/components/Label.vue b/src/components/Label.vue
index 763a0c5..b2174fd 100644
--- a/src/components/Label.vue
+++ b/src/components/Label.vue
@@ -22,6 +22,8 @@
     >
       {{ text }}
     </text>
+
+    <slot />
   </g>
 </template>
 
@@ -33,6 +35,7 @@ import { type PossibleVector2, Vector2 } from "../utils/Vector2.ts";
 import { useGraphContext } from "../composables/useGraphContext.ts";
 import { useColors } from "../composables/useColors.ts";
 import { usePointerIntersection } from "../composables/usePointerIntersection.ts";
+import { useLocalToWorld } from "../composables/useLocalToWorld.ts";
 import { pointInsideRectangle } from "../utils/geometry.ts";
 
 const props = withDefaults(
@@ -64,7 +67,8 @@ const sizes = {
   large: 12,
 };
 
-const { matrix, invScale } = useGraphContext();
+const { invScale } = useGraphContext();
+const matrix = useLocalToWorld(toRef(props, "position"));
 const { colors, parseColor } = useColors();
 
 const color = parseColor(toRef(props, "color"), "stroke");
diff --git a/src/components/Line.vue b/src/components/Line.vue
index 94a1394..56fc0fd 100644
--- a/src/components/Line.vue
+++ b/src/components/Line.vue
@@ -16,6 +16,8 @@
       :color="color"
       :size="labelSize"
     />
+
+    <slot />
   </g>
 </template>
 
@@ -28,6 +30,7 @@ import Label from "./Label.vue";
 import { useGraphContext } from "../composables/useGraphContext.ts";
 import { useColors } from "../composables/useColors.ts";
 import { usePointerIntersection } from "../composables/usePointerIntersection.ts";
+import { useLocalToWorld } from "../composables/useLocalToWorld.ts";
 import { distanceToLineSegment } from "../utils/geometry.ts";
 
 const props = withDefaults(
@@ -56,8 +59,9 @@ if (props.to === undefined && props.slope === undefined) {
   throw new Error("Line requires either a `to` prop or a `slope` prop");
 }
 
-const { domain, matrix, invScale } = useGraphContext();
+const { domain, invScale } = useGraphContext();
 const { parseColor } = useColors();
+const matrix = useLocalToWorld();
 
 const color = parseColor(toRef(props, "color"), "stroke");
 const active = defineModel("active", { default: false });
diff --git a/src/components/Point.vue b/src/components/Point.vue
index 53201fc..f9f1f2f 100644
--- a/src/components/Point.vue
+++ b/src/components/Point.vue
@@ -17,6 +17,8 @@
       :color="color"
       size="small"
     />
+
+    <slot />
   </g>
 </template>
 
@@ -29,6 +31,7 @@ import Label from "./Label.vue";
 import { useGraphContext } from "../composables/useGraphContext.ts";
 import { useColors } from "../composables/useColors.ts";
 import { usePointerIntersection } from "../composables/usePointerIntersection.ts";
+import { useLocalToWorld } from "../composables/useLocalToWorld.ts";
 import { pointInsideCircle } from "../utils/geometry.ts";
 
 type LabelPosition = "top" | "bottom" | "left" | "right";
@@ -54,13 +57,14 @@ const props = withDefaults(
   },
 );
 
-const { matrix, invScale } = useGraphContext();
+const { invScale } = useGraphContext();
+const matrix = useLocalToWorld(toRef(props, "position"));
 const { parseColor } = useColors();
 const color = parseColor(toRef(props, "color"), "points");
 const labelActive = ref(false);
 const active = defineModel("active", { default: false });
 usePointerIntersection(active, (point) => {
-  const center = Vector2.wrap(props.position);
+  const center = position.value;
   const pointActive = pointInsideCircle(
     center,
     (props.radius + props.lineWidth) / matrix.value.a +
diff --git a/src/components/PolyLine.vue b/src/components/PolyLine.vue
index 24afc06..e6892f3 100644
--- a/src/components/PolyLine.vue
+++ b/src/components/PolyLine.vue
@@ -20,6 +20,7 @@ import { PossibleVector2, Vector2 } from "../utils/Vector2.ts";
 import { useGraphContext } from "../composables/useGraphContext.ts";
 import { useColors } from "../composables/useColors.ts";
 import { usePointerIntersection } from "../composables/usePointerIntersection.ts";
+import { useLocalToWorld } from "../composables/useLocalToWorld.ts";
 import { distanceToLineSegment } from "../utils/geometry.ts";
 
 const props = withDefaults(
@@ -37,7 +38,8 @@ const props = withDefaults(
   },
 );
 
-const { matrix, invScale } = useGraphContext();
+const { invScale } = useGraphContext();
+const matrix = useLocalToWorld();
 const { parseColor } = useColors();
 
 const color = parseColor(toRef(props, "color"), "stroke");
diff --git a/src/components/Polygon.vue b/src/components/Polygon.vue
index 6ae4180..09315ca 100644
--- a/src/components/Polygon.vue
+++ b/src/components/Polygon.vue
@@ -16,6 +16,8 @@
       :radius="angleRadius"
       :dashed="angleDashed"
     />
+
+    <slot />
   </g>
 </template>
 
@@ -28,6 +30,7 @@ import { type PossibleVector2, Vector2 } from "../utils/Vector2.ts";
 import { useGraphContext } from "../composables/useGraphContext.ts";
 import { useColors } from "../composables/useColors.ts";
 import { usePointerIntersection } from "../composables/usePointerIntersection.ts";
+import { useLocalToWorld } from "../composables/useLocalToWorld.ts";
 import { pointInsidePolygon } from "../utils/geometry.ts";
 
 const props = withDefaults(
@@ -52,8 +55,9 @@ if (props.vertices.length < 3) {
   throw new Error("A polygon must have at least 3 vertices");
 }
 
-const { matrix, invScale } = useGraphContext();
+const { invScale } = useGraphContext();
 const { parseColor } = useColors();
+const matrix = useLocalToWorld();
 
 const stroke = parseColor(toRef(props, "color"), "stroke");
 const fill = parseColor(toRef(props, "fill"));
@@ -62,7 +66,7 @@ usePointerIntersection(active, (point) =>
   pointInsidePolygon(vertices.value, point),
 );
 
-const vertices = computed(() => props.vertices.map((v) => Vector2.wrap(v)));
+const vertices = computed(() => props.vertices.map(Vector2.wrap));
 const points = computed(() =>
   vertices.value.map((v) => v.transform(matrix.value)),
 );
diff --git a/src/components/Sector.vue b/src/components/Sector.vue
index a7edd45..92df484 100644
--- a/src/components/Sector.vue
+++ b/src/components/Sector.vue
@@ -1,13 +1,15 @@
 <template>
-  <path
-    v-bind="$attrs"
-    :d="`M ${position.x} ${position.y} L ${line1To.x} ${line1To.y} A ${scaledRadius} ${scaledRadius} 0 ${sweep} 0 ${line2To.x} ${line2To.y} L ${position.x} ${position.y} z`"
-    :stroke="strokeColor"
-    :stroke-width="lineWidth * invScale"
-    stroke-linejoin="bevel"
-    :fill="fillColor"
-    :stroke-dasharray="dashArray"
-  />
+  <g v-bind="$attrs">
+    <path
+      :d="`M ${position.x} ${position.y} L ${line1To.x} ${line1To.y} A ${scaledRadius} ${scaledRadius} 0 ${sweep} 0 ${line2To.x} ${line2To.y} L ${position.x} ${position.y} z`"
+      :stroke="strokeColor"
+      :stroke-width="lineWidth * invScale"
+      stroke-linejoin="bevel"
+      :fill="fillColor"
+      :stroke-dasharray="dashArray"
+    />
+    <slot />
+  </g>
 </template>
 
 <script setup lang="ts">
@@ -19,6 +21,7 @@ import { DEG2RAD } from "../utils/constants.ts";
 import { useGraphContext } from "../composables/useGraphContext.ts";
 import { useColors } from "../composables/useColors.ts";
 import { usePointerIntersection } from "../composables/usePointerIntersection.ts";
+import { useLocalToWorld } from "../composables/useLocalToWorld.ts";
 import { pointInsideSector } from "../utils/geometry.ts";
 
 const props = withDefaults(
@@ -43,7 +46,8 @@ const props = withDefaults(
   },
 );
 
-const { matrix, invScale } = useGraphContext();
+const { invScale } = useGraphContext();
+const matrix = useLocalToWorld(toRef(props, "position"));
 const { color, fill } = toRefs(props);
 const { parseColor } = useColors();
 const active = defineModel("active", { default: false });
diff --git a/src/components/Vector.vue b/src/components/Vector.vue
index c8cad9b..f7e046e 100644
--- a/src/components/Vector.vue
+++ b/src/components/Vector.vue
@@ -45,6 +45,7 @@ import Label from "../components/Label.vue";
 import { useGraphContext } from "../composables/useGraphContext.ts";
 import { useColors } from "../composables/useColors.ts";
 import { usePointerIntersection } from "../composables/usePointerIntersection.ts";
+import { useLocalToWorld } from "../composables/useLocalToWorld.ts";
 import { distanceToLineSegment } from "../utils/geometry.ts";
 
 const props = withDefaults(
@@ -71,7 +72,8 @@ const props = withDefaults(
 
 const id = Math.random().toString(16).slice(2);
 
-const { matrix, invScale } = useGraphContext();
+const { invScale } = useGraphContext();
+const matrix = useLocalToWorld(new Vector2());
 const { colors } = useColors();
 const color = computed(() => props.color ?? colors.value.stroke);
 const active = defineModel("active", { default: false });
diff --git a/src/composables/useLocalToWorld.ts b/src/composables/useLocalToWorld.ts
index fc9ed62..4374d48 100644
--- a/src/composables/useLocalToWorld.ts
+++ b/src/composables/useLocalToWorld.ts
@@ -1,19 +1,23 @@
-import { Vector2 } from "../utils/Vector2.ts";
-import { computed, inject, provide } from "vue";
-import { parentToWorld } from "../types.ts";
-import {Matrix2D} from "../utils/Matrix2D.ts";
+import { PossibleVector2, Vector2 } from "../utils/Vector2.ts";
+import { Ref, computed, inject, provide, unref } from "vue";
+import { parentToWorld as parentToWorldKey } from "../types.ts";
+import { Matrix2D } from "../utils/Matrix2D.ts";
 
-export function useLocalToWorld(localPosition: Vector2) {
-  const parentMatrix = inject(
-      parentToWorld, 
-      computed(() => new Matrix2D()),
+export function useLocalToWorld(
+  localPosition: PossibleVector2 | Ref<PossibleVector2> = new Vector2(),
+) {
+  const parentToWorld = inject(
+    parentToWorldKey,
+    computed(() => new Matrix2D()),
   );
 
-  const transform = new Matrix2D();
-  transform.translate([localPosition.x, localPosition.y]);
-  const matrix = computed(() => parentMatrix.value.multiply(transform));
+  const localToWorld = computed(() => {
+    const position = Vector2.wrap(unref(localPosition));
+    const transform = new Matrix2D().translate([position.x, position.y]);
+    return parentToWorld.value.multiply(transform);
+  });
 
-  provide(parentToWorld, matrix);
+  provide(parentToWorldKey, localToWorld);
 
-  return matrix;
+  return parentToWorld;
 }
diff --git a/src/utils/Matrix2D.ts b/src/utils/Matrix2D.ts
index 1a2908e..25785ce 100644
--- a/src/utils/Matrix2D.ts
+++ b/src/utils/Matrix2D.ts
@@ -148,40 +148,52 @@ export class Matrix2D {
 
   public translate(by: PossibleVector2) {
     const v = Vector2.wrap(by);
-    this._tx += v.x;
-    this._ty += v.y;
-    return this;
+    return new Matrix2D(
+      this._a,
+      this._b,
+      this._c,
+      this._d,
+      this._tx + v.x,
+      this._ty + v.y,
+    );
   }
 
   public scale(by: PossibleVector2) {
     const v = Vector2.wrap(by);
-    this._a *= v.x;
-    this._b *= v.x;
-    this._c *= v.y;
-    this._d *= v.y;
-    return this;
+    return new Matrix2D(
+      this._a * v.x,
+      this._b * v.x,
+      this._c * v.y,
+      this._d * v.y,
+      this._tx,
+      this._ty,
+    );
   }
 
   public rotate(angle: number) {
     const cos = Math.cos(angle);
     const sin = Math.sin(angle);
-    const { _a, _b, _c, _d } = this;
-    this._a = _a * cos - _b * sin;
-    this._b = _a * sin + _b * cos;
-    this._c = _c * cos - _d * sin;
-    this._d = _c * sin + _d * cos;
-    return this;
+    return new Matrix2D(
+      this._a * cos - this._b * sin,
+      this._a * sin + this._b * cos,
+      this._c * cos - this._d * sin,
+      this._c * sin + this._d * cos,
+      this._tx,
+      this._ty,
+    );
   }
 
   public multiply(other: Matrix2D) {
     const { _a, _b, _c, _d, _tx, _ty } = this;
-    this._a = _a * other._a + _b * other._c;
-    this._b = _a * other._b + _b * other._d;
-    this._c = _c * other._a + _d * other._c;
-    this._d = _c * other._b + _d * other._d;
-    this._tx = _tx * other._a + _ty * other._c + other._tx;
-    this._ty = _tx * other._b + _ty * other._d + other._ty;
-    return this;
+
+    return new Matrix2D(
+      _a * other._a + _c * other._b,
+      _b * other._a + _d * other._b,
+      _a * other._c + _c * other._d,
+      _b * other._c + _d * other._d,
+      _a * other._tx + _c * other._ty + _tx,
+      _b * other._tx + _d * other._ty + _ty,
+    );
   }
 
   public equals(other: Matrix2D, threshold: number = 0.000001) {
diff --git a/tests/math/Matrix2D.test.ts b/tests/math/Matrix2D.test.ts
index 8f7d743..be5df99 100644
--- a/tests/math/Matrix2D.test.ts
+++ b/tests/math/Matrix2D.test.ts
@@ -119,21 +119,18 @@ describe("constructor", () => {
 });
 
 test("translate", () => {
-  const m = new Matrix2D();
-  m.translate([5, 2]);
+  const m = new Matrix2D().translate([5, 2]);
   expect(m.equals(new Matrix2D([1, 0, 0, 1, 5, 2]))).toBe(true);
 });
 
 describe("scale", () => {
   test("single value scales both axes", () => {
-    const m = new Matrix2D(1, 2, 3, 4, 5, 6);
-    m.scale(2);
+    const m = new Matrix2D(1, 2, 3, 4, 5, 6).scale(2);
     expect(m.equals(new Matrix2D(2, 4, 6, 8, 5, 6))).toBe(true);
   });
 
   test("scale axes individually", () => {
-    const m = new Matrix2D(1, 2, 3, 4, 5, 6);
-    m.scale([2, 3]);
+    const m = new Matrix2D(1, 2, 3, 4, 5, 6).scale([2, 3]);
     expect(m.equals(new Matrix2D(2, 4, 9, 12, 5, 6))).toBe(true);
   });
 });
@@ -142,9 +139,7 @@ describe("rotate", () => {
   test.each([[Math.PI / 2, [1, 0, 0, 1, 0, 0], [0, 1, -1, 0, 0, 0]]])(
     "angle = %p, input = %p -> %p",
     (angle: number, matrix: PossibleMatrix2D, expected: number) => {
-      const m = new Matrix2D(matrix);
-      m.rotate(angle);
-      console.log(m);
+      const m = new Matrix2D(matrix).rotate(angle);
       expect(m.equals(new Matrix2D(expected))).toBe(true);
     },
   );