account for SVG aspect ratio

ui/src/components/rects/RectText.vue

@@ -1,7 +1,8 @@
 <template>
   <text
-    :x="rectangle.left + 0.5 * rectangle.width"
+    :x="Math.round(parent_aspect_ratio * rect_middle.x)"
-    :y="rectangle.top + 0.5 * rectangle.height"
+    :y="Math.round(rect_middle.y)"
+    :style="`transform: scaleX(${1 / parent_aspect_ratio})`"
     text-anchor="middle"
     dominant-baseline="middle"
   >
@@ -11,7 +12,7 @@
 
 <script lang="ts">
 import { Vue, Options } from "vue-class-component";
-import { Rectangle } from "./rectangles";
+import { Rectangle, Vector2D } from "./rectangles";
 
 @Options({
   props: {
@@ -22,6 +23,26 @@ import { Rectangle } from "./rectangles";
 export default class RectText extends Vue {
   private rectangle!: Rectangle;
   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
+
+    if (!(this.$el instanceof Element) || this.$el.parentElement === null) {
+      return 1;
+    }
+
+    const parent = this.$el.parentElement;
+    return parent.clientWidth / parent.clientHeight;
+  }
+
+  public mounted() {
+    this.refreshKey++;
+  }
 }
 </script>
 
@@ -30,7 +51,6 @@ text {
   fill: red;
 
   font-weight: bold;
-  font-size: 40px;
+  font-size: 50px;
-  font-stretch: condensed;
 }
 </style>