From: Robert Kaiser <kairo@kairo.at>
Date: Mon, 15 Mar 2010 00:28:21 +0000 (+0100)
Subject: implement graphical drag feedback for zooming
X-Git-Url: https://git-public.kairo.at/?p=mandelbrot.git;a=commitdiff_plain;h=7e4a97763df3c87de84f26e740fbdaadbeb48b93

implement graphical drag feedback for zooming
---

diff --git a/xulapp/chrome/mandelbrot/content/mandelbrot.js b/xulapp/chrome/mandelbrot/content/mandelbrot.js
index 788e198..e4c7d9a 100644
--- a/xulapp/chrome/mandelbrot/content/mandelbrot.js
+++ b/xulapp/chrome/mandelbrot/content/mandelbrot.js
@@ -401,18 +401,23 @@ function drawPoint(context, img_x, img_y, C, iterMax, algorithm) {
 /***** pure UI functions *****/
 
 var zoomstart;
+var imgBackup;
 
 function mouseevent(etype, event) {
   let canvas = document.getElementById("mbrotImage");
+  let context = canvas.getContext("2d");
   switch (etype) {
     case 'down':
-      if (event.button == 0)
+      if (event.button == 0) {
         // left button - start dragzoom
         zoomstart = {x: event.clientX - canvas.offsetLeft,
                      y: event.clientY - canvas.offsetTop};
+        imgBackup = context.getImageData(0, 0, canvas.width, canvas.height);
+      }
       break;
     case 'up':
       if (event.button == 0 && zoomstart) {
+        context.putImageData(imgBackup, 0, 0);
         let zoomend = {x: event.clientX - canvas.offsetLeft,
                        y: event.clientY - canvas.offsetTop};
 
@@ -447,6 +452,15 @@ function mouseevent(etype, event) {
         }
       }
       zoomstart = undefined;
+      break;
+    case 'move':
+      if (event.button == 0 && zoomstart) {
+        context.putImageData(imgBackup, 0, 0);
+        context.strokeStyle = "rgb(255,255,31)";
+        context.strokeRect(zoomstart.x, zoomstart.y,
+                           event.clientX - canvas.offsetLeft - zoomstart.x,
+                           event.clientY - canvas.offsetTop - zoomstart.y);
+      }
     break;
   }
 }
diff --git a/xulapp/chrome/mandelbrot/content/mandelbrot.xul b/xulapp/chrome/mandelbrot/content/mandelbrot.xul
index 5719872..5115ed0 100644
--- a/xulapp/chrome/mandelbrot/content/mandelbrot.xul
+++ b/xulapp/chrome/mandelbrot/content/mandelbrot.xul
@@ -126,7 +126,8 @@
     <stack>
       <html:canvas id="mbrotImage" width="300" height="300"
                    onmousedown="mouseevent('down', event);"
-                   onmouseup="mouseevent('up',event);">
+                   onmouseup="mouseevent('up',event);"
+                   onmousemove="mouseevent('move',event);">
       </html:canvas>
       <button id="drawButton" label="&fileDraw.label;" oncommand="drawImage();"/>
     </stack>