Skip to content

Commit f075c26

Browse files
author
HarshKhandeparkar
committed
feat: per tool settings
1 parent cb5c27e commit f075c26

File tree

9 files changed

+99
-71
lines changed

9 files changed

+99
-71
lines changed

‎src/constants/defaults/RealDrawBoardDefaults.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import { RealDrawBoardOptions } from '../../types/RealDrawBoardTypes';
2+
import { ToolDefaults } from '../../renderers/RealDrawBoard/tools/tools';
23

34
export const RealDrawBoardDefaults: RealDrawBoardOptions = {
4-
brushSize: 1,
5-
eraserSize: 2,
6-
brushColor: [1, 1, 1],
5+
toolSettings: ToolDefaults,
76
allowUndo: false,
87
maxUndos: 10,
98
tool: 'brush'

‎src/renderers/RealDrawBoard/RealDrawBoard.ts‎

Lines changed: 6 additions & 15 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, Texture } from 'gpu.js';
7+
import { IKernelRunShortcut } from 'gpu.js';
88

99
export * as RealRendererTypes from '../../types/RealRendererTypes';
1010
export * as RealDrawBoardTypes from '../../types/RealDrawBoardTypes';
@@ -14,10 +14,8 @@ import { _initializeKernels } from './_initializeKernels';
1414
import { _plot, _stroke } from './_draw';
1515
import { undo, redo } from './undo';
1616
import {
17-
changeBrushColor,
18-
changeBrushSize,
19-
changeEraserSize,
2017
changeTool,
18+
changeToolSetting,
2119
clear,
2220
_resetBoard
2321
} from './boardManip';
@@ -30,14 +28,12 @@ import {
3028
_getTouchCoords
3129
} from './_coords';
3230

33-
import { tools, Tool } from './tools/tools';
31+
import { tools, Tool, ToolSettings } from './tools/tools';
3432

3533
export class RealDrawBoard extends RealRenderer {
3634
options: RealDrawBoardOptions;
37-
brushSize: number;
38-
brushColor: Color;
39-
eraserSize: number;
4035
tool: Tool = RealDrawBoardDefaults.tool;
36+
toolSettings: ToolSettings;
4137
_isDrawing: boolean = false;
4238
_snapshots: (number[][][])[] = []; // Undo snapshots
4339
_currentSnapshotIndex = 0; // Current snapshot
@@ -66,9 +62,7 @@ export class RealDrawBoard extends RealRenderer {
6662

6763
public undo = undo;
6864
public redo = redo;
69-
public changeBrushColor = changeBrushColor;
70-
public changeBrushSize = changeBrushSize;
71-
public changeEraserSize = changeEraserSize;
65+
public changeToolSetting = changeToolSetting;
7266
public changeTool = changeTool;
7367
public clear = clear;
7468

@@ -83,10 +77,7 @@ export class RealDrawBoard extends RealRenderer {
8377

8478
this.options = options;
8579

86-
this.brushSize = options.brushSize;
87-
this.brushColor = options.brushColor;
88-
89-
this.eraserSize = options.eraserSize;
80+
this.toolSettings = options.toolSettings;
9081
this._maxSnapshots = options.allowUndo ? Math.max(options.maxUndos + 1, 0) : 0;
9182

9283
this.changeTool(options.tool);

‎src/renderers/RealDrawBoard/boardManip.ts‎

Lines changed: 12 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,6 @@
11
import { RealDrawBoard } from './RealDrawBoard';
2-
import { Color } from '../../types/RealRendererTypes';
32
import { Texture } from 'gpu.js';
4-
import { Tool, tools } from './tools/tools';
5-
6-
export function changeBrushColor(this: RealDrawBoard, color: Color) {
7-
this.brushColor = color;
8-
return this;
9-
}
10-
11-
export function changeBrushSize(this: RealDrawBoard, newSize: number) {
12-
this.brushSize = newSize;
13-
return this;
14-
}
15-
16-
export function changeEraserSize(this: RealDrawBoard, newSize: number) {
17-
this.eraserSize = newSize;
18-
return this;
19-
}
3+
import { Tool, tools, ToolSettings } from './tools/tools';
204

215
export function changeTool(this: RealDrawBoard, newTool: Tool) {
226
this.tool = newTool;
@@ -27,6 +11,16 @@ export function changeTool(this: RealDrawBoard, newTool: Tool) {
2711
return this;
2812
}
2913

14+
export function changeToolSetting(
15+
this: RealDrawBoard,
16+
settingName: keyof ToolSettings,
17+
value: any
18+
) {
19+
this.toolSettings[settingName] = value;
20+
21+
return this;
22+
}
23+
3024
export function clear(this: RealDrawBoard) {
3125
this._snapshots = [];
3226
this._currentSnapshotIndex = 0;
@@ -42,11 +36,9 @@ export function clear(this: RealDrawBoard) {
4236
export function _resetBoard(this: RealDrawBoard) {
4337
this.xScaleFactor = this.options.xScaleFactor;
4438
this.yScaleFactor = this.options.yScaleFactor;
45-
this.brushColor = this.options.brushColor;
46-
this.brushSize = this.options.brushSize;
4739
this.bgColor = this.options.bgColor;
48-
this.eraserSize = this.options.eraserSize;
4940
this.tool = this.options.tool;
41+
this.toolSettings = this.options.toolSettings;
5042

5143
this._isDrawing = false;
5244
this._currentSnapshotIndex = 0;

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

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

45
export const name = 'brush';
56

7+
export interface BrushSettings {
8+
brushColor: Color,
9+
brushSize: number
10+
}
11+
12+
export const BrushDefaults: BrushSettings = {
13+
brushColor: [1, 1, 1],
14+
brushSize: 1
15+
}
16+
617
export function _startStroke(
718
this: RealDrawBoard,
819
coords: [number, number],
920
identifier: string
1021
) {
1122
this._doPreview = false;
12-
this._plot(coords[0], coords[1], this.brushSize, this.brushColor);
23+
this._plot(coords[0], coords[1], this.toolSettings.brushSize, this.toolSettings.brushColor);
1324
}
1425

1526
export function _endStroke(
1627
this: RealDrawBoard,
1728
endCoords: [number, number],
1829
identifier: string
1930
) {
20-
this._plot(endCoords[0], endCoords[1], this.brushSize, this.brushColor);
31+
this._plot(endCoords[0], endCoords[1], this.toolSettings.brushSize, this.toolSettings.brushColor);
2132
this._doPreview = true;
2233
}
2334

@@ -26,8 +37,8 @@ export function _doStroke(
2637
coords: [number, number],
2738
identifier: string
2839
) {
29-
this._plot(coords[0], coords[1], this.brushSize, this.brushColor);
30-
this._stroke(coords[0], coords[1], this.brushSize, this.brushColor, identifier);
40+
this._plot(coords[0], coords[1], this.toolSettings.brushSize, this.toolSettings.brushColor);
41+
this._stroke(coords[0], coords[1], this.toolSettings.brushSize, this.toolSettings.brushColor, identifier);
3142
}
3243

3344
export function _toolPreview(
@@ -39,7 +50,7 @@ export function _toolPreview(
3950
this.graphPixels,
4051
coords[0],
4152
coords[1],
42-
this.brushSize,
43-
this.brushColor
53+
this.toolSettings.brushSize,
54+
this.toolSettings.brushColor
4455
)
4556
}

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

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,21 @@ import { Texture } from 'gpu.js';
33

44
export const name = 'eraser';
55

6+
export interface EraserSettings {
7+
eraserSize: number
8+
}
9+
10+
export const EraserDefaults: EraserSettings = {
11+
eraserSize: 2
12+
}
13+
614
export function _startStroke(
715
this: RealDrawBoard,
816
coords: [number, number],
917
identifier: string
1018
) {
1119
this._doPreview = false;
12-
this._plot(coords[0], coords[1], this.eraserSize, this.bgColor);
20+
this._plot(coords[0], coords[1], this.toolSettings.eraserSize, this.bgColor);
1321
}
1422

1523
export function _endStroke(
@@ -18,16 +26,16 @@ export function _endStroke(
1826
identifier: string
1927
) {
2028
this._doPreview = true;
21-
this._plot(endCoords[0], endCoords[1], this.eraserSize, this.bgColor);
29+
this._plot(endCoords[0], endCoords[1], this.toolSettings.eraserSize, this.bgColor);
2230
}
2331

2432
export function _doStroke(
2533
this: RealDrawBoard,
2634
coords: [number, number],
2735
identifier: string
2836
) {
29-
this._plot(coords[0], coords[1], this.eraserSize, this.bgColor);
30-
this._stroke(coords[0], coords[1], this.eraserSize, this.bgColor, identifier);
37+
this._plot(coords[0], coords[1], this.toolSettings.eraserSize, this.bgColor);
38+
this._stroke(coords[0], coords[1], this.toolSettings.eraserSize, this.bgColor, identifier);
3139
}
3240

3341
export function _toolPreview(
@@ -39,7 +47,7 @@ export function _toolPreview(
3947
this.graphPixels,
4048
coords[0],
4149
coords[1],
42-
this.eraserSize,
50+
this.toolSettings.eraserSize,
4351
this.bgColor
4452
)
4553
}

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

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

45
export const name = 'line';
56

7+
export interface LineSettings {
8+
lineSize: number,
9+
lineColor: Color
10+
}
11+
12+
export const LineDefaults: LineSettings = {
13+
lineSize: 1,
14+
lineColor: [1, 1, 1]
15+
}
16+
617
/** key -> identifier, value -> coordinate
718
* For mouse, the key is 'mouse', for touches, stringified identifier -> https://developer.mozilla.org/en-US/docs/Web/API/Touch/identifier
819
*/
@@ -13,7 +24,7 @@ export function _startStroke(
1324
coords: [number, number],
1425
identifier: string
1526
) {
16-
this._plot(coords[0], coords[1], this.brushSize, this.brushColor);
27+
this._plot(coords[0], coords[1], this.toolSettings.lineSize, this.toolSettings.lineColor);
1728
_startCoords.set(identifier, coords);
1829
}
1930

@@ -26,10 +37,10 @@ export function _endStroke(
2637
this._cloneTexture(this.graphPixels),
2738
_startCoords.get(identifier),
2839
endCoords,
29-
this.brushSize,
30-
this.brushColor
40+
this.toolSettings.lineSize,
41+
this.toolSettings.lineColor
3142
)
32-
this._plot(endCoords[0], endCoords[1], this.brushSize, this.brushColor);
43+
this._plot(endCoords[0], endCoords[1], this.toolSettings.lineSize, this.toolSettings.lineColor);
3344
_startCoords.delete(identifier);
3445
}
3546

@@ -51,20 +62,20 @@ export function _toolPreview(
5162
this._cloneTexture(this.graphPixels),
5263
_startCoords.get(identifier),
5364
coords,
54-
this.brushSize,
55-
this.brushColor
65+
this.toolSettings.lineSize,
66+
this.toolSettings.lineColor
5667
),
5768
coords[0],
5869
coords[1],
59-
this.brushSize,
60-
this.brushColor
70+
this.toolSettings.lineSize,
71+
this.toolSettings.lineColor
6172
)
6273
}
6374
else return <Texture>this._previewPlot(
6475
this.graphPixels,
6576
coords[0],
6677
coords[1],
67-
this.brushSize,
68-
this.brushColor
78+
this.toolSettings.lineSize,
79+
this.toolSettings.lineColor
6980
)
7081
}

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

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,28 @@ import { Texture } from 'gpu.js';
33
import { convertHSLToRGB } from '../../../util/convertHSLToRGB';
44

55
let hue: number = 0;
6-
let gradientColors: [number, number, number] = [1, 1, 1];
6+
let gradientColors: [number, number, number] = [1, 1, 1];
77

88
export const name = 'rainbow_brush';
99

10+
export interface RainbowBrushSettings {
11+
brushSize: number,
12+
changeSpeed: number
13+
}
14+
15+
export const RainbowBrushDefaults: RainbowBrushSettings = {
16+
brushSize: 1,
17+
changeSpeed: 1
18+
}
19+
1020
export function _startStroke(
1121
this: RealDrawBoard,
1222
coords: [number, number],
1323
identifier: string
1424
) {
1525
gradientColors = convertHSLToRGB(hue, 90, 40);
1626
this._doPreview = false;
17-
this._plot(coords[0], coords[1], this.brushSize, gradientColors);
27+
this._plot(coords[0], coords[1], this.toolSettings.brushSize, gradientColors);
1828
}
1929

2030
export function _endStroke(
@@ -23,7 +33,7 @@ export function _endStroke(
2333
identifier: string
2434
) {
2535
gradientColors = convertHSLToRGB(hue, 90, 40);
26-
this._plot(endCoords[0], endCoords[1], this.brushSize, gradientColors);
36+
this._plot(endCoords[0], endCoords[1], this.toolSettings.brushSize, gradientColors);
2737
this._doPreview = true;
2838
}
2939

@@ -32,10 +42,10 @@ export function _doStroke(
3242
coords: [number, number],
3343
identifier: string
3444
) {
35-
hue = (hue + 1) % 360;
45+
hue = (hue + this.toolSettings.changeSpeed ) % 360;
3646
gradientColors = convertHSLToRGB(hue, 90, 40);
37-
this._plot(coords[0], coords[1], this.brushSize, gradientColors);
38-
this._stroke(coords[0], coords[1], this.brushSize, gradientColors, identifier);
47+
this._plot(coords[0], coords[1], this.toolSettings.brushSize, gradientColors);
48+
this._stroke(coords[0], coords[1], this.toolSettings.brushSize, gradientColors, identifier);
3949
}
4050

4151
export function _toolPreview(
@@ -47,7 +57,7 @@ export function _toolPreview(
4757
this.graphPixels,
4858
coords[0],
4959
coords[1],
50-
this.brushSize,
60+
this.toolSettings.brushSize,
5161
gradientColors
5262
)
5363
}

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,11 @@ export const tools = {
1111
}
1212

1313
export type Tool = 'brush' | 'rainbow_brush' | 'eraser' | 'line';
14+
15+
export type ToolSettings = brush.BrushSettings & eraser.EraserSettings & line.LineSettings & rainbow_brush.RainbowBrushSettings;
16+
export const ToolDefaults: ToolSettings = {
17+
...brush.BrushDefaults,
18+
...line.LineDefaults,
19+
...eraser.EraserDefaults,
20+
...rainbow_brush.RainbowBrushDefaults
21+
}

‎src/types/RealDrawBoardTypes.ts‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
1-
import { RealRendererOptions, Color } from './RealRendererTypes';
2-
import { Tool } from '../renderers/RealDrawBoard/tools/tools';
1+
import { RealRendererOptions } from './RealRendererTypes';
2+
import { Tool, ToolSettings } from '../renderers/RealDrawBoard/tools/tools';
33

44
export interface RealDrawBoardOptions extends RealRendererOptions {
5-
brushSize?: number,
6-
brushColor?: Color,
7-
eraserSize?: number,
5+
toolSettings?: ToolSettings,
86
allowUndo?: boolean,
97
maxUndos?: number,
108
tool?: Tool

0 commit comments

Comments
 (0)