wip: more elegant solution; breaks DoorCanvas, PreviewDoor

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 readonly store = advent22Store();
-  public visible!: boolean;
 
-  public hovered = false;
+  public door!: Door;
+  public force_visible!: boolean;
 }
 </script>

ui/src/components/calendar/SVGRect.vue

@@ -7,23 +7,14 @@
     :height="rectangle.height"
     :style="`transform: scaleX(${1 / store.calendar_aspect_ratio})`"
   >
-    <!-- v-if="variant !== undefined" -->
     <div
       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 has-background-primary"
+      :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"
     >
       <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">
@@ -41,58 +32,61 @@ type BulmaVariant =
 
 @Options({
   props: {
-    variant: {
+    variant: String,
-      type: String,
+    visible: {
-      required: false,
+      type: Boolean,
+      default: false,
     },
     rectangle: Rectangle,
   },
 })
 export default class extends Vue {
-  public variant?: BulmaVariant;
+  public readonly store = advent22Store();
+
+  private variant!: BulmaVariant;
+  private visible!: boolean;
   public rectangle!: Rectangle;
 
-  public readonly store = advent22Store();
+  public get extra_classes(): string {
+    let result = this.variant;
+
+    if (this.visible) result += " visible";
+
+    return result;
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 @import "@/bulma-vars";
 
-rect {
+@mixin visible_rect($name, $color) {
-  fill: transparent;
+  &.#{$name} {
-  fill-opacity: 0.3;
+    background-color: rgba($color, 0.3);
-  stroke-opacity: 0.9;
+    border-color: rgba($color, 0.9);
-  stroke-width: 1;
+  }
-
-  &.primary {
-    fill: $primary;
-    stroke: $primary;
 }
 
-  &.link {
+foreignObject > div {
-    fill: $link;
+  :deep() > * {
-    stroke: $link;
+    display: none;
   }
 
-  &.info {
+  &.visible,
-    fill: $info;
+  &:hover {
-    stroke: $info;
+    :deep() > * {
+      display: initial;
     }
 
-  &.success {
+    border-width: 3px;
-    fill: $success;
+    border-style: solid;
-    stroke: $success;
-  }
 
-  &.warning {
+    @include visible_rect("primary", $primary);
-    fill: $warning;
+    @include visible_rect("link", $link);
-    stroke: $warning;
+    @include visible_rect("info", $info);
-  }
+    @include visible_rect("success", $success);
-
+    @include visible_rect("warning", $warning);
-  &.danger {
+    @include visible_rect("danger", $danger);
-    fill: $danger;
-    stroke: $danger;
   }
 }
 </style>

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>

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"