js-draw 1.0.1 → 1.1.0

package/src/types.ts

@@ -1,151 +0,0 @@
-// Types related to the image editor
-
-import type EventDispatcher from './EventDispatcher';
-import type { Mat33, Point2, Vec2, Rect2, Color4 } from '@js-draw/math';
-import type BaseTool from './tools/BaseTool';
-import type AbstractComponent from './components/AbstractComponent';
-import type Command from './commands/Command';
-import type { WidgetContentLayoutManager } from './toolbar/widgets/layout/types';
-
-export type EditorNotifier = EventDispatcher<EditorEventType, EditorEventDataType>;
-
-export enum EditorEventType {
-	ToolEnabled,
-	ToolDisabled,
-	ToolUpdated,
-
-	UndoRedoStackUpdated,
-	CommandDone,
-	CommandUndone,
-	ObjectAdded,
-
-	ViewportChanged,
-	DisplayResized,
-
-	SelectionUpdated,
-
-	/** @internal */
-	ColorPickerToggled,
-
-	/** @internal */
-	ColorPickerColorSelected,
-
-	/** @deprecated @internal */
-	ToolbarDropdownShown,
-}
-
-// Types of `EditorUndoStackUpdated` events.
-export enum UndoEventType {
-	CommandDone,
-	CommandUndone,
-	CommandRedone,
-}
-
-type EditorToolEventType = EditorEventType.ToolEnabled
-	| EditorEventType.ToolDisabled
-	| EditorEventType.ToolUpdated;
-
-export interface EditorToolEvent {
-	readonly kind: EditorToolEventType;
-	readonly tool: BaseTool;
-}
-
-export interface EditorObjectEvent {
-	readonly kind: EditorEventType.ObjectAdded;
-	readonly object: AbstractComponent;
-}
-
-export interface EditorViewportChangedEvent {
-	readonly kind: EditorEventType.ViewportChanged;
-
-	// Canvas -> screen transform
-	readonly newTransform: Mat33;
-	readonly oldTransform: Mat33;
-}
-
-export interface DisplayResizedEvent {
-	readonly kind: EditorEventType.DisplayResized;
-	readonly newSize: Vec2;
-}
-
-export interface EditorUndoStackUpdated {
-	readonly kind: EditorEventType.UndoRedoStackUpdated;
-
-	readonly undoStackSize: number;
-	readonly redoStackSize: number;
-
-	readonly command?: Command;
-	readonly stackUpdateType: UndoEventType;
-}
-
-export interface CommandDoneEvent {
-	readonly kind: EditorEventType.CommandDone;
-	readonly command: Command;
-}
-
-export interface CommandUndoneEvent {
-	readonly kind: EditorEventType.CommandUndone;
-	readonly command: Command;
-}
-
-export interface SelectionUpdated {
-	readonly kind: EditorEventType.SelectionUpdated;
-	readonly selectedComponents: AbstractComponent[];
-	readonly tool: BaseTool;
-}
-
-export interface ColorPickerToggled {
-	readonly kind: EditorEventType.ColorPickerToggled;
-	readonly open: boolean;
-}
-
-export interface ColorPickerColorSelected {
-	readonly kind: EditorEventType.ColorPickerColorSelected;
-	readonly color: Color4;
-}
-
-export interface ToolbarDropdownShownEvent {
-	readonly kind: EditorEventType.ToolbarDropdownShown;
-
-	// True iff the source dropdown is toplevel.
-	readonly fromToplevelDropdown: boolean;
-	readonly layoutManager: WidgetContentLayoutManager;
-}
-
-export type EditorEventDataType = EditorToolEvent | EditorObjectEvent
-	| EditorViewportChangedEvent | DisplayResizedEvent
-	| EditorUndoStackUpdated | CommandDoneEvent | CommandUndoneEvent
-	| SelectionUpdated
-	| ColorPickerToggled | ColorPickerColorSelected
-	| ToolbarDropdownShownEvent;
-
-
-// Returns a Promise to indicate that the event source should pause until the Promise resolves.
-// Returns null to continue loading without pause.
-// [totalToProcess] can be an estimate and may change if a better estimate becomes available.
-export type OnProgressListener =
-	(amountProcessed: number, totalToProcess: number)=> Promise<void>|null|void;
-
-export type ComponentAddedListener = (component: AbstractComponent)=> Promise<void>|void;
-
-// Called when a new estimate for the import/export rect has been generated. This can be called multiple times.
-// Only the last call to this listener must be accurate.
-// The import/export rect is also returned by [start].
-export type OnDetermineExportRectListener = (exportRect: Rect2)=> void;
-
-export interface ImageLoader {
-	start(
-		onAddComponent: ComponentAddedListener,
-		onProgressListener: OnProgressListener,
-		onDetermineExportRect?: OnDetermineExportRectListener,
-	): Promise<void>;
-}
-
-export interface StrokeDataPoint {
-	pos: Point2;
-	width: number;
-
-	/** Time in milliseconds (e.g. as returned by `performance.now()`). */
-	time: number;
-	color: Color4;
-}

package/src/util/ReactiveValue.test.ts

@@ -1,168 +0,0 @@
-import { ReactiveValue, MutableReactiveValue } from './ReactiveValue';
-
-describe('ReactiveValue', () => {
-	it('should fire update listeners on update', () => {
-		const value = ReactiveValue.fromInitialValue(3);
-		const listener = jest.fn();
-		const { remove: removeListener } = value.onUpdateAndNow(listener);
-
-		expect(listener).toHaveBeenCalledWith(3);
-		expect(listener).toHaveBeenCalledTimes(1);
-
-		value.set(2);
-
-		expect(listener).toHaveBeenLastCalledWith(2);
-		expect(listener).toHaveBeenCalledTimes(2);
-
-		removeListener();
-
-		value.set(4);
-		expect(listener).toHaveBeenCalledTimes(2);
-
-		// Should be able to call remove multiple times without error.
-		removeListener();
-		value.set(6);
-	});
-
-	it('values from callbacks should derive values from the callback', () => {
-		const sourceValue1 = ReactiveValue.fromInitialValue('test');
-		const sourceValue2 = ReactiveValue.fromInitialValue('test2');
-		const sourceValue3 = ReactiveValue.fromImmutable(3);
-
-		// Create a value that is computed from the three above values.
-		const derivedValue1 = ReactiveValue.fromCallback(() => {
-			return [
-				sourceValue1.get(),
-				sourceValue2.get(),
-				sourceValue3.get(),
-			].join(',');
-		}, [ sourceValue1, sourceValue2, sourceValue3 ]);
-
-		const derivedValue1Listener = jest.fn();
-		derivedValue1.onUpdate(derivedValue1Listener);
-
-		expect(derivedValue1.get()).toBe('test,test2,3');
-		expect(derivedValue1Listener).toHaveBeenCalledTimes(0);
-
-		// Create a value that is computed just from derivedValue1
-		const derivedValue2 = ReactiveValue.fromCallback(() => {
-			return derivedValue1.get() + '!';
-		}, [ derivedValue1 ]);
-
-		const derivedValue2Listener = jest.fn();
-		derivedValue2.onUpdate(derivedValue2Listener);
-
-		expect(derivedValue2.get()).toBe('test,test2,3!');
-		expect(derivedValue1Listener).toHaveBeenCalledTimes(0);
-		expect(derivedValue2Listener).toHaveBeenCalledTimes(0);
-
-		// Changing the source values should update the derived values
-		sourceValue1.set('...');
-
-		// The change should trigger the listeners
-		expect(derivedValue1Listener).toHaveBeenCalledTimes(1);
-		expect(derivedValue1Listener).toHaveBeenCalledWith(derivedValue1.get());
-		expect(derivedValue2Listener).toHaveBeenCalledTimes(1);
-		expect(derivedValue2Listener).toHaveBeenCalledWith(derivedValue2.get());
-
-		// The values should be updated to the expected values.
-		expect(derivedValue1.get()).toBe('...,test2,3');
-		expect(derivedValue2.get()).toBe('...,test2,3!');
-
-		// Something similar should happen when other values are changed
-		sourceValue1.set('1');
-		sourceValue2.set('2');
-
-		expect(derivedValue1.get()).toBe('1,2,3');
-		expect(derivedValue2.get()).toBe('1,2,3!');
-	});
-
-	it('should be able to create values from properties', () => {
-		const sourceValue = ReactiveValue.fromInitialValue({
-			a: 1,
-			b: 2,
-			c: { d: 3 },
-		});
-
-		const destValue1 = MutableReactiveValue.fromProperty(sourceValue, 'c');
-		const destValue2 = MutableReactiveValue.fromProperty(sourceValue, 'b');
-		expect(destValue1.get()).toBe(sourceValue.get().c);
-		expect(destValue2.get()).toBe(2);
-
-		// Updating the source value should update the destination values.
-		sourceValue.set({
-			...sourceValue.get(),
-			c: { d: 4 },
-		});
-
-		expect(destValue1.get()).toBe(sourceValue.get().c);
-		expect(destValue1.get().d).toBe(4);
-		expect(destValue2.get()).toBe(2);
-
-		sourceValue.set({
-			a: 3,
-			b: 4,
-			c: { d: 5 },
-		});
-		expect(destValue1.get().d).toBe(5);
-		expect(destValue2.get()).toBe(4);
-
-		// Updating the destination values should update the source values
-		destValue1.set({ d: 8 });
-		expect(sourceValue.get().c.d).toBe(8);
-
-		destValue2.set(5);
-		expect(sourceValue.get().b).toBe(5);
-	});
-
-	it('mutable map should be bidirectional', () => {
-		const sourceValue = ReactiveValue.fromInitialValue(5);
-		const mappedValue = MutableReactiveValue.map(
-			sourceValue, a => a ** 2, b => Math.sqrt(b),
-		);
-
-		expect(mappedValue.get()).toBeCloseTo(25);
-
-		// Changing the destination should change the source
-		mappedValue.set(26);
-		expect(sourceValue.get()).toBeCloseTo(Math.sqrt(26));
-
-		// Changing the source should change the destination
-		sourceValue.set(10);
-		expect(mappedValue.get()).toBeCloseTo(100);
-	});
-
-	it('single-directional map should apply the given mapping function', () => {
-		const sourceValue = ReactiveValue.fromInitialValue(1);
-		const midValue = ReactiveValue.map(sourceValue, a => a * 2);
-		const destValue = ReactiveValue.map(midValue, _ => 0);
-
-		const sourceUpdateFn = jest.fn();
-		const midUpdateFn = jest.fn();
-		const destUpdateFn = jest.fn();
-
-		sourceValue.onUpdate(sourceUpdateFn);
-		midValue.onUpdate(midUpdateFn);
-		destValue.onUpdate(destUpdateFn);
-
-		// Initial value checking
-		expect(destValue.get()).toBe(0);
-		expect(sourceUpdateFn).toHaveBeenCalledTimes(0);
-		expect(midUpdateFn).toHaveBeenCalledTimes(0);
-		expect(destUpdateFn).toHaveBeenCalledTimes(0);
-
-		// Setting to the same value should trigger no listeners
-		sourceValue.set(1);
-		expect(sourceUpdateFn).toHaveBeenCalledTimes(0);
-		expect(midUpdateFn).toHaveBeenCalledTimes(0);
-		expect(destUpdateFn).toHaveBeenCalledTimes(0);
-
-		// Changing the initial value should only fire listeners that
-		// result in a different value
-		sourceValue.set(2);
-		expect(sourceUpdateFn).toHaveBeenCalledTimes(1);
-		expect(midUpdateFn).toHaveBeenCalledTimes(1);
-		expect(destUpdateFn).toHaveBeenCalledTimes(0);
-		expect(midValue.get()).toBe(4);
-	});
-});

package/src/util/ReactiveValue.ts

@@ -1,241 +0,0 @@
-
-type ListenerResult = { remove(): void; };
-type UpdateCallback<T> = (value: T)=>void;
-
-const noOpUpdateListenerResult = {
-	remove() { }
-};
-
-/**
- * An update listener that does nothing. Useful for reactive values
- * that will never change.
- */
-const noOpSetUpdateListener = () => {
-	return noOpUpdateListenerResult;
-};
-
-/**
- * A `ReactiveValue` is a value that
- * - updates periodically,
- * - can fire listeners when it updates,
- * - and can be chanined together with other `ReactiveValue`s.
- *
- * A `ReactiveValue` is a read-only view. See {@link MutableReactiveValue} for a
- * read-write view.
- *
- * Static methods in the `ReactiveValue` and `MutableReactiveValue` classes are
- * constructors (e.g. `fromImmutable`).
- */
-export abstract class ReactiveValue<T> {
-	/**
-	 * Returns a reference to the current value of this `ReactiveValue`.
-	 *
-	 * The result of this **should not be modified** (use `setValue` instead).
-	 */
-	public abstract get(): T;
-
-	/**
-	 * Registers a listener that is notified when the value of this changes.
-	 */
-	public abstract onUpdate(listener: UpdateCallback<T>): ListenerResult;
-
-	/**
-	 * Calls `callback` immediately, then registers `callback` as an onUpdateListener.
-	 *
-	 * @see {@link onUpdate}.
-	 */
-	public abstract onUpdateAndNow(callback: UpdateCallback<T>): ListenerResult;
-
-	/** Creates a `ReactiveValue` with an initial value, `initialValue`. */
-	public static fromInitialValue<T> (
-		initialValue: T
-	): MutableReactiveValue<T>{
-		return new ReactiveValueImpl(initialValue);
-	}
-
-	/** Returns a `ReactiveValue` that is **known** will never change. */
-	public static fromImmutable<T> (
-		value: T
-	): ReactiveValue<T>{
-		return {
-			get: () => value,
-			onUpdate: noOpSetUpdateListener,
-			onUpdateAndNow: callback => {
-				callback(value);
-				return noOpUpdateListenerResult;
-			},
-		};
-	}
-
-	/**
-	 * Creates a `ReactiveValue` whose values come from `callback`.
-	 *
-	 * `callback` is called whenever any of `sourceValues` are updated and initially to
-	 * set the initial value of the result.
-	 */
-	public static fromCallback<T> (
-		callback: ()=>T, sourceValues: ReactiveValue<any>[]
-	): ReactiveValue<T>{
-		const result = new ReactiveValueImpl(callback());
-		const resultRef = window.WeakRef ? new WeakRef(result) : { deref: () => result };
-
-		for (const value of sourceValues) {
-			const listener = value.onUpdate(() => {
-				// Use resultRef to allow `result` to be garbage collected
-				// despite this listener.
-				const value = resultRef.deref();
-				if (value) {
-					value.set(callback());
-				} else {
-					listener.remove();
-				}
-			});
-		}
-
-		return result;
-	}
-
-	/**
-	 * Returns a reactive value derived from a single `source`.
-	 *
-	 * If `inverseMap` is `undefined`, the result is a read-only view.
-	 */
-	public static map<A, B> (
-		source: ReactiveValue<A>,
-		map: (a: A)=>B,
-		inverseMap?: undefined,
-	): ReactiveValue<B>;
-
-
-	/**
-	 * Returns a reactive value derived from a single `source`.
-	 */
-	public static map<A, B> (
-		source: ReactiveValue<A>,
-		map: (a: A)=>B,
-		inverseMap: (b: B)=>A,
-	): MutableReactiveValue<B>;
-
-
-	public static map<A, B> (
-		source: MutableReactiveValue<A>,
-		map: (a: A)=>B,
-		inverseMap: ((b: B)=>A)|undefined,
-	): ReactiveValue<B>|MutableReactiveValue<B>{
-		const result = ReactiveValue.fromInitialValue(map(source.get()));
-
-		let expectedResultValue = result.get();
-		source.onUpdate(newValue => {
-			expectedResultValue = map(newValue);
-			result.set(expectedResultValue);
-		});
-
-		if (inverseMap) {
-			result.onUpdate(newValue => {
-				// Prevent infinite loops if inverseMap is not a true
-				// inverse.
-				if (newValue !== expectedResultValue) {
-					source.set(inverseMap(newValue));
-				}
-			});
-		}
-
-		return result;
-	}
-}
-
-export abstract class MutableReactiveValue<T> extends ReactiveValue<T> {
-	/**
-	 * Changes the value of this and fires all update listeners.
-	 *
-	 * @see {@link onUpdate}
-	 */
-	public abstract set(newValue: T): void;
-
-	public static fromProperty<SourceType extends object, Name extends keyof SourceType> (
-		sourceValue: MutableReactiveValue<SourceType>,
-		propertyName: Name,
-	): MutableReactiveValue<SourceType[Name]>{
-		const child = ReactiveValue.fromInitialValue(
-			sourceValue.get()[propertyName]
-		);
-		const childRef = new WeakRef(child);
-
-		// When the source is updated...
-		const sourceListener = sourceValue.onUpdate(newValue => {
-			const childValue = childRef.deref();
-
-			if (childValue) {
-				childValue.set(newValue[propertyName]);
-			} else {
-				// TODO: What if `sourceValue` would be dropped before
-				// the child value?
-				sourceListener.remove();
-			}
-		});
-
-		// When the child is updated, also apply the update to the
-		// parent.
-		child.onUpdate(newValue => {
-			sourceValue.set({
-				...sourceValue.get(),
-				[propertyName]: newValue,
-			});
-		});
-
-		return child;
-	}
-}
-
-// @internal
-class ReactiveValueImpl<T> extends MutableReactiveValue<T> {
-	#value: T;
-	#onUpdateListeners: Array<(value: T)=>void>;
-
-	public constructor(initialValue: T) {
-		super();
-
-		this.#value = initialValue;
-		this.#onUpdateListeners = [];
-	}
-
-	public set(newValue: T) {
-		if (this.#value === newValue) {
-			return;
-		}
-
-		this.#value = newValue;
-
-		for (const listener of this.#onUpdateListeners) {
-			listener(newValue);
-		}
-	}
-
-	public get() {
-		return this.#value;
-	}
-
-	public onUpdate(listener: (value: T)=>void) {
-		// **Note**: If memory is a concern, listeners should avoid referencing this
-		// reactive value directly. Doing so allows the value to be garbage collected when
-		// no longer referenced.
-
-		this.#onUpdateListeners.push(listener);
-
-		return {
-			remove: () => {
-				this.#onUpdateListeners = this.#onUpdateListeners.filter(otherListener => {
-					return otherListener !== listener;
-				});
-			},
-		};
-	}
-
-	public onUpdateAndNow(callback: (value: T)=>void) {
-		callback(this.get());
-		return this.onUpdate(callback);
-	}
-}
-
-
-export default ReactiveValue;

package/src/util/assertions.ts

@@ -1,55 +0,0 @@
-
-/**
- * Compile-time assertion that a branch of code is unreachable.
- * @internal
- */
-export const assertUnreachable = (key: never): never => {
-	// See https://stackoverflow.com/a/39419171/17055750
-	throw new Error(`Should be unreachable. Key: ${key}.`);
-};
-
-
-/**
- * Throws an exception if the typeof given value is not a number or `value` is NaN.
- *
- * @example
- * ```ts
- * const foo: unknown = 3;
- * assertIsNumber(foo);
- *
- * assertIsNumber('hello, world'); // throws an Error.
- * ```
- *
- *
- */
-export const assertIsNumber = (value: any, allowNaN: boolean = false): value is number => {
-	if (typeof value !== 'number' || (!allowNaN && isNaN(value))) {
-		throw new Error('Given value is not a number');
-		// return false;
-	}
-
-	return true;
-};
-
-/**
- * Throws if any of `values` is not of type number.
- */
-export const assertIsNumberArray = (
-	values: any[], allowNaN: boolean = false
-): values is number[] => {
-	if (typeof values !== 'object') {
-		throw new Error('Asserting isNumberArray: Given entity is not an array');
-	}
-
-	if (!assertIsNumber(values['length'])) {
-		return false;
-	}
-
-	for (const value of values) {
-		if (!assertIsNumber(value, allowNaN)) {
-			return false;
-		}
-	}
-
-	return true;
-};

package/src/util/fileToBase64.ts

@@ -1,18 +0,0 @@
-
-type ProgressListener = (evt: ProgressEvent<FileReader>)=> void;
-const fileToBase64 = (file: File, onprogress?: ProgressListener): Promise<string|null> => {
-	const reader = new FileReader();
-
-	return 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) => {
-			onprogress?.(evt);
-		};
-
-		reader.readAsDataURL(file);
-	});
-};
-
-export default fileToBase64;

package/src/util/guessKeyCodeFromKey.ts

@@ -1,36 +0,0 @@
-
-// See https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_code_values for
-// more
-const keyToKeyCode: Record<string, string> = {
-	'Control': 'ControlLeft',
-	'=': 'Equal',
-	'-': 'Minus',
-	';': 'Semicolon',
-	' ': 'Space',
-};
-
-/**
- * Attempts to guess the .code value corresponding to the given key.
- *
- * Use this to facilitate testing.
- *
- * If no matching keycode is found, returns `key`.
- */
-const guessKeyCodeFromKey = (key: string) => {
-	const upperKey = key.toUpperCase();
-	if ('A' <= upperKey && upperKey <= 'Z') {
-		return `Key${upperKey}`;
-	}
-
-	if ('0' <= key && key <= '9') {
-		return `Digit${key}`;
-	}
-
-	if (key in keyToKeyCode) {
-		return keyToKeyCode[key];
-	}
-
-	return key;
-};
-
-export default guessKeyCodeFromKey;

package/src/util/listPrefixMatch.ts

@@ -1,19 +0,0 @@
-
-/**
- * Returns true iff all elements in the shorter list equal (===) the elements
- * in the longer list.
- */
-const listPrefixMatch = <T> (a: T[], b: T[]) => {
-	const shorter = a.length < b.length ? a : b;
-	const longer = shorter === a ? b : a;
-
-	for (let i = 0; i < shorter.length; i++) {
-		if (shorter[i] !== longer[i]) {
-			return false;
-		}
-	}
-
-	return true;
-};
-
-export default listPrefixMatch;

package/src/util/stopPropagationOfScrollingWheelEvents.ts

@@ -1,20 +0,0 @@
-
-const stopPropagationOfScrollingWheelEvents = (scrollingContainer: HTMLElement) => {
-	scrollingContainer.onwheel = (event) => {
-		const hasScroll = scrollingContainer.clientWidth !== scrollingContainer.scrollWidth
-						&& event.deltaX !== 0;
-		const eventScrollsPastLeft =
-			scrollingContainer.scrollLeft + event.deltaX <= 0;
-		const scrollRight = scrollingContainer.scrollLeft + scrollingContainer.clientWidth;
-		const eventScrollsPastRight =
-			scrollRight + event.deltaX > scrollingContainer.scrollWidth;
-
-		// Stop the editor from receiving the event if it will scroll the pen type selector
-		// instead.
-		if (hasScroll && !eventScrollsPastLeft && !eventScrollsPastRight) {
-			event.stopPropagation();
-		}
-	};
-};
-
-export default stopPropagationOfScrollingWheelEvents;