From 8b4b4e09f7edfb57e66a7080370741fc21272247 Mon Sep 17 00:00:00 2001 From: "A.Olokhtonov" Date: Sun, 30 Jun 2024 15:11:25 +0300 Subject: [PATCH] Basic line drawing is back IN --- README.txt | 3 +++ client/index.js | 2 ++ client/tools.js | 2 +- client/webgl_geometry.js | 4 ++-- client/webgl_listeners.js | 25 +++++++++++++++++++++++-- 5 files changed, 31 insertions(+), 5 deletions(-) diff --git a/README.txt b/README.txt index b36a37a..70bcf82 100644 --- a/README.txt +++ b/README.txt @@ -42,11 +42,14 @@ Release: + Dynamic svg cursor to represent the brush + Eraser * Line drawing + - Live preview + - Alignment (horizontal, vertical, diagonal, etc) + Undo - Undo for images (add, move, scale) - Undo for eraser - Redo - Snapping to grid + - Snapping to other points? * Polish + Use typedvector where appropriate - Show what's happening while the desk is loading (downloading, processing, uploading to gpu) diff --git a/client/index.js b/client/index.js index aabf941..8944311 100644 --- a/client/index.js +++ b/client/index.js @@ -180,9 +180,11 @@ async function main() { 'zoomdown': false, 'imagemoving': false, 'imagescaling': false, + 'linedrawing': false, 'active_image': null, 'scaling_corner': null, + 'ruler_origin': null, 'current_strokes': {}, diff --git a/client/tools.js b/client/tools.js index 57de4e7..d74c083 100644 --- a/client/tools.js +++ b/client/tools.js @@ -21,7 +21,7 @@ function switch_tool(state, item) { document.querySelector('canvas').classList.add(new_class); - if (tool === 'pencil' || tool === 'eraser') { + if (tool === 'pencil' || tool === 'eraser' || tool === 'ruler') { update_cursor(state); document.querySelector('.brush-dom').classList.remove('dhide'); } else { diff --git a/client/webgl_geometry.js b/client/webgl_geometry.js index f5c5e8d..c614703 100644 --- a/client/webgl_geometry.js +++ b/client/webgl_geometry.js @@ -139,7 +139,7 @@ function recompute_dynamic_data(state, context) { context.dynamic_stroke_count = total_strokes; } -function geometry_add_point(state, context, player_id, point, is_pen) { +function geometry_add_point(state, context, player_id, point, is_pen, raw = false) { if (!state.online) return; const player = state.players[player_id]; @@ -149,7 +149,7 @@ function geometry_add_point(state, context, player_id, point, is_pen) { point.pressure = config.min_pressure; } - if (points.length > 0) { + if (points.length > 0 && !raw) { // pulled from "perfect-freehand" package. MIT // https://github.com/steveruizok/perfect-freehand/ const streamline = 0.5; diff --git a/client/webgl_listeners.js b/client/webgl_listeners.js index 5a714c9..80e7101 100644 --- a/client/webgl_listeners.js +++ b/client/webgl_listeners.js @@ -213,7 +213,8 @@ function mousedown(e, state, context) { schedule_draw(state, context); } else if (state.tools.active === 'ruler') { - + state.linedrawing = true; + state.ruler_origin = canvasp; } else if (state.tools.active === 'eraser') { state.erasing = true; } else if (state.tools.active === 'pointer') { @@ -412,6 +413,19 @@ function mousemove(e, state, context) { } } + if (state.linedrawing) { + // TODO: we should do something different when we allow multiple dynamic strokes per player + geometry_clear_player(state, context, state.me); + + const p1 = {'x': state.ruler_origin.x, 'y': state.ruler_origin.y, 'pressure': 128}; + const p2 = {'x': canvasp.x, 'y': canvasp.y, 'pressure': 128}; + + geometry_add_point(state, context, state.me, p1, false, true); + geometry_add_point(state, context, state.me, p2, false, true); + + do_draw = true; + } + if (do_draw) { schedule_draw(state, context); } @@ -482,6 +496,13 @@ function mouseup(e, state, context) { state.erasing = false; return; } + + if (state.linedrawing) { + state.linedrawing = false; + queue_event(state, stroke_event(state)); + schedule_draw(state, context); + return; + } } function mouseleave(e, state, context) { @@ -507,7 +528,7 @@ function update_cursor(state) { let svg; - if (state.tools.active === 'pencil') { + if (state.tools.active === 'pencil' || state.tools.active === 'ruler') { const current_color = color_from_u32(me.color); const stroke = (me.color === 0xFFFFFF ? 'black' : 'white');