Commit 31e8e7e2 authored by Mario Botsch's avatar Mario Botsch
Browse files

next iteration of laser pointer handling

parent 03641e54
......@@ -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);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment