start functionality for zooming, right now just alert with coordinates we dragged...

diff --git a/xulapp/chrome/mandelbrot/content/mandelbrot.js b/xulapp/chrome/mandelbrot/content/mandelbrot.js
index bcc2df59110d7ea7adb4751ac8acc225a57c9041..7a67687edc3f7a951dad7d89f8396962fe13c8d0 100644 (file)
--- a/xulapp/chrome/mandelbrot/content/mandelbrot.js
+++ b/xulapp/chrome/mandelbrot/content/mandelbrot.js
@@ -335,6 +335,27 @@ function drawPoint(context, img_x, img_y, C, iterMax, algorithm) {
 
 /***** pure UI functions *****/
 
 
 /***** pure UI functions *****/
 

+var zoomstart;
+
+function mouseevent(etype, event) {
+  let canvas = document.getElementById("mbrotImage");
+  switch (etype) {
+    case 'down':
+      if (event.button == 0)
+        // left button - start dragzoom
+        zoomstart = {x: event.clientX - canvas.offsetLeft,
+                     y: event.clientY - canvas.offsetTop};
+      break;
+    case 'up':
+      if (event.button == 0)
+        alert(zoomstart.x + ',' + zoomstart.y + '-' +
+              (event.clientX - canvas.offsetLeft) + ',' +
+              (event.clientY - canvas.offsetTop)); 
+      zoomstart = undefined;
+    break;
+  }
+}
+

 function saveImage() {
   const bundle = document.getElementById("mbrotBundle");
   const nsIFilePicker = Components.interfaces.nsIFilePicker;
 function saveImage() {
   const bundle = document.getElementById("mbrotBundle");
   const nsIFilePicker = Components.interfaces.nsIFilePicker;

diff --git a/xulapp/chrome/mandelbrot/content/mandelbrot.xul b/xulapp/chrome/mandelbrot/content/mandelbrot.xul
index c6cd044c16d5005d7d90bf794be7575059633db5..183c6caf26083b3f39f58fbf45238cf23d107c9b 100644 (file)
--- a/xulapp/chrome/mandelbrot/content/mandelbrot.xul
+++ b/xulapp/chrome/mandelbrot/content/mandelbrot.xul
@@ -108,7 +108,10 @@
   </toolbox>
   <hbox flex="1" pack="center" align="center">
     <stack>
   </toolbox>
   <hbox flex="1" pack="center" align="center">
     <stack>

-      <html:canvas id="mbrotImage" width="300" height="300"></html:canvas>
+      <html:canvas id="mbrotImage" width="300" height="300"
+                   onmousedown="mouseevent('down', event);"
+                   onmouseup="mouseevent('up',event);">
+      </html:canvas>

       <button id="drawButton" label="&fileDraw.label;" oncommand="drawImage();"/>
     </stack>
   </hbox>
       <button id="drawButton" label="&fileDraw.label;" oncommand="drawImage();"/>
     </stack>
   </hbox>