From e154204b3af7857cdae582270dc7bbe66f051601 Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Fri, 23 Apr 2021 08:20:18 +0300 Subject: [PATCH 01/11] Update pencil_brush.class.js --- src/brushes/pencil_brush.class.js | 45 ++++++++++++++++++++++++++++++- 1 file changed, 44 insertions(+), 1 deletion(-) diff --git a/src/brushes/pencil_brush.class.js b/src/brushes/pencil_brush.class.js index cfafb28c0f9..515f0d012ed 100644 --- a/src/brushes/pencil_brush.class.js +++ b/src/brushes/pencil_brush.class.js @@ -13,6 +13,15 @@ */ decimate: 0.4, + /** + * Draws a straight line between last recorded point to current pointer + * Used for `shift` functionality + * + * @type boolean + * @default false + */ + drawStraightLine: false, + /** * Constructor * @param {fabric.Canvas} canvas @@ -21,6 +30,37 @@ initialize: function(canvas) { this.canvas = canvas; this._points = []; + this._detach = this._attachKeyboardListeners(); + }, + + /** + * Listens to `shift` key press + * @private + * @returns disposer + */ + _attachKeyboardListeners: function () { + var _this = this; + var keyboardDown = function (e) { + if (e.shiftKey) { + e.preventDefault(); + _this.straightMode = true; + } + }; + var keyboardUp = function () { + _this.straightMode = false; + }; + + window.addEventListener('keydown', keyboardDown); + window.addEventListener('keyup', keyboardUp); + + return function disposer() { + window.removeEventListener('keydown', keyboardDown); + window.removeEventListener('keyup', keyboardUp); + }; + }, + + needsFullRender: function () { + return this.callSuper("needsFullRender") || this.drawStraightLine; }, /** @@ -114,6 +154,9 @@ if (this._points.length > 1 && point.eq(this._points[this._points.length - 1])) { return false; } + if (this.drawStraightLine && this._points.length > 1) { + this._points.pop(); + } this._points.push(point); return true; }, @@ -246,7 +289,7 @@ var zoom = this.canvas.getZoom(), adjustedDistance = Math.pow(distance / zoom, 2), i, l = points.length - 1, lastPoint = points[0], newPoints = [lastPoint], cDistance; - for (i = 1; i < l; i++) { + for (i = 1; i <= l; i++) { cDistance = Math.pow(lastPoint.x - points[i].x, 2) + Math.pow(lastPoint.y - points[i].y, 2); if (cDistance >= adjustedDistance) { lastPoint = points[i]; From 5ce7fb1b875f1661855ee009b5920f810adcdb0f Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Fri, 23 Apr 2021 08:41:47 +0300 Subject: [PATCH 02/11] finalize --- src/brushes/pencil_brush.class.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/brushes/pencil_brush.class.js b/src/brushes/pencil_brush.class.js index 515f0d012ed..b23c7510c96 100644 --- a/src/brushes/pencil_brush.class.js +++ b/src/brushes/pencil_brush.class.js @@ -43,11 +43,11 @@ var keyboardDown = function (e) { if (e.shiftKey) { e.preventDefault(); - _this.straightMode = true; + _this.drawStraightLine = true; } }; var keyboardUp = function () { - _this.straightMode = false; + _this.drawStraightLine = false; }; window.addEventListener('keydown', keyboardDown); @@ -60,7 +60,7 @@ }, needsFullRender: function () { - return this.callSuper("needsFullRender") || this.drawStraightLine; + return this.callSuper("needsFullRender") || this._hasStraightLine; }, /** @@ -155,6 +155,7 @@ return false; } if (this.drawStraightLine && this._points.length > 1) { + this._hasStraightLine = true; this._points.pop(); } this._points.push(point); From 5e17da260060ab62a817269d8830ee9ebae8b92d Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Fri, 23 Apr 2021 08:43:06 +0300 Subject: [PATCH 03/11] Update pencil_brush.class.js --- src/brushes/pencil_brush.class.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/brushes/pencil_brush.class.js b/src/brushes/pencil_brush.class.js index b23c7510c96..ebf4c81c7bf 100644 --- a/src/brushes/pencil_brush.class.js +++ b/src/brushes/pencil_brush.class.js @@ -16,6 +16,7 @@ /** * Draws a straight line between last recorded point to current pointer * Used for `shift` functionality + * In order to override the `shift` functionality call `brush._detach()` * * @type boolean * @default false From a62ede8274064164236bbcb95e93519ebc27a342 Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Fri, 23 Apr 2021 08:46:34 +0300 Subject: [PATCH 04/11] jsdoc --- src/brushes/pencil_brush.class.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/brushes/pencil_brush.class.js b/src/brushes/pencil_brush.class.js index ebf4c81c7bf..084525fedb1 100644 --- a/src/brushes/pencil_brush.class.js +++ b/src/brushes/pencil_brush.class.js @@ -16,7 +16,11 @@ /** * Draws a straight line between last recorded point to current pointer * Used for `shift` functionality - * In order to override the `shift` functionality call `brush._detach()` + * In order to override the `shift: + * @example Override `shift` functionality + * brush._detach(); + * @example Restore `shift` functionality + * brush._attachKeyboardListeners(); * * @type boolean * @default false From 3b2df80d4d90793a69dd56489f0bb858c8798081 Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Fri, 23 Apr 2021 09:05:05 +0300 Subject: [PATCH 05/11] reset `_hasStraightLine` --- src/brushes/pencil_brush.class.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/brushes/pencil_brush.class.js b/src/brushes/pencil_brush.class.js index 084525fedb1..67aad59ac51 100644 --- a/src/brushes/pencil_brush.class.js +++ b/src/brushes/pencil_brush.class.js @@ -175,6 +175,7 @@ this._points = []; this._setBrushStyles(); this._setShadow(); + this._hasStraightLine = false; }, /** From f5f15b7661c031c33a220b4131a7480db4347bfe Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Fri, 23 Apr 2021 09:09:10 +0300 Subject: [PATCH 06/11] better detach logic --- src/brushes/pencil_brush.class.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/brushes/pencil_brush.class.js b/src/brushes/pencil_brush.class.js index 67aad59ac51..56849308849 100644 --- a/src/brushes/pencil_brush.class.js +++ b/src/brushes/pencil_brush.class.js @@ -35,7 +35,7 @@ initialize: function(canvas) { this.canvas = canvas; this._points = []; - this._detach = this._attachKeyboardListeners(); + this._attachKeyboardListeners(); }, /** @@ -57,11 +57,11 @@ window.addEventListener('keydown', keyboardDown); window.addEventListener('keyup', keyboardUp); - - return function disposer() { + this._detach = function disposer() { window.removeEventListener('keydown', keyboardDown); window.removeEventListener('keyup', keyboardUp); }; + return this._detach; }, needsFullRender: function () { From 21aa5094fbf1c59b8b5a034918de85c7a017137a Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Fri, 23 Apr 2021 09:16:48 +0300 Subject: [PATCH 07/11] Update pencil_brush.class.js --- src/brushes/pencil_brush.class.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/brushes/pencil_brush.class.js b/src/brushes/pencil_brush.class.js index 56849308849..03c78f18325 100644 --- a/src/brushes/pencil_brush.class.js +++ b/src/brushes/pencil_brush.class.js @@ -16,7 +16,7 @@ /** * Draws a straight line between last recorded point to current pointer * Used for `shift` functionality - * In order to override the `shift: + * * @example Override `shift` functionality * brush._detach(); * @example Restore `shift` functionality From ed43f4385a851486000c2ae7ce2ad35d701ecc35 Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Thu, 27 May 2021 09:56:46 +0300 Subject: [PATCH 08/11] _attachKeyboardListeners: listen to canvas events rather than window events resolves https://github.com/fabricjs/fabric.js/pull/7034#discussion_r624685265 --- src/brushes/pencil_brush.class.js | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/src/brushes/pencil_brush.class.js b/src/brushes/pencil_brush.class.js index 03c78f18325..d2f5109d359 100644 --- a/src/brushes/pencil_brush.class.js +++ b/src/brushes/pencil_brush.class.js @@ -45,21 +45,24 @@ */ _attachKeyboardListeners: function () { var _this = this; - var keyboardDown = function (e) { - if (e.shiftKey) { - e.preventDefault(); + var setShift = function (opt) { + if (opt.e.shiftKey) { + opt.e.preventDefault(); _this.drawStraightLine = true; + } else { + _this.drawStraightLine = false; } }; - var keyboardUp = function () { + var revokeShift = function () { _this.drawStraightLine = false; }; - - window.addEventListener('keydown', keyboardDown); - window.addEventListener('keyup', keyboardUp); + this.canvas.on('mouse:down', setShift); + this.canvas.on('mouse:move', setShift); + this.canvas.on('mouse:up', revokeShift); this._detach = function disposer() { - window.removeEventListener('keydown', keyboardDown); - window.removeEventListener('keyup', keyboardUp); + this.canvas.off('mouse:down', setShift); + this.canvas.off('mouse:move', setShift); + this.canvas.off('mouse:up', revokeShift); }; return this._detach; }, From 2c1b483c479d1da86a131e65952758a5d23a7166 Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Thu, 27 May 2021 09:57:35 +0300 Subject: [PATCH 09/11] lint --- src/brushes/pencil_brush.class.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/brushes/pencil_brush.class.js b/src/brushes/pencil_brush.class.js index d2f5109d359..0779c0a3f8f 100644 --- a/src/brushes/pencil_brush.class.js +++ b/src/brushes/pencil_brush.class.js @@ -16,12 +16,12 @@ /** * Draws a straight line between last recorded point to current pointer * Used for `shift` functionality - * + * * @example Override `shift` functionality * brush._detach(); * @example Restore `shift` functionality * brush._attachKeyboardListeners(); - * + * * @type boolean * @default false */ @@ -49,7 +49,8 @@ if (opt.e.shiftKey) { opt.e.preventDefault(); _this.drawStraightLine = true; - } else { + } + else { _this.drawStraightLine = false; } }; @@ -68,7 +69,7 @@ }, needsFullRender: function () { - return this.callSuper("needsFullRender") || this._hasStraightLine; + return this.callSuper('needsFullRender') || this._hasStraightLine; }, /** From 54f4272aca08187618ade6ed8539cf763678378d Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Wed, 4 Aug 2021 13:04:12 +0300 Subject: [PATCH 10/11] Update pencil_brush.class.js --- src/brushes/pencil_brush.class.js | 46 +++++++------------------------ 1 file changed, 10 insertions(+), 36 deletions(-) diff --git a/src/brushes/pencil_brush.class.js b/src/brushes/pencil_brush.class.js index 0779c0a3f8f..0b04c9a1c34 100644 --- a/src/brushes/pencil_brush.class.js +++ b/src/brushes/pencil_brush.class.js @@ -17,16 +17,18 @@ * Draws a straight line between last recorded point to current pointer * Used for `shift` functionality * - * @example Override `shift` functionality - * brush._detach(); - * @example Restore `shift` functionality - * brush._attachKeyboardListeners(); - * * @type boolean * @default false */ drawStraightLine: false, + /** + * The event modifier key that makes the brush draw a straight line. + * If `null` or 'none' or any other string that is not a modifier key the feature is disabled. + * @type {'altKey' | 'shiftKey' | 'ctrlKey' | 'none' | undefined | null} + */ + straightLineKey: 'shiftKey', + /** * Constructor * @param {fabric.Canvas} canvas @@ -35,37 +37,6 @@ initialize: function(canvas) { this.canvas = canvas; this._points = []; - this._attachKeyboardListeners(); - }, - - /** - * Listens to `shift` key press - * @private - * @returns disposer - */ - _attachKeyboardListeners: function () { - var _this = this; - var setShift = function (opt) { - if (opt.e.shiftKey) { - opt.e.preventDefault(); - _this.drawStraightLine = true; - } - else { - _this.drawStraightLine = false; - } - }; - var revokeShift = function () { - _this.drawStraightLine = false; - }; - this.canvas.on('mouse:down', setShift); - this.canvas.on('mouse:move', setShift); - this.canvas.on('mouse:up', revokeShift); - this._detach = function disposer() { - this.canvas.off('mouse:down', setShift); - this.canvas.off('mouse:move', setShift); - this.canvas.off('mouse:up', revokeShift); - }; - return this._detach; }, needsFullRender: function () { @@ -90,6 +61,7 @@ if (!this.canvas._isMainEvent(options.e)) { return; } + this.drawStraightLine = options.e[this.straightLineKey]; this._prepareForDrawing(pointer); // capture coordinates immediately // this allows to draw dots (when movement never occurs) @@ -105,6 +77,7 @@ if (!this.canvas._isMainEvent(options.e)) { return; } + this.drawStraightLine = options.e[this.straightLineKey]; if (this.limitedToCanvasSize === true && this._isOutSideCanvas(pointer)) { return; } @@ -137,6 +110,7 @@ if (!this.canvas._isMainEvent(options.e)) { return true; } + this.drawStraightLine = options.e[this.straightLineKey]; this.oldEnd = undefined; this._finalizeAndAddPath(); return false; From 16fd4e5b3a29550bcb5d5e9aba516b268367fdfd Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Wed, 4 Aug 2021 14:08:34 +0300 Subject: [PATCH 11/11] Update pencil_brush.class.js --- src/brushes/pencil_brush.class.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/brushes/pencil_brush.class.js b/src/brushes/pencil_brush.class.js index 0b04c9a1c34..09e9ee12d47 100644 --- a/src/brushes/pencil_brush.class.js +++ b/src/brushes/pencil_brush.class.js @@ -110,7 +110,7 @@ if (!this.canvas._isMainEvent(options.e)) { return true; } - this.drawStraightLine = options.e[this.straightLineKey]; + this.drawStraightLine = false; this.oldEnd = undefined; this._finalizeAndAddPath(); return false;