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

120
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 = "";
@ -60,53 +65,72 @@ RED.view = function() {
.attr("pointer-events", "all") .attr("pointer-events", "all")
.style("cursor","crosshair"); .style("cursor","crosshair");
var vis = outer var vis = outer
.append('svg:g') .append('svg:g')
.on("dblclick.zoom", null) .on("dblclick.zoom", null)
.append('svg:g') .append('svg:g')
.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("touchstart", function(){
//.on("touchmove",canvasMouseMove) if (d3.event.touches.length>1) {
.on("touchstart", function(){ d3.event.preventDefault();
if(d3.event.touches.length>1){ var touch0 = d3.event.touches.item(0);
d3.event.preventDefault(); var touch1 = d3.event.touches.item(1);
var a = d3.event.touches.item(0)['pageY']-d3.event.touches.item(1)['pageY']; var a = touch0['pageY']-touch1['pageY'];
var b = d3.event.touches.item(0)['pageX']-d3.event.touches.item(1)['pageX']; var b = touch0['pageX']-touch1['pageX'];
startTouchDistance = Math.sqrt((a*a)+(b*b));
startTouchPoint = { var offset = $("#chart").offset();
x:Math.abs((d3.event.touches.item(0)['pageX']-d3.event.touches.item(1)['pageX'])/2), var scrollPos = [$("#chart").scrollLeft(),$("#chart").scrollTop()];
y:Math.abs((d3.event.touches.item(0)['pageY']-d3.event.touches.item(1)['pageY'])/2), startTouchCenter = [
}; (touch1['pageX']+(b/2)-offset.left+scrollPos[0])/scaleFactor,
(touch1['pageY']+(a/2)-offset.top+scrollPos[1])/scaleFactor
}else{ ];
moveTouchCenter = [
startTouchDistance = 0; touch1['pageX']+(b/2),
canvasMouseDown(); touch1['pageY']+(a/2)
} ]
startTouchDistance = Math.sqrt((a*a)+(b*b));
}) } else {
.on("touchmove", function(){ startTouchDistance = 0;
canvasMouseDown();
if(d3.event.touches.length<2){ }
canvasMouseMove.call(this); })
.on("touchmove", function(){
}else{ if (d3.event.touches.length<2) {
canvasMouseMove.call(this);
var a = d3.event.touches.item(0)['pageY']-d3.event.touches.item(1)['pageY']; } else {
var b = d3.event.touches.item(0)['pageX']-d3.event.touches.item(1)['pageX']; var touch0 = d3.event.touches.item(0);
var moveTouchDistance = Math.sqrt((a*a)+(b*b)); var touch1 = d3.event.touches.item(1);
if(!isNaN(moveTouchDistance)){ var a = touch0['pageY']-touch1['pageY'];
scaleFactor = Math.min(2, Math.max(0.3, scaleFactor + (Math.floor(((moveTouchDistance*100)-(startTouchDistance*100)))/6000))); var b = touch0['pageX']-touch1['pageX'];
var offset = $("#chart").offset();
startTouchDistance = moveTouchDistance; var scrollPos = [$("#chart").scrollLeft(),$("#chart").scrollTop()];
var moveTouchDistance = Math.sqrt((a*a)+(b*b));
redraw(); var touchCenter = [
} touch1['pageX']+(b/2),
} touch1['pageY']+(a/2)
];
if (!isNaN(moveTouchDistance)) {
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;
moveTouchCenter = touchCenter;
$("#chart").scrollLeft(scrollPos[0]+deltaTouchCenter[0]);
$("#chart").scrollTop(scrollPos[1]+deltaTouchCenter[1]);
redraw();
}
}
}); });
var outer_background = vis.append('svg:rect') var outer_background = vis.append('svg:rect')