start functionality for zooming, right now just alert with coordinates we dragged...
authorRobert Kaiser <kairo@kairo.at>
Tue, 28 Jul 2009 19:11:46 +0000 (21:11 +0200)
committerRobert Kaiser <kairo@kairo.at>
Tue, 28 Jul 2009 19:11:46 +0000 (21:11 +0200)
xulapp/chrome/mandelbrot/content/mandelbrot.js
xulapp/chrome/mandelbrot/content/mandelbrot.xul

index bcc2df5..7a67687 100644 (file)
@@ -335,6 +335,27 @@ function drawPoint(context, img_x, img_y, C, iterMax, algorithm) {
 
 /***** 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;
index c6cd044..183c6ca 100644 (file)
   </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>