js-draw 0.3.2 → 0.4.1

package/src/Editor.ts

@@ -1,18 +1,18 @@
 /**
  * The main entrypoint for the full editor.
- * 
+ *
  * @example
  * To create an editor with a toolbar,
  * ```
  * const editor = new Editor(document.body);
- * 
+ *
  * const toolbar = editor.addToolbar();
  * toolbar.addActionButton('Save', () => {
  *   const saveData = editor.toSVG().outerHTML;
  *   // Do something with saveData...
  * });
  * ```
- * 
+ *
  * @packageDocumentation
  */
 
@@ -38,6 +38,9 @@ import Rect2 from './math/Rect2';
 import { EditorLocalization } from './localization';
 import getLocalizationTable from './localizations/getLocalizationTable';
 
+type HTMLPointerEventType = 'pointerdown'|'pointermove'|'pointerup'|'pointercancel';
+type HTMLPointerEventFilter = (eventName: HTMLPointerEventType, event: PointerEvent)=>boolean;
+
 export interface EditorSettings {
 	/** Defaults to `RenderingMode.CanvasRenderer` */
 	renderingMode: RenderingMode,
@@ -67,14 +70,14 @@ export class Editor {
 
 	/**
 	 * Handles undo/redo.
-	 * 
+	 *
 	 * @example
 	 * ```
 	 * const editor = new Editor(document.body);
-	 * 
+	 *
 	 * // Do something undoable.
 	 * // ...
-	 * 
+	 *
 	 * // Undo the last action
 	 * editor.history.undo();
 	 * ```
@@ -83,17 +86,17 @@ export class Editor {
 
 	/**
 	 * Data structure for adding/removing/querying objects in the image.
-	 * 
+	 *
 	 * @example
 	 * ```
 	 * const editor = new Editor(document.body);
-	 * 
+	 *
 	 * // Create a path.
 	 * const stroke = new Stroke([
 	 *   Path.fromString('M0,0 L30,30 z').toRenderable({ fill: Color4.black }),
 	 * ]);
 	 * const addElementCommand = editor.image.addElement(stroke);
-	 * 
+	 *
 	 * // Add the stroke to the editor
 	 * editor.dispatch(addElementCommand);
 	 * ```
@@ -126,14 +129,14 @@ export class Editor {
 	 * @example
 	 * ```
 	 * const container = document.body;
-	 * 
+	 *
 	 * // Create an editor
 	 * const editor = new Editor(container, {
 	 *   // 2e-10 and 1e12 are the default values for minimum/maximum zoom.
 	 *   minZoom: 2e-10,
 	 *   maxZoom: 1e12,
 	 * });
-	 * 
+	 *
 	 * // Add the default toolbar
 	 * const toolbar = editor.addToolbar();
 	 * toolbar.addActionButton({
@@ -224,7 +227,7 @@ export class Editor {
 					if (oldZoom <= this.settings.maxZoom && oldZoom >= this.settings.minZoom) {
 						resetTransform = evt.oldTransform;
 					}
-	
+
 					this.viewport.resetTransform(resetTransform);
 				}
 			}
@@ -233,7 +236,7 @@ export class Editor {
 
 	/**
 	 * @returns a reference to the editor's container.
-	 * 
+	 *
 	 * @example
 	 * ```
 	 *   editor.getRootElement().style.height = '500px';
@@ -285,96 +288,7 @@ export class Editor {
 	}
 
 	private registerListeners() {
-		const pointers: Record<number, Pointer> = {};
-		const getPointerList = () => {
-			const nowTime = (new Date()).getTime();
-
-			const res: Pointer[] = [];
-			for (const id in pointers) {
-				const maxUnupdatedTime = 2000; // Maximum time without a pointer update (ms)
-				if (pointers[id] && (nowTime - pointers[id].timeStamp) < maxUnupdatedTime) {
-					res.push(pointers[id]);
-				}
-			}
-			return res;
-		};
-
-		// May be required to prevent text selection on iOS/Safari:
-		// See https://stackoverflow.com/a/70992717/17055750
-		this.renderingRegion.addEventListener('touchstart', evt => evt.preventDefault());
-		this.renderingRegion.addEventListener('contextmenu', evt => {
-			// Don't show a context menu
-			evt.preventDefault();
-		});
-
-		this.renderingRegion.addEventListener('pointerdown', evt => {
-			const pointer = Pointer.ofEvent(evt, true, this.viewport);
-			pointers[pointer.id] = pointer;
-
-			this.renderingRegion.setPointerCapture(pointer.id);
-			const event: PointerEvt = {
-				kind: InputEvtType.PointerDownEvt,
-				current: pointer,
-				allPointers: getPointerList(),
-			};
-			this.toolController.dispatchInputEvent(event);
-
-			return true;
-		});
-
-		this.renderingRegion.addEventListener('pointermove', evt => {
-			const pointer = Pointer.ofEvent(
-				evt, pointers[evt.pointerId]?.down ?? false, this.viewport
-			);
-			if (pointer.down) {
-				const prevData = pointers[pointer.id];
-
-				if (prevData) {
-					const distanceMoved = pointer.screenPos.minus(prevData.screenPos).magnitude();
-
-					// If the pointer moved less than two pixels, don't send a new event.
-					if (distanceMoved < 2) {
-						return;
-					}
-				}
-
-				pointers[pointer.id] = pointer;
-				if (this.toolController.dispatchInputEvent({
-					kind: InputEvtType.PointerMoveEvt,
-					current: pointer,
-					allPointers: getPointerList(),
-				})) {
-					evt.preventDefault();
-				}
-			}
-		});
-
-		const pointerEnd = (evt: PointerEvent) => {
-			const pointer = Pointer.ofEvent(evt, false, this.viewport);
-			if (!pointers[pointer.id]) {
-				return;
-			}
-
-			pointers[pointer.id] = pointer;
-			this.renderingRegion.releasePointerCapture(pointer.id);
-			if (this.toolController.dispatchInputEvent({
-				kind: InputEvtType.PointerUpEvt,
-				current: pointer,
-				allPointers: getPointerList(),
-			})) {
-				evt.preventDefault();
-			}
-			delete pointers[pointer.id];
-		};
-
-		this.renderingRegion.addEventListener('pointerup', evt => {
-			pointerEnd(evt);
-		});
-
-		this.renderingRegion.addEventListener('pointercancel', evt => {
-			pointerEnd(evt);
-		});
-
+		this.handlePointerEventsFrom(this.renderingRegion);
 		this.handleKeyEventsFrom(this.renderingRegion);
 
 		this.container.addEventListener('wheel', evt => {
@@ -404,7 +318,10 @@ export class Editor {
 				delta = Vec3.of(0, 0, evt.deltaY);
 			}
 
-			const pos = Vec2.of(evt.offsetX, evt.offsetY);
+			// Ensure that `pos` is relative to `this.container`
+			const bbox = this.container.getBoundingClientRect();
+			const pos = Vec2.of(evt.clientX, evt.clientY).minus(Vec2.of(bbox.left, bbox.top));
+
 			if (this.toolController.dispatchInputEvent({
 				kind: InputEvtType.WheelEvt,
 				delta,
@@ -459,6 +376,91 @@ export class Editor {
 		});
 	}
 
+	private pointers: Record<number, Pointer> = {};
+	private getPointerList() {
+		const nowTime = (new Date()).getTime();
+
+		const res: Pointer[] = [];
+		for (const id in this.pointers) {
+			const maxUnupdatedTime = 2000; // Maximum time without a pointer update (ms)
+			if (this.pointers[id] && (nowTime - this.pointers[id].timeStamp) < maxUnupdatedTime) {
+				res.push(this.pointers[id]);
+			}
+		}
+		return res;
+	}
+
+	/**
+	 * Dispatches a `PointerEvent` to the editor. The target element for `evt` must have the same top left
+	 * as the content of the editor.
+	 */
+	public handleHTMLPointerEvent(eventType: 'pointerdown'|'pointermove'|'pointerup'|'pointercancel', evt: PointerEvent): boolean {
+		const eventsRelativeTo = this.renderingRegion;
+		const eventTarget = (evt.target as HTMLElement|null) ?? this.renderingRegion;
+
+		if (eventType === 'pointerdown') {
+			const pointer = Pointer.ofEvent(evt, true, this.viewport, eventsRelativeTo);
+			this.pointers[pointer.id] = pointer;
+
+			eventTarget.setPointerCapture(pointer.id);
+			const event: PointerEvt = {
+				kind: InputEvtType.PointerDownEvt,
+				current: pointer,
+				allPointers: this.getPointerList(),
+			};
+			this.toolController.dispatchInputEvent(event);
+
+			return true;
+		}
+		else if (eventType === 'pointermove') {
+			const pointer = Pointer.ofEvent(
+				evt, this.pointers[evt.pointerId]?.down ?? false, this.viewport, eventsRelativeTo
+			);
+			if (pointer.down) {
+				const prevData = this.pointers[pointer.id];
+
+				if (prevData) {
+					const distanceMoved = pointer.screenPos.minus(prevData.screenPos).magnitude();
+
+					// If the pointer moved less than two pixels, don't send a new event.
+					if (distanceMoved < 2) {
+						return false;
+					}
+				}
+
+				this.pointers[pointer.id] = pointer;
+				if (this.toolController.dispatchInputEvent({
+					kind: InputEvtType.PointerMoveEvt,
+					current: pointer,
+					allPointers: this.getPointerList(),
+				})) {
+					evt.preventDefault();
+				}
+			}
+			return true;
+		}
+		else if (eventType === 'pointercancel' || eventType === 'pointerup') {
+			const pointer = Pointer.ofEvent(evt, false, this.viewport, eventsRelativeTo);
+			if (!this.pointers[pointer.id]) {
+				return false;
+			}
+
+			this.pointers[pointer.id] = pointer;
+			eventTarget.releasePointerCapture(pointer.id);
+			if (this.toolController.dispatchInputEvent({
+				kind: InputEvtType.PointerUpEvt,
+				current: pointer,
+				allPointers: this.getPointerList(),
+			})) {
+				evt.preventDefault();
+			}
+			delete this.pointers[pointer.id];
+			return true;
+		}
+
+		return eventType;
+	}
+
 	private isEventSink(evtTarget: Element|EventTarget|null) {
 		let currentElem: Element|null = evtTarget as Element|null;
 		while (currentElem !== null) {
@@ -553,6 +555,27 @@ export class Editor {
 		}
 	}
 
+	public handlePointerEventsFrom(elem: HTMLElement, filter?: HTMLPointerEventFilter) {
+		// May be required to prevent text selection on iOS/Safari:
+		// See https://stackoverflow.com/a/70992717/17055750
+		elem.addEventListener('touchstart', evt => evt.preventDefault());
+		elem.addEventListener('contextmenu', evt => {
+			// Don't show a context menu
+			evt.preventDefault();
+		});
+
+		const eventNames: HTMLPointerEventType[] = ['pointerdown', 'pointermove', 'pointerup', 'pointercancel'];
+		for (const eventName of eventNames) {
+			elem.addEventListener(eventName, evt => {
+				if (filter && !filter(eventName, evt)) {
+					return true;
+				}
+
+				return this.handleHTMLPointerEvent(eventName, evt);
+			});
+		}
+	}
+
 	/** Adds event listners for keypresses to `elem` and forwards those events to the editor. */
 	public handleKeyEventsFrom(elem: HTMLElement) {
 		elem.addEventListener('keydown', evt => {
@@ -567,7 +590,7 @@ export class Editor {
 				evt.preventDefault();
 			} else if (evt.key === 'Escape') {
 				this.renderingRegion.blur();
-			} 
+			}
 		});
 
 		elem.addEventListener('keyup', evt => {
@@ -609,11 +632,11 @@ export class Editor {
 	 * Dispatches a command without announcing it. By default, does not add to history.
 	 * Use this to show finalized commands that don't need to have `announceForAccessibility`
 	 * called.
-	 * 
+	 *
 	 * Prefer `command.apply(editor)` for incomplete commands. `dispatchNoAnnounce` may allow
 	 * clients to listen for the application of commands (e.g. `SerializableCommand`s so they can
 	 * be sent across the network), while `apply` does not.
-	 * 
+	 *
 	 * @example
 	 * ```
 	 * const addToHistory = false;
@@ -755,11 +778,27 @@ export class Editor {
 		return styleSheet;
 	}
 
+	// Dispatch a keyboard event to the currently selected tool.
+	// Intended for unit testing
+	public sendKeyboardEvent(
+		eventType: InputEvtType.KeyPressEvent|InputEvtType.KeyUpEvent,
+		key: string,
+		ctrlKey: boolean = false
+	) {
+		this.toolController.dispatchInputEvent({
+			kind: eventType,
+			key,
+			ctrlKey
+		});
+	}
+
 	// Dispatch a pen event to the currently selected tool.
 	// Intended primarially for unit tests.
 	public sendPenEvent(
 		eventType: InputEvtType.PointerDownEvt|InputEvtType.PointerMoveEvt|InputEvtType.PointerUpEvt,
 		point: Point2,
+
+		// @deprecated
 		allPointers?: Pointer[]
 	) {
 		const mainPointer = Pointer.ofCanvasPoint(
@@ -864,7 +903,7 @@ export class Editor {
 
 	/**
 	 * Alias for loadFrom(SVGLoader.fromString).
-	 * 
+	 *
 	 * This is particularly useful when accessing a bundled version of the editor,
 	 * where `SVGLoader.fromString` is unavailable.
 	 */

package/src/Pointer.ts

@@ -36,9 +36,14 @@ export default class Pointer {
 	) {
 	}
 
-	// Creates a Pointer from a DOM event.
-	public static ofEvent(evt: PointerEvent, isDown: boolean, viewport: Viewport): Pointer {
-		const screenPos = Vec2.of(evt.offsetX, evt.offsetY);
+	// Creates a Pointer from a DOM event. If `relativeTo` is given, (0, 0) in screen coordinates is
+	// considered the top left of `relativeTo`.
+	public static ofEvent(evt: PointerEvent, isDown: boolean, viewport: Viewport, relativeTo?: HTMLElement): Pointer {
+		let screenPos = Vec2.of(evt.clientX, evt.clientY);
+		if (relativeTo) {
+			const bbox = relativeTo.getBoundingClientRect();
+			screenPos = screenPos.minus(Vec2.of(bbox.left, bbox.top));
+		}
 
 		const pointerTypeToDevice: Record<string, PointerDevice> = {
 			'mouse': PointerDevice.PrimaryButtonMouse,

package/src/Viewport.ts

@@ -146,7 +146,8 @@ export class Viewport {
 		return 1/this.getScaleFactor();
 	}
 
-	// Returns the angle of the canvas in radians
+	// Returns the angle of the canvas in radians.
+	// This is the angle by which the canvas is rotated relative to the screen.
 	public getRotationAngle(): number {
 		return this.transform.transformVec3(Vec3.unitX).angle();
 	}
@@ -175,12 +176,26 @@ export class Viewport {
 		return point.map(roundComponent);
 	}
 
-
 	// Round a point with a tolerance of ±1 screen unit.
 	public roundPoint(point: Point2): Point2 {
 		return Viewport.roundPoint(point, 1 / this.getScaleFactor());
 	}
 
+	// `roundAmount`: An integer >= 0, larger numbers cause less rounding. Smaller numbers cause more
+	// (as such `roundAmount = 0` does the most rounding).
+	public static roundScaleRatio(scaleRatio: number, roundAmount: number = 1): number {
+		if (Math.abs(scaleRatio) <= 1e-12) {
+			return 0;
+		}
+
+		// Represent as k 10ⁿ for some n, k ∈ ℤ.
+		const decimalComponent = 10 ** Math.floor(Math.log10(Math.abs(scaleRatio)));
+		const roundAnountFactor = 2 ** roundAmount;
+		scaleRatio = Math.round(scaleRatio / decimalComponent * roundAnountFactor) / roundAnountFactor * decimalComponent;
+
+		return scaleRatio;
+	}
+
 	// Computes and returns an affine transformation that makes `toMakeVisible` visible and roughly centered on the screen.
 	public computeZoomToTransform(toMakeVisible: Rect2, allowZoomIn: boolean = true, allowZoomOut: boolean = true): Mat33 {
 		let transform = Mat33.identity;

package/src/components/AbstractComponent.ts

@@ -2,7 +2,7 @@ import SerializableCommand from '../commands/SerializableCommand';
 import Editor from '../Editor';
 import EditorImage from '../EditorImage';
 import LineSegment2 from '../math/LineSegment2';
-import Mat33 from '../math/Mat33';
+import Mat33, { Mat33Array } from '../math/Mat33';
 import Rect2 from '../math/Rect2';
 import { EditorLocalization } from '../localization';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
@@ -183,11 +183,7 @@ export default abstract class AbstractComponent {
 			SerializableCommand.register(AbstractComponent.transformElementCommandId, (json: any, editor: Editor) => {
 				const elem = editor.image.lookupElement(json.id);
 
-				const transform = new Mat33(...(json.transfm as [
-					number, number, number,
-					number, number, number,
-					number, number, number,
-				]));
+				const transform = new Mat33(...(json.transfm as Mat33Array));
 
 				if (!elem) {
 					return new AbstractComponent.UnresolvedTransformElementCommand(transform, json.id);
@@ -210,8 +206,10 @@ export default abstract class AbstractComponent {
 
 	public abstract description(localizationTable: ImageComponentLocalization): string;
 
+	// Component-specific implementation of {@link clone}.
 	protected abstract createClone(): AbstractComponent;
 
+	// Returns a copy of this component.
 	public clone() {
 		const clone = this.createClone();
 

package/src/components/ImageComponent.ts

@@ -1,5 +1,5 @@
 import LineSegment2 from '../math/LineSegment2';
-import Mat33 from '../math/Mat33';
+import Mat33, { Mat33Array } from '../math/Mat33';
 import Rect2 from '../math/Rect2';
 import AbstractRenderer, { RenderableImage } from '../rendering/renderers/AbstractRenderer';
 import AbstractComponent from './AbstractComponent';
@@ -141,11 +141,7 @@ export default class ImageComponent extends AbstractComponent {
 			image: image,
 			base64Url: image.src,
 			label: data.label,
-			transform: new Mat33(...(data.transform as [
-				number, number, number,
-				number, number, number,
-				number, number, number,
-			])),
+			transform: new Mat33(...(data.transform as Mat33Array)),
 		});
 	}
 }

package/src/components/Stroke.test.ts

@@ -2,12 +2,9 @@ import Color4 from '../Color4';
 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 '../math/Mat33';
 
-loadExpectExtensions();
-
 describe('Stroke', () => {
 	it('empty stroke should have an empty bounding box', () => {
 		const stroke = new Stroke([{

package/src/components/Stroke.ts

@@ -18,7 +18,8 @@ export default class Stroke extends AbstractComponent {
 	public constructor(parts: RenderablePathSpec[]) {
 		super('stroke');
 
-		this.parts = parts.map((section): StrokePart => {
+		this.parts = [];
+		for (const section of parts) {
 			const path = Path.fromRenderable(section);
 			const pathBBox = this.bboxForPart(path.bbox, section.style);
 
@@ -28,15 +29,15 @@ export default class Stroke extends AbstractComponent {
 				this.contentBBox = this.contentBBox.union(pathBBox);
 			}
 
-			return {
+			this.parts.push({
 				path,
 
 				// To implement RenderablePathSpec
 				startPoint: path.startPoint,
 				style: section.style,
 				commands: path.parts,
-			};
-		});
+			});
+		}
 		this.contentBBox ??= Rect2.empty;
 	}
 
@@ -104,9 +105,15 @@ export default class Stroke extends AbstractComponent {
 	}
 
 	public getPath() {
-		return this.parts.reduce((accumulator: Path|null, current: StrokePart) => {
-			return accumulator?.union(current.path) ?? current.path;
-		}, null) ?? Path.empty;
+		let result: Path|null = null;
+		for (const part of this.parts) {
+			if (result) {
+				result = result.union(part.path);
+			} else {
+				result ??= part.path;
+			}
+		}
+		return result ?? Path.empty;
 	}
 
 	public description(localization: ImageComponentLocalization): string {

package/src/components/Text.test.ts

@@ -3,9 +3,6 @@ import Mat33 from '../math/Mat33';
 import Rect2 from '../math/Rect2';
 import AbstractComponent from './AbstractComponent';
 import Text, { TextStyle } from './Text';
-import { loadExpectExtensions } from '../testing/loadExpectExtensions';
-
-loadExpectExtensions();
 
 const estimateTextBounds = (text: string, style: TextStyle): Rect2 => {
 	const widthEst = text.length * style.size;

package/src/components/Text.ts

@@ -1,5 +1,5 @@
 import LineSegment2 from '../math/LineSegment2';
-import Mat33 from '../math/Mat33';
+import Mat33, { Mat33Array } from '../math/Mat33';
 import Rect2 from '../math/Rect2';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import RenderingStyle, { styleFromJSON, styleToJSON } from '../rendering/RenderingStyle';
@@ -135,7 +135,7 @@ export default class Text extends AbstractComponent {
 		return new Text(this.textObjects, this.transform, this.style);
 	}
 
-	private getText() {
+	public getText() {
 		const result: string[] = [];
 
 		for (const textObject of this.textObjects) {
@@ -146,7 +146,7 @@ export default class Text extends AbstractComponent {
 			}
 		}
 
-		return result.join(' ');
+		return result.join('\n');
 	}
 
 	public description(localizationTable: ImageComponentLocalization): string {
@@ -200,11 +200,7 @@ export default class Text extends AbstractComponent {
 			throw new Error(`Unable to deserialize transform, ${json.transform}.`);
 		}
 
-		const transformData = json.transform as [
-			number, number, number,
-			number, number, number,
-			number, number, number,
-		];
+		const transformData = json.transform as Mat33Array;
 		const transform = new Mat33(...transformData);
 
 		return new Text(textObjects, transform, style, getTextDimens);