From 82da2f6171ad1aa9bafd2c2cc23b2c7271ac7979 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Thu, 4 Dec 2025 18:51:57 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20wip=20on=20ui:=20rework=20for=20?=
 =?UTF-8?q?vue=203=20composition=20API?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/bulma/Breadcrumbs.vue   |  19 +--
 ui/src/components/calendar/ThouCanvas.vue |   1 +
 ui/src/components/editor/DoorCanvas.vue   | 160 +++++++++-------------
 3 files changed, 71 insertions(+), 109 deletions(-)

diff --git a/ui/src/components/bulma/Breadcrumbs.vue b/ui/src/components/bulma/Breadcrumbs.vue
index dd0f192..ff14f46 100644
--- a/ui/src/components/bulma/Breadcrumbs.vue
+++ b/ui/src/components/bulma/Breadcrumbs.vue
@@ -5,8 +5,8 @@
       <li
         v-for="(step, index) in steps"
         :key="index"
-        :class="modelValue === index ? 'is-active' : ''"
-        @click.left="change_step(index)"
+        :class="model === index ? 'is-active' : ''"
+        @click.left="model = index"
       >
         <a>
           <span class="icon is-small">
@@ -22,18 +22,9 @@
 <script setup lang="ts">
 import { Step } from "@/lib/helpers";
 
-const props = defineProps<{
+const model = defineModel<number>({ required: true });
+
+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>
diff --git a/ui/src/components/calendar/ThouCanvas.vue b/ui/src/components/calendar/ThouCanvas.vue
index d261569..f3c5eba 100644
--- a/ui/src/components/calendar/ThouCanvas.vue
+++ b/ui/src/components/calendar/ThouCanvas.vue
@@ -42,6 +42,7 @@ function transform_mouse_event(event: MouseEvent) {
 
   // mute a useless typescript error
   const event_type = event.type as "mousedown";
+
   emit(event_type, event, point);
 }
 </script>
diff --git a/ui/src/components/editor/DoorCanvas.vue b/ui/src/components/editor/DoorCanvas.vue
index 8f68f7e..1c1c6a2 100644
--- a/ui/src/components/editor/DoorCanvas.vue
+++ b/ui/src/components/editor/DoorCanvas.vue
@@ -9,140 +9,110 @@
     @dblclick.left="remove_rect"
   >
     <CalendarDoor
-      v-for="(door, index) in doors"
+      v-for="(door, index) in model"
       :key="`door-${index}`"
       :door="door"
       force_visible
     />
     <SVGRect
-      v-if="preview_visible"
+      v-if="state.kind !== 'idle'"
       variant="success"
-      :rectangle="preview_rect"
+      :rectangle="preview"
       visible
     />
   </ThouCanvas>
 </template>
 
-<script lang="ts">
+<script setup 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";
 
-enum CanvasState {
-  Idle,
-  Drawing,
-  Dragging,
+type CanvasState =
+  | { kind: "idle" }
+  | { kind: "drawing" }
+  | { kind: "dragging"; door: Door; origin: Vector2D };
+
+const model = defineModel<Door[]>({ required: true });
+
+const MIN_RECT_AREA = 300;
+let state: CanvasState = { kind: "idle" };
+let preview = new Rectangle();
+
+function pop_door(point: Vector2D): Door | undefined {
+  const idx = model.value.findIndex((rect) => rect.position.contains(point));
+
+  if (idx === -1) {
+    return;
+  }
+
+  return model.value.splice(idx, 1)[0];
 }
 
-@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[];
-
-  public get preview_visible(): boolean {
-    return this.state !== CanvasState.Idle;
+function draw_start(event: MouseEvent, point: Vector2D) {
+  if (state.kind !== "idle") {
+    return;
   }
 
-  private pop_door(point: Vector2D): Door | undefined {
-    const idx = this.doors.findIndex((rect) => rect.position.contains(point));
+  preview = new Rectangle(point, point);
+  state = { kind: "drawing" };
+}
 
-    if (idx === -1) {
-      return;
-    }
-
-    return this.doors.splice(idx, 1)[0];
+function draw_finish() {
+  if (state.kind !== "drawing" || preview.area < MIN_RECT_AREA) {
+    return;
   }
 
-  public draw_start(event: MouseEvent, point: Vector2D) {
-    if (this.preview_visible) {
-      return;
-    }
+  model.value.push(new Door(preview));
 
-    this.state = CanvasState.Drawing;
-    this.preview_rect = new Rectangle(point, point);
+  state = { kind: "idle" };
+}
+
+function drag_start(event: MouseEvent, point: Vector2D) {
+  if (state.kind !== "idle") {
+    return;
   }
 
-  public draw_finish() {
-    if (this.state !== CanvasState.Drawing || this.preview_rect === undefined) {
-      return;
-    }
+  const drag_door = pop_door(point);
 
-    this.state = CanvasState.Idle;
-
-    if (this.preview_rect.area < this.min_rect_area) {
-      return;
-    }
-
-    this.doors.push(new Door(this.preview_rect));
+  if (drag_door === undefined) {
+    return;
   }
 
-  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 };
+}
 
-    if (this.drag_door === undefined) {
-      return;
-    }
-
-    this.state = CanvasState.Dragging;
-    this.drag_origin = point;
-
-    this.preview_rect = this.drag_door.position;
+function drag_finish() {
+  if (state.kind !== "dragging") {
+    return;
   }
 
-  public drag_finish() {
-    if (
-      this.state !== CanvasState.Dragging ||
-      this.preview_rect === undefined
-    ) {
-      return;
-    }
+  model.value.push(new Door(preview, state.door.day));
 
-    this.state = CanvasState.Idle;
-    this.doors.push(new Door(this.preview_rect, this.drag_door!.day));
+  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);
+  }
+}
+
+function remove_rect(event: MouseEvent, point: Vector2D) {
+  if (state.kind !== "idle") {
+    return;
   }
 
-  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);
-  }
+  pop_door(point);
 }
 </script>