From b4492dcb7384d19126e85d466e08efcc60d7aaf0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Tue, 17 Jan 2023 22:33:11 +0000
Subject: [PATCH] "focused" -> "highlighted, selected"

---
 ui/src/components/DoorMapEditor.vue |  6 ++----
 ui/src/components/rects/Rect.vue    | 32 +++++++++++++++++++++++++----
 ui/src/components/rects/RectPad.vue |  2 +-
 3 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/ui/src/components/DoorMapEditor.vue b/ui/src/components/DoorMapEditor.vue
index 80f2a36..8ea5e8a 100644
--- a/ui/src/components/DoorMapEditor.vue
+++ b/ui/src/components/DoorMapEditor.vue
@@ -23,10 +23,8 @@ export default class CalendarImage extends Vue {
   };
 
   private on_resize() {
-    this.$refs.container.style.setProperty(
-      "height",
-      this.$refs.background.offsetHeight + "px"
-    );
+    this.$refs.container.style.height =
+      this.$refs.background.offsetHeight + "px";
   }
 
   public mounted() {
diff --git a/ui/src/components/rects/Rect.vue b/ui/src/components/rects/Rect.vue
index e874d04..2af32ce 100644
--- a/ui/src/components/rects/Rect.vue
+++ b/ui/src/components/rects/Rect.vue
@@ -1,6 +1,6 @@
 <template>
   <rect
-    :class="focused ? 'focused' : ''"
+    :class="classes"
     :x="rectangle.left"
     :y="rectangle.top"
     :width="rectangle.width"
@@ -14,7 +14,11 @@ import { Rectangle } from "./rectangles";
 
 @Options({
   props: {
-    focused: {
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+    highlighted: {
       type: Boolean,
       default: false,
     },
@@ -22,8 +26,23 @@ import { Rectangle } from "./rectangles";
   },
 })
 export default class Rect extends Vue {
-  private focused!: boolean;
+  private selected!: boolean;
+  private highlighted!: boolean;
   private rectangle!: Rectangle;
+
+  private get classes(): string {
+    let result: string[] = [];
+
+    if (this.selected) {
+      result.push("select");
+    }
+
+    if (this.highlighted) {
+      result.push("highlight");
+    }
+
+    return result.join(" ");
+  }
 }
 </script>
 
@@ -35,7 +54,12 @@ rect {
   stroke-opacity: 0.9;
   stroke-width: 1;
 
-  &.focused {
+  &.select {
+    fill-opacity: 0.4;
+    stroke-opacity: 1;
+  }
+
+  &.highlight {
     fill: gold;
     stroke: yellow;
   }
diff --git a/ui/src/components/rects/RectPad.vue b/ui/src/components/rects/RectPad.vue
index 666a1fa..b0d91b1 100644
--- a/ui/src/components/rects/RectPad.vue
+++ b/ui/src/components/rects/RectPad.vue
@@ -9,7 +9,7 @@
   >
     <Rect
       v-if="preview_state.visible"
-      :focused="true"
+      :highlighted="true"
       :rectangle="preview_rectangle"
     />
     <Rect