js-draw 0.25.1 → 1.0.0

package/src/EventDispatcher.test.ts

@@ -1,123 +0,0 @@
-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

@@ -1,72 +0,0 @@
-
-// 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

@@ -1,170 +0,0 @@
-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;
-			}
-			// Commented out to work around a bug in old versions of Chrome:
-			// Left mouse up events were being given type "other".
-			// 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

@@ -1,114 +0,0 @@
-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,
-			}
-		});
-	});
-});