js-draw 0.0.1

package/src/EditorImage.ts

@@ -0,0 +1,297 @@
+import Editor from './Editor';
+import AbstractRenderer from './rendering/AbstractRenderer';
+import Command from './commands/Command';
+import Viewport from './Viewport';
+import AbstractComponent from './components/AbstractComponent';
+import Rect2 from './geometry/Rect2';
+import { EditorLocalization } from './localization';
+
+// Handles lookup/storage of elements in the image
+export default class EditorImage {
+	private root: ImageNode;
+
+	public constructor() {
+		this.root = new ImageNode();
+	}
+
+	private addElement(elem: AbstractComponent): ImageNode {
+		return this.root.addLeaf(elem);
+	}
+
+	// Returns the parent of the given element, if it exists.
+	public findParent(elem: AbstractComponent): ImageNode|null {
+		const candidates = this.root.getLeavesInRegion(elem.getBBox());
+		for (const candidate of candidates) {
+			if (candidate.getContent() === elem) {
+				return candidate;
+			}
+		}
+		return null;
+	}
+
+	private sortLeaves(leaves: ImageNode[]) {
+		leaves.sort((a, b) => a.getContent()!.zIndex - b.getContent()!.zIndex);
+	}
+
+	public render(renderer: AbstractRenderer, viewport: Viewport, minFraction: number = 0.001) {
+		// Don't render components that are < 0.1% of the viewport.
+		const leaves = this.root.getLeavesInRegion(viewport.visibleRect, minFraction);
+		this.sortLeaves(leaves);
+
+		for (const leaf of leaves) {
+			// Leaves by definition have content
+			leaf.getContent()!.render(renderer, viewport.visibleRect);
+		}
+	}
+
+	// Renders all nodes, even ones not within the viewport
+	public renderAll(renderer: AbstractRenderer) {
+		const leaves = this.root.getLeaves();
+		this.sortLeaves(leaves);
+
+		for (const leaf of leaves) {
+			leaf.getContent()!.render(renderer, leaf.getBBox());
+		}
+	}
+
+	public getElementsIntersectingRegion(region: Rect2): AbstractComponent[] {
+		const leaves = this.root.getLeavesInRegion(region);
+		this.sortLeaves(leaves);
+		return leaves.map(leaf => leaf.getContent()!);
+	}
+
+	// A Command that can access private [EditorImage] functionality
+	public static AddElementCommand = class implements Command {
+		readonly #element: AbstractComponent;
+		#applyByFlattening: boolean = false;
+
+		// 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).
+		public constructor(
+			element: AbstractComponent,
+			applyByFlattening: boolean = false
+		) {
+			this.#element = element;
+			this.#applyByFlattening = applyByFlattening;
+		}
+
+		public apply(editor: Editor) {
+			editor.image.addElement(this.#element);
+
+			if (!this.#applyByFlattening) {
+				editor.queueRerender();
+			} else {
+				this.#applyByFlattening = false;
+				editor.display.flatten();
+			}
+		}
+
+		public unapply(editor: Editor) {
+			const container = editor.image.findParent(this.#element);
+			container?.remove();
+			editor.queueRerender();
+		}
+
+		public description(localization: EditorLocalization) {
+			return localization.addElementAction(this.#element.description(localization));
+		}
+	};
+}
+
+export type AddElementCommand = typeof EditorImage.AddElementCommand.prototype;
+
+
+export class ImageNode {
+	private content: AbstractComponent|null;
+	private bbox: Rect2;
+	private children: ImageNode[];
+	private targetChildCount: number = 30;
+
+	public constructor(
+		private parent: ImageNode|null = null
+	) {
+		this.children = [];
+		this.bbox = Rect2.empty;
+		this.content = null;
+	}
+
+	public getContent(): AbstractComponent|null {
+		return this.content;
+	}
+
+	public getParent(): ImageNode|null {
+		return this.parent;
+	}
+
+	private getChildrenInRegion(region: Rect2): ImageNode[] {
+		return this.children.filter(child => {
+			return child.getBBox().intersects(region);
+		});
+	}
+
+	// / Returns a list of `ImageNode`s with content (and thus no children).
+	public getLeavesInRegion(region: Rect2, minFractionOfRegion: number = 0): ImageNode[] {
+		const result: ImageNode[] = [];
+
+		// Don't render if too small
+		if (this.bbox.maxDimension / region.maxDimension <= minFractionOfRegion) {
+			return [];
+		}
+
+		if (this.content !== null && this.getBBox().intersects(region)) {
+			result.push(this);
+		}
+
+		const children = this.getChildrenInRegion(region);
+		for (const child of children) {
+			result.push(...child.getLeavesInRegion(region, minFractionOfRegion));
+		}
+
+		return result;
+	}
+
+	// Returns a list of leaves with this as an ancestor.
+	// Like getLeavesInRegion, but does not check whether ancestors are in a given rectangle
+	public getLeaves(): ImageNode[] {
+		if (this.content) {
+			return [this];
+		}
+
+		const result: ImageNode[] = [];
+		for (const child of this.children) {
+			result.push(...child.getLeaves());
+		}
+
+		return result;
+	}
+
+	public addLeaf(leaf: AbstractComponent): ImageNode {
+		if (this.content === null && this.children.length === 0) {
+			this.content = leaf;
+			this.recomputeBBox(true);
+
+			return this;
+		}
+
+		if (this.content !== null) {
+			console.assert(this.children.length === 0);
+
+			const contentNode = new ImageNode(this);
+			contentNode.content = this.content;
+			this.content = null;
+			this.children.push(contentNode);
+			contentNode.recomputeBBox(false);
+		}
+
+		// If this node is contained within the leaf, make this and the leaf
+		// share a parent.
+		const leafBBox = leaf.getBBox();
+		if (leafBBox.containsRect(this.getBBox())) {
+			// Create a node for this' children and for the new content..
+			const nodeForNewLeaf = new ImageNode(this);
+			const nodeForChildren = new ImageNode(this);
+
+			nodeForChildren.children = this.children;
+			this.children = [nodeForNewLeaf, nodeForChildren];
+			nodeForChildren.recomputeBBox(true);
+
+			return nodeForNewLeaf.addLeaf(leaf);
+		}
+
+		const containingNodes = this.children.filter(
+			child => child.getBBox().containsRect(leafBBox)
+		);
+
+		// Does the leaf already fit within one of the children?
+		if (containingNodes.length > 0 && this.children.length >= this.targetChildCount) {
+			// Sort the containers in ascending order by area
+			containingNodes.sort((a, b) => a.getBBox().area - b.getBBox().area);
+
+			// Choose the smallest child that contains the new element.
+			const result = containingNodes[0].addLeaf(leaf);
+			result.rebalance();
+			return result;
+		}
+
+
+		const newNode = new ImageNode(this);
+		this.children.push(newNode);
+		newNode.content = leaf;
+		newNode.recomputeBBox(true);
+
+		return newNode;
+	}
+
+	public getBBox(): Rect2 {
+		return this.bbox;
+	}
+
+	// Recomputes this' bounding box. If [bubbleUp], also recompute
+	// this' ancestors bounding boxes
+	public recomputeBBox(bubbleUp: boolean) {
+		const oldBBox = this.bbox;
+		if (this.content !== null) {
+			this.bbox = this.content.getBBox();
+		} else {
+			this.bbox = Rect2.empty;
+
+			for (const child of this.children) {
+				this.bbox = this.bbox.union(child.getBBox());
+			}
+		}
+
+		if (bubbleUp && !oldBBox.eq(this.bbox)) {
+			this.parent?.recomputeBBox(true);
+		}
+	}
+
+	private rebalance() {
+		// If the current node is its parent's only child,
+		if (this.parent && this.parent.children.length === 1) {
+			console.assert(this.parent.content === null);
+			console.assert(this.parent.children[0] === this);
+
+			// Remove this' parent, if this' parent isn't the root.
+			const oldParent = this.parent;
+			if (oldParent.parent !== null) {
+				oldParent.children = [];
+				this.parent = oldParent.parent;
+				this.parent.children.push(this);
+				oldParent.parent = null;
+				this.parent.recomputeBBox(false);
+			} else if (this.content === null) {
+				// Remove this and transfer this' children to the parent.
+				this.parent.children = this.children;
+				this.parent = null;
+			}
+		}
+	}
+
+	// Remove this node and all of its children
+	public remove() {
+		if (!this.parent) {
+			this.content = null;
+			this.children = [];
+
+			return;
+		}
+
+		const oldChildCount = this.parent.children.length;
+		this.parent.children = this.parent.children.filter(node => {
+			return node !== this;
+		});
+		console.assert(this.parent.children.length === oldChildCount - 1);
+
+		this.parent.children.forEach(child => {
+			child.rebalance();
+		});
+
+		this.parent.recomputeBBox(true);
+
+		// Invalidate/disconnect this.
+		this.content = null;
+		this.parent = null;
+		this.children = [];
+	}
+}

package/src/EventDispatcher.test.ts

@@ -0,0 +1,123 @@
+import EventDispatcher from './EventDispatcher';
+
+enum TestKey {
+    FooEvent,
+    BarEvent,
+    BazEvent,
+}
+
+describe('EventDispatcher', () => {
+	it('should trigger after adding a listener', () => {
+		const dispatcher = new EventDispatcher<TestKey, void>();
+		let calledCount = 0;
+		dispatcher.on(TestKey.FooEvent, () => {
+			calledCount ++;
+		});
+
+		expect(calledCount).toBe(0);
+		dispatcher.dispatch(TestKey.FooEvent);
+		expect(calledCount).toBe(1);
+	});
+
+	it('should not trigger after removing a listener', () => {
+		const dispatcher = new EventDispatcher<TestKey, void>();
+		let calledCount = 0;
+		const handle = dispatcher.on(TestKey.FooEvent, () => {
+			calledCount ++;
+		});
+
+		handle.remove();
+
+		expect(calledCount).toBe(0);
+		dispatcher.dispatch(TestKey.FooEvent);
+		expect(calledCount).toBe(0);
+	});
+
+	it('adding and removing listeners should not affect other listeners', () => {
+		const dispatcher = new EventDispatcher<TestKey, void>();
+
+		let fooCount = 0;
+		const fooListener = dispatcher.on(TestKey.FooEvent, () => {
+			fooCount ++;
+		});
+
+		let barCount = 0;
+		const barListener1 = dispatcher.on(TestKey.BarEvent, () => {
+			barCount ++;
+		});
+		const barListener2 = dispatcher.on(TestKey.BarEvent, () => {
+			barCount += 3;
+		});
+		const barListener3 = dispatcher.on(TestKey.BarEvent, () => {
+			barCount += 2;
+		});
+
+		dispatcher.dispatch(TestKey.BarEvent);
+		expect(barCount).toBe(6);
+
+		dispatcher.dispatch(TestKey.FooEvent);
+		expect(barCount).toBe(6);
+		expect(fooCount).toBe(1);
+
+		fooListener.remove();
+		barListener2.remove();
+
+		// barListener2 shouldn't be fired
+		dispatcher.dispatch(TestKey.BarEvent);
+		expect(barCount).toBe(9);
+
+		// The BazEvent shouldn't change fooCount or barCount
+		dispatcher.dispatch(TestKey.BazEvent);
+		expect(barCount).toBe(9);
+		expect(fooCount).toBe(1);
+
+		// Removing a listener for the first time should return true (it removed the listener)
+		// and false all subsequent times
+		expect(barListener1.remove()).toBe(true);
+		expect(barListener1.remove()).toBe(false);
+		expect(barListener3.remove()).toBe(true);
+	});
+
+	it('should fire all un-removed listeners if removing a listener in a listener', () => {
+		const dispatcher = new EventDispatcher<TestKey, void>();
+
+		let count = 0;
+		const barListener = () => {
+		};
+		const bazListener = () => {
+			count += 5;
+		};
+		const fooListener = () => {
+			count ++;
+			dispatcher.off(TestKey.FooEvent, barListener);
+		};
+		dispatcher.on(TestKey.FooEvent, barListener);
+		dispatcher.on(TestKey.FooEvent, fooListener);
+		dispatcher.on(TestKey.FooEvent, bazListener);
+
+		// Removing a listener shouldn't cause other listeners to be skipped
+		dispatcher.dispatch(TestKey.FooEvent);
+
+		expect(count).toBe(6);
+	});
+
+	it('should send correct data associated with events', () => {
+		const dispatcher = new EventDispatcher<TestKey, string>();
+
+		let lastResult = '';
+		const resultListener = (result: string) => {
+			lastResult = result;
+		};
+
+		dispatcher.on(TestKey.BarEvent, resultListener);
+
+		dispatcher.dispatch(TestKey.BazEvent, 'Testing...');
+		expect(lastResult).toBe('');
+
+		dispatcher.dispatch(TestKey.BarEvent, 'Test.');
+		dispatcher.off(TestKey.BarEvent, resultListener);
+
+		dispatcher.dispatch(TestKey.BarEvent, 'Testing.');
+		expect(lastResult).toBe('Test.');
+	});
+});

package/src/EventDispatcher.ts

@@ -0,0 +1,53 @@
+// Code shared with Joplin
+
+type Listener<Value> = (data: Value)=> void;
+type CallbackHandler<EventType> = (data: EventType)=> void;
+
+// EventKeyType is used to distinguish events (e.g. a 'ClickEvent' vs a 'TouchEvent')
+// while EventMessageType is the type of the data sent with an event (can be `void`)
+export default class EventDispatcher<EventKeyType extends string|symbol|number, EventMessageType> {
+	// Partial marks all fields as optional. To initialize with an empty object, this is required.
+	// See https://stackoverflow.com/a/64526384
+	private listeners: Partial<Record<EventKeyType, Array<Listener<EventMessageType>>>>;
+	public constructor() {
+		this.listeners = {};
+	}
+
+	public dispatch(eventName: EventKeyType, event: EventMessageType) {
+		const listenerList = this.listeners[eventName];
+
+		if (listenerList) {
+			for (let i = 0; i < listenerList.length; i++) {
+				listenerList[i](event);
+			}
+		}
+	}
+
+	public on(eventName: EventKeyType, callback: CallbackHandler<EventMessageType>) {
+		if (!this.listeners[eventName]) this.listeners[eventName] = [];
+		this.listeners[eventName]!.push(callback);
+
+		return {
+			// Retuns false if the listener has already been removed, true otherwise.
+			remove: (): boolean => {
+				const originalListeners = this.listeners[eventName]!;
+				this.off(eventName, callback);
+
+				return originalListeners.length !== this.listeners[eventName]!.length;
+			},
+		};
+	}
+
+	// Equivalent to calling .remove() on the object returned by .on
+	public off(eventName: EventKeyType, callback: CallbackHandler<EventMessageType>) {
+		const listeners = this.listeners[eventName];
+		if (!listeners) return;
+
+		// Replace the current list of listeners with a new, shortened list.
+		// This allows any iterators over this.listeners to continue iterating
+		// without skipping elements.
+		this.listeners[eventName] = listeners.filter(
+			otherCallback => otherCallback !== callback
+		);
+	}
+}

package/src/Pointer.ts

@@ -0,0 +1,93 @@
+import { Point2, Vec2 } from './geometry/Vec2';
+import Viewport from './Viewport';
+
+export enum PointerDevice {
+	Pen,
+	Eraser,
+	Touch,
+	Mouse,
+	Other,
+}
+
+// Provides a snapshot containing information about a pointer. A Pointer
+// object is immutable --- it will not be updated when the pointer's information changes.
+export default class Pointer {
+	private constructor(
+        // The (x, y) position of the pointer relative to the top-left corner
+        // of the visible canvas.
+        public readonly screenPos: Point2,
+
+        // Position of the pointer relative to the top left corner of the drawing
+        // surface.
+        public readonly canvasPos: Point2,
+
+        public readonly pressure: number|null,
+        public readonly isPrimary: boolean,
+        public readonly down: boolean,
+
+        public readonly device: PointerDevice,
+
+        // Unique ID for the pointer
+        public readonly id: number,
+
+        // Numeric timestamp (milliseconds, as from (new Date).getTime())
+        public readonly timeStamp: number
+	) {
+	}
+
+	public static ofEvent(evt: PointerEvent, isDown: boolean, viewport: Viewport): Pointer {
+		const screenPos = Vec2.of(evt.offsetX, evt.offsetY);
+
+		const pointerTypeToDevice: Record<string, PointerDevice> = {
+			'mouse': PointerDevice.Mouse,
+			'pen': PointerDevice.Pen,
+			'touch': PointerDevice.Touch,
+		};
+
+		let device = pointerTypeToDevice[evt.pointerType] ?? PointerDevice.Other;
+		const eraserButtonMask = 0x20;
+		if (device === PointerDevice.Pen && (evt.buttons & eraserButtonMask) !== 0) {
+			device = PointerDevice.Eraser;
+		}
+
+		const timeStamp = (new Date()).getTime();
+		const canvasPos = viewport.screenToCanvas(screenPos);
+
+		return new Pointer(
+			screenPos,
+			canvasPos,
+			evt.pressure ?? null,
+			evt.isPrimary,
+			isDown,
+			device,
+			evt.pointerId,
+			timeStamp
+		);
+	}
+
+	// Create a new Pointer from a point on the canvas.
+	// Intended for unit tests.
+	public static ofCanvasPoint(
+		canvasPos: Point2,
+		isDown: boolean,
+		viewport: Viewport,
+		id: number = 0,
+		device: PointerDevice = PointerDevice.Pen,
+		isPrimary: boolean = true,
+		pressure: number|null = null
+	): Pointer {
+		const screenPos = viewport.canvasToScreen(canvasPos);
+		const timeStamp = (new Date()).getTime();
+
+		return new Pointer(
+			screenPos,
+			canvasPos,
+			pressure,
+			isPrimary,
+			isDown,
+			device,
+			id,
+			timeStamp
+		);
+	}
+}