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

feat: responsive canvas scaling

Browse source
This commit is contained in:
Lewis Wynne 2026-04-10 16:10:10 +01:00
parent 4807104eb1
commit 52cbc003e1
2 changed files with 5 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/render.rs
View file

@ -56,8 +56,8 @@ pub fn render_form(config: &Config) -> String {
cnt=document.querySelector('.guestbook-drawing-content'), cnt=document.querySelector('.guestbook-drawing-content'),
hid=document.querySelector('[name=drawing]'), hid=document.querySelector('[name=drawing]'),
c,x,d=false,lx,ly,h=[],col='#000',sz=5; c,x,d=false,lx,ly,h=[],col='#000',sz=5;
function pos(e){{var r=c.getBoundingClientRect();return[e.clientX-r.left,e.clientY-r.top]}} function pos(e){{var r=c.getBoundingClientRect(),sx=c.width/r.width,sy=c.height/r.height;return[(e.clientX-r.left)*sx,(e.clientY-r.top)*sy]}}
function tpos(e){{var r=c.getBoundingClientRect(),t=e.touches[0];return[t.clientX-r.left,t.clientY-r.top]}} function tpos(e){{var r=c.getBoundingClientRect(),t=e.touches[0],sx=c.width/r.width,sy=c.height/r.height;return[(t.clientX-r.left)*sx,(t.clientY-r.top)*sy]}}
function save(){{if(h.length>=20)h.shift();h.push(x.getImageData(0,0,c.width,c.height))}} function save(){{if(h.length>=20)h.shift();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);x.fillStyle=col;x.fill()}} function dot(px,py){{x.beginPath();x.arc(px,py,sz/2,0,Math.PI*2);x.fillStyle=col;x.fill()}}
function bindCanvas(){{ function bindCanvas(){{

3
templates/default.css
View file

@ -14,6 +14,7 @@
.guestbook-input {} .guestbook-input {}
.guestbook-textarea { .guestbook-textarea {
box-sizing: border-box; box-sizing: border-box;
max-width: 100%;
} }
.guestbook-button { .guestbook-button {
display: block; display: block;
@ -25,6 +26,8 @@
border: 1px solid #000; border: 1px solid #000;
cursor: crosshair; cursor: crosshair;
display: block; display: block;
max-width: 100%;
height: auto;
} }
.guestbook-canvas-tools { .guestbook-canvas-tools {
display: block; display: block;