Skip to content

Commit b74fada

Browse files
author
HarshKhandeparkar
committed
fix: optimize preview
1 parent 386839a commit b74fada

File tree

5 files changed

+36
-53
lines changed

5 files changed

+36
-53
lines changed

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

Lines changed: 17 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1079,6 +1079,7 @@
10791079
exports._toolPreview = exports._doStroke = exports._endStroke = exports._startStroke = exports.name = void 0;
10801080
exports.name = 'brush';
10811081
function _startStroke(coords, identifier) {
1082+
this._doPreview = false;
10821083
if (this._currentSnapshotIndex < this._snapshots.length - 1 && this._maxSnapshots > 0)
10831084
this._snapshots.splice(this._currentSnapshotIndex + 1); // Delete all redo snapshots
10841085
this._plot(coords[0], coords[1], this.brushSize, this.brushColor);
@@ -1094,6 +1095,7 @@
10941095
this._snapshots.shift();
10951096
this._currentSnapshotIndex--;
10961097
}
1098+
this._doPreview = true;
10971099
}
10981100
exports._endStroke = _endStroke;
10991101
function _doStroke(coords, identifier) {
@@ -1113,13 +1115,15 @@
11131115
exports._toolPreview = exports._doStroke = exports._endStroke = exports._startStroke = exports.name = void 0;
11141116
exports.name = 'eraser';
11151117
function _startStroke(coords, identifier) {
1118+
this._doPreview = false;
11161119
if (this._currentSnapshotIndex < this._snapshots.length - 1 && this._maxSnapshots > 0)
11171120
this._snapshots.splice(this._currentSnapshotIndex + 1); // Delete all redo snapshots
11181121
this._plot(coords[0], coords[1], this.eraserSize, this.bgColor);
11191122
this._lastCoords.set(identifier, coords);
11201123
}
11211124
exports._startStroke = _startStroke;
11221125
function _endStroke(endCoords, identifier) {
1126+
this._doPreview = true;
11231127
this._plot(endCoords[0], endCoords[1], this.eraserSize, this.bgColor);
11241128
this._lastCoords.delete(identifier);
11251129
if (this._maxSnapshots > 0)
@@ -1365,6 +1369,7 @@
13651369
* For mouse, the key is 'mouse', for touches, stringified identifier -> https://developer.mozilla.org/en-US/docs/Web/API/Touch/identifier
13661370
*/
13671371
_this._lastCoords = new Map(); /* key -> identifier, value -> coordinate*/
1372+
_this._doPreview = true; // If a preview should be drawn
13681373
_this._initializeKernels = _initializeKernels_1._initializeKernels;
13691374
_this._stroke = _draw._stroke;
13701375
_this._plot = _draw._plot;
@@ -1399,12 +1404,14 @@
13991404
if (_this._lastCoords.has('mouse'))
14001405
_this._endStroke(endCoords, 'mouse');
14011406
_this._isStroking = false;
1407+
_this._display(_this.graphPixels);
14021408
_this.canvas.removeEventListener('mousemove', _this._mouseMoveEventListener);
14031409
}
14041410
};
14051411
_this._mouseLeaveEventListener = function (e) {
14061412
_this.canvas.removeEventListener('mousemove', _this._mouseMoveEventListener);
14071413
_this._isStroking = false;
1414+
_this._display(_this.graphPixels);
14081415
if (_this._lastCoords.has('mouse'))
14091416
_this._endStroke(_this._getMouseCoords(e), 'mouse');
14101417
};
@@ -1414,15 +1421,11 @@
14141421
};
14151422
_this._previewMouseMoveEventListener = function (e) {
14161423
var coords = _this._getMouseCoords(e);
1417-
// if (!this._isStroking) {
1418-
// this._display(
1419-
// this._toolPreview(coords, 'mouse')
1420-
// )
1421-
// }
1422-
// else {
1423-
// this._display(this.graphPixels);
1424-
// console.log('not previewing')
1425-
// }
1424+
if (_this._doPreview) {
1425+
_this._display(_this._toolPreview(coords, 'mouse'));
1426+
}
1427+
else
1428+
_this._display(_this.graphPixels);
14261429
};
14271430
// --- Mouse Events ---
14281431
// --- Touch Events ---
@@ -1434,27 +1437,23 @@
14341437
}
14351438
};
14361439
_this._touchEndEventListener = function (e) {
1437-
e.preventDefault();
14381440
for (var i = 0; i < e.changedTouches.length; i++) {
14391441
_this._endStroke(_this._getTouchCoords(e.changedTouches.item(i)), e.changedTouches.item(i).identifier.toString());
14401442
_this._isStroking = false;
14411443
}
14421444
};
14431445
_this._touchMoveEventListener = function (e) {
1444-
e.preventDefault();
14451446
for (var i = 0; i < e.touches.length; i++) {
14461447
_this._doStroke(_this._getTouchCoords(e.touches.item(i)), e.touches.item(i).identifier.toString());
14471448
}
14481449
};
14491450
_this._previewTouchMoveEventListener = function (e) {
1450-
e.preventDefault();
14511451
for (var i = 0; i < e.touches.length; i++) {
1452-
// if (!this._isStroking) {
1453-
// this._display(
1454-
// this._toolPreview(this._getTouchCoords(e.touches.item(i)), e.touches.item(i).identifier.toString())
1455-
// )
1456-
// }
1457-
// else this._display(this.graphPixels);
1452+
if (!_this._doPreview) {
1453+
_this._display(_this._toolPreview(_this._getTouchCoords(e.touches.item(i)), e.touches.item(i).identifier.toString()));
1454+
}
1455+
else
1456+
_this._display(_this.graphPixels);
14581457
}
14591458
};
14601459
options = __assign(__assign({}, RealDrawBoardDefaults.RealDrawBoardDefaults), options);
@@ -1468,12 +1467,6 @@
14681467
_this._initializeKernels();
14691468
if (_this._maxSnapshots > 0)
14701469
_this._snapshots[0] = _this.getData();
1471-
var frameHandler = function () {
1472-
if (_this._isStroking)
1473-
_this._display(_this.graphPixels);
1474-
window.requestAnimationFrame(frameHandler);
1475-
};
1476-
window.requestAnimationFrame(frameHandler);
14771470
return _this;
14781471
}
14791472
// --- Touch Events ---

‎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 & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Color } from '../../types/RealRendererTypes';
44
import { RealDrawBoardOptions } from '../../types/RealDrawBoardTypes';
55
import { RealDrawBoardDefaults } from '../../constants/defaults/RealDrawBoardDefaults';
66

7-
import { IKernelRunShortcut } from 'gpu.js';
7+
import { IKernelRunShortcut, Texture } from 'gpu.js';
88

99
export * as RealRendererTypes from '../../types/RealRendererTypes';
1010
export * as RealDrawBoardTypes from '../../types/RealDrawBoardTypes';
@@ -50,7 +50,7 @@ export class RealDrawBoard extends RealRenderer {
5050
* For mouse, the key is 'mouse', for touches, stringified identifier -> https://developer.mozilla.org/en-US/docs/Web/API/Touch/identifier
5151
*/
5252
_lastCoords: Map<string, [number, number]> = new Map(); /* key -> identifier, value -> coordinate*/
53-
_frameHandler: () => void; // requestAnimationFrame handler
53+
_doPreview: boolean = true; // If a preview should be drawn
5454

5555
protected _initializeKernels = _initializeKernels;
5656
protected _stroke = _stroke;
@@ -95,13 +95,6 @@ export class RealDrawBoard extends RealRenderer {
9595

9696
this._initializeKernels();
9797
if (this._maxSnapshots > 0) this._snapshots[0] = this.getData();
98-
99-
this._frameHandler = () => {
100-
if (this._isDrawing) {
101-
if (this._isStroking) this._display(this.graphPixels);
102-
window.requestAnimationFrame(this._frameHandler);
103-
}
104-
}
10598
}
10699
// --- DOM Event Listeners ---
107100

@@ -122,18 +115,18 @@ export class RealDrawBoard extends RealRenderer {
122115
if (e.button === 0 /* Left Click */) {
123116
const endCoords = this._getMouseCoords(e);
124117
if(this._lastCoords.has('mouse')) this._endStroke(endCoords, 'mouse');
125-
this._display(this.graphPixels);
126-
127118
this._isStroking = false;
119+
120+
this._display(this.graphPixels);
128121
this.canvas.removeEventListener('mousemove', this._mouseMoveEventListener);
129122
}
130123
}
131124

132125
_mouseLeaveEventListener = (e: MouseEvent) => {
133126
this.canvas.removeEventListener('mousemove', this._mouseMoveEventListener);
134127
this._isStroking = false;
135-
this._display(this.graphPixels);
136128

129+
this._display(this.graphPixels);
137130
if(this._lastCoords.has('mouse')) this._endStroke(this._getMouseCoords(e), 'mouse');
138131
}
139132

@@ -145,15 +138,10 @@ export class RealDrawBoard extends RealRenderer {
145138
_previewMouseMoveEventListener = (e: MouseEvent) => {
146139
const coords = this._getMouseCoords(e);
147140

148-
// if (!this._isStroking) {
149-
// this._display(
150-
// this._toolPreview(coords, 'mouse')
151-
// )
152-
// }
153-
// else {
154-
// this._display(this.graphPixels);
155-
// console.log('not previewing')
156-
// }
141+
if (this._doPreview) {
142+
this._display(this._toolPreview(coords, 'mouse'));
143+
}
144+
else this._display(this.graphPixels);
157145
}
158146
// --- Mouse Events ---
159147

@@ -193,12 +181,10 @@ export class RealDrawBoard extends RealRenderer {
193181

194182
_previewTouchMoveEventListener = (e: TouchEvent) => {
195183
for (let i = 0; i < e.touches.length; i++) {
196-
// if (!this._isStroking) {
197-
// this._display(
198-
// this._toolPreview(this._getTouchCoords(e.touches.item(i)), e.touches.item(i).identifier.toString())
199-
// )
200-
// }
201-
// else this._display(this.graphPixels);
184+
if (!this._doPreview) {
185+
this._display(this._toolPreview(this._getTouchCoords(e.touches.item(i)), e.touches.item(i).identifier.toString()));
186+
}
187+
else this._display(this.graphPixels);
202188
}
203189
}
204190
// --- Touch Events ---
@@ -207,7 +193,6 @@ export class RealDrawBoard extends RealRenderer {
207193
startRender() {
208194
this._addDOMEvents();
209195
this._isDrawing = true;
210-
window.requestAnimationFrame(this._frameHandler);
211196

212197
return this;
213198
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export function _startStroke(
88
coords: [number, number],
99
identifier: string
1010
) {
11+
this._doPreview = false;
1112
if (this._currentSnapshotIndex < this._snapshots.length - 1 && this._maxSnapshots > 0) this._snapshots.splice(this._currentSnapshotIndex + 1); // Delete all redo snapshots
1213
this._plot(coords[0], coords[1], this.brushSize, this.brushColor);
1314

@@ -28,6 +29,8 @@ export function _endStroke(
2829
this._snapshots.shift();
2930
this._currentSnapshotIndex--;
3031
}
32+
33+
this._doPreview = true;
3134
}
3235

3336
export function _doStroke(

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export function _startStroke(
88
coords: [number, number],
99
identifier: string
1010
) {
11+
this._doPreview = false;
1112
if (this._currentSnapshotIndex < this._snapshots.length - 1 && this._maxSnapshots > 0) this._snapshots.splice(this._currentSnapshotIndex + 1); // Delete all redo snapshots
1213
this._plot(coords[0], coords[1], this.eraserSize, this.bgColor);
1314

@@ -19,6 +20,7 @@ export function _endStroke(
1920
endCoords: [number, number],
2021
identifier: string
2122
) {
23+
this._doPreview = true;
2224
this._plot(endCoords[0], endCoords[1], this.eraserSize, this.bgColor);
2325

2426
this._lastCoords.delete(identifier);

0 commit comments

Comments
 (0)