show drawn rectangles

ui/src/components/CalendarImage.vue

@@ -12,12 +12,20 @@
     >
       <rect
         v-if="preview_state.visible"
-        id="preview"
+        class="focus"
         :x="preview_rectangle.left"
         :y="preview_rectangle.top"
         :width="preview_rectangle.width"
         :height="preview_rectangle.height"
       />
+      <rect
+        v-for="rect in rectangles"
+        :key="rect.left"
+        :x="rect.left"
+        :y="rect.top"
+        :width="rect.width"
+        :height="rect.height"
+      />
     </svg>
   </div>
 </template>
@@ -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;
+      fill: lightgreen;
-      stroke-opacity: 0.9;
+      stroke: green;
       fill-opacity: 0.2;
+      stroke-opacity: 0.9;
+      stroke-width: 1;
 
-      &#preview {
+      &.focus {
-        fill: white;
+        fill: gold;
-        stroke: red;
+        stroke: yellow;
       }
     }
   }

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;