Merge remote-tracking branch 'refs/remotes/origin/work/stroke-eraser'…

… into work/stroke-eraser

packages/js-draw/src/toolbar/localization.ts

@@ -31,6 +31,9 @@ export interface ToolbarLocalization extends ToolbarUtilsLocalization {
 	resizeImageToSelection: string;
 	deleteSelection: string;
 	duplicateSelection: string;
+	eraserType: string;
+	fullStrokeEraser: string;
+	partialStrokeEraser: string;
 
 	pickColorFromScreen: string;
 	clickToPickColorAnnouncement: string;
@@ -130,6 +133,9 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 	undo: 'Undo',
 	redo: 'Redo',
 
+	eraserType: 'Eraser type',
+	fullStrokeEraser: 'Full stroke eraser',
+	partialStrokeEraser: 'Partial stroke eraser',
 	selectPenTip: 'Pen tip',
 	selectShape: 'Shape',
 	pickColorFromScreen: 'Pick color from screen',

packages/js-draw/src/toolbar/widgets/EraserToolWidget.ts

@@ -1,10 +1,11 @@
 import Editor from '../../Editor';
-import Eraser from '../../tools/Eraser';
+import Eraser, { EraserMode } from '../../tools/Eraser';
 import { EditorEventType } from '../../types';
 import { toolbarCSSPrefix } from '../constants';
 import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
 import { SavedToolbuttonState } from './BaseWidget';
+import makeGridSelector from './components/makeGridSelector';
 import makeThicknessSlider from './components/makeThicknessSlider';
 
 export default class EraserToolWidget extends BaseToolWidget {
@@ -29,8 +30,44 @@ export default class EraserToolWidget extends BaseToolWidget {
 		return this.localizationTable.eraser;
 	}
 
+	private makeIconForType(mode: EraserMode) {
+		if (mode === EraserMode.FullStroke) {
+			return this.editor.icons.makeEraserIcon(this.tool.getThickness());
+		} else if (mode === EraserMode.PartialStroke) {
+			return this.editor.icons.makeCloseIcon();//this.tool.getThickness());
+		} else {
+			const exhaustivenessCheck: never = mode;
+			return exhaustivenessCheck;
+		}
+	}
+
 	protected createIcon(): Element {
-		return this.editor.icons.makeEraserIcon(this.tool.getThickness());
+		return this.makeIconForType(this.tool.getModeValue().get());
+	}
+
+	private makeEraserTypeSelector() {
+		const eraserTypeChoices = [ EraserMode.FullStroke, EraserMode.PartialStroke ].map(mode => ({
+			id: mode,
+			makeIcon: () => this.makeIconForType(mode),
+			title: mode === EraserMode.FullStroke ? this.localizationTable.fullStrokeEraser : this.localizationTable.partialStrokeEraser,
+		}));
+		const selector = makeGridSelector(
+			this.localizationTable.eraserType,
+			this.tool.getModeValue().get(),
+			eraserTypeChoices,
+		);
+		selector.value.onUpdate(value => {
+			this.tool.getModeValue().set(value);
+		});
+
+		return {
+			addTo: (parent: HTMLElement) => {
+				selector.addTo(parent);
+			},
+			setValue: (value: EraserMode) => {
+				selector.value.set(value);
+			},
+		};
 	}
 
 	protected override fillDropdown(dropdown: HTMLElement): boolean {
@@ -43,16 +80,16 @@ export default class EraserToolWidget extends BaseToolWidget {
 		});
 		thicknessSlider.setBounds(10, 55);
 
+		const modeSelector = this.makeEraserTypeSelector();
+
 		this.updateInputs = () => {
 			thicknessSlider.setValue(this.tool.getThickness());
+			modeSelector.setValue(this.tool.getModeValue().get());
 		};
-
 		this.updateInputs();
 
-		const spacer = document.createElement('div');
-		spacer.style.height = '5px';
-
-		container.replaceChildren(thicknessSlider.container, spacer);
+		container.replaceChildren(thicknessSlider.container);
+		modeSelector.addTo(container);
 
 		dropdown.replaceChildren(container);
 		return true;

packages/js-draw/src/tools/Eraser.ts

@@ -19,10 +19,15 @@ export enum EraserMode {
 	FullStroke = 'full-stroke',
 }
 
+export interface InitialEraserOptions {
+	thickness?: number;
+	mode?: EraserMode;
+}
+
 export default class Eraser extends BaseTool {
 	private lastPoint: Point2|null = null;
 	private isFirstEraseEvt: boolean = true;
-	private thickness: number = 10;
+	private thickness: number;
 	private thicknessValue: MutableReactiveValue<number>;
 	private modeValue: MutableReactiveValue<EraserMode>;
 
@@ -34,9 +39,11 @@ export default class Eraser extends BaseTool {
 	private eraseCommands: Erase[] = [];
 	private addCommands: Command[] = [];
 
-	public constructor(private editor: Editor, description: string) {
+	public constructor(private editor: Editor, description: string, options?: InitialEraserOptions) {
 		super(editor.notifier, description);
 
+		this.thickness = options?.thickness ?? 10;
+
 		this.thicknessValue = ReactiveValue.fromInitialValue(this.thickness);
 		this.thicknessValue.onUpdate(value => {
 			this.thickness = value;
@@ -46,7 +53,7 @@ export default class Eraser extends BaseTool {
 				tool: this,
 			});
 		});
-		this.modeValue = ReactiveValue.fromInitialValue(EraserMode.PartialStroke);
+		this.modeValue = ReactiveValue.fromInitialValue(options?.mode ?? EraserMode.FullStroke);
 		this.modeValue.onUpdate(_value => {
 			this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
 				kind: EditorEventType.ToolUpdated,
@@ -259,4 +266,8 @@ export default class Eraser extends BaseTool {
 	public getThicknessValue() {
 		return this.thicknessValue;
 	}
+
+	public getModeValue() {
+		return this.modeValue;
+	}
 }