improve nonblocking measureArea

mrflix · Sep 30, 2014 · 498fc95 · 498fc95
1 parent 61f9d68
commit 498fc95
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 39 deletions.
diff --git a/extension/chrome.js b/extension/chrome.js
@@ -2,14 +2,14 @@ var tabs = {};
 
 function toggle(tab){
   if(!tabs[tab.id])
-    addTab(tab.id);
+    addTab(tab);
   else
     removeTab(tab.id);
 }
 
-function addTab(id){
-  tabs[id] = Object.create(dimensions);
-  tabs[id].activate(id);
+function addTab(tab){
+  tabs[tab.id] = Object.create(dimensions);
+  tabs[tab.id].activate(tab);
 }
 
 function removeTab(id){
@@ -38,15 +38,16 @@ chrome.runtime.onSuspend.addListener(function() {
 
 var dimensions = {
   image: new Image(),
+  canvas: document.createElement('canvas'),
 
-  activate: function(id){
-    this.id = id;
+  activate: function(tab){
+    this.tab = tab;
     this.takeScreenshot();
 
-    chrome.tabs.insertCSS(this.id, { file: 'tooltip.css' });
-    chrome.tabs.executeScript(this.id, { file: 'tooltip.js' });
+    chrome.tabs.insertCSS(this.tab.id, { file: 'tooltip.css' });
+    chrome.tabs.executeScript(this.tab.id, { file: 'tooltip.js' });
     chrome.browserAction.setIcon({ 
-      tabId: this.id,
+      tabId: this.tab.id,
       path: {
         19: "images/icon_active.png",
         38: "images/[email protected]"
@@ -60,7 +61,7 @@ var dimensions = {
   deactivate: function(){
     this.port.postMessage({ type: 'destroy' });
     chrome.browserAction.setIcon({  
-      tabId: this.id,
+      tabId: this.tab.id,
       path: {
         19: "images/icon.png",
         38: "images/[email protected]"
@@ -77,7 +78,7 @@ var dimensions = {
     switch(event.data.type){
       case 'distances':
         this.port.postMessage({ 
-          type: 'distances', 
+          type: event.data.type, 
           data: event.data.data 
         });
         break;
@@ -126,24 +127,23 @@ var dimensions = {
   //
 
   loadImage: function(){
-    var canvas = document.createElement('canvas');
-    var ctx = canvas.getContext('2d');
+    this.ctx = this.canvas.getContext('2d');
 
     // adjust the canvas size to the image size
-    canvas.width = this.image.width;
-    canvas.height = this.image.height;
+    this.canvas.width = this.image.width;
+    this.canvas.height = this.image.height;
 
     // draw the image to the canvas
-    ctx.drawImage(this.image, 0, 0);
+    this.ctx.drawImage(this.image, 0, 0);
 
     // read out the image data from the canvas
-    var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+    imgData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height).data;
 
     this.worker.postMessage({ 
       type: 'imgData',
       imgData: imgData.buffer,  
-      width: canvas.width,
-      height: canvas.height
+      width: this.canvas.width,
+      height: this.canvas.height
     }, [imgData.buffer]);
   }
 };
diff --git a/extension/dimensions.js b/extension/dimensions.js
@@ -76,22 +76,6 @@ function floodFill(){
     setLightnessAt(map, x, y, 999);
     pixelsInArea.push([x,y]);
 
-    stack.push([x-1, y  , currentLightness]);
-    stack.push([x  , y+1, currentLightness]);
-    stack.push([x+1, y  , currentLightness]);
-    stack.push([x  , y-1, currentLightness]);
-  }
-}
-
-function finishMeasureArea(){
-  var boundariePixels = { vertical: [], horizontal: [] };
-
-  // detect boundaries
-
-  for(var i=0, l=pixelsInArea.length; i<l; i++){
-    var x = pixelsInArea[i][0];
-    var y = pixelsInArea[i][1];
-
     if(x < area.left)
       area.left = x;
     else if(x > area.right)
@@ -100,7 +84,16 @@ function finishMeasureArea(){
       area.top = y;
     else if(y > area.bottom)
       area.bottom = y;
+
+    stack.push([x-1, y  , currentLightness]);
+    stack.push([x  , y+1, currentLightness]);
+    stack.push([x+1, y  , currentLightness]);
+    stack.push([x  , y-1, currentLightness]);
   }
+}
+
+function finishMeasureArea(){
+  var boundariePixels = { vertical: [], horizontal: [] };
 
   // find boundaries pixels
 

diff --git a/extension/tooltip.js b/extension/tooltip.js
@@ -6,14 +6,15 @@ var paused = false;
 var inputX, inputY;
 var altKeyWasPressed = false;
 var connectionClosed = false;
-var noCursor = document.createElement('div');
-noCursor.className = 'fn-noCursor';
+var overlay = document.createElement('div');
+overlay.className = 'fn-noCursor';
 
 disableCursor();
 
 window.addEventListener('mousemove', onInputMove);
 window.addEventListener('touchmove', onInputMove);
 window.addEventListener('scroll', onVisibleAreaChange);
+window.addEventListener('resize', onResizeWindow);
 
 window.addEventListener('keydown', detectAltKeyPress);
 window.addEventListener('keyup', detectAltKeyRelease);
@@ -36,6 +37,14 @@ port.onMessage.addListener(function(event){
   }
 });
 
+function onResizeWindow(){
+  overlay.width = window.innerWidth;
+  overlay.height = window.innerHeight;
+  onVisibleAreaChange();
+}
+
+onResizeWindow();
+
 function debugScreenshot(src){
   var oldscreen = body.querySelector('.fn-screenshot');
   oldscreen && body.removeChild(oldscreen);
@@ -88,11 +97,11 @@ function resume(){
 }
 
 function disableCursor(){
-  body.appendChild(noCursor);
+  body.appendChild(overlay);
 }
 
 function enableCursor(){
-  body.removeChild(noCursor);
+  body.removeChild(overlay);
 }
 
 function detectAltKeyPress(event){