From 0a18bdd2a0782f1b1bacb0d431bdca81333e8c20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Sun, 12 Feb 2023 01:20:54 +0000
Subject: [PATCH] Simple SVGRectText as foreignObject

---
 ui/src/components/rects/SVGRectText.vue | 27 ++++++++++++++-----------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/ui/src/components/rects/SVGRectText.vue b/ui/src/components/rects/SVGRectText.vue
index 4eb7490..661cae0 100644
--- a/ui/src/components/rects/SVGRectText.vue
+++ b/ui/src/components/rects/SVGRectText.vue
@@ -1,13 +1,18 @@
 <template>
-  <text
-    :x="Math.round(parent_aspect_ratio * rectangle.middle.x)"
-    :y="Math.round(rectangle.middle.y)"
+  <foreignObject
+    :x="Math.round(parent_aspect_ratio * rectangle.left)"
+    :y="rectangle.top"
+    :width="Math.round(parent_aspect_ratio * rectangle.width)"
+    :height="rectangle.height"
     :style="`transform: scaleX(${1 / parent_aspect_ratio})`"
-    text-anchor="middle"
-    dominant-baseline="middle"
   >
-    {{ text }}
-  </text>
+    <div
+      xmlns="http://www.w3.org/1999/xhtml"
+      class="is-flex is-align-items-center is-justify-content-center"
+    >
+      <div class="is-size-1 has-text-weight-bold">{{ text }}</div>
+    </div>
+  </foreignObject>
 </template>
 
 <script lang="ts">
@@ -54,10 +59,8 @@ export default class extends Vue {
 </script>
 
 <style lang="scss" scoped>
-text {
-  fill: red;
-
-  font-weight: bold;
-  font-size: 50px;
+foreignObject > div {
+  color: red;
+  height: inherit;
 }
 </style>
\ No newline at end of file