From e2e4847eea2ee490d433c1fd5c857b94b2d4342b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Sat, 4 Nov 2023 04:33:54 +0000
Subject: [PATCH 1/8] wip: works, but style really broken

---
 ui/src/components/calendar/SVGRect.vue | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/ui/src/components/calendar/SVGRect.vue b/ui/src/components/calendar/SVGRect.vue
index 2c410f4..2d0df6b 100644
--- a/ui/src/components/calendar/SVGRect.vue
+++ b/ui/src/components/calendar/SVGRect.vue
@@ -1,29 +1,29 @@
 <template>
   <foreignObject
+    ref="foreign_object"
     :x="Math.round(parent_aspect_ratio * rectangle.left)"
     :y="rectangle.top"
     :width="Math.round(parent_aspect_ratio * rectangle.width)"
     :height="rectangle.height"
     :style="`transform: scaleX(${1 / parent_aspect_ratio})`"
   >
+    <!-- v-if="variant !== undefined" -->
     <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 has-background-primary"
       style="height: inherit"
     >
       <slot name="default" />
     </div>
   </foreignObject>
-  <rect
-    ref="rect"
+  <!-- <rect
     v-bind="$attrs"
     :class="variant !== undefined ? variant : ''"
     :x="rectangle.left"
     :y="rectangle.top"
     :width="rectangle.width"
     :height="rectangle.height"
-  />
+  /> -->
 </template>
 
 <script lang="ts">
@@ -54,7 +54,7 @@ export default class extends Vue {
   private refreshKey = 0;
 
   declare $refs: {
-    rect: unknown;
+    foreign_object: unknown;
   };
 
   private refresh() {
@@ -70,14 +70,14 @@ export default class extends Vue {
     this.refreshKey; // read it just to force recompute on change
 
     if (
-      !(this.$refs.rect instanceof SVGRectElement) ||
-      this.$refs.rect.parentElement === null
+      !(this.$refs.foreign_object instanceof SVGForeignObjectElement) ||
+      this.$refs.foreign_object.parentElement === null
     ) {
       this.refresh();
       return 1;
     }
 
-    const parent = this.$refs.rect.parentElement;
+    const parent = this.$refs.foreign_object.parentElement;
     const result = parent.clientWidth / parent.clientHeight;
 
     // force recompute for suspicious results

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 2/8] 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"

From 2282de2528bbee7e04e132850eb535a4eb965c3c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Mon, 6 Nov 2023 00:32:56 +0000
Subject: [PATCH 3/8] SVGRect style optimization

---
 ui/src/components/calendar/SVGRect.vue | 25 +++++++------------------
 1 file changed, 7 insertions(+), 18 deletions(-)

diff --git a/ui/src/components/calendar/SVGRect.vue b/ui/src/components/calendar/SVGRect.vue
index 3f28865..ccadc0a 100644
--- a/ui/src/components/calendar/SVGRect.vue
+++ b/ui/src/components/calendar/SVGRect.vue
@@ -60,33 +60,22 @@ export default class extends Vue {
 <style lang="scss" scoped>
 @import "@/bulma-scheme";
 
-@mixin visible_rect($name, $color) {
-  &.#{$name} {
-    background-color: rgba($color, 0.3);
-    border-color: rgba($color, 0.9);
-  }
-}
-
 foreignObject > div {
-  :deep() > * {
+  &:not(.visible, :hover):deep() > * {
     display: none;
   }
 
   &.visible,
   &:hover {
-    :deep() > * {
-      display: initial;
-    }
-
     border-width: 3px;
     border-style: solid;
 
-    @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);
+    @each $name, $color in $advent22-colors {
+      &.#{$name} {
+        background-color: rgba($color, 0.3);
+        border-color: rgba($color, 0.9);
+      }
+    }
   }
 }
 </style>

From 8cd4e922ffe8bb49ce612477c063342158adfb65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Mon, 6 Nov 2023 00:37:03 +0000
Subject: [PATCH 4/8] unneeded ref in SVGRect

---
 ui/src/components/calendar/SVGRect.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/src/components/calendar/SVGRect.vue b/ui/src/components/calendar/SVGRect.vue
index ccadc0a..81a600e 100644
--- a/ui/src/components/calendar/SVGRect.vue
+++ b/ui/src/components/calendar/SVGRect.vue
@@ -1,6 +1,5 @@
 <template>
   <foreignObject
-    ref="foreign_object"
     :x="Math.round(store.calendar_aspect_ratio * rectangle.left)"
     :y="rectangle.top"
     :width="Math.round(store.calendar_aspect_ratio * rectangle.width)"

From c2892f6358b9098fc3b6d43d93f0425a0ebaeaff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Thu, 9 Nov 2023 17:51:56 +0000
Subject: [PATCH 5/8] wip: Fix for DoorCanvas

- PreviewDoor still broken
---
 ui/src/components/editor/DoorCanvas.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/editor/DoorCanvas.vue b/ui/src/components/editor/DoorCanvas.vue
index 9d3c41d..4c55a7c 100644
--- a/ui/src/components/editor/DoorCanvas.vue
+++ b/ui/src/components/editor/DoorCanvas.vue
@@ -147,8 +147,12 @@ export default class extends Vue {
 }
 </script>
 
-<style scoped>
-* {
+<style lang="scss" scoped>
+svg {
   cursor: crosshair;
+
+  * {
+    pointer-events: none;
+  }
 }
 </style>

From f9111e7a451276bc8cbd7b95bdac9ddf6cffea4d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Thu, 9 Nov 2023 18:03:10 +0000
Subject: [PATCH 6/8] Fix for PreviewDoor

---
 ui/src/components/editor/PreviewDoor.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/components/editor/PreviewDoor.vue b/ui/src/components/editor/PreviewDoor.vue
index 9fb0cd8..42c5354 100644
--- a/ui/src/components/editor/PreviewDoor.vue
+++ b/ui/src/components/editor/PreviewDoor.vue
@@ -53,7 +53,7 @@ export default class extends Vue {
   }
 
   public on_click(event: MouseEvent) {
-    if (event.target === null || !(event.target instanceof SVGRectElement)) {
+    if (event.target === null || !(event.target instanceof HTMLDivElement)) {
       return;
     }
 

From 3b22f09a130b07213a189306c4c38b948d36fd59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Thu, 9 Nov 2023 18:31:07 +0000
Subject: [PATCH 7/8] CalendarDoor hover title

---
 ui/src/components/calendar/CalendarDoor.vue | 1 +
 ui/src/components/calendar/SVGRect.vue      | 1 +
 2 files changed, 2 insertions(+)

diff --git a/ui/src/components/calendar/CalendarDoor.vue b/ui/src/components/calendar/CalendarDoor.vue
index 29c85b0..a50bd18 100644
--- a/ui/src/components/calendar/CalendarDoor.vue
+++ b/ui/src/components/calendar/CalendarDoor.vue
@@ -4,6 +4,7 @@
     variant="primary"
     :visible="store.is_touch_device || force_visible"
     :rectangle="door.position"
+    :title="$advent22.name_door(door.day)"
   >
     <div class="has-text-danger">{{ door.day }}</div>
   </SVGRect>
diff --git a/ui/src/components/calendar/SVGRect.vue b/ui/src/components/calendar/SVGRect.vue
index 81a600e..ae71394 100644
--- a/ui/src/components/calendar/SVGRect.vue
+++ b/ui/src/components/calendar/SVGRect.vue
@@ -10,6 +10,7 @@
       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 ${extra_classes}`"
       style="height: inherit"
+      v-bind="$attrs"
     >
       <slot name="default" />
     </div>

From e5364ff94d32443fab548db144c5d5555c8efff7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Thu, 9 Nov 2023 18:48:13 +0000
Subject: [PATCH 8/8] move "hover title" to Calendar instead

---
 ui/src/components/Calendar.vue              | 1 +
 ui/src/components/calendar/CalendarDoor.vue | 1 -
 ui/src/components/calendar/SVGRect.vue      | 7 ++++++-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/Calendar.vue b/ui/src/components/Calendar.vue
index fff96af..6fdf94b 100644
--- a/ui/src/components/Calendar.vue
+++ b/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>
diff --git a/ui/src/components/calendar/CalendarDoor.vue b/ui/src/components/calendar/CalendarDoor.vue
index a50bd18..29c85b0 100644
--- a/ui/src/components/calendar/CalendarDoor.vue
+++ b/ui/src/components/calendar/CalendarDoor.vue
@@ -4,7 +4,6 @@
     variant="primary"
     :visible="store.is_touch_device || force_visible"
     :rectangle="door.position"
-    :title="$advent22.name_door(door.day)"
   >
     <div class="has-text-danger">{{ door.day }}</div>
   </SVGRect>
diff --git a/ui/src/components/calendar/SVGRect.vue b/ui/src/components/calendar/SVGRect.vue
index ae71394..84086a0 100644
--- a/ui/src/components/calendar/SVGRect.vue
+++ b/ui/src/components/calendar/SVGRect.vue
@@ -10,7 +10,7 @@
       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 ${extra_classes}`"
       style="height: inherit"
-      v-bind="$attrs"
+      :title="title"
     >
       <slot name="default" />
     </div>
@@ -38,6 +38,10 @@ type BulmaVariant =
       default: false,
     },
     rectangle: Rectangle,
+    title: {
+      type: String,
+      required: false,
+    },
   },
 })
 export default class extends Vue {
@@ -46,6 +50,7 @@ export default class extends Vue {
   private variant!: BulmaVariant;
   private visible!: boolean;
   public rectangle!: Rectangle;
+  public title?: string;
 
   public get extra_classes(): string {
     let result = this.variant;