From f0db5e57ecabac7b824ca74e4f7bf46663048099 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= Date: Mon, 16 Jan 2023 00:19:16 +0000 Subject: [PATCH 01/69] drawrects stub --- ui/src/App.vue | 4 ++++ ui/src/assets/adventskalender.png | 3 +++ ui/src/components/CalendarImage.vue | 9 +++++++++ 3 files changed, 16 insertions(+) create mode 100644 ui/src/assets/adventskalender.png create mode 100644 ui/src/components/CalendarImage.vue diff --git a/ui/src/App.vue b/ui/src/App.vue index 199b654..98c6592 100644 --- a/ui/src/App.vue +++ b/ui/src/App.vue @@ -9,6 +9,8 @@

Der Gelöt

+ + + + + + \ No newline at end of file From e1bd10980c72017196c93bb7750b61b98ab4c602 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= Date: Mon, 16 Jan 2023 23:40:25 +0000 Subject: [PATCH 02/69] "preview" rectangle --- ui/src/components/CalendarImage.vue | 182 +++++++++++++++++++++++++++- 1 file changed, 179 insertions(+), 3 deletions(-) diff --git a/ui/src/components/CalendarImage.vue b/ui/src/components/CalendarImage.vue index 9288f65..9cf4e89 100644 --- a/ui/src/components/CalendarImage.vue +++ b/ui/src/components/CalendarImage.vue @@ -1,9 +1,185 @@ \ No newline at end of file +class Vector2D { + public x: number; + public y: number; + + constructor(x = 0, y = 0) { + this.x = x; + this.y = y; + } + + public copy(): Vector2D { + return new Vector2D(this.x, this.y); + } + + public minus(other: Vector2D): Vector2D { + return new Vector2D(this.x - other.x, this.y - other.y); + } +} + +class Rectangle { + private origin: Vector2D; + private size: Vector2D; + + constructor(corner1: Vector2D, corner2: Vector2D) { + this.origin = corner1.copy(); + this.size = corner2.minus(corner1); + } + + public normalize() { + if (this.size.x < 0) { + this.size.x *= -1; + this.origin.x -= this.size.x; + } + + if (this.size.y < 0) { + this.size.y *= -1; + this.origin.y -= this.size.y; + } + } +} + +class PreviewState { + public visible = false; + private down_location = new Vector2D(); + private move_location = new Vector2D(); + + public mouse_down(location: Vector2D) { + this.down_location = location; + this.move_location = location; + } + + public mouse_move(location: Vector2D) { + this.move_location = location; + } + + public get_rect(): Rectangle { + return new Rectangle(this.down_location, this.move_location); + } +} + +function get_event_thous(event: MouseEvent): Vector2D { + if (event.currentTarget === null) { + return new Vector2D(); + } + + let target = event.currentTarget as Element; + + return new Vector2D( + Math.round((event.offsetX / target.clientWidth) * 1000), + Math.round((event.offsetY / target.clientHeight) * 1000) + ); +} + +export default class CalendarImage extends Vue { + // "preview" rectangle on click-drag + + private preview_state = new PreviewState(); + + private on_mousedown(event: MouseEvent) { + this.preview_state.visible = true; + this.preview_state.mouse_down(get_event_thous(event)); + } + + private on_mousemove(event: MouseEvent) { + this.preview_state.mouse_move(get_event_thous(event)); + } + + private on_mouseup() { + this.preview_state.visible = false; + } + + private get preview_rectangle(): Rectangle { + let rect = this.preview_state.get_rect(); + rect.normalize(); + + return rect; + } + + // Hook "resize" events + + private resize_observer?: ResizeObserver; + + declare $refs: { + container: HTMLDivElement; + background: HTMLImageElement; + }; + + private on_resize() { + this.$refs.container.style.setProperty( + "height", + this.$refs.background.offsetHeight + "px" + ); + } + + public mounted() { + this.resize_observer = new ResizeObserver(this.on_resize); + this.resize_observer.observe(this.$refs.background); + } + + public unmounted() { + if (this.resize_observer instanceof ResizeObserver) { + this.resize_observer.disconnect(); + delete this.resize_observer; + } + } +} + + + \ No newline at end of file From f3f8522242f1491f3193ef46ee36378319dd0636 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= Date: Tue, 17 Jan 2023 00:51:52 +0000 Subject: [PATCH 03/69] "rectangles" library --- ui/src/components/CalendarImage.vue | 87 ++++++----------------------- ui/src/components/rectangles.ts | 80 ++++++++++++++++++++++++++ 2 files changed, 97 insertions(+), 70 deletions(-) create mode 100644 ui/src/components/rectangles.ts diff --git a/ui/src/components/CalendarImage.vue b/ui/src/components/CalendarImage.vue index 9cf4e89..005ae44 100644 --- a/ui/src/components/CalendarImage.vue +++ b/ui/src/components/CalendarImage.vue @@ -13,10 +13,10 @@ @@ -24,65 +24,7 @@ - - \ No newline at end of file diff --git a/ui/src/components/DoorMapEditor.vue b/ui/src/components/DoorMapEditor.vue new file mode 100644 index 0000000..80f2a36 --- /dev/null +++ b/ui/src/components/DoorMapEditor.vue @@ -0,0 +1,64 @@ + + + + + \ No newline at end of file diff --git a/ui/src/components/rects/Rect.vue b/ui/src/components/rects/Rect.vue new file mode 100644 index 0000000..e874d04 --- /dev/null +++ b/ui/src/components/rects/Rect.vue @@ -0,0 +1,43 @@ + + + + + \ No newline at end of file diff --git a/ui/src/components/rects/RectPad.vue b/ui/src/components/rects/RectPad.vue new file mode 100644 index 0000000..9236f70 --- /dev/null +++ b/ui/src/components/rects/RectPad.vue @@ -0,0 +1,85 @@ + + + + + \ No newline at end of file diff --git a/ui/src/components/rectangles.ts b/ui/src/components/rects/rectangles.ts similarity index 100% rename from ui/src/components/rectangles.ts rename to ui/src/components/rects/rectangles.ts From cc1ab7be90310df21d6cb0e6afbcecfc29c2e05b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= Date: Tue, 17 Jan 2023 22:15:12 +0000 Subject: [PATCH 09/69] don't restart drawing after blurred pointerup --- ui/src/components/rects/RectPad.vue | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/ui/src/components/rects/RectPad.vue b/ui/src/components/rects/RectPad.vue index 9236f70..666a1fa 100644 --- a/ui/src/components/rects/RectPad.vue +++ b/ui/src/components/rects/RectPad.vue @@ -53,6 +53,10 @@ export default class RectPad extends Vue { private rectangles: Rectangle[] = []; private on_pointerdown(event: MouseEvent) { + if (this.preview_state.visible) { + return; + } + this.preview_state.visible = true; this.preview_state.corner1 = get_event_thous(event); this.preview_state.corner2 = get_event_thous(event); From b4492dcb7384d19126e85d466e08efcc60d7aaf0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= Date: Tue, 17 Jan 2023 22:33:11 +0000 Subject: [PATCH 10/69] "focused" -> "highlighted, selected" --- ui/src/components/DoorMapEditor.vue | 6 ++---- ui/src/components/rects/Rect.vue | 32 +++++++++++++++++++++++++---- ui/src/components/rects/RectPad.vue | 2 +- 3 files changed, 31 insertions(+), 9 deletions(-) diff --git a/ui/src/components/DoorMapEditor.vue b/ui/src/components/DoorMapEditor.vue index 80f2a36..8ea5e8a 100644 --- a/ui/src/components/DoorMapEditor.vue +++ b/ui/src/components/DoorMapEditor.vue @@ -23,10 +23,8 @@ export default class CalendarImage extends Vue { }; private on_resize() { - this.$refs.container.style.setProperty( - "height", - this.$refs.background.offsetHeight + "px" - ); + this.$refs.container.style.height = + this.$refs.background.offsetHeight + "px"; } public mounted() { diff --git a/ui/src/components/rects/Rect.vue b/ui/src/components/rects/Rect.vue index e874d04..2af32ce 100644 --- a/ui/src/components/rects/Rect.vue +++ b/ui/src/components/rects/Rect.vue @@ -1,6 +1,6 @@ @@ -45,44 +48,116 @@ function get_event_thous(event: MouseEvent): Vector2D { }, }) export default class RectPad extends Vue { - private preview_state = { - visible: false, - corner1: new Vector2D(), - corner2: new Vector2D(), - }; private readonly min_rect_area = 4; + private drawing = false; + private preview_corner1 = new Vector2D(); + private preview_corner2 = new Vector2D(); + private dragging = false; + private drag_index = -1; + private drag_origin = new Vector2D(); private rectangles: Rectangle[] = []; - private draw_start(event: MouseEvent) { - if (this.preview_state.visible) { - return; - } - - this.preview_state.visible = true; - this.preview_state.corner1 = get_event_thous(event); - this.preview_state.corner2 = get_event_thous(event); + private get preview_visible(): boolean { + return this.drawing || this.dragging; } - private on_mousemove(event: MouseEvent) { - if (!this.preview_state.visible) { + private get preview_rectangle(): Rectangle { + return new Rectangle( + this.preview_corner1, + this.preview_corner2 + ).normalize(); + } + + private find_rectangle(point: Vector2D) { + return this.rectangles.findIndex( + (rect) => + point.x >= rect.left && + point.y >= rect.top && + point.x <= rect.left + rect.width && + point.y <= rect.top + rect.height + ); + } + + private draw_start(event: MouseEvent) { + if (this.preview_visible) { return; } - this.preview_state.corner2 = get_event_thous(event); + this.drawing = true; + this.preview_corner1 = get_event_thous(event); + this.preview_corner2 = get_event_thous(event); } private draw_finish() { - this.preview_state.visible = false; + if (!this.drawing) { + return; + } + + this.drawing = false; + if (this.preview_rectangle.area >= this.min_rect_area) { this.rectangles.push(this.preview_rectangle); } } - private get preview_rectangle(): Rectangle { - return new Rectangle( - this.preview_state.corner1, - this.preview_state.corner2 - ).normalize(); + private drag_start(event: MouseEvent) { + if (this.preview_visible) { + return; + } + + let point = get_event_thous(event); + this.drag_index = this.find_rectangle(point); + + if (this.drag_index === -1) { + return; + } + + this.dragging = true; + this.drag_origin = point; + + this.preview_corner1 = this.rectangles[this.drag_index].origin; + this.preview_corner2 = this.rectangles[this.drag_index].corner; + + console.log("drag_start", point); + } + + private drag_finish(event: MouseEvent) { + if (!this.dragging) { + return; + } + + this.dragging = false; + this.rectangles[this.drag_index] = this.preview_rectangle; + + console.log("drag_finish", get_event_thous(event)); + } + + private on_mousemove(event: MouseEvent) { + let point = get_event_thous(event); + + if (this.drawing) { + this.preview_corner2 = point; + } else if (this.dragging) { + let movement = point.minus(this.drag_origin); + + this.preview_corner1 = + this.rectangles[this.drag_index].origin.plus(movement); + this.preview_corner2 = + this.rectangles[this.drag_index].corner.plus(movement); + } + } + + private remove_rect(event: MouseEvent) { + let point = get_event_thous(event); + let rect_index = this.find_rectangle(point); + + if (rect_index === -1) { + return; + } + + this.rectangles.splice(rect_index, 1); + + console.log("remove_rect", get_event_thous(event)); } } diff --git a/ui/src/components/rects/rectangles.ts b/ui/src/components/rects/rectangles.ts index 809d07d..329183b 100644 --- a/ui/src/components/rects/rectangles.ts +++ b/ui/src/components/rects/rectangles.ts @@ -44,6 +44,10 @@ export class Rectangle { return this.origin.y; } + public get corner(): Vector2D { + return this._corner_2; + } + public get size(): Vector2D { return this._corner_2.minus(this._corner_1); } From c1da30cc3e3d255966f37d991e33ef98d010b18c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= Date: Tue, 17 Jan 2023 23:42:07 +0000 Subject: [PATCH 13/69] drag_rect implementation --- ui/src/components/rects/RectPad.vue | 48 ++++++++++++----------------- 1 file changed, 20 insertions(+), 28 deletions(-) diff --git a/ui/src/components/rects/RectPad.vue b/ui/src/components/rects/RectPad.vue index 27456b8..2b99fbe 100644 --- a/ui/src/components/rects/RectPad.vue +++ b/ui/src/components/rects/RectPad.vue @@ -53,7 +53,7 @@ export default class RectPad extends Vue { private preview_corner1 = new Vector2D(); private preview_corner2 = new Vector2D(); private dragging = false; - private drag_index = -1; + private drag_rect?: Rectangle; private drag_origin = new Vector2D(); private rectangles: Rectangle[] = []; @@ -68,14 +68,21 @@ export default class RectPad extends Vue { ).normalize(); } - private find_rectangle(point: Vector2D) { - return this.rectangles.findIndex( + private pop_rectangle(point: Vector2D): Rectangle | undefined { + const idx = this.rectangles.findIndex( (rect) => point.x >= rect.left && point.y >= rect.top && point.x <= rect.left + rect.width && point.y <= rect.top + rect.height ); + + if (idx === -1) { + return; + } + + const rects = this.rectangles.splice(idx, 1); + return rects[0]; } private draw_start(event: MouseEvent) { @@ -106,30 +113,26 @@ export default class RectPad extends Vue { } let point = get_event_thous(event); - this.drag_index = this.find_rectangle(point); + this.drag_rect = this.pop_rectangle(point); - if (this.drag_index === -1) { + if (this.drag_rect === undefined) { return; } this.dragging = true; this.drag_origin = point; - this.preview_corner1 = this.rectangles[this.drag_index].origin; - this.preview_corner2 = this.rectangles[this.drag_index].corner; - - console.log("drag_start", point); + this.preview_corner1 = this.drag_rect.origin; + this.preview_corner2 = this.drag_rect.corner; } - private drag_finish(event: MouseEvent) { + private drag_finish() { if (!this.dragging) { return; } this.dragging = false; - this.rectangles[this.drag_index] = this.preview_rectangle; - - console.log("drag_finish", get_event_thous(event)); + this.rectangles.push(this.preview_rectangle); } private on_mousemove(event: MouseEvent) { @@ -137,27 +140,16 @@ export default class RectPad extends Vue { if (this.drawing) { this.preview_corner2 = point; - } else if (this.dragging) { + } else if (this.dragging && this.drag_rect) { let movement = point.minus(this.drag_origin); - this.preview_corner1 = - this.rectangles[this.drag_index].origin.plus(movement); - this.preview_corner2 = - this.rectangles[this.drag_index].corner.plus(movement); + this.preview_corner1 = this.drag_rect.origin.plus(movement); + this.preview_corner2 = this.drag_rect.corner.plus(movement); } } private remove_rect(event: MouseEvent) { - let point = get_event_thous(event); - let rect_index = this.find_rectangle(point); - - if (rect_index === -1) { - return; - } - - this.rectangles.splice(rect_index, 1); - - console.log("remove_rect", get_event_thous(event)); + this.pop_rectangle(get_event_thous(event)); } } From b81446e99d1f8194b56e6b8d5bd9650e467e7525 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= Date: Tue, 17 Jan 2023 23:50:25 +0000 Subject: [PATCH 14/69] readability --- ui/src/components/rects/RectPad.vue | 27 ++++++++++----------------- ui/src/components/rects/rectangles.ts | 9 +++++++++ 2 files changed, 19 insertions(+), 17 deletions(-) diff --git a/ui/src/components/rects/RectPad.vue b/ui/src/components/rects/RectPad.vue index 2b99fbe..bb185c1 100644 --- a/ui/src/components/rects/RectPad.vue +++ b/ui/src/components/rects/RectPad.vue @@ -34,7 +34,7 @@ function get_event_thous(event: MouseEvent): Vector2D { return new Vector2D(); } - let target = event.currentTarget as Element; + const target = event.currentTarget as Element; return new Vector2D( Math.round((event.offsetX / target.clientWidth) * 1000), @@ -69,20 +69,13 @@ export default class RectPad extends Vue { } private pop_rectangle(point: Vector2D): Rectangle | undefined { - const idx = this.rectangles.findIndex( - (rect) => - point.x >= rect.left && - point.y >= rect.top && - point.x <= rect.left + rect.width && - point.y <= rect.top + rect.height - ); + const idx = this.rectangles.findIndex((rect) => rect.contains(point)); if (idx === -1) { return; } - const rects = this.rectangles.splice(idx, 1); - return rects[0]; + return this.rectangles.splice(idx, 1)[0]; } private draw_start(event: MouseEvent) { @@ -102,9 +95,11 @@ export default class RectPad extends Vue { this.drawing = false; - if (this.preview_rectangle.area >= this.min_rect_area) { - this.rectangles.push(this.preview_rectangle); + if (this.preview_rectangle.area < this.min_rect_area) { + return; } + + this.rectangles.push(this.preview_rectangle); } private drag_start(event: MouseEvent) { @@ -112,7 +107,7 @@ export default class RectPad extends Vue { return; } - let point = get_event_thous(event); + const point = get_event_thous(event); this.drag_rect = this.pop_rectangle(point); if (this.drag_rect === undefined) { @@ -136,12 +131,10 @@ export default class RectPad extends Vue { } private on_mousemove(event: MouseEvent) { - let point = get_event_thous(event); - if (this.drawing) { - this.preview_corner2 = point; + this.preview_corner2 = get_event_thous(event); } else if (this.dragging && this.drag_rect) { - let movement = point.minus(this.drag_origin); + const movement = get_event_thous(event).minus(this.drag_origin); this.preview_corner1 = this.drag_rect.origin.plus(movement); this.preview_corner2 = this.drag_rect.corner.plus(movement); diff --git a/ui/src/components/rects/rectangles.ts b/ui/src/components/rects/rectangles.ts index 329183b..60649a6 100644 --- a/ui/src/components/rects/rectangles.ts +++ b/ui/src/components/rects/rectangles.ts @@ -64,6 +64,15 @@ export class Rectangle { return this.width * this.height; } + public contains(point: Vector2D): boolean { + const test_rect = this.normalize(); + + return point.x >= test_rect._corner_1.x && + point.y >= test_rect._corner_1.y && + point.x <= test_rect._corner_2.x && + point.y <= test_rect._corner_2.y + } + public normalize(): Rectangle { let left = this.left; let top = this.top; From 740eb574c67383215b079e2170e10e9d8a41f519 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= Date: Tue, 17 Jan 2023 23:56:07 +0000 Subject: [PATCH 15/69] middle click delete --- ui/src/components/rects/RectPad.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/src/components/rects/RectPad.vue b/ui/src/components/rects/RectPad.vue index bb185c1..97e40a6 100644 --- a/ui/src/components/rects/RectPad.vue +++ b/ui/src/components/rects/RectPad.vue @@ -9,6 +9,7 @@ @mousedown.right="drag_start" @mouseup.right="drag_finish" @mousemove="on_mousemove" + @click.middle="remove_rect" @dblclick.left="remove_rect" > Date: Tue, 17 Jan 2023 23:58:46 +0000 Subject: [PATCH 16/69] revert to single "focused" prop --- ui/src/components/rects/Rect.vue | 24 +++++------------------- ui/src/components/rects/RectPad.vue | 2 +- 2 files changed, 6 insertions(+), 20 deletions(-) diff --git a/ui/src/components/rects/Rect.vue b/ui/src/components/rects/Rect.vue index 2af32ce..f139bd2 100644 --- a/ui/src/components/rects/Rect.vue +++ b/ui/src/components/rects/Rect.vue @@ -14,11 +14,7 @@ import { Rectangle } from "./rectangles"; @Options({ props: { - selected: { - type: Boolean, - default: false, - }, - highlighted: { + focused: { type: Boolean, default: false, }, @@ -26,19 +22,14 @@ import { Rectangle } from "./rectangles"; }, }) export default class Rect extends Vue { - private selected!: boolean; - private highlighted!: boolean; + private focused!: boolean; private rectangle!: Rectangle; private get classes(): string { let result: string[] = []; - if (this.selected) { - result.push("select"); - } - - if (this.highlighted) { - result.push("highlight"); + if (this.focused) { + result.push("focus"); } return result.join(" "); @@ -54,12 +45,7 @@ rect { stroke-opacity: 0.9; stroke-width: 1; - &.select { - fill-opacity: 0.4; - stroke-opacity: 1; - } - - &.highlight { + &.focus { fill: gold; stroke: yellow; } diff --git a/ui/src/components/rects/RectPad.vue b/ui/src/components/rects/RectPad.vue index 97e40a6..3c9eee7 100644 --- a/ui/src/components/rects/RectPad.vue +++ b/ui/src/components/rects/RectPad.vue @@ -19,7 +19,7 @@ /> From 8689ba847335ee4ffece8b40591f6a4c112bb55e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= Date: Wed, 18 Jan 2023 00:04:43 +0000 Subject: [PATCH 17/69] more reasonable minimum area --- ui/src/components/rects/RectPad.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/components/rects/RectPad.vue b/ui/src/components/rects/RectPad.vue index 3c9eee7..5e04979 100644 --- a/ui/src/components/rects/RectPad.vue +++ b/ui/src/components/rects/RectPad.vue @@ -49,7 +49,7 @@ function get_event_thous(event: MouseEvent): Vector2D { }, }) export default class RectPad extends Vue { - private readonly min_rect_area = 4; + private readonly min_rect_area = 300; private drawing = false; private preview_corner1 = new Vector2D(); private preview_corner2 = new Vector2D(); From 2f776566f324fe979212e3b343d6f8ef1ee0412a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= Date: Wed, 18 Jan 2023 00:20:15 +0000 Subject: [PATCH 18/69] png -> jpg --- ui/src/assets/adventskalender.jpg | 3 +++ ui/src/assets/adventskalender.png | 3 --- ui/src/components/DoorMapEditor.vue | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) create mode 100644 ui/src/assets/adventskalender.jpg delete mode 100644 ui/src/assets/adventskalender.png diff --git a/ui/src/assets/adventskalender.jpg b/ui/src/assets/adventskalender.jpg new file mode 100644 index 0000000..83a9a1e --- /dev/null +++ b/ui/src/assets/adventskalender.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:3a3cecf18485db1e98980a7673d2befe3989111d3d04cb009d998bbef4df5834 +size 453516 diff --git a/ui/src/assets/adventskalender.png b/ui/src/assets/adventskalender.png deleted file mode 100644 index 86725e2..0000000 --- a/ui/src/assets/adventskalender.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:453ee7b7e5c8362a8f76a3720d202a205f4d95498435f36a835624324626731c -size 2057226 diff --git a/ui/src/components/DoorMapEditor.vue b/ui/src/components/DoorMapEditor.vue index 8ea5e8a..8d6b2f8 100644 --- a/ui/src/components/DoorMapEditor.vue +++ b/ui/src/components/DoorMapEditor.vue @@ -1,6 +1,6 @@ From 95c4c2e5ff71961b1dba5f42e826d373f4d96a5c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= Date: Wed, 18 Jan 2023 22:45:12 +0000 Subject: [PATCH 19/69] move rectpad size --- ui/src/components/DoorMapEditor.vue | 2 -- ui/src/components/rects/RectPad.vue | 2 ++ 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/src/components/DoorMapEditor.vue b/ui/src/components/DoorMapEditor.vue index 8d6b2f8..cf181e3 100644 --- a/ui/src/components/DoorMapEditor.vue +++ b/ui/src/components/DoorMapEditor.vue @@ -55,8 +55,6 @@ div { #rectpad { position: absolute; z-index: 2; - height: 100%; - width: 100%; } } \ No newline at end of file diff --git a/ui/src/components/rects/RectPad.vue b/ui/src/components/rects/RectPad.vue index 5e04979..8a836ef 100644 --- a/ui/src/components/rects/RectPad.vue +++ b/ui/src/components/rects/RectPad.vue @@ -151,5 +151,7 @@ export default class RectPad extends Vue { \ No newline at end of file From d387aceedd6b8064f3dc31d703abafcc0ec2ca4c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= Date: Thu, 19 Jan 2023 00:22:01 +0000 Subject: [PATCH 20/69] bulma-ify DoorMapEditor --- ui/src/components/DoorMapEditor.vue | 66 +++++++++++++---------------- 1 file changed, 30 insertions(+), 36 deletions(-) diff --git a/ui/src/components/DoorMapEditor.vue b/ui/src/components/DoorMapEditor.vue index cf181e3..be404d2 100644 --- a/ui/src/components/DoorMapEditor.vue +++ b/ui/src/components/DoorMapEditor.vue @@ -1,7 +1,28 @@ @@ -15,46 +36,19 @@ import RectPad from "./rects/RectPad.vue"; }, }) export default class CalendarImage extends Vue { - private resize_observer?: ResizeObserver; - - declare $refs: { - container: HTMLDivElement; - background: HTMLImageElement; - }; - - private on_resize() { - this.$refs.container.style.height = - this.$refs.background.offsetHeight + "px"; - } - - public mounted() { - this.resize_observer = new ResizeObserver(this.on_resize); - this.resize_observer.observe(this.$refs.background); - } - - public unmounted() { - if (this.resize_observer instanceof ResizeObserver) { - this.resize_observer.disconnect(); - delete this.resize_observer; - } - } + private step = 0; } \ No newline at end of file From 93f31cd2b8d8f978be7202b1460bcb83bc36d661 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= Date: Thu, 19 Jan 2023 00:27:21 +0000 Subject: [PATCH 21/69] only remove rect while not editing --- ui/src/components/rects/RectPad.vue | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/ui/src/components/rects/RectPad.vue b/ui/src/components/rects/RectPad.vue index 8a836ef..5856515 100644 --- a/ui/src/components/rects/RectPad.vue +++ b/ui/src/components/rects/RectPad.vue @@ -143,6 +143,10 @@ export default class RectPad extends Vue { } private remove_rect(event: MouseEvent) { + if (this.preview_visible) { + return; + } + this.pop_rectangle(get_event_thous(event)); } } From 96471325690118c6ae98ce85cc00818bdb63cf13 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= Date: Thu, 19 Jan 2023 00:27:38 +0000 Subject: [PATCH 22/69] "rectangles" property --- ui/src/components/rects/RectPad.vue | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/ui/src/components/rects/RectPad.vue b/ui/src/components/rects/RectPad.vue index 5856515..35e4351 100644 --- a/ui/src/components/rects/RectPad.vue +++ b/ui/src/components/rects/RectPad.vue @@ -13,7 +13,7 @@ @dblclick.left="remove_rect" > @@ -56,7 +56,7 @@ export default class RectPad extends Vue { private dragging = false; private drag_rect?: Rectangle; private drag_origin = new Vector2D(); - private rectangles: Rectangle[] = []; + private _rectangles: Rectangle[] = []; private get preview_visible(): boolean { return this.drawing || this.dragging; @@ -69,14 +69,22 @@ export default class RectPad extends Vue { ).normalize(); } + public get rectangles(): Rectangle[] { + return this._rectangles; //.map((rect) => rect.normalize()); + } + + public set rectangles(rects: Rectangle[]) { + this._rectangles = rects; //.map((rect) => rect.normalize()); + } + private pop_rectangle(point: Vector2D): Rectangle | undefined { - const idx = this.rectangles.findIndex((rect) => rect.contains(point)); + const idx = this._rectangles.findIndex((rect) => rect.contains(point)); if (idx === -1) { return; } - return this.rectangles.splice(idx, 1)[0]; + return this._rectangles.splice(idx, 1)[0]; } private draw_start(event: MouseEvent) { @@ -100,7 +108,7 @@ export default class RectPad extends Vue { return; } - this.rectangles.push(this.preview_rectangle); + this._rectangles.push(this.preview_rectangle); } private drag_start(event: MouseEvent) { @@ -128,7 +136,7 @@ export default class RectPad extends Vue { } this.dragging = false; - this.rectangles.push(this.preview_rectangle); + this._rectangles.push(this.preview_rectangle); } private on_mousemove(event: MouseEvent) { From 3bf8872a33bec311e7785b41f0c0cb2ee811649a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= Date: Thu, 19 Jan 2023 00:44:03 +0000 Subject: [PATCH 23/69] z-index problem --- ui/src/components/DoorMapEditor.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/components/DoorMapEditor.vue b/ui/src/components/DoorMapEditor.vue index be404d2..bccf2f4 100644 --- a/ui/src/components/DoorMapEditor.vue +++ b/ui/src/components/DoorMapEditor.vue @@ -48,7 +48,7 @@ figure { position: absolute; left: 0; top: 0; - z-index: 99; + z-index: auto; } } \ No newline at end of file From 2db63db8dbe58e37bbd617dbe892e9dd8aa246f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= Date: Thu, 19 Jan 2023 17:54:46 +0000 Subject: [PATCH 24/69] tabs function --- ui/src/components/DoorMapEditor.vue | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/ui/src/components/DoorMapEditor.vue b/ui/src/components/DoorMapEditor.vue index bccf2f4..54c613b 100644 --- a/ui/src/components/DoorMapEditor.vue +++ b/ui/src/components/DoorMapEditor.vue @@ -4,13 +4,18 @@
-
+
  • Linksklick + Ziehen: Neues Türchen erstellen
    • @@ -36,7 +41,8 @@ import RectPad from "./rects/RectPad.vue"; }, }) export default class CalendarImage extends Vue { - private step = 0; + private readonly steps: string[] = ["Platzieren", "Ordnen", "Überprüfen"]; + private current_step = 0; } From 22d58f94b62f526f3c2c6da081220e99c9196f53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= Date: Thu, 19 Jan 2023 17:59:18 +0000 Subject: [PATCH 25/69] DoorPlacer component --- ui/src/components/DoorMapEditor.vue | 33 +++---------------- ui/src/components/door_map/DoorPlacer.vue | 40 +++++++++++++++++++++++ 2 files changed, 44 insertions(+), 29 deletions(-) create mode 100644 ui/src/components/door_map/DoorPlacer.vue diff --git a/ui/src/components/DoorMapEditor.vue b/ui/src/components/DoorMapEditor.vue index 54c613b..0960f07 100644 --- a/ui/src/components/DoorMapEditor.vue +++ b/ui/src/components/DoorMapEditor.vue @@ -15,46 +15,21 @@
-
-
-
    -
  • Linksklick + Ziehen: Neues Türchen erstellen
    • -
  • Rechtsklick + Ziehen: Türchen verschieben
    • -
  • Doppel- oder Mittelklick: Türchen löschen
    • -
-
-
- - -
-
+ - - \ No newline at end of file diff --git a/ui/src/components/door_map/DoorPlacer.vue b/ui/src/components/door_map/DoorPlacer.vue new file mode 100644 index 0000000..2f6cc34 --- /dev/null +++ b/ui/src/components/door_map/DoorPlacer.vue @@ -0,0 +1,40 @@ + + + + + \ No newline at end of file From e8dd32c71f237ff970016b3be28db6ed8b6a700f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= Date: Thu, 19 Jan 2023 19:35:20 +0000 Subject: [PATCH 26/69] use "breadcrumbs" --- ui/src/components/DoorMapEditor.vue | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/ui/src/components/DoorMapEditor.vue b/ui/src/components/DoorMapEditor.vue index 0960f07..612301a 100644 --- a/ui/src/components/DoorMapEditor.vue +++ b/ui/src/components/DoorMapEditor.vue @@ -2,7 +2,7 @@

Türchen bearbeiten

-
+
+ +

Narf!

From 63f5b3fe19ba8b63e7e883543aafdf2c223ddfd3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= Date: Fri, 20 Jan 2023 00:41:15 +0000 Subject: [PATCH 27/69] FontAwesomePlugin --- ui/package.json | 4 ++++ ui/src/main.ts | 2 ++ ui/src/plugins/fontawesome.ts | 20 ++++++++++++++++++++ ui/yarn.lock | 31 +++++++++++++++++++++++++++++++ 4 files changed, 57 insertions(+) create mode 100644 ui/src/plugins/fontawesome.ts diff --git a/ui/package.json b/ui/package.json index 7e1c330..145f2b2 100644 --- a/ui/package.json +++ b/ui/package.json @@ -13,6 +13,10 @@ "vue-class-component": "^8.0.0-0" }, "devDependencies": { + "@fortawesome/fontawesome-svg-core": "^6.2.1", + "@fortawesome/free-brands-svg-icons": "^6.2.1", + "@fortawesome/free-solid-svg-icons": "^6.2.1", + "@fortawesome/vue-fontawesome": "^3.0.2", "@typescript-eslint/eslint-plugin": "^5.4.0", "@typescript-eslint/parser": "^5.4.0", "@vue/cli-plugin-babel": "~5.0.0", diff --git a/ui/src/main.ts b/ui/src/main.ts index ae500bb..299eedb 100644 --- a/ui/src/main.ts +++ b/ui/src/main.ts @@ -1,4 +1,5 @@ import { Advent22Plugin } from "@/plugins/advent22" +import { FontAwesomePlugin } from "@/plugins/fontawesome" import { createApp } from 'vue' import App from './App.vue' @@ -6,5 +7,6 @@ import "@/main.scss" const app = createApp(App) app.use(Advent22Plugin) +app.use(FontAwesomePlugin) app.mount('#app') diff --git a/ui/src/plugins/fontawesome.ts b/ui/src/plugins/fontawesome.ts new file mode 100644 index 0000000..da115c5 --- /dev/null +++ b/ui/src/plugins/fontawesome.ts @@ -0,0 +1,20 @@ +import { App, Plugin } from 'vue'; + +/* import the fontawesome core */ +import { library } from '@fortawesome/fontawesome-svg-core'; + +/* import specific icons */ +import { fab } from '@fortawesome/free-brands-svg-icons'; +import { fas } from '@fortawesome/free-solid-svg-icons'; + +/* add icons to the library */ +library.add(fas, fab); + +/* import font awesome icon component */ +import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; + +export const FontAwesomePlugin: Plugin = { + install(app: App) { + app.component('font-awesome-icon', FontAwesomeIcon); + } +} \ No newline at end of file diff --git a/ui/yarn.lock b/ui/yarn.lock index 86065a0..c297f07 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -968,6 +968,37 @@ minimatch "^3.0.4" strip-json-comments "^3.1.1" +"@fortawesome/fontawesome-common-types@6.2.1": + version "6.2.1" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.1.tgz#411e02a820744d3f7e0d8d9df9d82b471beaa073" + integrity sha512-Sz07mnQrTekFWLz5BMjOzHl/+NooTdW8F8kDQxjWwbpOJcnoSg4vUDng8d/WR1wOxM0O+CY9Zw0nR054riNYtQ== + +"@fortawesome/fontawesome-svg-core@^6.2.1": + version "6.2.1" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.1.tgz#e87e905e444b5e7b715af09b64d27b53d4c8f9d9" + integrity sha512-HELwwbCz6C1XEcjzyT1Jugmz2NNklMrSPjZOWMlc+ZsHIVk+XOvOXLGGQtFBwSyqfJDNgRq4xBCwWOaZ/d9DEA== + dependencies: + "@fortawesome/fontawesome-common-types" "6.2.1" + +"@fortawesome/free-brands-svg-icons@^6.2.1": + version "6.2.1" + resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.2.1.tgz#04a6d6f7898f7ef392aba7a65030a584d4f4c84f" + integrity sha512-L8l4MfdHPmZlJ72PvzdfwOwbwcCAL0vx48tJRnI6u1PJXh+j2f3yDoKyQgO3qjEsgD5Fr2tQV/cPP8F/k6aUig== + dependencies: + "@fortawesome/fontawesome-common-types" "6.2.1" + +"@fortawesome/free-solid-svg-icons@^6.2.1": + version "6.2.1" + resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.1.tgz#2290ea5adcf1537cbd0c43de6feb38af02141d27" + integrity sha512-oKuqrP5jbfEPJWTij4sM+/RvgX+RMFwx3QZCZcK9PrBDgxC35zuc7AOFsyMjMd/PIFPeB2JxyqDr5zs/DZFPPw== + dependencies: + "@fortawesome/fontawesome-common-types" "6.2.1" + +"@fortawesome/vue-fontawesome@^3.0.2": + version "3.0.2" + resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.2.tgz#1b2ec546caab790c38d3dcb38407485a70703dd2" + integrity sha512-xHVtVY8ASUeEvgcA/7vULUesENhD+pi/EirRHdMBqooHlXBqK+yrV6d8tUye1m5UKQKVgYAHMhUBfOnoiwvc8Q== + "@hapi/hoek@^9.0.0": version "9.3.0" resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.3.0.tgz#8368869dcb735be2e7f5cb7647de78e167a251fb" From c0bc9aee5df36857dad75b3f5380b7443ed98d8d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= Date: Fri, 20 Jan 2023 00:42:47 +0000 Subject: [PATCH 28/69] steps with icons --- ui/src/components/DoorMapEditor.vue | 25 ++++++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/ui/src/components/DoorMapEditor.vue b/ui/src/components/DoorMapEditor.vue index 612301a..abf2ecd 100644 --- a/ui/src/components/DoorMapEditor.vue +++ b/ui/src/components/DoorMapEditor.vue @@ -10,13 +10,19 @@ :class="current_step === index ? 'is-active' : ''" @click="current_step = index" > - {{ step }} + + + + + {{ step.label }} + -

Narf!

+

Foo

+

Bar

@@ -24,13 +30,26 @@ import { Vue, Options } from "vue-class-component"; import DoorPlacer from "./door_map/DoorPlacer.vue"; +type Step = { + label: string; + icon: string; +}; + @Options({ components: { DoorPlacer, }, }) export default class DoorMapEditor extends Vue { - private readonly steps: string[] = ["Platzieren", "Ordnen", "Überprüfen"]; + private 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 change_step(next_step: number) { + this.current_step = next_step; + } } From 1e5fae0caabdd5b3bb52638eb41b51a9599d1312 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= Date: Fri, 20 Jan 2023 00:46:17 +0000 Subject: [PATCH 29/69] "_rectangles" -> "rectangles_array" --- ui/src/components/rects/RectPad.vue | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/ui/src/components/rects/RectPad.vue b/ui/src/components/rects/RectPad.vue index 35e4351..5bbb8e3 100644 --- a/ui/src/components/rects/RectPad.vue +++ b/ui/src/components/rects/RectPad.vue @@ -13,7 +13,7 @@ @dblclick.left="remove_rect" > @@ -56,7 +56,7 @@ export default class RectPad extends Vue { private dragging = false; private drag_rect?: Rectangle; private drag_origin = new Vector2D(); - private _rectangles: Rectangle[] = []; + private rectangles_array: Rectangle[] = []; private get preview_visible(): boolean { return this.drawing || this.dragging; @@ -70,21 +70,21 @@ export default class RectPad extends Vue { } public get rectangles(): Rectangle[] { - return this._rectangles; //.map((rect) => rect.normalize()); + return this.rectangles_array; //.map((rect) => rect.normalize()); } public set rectangles(rects: Rectangle[]) { - this._rectangles = rects; //.map((rect) => rect.normalize()); + this.rectangles_array = rects; //.map((rect) => rect.normalize()); } private pop_rectangle(point: Vector2D): Rectangle | undefined { - const idx = this._rectangles.findIndex((rect) => rect.contains(point)); + const idx = this.rectangles_array.findIndex((rect) => rect.contains(point)); if (idx === -1) { return; } - return this._rectangles.splice(idx, 1)[0]; + return this.rectangles_array.splice(idx, 1)[0]; } private draw_start(event: MouseEvent) { @@ -108,7 +108,7 @@ export default class RectPad extends Vue { return; } - this._rectangles.push(this.preview_rectangle); + this.rectangles_array.push(this.preview_rectangle); } private drag_start(event: MouseEvent) { @@ -136,7 +136,7 @@ export default class RectPad extends Vue { } this.dragging = false; - this._rectangles.push(this.preview_rectangle); + this.rectangles_array.push(this.preview_rectangle); } private on_mousemove(event: MouseEvent) { From a715e761a9b9901f3f0e517c1cb731896a76ced5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= Date: Fri, 20 Jan 2023 00:51:11 +0000 Subject: [PATCH 30/69] use change_step --- ui/src/components/DoorMapEditor.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/components/DoorMapEditor.vue b/ui/src/components/DoorMapEditor.vue index abf2ecd..78fbf85 100644 --- a/ui/src/components/DoorMapEditor.vue +++ b/ui/src/components/DoorMapEditor.vue @@ -8,7 +8,7 @@ v-for="(step, index) in steps" :key="'step-' + index" :class="current_step === index ? 'is-active' : ''" - @click="current_step = index" + @click="change_step(index)" > From 641492339abc47549d198e92d7a8851d71ac0e41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= Date: Fri, 20 Jan 2023 23:48:33 +0000 Subject: [PATCH 31/69] trim "get classes" --- ui/src/components/rects/Rect.vue | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/ui/src/components/rects/Rect.vue b/ui/src/components/rects/Rect.vue index f139bd2..11dc798 100644 --- a/ui/src/components/rects/Rect.vue +++ b/ui/src/components/rects/Rect.vue @@ -1,6 +1,6 @@ + + \ No newline at end of file From 049763a411cc047fb8b7ec3e967e52ba8d59a624 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= Date: Tue, 24 Jan 2023 00:21:33 +0000 Subject: [PATCH 40/69] yarn upgrade --- ui/yarn.lock | 27 ++++++--------------------- 1 file changed, 6 insertions(+), 21 deletions(-) diff --git a/ui/yarn.lock b/ui/yarn.lock index 3830826..e63eb9e 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -917,9 +917,9 @@ esutils "^2.0.2" "@babel/runtime-corejs2@^7.0.0": - version "7.20.7" - resolved "https://registry.yarnpkg.com/@babel/runtime-corejs2/-/runtime-corejs2-7.20.7.tgz#84ec2bb0ed33199e7d92aea104318ffd6732d245" - integrity sha512-SrtIxfjwLkUFljufH1GeqYlIYzdyxP2IoCb3tVjcrTdMyB7RQyRCdkyMzvw3k/h+CStnSf2SvvQicS1Rf/fuGQ== + version "7.20.13" + resolved "https://registry.yarnpkg.com/@babel/runtime-corejs2/-/runtime-corejs2-7.20.13.tgz#a8f31b768d5b71b48bb288d6bca0b85e518ccf92" + integrity sha512-K2yRNithMJG4epI509n4ljPjogMhmYCB887iSD7rRecxWC9dkbfJZCPGj0BQaqG3d3Qkpb1SotEmyeMmtnvxhw== dependencies: core-js "^2.6.12" regenerator-runtime "^0.13.11" @@ -4146,12 +4146,7 @@ ignore@^4.0.6: resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc" integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg== -ignore@^5.1.1: - version "5.2.4" - resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324" - integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ== - -ignore@^5.2.0: +ignore@^5.1.1, ignore@^5.2.0: version "5.2.4" resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324" integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ== @@ -5695,12 +5690,7 @@ pump@^3.0.0: end-of-stream "^1.1.0" once "^1.3.1" -punycode@^2.1.0: - version "2.3.0" - resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.0.tgz#f67fa67c94da8f4d0cfff981aee4118064199b8f" - integrity sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA== - -punycode@^2.1.1: +punycode@^2.1.0, punycode@^2.1.1: version "2.3.0" resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.0.tgz#f67fa67c94da8f4d0cfff981aee4118064199b8f" integrity sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA== @@ -7092,12 +7082,7 @@ ws@^7.3.1: resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591" integrity sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q== -ws@^8.2.3: - version "8.12.0" - resolved "https://registry.yarnpkg.com/ws/-/ws-8.12.0.tgz#485074cc392689da78e1828a9ff23585e06cddd8" - integrity sha512-kU62emKIdKVeEIOIKVegvqpXMSTAMLJozpHZaJNDYqBjzlSYXQGviYwN1osDLJ9av68qHd4a2oSjd7yD4pacig== - -ws@^8.4.2: +ws@^8.2.3, ws@^8.4.2: version "8.12.0" resolved "https://registry.yarnpkg.com/ws/-/ws-8.12.0.tgz#485074cc392689da78e1828a9ff23585e06cddd8" integrity sha512-kU62emKIdKVeEIOIKVegvqpXMSTAMLJozpHZaJNDYqBjzlSYXQGviYwN1osDLJ9av68qHd4a2oSjd7yD4pacig== From a55d1a25ba3ee86e90b0da39daa5a0e4f04c69db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= Date: Tue, 24 Jan 2023 11:35:45 +0000 Subject: [PATCH 41/69] RectText component --- ui/src/components/door_map/DoorChooser.vue | 11 ++++--- ui/src/components/rects/RectText.vue | 36 ++++++++++++++++++++++ 2 files changed, 43 insertions(+), 4 deletions(-) create mode 100644 ui/src/components/rects/RectText.vue diff --git a/ui/src/components/door_map/DoorChooser.vue b/ui/src/components/door_map/DoorChooser.vue index 7a8d421..99ee3c4 100644 --- a/ui/src/components/door_map/DoorChooser.vue +++ b/ui/src/components/door_map/DoorChooser.vue @@ -14,12 +14,13 @@ :rectangle="rect" @click.left="choose_rect(index)" /> - + > + + +
@@ -31,11 +32,13 @@ import { Rectangle } from "../rects/rectangles"; import ThouCanvas from "../rects/ThouCanvas.vue"; import Rect from "../rects/Rect.vue"; +import RectText from "../rects/RectText.vue"; @Options({ components: { ThouCanvas, Rect, + RectText, }, props: { rectangles: Array, diff --git a/ui/src/components/rects/RectText.vue b/ui/src/components/rects/RectText.vue new file mode 100644 index 0000000..284d077 --- /dev/null +++ b/ui/src/components/rects/RectText.vue @@ -0,0 +1,36 @@ + + + + + \ No newline at end of file From a6c5a5469a5342dbe7d27db76dafa0bc2ef5ece8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= Date: Tue, 24 Jan 2023 23:11:01 +0000 Subject: [PATCH 42/69] allow Vector2D scaling --- ui/src/components/rects/rectangles.ts | 5 +++++ ui/tests/unit/rectangle.spec.ts | 6 ++++++ 2 files changed, 11 insertions(+) diff --git a/ui/src/components/rects/rectangles.ts b/ui/src/components/rects/rectangles.ts index 9273cc0..7b15b61 100644 --- a/ui/src/components/rects/rectangles.ts +++ b/ui/src/components/rects/rectangles.ts @@ -10,9 +10,14 @@ export class Vector2D { public plus(other: Vector2D): Vector2D { return new Vector2D(this.x + other.x, this.y + other.y); } + public minus(other: Vector2D): Vector2D { return new Vector2D(this.x - other.x, this.y - other.y); } + + public scale(other: number): Vector2D { + return new Vector2D(this.x * other, this.y * other); + } } export class Rectangle { diff --git a/ui/tests/unit/rectangle.spec.ts b/ui/tests/unit/rectangle.spec.ts index 16a625c..50eec6a 100644 --- a/ui/tests/unit/rectangle.spec.ts +++ b/ui/tests/unit/rectangle.spec.ts @@ -20,6 +20,12 @@ describe("Vector2D Tests", () => { expect(v2.x).to.equal(-2); expect(v2.y).to.equal(-2); }); + + it("should scale vectors", () => { + const v2 = v.scale(3); + expect(v2.x).to.equal(3); + expect(v2.y).to.equal(6); + }); }); describe("Rectangle Tests", () => { From a977b9b11c6914e594e60f6a24c01dc9794850a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= Date: Tue, 24 Jan 2023 23:11:15 +0000 Subject: [PATCH 43/69] svg version --- ui/src/components/rects/ThouCanvas.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/src/components/rects/ThouCanvas.vue b/ui/src/components/rects/ThouCanvas.vue index f47261f..cf6d138 100644 --- a/ui/src/components/rects/ThouCanvas.vue +++ b/ui/src/components/rects/ThouCanvas.vue @@ -1,6 +1,7 @@ diff --git a/ui/src/components/door_map/DoorPlacer.vue b/ui/src/components/door_map/DoorPlacer.vue index 91b6c46..59216f7 100644 --- a/ui/src/components/door_map/DoorPlacer.vue +++ b/ui/src/components/door_map/DoorPlacer.vue @@ -9,13 +9,19 @@
- +
diff --git a/ui/src/components/door_map/calendar.ts b/ui/src/components/door_map/calendar.ts index b61cad4..4e5f2e3 100644 --- a/ui/src/components/door_map/calendar.ts +++ b/ui/src/components/door_map/calendar.ts @@ -1,11 +1,11 @@ import { Rectangle } from "../rects/rectangles"; export class Door { - public day: number; - public readonly position: Rectangle; + public day?: number; + public position: Rectangle; - constructor(day: number, position: Rectangle) { - this.day = day; + constructor(position: Rectangle, day?: number) { this.position = position; + this.day = day; } } \ No newline at end of file From 6628efe957b8d7aca95d454cb5ad0853cef9ddc8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= Date: Thu, 2 Feb 2023 15:28:30 +0000 Subject: [PATCH 58/69] Door interface --- ui/src/components/door_map/DoorPlacer.vue | 4 ++-- ui/src/components/door_map/calendar.ts | 11 +++-------- 2 files changed, 5 insertions(+), 10 deletions(-) diff --git a/ui/src/components/door_map/DoorPlacer.vue b/ui/src/components/door_map/DoorPlacer.vue index 59216f7..b7fe8f3 100644 --- a/ui/src/components/door_map/DoorPlacer.vue +++ b/ui/src/components/door_map/DoorPlacer.vue @@ -38,11 +38,11 @@ export default class extends Vue { private doors!: Door[]; private get rectangles() { - return this.doors.filter((door) => door.position); + return this.doors.map((door) => door.position); } private on_draw(position: Rectangle) { - this.doors.push(new Door(position)); + this.doors.push({ position: position }); } private find_door_index(position: Rectangle): number { diff --git a/ui/src/components/door_map/calendar.ts b/ui/src/components/door_map/calendar.ts index 4e5f2e3..f51b309 100644 --- a/ui/src/components/door_map/calendar.ts +++ b/ui/src/components/door_map/calendar.ts @@ -1,11 +1,6 @@ import { Rectangle } from "../rects/rectangles"; -export class Door { - public day?: number; - public position: Rectangle; - - constructor(position: Rectangle, day?: number) { - this.position = position; - this.day = day; - } +export interface Door { + day?: number; + position: Rectangle; } \ No newline at end of file From 1695e8651c337f1d2f74054ac82105fd0addeb40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= Date: Thu, 2 Feb 2023 15:29:04 +0000 Subject: [PATCH 59/69] RectangleCanvas.rectangles is a prop, don't init --- ui/src/components/door_map/RectangleCanvas.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/components/door_map/RectangleCanvas.vue b/ui/src/components/door_map/RectangleCanvas.vue index 74e638d..90305c0 100644 --- a/ui/src/components/door_map/RectangleCanvas.vue +++ b/ui/src/components/door_map/RectangleCanvas.vue @@ -45,7 +45,7 @@ export default class extends Vue { private preview_rect = new Rectangle(); private drag_rect?: Rectangle; private drag_origin = new Vector2D(); - private rectangles: Rectangle[] = []; + private rectangles!: Rectangle[]; private get preview_visible(): boolean { return this.state !== CanvasState.Idle; From d0756fda92b5b2ac887207ba1c2425789ed79bd0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= Date: Thu, 2 Feb 2023 15:29:26 +0000 Subject: [PATCH 60/69] fixes for (still crude) DoorChooser --- ui/src/components/DoorMapEditor.vue | 4 +- ui/src/components/door_map/DoorChooser.vue | 44 ++++++++++++---------- 2 files changed, 26 insertions(+), 22 deletions(-) diff --git a/ui/src/components/DoorMapEditor.vue b/ui/src/components/DoorMapEditor.vue index 36a1337..562729d 100644 --- a/ui/src/components/DoorMapEditor.vue +++ b/ui/src/components/DoorMapEditor.vue @@ -5,7 +5,7 @@ - +

Bar

@@ -13,7 +13,6 @@ diff --git a/ui/src/components/door_map/DoorChooser.vue b/ui/src/components/door_map/DoorChooser.vue index cd97094..d00c85f 100644 --- a/ui/src/components/door_map/DoorChooser.vue +++ b/ui/src/components/door_map/DoorChooser.vue @@ -9,18 +9,18 @@ @@ -29,7 +29,7 @@ From ef5281e57b809ecfe604cbb53141c5a1ceb35feb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= Date: Thu, 2 Feb 2023 18:06:55 +0000 Subject: [PATCH 61/69] DoorChooser usable but bad --- ui/src/components/door_map/DoorChooser.vue | 44 ++++++++-------------- ui/src/components/door_map/DoorPlacer.vue | 3 +- ui/src/components/door_map/calendar.ts | 19 ++++++++-- 3 files changed, 34 insertions(+), 32 deletions(-) diff --git a/ui/src/components/door_map/DoorChooser.vue b/ui/src/components/door_map/DoorChooser.vue index d00c85f..0bfc755 100644 --- a/ui/src/components/door_map/DoorChooser.vue +++ b/ui/src/components/door_map/DoorChooser.vue @@ -1,26 +1,28 @@