Issue #8 update SVG dimensions in the store when enabling timeline

sources/frontend/src/components/SvgShowcase.vue

@@ -12,6 +12,7 @@
           :edges="this.$store.state.edges"
           :excluded-vertices-boxes="this.$store.state.excludedNodesClientRects"
           :vertex_map="this.$store.state.vertex_map"
+          :showing-timeline="this.$store.state.showTimeline"
           :style="this.$store.state.style"/>
     </div>
     <div class="canvas-minimap-container p-0 col-md-3" style="opacity: 0.9">

sources/frontend/src/components/svg/SvgCanvas.vue

@@ -72,6 +72,7 @@ export default {
     edges: Array,
     vertices: Array,
     excludedVerticesBoxes: Object,
+    showingTimeline: Boolean,
     vertex_map: Object,
     style: {
       line: Object,
@@ -115,10 +116,7 @@ export default {
     svgElem.addEventListener("mousedown", this.onMouseDownEvent);
     svgElem.addEventListener("mouseup", this.onMouseUpEvent);
     // once mounted set real viewport dimensions based on the dimensions of the main SVG element
-    this.setViewPortDimensions({
-      width: svgElem.clientWidth,
-      height: svgElem.clientHeight
-    })
+    this.onViewResizeEvent();
   },
   methods: {
     ...mapActions(["updateScale", "toggleVertexHighlightState", "changeTranslation", "changeVertexPos", "vertexMouseDown", "setViewPortDimensions", "vertexClicked"]),
@@ -161,8 +159,21 @@ export default {
     },
     onVertexMouseDown(down, vertex) {
       this.vertexMouseDown({vertex, down})
+    },
+    onViewResizeEvent() {
+      let id = `${this.id}`
+      let svgElem = document.getElementById(id)
+      this.setViewPortDimensions({
+        width: svgElem.clientWidth,
+        height: svgElem.clientHeight
+      })
+    }
+  },
+  watch: {
+    showingTimeline: function(newValue) {
+      console.log("Showing timeline " + newValue);
+      this.onViewResizeEvent();
     }
-
   }
 }
 </script>