app

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

@@ -9,7 +9,88 @@ async function init() {
 
         await app.setData(connection);
         console.log(connection);
-    }
+
+        let label = document.getElementById("label");
+
+        demo.on(":Label", () => {
+            const range = document.createRange();
+            const selection = window.getSelection();
+            range.setStart(label, label.childNodes.length);
+            range.collapse(true);
+            selection.removeAllRanges();
+            selection.addRange(range);
+        });
+
+        let canvas = document.getElementById("canvas");
+        let ctx = canvas.getContext("2d");
+
+        let drawing = false;
+
+        let colors = [
+            '#ffffff',
+            '#000000',
+            '#DB2828',
+            '#21BA45',
+            '#FBBD08',
+            '#B5CC18',
+            '#F2711C',
+            '#00B5AD',
+            '#2185D0',
+            '#6435C9',
+            '#A333C8',
+            '#E03997',
+        ];
+
+        let colorId = 1;
+
+
+        canvas.addEventListener("mousedown", function (e) {
+            drawing = true;
+            colorId = document.querySelector('input[name="color"]:checked').value;
+        }, false);
+
+        canvas.addEventListener("mouseup", function (e) {
+            drawing = false;
+        }, false);
+
+        canvas.addEventListener("mousemove", function (e) {
+            //console.log(e);
+
+            var rect = canvas.getBoundingClientRect();
+
+            let x = e.clientX - rect.left;
+            let y = e.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);
+                //ctx.fillRect(x, y, 10, 10);
+            }
+        });
+
+        demo.on("Drawn", (pt) => {
+            ctx.fillStyle = colors[pt.Color];
+            ctx.beginPath();
+            ctx.arc(pt.X * 4, pt.Y * 4, 8, 0, 2 * Math.PI);
+            ctx.fill();
+        });
+
+        demo.on("Cleared", () => {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+        });
+
+        for (var x = 0; x < demo.Points.length; x++)
+            for (var y = 0; y < demo.Points[x].length; y++) {
+                ctx.fillStyle = colors[demo.Points[x][y]];
+                ctx.beginPath();
+                ctx.arc(x * 4, y * 4, 8, 0, 2 * Math.PI);
+                ctx.fill();
+            }
+     }
     catch (ex)
     {
         alert(ex);
@@ -18,3 +99,5 @@ async function init() {
 
 
 const FORMAT_CONNECTION_STATUS = (x) => ["Offline", "Connecting...", "Online"][x];
+
+