js-draw 1.0.1 → 1.1.0

package/src/commands/UnresolvedCommand.ts

@@ -1,37 +0,0 @@
-import EditorImage from '../EditorImage';
-import AbstractComponent from '../components/AbstractComponent';
-import SerializableCommand from './SerializableCommand';
-
-export type ResolveFromComponentCallback = () => SerializableCommand;
-
-/**
- * A command that requires a component that may or may not be present in the editor when
- * the command is created.
- */
-export default abstract class UnresolvedSerializableCommand extends SerializableCommand {
-	protected component: AbstractComponent|null;
-	protected readonly componentID: string;
-
-	protected constructor(
-		commandId: string,
-		componentID: string,
-		component?: AbstractComponent
-	) {
-		super(commandId);
-		this.component = component ?? null;
-		this.componentID = componentID;
-	}
-
-	protected resolveComponent(image: EditorImage) {
-		if (this.component) {
-			return;
-		}
-
-		const component = image.lookupElement(this.componentID);
-		if (!component) {
-			throw new Error(`Unable to resolve component with ID ${this.componentID}`);
-		}
-
-		this.component = component;
-	}
-}

package/src/commands/invertCommand.ts

@@ -1,58 +0,0 @@
-import Editor from '../Editor';
-import { EditorLocalization } from '../localization';
-import Command from './Command';
-import SerializableCommand from './SerializableCommand';
-
-// Returns a command that does the opposite of the given command --- `result.apply()` calls
-// `command.unapply()` and `result.unapply()` calls `command.apply()`.
-const invertCommand = <T extends Command> (command: T): T extends SerializableCommand ? SerializableCommand : Command => {
-	if (command instanceof SerializableCommand) {
-		// SerializableCommand that does the inverse of [command]
-		return new class extends SerializableCommand {
-			protected serializeToJSON() {
-				return command.serialize();
-			}
-			public apply(editor: Editor) {
-				command.unapply(editor);
-			}
-			public unapply(editor: Editor) {
-				command.unapply(editor);
-			}
-			public override onDrop(editor: Editor) {
-				command.onDrop(editor);
-			}
-			public description(editor: Editor, localizationTable: EditorLocalization): string {
-				return localizationTable.inverseOf(command.description(editor, localizationTable));
-			}
-		}('inverse');
-	} else {
-		// Command that does the inverse of [command].
-		const result = new class extends Command {
-			public apply(editor: Editor) {
-				command.unapply(editor);
-			}
-
-			public unapply(editor: Editor) {
-				command.apply(editor);
-			}
-
-			public override onDrop(editor: Editor) {
-				command.onDrop(editor);
-			}
-
-			public description(editor: Editor, localizationTable: EditorLocalization) {
-				return localizationTable.inverseOf(command.description(editor, localizationTable));
-			}
-		};
-
-		// We know that T does not extend SerializableCommand, and thus returning a Command
-		// is appropriate.
-		return result as any;
-	}
-};
-
-SerializableCommand.register('inverse', (data, editor) => {
-	return invertCommand(SerializableCommand.deserialize(data, editor));
-});
-
-export default invertCommand;

package/src/commands/lib.ts

@@ -1,16 +0,0 @@
-import Command from './Command';
-import Duplicate from './Duplicate';
-import Erase from './Erase';
-import invertCommand from './invertCommand';
-import SerializableCommand from './SerializableCommand';
-import uniteCommands from './uniteCommands';
-
-export {
-	Command,
-	Duplicate,
-	Erase,
-	SerializableCommand,
-
-	invertCommand,
-	uniteCommands,
-};

package/src/commands/localization.ts

@@ -1,47 +0,0 @@
-import { Rect2 } from '@js-draw/math';
-
-export interface CommandLocalization {
-	movedLeft: string;
-	movedUp: string;
-	movedDown: string;
-	movedRight: string;
-	rotatedBy: (degrees: number) => string;
-	zoomedOut: string;
-	zoomedIn: string;
-	erasedNoElements: string;
-	duplicatedNoElements: string;
-	elements: string;
-	updatedViewport: string;
-	transformedElements: (elemCount: number) => string;
-	resizeOutputCommand: (newSize: Rect2) => string;
-	addElementAction: (elemDescription: string) => string;
-	eraseAction: (elemDescription: string, numElems: number) => string;
-	duplicateAction: (elemDescription: string, count: number)=> string;
-	inverseOf: (actionDescription: string)=> string;
-	unionOf: (actionDescription: string, actionCount: number)=> string;
-
-	selectedElements: (count: number)=>string;
-}
-
-export const defaultCommandLocalization: CommandLocalization = {
-	updatedViewport: 'Transformed Viewport',
-	transformedElements: (elemCount) => `Transformed ${elemCount} element${elemCount === 1 ? '' : 's'}`,
-	resizeOutputCommand: (newSize: Rect2) => `Resized image to ${newSize.w}x${newSize.h}`,
-	addElementAction: (componentDescription: string) => `Added ${componentDescription}`,
-	eraseAction: (componentDescription: string, numElems: number) => `Erased ${numElems} ${componentDescription}`,
-	duplicateAction: (componentDescription: string, numElems: number) => `Duplicated ${numElems} ${componentDescription}`,
-	unionOf: (actionDescription: string, actionCount: number) => `Union: ${actionCount} ${actionDescription}`,
-	inverseOf: (actionDescription: string) => `Inverse of ${actionDescription}`,
-	elements: 'Elements',
-	erasedNoElements: 'Erased nothing',
-	duplicatedNoElements: 'Duplicated nothing',
-
-	rotatedBy: (degrees) => `Rotated by ${Math.abs(degrees)} degrees ${degrees < 0 ? 'clockwise' : 'counter-clockwise'}`,
-	movedLeft: 'Moved left',
-	movedUp: 'Moved up',
-	movedDown: 'Moved down',
-	movedRight: 'Moved right',
-	zoomedOut: 'Zoomed out',
-	zoomedIn: 'Zoomed in',
-	selectedElements: (count) => `Selected ${count} element${count === 1 ? '' : 's'}`,
-};

package/src/commands/uniteCommands.test.ts

@@ -1,23 +0,0 @@
-import { Color4, EditorImage, Mat33, Path, SerializableCommand, StrokeComponent, Vec2 } from '../lib';
-import uniteCommands from './uniteCommands';
-import createEditor from '../testing/createEditor';
-import { pathToRenderable } from '../rendering/RenderablePathSpec';
-
-describe('uniteCommands', () => {
-	it('should be serializable and deserializable', () => {
-		const editor = createEditor();
-		const stroke = new StrokeComponent([ pathToRenderable(Path.fromString('m0,0 l10,10 h-2 z'), { fill: Color4.red }) ]);
-		const union = uniteCommands([
-			EditorImage.addElement(stroke),
-			stroke.transformBy(Mat33.translation(Vec2.of(1, 10))),
-		]);
-		const deserialized = SerializableCommand.deserialize(union.serialize(), editor);
-
-		deserialized.apply(editor);
-
-		const lookupResult = editor.image.lookupElement(stroke.getId());
-		expect(lookupResult).not.toBeNull();
-		expect(lookupResult?.getBBox().topLeft).toMatchObject(Vec2.of(1, 10));
-		expect(lookupResult?.getBBox().bottomRight).toMatchObject(Vec2.of(11, 20));
-	});
-});

package/src/commands/uniteCommands.ts

@@ -1,140 +0,0 @@
-import Editor from '../Editor';
-import { EditorLocalization } from '../localization';
-import waitForAll from '../util/waitForAll';
-import Command from './Command';
-import SerializableCommand from './SerializableCommand';
-
-
-class NonSerializableUnion extends Command {
-	public constructor(private commands: Command[], private applyChunkSize: number|undefined) {
-		super();
-	}
-
-	public apply(editor: Editor) {
-		if (this.applyChunkSize === undefined) {
-			const results = this.commands.map(cmd => cmd.apply(editor));
-			return waitForAll(results);
-		} else {
-			return editor.asyncApplyCommands(this.commands, this.applyChunkSize);
-		}
-	}
-
-	public unapply(editor: Editor) {
-		const commands = [ ...this.commands ];
-		commands.reverse();
-
-		if (this.applyChunkSize === undefined) {
-			const results = commands.map(cmd => cmd.unapply(editor));
-			return waitForAll(results);
-		} else {
-			return editor.asyncUnapplyCommands(commands, this.applyChunkSize, false);
-		}
-	}
-
-	public override onDrop(editor: Editor): void {
-		this.commands.forEach(command => command.onDrop(editor));
-	}
-
-	public description(editor: Editor, localizationTable: EditorLocalization) {
-		const descriptions: string[] = [];
-
-		let lastDescription: string|null = null;
-		let duplicateDescriptionCount: number = 0;
-		for (const part of this.commands) {
-			const description = part.description(editor, localizationTable);
-			if (description !== lastDescription && lastDescription !== null) {
-				descriptions.push(localizationTable.unionOf(lastDescription, duplicateDescriptionCount));
-				lastDescription = null;
-				duplicateDescriptionCount = 0;
-			}
-
-			duplicateDescriptionCount ++;
-			lastDescription ??= description;
-		}
-
-		if (duplicateDescriptionCount > 1) {
-			descriptions.push(localizationTable.unionOf(lastDescription!, duplicateDescriptionCount));
-		} else if (duplicateDescriptionCount === 1) {
-			descriptions.push(lastDescription!);
-		}
-
-		return descriptions.join(', ');
-	}
-}
-
-class SerializableUnion extends SerializableCommand {
-	private nonserializableCommand: NonSerializableUnion;
-	private serializedData: any;
-
-	public constructor(private commands: SerializableCommand[], private applyChunkSize: number|undefined) {
-		super('union');
-		this.nonserializableCommand = new NonSerializableUnion(commands, applyChunkSize);
-	}
-
-	protected serializeToJSON() {
-		if (this.serializedData) {
-			return this.serializedData;
-		}
-
-		return {
-			applyChunkSize: this.applyChunkSize,
-			data: this.commands.map(command => command.serialize()),
-		};
-	}
-
-	public apply(editor: Editor) {
-		// Cache this' serialized form -- applying this may change how commands serialize.
-		this.serializedData = this.serializeToJSON();
-
-		return this.nonserializableCommand.apply(editor);
-	}
-
-	public unapply(editor: Editor) {
-		return this.nonserializableCommand.unapply(editor);
-	}
-
-	public override onDrop(editor: Editor): void {
-		this.nonserializableCommand.onDrop(editor);
-	}
-
-	public description(editor: Editor, localizationTable: EditorLocalization): string {
-		return this.nonserializableCommand.description(editor, localizationTable);
-	}
-}
-
-const uniteCommands = <T extends Command> (commands: T[], applyChunkSize?: number): T extends SerializableCommand ? SerializableCommand : Command => {
-	let allSerializable = true;
-	for (const command of commands) {
-		if (!(command instanceof SerializableCommand)) {
-			allSerializable = false;
-			break;
-		}
-	}
-
-	if (!allSerializable) {
-		return new NonSerializableUnion(commands, applyChunkSize) as any;
-	} else {
-		const castedCommands = commands as any[] as SerializableCommand[];
-		return new SerializableUnion(castedCommands, applyChunkSize);
-	}
-};
-
-SerializableCommand.register('union', (data: any, editor) => {
-	if (typeof data.data.length !== 'number') {
-		throw new Error('Unions of commands must serialize to lists of serialization data.');
-	}
-	const applyChunkSize: number|undefined = data.applyChunkSize;
-	if (typeof applyChunkSize !== 'number' && applyChunkSize !== undefined) {
-		throw new Error('serialized applyChunkSize is neither undefined nor a number.');
-	}
-
-	const commands: SerializableCommand[] = [];
-	for (const part of data.data as any[]) {
-		commands.push(SerializableCommand.deserialize(part, editor));
-	}
-
-	return uniteCommands(commands, applyChunkSize);
-});
-
-
-export default uniteCommands;

package/src/components/AbstractComponent.transformBy.test.ts

@@ -1,23 +0,0 @@
-import { Color4, EditorImage, Mat33, Path, Rect2, Vec2 } from '../lib';
-import { pathToRenderable } from '../rendering/RenderablePathSpec';
-import createEditor from '../testing/createEditor';
-import Stroke from './Stroke';
-
-describe('AbstractComponent.transformBy', () => {
-	it('should restore the component\'s z-index on undo', () => {
-		const editor = createEditor();
-		const component = new Stroke([ pathToRenderable(Path.fromRect(Rect2.unitSquare), { fill: Color4.red }) ]);
-		EditorImage.addElement(component).apply(editor);
-
-		const origZIndex = component.getZIndex();
-
-		const transformCommand = component.transformBy(Mat33.translation(Vec2.unitX));
-		transformCommand.apply(editor);
-
-		// Should increase the z-index on applying a transform
-		expect(component.getZIndex()).toBeGreaterThan(origZIndex);
-
-		transformCommand.unapply(editor);
-		expect(component.getZIndex()).toBe(origZIndex);
-	});
-});