Panning and zooming with touch also works (more or less)

client/client_recv.js

@@ -222,7 +222,9 @@ function handle_event(state, context, event, options = {}) {
         }
 
         case EVENT.CLEAR: {
-            // TODO: @touch
+            // Clear oldest preview from player. This event is sent when stroke is cancelled 
+            geometry_clear_oldest_prestroke(state, context, event.user_id);
+            need_draw = true;
             break;
         }
 

client/config.js

@@ -6,7 +6,6 @@ const config = {
     ws_reconnect_timeout: 2000,
     brush_preview_timeout: 1000,
     second_finger_timeout: 500,
-    buffer_first_touchmoves: 5,
     debug_print: false,
     draw_bvh: false,
     draw_fullnodes: false,

client/default.css

@@ -362,6 +362,10 @@ canvas.mousemoving {
     .phone-extra-controls {
         display: flex;
     }
+
+    .brush-dom {
+        display: none;
+    }
 }
 
 .offline-toast {

client/index.js

@@ -124,7 +124,6 @@ async function main() {
         'server_lsn': 0,
 
         'touch': {
-            'moves': 0,
             'drawing': false,
             'moving': false,
             'erasing': false,

client/touch.css

@@ -1,5 +0,0 @@
-@media (pointer:none), (pointer:coarse)  {
-    .tool:hover {
-        background: #333;
-    }
-}

client/webgl_geometry.js

@@ -253,6 +253,15 @@ function geometry_clear_oldest_prestroke(state, context, player_id) {
     recompute_dynamic_data(state, context);
 }
 
+function geometry_clear_newest_prestroke(state, context, player_id) {
+    if (!state.online) return;
+
+    const player = state.players[player_id];
+    player.strokes.pop();
+
+    recompute_dynamic_data(state, context);
+}
+
 function add_image(context, image_id, bitmap, p, width, height) {
     const gl = context.gl;
     let entry = null;

client/webgl_listeners.js

@@ -666,6 +666,7 @@ function touchstart(e, state, context) {
         canvasp.pressure = 128; // TODO: check out touch devices' e.pressure
         geometry_start_prestroke(state, state.me);
         geometry_add_prepoint(state, context, state.me, canvasp, e.pointerType === "pen");
+        state.touch.waiting_for_second_finger = true;
         setTimeout(() => {
             state.touch.waiting_for_second_finger = false;
         }, config.second_finger_timeout);
@@ -676,7 +677,7 @@ function touchstart(e, state, context) {
             'y': screenp.y,
         });
         
-        // TODO: @touch, remove preview
+        geometry_clear_newest_prestroke(state, context, state.me);
         fire_event(state, clear_event(state)); // Tell others to hide predraws of this stroke
         state.touch.drawing = false;
         state.touch.moving = true;
@@ -695,13 +696,6 @@ function touchmove(e, state, context) {
         const screenp = {'x': window.devicePixelRatio * e.clientX, 'y': window.devicePixelRatio * e.clientY};
         const canvasp = screen_to_canvas(state, screenp);
 
-        state.touch.moves += 1;
-
-        if (state.touch.moves > config.buffer_first_touchmoves) {
-            // At this point touch with second finger will NOT start a pan
-            state.touch.waiting_for_second_finger = false;
-        }
-
         canvasp.pressure = 128; // TODO: check out touch devices' e.pressure
         geometry_add_prepoint(state, context, state.me, canvasp, false);
         fire_event(state, predraw_event(canvasp.x, canvasp.y));
@@ -714,11 +708,14 @@ function touchmove(e, state, context) {
     if (state.touch.moving) {
         if (state.touch.events.length === 1) {
             // Simplified move with one finger
-            state.canvas.offset.x += e.movementX;
-            state.canvas.offset.y += e.movementY;
-
+            const old_f1 = {...state.touch.events[0]};
             state.touch.events[0].x = e.clientX * window.devicePixelRatio;        
-            state.touch.events[0].y = e.clientX * window.devicePixelRatio;        
+            state.touch.events[0].y = e.clientY * window.devicePixelRatio;        
+            const new_f1 = state.touch.events[0];
+            const dx = new_f1.x - old_f1.x;
+            const dy = new_f1.y - old_f1.y;
+            state.canvas.offset.x += dx;
+            state.canvas.offset.y += dy;
         } else {
             const old_f1 = {...state.touch.events[0]};
             const old_f2 = {...state.touch.events[1]};
@@ -757,9 +754,9 @@ function touchmove(e, state, context) {
             state.canvas.offset.y += dy;
 
             const scale_by = new_finger_distance / old_finger_distance;
-            const dz = state.canvas.zoom * (scale_by - 1.0);
+            const zc = old_finger_midpoint;
 
-            const zc = old_finger_midpoint_canvas;
+            state.canvas.zoom = state.canvas.target_zoom = old_zoom * scale_by;
             state.canvas.offset.x = zc.x - (zc.x - state.canvas.offset.x) * state.canvas.zoom / old_zoom;
             state.canvas.offset.y = zc.y - (zc.y - state.canvas.offset.y) * state.canvas.zoom / old_zoom;
         }