"focused" -> "highlighted, selected"

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() {

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;
   }

ui/src/components/rects/RectPad.vue

@@ -9,7 +9,7 @@
   >
     <Rect
       v-if="preview_state.visible"
-      :focused="true"
+      :highlighted="true"
       :rectangle="preview_rectangle"
     />
     <Rect