js-draw 0.1.11 → 0.2.0

package/src/rendering/renderers/DummyRenderer.test.ts

@@ -1,7 +1,7 @@
 
 import EventDispatcher from '../../EventDispatcher';
-import Mat33 from '../../geometry/Mat33';
-import { Vec2 } from '../../geometry/Vec2';
+import Mat33 from '../../math/Mat33';
+import { Vec2 } from '../../math/Vec2';
 import Viewport from '../../Viewport';
 import DummyRenderer from './DummyRenderer';
 

package/src/rendering/renderers/DummyRenderer.ts

@@ -1,10 +1,10 @@
 // Renderer that outputs nothing. Useful for automated tests.
 
 import { TextStyle } from '../../components/Text';
-import Mat33 from '../../geometry/Mat33';
-import Rect2 from '../../geometry/Rect2';
-import { Point2, Vec2 } from '../../geometry/Vec2';
-import Vec3 from '../../geometry/Vec3';
+import Mat33 from '../../math/Mat33';
+import Rect2 from '../../math/Rect2';
+import { Point2, Vec2 } from '../../math/Vec2';
+import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
 import AbstractRenderer from './AbstractRenderer';

package/src/rendering/renderers/SVGRenderer.ts

@@ -1,10 +1,11 @@
 
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
 import { TextStyle } from '../../components/Text';
-import Mat33 from '../../geometry/Mat33';
-import Path, { PathCommand, PathCommandType } from '../../geometry/Path';
-import Rect2 from '../../geometry/Rect2';
-import { Point2, Vec2 } from '../../geometry/Vec2';
+import Mat33 from '../../math/Mat33';
+import Path, { PathCommand, PathCommandType } from '../../math/Path';
+import Rect2 from '../../math/Rect2';
+import { toRoundedString } from '../../math/rounding';
+import { Point2, Vec2 } from '../../math/Vec2';
 import { svgAttributesDataKey, SVGLoaderUnknownAttribute, SVGLoaderUnknownStyleAttribute, svgStyleAttributesDataKey } from '../../SVGLoader';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
@@ -113,6 +114,9 @@ export default class SVGRenderer extends AbstractRenderer {
 	public drawText(text: string, transform: Mat33, style: TextStyle): void {
 		transform = this.getCanvasToScreenTransform().rightMul(transform);
 
+		const translation = transform.transformVec2(Vec2.zero);
+		transform = transform.rightMul(Mat33.translation(translation.times(-1)));
+
 		const textElem = document.createElementNS(svgNameSpace, 'text');
 		textElem.appendChild(document.createTextNode(text));
 		textElem.style.transform = `matrix(
@@ -125,6 +129,8 @@ export default class SVGRenderer extends AbstractRenderer {
 		textElem.style.fontWeight = style.fontWeight ?? '';
 		textElem.style.fontSize = style.size + 'px';
 		textElem.style.fill = style.renderingStyle.fill.toHexString();
+		textElem.setAttribute('x', `${toRoundedString(translation.x)}`);
+		textElem.setAttribute('y', `${toRoundedString(translation.y)}`);
 
 		if (style.renderingStyle.stroke) {
 			const strokeStyle = style.renderingStyle.stroke;

package/src/rendering/renderers/TextOnlyRenderer.ts

@@ -1,8 +1,8 @@
 import { TextStyle } from '../../components/Text';
-import Mat33 from '../../geometry/Mat33';
-import Rect2 from '../../geometry/Rect2';
-import { Vec2 } from '../../geometry/Vec2';
-import Vec3 from '../../geometry/Vec3';
+import Mat33 from '../../math/Mat33';
+import Rect2 from '../../math/Rect2';
+import { Vec2 } from '../../math/Vec2';
+import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import { TextRendererLocalization } from '../localization';
 import RenderingStyle from '../RenderingStyle';
@@ -12,6 +12,9 @@ import AbstractRenderer from './AbstractRenderer';
 
 export default class TextOnlyRenderer extends AbstractRenderer {
 	private descriptionBuilder: string[] = [];
+	private pathCount: number = 0;
+	private textNodeCount: number = 0;
+
 	public constructor(viewport: Viewport, private localizationTable: TextRendererLocalization) {
 		super(viewport);
 	}
@@ -23,15 +26,22 @@ export default class TextOnlyRenderer extends AbstractRenderer {
 
 	public clear(): void {
 		this.descriptionBuilder = [];
+		this.pathCount = 0;
+		this.textNodeCount = 0;
 	}
 
 	public getDescription(): string {
-		return this.descriptionBuilder.join('\n');
+		return [
+			this.localizationTable.pathNodeCount(this.pathCount),
+			this.localizationTable.textNodeCount(this.textNodeCount),
+			...this.descriptionBuilder
+		].join('\n');
 	}
 
 	protected beginPath(_startPoint: Vec3): void {
 	}
 	protected endPath(_style: RenderingStyle): void {
+		this.pathCount ++;
 	}
 	protected lineTo(_point: Vec3): void {
 	}
@@ -43,9 +53,10 @@ export default class TextOnlyRenderer extends AbstractRenderer {
 	}
 	public drawText(text: string, _transform: Mat33, _style: TextStyle): void {
 		this.descriptionBuilder.push(this.localizationTable.textNode(text));
+		this.textNodeCount ++;
 	}
 	public isTooSmallToRender(rect: Rect2): boolean {
-		return rect.maxDimension < 10 / this.getSizeOfCanvasPixelOnScreen();
+		return rect.maxDimension < 15 / this.getSizeOfCanvasPixelOnScreen();
 	}
 	public drawPoints(..._points: Vec3[]): void {
 	}

package/src/toolbar/HTMLToolbar.ts

@@ -43,6 +43,7 @@ export default class HTMLToolbar {
 		this.setupColorPickers();
 	}
 
+	// @internal
 	public setupColorPickers() {
 		const closePickerOverlay = document.createElement('div');
 		closePickerOverlay.className = `${toolbarCSSPrefix}closeColorPickerOverlay`;

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

@@ -8,7 +8,7 @@ import { makePipetteIcon } from './icons';
 type OnColorChangeListener = (color: Color4)=>void;
 
 
-// Returns [ input, container ].
+// Returns [ color input, input container ].
 export const makeColorInput = (editor: Editor, onColorChange: OnColorChangeListener): [ HTMLInputElement, HTMLElement ] => {
 	const colorInputContainer = document.createElement('span');
 	const colorInput = document.createElement('input');
@@ -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/PenWidget.ts

@@ -1,3 +1,5 @@
+// @internal @packageDocumentation
+
 import { makeArrowBuilder } from '../../components/builders/ArrowBuilder';
 import { makeFreehandLineBuilder } from '../../components/builders/FreehandLineBuilder';
 import { makeLineBuilder } from '../../components/builders/LineBuilder';