pan & zoom su riscaldi

Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/riscaldi-superiori.vue

@@ -67,6 +67,14 @@
 		<hr />
 		<div class="warmers specific">
 			<warmers ref="warmers"></warmers>
+			<div class="controls">
+				<button @click="zoomIn()">
+					<img src="assets/icons/png/zoomIn.png" />
+				</button>
+				<button @click="zoomOut()">
+					<img src="assets/icons/png/zoomOut.png" />
+				</button>
+			</div>
 		</div>
 	</section>
 </template>

Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/warmers.ts

@@ -54,48 +54,23 @@ export default class Warmers extends Vue {
     return result;
   }
 
-  maxWidth: number = 0;
-  maxHeight: number = 0;
 
-  currentViewBoxX: number = 0;
-  currentViewBoxY: number = 0;
-  currentZoomX: number = 0;
-  currentZoomY: number = 0;
-
-
-  calcSizes() {
-    this.maxWidth = Math.max(...this.rows.map(r => this.resistancesPerRow(r).reduce((p, c) => p + c.dimension, 0))) * this.width;
-    this.maxHeight = this.rows.length * this.height;
-
-    this.currentViewBoxX = this.maxWidth / 2;
-    this.currentViewBoxY = this.maxHeight / 2;
-
-    this.currentZoomX = this.maxWidth / 2;
-    this.currentZoomY = this.maxHeight / 2;
-  }
-
-  get viewBox() {
-    return [this.currentViewBoxX - this.currentZoomX, this.currentViewBoxY - this.currentZoomY,
-    this.currentZoomX * 2, this.currentZoomY * 2];
-  }
+  zoomController: any = null;
 
   zoomIn() {
-    this.currentZoomY /= 2;
-    this.currentZoomX /= 2;
+    this.zoomController?.zoomIn();
   }
 
   zoomOut() {
-    this.currentZoomY *= 2;
-    this.currentZoomX *= 2;
+    this.zoomController?.zoomOut();
   }
 
-
   mounted() {
-    this.calcSizes();
+    let $this = this;
     setTimeout(() => {
-      svgPanZoom('#warmer', {
+      $this.zoomController = svgPanZoom('#warmer', {
         zoomEnabled: true,
-        controlIconsEnabled: true,
+        controlIconsEnabled: false,
         fit: true,
         center: true,
       });

Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/warmers.vue

@@ -1,5 +1,5 @@
 <template>
-	<svg id="warmer" :viewBox="viewBox">
+	<svg id="warmer">
 		<g v-for="row in rows" :key="row">
 			<foreignObject
 				v-for="cell in resistancesPerRow(row)"