diff --git a/src/components/EvConfigCanvas.vue b/src/components/EvConfigCanvas.vue
index f522b37b..a75be9b9 100644
--- a/src/components/EvConfigCanvas.vue
+++ b/src/components/EvConfigCanvas.vue
@@ -7,7 +7,21 @@
-
+
+
+
+
+
+ Reset View
+
+
+
+
+
+ Save Config
+
+
@@ -45,6 +59,10 @@ export default defineComponent({
const current_config: ComputedRef = 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;
}
diff --git a/src/modules/evconf_konva/config_stage.ts b/src/modules/evconf_konva/config_stage.ts
index 8836e72a..8ec41053 100644
--- a/src/modules/evconf_konva/config_stage.ts
+++ b/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?