aolo2
/
desk2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Make cursor reflect the size of the brush. Doesn't work when the brush size is > max allowed cursor size though

ssao
A.Olokhtonov 7 months ago
parent
e4a10ebf30
commit
5552dc11a3
5 changed files with 22 additions and 42 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      client/default.css
  2. 44
      client/icons/cursor.svg
  3. 3
      client/index.html
  4. 1
      client/tools.js
  5. 14
      client/webgl_listeners.js

2
client/default.css
Unescape View File

@ -40,7 +40,7 @@ canvas {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block; display: block;
cursor: url('icons/cursor.svg') 7 7, crosshair; /* */
} }
canvas.picker { canvas.picker {

44
client/icons/cursor.svg
Unescape View File

@ -4,56 +4,20 @@
<svg <svg
width="16" width="16"
height="16" height="16"
viewBox="0 0 4.2333332 4.2333332" viewBox="0 0 16 16"
version="1.1" version="1.1"
id="svg5" id="svg5"
sodipodi:docname="cursor.svg"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview <g id="layer1">
id="namedview7"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
showgrid="true"
inkscape:zoom="64"
inkscape:cx="6.6953125"
inkscape:cy="7.5625"
inkscape:window-width="2558"
inkscape:window-height="1412"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<inkscape:grid
type="xygrid"
id="grid234"
originx="0"
originy="0" />
</sodipodi:namedview>
<defs
id="defs2" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-133.51747,-126.4196)">
<circle <circle
style="fill:none;stroke:#ffffff;stroke-width:1.05833;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers" style="fill:none;stroke:#ffffff;stroke-width:1"
id="circle1000" id="circle1000"
cy="128.53627" cy="128.53627"
cx="135.63414" cx="135.63414"
r="1.5875" /> r="1.5875" />
<circle <circle
style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers" style="fill:none;stroke:#000000;stroke-width:0.25"
id="path236" id="path236"
cy="128.53627" cy="128.53627"
cx="135.63414" cx="135.63414"

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 624 B

3
client/index.html
Unescape View File

@ -27,6 +27,9 @@
<script type="text/javascript" src="client_send.js"></script> <script type="text/javascript" src="client_send.js"></script>
<script type="text/javascript" src="client_recv.js"></script> <script type="text/javascript" src="client_recv.js"></script>
<script type="text/javascript" src="websocket.js"></script> <script type="text/javascript" src="websocket.js"></script>
<style id="cursor-style">
</style>
</head> </head>
<body> <body>
<div class="main"> <div class="main">

1
client/tools.js
Unescape View File

@ -95,6 +95,7 @@ function switch_stroke_width(e, state) {
state.players[state.me].width = value; state.players[state.me].width = value;
show_stroke_preview(state, value); show_stroke_preview(state, value);
update_cursor(state);
if (state.hide_preview) { if (state.hide_preview) {
clearTimeout(state.hide_preview); clearTimeout(state.hide_preview);

14
client/webgl_listeners.js
Unescape View File

@ -356,6 +356,18 @@ function mouseleave(e, state, context) {
// something else? // 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 = `<svg xmlns="http://www.w3.org/2000/svg" width="${width * 2 + 2}" height="${width * 2 + 2}">
<circle cx="${radius + 1}" cy="${radius + 1}" r="${radius}" stroke="white" fill="none" stroke-width="2"/>
<circle cx="${radius + 1}" cy="${radius + 1}" r="${radius}" stroke="black" fill="none" stroke-width="1"/>
</svg>`.replaceAll('\n', ' ');
style.innerText = `canvas { cursor: url('data:image/svg+xml;utf8,${svg}') ${radius + 1} ${radius + 1}, crosshair; }`;
}
function wheel(e, state, context) { function wheel(e, state, context) {
const screenp = {'x': window.devicePixelRatio * e.clientX, 'y': window.devicePixelRatio * e.clientY}; const screenp = {'x': window.devicePixelRatio * e.clientX, 'y': window.devicePixelRatio * e.clientY};
const canvasp = screen_to_canvas(state, screenp); const canvasp = screen_to_canvas(state, screenp);
@ -384,8 +396,8 @@ function wheel(e, state, context) {
state.canvas.zoom = new_zoom; state.canvas.zoom = new_zoom;
update_cursor(state);
fire_event(state, movecanvas_event(state)); fire_event(state, movecanvas_event(state));
schedule_draw(state, context); schedule_draw(state, context);
} }

Write Preview
Loading…
Cancel
Save