From b0511e31fab4cbe94a005b8a8cd39529a5f4dc55 Mon Sep 17 00:00:00 2001 From: IgorA100 Date: Tue, 20 Aug 2024 12:53:23 +0300 Subject: [PATCH 1/3] chore: Enable "touchAction" if Zoom=1 and disable if Zoom<>1 (panzoom.js) Enable "touchAction" if Zoom=1 and disable if Zoom<>1 This will allow canvas panning when capturing an image on mobile devices with Zoom=1 The issue may be closed: https://forums.zoneminder.com/viewtopic.php?p=135128&sid=7e7685052e5f107a364dfd445565643f#p135128 --- web/js/panzoom.js | 45 +++++++++++++++++++++++++++++++++++++++------ 1 file changed, 39 insertions(+), 6 deletions(-) diff --git a/web/js/panzoom.js b/web/js/panzoom.js index 8302f6bbb..2e2152556 100644 --- a/web/js/panzoom.js +++ b/web/js/panzoom.js @@ -10,7 +10,9 @@ var zmPanZoom = { shifted: null, ctrled: null, alted: null, - + panOnlyWhenZoomed: true, + //canvas: true, + touchAction: 'manipulation', /* * param.objString - class or id */ @@ -43,9 +45,10 @@ var zmPanZoom = { if (typeof eventData != 'undefined') { id = eventData.MonitorId; //Event page } else { - const obj = $j(params['obj']).find('[id ^= "liveStream"]')[0]; - if (obj) { - id = stringToNumber(obj.id); //Montage & Watch page + const obj = this.getStream(params['obj']); + + if (obj.length > 0) { + id = stringToNumber(obj[0].id); //Montage & Watch page } } if (!id) { @@ -64,7 +67,11 @@ var zmPanZoom = { if (!('cursor' in params)) params.cursor = 'inherit'; if (!('disablePan' in params)) params.disablePan = false; if (!('roundPixels' in params)) params.roundPixels = false; + if (!('panOnlyWhenZoomed' in params)) params.panOnlyWhenZoomed = this.panOnlyWhenZoomed; + //if (!('canvas' in params)) params.canvas = this.canvas; + if (!('touchAction' in params)) params.touchAction = this.touchAction; + //Direct initialization Panzoom this.panZoom[objPanZoom] = Panzoom(params['obj'], params); this.panZoom[objPanZoom].target = params['obj']; this.panZoom[objPanZoom].additional = params['additional']; @@ -150,6 +157,7 @@ var zmPanZoom = { this.panZoom[id].zoomIn(); } this.setTriggerChangedMonitors(id); + this.setTouchAction(this.panZoom[id]); this.manageCursor(id); }, @@ -162,9 +170,20 @@ var zmPanZoom = { this.panZoom[id].zoomOut(); } this.setTriggerChangedMonitors(id); + this.setTouchAction(this.panZoom[id]); this.manageCursor(id); }, + setTouchAction: function(el) { + const currentScale = el.getScale().toFixed(1); +console.log("currentScale_=>", currentScale); + if (currentScale == 1) { + el.setOptions({ touchAction: 'manipulation' }); + } else { + el.setOptions({ touchAction: 'none' }); + } + }, + /* * id - Monitor ID * !!! On Montage & Watch page, when you hover over a block of buttons (in the empty space between the buttons themselves), the cursor changes, but no action occurs, you need to review "monitors[i]||monitorStream.setup_onclick(handleClick)" @@ -179,7 +198,7 @@ var zmPanZoom = { const disablePan = this.panZoom[id].getOptions().disablePan; const disableZoom = this.panZoom[id].getOptions().disableZoom; - obj = document.getElementById('liveStream'+id); + obj = this.getStream(id); if (obj) { //Montage & Watch page obj_btn = document.getElementById('button_zoom'+id); //Change the cursor when you hover over the block of buttons at the top of the image. Not required on Event page } else { //Event page @@ -187,10 +206,11 @@ var zmPanZoom = { } if (!obj) { - console.log(`Stream witd id=${id} not found.`); + console.log(`Stream with id=${id} not found.`); return; } const currentScale = this.panZoom[id].getScale().toFixed(1); + if (this.shifted && this.ctrled) { const cursor = (disableZoom) ? 'auto' : 'zoom-out'; obj.style['cursor'] = cursor; @@ -245,6 +265,19 @@ var zmPanZoom = { if (this.ctrled || this.shifted) { this.setTriggerChangedMonitors(id); } + this.setTouchAction(this.panZoom[id]); + }, + + getStream: function(id) { + if (isNaN(id)) { + const liveStream = $j(id).find('[id ^= "liveStream"]'); + const evtStream = $j(id).find('[id ^= "evtStream"]'); + return (liveStream.length > 0) ? liveStream : evtStream; + } else { + const liveStream = document.getElementById('liveStream'+id); + const evtStream = document.getElementById('evtStream'+id); + return (liveStream) ? liveStream : evtStream; + } }, setTriggerChangedMonitors: function(id) { From f2323426a03fb1b4a9cb08fc270b2b00bd0d4f61 Mon Sep 17 00:00:00 2001 From: IgorA100 Date: Tue, 20 Aug 2024 13:03:08 +0300 Subject: [PATCH 2/3] chore: remove console.log (panzoom.js) --- web/js/panzoom.js | 1 - 1 file changed, 1 deletion(-) diff --git a/web/js/panzoom.js b/web/js/panzoom.js index 2e2152556..b450d5969 100644 --- a/web/js/panzoom.js +++ b/web/js/panzoom.js @@ -176,7 +176,6 @@ var zmPanZoom = { setTouchAction: function(el) { const currentScale = el.getScale().toFixed(1); -console.log("currentScale_=>", currentScale); if (currentScale == 1) { el.setOptions({ touchAction: 'manipulation' }); } else { From 0717a2d324f2cfb0d1ef222a4daadbea44ff8e2b Mon Sep 17 00:00:00 2001 From: IgorA100 Date: Tue, 20 Aug 2024 13:07:00 +0300 Subject: [PATCH 3/3] Chore: Removed extra spaces (panzoom.js) --- web/js/panzoom.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/js/panzoom.js b/web/js/panzoom.js index b450d5969..d8034ad83 100644 --- a/web/js/panzoom.js +++ b/web/js/panzoom.js @@ -177,9 +177,9 @@ var zmPanZoom = { setTouchAction: function(el) { const currentScale = el.getScale().toFixed(1); if (currentScale == 1) { - el.setOptions({ touchAction: 'manipulation' }); + el.setOptions({touchAction: 'manipulation'}); } else { - el.setOptions({ touchAction: 'none' }); + el.setOptions({touchAction: 'none'}); } },