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

sdf
A.Olokhtonov 4 weeks 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
Split 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 { @@ -40,7 +40,7 @@ canvas {
width: 100%;
height: 100%;
display: block;
cursor: url('icons/cursor.svg') 7 7, crosshair;
/* */
}
canvas.picker {

44
client/icons/cursor.svg
Unescape View File

@ -4,56 +4,20 @@ @@ -4,56 +4,20 @@
<svg
width="16"
height="16"
viewBox="0 0 4.2333332 4.2333332"
viewBox="0 0 16 16"
version="1.1"
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:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
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)">
<g id="layer1">
<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"
cy="128.53627"
cx="135.63414"
r="1.5875" />
<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"
cy="128.53627"
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 @@ @@ -27,6 +27,9 @@
<script type="text/javascript" src="client_send.js"></script>
<script type="text/javascript" src="client_recv.js"></script>
<script type="text/javascript" src="websocket.js"></script>
<style id="cursor-style">
</style>
</head>
<body>
<div class="main">

1
client/tools.js
Unescape View File

@ -95,6 +95,7 @@ function switch_stroke_width(e, state) { @@ -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);

14
client/webgl_listeners.js
Unescape View File

@ -356,6 +356,18 @@ function mouseleave(e, state, context) { @@ -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 = `<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) {
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) { @@ -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);
}

Write Preview
Loading…
Cancel
Save