🚧 wip on ui: rework for vue 3 composition API

ui/src/components/bulma/Breadcrumbs.vue

@@ -5,8 +5,8 @@
       <li
         v-for="(step, index) in steps"
         :key="index"
-        :class="modelValue === index ? 'is-active' : ''"
+        :class="model === index ? 'is-active' : ''"
-        @click.left="change_step(index)"
+        @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>

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>

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 {
+type CanvasState =
-  Idle,
+  | { kind: "idle" }
-  Drawing,
+  | { kind: "drawing" }
-  Dragging,
+  | { kind: "dragging"; door: Door; origin: Vector2D };
-}
 
-@Options({
+const model = defineModel<Door[]>({ required: true });
-  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 {
+const MIN_RECT_AREA = 300;
-    return this.state !== CanvasState.Idle;
+let state: CanvasState = { kind: "idle" };
-  }
+let preview = new Rectangle();
 
-  private pop_door(point: Vector2D): Door | undefined {
+function pop_door(point: Vector2D): Door | undefined {
-    const idx = this.doors.findIndex((rect) => rect.position.contains(point));
+  const idx = model.value.findIndex((rect) => rect.position.contains(point));
 
   if (idx === -1) {
     return;
   }
 
-    return this.doors.splice(idx, 1)[0];
+  return model.value.splice(idx, 1)[0];
-  }
+}
 
-  public draw_start(event: MouseEvent, point: Vector2D) {
+function draw_start(event: MouseEvent, point: Vector2D) {
-    if (this.preview_visible) {
+  if (state.kind !== "idle") {
     return;
   }
 
-    this.state = CanvasState.Drawing;
+  preview = new Rectangle(point, point);
-    this.preview_rect = new Rectangle(point, point);
+  state = { kind: "drawing" };
-  }
+}
 
-  public draw_finish() {
+function draw_finish() {
-    if (this.state !== CanvasState.Drawing || this.preview_rect === undefined) {
+  if (state.kind !== "drawing" || preview.area < MIN_RECT_AREA) {
     return;
   }
 
-    this.state = CanvasState.Idle;
+  model.value.push(new Door(preview));
 
-    if (this.preview_rect.area < this.min_rect_area) {
+  state = { kind: "idle" };
+}
+
+function drag_start(event: MouseEvent, point: Vector2D) {
+  if (state.kind !== "idle") {
     return;
   }
 
-    this.doors.push(new Door(this.preview_rect));
+  const drag_door = pop_door(point);
-  }
 
-  public drag_start(event: MouseEvent, point: Vector2D) {
+  if (drag_door === undefined) {
-    if (this.preview_visible) {
     return;
   }
 
-    this.drag_door = this.pop_door(point);
+  preview = drag_door.position;
 
-    if (this.drag_door === undefined) {
+  state = { kind: "dragging", door: drag_door, origin: point };
+}
+
+function drag_finish() {
+  if (state.kind !== "dragging") {
     return;
   }
 
-    this.state = CanvasState.Dragging;
+  model.value.push(new Door(preview, state.door.day));
-    this.drag_origin = point;
 
-    this.preview_rect = this.drag_door.position;
+  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);
   }
+}
 
-  public drag_finish() {
+function remove_rect(event: MouseEvent, point: Vector2D) {
-    if (
+  if (state.kind !== "idle") {
-      this.state !== CanvasState.Dragging ||
-      this.preview_rect === undefined
-    ) {
     return;
   }
 
-    this.state = CanvasState.Idle;
+  pop_door(point);
-    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>