From 53bfdfd7b5f6c57ad59c642377e7aa9e288b6d55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Sun, 5 Nov 2023 23:51:16 +0000
Subject: [PATCH] wip: more elegant solution; breaks DoorCanvas, PreviewDoor

---
 ui/src/components/calendar/CalendarDoor.vue | 14 ++--
 ui/src/components/calendar/SVGRect.vue      | 82 ++++++++++-----------
 ui/src/components/editor/DoorCanvas.vue     |  3 +-
 ui/src/components/editor/PreviewDoor.vue    |  1 +
 4 files changed, 48 insertions(+), 52 deletions(-)

diff --git a/ui/src/components/calendar/CalendarDoor.vue b/ui/src/components/calendar/CalendarDoor.vue
index 74b2c3a..29c85b0 100644
--- a/ui/src/components/calendar/CalendarDoor.vue
+++ b/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>
diff --git a/ui/src/components/calendar/SVGRect.vue b/ui/src/components/calendar/SVGRect.vue
index 5d3abfb..e2bbd99 100644
--- a/ui/src/components/calendar/SVGRect.vue
+++ b/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: {
-      type: String,
-      required: false,
+    variant: String,
+    visible: {
+      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 {
-  fill: transparent;
-  fill-opacity: 0.3;
-  stroke-opacity: 0.9;
-  stroke-width: 1;
+@mixin visible_rect($name, $color) {
+  &.#{$name} {
+    background-color: rgba($color, 0.3);
+    border-color: rgba($color, 0.9);
+  }
+}
 
-  &.primary {
-    fill: $primary;
-    stroke: $primary;
+foreignObject > div {
+  :deep() > * {
+    display: none;
   }
 
-  &.link {
-    fill: $link;
-    stroke: $link;
-  }
+  &.visible,
+  &:hover {
+    :deep() > * {
+      display: initial;
+    }
 
-  &.info {
-    fill: $info;
-    stroke: $info;
-  }
+    border-width: 3px;
+    border-style: solid;
 
-  &.success {
-    fill: $success;
-    stroke: $success;
-  }
-
-  &.warning {
-    fill: $warning;
-    stroke: $warning;
-  }
-
-  &.danger {
-    fill: $danger;
-    stroke: $danger;
+    @include visible_rect("primary", $primary);
+    @include visible_rect("link", $link);
+    @include visible_rect("info", $info);
+    @include visible_rect("success", $success);
+    @include visible_rect("warning", $warning);
+    @include visible_rect("danger", $danger);
   }
 }
 </style>
diff --git a/ui/src/components/editor/DoorCanvas.vue b/ui/src/components/editor/DoorCanvas.vue
index e752dda..9d3c41d 100644
--- a/ui/src/components/editor/DoorCanvas.vue
+++ b/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>
diff --git a/ui/src/components/editor/PreviewDoor.vue b/ui/src/components/editor/PreviewDoor.vue
index c313db2..9fb0cd8 100644
--- a/ui/src/components/editor/PreviewDoor.vue
+++ b/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"