From 9431673eeee610d0ab7e30d3939737a02159f93c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Tue, 24 Jan 2023 23:11:49 +0000
Subject: [PATCH] account for SVG aspect ratio

---
 ui/src/components/rects/RectText.vue | 30 +++++++++++++++++++++++-----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/ui/src/components/rects/RectText.vue b/ui/src/components/rects/RectText.vue
index 284d077..8a3c834 100644
--- a/ui/src/components/rects/RectText.vue
+++ b/ui/src/components/rects/RectText.vue
@@ -1,7 +1,8 @@
 <template>
   <text
-    :x="rectangle.left + 0.5 * rectangle.width"
-    :y="rectangle.top + 0.5 * rectangle.height"
+    :x="Math.round(parent_aspect_ratio * rect_middle.x)"
+    :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-stretch: condensed;
+  font-size: 50px;
 }
 </style>
\ No newline at end of file