From 5caaf81699a4214daf9223cc9ad6ec2c3b44b37a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Wed, 15 Jul 2020 22:56:48 +0200
Subject: [PATCH] rerender on canvas size change

---
 src/components/Collage.vue | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/Collage.vue b/src/components/Collage.vue
index bad7ea8..c158e15 100644
--- a/src/components/Collage.vue
+++ b/src/components/Collage.vue
@@ -1,15 +1,15 @@
 <template>
 <div class="collage">
     <div class="canvas">
-        <canvas id="canvas" ref="canvas" :width="canvas.width" :height="canvas.height"></canvas>
+        <canvas id="canvas" ref="canvas" :width="canvasSize.width" :height="canvasSize.height"></canvas>
         <div class="canvas-size">
             <label>
                 Width:
-                <input type="number" step="16" min="128" v-model="canvas.width">
+                <input type="number" step="16" min="128" v-model="canvasSize.width">
             </label>
             <label>
                 Height:
-                <input type="number" step="16" min="128" v-model="canvas.height">
+                <input type="number" step="16" min="128" v-model="canvasSize.height">
             </label>
         </div>
     </div>
@@ -55,7 +55,7 @@ type DisplayCollageModeType = CollageModeType | & "shuffle";
 export default class Collage extends Vue {
     @Prop({required: true}) private images!: ImageBitmap[];
     private context!: CanvasRenderingContext2D;
-    private canvas = {
+    private canvasSize = {
         width: 640,
         height: 640
     };
@@ -113,6 +113,13 @@ export default class Collage extends Vue {
             this.currentMode.place(this.context, this.images, this.collageConfig);
         }
     }
+
+    @Watch("canvasSize", {deep: true})
+    private onCanvasSizeChange() {
+        this.$nextTick(() => {
+            this.renderCollage();
+        });
+    }
 }
 </script>