Lenaisten/advent22
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

drag_rect implementation

Browse source
This commit is contained in:
Jörn-Michael Miehe 2023-01-17 23:42:07 +00:00
parent 7160cfeff7
commit c1da30cc3e
1 changed files with 20 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
ui/src/components/rects/RectPad.vue
View file

@ -53,7 +53,7 @@ export default class RectPad extends Vue {
private preview_corner1 = new Vector2D(); private preview_corner1 = new Vector2D();
private preview_corner2 = new Vector2D(); private preview_corner2 = new Vector2D();
private dragging = false; private dragging = false;
private drag_index = -1; private drag_rect?: Rectangle;
private drag_origin = new Vector2D(); private drag_origin = new Vector2D();
private rectangles: Rectangle[] = []; private rectangles: Rectangle[] = [];
@ -68,14 +68,21 @@ export default class RectPad extends Vue {
).normalize(); ).normalize();
} }
private find_rectangle(point: Vector2D) { private pop_rectangle(point: Vector2D): Rectangle | undefined {
return this.rectangles.findIndex( const idx = this.rectangles.findIndex(
(rect) => (rect) =>
point.x >= rect.left && point.x >= rect.left &&
point.y >= rect.top && point.y >= rect.top &&
point.x <= rect.left + rect.width && point.x <= rect.left + rect.width &&
point.y <= rect.top + rect.height 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) { private draw_start(event: MouseEvent) {
@ -106,30 +113,26 @@ export default class RectPad extends Vue {
} }
let point = get_event_thous(event); 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; return;
} }
this.dragging = true; this.dragging = true;
this.drag_origin = point; this.drag_origin = point;
this.preview_corner1 = this.rectangles[this.drag_index].origin; this.preview_corner1 = this.drag_rect.origin;
this.preview_corner2 = this.rectangles[this.drag_index].corner; this.preview_corner2 = this.drag_rect.corner;
console.log("drag_start", point);
} }
private drag_finish(event: MouseEvent) { private drag_finish() {
if (!this.dragging) { if (!this.dragging) {
return; return;
} }
this.dragging = false; this.dragging = false;
this.rectangles[this.drag_index] = this.preview_rectangle; this.rectangles.push(this.preview_rectangle);
console.log("drag_finish", get_event_thous(event));
} }
private on_mousemove(event: MouseEvent) { private on_mousemove(event: MouseEvent) {
@ -137,27 +140,16 @@ export default class RectPad extends Vue {
if (this.drawing) { if (this.drawing) {
this.preview_corner2 = point; this.preview_corner2 = point;
} else if (this.dragging) { } else if (this.dragging && this.drag_rect) {
let movement = point.minus(this.drag_origin); let movement = point.minus(this.drag_origin);
this.preview_corner1 = this.preview_corner1 = this.drag_rect.origin.plus(movement);
this.rectangles[this.drag_index].origin.plus(movement); this.preview_corner2 = this.drag_rect.corner.plus(movement);
this.preview_corner2 =
this.rectangles[this.drag_index].corner.plus(movement);
} }
} }
private remove_rect(event: MouseEvent) { private remove_rect(event: MouseEvent) {
let point = get_event_thous(event); this.pop_rectangle(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));
} }
} }
</script> </script>