From 212da96636e44272106a9bd8f85b2b40cd0b9423 Mon Sep 17 00:00:00 2001
From: Özgür Kesim <oec@codeblau.de>
Date: Mon, 21 Apr 2025 13:04:10 +0200
Subject: various updates

---
 index.html | 41 ++++++++++++++++++++++++++++++++---------
 1 file changed, 32 insertions(+), 9 deletions(-)

(limited to 'index.html')

diff --git a/index.html b/index.html
index db3189b..458a791 100644
--- a/index.html
+++ b/index.html
@@ -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();
-- 
cgit v1.2.3