Lenaisten/advent22
1
0
Fork 0
mirror of https://code.lenaisten.de/Lenaisten/advent22.git synced 2025-12-06 16:42:59 +00:00
Code Issues Projects Releases Packages Wiki Activity

🚧 wip on ui: rework for vue 3 composition API

Browse source
This commit is contained in:
Jörn-Michael Miehe 2025-12-04 18:51:57 +00:00
parent 96a3747262
commit 82da2f6171
3 changed files with 71 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
ui/src/components/bulma/Breadcrumbs.vue
View file

@ -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>

1
ui/src/components/calendar/ThouCanvas.vue
View file

@ -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>

132
ui/src/components/editor/DoorCanvas.vue
View file

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