Skip to content

Commit cbf4849

Browse files
author
HarshKhandeparkar
committed
refactor<RealDrawBoard>: convert lastCoords
to a map to support touch
1 parent 39ec739 commit cbf4849

File tree

7 files changed

+95
-34
lines changed

7 files changed

+95
-34
lines changed

‎dist/gpujs-real-renderer-browser.js‎

Lines changed: 50 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1008,9 +1008,9 @@
10081008
}
10091009
exports._plot = _plot;
10101010
function _stroke(x, y) {
1011-
if (this._lastCoords === null)
1012-
this._lastCoords = [x, y];
1013-
this.graphPixels = this._strokeKernel(this._cloneTexture(this.graphPixels), this._lastCoords, [x, y], this.mode === 'paint' ? this.brushSize : this.eraserSize, this.mode === 'paint' ? this.brushColor : this.bgColor);
1011+
if (!this._lastCoords.has('mouse'))
1012+
this._lastCoords.set('mouse', [x, y]);
1013+
this.graphPixels = this._strokeKernel(this._cloneTexture(this.graphPixels), this._lastCoords.get('mouse'), [x, y], this.mode === 'paint' ? this.brushSize : this.eraserSize, this.mode === 'paint' ? this.brushColor : this.bgColor);
10141014
this._display(this.graphPixels);
10151015
}
10161016
exports._stroke = _stroke;
@@ -1031,11 +1031,11 @@
10311031
_this.brushColor = path.color;
10321032
_this.brushSize = path.brushSize;
10331033
_this.eraserSize = path.eraserSize;
1034-
_this._lastCoords = null;
1034+
_this._lastCoords.delete('mouse');
10351035
path.pathCoords.forEach(function (coord) {
10361036
if (coord[2] === false) {
10371037
_this._stroke(coord[0], coord[1]); // Replay all strokes
1038-
_this._lastCoords = [coord[0], coord[1]];
1038+
_this._lastCoords.set('mouse', [coord[0], coord[1]]);
10391039
}
10401040
else
10411041
_this._plot(coord[0], coord[1]);
@@ -1046,7 +1046,7 @@
10461046
this.brushSize = originalBrushSize;
10471047
this.eraserSize = originalEraserSize;
10481048
this._pathIndex -= numUndo;
1049-
this._lastCoords = null;
1049+
this._lastCoords.delete('mouse');
10501050
this._display(this.graphPixels);
10511051
if (this._isDrawing)
10521052
this.startRender();
@@ -1089,7 +1089,7 @@
10891089
this._strokeHappening = false;
10901090
this._drawnPaths = [];
10911091
this._pathIndex = -1;
1092-
this._lastCoords = null;
1092+
this._lastCoords.clear();
10931093
this.graphPixels = this._blankGraph();
10941094
this._display(this.graphPixels);
10951095
return this;
@@ -1107,7 +1107,7 @@
11071107
this._strokeHappening = false;
11081108
this._drawnPaths = [];
11091109
this._pathIndex = -1;
1110-
this._lastCoords = null;
1110+
this._lastCoords.clear();
11111111
this.stopRender();
11121112
}
11131113
exports._resetBoard = _resetBoard;
@@ -1151,18 +1151,17 @@
11511151
brushSize: this.brushSize,
11521152
eraserSize: this.eraserSize
11531153
};
1154-
this._lastCoords = coords;
1154+
this._lastCoords.set('mouse', coords);
11551155
}
11561156
exports._startStroke = _startStroke;
11571157
function _endStroke(endCoords) {
1158-
if (this._lastCoords[0] === endCoords[0] &&
1159-
this._lastCoords[1] === endCoords[1]) {
1158+
if (this._lastCoords.get('mouse')[0] === endCoords[0] &&
1159+
this._lastCoords.get('mouse')[1] === endCoords[1]) {
11601160
this._plot.apply(this, endCoords);
11611161
this._drawnPaths[this._pathIndex + 1].pathCoords.push(__spreadArrays(endCoords, [true]));
11621162
}
11631163
if (this._strokeHappening) {
1164-
this.canvas.removeEventListener('mousemove', this._mouseMoveEventListener);
1165-
this._lastCoords = null;
1164+
this._lastCoords.delete('mouse');
11661165
if (this._drawnPaths[this._pathIndex + 1].pathCoords.length === 0)
11671166
this._drawnPaths.splice(-1, 1);
11681167
else {
@@ -1177,14 +1176,14 @@
11771176
this._strokeHappening = true;
11781177
this._drawnPaths[this._pathIndex + 1].pathCoords.push(__spreadArrays(coords, [false]));
11791178
this._stroke.apply(this, coords);
1180-
this._lastCoords = coords;
1179+
this._lastCoords.set('mouse', coords);
11811180
}
11821181
exports._doStroke = _doStroke;
11831182
});
11841183

11851184
var _coords = createCommonjsModule(function (module, exports) {
11861185
Object.defineProperty(exports, "__esModule", { value: true });
1187-
exports._getMouseCoords = void 0;
1186+
exports._getTouchCoords = exports._getMouseCoords = void 0;
11881187
function _getMouseCoords(e) {
11891188
var x = e.offsetX; // in pixels
11901189
var y = this.dimensions[1] - e.offsetY; // in pixels
@@ -1193,6 +1192,19 @@
11931192
return [x, y]; // In graph coordinates
11941193
}
11951194
exports._getMouseCoords = _getMouseCoords;
1195+
function _getTouchCoords(e) {
1196+
var allCoords = [];
1197+
for (var i = 0; i < e.touches.length; i++) {
1198+
var touch = e.touches.item(i);
1199+
var x = touch.clientX - this.canvas.getBoundingClientRect().left;
1200+
var y = this.dimensions[1] - (touch.clientY - this.canvas.getBoundingClientRect().top);
1201+
x = x / this.xScaleFactor - (this.dimensions[0] * (this.yOffset / 100)) / this.xScaleFactor;
1202+
y = y / this.yScaleFactor - (this.dimensions[1] * (this.xOffset / 100)) / this.yScaleFactor;
1203+
allCoords.push([x, y]);
1204+
}
1205+
return allCoords;
1206+
}
1207+
exports._getTouchCoords = _getTouchCoords;
11961208
});
11971209

11981210
var RealDrawBoard_1 = createCommonjsModule(function (module, exports) {
@@ -1254,7 +1266,10 @@
12541266
_this._strokeHappening = false;
12551267
_this._drawnPaths = [];
12561268
_this._pathIndex = -1; // Index of path in _drawnPaths
1257-
_this._lastCoords = null;
1269+
/** key -> identifier, value -> coordinate
1270+
* For mouse, the key is 'mouse', for touches, stringified identifier -> https://developer.mozilla.org/en-US/docs/Web/API/Touch/identifier
1271+
*/
1272+
_this._lastCoords = new Map(); /* key -> identifier, value -> coordinate*/
12581273
_this._initializeKernels = _initializeKernels_1._initializeKernels;
12591274
_this._stroke = _draw._stroke;
12601275
_this._plot = _draw._plot;
@@ -1265,13 +1280,16 @@
12651280
_this._endStroke = stroke._endStroke;
12661281
_this._doStroke = stroke._doStroke;
12671282
_this._getMouseCoords = _coords._getMouseCoords;
1283+
_this._getTouchCoords = _coords._getTouchCoords;
12681284
_this.undo = undo_1.undo;
12691285
_this.redo = undo_1.redo;
12701286
_this.changeBrushColor = boardManip.changeBrushColor;
12711287
_this.changeBrushSize = boardManip.changeBrushSize;
12721288
_this.changeEraserSize = boardManip.changeEraserSize;
12731289
_this.changeMode = boardManip.changeMode;
12741290
_this.clear = boardManip.clear;
1291+
// --- DOM Event Listeners ---
1292+
// --- Mouse Events ---
12751293
_this._mouseDownEventListener = function (e) {
12761294
if (e.button === 0 /* Left Click */) {
12771295
_this.canvas.addEventListener('mousemove', _this._mouseMoveEventListener);
@@ -1282,10 +1300,12 @@
12821300
if (e.button === 0 /* Left Click */) {
12831301
var endCoords = _this._getMouseCoords(e);
12841302
_this._endStroke(endCoords);
1303+
if (!_this._strokeHappening)
1304+
_this.canvas.removeEventListener('mousemove', _this._mouseMoveEventListener);
12851305
}
12861306
};
12871307
_this._mouseEnterEventListener = function (e) {
1288-
_this._lastCoords = _this._getMouseCoords(e);
1308+
_this._lastCoords.set('mouse', _this._getMouseCoords(e));
12891309
};
12901310
_this._mouseLeaveEventListener = function (e) {
12911311
_this._endStroke(_this._getMouseCoords(e));
@@ -1294,6 +1314,17 @@
12941314
var coords = _this._getMouseCoords(e);
12951315
_this._doStroke(coords);
12961316
};
1317+
// --- Mouse Events ---
1318+
// --- Touch Events ---
1319+
_this._touchStartEventListener = function (e) {
1320+
// this.canvas.addEventListener();
1321+
};
1322+
_this._touchEndEventListener = function (e) {
1323+
var endCoords = _this._getTouchCoords(e)[0];
1324+
_this._endStroke(endCoords);
1325+
};
1326+
_this._touchMoveEventListener = function (e) {
1327+
};
12971328
options = __assign(__assign({}, RealDrawBoardDefaults.RealDrawBoardDefaults), options);
12981329
_this.options = options;
12991330
_this.brushSize = options.brushSize;
@@ -1304,6 +1335,8 @@
13041335
_this._initializeKernels();
13051336
return _this;
13061337
}
1338+
// --- Touch Events ---
1339+
// --- DOM Event Listeners ---
13071340
RealDrawBoard.prototype.startRender = function () {
13081341
this._addDOMEvents();
13091342
this._isDrawing = true;

‎dist/gpujs-real-renderer-browser.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/renderers/RealDrawBoard/RealDrawBoard.ts‎

Lines changed: 32 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,10 @@ import {
3030
_endStroke,
3131
_doStroke
3232
} from './stroke';
33-
import { _getMouseCoords } from './_coords';
33+
import {
34+
_getMouseCoords,
35+
_getTouchCoords
36+
} from './_coords';
3437

3538
export class RealDrawBoard extends RealRenderer {
3639
options: RealDrawBoardOptions;
@@ -50,7 +53,10 @@ export class RealDrawBoard extends RealRenderer {
5053
_pathIndex: number = -1; // Index of path in _drawnPaths
5154
_plotKernel: IKernelRunShortcut;
5255
_strokeKernel: IKernelRunShortcut;
53-
_lastCoords: null | [number, number] = null;
56+
/** key -> identifier, value -> coordinate
57+
* For mouse, the key is 'mouse', for touches, stringified identifier -> https://developer.mozilla.org/en-US/docs/Web/API/Touch/identifier
58+
*/
59+
_lastCoords: Map<string, [number, number]> = new Map(); /* key -> identifier, value -> coordinate*/
5460

5561
protected _initializeKernels = _initializeKernels;
5662
protected _stroke = _stroke;
@@ -62,6 +68,7 @@ export class RealDrawBoard extends RealRenderer {
6268
protected _endStroke = _endStroke;
6369
protected _doStroke = _doStroke;
6470
protected _getMouseCoords = _getMouseCoords;
71+
protected _getTouchCoords = _getTouchCoords;
6572

6673
public undo = undo;
6774
public redo = redo;
@@ -92,7 +99,9 @@ export class RealDrawBoard extends RealRenderer {
9299

93100
this._initializeKernels();
94101
}
102+
// --- DOM Event Listeners ---
95103

104+
// --- Mouse Events ---
96105
_mouseDownEventListener = (e: MouseEvent) => {
97106
if (e.button === 0 /* Left Click */) {
98107
this.canvas.addEventListener('mousemove', this._mouseMoveEventListener);
@@ -105,11 +114,13 @@ export class RealDrawBoard extends RealRenderer {
105114
if (e.button === 0 /* Left Click */) {
106115
const endCoords = this._getMouseCoords(e);
107116
this._endStroke(endCoords);
117+
118+
if (!this._strokeHappening) this.canvas.removeEventListener('mousemove', this._mouseMoveEventListener);
108119
}
109120
}
110121

111122
_mouseEnterEventListener = (e: MouseEvent) => {
112-
this._lastCoords = this._getMouseCoords(e);
123+
this._lastCoords.set('mouse', this._getMouseCoords(e));
113124
}
114125

115126
_mouseLeaveEventListener = (e: MouseEvent) => {
@@ -120,6 +131,24 @@ export class RealDrawBoard extends RealRenderer {
120131
const coords = this._getMouseCoords(e);
121132
this._doStroke(coords);
122133
}
134+
// --- Mouse Events ---
135+
136+
// --- Touch Events ---
137+
_touchStartEventListener = (e: TouchEvent) => {
138+
// this.canvas.addEventListener();
139+
}
140+
141+
_touchEndEventListener = (e: TouchEvent) => {
142+
const endCoords = this._getTouchCoords(e)[0];
143+
this._endStroke(endCoords);
144+
}
145+
146+
_touchMoveEventListener = (e: TouchEvent) => {
147+
148+
}
149+
// --- Touch Events ---
150+
151+
// --- DOM Event Listeners ---
123152

124153
startRender() {
125154
this._addDOMEvents();

‎src/renderers/RealDrawBoard/_draw.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,11 @@ export function _plot(this: RealDrawBoard, x: number, y: number) {
1616
}
1717

1818
export function _stroke(this: RealDrawBoard, x: number, y: number) {
19-
if (this._lastCoords === null) this._lastCoords = [x, y];
19+
if (!this._lastCoords.has('mouse')) this._lastCoords.set('mouse', [x, y]);
2020

2121
this.graphPixels = <Texture>this._strokeKernel(
2222
this._cloneTexture(this.graphPixels),
23-
this._lastCoords,
23+
this._lastCoords.get('mouse'),
2424
[x, y],
2525
this.mode === 'paint' ? this.brushSize : this.eraserSize,
2626
this.mode === 'paint' ? this.brushColor : this.bgColor

‎src/renderers/RealDrawBoard/boardManip.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export function clear(this: RealDrawBoard) {
2727
this._strokeHappening = false;
2828
this._drawnPaths = [];
2929
this._pathIndex = -1;
30-
this._lastCoords = null;
30+
this._lastCoords.clear();
3131

3232
this.graphPixels = <Texture>this._blankGraph();
3333
this._display(this.graphPixels);
@@ -48,7 +48,7 @@ export function _resetBoard(this: RealDrawBoard) {
4848
this._strokeHappening = false;
4949
this._drawnPaths = [];
5050
this._pathIndex = -1;
51-
this._lastCoords = null;
51+
this._lastCoords.clear();
5252

5353
this.stopRender();
5454
}

‎src/renderers/RealDrawBoard/stroke.ts‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,24 +15,23 @@ export function _startStroke(
1515
eraserSize: this.eraserSize
1616
}
1717

18-
this._lastCoords = coords;
18+
this._lastCoords.set('mouse', coords);
1919
}
2020

2121
export function _endStroke(
2222
this: RealDrawBoard,
2323
endCoords: [number, number]
2424
) {
2525
if (
26-
this._lastCoords[0] === endCoords[0] &&
27-
this._lastCoords[1] === endCoords[1]
26+
this._lastCoords.get('mouse')[0] === endCoords[0] &&
27+
this._lastCoords.get('mouse')[1] === endCoords[1]
2828
) {
2929
this._plot(...endCoords);
3030
this._drawnPaths[this._pathIndex + 1].pathCoords.push([...endCoords, true]);
3131
}
3232

3333
if (this._strokeHappening) {
34-
this.canvas.removeEventListener('mousemove', this._mouseMoveEventListener);
35-
this._lastCoords = null;
34+
this._lastCoords.delete('mouse');
3635

3736
if (this._drawnPaths[this._pathIndex + 1].pathCoords.length === 0) this._drawnPaths.splice(-1, 1);
3837
else {
@@ -51,5 +50,5 @@ export function _doStroke(
5150
this._strokeHappening = true;
5251
this._drawnPaths[this._pathIndex + 1].pathCoords.push([...coords, false]);
5352
this._stroke(...coords);
54-
this._lastCoords = coords;
53+
this._lastCoords.set('mouse', coords);
5554
}

‎src/renderers/RealDrawBoard/undo.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@ export function undo(this: RealDrawBoard, numUndo: number = 1) {
1818
this.brushSize = path.brushSize;
1919
this.eraserSize = path.eraserSize;
2020

21-
this._lastCoords = null;
21+
this._lastCoords.delete('mouse');
2222
path.pathCoords.forEach(coord => {
2323
if (coord[2] === false) {
2424
this._stroke(coord[0], coord[1]); // Replay all strokes
25-
this._lastCoords = [coord[0], coord[1]];
25+
this._lastCoords.set('mouse', [coord[0], coord[1]]);
2626
}
2727
else this._plot(coord[0], coord[1])
2828
})
@@ -35,7 +35,7 @@ export function undo(this: RealDrawBoard, numUndo: number = 1) {
3535

3636
this._pathIndex -= numUndo;
3737

38-
this._lastCoords = null;
38+
this._lastCoords.delete('mouse');
3939
this._display(this.graphPixels);
4040

4141
if (this._isDrawing) this.startRender();

0 commit comments

Comments
 (0)