diff --git a/ui/src/components/CalendarImage.vue b/ui/src/components/CalendarImage.vue
index 367c956..1fc0c9b 100644
--- a/ui/src/components/CalendarImage.vue
+++ b/ui/src/components/CalendarImage.vue
@@ -12,12 +12,20 @@
>
+
@@ -47,6 +55,8 @@ export default class CalendarImage extends Vue {
corner1: new Vector2D(),
corner2: new Vector2D(),
};
+ private readonly min_rect_area = 4;
+ private rectangles: Rectangle[] = [];
private on_pointerdown(event: MouseEvent) {
this.preview_state.visible = true;
@@ -60,6 +70,9 @@ export default class CalendarImage extends Vue {
private on_pointerup() {
this.preview_state.visible = false;
+ if (this.preview_rectangle.area >= this.min_rect_area) {
+ this.rectangles.push(this.preview_rectangle);
+ }
}
private get preview_rectangle(): Rectangle {
@@ -119,13 +132,15 @@ div#container {
width: 100%;
rect {
- stroke-width: 1;
- stroke-opacity: 0.9;
+ fill: lightgreen;
+ stroke: green;
fill-opacity: 0.2;
+ stroke-opacity: 0.9;
+ stroke-width: 1;
- preview {
- fill: white;
- stroke: red;
+ &.focus {
+ fill: gold;
+ stroke: yellow;
}
}
}
diff --git a/ui/src/components/rectangles.ts b/ui/src/components/rectangles.ts
index 89c7c97..809d07d 100644
--- a/ui/src/components/rectangles.ts
+++ b/ui/src/components/rectangles.ts
@@ -56,6 +56,10 @@ export class Rectangle {
return this.size.y;
}
+ public get area(): number {
+ return this.width * this.height;
+ }
+
public normalize(): Rectangle {
let left = this.left;
let top = this.top;