Skip to content

Commit c41ec74

Browse files
author
HarshKhandeparkar
committed
fix: optimize _display and undos
1 parent f13d0f2 commit c41ec74

File tree

4 files changed

+72
-25
lines changed

4 files changed

+72
-25
lines changed

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

Lines changed: 34 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1225,7 +1225,8 @@
12251225
this._currentSnapshotIndex = 0;
12261226
this._lastCoords.clear();
12271227
this.graphPixels = this._blankGraph();
1228-
this._snapshots[0] = this.getData();
1228+
if (this._maxSnapshots > 0)
1229+
this._snapshots[0] = this.getData();
12291230
this._display(this.graphPixels);
12301231
return this;
12311232
}
@@ -1240,7 +1241,8 @@
12401241
this.tool = this.options.tool;
12411242
this._isDrawing = false;
12421243
this._currentSnapshotIndex = 0;
1243-
this._snapshots = [this.getData()];
1244+
if (this._maxSnapshots > 0)
1245+
this._snapshots = [this.getData()];
12441246
this._lastCoords.clear();
12451247
this.stopRender();
12461248
}
@@ -1356,6 +1358,7 @@
13561358
_super.call(this, options) || this;
13571359
_this.tool = RealDrawBoardDefaults.RealDrawBoardDefaults.tool;
13581360
_this._isDrawing = false;
1361+
_this._isStroking = false; // If a tool is drawing a stroke
13591362
_this._snapshots = []; // Undo snapshots
13601363
_this._currentSnapshotIndex = 0; // Current snapshot
13611364
/** key -> identifier, value -> coordinate
@@ -1386,6 +1389,7 @@
13861389
_this._mouseDownEventListener = function (e) {
13871390
if (e.button === 0 /* Left Click */) {
13881391
_this.canvas.addEventListener('mousemove', _this._mouseMoveEventListener);
1392+
_this._isStroking = true;
13891393
_this._startStroke(_this._getMouseCoords(e), 'mouse');
13901394
}
13911395
};
@@ -1394,11 +1398,13 @@
13941398
var endCoords = _this._getMouseCoords(e);
13951399
if (_this._lastCoords.has('mouse'))
13961400
_this._endStroke(endCoords, 'mouse');
1401+
_this._isStroking = false;
13971402
_this.canvas.removeEventListener('mousemove', _this._mouseMoveEventListener);
13981403
}
13991404
};
14001405
_this._mouseLeaveEventListener = function (e) {
14011406
_this.canvas.removeEventListener('mousemove', _this._mouseMoveEventListener);
1407+
_this._isStroking = false;
14021408
if (_this._lastCoords.has('mouse'))
14031409
_this._endStroke(_this._getMouseCoords(e), 'mouse');
14041410
};
@@ -1408,35 +1414,48 @@
14081414
};
14091415
_this._previewMouseMoveEventListener = function (e) {
14101416
var coords = _this._getMouseCoords(e);
1411-
_this._display(_this._toolPreview(coords, 'mouse'));
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+
// }
14121426
};
14131427
// --- Mouse Events ---
14141428
// --- Touch Events ---
14151429
_this._touchStartEventListener = function (e) {
14161430
e.preventDefault();
14171431
for (var i = 0; i < e.touches.length; i++) {
1432+
_this._isStroking = true;
14181433
_this._startStroke(_this._getTouchCoords(e.touches.item(i)), e.touches.item(i).identifier.toString());
14191434
}
14201435
};
14211436
_this._touchEndEventListener = function (e) {
14221437
e.preventDefault();
14231438
for (var i = 0; i < e.changedTouches.length; i++) {
14241439
_this._endStroke(_this._getTouchCoords(e.changedTouches.item(i)), e.changedTouches.item(i).identifier.toString());
1440+
_this._isStroking = false;
14251441
}
14261442
};
14271443
_this._touchMoveEventListener = function (e) {
14281444
e.preventDefault();
14291445
for (var i = 0; i < e.touches.length; i++) {
1430-
_this._display(_this._toolPreview(_this._getTouchCoords(e.touches.item(i)), e.touches.item(i).identifier.toString()));
1446+
_this._doStroke(_this._getTouchCoords(e.touches.item(i)), e.touches.item(i).identifier.toString());
14311447
}
1432-
_this._display(_this.graphPixels);
14331448
};
14341449
_this._previewTouchMoveEventListener = function (e) {
14351450
e.preventDefault();
14361451
for (var i = 0; i < e.touches.length; i++) {
1437-
_this._doStroke(_this._getTouchCoords(e.touches.item(i)), e.touches.item(i).identifier.toString());
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);
14381458
}
1439-
_this._display(_this.graphPixels);
14401459
};
14411460
options = __assign(__assign({}, RealDrawBoardDefaults.RealDrawBoardDefaults), options);
14421461
_this.options = options;
@@ -1447,7 +1466,14 @@
14471466
_this.changeTool(options.tool);
14481467
// *****DEFAULTS*****
14491468
_this._initializeKernels();
1450-
_this._snapshots[0] = _this.getData();
1469+
if (_this._maxSnapshots > 0)
1470+
_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);
14511477
return _this;
14521478
}
14531479
// --- 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: 35 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +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 stroke
4243
_snapshots: number[][] = []; // Undo snapshots
4344
_currentSnapshotIndex = 0; // Current snapshot
4445
_maxSnapshots: number;
@@ -92,14 +93,22 @@ export class RealDrawBoard extends RealRenderer {
9293
// *****DEFAULTS*****
9394

9495
this._initializeKernels();
95-
this._snapshots[0] = this.getData();
96+
if (this._maxSnapshots > 0) this._snapshots[0] = this.getData();
97+
98+
const frameHandler = () => {
99+
if (this._isStroking) this._display(this.graphPixels);
100+
window.requestAnimationFrame(frameHandler);
101+
}
102+
103+
window.requestAnimationFrame(frameHandler);
96104
}
97105
// --- DOM Event Listeners ---
98106

99107
// --- Mouse Events ---
100108
_mouseDownEventListener = (e: MouseEvent) => {
101109
if (e.button === 0 /* Left Click */) {
102110
this.canvas.addEventListener('mousemove', this._mouseMoveEventListener);
111+
this._isStroking = true;
103112

104113
this._startStroke(
105114
this._getMouseCoords(e),
@@ -113,12 +122,15 @@ export class RealDrawBoard extends RealRenderer {
113122
const endCoords = this._getMouseCoords(e);
114123
if(this._lastCoords.has('mouse')) this._endStroke(endCoords, 'mouse');
115124

125+
this._isStroking = false;
116126
this.canvas.removeEventListener('mousemove', this._mouseMoveEventListener);
117127
}
118128
}
119129

120130
_mouseLeaveEventListener = (e: MouseEvent) => {
121131
this.canvas.removeEventListener('mousemove', this._mouseMoveEventListener);
132+
this._isStroking = false;
133+
122134
if(this._lastCoords.has('mouse')) this._endStroke(this._getMouseCoords(e), 'mouse');
123135
}
124136

@@ -130,9 +142,15 @@ export class RealDrawBoard extends RealRenderer {
130142
_previewMouseMoveEventListener = (e: MouseEvent) => {
131143
const coords = this._getMouseCoords(e);
132144

133-
this._display(
134-
this._toolPreview(coords, 'mouse')
135-
)
145+
// if (!this._isStroking) {
146+
// this._display(
147+
// this._toolPreview(coords, 'mouse')
148+
// )
149+
// }
150+
// else {
151+
// this._display(this.graphPixels);
152+
// console.log('not previewing')
153+
// }
136154
}
137155
// --- Mouse Events ---
138156

@@ -141,6 +159,8 @@ export class RealDrawBoard extends RealRenderer {
141159
e.preventDefault();
142160

143161
for (let i = 0; i < e.touches.length; i++) {
162+
this._isStroking = true;
163+
144164
this._startStroke(
145165
this._getTouchCoords(e.touches.item(i)),
146166
e.touches.item(i).identifier.toString()
@@ -156,32 +176,33 @@ export class RealDrawBoard extends RealRenderer {
156176
this._getTouchCoords(e.changedTouches.item(i)),
157177
e.changedTouches.item(i).identifier.toString()
158178
)
179+
180+
this._isStroking = false;
159181
}
160182
}
161183

162184
_touchMoveEventListener = (e: TouchEvent) => {
163185
e.preventDefault();
164186

165187
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())
188+
this._doStroke(
189+
this._getTouchCoords(e.touches.item(i)),
190+
e.touches.item(i).identifier.toString()
168191
)
169192
}
170-
171-
this._display(this.graphPixels);
172193
}
173194

174195
_previewTouchMoveEventListener = (e: TouchEvent) => {
175196
e.preventDefault();
176197

177198
for (let i = 0; i < e.touches.length; i++) {
178-
this._doStroke(
179-
this._getTouchCoords(e.touches.item(i)),
180-
e.touches.item(i).identifier.toString()
181-
)
199+
// if (!this._isStroking) {
200+
// this._display(
201+
// this._toolPreview(this._getTouchCoords(e.touches.item(i)), e.touches.item(i).identifier.toString())
202+
// )
203+
// }
204+
// else this._display(this.graphPixels);
182205
}
183-
184-
this._display(this.graphPixels);
185206
}
186207
// --- Touch Events ---
187208

‎src/renderers/RealDrawBoard/boardManip.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export function clear(this: RealDrawBoard) {
3333
this._lastCoords.clear();
3434

3535
this.graphPixels = <Texture>this._blankGraph();
36-
this._snapshots[0] = this.getData();
36+
if (this._maxSnapshots > 0) this._snapshots[0] = this.getData();
3737
this._display(this.graphPixels);
3838

3939
return this;
@@ -50,7 +50,7 @@ export function _resetBoard(this: RealDrawBoard) {
5050

5151
this._isDrawing = false;
5252
this._currentSnapshotIndex = 0;
53-
this._snapshots = [this.getData()];
53+
if (this._maxSnapshots > 0) this._snapshots = [this.getData()];
5454
this._lastCoords.clear();
5555

5656
this.stopRender();

0 commit comments

Comments
 (0)