feat(EvConfigCanvas): added button to reset view

Closes #74

Signed-off-by: Lukas Mertens <git@lukas-mertens.de>

commit-id:35bad4f1

src/components/EvConfigCanvas.vue

@@ -7,7 +7,21 @@
     <!-- <v-sheet id="config-stage-info" class="pa-2" height="100" width="200" elevation="2" v-if="selected_interface">
       {{ selected_interface }} <v-btn color="primary" x-small @click="discard_selected_terminal">Discard</v-btn>
     </v-sheet> -->
-    <v-btn id="config-save-button" icon="mdi-content-save" color="primary" @click="save_config" v-if="current_config"></v-btn>
+    <div id="stage-controls">
+      <v-tooltip location="left">
+        <template v-slot:activator="{ props }">
+          <v-btn id="reset-view-button" icon="mdi-undo" color="primary" @click="reset_view" v-bind="props"></v-btn>
+        </template>
+        <span>Reset View</span>
+      </v-tooltip>
+      <v-tooltip location="left" v-if="current_config">
+        <template v-slot:activator="{ props }">
+          <v-btn id="config-save-button" icon="mdi-content-save" color="primary" @click="save_config"
+                 v-bind="props"></v-btn>
+        </template>
+        <span>Save Config</span>
+      </v-tooltip>
+    </div>
   </v-sheet>
 </template>
 
@@ -45,6 +59,10 @@ export default defineComponent({
 
     const current_config: ComputedRef<EVConfigModel> = computed(evbcStore.get_current_config);
 
+    const reset_view = () => {
+      stage.reset_view();
+    };
+
     const save_config = () => {
       if (!current_config.value) return;
       evbc
@@ -69,6 +87,7 @@ export default defineComponent({
       selected_interface,
       stage,
       current_config,
+      reset_view,
       save_config,
     };
   },
@@ -89,9 +108,13 @@ export default defineComponent({
   top: 6px;
   right: 6px;
 }
-#config-save-button {
+
+#stage-controls {
   position: absolute;
   bottom: 12px;
   right: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 }
 </style>

src/modules/evconf_konva/config_stage.ts

@@ -14,6 +14,7 @@ import {KonvaEventObject} from "konva/lib/Node";
 import {Vector2d} from "konva/lib/types";
 import {currentTheme} from "@/plugins/vuetify";
 import Stage = Konva.Stage;
+import Layer = Konva.Layer;
 
 export default class ConfigStage {
   // view part
@@ -109,16 +110,11 @@ export default class ConfigStage {
 
       const newScale = oldScale * scaleBy;
 
-      static_layer.scale({ x: newScale, y: newScale });
       const newPos = {
         x: pointer.x - mousePointTo.x * newScale,
         y: pointer.y - mousePointTo.y * newScale,
       };
-      static_layer.position(newPos);
-      this._bg.width(this._stage.width() / newScale);
-      this._bg.height(this._stage.height() / newScale);
-      this._bg.setAbsolutePosition({x: 0, y: 0});
-      static_layer.batchDraw();
+      this.setNewPosAndScale(static_layer, newPos, newScale);
     });
 
     this._stage.add(static_layer);
@@ -138,6 +134,15 @@ export default class ConfigStage {
     this.resizeStage();
   }
 
+  private setNewPosAndScale(static_layer: Layer, newPos: { x: number; y: number }, newScale: number) {
+    static_layer.scale({x: newScale, y: newScale});
+    static_layer.position(newPos);
+    this._bg.width(this._stage.width() / newScale);
+    this._bg.height(this._stage.height() / newScale);
+    this._bg.setAbsolutePosition({x: 0, y: 0});
+    static_layer.batchDraw();
+  }
+
   private registerListeners() {
     window.addEventListener('resize', () => this.resizeStage());
   }
@@ -159,6 +164,10 @@ export default class ConfigStage {
     this._stage.height(containerHeight);
   }
 
+  public reset_view(): void {
+    this.setNewPosAndScale(this._konva.static_layer, {x: 0, y: 0}, 1);
+  }
+
   set_model(model: EVConfigModel) {
     if (this._model) {
       // FIXME (aw): what to do here, cleanup?