feat(ui): Added zone size display, proper icon/text scaling and limit…

…ed scaling

client/zone/js-modules/locations.js

@@ -70,9 +70,16 @@ export class Zone {
         this.y2 = Math.max(y1, y2);
     }
 
-    draw(ctx, transformMapToScreenSpace) {
+    draw(ctx, transformMapToScreenSpace, scaleFactor) {
         const p1 = new DOMPoint(this.x1, this.y1).matrixTransform(transformMapToScreenSpace);
         const p2 = new DOMPoint(this.x2, this.y2).matrixTransform(transformMapToScreenSpace);
+        const dimensions = {
+            x: (this.x2 - this.x1) / 10,
+            y: (this.y2 - this.y1) / 10
+        };
+        const label = dimensions.x.toFixed(1) + " x " + dimensions.y.toFixed(1) + "m";
+
+
 
         ctx.save();
         if (!this.active) {
@@ -89,6 +96,14 @@ export class Zone {
         ctx.strokeRect(p1.x, p1.y, p2.x - p1.x, p2.y - p1.y);
         ctx.restore();
 
+        ctx.save();
+        ctx.textAlign = "start";
+        ctx.fillStyle = "rgba(255, 255, 255, 1)";
+        ctx.font = Math.round(6 * scaleFactor).toString(10) + "px sans-serif";
+        ctx.fillText(label, p1.x, p1.y - 4);
+        ctx.strokeText(label, p1.x, p1.y - 4);
+        ctx.restore();
+
         if (this.active) {
             ctx.drawImage(
                 img_delete_button,
@@ -649,15 +664,15 @@ export class SegmentLabel {
         this.label = label;
     }
 
-    draw(ctx, transformFromMapSpace) {
+    draw(ctx, transformFromMapSpace, scaleFactor) {
         const p1 = new DOMPoint(this.x, this.y).matrixTransform(transformFromMapSpace);
-        const oldAlpha = ctx.globalAlpha;
 
+        ctx.save();
         ctx.globalAlpha = 0.7;
         ctx.textAlign = "center";
-        ctx.font = "30px sans-serif";
+        ctx.font = Math.round(7 * scaleFactor).toString(10) + "px sans-serif";
         ctx.fillText(this.label, p1.x, p1.y);
 
-        ctx.globalAlpha = oldAlpha;
+        ctx.restore();
     }
 }

client/zone/js-modules/path-drawer.js

@@ -77,11 +77,17 @@ export function PathDrawer() {
         const ctx = canvas.getContext("2d");
 
         const chargerPositionInPixels = mmToCanvasPx(position);
+        const scaledSize = {
+            width: Math.min(img_charger.width / (2.5 / scaleFactor), img_charger.width),
+            height: Math.min(img_charger.height / (2.5 / scaleFactor), img_charger.height)
+        };
 
         ctx.drawImage(
             img_charger,
-            chargerPositionInPixels[0] - img_charger.height / 2,
-            chargerPositionInPixels[1] - img_charger.width / 2
+            chargerPositionInPixels[0] - scaledSize.height / 2,
+            chargerPositionInPixels[1] - scaledSize.width / 2,
+            scaledSize.height,
+            scaledSize.width
         );
     }
 
@@ -102,12 +108,18 @@ export function PathDrawer() {
 
         const robotPositionInPixels = mmToCanvasPx(position);
 
+        const scaledSize = {
+            width: Math.min(img_rocky.width / (2.5 / scaleFactor), img_rocky.width),
+            height: Math.min(img_rocky.height / (2.5 / scaleFactor), img_rocky.height)
+        };
+
+
         ctx.drawImage(
             rotateRobot(img_rocky, angle),
-            robotPositionInPixels[0] - img_rocky.width / 2, // x
-            robotPositionInPixels[1] - img_rocky.height / 2, // y
-            img_rocky.width, // width
-            img_rocky.height // height
+            robotPositionInPixels[0] - scaledSize.width / 2, // x
+            robotPositionInPixels[1] - scaledSize.height / 2, // y
+            scaledSize.width, // width
+            scaledSize.height // height
         );
     }
 

client/zone/js-modules/vacuum-map.js

@@ -320,15 +320,15 @@ export function VacuumMap(canvasElement) {
 
             ctx.drawImage(mapDrawer.canvas, 0, 0);
 
-            let pathScale = pathDrawer.getScaleFactor();
-            ctx.scale(1 / pathScale, 1 / pathScale);
+            let scaleFactor = pathDrawer.getScaleFactor();
+            ctx.scale(1 / scaleFactor, 1 / scaleFactor);
             ctx.drawImage(pathDrawer.canvas, 0, 0);
-            ctx.scale(pathScale, pathScale);
+            ctx.scale(scaleFactor, scaleFactor);
 
 
             usingOwnTransform(ctx, (ctx, transform) => {
                 locations.forEach(location => {
-                    location.draw(ctx, transform);
+                    location.draw(ctx, transform, scaleFactor);
                 });
             });
         }
@@ -464,8 +464,15 @@ export function VacuumMap(canvasElement) {
         }
 
         function scalePinch(evt) {
+            const currentScaleFactor = ctx.getScaleFactor2d()[0];
             const factor = evt.scale / lastScaleFactor;
+
+            if (currentScaleFactor < 0.4 && factor < 1) {
+                return;
+            }
+
             lastScaleFactor = evt.scale;
+
             const pt = ctx.transformedPoint(evt.center.x, evt.center.y);
             ctx.translate(pt.x, pt.y);
             ctx.scale(factor, factor);
@@ -488,10 +495,17 @@ export function VacuumMap(canvasElement) {
          */
         const handleScroll = function (evt) {
             const delta = evt.wheelDelta ? evt.wheelDelta / 40 : evt.detail ? -evt.detail : 0;
+
             if (delta) {
+                const currentScaleFactor = ctx.getScaleFactor2d()[0];
+                const factor = parseFloat(Math.pow(scaleFactor, delta).toPrecision(2));
+
+                if (factor * currentScaleFactor < 0.4 && factor < 1) {
+                    return;
+                }
+
                 const pt = ctx.transformedPoint(evt.offsetX, evt.offsetY);
                 ctx.translate(pt.x, pt.y);
-                const factor = Math.pow(scaleFactor, delta);
                 ctx.scale(factor, factor);
                 ctx.translate(-pt.x, -pt.y);
 
@@ -501,6 +515,7 @@ export function VacuumMap(canvasElement) {
 
                 redraw();
             }
+
             return evt.preventDefault() && false;
         };