touch

Esiur.Examples.StandaloneWebServerDemo/Program.cs

@@ -20,7 +20,7 @@ internal class Program
         // Add your object to the store
         var service = await Warehouse.Put("sys/demo", new Demo());
 
-        var http = await Warehouse.Put<HTTPServer>("sys/http", new HTTPServer() { Port = 8080 });
+        var http = await Warehouse.Put<HTTPServer>("sys/http", new HTTPServer() { Port = 8888 });
 
 
         http.MapGet("{url}", (string url, HTTPConnection sender) =>

Esiur.Examples.StandaloneWebServerDemo/Web/css/style.css

@@ -7,6 +7,9 @@
 html {
     font-family: def;
 }
+body {
+    overflow: hidden;
+}
 
 i-router {
     height: 100vh;
@@ -31,7 +34,7 @@ i-app {
     color: #000000;
     background: #e3e3e3;
     font-size: 32px;
-    width: 500px;
+    width: calc(100% - 50px);
 }
 
 canvas {

Esiur.Examples.StandaloneWebServerDemo/Web/js/app.js

@@ -49,12 +49,21 @@ async function init() {
             colorId = document.querySelector('input[name="color"]:checked').value;
         }, false);
 
+        canvas.addEventListener("touchstart", (e) => {
+            drawing = true;
+            colorId = document.querySelector('input[name="color"]:checked').value;
+        });
+
         canvas.addEventListener("mouseup", function (e) {
             drawing = false;
         }, false);
 
+        canvas.addEventListener("touchend", function (e) {
+            drawing = false;
+        }, false);
+
+
         canvas.addEventListener("mousemove", function (e) {
-            //console.log(e);
  
             var rect = canvas.getBoundingClientRect();
 
@@ -68,10 +77,27 @@ async function init() {
                 ctx.arc(x, y, 4, 0, 2 * Math.PI);
                 ctx.fill();
                 demo.Draw(x / 4, y / 4, colorId);
-                //ctx.fillRect(x, y, 10, 10);
             }
         });
 
+        canvas.addEventListener("touchmove", function (e) {
+
+            var rect = canvas.getBoundingClientRect();
+
+            let x = e.touches[0].clientX - rect.left;
+            let y = e.touches[0].clientY - rect.top;
+
+            if (drawing) {
+                ctx.fillStyle = colors[colorId];
+
+                ctx.beginPath();
+                ctx.arc(x, y, 4, 0, 2 * Math.PI);
+                ctx.fill();
+                demo.Draw(x / 4, y / 4, colorId);
+            }
+        });
+
+
         demo.on("Drawn", (pt) => {
             ctx.fillStyle = colors[pt.Color];
             ctx.beginPath();