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?