webstead: click handler for output side

It's kind of ugly because there's no :active, but I can't see a nice
way to fake that.
This commit is contained in:
Ben Harris 2025-10-15 22:46:46 +01:00
parent 0ecf8f3ebf
commit a9bceeb6e7

View File

@ -123,6 +123,18 @@
target.focus();
e.preventDefault();
}
function drawing_click(e) {
// At least on FF 140, SVGMatrix doesn't have .transformPoint()
// so we turn it into a DOMMatrix, which does.
var m = DOMMatrix.fromMatrix(this.getScreenCTM().inverse());
var pt = m.transformPoint({x: e.clientX, y: e.clientY});
var x = Math.floor(pt.x / 100) - 1;
var y = Math.floor(pt.y / 100) - 1;
var target = document.querySelector('#pixels').rows[y].cells[x]
.querySelector('input');
target.click();
e.preventDefault();
}
function init() {
for (var e of document.querySelectorAll('#pixels input')) {
e.onchange = e => update_glyph(true);
@ -132,6 +144,7 @@
from_c(this.value);
update_glyph(false);
};
document.querySelector('#drawing').onclick = drawing_click;
update_glyph(true);
}
import("./bedstead.js").then((module) => {
@ -216,7 +229,8 @@
</table>
</form>
<div id="outpane">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="100 100 500 900">
<svg xmlns="http://www.w3.org/2000/svg" id="drawing"
viewBox="100 100 500 900">
<g transform="scale(1,-1) translate(0,-800)">
<path id="rendered" fill="currentColor"/>
</g>