Basic line drawing is back IN

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)

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': {},
 

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 {

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;

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');