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

ui/src/components/MultiModal.vue

@@ -17,6 +17,11 @@
         </figure>
       </template>
     </div>
+
+    <button
+      v-if="!progress"
+      class="modal-close is-large has-background-primary"
+    />
   </div>
 </template>
 

ui/src/components/TouchButton.vue

@@ -1,10 +1,12 @@
 <template>
+  <span>Eingabemodus:&nbsp;</span>
   <BulmaButton
+    v-bind="$attrs"
     :icon="
       'fa-solid fa-' +
       (store.is_touch_device ? 'hand-pointer' : 'arrow-pointer')
     "
-    text="Eingabemodus"
+    :text="store.is_touch_device ? 'Touch' : 'Desktop'"
     @click.left="store.toggle_touch_device"
   />
 </template>

ui/src/components/calendar/CalendarDoor.vue

@@ -3,8 +3,8 @@
     style="cursor: pointer"
     :variant="visible || hovered ? 'primary' : undefined"
     :rectangle="door.position"
-    @mouseover="hovered = true"
-    @mouseout="hovered = false"
+    @mouseenter="hovered = true"
+    @mouseleave="hovered = false"
   >
     <div class="has-text-danger">{{ door.day }}</div>
   </SVGRect>

ui/src/components/calendar/SVGRect.vue

@@ -1,11 +1,11 @@
 <template>
   <foreignObject
     ref="foreign_object"
-    :x="Math.round(parent_aspect_ratio * rectangle.left)"
+    :x="Math.round(store.calendar_aspect_ratio * rectangle.left)"
     :y="rectangle.top"
-    :width="Math.round(parent_aspect_ratio * rectangle.width)"
+    :width="Math.round(store.calendar_aspect_ratio * rectangle.width)"
     :height="rectangle.height"
-    :style="`transform: scaleX(${1 / parent_aspect_ratio})`"
+    :style="`transform: scaleX(${1 / store.calendar_aspect_ratio})`"
   >
     <!-- v-if="variant !== undefined" -->
     <div
@@ -28,6 +28,7 @@
 
 <script lang="ts">
 import { Rectangle } from "@/lib/rectangle";
+import { advent22Store } from "@/plugins/store";
 import { Options, Vue } from "vue-class-component";
 
 type BulmaVariant =
@@ -51,43 +52,7 @@ export default class extends Vue {
   public variant?: BulmaVariant;
   public rectangle!: Rectangle;
 
-  private refreshKey = 0;
-
-  declare $refs: {
-    foreign_object: unknown;
-  };
-
-  private refresh() {
-    window.setTimeout(() => {
-      // don't loop endlessly
-      if (this.refreshKey < 10000) {
-        this.refreshKey++;
-      }
-    }, 100);
-  }
-
-  public get parent_aspect_ratio(): number {
-    this.refreshKey; // read it just to force recompute on change
-
-    if (
-      !(this.$refs.foreign_object instanceof SVGForeignObjectElement) ||
-      this.$refs.foreign_object.parentElement === null
-    ) {
-      this.refresh();
-      return 1;
-    }
-
-    const parent = this.$refs.foreign_object.parentElement;
-    const result = parent.clientWidth / parent.clientHeight;
-
-    // force recompute for suspicious results
-    if (result === 0 || result === Infinity) {
-      this.refresh();
-      return 1;
-    }
-
-    return result;
-  }
+  public readonly store = advent22Store();
 }
 </script>
 

ui/src/components/calendar/ThouCanvas.vue

@@ -17,6 +17,7 @@
 
 <script lang="ts">
 import { Vector2D } from "@/lib/vector2d";
+import { advent22Store } from "@/plugins/store";
 import { Options, Vue } from "vue-class-component";
 
 function get_event_thous(event: MouseEvent): Vector2D {
@@ -56,6 +57,17 @@ function mouse_event_validator(event: object, point: object): boolean {
   },
 })
 export default class extends Vue {
+  public readonly store = advent22Store();
+
+  public mounted(): void {
+    new ResizeObserver(([first, ...rest]) => {
+      if (rest.length > 0)
+        console.warn(`Unexpected ${rest.length} extra entries!`);
+
+      this.store.set_calendar_aspect_ratio(first.contentRect);
+    }).observe(this.$el);
+  }
+
   public transform_mouse_event(event: MouseEvent) {
     const point = get_event_thous(event);
     this.$emit(event.type, event, point);

ui/src/plugins/store.ts

@@ -3,16 +3,23 @@ import { Advent22 } from "@/plugins/advent22";
 import { AxiosBasicCredentials } from "axios";
 import { acceptHMRUpdate, defineStore } from "pinia";
 
-const check_touch_device = () => window.matchMedia("(any-hover: none)").matches;
-const empty_creds = () => ["", ""] as Credentials;
+declare global {
+  interface Navigator {
+    readonly msMaxTouchPoints: number;
+  }
+}
 
 export const advent22Store = defineStore({
   id: "advent22",
 
   state: () => ({
     advent22: {} as Advent22,
-    api_creds: empty_creds(),
-    is_touch_device: check_touch_device(),
+    api_creds: ["", ""] as Credentials,
+    is_touch_device:
+      window.matchMedia("(any-hover: none)").matches ||
+      "ontouchstart" in window ||
+      navigator.maxTouchPoints > 0 ||
+      navigator.msMaxTouchPoints > 0,
     is_admin: false,
     site_config: {
       title: document.title,
@@ -20,6 +27,7 @@ export const advent22Store = defineStore({
       content: "",
       footer: "",
     } as SiteConfigModel,
+    calendar_aspect_ratio: 1,
     user_doors: [] as DoorsSaved,
     next_door_target: null as number | null,
   }),
@@ -70,7 +78,7 @@ export const advent22Store = defineStore({
         .catch(advent22.alert_user_error);
     },
 
-    login(creds: Credentials = empty_creds()): Promise<boolean> {
+    login(creds: Credentials): Promise<boolean> {
       this.api_creds = creds;
 
       return new Promise<boolean>((resolve, reject) => {
@@ -85,16 +93,20 @@ export const advent22Store = defineStore({
     },
 
     logout(): Promise<boolean> {
-      return this.login();
-    },
-
-    set_touch_device(state: boolean = check_touch_device()): void {
-      this.is_touch_device = state;
+      return this.login(["", ""]);
     },
 
     toggle_touch_device(): void {
       this.is_touch_device = !this.is_touch_device;
     },
+
+    set_calendar_aspect_ratio(rect: DOMRectReadOnly): void {
+      const result = rect.width / rect.height;
+
+      // filter suspicious results
+      if (result !== 0 && isFinite(result) && !isNaN(result))
+        this.calendar_aspect_ratio = result;
+    },
   },
 });