b=433578 - make panning work better.

--HG--
branch : mobile
This commit is contained in:
mark.finkle@gmail.com 2008-05-18 02:35:30 -04:00
parent 3276c34959
commit 5931a7d8b6
2 changed files with 101 additions and 92 deletions

View File

@ -212,7 +212,7 @@ dump("misspelling\n");
var cmdLine = window.arguments[0].QueryInterface(Ci.nsICommandLine);
if (cmdLine.length == 1) {
var uri = cmdLine.getArgument(0);
if(uri != "" && uri[0] != '-'){
if (uri != "" && uri[0] != '-') {
whereURI = cmdLine.resolveURI(uri);
if (whereURI)
whereURI = whereURI.spec;
@ -424,25 +424,30 @@ var MouseController = function(browser) {
MouseController.prototype = {
_browser: null,
_contextID : null,
_mousedown : false,
init: function(aBrowser)
{
this._browser = aBrowser;
this._browser.addEventListener("mousedown", this, true);
this._browser.addEventListener("mouseup",this, true);
this._browser.addEventListener("mousemove", this, true);
},
handleEvent: function(e)
handleEvent: function(aEvent)
{
if (! e.type in this)
dump("MouseController called with unknown event type " + e.type + "\n");
this[e.type](e);
if (!aEvent.type in this)
dump("MouseController called with unknown event type " + aEvent.type + "\n");
this[aEvent.type](aEvent);
},
mousedown: function(aEvent)
{
// Start timer for tap-n-hold context menu
/*
var self = this;
this._contextID = setTimeout(function() { self.contextMenu(aEvent); }, 750);
*/
if (aEvent.target instanceof HTMLInputElement ||
aEvent.target instanceof HTMLTextAreaElement ||
@ -450,19 +455,19 @@ MouseController.prototype = {
return;
// Check to see if we should treat this as a double-click
/*
if (this.firstEvent &&
(aEvent.timeStamp - this.firstEvent.timeStamp) < 400 &&
Math.abs(aEvent.clientX - this.firstEvent.clientX) < 30 &&
Math.abs(aEvent.clientY - this.firstEvent.clientY) < 30) {
Math.abs(aEvent.screenX - this.firstEvent.screenX) < 30 &&
Math.abs(aEvent.screenY - this.firstEvent.screenY) < 30) {
this.dblclick(aEvent);
return;
}
*/
this.lastEvent = this.firstEvent = aEvent;
this.fingerDistance = 100;
this._mousedown = true;
this._browser.startPan(aEvent);
this.mousemove = aEvent.button != 2 ? this.mousePan : this.mouseZoom;
this._browser.addEventListener("mousemove", this, true);
//FIX Show scrollbars now
@ -472,7 +477,7 @@ MouseController.prototype = {
mouseup: function(aEvent)
{
this._browser.removeEventListener("mousemove", this, true);
this._mousedown = false;
if (this._contextID) {
clearTimeout(this._contextID);
this._contextID = null;
@ -482,8 +487,8 @@ MouseController.prototype = {
// Cancel link clicks if we've been dragging for a while
var totalDistance = Math.sqrt(
Math.pow(this.firstEvent.clientX - aEvent.clientX, 2) +
Math.pow(this.firstEvent.clientY - aEvent.clientY, 2));
Math.pow(this.firstEvent.screenX - aEvent.screenX, 2) +
Math.pow(this.firstEvent.screenY - aEvent.screenY, 2));
if (totalDistance > 10)
aEvent.preventDefault();
@ -519,34 +524,19 @@ MouseController.prototype = {
}*/
},
mouseZoom: function(e)
mousemove: function(aEvent)
{
var deltaX = e.screenX - this.firstEvent.screenX + 100;
var deltaY = e.screenY - this.firstEvent.screenY;
var newDist = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));
var scale = newDist / this.fingerDistance;
if (e.screenX < this.firstEvent.screenX && scale > 1)
scale = 1 / scale;
var newZoom = scale * this._browser.markupDocumentViewer.fullZoom;
this.fingerDistance = Math.max(0.1, newDist);
this._browser.zoomController.scale = newZoom;
this.lastEvent = e;
//FIX Adjust scrollbars now
e.stopPropagation();
e.preventDefault();
},
mousePan: function(aEvent)
{
var delta = aEvent.timeStamp - this.lastEvent.timeStamp;
var x = aEvent.clientX - this.lastEvent.clientX;
var y = aEvent.clientY - this.lastEvent.clientY;
if (100 > delta || (8 > Math.abs(x) && 8 > Math.abs(y)))
if (!this._mousedown)
return;
dump("##: " + delta + " [" + x + ", " + y + "]\n");
var delta = aEvent.timeStamp - this.lastEvent.timeStamp;
var x = aEvent.screenX - this.lastEvent.screenX;
var y = aEvent.screenY - this.lastEvent.screenY;
if (40 > delta || (2 > Math.abs(x) && 2 > Math.abs(y)))
return;
//dump("##: " + delta + " [" + x + ", " + y + "]\n");
if (this._contextID) {
clearTimeout(this._contextID);
this._contextID = null;
@ -597,26 +587,11 @@ MouseController.prototype = {
var popup = document.getElementById(this._browser.contextMenu);
popup.openPopup(this._browser, "", aEvent.clientX, aEvent.clientY, true, false);
this._browser.removeEventListener("mousemove", this, true);
this._contextID = null;
aEvent.stopPropagation();
aEvent.preventDefault();
}
},
drag : function(aEvent){
aEvent.stopPropagation();
aEvent.preventDefault();
return true;
},
dragstart : function(aEvent){
return this.drag(aEvent);
},
draggesture : function(aEvent){
return this.drag(aEvent);
}
}

View File

@ -22,11 +22,12 @@
<binding id="deckbrowser">
<content>
<xul:stack flex="1">
<xul:stack anonid="renderspace" class="deckbrowser-renderspace" style="overflow:hidden;" flex="1">
<html:div anonid="canvas-background"/>
<html:canvas anonid="canvas" moz-opaque="true"/>
</xul:stack>
<xul:deck anonid="container" class="deckbrowser-container" flex="1">
</xul:deck>
<xul:scrollbox anonid="renderspace" class="deckbrowser-renderspace" style="visibility: hidden" flex="1">
<html:canvas anonid="canvas"/>
</xul:scrollbox>
</xul:stack>
<xul:vbox anonid="tabspace" class="deckbrowser-tabspace" collapsed="true" align="center" flex="1">
<xul:description anonid="title" class="deckbrowser-title" crop="end"/>
@ -238,23 +239,31 @@
null
</field>
<field name="_panX">
0
</field>
<field name="_panY">
0
</field>
<field name="_dragX">
0
</field>
<field name="_dragY">
0
</field>
<method name="_updateCanvas">
<parameter name="aOffsetX"/>
<parameter name="aOffsetY"/>
<body>
<![CDATA[
var posX = aOffsetX;
var posY = aOffsetY;
var canvas = document.getAnonymousElementByAttribute(this, "anonid", "canvas");
var domWin = this.browser.contentWindow;
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
var stime = Date.now();
ctx.save();
ctx.translate(posX, posY);
ctx.drawWindow(domWin, posX, posY, domWin.innerWidth, domWin.innerHeight, "rgba(0,0,0,0)");
ctx.restore();
ctx.drawWindow(domWin, domWin.scrollX - this._panX, domWin.scrollY - this._panY, domWin.innerWidth, domWin.innerHeight, "white");
var etime = Date.now();
dump("drawWindow: " + (etime - stime) + " ms\n");
]]>
@ -265,24 +274,34 @@
<parameter name="aEvent"/>
<body>
<![CDATA[
// Toggle browser visibility so the canvas is visible
this._container.style.visibility = "hidden";
var background = document.getAnonymousElementByAttribute(this, "anonid", "canvas-background");
var canvas = document.getAnonymousElementByAttribute(this, "anonid", "canvas");
var domWin = this.browser.contentWindow;
var canvasW = domWin.innerWidth + domWin.scrollMaxX;
var canvasH = domWin.innerHeight + domWin.scrollMaxY;
canvas.width = canvasW;
canvas.height = canvasH;
this._updateCanvas(domWin.scrollX, domWin.scrollY);
// The 'background' element acts as a 'sizer' in the <stack>
background.width = domWin.innerWidth + domWin.scrollMaxX;
background.height = domWin.innerHeight + domWin.scrollMaxY;
// Initialize the canvas size and location
canvas.width = domWin.innerWidth;
canvas.height = domWin.innerHeight;
canvas.style.left = "0px";
canvas.style.top = "0px";
// Initialize the primary panning tracker
this._panX = 0;
this._panY = 0;
// Initialize the canvas drag tracker
this._dragX = 0;
this._dragY = 0;
// Render the current viewable area into the canvas
this._updateCanvas();
this._updateTimer = null;
// Must uncollapse the scroller before scrolling it into position.
// It fails to scroll otherwise.
this._container.style.visibility = "hidden";
this._renderspace.style.visibility = "visible";
var domWin = this.browser.contentWindow;
var scroller = this._renderspace.boxObject.QueryInterface(Components.interfaces.nsIScrollBoxObject);
scroller.scrollTo(domWin.scrollX, domWin.scrollY);
]]>
</body>
</method>
@ -293,17 +312,36 @@
<parameter name="aDeltaY"/>
<body>
<![CDATA[
var scroller = this._renderspace.boxObject.QueryInterface(Components.interfaces.nsIScrollBoxObject);
scroller.scrollBy(aDeltaX, aDeltaY);
var sx = {}; var sy = {};
scroller.getPosition(sx, sy);
// Update the trackers
this._panX -= aDeltaX;
this._panY -= aDeltaY;
this._dragX -= aDeltaX;
this._dragY -= aDeltaY;
//dump("panX: " + this._panX + ", panY: " + this._panY + "\n");
//dump("dragX: " + this._dragX + ", dragY: " + this._dragY + "\n");
// Move the canvas
var canvas = document.getAnonymousElementByAttribute(this, "anonid", "canvas");
canvas.style.left = this._dragX + "px";
canvas.style.top = this._dragY + "px";
// Cancel the refresh timer
if (this._updateTimer) {
clearTimeout(this._updateTimer);
this._updateTimer = null;
}
// Initialize the refresh timer
var self = this;
this._updateTimer = setTimeout(function() { self._updateCanvas(sx.value, sy.value); }, 250);
function _doUpdate() {
canvas.style.left = "0px";
canvas.style.top = "0px";
self._dragX = 0;
self._dragY = 0;
self._updateCanvas();
}
this._updateTimer = setTimeout(_doUpdate, 300);
]]>
</body>
</method>
@ -312,21 +350,17 @@
<parameter name="aEvent"/>
<body>
<![CDATA[
// Cancel the refresh timer
if (this._updateTimer) {
clearTimeout(this._updateTimer);
this._updateTimer = null;
}
var scroller = this._renderspace.boxObject.QueryInterface(Components.interfaces.nsIScrollBoxObject);
var sx = {}; var sy = {};
scroller.getPosition(sx, sy);
// Scroll the browser into the new location
var domWin = this.browser.contentWindow;
domWin.scrollTo(sx.value, sy.value);
domWin.scrollBy(-this._panX, -this._panY);
scroller.scrollTo(0, 0);
this._renderspace.style.visibility = "hidden";
// Toggle browser visibility so the browser is visible
this._container.style.visibility = "visible";
]]>
</body>