frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Touch: pinch-to-zoom from touchpoint not origin

Browse Source
This commit is contained in:
Nick O'Leary 2014-05-12 23:57:14 +01:00
parent 4abbe483a0
commit 2ee78b73fb
1 changed files with 72 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
public/red/ui/view.js
View File

@ -40,7 +40,12 @@ RED.view = function() {
lasso = null, lasso = null,
showStatus = false, showStatus = false,
clickTime = 0, clickTime = 0,
clickElapsed = 0; clickElapsed = 0,
startTouchDistance = 0,
startTouchCenter = [],
moveTouchCenter = [],
touches = 0;
var clipboard = ""; var clipboard = "";
@ -67,43 +72,62 @@ RED.view = function() {
.on("mousemove", canvasMouseMove) .on("mousemove", canvasMouseMove)
.on("mousedown", canvasMouseDown) .on("mousedown", canvasMouseDown)
.on("mouseup", canvasMouseUp) .on("mouseup", canvasMouseUp)
//.on("touchstart",canvasMouseDown)
.on("touchend",canvasMouseUp) .on("touchend",canvasMouseUp)
.on("touchcancel", canvasMouseUp) .on("touchcancel", canvasMouseUp)
//.on("touchmove",canvasMouseMove)
.on("touchstart", function(){ .on("touchstart", function(){
if (d3.event.touches.length>1) { if (d3.event.touches.length>1) {
d3.event.preventDefault(); d3.event.preventDefault();
var a = d3.event.touches.item(0)['pageY']-d3.event.touches.item(1)['pageY']; var touch0 = d3.event.touches.item(0);
var b = d3.event.touches.item(0)['pageX']-d3.event.touches.item(1)['pageX']; var touch1 = d3.event.touches.item(1);
var a = touch0['pageY']-touch1['pageY'];
var b = touch0['pageX']-touch1['pageX'];
var offset = $("#chart").offset();
var scrollPos = [$("#chart").scrollLeft(),$("#chart").scrollTop()];
startTouchCenter = [
(touch1['pageX']+(b/2)-offset.left+scrollPos[0])/scaleFactor,
(touch1['pageY']+(a/2)-offset.top+scrollPos[1])/scaleFactor
];
moveTouchCenter = [
touch1['pageX']+(b/2),
touch1['pageY']+(a/2)
]
startTouchDistance = Math.sqrt((a*a)+(b*b)); startTouchDistance = Math.sqrt((a*a)+(b*b));
startTouchPoint = {
x:Math.abs((d3.event.touches.item(0)['pageX']-d3.event.touches.item(1)['pageX'])/2),
y:Math.abs((d3.event.touches.item(0)['pageY']-d3.event.touches.item(1)['pageY'])/2),
};
} else { } else {
startTouchDistance = 0; startTouchDistance = 0;
canvasMouseDown(); canvasMouseDown();
} }
}) })
.on("touchmove", function(){ .on("touchmove", function(){
if (d3.event.touches.length<2) { if (d3.event.touches.length<2) {
canvasMouseMove.call(this); canvasMouseMove.call(this);
} else { } else {
var touch0 = d3.event.touches.item(0);
var a = d3.event.touches.item(0)['pageY']-d3.event.touches.item(1)['pageY']; var touch1 = d3.event.touches.item(1);
var b = d3.event.touches.item(0)['pageX']-d3.event.touches.item(1)['pageX']; var a = touch0['pageY']-touch1['pageY'];
var b = touch0['pageX']-touch1['pageX'];
var offset = $("#chart").offset();
var scrollPos = [$("#chart").scrollLeft(),$("#chart").scrollTop()];
var moveTouchDistance = Math.sqrt((a*a)+(b*b)); var moveTouchDistance = Math.sqrt((a*a)+(b*b));
var touchCenter = [
touch1['pageX']+(b/2),
touch1['pageY']+(a/2)
];
if (!isNaN(moveTouchDistance)) { if (!isNaN(moveTouchDistance)) {
scaleFactor = Math.min(2, Math.max(0.3, scaleFactor + (Math.floor(((moveTouchDistance*100)-(startTouchDistance*100)))/6000))); oldScaleFactor = scaleFactor;
scaleFactor = Math.min(2,Math.max(0.3, scaleFactor + (Math.floor(((moveTouchDistance*100)-(startTouchDistance*100)))/10000)));
var deltaTouchCenter = [ // Try to pan whilst zooming - not 100%
startTouchCenter[0]*(scaleFactor-oldScaleFactor),//-(touchCenter[0]-moveTouchCenter[0]),
startTouchCenter[1]*(scaleFactor-oldScaleFactor) //-(touchCenter[1]-moveTouchCenter[1])
];
startTouchDistance = moveTouchDistance; startTouchDistance = moveTouchDistance;
moveTouchCenter = touchCenter;
$("#chart").scrollLeft(scrollPos[0]+deltaTouchCenter[0]);
$("#chart").scrollTop(scrollPos[1]+deltaTouchCenter[1]);
redraw(); redraw();
} }
} }