Skip to content

Commit 40ef812

Browse files
author
HarshKhandeparkar
committed
refactor: tools
1 parent 1d909c5 commit 40ef812

File tree

10 files changed

+225
-85
lines changed

10 files changed

+225
-85
lines changed

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

Lines changed: 102 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1013,7 +1013,7 @@
10131013
brushColor: [1, 1, 1],
10141014
allowUndo: false,
10151015
maxUndos: 10,
1016-
mode: 'paint'
1016+
tool: 'brush'
10171017
};
10181018
});
10191019

@@ -1037,15 +1037,15 @@
10371037
var _draw = createCommonjsModule(function (module, exports) {
10381038
Object.defineProperty(exports, "__esModule", { value: true });
10391039
exports._stroke = exports._plot = void 0;
1040-
function _plot(x, y) {
1041-
this.graphPixels = this._plotKernel(this._cloneTexture(this.graphPixels), x, y, this.mode === 'paint' ? this.brushSize : this.eraserSize, this.mode === 'paint' ? this.brushColor : this.bgColor);
1040+
function _plot(x, y, size, color) {
1041+
this.graphPixels = this._plotKernel(this._cloneTexture(this.graphPixels), x, y, size, color);
10421042
return this;
10431043
}
10441044
exports._plot = _plot;
1045-
function _stroke(x, y, identifier) {
1045+
function _stroke(x, y, size, color, identifier) {
10461046
if (!this._lastCoords.has(identifier))
10471047
this._lastCoords.set(identifier, [x, y]);
1048-
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);
1048+
this.graphPixels = this._strokeKernel(this._cloneTexture(this.graphPixels), this._lastCoords.get(identifier), [x, y], size, color);
10491049
}
10501050
exports._stroke = _stroke;
10511051
});
@@ -1076,9 +1076,89 @@
10761076
exports.redo = redo;
10771077
});
10781078

1079+
var brush = createCommonjsModule(function (module, exports) {
1080+
Object.defineProperty(exports, "__esModule", { value: true });
1081+
exports._toolPreview = exports._doStroke = exports._endStroke = exports._startStroke = exports.name = void 0;
1082+
exports.name = 'brush';
1083+
function _startStroke(coords, identifier) {
1084+
if (this._currentSnapshotIndex < this._snapshots.length - 1 && this._maxSnapshots > 0)
1085+
this._snapshots.splice(this._currentSnapshotIndex + 1); // Delete all redo snapshots
1086+
this._plot(coords[0], coords[1], this.brushSize, this.brushColor);
1087+
this._lastCoords.set(identifier, coords);
1088+
}
1089+
exports._startStroke = _startStroke;
1090+
function _endStroke(endCoords, identifier) {
1091+
this._plot(endCoords[0], endCoords[1], this.brushSize, this.brushColor);
1092+
this._lastCoords.delete(identifier);
1093+
if (this._maxSnapshots > 0)
1094+
this._snapshots[++this._currentSnapshotIndex] = this.getData();
1095+
if (this._snapshots.length > this._maxSnapshots) {
1096+
this._snapshots.shift();
1097+
this._currentSnapshotIndex--;
1098+
}
1099+
}
1100+
exports._endStroke = _endStroke;
1101+
function _doStroke(coords, identifier) {
1102+
this._plot(coords[0], coords[1], this.brushSize, this.brushColor);
1103+
this._stroke(coords[0], coords[1], this.brushSize, this.brushColor, identifier);
1104+
this._lastCoords.set(identifier, coords);
1105+
}
1106+
exports._doStroke = _doStroke;
1107+
function _toolPreview(coords) {
1108+
return this._previewPlot(this.graphPixels, coords[0], coords[1], this.brushSize, this.brushColor);
1109+
}
1110+
exports._toolPreview = _toolPreview;
1111+
});
1112+
1113+
var eraser = createCommonjsModule(function (module, exports) {
1114+
Object.defineProperty(exports, "__esModule", { value: true });
1115+
exports._toolPreview = exports._doStroke = exports._endStroke = exports._startStroke = exports.name = void 0;
1116+
exports.name = 'eraser';
1117+
function _startStroke(coords, identifier) {
1118+
if (this._currentSnapshotIndex < this._snapshots.length - 1 && this._maxSnapshots > 0)
1119+
this._snapshots.splice(this._currentSnapshotIndex + 1); // Delete all redo snapshots
1120+
this._plot(coords[0], coords[1], this.eraserSize, this.bgColor);
1121+
this._lastCoords.set(identifier, coords);
1122+
}
1123+
exports._startStroke = _startStroke;
1124+
function _endStroke(endCoords, identifier) {
1125+
this._plot(endCoords[0], endCoords[1], this.eraserSize, this.bgColor);
1126+
this._lastCoords.delete(identifier);
1127+
if (this._maxSnapshots > 0)
1128+
this._snapshots[++this._currentSnapshotIndex] = this.getData();
1129+
if (this._snapshots.length > this._maxSnapshots) {
1130+
this._snapshots.shift();
1131+
this._currentSnapshotIndex--;
1132+
}
1133+
}
1134+
exports._endStroke = _endStroke;
1135+
function _doStroke(coords, identifier) {
1136+
this._plot(coords[0], coords[1], this.eraserSize, this.bgColor);
1137+
this._stroke(coords[0], coords[1], this.eraserSize, this.bgColor, identifier);
1138+
this._lastCoords.set(identifier, coords);
1139+
}
1140+
exports._doStroke = _doStroke;
1141+
function _toolPreview(coords) {
1142+
return this._previewPlot(this.graphPixels, coords[0], coords[1], this.eraserSize, this.bgColor);
1143+
}
1144+
exports._toolPreview = _toolPreview;
1145+
});
1146+
1147+
var tools = createCommonjsModule(function (module, exports) {
1148+
Object.defineProperty(exports, "__esModule", { value: true });
1149+
exports.tools = void 0;
1150+
1151+
1152+
exports.tools = {
1153+
brush: brush,
1154+
eraser: eraser
1155+
};
1156+
});
1157+
10791158
var boardManip = createCommonjsModule(function (module, exports) {
10801159
Object.defineProperty(exports, "__esModule", { value: true });
1081-
exports._resetBoard = exports.clear = exports.changeMode = exports.changeEraserSize = exports.changeBrushSize = exports.changeBrushColor = void 0;
1160+
exports._resetBoard = exports.clear = exports.changeTool = exports.changeEraserSize = exports.changeBrushSize = exports.changeBrushColor = void 0;
1161+
10821162
function changeBrushColor(color) {
10831163
this.brushColor = color;
10841164
return this;
@@ -1094,11 +1174,15 @@
10941174
return this;
10951175
}
10961176
exports.changeEraserSize = changeEraserSize;
1097-
function changeMode(newMode) {
1098-
this.mode = newMode;
1177+
function changeTool(newTool) {
1178+
this.tool = newTool;
1179+
this._startStroke = tools.tools[this.tool]._startStroke;
1180+
this._doStroke = tools.tools[this.tool]._doStroke;
1181+
this._endStroke = tools.tools[this.tool]._endStroke;
1182+
this._toolPreview = tools.tools[this.tool]._toolPreview;
10991183
return this;
11001184
}
1101-
exports.changeMode = changeMode;
1185+
exports.changeTool = changeTool;
11021186
function clear() {
11031187
this._snapshots = [];
11041188
this._currentSnapshotIndex = 0;
@@ -1116,7 +1200,7 @@
11161200
this.brushSize = this.options.brushSize;
11171201
this.bgColor = this.options.bgColor;
11181202
this.eraserSize = this.options.eraserSize;
1119-
this.mode = this.options.mode;
1203+
this.tool = this.options.tool;
11201204
this._isDrawing = false;
11211205
this._currentSnapshotIndex = 0;
11221206
this._snapshots = [this.getData()];
@@ -1151,36 +1235,6 @@
11511235
exports._removeDOMEvents = _removeDOMEvents;
11521236
});
11531237

1154-
var stroke = createCommonjsModule(function (module, exports) {
1155-
Object.defineProperty(exports, "__esModule", { value: true });
1156-
exports._doStroke = exports._endStroke = exports._startStroke = void 0;
1157-
function _startStroke(coords, identifier) {
1158-
if (this._currentSnapshotIndex < this._snapshots.length - 1 && this._maxSnapshots > 0)
1159-
this._snapshots.splice(this._currentSnapshotIndex + 1); // Delete all redo snapshots
1160-
this._plot.apply(// Delete all redo snapshots
1161-
this, coords);
1162-
this._lastCoords.set(identifier, coords);
1163-
}
1164-
exports._startStroke = _startStroke;
1165-
function _endStroke(endCoords, identifier) {
1166-
this._plot.apply(this, endCoords);
1167-
this._lastCoords.delete(identifier);
1168-
if (this._maxSnapshots > 0)
1169-
this._snapshots[++this._currentSnapshotIndex] = this.getData();
1170-
if (this._snapshots.length > this._maxSnapshots) {
1171-
this._snapshots.shift();
1172-
this._currentSnapshotIndex--;
1173-
}
1174-
}
1175-
exports._endStroke = _endStroke;
1176-
function _doStroke(coords, identifier) {
1177-
this._plot.apply(this, coords);
1178-
this._stroke(coords[0], coords[1], identifier);
1179-
this._lastCoords.set(identifier, coords);
1180-
}
1181-
exports._doStroke = _doStroke;
1182-
});
1183-
11841238
var _coords = createCommonjsModule(function (module, exports) {
11851239
Object.defineProperty(exports, "__esModule", { value: true });
11861240
exports._getTouchCoords = exports._getMouseCoords = void 0;
@@ -1261,6 +1315,7 @@
12611315
var _this =
12621316
// *****DEFAULTS*****
12631317
_super.call(this, options) || this;
1318+
_this.tool = RealDrawBoardDefaults.RealDrawBoardDefaults.tool;
12641319
_this._isDrawing = false;
12651320
_this._snapshots = []; // Undo snapshots
12661321
_this._currentSnapshotIndex = 0; // Current snapshot
@@ -1274,17 +1329,18 @@
12741329
_this._resetBoard = boardManip._resetBoard;
12751330
_this._addDOMEvents = _DOMEvents._addDOMEvents;
12761331
_this._removeDOMEvents = _DOMEvents._removeDOMEvents;
1277-
_this._startStroke = stroke._startStroke;
1278-
_this._endStroke = stroke._endStroke;
1279-
_this._doStroke = stroke._doStroke;
1332+
_this._startStroke = tools.tools[RealDrawBoardDefaults.RealDrawBoardDefaults.tool]._startStroke;
1333+
_this._endStroke = tools.tools[RealDrawBoardDefaults.RealDrawBoardDefaults.tool]._endStroke;
1334+
_this._doStroke = tools.tools[RealDrawBoardDefaults.RealDrawBoardDefaults.tool]._doStroke;
1335+
_this._toolPreview = tools.tools[RealDrawBoardDefaults.RealDrawBoardDefaults.tool]._toolPreview;
12801336
_this._getMouseCoords = _coords._getMouseCoords;
12811337
_this._getTouchCoords = _coords._getTouchCoords;
12821338
_this.undo = undo_1.undo;
12831339
_this.redo = undo_1.redo;
12841340
_this.changeBrushColor = boardManip.changeBrushColor;
12851341
_this.changeBrushSize = boardManip.changeBrushSize;
12861342
_this.changeEraserSize = boardManip.changeEraserSize;
1287-
_this.changeMode = boardManip.changeMode;
1343+
_this.changeTool = boardManip.changeTool;
12881344
_this.clear = boardManip.clear;
12891345
// --- DOM Event Listeners ---
12901346
// --- Mouse Events ---
@@ -1313,7 +1369,7 @@
13131369
};
13141370
_this._previewMouseMoveEventListener = function (e) {
13151371
var coords = _this._getMouseCoords(e);
1316-
_this._display(_this._previewPlot(_this.graphPixels, coords[0], coords[1], _this.mode === 'paint' ? _this.brushSize : _this.eraserSize, _this.mode === 'erase' ? _this.bgColor : _this.brushColor));
1372+
_this._display(_this._toolPreview(coords));
13171373
};
13181374
// --- Mouse Events ---
13191375
// --- Touch Events ---
@@ -1342,7 +1398,7 @@
13421398
_this.brushColor = options.brushColor;
13431399
_this.eraserSize = options.eraserSize;
13441400
_this._maxSnapshots = options.allowUndo ? Math.max(options.maxUndos + 1, 0) : 0;
1345-
_this.mode = options.mode;
1401+
_this.changeTool(options.tool);
13461402
// *****DEFAULTS*****
13471403
_this._initializeKernels();
13481404
_this._snapshots[0] = _this.getData();

‎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/constants/defaults/RealDrawBoardDefaults.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,5 @@ export const RealDrawBoardDefaults: RealDrawBoardOptions = {
66
brushColor: [1, 1, 1],
77
allowUndo: false,
88
maxUndos: 10,
9-
mode: 'paint'
9+
tool: 'brush'
1010
}

‎src/renderers/RealDrawBoard/RealDrawBoard.ts‎

Lines changed: 12 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { RealRenderer } from '../RealRenderer';
22

33
import { Color } from '../../types/RealRendererTypes';
4-
import { RealDrawBoardOptions, DrawMode } from '../../types/RealDrawBoardTypes';
4+
import { RealDrawBoardOptions } from '../../types/RealDrawBoardTypes';
55
import { RealDrawBoardDefaults } from '../../constants/defaults/RealDrawBoardDefaults';
66

77
import { IKernelRunShortcut } from 'gpu.js';
@@ -17,30 +17,27 @@ import {
1717
changeBrushColor,
1818
changeBrushSize,
1919
changeEraserSize,
20-
changeMode,
20+
changeTool,
2121
clear,
2222
_resetBoard
2323
} from './boardManip';
2424
import {
2525
_addDOMEvents,
2626
_removeDOMEvents
2727
} from './_DOMEvents';
28-
import {
29-
_startStroke,
30-
_endStroke,
31-
_doStroke
32-
} from './stroke';
3328
import {
3429
_getMouseCoords,
3530
_getTouchCoords
3631
} from './_coords';
3732

33+
import { tools, Tool } from './tools/tools';
34+
3835
export class RealDrawBoard extends RealRenderer {
3936
options: RealDrawBoardOptions;
4037
brushSize: number;
4138
brushColor: Color;
4239
eraserSize: number;
43-
mode: DrawMode;
40+
tool: Tool = RealDrawBoardDefaults.tool;
4441
_isDrawing: boolean = false;
4542
_snapshots: number[][] = []; // Undo snapshots
4643
_currentSnapshotIndex = 0; // Current snapshot
@@ -59,9 +56,10 @@ export class RealDrawBoard extends RealRenderer {
5956
protected _resetBoard = _resetBoard;
6057
protected _addDOMEvents = _addDOMEvents;
6158
protected _removeDOMEvents = _removeDOMEvents;
62-
protected _startStroke = _startStroke;
63-
protected _endStroke = _endStroke;
64-
protected _doStroke = _doStroke;
59+
protected _startStroke = tools[RealDrawBoardDefaults.tool]._startStroke;
60+
protected _endStroke = tools[RealDrawBoardDefaults.tool]._endStroke;
61+
protected _doStroke = tools[RealDrawBoardDefaults.tool]._doStroke;
62+
protected _toolPreview = tools[RealDrawBoardDefaults.tool]._toolPreview;
6563
protected _getMouseCoords = _getMouseCoords;
6664
protected _getTouchCoords = _getTouchCoords;
6765

@@ -70,7 +68,7 @@ export class RealDrawBoard extends RealRenderer {
7068
public changeBrushColor = changeBrushColor;
7169
public changeBrushSize = changeBrushSize;
7270
public changeEraserSize = changeEraserSize;
73-
public changeMode = changeMode;
71+
public changeTool = changeTool;
7472
public clear = clear;
7573

7674
constructor(options: RealDrawBoardOptions) {
@@ -90,7 +88,7 @@ export class RealDrawBoard extends RealRenderer {
9088
this.eraserSize = options.eraserSize;
9189
this._maxSnapshots = options.allowUndo ? Math.max(options.maxUndos + 1, 0) : 0;
9290

93-
this.mode = options.mode;
91+
this.changeTool(options.tool);
9492
// *****DEFAULTS*****
9593

9694
this._initializeKernels();
@@ -133,13 +131,7 @@ export class RealDrawBoard extends RealRenderer {
133131
const coords = this._getMouseCoords(e);
134132

135133
this._display(
136-
this._previewPlot(
137-
this.graphPixels,
138-
coords[0],
139-
coords[1],
140-
this.mode === 'paint' ? this.brushSize : this.eraserSize,
141-
this.mode === 'erase' ? this.bgColor : this.brushColor
142-
)
134+
this._toolPreview(coords)
143135
)
144136
}
145137
// --- Mouse Events ---

‎src/renderers/RealDrawBoard/_draw.ts‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
11
import { RealDrawBoard } from './RealDrawBoard';
22
import { Texture } from 'gpu.js';
3+
import { Color } from '../../types/RealRendererTypes';
34

4-
export function _plot(this: RealDrawBoard, x: number, y: number) {
5+
export function _plot(
6+
this: RealDrawBoard,
7+
x: number,
8+
y: number,
9+
size: number,
10+
color: Color
11+
) {
512
this.graphPixels = <Texture>this._plotKernel(
613
this._cloneTexture(this.graphPixels),
714
x,
815
y,
9-
this.mode === 'paint' ? this.brushSize : this.eraserSize,
10-
this.mode === 'paint' ? this.brushColor : this.bgColor
16+
size,
17+
color
1118
)
1219

1320
return this;
@@ -17,6 +24,8 @@ export function _stroke(
1724
this: RealDrawBoard,
1825
x: number,
1926
y: number,
27+
size: number,
28+
color: Color,
2029
identifier: string
2130
) {
2231
if (!this._lastCoords.has(identifier)) this._lastCoords.set(identifier, [x, y]);
@@ -25,7 +34,7 @@ export function _stroke(
2534
this._cloneTexture(this.graphPixels),
2635
this._lastCoords.get(identifier),
2736
[x, y],
28-
this.mode === 'paint' ? this.brushSize : this.eraserSize,
29-
this.mode === 'paint' ? this.brushColor : this.bgColor
37+
size,
38+
color
3039
)
3140
}

0 commit comments

Comments
 (0)