Skip to content

Commit ed1ed78

Browse files
author
HarshKhandeparkar
committed
feat<RealDrawBoard>: line tool
1 parent c4da5a1 commit ed1ed78

File tree

8 files changed

+140
-10
lines changed

8 files changed

+140
-10
lines changed

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

Lines changed: 52 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1104,7 +1104,7 @@
11041104
this._lastCoords.set(identifier, coords);
11051105
}
11061106
exports._doStroke = _doStroke;
1107-
function _toolPreview(coords) {
1107+
function _toolPreview(coords, identifier) {
11081108
return this._previewPlot(this.graphPixels, coords[0], coords[1], this.brushSize, this.brushColor);
11091109
}
11101110
exports._toolPreview = _toolPreview;
@@ -1138,20 +1138,59 @@
11381138
this._lastCoords.set(identifier, coords);
11391139
}
11401140
exports._doStroke = _doStroke;
1141-
function _toolPreview(coords) {
1141+
function _toolPreview(coords, identifier) {
11421142
return this._previewPlot(this.graphPixels, coords[0], coords[1], this.eraserSize, this.bgColor);
11431143
}
11441144
exports._toolPreview = _toolPreview;
11451145
});
11461146

1147+
var line = createCommonjsModule(function (module, exports) {
1148+
Object.defineProperty(exports, "__esModule", { value: true });
1149+
exports._toolPreview = exports._doStroke = exports._endStroke = exports._startStroke = exports.name = void 0;
1150+
exports.name = 'line';
1151+
/** key -> identifier, value -> coordinate
1152+
* For mouse, the key is 'mouse', for touches, stringified identifier -> https://developer.mozilla.org/en-US/docs/Web/API/Touch/identifier
1153+
*/
1154+
var _startCoords = new Map(); /* key -> identifier, value -> coordinate*/
1155+
function _startStroke(coords, identifier) {
1156+
if (this._currentSnapshotIndex < this._snapshots.length - 1 && this._maxSnapshots > 0)
1157+
this._snapshots.splice(this._currentSnapshotIndex + 1); // Delete all redo snapshots
1158+
this._plot(coords[0], coords[1], this.brushSize, this.brushColor);
1159+
this._lastCoords.set(identifier, coords);
1160+
_startCoords.set(identifier, coords);
1161+
}
1162+
exports._startStroke = _startStroke;
1163+
function _endStroke(endCoords, identifier) {
1164+
this.graphPixels = this._strokeKernel(this._cloneTexture(this.graphPixels), _startCoords.get(identifier), endCoords, this.brushSize, this.brushColor);
1165+
this._plot(endCoords[0], endCoords[1], this.brushSize, this.brushColor);
1166+
this._lastCoords.delete(identifier);
1167+
_startCoords.delete(identifier);
1168+
}
1169+
exports._endStroke = _endStroke;
1170+
function _doStroke(coords, identifier) {
1171+
this._lastCoords.set(identifier, coords);
1172+
}
1173+
exports._doStroke = _doStroke;
1174+
function _toolPreview(coords, identifier) {
1175+
if (_startCoords.has(identifier)) {
1176+
return this._strokeKernel(this._cloneTexture(this.graphPixels), _startCoords.get(identifier), coords, this.brushSize, this.brushColor);
1177+
}
1178+
else
1179+
return this.graphPixels;
1180+
}
1181+
exports._toolPreview = _toolPreview;
1182+
});
1183+
11471184
var tools = createCommonjsModule(function (module, exports) {
11481185
Object.defineProperty(exports, "__esModule", { value: true });
11491186
exports.tools = void 0;
11501187

11511188

1189+
11521190
exports.tools = {
11531191
brush: brush,
1154-
eraser: eraser
1192+
eraser: eraser,
1193+
line: line
11551194
};
11561195
});
11571196

@@ -1221,6 +1260,7 @@
12211260
this.canvas.addEventListener('touchstart', this._touchStartEventListener);
12221261
this.canvas.addEventListener('touchmove', this._touchMoveEventListener);
12231262
this.canvas.addEventListener('touchend', this._touchEndEventListener);
1263+
this.canvas.addEventListener('touchmove', this._previewTouchMoveEventListener);
12241264
}
12251265
exports._addDOMEvents = _addDOMEvents;
12261266
function _removeDOMEvents() {
@@ -1231,6 +1271,7 @@
12311271
this.canvas.removeEventListener('touchstart', this._touchStartEventListener);
12321272
this.canvas.removeEventListener('touchmove', this._touchMoveEventListener);
12331273
this.canvas.removeEventListener('touchend', this._touchEndEventListener);
1274+
this.canvas.removeEventListener('touchmove', this._previewTouchMoveEventListener);
12341275
}
12351276
exports._removeDOMEvents = _removeDOMEvents;
12361277
});
@@ -1369,7 +1410,7 @@
13691410
};
13701411
_this._previewMouseMoveEventListener = function (e) {
13711412
var coords = _this._getMouseCoords(e);
1372-
_this._display(_this._toolPreview(coords));
1413+
_this._display(_this._toolPreview(coords, 'mouse'));
13731414
};
13741415
// --- Mouse Events ---
13751416
// --- Touch Events ---
@@ -1386,6 +1427,13 @@
13861427
}
13871428
};
13881429
_this._touchMoveEventListener = function (e) {
1430+
e.preventDefault();
1431+
for (var i = 0; i < e.touches.length; i++) {
1432+
_this._display(_this._toolPreview(_this._getTouchCoords(e.touches.item(i)), e.touches.item(i).identifier.toString()));
1433+
}
1434+
_this._display(_this.graphPixels);
1435+
};
1436+
_this._previewTouchMoveEventListener = function (e) {
13891437
e.preventDefault();
13901438
for (var i = 0; i < e.touches.length; i++) {
13911439
_this._doStroke(_this._getTouchCoords(e.touches.item(i)), e.touches.item(i).identifier.toString());

‎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: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ export class RealDrawBoard extends RealRenderer {
131131
const coords = this._getMouseCoords(e);
132132

133133
this._display(
134-
this._toolPreview(coords)
134+
this._toolPreview(coords, 'mouse')
135135
)
136136
}
137137
// --- Mouse Events ---
@@ -162,6 +162,18 @@ export class RealDrawBoard extends RealRenderer {
162162
_touchMoveEventListener = (e: TouchEvent) => {
163163
e.preventDefault();
164164

165+
for (let i = 0; i < e.touches.length; i++) {
166+
this._display(
167+
this._toolPreview(this._getTouchCoords(e.touches.item(i)), e.touches.item(i).identifier.toString())
168+
)
169+
}
170+
171+
this._display(this.graphPixels);
172+
}
173+
174+
_previewTouchMoveEventListener = (e: TouchEvent) => {
175+
e.preventDefault();
176+
165177
for (let i = 0; i < e.touches.length; i++) {
166178
this._doStroke(
167179
this._getTouchCoords(e.touches.item(i)),

‎src/renderers/RealDrawBoard/_DOMEvents.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export function _addDOMEvents(this: RealDrawBoard) {
99
this.canvas.addEventListener('touchstart', this._touchStartEventListener);
1010
this.canvas.addEventListener('touchmove', this._touchMoveEventListener);
1111
this.canvas.addEventListener('touchend', this._touchEndEventListener);
12+
this.canvas.addEventListener('touchmove', this._previewTouchMoveEventListener);
1213
}
1314

1415
export function _removeDOMEvents(this: RealDrawBoard) {
@@ -20,4 +21,5 @@ export function _removeDOMEvents(this: RealDrawBoard) {
2021
this.canvas.removeEventListener('touchstart', this._touchStartEventListener);
2122
this.canvas.removeEventListener('touchmove', this._touchMoveEventListener);
2223
this.canvas.removeEventListener('touchend', this._touchEndEventListener);
24+
this.canvas.removeEventListener('touchmove', this._previewTouchMoveEventListener);
2325
}

‎src/renderers/RealDrawBoard/tools/brush.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,8 @@ export function _doStroke(
4343

4444
export function _toolPreview(
4545
this: RealDrawBoard,
46-
coords: [number, number]
46+
coords: [number, number],
47+
identifier: string
4748
): Texture {
4849
return <Texture>this._previewPlot(
4950
this.graphPixels,

‎src/renderers/RealDrawBoard/tools/eraser.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,8 @@ export function _doStroke(
4343

4444
export function _toolPreview(
4545
this: RealDrawBoard,
46-
coords: [number, number]
46+
coords: [number, number],
47+
identifier: string
4748
): Texture {
4849
return <Texture>this._previewPlot(
4950
this.graphPixels,

‎src/renderers/RealDrawBoard/tools/line.ts‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { RealDrawBoard } from '../RealDrawBoard';
2+
import { Texture } from 'gpu.js';
3+
4+
export const name = 'line';
5+
6+
/** key -> identifier, value -> coordinate
7+
* For mouse, the key is 'mouse', for touches, stringified identifier -> https://developer.mozilla.org/en-US/docs/Web/API/Touch/identifier
8+
*/
9+
const _startCoords: Map<string, [number, number]> = new Map(); /* key -> identifier, value -> coordinate*/
10+
11+
export function _startStroke(
12+
this: RealDrawBoard,
13+
coords: [number, number],
14+
identifier: string
15+
) {
16+
if (this._currentSnapshotIndex < this._snapshots.length - 1 && this._maxSnapshots > 0) this._snapshots.splice(this._currentSnapshotIndex + 1); // Delete all redo snapshots
17+
this._plot(coords[0], coords[1], this.brushSize, this.brushColor);
18+
19+
this._lastCoords.set(identifier, coords);
20+
_startCoords.set(identifier, coords);
21+
}
22+
23+
export function _endStroke(
24+
this: RealDrawBoard,
25+
endCoords: [number, number],
26+
identifier: string
27+
) {
28+
this.graphPixels = <Texture>this._strokeKernel(
29+
this._cloneTexture(this.graphPixels),
30+
_startCoords.get(identifier),
31+
endCoords,
32+
this.brushSize,
33+
this.brushColor
34+
)
35+
this._plot(endCoords[0], endCoords[1], this.brushSize, this.brushColor);
36+
37+
this._lastCoords.delete(identifier);
38+
_startCoords.delete(identifier);
39+
}
40+
41+
export function _doStroke(
42+
this: RealDrawBoard,
43+
coords: [number, number],
44+
identifier: string
45+
) {
46+
this._lastCoords.set(identifier, coords);
47+
}
48+
49+
export function _toolPreview(
50+
this: RealDrawBoard,
51+
coords: [number, number],
52+
identifier: string
53+
): Texture {
54+
if (_startCoords.has(identifier)) {
55+
return <Texture>this._strokeKernel(
56+
this._cloneTexture(this.graphPixels),
57+
_startCoords.get(identifier),
58+
coords,
59+
this.brushSize,
60+
this.brushColor
61+
)
62+
}
63+
else return this.graphPixels;
64+
}

‎src/renderers/RealDrawBoard/tools/tools.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import * as brush from './brush';
22
import * as eraser from './eraser';
3+
import * as line from './line';
34

45
export const tools = {
56
brush,
6-
eraser
7+
eraser,
8+
line
79
}
810

9-
export type Tool = 'brush' | 'eraser';
11+
export type Tool = 'brush' | 'eraser' | 'line';

0 commit comments

Comments
 (0)