From 7bda87a63d9307cdc2c287b59c6f80f529d2464e Mon Sep 17 00:00:00 2001
From: Kai Sassnowski <me@kai-sassnowski.com>
Date: Thu, 22 Feb 2024 10:10:41 +0100
Subject: [PATCH 1/2] refactor: use matrix transform to calculate positions

---
 bun.lockb                          | Bin 33182 -> 34730 bytes
 bunfig.toml                        |   2 +
 package.json                       |   3 +-
 src/components/Angle.vue           |  38 +++---
 src/components/Arc.vue             |  21 ++-
 src/components/Circle.vue          |  10 +-
 src/components/Ellipse.vue         |  11 +-
 src/components/Graph.vue           |   9 ++
 src/components/Label.vue           |  32 +++--
 src/components/Line.vue            |  38 ++----
 src/components/Point.vue           |  14 +-
 src/components/PolyLine.vue        |   9 +-
 src/components/Polygon.vue         |   6 +-
 src/components/Sector.vue          |   9 +-
 src/components/Vector.vue          |  18 +--
 src/composables/useLocalToWorld.ts |  19 +++
 src/index.ts                       |   1 +
 src/types.ts                       |   4 +
 src/utils/Matrix2D.ts              | 197 +++++++++++++++++++++++++++++
 src/utils/Vector2.ts               | 123 +++++++++++++++---
 tests/math/Matrix2D.test.ts        | 172 +++++++++++++++++++++++++
 tests/math/Vector2.test.ts         |  30 +++++
 tests/setup.ts                     |  84 ++++++++++++
 23 files changed, 715 insertions(+), 135 deletions(-)
 create mode 100644 bunfig.toml
 create mode 100644 src/composables/useLocalToWorld.ts
 create mode 100644 src/utils/Matrix2D.ts
 create mode 100644 tests/math/Matrix2D.test.ts
 create mode 100644 tests/setup.ts

diff --git a/bun.lockb b/bun.lockb
index 4396b7fb500e455e64c6df9e2aeafd5fe8f40110..c405dbe6769dc9603789744b03e3fb6f13d2c478 100755
GIT binary patch
delta 6559
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

delta 5583
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
Qbnfpz;=LM9L+{=EA7cg#&Hw-a

diff --git a/bunfig.toml b/bunfig.toml
new file mode 100644
index 0000000..083d96e
--- /dev/null
+++ b/bunfig.toml
@@ -0,0 +1,2 @@
+[test]
+preload = "./tests/setup.ts"
\ No newline at end of file
diff --git a/package.json b/package.json
index 29c1b1f..20fc19b 100644
--- a/package.json
+++ b/package.json
@@ -23,12 +23,13 @@
     "build": "vite build && vue-tsc --emitDeclarationOnly"
   },
   "devDependencies": {
+    "@happy-dom/global-registrator": "^13.4.1",
     "@types/node": "^20.11.5",
     "@vitejs/plugin-vue": "^4.5.2",
-    "vue": "^3.3.11",
     "prettier": "^3.2.4",
     "typescript": "^5.2.2",
     "vite": "^5.0.8",
+    "vue": "^3.3.11",
     "vue-tsc": "^1.8.25"
   }
 }
diff --git a/src/components/Angle.vue b/src/components/Angle.vue
index ff9828e..d5f5921 100644
--- a/src/components/Angle.vue
+++ b/src/components/Angle.vue
@@ -1,5 +1,5 @@
 <template>
-  <g>
+  <g v-bind="$attrs">
     <path
       v-if="fill"
       :d="`M ${scaledB.x} ${scaledB.y} L ${start.x} ${start.y} A ${scaledRadius} ${scaledRadius} 0 ${sweep} 0 ${end.x} ${end.y}`"
@@ -32,8 +32,9 @@ import { PossibleVector2, Vector2 } from "../utils/Vector2.ts";
 import { useGraphContext } from "../composables/useGraphContext.ts";
 import { Color } from "../types.ts";
 import { useColors } from "../composables/useColors.ts";
+import { usePointerIntersection } from "../composables/usePointerIntersection.ts";
+import { pointInsideSector } from "../utils/geometry.ts";
 import Label from "./Label.vue";
-import { TAU } from "../utils/constants.ts";
 
 const props = withDefaults(
   defineProps<{
@@ -57,11 +58,15 @@ const props = withDefaults(
   },
 );
 
-const { scale, offset, invScale } = useGraphContext();
+const { matrix, invScale } = useGraphContext();
 const { parseColor } = useColors();
 
 const stroke = parseColor(toRef(props, "color"), "stroke");
 const fill = parseColor(toRef(props, "fill"));
+const active = defineModel("active", { default: false });
+usePointerIntersection(active, (point) =>
+  pointInsideSector(a.value, b.value, c.value, props.radius, point),
+);
 
 const a = computed(() => Vector2.wrap(props.a));
 const b = computed(() => Vector2.wrap(props.b));
@@ -73,25 +78,15 @@ const sweep = computed(() => {
     c.value.x * (a.value.y - b.value.y);
   return orientation > 0 ? 1 : 0;
 });
-const scaledB = computed(() =>
-  b.value.mul(new Vector2(1, -1)).mul(scale.value).add(offset.value),
-);
-const scaledRadius = computed(() => props.radius * scale.value.x);
+const scaledB = computed(() => b.value.transform(matrix.value));
+const scaledRadius = computed(() => props.radius * matrix.value.a);
 const start = computed(() => {
-  const direction = a.value.sub(b.value).normalized().mul(new Vector2(1, -1));
-  return b.value
-    .mul(new Vector2(1, -1))
-    .add(direction.scale(props.radius))
-    .mul(scale.value)
-    .add(offset.value);
+  const direction = a.value.sub(b.value).normalized();
+  return b.value.add(direction.scale(props.radius)).transform(matrix.value);
 });
 const end = computed(() => {
-  const direction = c.value.sub(b.value).normalized().mul(new Vector2(1, -1));
-  return b.value
-    .mul(new Vector2(1, -1))
-    .add(direction.scale(props.radius))
-    .mul(scale.value)
-    .add(offset.value);
+  const direction = c.value.sub(b.value).normalized();
+  return b.value.add(direction.scale(props.radius)).transform(matrix.value);
 });
 const dashArray = computed(() =>
   props.dashed ? [6 * invScale.value, 4 * invScale.value].join(",") : "0,0",
@@ -99,13 +94,10 @@ const dashArray = computed(() =>
 const labelPosition = computed(() => {
   const bToA = a.value.sub(b.value);
   const bToC = c.value.sub(b.value);
-  const dot = bToA.dot(bToC);
-  const det = bToA.x * bToC.y - bToA.y * bToC.x;
-  const angle = (Math.atan2(det, dot) + TAU) % TAU;
   return bToA
     .normalized()
     .scale(props.radius)
-    .rotate(angle / 2)
+    .rotate(bToA.clockwiseAngleTo(bToC) / 2)
     .add(b.value);
 });
 </script>
diff --git a/src/components/Arc.vue b/src/components/Arc.vue
index bbbeb13..887f0bb 100644
--- a/src/components/Arc.vue
+++ b/src/components/Arc.vue
@@ -1,5 +1,6 @@
 <template>
   <Angle
+    v-bind="$attrs"
     :a="a"
     :b="position"
     :c="c"
@@ -15,10 +16,12 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
-import { type PossibleVector2, Vector2 } from "../utils/Vector2.ts";
 import { DEG2RAD } from "../utils/constants.ts";
 import Angle from "../components/Angle.vue";
 import { useColors } from "../composables/useColors.ts";
+import { type PossibleVector2, Vector2 } from "../utils/Vector2.ts";
+import { usePointerIntersection } from "../composables/usePointerIntersection.ts";
+import { distanceToArc } from "../utils/geometry.ts";
 
 const props = withDefaults(
   defineProps<{
@@ -32,6 +35,7 @@ const props = withDefaults(
     radians?: boolean;
     label?: string;
     labelSize?: "small" | "normal" | "large";
+    highlightThreshold?: number;
   }>(),
   {
     from: 0,
@@ -41,11 +45,26 @@ const props = withDefaults(
     lineWidth: 1.25,
     radians: false,
     labelSize: "small",
+    highlightThreshold: 0.25,
   },
 );
 
 const { colors } = useColors();
 const color = computed(() => props.color ?? colors.value.stroke);
+const active = defineModel("active", { default: false });
+usePointerIntersection(active, (point) => {
+  const fromAngle = props.radians ? props.from : props.from * DEG2RAD;
+  const toAngle = props.radians ? props.to : props.to * DEG2RAD;
+  return (
+    distanceToArc(
+      Vector2.wrap(props.position),
+      fromAngle,
+      toAngle,
+      props.radius,
+      point,
+    ) <= props.highlightThreshold
+  );
+});
 
 const position = computed(() => Vector2.wrap(props.position));
 const a = computed(() => {
diff --git a/src/components/Circle.vue b/src/components/Circle.vue
index 6d57cf8..3770972 100644
--- a/src/components/Circle.vue
+++ b/src/components/Circle.vue
@@ -1,5 +1,6 @@
 <template>
   <circle
+    v-bind="$attrs"
     :cx="position.x"
     :cy="position.y"
     :r="scaledRadius"
@@ -34,19 +35,16 @@ const props = withDefaults(
   },
 );
 
-const { scale, offset, invScale } = useGraphContext();
+const { matrix, invScale } = useGraphContext();
 const { parseColor } = useColors();
 
 const stroke = parseColor(toRef(props, "color"), "stroke");
 const fill = parseColor(toRef(props, "fill"));
 
 const position = computed(() =>
-  new Vector2(props.position)
-    .mul(new Vector2(1, -1))
-    .mul(scale.value)
-    .add(offset.value),
+  new Vector2(props.position).transform(matrix.value),
 );
-const scaledRadius = computed(() => props.radius * scale.value.x);
+const scaledRadius = computed(() => props.radius * matrix.value.a);
 const dashArray = computed(() =>
   props.dashed ? [6 * invScale.value, 4 * invScale.value].join(",") : "0,0",
 );
diff --git a/src/components/Ellipse.vue b/src/components/Ellipse.vue
index cb46e1e..39fd272 100644
--- a/src/components/Ellipse.vue
+++ b/src/components/Ellipse.vue
@@ -41,19 +41,18 @@ const props = withDefaults(
   },
 );
 
-const { offset, scale, invScale } = useGraphContext();
+const { matrix, invScale } = useGraphContext();
 const { parseColor } = useColors();
 
 const stroke = parseColor(toRef(props, "color"), "stroke");
 const fill = parseColor(toRef(props, "fill"));
 
 const position = computed(() =>
-  new Vector2(props.position)
-    .mul(new Vector2(1, -1))
-    .mul(scale.value)
-    .add(offset.value),
+  new Vector2(props.position).transform(matrix.value),
+);
+const scaledRadius = computed(() =>
+  new Vector2(props.radius).mul([matrix.value.a, Math.abs(matrix.value.d)]),
 );
-const scaledRadius = computed(() => new Vector2(props.radius).mul(scale.value));
 const dashArray = computed(() =>
   props.dashed ? [6 * invScale.value, 4 * invScale.value].join(",") : "0,0",
 );
diff --git a/src/components/Graph.vue b/src/components/Graph.vue
index a6ed335..ab20068 100644
--- a/src/components/Graph.vue
+++ b/src/components/Graph.vue
@@ -120,6 +120,7 @@ import { computed, onMounted, provide, ref } from "vue";
 import { graphContext } from "../types.ts";
 import { PossibleVector2, Vector2 } from "../utils/Vector2.ts";
 import { useColors } from "../composables/useColors.ts";
+import { Matrix2D } from "../utils/Matrix2D.ts";
 
 const props = withDefaults(
   defineProps<{
@@ -181,6 +182,13 @@ 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;
+});
+
 const context = {
   size,
   scale,
@@ -188,6 +196,7 @@ const context = {
   offset,
   domain,
   invScale,
+  matrix: matrixWorld,
 };
 
 provide(graphContext, context);
diff --git a/src/components/Label.vue b/src/components/Label.vue
index 6f3b920..7286291 100644
--- a/src/components/Label.vue
+++ b/src/components/Label.vue
@@ -2,10 +2,10 @@
   <g :transform="`rotate(${-rotation}, ${position.x}, ${position.y})`">
     <rect
       v-if="border"
-      :x="position.x - boxWidth / 2"
-      :y="position.y - boxHeight / 2 - 0.5"
-      :width="boxWidth"
-      :height="boxHeight"
+      :x="position.x - scaledBoxWidth / 2"
+      :y="position.y - scaledBoxHeight / 2 - 0.5"
+      :width="scaledBoxWidth"
+      :height="scaledBoxHeight"
       :fill="colors.labelBackground"
       :stroke="color"
       stroke-width="1.5"
@@ -59,26 +59,24 @@ const sizes = {
   large: 12,
 };
 
-const { scale, offset, invScale } = useGraphContext();
+const { matrix, invScale } = useGraphContext();
 const { colors, parseColor } = useColors();
 
 const color = parseColor(toRef(props, "color"), "stroke");
 
 const position = computed(() =>
-  new Vector2(props.position)
-    .mul(new Vector2(1, -1))
-    .mul(scale.value)
-    .add(offset.value),
+  Vector2.wrap(props.position).transform(matrix.value),
 );
-const boxWidth = computed(
-  () =>
-    Math.max(
-      (props.text.length + 1) * sizes[props.size],
-      sizes[props.size] * 2.5,
-    ) * invScale.value,
+const boxWidth = computed(() =>
+  Math.max(
+    (props.text.length + 1) * sizes[props.size],
+    sizes[props.size] * 2.5,
+  ),
 );
-const boxHeight = computed(
-  () => Math.min(sizes[props.size] * 3, boxWidth.value) * invScale.value,
+const scaledBoxWidth = computed(() => boxWidth.value * invScale.value);
+const boxHeight = computed(() =>
+  Math.min(sizes[props.size] * 3, boxWidth.value),
 );
+const scaledBoxHeight = computed(() => boxHeight.value * invScale.value);
 const fontSize = computed(() => fontSizes[props.size] * invScale.value);
 </script>
diff --git a/src/components/Line.vue b/src/components/Line.vue
index 46ba772..3e7f925 100644
--- a/src/components/Line.vue
+++ b/src/components/Line.vue
@@ -50,7 +50,7 @@ if (props.to === undefined && props.slope === undefined) {
   throw new Error("Line requires either a `to` prop or a `slope` prop");
 }
 
-const { domain, scale, offset, invScale } = useGraphContext();
+const { domain, matrix, invScale } = useGraphContext();
 const { parseColor } = useColors();
 
 const color = parseColor(toRef(props, "color"), "stroke");
@@ -61,52 +61,32 @@ function clamp(x: number, min: number, max: number) {
 
 const from = computed(() => {
   if (props.from) {
-    return new Vector2(props.from)
-      .mul(new Vector2(1, -1))
-      .mul(scale.value)
-      .add(offset.value);
+    return new Vector2(props.from).transform(matrix.value);
   }
 
   if (props.to) {
-    return new Vector2(0, 0)
-      .mul(new Vector2(1, -1))
-      .mul(scale.value)
-      .add(offset.value);
+    return new Vector2(0, 0).transform(matrix.value);
   }
 
   let x = (domain.value.y.x - props.yIntercept) / props.slope!;
   x = clamp(x, domain.value.x.x, domain.value.x.y);
   const y = props.slope! * x + props.yIntercept;
-  return new Vector2(x, y)
-    .mul(new Vector2(1, -1))
-    .mul(scale.value)
-    .add(offset.value);
+  return new Vector2(x, y).transform(matrix.value);
 });
 const to = computed(() => {
   if (props.to) {
-    return new Vector2(props.to)
-      .mul(new Vector2(1, -1))
-      .mul(scale.value)
-      .add(offset.value);
+    return new Vector2(props.to).transform(matrix.value);
   }
 
   let x = (domain.value.y.y - props.yIntercept) / props.slope!;
   x = clamp(x, domain.value.x.x, domain.value.x.y);
   const y = props.slope! * x + props.yIntercept;
-  return new Vector2(x, y)
-    .mul(new Vector2(1, -1))
-    .mul(scale.value)
-    .add(offset.value);
+  return new Vector2(x, y).transform(matrix.value);
 });
 const labelPosition = computed(() => {
-  const localSpaceFrom = from.value
-    .sub(offset.value)
-    .div(scale.value)
-    .mul(new Vector2(1, -1));
-  const localSpaceTo = to.value
-    .sub(offset.value)
-    .div(scale.value)
-    .mul(new Vector2(1, -1));
+  const worldToLocal = matrix.value.inverse;
+  const localSpaceFrom = from.value.transform(worldToLocal);
+  const localSpaceTo = to.value.transform(worldToLocal);
   const diff = localSpaceTo.sub(localSpaceFrom);
   return localSpaceFrom.add(diff.normalized().scale(diff.length() / 2));
 });
diff --git a/src/components/Point.vue b/src/components/Point.vue
index b655812..f5eff1e 100644
--- a/src/components/Point.vue
+++ b/src/components/Point.vue
@@ -47,35 +47,33 @@ const props = withDefaults(
   },
 );
 
-const { scale, offset, invScale } = useGraphContext();
+const { matrix, invScale } = useGraphContext();
 const { parseColor } = useColors();
 const color = parseColor(toRef(props, "color"), "points");
 
 const padding = 25;
 const position = computed(() => new Vector2(props.position));
-const scaledPosition = computed(() =>
-  position.value.mul(new Vector2(1, -1)).mul(scale.value).add(offset.value),
-);
+const scaledPosition = computed(() => position.value.transform(matrix.value));
 const labelPosition = computed(() => {
   switch (props.labelPosition) {
     case "top":
       return new Vector2(
         position.value.x,
-        position.value.y + padding / scale.value.y,
+        position.value.y + padding / matrix.value.d,
       );
     case "bottom":
       return new Vector2(
         position.value.x,
-        position.value.y - padding / scale.value.y,
+        position.value.y - padding / matrix.value.d,
       );
     case "left":
       return new Vector2(
-        position.value.x - padding / scale.value.x,
+        position.value.x - padding / matrix.value.a,
         position.value.y,
       );
     case "right":
       return new Vector2(
-        position.value.x + padding / scale.value.x,
+        position.value.x + padding / matrix.value.a,
         position.value.y,
       );
   }
diff --git a/src/components/PolyLine.vue b/src/components/PolyLine.vue
index bc436fb..a4535a3 100644
--- a/src/components/PolyLine.vue
+++ b/src/components/PolyLine.vue
@@ -32,18 +32,13 @@ const props = withDefaults(
   },
 );
 
-const { scale, offset, invScale } = useGraphContext();
+const { matrix, invScale } = useGraphContext();
 const { parseColor } = useColors();
 
 const color = parseColor(toRef(props, "color"), "stroke");
 
 const parsedPoints = computed(() =>
-  props.points.map((point) =>
-    Vector2.wrap(point)
-      .mul(new Vector2(1, -1))
-      .mul(scale.value)
-      .add(offset.value),
-  ),
+  props.points.map((point) => Vector2.wrap(point).transform(matrix.value)),
 );
 const dashArray = computed(() =>
   props.dashed ? [6 * invScale.value, 4 * invScale.value].join(",") : "0,0",
diff --git a/src/components/Polygon.vue b/src/components/Polygon.vue
index 63e1182..43645d7 100644
--- a/src/components/Polygon.vue
+++ b/src/components/Polygon.vue
@@ -48,7 +48,7 @@ if (props.vertices.length < 3) {
   throw new Error("A polygon must have at least 3 vertices");
 }
 
-const { scale, offset, invScale } = useGraphContext();
+const { matrix, invScale } = useGraphContext();
 const { parseColor } = useColors();
 
 const stroke = parseColor(toRef(props, "color"), "stroke");
@@ -56,9 +56,7 @@ const fill = parseColor(toRef(props, "fill"));
 
 const vertices = computed(() => props.vertices.map((v) => Vector2.wrap(v)));
 const points = computed(() =>
-  vertices.value.map((v) =>
-    v.mul(new Vector2(1, -1)).mul(scale.value).add(offset.value),
-  ),
+  vertices.value.map((v) => v.transform(matrix.value)),
 );
 const angles = computed(() => {
   const result = [];
diff --git a/src/components/Sector.vue b/src/components/Sector.vue
index bb9eabc..441c402 100644
--- a/src/components/Sector.vue
+++ b/src/components/Sector.vue
@@ -40,19 +40,16 @@ const props = withDefaults(
   },
 );
 
-const { scale, offset, invScale } = useGraphContext();
+const { matrix, invScale } = useGraphContext();
 const { color, fill } = toRefs(props);
 const { parseColor } = useColors();
 
 const strokeColor = parseColor(color, "stroke");
 const fillColor = parseColor(fill);
 const position = computed(() =>
-  Vector2.wrap(props.position)
-    .mul(new Vector2(1, -1))
-    .mul(scale.value)
-    .add(offset.value),
+  Vector2.wrap(props.position).transform(matrix.value),
 );
-const scaledRadius = computed(() => props.radius * scale.value.x);
+const scaledRadius = computed(() => props.radius * matrix.value.a);
 const from = computed(() =>
   props.radians ? props.from : props.from * DEG2RAD,
 );
diff --git a/src/components/Vector.vue b/src/components/Vector.vue
index ad59633..72da224 100644
--- a/src/components/Vector.vue
+++ b/src/components/Vector.vue
@@ -33,10 +33,12 @@
     :color="color"
     :size="labelSize"
   />
+
+  <slot />
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed} from "vue";
 
 import { type PossibleVector2, Vector2 } from "../utils/Vector2.ts";
 import Label from "../components/Label.vue";
@@ -65,27 +67,21 @@ const props = withDefaults(
 
 const id = Math.random().toString(16).slice(2);
 
-const { scale, offset, invScale } = useGraphContext();
+const { matrix, invScale } = useGraphContext();
 const { colors } = useColors();
 const color = computed(() => props.color ?? colors.value.stroke);
 
 const pixelVector = computed(() =>
-  Vector2.wrap(props.to).sub(props.from).mul(scale.value),
-);
-const from = computed(() =>
-  new Vector2(props.from)
-    .mul(new Vector2(1, -1))
-    .mul(scale.value)
-    .add(offset.value),
+  Vector2.wrap(props.to).transform(matrix.value).sub(from.value),
 );
+const from = computed(() => Vector2.wrap(props.from).transform(matrix.value));
 const to = computed(() => {
   const angle = pixelVector.value.angle;
   const magnitude = pixelVector.value.length();
   const newMagnitude = magnitude - arrowSize.value;
-
   return new Vector2(
     from.value.x + newMagnitude * Math.cos(angle),
-    from.value.y - newMagnitude * Math.sin(angle),
+    from.value.y + newMagnitude * Math.sin(angle),
   );
 });
 const labelPosition = computed(() => {
diff --git a/src/composables/useLocalToWorld.ts b/src/composables/useLocalToWorld.ts
new file mode 100644
index 0000000..fc9ed62
--- /dev/null
+++ b/src/composables/useLocalToWorld.ts
@@ -0,0 +1,19 @@
+import { Vector2 } from "../utils/Vector2.ts";
+import { computed, inject, provide } from "vue";
+import { parentToWorld } from "../types.ts";
+import {Matrix2D} from "../utils/Matrix2D.ts";
+
+export function useLocalToWorld(localPosition: Vector2) {
+  const parentMatrix = inject(
+      parentToWorld, 
+      computed(() => new Matrix2D()),
+  );
+
+  const transform = new Matrix2D();
+  transform.translate([localPosition.x, localPosition.y]);
+  const matrix = computed(() => parentMatrix.value.multiply(transform));
+
+  provide(parentToWorld, matrix);
+
+  return matrix;
+}
diff --git a/src/index.ts b/src/index.ts
index 1d0bd8b..bccc830 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -12,5 +12,6 @@ export { default as PolyLine } from "./components/PolyLine.vue";
 export { default as Sector } from "./components/Sector.vue";
 export { default as Vector } from "./components/Vector.vue";
 export { Vector2 } from "./utils/Vector2";
+export { Matrix2D } from "./utils/Matrix2D";
 export { useColors } from "./composables/useColors";
 export { configureGraphs } from "./utils/configureGraphs";
diff --git a/src/types.ts b/src/types.ts
index 4459d42..be3d9b9 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,5 +1,6 @@
 import type { ComputedRef, InjectionKey } from "vue";
 import { Vector2 } from "./utils/Vector2.ts";
+import {Matrix2D} from "./utils/Matrix2D.ts";
 
 export type Color = string | { light: string; dark: string };
 
@@ -10,4 +11,7 @@ export const graphContext = Symbol() as InjectionKey<{
   origin: ComputedRef<Vector2>;
   offset: ComputedRef<Vector2>;
   domain: ComputedRef<{ x: Vector2; y: Vector2 }>;
+  matrix: ComputedRef<Matrix2D>;
 }>;
+
+export const parentToWorld = Symbol() as InjectionKey<ComputedRef<Matrix2D>>;
diff --git a/src/utils/Matrix2D.ts b/src/utils/Matrix2D.ts
new file mode 100644
index 0000000..1a2908e
--- /dev/null
+++ b/src/utils/Matrix2D.ts
@@ -0,0 +1,197 @@
+import { PossibleVector2, Vector2 } from "./Vector2.ts";
+
+export type PossibleMatrix2D =
+  | number
+  | Matrix2D
+  | [number, number, number, number, number, number]
+  | { a: number; b: number; c: number; d: number; tx: number; ty: number }
+  | DOMMatrix;
+
+/**
+ * An optimized 2x3 matrix for 2D transformations.
+ */
+export class Matrix2D {
+  private _a: number = 1;
+  private _b: number = 0;
+  private _c: number = 0;
+  private _d: number = 1;
+  private _tx: number = 0;
+  private _ty: number = 0;
+
+  public static get identity() {
+    return new Matrix2D();
+  }
+
+  public static get zero() {
+    return new Matrix2D(0, 0, 0, 0, 0, 0);
+  }
+
+  public get isIdentity() {
+    return (
+      this._a === 1 &&
+      this._b === 0 &&
+      this._c === 0 &&
+      this._d === 1 &&
+      this._tx === 0 &&
+      this._ty === 0
+    );
+  }
+
+  public get a() {
+    return this._a;
+  }
+
+  public get b() {
+    return this._b;
+  }
+
+  public get c() {
+    return this._c;
+  }
+
+  public get d() {
+    return this._d;
+  }
+
+  public get tx() {
+    return this._tx;
+  }
+
+  public get ty() {
+    return this._ty;
+  }
+
+  public get inverse(): Matrix2D {
+    const { _a, _b, _c, _d, _tx, _ty } = this;
+    const det = this.determinant;
+    if (det === 0) {
+      return new Matrix2D();
+    }
+    return new Matrix2D(
+      _d / det,
+      -_b / det,
+      -_c / det,
+      _a / det,
+      (_c * _ty - _d * _tx) / det,
+      (_b * _tx - _a * _ty) / det,
+    );
+  }
+
+  public get determinant(): number {
+    return this._a * this._d - this._b * this._c;
+  }
+
+  public constructor();
+  public constructor(
+    a: number,
+    b: number,
+    c: number,
+    d: number,
+    tx: number,
+    ty: number,
+  );
+  public constructor(value?: PossibleMatrix2D);
+  public constructor(a?: any, b?: any, c?: any, d?: any, tx?: any, ty?: any) {
+    if (a === undefined) {
+      return;
+    }
+
+    if (Array.isArray(a)) {
+      this._a = a[0];
+      this._b = a[1];
+      this._c = a[2];
+      this._d = a[3];
+      this._tx = a[4];
+      this._ty = a[5];
+      return;
+    }
+
+    if (typeof a === "number") {
+      if (typeof b === "number") {
+        this._a = a;
+        this._b = b;
+        this._c = c;
+        this._d = d;
+        this._tx = tx;
+        this._ty = ty;
+      } else {
+        this._a = a;
+        this._b = a;
+        this._c = a;
+        this._d = a;
+        this._tx = a;
+        this._ty = a;
+      }
+      return;
+    }
+
+    if (a instanceof DOMMatrix) {
+      this._a = a.a;
+      this._b = a.b;
+      this._c = a.c;
+      this._d = a.d;
+      this._tx = a.e;
+      this._ty = a.f;
+      return;
+    }
+
+    if (typeof a === "object") {
+      this._a = a.a;
+      this._b = a.b;
+      this._c = a.c;
+      this._d = a.d;
+      this._tx = a.tx;
+      this._ty = a.ty;
+      return;
+    }
+  }
+
+  public translate(by: PossibleVector2) {
+    const v = Vector2.wrap(by);
+    this._tx += v.x;
+    this._ty += v.y;
+    return this;
+  }
+
+  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;
+  }
+
+  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;
+  }
+
+  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;
+  }
+
+  public equals(other: Matrix2D, threshold: number = 0.000001) {
+    return (
+      Math.abs(this._a - other._a) <= threshold + Number.EPSILON &&
+      Math.abs(this._b - other._b) <= threshold + Number.EPSILON &&
+      Math.abs(this._c - other._c) <= threshold + Number.EPSILON &&
+      Math.abs(this._d - other._d) <= threshold + Number.EPSILON &&
+      Math.abs(this._tx - other._tx) <= threshold + Number.EPSILON &&
+      Math.abs(this._ty - other._ty) <= threshold + Number.EPSILON
+    );
+  }
+}
diff --git a/src/utils/Vector2.ts b/src/utils/Vector2.ts
index bf29142..7a33733 100644
--- a/src/utils/Vector2.ts
+++ b/src/utils/Vector2.ts
@@ -1,7 +1,11 @@
+import { Matrix2D } from "./Matrix2D";
+import { TAU } from "./constants";
+
 export type PossibleVector2 =
   | number
   | Vector2
   | [number, number]
+  | { width: number; height: number }
   | { x: number; y: number };
 
 const RAD2DEG = 180 / Math.PI;
@@ -53,6 +57,28 @@ export class Vector2 {
     return new Vector2(r * Math.cos(angle), r * Math.sin(angle));
   }
 
+  /**
+   * An alias for the x component of the vector.
+   */
+  public get width() {
+    return this.x;
+  }
+
+  public set width(value: number) {
+    this.x = value;
+  }
+
+  /**
+   * An alias for the y component of the vector.
+   */
+  public get height() {
+    return this.y;
+  }
+
+  public set height(value: number) {
+    this.y = value;
+  }
+
   /**
    * Returns the angle of the vector with the x-axis in radians.
    */
@@ -85,22 +111,29 @@ export class Vector2 {
       if (typeof y === "number") {
         this.y = y;
       }
-    } else if (Array.isArray(x)) {
+      return;
+    }
+
+    if (Array.isArray(x)) {
       this.x = x[0];
       this.y = x[1];
-    } else if (typeof x === "object") {
-      this.x = x.x;
-      this.y = x.y;
-    } else {
-      this.x = 0;
-      this.y = 0;
+      return;
     }
+
+    if (typeof x === "object") {
+      this.x = x.x ?? x.width;
+      this.y = x.y ?? x.height;
+      return;
+    }
+
+    this.x = 0;
+    this.y = 0;
   }
 
   /**
    * Returns the sum of this vector and the other.
    *
-   * @param vector The other vector.
+   * @param vector - The other vector.
    */
   public add(vector: PossibleVector2) {
     const other = Vector2.wrap(vector);
@@ -110,7 +143,7 @@ export class Vector2 {
   /**
    * Returns the difference between this vector and the other.
    *
-   * @param vector The other vector.
+   * @param vector - The other vector.
    */
   public sub(vector: PossibleVector2) {
     const other = Vector2.wrap(vector);
@@ -121,7 +154,7 @@ export class Vector2 {
    * Multiplies each component of the vector by the corresponding component of
    * the other vector.
    *
-   * @param vector The other vector.
+   * @param vector - The other vector.
    */
   public mul(vector: PossibleVector2) {
     const other = Vector2.wrap(vector);
@@ -132,7 +165,7 @@ export class Vector2 {
    * Divides each component of the vector by the corresponding component of the
    * other vector.
    *
-   * @param vector The other vector.
+   * @param vector - The other vector.
    */
   public div(vector: PossibleVector2) {
     const other = new Vector2(vector);
@@ -142,7 +175,7 @@ export class Vector2 {
   /**
    * Returns the dot product of this vector and another.
    *
-   * @param vector The other vector.
+   * @param vector - The other vector.
    */
   public dot(vector: PossibleVector2) {
     const other = new Vector2(vector);
@@ -165,6 +198,10 @@ export class Vector2 {
     return Math.sqrt(this.x * this.x + this.y * this.y);
   }
 
+  public squaredLength() {
+    return this.x * this.x + this.y * this.y;
+  }
+
   /**
    * Returns a vector with the same direction but a magnitude of 1.
    */
@@ -189,7 +226,7 @@ export class Vector2 {
   /**
    * Rotates the vector by the given angle around the origin.
    *
-   * @param angle The angle to rotate by in radians.
+   * @param angle - The angle to rotate by in radians.
    */
   public rotate(angle: number) {
     const cos = Math.cos(angle);
@@ -205,7 +242,7 @@ export class Vector2 {
    *
    * This method mutates the vector.
    *
-   * @param angle The angle between the vector and the x-axis in radians.
+   * @param angle - The angle between the vector and the x-axis in radians.
    */
   public setAngle(angle: number) {
     const length = this.length();
@@ -213,6 +250,12 @@ export class Vector2 {
     this.y = length * Math.sin(angle);
   }
 
+  /**
+   * Compute the angle between this vector and the given vector.
+   * The returned angle will be in the range [-Math.PI, Math.PI].
+   *
+   * @param vector - The other vector.
+   */
   public angleBetween(vector: PossibleVector2) {
     return Math.acos(
       this.dot(vector) / (this.length() * Vector2.wrap(vector).length()),
@@ -220,11 +263,59 @@ export class Vector2 {
   }
 
   /**
-   * Returns the distance between this vector and another.
+   * Compute the clockwise angle from this vector to a given other
+   * vector. The angle will be in the range [0, Math.PI * 2[.
    *
-   * @param vector The other vector.
+   * @param vector - The target vector.
+   */
+  public clockwiseAngleTo(vector: PossibleVector2) {
+    const target = Vector2.wrap(vector);
+    const dot = this.dot(target);
+    const determinant = this.x * target.y - this.y * target.x;
+    return (Math.atan2(determinant, dot) + TAU) % TAU;
+  }
+
+  /**
+   * Calculate the distance between this vector and another.
+   *
+   * @param vector - The other vector.
    */
   public distanceTo(vector: PossibleVector2) {
     return this.sub(Vector2.wrap(vector)).length();
   }
+
+  /**
+   * Calculate the squared distance between this vector and another.
+   *
+   * @param vector - The other vector.
+   */
+  public squaredDistanceTo(vector: PossibleVector2) {
+    return this.sub(Vector2.wrap(vector)).squaredLength();
+  }
+
+  /**
+   * Calculates the 2D vector cross product between this vector and
+   * the provided vector.
+   *
+   * @remarks
+   * The 2D cross product is defined as a.y * b.x - a.x * b.y
+   *
+   * @param vector - The other vector.
+   */
+  public cross(vector: PossibleVector2) {
+    const other = Vector2.wrap(vector);
+    return this.y * other.x - this.x * other.y;
+  }
+
+  /**
+   * Apply the provided matrix to this vector.
+   *
+   * @param matrix - The transformation matrix.
+   */
+  public transform(matrix: Matrix2D): Vector2 {
+    return new Vector2(
+      this.x * matrix.a + this.y * matrix.c + matrix.tx,
+      this.x * matrix.b + this.y * matrix.d + matrix.ty,
+    );
+  }
 }
diff --git a/tests/math/Matrix2D.test.ts b/tests/math/Matrix2D.test.ts
new file mode 100644
index 0000000..8f7d743
--- /dev/null
+++ b/tests/math/Matrix2D.test.ts
@@ -0,0 +1,172 @@
+// @ts-ignore
+import { describe, expect, test } from "bun:test";
+import { Matrix2D, PossibleMatrix2D } from "../../src/utils/Matrix2D";
+
+test.each([
+  [[1, 0, 0, 1, 0, 0], true],
+  [[2, 0, 0, 2, 0, 0], false],
+])(
+  "isIdentity: values = %p -> %p",
+  (values: PossibleMatrix2D, expected: boolean) => {
+    const m = new Matrix2D(values);
+    expect(m.isIdentity).toBe(expected);
+  },
+);
+
+describe("equality", () => {
+  test.each([
+    [[1, 0, 0, 1, 0, 0], [1, 0, 0, 1, 0, 0], true],
+    [[2, 2, 0, 1, 0, 0], [2, 2, 0, 1, 0, 0], true],
+    [[1, 0, 0, 1, 0, 0], [2, 0, 0, 2, 0, 0], false],
+    [[1, 0, 0, 1, 0, 0], [1, 0, 0, 1, 0, 1], false],
+  ])(
+    "exactly equal: %p === %p -> %p",
+    (a: PossibleMatrix2D, b: PossibleMatrix2D, expected: number) => {
+      const m1 = new Matrix2D(a);
+      const m2 = new Matrix2D(b);
+      expect(m1.equals(m2)).toBe(expected);
+    },
+  );
+
+  test.each([
+    [[1.1, 0, 0, 1.1, 0, 0], [1.05, 0, 0, 1.05, 0, 0], 0.05, true],
+    [[1.1, 0, 0, 1.1, 0, 0], [1.05, 0, 0, 1.05, 0, 0], 0.04, false],
+    [[1.1, 0, 0, 1.1, 0, 0], [1.099999, 0, 0, 1.099999, 0, 0], undefined, true],
+  ])("threshold equal: %p === %p -> %p", (a, b, threshold, expected) => {
+    const m1 = new Matrix2D(a);
+    const m2 = new Matrix2D(b);
+    expect(m1.equals(m2, threshold)).toBe(expected);
+  });
+});
+
+describe("constructor", () => {
+  test("no arguments -> identity", () => {
+    const m = new Matrix2D();
+    expect(m.isIdentity).toBe(true);
+  });
+
+  test("static identity constructor", () => {
+    const m = Matrix2D.identity;
+    expect(m.isIdentity).toBe(true);
+  });
+
+  test("static zero constructor", () => {
+    const m = Matrix2D.zero;
+    expect(m.a).toBe(0);
+    expect(m.b).toBe(0);
+    expect(m.c).toBe(0);
+    expect(m.d).toBe(0);
+    expect(m.tx).toBe(0);
+    expect(m.ty).toBe(0);
+  });
+
+  test("array of values", () => {
+    const m = new Matrix2D([1, 2, 3, 4, 5, 6]);
+    expect(m.a).toBe(1);
+    expect(m.b).toBe(2);
+    expect(m.c).toBe(3);
+    expect(m.d).toBe(4);
+    expect(m.tx).toBe(5);
+    expect(m.ty).toBe(6);
+  });
+
+  test("individual values", () => {
+    const m = new Matrix2D(1, 2, 3, 4, 5, 6);
+    expect(m.a).toBe(1);
+    expect(m.b).toBe(2);
+    expect(m.c).toBe(3);
+    expect(m.d).toBe(4);
+    expect(m.tx).toBe(5);
+    expect(m.ty).toBe(6);
+  });
+
+  test("single value fills all", () => {
+    const m = new Matrix2D(2);
+    expect(m.a).toBe(2);
+    expect(m.b).toBe(2);
+    expect(m.c).toBe(2);
+    expect(m.d).toBe(2);
+    expect(m.tx).toBe(2);
+    expect(m.ty).toBe(2);
+  });
+
+  test("Matrix2D object", () => {
+    const other = new Matrix2D(1, 2, 3, 1, 2, 3);
+    const m = new Matrix2D(other);
+    expect(m.equals(other)).toBe(true);
+  });
+
+  test("{ a, b, c, d, tx, ty }", () => {
+    const m = new Matrix2D({ a: 1, b: 2, c: 3, d: 4, tx: 5, ty: 6 });
+    expect(m.a).toBe(1);
+    expect(m.b).toBe(2);
+    expect(m.c).toBe(3);
+    expect(m.d).toBe(4);
+    expect(m.tx).toBe(5);
+    expect(m.ty).toBe(6);
+  });
+
+  test("DOMMatrix", () => {
+    const domMatrix = new DOMMatrix([1, 2, 3, 4, 5, 6]);
+    const m = new Matrix2D(domMatrix);
+    expect(m.a).toBe(1);
+    expect(m.b).toBe(2);
+    expect(m.c).toBe(3);
+    expect(m.d).toBe(4);
+    expect(m.tx).toBe(5);
+    expect(m.ty).toBe(6);
+  });
+});
+
+test("translate", () => {
+  const m = new Matrix2D();
+  m.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);
+    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]);
+    expect(m.equals(new Matrix2D(2, 4, 9, 12, 5, 6))).toBe(true);
+  });
+});
+
+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);
+      expect(m.equals(new Matrix2D(expected))).toBe(true);
+    },
+  );
+});
+
+describe("determinant", () => {
+  test("identity matrix has determinant 1", () => {
+    const matrix = Matrix2D.identity;
+    expect(matrix.determinant).toBe(1);
+  });
+
+  test("matrix with identical columns has determinant 0", () => {
+    const matrix = new Matrix2D(5, 2, 5, 2, 0, 0);
+    expect(matrix.determinant).toBe(0);
+  });
+
+  test.each([
+    [[3, 2, 4, 9, 0, 0], 19],
+    [[1, 2, 3, 4, 0, 0], -2],
+    [[6, 6, 7, 7, 0, 0], 0],
+  ])("det(%p) = %p", (matrix: PossibleMatrix2D, expected: number) => {
+    const m = new Matrix2D(matrix);
+    expect(m.determinant).toBe(expected);
+  });
+});
diff --git a/tests/math/Vector2.test.ts b/tests/math/Vector2.test.ts
index 081c5bd..8ef4567 100644
--- a/tests/math/Vector2.test.ts
+++ b/tests/math/Vector2.test.ts
@@ -32,6 +32,12 @@ describe("constructor", () => {
     expect(v.x).toBe(1);
     expect(v.y).toBe(1);
   });
+
+  test("{width, height} -> (width, height)", () => {
+    const v = new Vector2({ width: 1, height: 2 });
+    expect(v.x).toBe(1);
+    expect(v.y).toBe(2);
+  });
 });
 
 describe("fromPolar", () => {
@@ -262,3 +268,27 @@ describe("slope", () => {
     expect(a.slope).toBeCloseTo(expected);
   });
 });
+
+describe("aliases", () => {
+  test("width is an alias for x", () => {
+    const v = new Vector2(1, 2);
+    expect(v.width).toBe(1);
+
+    v.x = 2;
+    expect(v.width).toBe(2);
+
+    v.width = 4;
+    expect(v.x).toBe(4);
+  });
+
+  test("height is an alias for y", () => {
+    const v = new Vector2(1, 2);
+    expect(v.height).toBe(2);
+
+    v.y = 3;
+    expect(v.height).toBe(3);
+
+    v.height = 5;
+    expect(v.y).toBe(5);
+  });
+});
diff --git a/tests/setup.ts b/tests/setup.ts
new file mode 100644
index 0000000..27645c4
--- /dev/null
+++ b/tests/setup.ts
@@ -0,0 +1,84 @@
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+
+GlobalRegistrator.register();
+
+// @ts-ignore
+window.DOMMatrix = class {
+  public readonly a: number = 1;
+  public readonly b: number = 1;
+  public readonly c: number = 1;
+  public readonly d: number = 1;
+  public readonly e: number = 1;
+  public readonly f: number = 1;
+
+  public readonly is2D: boolean = true;
+
+  public get m11() {
+    return this.a;
+  }
+
+  public get m12() {
+    return this.b;
+  }
+
+  public get m13() {
+    return 0;
+  }
+
+  public get m14() {
+    return 0;
+  }
+
+  public get m21() {
+    return this.c;
+  }
+
+  public get m22() {
+    return this.d;
+  }
+
+  public get m23() {
+    return 0;
+  }
+
+  public get m24() {
+    return 0;
+  }
+
+  public get m31() {
+    return 0;
+  }
+
+  public get m32() {
+    return 0;
+  }
+
+  public get m33() {
+    return 1;
+  }
+
+  public get m41() {
+    return this.e;
+  }
+
+  public get m42() {
+    return this.f;
+  }
+
+  public get m43() {
+    return 0;
+  }
+
+  public get m44() {
+    return 1;
+  }
+
+  constructor(values: [number, number, number, number, number, number]) {
+    this.a = values[0];
+    this.b = values[1];
+    this.c = values[2];
+    this.d = values[3];
+    this.e = values[4];
+    this.f = values[5];
+  }
+};

From 2b72b47aba048314055e3e001815c794e2e6a595 Mon Sep 17 00:00:00 2001
From: Kai Sassnowski <me@kai-sassnowski.com>
Date: Wed, 21 Aug 2024 10:58:13 +0200
Subject: [PATCH 2/2] chore: run prettier

---
 .github/FUNDING.yml                  |  2 +-
 .github/workflows/commitlint.yml     |  2 +-
 .github/workflows/release-please.yml |  2 +-
 .github/workflows/run-tests.yml      |  2 +-
 .prettierrc                          |  1 +
 CHANGELOG.md                         | 44 ++++++++++------------------
 6 files changed, 21 insertions(+), 32 deletions(-)
 create mode 100644 .prettierrc

diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
index c74ea70..cb6ba2a 100644
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -1,3 +1,3 @@
 # These are supported funding model platforms
 
-github: ksassnowski
\ No newline at end of file
+github: ksassnowski
diff --git a/.github/workflows/commitlint.yml b/.github/workflows/commitlint.yml
index 4bd14c2..ff9fc59 100644
--- a/.github/workflows/commitlint.yml
+++ b/.github/workflows/commitlint.yml
@@ -8,4 +8,4 @@ jobs:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      - uses: wagoid/commitlint-github-action@v5
\ No newline at end of file
+      - uses: wagoid/commitlint-github-action@v5
diff --git a/.github/workflows/release-please.yml b/.github/workflows/release-please.yml
index d0d463a..d380a76 100644
--- a/.github/workflows/release-please.yml
+++ b/.github/workflows/release-please.yml
@@ -25,4 +25,4 @@ jobs:
       - run: npm publish
         env:
           NPM_TOKEN: ${{secrets.NPM_TOKEN}}
-        if: ${{ steps.release.outputs.release_created }}
\ No newline at end of file
+        if: ${{ steps.release.outputs.release_created }}
diff --git a/.github/workflows/run-tests.yml b/.github/workflows/run-tests.yml
index 643fbc5..84c4327 100644
--- a/.github/workflows/run-tests.yml
+++ b/.github/workflows/run-tests.yml
@@ -13,4 +13,4 @@ jobs:
       - name: Install dependencies
         run: bun install
       - name: Run tests
-        run: bun test
\ No newline at end of file
+        run: bun test
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..0967ef4
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1 @@
+{}
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 05051ed..9f597a9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,86 +11,74 @@
 
 ## [1.1.1](https://github.com/ksassnowski/vueclid/compare/v1.1.0...v1.1.1) (2024-02-22)
 
-
 ### Bug Fixes
 
-* remove small gaps in function plot ([a960411](https://github.com/ksassnowski/vueclid/commit/a9604111d64c306f840769b8dc18617274796566))
-* scale arrow correctly for short vectors ([635e936](https://github.com/ksassnowski/vueclid/commit/635e936ac8c83869ee502d9b97a777846bb72a96))
+- remove small gaps in function plot ([a960411](https://github.com/ksassnowski/vueclid/commit/a9604111d64c306f840769b8dc18617274796566))
+- scale arrow correctly for short vectors ([635e936](https://github.com/ksassnowski/vueclid/commit/635e936ac8c83869ee502d9b97a777846bb72a96))
 
 ## [1.1.0](https://github.com/ksassnowski/vueclid/compare/v1.0.2...v1.1.0) (2024-01-30)
 
-
 ### Features
 
-* add rotation parameter to ellipse ([fa1bb9d](https://github.com/ksassnowski/vueclid/commit/fa1bb9ddba99b01991708d564052fb3872ed98a3))
+- add rotation parameter to ellipse ([fa1bb9d](https://github.com/ksassnowski/vueclid/commit/fa1bb9ddba99b01991708d564052fb3872ed98a3))
 
 ## [1.0.2](https://github.com/ksassnowski/vueclid/compare/v1.0.1...v1.0.2) (2024-01-30)
 
-
 ### Bug Fixes
 
-* fix typescript type declarations (maybe) ([11eeec4](https://github.com/ksassnowski/vueclid/commit/11eeec4badf01098ff2326eb4f6c1334805980f9))
+- fix typescript type declarations (maybe) ([11eeec4](https://github.com/ksassnowski/vueclid/commit/11eeec4badf01098ff2326eb4f6c1334805980f9))
 
 ## [1.0.1](https://github.com/ksassnowski/vueclid/compare/v1.0.0...v1.0.1) (2024-01-30)
 
-
 ### Bug Fixes
 
-* point typescript to correct declaration file ([641877e](https://github.com/ksassnowski/vueclid/commit/641877e6aa351bb6b5fe99d2ae8b955e1f0212a3))
+- point typescript to correct declaration file ([641877e](https://github.com/ksassnowski/vueclid/commit/641877e6aa351bb6b5fe99d2ae8b955e1f0212a3))
 
 ## [1.0.0](https://github.com/ksassnowski/vueclid/compare/v0.1.0...v1.0.0) (2024-01-30)
 
-
 ### Features
 
-* allow vector to be constructed from a single value ([f07be5f](https://github.com/ksassnowski/vueclid/commit/f07be5f1a05aa8fcf4980e5310a7d44adfd06510))
-
+- allow vector to be constructed from a single value ([f07be5f](https://github.com/ksassnowski/vueclid/commit/f07be5f1a05aa8fcf4980e5310a7d44adfd06510))
 
 ### Miscellaneous Chores
 
-* release 1.0.0 ([e0f73bf](https://github.com/ksassnowski/vueclid/commit/e0f73bfc2243ac8f5b889a2d7ba3f3eff12575c2))
+- release 1.0.0 ([e0f73bf](https://github.com/ksassnowski/vueclid/commit/e0f73bfc2243ac8f5b889a2d7ba3f3eff12575c2))
 
 ## [0.1.0](https://github.com/ksassnowski/vueclid/compare/v0.0.7...v0.1.0) (2024-01-30)
 
-
 ### Features
 
-* add configuration function ([#21](https://github.com/ksassnowski/vueclid/issues/21)) ([aa5d554](https://github.com/ksassnowski/vueclid/commit/aa5d5546e91867d4a86ce40d4723a9b89aa3b02b))
-* make diagrams responsive ([#20](https://github.com/ksassnowski/vueclid/issues/20)) ([2b96c7c](https://github.com/ksassnowski/vueclid/commit/2b96c7c2d0e7149547de8c87ab4c6dfaec0ac331))
-* make setColors reactive ([9a0275e](https://github.com/ksassnowski/vueclid/commit/9a0275e0cd54aeff541c972f0914e57cd87b8855))
+- add configuration function ([#21](https://github.com/ksassnowski/vueclid/issues/21)) ([aa5d554](https://github.com/ksassnowski/vueclid/commit/aa5d5546e91867d4a86ce40d4723a9b89aa3b02b))
+- make diagrams responsive ([#20](https://github.com/ksassnowski/vueclid/issues/20)) ([2b96c7c](https://github.com/ksassnowski/vueclid/commit/2b96c7c2d0e7149547de8c87ab4c6dfaec0ac331))
+- make setColors reactive ([9a0275e](https://github.com/ksassnowski/vueclid/commit/9a0275e0cd54aeff541c972f0914e57cd87b8855))
 
 ## [0.0.7](https://github.com/ksassnowski/vueclid/compare/v0.0.6...v0.0.7) (2024-01-29)
 
-
 ### Bug Fixes
 
-* remove path alias ([acea770](https://github.com/ksassnowski/vueclid/commit/acea770ea5a54772299f4a8e0aee885bbe1574eb))
+- remove path alias ([acea770](https://github.com/ksassnowski/vueclid/commit/acea770ea5a54772299f4a8e0aee885bbe1574eb))
 
 ## [0.0.6](https://github.com/ksassnowski/vueclid/compare/v0.0.5...v0.0.6) (2024-01-29)
 
-
 ### Bug Fixes
 
-* export component types properly ([07deefe](https://github.com/ksassnowski/vueclid/commit/07deefe8f0c648a230ad3a1a0d7a6625e4e73b64))
+- export component types properly ([07deefe](https://github.com/ksassnowski/vueclid/commit/07deefe8f0c648a230ad3a1a0d7a6625e4e73b64))
 
 ## [0.0.5](https://github.com/ksassnowski/vueclid/compare/v0.0.4...v0.0.5) (2024-01-29)
 
-
 ### Bug Fixes
 
-* use correct name for type declarations file ([d688f8a](https://github.com/ksassnowski/vueclid/commit/d688f8af70a0f6677b3bdfcb2158956c822138b3))
+- use correct name for type declarations file ([d688f8a](https://github.com/ksassnowski/vueclid/commit/d688f8af70a0f6677b3bdfcb2158956c822138b3))
 
 ## [0.0.4](https://github.com/ksassnowski/vueclid/compare/v0.0.3...v0.0.4) (2024-01-29)
 
-
 ### Bug Fixes
 
-* generate type declaration file in correct location ([f7fb5b2](https://github.com/ksassnowski/vueclid/commit/f7fb5b2b81962a4e92e16759dc76598329accf02))
-
+- generate type declaration file in correct location ([f7fb5b2](https://github.com/ksassnowski/vueclid/commit/f7fb5b2b81962a4e92e16759dc76598329accf02))
 
 ### Miscellaneous Chores
 
-* release 0.0.3 ([e2733bb](https://github.com/ksassnowski/vueclid/commit/e2733bbf7c66d3b0288b1f2ce039369d94aa7da6))
-* release 0.0.4 ([0c4cc7a](https://github.com/ksassnowski/vueclid/commit/0c4cc7a74482e675bc2d590edbe99023db6ea72e))
+- release 0.0.3 ([e2733bb](https://github.com/ksassnowski/vueclid/commit/e2733bbf7c66d3b0288b1f2ce039369d94aa7da6))
+- release 0.0.4 ([0c4cc7a](https://github.com/ksassnowski/vueclid/commit/0c4cc7a74482e675bc2d590edbe99023db6ea72e))
 
 ## Changelog