next iteration of laser pointer handling

resource/support/plugins/whiteboard/whiteboard.js

@@ -3,7 +3,7 @@
  *  A plugin for reveal.js to add slide annotations and a whiteboard.
  *
  *  Original version by Asvin Goel, goel@telematique.eu (based on v 0.6)
- *  Modified version by Mario Botsch, Bielefeld University
+ *  Modified version by Mario Botsch, TU Dortmund
  *  Further contributions by Martin Heistermann, Bern University
  *
  *  License: MIT license
@@ -61,8 +61,13 @@ let RevealWhiteboard = (function () {
   cursorCanvas.height = 20;
 
   // store which tools are active
-  const ToolType = { PEN: 1, ERASER: 2, LASER: 3 };
-  let tool = ToolType.PEN;
+  const NOTHING=0;
+  const PEN=1;
+  const ERASER=2;
+  const LASER=3;
+  const TOGGLE_LASER=4;
+  const MOVE=5;
+  let tool = PEN;
 
   // variable used to block leaving HTML page
   let unsavedAnnotations = false;
@@ -169,8 +174,8 @@ let RevealWhiteboard = (function () {
   let buttonPen = createButton(
     "whiteboard fas fa-pen radiobutton",
     () => {
-      if (tool != ToolType.PEN) {
-        selectTool(ToolType.PEN);
+      if (tool != PEN) {
+        selectTool(PEN);
       } else {
         if (colorPicker.style.visibility == "visible") hideColorPicker();
         else showColorPicker();
@@ -182,7 +187,7 @@ let RevealWhiteboard = (function () {
   let buttonEraser = createButton(
     "whiteboard fas fa-eraser radiobutton",
     () => {
-      selectTool(ToolType.ERASER);
+      selectTool(ERASER);
     },
     false,
     "eraser"
@@ -190,7 +195,7 @@ let RevealWhiteboard = (function () {
   let buttonLaser = createButton(
     "whiteboard fas fa-magic radiobutton",
     () => {
-      selectTool(ToolType.LASER);
+      selectTool(LASER);
     },
     false,
     "laser pointer/stroke"
@@ -465,24 +470,32 @@ let RevealWhiteboard = (function () {
         false;
 
     switch (tool) {
-      case ToolType.PEN:
+      case PEN:
         buttonPen.dataset.active = true;
         buttonPen.style.color = penColor;
         selectCursor(penCursor);
         break;
 
-      case ToolType.ERASER:
+      case ERASER:
         buttonEraser.dataset.active = true;
         selectCursor(eraserCursor);
         break;
 
-      case ToolType.LASER:
+      case LASER:
         buttonLaser.dataset.active = true;
         selectCursor(laserCursor);
         break;
     }
   }
 
+  /*
+  * switch between laser and pen
+  */
+  function toggleLaser() {
+    if (tool==LASER) selectTool(PEN);
+    else selectTool(LASER);
+  }
+
   function showColorPicker() {
     colorPicker.style.visibility = "visible";
   }
@@ -1147,45 +1160,71 @@ let RevealWhiteboard = (function () {
    * pointer and mouse callbacks
    ******************************************************************/
 
-  // need this to remember button state for pointerup event
-  let buttonsPressed = null;
+  function pointerMode(evt) {
+    // target has to be SVG
+    if (evt.target != svg) return NOTHING;
+
+    // no buttons -> mouse move
+    if (!evt.buttons) return MOVE;
+
+    switch (evt.pointerType) {
+      case "pen": {
+        // button 2 -> toggle laser
+        if (evt.buttons == 2) return TOGGLE_LASER;
+        // eraser selected && pen on wacom (button 1) -> eraser
+        if (tool == ERASER && evt.buttons == 1) return ERASER;
+        // eraser tip on wacom -> eraser
+        if (evt.buttons >= 4) return ERASER;
+        // laser selected && pen on wacom (button 1) -> laser
+        if (tool == LASER && evt.buttons == 1) return LASER;
+        // pen selected && pen on wacom (button 1) -> pen
+        if (tool == PEN && evt.buttons == 1) return PEN;
+        break;
+      }
+      case "mouse": {
+        // eraser selected && left mouse -> eraser
+        if (tool == ERASER && evt.buttons == 1) return ERASER;
+        // pen selected && middle mouse -> eraser
+        if (tool == PEN && evt.buttons == 4) return ERASER;
+        // laser selected && left mouse -> laser
+        if (tool == LASER && evt.buttons == 1) return LASER;
+        // pen selected && right mouse -> laser
+        if (tool == PEN && evt.buttons == 2) return LASER;
+        // pen selected && left mouse -> pen
+        if (tool == PEN && evt.buttons == 1) return PEN;
+        break;
+      }
+    }
+    return NOTHING;
+  }
 
   function pointerdown(evt) {
     // only when whiteboard is active
     if (!whiteboardActive) return;
 
-    // event has to happen for SVG
-    if (evt.target != svg) return;
-
-    // only pen and mouse events
-    if (evt.pointerType != "pen" && evt.pointerType != "mouse") return;
-
-    // remember button state
-    buttonsPressed = evt.buttons;
-
-    // remove timer for cursor hiding
-    clearTimeout(hideCursorTimeout);
+    switch (pointerMode(evt)) {
+      case TOGGLE_LASER:
+        toggleLaser();
+        return killEvent(evt);
 
-    // eraser mode or middle mouse button
-    if (tool == ToolType.ERASER || (tool == ToolType.PEN && evt.buttons >= 4)) {
-      showCursor(eraserCursor);
-      eraseStroke(evt);
-      return killEvent(evt);
-    }
+      case ERASER:
+        clearTimeout(hideCursorTimeout);
+        showCursor(eraserCursor);
+        eraseStroke(evt);
+        return killEvent(evt);
 
-    // laser mode or right mouse button
-    if (tool == ToolType.LASER || (tool == ToolType.PEN && evt.buttons & 2)) {
-      isLaserStroke = true;
-      hideCursor();
-      startStroke(evt);
-      return killEvent(evt);
-    }
+      case LASER:
+        clearTimeout(hideCursorTimeout);
+        hideCursor();
+        isLaserStroke = true;
+        startStroke(evt);
+        return killEvent(evt);
 
-    // pencil mode
-    if (tool == ToolType.PEN) {
-      hideCursor();
-      startStroke(evt);
-      return killEvent(evt);
+      case PEN:
+        clearTimeout(hideCursorTimeout);
+        hideCursor();
+        startStroke(evt);
+        return killEvent(evt);
     }
   }
 
@@ -1193,59 +1232,49 @@ let RevealWhiteboard = (function () {
     // only when whiteboard is active
     if (!whiteboardActive) return;
 
-    // event has to happen for SVG
-    if (evt.target != svg) return;
-
-    // only pen and mouse events
-    if (evt.pointerType != "pen" && evt.pointerType != "mouse") return;
-
-    // no mouse button pressed -> show cursor, active auto-hide, return
-    if (!evt.buttons) {
-      showCursor();
-      triggerHideCursor();
-      return;
-    }
+    switch (pointerMode(evt)) {
+      case MOVE:
+        showCursor();
+        triggerHideCursor();
+        return;
 
-    // eraser mode or middle mouse button
-    if (tool == ToolType.ERASER || (tool == ToolType.PEN && evt.buttons >= 4)) {
-      eraseStroke(evt);
-      return killEvent(evt);
-    }
+      case ERASER:
+        eraseStroke(evt);
+        return killEvent(evt);
 
-    // laser mode or right mouse button
-    if (tool == ToolType.LASER || (tool == ToolType.PEN && evt.buttons & 2)) {
-      isLaserStroke = true;
-      continueStroke(evt);
-      return killEvent(evt);
-    }
+      case LASER:
+        isLaserStroke = true;
+        continueStroke(evt);
+        return killEvent(evt);
 
-    // pencil mode
-    if (tool == ToolType.PEN) {
-      continueStroke(evt);
-      return killEvent(evt);
+      case PEN:
+        continueStroke(evt);
+        return killEvent(evt);
     }
   }
 
   function pointerup(evt) {
     // only when whiteboard is active
     if (!whiteboardActive) return;
-
     // event has to happen for SVG
     if (evt.target != svg) return;
-
     // only pen and mouse events
     if (evt.pointerType != "pen" && evt.pointerType != "mouse") return;
 
     // finish pen stroke
-    if (tool == ToolType.PEN) {
-      stopStroke(evt);
-      selectCursor(penCursor);
-    }
+    if (stroke) stopStroke(evt);
 
-    // finish laser stroke
-    if (tool == ToolType.LASER) {
-      stopStroke(evt);
-      selectCursor(laserCursor);
+    // select cursor based on tool (NOT pointerMode!)
+    switch (tool) {
+      case PEN:
+        selectCursor(penCursor);
+        break;
+      case LASER:
+        selectCursor(laserCursor);
+        break;
+      case ERASER:
+        selectCursor(eraserCursor);
+        break;
     }
 
     // re-activate cursor hiding
@@ -1424,6 +1453,11 @@ let RevealWhiteboard = (function () {
     clearSlide
   );
 
+  Reveal.addKeyBinding(
+    { keyCode: 76, key: "L", description: "Whiteboard: Toggle laser pointer" },
+    toggleLaser
+  );
+
   Reveal.addKeyBinding(
     { keyCode: 87, key: "W", description: "Whiteboard: Toggle on/off" },
     toggleWhiteboard
@@ -1472,7 +1506,7 @@ let RevealWhiteboard = (function () {
 
       // set default state
       toggleWhiteboard(false);
-      selectTool(ToolType.PEN);
+      selectTool(PEN);
       selectPenColor(penColors[0]);
       selectPenRadius(2);