mirror of
https://github.com/lovasoa/whitebophir
synced 2024-09-20 06:12:00 +00:00
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>
This commit is contained in:
finnboeger
GitHub
parent
70f45f0693
commit
b9605acb87
5 changed files with 51 additions and 15 deletions
|
|
@ -14,8 +14,8 @@
|
|||
<link rel="icon" type="image/x-icon" sizes="16x16" href="../favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
|
||||
<meta property="og:title" content="{{board}} board on WBO" />
|
||||
<meta property="og:url" content="{{baseUrl}}/boards/{{boardUriComponent}}" />
|
||||
<meta property="og:image" content="{{baseUrl}}/preview/{{boardUriComponent}}" />
|
||||
<meta property="og:url" content="{{baseUrl}}/boards/{{boardUriComponent}}" />
|
||||
<meta property="og:image" content="{{baseUrl}}/preview/{{boardUriComponent}}" />
|
||||
<link rel="canonical" href="{{boardUriComponent}}?lang={{language}}" />
|
||||
{{#languages}}
|
||||
<link rel="alternate" hreflang="{{.}}" href="{{../boardUriComponent}}?lang={{.}}" />
|
||||
|
|
@ -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>
|
||||
|
|
@ -96,4 +97,4 @@
|
|||
<script src="../js/canvascolor/canvascolor.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
|
@ -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();
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
var message = {
|
||||
type: "update",
|
||||
x: 0,
|
||||
y: 0,
|
||||
color: Tools.getColor(),
|
||||
size: Tools.getSize(),
|
||||
};
|
||||
|
||||
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,
|
||||
color: Tools.getColor(),
|
||||
size: Tools.getSize(),
|
||||
};
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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！",
|
||||
|
|
|
|||
Loading…
Reference in a new issue