From a55d1a25ba3ee86e90b0da39daa5a0e4f04c69db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Tue, 24 Jan 2023 11:35:45 +0000
Subject: [PATCH] RectText component

---
 ui/src/components/door_map/DoorChooser.vue | 11 ++++---
 ui/src/components/rects/RectText.vue       | 36 ++++++++++++++++++++++
 2 files changed, 43 insertions(+), 4 deletions(-)
 create mode 100644 ui/src/components/rects/RectText.vue

diff --git a/ui/src/components/door_map/DoorChooser.vue b/ui/src/components/door_map/DoorChooser.vue
index 7a8d421..99ee3c4 100644
--- a/ui/src/components/door_map/DoorChooser.vue
+++ b/ui/src/components/door_map/DoorChooser.vue
@@ -14,12 +14,13 @@
           :rectangle="rect"
           @click.left="choose_rect(index)"
         />
-        <Rect
+        <template
           v-for="(rect, index) in rectangles_chosen"
           :key="'rect_chosen' + index"
-          :rectangle="rect"
-          :focused="true"
-        />
+        >
+          <Rect :rectangle="rect" :focused="true" />
+          <RectText :rectangle="rect" :text="String(index)" />
+        </template>
       </ThouCanvas>
     </figure>
   </section>
@@ -31,11 +32,13 @@ import { Rectangle } from "../rects/rectangles";
 
 import ThouCanvas from "../rects/ThouCanvas.vue";
 import Rect from "../rects/Rect.vue";
+import RectText from "../rects/RectText.vue";
 
 @Options({
   components: {
     ThouCanvas,
     Rect,
+    RectText,
   },
   props: {
     rectangles: Array,
diff --git a/ui/src/components/rects/RectText.vue b/ui/src/components/rects/RectText.vue
new file mode 100644
index 0000000..284d077
--- /dev/null
+++ b/ui/src/components/rects/RectText.vue
@@ -0,0 +1,36 @@
+<template>
+  <text
+    :x="rectangle.left + 0.5 * rectangle.width"
+    :y="rectangle.top + 0.5 * rectangle.height"
+    text-anchor="middle"
+    dominant-baseline="middle"
+  >
+    {{ text }}
+  </text>
+</template>
+
+<script lang="ts">
+import { Vue, Options } from "vue-class-component";
+import { Rectangle } from "./rectangles";
+
+@Options({
+  props: {
+    rectangle: Rectangle,
+    text: String,
+  },
+})
+export default class RectText extends Vue {
+  private rectangle!: Rectangle;
+  private text!: string;
+}
+</script>
+
+<style lang="scss" scoped>
+text {
+  fill: red;
+
+  font-weight: bold;
+  font-size: 40px;
+  font-stretch: condensed;
+}
+</style>
\ No newline at end of file