VSCode: "octref.vetur" -> "Vue.volar"

ui/.devcontainer/devcontainer.json

@@ -23,8 +23,8 @@
 			"extensions": [
 				"dbaeumer.vscode-eslint",
 				"mhutchie.git-graph",
-				"octref.vetur",
-				"Syler.sass-indented"
+				"Syler.sass-indented",
+				"Vue.volar"
 			]
 		}
 	},

ui/src/App.vue

@@ -11,12 +11,7 @@
 
       <DoorMapEditor />
 
-      <CalendarDoor
-        v-for="(_, index) in 24"
-        :key="index"
-        :day="index"
-        @openDoor="open_calendar_door"
-      />
+      <CalendarDoor v-for="(_, index) in 24" :key="index" :day="index" @openDoor="open_calendar_door" />
     </div>
 
     <div class="section">
@@ -65,7 +60,7 @@ export default class extends Vue {
     );
   }
 
-  private open_calendar_door(image_src: string) {
+  public open_calendar_door(image_src: string) {
     this.$refs.image_modal.show_src(image_src);
   }
 }

ui/src/components/BulmaBreadcrumbs.vue

@@ -1,12 +1,8 @@
 <template>
   <nav class="breadcrumb has-succeeds-separator">
     <ul>
-      <li
-        v-for="(step, index) in steps"
-        :key="`step-${index}`"
-        :class="modelValue === index ? 'is-active' : ''"
-        @click="change_step(index)"
-      >
+      <li v-for="(step, index) in steps" :key="`step-${index}`" :class="modelValue === index ? 'is-active' : ''"
+        @click="change_step(index)">
         <a>
           <span class="icon is-small">
             <font-awesome-icon :icon="step.icon" />
@@ -34,10 +30,10 @@ export interface Step {
   emits: ["update:modelValue"],
 })
 export default class extends Vue {
-  private steps!: Step[];
-  private modelValue!: number;
+  public steps!: Step[];
+  public modelValue!: number;
 
-  private change_step(next_step: number) {
+  public change_step(next_step: number) {
     if (next_step === this.modelValue) {
       return;
     }

ui/src/components/CalendarDoor.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import { Vue, Options } from "vue-class-component";
+import { Options, Vue } from "vue-class-component";
 
 @Options({
   props: {
@@ -13,7 +13,7 @@ import { Vue, Options } from "vue-class-component";
 export default class extends Vue {
   day!: number;
 
-  private on_click() {
+  public on_click() {
     this.$advent22.api_get_blob(`days/image/${this.day}`, (data) => {
       this.$emit("openDoor", data);
     });

ui/src/components/DoorMapEditor.vue

@@ -11,12 +11,12 @@
 </template>
 
 <script lang="ts">
-import { Vue, Options } from "vue-class-component";
+import { Options, Vue } from "vue-class-component";
 import { Door } from "./door_map/calendar";
 
 import BulmaBreadcrumbs, { Step } from "./BulmaBreadcrumbs.vue";
-import DoorPlacer from "./door_map/DoorPlacer.vue";
 import DoorChooser from "./door_map/DoorChooser.vue";
+import DoorPlacer from "./door_map/DoorPlacer.vue";
 
 @Options({
   components: {
@@ -26,12 +26,12 @@ import DoorChooser from "./door_map/DoorChooser.vue";
   },
 })
 export default class extends Vue {
-  private readonly steps: Step[] = [
+  public readonly steps: Step[] = [
     { label: "Platzieren", icon: "fa-solid fa-crosshairs" },
     { label: "Ordnen", icon: "fa-solid fa-list-ol" },
     { label: "Überprüfen", icon: "fa-solid fa-check" },
   ];
-  private current_step = 0;
-  private doors: Door[] = [];
+  public current_step = 0;
+  public doors: Door[] = [];
 }
 </script>

ui/src/components/ImageModal.vue

@@ -14,7 +14,7 @@
 import { Vue } from "vue-class-component";
 
 export default class extends Vue {
-  private active = false;
+  public active = false;
   public image_src = "";
 
   public created() {

ui/src/components/LoginModal.vue

@@ -40,9 +40,9 @@
 import { Vue } from "vue-class-component";
 
 export default class extends Vue {
-  private active = false;
-  private username = "";
-  private password = "";
+  public active = false;
+  public username = "";
+  public password = "";
 
   public created() {
     window.addEventListener("keydown", (e) => {
@@ -57,7 +57,7 @@ export default class extends Vue {
     this.password = "";
   }
 
-  private submit() {
+  public submit() {
     this.$advent22.set_api_auth(this.username, this.password);
     this.set_active(false);
   }

ui/src/components/door_map/DoorChooser.vue

@@ -13,11 +13,7 @@
     <figure class="image">
       <img :src="$advent22.api_url('general/background')" />
       <ThouCanvas>
-        <PreviewDoor
-          v-for="(_, index) in doors"
-          :key="`door-${index}`"
-          v-model:door="doors[index]"
-        />
+        <PreviewDoor v-for="(_, index) in doors" :key="`door-${index}`" v-model:door="doors[index]" />
       </ThouCanvas>
     </figure>
   </section>
@@ -41,7 +37,7 @@ import PreviewDoor from "./PreviewDoor.vue";
   emits: ["update:doors"],
 })
 export default class extends Vue {
-  private doors!: Door[];
+  public doors!: Door[];
 
   public beforeUnmount() {
     this.$emit("update:doors", this.doors);
@@ -50,7 +46,7 @@ export default class extends Vue {
 </script>
 
 <style lang="scss" scoped>
-section > figure {
+section>figure {
   user-select: none;
 }
 </style>

ui/src/components/door_map/DoorPlacer.vue

@@ -10,21 +10,16 @@
     </div>
     <figure class="image">
       <img :src="$advent22.api_url('general/background')" />
-      <RectangleCanvas
-        :rectangles="rectangles"
-        @draw="on_draw"
-        @drag="on_drag"
-        @remove="on_remove"
-      />
+      <RectangleCanvas :rectangles="rectangles" @draw="on_draw" @drag="on_drag" @remove="on_remove" />
     </figure>
   </section>
 </template>
 
 <script lang="ts">
-import { Vue, Options } from "vue-class-component";
+import { Options, Vue } from "vue-class-component";
 import { Rectangle } from "../rects/rectangles";
-import { Door } from "./calendar";
 import RectangleCanvas from "./RectangleCanvas.vue";
+import { Door } from "./calendar";
 
 @Options({
   components: {
@@ -38,19 +33,19 @@ import RectangleCanvas from "./RectangleCanvas.vue";
 export default class extends Vue {
   private doors!: Door[];
 
-  private get rectangles() {
+  public get rectangles() {
     return this.doors.map((door) => door.position);
   }
 
-  private on_draw(position: Rectangle) {
+  public on_draw(position: Rectangle) {
     this.doors.push(new Door(position));
   }
 
-  private find_door_index(position: Rectangle): number {
+  public find_door_index(position: Rectangle): number {
     return this.doors.findIndex((door) => door.position.equals(position));
   }
 
-  private on_drag(old_pos: Rectangle, new_pos: Rectangle) {
+  public on_drag(old_pos: Rectangle, new_pos: Rectangle) {
     const idx = this.find_door_index(old_pos);
 
     if (idx === -1) {
@@ -60,7 +55,7 @@ export default class extends Vue {
     this.doors[idx].position = new_pos;
   }
 
-  private on_remove(position: Rectangle) {
+  public on_remove(position: Rectangle) {
     const idx = this.find_door_index(position);
 
     if (idx === -1) {
@@ -77,7 +72,7 @@ export default class extends Vue {
 </script>
 
 <style lang="scss" scoped>
-section > figure {
+section>figure {
   user-select: none;
 }
 </style>

ui/src/components/door_map/PreviewDoor.vue

@@ -1,27 +1,12 @@
 <template>
   <SVGRect :rectangle="door.position" :focused="editing" />
-  <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="is-flex is-align-items-center is-justify-content-center"
-      @click.left="on_click"
-    >
-      <input
-        v-if="editing"
-        v-model="day_str"
-        ref="day_input"
-        class="input is-large"
-        type="number"
-        min="-1"
-        placeholder="Tag"
-        @keydown="on_keydown"
-      />
+  <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="is-flex is-align-items-center is-justify-content-center"
+      @click.left="on_click">
+      <input v-if="editing" v-model="day_str" ref="day_input" class="input is-large" type="number" min="-1"
+        placeholder="Tag" @keydown="on_keydown" />
       <div v-else class="is-size-1 has-text-weight-bold">
         <template v-if="door.day >= 0">{{ door.day }}</template>
       </div>
@@ -49,11 +34,11 @@ import SVGRect from "../rects/SVGRect.vue";
   emits: ["update:door"],
 })
 export default class extends Vue {
-  private door!: Door;
+  public door!: Door;
   private editable!: boolean;
 
-  private day_str = "";
-  private editing = false;
+  public day_str = "";
+  public editing = false;
   private refreshKey = 0;
 
   declare $refs: {
@@ -69,7 +54,7 @@ export default class extends Vue {
     }, 100);
   }
 
-  private get parent_aspect_ratio(): number {
+  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) {
@@ -99,7 +84,7 @@ export default class extends Vue {
     this.editing = this.editable && !this.editing;
   }
 
-  private on_click(event: MouseEvent) {
+  public on_click(event: MouseEvent) {
     if (event.target === null || !(event.target instanceof HTMLDivElement)) {
       return;
     }
@@ -121,7 +106,7 @@ export default class extends Vue {
     this.toggle_editing();
   }
 
-  private on_keydown(event: KeyboardEvent) {
+  public on_keydown(event: KeyboardEvent) {
     if (!this.editing) {
       return;
     }
@@ -147,7 +132,7 @@ export default class extends Vue {
 foreignObject {
   cursor: pointer;
 
-  > div {
+  >div {
     color: red;
     height: inherit;
   }

ui/src/components/door_map/RectangleCanvas.vue

@@ -1,27 +1,16 @@
 <template>
-  <ThouCanvas
-    @mousedown.left="draw_start"
-    @mouseup.left="draw_finish"
-    @mousedown.right="drag_start"
-    @mouseup.right="drag_finish"
-    @mousemove="on_mousemove"
-    @click.middle="remove_rect"
-    @dblclick.left="remove_rect"
-  >
-    <SVGRect
-      v-for="(rect, index) in rectangles"
-      :key="`rect-${index}`"
-      :rectangle="rect"
-    />
+  <ThouCanvas @mousedown.left="draw_start" @mouseup.left="draw_finish" @mousedown.right="drag_start"
+    @mouseup.right="drag_finish" @mousemove="on_mousemove" @click.middle="remove_rect" @dblclick.left="remove_rect">
+    <SVGRect v-for="(rect, index) in rectangles" :key="`rect-${index}`" :rectangle="rect" />
     <SVGRect v-if="preview_visible" :focused="true" :rectangle="preview_rect" />
   </ThouCanvas>
 </template>
 
 <script lang="ts">
-import { Vue, Options } from "vue-class-component";
-import { Vector2D, Rectangle } from "../rects/rectangles";
-import ThouCanvas from "../rects/ThouCanvas.vue";
+import { Options, Vue } from "vue-class-component";
 import SVGRect from "../rects/SVGRect.vue";
+import ThouCanvas from "../rects/ThouCanvas.vue";
+import { Rectangle, Vector2D } from "../rects/rectangles";
 
 enum CanvasState {
   Idle,
@@ -42,12 +31,12 @@ enum CanvasState {
 export default class extends Vue {
   private readonly min_rect_area = 300;
   private state = CanvasState.Idle;
-  private preview_rect = new Rectangle();
+  public preview_rect = new Rectangle();
   private drag_rect?: Rectangle;
   private drag_origin = new Vector2D();
-  private rectangles!: Rectangle[];
+  public rectangles!: Rectangle[];
 
-  private get preview_visible(): boolean {
+  public get preview_visible(): boolean {
     return this.state !== CanvasState.Idle;
   }
 
@@ -61,7 +50,7 @@ export default class extends Vue {
     return this.rectangles.splice(idx, 1)[0];
   }
 
-  private draw_start(event: MouseEvent, point: Vector2D) {
+  public draw_start(event: MouseEvent, point: Vector2D) {
     if (this.preview_visible) {
       return;
     }
@@ -70,7 +59,7 @@ export default class extends Vue {
     this.preview_rect = new Rectangle(point, point);
   }
 
-  private draw_finish() {
+  public draw_finish() {
     if (this.state !== CanvasState.Drawing || this.preview_rect === undefined) {
       return;
     }
@@ -85,7 +74,7 @@ export default class extends Vue {
     this.$emit("draw", this.preview_rect);
   }
 
-  private drag_start(event: MouseEvent, point: Vector2D) {
+  public drag_start(event: MouseEvent, point: Vector2D) {
     if (this.preview_visible) {
       return;
     }
@@ -102,7 +91,7 @@ export default class extends Vue {
     this.preview_rect = this.drag_rect;
   }
 
-  private drag_finish() {
+  public drag_finish() {
     if (
       this.state !== CanvasState.Dragging ||
       this.preview_rect === undefined
@@ -115,7 +104,7 @@ export default class extends Vue {
     this.$emit("drag", this.drag_rect, this.preview_rect);
   }
 
-  private on_mousemove(event: MouseEvent, point: Vector2D) {
+  public on_mousemove(event: MouseEvent, point: Vector2D) {
     if (this.preview_rect === undefined) {
       return;
     }
@@ -128,7 +117,7 @@ export default class extends Vue {
     }
   }
 
-  private remove_rect(event: MouseEvent, point: Vector2D) {
+  public remove_rect(event: MouseEvent, point: Vector2D) {
     if (this.preview_visible) {
       return;
     }

ui/src/components/rects/SVGRect.vue

@@ -1,15 +1,10 @@
 <template>
-  <rect
-    :class="focused ? 'focus' : ''"
-    :x="rectangle.left"
-    :y="rectangle.top"
-    :width="rectangle.width"
-    :height="rectangle.height"
-  />
+  <rect :class="focused ? 'focus' : ''" :x="rectangle.left" :y="rectangle.top" :width="rectangle.width"
+    :height="rectangle.height" />
 </template>
 
 <script lang="ts">
-import { Vue, Options } from "vue-class-component";
+import { Options, Vue } from "vue-class-component";
 import { Rectangle } from "./rectangles";
 
 @Options({
@@ -22,8 +17,8 @@ import { Rectangle } from "./rectangles";
   },
 })
 export default class extends Vue {
-  private focused!: boolean;
-  private rectangle!: Rectangle;
+  public focused!: boolean;
+  public rectangle!: Rectangle;
 }
 </script>
 

ui/src/components/rects/ThouCanvas.vue

@@ -1,22 +1,13 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    version="1.1"
-    viewBox="0 0 1000 1000"
-    preserveAspectRatio="none"
-    @contextmenu.prevent
-    @mousedown="transform_mouse_event"
-    @mousemove="transform_mouse_event"
-    @mouseup="transform_mouse_event"
-    @click="transform_mouse_event"
-    @dblclick="transform_mouse_event"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 1000" preserveAspectRatio="none"
+    @contextmenu.prevent @mousedown="transform_mouse_event" @mousemove="transform_mouse_event"
+    @mouseup="transform_mouse_event" @click="transform_mouse_event" @dblclick="transform_mouse_event">
     <slot name="default" />
   </svg>
 </template>
 
 <script lang="ts">
-import { Vue, Options } from "vue-class-component";
+import { Options, Vue } from "vue-class-component";
 import { Vector2D } from "./rectangles";
 
 function get_event_thous(event: MouseEvent): Vector2D {
@@ -56,7 +47,7 @@ function mouse_event_validator(event: object, point: object): boolean {
   },
 })
 export default class extends Vue {
-  private transform_mouse_event(event: MouseEvent) {
+  public transform_mouse_event(event: MouseEvent) {
     const point = get_event_thous(event);
     this.$emit(event.type, event, point);
   }