diff --git a/ui/src/components/rects/SVGRectText.vue b/ui/src/components/rects/SVGRectText.vue
index ce31bdd..ad13d70 100644
--- a/ui/src/components/rects/SVGRectText.vue
+++ b/ui/src/components/rects/SVGRectText.vue
@@ -1,7 +1,7 @@
 <template>
   <text
-    :x="Math.round(parent_aspect_ratio * rect_middle.x)"
-    :y="Math.round(rect_middle.y)"
+    :x="Math.round(parent_aspect_ratio * rectangle.middle.x)"
+    :y="Math.round(rectangle.middle.y)"
     :style="`transform: scaleX(${1 / parent_aspect_ratio})`"
     text-anchor="middle"
     dominant-baseline="middle"
@@ -12,7 +12,7 @@
 
 <script lang="ts">
 import { Vue, Options } from "vue-class-component";
-import { Rectangle, Vector2D } from "./rectangles";
+import { Rectangle } from "./rectangles";
 
 @Options({
   props: {
@@ -25,10 +25,6 @@ export default class extends Vue {
   private text!: string;
   private refreshKey = 0;
 
-  private get rect_middle(): Vector2D {
-    return this.rectangle.origin.plus(this.rectangle.size.scale(0.5));
-  }
-
   private get parent_aspect_ratio(): number {
     this.refreshKey; // read it just to force recompute on change
 
diff --git a/ui/src/components/rects/rectangles.ts b/ui/src/components/rects/rectangles.ts
index 1bcc0dc..3319604 100644
--- a/ui/src/components/rects/rectangles.ts
+++ b/ui/src/components/rects/rectangles.ts
@@ -24,9 +24,9 @@ export class Rectangle {
   private readonly corner_1: Vector2D;
   private readonly corner_2: Vector2D;
 
-  constructor(corner_1?: Vector2D, corner_2?: Vector2D) {
-    this.corner_1 = corner_1 || new Vector2D();
-    this.corner_2 = corner_2 || new Vector2D();
+  constructor(corner_1 = new Vector2D(), corner_2 = new Vector2D()) {
+    this.corner_1 = corner_1;
+    this.corner_2 = corner_2;
   }
 
   public get origin(): Vector2D {
@@ -63,6 +63,10 @@ export class Rectangle {
     return this.size.y;
   }
 
+  public get middle(): Vector2D {
+    return this.origin.plus(this.size.scale(0.5))
+  }
+
   public get area(): number {
     return this.width * this.height;
   }
diff --git a/ui/tests/unit/rectangle.spec.ts b/ui/tests/unit/rectangle.spec.ts
index 50eec6a..ddde4d9 100644
--- a/ui/tests/unit/rectangle.spec.ts
+++ b/ui/tests/unit/rectangle.spec.ts
@@ -4,6 +4,12 @@ import { expect } from "chai";
 describe("Vector2D Tests", () => {
   const v = new Vector2D(1, 2);
 
+  it("should create a default vector", () => {
+    const v0 = new Vector2D();
+    expect(v0.x).to.equal(0);
+    expect(v0.y).to.equal(0);
+  });
+
   it("should create a vector", () => {
     expect(v.x).to.equal(1);
     expect(v.y).to.equal(2);
@@ -36,44 +42,75 @@ describe("Rectangle Tests", () => {
   const r1 = new Rectangle(v1, v2);
   const r2 = new Rectangle(v2, v1);
 
+  function check_rectangle(
+    r: Rectangle,
+    left: number, top: number,
+    width: number, height: number,
+  ) {
+    expect(r.left).to.equal(left);
+    expect(r.top).to.equal(top);
+
+    expect(r.width).to.equal(width);
+    expect(r.height).to.equal(height);
+    expect(r.area).to.equal(width * height);
+
+    expect(r.middle.x).to.equal(left + 0.5 * width);
+    expect(r.middle.y).to.equal(top + 0.5 * height);
+
+  }
+
+  it("should create a default rectangle", () => {
+    check_rectangle(new Rectangle(), 0, 0, 0, 0);
+  });
+
   it("should create a rectangle", () => {
-    expect(r1.left).to.equal(1);
-    expect(r1.top).to.equal(2);
-    expect(r1.width).to.equal(3);
-    expect(r1.height).to.equal(4);
+    check_rectangle(r1, 1, 2, 3, 4);
   });
 
   it("should create the same rectangle backwards", () => {
-    expect(r2.left).to.equal(1);
-    expect(r2.top).to.equal(2);
-    expect(r2.width).to.equal(3);
-    expect(r2.height).to.equal(4);
+    check_rectangle(r2, 1, 2, 3, 4);
   });
 
   it("should create the same rectangle transposed", () => {
     const v1t = new Vector2D(v1.x, v2.y);
     const v2t = new Vector2D(v2.x, v1.y);
-    const rt = new Rectangle(v1t, v2t);
 
-    expect(rt.left).to.equal(1);
-    expect(rt.top).to.equal(2);
-    expect(rt.width).to.equal(3);
-    expect(rt.height).to.equal(4);
+    check_rectangle(new Rectangle(v1t, v2t), 1, 2, 3, 4);
   });
 
   it("should contain itself", () => {
-    expect(r1.contains(v1)).true;
-    expect(r1.contains(v2)).true;
+    expect(r1.contains(v1)).to.be.true;
+    expect(r1.contains(v2)).to.be.true;
 
     expect(r1.contains(r1.origin)).to.be.true;
     expect(r1.contains(r1.corner)).to.be.true;
-
-    const vmid = new Vector2D((v1.x + v2.x) / 2, (v1.y + v2.y) / 2);
-    expect(r1.contains(vmid)).to.be.true;
+    expect(r1.contains(r1.middle)).to.be.true;
   });
 
   it("should not contain certain points", () => {
     expect(r1.contains(new Vector2D(0, 0))).to.be.false;
     expect(r1.contains(new Vector2D(100, 100))).to.be.false;
   });
+
+  it("should update a rectangle", () => {
+    const v = new Vector2D(1, 1);
+
+    check_rectangle(r1.update(v1.plus(v), undefined), 2, 3, 2, 3);
+    check_rectangle(r1.update(v1.minus(v), undefined), 0, 1, 4, 5);
+
+    check_rectangle(r1.update(undefined, v2.plus(v)), 1, 2, 4, 5);
+    check_rectangle(r1.update(undefined, v2.minus(v)), 1, 2, 2, 3);
+
+    check_rectangle(r1.update(v1.plus(v), v2.plus(v)), 2, 3, 3, 4);
+    check_rectangle(r1.update(v1.minus(v), v2.minus(v)), 0, 1, 3, 4);
+
+    check_rectangle(r1.update(v1.minus(v), v2.plus(v)), 0, 1, 5, 6);
+    check_rectangle(r1.update(v1.plus(v), v2.minus(v)), 2, 3, 1, 2);
+  });
+
+  it("should move a rectangle", () => {
+    const v = new Vector2D(1, 1);
+
+    check_rectangle(r1.move(v), 2, 3, 3, 4);
+  });
 });
\ No newline at end of file