[IMP] pos_restaurant: add zoom on floor screen

Add possibility to zoom on floor screen on mobile devices.
It should be more easy to navigate when there is a lot of
tables.

Task ID: 2453679

X-original-commit: 43fbe45d4f9fc43477690e3d2fb1bc1299f4824b
Part-of: odoo/odoo#79448
Co-authored-by: Adrien Dieudonné <adr@odoo.com>
Co-authored-by: Romeo Fragomeli <rfr@odoo.com>

addons/pos_restaurant/static/src/css/restaurant.css

@@ -53,6 +53,8 @@
 
 .floor-map .tables {
     position: relative;
+    --scale: 1;
+    transform: scale(var(--scale));
 }
 @media screen and (min-width: 1024px) {
     .floor-map .tables {

addons/pos_restaurant/static/src/js/Screens/FloorScreen/FloorScreen.js

@@ -68,6 +68,29 @@ odoo.define('pos_restaurant.FloorScreen', function (require) {
                 ? this.env.pos.tables_by_id[this.state.selectedTableId]
                 : false;
         }
+        movePinch(hypot) {
+            const delta = hypot / this.scalehypot ;
+            const value = this.initalScale * delta;
+            this.setScale(value);
+        }
+        startPinch(hypot) {
+            this.scalehypot = hypot;
+            this.initalScale = this.getScale();
+        }
+        getMapNode() {
+            return this.el.querySelector('.floor-map > .tables, .floor-map > .empty-floor');
+        }
+        getScale() {
+            const scale = this.getMapNode().style.getPropertyValue('--scale');
+            const parsedScaleValue = parseFloat(scale);
+            return isNaN(parsedScaleValue) ? 1 : parsedScaleValue;
+        }
+        setScale(value) {
+            // a scale can't be a negative number
+            if (value > 0) {
+                this.getMapNode().style.setProperty('--scale', value);
+            }
+        }
         selectFloor(floor) {
             this.state.selectedFloorId = floor.id;
             this.state.floorBackground = this.activeFloor.background_color;
@@ -188,6 +211,25 @@ odoo.define('pos_restaurant.FloorScreen', function (require) {
                 }
             }
         }
+        _computePinchHypo(ev, callbackFunction) {
+            const touches = ev.touches;
+            // If two pointers are down, check for pinch gestures
+            if (touches.length === 2) {
+                const deltaX = touches[0].pageX - touches[1].pageX;
+                const deltaY = touches[0].pageY - touches[1].pageY;
+                callbackFunction(Math.hypot(deltaX, deltaY))
+            }
+        }
+        _onPinchStart(ev) {
+            ev.currentTarget.style.setProperty('touch-action', 'none');
+            this._computePinchHypo(ev, this.startPinch.bind(this));
+        }
+        _onPinchEnd(ev) {
+            ev.currentTarget.style.removeProperty('touch-action');
+        }
+        _onPinchMove(ev) {
+            debounce(this._computePinchHypo, 10, true)(ev, this.movePinch.bind(this));
+        }
         _onSelectTable(event) {
             const table = event.detail;
             if (this.state.isEditMode) {

addons/pos_restaurant/static/src/xml/Screens/FloorScreen/FloorScreen.xml

@@ -13,7 +13,15 @@
                         </t>
                     </div>
                 </t>
-                <div class="floor-map" t-on-click="trigger('deselect-table')" t-ref="floor-map-ref">
+
+                <div
+                    t-on-click="trigger('deselect-table')"
+                    t-on-touchstart="_onPinchStart"
+                    t-on-touchmove="_onPinchMove"
+                    t-on-touchend="_onPinchEnd"
+                    class="floor-map"
+                    t-ref="floor-map-ref"
+                >
                     <div t-if="isFloorEmpty" class="empty-floor">
                         <span>This floor has no tables yet, use the </span>
                         <i class="fa fa-plus" role="img" aria-label="Add button" title="Add button"></i>