js-draw 0.1.11 → 0.1.12

package/dist/src/tools/SelectionTool.js

@@ -10,10 +10,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import Command from '../commands/Command';
 import Duplicate from '../commands/Duplicate';
 import Erase from '../commands/Erase';
-import Mat33 from '../geometry/Mat33';
+import Mat33 from '../math/Mat33';
 // import Mat33 from "../geometry/Mat33";
-import Rect2 from '../geometry/Rect2';
-import { Vec2 } from '../geometry/Vec2';
+import Rect2 from '../math/Rect2';
+import { Vec2 } from '../math/Vec2';
 import { EditorEventType } from '../types';
 import Viewport from '../Viewport';
 import BaseTool from './BaseTool';
@@ -342,7 +342,7 @@ class Selection {
         if (!visibleRect.containsPoint(this.region.center)) {
             const closestPoint = visibleRect.getClosestPointOnBoundaryTo(this.region.center);
             const delta = this.region.center.minus(closestPoint);
-            this.editor.dispatchNoAnnounce(new Viewport.ViewportTransform(Mat33.translation(delta.times(-1))), false);
+            this.editor.dispatchNoAnnounce(Viewport.transformBy(Mat33.translation(delta.times(-1))), false);
         }
     }
     deleteSelectedObjects() {
@@ -382,7 +382,7 @@ Selection.ApplyTransformationCommand = class extends Command {
             this.selection.updateUI();
         });
     }
-    description(localizationTable) {
+    description(_editor, localizationTable) {
         return localizationTable.transformedElements(this.currentTransfmCommands.length);
     }
 };
@@ -535,7 +535,7 @@ export default class SelectionTool extends BaseTool {
         this.handleOverlay.style.display = enabled ? 'block' : 'none';
         if (enabled) {
             this.handleOverlay.tabIndex = 0;
-            this.handleOverlay.ariaLabel = this.editor.localization.selectionToolKeyboardShortcuts;
+            this.handleOverlay.setAttribute('aria-label', this.editor.localization.selectionToolKeyboardShortcuts);
         }
         else {
             this.handleOverlay.tabIndex = -1;

package/dist/src/tools/TextTool.js

@@ -1,7 +1,7 @@
 import Color4 from '../Color4';
 import Text from '../components/Text';
 import EditorImage from '../EditorImage';
-import Mat33 from '../geometry/Mat33';
+import Mat33 from '../math/Mat33';
 import { PointerDevice } from '../Pointer';
 import { EditorEventType } from '../types';
 import BaseTool from './BaseTool';

package/dist/src/types.d.ts

@@ -1,10 +1,10 @@
 import EventDispatcher from './EventDispatcher';
-import Mat33 from './geometry/Mat33';
-import { Point2, Vec2 } from './geometry/Vec2';
-import Vec3 from './geometry/Vec3';
+import Mat33 from './math/Mat33';
+import { Point2, Vec2 } from './math/Vec2';
+import Vec3 from './math/Vec3';
 import BaseTool from './tools/BaseTool';
 import AbstractComponent from './components/AbstractComponent';
-import Rect2 from './geometry/Rect2';
+import Rect2 from './math/Rect2';
 import Pointer from './Pointer';
 import Color4 from './Color4';
 export interface PointerEvtListener {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
   "main": "dist/src/Editor.js",
   "types": "dist/src/Editor.d.ts",

package/src/Editor.ts

@@ -6,8 +6,8 @@ import Command from './commands/Command';
 import UndoRedoHistory from './UndoRedoHistory';
 import Viewport from './Viewport';
 import EventDispatcher from './EventDispatcher';
-import { Point2, Vec2 } from './geometry/Vec2';
-import Vec3 from './geometry/Vec3';
+import { Point2, Vec2 } from './math/Vec2';
+import Vec3 from './math/Vec3';
 import HTMLToolbar from './toolbar/HTMLToolbar';
 import { RenderablePathSpec } from './rendering/renderers/AbstractRenderer';
 import Display, { RenderingMode } from './rendering/Display';
@@ -15,8 +15,8 @@ import SVGRenderer from './rendering/renderers/SVGRenderer';
 import Color4 from './Color4';
 import SVGLoader from './SVGLoader';
 import Pointer from './Pointer';
-import Mat33 from './geometry/Mat33';
-import Rect2 from './geometry/Rect2';
+import Mat33 from './math/Mat33';
+import Rect2 from './math/Rect2';
 import { EditorLocalization } from './localization';
 import getLocalizationTable from './localizations/getLocalizationTable';
 
@@ -55,6 +55,7 @@ export class Editor {
 
 	private loadingWarning: HTMLElement;
 	private accessibilityAnnounceArea: HTMLElement;
+	private accessibilityControlArea: HTMLTextAreaElement;
 
 	private settings: EditorSettings;
 
@@ -86,15 +87,23 @@ export class Editor {
 		this.loadingWarning.ariaLive = 'polite';
 		this.container.appendChild(this.loadingWarning);
 
+		this.accessibilityControlArea = document.createElement('textarea');
+		this.accessibilityControlArea.setAttribute('placeholder', this.localization.accessibilityInputInstructions);
+		this.accessibilityControlArea.style.opacity = '0';
+		this.accessibilityControlArea.style.width = '0';
+		this.accessibilityControlArea.style.height = '0';
+		this.accessibilityControlArea.style.position = 'absolute';
+
 		this.accessibilityAnnounceArea = document.createElement('div');
-		this.accessibilityAnnounceArea.ariaLive = 'assertive';
+		this.accessibilityAnnounceArea.setAttribute('aria-live', 'assertive');
 		this.accessibilityAnnounceArea.className = 'accessibilityAnnouncement';
 		this.container.appendChild(this.accessibilityAnnounceArea);
 
 		this.renderingRegion.style.touchAction = 'none';
 		this.renderingRegion.className = 'imageEditorRenderArea';
+		this.renderingRegion.appendChild(this.accessibilityControlArea);
 		this.renderingRegion.setAttribute('tabIndex', '0');
-		this.renderingRegion.ariaLabel = this.localization.imageEditor;
+		this.renderingRegion.setAttribute('alt', '');
 
 		this.notifier = new EventDispatcher();
 		this.importExportViewport = new Viewport(this.notifier);
@@ -156,8 +165,14 @@ export class Editor {
 		this.announceForAccessibility(this.localization.doneLoading);
 	}
 
+	private previousAccessibilityAnnouncement: string = '';
 	public announceForAccessibility(message: string) {
+		// Force re-announcing an announcement if announced again.
+		if (message === this.previousAccessibilityAnnouncement) {
+			message = message + '. ';
+		}
 		this.accessibilityAnnounceArea.innerText = message;
+		this.previousAccessibilityAnnouncement = message;
 	}
 
 	public addToolbar(defaultLayout: boolean = true): HTMLToolbar {
@@ -319,13 +334,20 @@ export class Editor {
 			});
 			this.queueRerender();
 		});
+
+		this.accessibilityControlArea.addEventListener('input', () => {
+			this.accessibilityControlArea.value = '';
+		});
 	}
 
 	// Adds event listners for keypresses to [elem] and forwards those events to the
 	// editor.
 	public handleKeyEventsFrom(elem: HTMLElement) {
 		elem.addEventListener('keydown', evt => {
-			if (this.toolController.dispatchInputEvent({
+			if (evt.key === 't' || evt.key === 'T') {
+				evt.preventDefault();
+				this.display.rerenderAsText();
+			} else if (this.toolController.dispatchInputEvent({
 				kind: InputEvtType.KeyPressEvent,
 				key: evt.key,
 				ctrlKey: evt.ctrlKey,
@@ -333,7 +355,7 @@ export class Editor {
 				evt.preventDefault();
 			} else if (evt.key === 'Escape') {
 				this.renderingRegion.blur();
-			}
+			} 
 		});
 
 		elem.addEventListener('keyup', evt => {
@@ -356,7 +378,7 @@ export class Editor {
 			command.apply(this);
 		}
 
-		this.announceForAccessibility(command.description(this.localization));
+		this.announceForAccessibility(command.description(this, this.localization));
 	}
 
 	// Dispatches a command without announcing it. By default, does not add to history.
@@ -410,11 +432,11 @@ export class Editor {
 	}
 
 	private announceUndoCallback = (command: Command) => {
-		this.announceForAccessibility(this.localization.undoAnnouncement(command.description(this.localization)));
+		this.announceForAccessibility(this.localization.undoAnnouncement(command.description(this, this.localization)));
 	};
 
 	private announceRedoCallback = (command: Command) => {
-		this.announceForAccessibility(this.localization.redoAnnouncement(command.description(this.localization)));
+		this.announceForAccessibility(this.localization.redoAnnouncement(command.description(this, this.localization)));
 	};
 
 	private rerenderQueued: boolean = false;
@@ -587,7 +609,7 @@ export class Editor {
 				editor.queueRerender();
 			}
 
-			public description(localizationTable: EditorLocalization) {
+			public description(_editor: Editor, localizationTable: EditorLocalization) {
 				return localizationTable.resizeOutputCommand(imageRect);
 			}
 		};

package/src/EditorImage.test.ts

@@ -1,9 +1,7 @@
-/* @jest-environment jsdom */
-
 import EditorImage from './EditorImage';
 import Stroke from './components/Stroke';
-import { Vec2 } from './geometry/Vec2';
-import Path, { PathCommandType } from './geometry/Path';
+import { Vec2 } from './math/Vec2';
+import Path, { PathCommandType } from './math/Path';
 import Color4 from './Color4';
 import DummyRenderer from './rendering/renderers/DummyRenderer';
 import createEditor from './testing/createEditor';

package/src/EditorImage.ts

@@ -3,7 +3,7 @@ import AbstractRenderer from './rendering/renderers/AbstractRenderer';
 import Command from './commands/Command';
 import Viewport from './Viewport';
 import AbstractComponent from './components/AbstractComponent';
-import Rect2 from './geometry/Rect2';
+import Rect2 from './math/Rect2';
 import { EditorLocalization } from './localization';
 import RenderingCache from './rendering/caching/RenderingCache';
 import SerializableCommand from './commands/SerializableCommand';
@@ -108,7 +108,7 @@ export default class EditorImage {
 			editor.queueRerender();
 		}
 
-		public description(localization: EditorLocalization) {
+		public description(editor: Editor, localization: EditorLocalization) {
 			return localization.addElementAction(this.element.description(localization));
 		}
 

package/src/Pointer.ts

@@ -1,4 +1,4 @@
-import { Point2, Vec2 } from './geometry/Vec2';
+import { Point2, Vec2 } from './math/Vec2';
 import Viewport from './Viewport';
 
 export enum PointerDevice {

package/src/SVGLoader.ts

@@ -4,10 +4,10 @@ import Stroke from './components/Stroke';
 import SVGGlobalAttributesObject from './components/SVGGlobalAttributesObject';
 import Text, { TextStyle } from './components/Text';
 import UnknownSVGObject from './components/UnknownSVGObject';
-import Mat33 from './geometry/Mat33';
-import Path from './geometry/Path';
-import Rect2 from './geometry/Rect2';
-import { Vec2 } from './geometry/Vec2';
+import Mat33 from './math/Mat33';
+import Path from './math/Path';
+import Rect2 from './math/Rect2';
+import { Vec2 } from './math/Vec2';
 import { RenderablePathSpec } from './rendering/renderers/AbstractRenderer';
 import RenderingStyle from './rendering/RenderingStyle';
 import { ComponentAddedListener, ImageLoader, OnDetermineExportRectListener, OnProgressListener } from './types';
@@ -210,8 +210,16 @@ export default class SVGLoader implements ImageLoader {
 			transformProperty = elem.style.transform || 'none';
 		}
 
-		// Compute transform matrix
-		let transform = Mat33.fromCSSMatrix(transformProperty);
+		// Compute transform matrix. Prefer the actual .style.transform
+		// to the computed stylesheet -- in some browsers, the computedStyles version
+		// can have lower precision.
+		let transform;
+		try {
+			transform = Mat33.fromCSSMatrix(elem.style.transform);
+		} catch(_e) {
+			transform = Mat33.fromCSSMatrix(transformProperty);
+		}
+
 		const supportedAttrs = [];
 		const elemX = elem.getAttribute('x');
 		const elemY = elem.getAttribute('y');

package/src/Viewport.ts

@@ -1,19 +1,23 @@
 import Command from './commands/Command';
 import { CommandLocalization } from './commands/localization';
 import Editor from './Editor';
-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 { StrokeDataPoint } from './types';
 import { EditorEventType, EditorNotifier } from './types';
 
 // Returns the base type of some type of point/number
 type PointDataType<T extends Point2|StrokeDataPoint|number> = T extends Point2 ? Point2 : number;
 
+export abstract class ViewportTransform extends Command {
+	public abstract readonly transform: Mat33;
+}
+
 export class Viewport {
 	// Command that translates/scales the viewport.
-	public static ViewportTransform = class extends Command {
+	private static ViewportTransform = class extends ViewportTransform {
 		readonly #inverseTransform: Mat33;
 
 		public constructor(public readonly transform: Mat33) {
@@ -33,14 +37,14 @@ export class Viewport {
 			editor.queueRerender();
 		}
 
-		public description(localizationTable: CommandLocalization): string {
+		public description(editor: Editor, localizationTable: CommandLocalization): string {
 			const result: string[] = [];
 
 			// Describe the transformation's affect on the viewport (note that transformation transforms
 			// the **elements** within the viewport). Assumes the transformation only does rotation/scale/translation.
-			const origVec = Vec2.unitX;
+			const origVec = editor.viewport.visibleRect.center;
 			const linearTransformedVec = this.transform.transformVec3(Vec2.unitX);
-			const affineTransformedVec = this.transform.transformVec2(Vec2.unitX);
+			const affineTransformedVec = this.transform.transformVec2(origVec);
 
 			const scale = linearTransformedVec.magnitude();
 			const rotation = 180 / Math.PI * linearTransformedVec.angle();
@@ -48,8 +52,7 @@ export class Viewport {
 
 			if (scale > 1.2) {
 				result.push(localizationTable.zoomedIn);
-			}
-			else if (scale < 0.8) {
+			} else if (scale < 0.8) {
 				result.push(localizationTable.zoomedOut);
 			}
 
@@ -64,7 +67,7 @@ export class Viewport {
 				result.push(localizationTable.movedRight);
 			}
 
-			if (translation.y < minTranslation) {
+			if (translation.y < -minTranslation) {
 				result.push(localizationTable.movedDown);
 			} else if (translation.y > minTranslation) {
 				result.push(localizationTable.movedUp);
@@ -100,7 +103,11 @@ export class Viewport {
 		return this.transform.transformVec2(canvasPoint);
 	}
 
-	// Updates the transformation directly. Using ViewportTransform is preferred.
+	public static transformBy(transform: Mat33): ViewportTransform {
+		return new Viewport.ViewportTransform(transform);
+	}
+
+	// Updates the transformation directly. Using transformBy is preferred.
 	// [newTransform] should map from canvas coordinates to screen coordinates.
 	public resetTransform(newTransform: Mat33 = Mat33.identity) {
 		const oldTransform = this.transform;
@@ -231,9 +238,4 @@ export class Viewport {
 	}
 }
 
-export namespace Viewport { // eslint-disable-line
-	// Needed to allow accessing as a type. See https://stackoverflow.com/a/68201883
-	export type ViewportTransform = typeof Viewport.ViewportTransform.prototype;
-}
-
 export default Viewport;

package/src/commands/Command.ts

@@ -8,7 +8,7 @@ export abstract class Command {
 	// Called when the command is being deleted
 	public onDrop(_editor: Editor) { }
 
-	public abstract description(localizationTable: EditorLocalization): string;
+	public abstract description(editor: Editor, localizationTable: EditorLocalization): string;
 
 	public static union(a: Command, b: Command): Command {
 		return new class extends Command {
@@ -22,9 +22,9 @@ export abstract class Command {
 				a.unapply(editor);
 			}
 
-			public description(localizationTable: EditorLocalization) {
-				const aDescription = a.description(localizationTable);
-				const bDescription = b.description(localizationTable);
+			public description(editor: Editor, localizationTable: EditorLocalization) {
+				const aDescription = a.description(editor, localizationTable);
+				const bDescription = b.description(editor, localizationTable);
 
 				if (aDescription === bDescription) {
 					return aDescription;
@@ -36,7 +36,7 @@ export abstract class Command {
 	}
 
 	public static readonly empty = new class extends Command {
-		public description(_localizationTable: EditorLocalization) { return ''; }
+		public description(_editor: Editor, _localizationTable: EditorLocalization) { return ''; }
 		public apply(_editor: Editor) { }
 		public unapply(_editor: Editor) { }
 	};

package/src/commands/Duplicate.ts

@@ -24,7 +24,7 @@ export default class Duplicate extends SerializableCommand {
 		this.reverse.apply(editor);
 	}
 
-	public description(localizationTable: EditorLocalization): string {
+	public description(_editor: Editor, localizationTable: EditorLocalization): string {
 		if (this.duplicates.length === 0) {
 			return localizationTable.duplicatedNoElements;
 		}

package/src/commands/Erase.ts

@@ -49,7 +49,7 @@ export default class Erase extends SerializableCommand {
 		}
 	}
 
-	public description(localizationTable: EditorLocalization): string {
+	public description(_editor: Editor, localizationTable: EditorLocalization): string {
 		if (this.toRemove.length === 0) {
 			return localizationTable.erasedNoElements;
 		}

package/src/commands/localization.ts

@@ -1,4 +1,4 @@
-import Rect2 from '../geometry/Rect2';
+import Rect2 from '../math/Rect2';
 
 export interface CommandLocalization {
 	movedLeft: string;

package/src/components/AbstractComponent.ts

@@ -2,9 +2,9 @@ import Command from '../commands/Command';
 import SerializableCommand from '../commands/SerializableCommand';
 import Editor from '../Editor';
 import EditorImage from '../EditorImage';
-import LineSegment2 from '../geometry/LineSegment2';
-import Mat33 from '../geometry/Mat33';
-import Rect2 from '../geometry/Rect2';
+import LineSegment2 from '../math/LineSegment2';
+import Mat33 from '../math/Mat33';
+import Rect2 from '../math/Rect2';
 import { EditorLocalization } from '../localization';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import { ImageComponentLocalization } from './localization';
@@ -128,7 +128,7 @@ export default abstract class AbstractComponent {
 			editor.queueRerender();
 		}
 
-		public description(localizationTable: EditorLocalization) {
+		public description(_editor: Editor, localizationTable: EditorLocalization) {
 			return localizationTable.transformedElements(1);
 		}
 

package/src/components/SVGGlobalAttributesObject.ts

@@ -1,6 +1,6 @@
-import LineSegment2 from '../geometry/LineSegment2';
-import Mat33 from '../geometry/Mat33';
-import Rect2 from '../geometry/Rect2';
+import LineSegment2 from '../math/LineSegment2';
+import Mat33 from '../math/Mat33';
+import Rect2 from '../math/Rect2';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import SVGRenderer from '../rendering/renderers/SVGRenderer';
 import AbstractComponent from './AbstractComponent';

package/src/components/Stroke.test.ts

@@ -1,12 +1,10 @@
-/* @jest-environment jsdom */
-
 import Color4 from '../Color4';
-import Path from '../geometry/Path';
-import { Vec2 } from '../geometry/Vec2';
+import Path from '../math/Path';
+import { Vec2 } from '../math/Vec2';
 import Stroke from './Stroke';
 import { loadExpectExtensions } from '../testing/loadExpectExtensions';
 import createEditor from '../testing/createEditor';
-import Mat33 from '../geometry/Mat33';
+import Mat33 from '../math/Mat33';
 
 loadExpectExtensions();
 

package/src/components/Stroke.ts

@@ -1,7 +1,7 @@
-import LineSegment2 from '../geometry/LineSegment2';
-import Mat33 from '../geometry/Mat33';
-import Path from '../geometry/Path';
-import Rect2 from '../geometry/Rect2';
+import LineSegment2 from '../math/LineSegment2';
+import Mat33 from '../math/Mat33';
+import Path from '../math/Path';
+import Rect2 from '../math/Rect2';
 import AbstractRenderer, { RenderablePathSpec } from '../rendering/renderers/AbstractRenderer';
 import RenderingStyle, { styleFromJSON, styleToJSON } from '../rendering/RenderingStyle';
 import AbstractComponent from './AbstractComponent';

package/src/components/Text.test.ts

@@ -1,6 +1,6 @@
 import Color4 from '../Color4';
-import Mat33 from '../geometry/Mat33';
-import Rect2 from '../geometry/Rect2';
+import Mat33 from '../math/Mat33';
+import Rect2 from '../math/Rect2';
 import AbstractComponent from './AbstractComponent';
 import Text, { TextStyle } from './Text';
 import { loadExpectExtensions } from '../testing/loadExpectExtensions';

package/src/components/Text.ts

@@ -1,6 +1,6 @@
-import LineSegment2 from '../geometry/LineSegment2';
-import Mat33 from '../geometry/Mat33';
-import Rect2 from '../geometry/Rect2';
+import LineSegment2 from '../math/LineSegment2';
+import Mat33 from '../math/Mat33';
+import Rect2 from '../math/Rect2';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import RenderingStyle, { styleFromJSON, styleToJSON } from '../rendering/RenderingStyle';
 import AbstractComponent from './AbstractComponent';

package/src/components/UnknownSVGObject.ts

@@ -1,6 +1,6 @@
-import LineSegment2 from '../geometry/LineSegment2';
-import Mat33 from '../geometry/Mat33';
-import Rect2 from '../geometry/Rect2';
+import LineSegment2 from '../math/LineSegment2';
+import Mat33 from '../math/Mat33';
+import Rect2 from '../math/Rect2';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import SVGRenderer from '../rendering/renderers/SVGRenderer';
 import AbstractComponent from './AbstractComponent';

package/src/components/builders/ArrowBuilder.ts

@@ -1,5 +1,5 @@
-import { PathCommandType } from '../../geometry/Path';
-import Rect2 from '../../geometry/Rect2';
+import { PathCommandType } from '../../math/Path';
+import Rect2 from '../../math/Rect2';
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import Viewport from '../../Viewport';