Merge branch 'feature/remove-svg-rect' into develop

ui/src/components/Calendar.vue

@@ -10,6 +10,7 @@
           :key="`door-${index}`"
           :door="door"
           :visible="store.is_touch_device"
+          :title="$advent22.name_door(door.day)"
           @click="door_click(door.day)"
         />
       </ThouCanvas>

ui/src/components/calendar/CalendarDoor.vue

@@ -1,10 +1,9 @@
 <template>
   <SVGRect
     style="cursor: pointer"
-    :variant="visible || hovered ? 'primary' : undefined"
+    variant="primary"
+    :visible="store.is_touch_device || force_visible"
     :rectangle="door.position"
-    @mouseenter="hovered = true"
-    @mouseleave="hovered = false"
   >
     <div class="has-text-danger">{{ door.day }}</div>
   </SVGRect>
@@ -12,6 +11,7 @@
 
 <script lang="ts">
 import { Door } from "@/lib/door";
+import { advent22Store } from "@/plugins/store";
 import { Options, Vue } from "vue-class-component";
 
 import SVGRect from "./SVGRect.vue";
@@ -22,16 +22,16 @@ import SVGRect from "./SVGRect.vue";
   },
   props: {
     door: Door,
-    visible: {
+    force_visible: {
       type: Boolean,
       default: false,
     },
   },
 })
 export default class extends Vue {
-  public door!: Door;
-  public visible!: boolean;
+  public readonly store = advent22Store();
 
-  public hovered = false;
+  public door!: Door;
+  public force_visible!: boolean;
 }
 </script>

ui/src/components/calendar/SVGRect.vue

@@ -7,22 +7,14 @@
     :style="`transform: scaleX(${1 / store.calendar_aspect_ratio})`"
   >
     <div
-      v-if="variant !== undefined"
       xmlns="http://www.w3.org/1999/xhtml"
-      class="px-4 is-flex is-align-items-center is-justify-content-center is-size-1 has-text-weight-bold"
+      :class="`px-4 is-flex is-align-items-center is-justify-content-center is-size-1 has-text-weight-bold ${extra_classes}`"
       style="height: inherit"
+      :title="title"
     >
       <slot name="default" />
     </div>
   </foreignObject>
-  <rect
-    v-bind="$attrs"
-    :class="variant !== undefined ? variant : ''"
-    :x="rectangle.left"
-    :y="rectangle.top"
-    :width="rectangle.width"
-    :height="rectangle.height"
-  />
 </template>
 
 <script lang="ts">
@@ -40,34 +32,54 @@ type BulmaVariant =
 
 @Options({
   props: {
-    variant: {
+    variant: String,
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    rectangle: Rectangle,
+    title: {
       type: String,
       required: false,
     },
-    rectangle: Rectangle,
   },
 })
 export default class extends Vue {
-  public variant?: BulmaVariant;
-  public rectangle!: Rectangle;
-
   public readonly store = advent22Store();
+
+  private variant!: BulmaVariant;
+  private visible!: boolean;
+  public rectangle!: Rectangle;
+  public title?: string;
+
+  public get extra_classes(): string {
+    let result = this.variant;
+
+    if (this.visible) result += " visible";
+
+    return result;
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 @import "@/bulma-scheme";
 
-rect {
-  fill: transparent;
-  fill-opacity: 0.3;
-  stroke-opacity: 0.9;
-  stroke-width: 1;
+foreignObject > div {
+  &:not(.visible, :hover):deep() > * {
+    display: none;
+  }
+
+  &.visible,
+  &:hover {
+    border-width: 3px;
+    border-style: solid;
 
     @each $name, $color in $advent22-colors {
       &.#{$name} {
-      fill: $color;
-      stroke: $color;
+        background-color: rgba($color, 0.3);
+        border-color: rgba($color, 0.9);
+      }
     }
   }
 }

ui/src/components/editor/DoorCanvas.vue

@@ -13,12 +13,13 @@
       :key="`door-${index}`"
       :door="door"
       style="cursor: inherit"
-      visible
+      force_visible
     />
     <SVGRect
       v-if="preview_visible"
       variant="success"
       :rectangle="preview_rect"
+      visible
     />
   </ThouCanvas>
 </template>
@@ -146,8 +147,12 @@ export default class extends Vue {
 }
 </script>
 
-<style scoped>
-* {
+<style lang="scss" scoped>
+svg {
   cursor: crosshair;
+
+  * {
+    pointer-events: none;
+  }
 }
 </style>

ui/src/components/editor/PreviewDoor.vue

@@ -4,6 +4,7 @@
     :rectangle="door.position"
     :variant="editing ? 'success' : 'primary'"
     @click.left="on_click"
+    visible
   >
     <input
       v-if="editing"
@@ -52,7 +53,7 @@ export default class extends Vue {
   }
 
   public on_click(event: MouseEvent) {
-    if (!(event.currentTarget instanceof SVGRectElement)) {
+    if (!(event.target instanceof HTMLDivElement)) {
       return;
     }