Add option to change pen size with the scroll wheel (#54)

* add option to change pen size with the scroll wheel

* Update the cursor size immediately when changing the size

* Add a tooltip with the size change shortcut

Co-authored-by: ophir <pere.jobs@gmail.com>

client-data/board.html

@@ -50,7 +50,8 @@
 						<span class="colorPresetButton"></span>
 					</span>
 				</li>
-				<li class="tool" tabindex="-1">
+				<li class="tool" tabindex="-1"
+					title="{{translations.size}} ({{translations.keyboard_shortcut}}: alt + {{translations.mousewheel}})">
 					<img class="tool-icon" width="60" height="60" src="icon-size.svg" alt="size" />
 					<label class="tool-name slider" for="chooseSize">
 						<span>{{translations.size}}</span>

client-data/js/board.js

@@ -167,6 +167,9 @@ Tools.register = function registerTool(newTool) {
 	//Add the tool to the list
 	Tools.list[newTool.name] = newTool;
 
+	// Register the change handlers
+	if (newTool.onSizeChange) Tools.sizeChangeHandlers.push(newTool.onSizeChange);
+
 	//There may be pending messages for the tool
 	var pending = Tools.pendingMessages[newTool.name];
 	if (pending) {
@@ -534,11 +537,16 @@ Tools.getColor = (function color() {
 
 Tools.colorPresets.forEach(Tools.HTML.addColorButton.bind(Tools.HTML));
 
+Tools.sizeChangeHandlers = [];
 Tools.setSize = (function size() {
 	var chooser = document.getElementById("chooseSize");
 
 	function update() {
-		chooser.value = Math.max(1, Math.min(50, chooser.value | 0));
+		var size = Math.max(1, Math.min(50, chooser.value | 0));
+		chooser.value = size;
+		Tools.sizeChangeHandlers.forEach(function (handler) {
+			handler(size);
+		});
 	}
 	update();
 

client-data/tools/cursor/cursor.js

@@ -41,6 +41,7 @@
             "move": handleMarker,
             "release": function () { sending = true },
         },
+        "onSizeChange": onSizeChange,
         "draw": draw,
         "mouseCursor": "crosshair",
         "icon": "tools/pencil/icon.svg",
@@ -48,19 +49,31 @@
     Tools.register(cursorTool);
     Tools.addToolListeners(cursorTool);
 
-    function handleMarker(x, y) {
-        if (!Tools.showMarker || !Tools.showMyCursor) return;
-
-        // throttle local cursor updates
-        var cur_time = Date.now();
     var message = {
         type: "update",
-            x: x,
-            y: y,
+        x: 0,
+        y: 0,
         color: Tools.getColor(),
         size: Tools.getSize(),
     };
 
+    function handleMarker(x, y) {
+        // throttle local cursor updates
+        message.x = x;
+        message.y = y;
+        message.color = Tools.getColor();
+        message.size = Tools.getSize();
+        updateMarker();
+    }
+
+    function onSizeChange(size) {
+        message.size = size;
+        updateMarker();
+    }
+
+    function updateMarker() {
+        if (!Tools.showMarker || !Tools.showMyCursor) return;
+        var cur_time = Date.now();
         if (cur_time - lastCursorUpdate > MAX_CURSOR_UPDATES_INTERVAL_MS &&
             (sending || Tools.curTool.showMarker)) {
             Tools.drawAndSend(message, cursorTool);

client-data/tools/zoom/zoom.js

@@ -82,14 +82,22 @@
     function onwheel(evt) {
         evt.preventDefault();
         if (evt.ctrlKey || Tools.curTool === zoomTool) {
+            // zoom
             var scale = Tools.getScale();
             var x = evt.pageX / scale;
             var y = evt.pageY / scale;
             setOrigin(x, y, evt, false);
             animate((1 - ((evt.deltaY > 0) - (evt.deltaY < 0)) * 0.25) * Tools.getScale());
+        } else if (evt.altKey) {
+            // make finer changes if shift is being held
+            var change = evt.shiftKey ? 1 : 5;
+            // change tool size
+            Tools.setSize(Tools.getSize() - ((evt.deltaY > 0) - (evt.deltaY < 0)) * change);
         } else if (evt.shiftKey) {
+            // scroll horizontally
             window.scrollTo(window.scrollX + evt.deltaY, window.scrollY + evt.deltaX);
         } else {
+            // regular scrolling
             window.scrollTo(window.scrollX + evt.deltaX, window.scrollY + evt.deltaY);
         }
     }

server/translations.json

@@ -15,6 +15,7 @@
         "pencil": "Pencil",
         "click_to_zoom": "Click to zoom in\nPress shift and click to zoom out",
         "keyboard_shortcut": "keyboard shortcut",
+        "mousewheel": "mousewheel",
         "opacity": "Opacity",
         "color": "Color",
         "eraser": "Eraser",
@@ -43,6 +44,7 @@
         "hand": "Main",
         "straight_line": "Ligne droite",
         "keyboard_shortcut": "raccourci clavier",
+        "mousewheel": "molette de la souris",
         "click_to_zoom": "Cliquez pour zoomer\nCliquez en maintenant la touche majuscule enfoncée pour dézoomer",
         "tagline": "Logiciel libre pour collaborer en ligne sur un tableau blanc. Venez dessiner vos idées ensemble sur WBO !",
         "index_title": "Bienvenue sur WBO !",
@@ -72,6 +74,7 @@
         "pencil": "Stift",
         "click_to_zoom": "Klicke zum reinzoomen\nHalte die Umschalttaste und klicke zum herauszoomen",
         "keyboard_shortcut": "Tastenkombination",
+        "mousewheel": "Mausrad",
         "opacity": "Deckkraft",
         "color": "Farbe",
         "eraser": "Radierer",
@@ -102,6 +105,7 @@
         "pencil": "ペン",
         "click_to_zoom": "クリックで拡大\nシフトを押しながらクリックで縮小",
         "keyboard_shortcut": "キーボードショートカット",
+        "mousewheel": "ねずみ車",
         "opacity": "透明度",
         "color": "色",
         "eraser": "消去",
@@ -133,6 +137,7 @@
         "zoom": "Лупа",
         "configuration": "Настроики",
         "keyboard_shortcut": "горячая клавиша",
+        "mousewheel": "колёсико мыши ",
         "tagline": "Бесплатная и открытая доска для совместной работы в интернете. Рисуете свои идеи вместе в WBO !",
         "index_title": "Добро пожаловать на WBO !",
         "introduction_paragraph": "WBO это бесплатная и <a href=\"https://github.com/lovasoa/whitebophir\" title=\"открытый исходный код\">открытая</a> виртуальная онлайн доска, позволяющая рисовать одновременно сразу нескольким пользователям. С WBO вы сможете рисовать, работать с коллегами над будущими проектами, проводить онлайн встречи, подкреплять ваши обучающие материалы и даже пробовать себя в дизайне. WBO доступен без регистрации.",
@@ -162,6 +167,7 @@
         "straight_line": "直线",
         "configuration": "刷设置",
         "keyboard_shortcut": "键盘快捷键",
+        "mousewheel": "鼠标轮",
         "click_to_zoom": "点击放大。\n保持班次并单击缩小。",
         "tagline": "打开即用的免费在线白板工具",
         "index_title": "欢迎来到 WBO！",