[Pkg-mozext-commits] [firegestures] 03/18: implement mouse trail with html:canvas

David Prévot taffit at moszumanska.debian.org
Sat May 23 10:58:41 UTC 2015


This is an automated email from the git hooks/post-receive script.

taffit pushed a commit to branch master
in repository firegestures.

commit ed4a7d2ca9a66547972c157f782f33a8ca429dfe
Author: Gomita <gomita at xuldev.org>
Date:   Tue May 12 01:18:28 2015 +0900

    implement mouse trail with html:canvas
---
 chrome/content/firegestures/remote.js | 101 -------------------------
 components/xdGestureHandler.js        | 138 ++++++++++------------------------
 2 files changed, 41 insertions(+), 198 deletions(-)

diff --git a/chrome/content/firegestures/remote.js b/chrome/content/firegestures/remote.js
index c3309a5..87967fa 100644
--- a/chrome/content/firegestures/remote.js
+++ b/chrome/content/firegestures/remote.js
@@ -26,9 +26,6 @@ let FireGesturesRemote = {
 		addMessageListener("FireGestures:SwipeGesture", this);
 		addMessageListener("FireGestures:DoCommand", this);
 		addMessageListener("FireGestures:SendKeyEvent", this);
-		addMessageListener("FireGestures:CreateTrail", this);
-		addMessageListener("FireGestures:DrawTrail", this);
-		addMessageListener("FireGestures:EraseTrail", this);
 	},
 
 	receiveMessage: function FGR_receiveMessage(aMsg) {
@@ -41,9 +38,6 @@ let FireGesturesRemote = {
 			case "FireGestures:SwipeGesture"    : this._onSwipeGesture(aMsg.data); break;
 			case "FireGestures:DoCommand"   : this._doCommand(aMsg.data); break;
 			case "FireGestures:SendKeyEvent": this._sendKeyEvent(aMsg.data); break;
-			case "FireGestures:CreateTrail" : this._createTrail(aMsg.data); break;
-			case "FireGestures:DrawTrail"   : this._drawTrail(aMsg.data); break;
-			case "FireGestures:EraseTrail"  : this._eraseTrail(); break;
 		}
 	},
 
@@ -207,101 +201,6 @@ let FireGesturesRemote = {
 	},
 
 
-	/* ::::: Mouse Trail ::::: */
-
-	_trailSize: 0,
-	_trailColor: "",
-	_trailZoom: 1,
-	_trailDot: null,
-	_trailArea: null,
-	_trailLastDot: null,
-	_trailOffsetX: 0,
-	_trailOffsetY: 0,
-
-	_createTrail: function FGR__createTrail(aData) {
-		let win = content.window;
-		let doc = content.document;
-		this._trailSize  = aData.size;
-		this._trailColor = aData.color;
-		this._trailZoom  = aData.zoom;
-		this._trailOffsetX = (win.mozInnerScreenX - win.scrollX) * this._trailZoom;
-		this._trailOffsetY = (win.mozInnerScreenY - win.scrollY) * this._trailZoom;
-		this._trailArea = doc.createElementNS(HTML_NS, "xdTrailArea");
-		(doc.documentElement || doc).appendChild(this._trailArea);
-		this._trailDot = doc.createElementNS(HTML_NS, "xdTrailDot");
-		this._trailDot.style.width = this._trailSize + "px";
-		this._trailDot.style.height = this._trailSize + "px";
-		this._trailDot.style.background = this._trailColor;
-		this._trailDot.style.border = "0px";
-		this._trailDot.style.position = "absolute";
-		this._trailDot.style.zIndex = 2147483647;
-	},
-
-	_drawTrail: function FGR__drawTrail(aData) {
-		if (!this._trailArea)
-			return;
-		let x1 = aData.x1, y1 = aData.y1, x2 = aData.x2, y2 = aData.y2;
-		let xMove = x2 - x1;
-		let yMove = y2 - y1;
-		let xDecrement = xMove < 0 ? 1 : -1;
-		let yDecrement = yMove < 0 ? 1 : -1;
-		x2 -= this._trailOffsetX;
-		y2 -= this._trailOffsetY;
-		if (Math.abs(xMove) >= Math.abs(yMove))
-			for (let i = xMove; i != 0; i += xDecrement)
-				this._strokeDot(x2 - i, y2 - Math.round(yMove * i / xMove));
-		else
-			for (let i = yMove; i != 0; i += yDecrement)
-				this._strokeDot(x2 - Math.round(xMove * i / yMove), y2 - i);
-	},
-
-	_eraseTrail: function FGR__eraseTrail() {
-		if (this._trailArea && this._trailArea.parentNode) {
-			while (this._trailArea.lastChild)
-				this._trailArea.removeChild(this._trailArea.lastChild);
-			this._trailArea.parentNode.removeChild(this._trailArea);
-		}
-		this._trailDot = null;
-		this._trailArea = null;
-		this._trailLastDot = null;
-	},
-
-	_strokeDot: function FGR__strokeDot(x, y) {
-		if (this._trailArea.y == y && this._trailArea.h == this._trailSize) {
-			// draw vertical line
-			let newX = Math.min(this._trailArea.x, x);
-			let newW = Math.max(this._trailArea.x + this._trailArea.w, x + this._trailSize) - newX;
-			this._trailArea.x = newX;
-			this._trailArea.w = newW;
-			this._trailLastDot.style.left  = newX.toString() + "px";
-			this._trailLastDot.style.width = newW.toString() + "px";
-			return;
-		}
-		else if (this._trailArea.x == x && this._trailArea.w == this._trailSize) {
-			// draw horizontal line
-			let newY = Math.min(this._trailArea.y, y);
-			let newH = Math.max(this._trailArea.y + this._trailArea.h, y + this._trailSize) - newY;
-			this._trailArea.y = newY;
-			this._trailArea.h = newH;
-			this._trailLastDot.style.top    = newY.toString() + "px";
-			this._trailLastDot.style.height = newH.toString() + "px";
-			return;
-		}
-		if (this._trailZoom != 1) {
-			x = Math.floor(x / this._trailZoom);
-			y = Math.floor(y / this._trailZoom);
-		}
-		let dot = this._trailDot.cloneNode(true);
-		dot.style.left = x + "px";
-		dot.style.top = y + "px";
-		this._trailArea.x = x;
-		this._trailArea.y = y;
-		this._trailArea.w = this._trailSize;
-		this._trailArea.h = this._trailSize;
-		this._trailArea.appendChild(dot);
-		this._trailLastDot = dot;
-	},
-
 };
 
 FireGesturesRemote.init();
diff --git a/components/xdGestureHandler.js b/components/xdGestureHandler.js
index b26dd54..37cf7a6 100644
--- a/components/xdGestureHandler.js
+++ b/components/xdGestureHandler.js
@@ -645,123 +645,67 @@ xdGestureHandler.prototype = {
 
 	/* ::::: MOUSE TRAIL ::::: */
 
-	_trailDot: null,
 	_trailArea: null,
-	_trailLastDot: null,
+	_trailContext: null,
 	_trailOffsetX: 0,
 	_trailOffsetY: 0,
-	_trailZoom: 1,
 
 	// called from _startGesture
 	createTrail: function FGH_createTrail(event) {
-		if (this._isRemote) {
-			// [e10s]
-			this._gestureObserver.sendAsyncMessage("FireGestures:CreateTrail", {
-				size : this._trailSize,
-				color: this._trailColor,
-				zoom : this._drawArea.fullZoom || 1,
-			});
-			return;
-		}
-		var win = this.sourceNode.ownerDocument.defaultView;
-		if (win.top.document instanceof Ci.nsIDOMHTMLDocument)
-			win = win.top;
-		else if (win.document instanceof Ci.nsIDOMHTMLDocument === false)
-			return;
-		var doc = win.document;
-		this._trailZoom = this._drawArea.fullZoom || 1;
-		this._trailOffsetX = (win.mozInnerScreenX - win.scrollX) * this._trailZoom;
-		this._trailOffsetY = (win.mozInnerScreenY - win.scrollY) * this._trailZoom;
-		this._trailArea = doc.createElementNS(HTML_NS, "xdTrailArea");
-		(doc.documentElement || doc).appendChild(this._trailArea);
-		this._trailDot = doc.createElementNS(HTML_NS, "xdTrailDot");
-		this._trailDot.style.width = this._trailSize + "px";
-		this._trailDot.style.height = this._trailSize + "px";
-		this._trailDot.style.background = this._trailColor;
-		this._trailDot.style.border = "0px";
-		this._trailDot.style.position = "absolute";
-		this._trailDot.style.zIndex = 2147483647;
+		var doc = this._drawArea.ownerDocument;
+		var box = doc.documentElement.boxObject;
+		var css = "-moz-user-focus: none !important;"
+		        + "-moz-user-select: none !important;"
+		        + "display: -moz-box !important;"
+		        + "box-sizing: border-box !important;"
+		        + "pointer-events: none !important;"
+		        + "margin: 0 !important;"
+		        + "padding: 0 !important;"
+		        + "width: 100% !important;"
+		        + "height: 100% !important;"
+		        + "border: none !important;"
+		        + "box-shadow: none !important;"
+		        + "overflow: hidden !important;"
+		        + "background: none !important;"
+		        + "opacity: 0.6 !important;"
+		        + "position: fixed !important;"
+		        + "top:  " + box.y + "px !important;"
+		        + "left: " + box.x + "px !important;"
+		        + "z-index: 2147483647 !important;";
+		this._trailArea = doc.createElement("hbox");
+		this._trailArea.style.cssText = css;
+		this._trailOffsetX = box.screenX;
+		this._trailOffsetY = box.screenY;
+		var canvas = doc.createElementNS(HTML_NS, "canvas");
+		canvas.setAttribute("width",  box.width);
+		canvas.setAttribute("height", box.height);
+		this._trailArea.appendChild(canvas);
+		doc.documentElement.appendChild(this._trailArea);
+		this._trailContext = canvas.getContext("2d");
 	},
 
 	// called from _progressGesture
 	drawTrail: function FGH_drawTrail(x1, y1, x2, y2) {
-		if (this._isRemote) {
-			// [e10s]
-			this._gestureObserver.sendAsyncMessage("FireGestures:DrawTrail", {
-				x1: x1, y1: y1, x2: x2, y2: y2, 
-			});
-			return;
-		}
 		if (!this._trailArea)
 			return;
-		var xMove = x2 - x1;
-		var yMove = y2 - y1;
-		var xDecrement = xMove < 0 ? 1 : -1;
-		var yDecrement = yMove < 0 ? 1 : -1;
-		x2 -= this._trailOffsetX;
-		y2 -= this._trailOffsetY;
-		if (Math.abs(xMove) >= Math.abs(yMove))
-			for (var i = xMove; i != 0; i += xDecrement)
-				this._strokeDot(x2 - i, y2 - Math.round(yMove * i / xMove));
-		else
-			for (var i = yMove; i != 0; i += yDecrement)
-				this._strokeDot(x2 - Math.round(xMove * i / yMove), y2 - i);
+		var context = this._trailContext;
+		context.strokeStyle = this._trailColor;
+		context.lineJoin = "round";
+		context.lineWidth = this._trailSize;
+		context.beginPath();
+		context.moveTo(x1 - this._trailOffsetX, y1 - this._trailOffsetY);
+		context.lineTo(x2 - this._trailOffsetX, y2 - this._trailOffsetY);
+		context.closePath();
+		context.stroke();
 	},
 
 	// called from _stopGesture
 	eraseTrail: function FGH_eraseTrail() {
-		if (this._isRemote) {
-			// [e10s]
-			this._gestureObserver.sendAsyncMessage("FireGestures:EraseTrail", {});
-			return;
-		}
 		if (this._trailArea && this._trailArea.parentNode) {
-			while (this._trailArea.lastChild)
-				this._trailArea.removeChild(this._trailArea.lastChild);
 			this._trailArea.parentNode.removeChild(this._trailArea);
 		}
-		this._trailDot = null;
 		this._trailArea = null;
-		this._trailLastDot = null;
-	},
-
-	// called from drawTrail
-	_strokeDot: function FGH__strokeDot(x, y) {
-		if (this._trailArea.y == y && this._trailArea.h == this._trailSize) {
-			// draw vertical line
-			var newX = Math.min(this._trailArea.x, x);
-			var newW = Math.max(this._trailArea.x + this._trailArea.w, x + this._trailSize) - newX;
-			this._trailArea.x = newX;
-			this._trailArea.w = newW;
-			this._trailLastDot.style.left  = newX.toString() + "px";
-			this._trailLastDot.style.width = newW.toString() + "px";
-			return;
-		}
-		else if (this._trailArea.x == x && this._trailArea.w == this._trailSize) {
-			// draw horizontal line
-			var newY = Math.min(this._trailArea.y, y);
-			var newH = Math.max(this._trailArea.y + this._trailArea.h, y + this._trailSize) - newY;
-			this._trailArea.y = newY;
-			this._trailArea.h = newH;
-			this._trailLastDot.style.top    = newY.toString() + "px";
-			this._trailLastDot.style.height = newH.toString() + "px";
-			return;
-		}
-		if (this._trailZoom != 1) {
-			x = Math.floor(x / this._trailZoom);
-			y = Math.floor(y / this._trailZoom);
-		}
-		var dot = this._trailDot.cloneNode(true);
-		dot.style.left = x + "px";
-		dot.style.top = y + "px";
-		this._trailArea.x = x;
-		this._trailArea.y = y;
-		this._trailArea.w = this._trailSize;
-		this._trailArea.h = this._trailSize;
-		this._trailArea.appendChild(dot);
-		this._trailLastDot = dot;
-		// log("_strokeDot(" + x + ", " + y + ")");	// #debug
-		// dot.style.outline = "1px solid blue";	// #debug
+		this._trailContext = null;
 	},
 
 };

-- 
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-mozext/firegestures.git



More information about the Pkg-mozext-commits mailing list