Skip to content

Commit 936b09b

Browse files
author
HarshKhandeparkar
committed
feat<RealDrawBoard>: touch support!
1 parent 69d37ca commit 936b09b

File tree

8 files changed

+87
-50
lines changed

8 files changed

+87
-50
lines changed

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

Lines changed: 34 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1007,10 +1007,10 @@
10071007
return this;
10081008
}
10091009
exports._plot = _plot;
1010-
function _stroke(x, y) {
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);
1010+
function _stroke(x, y, identifier) {
1011+
if (!this._lastCoords.has(identifier))
1012+
this._lastCoords.set(identifier, [x, y]);
1013+
this.graphPixels = this._strokeKernel(this._cloneTexture(this.graphPixels), this._lastCoords.get(identifier), [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.delete('mouse');
1034+
_this._lastCoords.delete('temp');
10351035
path.pathCoords.forEach(function (coord) {
10361036
if (coord[2] === false) {
1037-
_this._stroke(coord[0], coord[1]); // Replay all strokes
1038-
_this._lastCoords.set('mouse', [coord[0], coord[1]]);
1037+
_this._stroke(coord[0], coord[1], 'temp'); // Replay all strokes
1038+
_this._lastCoords.set('temp', [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.delete('mouse');
1049+
this._lastCoords.delete('temp');
10501050
this._display(this.graphPixels);
10511051
if (this._isDrawing)
10521052
this.startRender();
@@ -1119,13 +1119,19 @@
11191119
this.canvas.addEventListener('mouseup', this._mouseUpEventListener);
11201120
this.canvas.addEventListener('mouseenter', this._mouseEnterEventListener);
11211121
this.canvas.addEventListener('mouseleave', this._mouseLeaveEventListener);
1122+
this.canvas.addEventListener('touchstart', this._touchStartEventListener);
1123+
this.canvas.addEventListener('touchmove', this._touchMoveEventListener);
1124+
this.canvas.addEventListener('touchend', this._touchEndEventListener);
11221125
}
11231126
exports._addDOMEvents = _addDOMEvents;
11241127
function _removeDOMEvents() {
11251128
this.canvas.removeEventListener('mousedown', this._mouseDownEventListener);
11261129
this.canvas.removeEventListener('mouseup', this._mouseUpEventListener);
11271130
this.canvas.removeEventListener('mouseenter', this._mouseEnterEventListener);
11281131
this.canvas.removeEventListener('mouseexit', this._mouseLeaveEventListener);
1132+
this.canvas.removeEventListener('touchstart', this._touchStartEventListener);
1133+
this.canvas.removeEventListener('touchmove', this._touchMoveEventListener);
1134+
this.canvas.removeEventListener('touchend', this._touchEndEventListener);
11291135
}
11301136
exports._removeDOMEvents = _removeDOMEvents;
11311137
});
@@ -1168,7 +1174,7 @@
11681174
exports._endStroke = _endStroke;
11691175
function _doStroke(coords, identifier) {
11701176
this._drawnPaths[this._pathIndex + 1].pathCoords.push(__spreadArrays(coords, [false]));
1171-
this._stroke.apply(this, coords);
1177+
this._stroke(coords[0], coords[1], identifier);
11721178
this._lastCoords.set(identifier, coords);
11731179
}
11741180
exports._doStroke = _doStroke;
@@ -1185,17 +1191,12 @@
11851191
return [x, y]; // In graph coordinates
11861192
}
11871193
exports._getMouseCoords = _getMouseCoords;
1188-
function _getTouchCoords(e) {
1189-
var allCoords = [];
1190-
for (var i = 0; i < e.touches.length; i++) {
1191-
var touch = e.touches.item(i);
1192-
var x = touch.clientX - this.canvas.getBoundingClientRect().left;
1193-
var y = this.dimensions[1] - (touch.clientY - this.canvas.getBoundingClientRect().top);
1194-
x = x / this.xScaleFactor - (this.dimensions[0] * (this.yOffset / 100)) / this.xScaleFactor;
1195-
y = y / this.yScaleFactor - (this.dimensions[1] * (this.xOffset / 100)) / this.yScaleFactor;
1196-
allCoords.push([x, y]);
1197-
}
1198-
return allCoords;
1194+
function _getTouchCoords(touch) {
1195+
var x = touch.clientX - this.canvas.getBoundingClientRect().left;
1196+
var y = this.dimensions[1] - (touch.clientY - this.canvas.getBoundingClientRect().top);
1197+
x = x / this.xScaleFactor - (this.dimensions[0] * (this.yOffset / 100)) / this.xScaleFactor;
1198+
y = y / this.yScaleFactor - (this.dimensions[1] * (this.xOffset / 100)) / this.yScaleFactor;
1199+
return [x, y];
11991200
}
12001201
exports._getTouchCoords = _getTouchCoords;
12011202
});
@@ -1299,6 +1300,7 @@
12991300
_this._lastCoords.set('mouse', _this._getMouseCoords(e));
13001301
};
13011302
_this._mouseLeaveEventListener = function (e) {
1303+
_this.canvas.removeEventListener('mousemove', _this._mouseMoveEventListener);
13021304
_this._endStroke(_this._getMouseCoords(e), 'mouse');
13031305
};
13041306
_this._mouseMoveEventListener = function (e) {
@@ -1308,13 +1310,22 @@
13081310
// --- Mouse Events ---
13091311
// --- Touch Events ---
13101312
_this._touchStartEventListener = function (e) {
1311-
// this.canvas.addEventListener();
1313+
e.preventDefault();
1314+
for (var i = 0; i < e.touches.length; i++) {
1315+
_this._startStroke(_this._getTouchCoords(e.touches.item(i)), e.touches.item(i).identifier.toString());
1316+
}
13121317
};
13131318
_this._touchEndEventListener = function (e) {
1314-
var endCoords = _this._getTouchCoords(e)[0];
1315-
_this._endStroke(endCoords, 'mouse');
1319+
e.preventDefault();
1320+
for (var i = 0; i < e.changedTouches.length; i++) {
1321+
_this._endStroke(_this._getTouchCoords(e.changedTouches.item(i)), e.changedTouches.item(i).identifier.toString());
1322+
}
13161323
};
13171324
_this._touchMoveEventListener = function (e) {
1325+
e.preventDefault();
1326+
for (var i = 0; i < e.touches.length; i++) {
1327+
_this._doStroke(_this._getTouchCoords(e.touches.item(i)), e.touches.item(i).identifier.toString());
1328+
}
13181329
};
13191330
options = __assign(__assign({}, RealDrawBoardDefaults.RealDrawBoardDefaults), options);
13201331
_this.options = options;

‎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: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,7 @@ export class RealDrawBoard extends RealRenderer {
126126
}
127127

128128
_mouseLeaveEventListener = (e: MouseEvent) => {
129+
this.canvas.removeEventListener('mousemove', this._mouseMoveEventListener);
129130
this._endStroke(this._getMouseCoords(e), 'mouse');
130131
}
131132

@@ -137,16 +138,36 @@ export class RealDrawBoard extends RealRenderer {
137138

138139
// --- Touch Events ---
139140
_touchStartEventListener = (e: TouchEvent) => {
140-
// this.canvas.addEventListener();
141+
e.preventDefault();
142+
143+
for (let i = 0; i < e.touches.length; i++) {
144+
this._startStroke(
145+
this._getTouchCoords(e.touches.item(i)),
146+
e.touches.item(i).identifier.toString()
147+
)
148+
}
141149
}
142150

143151
_touchEndEventListener = (e: TouchEvent) => {
144-
const endCoords = this._getTouchCoords(e)[0];
145-
this._endStroke(endCoords, 'mouse');
152+
e.preventDefault();
153+
154+
for (let i = 0; i < e.changedTouches.length; i++) {
155+
this._endStroke(
156+
this._getTouchCoords(e.changedTouches.item(i)),
157+
e.changedTouches.item(i).identifier.toString()
158+
)
159+
}
146160
}
147161

148162
_touchMoveEventListener = (e: TouchEvent) => {
163+
e.preventDefault();
149164

165+
for (let i = 0; i < e.touches.length; i++) {
166+
this._doStroke(
167+
this._getTouchCoords(e.touches.item(i)),
168+
e.touches.item(i).identifier.toString()
169+
)
170+
}
150171
}
151172
// --- Touch Events ---
152173

‎src/renderers/RealDrawBoard/_DOMEvents.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,19 @@ export function _addDOMEvents(this: RealDrawBoard) {
55
this.canvas.addEventListener('mouseup', this._mouseUpEventListener);
66
this.canvas.addEventListener('mouseenter', this._mouseEnterEventListener);
77
this.canvas.addEventListener('mouseleave', this._mouseLeaveEventListener);
8+
9+
this.canvas.addEventListener('touchstart', this._touchStartEventListener);
10+
this.canvas.addEventListener('touchmove', this._touchMoveEventListener);
11+
this.canvas.addEventListener('touchend', this._touchEndEventListener);
812
}
913

1014
export function _removeDOMEvents(this: RealDrawBoard) {
1115
this.canvas.removeEventListener('mousedown', this._mouseDownEventListener);
1216
this.canvas.removeEventListener('mouseup', this._mouseUpEventListener);
1317
this.canvas.removeEventListener('mouseenter', this._mouseEnterEventListener);
1418
this.canvas.removeEventListener('mouseexit', this._mouseLeaveEventListener);
19+
20+
this.canvas.removeEventListener('touchstart', this._touchStartEventListener);
21+
this.canvas.removeEventListener('touchmove', this._touchMoveEventListener);
22+
this.canvas.removeEventListener('touchend', this._touchEndEventListener);
1523
}

‎src/renderers/RealDrawBoard/_coords.ts‎

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,21 +15,13 @@ export function _getMouseCoords(
1515

1616
export function _getTouchCoords(
1717
this: RealDrawBoard,
18-
e: TouchEvent
19-
): [number, number][] {
20-
let allCoords: [number, number][] = [];
21-
22-
for (let i = 0; i < e.touches.length; i++) {
23-
const touch = e.touches.item(i);
24-
25-
let x = touch.clientX - this.canvas.getBoundingClientRect().left;
26-
let y = this.dimensions[1] - (touch.clientY - this.canvas.getBoundingClientRect().top);
27-
28-
x = x / this.xScaleFactor - (this.dimensions[0] * (this.yOffset / 100)) / this.xScaleFactor;
29-
y = y / this.yScaleFactor - (this.dimensions[1] * (this.xOffset / 100)) / this.yScaleFactor;
18+
touch: Touch
19+
): [number, number] {
20+
let x = touch.clientX - this.canvas.getBoundingClientRect().left;
21+
let y = this.dimensions[1] - (touch.clientY - this.canvas.getBoundingClientRect().top);
3022

31-
allCoords.push([x, y]);
32-
}
23+
x = x / this.xScaleFactor - (this.dimensions[0] * (this.yOffset / 100)) / this.xScaleFactor;
24+
y = y / this.yScaleFactor - (this.dimensions[1] * (this.xOffset / 100)) / this.yScaleFactor;
3325

34-
return allCoords;
26+
return [x, y];
3527
}

‎src/renderers/RealDrawBoard/_draw.ts‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,17 @@ export function _plot(this: RealDrawBoard, x: number, y: number) {
1515
return this;
1616
}
1717

18-
export function _stroke(this: RealDrawBoard, x: number, y: number) {
19-
if (!this._lastCoords.has('mouse')) this._lastCoords.set('mouse', [x, y]);
18+
export function _stroke(
19+
this: RealDrawBoard,
20+
x: number,
21+
y: number,
22+
identifier: string
23+
) {
24+
if (!this._lastCoords.has(identifier)) this._lastCoords.set(identifier, [x, y]);
2025

2126
this.graphPixels = <Texture>this._strokeKernel(
2227
this._cloneTexture(this.graphPixels),
23-
this._lastCoords.get('mouse'),
28+
this._lastCoords.get(identifier),
2429
[x, y],
2530
this.mode === 'paint' ? this.brushSize : this.eraserSize,
2631
this.mode === 'paint' ? this.brushColor : this.bgColor

‎src/renderers/RealDrawBoard/stroke.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,6 @@ export function _doStroke(
4545
identifier: string
4646
) {
4747
this._drawnPaths[this._pathIndex + 1].pathCoords.push([...coords, false]);
48-
this._stroke(...coords);
48+
this._stroke(coords[0], coords[1], identifier);
4949
this._lastCoords.set(identifier, coords);
5050
}

‎src/renderers/RealDrawBoard/undo.ts‎

Lines changed: 4 additions & 4 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.delete('mouse');
21+
this._lastCoords.delete('temp');
2222
path.pathCoords.forEach(coord => {
2323
if (coord[2] === false) {
24-
this._stroke(coord[0], coord[1]); // Replay all strokes
25-
this._lastCoords.set('mouse', [coord[0], coord[1]]);
24+
this._stroke(coord[0], coord[1], 'temp'); // Replay all strokes
25+
this._lastCoords.set('temp', [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.delete('mouse');
38+
this._lastCoords.delete('temp');
3939
this._display(this.graphPixels);
4040

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

0 commit comments

Comments
 (0)