lew/guestbook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: just four swatches, fits with the aesthetic much better

Browse source
This commit is contained in:
Lewis Wynne 2026-04-09 23:55:26 +01:00
parent 286a0ed371
commit 1371c006e9
1 changed files with 6 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/render.rs
View file

@ -42,10 +42,10 @@ pub fn render_form(config: &Config) -> String {
format!( format!(
r##"<label class="guestbook-label">{label}</label> r##"<label class="guestbook-label">{label}</label>
<canvas class="guestbook-canvas" width="{w}" height="{h}"></canvas> <canvas class="guestbook-canvas" width="{w}" height="{h}"></canvas>
<span class="guestbook-canvas-tools"><span class="guestbook-swatch active" data-c="#000" style="background:#000"></span><span class="guestbook-swatch" data-c="#e03131" style="background:#e03131"></span><span class="guestbook-swatch" data-c="#2f9e44" style="background:#2f9e44"></span><span class="guestbook-swatch" data-c="#1971c2" style="background:#1971c2"></span><span class="guestbook-swatch" data-c="#f08c00" style="background:#f08c00"></span><span class="guestbook-swatch" data-c="#9c36b5" style="background:#9c36b5"></span><span class="guestbook-swatch" data-c="#e64980" style="background:#e64980"></span><span class="guestbook-swatch" data-c="eraser" style="background:#fff" title="eraser"></span> <input type="range" class="guestbook-size-slider" min="1" max="20" value="5"> | <a href="#" class="guestbook-undo">undo</a> | <a href="#" class="guestbook-canvas-reset">reset</a></span><input type="hidden" name="drawing"><script>(function(){{ <span class="guestbook-canvas-tools"><span class="guestbook-swatch active" data-c="#000" style="background:#000"></span><span class="guestbook-swatch" data-c="#e03131" style="background:#e03131"></span><span class="guestbook-swatch" data-c="#2f9e44" style="background:#2f9e44"></span><span class="guestbook-swatch" data-c="#1971c2" style="background:#1971c2"></span> <input type="range" class="guestbook-size-slider" min="1" max="20" value="5"> | <a href="#" class="guestbook-undo">undo</a> | <a href="#" class="guestbook-canvas-reset">reset</a></span><input type="hidden" name="drawing"><script>(function(){{
var c=document.querySelector('.guestbook-canvas'), var c=document.querySelector('.guestbook-canvas'),
x=c.getContext('2d'), x=c.getContext('2d'),
d=false,lx,ly,h=[],col='#000',sz=5,eraser=false; d=false,lx,ly,h=[],col='#000',sz=5;
x.strokeStyle=col;x.lineWidth=sz;x.lineCap='round';x.lineJoin='round'; x.strokeStyle=col;x.lineWidth=sz;x.lineCap='round';x.lineJoin='round';
function pos(e){{var r=c.getBoundingClientRect(); function pos(e){{var r=c.getBoundingClientRect();
return[e.clientX-r.left,e.clientY-r.top]}} return[e.clientX-r.left,e.clientY-r.top]}}
@ -53,29 +53,19 @@ pub fn render_form(config: &Config) -> String {
return[t.clientX-r.left,t.clientY-r.top]}} return[t.clientX-r.left,t.clientY-r.top]}}
function save(){{if(h.length>=20)h.shift(); function save(){{if(h.length>=20)h.shift();
h.push(x.getImageData(0,0,c.width,c.height))}} h.push(x.getImageData(0,0,c.width,c.height))}}
function dot(px,py){{x.beginPath();x.arc(px,py,sz/2,0,Math.PI*2); function dot(px,py){{x.beginPath();x.arc(px,py,sz/2,0,Math.PI*2);x.fillStyle=col;x.fill()}}
if(eraser){{x.save();x.globalCompositeOperation='destination-out';x.fillStyle='#000';x.fill();x.restore()}}
else{{x.fillStyle=col;x.fill()}}}}
c.addEventListener('mousedown',function(e){{save();d=true;var p=pos(e);lx=p[0];ly=p[1];dot(lx,ly)}}); c.addEventListener('mousedown',function(e){{save();d=true;var p=pos(e);lx=p[0];ly=p[1];dot(lx,ly)}});
c.addEventListener('mousemove',function(e){{if(!d)return;var p=pos(e); c.addEventListener('mousemove',function(e){{if(!d)return;var p=pos(e);
if(eraser)x.globalCompositeOperation='destination-out'; x.beginPath();x.moveTo(lx,ly);x.lineTo(p[0],p[1]);x.stroke();lx=p[0];ly=p[1]}});
x.beginPath();x.moveTo(lx,ly);x.lineTo(p[0],p[1]);x.stroke();
if(eraser)x.globalCompositeOperation='source-over';
lx=p[0];ly=p[1]}});
c.addEventListener('mouseup',function(){{d=false}}); c.addEventListener('mouseup',function(){{d=false}});
c.addEventListener('mouseleave',function(){{d=false}}); c.addEventListener('mouseleave',function(){{d=false}});
c.addEventListener('touchstart',function(e){{e.preventDefault();save();var p=tpos(e);lx=p[0];ly=p[1];dot(lx,ly)}}); c.addEventListener('touchstart',function(e){{e.preventDefault();save();var p=tpos(e);lx=p[0];ly=p[1];dot(lx,ly)}});
c.addEventListener('touchmove',function(e){{e.preventDefault();var p=tpos(e); c.addEventListener('touchmove',function(e){{e.preventDefault();var p=tpos(e);
if(eraser)x.globalCompositeOperation='destination-out'; x.beginPath();x.moveTo(lx,ly);x.lineTo(p[0],p[1]);x.stroke();lx=p[0];ly=p[1]}});
x.beginPath();x.moveTo(lx,ly);x.lineTo(p[0],p[1]);x.stroke();
if(eraser)x.globalCompositeOperation='source-over';
lx=p[0];ly=p[1]}});
var sw=document.querySelectorAll('.guestbook-swatch'); var sw=document.querySelectorAll('.guestbook-swatch');
sw.forEach(function(s){{s.addEventListener('click',function(){{ sw.forEach(function(s){{s.addEventListener('click',function(){{
sw.forEach(function(el){{el.classList.remove('active')}}); sw.forEach(function(el){{el.classList.remove('active')}});
s.classList.add('active');var c2=s.getAttribute('data-c'); s.classList.add('active');col=s.getAttribute('data-c');x.strokeStyle=col}})}});
if(c2==='eraser'){{eraser=true}}else{{eraser=false;col=c2;x.strokeStyle=col}}
}})}});
document.querySelector('.guestbook-size-slider').addEventListener('input',function(e){{ document.querySelector('.guestbook-size-slider').addEventListener('input',function(e){{
sz=parseInt(e.target.value);x.lineWidth=sz}}); sz=parseInt(e.target.value);x.lineWidth=sz}});
document.querySelector('.guestbook-undo').addEventListener('click',function(e){{ document.querySelector('.guestbook-undo').addEventListener('click',function(e){{