Moved PanZoom functions to skin.js (watch.js)
IgorA100
GitHub
parent
8bdb169fca
commit
166716e7c9
web/skins/classic/views/js
|
|
@ -23,14 +23,6 @@ var coordinateMouse = {
|
|||
shiftMouseForTrigger_x: null, shiftMouseForTrigger_y: null
|
||||
};
|
||||
var leftBtnStatus = {Down: false, UpAfterDown: false};
|
||||
|
||||
var panZoomEnabled = true; //Add it to settings in the future
|
||||
var panZoomMaxScale = 10;
|
||||
var panZoomStep = 0.3;
|
||||
var panZoom = [];
|
||||
var shifted;
|
||||
var ctrled;
|
||||
|
||||
var updateScale = false; //Scale needs to be updated
|
||||
|
||||
/*
|
||||
|
|
@ -640,16 +632,7 @@ function handleClick(event) {
|
|||
}
|
||||
|
||||
if (obj.getAttribute('id').indexOf("liveStream") >= 0) {
|
||||
if ((ctrled && shifted) || (!ctrled && !shifted)) {
|
||||
return;
|
||||
} else if (ctrled) {
|
||||
panZoom[monitorId].zoom(1, {animate: true});
|
||||
} else if (shifted) {
|
||||
const scale = panZoom[monitorId].getScale() * Math.exp(panZoomStep);
|
||||
const point = {clientX: event.clientX, clientY: event.clientY};
|
||||
panZoom[monitorId].zoomToPoint(scale, point, {focal: {x: event.clientX, y: event.clientY}});
|
||||
}
|
||||
updateScale = true;
|
||||
zmPanZoom.click(monitorId);
|
||||
}
|
||||
} else {
|
||||
// +++ Old ZoomPan algorithm.
|
||||
|
|
@ -980,33 +963,6 @@ function streamStart() {
|
|||
*/
|
||||
}
|
||||
|
||||
/*
|
||||
* Id - Monitor ID
|
||||
* The function will probably be moved to the main JS file
|
||||
*/
|
||||
function manageCursor(Id) {
|
||||
const obj = document.getElementById('liveStream'+Id);
|
||||
const currentScale = panZoom[Id].getScale().toFixed(1);
|
||||
|
||||
if (shifted && ctrled) {
|
||||
obj.closest('.zoompan').style['cursor'] = 'not-allowed';
|
||||
} else if (shifted) {
|
||||
obj.closest('.zoompan').style['cursor'] = 'zoom-in';
|
||||
} else if (ctrled) {
|
||||
if (currentScale == 1.0) {
|
||||
obj.closest('.zoompan').style['cursor'] = 'auto';
|
||||
} else {
|
||||
obj.closest('.zoompan').style['cursor'] = 'zoom-out';
|
||||
}
|
||||
} else {
|
||||
if (currentScale == 1.0) {
|
||||
obj.closest('.zoompan').style['cursor'] = 'auto';
|
||||
} else {
|
||||
obj.closest('.zoompan').style['cursor'] = 'move';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function initPage() {
|
||||
// +++ Support of old ZoomPan algorithm
|
||||
var useOldZoomPan = getCookie('zmUseOldZoomPan');
|
||||
|
|
@ -1029,19 +985,7 @@ function initPage() {
|
|||
document.getElementById('use-old-zoom-pan').checked = useOldZoomPan;
|
||||
// --- Support of old ZoomPan algorithm
|
||||
|
||||
if (panZoomEnabled) {
|
||||
$j(document).on('keyup keydown', function(e) {
|
||||
shifted = e.shiftKey ? e.shiftKey : e.shift;
|
||||
ctrled = e.ctrlKey;
|
||||
manageCursor(monitorId);
|
||||
});
|
||||
$j('.zoompan').each( function() {
|
||||
panZoomAction('enable', {obj: this});
|
||||
this.addEventListener('mousemove', function(e) {
|
||||
//Temporarily not use
|
||||
});
|
||||
});
|
||||
}
|
||||
zmPanZoom.init();
|
||||
|
||||
if (canView.Control) {
|
||||
// Load the settings modal into the DOM
|
||||
|
|
@ -1346,83 +1290,12 @@ function changeObjectClass() {
|
|||
}
|
||||
}
|
||||
|
||||
/*
|
||||
param = param['obj'] : DOM object
|
||||
param = param['id'] : monitor id
|
||||
*/
|
||||
function panZoomAction(action, param) {
|
||||
if (action == "enable") {
|
||||
//Enable all object
|
||||
const i = stringToNumber($j(param['obj']).children('[id ^= "liveStream"]')[0].id);
|
||||
$j('.btn-zoom-in').removeClass('hidden');
|
||||
$j('.btn-zoom-out').removeClass('hidden');
|
||||
panZoom[i] = Panzoom(param['obj'], {
|
||||
minScale: 1,
|
||||
step: panZoomStep,
|
||||
maxScale: panZoomMaxScale,
|
||||
contain: 'outside',
|
||||
cursor: 'auto',
|
||||
});
|
||||
//panZoom[i].pan(10, 10);
|
||||
//panZoom[i].zoom(1, {animate: true});
|
||||
// Binds to shift + wheel
|
||||
param['obj'].parentElement.addEventListener('wheel', function(event) {
|
||||
if (!shifted) {
|
||||
return;
|
||||
}
|
||||
panZoom[i].zoomWithWheel(event);
|
||||
updateScale = true;
|
||||
});
|
||||
} else if (action == "disable") {
|
||||
//Disable a specific object
|
||||
$j('.btn-zoom-in').addClass('hidden');
|
||||
$j('.btn-zoom-out').addClass('hidden');
|
||||
panZoom[param['id']].reset();
|
||||
panZoom[param['id']].resetStyle();
|
||||
panZoom[param['id']].setOptions({disablePan: true, disableZoom: true});
|
||||
panZoom[param['id']].destroy();
|
||||
updateScale = true;
|
||||
}
|
||||
}
|
||||
|
||||
function panZoomIn(el) {
|
||||
/*
|
||||
if (el.target.id) {
|
||||
//For Montage page
|
||||
var id = stringToNumber(el.target.id);
|
||||
} else { //There may be an element without ID inside the button
|
||||
var id = stringToNumber(el.target.parentElement.id);
|
||||
}
|
||||
*/
|
||||
var id = monitorId; //For Watch page
|
||||
if (el.ctrlKey) {
|
||||
// Double the zoom step.
|
||||
panZoom[id].zoom(panZoom[id].getScale() * Math.exp(panZoomStep*2), {animate: true});
|
||||
} else {
|
||||
panZoom[id].zoomIn();
|
||||
}
|
||||
updateScale = true;
|
||||
manageCursor(id);
|
||||
zmPanZoom.zoomIn(el);
|
||||
}
|
||||
|
||||
function panZoomOut(el) {
|
||||
/*
|
||||
if (el.target.id) {
|
||||
//For Montage page
|
||||
var id = stringToNumber(el.target.id);
|
||||
} else { //There may be an element without ID inside the button
|
||||
var id = stringToNumber(el.target.parentElement.id);
|
||||
}
|
||||
*/
|
||||
var id = monitorId; //For Watch page
|
||||
if (el.ctrlKey) {
|
||||
// Reset zoom
|
||||
panZoom[id].zoom(1, {animate: true});
|
||||
} else {
|
||||
panZoom[id].zoomOut();
|
||||
}
|
||||
updateScale = true;
|
||||
manageCursor(id);
|
||||
zmPanZoom.zoomOut(el);
|
||||
}
|
||||
|
||||
function monitorsSetScale(id=null) {
|
||||
|
|
@ -1438,7 +1311,7 @@ function monitorsSetScale(id=null) {
|
|||
}
|
||||
//const el = document.getElementById('liveStream'+id);
|
||||
if (panZoomEnabled) {
|
||||
var panZoomScale = panZoom[id].getScale();
|
||||
var panZoomScale = zmPanZoom.panZoom[id].getScale();
|
||||
} else {
|
||||
var panZoomScale = 1;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue