js-draw 0.25.1 → 1.0.1

package/src/tools/SelectionTool/SelectionTool.css

@@ -1,23 +1,35 @@
 
 .selection-tool-selection-background {
-    background-color: var(--secondary-background-color);
-    opacity: 0.5;
-    overflow: visible;
-    position: absolute;
+	background-color: var(--selection-background-color);
+	opacity: 0.5;
+	overflow: visible;
+	position: absolute;
 }
 
 .selection-tool-handle {
-    border: 1px solid var(--primary-foreground-color);
-    background: var(--primary-background-color);
-    position: absolute;
-    cursor: grab;
+	border: 1px solid var(--foreground-color-1);
+	background: var(--background-color-1);
+	position: absolute;
+	cursor: grab;
 }
 
 .selection-tool-handle.selection-tool-circle {
-    border-radius: 100%;
+	border-radius: 100%;
 }
 
 .overlay.handleOverlay {
-    height: 0;
-    overflow: visible;
+	height: 0;
+	overflow: visible;
+}
+
+@keyframes selection-duplicated-animation {
+	0% { transform: scale(1, 1); }
+	50% { transform: scale(1.02, 1.02); }
+	100% { transform: scale(1, 1); }
+}
+
+/* Do not run the animation when the user has disabled motion animations. */
+@media (prefers-reduced-motion: reduce) {
+	@keyframes selection-duplicated-animation {
+	}
 }

package/src/tools/SelectionTool/SelectionTool.test.ts

@@ -1,16 +1,15 @@
-import Color4 from '../../Color4';
 import Stroke from '../../components/Stroke';
 import Editor from '../../Editor';
 import EditorImage from '../../EditorImage';
-import Path from '../../math/shapes/Path';
-import { Vec2 } from '../../math/Vec2';
-import { InputEvtType } from '../../types';
+import { InputEvtType } from '../../inputEvents';
 import Selection from './Selection';
 import SelectionTool from './SelectionTool';
 import createEditor from '../../testing/createEditor';
 import Pointer from '../../Pointer';
-import { Rect2 } from '../../lib';
+import { Rect2, Vec2, Path, Color4 } from '@js-draw/math';
 import sendPenEvent from '../../testing/sendPenEvent';
+import { pathToRenderable } from '../../rendering/RenderablePathSpec';
+import { EditorEventType } from '../../types';
 
 const getSelectionTool = (editor: Editor): SelectionTool => {
 	return editor.toolController.getMatchingTools(SelectionTool)[0];
@@ -19,7 +18,7 @@ const getSelectionTool = (editor: Editor): SelectionTool => {
 const createSquareStroke = (size: number = 1) => {
 	const testStroke = new Stroke([
 		// A filled square
-		Path.fromString(`M0,0 L${size},0 L${size},${size} L0,${size} Z`).toRenderable({ fill: Color4.blue }),
+		pathToRenderable(Path.fromString(`M0,0 L${size},0 L${size},${size} L0,${size} Z`), { fill: Color4.blue }),
 	]);
 	const addTestStrokeCommand = EditorImage.addElement(testStroke);
 
@@ -42,9 +41,7 @@ const createEditorWithSingleObjectSelection = (objectSize: number = 50) => {
 };
 
 const dragSelection = (editor: Editor, selection: Selection, startPt: Vec2, endPt: Vec2) => {
-	const backgroundElem = selection.getBackgroundElem();
-
-	selection.onDragStart(Pointer.ofCanvasPoint(startPt, true, editor.viewport), backgroundElem);
+	selection.onDragStart(Pointer.ofCanvasPoint(startPt, true, editor.viewport));
 	jest.advanceTimersByTime(100);
 
 	selection.onDragUpdate(Pointer.ofCanvasPoint(endPt, true, editor.viewport));
@@ -143,13 +140,13 @@ describe('SelectionTool', () => {
 		editor.sendKeyboardEvent(InputEvtType.KeyUpEvent, 'Shift');
 
 		// Select the larger stroke without shift pressed
-		sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(200, 200));
-		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(600, 600));
+		sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(600, 600));
+		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(200, 200));
 		expect(selectionTool.getSelectedObjects()).toHaveLength(1);
 
 		// Select nothing
-		sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(200, 200));
-		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(201, 201));
+		sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(2000, 200));
+		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(2001, 201));
 		expect(selectionTool.getSelectedObjects()).toHaveLength(0);
 	});
 
@@ -157,8 +154,7 @@ describe('SelectionTool', () => {
 		const { editor, selectionTool } = createEditorWithSingleObjectSelection(50);
 
 		const selection = selectionTool.getSelection()!;
-		const backgroundElem = selection.getBackgroundElem();
-		selection.onDragStart(Pointer.ofCanvasPoint(Vec2.of(0, 0), true, editor.viewport), backgroundElem);
+		selection.onDragStart(Pointer.ofCanvasPoint(Vec2.of(0, 0), true, editor.viewport));
 		jest.advanceTimersByTime(100);
 		selection.onDragUpdate(Pointer.ofCanvasPoint(Vec2.of(20, 0), true, editor.viewport));
 		jest.advanceTimersByTime(100);
@@ -197,15 +193,64 @@ describe('SelectionTool', () => {
 		expect(testStroke.getBBox().topLeft).objEq(Vec2.of(10, 0));
 	});
 
+	it('rotation handle should rotate the selection', () => {
+		const { addTestStrokeCommand: strokeCommand } = createSquareStroke(50);
+
+		const editor = createEditor();
+		editor.dispatch(strokeCommand);
+
+		// Select the first stroke
+		const selectionTool = getSelectionTool(editor);
+		selectionTool.setEnabled(true);
+		sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(40, 40));
+		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(100, 100));
+
+		// Drag the rotate handle, which should be located halfway across
+		// the top of the selection box
+		sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(25, 0));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(30, 0));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(0, 25));
+
+		// Rotate 45 degrees:
+		//  Drag start (resize circle)
+		//     ↓
+		// .---o---x ← y=0, drag end
+		// |       |
+		// |       |
+		// |       |
+		// .-------.
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(50, 0));
+		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(50, 0));
+
+		expect(selectionTool.getSelectedObjects()).toHaveLength(1);
+
+		// Deselect & add the item back to the editor
+		sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(1250, 0));
+		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(1250, 0));
+
+		expect(selectionTool.getSelectedObjects()).toHaveLength(0);
+
+		const imageStrokes = editor.image.getAllElements();
+		expect(imageStrokes).toHaveLength(1);
+
+		const transformedStroke = imageStrokes[0] as Stroke;
+		const strokePoints = transformedStroke.getPath().polylineApproximation().map(line => line.p1);
+
+		// One point should now be just above the center of the square:
+		//      .  ←
+		//   .     .
+		//      .
+		//
+		expect(strokePoints.filter(point => point.eq(Vec2.of(Math.hypot(25, 0), 0)))).toHaveLength(1);
+	});
+
 	it('dragCancel should return a selection to its original position', () => {
 		const { editor, selectionTool, testStroke } = createEditorWithSingleObjectSelection(150);
 
 		const selection = selectionTool.getSelection()!;
-		const dragBackground = selection.getBackgroundElem();
-
 		expect(testStroke.getBBox().topLeft).objEq(Vec2.zero);
 
-		selection.onDragStart(Pointer.ofCanvasPoint(Vec2.of(10, 0), true, editor.viewport), dragBackground);
+		selection.onDragStart(Pointer.ofCanvasPoint(Vec2.of(10, 0), true, editor.viewport));
 		jest.advanceTimersByTime(100);
 		selection.onDragUpdate(Pointer.ofCanvasPoint(Vec2.of(200, 10), true, editor.viewport));
 		jest.advanceTimersByTime(100);
@@ -219,9 +264,7 @@ describe('SelectionTool', () => {
 		const { editor, selectionTool, testStroke } = createEditorWithSingleObjectSelection(150);
 
 		const selection = selectionTool.getSelection()!;
-		const dragBackground = selection.getBackgroundElem();
-
-		selection.onDragStart(Pointer.ofCanvasPoint(Vec2.of(0, 0), true, editor.viewport), dragBackground);
+		selection.onDragStart(Pointer.ofCanvasPoint(Vec2.of(0, 0), true, editor.viewport));
 		jest.advanceTimersByTime(100);
 		selection.onDragUpdate(Pointer.ofCanvasPoint(Vec2.of(20, 0), true, editor.viewport));
 
@@ -258,4 +301,70 @@ describe('SelectionTool', () => {
 		expect(editor.image.findParent(testStroke)).not.toBeNull();
 		expect(testStroke.getBBox()).objEq(new Rect2(30, 10, 150, 150));
 	});
+
+	it('should only fire the SelectionChanged event if the selection changed', () => {
+		const { editor, selectionTool, testStroke } = createEditorWithSingleObjectSelection(150);
+
+		selectionTool.clearSelection();
+
+		const updatedListener = jest.fn();
+		editor.notifier.on(EditorEventType.SelectionUpdated, updatedListener);
+
+		expect(updatedListener).toHaveBeenCalledTimes(0);
+
+		selectionTool.setEnabled(true);
+		sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(0, 0));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(10, 10));
+
+		// Should not be notified until the selection ends
+		expect(updatedListener).toHaveBeenCalledTimes(0);
+
+		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(5, 5));
+
+		expect(updatedListener).toHaveBeenCalledTimes(1);
+		expect(updatedListener).toHaveBeenLastCalledWith({
+			kind: EditorEventType.SelectionUpdated,
+			tool: selectionTool,
+			selectedComponents: [ testStroke ]
+		});
+
+		// Selecting the same content should not re-fire the listener
+		sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(0, 0));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(10, 10));
+		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(5, 5));
+
+		expect(updatedListener).toHaveBeenCalledTimes(1);
+
+		// ...but selecting a different item should.
+		const secondStroke = createSquareStroke(3000); // Large to ensure that we don't drag the selection instead.
+		editor.dispatch(secondStroke.addTestStrokeCommand);
+
+		expect(updatedListener).toHaveBeenCalledTimes(1);
+
+		sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(2999, 2999));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(3001, 3001));
+		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(3002, 3002));
+
+		expect(updatedListener).toHaveBeenCalledTimes(2);
+		expect(updatedListener).toHaveBeenLastCalledWith({
+			kind: EditorEventType.SelectionUpdated,
+			tool: selectionTool,
+			selectedComponents: [ secondStroke.testStroke ],
+		});
+	});
+
+	it('should remove the selection box after ending an empty selection', () => {
+		const { editor, selectionTool } = createEditorWithSingleObjectSelection(150);
+
+		// Should have a selection when objects are selected
+		expect(selectionTool.getSelection()).not.toBe(null);
+
+		// Select nothing
+		sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(2999, 2999));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(3001, 3001));
+		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(3002, 3002));
+
+		// Should not have a selection after setting the selection to contain no objects
+		expect(selectionTool.getSelection()).toBe(null);
+	});
 });

package/src/tools/SelectionTool/SelectionTool.ts

@@ -1,9 +1,8 @@
 import AbstractComponent from '../../components/AbstractComponent';
 import Editor from '../../Editor';
-import Mat33 from '../../math/Mat33';
-import Rect2 from '../../math/shapes/Rect2';
-import { Point2, Vec2 } from '../../math/Vec2';
-import { CopyEvent, EditorEventType, KeyPressEvent, KeyUpEvent, PointerEvt } from '../../types';
+import { Mat33, Rect2, Point2, Vec2 } from '@js-draw/math';
+import { EditorEventType } from '../../types';
+import { CopyEvent, KeyPressEvent, KeyUpEvent, PointerEvt } from '../../inputEvents';
 import Viewport from '../../Viewport';
 import BaseTool from '../BaseTool';
 import SVGRenderer from '../../rendering/renderers/SVGRenderer';
@@ -17,11 +16,10 @@ export const cssPrefix = 'selection-tool-';
 // With respect to `extend`ing, `SelectionTool` is not stable.
 export default class SelectionTool extends BaseTool {
 	private handleOverlay: HTMLElement;
-	private prevSelectionBox: Selection|null;
-	private selectionBox: Selection|null;
-	private lastEvtTarget: EventTarget|null = null;
+	private prevSelectionBox: Selection | null;
+	private selectionBox: Selection | null;
 
-	private startPoint: Vec2|null = null; // canvas position
+	private startPoint: Vec2 | null = null; // canvas position
 	private expandingSelectionBox: boolean = false;
 	private shiftKeyPressed: boolean = false;
 	private snapToGrid: boolean = false;
@@ -44,12 +42,7 @@ export default class SelectionTool extends BaseTool {
 		});
 
 		this.editor.handleKeyEventsFrom(this.handleOverlay);
-		this.editor.handlePointerEventsFrom(this.handleOverlay, (eventName, htmlEvent: PointerEvent) => {
-			if (eventName === 'pointerdown') {
-				this.lastEvtTarget = htmlEvent.target;
-			}
-			return true;
-		});
+		this.editor.handlePointerEventsFrom(this.handleOverlay);
 	}
 
 	private makeSelectionBox(selectionStartPos: Point2) {
@@ -90,12 +83,12 @@ export default class SelectionTool extends BaseTool {
 
 			let transforming = false;
 
-			if (this.lastEvtTarget && this.selectionBox) {
+			if (this.selectionBox) {
 				if (snapToGrid) {
 					this.snapSelectionToGrid();
 				}
 
-				const dragStartResult = this.selectionBox.onDragStart(current, this.lastEvtTarget);
+				const dragStartResult = this.selectionBox.onDragStart(current);
 
 				if (dragStartResult) {
 					transforming = true;
@@ -136,30 +129,8 @@ export default class SelectionTool extends BaseTool {
 		}
 	}
 
-	private onSelectionUpdated() {
-		// Note that the selection has changed
-		this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
-			kind: EditorEventType.ToolUpdated,
-			tool: this,
-		});
-
-		const selectedItemCount = this.selectionBox?.getSelectedItemCount() ?? 0;
-		if (selectedItemCount > 0) {
-			this.editor.announceForAccessibility(
-				this.editor.localization.selectedElements(selectedItemCount)
-			);
-			this.zoomToSelection();
-		} else if (this.selectionBox) {
-			this.selectionBox.cancelSelection();
-			this.prevSelectionBox = this.selectionBox;
-			this.selectionBox = null;
-		}
-	}
-
 	// Called after a gestureCancel and a pointerUp
 	private onGestureEnd() {
-		this.lastEvtTarget = null;
-
 		if (!this.selectionBox) return;
 
 		if (!this.selectionBoxHandlingEvt) {
@@ -174,13 +145,6 @@ export default class SelectionTool extends BaseTool {
 		this.selectionBoxHandlingEvt = false;
 	}
 
-	private zoomToSelection() {
-		if (this.selectionBox) {
-			const selectionRect = this.selectionBox.region;
-			this.editor.dispatchNoAnnounce(this.editor.viewport.zoomTo(selectionRect, false), false);
-		}
-	}
-
 	public override onPointerUp(event: PointerEvt): void {
 		if (!this.selectionBox) return;
 
@@ -220,6 +184,53 @@ export default class SelectionTool extends BaseTool {
 		this.expandingSelectionBox = false;
 	}
 
+	private lastSelectedObjects: AbstractComponent[] = [];
+
+	private onSelectionUpdated() {
+		const selectedItemCount = this.selectionBox?.getSelectedItemCount() ?? 0;
+		const selectedObjects = this.selectionBox?.getSelectedObjects() ?? [];
+		const hasDifferentSelection =
+			this.lastSelectedObjects.length !== selectedItemCount
+			|| selectedObjects.some((obj, i) => this.lastSelectedObjects[i] !== obj);
+
+		if (hasDifferentSelection) {
+			this.lastSelectedObjects = selectedObjects;
+
+			// Note that the selection has changed
+			this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+				kind: EditorEventType.ToolUpdated,
+				tool: this,
+			});
+
+			// Only fire the SelectionUpdated event if the selection really updated.
+			this.editor.notifier.dispatch(EditorEventType.SelectionUpdated, {
+				kind: EditorEventType.SelectionUpdated,
+				selectedComponents: selectedObjects,
+				tool: this,
+			});
+
+			if (selectedItemCount > 0) {
+				this.editor.announceForAccessibility(
+					this.editor.localization.selectedElements(selectedItemCount)
+				);
+				this.zoomToSelection();
+			}
+		}
+
+		if (selectedItemCount === 0 && this.selectionBox) {
+			this.selectionBox.cancelSelection();
+			this.prevSelectionBox = this.selectionBox;
+			this.selectionBox = null;
+		}
+	}
+
+	private zoomToSelection() {
+		if (this.selectionBox) {
+			const selectionRect = this.selectionBox.region;
+			this.editor.dispatchNoAnnounce(this.editor.viewport.zoomTo(selectionRect, false), false);
+		}
+	}
+
 	private static handleableKeys = [
 		'a', 'h', 'ArrowLeft',
 		'd', 'l', 'ArrowRight',
@@ -393,7 +404,7 @@ export default class SelectionTool extends BaseTool {
 			return false;
 		}
 
-		const exportViewport = new Viewport(() => {});
+		const exportViewport = new Viewport(() => { });
 		exportViewport.updateScreenSize(Vec2.of(bbox.w, bbox.h));
 		exportViewport.resetTransform(Mat33.translation(bbox.topLeft.times(-1)));
 
@@ -421,6 +432,9 @@ export default class SelectionTool extends BaseTool {
 		super.setEnabled(enabled);
 
 		// Clear the selection
+		this.selectionBox?.cancelSelection();
+		this.onSelectionUpdated();
+
 		this.handleOverlay.replaceChildren();
 		this.selectionBox = null;
 
@@ -439,7 +453,7 @@ export default class SelectionTool extends BaseTool {
 
 	// Get the object responsible for displaying this' selection.
 	// @internal
-	public getSelection(): Selection|null {
+	public getSelection(): Selection | null {
 		return this.selectionBox;
 	}
 
@@ -464,7 +478,7 @@ export default class SelectionTool extends BaseTool {
 			return true;
 		});
 
-		let bbox: Rect2|null = null;
+		let bbox: Rect2 | null = null;
 		for (const object of objects) {
 			if (bbox) {
 				bbox = bbox.union(object.getBBox());

package/src/tools/SelectionTool/TransformMode.ts

@@ -1,7 +1,5 @@
 import Editor from '../../Editor';
-import Mat33 from '../../math/Mat33';
-import { Point2, Vec2 } from '../../math/Vec2';
-import Vec3 from '../../math/Vec3';
+import { Vec3, Mat33, Vec2, Point2 } from '@js-draw/math';
 import Viewport from '../../Viewport';
 import Selection from './Selection';
 import { ResizeMode } from './types';

package/src/tools/SoundUITool.ts

@@ -1,8 +1,6 @@
-import Color4 from '../Color4';
 import Editor from '../Editor';
-import LineSegment2 from '../math/shapes/LineSegment2';
-import { Point2 } from '../math/Vec2';
-import { PointerEvt } from '../types';
+import { LineSegment2, Color4, Point2 } from '@js-draw/math';
+import { KeyPressEvent, PointerEvt } from '../inputEvents';
 import BaseTool from './BaseTool';
 
 class SoundFeedback {
@@ -162,11 +160,22 @@ export default class SoundUITool extends BaseTool {
 		if (!enabled) {
 			this.soundFeedback?.close();
 			this.soundFeedback = null;
+		} else {
+			this.editor.announceForAccessibility(this.editor.localization.soundExplorerUsageAnnouncement);
 		}
 
 		this.updateToggleButtonText();
 	}
 
+	public override onKeyPress(event: KeyPressEvent): boolean {
+		if (event.code === 'Escape') {
+			this.setEnabled(false);
+			return true;
+		}
+
+		return false;
+	}
+
 	private lastPointerPos: Point2;
 
 	public override onPointerDown({ current, allPointers }: PointerEvt): boolean {

package/src/tools/TextTool.ts

@@ -1,20 +1,22 @@
-import Color4 from '../Color4';
 import TextComponent from '../components/TextComponent';
 import Editor from '../Editor';
 import EditorImage from '../EditorImage';
-import Rect2 from '../math/shapes/Rect2';
-import Mat33 from '../math/Mat33';
-import { Vec2 } from '../math/Vec2';
+import { Rect2, Mat33, Vec2, Color4 } from '@js-draw/math';
 import { PointerDevice } from '../Pointer';
-import { EditorEventType, PointerEvt } from '../types';
+import { EditorEventType } from '../types';
+import { PointerEvt } from '../inputEvents';
 import BaseTool from './BaseTool';
 import { ToolLocalization } from './localization';
 import Erase from '../commands/Erase';
 import uniteCommands from '../commands/uniteCommands';
 import TextRenderingStyle from '../rendering/TextRenderingStyle';
+import { MutableReactiveValue, ReactiveValue } from '../util/ReactiveValue';
 
 const overlayCSSClass = 'textEditorOverlay';
 export default class TextTool extends BaseTool {
+	private textStyleValue: MutableReactiveValue<TextRenderingStyle>;
+
+	// A reference to the current value of `textStyleValue`.
 	private textStyle: TextRenderingStyle;
 
 	private textEditOverlay: HTMLElement;
@@ -28,13 +30,22 @@ export default class TextTool extends BaseTool {
 
 	public constructor(private editor: Editor, description: string, private localizationTable: ToolLocalization) {
 		super(editor.notifier, description);
-		this.textStyle = {
+		this.textStyleValue = ReactiveValue.fromInitialValue({
 			size: 32,
 			fontFamily: 'sans-serif',
 			renderingStyle: {
 				fill: Color4.purple,
 			},
-		};
+		});
+		this.textStyleValue.onUpdateAndNow(() => {
+			this.textStyle = this.textStyleValue.get();
+
+			this.updateTextInput();
+			this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+				kind: EditorEventType.ToolUpdated,
+				tool: this,
+			});
+		});
 
 		this.textEditOverlay = document.createElement('div');
 		this.textEditOverlay.classList.add(overlayCSSClass);
@@ -284,47 +295,33 @@ export default class TextTool extends BaseTool {
 		this.editor.focus();
 	}
 
-	private dispatchUpdateEvent() {
-		this.updateTextInput();
-		this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
-			kind: EditorEventType.ToolUpdated,
-			tool: this,
-		});
-	}
-
 	public setFontFamily(fontFamily: string) {
 		if (fontFamily !== this.textStyle.fontFamily) {
-			this.textStyle = {
+			this.textStyleValue.set({
 				...this.textStyle,
 				fontFamily: fontFamily,
-			};
-
-			this.dispatchUpdateEvent();
+			});
 		}
 	}
 
 	public setColor(color: Color4) {
 		if (!color.eq(this.textStyle.renderingStyle.fill)) {
-			this.textStyle = {
+			this.textStyleValue.set({
 				...this.textStyle,
 				renderingStyle: {
 					...this.textStyle.renderingStyle,
 					fill: color,
 				},
-			};
-
-			this.dispatchUpdateEvent();
+			});
 		}
 	}
 
 	public setFontSize(size: number) {
 		if (size !== this.textStyle.size) {
-			this.textStyle = {
+			this.textStyleValue.set({
 				...this.textStyle,
 				size,
-			};
-
-			this.dispatchUpdateEvent();
+			});
 		}
 	}
 
@@ -332,9 +329,11 @@ export default class TextTool extends BaseTool {
 		return this.textStyle;
 	}
 
+	public getStyleValue(): MutableReactiveValue<TextRenderingStyle> {
+		return this.textStyleValue;
+	}
+
 	private setTextStyle(style: TextRenderingStyle) {
-		// Copy the style — we may change parts of it.
-		this.textStyle = { ...style, renderingStyle: { ...style.renderingStyle } };
-		this.dispatchUpdateEvent();
+		this.textStyleValue.set(style);
 	}
 }