diff --git a/files/.gitignore b/files/.gitignore
new file mode 100644
index 0000000..d6b7ef3
--- /dev/null
+++ b/files/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
diff --git a/log/.gitignore b/log/.gitignore
index d6b7ef3..c96a04f 100644
--- a/log/.gitignore
+++ b/log/.gitignore
@@ -1,2 +1,2 @@
*
-!.gitignore
+!.gitignore
\ No newline at end of file
diff --git a/webserver.py b/webserver.py
index 8ca6c01..1a1f4fd 100644
--- a/webserver.py
+++ b/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,
diff --git a/www/draw.html b/www/draw.html
index a400b09..c69586c 100644
--- a/www/draw.html
+++ b/www/draw.html
@@ -7,6 +7,9 @@
Draw a line animation
diff --git a/www/draw.js b/www/draw.js
index 793a14a..8302f7a 100644
--- a/www/draw.js
+++ b/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);
@@ -73,8 +90,8 @@ class Canvas {
document.body.addEventListener('pointerup', (ev) => {
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 = {
- 'event': 'dimensions',
- 'width': this.viewbox.width,
- 'height': this.viewbox.height
- };
- console.log('send', d);
- this.socket.send(JSON.stringify(d));
+ this.sendDimensions();
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() {