Fix drawing of a point (fabricjs#4492)

* initialize at 1

* added tests

* added test file

src/brushes/pencil_brush.class.js

@@ -145,7 +145,7 @@
       var path = [], i, width = this.width / 1000,
           p1 = new fabric.Point(points[0].x, points[0].y),
           p2 = new fabric.Point(points[1].x, points[1].y),
-          len = points.length, multSignX, multSignY, manyPoints = len > 2;
+          len = points.length, multSignX = 1, multSignY = 1, manyPoints = len > 2;
 
       if (manyPoints) {
         multSignX = points[2].x < p2.x ? -1 : points[2].x === p2.x ? 0 : 1;

test.js

@@ -26,6 +26,7 @@ testrunner.run({
       './test/unit/object.js',
       './test/unit/text.js',
       './test/unit/util.js',
+      './test/unit/brushes.js',
       './test/unit/image.js',
       './test/unit/image_filters.js',
       './test/unit/group.js',
@@ -45,7 +46,7 @@ testrunner.run({
       './test/unit/point.js',
       './test/unit/intersection.js',
       './test/unit/stateful.js'
-    ]
+    ],
 }, function(err, report) {
   if (err) {
     console.log(err);

test/unit/brushes.js

@@ -0,0 +1,75 @@
+(function() {
+  var canvas = new fabric.Canvas();
+  QUnit.module('fabric.BaseBrush');
+  QUnit.test('fabric brush constructor', function(assert) {
+    assert.ok(fabric.BaseBrush);
+
+    var brush = new fabric.BaseBrush();
+
+    assert.ok(brush instanceof fabric.BaseBrush, 'should inherit from fabric.BaseBrush');
+    assert.equal(brush.color, 'rgb(0, 0, 0)', 'default color is black');
+    assert.equal(brush.width, 1, 'default width is 1');
+    assert.ok(typeof brush.setShadow === 'function', 'setShadow is a method');
+  });
+  QUnit.test('fabric pencil brush constructor', function(assert) {
+    assert.ok(fabric.PencilBrush);
+    var brush = new fabric.PencilBrush(canvas);
+    assert.equal(brush.canvas, canvas, 'assigns canvas');
+    assert.deepEqual(brush._points, [], 'points is an empty array');
+  });
+  QUnit.test('fabric pencil brush draw point', function(assert) {
+    var brush = new fabric.PencilBrush(canvas);
+    var pointer = canvas.getPointer({ clientX: 10, clientY: 10});
+    brush.onMouseDown(pointer);
+    var pathData = brush.convertPointsToSVGPath(brush._points).join('');
+    assert.equal(pathData, 'M 9.999 9.999 L 10.001 10.001', 'path data create a small line that looks like a point');
+  });
+  QUnit.test('fabric pencil brush multiple points', function(assert) {
+    var brush = new fabric.PencilBrush(canvas);
+    var pointer = canvas.getPointer({ clientX: 10, clientY: 10});
+    brush.onMouseDown(pointer);
+    brush.onMouseMove(pointer);
+    brush.onMouseMove(pointer);
+    brush.onMouseMove(pointer);
+    brush.onMouseMove(pointer);
+    var pathData = brush.convertPointsToSVGPath(brush._points).join('');
+    assert.equal(pathData, 'M 9.999 9.999 L 10.001 10.001', 'path data create a small line that looks like a point');
+    assert.equal(brush._points.length, 2, 'concident points are discarded');
+  });
+  QUnit.test('fabric pencil brush multiple points not discarded', function(assert) {
+    var brush = new fabric.PencilBrush(canvas);
+    var pointer = canvas.getPointer({ clientX: 10, clientY: 10});
+    var pointer2 = canvas.getPointer({ clientX: 15, clientY: 15});
+    var pointer3 = canvas.getPointer({ clientX: 20, clientY: 20});
+    brush.onMouseDown(pointer);
+    brush.onMouseMove(pointer2);
+    brush.onMouseMove(pointer3);
+    brush.onMouseMove(pointer2);
+    brush.onMouseMove(pointer3);
+    var pathData = brush.convertPointsToSVGPath(brush._points).join('');
+    assert.equal(pathData, 'M 9.999 9.999 Q 10 10 12.5 12.5 Q 15 15 17.5 17.5 Q 20 20 17.5 17.5 Q 15 15 17.5 17.5 L 20.001 20.001', 'path data create a complex path');
+    assert.equal(brush._points.length, 6, 'concident points are discarded');
+  });
+  QUnit.test('fabric pencil brush multiple points not discarded', function(assert) {
+    var fired = false;
+    var added = null;
+    canvas.on('path:created', function(opt) {
+      fired = true;
+      added = opt.path;
+    });
+    var brush = new fabric.PencilBrush(canvas);
+    var pointer = canvas.getPointer({ clientX: 10, clientY: 10});
+    var pointer2 = canvas.getPointer({ clientX: 15, clientY: 15});
+    var pointer3 = canvas.getPointer({ clientX: 20, clientY: 20});
+    brush.onMouseDown(pointer);
+    brush.onMouseMove(pointer2);
+    brush.onMouseMove(pointer3);
+    brush.onMouseMove(pointer2);
+    brush.onMouseMove(pointer3);
+    brush.onMouseUp(pointer3);
+    assert.equal(fired, true, 'event is fired');
+    assert.ok(added instanceof fabric.Path, 'a path is added');
+    assert.ok(added.path.length, 6, 'path has 6 steps');
+    canvas.off();
+  });
+})();