Merge branch 'wip/rect_rework' into develop

ui/src/components/Calendar.vue

@@ -2,9 +2,21 @@
   <MultiModal @handle="modal_handle" />
 
   <figure>
-    <figcaption class="has-text-primary-dark">
+    <div class="level is-mobile mb-2">
+      <div class="level-left">
+        <figcaption class="level-item has-text-primary-dark">
           {{ figure_caption }}
         </figcaption>
+      </div>
+      <div class="level-right">
+        <BulmaButton
+          class="level-item tag is-link"
+          text="Türchen anzeigen"
+          :icon="'fa-solid fa-toggle-' + (show_doors ? 'on' : 'off')"
+          @click.left="show_doors = !show_doors"
+        />
+      </div>
+    </div>
     <div class="image is-unselectable">
       <img :src="$advent22.api_url('user/background_image')" />
       <ThouCanvas>
@@ -12,6 +24,7 @@
           v-for="(door, index) in doors"
           :key="`door-${index}`"
           :door="door"
+          :visible="show_doors"
           @doorClick="door_click"
           @doorSuccess="door_success"
           @doorFailure="door_failure"
@@ -30,12 +43,14 @@ import { Door } from "@/lib/door";
 import { Options, Vue } from "vue-class-component";
 
 import MultiModal from "./MultiModal.vue";
+import BulmaButton from "./bulma/Button.vue";
 import CalendarDoor from "./calendar/CalendarDoor.vue";
 import ThouCanvas from "./calendar/ThouCanvas.vue";
 
 @Options({
   components: {
     MultiModal,
+    BulmaButton,
     ThouCanvas,
     CalendarDoor,
   },
@@ -47,6 +62,7 @@ export default class extends Vue {
   public readonly doors!: Door[];
   private readonly idle_caption = "Finde die Türchen auf dem Adventskalender!";
 
+  public show_doors = false;
   private multi_modal?: MultiModal;
   public figure_caption = this.idle_caption;
 

ui/src/components/calendar/CalendarDoor.vue

@@ -1,5 +1,12 @@
 <template>
-  <SVGRect :rectangle="door.position" @click.left="on_click" />
+  <SVGRect
+    style="cursor: pointer"
+    :variant="visible ? 'primary' : undefined"
+    :rectangle="door.position"
+    @click.left="on_click"
+  >
+    <div class="has-text-danger">{{ door.day }}</div>
+  </SVGRect>
 </template>
 
 <script lang="ts">
@@ -14,11 +21,16 @@ import SVGRect from "./SVGRect.vue";
   },
   props: {
     door: Door,
+    visible: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ["doorClick", "doorSuccess", "doorFailure"],
 })
 export default class extends Vue {
   public door!: Door;
+  public visible!: boolean;
 
   public on_click() {
     this.$emit("doorClick");
@@ -32,9 +44,3 @@ export default class extends Vue {
   }
 }
 </script>
-
-<style scoped>
-rect {
-  cursor: pointer;
-}
-</style>

ui/src/components/calendar/SVGRect.vue

@@ -1,5 +1,22 @@
 <template>
+  <foreignObject
+    :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})`"
+  >
+    <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"
+    >
+      <slot name="default" />
+    </div>
+  </foreignObject>
   <rect
+    ref="rect"
+    v-bind="$attrs"
     :class="variant !== undefined ? variant : ''"
     :x="rectangle.left"
     :y="rectangle.top"
@@ -12,7 +29,13 @@
 import { Rectangle } from "@/lib/rectangle";
 import { Options, Vue } from "vue-class-component";
 
-type RectColor = "primary" | "link" | "info" | "success" | "warning" | "danger";
+type BulmaVariant =
+  | "primary"
+  | "link"
+  | "info"
+  | "success"
+  | "warning"
+  | "danger";
 
 @Options({
   props: {
@@ -24,14 +47,56 @@ type RectColor = "primary" | "link" | "info" | "success" | "warning" | "danger";
   },
 })
 export default class extends Vue {
-  public variant?: RectColor;
+  public variant?: BulmaVariant;
   public rectangle!: Rectangle;
+
+  private refreshKey = 0;
+
+  declare $refs: {
+    rect: 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.rect instanceof SVGRectElement) ||
+      this.$refs.rect.parentElement === null
+    ) {
+      this.refresh();
+      return 1;
+    }
+
+    const parent = this.$refs.rect.parentElement;
+    const result = parent.clientWidth / parent.clientHeight;
+
+    // force recompute for suspicious results
+    if (result === 0 || result === Infinity) {
+      this.refresh();
+      return 1;
+    }
+
+    return result;
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 @import "@/bulma-vars";
 
+foreignObject > div {
+  height: inherit;
+}
+
 rect {
   fill: transparent;
   fill-opacity: 0.3;

ui/src/components/editor/DoorCanvas.vue

@@ -8,11 +8,12 @@
     @click.middle="remove_rect"
     @dblclick.left="remove_rect"
   >
-    <SVGRect
+    <CalendarDoor
-      v-for="(rect, index) in rectangles"
+      v-for="(door, index) in doors"
-      variant="primary"
+      :key="`door-${index}`"
-      :key="`rect-${index}`"
+      :door="door"
-      :rectangle="rect"
+      style="cursor: inherit"
+      visible
     />
     <SVGRect
       v-if="preview_visible"
@@ -23,10 +24,12 @@
 </template>
 
 <script lang="ts">
+import { Door } from "@/lib/door";
 import { Rectangle } from "@/lib/rectangle";
 import { Vector2D } from "@/lib/vector2d";
 import { Options, Vue } from "vue-class-component";
 
+import CalendarDoor from "../calendar/CalendarDoor.vue";
 import SVGRect from "../calendar/SVGRect.vue";
 import ThouCanvas from "../calendar/ThouCanvas.vue";
 
@@ -38,34 +41,34 @@ enum CanvasState {
 
 @Options({
   components: {
-    ThouCanvas,
+    CalendarDoor,
     SVGRect,
+    ThouCanvas,
   },
   props: {
-    rectangles: Array,
+    doors: Array,
   },
-  emits: ["draw", "drag", "remove"],
 })
 export default class extends Vue {
   private readonly min_rect_area = 300;
   private state = CanvasState.Idle;
   public preview_rect = new Rectangle();
-  private drag_rect?: Rectangle;
+  private drag_door?: Door;
   private drag_origin = new Vector2D();
-  public rectangles!: Rectangle[];
+  public doors!: Door[];
 
   public get preview_visible(): boolean {
     return this.state !== CanvasState.Idle;
   }
 
-  private pop_rectangle(point: Vector2D): Rectangle | undefined {
+  private pop_door(point: Vector2D): Door | undefined {
-    const idx = this.rectangles.findIndex((rect) => rect.contains(point));
+    const idx = this.doors.findIndex((rect) => rect.position.contains(point));
 
     if (idx === -1) {
       return;
     }
 
-    return this.rectangles.splice(idx, 1)[0];
+    return this.doors.splice(idx, 1)[0];
   }
 
   public draw_start(event: MouseEvent, point: Vector2D) {
@@ -88,8 +91,7 @@ export default class extends Vue {
       return;
     }
 
-    this.rectangles.push(this.preview_rect);
+    this.doors.push(new Door(this.preview_rect));
-    this.$emit("draw", this.preview_rect);
   }
 
   public drag_start(event: MouseEvent, point: Vector2D) {
@@ -97,16 +99,16 @@ export default class extends Vue {
       return;
     }
 
-    this.drag_rect = this.pop_rectangle(point);
+    this.drag_door = this.pop_door(point);
 
-    if (this.drag_rect === undefined) {
+    if (this.drag_door === undefined) {
       return;
     }
 
     this.state = CanvasState.Dragging;
     this.drag_origin = point;
 
-    this.preview_rect = this.drag_rect;
+    this.preview_rect = this.drag_door.position;
   }
 
   public drag_finish() {
@@ -118,8 +120,7 @@ export default class extends Vue {
     }
 
     this.state = CanvasState.Idle;
-    this.rectangles.push(this.preview_rect);
+    this.doors.push(new Door(this.preview_rect, this.drag_door!.day));
-    this.$emit("drag", this.drag_rect, this.preview_rect);
   }
 
   public on_mousemove(event: MouseEvent, point: Vector2D) {
@@ -129,9 +130,9 @@ export default class extends Vue {
 
     if (this.state === CanvasState.Drawing) {
       this.preview_rect = this.preview_rect.update(undefined, point);
-    } else if (this.state === CanvasState.Dragging && this.drag_rect) {
+    } else if (this.state === CanvasState.Dragging && this.drag_door) {
       const movement = point.minus(this.drag_origin);
-      this.preview_rect = this.drag_rect.move(movement);
+      this.preview_rect = this.drag_door.position.move(movement);
     }
   }
 
@@ -140,13 +141,7 @@ export default class extends Vue {
       return;
     }
 
-    const rect = this.pop_rectangle(point);
+    this.pop_door(point);
-
-    if (rect === undefined) {
-      return;
-    }
-
-    this.$emit("remove", rect);
   }
 }
 </script>

ui/src/components/editor/DoorPlacer.vue

@@ -10,64 +10,26 @@
     </div>
     <figure class="image is-unselectable">
       <img :src="$advent22.api_url('user/background_image')" />
-      <RectangleCanvas
+      <DoorCanvas :doors="doors" />
-        :rectangles="rectangles"
-        @draw="on_draw"
-        @drag="on_drag"
-        @remove="on_remove"
-      />
     </figure>
   </div>
 </template>
 
 <script lang="ts">
 import { Door } from "@/lib/door";
-import { Rectangle } from "@/lib/rectangle";
 import { Options, Vue } from "vue-class-component";
 
-import RectangleCanvas from "./RectangleCanvas.vue";
+import DoorCanvas from "./DoorCanvas.vue";
 
 @Options({
   components: {
-    RectangleCanvas,
+    DoorCanvas,
   },
   props: {
     doors: Array,
   },
 })
 export default class extends Vue {
-  private doors!: Door[];
+  public doors!: Door[];
-
-  public get rectangles() {
-    return this.doors.map((door) => door.position);
-  }
-
-  public on_draw(position: Rectangle) {
-    this.doors.push(new Door(position));
-  }
-
-  public find_door_index(position: Rectangle): number {
-    return this.doors.findIndex((door) => door.position.equals(position));
-  }
-
-  public on_drag(old_pos: Rectangle, new_pos: Rectangle) {
-    const idx = this.find_door_index(old_pos);
-
-    if (idx === -1) {
-      return;
-    }
-
-    this.doors[idx].position = new_pos;
-  }
-
-  public on_remove(position: Rectangle) {
-    const idx = this.find_door_index(position);
-
-    if (idx === -1) {
-      return;
-    }
-
-    this.doors.splice(idx, 1);
-  }
 }
 </script>

ui/src/components/editor/PreviewDoor.vue

@@ -1,18 +1,8 @@
 <template>
   <SVGRect
+    style="cursor: text"
     :rectangle="door.position"
     :variant="editing ? 'success' : 'primary'"
-  />
-  <foreignObject
-    :x="Math.round(parent_aspect_ratio * door.position.left)"
-    :y="door.position.top"
-    :width="Math.round(parent_aspect_ratio * door.position.width)"
-    :height="door.position.height"
-    :style="`transform: scaleX(${1 / parent_aspect_ratio})`"
-  >
-    <div
-      xmlns="http://www.w3.org/1999/xhtml"
-      class="px-4 is-flex is-align-items-center is-justify-content-center"
     @click.left="on_click"
   >
     <input
@@ -25,11 +15,10 @@
       placeholder="Tag"
       @keydown="on_keydown"
     />
-      <div v-else class="is-size-1 has-text-weight-bold has-text-danger">
+    <div v-else class="has-text-danger">
       {{ door.day > 0 ? door.day : "*" }}
     </div>
-    </div>
+  </SVGRect>
-  </foreignObject>
 </template>
 
 <script lang="ts">
@@ -52,48 +41,18 @@ export default class extends Vue {
 
   public day_str = "";
   public editing = false;
-  private refreshKey = 0;
 
   declare $refs: {
     day_input: HTMLInputElement | 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.$el instanceof Text) || this.$el.parentElement === null) {
-      this.refresh();
-      return 1;
-    }
-
-    const parent = this.$el.parentElement;
-    const result = parent.clientWidth / parent.clientHeight;
-
-    // force recompute for suspicious results
-    if (result === 0 || result === Infinity) {
-      this.refresh();
-      return 1;
-    }
-
-    return result;
-  }
-
   private toggle_editing() {
     this.day_str = String(this.door.day);
     this.editing = !this.editing;
   }
 
   public on_click(event: MouseEvent) {
-    if (event.target === null || !(event.target instanceof HTMLDivElement)) {
+    if (event.target === null || !(event.target instanceof SVGRectElement)) {
       return;
     }
 
@@ -131,13 +90,3 @@ export default class extends Vue {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-foreignObject {
-  cursor: text;
-
-  > div {
-    height: inherit;
-  }
-}
-</style>