diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 41 |
1 files changed, 32 insertions, 9 deletions
@@ -13,7 +13,7 @@ body { height: 100vh; width: 100%; margin:0; - overflow:hidden; + overflow:auto; font-family:Calibri,Verdana,Sans-Serif; } @@ -31,7 +31,7 @@ body { overflow:auto; } -#run { +button { margin: 10pt; } @@ -41,8 +41,10 @@ body { } #output { - width: 100%; - height: 50vh; + /* width: 100%; */ + /* height: 50vh; */ + width: auto; + height: auto; overflow:auto; } @@ -55,6 +57,7 @@ body { svg { padding: 5px; + font-family:Calibri,Verdana,Sans-Serif; // border: 2px solid lime; } @@ -93,11 +96,12 @@ svg { {{ .Cur.Example }} </textarea> <div id="mid"> - <button id="run" class="button" onclick="run()" title="or ctrl-enter in editor">run</button> - <button id="save" class="button" onclick="share()" title="or ctrl-s in editor">share</button><span id="link"></span> - <input id="file" type="file" name="file" class="button"/> - <input id="scale" type ="range" min ="0.5" max="3" step ="0.1" value ="1"/> - <span id="doc"> + <button id="run" class="button" onclick="run()" title="or ctrl-enter in editor">run</button> + <button id="png" class="button" onclick="png()" title="or ctrl-i"/>png</button> + <button id="save" class="button" onclick="share()" title="or ctrl-s in editor">share</button><span id="link"></span> + <input id="file" class="button" type="file" name="file"/> + <input id="scale" type ="range" min ="0.5" max="3" step ="0.1" value ="1"/> + <span id="doc"> Documentation: {{ range $link, $text := .Cur.Documentation }} <a href="{{$link}}" target="_blank">{{$text}}</a> / @@ -105,6 +109,7 @@ svg { </span> </div> <div id="output"></div> + <canvas id="canvas"></canvas> <script> var output = document.getElementById("output"); var source = document.getElementById("source"); @@ -195,6 +200,24 @@ function share() { req.send(data); } +function png() { + let rect = output.children[0].getBoundingClientRect(); + let canvas = document.getElementById("canvas"); + let img = new Image(); + canvas.width = rect.width; + canvas.height = rect.height; + img.onload = () => { + let ctx = canvas.getContext('2d'); + ctx.font = "sans-serif"; + ctx.drawImage(img, 0, 0); + } + let cells = output.getElementsByTagName("text"); + for (let cell of cells) { + cell.setAttribute("font-family", "sans-serif"); + } + img.src = 'data:image/svg+xml;base64,' + btoa(output.innerHTML); +} + function load(id) { link.innerHtml = ""; var req = new XMLHttpRequest(); |