From 5552dc11a3b7bf865d9471a987dcf0b5df3b52b6 Mon Sep 17 00:00:00 2001 From: "A.Olokhtonov" Date: Sun, 21 Apr 2024 18:18:38 +0300 Subject: [PATCH] Make cursor reflect the size of the brush. Doesn't work when the brush size is > max allowed cursor size though --- client/default.css | 2 +- client/icons/cursor.svg | 44 ++++----------------------------------- client/index.html | 3 +++ client/tools.js | 1 + client/webgl_listeners.js | 14 ++++++++++++- 5 files changed, 22 insertions(+), 42 deletions(-) diff --git a/client/default.css b/client/default.css index 0345118..e20f8bb 100644 --- a/client/default.css +++ b/client/default.css @@ -40,7 +40,7 @@ canvas { width: 100%; height: 100%; display: block; - cursor: url('icons/cursor.svg') 7 7, crosshair; + /* */ } canvas.picker { diff --git a/client/icons/cursor.svg b/client/icons/cursor.svg index 7889a18..1c6b2a4 100644 --- a/client/icons/cursor.svg +++ b/client/icons/cursor.svg @@ -4,56 +4,20 @@ - - - - - + + +
diff --git a/client/tools.js b/client/tools.js index d3e94ae..cb4b6f2 100644 --- a/client/tools.js +++ b/client/tools.js @@ -95,6 +95,7 @@ function switch_stroke_width(e, state) { state.players[state.me].width = value; show_stroke_preview(state, value); + update_cursor(state); if (state.hide_preview) { clearTimeout(state.hide_preview); diff --git a/client/webgl_listeners.js b/client/webgl_listeners.js index 7ff0d18..10e686b 100644 --- a/client/webgl_listeners.js +++ b/client/webgl_listeners.js @@ -356,6 +356,18 @@ function mouseleave(e, state, context) { // something else? } +function update_cursor(state) { + const style = document.querySelector('#cursor-style'); + const width = Math.max(state.players[state.me].width * state.canvas.zoom, 2.0); + const radius = width / 2; + const svg = ` + + + `.replaceAll('\n', ' '); + + style.innerText = `canvas { cursor: url('data:image/svg+xml;utf8,${svg}') ${radius + 1} ${radius + 1}, crosshair; }`; +} + function wheel(e, state, context) { const screenp = {'x': window.devicePixelRatio * e.clientX, 'y': window.devicePixelRatio * e.clientY}; const canvasp = screen_to_canvas(state, screenp); @@ -384,8 +396,8 @@ function wheel(e, state, context) { state.canvas.zoom = new_zoom; + update_cursor(state); fire_event(state, movecanvas_event(state)); - schedule_draw(state, context); }