diff --git a/addons/pos_restaurant/static/src/css/restaurant.css b/addons/pos_restaurant/static/src/css/restaurant.css index 477a6fbb6a7..b9ed6005664 100644 --- a/addons/pos_restaurant/static/src/css/restaurant.css +++ b/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 { diff --git a/addons/pos_restaurant/static/src/js/Screens/FloorScreen/FloorScreen.js b/addons/pos_restaurant/static/src/js/Screens/FloorScreen/FloorScreen.js index 5095d88bd3a..3a48c25efcc 100644 --- a/addons/pos_restaurant/static/src/js/Screens/FloorScreen/FloorScreen.js +++ b/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) { diff --git a/addons/pos_restaurant/static/src/xml/Screens/FloorScreen/FloorScreen.xml b/addons/pos_restaurant/static/src/xml/Screens/FloorScreen/FloorScreen.xml index 818f2d83dc0..0822ffc17e8 100644 --- a/addons/pos_restaurant/static/src/xml/Screens/FloorScreen/FloorScreen.xml +++ b/addons/pos_restaurant/static/src/xml/Screens/FloorScreen/FloorScreen.xml @@ -13,7 +13,15 @@ -
+ +
This floor has no tables yet, use the