From 41bd0591e3a830999dff0fc36dcccbb99cd2bc46 Mon Sep 17 00:00:00 2001
From: Ahmed Zamil <ahmed@esiur.com>
Date: Thu, 13 Jun 2024 19:25:59 +0300
Subject: [PATCH] touch

---
 .../Program.cs                                |  2 +-
 .../Web/css/style.css                         |  5 ++-
 .../Web/js/app.js                             | 32 +++++++++++++++++--
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/Esiur.Examples.StandaloneWebServerDemo/Program.cs b/Esiur.Examples.StandaloneWebServerDemo/Program.cs
index 9e4049a..d7ac681 100644
--- a/Esiur.Examples.StandaloneWebServerDemo/Program.cs
+++ b/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) =>
diff --git a/Esiur.Examples.StandaloneWebServerDemo/Web/css/style.css b/Esiur.Examples.StandaloneWebServerDemo/Web/css/style.css
index 1de8808..9f664d0 100644
--- a/Esiur.Examples.StandaloneWebServerDemo/Web/css/style.css
+++ b/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 {
diff --git a/Esiur.Examples.StandaloneWebServerDemo/Web/js/app.js b/Esiur.Examples.StandaloneWebServerDemo/Web/js/app.js
index f54bba0..1421da7 100644
--- a/Esiur.Examples.StandaloneWebServerDemo/Web/js/app.js
+++ b/Esiur.Examples.StandaloneWebServerDemo/Web/js/app.js
@@ -49,13 +49,22 @@ 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("mousemove", function (e) {
-            //console.log(e);
+        canvas.addEventListener("touchend", function (e) {
+            drawing = false;
+        }, false);
 
+
+        canvas.addEventListener("mousemove", function (e) {
+ 
             var rect = canvas.getBoundingClientRect();
 
             let x = e.clientX - rect.left;
@@ -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();