mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
b=433578 - make panning work better.
--HG-- branch : mobile
This commit is contained in:
mark.finkle@gmail.com
parent
3276c34959
commit
5931a7d8b6
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user