js-draw 0.23.1 → 0.24.0

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,72 @@
+
+// Code shared with Joplin (js-draw was originally intended to be part of Joplin).
+
+// @see EventDispatcher
+type Listener<Value> = (data: Value)=> void;
+
+type CallbackHandler<EventType> = (data: EventType)=> void;
+
+export interface DispatcherEventListener {
+	remove: ()=>void;
+}
+
+/**
+ * Handles notifying listeners of events.
+ *
+ * `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`).
+ *
+ * @example
+ * ```
+ * const dispatcher = new EventDispatcher<'event1'|'event2'|'event3', void>();
+ * dispatcher.on('event1', () => {
+ *   console.log('Event 1 triggered.');
+ * });
+ * dispatcher.dispatch('event1');
+ * ```
+ *
+ */
+export default class EventDispatcher<EventKeyType extends string|symbol|number, EventMessageType> {
+	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>): DispatcherEventListener {
+		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;
+			},
+		};
+	}
+
+	/** Removes an event listener. This is 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,167 @@
+import { Point2, Vec2 } from './math/Vec2';
+import Viewport from './Viewport';
+
+export enum PointerDevice {
+	Pen,
+	Eraser,
+	Touch,
+	PrimaryButtonMouse,
+	RightButtonMouse,
+	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,
+	) {
+	}
+
+	/**
+	 * Snaps this pointer to the nearest grid point (rounds the coordinates of this
+	 * pointer based on the current zoom). Returns a new Pointer and does not modify
+	 * this.
+	 */
+	public snappedToGrid(viewport: Viewport): Pointer {
+		const snappedCanvasPos = viewport.snapToGrid(this.canvasPos);
+		return this.withCanvasPosition(snappedCanvasPos, viewport);
+	}
+
+	// Snap this pointer to the X or Y axis (whichever is closer), where (0,0)
+	// is considered to be at `originPointScreen`.
+	// @internal
+	public lockedToXYAxesScreen(originPointScreen: Vec2, viewport: Viewport) {
+		const current = this.screenPos;
+		const currentFromStart = current.minus(originPointScreen);
+
+		// Determine whether the last point was closer to being on the
+		// x- or y- axis.
+		const projOntoXAxis = Vec2.unitX.times(currentFromStart.x);
+		const projOntoYAxis = Vec2.unitY.times(currentFromStart.y);
+
+		let pos;
+		if (currentFromStart.dot(projOntoXAxis) > currentFromStart.dot(projOntoYAxis)) {
+			pos = projOntoXAxis;
+		} else {
+			pos = projOntoYAxis;
+		}
+
+		pos = pos.plus(originPointScreen);
+
+		return this.withScreenPosition(pos, viewport);
+	}
+
+	/** @see {@link withCanvasPosition} */
+	public withScreenPosition(screenPos: Point2, viewport: Viewport) {
+		const canvasPos = viewport.screenToCanvas(screenPos);
+		return this.withCanvasPosition(canvasPos, viewport);
+	}
+
+	/**
+	 * Returns a copy of this pointer with a new position. The screen position is determined
+	 * by the given `canvasPos`.
+	 */
+	public withCanvasPosition(canvasPos: Point2, viewport: Viewport) {
+		const screenPos = viewport.canvasToScreen(canvasPos);
+
+		return new Pointer(
+			screenPos,
+			canvasPos,
+			this.pressure,
+			this.isPrimary,
+			this.down,
+			this.device,
+			this.id,
+			this.timeStamp,
+		);
+	}
+
+	// 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,
+			'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.roundPoint(viewport.screenToCanvas(screenPos));
+
+		if (device === PointerDevice.PrimaryButtonMouse) {
+			if (evt.buttons & 0x2) {
+				device = PointerDevice.RightButtonMouse;
+			} else if (!(evt.buttons & 0x1)) {
+				device = PointerDevice.Other;
+			}
+		}
+
+		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
+		);
+	}
+}

package/src/SVGLoader.test.ts

@@ -0,0 +1,114 @@
+import { Rect2, TextComponent, Vec2 } from './lib';
+import SVGLoader from './SVGLoader';
+import createEditor from './testing/createEditor';
+
+describe('SVGLoader', () => {
+	it('should correctly load x/y-positioned text nodes', async () => {
+		const editor = createEditor();
+		await editor.loadFrom(SVGLoader.fromString(`
+			<svg>
+				<text>Testing...</text>
+				<text y=100>Test 2...</text>
+				<text x=100>Test 3...</text>
+				<text x=100 y=100>Test 3...</text>
+		
+				<!-- Transform matrix: translate by (100,0) -->
+				<text style='transform: matrix(1,0,0,1,100,0);'>Test 3...</text>
+			</svg>
+		`, true));
+		const elems = editor.image
+			.getElementsIntersectingRegion(new Rect2(-1000, -1000, 10000, 10000))
+			.filter(elem => elem instanceof TextComponent);
+		expect(elems).toHaveLength(5);
+		const topLefts = elems.map(elem => elem.getBBox().topLeft);
+
+		// Top-left of Testing... should be (0, 0) ± 10 pixels (objects are aligned based on baseline)
+		expect(topLefts[0]).objEq(Vec2.of(0, 0), 10);
+
+		expect(topLefts[1].y - topLefts[0].y).toBe(100);
+		expect(topLefts[1].x - topLefts[0].x).toBe(0);
+
+		expect(topLefts[2].y - topLefts[0].y).toBe(0);
+		expect(topLefts[2].x - topLefts[0].x).toBe(100);
+
+		expect(topLefts[4].x - topLefts[0].x).toBe(100);
+		expect(topLefts[4].y - topLefts[0].y).toBe(0);
+	});
+
+	it('should correctly load tspans within texts nodes', async () => {
+		const editor = createEditor();
+		await editor.loadFrom(SVGLoader.fromString(`
+			<svg>
+				<text>
+					Testing...
+					<tspan x=0 y=100>Test 2...</tspan>
+					<tspan x=0 y=200>Test 2...</tspan>
+				</text>
+			</svg>
+		`, true));
+		const elem = editor.image
+			.getElementsIntersectingRegion(new Rect2(-1000, -1000, 10000, 10000))
+			.filter(elem => elem instanceof TextComponent)[0];
+		expect(elem).not.toBeNull();
+		expect(elem.getBBox().topLeft.y).toBeLessThan(0);
+		expect(elem.getBBox().topLeft.x).toBe(0);
+		expect(elem.getBBox().h).toBeGreaterThan(200);
+	});
+
+	it('tspans without specified font-sizes should inherit their font size from their parent element', async () => {
+		const editor = createEditor();
+		await editor.loadFrom(SVGLoader.fromString(`
+			<svg>
+				<text style='font-size: 22px;'>
+					Testing...
+					<tspan>Test 2...</tspan>
+					<tspan>Test 3...</tspan>
+					<tspan style='font-size: 3px;'>Test 4...</tspan>
+				</text>
+			</svg>
+		`, true));
+		const elem = editor.image
+			.getAllElements()
+			.filter(elem => elem instanceof TextComponent)[0] as TextComponent;
+		expect(elem).not.toBeNull();
+
+		// Ensure each child object has the correct size
+		expect(elem.serialize().data).toMatchObject({
+			'textObjects': [
+				{ },
+				{
+					'json':
+					{
+						'textObjects': [{ 'text': 'Test 2...' }],
+						'style': {
+							'size': 22,
+						}
+					}
+				},
+				{ },
+				{
+					'json': {
+						'textObjects': [{ 'text': 'Test 3...' }],
+						'style': {
+							'size': 22
+						}
+					}
+				},
+				{ },
+				{
+					'json': {
+						'textObjects': [{ 'text': 'Test 4...' }],
+						'style': {
+							'size': 3,
+						}
+					}
+				},
+				{ }
+			],
+
+			'style': {
+				'size': 22,
+			}
+		});
+	});
+});