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.

diff --git a/webstead.xhtml b/webstead.xhtml
index 7452ecdba31351920454a806a8e82c40dbc83810..8c2b8447fc8b20580fad0cc5cf19a341ce1f772d 100644 (file)
--- a/webstead.xhtml
+++ b/webstead.xhtml
@@ -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>