Skip to content

Commit 2442b7a

Browse files
author
HarshKhandeparkar
committed
fix: optimize snapshots
1 parent 09f2ce8 commit 2442b7a

File tree

4 files changed

+76
-50
lines changed

4 files changed

+76
-50
lines changed

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

Lines changed: 38 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1068,21 +1068,13 @@
10681068
exports.name = 'brush';
10691069
function _startStroke(coords, identifier) {
10701070
this._doPreview = false;
1071-
if (this._currentSnapshotIndex < this._snapshots.length - 1 && this._maxSnapshots > 0)
1072-
this._snapshots.splice(this._currentSnapshotIndex + 1); // Delete all redo snapshots
10731071
this._plot(coords[0], coords[1], this.brushSize, this.brushColor);
10741072
this._lastCoords.set(identifier, coords);
10751073
}
10761074
exports._startStroke = _startStroke;
10771075
function _endStroke(endCoords, identifier) {
10781076
this._plot(endCoords[0], endCoords[1], this.brushSize, this.brushColor);
10791077
this._lastCoords.delete(identifier);
1080-
if (this._maxSnapshots > 0)
1081-
this._snapshots[++this._currentSnapshotIndex] = this.getData();
1082-
if (this._snapshots.length > this._maxSnapshots) {
1083-
this._snapshots.shift();
1084-
this._currentSnapshotIndex--;
1085-
}
10861078
this._doPreview = true;
10871079
}
10881080
exports._endStroke = _endStroke;
@@ -1104,8 +1096,6 @@
11041096
exports.name = 'eraser';
11051097
function _startStroke(coords, identifier) {
11061098
this._doPreview = false;
1107-
if (this._currentSnapshotIndex < this._snapshots.length - 1 && this._maxSnapshots > 0)
1108-
this._snapshots.splice(this._currentSnapshotIndex + 1); // Delete all redo snapshots
11091099
this._plot(coords[0], coords[1], this.eraserSize, this.bgColor);
11101100
this._lastCoords.set(identifier, coords);
11111101
}
@@ -1114,12 +1104,6 @@
11141104
this._doPreview = true;
11151105
this._plot(endCoords[0], endCoords[1], this.eraserSize, this.bgColor);
11161106
this._lastCoords.delete(identifier);
1117-
if (this._maxSnapshots > 0)
1118-
this._snapshots[++this._currentSnapshotIndex] = this.getData();
1119-
if (this._snapshots.length > this._maxSnapshots) {
1120-
this._snapshots.shift();
1121-
this._currentSnapshotIndex--;
1122-
}
11231107
}
11241108
exports._endStroke = _endStroke;
11251109
function _doStroke(coords, identifier) {
@@ -1143,8 +1127,6 @@
11431127
*/
11441128
var _startCoords = new Map(); /* key -> identifier, value -> coordinate*/
11451129
function _startStroke(coords, identifier) {
1146-
if (this._currentSnapshotIndex < this._snapshots.length - 1 && this._maxSnapshots > 0)
1147-
this._snapshots.splice(this._currentSnapshotIndex + 1); // Delete all redo snapshots
11481130
this._plot(coords[0], coords[1], this.brushSize, this.brushColor);
11491131
this._lastCoords.set(identifier, coords);
11501132
_startCoords.set(identifier, coords);
@@ -1350,7 +1332,7 @@
13501332
_super.call(this, options) || this;
13511333
_this.tool = RealDrawBoardDefaults.RealDrawBoardDefaults.tool;
13521334
_this._isDrawing = false;
1353-
_this._isStroking = false; // If a tool is drawing a strwoke
1335+
_this._ = false; // If a tool is drawing a strwoke
13541336
_this._snapshots = []; // Undo snapshots
13551337
_this._currentSnapshotIndex = 0; // Current snapshot
13561338
/** key -> identifier, value -> coordinate
@@ -1382,26 +1364,46 @@
13821364
_this._mouseDownEventListener = function (e) {
13831365
if (e.button === 0 /* Left Click */) {
13841366
_this.canvas.addEventListener('mousemove', _this._mouseMoveEventListener);
1385-
_this._isStroking = true;
1367+
if (_this._currentSnapshotIndex < _this._snapshots.length - 1 && _this._maxSnapshots > 0)
1368+
_this._snapshots.splice(_this._currentSnapshotIndex + 1); // Delete all redo snapshots
13861369
_this._startStroke(_this._getMouseCoords(e), 'mouse');
13871370
}
13881371
};
13891372
_this._mouseUpEventListener = function (e) {
13901373
if (e.button === 0 /* Left Click */) {
13911374
var endCoords = _this._getMouseCoords(e);
1375+
_this.canvas.removeEventListener('mousemove', _this._mouseMoveEventListener);
1376+
_this._removeDOMEvents();
13921377
if (_this._lastCoords.has('mouse'))
13931378
_this._endStroke(endCoords, 'mouse');
1394-
_this._isStroking = false;
13951379
_this._display(_this.graphPixels);
1396-
_this.canvas.removeEventListener('mousemove', _this._mouseMoveEventListener);
1380+
setTimeout(function () {
1381+
if (_this._maxSnapshots > 0)
1382+
_this._snapshots[++_this._currentSnapshotIndex] = _this.getData(); // Take snapshot
1383+
if (_this._snapshots.length > _this._maxSnapshots) {
1384+
_this._snapshots.shift();
1385+
_this._currentSnapshotIndex--;
1386+
}
1387+
_this._addDOMEvents();
1388+
}, 20);
13971389
}
13981390
};
13991391
_this._mouseLeaveEventListener = function (e) {
14001392
_this.canvas.removeEventListener('mousemove', _this._mouseMoveEventListener);
1401-
_this._isStroking = false;
1402-
_this._display(_this.graphPixels);
1403-
if (_this._lastCoords.has('mouse'))
1393+
if (_this._lastCoords.has('mouse')) {
1394+
_this._removeDOMEvents();
14041395
_this._endStroke(_this._getMouseCoords(e), 'mouse');
1396+
_this._display(_this.graphPixels);
1397+
setTimeout(function () {
1398+
if (_this._maxSnapshots > 0)
1399+
_this._snapshots[++_this._currentSnapshotIndex] = _this.getData(); // Take snapshot
1400+
if (_this._snapshots.length > _this._maxSnapshots) {
1401+
_this._snapshots.shift();
1402+
_this._currentSnapshotIndex--;
1403+
}
1404+
_this._addDOMEvents();
1405+
}, 20);
1406+
}
14051407
};
14061408
_this._mouseMoveEventListener = function (e) {
14071409
var coords = _this._getMouseCoords(e);
@@ -1420,15 +1422,24 @@
14201422
_this._touchStartEventListener = function (e) {
14211423
e.preventDefault();
14221424
for (var i = 0; i < e.touches.length; i++) {
1423-
_this._isStroking = true;
1425+
if (_this._currentSnapshotIndex < _this._snapshots.length - 1 && _this._maxSnapshots > 0)
1426+
_this._snapshots.splice(_this._currentSnapshotIndex + 1); // Delete all redo snapshots
14241427
_this._startStroke(_this._getTouchCoords(e.touches.item(i)), e.touches.item(i).identifier.toString());
14251428
}
14261429
};
14271430
_this._touchEndEventListener = function (e) {
14281431
for (var i = 0; i < e.changedTouches.length; i++) {
14291432
_this._endStroke(_this._getTouchCoords(e.changedTouches.item(i)), e.changedTouches.item(i).identifier.toString());
1430-
_this._isStroking = false;
14311433
}
1434+
setTimeout(function () {
1435+
if (_this._maxSnapshots > 0)
1436+
_this._snapshots[++_this._currentSnapshotIndex] = _this.getData(); // Take snapshot
1437+
if (_this._snapshots.length > _this._maxSnapshots) {
1438+
_this._snapshots.shift();
1439+
_this._currentSnapshotIndex--;
1440+
}
1441+
_this._addDOMEvents();
1442+
}, 20);
14321443
};
14331444
_this._touchMoveEventListener = function (e) {
14341445
for (var i = 0; i < e.touches.length; i++) {

‎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.

‎example/examples/drawboard.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Draw Board
22
const drawBoardOptions = {
33
canvas: document.getElementById('drawboard-canvas'),
4-
dimensions: [420, 360],
4+
dimensions: [1000, 1000],
55

66
xScaleFactor: 1,
77
yScaleFactor: 1,

‎src/renderers/RealDrawBoard/RealDrawBoard.ts‎

Lines changed: 36 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export class RealDrawBoard extends RealRenderer {
3939
eraserSize: number;
4040
tool: Tool = RealDrawBoardDefaults.tool;
4141
_isDrawing: boolean = false;
42-
_isStroking: boolean = false; // If a tool is drawing a strwoke
42+
_: boolean = false; // If a tool is drawing a strwoke
4343
_snapshots: (number[][][])[] = []; // Undo snapshots
4444
_currentSnapshotIndex = 0; // Current snapshot
4545
_maxSnapshots: number;
@@ -102,7 +102,6 @@ export class RealDrawBoard extends RealRenderer {
102102
_mouseDownEventListener = (e: MouseEvent) => {
103103
if (e.button === 0 /* Left Click */) {
104104
this.canvas.addEventListener('mousemove', this._mouseMoveEventListener);
105-
this._isStroking = true;
106105

107106
if (this._currentSnapshotIndex < this._snapshots.length - 1 && this._maxSnapshots > 0) this._snapshots.splice(this._currentSnapshotIndex + 1); // Delete all redo snapshots
108107

@@ -116,27 +115,43 @@ export class RealDrawBoard extends RealRenderer {
116115
_mouseUpEventListener = (e: MouseEvent) => {
117116
if (e.button === 0 /* Left Click */) {
118117
const endCoords = this._getMouseCoords(e);
118+
this.canvas.removeEventListener('mousemove', this._mouseMoveEventListener);
119+
this._removeDOMEvents();
120+
119121
if(this._lastCoords.has('mouse')) this._endStroke(endCoords, 'mouse');
120-
this._isStroking = false;
121122

122123
this._display(this.graphPixels);
123124

124-
this.canvas.removeEventListener('mousemove', this._mouseMoveEventListener);
125+
setTimeout(() => {
126+
if (this._maxSnapshots > 0) this._snapshots[++this._currentSnapshotIndex] = this.getData(); // Take snapshot
127+
if (this._snapshots.length > this._maxSnapshots) {
128+
this._snapshots.shift();
129+
this._currentSnapshotIndex--;
130+
}
125131

126-
if (this._maxSnapshots > 0) this._snapshots[++this._currentSnapshotIndex] = this.getData(); // Take snapshot
127-
if (this._snapshots.length > this._maxSnapshots) {
128-
this._snapshots.shift();
129-
this._currentSnapshotIndex--;
130-
}
132+
this._addDOMEvents();
133+
}, 20)
131134
}
132135
}
133136

134137
_mouseLeaveEventListener = (e: MouseEvent) => {
135138
this.canvas.removeEventListener('mousemove', this._mouseMoveEventListener);
136-
this._isStroking = false;
137139

138-
this._display(this.graphPixels);
139-
if(this._lastCoords.has('mouse')) this._endStroke(this._getMouseCoords(e), 'mouse');
140+
if(this._lastCoords.has('mouse')) {
141+
this._removeDOMEvents();
142+
this._endStroke(this._getMouseCoords(e), 'mouse');
143+
this._display(this.graphPixels);
144+
145+
setTimeout(() => { // Delay to let the canvas 'settle'
146+
if (this._maxSnapshots > 0) this._snapshots[++this._currentSnapshotIndex] = this.getData(); // Take snapshot
147+
if (this._snapshots.length > this._maxSnapshots) {
148+
this._snapshots.shift();
149+
this._currentSnapshotIndex--;
150+
}
151+
152+
this._addDOMEvents();
153+
}, 20)
154+
}
140155
}
141156

142157
_mouseMoveEventListener = (e: MouseEvent) => {
@@ -159,8 +174,6 @@ export class RealDrawBoard extends RealRenderer {
159174
e.preventDefault();
160175

161176
for (let i = 0; i < e.touches.length; i++) {
162-
this._isStroking = true;
163-
164177
if (this._currentSnapshotIndex < this._snapshots.length - 1 && this._maxSnapshots > 0) this._snapshots.splice(this._currentSnapshotIndex + 1); // Delete all redo snapshots
165178

166179
this._startStroke(
@@ -176,15 +189,17 @@ export class RealDrawBoard extends RealRenderer {
176189
this._getTouchCoords(e.changedTouches.item(i)),
177190
e.changedTouches.item(i).identifier.toString()
178191
)
179-
180-
this._isStroking = false;
181192
}
182193

183-
if (this._maxSnapshots > 0) this._snapshots[++this._currentSnapshotIndex] = this.getData(); // Take snapshot
184-
if (this._snapshots.length > this._maxSnapshots) {
185-
this._snapshots.shift();
186-
this._currentSnapshotIndex--;
187-
}
194+
setTimeout(() => {
195+
if (this._maxSnapshots > 0) this._snapshots[++this._currentSnapshotIndex] = this.getData(); // Take snapshot
196+
if (this._snapshots.length > this._maxSnapshots) {
197+
this._snapshots.shift();
198+
this._currentSnapshotIndex--;
199+
}
200+
201+
this._addDOMEvents();
202+
}, 20)
188203
}
189204

190205
_touchMoveEventListener = (e: TouchEvent) => {

0 commit comments

Comments
 (0)