move with right btn, add fullscreen btn, index

files/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

webserver.py

@@ -523,11 +523,12 @@ class Server:
                     DrawingHandler,
                     {"config": self.config, "index": self.index},
                 ),
-                (r"/(.+)", StaticFileWithHeaderHandler,
-                 {"path": self.web_root}),
 
-                (r"/", IndexHandler,
+                (r"/index", IndexHandler,
                  {"config": self.config, "index": self.index}),
+
+                (r"/(.*)", StaticFileWithHeaderHandler,
+                 {"path": self.web_root, 'default_filename': 'index.html'}),
             ],
             debug=True,
             autoreload=True,

www/draw.html

@@ -7,6 +7,9 @@
 	<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
 	<title>Draw a line animation</title>
 	<style media="screen">
+		body{
+			background:black;
+		}
 		#sample,
 		svg {
 			position: absolute;
@@ -89,6 +92,7 @@
 			left: 0;
 			width: 100%;
 			height: 100%;
+			background:white;
 		}
 
 		#info {
@@ -150,7 +154,7 @@
 			bottom: 0;
 			left: 0;
 			color: gray;
-			z-index: -1;
+			z-index: 1;
 			font-size: 8pt;
 		}
 
@@ -162,6 +166,24 @@
 			cursor: wait;
 			pointer-events: none;
 		}
+
+		.button-fullscreen{
+			display: block;
+			cursor:pointer;
+			position: absolute;
+			bottom: 50px;
+			left: calc(50% - 200px);
+			width: 400px;
+			border-radius: 50px;
+			background:black; color:white;
+			text-align: center;
+			line-height: 2;
+			font-size: 40px;
+			z-index: 10;
+		}
+		body.fullscreen .button-fullscreen{
+			display:none;
+		}
 	</style>
 </head>
 

www/draw.js

@@ -25,6 +25,7 @@
 class Canvas {
     constructor(wrapperEl, preload_id) {
         this.allowDrawing = false;
+        this.socket = null; // don't initialise right away
         this.viewbox = { "x": 0, "y": 0, "width": null, "height": null };
         this.url = window.location.origin.replace('http', 'ws') + '/ws?' + window.location.search.substring(1);
 
@@ -44,6 +45,22 @@ class Canvas {
         this.wrapperEl.appendChild(this.filenameEl);
 
 
+        this.fullscreenEl = document.createElement('div');
+        this.fullscreenEl.classList.add('button-fullscreen');
+        this.fullscreenEl.innerText = "Fullscreen";
+        this.wrapperEl.appendChild(this.fullscreenEl);
+        this.fullscreenEl.addEventListener('click', (e) => {
+            document.body.requestFullscreen();
+        });
+        document.body.addEventListener('fullscreenchange', (e) => {
+            if (document.fullscreenElement) {
+                document.body.classList.add('fullscreen');
+            } else {
+                document.body.classList.remove('fullscreen');
+            }
+        })
+
+
         this.colors = ["black", "red", "blue", "green"];
 
         this.resize();
@@ -64,7 +81,7 @@ class Canvas {
         document.body.addEventListener('pointermove', (ev) => {
             ev.stopPropagation();
             ev.preventDefault();
-            if (ev.pointerType == "touch" || ev.buttons & 4) { // 4: middle mouse button
+            if (ev.pointerType == "touch" || ev.buttons & 2) { // 4: middle mouse button
                 this.moveCanvas(ev);
             } else { // pointerType == pen or mouse
                 this.draw(ev);
@@ -74,7 +91,7 @@ class Canvas {
             ev.stopPropagation();
             ev.preventDefault();
 
-            if (ev.pointerType == "touch" || ev.buttons & 4 || this.isMoving) { // buttons is 0 on pointerup
+            if (ev.pointerType == "touch" || ev.buttons & 2 || this.isMoving) { // buttons is 0 on pointerup
                 this.endMoveCanvas(ev);
                 this.isMoving = false;
             } else { // pointerType == pen or mouse
@@ -82,13 +99,17 @@ class Canvas {
                 this.penup(ev);
             }
         });
+        this.svgEl.addEventListener('contextmenu', function (e) {
+            // do something here... 
+            e.preventDefault();
+        }, false);
         this.svgEl.addEventListener('pointerdown', (ev) => {
             ev.stopPropagation();
             ev.preventDefault();
-            if (ev.pointerType == "touch" || ev.buttons & 4) { // 4: middle mouse button
+            if (ev.pointerType == "touch" || ev.buttons & 2) { // 4: middle mouse button, 2; right mouse button
                 this.isMoving = true;
                 this.startMoveCanvas(ev);
-            } else if(ev.buttons & 1) { // pointerType == pen or mouse
+            } else if (ev.buttons & 1) { // pointerType == pen or mouse
                 this.startStroke(ev);
             }
         });
@@ -100,13 +121,7 @@ class Canvas {
 
         this.socket = new WebSocket(this.url);
         this.socket.addEventListener('open', (e) => {
-            const d = {
+            this.sendDimensions();
-                'event': 'dimensions',
-                'width': this.viewbox.width,
-                'height': this.viewbox.height
-            };
-            console.log('send', d);
-            this.socket.send(JSON.stringify(d));
 
             if (preload_id) {
                 // signal if we want to continue from an existing drawing
@@ -115,7 +130,7 @@ class Canvas {
                     'file': preload_id,
                 }));
             }
-        })
+        });
         this.socket.addEventListener('message', (e) => {
             let msg = JSON.parse(e.data);
             console.log('receive', msg);
@@ -126,7 +141,7 @@ class Canvas {
             }
             if (msg.hasOwnProperty('preloaded_svg')) {
                 console.log('preloaded', msg);
-                if(msg.dimensions[0] != this.viewbox.width || msg.dimensions[1] != this.viewbox.height){
+                if (msg.dimensions[0] != this.viewbox.width || msg.dimensions[1] != this.viewbox.height) {
                     alert(`Loading file with different dimensions. This can lead to odd results. Original: ${msg.dimensions[0]}x${msg.dimensions[1]} Now: ${this.viewbox.width}x${this.viewbox.height}`)
                 }
                 this.setPreloaded(msg.preloaded_svg);
@@ -206,7 +221,6 @@ class Canvas {
             colorEl.addEventListener('click', (e) => {
                 console.log('set color', color)
                 this.setColor(color);
-
             })
 
             colorsEl.appendChild(colorEl);
@@ -232,6 +246,24 @@ class Canvas {
         this.viewbox.height = window.innerHeight;
 
         this.applyViewBox();
+        this.sendDimensions();
+    }
+
+    sendDimensions() {
+        const d = {
+            'event': 'dimensions',
+            'width': this.viewbox.width,
+            'height': this.viewbox.height
+        };
+        if (this.socket === null) {
+            // ignore ...
+        } else if (this.socket.readyState) {
+            this.socket.send(JSON.stringify(d));
+        } else {
+            this.socket.addEventListener('open', (ev) => {
+                this.socket.send(JSON.stringify(d));
+            })
+        }
     }
 
     applyViewBox() {