js-draw 0.1.11 → 0.1.12

package/src/toolbar/icons.ts

@@ -2,7 +2,7 @@ import Color4 from '../Color4';
 import { ComponentBuilderFactory } from '../components/builders/types';
 import { TextStyle } from '../components/Text';
 import EventDispatcher from '../EventDispatcher';
-import { Vec2 } from '../geometry/Vec2';
+import { Vec2 } from '../math/Vec2';
 import SVGRenderer from '../rendering/renderers/SVGRenderer';
 import Pen from '../tools/Pen';
 import { StrokeDataPoint } from '../types';
@@ -103,152 +103,141 @@ export const makeSelectionIcon = () => {
 	return icon;
 };
 
-export const makeHandToolIcon = () => {
+const pathIcon = (
+	pathData: string,
+	fill: string = 'var(--icon-color)', 
+	strokeColor: string = 'none',
+	strokeWidth: string = '0px',
+) => {
 	const icon = document.createElementNS(svgNamespace, 'svg');
-
-	// Draw a cursor-like shape (like some of the other icons, made with Inkscape)
-	icon.innerHTML = `
-	<g>
-		<path d='
-			m 10,60
-			  5,30
-			H 90
-			V 30
-			C 90,20 75,20 75,30
-			V 60
-			  20
-			C 75,10 60,10 60,20
-			V 60
-			  15
-			C 60,5 45,5 45,15
-			V 60
-			  25
-			C 45,15 30,15 30,25
-			V 60
-			  75
-			L 25,60
-			C 20,45 10,50 10,60 
-			Z'
-			
-			fill='none'
-			style='
-				stroke: var(--icon-color);
-				stroke-width: 2;
-			'
-		/>
-	</g>
-	`;
+	const path = document.createElementNS(svgNamespace, 'path');
+	path.setAttribute('d', pathData);
+	path.style.fill = fill;
+	path.style.stroke = strokeColor;
+	path.style.strokeWidth = strokeWidth;
+	icon.appendChild(path);
 	icon.setAttribute('viewBox', '0 0 100 100');
+
 	return icon;
 };
 
+export const makeHandToolIcon = () => {
+	const fill = 'none';
+	const strokeColor = 'var(--icon-color)';
+	const strokeWidth = '3';
+
+	// Draw a cursor-like shape (like some of the other icons, made with Inkscape)
+	return pathIcon(`
+		m 10,60
+			5,30
+		H 90
+		V 30
+		C 90,20 75,20 75,30
+		V 60
+			20
+		C 75,10 60,10 60,20
+		V 60
+			15
+		C 60,5 45,5 45,15
+		V 60
+			25
+		C 45,15 30,15 30,25
+		V 60
+			75
+		L 25,60
+		C 20,45 10,50 10,60
+		Z
+	`, fill, strokeColor, strokeWidth);
+};
+
 export const makeTouchPanningIcon = () => {
-	const icon = document.createElementNS(svgNamespace, 'svg');
-	icon.innerHTML = `
-		<path
-			d='
-				M 5,5.5
-				V 17.2
-				L 16.25,5.46
-				Z
-
-				m 33.75,0
-				L 50,17
-				V 5.5
-				Z
-
-				M 5,40.7
-				v 11.7
-				h 11.25
-				z
-				
-				M 26,19
-				C 19.8,19.4 17.65,30.4 21.9,34.8
-				L 50,70
-				H 27.5
-				c -11.25,0 -11.25,17.6 0,17.6
-				H 61.25
-				C 94.9,87.8 95,87.6 95,40.7 78.125,23 67,29 55.6,46.5
-				L 33.1,23
-				C 30.3125,20.128192 27.9,19 25.830078,19.119756
-				Z
-			'
-			fill='none'
-			style='
-				stroke: var(--icon-color);
-				stroke-width: 2;
-			'
-		/>
-	`;
+	const fill = 'none';
+	const strokeColor = 'var(--icon-color)';
+	const strokeWidth = '3';
+
+	return pathIcon(`
+		M 5,5.5
+		V 17.2
+		L 16.25,5.46
+		Z
 
-	icon.setAttribute('viewBox', '0 0 100 100');
-	return icon;
+		m 33.75,0
+		L 50,17
+		V 5.5
+		Z
+
+		M 5,40.7
+		v 11.7
+		h 11.25
+		z
+
+		M 26,19
+		C 19.8,19.4 17.65,30.4 21.9,34.8
+		L 50,70
+		H 27.5
+		c -11.25,0 -11.25,17.6 0,17.6
+		H 61.25
+		C 94.9,87.8 95,87.6 95,40.7 78.125,23 67,29 55.6,46.5
+		L 33.1,23
+		C 30.3125,20.128192 27.9,19 25.830078,19.119756
+		Z
+	`, fill, strokeColor, strokeWidth);
 };
 
 export const makeAllDevicePanningIcon = () => {
-	const icon = document.createElementNS(svgNamespace, 'svg');
-	icon.innerHTML = `
-		<path
-			d='
-				M 5 5
-				L 5 17.5
-				  17.5 5
-				  5 5
-				z
-				
-				M 42.5 5
-				L 55 17.5
-				  55 5
-				  42.5 5
-				z
-				
-				M 70 10
-				L 70 21
-				  61 15
-			      55.5 23
-			      66 30
-				  56 37
-				  61 45
-				  70 39
-				  70 50
-				  80 50
-				  80 39
-				  89 45
-				  95 36
-				  84 30
-				  95 23
-				  89 15
-				  80 21
-				  80 10
-				  70 10
-				z
-
-				M 27.5 26.25
-				L 27.5 91.25
-				L 43.75 83.125
-				L 52 99
-				L 68 91
-				L 60 75
-				L 76.25 66.875
-				L 27.5 26.25
-				z
-				
-				M 5 42.5
-				L 5 55
-				L 17.5 55
-				L 5 42.5
-				z 
-			'
-			fill='none'
-			style='
-				stroke: var(--icon-color);
-				stroke-width: 2;
-			'
-		/>
-	`;
-
-	icon.setAttribute('viewBox', '0 0 100 100');
-	return icon;
+	const fill = 'none';
+	const strokeColor = 'var(--icon-color)';
+	const strokeWidth = '3';
+	return pathIcon(`
+		M 5 5
+		L 5 17.5
+			17.5 5
+			5 5
+		z
+
+		M 42.5 5
+		L 55 17.5
+			55 5
+			42.5 5
+		z
+
+		M 70 10
+		L 70 21
+			61 15
+			55.5 23
+			66 30
+			56 37
+			61 45
+			70 39
+			70 50
+			80 50
+			80 39
+			89 45
+			95 36
+			84 30
+			95 23
+			89 15
+			80 21
+			80 10
+			70 10
+		z
+
+		M 27.5 26.25
+		L 27.5 91.25
+		L 43.75 83.125
+		L 52 99
+		L 68 91
+		L 60 75
+		L 76.25 66.875
+		L 27.5 26.25
+		z
+
+		M 5 42.5
+		L 5 55
+		L 17.5 55
+		L 5 42.5
+		z
+	`, fill, strokeColor, strokeWidth);
 };
 
 export const makeZoomIcon = () => {
@@ -417,3 +406,34 @@ export const makePipetteIcon = (color?: Color4) => {
 	icon.setAttribute('viewBox', '0 0 100 100');
 	return icon;
 };
+
+export const makeResizeViewportIcon = () => {
+	return pathIcon(`
+		M 75 5 75 10 90 10 90 25 95 25 95 5 75 5 z
+		M 15 15 15 30 20 30 20 20 30 20 30 15 15 15 z
+        M 84 15 82 17 81 16 81 20 85 20 84 19 86 17 84 15 z
+        M 26 24 24 26 26 28 25 29 29 29 29 25 28 26 26 24 z
+        M 25 71 26 72 24 74 26 76 28 74 29 75 29 71 25 71 z
+        M 15 75 15 85 25 85 25 80 20 80 20 75 15 75 z
+        M 90 75 90 90 75 90 75 95 95 95 95 75 90 75 z
+        M 81 81 81 85 82 84 84 86 86 84 84 82 85 81 81 81 z
+	`);
+};
+
+export const makeDuplicateSelectionIcon = () => {
+	return pathIcon(`
+		M 45,10 45,55 90,55 90,10 45,10 z
+		M 10,25 10,90 70,90 70,60 40,60 40,25 10,25 z 
+	`);
+};
+
+export const makeDeleteSelectionIcon = () => {
+	const strokeWidth = '5px';
+	const strokeColor = 'var(--icon-color)';
+	const fillColor = 'none';
+
+	return pathIcon(`
+		M 10,10 90,90
+		M 10,90 90,10
+	`, fillColor, strokeColor, strokeWidth);
+};

package/src/toolbar/localization.ts

@@ -19,7 +19,8 @@ export interface ToolbarLocalization {
 	resizeImageToSelection: string;
 	deleteSelection: string;
 	duplicateSelection: string;
-	pickColorFronScreen: string;
+	pickColorFromScreen: string;
+	clickToPickColorAnnouncement: string;
 	undo: string;
 	redo: string;
 	zoom: string;
@@ -48,7 +49,8 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 	undo: 'Undo',
 	redo: 'Redo',
 	selectObjectType: 'Object type: ',
-	pickColorFronScreen: 'Pick color from screen',
+	pickColorFromScreen: 'Pick color from screen',
+	clickToPickColorAnnouncement: 'Click on the screen to pick a color',
 	selectionToolKeyboardShortcuts: 'Selection tool: Use arrow keys to move selected items, lowercase/uppercase ‘i’ and ‘o’ to resize.',
 
 	touchPanning: 'Touchscreen panning',

package/src/toolbar/makeColorInput.ts

@@ -69,7 +69,7 @@ export const makeColorInput = (editor: Editor, onColorChange: OnColorChangeListe
 const addPipetteTool = (editor: Editor, container: HTMLElement, onColorChange: OnColorChangeListener) => {
 	const pipetteButton = document.createElement('button');
 	pipetteButton.classList.add('pipetteButton');
-	pipetteButton.title = editor.localization.pickColorFronScreen;
+	pipetteButton.title = editor.localization.pickColorFromScreen;
 	pipetteButton.setAttribute('alt', pipetteButton.title);
 
 	const updatePipetteIcon = (color?: Color4) => {
@@ -111,6 +111,7 @@ const addPipetteTool = (editor: Editor, container: HTMLElement, onColorChange: O
 		);
 		if (pipetteTool) {
 			pipetteButton.classList.add('active');
+			editor.announceForAccessibility(editor.localization.clickToPickColorAnnouncement);
 		}
 	};
 

package/src/toolbar/toolbar.css

@@ -83,7 +83,7 @@
 	min-height: 30px;
 }
 
-.toolbar-toolContainer.selected .toolbar-button {
+.toolbar-toolContainer.selected > .toolbar-button {
 	background-color: var(--secondary-background-color);
 	color: var(--secondary-foreground-color);
 	--icon-color: var(--secondary-foreground-color);

package/src/toolbar/widgets/ActionButtonWidget.ts

@@ -0,0 +1,31 @@
+import Editor from '../../Editor';
+import { ToolbarLocalization } from '../localization';
+import BaseWidget from './BaseWidget';
+
+export default class ActionButtonWidget extends BaseWidget {
+	public constructor(
+		editor: Editor, localizationTable: ToolbarLocalization,
+        protected makeIcon: ()=> Element,
+		protected title: string,
+
+        protected clickAction: ()=>void,
+	) {
+		super(editor, localizationTable);
+	}
+
+	protected handleClick() {
+		this.clickAction();
+	}
+
+	protected getTitle(): string {
+		return this.title;
+	}
+
+	protected createIcon(): Element {
+		return this.makeIcon();
+	}
+
+	protected fillDropdown(_dropdown: HTMLElement): boolean {
+		return false;
+	}
+}

package/src/toolbar/widgets/BaseWidget.ts

@@ -137,8 +137,10 @@ export default abstract class BaseWidget {
 		this.disabled = disabled;
 		if (this.disabled) {
 			this.button.classList.add('disabled');
+			this.button.setAttribute('aria-disabled', 'true');
 		} else {
 			this.button.classList.remove('disabled');
+			this.button.removeAttribute('aria-disabled');
 		}
 	}
 

package/src/toolbar/widgets/HandToolWidget.ts

@@ -1,5 +1,5 @@
 import Editor from '../../Editor';
-import Mat33 from '../../geometry/Mat33';
+import Mat33 from '../../math/Mat33';
 import PanZoom, { PanZoomMode } from '../../tools/PanZoom';
 import { EditorEventType } from '../../types';
 import Viewport from '../../Viewport';
@@ -53,7 +53,7 @@ const makeZoomControl = (localizationTable: ToolbarLocalization, editor: Editor)
 	const zoomBy = (factor: number) => {
 		const screenCenter = editor.viewport.visibleRect.center;
 		const transformUpdate = Mat33.scaling2D(factor, screenCenter);
-		editor.dispatch(new Viewport.ViewportTransform(transformUpdate), false);
+		editor.dispatch(Viewport.transformBy(transformUpdate), false);
 	};
 
 	increaseButton.onclick = () => {
@@ -65,7 +65,7 @@ const makeZoomControl = (localizationTable: ToolbarLocalization, editor: Editor)
 	};
 
 	resetViewButton.onclick = () => {
-		editor.dispatch(new Viewport.ViewportTransform(
+		editor.dispatch(Viewport.transformBy(
 			editor.viewport.canvasToScreenTransform.inverse()
 		), true);
 	};

package/src/toolbar/widgets/SelectionWidget.ts

@@ -1,8 +1,9 @@
 import Editor from '../../Editor';
 import SelectionTool from '../../tools/SelectionTool';
 import { EditorEventType } from '../../types';
-import { makeSelectionIcon } from '../icons';
+import { makeDeleteSelectionIcon, makeDuplicateSelectionIcon, makeResizeViewportIcon, makeSelectionIcon } from '../icons';
 import { ToolbarLocalization } from '../localization';
+import ActionButtonWidget from './ActionButtonWidget';
 import BaseToolWidget from './BaseToolWidget';
 
 export class SelectionWidget extends BaseToolWidget {
@@ -10,44 +11,46 @@ export class SelectionWidget extends BaseToolWidget {
 		editor: Editor, private tool: SelectionTool, localization: ToolbarLocalization
 	) {
 		super(editor, tool, localization);
-	}
-
-	protected getTitle(): string {
-		return this.localizationTable.select;
-	}
-
-	protected createIcon(): Element {
-		return makeSelectionIcon();
-	}
 
-	protected fillDropdown(dropdown: HTMLElement): boolean {
-		const container = document.createElement('div');
-		const resizeButton = document.createElement('button');
-		const duplicateButton = document.createElement('button');
-		const deleteButton = document.createElement('button');
-
-		resizeButton.innerText = this.localizationTable.resizeImageToSelection;
-		resizeButton.disabled = true;
-		deleteButton.innerText = this.localizationTable.deleteSelection;
-		deleteButton.disabled = true;
-		duplicateButton.innerText = this.localizationTable.duplicateSelection;
-		duplicateButton.disabled = true;
-
-		resizeButton.onclick = () => {
-			const selection = this.tool.getSelection();
-			this.editor.dispatch(this.editor.setImportExportRect(selection!.region));
-		};
+		const resizeButton = new ActionButtonWidget(
+			editor, localization,
+			makeResizeViewportIcon,
+			this.localizationTable.resizeImageToSelection,
+			() => {
+				const selection = this.tool.getSelection();
+				this.editor.dispatch(this.editor.setImportExportRect(selection!.region));
+			},
+		);
+		const deleteButton = new ActionButtonWidget(
+			editor, localization,
+			makeDeleteSelectionIcon,
+			this.localizationTable.deleteSelection,
+			() => {
+				const selection = this.tool.getSelection();
+				this.editor.dispatch(selection!.deleteSelectedObjects());
+				this.tool.clearSelection();
+			},
+		);
+		const duplicateButton = new ActionButtonWidget(
+			editor, localization,
+			makeDuplicateSelectionIcon,
+			this.localizationTable.duplicateSelection,
+			() => {
+				const selection = this.tool.getSelection();
+				this.editor.dispatch(selection!.duplicateSelectedObjects());
+			},
+		);
 
-		deleteButton.onclick = () => {
-			const selection = this.tool.getSelection();
-			this.editor.dispatch(selection!.deleteSelectedObjects());
-			this.tool.clearSelection();
-		};
+		this.addSubWidget(resizeButton);
+		this.addSubWidget(deleteButton);
+		this.addSubWidget(duplicateButton);
 
-		duplicateButton.onclick = () => {
-			const selection = this.tool.getSelection();
-			this.editor.dispatch(selection!.duplicateSelectedObjects());
+		const updateDisabled = (disabled: boolean) => {
+			resizeButton.setDisabled(disabled);
+			deleteButton.setDisabled(disabled);
+			duplicateButton.setDisabled(disabled);
 		};
+		updateDisabled(true);
 
 		// Enable/disable actions based on whether items are selected
 		this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
@@ -59,14 +62,16 @@ export class SelectionWidget extends BaseToolWidget {
 				const selection = this.tool.getSelection();
 				const hasSelection = selection && selection.region.area > 0;
 
-				resizeButton.disabled = !hasSelection;
-				deleteButton.disabled = resizeButton.disabled;
-				duplicateButton.disabled = resizeButton.disabled;
+				updateDisabled(!hasSelection);
 			}
 		});
+	}
 
-		container.replaceChildren(resizeButton, duplicateButton, deleteButton);
-		dropdown.appendChild(container);
-		return true;
+	protected getTitle(): string {
+		return this.localizationTable.select;
+	}
+
+	protected createIcon(): Element {
+		return makeSelectionIcon();
 	}
 }

package/src/tools/Eraser.ts

@@ -1,8 +1,8 @@
 import { PointerEvt } from '../types';
 import BaseTool from './BaseTool';
 import Editor from '../Editor';
-import { Point2 } from '../geometry/Vec2';
-import LineSegment2 from '../geometry/LineSegment2';
+import { Point2 } from '../math/Vec2';
+import LineSegment2 from '../math/LineSegment2';
 import Erase from '../commands/Erase';
 import { ToolType } from './ToolController';
 import AbstractComponent from '../components/AbstractComponent';