js-draw 0.0.1

package/src/Editor.ts

@@ -0,0 +1,469 @@
+
+import EditorImage from './EditorImage';
+import ToolController from './tools/ToolController';
+import { InputEvtType, PointerEvt, EditorNotifier, EditorEventType, ImageLoader } from './types';
+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 HTMLToolbar from './toolbar/HTMLToolbar';
+import { RenderablePathSpec } from './rendering/AbstractRenderer';
+import Display, { RenderingMode } from './Display';
+import SVGRenderer from './rendering/SVGRenderer';
+import Color4 from './Color4';
+import SVGLoader from './SVGLoader';
+import Pointer from './Pointer';
+import Mat33 from './geometry/Mat33';
+import Rect2 from './geometry/Rect2';
+import { defaultEditorLocalization, EditorLocalization } from './localization';
+
+export class Editor {
+	// Wrapper around the viewport and toolbar
+	private container: HTMLElement;
+	private renderingRegion: HTMLElement;
+
+	public history: UndoRedoHistory;
+	public display: Display;
+	public image: EditorImage;
+
+	// Viewport for the exported/imported image
+	private importExportViewport: Viewport;
+	public localization: EditorLocalization = defaultEditorLocalization;
+
+	public viewport: Viewport;
+	public toolController: ToolController;
+	public notifier: EditorNotifier;
+
+	private loadingWarning: HTMLElement;
+	private accessibilityAnnounceArea: HTMLElement;
+
+	public constructor(
+		parent: HTMLElement,
+		renderingMode: RenderingMode = RenderingMode.CanvasRenderer,
+
+		// Uses a default English localization if a translation is not given.
+		localization?: Partial<EditorLocalization>,
+	) {
+		this.container = document.createElement('div');
+		this.renderingRegion = document.createElement('div');
+		this.container.appendChild(this.renderingRegion);
+		this.container.className = 'imageEditorContainer';
+
+		this.localization = {
+			...this.localization,
+			...localization,
+		};
+
+		this.loadingWarning = document.createElement('div');
+		this.loadingWarning.classList.add('loadingMessage');
+		this.loadingWarning.ariaLive = 'polite';
+		this.container.appendChild(this.loadingWarning);
+
+		this.accessibilityAnnounceArea = document.createElement('div');
+		this.accessibilityAnnounceArea.ariaLive = 'assertive';
+		this.accessibilityAnnounceArea.className = 'accessibilityAnnouncement';
+		this.container.appendChild(this.accessibilityAnnounceArea);
+
+		this.renderingRegion.style.touchAction = 'none';
+		this.renderingRegion.className = 'imageEditorRenderArea';
+		this.renderingRegion.setAttribute('tabIndex', '0');
+		this.renderingRegion.ariaLabel = this.localization.imageEditor;
+
+		this.notifier = new EventDispatcher();
+		this.importExportViewport = new Viewport(this.notifier);
+		this.viewport = new Viewport(this.notifier);
+		this.display = new Display(this, renderingMode, this.renderingRegion);
+		this.image = new EditorImage();
+		this.history = new UndoRedoHistory(this, this.announceRedoCallback, this.announceUndoCallback);
+		this.toolController = new ToolController(this, this.localization);
+
+		parent.appendChild(this.container);
+
+		// Default to a 500x500 image
+		this.importExportViewport.updateScreenSize(Vec2.of(500, 500));
+
+		this.viewport.updateScreenSize(
+			Vec2.of(this.display.width, this.display.height)
+		);
+
+		this.registerListeners();
+		this.rerender();
+		this.hideLoadingWarning();
+	}
+
+	// [fractionLoaded] should be a number from 0 to 1, where 1 represents completely loaded.
+	public showLoadingWarning(fractionLoaded: number) {
+		const loadingPercent = Math.round(fractionLoaded * 100);
+		this.loadingWarning.innerText = this.localization.loading(loadingPercent);
+		this.loadingWarning.style.display = 'block';
+	}
+
+	public hideLoadingWarning() {
+		this.loadingWarning.style.display = 'none';
+
+		this.announceForAccessibility(this.localization.doneLoading);
+	}
+
+	public announceForAccessibility(message: string) {
+		this.accessibilityAnnounceArea.innerText = message;
+	}
+
+	public addToolbar(): HTMLToolbar {
+		return new HTMLToolbar(this, this.container, this.localization);
+	}
+
+	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('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) {
+				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.renderingRegion.addEventListener('keydown', evt => {
+			if (this.toolController.dispatchInputEvent({
+				kind: InputEvtType.KeyPressEvent,
+				key: evt.key,
+			})) {
+				evt.preventDefault();
+			}
+		});
+
+		this.container.addEventListener('wheel', evt => {
+			let delta = Vec3.of(evt.deltaX, evt.deltaY, evt.deltaZ);
+
+			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);
+			}
+
+			const pos = Vec2.of(evt.clientX, evt.clientY);
+			if (this.toolController.dispatchInputEvent({
+				kind: InputEvtType.WheelEvt,
+				delta,
+				screenPos: pos,
+			})) {
+				evt.preventDefault();
+				return true;
+			}
+			return false;
+		});
+
+		this.notifier.on(EditorEventType.DisplayResized, _event => {
+			this.viewport.updateScreenSize(
+				Vec2.of(this.display.width, this.display.height)
+			);
+		});
+
+		window.addEventListener('resize', () => {
+			this.notifier.dispatch(EditorEventType.DisplayResized, {
+				kind: EditorEventType.DisplayResized,
+				newSize: Vec2.of(
+					this.display.width,
+					this.display.height
+				),
+			});
+			this.queueRerender();
+		});
+	}
+
+	public dispatch(command: Command, addToHistory: boolean = true) {
+		if (addToHistory) {
+			// .push applies [command] to this
+			this.history.push(command);
+		} else {
+			command.apply(this);
+		}
+
+		this.announceForAccessibility(command.description(this.localization));
+	}
+
+	// Apply a large transformation in chunks.
+	// If [apply] is false, the commands are unapplied.
+	// Triggers a re-render after each [updateChunkSize]-sized group of commands
+	// has been applied.
+	private async asyncApplyOrUnapplyCommands(
+		commands: Command[], apply: boolean, updateChunkSize: number
+	) {
+		for (let i = 0; i < commands.length; i += updateChunkSize) {
+			this.showLoadingWarning(i / commands.length);
+
+			for (let j = i; j < commands.length && j < i + updateChunkSize; j++) {
+				const cmd = commands[j];
+
+				if (apply) {
+					cmd.apply(this);
+				} else {
+					cmd.unapply(this);
+				}
+			}
+
+			// Re-render to show progress, but only if we're not done.
+			if (i + updateChunkSize < commands.length) {
+				await new Promise(resolve => {
+					this.rerender();
+					requestAnimationFrame(resolve);
+				});
+			}
+		}
+		this.hideLoadingWarning();
+	}
+
+	public asyncApplyCommands(commands: Command[], chunkSize: number) {
+		return this.asyncApplyOrUnapplyCommands(commands, true, chunkSize);
+	}
+
+	public asyncUnapplyCommands(commands: Command[], chunkSize: number) {
+		return this.asyncApplyOrUnapplyCommands(commands, false, chunkSize);
+	}
+
+	private announceUndoCallback = (command: Command) => {
+		this.announceForAccessibility(this.localization.undoAnnouncement(command.description(this.localization)));
+	};
+
+	private announceRedoCallback = (command: Command) => {
+		this.announceForAccessibility(this.localization.redoAnnouncement(command.description(this.localization)));
+	};
+
+	private rerenderQueued: boolean = false;
+	public queueRerender() {
+		if (!this.rerenderQueued) {
+			this.rerenderQueued = true;
+			requestAnimationFrame(() => {
+				this.rerender();
+				this.rerenderQueued = false;
+			});
+		}
+	}
+
+	public rerender(showImageBounds: boolean = true) {
+		this.display.startRerender();
+
+		// Draw a rectangle around the region that will be visible on save
+		const renderer = this.display.getDryInkRenderer();
+
+		if (showImageBounds) {
+			const exportRectFill = { fill: Color4.fromHex('#44444455') };
+			const exportRectStrokeWidth = 12;
+			renderer.drawRect(
+				this.importExportViewport.visibleRect,
+				exportRectStrokeWidth,
+				exportRectFill
+			);
+		}
+
+		this.image.render(renderer, this.viewport);
+		this.rerenderQueued = false;
+	}
+
+	public drawWetInk(...path: RenderablePathSpec[]) {
+		for (const part of path) {
+			this.display.getWetInkRenderer().drawPath(part);
+		}
+	}
+
+	public clearWetInk() {
+		this.display.getWetInkRenderer().clear();
+	}
+
+	public createHTMLOverlay(overlay: HTMLElement) {
+		overlay.classList.add('overlay');
+		this.container.appendChild(overlay);
+
+		return {
+			remove: () => overlay.remove(),
+		};
+	}
+
+	public addStyleSheet(content: string): HTMLStyleElement {
+		const styleSheet = document.createElement('style');
+		styleSheet.innerText = content;
+		this.container.appendChild(styleSheet);
+
+		return styleSheet;
+	}
+
+	// Dispatch a pen event to the currently selected tool.
+	// Intented for unit tests.
+	public sendPenEvent(
+		eventType: InputEvtType.PointerDownEvt|InputEvtType.PointerMoveEvt|InputEvtType.PointerUpEvt,
+		point: Point2,
+		allPointers?: Pointer[]
+	) {
+		const mainPointer = Pointer.ofCanvasPoint(
+			point, eventType !== InputEvtType.PointerUpEvt, this.viewport
+		);
+		this.toolController.dispatchInputEvent({
+			kind: eventType,
+			allPointers: allPointers ?? [
+				mainPointer,
+			],
+			current: mainPointer,
+		});
+	}
+
+	public toSVG(): SVGElement {
+		const importExportViewport = this.importExportViewport;
+		const svgNameSpace = 'http://www.w3.org/2000/svg';
+		const result = document.createElementNS(svgNameSpace, 'svg');
+		const renderer = new SVGRenderer(result, importExportViewport);
+
+		const origTransform = importExportViewport.canvasToScreenTransform;
+		// Reset the transform to ensure that (0, 0) is (0, 0)
+		importExportViewport.resetTransform(Mat33.identity);
+
+		// Render **all** elements.
+		this.image.renderAll(renderer);
+
+		importExportViewport.resetTransform(origTransform);
+
+		// Just show the main region
+		const rect = importExportViewport.visibleRect;
+		result.setAttribute('viewBox', `${rect.x} ${rect.y} ${rect.w} ${rect.h}`);
+		result.setAttribute('width', `${rect.w}`);
+		result.setAttribute('height', `${rect.h}`);
+
+		// Ensure the image can be identified as an SVG if downloaded.
+		// See https://jwatt.org/svg/authoring/
+		result.setAttribute('version', '1.1');
+		result.setAttribute('baseProfile', 'full');
+		result.setAttribute('xmlns', svgNameSpace);
+
+
+		return result;
+	}
+
+	public async loadFrom(loader: ImageLoader) {
+		this.showLoadingWarning(0);
+		const imageRect = await loader.start((component) => {
+			(new EditorImage.AddElementCommand(component)).apply(this);
+		}, (countProcessed: number, totalToProcess: number) => {
+			if (countProcessed % 100 === 0) {
+				this.showLoadingWarning(countProcessed / totalToProcess);
+				this.rerender(false);
+				return new Promise(resolve => {
+					requestAnimationFrame(() => resolve());
+				});
+			}
+
+			return null;
+		});
+		this.hideLoadingWarning();
+
+		this.setImportExportRect(imageRect).apply(this);
+	}
+
+	// Returns the size of the visible region of the output SVG
+	public getImportExportRect(): Rect2 {
+		return this.importExportViewport.visibleRect;
+	}
+
+	// Resize the output SVG
+	public setImportExportRect(imageRect: Rect2): Command {
+		const origSize = this.importExportViewport.visibleRect.size;
+		const origTransform = this.importExportViewport.canvasToScreenTransform;
+
+		return {
+			apply(editor) {
+				const viewport = editor.importExportViewport;
+				viewport.updateScreenSize(imageRect.size);
+				viewport.resetTransform(Mat33.translation(imageRect.topLeft.times(-1)));
+				editor.queueRerender();
+			},
+			unapply(editor) {
+				const viewport = editor.importExportViewport;
+				viewport.updateScreenSize(origSize);
+				viewport.resetTransform(origTransform);
+				editor.queueRerender();
+			},
+			description(localizationTable) {
+				return localizationTable.resizeOutputCommand(imageRect);
+			},
+		};
+	}
+
+	// Alias for loadFrom(SVGLoader.fromString).
+	// This is particularly useful when accessing a bundled version of the editor.
+	public async loadFromSVG(svgData: string) {
+		const loader = SVGLoader.fromString(svgData);
+		await this.loadFrom(loader);
+	}
+}
+
+export default Editor;

package/src/EditorImage.test.ts

@@ -0,0 +1,90 @@
+/* @jest-environment jsdom */
+
+import EditorImage from './EditorImage';
+import Stroke from './components/Stroke';
+import { Vec2 } from './geometry/Vec2';
+import Path, { PathCommandType } from './geometry/Path';
+import Color4 from './Color4';
+import Editor from './Editor';
+import { RenderingMode } from './Display';
+import DummyRenderer from './rendering/DummyRenderer';
+import { RenderingStyle } from './rendering/AbstractRenderer';
+
+describe('EditorImage', () => {
+	const testStroke = new Stroke([
+		{
+			startPoint: Vec2.of(0, 0),
+			commands: [
+				{
+					kind: PathCommandType.MoveTo,
+					point: Vec2.of(3, 3),
+				},
+			],
+			style: {
+				fill: Color4.red,
+			},
+		},
+	]);
+	const testFill: RenderingStyle = { fill: Color4.black };
+	const addTestStrokeCommand = new EditorImage.AddElementCommand(testStroke);
+
+	it('elements added to the image should be findable', () => {
+		const editor = new Editor(document.body, RenderingMode.DummyRenderer);
+		const image = editor.image;
+
+		// We haven't activated the command, so testStroke's parent should be null.
+		expect(image.findParent(testStroke)).toBeNull();
+		addTestStrokeCommand.apply(editor);
+		expect(image.findParent(testStroke)).not.toBeNull();
+	});
+
+	it('should render an element added to the image', () => {
+		const editor = new Editor(document.body, RenderingMode.DummyRenderer);
+		const renderer = editor.display.getDryInkRenderer();
+		if (!(renderer instanceof DummyRenderer)) {
+			throw new Error('Wrong display type!');
+		}
+
+		const emptyDocumentPathCount = renderer.renderedPathCount;
+		expect(renderer.objectNestingLevel).toBe(0);
+		editor.dispatch(addTestStrokeCommand);
+		editor.rerender();
+		expect(renderer.renderedPathCount - emptyDocumentPathCount).toBe(1);
+
+		// Should not be within objects after finished rendering
+		expect(renderer.objectNestingLevel).toBe(0);
+	});
+
+	it('should have a 1-deep tree if two non-overlapping strokes are added', () => {
+		const editor = new Editor(document.body, RenderingMode.DummyRenderer);
+		const image = editor.image;
+
+		const leftmostStroke = new Stroke([
+			Path.fromString('M0,0L1,1L0,1').toRenderable(testFill),
+		]);
+
+		// Lowercase ls: lineTo(Δx, Δy) instead of lineTo(x, y)
+		const rightmostStroke = new Stroke([
+			Path.fromString('M-10,0 l1,1 l0,-1').toRenderable(testFill),
+		]);
+
+		expect(!leftmostStroke.getBBox().intersects(rightmostStroke.getBBox()));
+
+		(new EditorImage.AddElementCommand(leftmostStroke)).apply(editor);
+
+		// The first node should be at the image's root.
+		let firstParent = image.findParent(leftmostStroke);
+		expect(firstParent).not.toBe(null);
+		expect(firstParent?.getParent()).toBe(null);
+		expect(firstParent?.getBBox()?.corners).toMatchObject(leftmostStroke.getBBox()?.corners);
+
+		(new EditorImage.AddElementCommand(rightmostStroke)).apply(editor);
+
+		firstParent = image.findParent(leftmostStroke);
+		const secondParent = image.findParent(rightmostStroke);
+
+		expect(firstParent).not.toStrictEqual(secondParent);
+		expect(firstParent?.getParent()).toStrictEqual(secondParent?.getParent());
+		expect(firstParent?.getParent()?.getParent()).toBeNull();
+	});
+});