Add miniPaint as new frontend base

2026-01-26 12:20:16 -05:00
parent bb859105ff
commit 6ae4cbcb77
306 changed files with 60729 additions and 4050 deletions
@@ -0,0 +1,76 @@
+<html>
+<body style="margin:0;">
+	
+<iframe id="myFrame" style="width:100%;height:100vh;border:0;" src="../" allow="camera"></iframe>
+
+<script>
+	window.addEventListener('load', function (e) {
+		draw_various();
+	}, false);
+	
+	async function draw_various() {
+		var Layers = document.getElementById('myFrame').contentWindow.Layers;
+		
+		//add layer
+		var canvas = document.createElement('canvas');
+		canvas.width = 50;
+		canvas.height = 50;
+		var ctx = canvas.getContext("2d");	
+		cross_X(ctx, 25, 25);
+		var params = {
+			type: 'image',
+			data: canvas.toDataURL("image/png"),
+			x: 50,
+			y: 50,
+			width: canvas.width,
+			height: canvas.height,
+		};
+		await Layers.insert(params);
+		
+		//add new layer
+		var canvas = document.createElement('canvas');
+		canvas.width = 400;
+		canvas.height = 400;
+		var ctx = canvas.getContext("2d");	
+		cross_X(ctx, 200, 200, null, '#00cc00');
+		var params = {
+			type: 'image',
+			data: canvas.toDataURL("image/png"),
+			width: canvas.width,
+			height: canvas.height,
+		};
+		await Layers.insert(params);
+
+		//update last layer
+		var canvas = Layers.convert_layer_to_canvas(null, true); //no trim
+		var ctx = canvas.getContext("2d");
+		cross_X(ctx, 300, 300, null, '#00cc00');
+		Layers.update_layer_image(canvas);
+		//also update layer
+		var link = Layers.get_layer();
+		link.x = parseInt(canvas.dataset.x);
+		link.y = parseInt(canvas.dataset.y);
+		link.width = canvas.width;
+		link.height = canvas.height;
+	}
+	
+	function cross_X(ctx, x, y, size = 20, col = '#ff0000') {
+		if(size == null)
+			size = 20;
+		x = parseFloat(x);
+		y = parseFloat(y);
+		size = parseInt(size);
+		var lw = parseInt(5);
+		ctx.beginPath();
+		ctx.moveTo(x - size, y - size);
+		ctx.lineTo(x + size, y + size);
+		ctx.lineWidth = lw;
+		ctx.strokeStyle = col;
+		ctx.stroke();
+		ctx.moveTo(x + size, y - size);
+		ctx.lineTo(x - size, y + size);
+		ctx.lineWidth = lw;
+		ctx.strokeStyle = col;
+		ctx.stroke();
+	}
+</script>