diff --git a/client/client_recv.js b/client/client_recv.js index 4c8f3d4..b0ede3b 100644 --- a/client/client_recv.js +++ b/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; } diff --git a/client/config.js b/client/config.js index d734aed..a0c1301 100644 --- a/client/config.js +++ b/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, diff --git a/client/default.css b/client/default.css index 4dbd91c..c110912 100644 --- a/client/default.css +++ b/client/default.css @@ -362,6 +362,10 @@ canvas.mousemoving { .phone-extra-controls { display: flex; } + + .brush-dom { + display: none; + } } .offline-toast { diff --git a/client/index.js b/client/index.js index ce08561..0c746b4 100644 --- a/client/index.js +++ b/client/index.js @@ -124,7 +124,6 @@ async function main() { 'server_lsn': 0, 'touch': { - 'moves': 0, 'drawing': false, 'moving': false, 'erasing': false, diff --git a/client/touch.css b/client/touch.css deleted file mode 100644 index 63f9a49..0000000 --- a/client/touch.css +++ /dev/null @@ -1,5 +0,0 @@ -@media (pointer:none), (pointer:coarse) { - .tool:hover { - background: #333; - } -} \ No newline at end of file diff --git a/client/webgl_geometry.js b/client/webgl_geometry.js index ebfb8b7..85df64e 100644 --- a/client/webgl_geometry.js +++ b/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; diff --git a/client/webgl_listeners.js b/client/webgl_listeners.js index fb15663..f92df3c 100644 --- a/client/webgl_listeners.js +++ b/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; }