Better drag/pan

.gitignore

@@ -1 +1,3 @@
 server/images
+doca.txt
+data/

client/cursor.js

@@ -3,6 +3,7 @@ function on_down(e) {
         elements.cursor.classList.add('dhide');
         elements.canvas0.classList.add('moving');
         storage.state.moving = true;
+        storage.state.mousedown = true;
         return;
     }
 
@@ -11,6 +12,7 @@ function on_down(e) {
     }
 
     if (storage.state.moving) {
+        storage.state.mousedown = true;
         return;
     }
 
@@ -53,7 +55,7 @@ function on_move(e) {
         storage.current_stroke.push(predraw);
 
         fire_event(predraw);
-    } else if (storage.state.moving) {
+    } else if (storage.state.moving && storage.state.mousedown) {
         storage.canvas.offset_x -= e.movementX;
         storage.canvas.offset_y -= e.movementY;
         
@@ -71,10 +73,14 @@ function on_move(e) {
 }
 
 async function on_up(e) {
-    if (storage.state.moving && e.button === 1) {
-        elements.cursor.classList.remove('dhide');
-        elements.canvas0.classList.remove('moving');
-        storage.state.moving = false;
+    if (storage.state.moving && (e.button === 1 || e.button === 0)) {
+        storage.state.mousedown = false;
+        if (!storage.state.spacedown) {
+            elements.cursor.classList.remove('dhide');
+            elements.canvas0.classList.remove('moving');
+            storage.state.moving = false;
+            return;
+        }
     }
 
     if (storage.state.drawing && e.button === 0) {
@@ -82,6 +88,7 @@ async function on_up(e) {
         const event = stroke_event();
         storage.current_stroke = [];
         await queue_event(event);
+        return;
     }
 }
 
@@ -90,6 +97,7 @@ function on_keydown(e) {
         elements.cursor.classList.add('dhide');
         elements.canvas0.classList.add('moving');
         storage.state.moving = true;
+        storage.state.spacedown = true;
     }
 }
 
@@ -98,6 +106,7 @@ function on_keyup(e) {
         elements.cursor.classList.remove('dhide');
         elements.canvas0.classList.remove('moving');
         storage.state.moving = false;
+        storage.state.spacedown = false;
     }   
 }
 
@@ -106,6 +115,7 @@ function on_leave(e) {
         elements.cursor.classList.remove('dhide');
         elements.canvas0.classList.remove('moving');
         storage.state.moving = false;
+        storage.state.holding = false;
         return;
     }
 }

client/index.js

@@ -31,6 +31,8 @@ const storage = {
     'state': {
         'drawing': false,
         'moving': false,
+        'mousedown': false,
+        'spacedown': false,
     },
 
     'predraw': {},
@@ -47,8 +49,8 @@ const storage = {
     'desk_id': 123,
 
     'canvas': {
-        'width': 2000,
-        'height': 2000,
+        'width': 4096,
+        'height': 4096,
         'offset_x': 0,
         'offset_y': 0,
     },

server/storage.js

@@ -109,7 +109,6 @@ export function startup() {
     const res5 = db.query('SELECT COUNT(id) as count FROM sessions').get();
     const res6 = db.query('SELECT COUNT(id) as count FROM images').get();
 
-
     queries.desks = db.query('SELECT id, sn FROM desks');
     queries.events = db.query('SELECT * FROM events');
     queries.sessions = db.query('SELECT id, lsn, user_id, desk_id FROM sessions');