ui/src/components/LoginModal.vue

@@ -66,8 +66,8 @@ export default class extends Vue {
   public password = "";
 
   private on_keydown(e: KeyboardEvent) {
-    if (e.key === "Enter") this.submit();
-    else if (e.key === "Escape") this.cancel();
+    if (e.key == "Enter") this.submit();
+    else if (e.key == "Escape") this.cancel();
   }
 
   public mounted(): void {

ui/src/components/MultiModal.vue

@@ -38,7 +38,7 @@ export default class extends Vue {
   public caption = "";
 
   private on_keydown(e: KeyboardEvent) {
-    if (e.key === "Escape") this.dismiss();
+    if (e.key == "Escape") this.dismiss();
   }
 
   public created(): void {

ui/src/components/admin/ConfigView.vue

@@ -241,7 +241,7 @@ let ui_credentials: Credentials = ["", ""];
 
 function fmt_puzzle_date(name: keyof AdminConfigModel["puzzle"]): string {
   const iso_date = admin_config_model.puzzle[name];
-  if (!(typeof iso_date === "string")) return "-";
+  if (!(typeof iso_date == "string")) return "-";
 
   return DateTime.fromISO(iso_date).toLocaleString(DateTime.DATE_SHORT);
 }

ui/src/components/bulma/Breadcrumbs.vue

@@ -5,8 +5,8 @@
       <li
         v-for="(step, index) in steps"
         :key="index"
-        :class="model === index ? 'is-active' : ''"
-        @click.left="model = index"
+        :class="modelValue === index ? 'is-active' : ''"
+        @click.left="change_step(index)"
       >
         <a>
           <span class="icon is-small">
@@ -22,9 +22,18 @@
 <script setup lang="ts">
 import { Step } from "@/lib/helpers";
 
-const model = defineModel<number>({ required: true });
-
-defineProps<{
+const props = defineProps<{
   steps: Step[];
+  modelValue: number;
 }>();
+
+const emit = defineEmits<{
+  (event: "update:modelValue", value: number): void;
+}>();
+
+function change_step(next_step: number) {
+  if (next_step === props.modelValue) return;
+
+  emit("update:modelValue", next_step);
+}
 </script>

ui/src/components/calendar/ThouCanvas.vue

@@ -42,7 +42,6 @@ function transform_mouse_event(event: MouseEvent) {
 
   // mute a useless typescript error
   const event_type = event.type as "mousedown";
-
   emit(event_type, event, point);
 }
 </script>

ui/src/components/editor/DoorCanvas.vue

@@ -9,110 +9,140 @@
     @dblclick.left="remove_rect"
   >
     <CalendarDoor
-      v-for="(door, index) in model"
+      v-for="(door, index) in doors"
       :key="`door-${index}`"
       :door="door"
       force_visible
     />
     <SVGRect
-      v-if="state.kind !== 'idle'"
+      v-if="preview_visible"
       variant="success"
-      :rectangle="preview"
+      :rectangle="preview_rect"
       visible
     />
   </ThouCanvas>
 </template>
 
-<script setup lang="ts">
+<script lang="ts">
 import { Door } from "@/lib/rects/door";
 import { Rectangle } from "@/lib/rects/rectangle";
 import { Vector2D } from "@/lib/rects/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";
 
-type CanvasState =
-  | { kind: "idle" }
-  | { kind: "drawing" }
-  | { kind: "dragging"; door: Door; origin: Vector2D };
+enum CanvasState {
+  Idle,
+  Drawing,
+  Dragging,
+}
 
-const model = defineModel<Door[]>({ required: true });
+@Options({
+  components: {
+    CalendarDoor,
+    SVGRect,
+    ThouCanvas,
+  },
+  props: {
+    doors: Array,
+  },
+})
+export default class extends Vue {
+  private readonly min_rect_area = 300;
+  private state = CanvasState.Idle;
+  public preview_rect = new Rectangle();
+  private drag_door?: Door;
+  private drag_origin = new Vector2D();
+  public doors!: Door[];
 
-const MIN_RECT_AREA = 300;
-let state: CanvasState = { kind: "idle" };
-let preview = new Rectangle();
+  public get preview_visible(): boolean {
+    return this.state !== CanvasState.Idle;
+  }
 
-function pop_door(point: Vector2D): Door | undefined {
-  const idx = model.value.findIndex((rect) => rect.position.contains(point));
+  private pop_door(point: Vector2D): Door | undefined {
+    const idx = this.doors.findIndex((rect) => rect.position.contains(point));
 
     if (idx === -1) {
       return;
     }
 
-  return model.value.splice(idx, 1)[0];
-}
+    return this.doors.splice(idx, 1)[0];
+  }
 
-function draw_start(event: MouseEvent, point: Vector2D) {
-  if (state.kind !== "idle") {
+  public draw_start(event: MouseEvent, point: Vector2D) {
+    if (this.preview_visible) {
       return;
     }
 
-  preview = new Rectangle(point, point);
-  state = { kind: "drawing" };
-}
+    this.state = CanvasState.Drawing;
+    this.preview_rect = new Rectangle(point, point);
+  }
 
-function draw_finish() {
-  if (state.kind !== "drawing" || preview.area < MIN_RECT_AREA) {
+  public draw_finish() {
+    if (this.state !== CanvasState.Drawing || this.preview_rect === undefined) {
       return;
     }
 
-  model.value.push(new Door(preview));
+    this.state = CanvasState.Idle;
 
-  state = { kind: "idle" };
-}
-
-function drag_start(event: MouseEvent, point: Vector2D) {
-  if (state.kind !== "idle") {
+    if (this.preview_rect.area < this.min_rect_area) {
       return;
     }
 
-  const drag_door = pop_door(point);
+    this.doors.push(new Door(this.preview_rect));
+  }
 
-  if (drag_door === undefined) {
+  public drag_start(event: MouseEvent, point: Vector2D) {
+    if (this.preview_visible) {
       return;
     }
 
-  preview = drag_door.position;
+    this.drag_door = this.pop_door(point);
 
-  state = { kind: "dragging", door: drag_door, origin: point };
-}
-
-function drag_finish() {
-  if (state.kind !== "dragging") {
+    if (this.drag_door === undefined) {
       return;
     }
 
-  model.value.push(new Door(preview, state.door.day));
+    this.state = CanvasState.Dragging;
+    this.drag_origin = point;
 
-  state = { kind: "idle" };
-}
-
-function on_mousemove(event: MouseEvent, point: Vector2D) {
-  if (state.kind === "drawing") {
-    preview = preview.update(undefined, point);
-  } else if (state.kind === "dragging") {
-    const movement = point.minus(state.origin);
-    preview = state.door.position.move(movement);
+    this.preview_rect = this.drag_door.position;
   }
-}
 
-function remove_rect(event: MouseEvent, point: Vector2D) {
-  if (state.kind !== "idle") {
+  public drag_finish() {
+    if (
+      this.state !== CanvasState.Dragging ||
+      this.preview_rect === undefined
+    ) {
       return;
     }
 
-  pop_door(point);
+    this.state = CanvasState.Idle;
+    this.doors.push(new Door(this.preview_rect, this.drag_door!.day));
+  }
+
+  public on_mousemove(event: MouseEvent, point: Vector2D) {
+    if (this.preview_rect === undefined) {
+      return;
+    }
+
+    if (this.state === CanvasState.Drawing) {
+      this.preview_rect = this.preview_rect.update(undefined, point);
+    } else if (this.state === CanvasState.Dragging && this.drag_door) {
+      const movement = point.minus(this.drag_origin);
+      this.preview_rect = this.drag_door.position.move(movement);
+    }
+  }
+
+  public remove_rect(event: MouseEvent, point: Vector2D) {
+    if (this.preview_visible) {
+      return;
+    }
+
+    this.pop_door(point);
+  }
 }
 </script>