js-draw 0.3.1 → 0.4.0

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);
 	 * ```
@@ -118,6 +121,7 @@ export class Editor {
 	private loadingWarning: HTMLElement;
 	private accessibilityAnnounceArea: HTMLElement;
 	private accessibilityControlArea: HTMLTextAreaElement;
+	private eventListenerTargets: HTMLElement[] = [];
 
 	private settings: EditorSettings;
 
@@ -125,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({
@@ -223,7 +227,7 @@ export class Editor {
 					if (oldZoom <= this.settings.maxZoom && oldZoom >= this.settings.minZoom) {
 						resetTransform = evt.oldTransform;
 					}
-	
+
 					this.viewport.resetTransform(resetTransform);
 				}
 			}
@@ -232,7 +236,7 @@ export class Editor {
 
 	/**
 	 * @returns a reference to the editor's container.
-	 * 
+	 *
 	 * @example
 	 * ```
 	 *   editor.getRootElement().style.height = '500px';
@@ -284,157 +288,292 @@ 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]);
+		this.handlePointerEventsFrom(this.renderingRegion);
+		this.handleKeyEventsFrom(this.renderingRegion);
+
+		this.container.addEventListener('wheel', evt => {
+			let delta = Vec3.of(evt.deltaX, evt.deltaY, evt.deltaZ);
+
+			// Process wheel events if the ctrl key is down, even if disabled -- we do want to handle
+			// pinch-zooming.
+			if (!evt.ctrlKey) {
+				if (!this.settings.wheelEventsEnabled) {
+					return;
+				} else if (this.settings.wheelEventsEnabled === 'only-if-focused') {
+					const focusedChild = this.container.querySelector(':focus');
+
+					if (!focusedChild) {
+						return;
+					}
 				}
 			}
-			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();
+			if (evt.deltaMode === WheelEvent.DOM_DELTA_LINE) {
+				delta = delta.times(15);
+			} else if (evt.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
+				delta = delta.times(100);
+			}
+
+			if (evt.ctrlKey) {
+				delta = Vec3.of(0, 0, evt.deltaY);
+			}
+
+			// 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,
+				screenPos: pos,
+			})) {
+				evt.preventDefault();
+				return true;
+			}
+			return false;
 		});
 
-		this.renderingRegion.addEventListener('pointerdown', evt => {
-			const pointer = Pointer.ofEvent(evt, true, this.viewport);
-			pointers[pointer.id] = pointer;
+		this.notifier.on(EditorEventType.DisplayResized, _event => {
+			this.viewport.updateScreenSize(
+				Vec2.of(this.display.width, this.display.height)
+			);
+		});
 
-			this.renderingRegion.setPointerCapture(pointer.id);
+		window.addEventListener('resize', () => {
+			this.notifier.dispatch(EditorEventType.DisplayResized, {
+				kind: EditorEventType.DisplayResized,
+				newSize: Vec2.of(
+					this.display.width,
+					this.display.height
+				),
+			});
+			this.queueRerender();
+		});
+
+		this.accessibilityControlArea.addEventListener('input', () => {
+			this.accessibilityControlArea.value = '';
+		});
+
+		document.addEventListener('copy', evt => {
+			if (!this.isEventSink(document.querySelector(':focus'))) {
+				return;
+			}
+
+			const clipboardData = evt.clipboardData;
+
+			if (this.toolController.dispatchInputEvent({
+				kind: InputEvtType.CopyEvent,
+				setData: (mime, data) => {
+					clipboardData?.setData(mime, data);
+				},
+			})) {
+				evt.preventDefault();
+			}
+		});
+
+		document.addEventListener('paste', evt => {
+			this.handlePaste(evt);
+		});
+	}
+
+	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: getPointerList(),
+				allPointers: this.getPointerList(),
 			};
 			this.toolController.dispatchInputEvent(event);
 
 			return true;
-		});
-
-		this.renderingRegion.addEventListener('pointermove', evt => {
+		}
+		else if (eventType === 'pointermove') {
 			const pointer = Pointer.ofEvent(
-				evt, pointers[evt.pointerId]?.down ?? false, this.viewport
+				evt, this.pointers[evt.pointerId]?.down ?? false, this.viewport, eventsRelativeTo
 			);
 			if (pointer.down) {
-				const prevData = pointers[pointer.id];
+				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;
+						return false;
 					}
 				}
 
-				pointers[pointer.id] = pointer;
+				this.pointers[pointer.id] = pointer;
 				if (this.toolController.dispatchInputEvent({
 					kind: InputEvtType.PointerMoveEvt,
 					current: pointer,
-					allPointers: getPointerList(),
+					allPointers: this.getPointerList(),
 				})) {
 					evt.preventDefault();
 				}
 			}
-		});
-
-		const pointerEnd = (evt: PointerEvent) => {
-			const pointer = Pointer.ofEvent(evt, false, this.viewport);
-			if (!pointers[pointer.id]) {
-				return;
+			return true;
+		}
+		else if (eventType === 'pointercancel' || eventType === 'pointerup') {
+			const pointer = Pointer.ofEvent(evt, false, this.viewport, eventsRelativeTo);
+			if (!this.pointers[pointer.id]) {
+				return false;
 			}
 
-			pointers[pointer.id] = pointer;
-			this.renderingRegion.releasePointerCapture(pointer.id);
+			this.pointers[pointer.id] = pointer;
+			eventTarget.releasePointerCapture(pointer.id);
 			if (this.toolController.dispatchInputEvent({
 				kind: InputEvtType.PointerUpEvt,
 				current: pointer,
-				allPointers: getPointerList(),
+				allPointers: this.getPointerList(),
 			})) {
 				evt.preventDefault();
 			}
-			delete pointers[pointer.id];
-		};
+			delete this.pointers[pointer.id];
+			return true;
+		}
 
-		this.renderingRegion.addEventListener('pointerup', evt => {
-			pointerEnd(evt);
-		});
+		return eventType;
+	}
 
-		this.renderingRegion.addEventListener('pointercancel', evt => {
-			pointerEnd(evt);
-		});
+	private isEventSink(evtTarget: Element|EventTarget|null) {
+		let currentElem: Element|null = evtTarget as Element|null;
+		while (currentElem !== null) {
+			for (const elem of this.eventListenerTargets) {
+				if (elem === currentElem) {
+					return true;
+				}
+			}
 
-		this.handleKeyEventsFrom(this.renderingRegion);
+			currentElem = (currentElem as Element).parentElement;
+		}
+		return false;
+	}
 
-		this.container.addEventListener('wheel', evt => {
-			let delta = Vec3.of(evt.deltaX, evt.deltaY, evt.deltaZ);
+	private async handlePaste(evt: DragEvent|ClipboardEvent) {
+		const target = document.querySelector(':focus') ?? evt.target;
+		if (!this.isEventSink(target)) {
+			return;
+		}
 
-			// Process wheel events if the ctrl key is down, even if disabled -- we do want to handle
-			// pinch-zooming.
-			if (!evt.ctrlKey) {
-				if (!this.settings.wheelEventsEnabled) {
+		const clipboardData: DataTransfer = (evt as any).dataTransfer ?? (evt as any).clipboardData;
+		if (!clipboardData) {
+			return;
+		}
+
+		// Handle SVG files (prefer to PNG/JPEG)
+		for (const file of clipboardData.files) {
+			if (file.type.toLowerCase() === 'image/svg+xml') {
+				const text = await file.text();
+				if (this.toolController.dispatchInputEvent({
+					kind: InputEvtType.PasteEvent,
+					mime: file.type,
+					data: text,
+				})) {
+					evt.preventDefault();
 					return;
-				} else if (this.settings.wheelEventsEnabled === 'only-if-focused') {
-					const focusedChild = this.container.querySelector(':focus');
+				}
+			}
+		}
 
-					if (!focusedChild) {
+		// Handle image files.
+		for (const file of clipboardData.files) {
+			const fileType = file.type.toLowerCase();
+			if (fileType === 'image/png' || fileType === 'image/jpg') {
+				const reader = new FileReader();
+
+				this.showLoadingWarning(0);
+				try {
+					const data = await new Promise((resolve: (result: string|null)=>void, reject) => {
+						reader.onload = () => resolve(reader.result as string|null);
+						reader.onerror = reject;
+						reader.onabort = reject;
+						reader.onprogress = (evt) => {
+							this.showLoadingWarning(evt.loaded / evt.total);
+						};
+
+						reader.readAsDataURL(file);
+					});
+					if (data && this.toolController.dispatchInputEvent({
+						kind: InputEvtType.PasteEvent,
+						mime: fileType,
+						data: data,
+					})) {
+						evt.preventDefault();
+						this.hideLoadingWarning();
 						return;
 					}
+				} catch (e) {
+					console.error('Error reading image:', e);
 				}
+				this.hideLoadingWarning();
 			}
+		}
 
-			if (evt.deltaMode === WheelEvent.DOM_DELTA_LINE) {
-				delta = delta.times(15);
-			} else if (evt.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
-				delta = delta.times(100);
-			}
+		// Supported MIMEs for text data, in order of preference
+		const supportedMIMEs = [
+			'image/svg+xml',
+			'text/plain',
+		];
 
-			if (evt.ctrlKey) {
-				delta = Vec3.of(0, 0, evt.deltaY);
-			}
+		for (const mime of supportedMIMEs) {
+			const data = clipboardData.getData(mime);
 
-			const pos = Vec2.of(evt.offsetX, evt.offsetY);
-			if (this.toolController.dispatchInputEvent({
-				kind: InputEvtType.WheelEvt,
-				delta,
-				screenPos: pos,
+			if (data && this.toolController.dispatchInputEvent({
+				kind: InputEvtType.PasteEvent,
+				mime,
+				data,
 			})) {
 				evt.preventDefault();
-				return true;
+				return;
 			}
-			return false;
-		});
+		}
+	}
 
-		this.notifier.on(EditorEventType.DisplayResized, _event => {
-			this.viewport.updateScreenSize(
-				Vec2.of(this.display.width, this.display.height)
-			);
+	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();
 		});
 
-		window.addEventListener('resize', () => {
-			this.notifier.dispatch(EditorEventType.DisplayResized, {
-				kind: EditorEventType.DisplayResized,
-				newSize: Vec2.of(
-					this.display.width,
-					this.display.height
-				),
-			});
-			this.queueRerender();
-		});
+		const eventNames: HTMLPointerEventType[] = ['pointerdown', 'pointermove', 'pointerup', 'pointercancel'];
+		for (const eventName of eventNames) {
+			elem.addEventListener(eventName, evt => {
+				if (filter && !filter(eventName, evt)) {
+					return true;
+				}
 
-		this.accessibilityControlArea.addEventListener('input', () => {
-			this.accessibilityControlArea.value = '';
-		});
+				return this.handleHTMLPointerEvent(eventName, evt);
+			});
+		}
 	}
 
 	/** Adds event listners for keypresses to `elem` and forwards those events to the editor. */
@@ -451,7 +590,7 @@ export class Editor {
 				evt.preventDefault();
 			} else if (evt.key === 'Escape') {
 				this.renderingRegion.blur();
-			} 
+			}
 		});
 
 		elem.addEventListener('keyup', evt => {
@@ -463,6 +602,18 @@ export class Editor {
 				evt.preventDefault();
 			}
 		});
+
+		// Allow drop.
+		elem.ondragover = evt => {
+			evt.preventDefault();
+		};
+
+		elem.ondrop = evt => {
+			evt.preventDefault();
+			this.handlePaste(evt);
+		};
+
+		this.eventListenerTargets.push(elem);
 	}
 
 	/** `apply` a command. `command` will be announced for accessibility. */
@@ -481,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;
@@ -509,6 +660,7 @@ export class Editor {
 	public async asyncApplyOrUnapplyCommands(
 		commands: Command[], apply: boolean, updateChunkSize: number
 	) {
+		console.assert(updateChunkSize > 0);
 		this.display.setDraftMode(true);
 		for (let i = 0; i < commands.length; i += updateChunkSize) {
 			this.showLoadingWarning(i / commands.length);
@@ -626,6 +778,20 @@ 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(
@@ -735,12 +901,12 @@ 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.
 	 */
-	public async loadFromSVG(svgData: string) {
-		const loader = SVGLoader.fromString(svgData);
+	public async loadFromSVG(svgData: string, sanitize: boolean = false) {
+		const loader = SVGLoader.fromString(svgData, sanitize);
 		await this.loadFrom(loader);
 	}
 }

package/src/EditorImage.ts

@@ -81,6 +81,8 @@ export default class EditorImage {
 
 	// A Command that can access private [EditorImage] functionality
 	private static AddElementCommand = class extends SerializableCommand {
+		private serializedElem: any;
+
 		// If [applyByFlattening], then the rendered content of this element
 		// is present on the display's wet ink canvas. As such, no re-render is necessary
 		// the first time this command is applied (the surfaces are joined instead).
@@ -90,6 +92,10 @@ export default class EditorImage {
 		) {
 			super('add-element');
 
+			// Store the element's serialization --- .serializeToJSON may be called on this
+			// even when this is not at the top of the undo/redo stack.
+			this.serializedElem = element.serialize();
+
 			if (isNaN(element.getBBox().area)) {
 				throw new Error('Elements in the image cannot have NaN bounding boxes');
 			}
@@ -118,7 +124,7 @@ export default class EditorImage {
 
 		protected serializeToJSON() {
 			return {
-				elemData: this.element.serialize(),
+				elemData: this.serializedElem,
 			};
 		}
 

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,