js-draw 0.1.5 → 0.1.8

package/src/commands/Erase.ts

@@ -1,18 +1,23 @@
 import AbstractComponent from '../components/AbstractComponent';
+import describeComponentList from '../components/util/describeComponentList';
 import Editor from '../Editor';
 import EditorImage from '../EditorImage';
 import { EditorLocalization } from '../localization';
-import Command from './Command';
+import SerializableCommand from './SerializableCommand';
 
-export default class Erase implements Command {
+export default class Erase extends SerializableCommand {
 	private toRemove: AbstractComponent[];
+	private applied: boolean;
 
 	public constructor(toRemove: AbstractComponent[]) {
+		super('erase');
+
 		// Clone the list
 		this.toRemove = toRemove.map(elem => elem);
+		this.applied = false;
 	}
 
-	public apply(editor: Editor): void {
+	public apply(editor: Editor) {
 		for (const part of this.toRemove) {
 			const parent = editor.image.findParent(part);
 
@@ -21,32 +26,48 @@ export default class Erase implements Command {
 			}
 		}
 
+		this.applied = true;
 		editor.queueRerender();
 	}
 
-	public unapply(editor: Editor): void {
+	public unapply(editor: Editor) {
 		for (const part of this.toRemove) {
 			if (!editor.image.findParent(part)) {
-				new EditorImage.AddElementCommand(part).apply(editor);
+				EditorImage.addElement(part).apply(editor);
 			}
 		}
 
+		this.applied = false;
 		editor.queueRerender();
 	}
 
+	public onDrop(editor: Editor) {
+		if (this.applied) {
+			for (const part of this.toRemove) {
+				editor.image.onDestroyElement(part);
+			}
+		}
+	}
+
 	public description(localizationTable: EditorLocalization): string {
 		if (this.toRemove.length === 0) {
 			return localizationTable.erasedNoElements;
 		}
 
-		let description = this.toRemove[0].description(localizationTable);
-		for (const elem of this.toRemove) {
-			if (elem.description(localizationTable) !== description) {
-				description = localizationTable.elements;
-				break;
-			}
-		}
-
+		const description = describeComponentList(localizationTable, this.toRemove) ?? localizationTable.elements;
 		return localizationTable.eraseAction(description, this.toRemove.length);
 	}
+
+	protected serializeToString() {
+		const elemIds = this.toRemove.map(elem => elem.getId());
+		return JSON.stringify(elemIds);
+	}
+
+	static {
+		SerializableCommand.register('erase', (data: string, editor: Editor) => {
+			const json = JSON.parse(data);
+			const elems = json.map((elemId: string) => editor.image.lookupElement(elemId));
+			return new Erase(elems);
+		});
+	}
 }

package/src/commands/SerializableCommand.ts

@@ -0,0 +1,41 @@
+import Editor from '../Editor';
+import Command from './Command';
+
+type DeserializationCallback = (data: string, editor: Editor) => SerializableCommand;
+
+export default abstract class SerializableCommand extends Command {
+	public constructor(private commandTypeId: string) {
+		super();
+
+		if (!(commandTypeId in SerializableCommand.deserializationCallbacks)) {
+			throw new Error(
+				`Command ${commandTypeId} must have a registered deserialization callback. To do this, call SerializableCommand.register.`
+			);
+		}
+	}
+
+	protected abstract serializeToString(): string;
+	private static deserializationCallbacks: Record<string, DeserializationCallback> = {};
+
+	public serialize(): string {
+		return JSON.stringify({
+			data: this.serializeToString(),
+			commandType: this.commandTypeId,
+		});
+	}
+
+	public static deserialize(data: string, editor: Editor): SerializableCommand {
+		const json = JSON.parse(data);
+		const commandType = json.commandType as string;
+
+		if (!(commandType in SerializableCommand.deserializationCallbacks)) {
+			throw new Error(`Unrecognised command type ${commandType}!`);
+		}
+
+		return SerializableCommand.deserializationCallbacks[commandType](json.data as string, editor);
+	}
+
+	public static register(commandTypeId: string, deserialize: DeserializationCallback) {
+		SerializableCommand.deserializationCallbacks[commandTypeId] = deserialize;
+	}
+}

package/src/commands/localization.ts

@@ -9,12 +9,14 @@ export interface CommandLocalization {
 	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;
 
 	selectedElements: (count: number)=>string;
 }
@@ -25,8 +27,11 @@ export const defaultCommandLocalization: CommandLocalization = {
 	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}`,
 	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',

package/src/components/AbstractComponent.ts

@@ -1,26 +1,57 @@
 import Command from '../commands/Command';
+import SerializableCommand from '../commands/SerializableCommand';
 import Editor from '../Editor';
 import EditorImage from '../EditorImage';
 import LineSegment2 from '../geometry/LineSegment2';
 import Mat33 from '../geometry/Mat33';
 import Rect2 from '../geometry/Rect2';
+import { EditorLocalization } from '../localization';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import { ImageComponentLocalization } from './localization';
 
-type LoadSaveData = unknown;
+type LoadSaveData = (string[]|Record<symbol, string|number>);
 export type LoadSaveDataTable = Record<string, Array<LoadSaveData>>;
+type DeserializeCallback = (data: string)=>AbstractComponent;
+type ComponentId = string;
 
 export default abstract class AbstractComponent {
 	protected lastChangedTime: number;
 	protected abstract contentBBox: Rect2;
 	private zIndex: number;
+	private id: string;
 
 	// Topmost z-index
 	private static zIndexCounter: number = 0;
 
-	protected constructor() {
+	protected constructor(
+		// A unique identifier for the type of component
+		private readonly componentKind: string,
+	) {
 		this.lastChangedTime = (new Date()).getTime();
 		this.zIndex = AbstractComponent.zIndexCounter++;
+
+		// Create a unique ID.
+		this.id = `${new Date().getTime()}-${Math.random()}`;
+
+		if (AbstractComponent.deserializationCallbacks[componentKind] === undefined) {
+			throw new Error(`Component ${componentKind} has not been registered using AbstractComponent.registerComponent`);
+		}
+	}
+
+	public getId() {
+		return this.id;
+	}
+
+	private static deserializationCallbacks: Record<ComponentId, DeserializeCallback|null> = {};
+
+	// Store the deserialization callback (or lack of it) for [componentKind].
+	// If components are registered multiple times (as may be done in automated tests),
+	// the most recent deserialization callback is used.
+	public static registerComponent(
+		componentKind: string,
+		deserialize: DeserializeCallback|null,
+	) {
+		this.deserializationCallbacks[componentKind] = deserialize ?? null;
 	}
 
 	// Get and manage data attached by a loader.
@@ -45,48 +76,159 @@ export default abstract class AbstractComponent {
 	public abstract render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
 	public abstract intersects(lineSegment: LineSegment2): boolean;
 
+	// Return null iff this object cannot be safely serialized/deserialized.
+	protected abstract serializeToString(): string|null;
+
 	// Private helper for transformBy: Apply the given transformation to all points of this.
 	protected abstract applyTransformation(affineTransfm: Mat33): void;
 
 	// Returns a command that, when applied, transforms this by [affineTransfm] and
 	// updates the editor.
 	public transformBy(affineTransfm: Mat33): Command {
-		const updateTransform = (editor: Editor, newTransfm: Mat33) => {
+		return new AbstractComponent.TransformElementCommand(affineTransfm, this);
+	}
+
+	private static TransformElementCommand = class extends SerializableCommand {
+		private origZIndex: number;
+
+		public constructor(
+			private affineTransfm: Mat33,
+			private component: AbstractComponent,
+		) {
+			super('transform-element');
+			this.origZIndex = component.zIndex;
+		}
+
+		private updateTransform(editor: Editor, newTransfm: Mat33) {
 			// Any parent should have only one direct child.
-			const parent = editor.image.findParent(this);
+			const parent = editor.image.findParent(this.component);
 			let hadParent = false;
 			if (parent) {
 				parent.remove();
 				hadParent = true;
 			}
 
-			this.applyTransformation(newTransfm);
+			this.component.applyTransformation(newTransfm);
 
 			// Add the element back to the document.
 			if (hadParent) {
-				new EditorImage.AddElementCommand(this).apply(editor);
+				EditorImage.addElement(this.component).apply(editor);
 			}
-		};
-		const origZIndex = this.zIndex;
-
-		return {
-			apply: (editor: Editor) => {
-				this.zIndex = AbstractComponent.zIndexCounter++;
-				updateTransform(editor, affineTransfm);
-				editor.queueRerender();
-			},
-			unapply: (editor: Editor): void => {
-				this.zIndex = origZIndex;
-				updateTransform(
-					editor, affineTransfm.inverse()
+		}
+
+		public apply(editor: Editor) {
+			this.component.zIndex = AbstractComponent.zIndexCounter++;
+			this.updateTransform(editor, this.affineTransfm);
+			editor.queueRerender();
+		}
+
+		public unapply(editor: Editor) {
+			this.component.zIndex = this.origZIndex;
+			this.updateTransform(editor, this.affineTransfm.inverse());
+			editor.queueRerender();
+		}
+
+		public description(localizationTable: EditorLocalization) {
+			return localizationTable.transformedElements(1);
+		}
+
+		static {
+			SerializableCommand.register('transform-element', (data: string, editor: Editor) => {
+				const json = JSON.parse(data);
+				const elem = editor.image.lookupElement(json.id);
+
+				if (!elem) {
+					throw new Error(`Unable to retrieve non-existent element, ${elem}`);
+				}
+
+				const transform = json.transfm as [
+					number, number, number,
+					number, number, number,
+					number, number, number,
+				];
+
+				return new AbstractComponent.TransformElementCommand(
+					new Mat33(...transform),
+					elem,
 				);
-				editor.queueRerender();
-			},
-			description(localizationTable) {
-				return localizationTable.transformedElements(1);
-			},
-		};
-	}
+			});
+		}
+
+		protected serializeToString(): string {
+			return JSON.stringify({
+				id: this.component.getId(),
+				transfm: this.affineTransfm.toArray(),
+			});
+		}
+	};
 
 	public abstract description(localizationTable: ImageComponentLocalization): string;
+
+	protected abstract createClone(): AbstractComponent;
+
+	public clone() {
+		const clone = this.createClone();
+
+		for (const attachmentKey in this.loadSaveData) {
+			for (const val of this.loadSaveData[attachmentKey]) {
+				clone.attachLoadSaveData(attachmentKey, val);
+			}
+		}
+
+		return clone;
+	}
+
+	public serialize() {
+		const data = this.serializeToString();
+
+		if (data === null) {
+			throw new Error(`${this} cannot be serialized.`);
+		}
+
+		return JSON.stringify({
+			name: this.componentKind,
+			zIndex: this.zIndex,
+			id: this.id,
+			loadSaveData: this.loadSaveData,
+			data,
+		});
+	}
+
+	// Returns true if [data] is not deserializable. May return false even if [data]
+	// is not deserializable.
+	private static isNotDeserializable(data: string) {
+		const json = JSON.parse(data);
+
+		if (typeof json !== 'object') {
+			return true;
+		}
+
+		if (!this.deserializationCallbacks[json?.name]) {
+			return true;
+		}
+
+		if (!json.data) {
+			return true;
+		}
+
+		return false;
+	}
+
+	public static deserialize(data: string): AbstractComponent {
+		if (AbstractComponent.isNotDeserializable(data)) {
+			throw new Error(`Element with data ${data} cannot be deserialized.`);
+		}
+
+		const json = JSON.parse(data);
+		const instance = this.deserializationCallbacks[json.name]!(json.data);
+		instance.zIndex = json.zIndex;
+		instance.id = json.id;
+		
+		// TODO: What should we do with json.loadSaveData?
+		//       If we attach it to [instance], we create a potential security risk — loadSaveData
+		//       is often used to store unrecognised attributes so they can be preserved on output.
+		//       ...but what if we're deserializing data sent across the network?
+
+		return instance;
+	}
 }

package/src/components/SVGGlobalAttributesObject.ts

@@ -6,11 +6,15 @@ import SVGRenderer from '../rendering/renderers/SVGRenderer';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 
+type GlobalAttrsList = Array<[string, string|null]>;
+
+const componentKind = 'svg-global-attributes';
+
 // Stores global SVG attributes (e.g. namespace identifiers.)
 export default class SVGGlobalAttributesObject extends AbstractComponent {
 	protected contentBBox: Rect2;
-	public constructor(private readonly attrs: Array<[string, string|null]>) {
-		super();
+	public constructor(private readonly attrs: GlobalAttrsList) {
+		super(componentKind);
 		this.contentBBox = Rect2.empty;
 	}
 
@@ -32,7 +36,35 @@ export default class SVGGlobalAttributesObject extends AbstractComponent {
 	protected applyTransformation(_affineTransfm: Mat33): void {
 	}
 
+	protected createClone() {
+		return new SVGGlobalAttributesObject(this.attrs);
+	}
+
 	public description(localization: ImageComponentLocalization): string {
 		return localization.svgObject;
 	}
+
+	protected serializeToString(): string | null {
+		return JSON.stringify(this.attrs);
+	}
+
+	public static deserializeFromString(data: string): AbstractComponent {
+		const json = JSON.parse(data) as GlobalAttrsList;
+		const attrs: GlobalAttrsList = [];
+
+		const numericAndSpaceContentExp = /^[ \t\n0-9.-eE]+$/;
+
+		// Don't deserialize all attributes, just those that should be safe.
+		for (const [ key, val ] of json) {
+			if (key === 'viewBox' || key === 'width' || key === 'height') {
+				if (val && numericAndSpaceContentExp.exec(val)) {
+					attrs.push([key, val]);
+				}
+			}
+		}
+
+		return new SVGGlobalAttributesObject(attrs);
+	}
 }
+
+AbstractComponent.registerComponent(componentKind, SVGGlobalAttributesObject.deserializeFromString);

package/src/components/Stroke.test.ts

@@ -1,6 +1,14 @@
+/* @jest-environment jsdom */
+
 import Color4 from '../Color4';
+import Path from '../geometry/Path';
 import { Vec2 } from '../geometry/Vec2';
 import Stroke from './Stroke';
+import { loadExpectExtensions } from '../testing/loadExpectExtensions';
+import createEditor from '../testing/createEditor';
+import Mat33 from '../geometry/Mat33';
+
+loadExpectExtensions();
 
 describe('Stroke', () => {
 	it('empty stroke should have an empty bounding box', () => {
@@ -15,4 +23,49 @@ describe('Stroke', () => {
 			x: 0, y: 0, w: 0, h: 0,
 		});
 	});
+
+	it('cloned strokes should have the same points', () => {
+		const stroke = new Stroke([
+			Path.fromString('m1,1 2,2 3,3 z').toRenderable({ fill: Color4.red })
+		]);
+		const clone = stroke.clone();
+
+		expect(
+			(clone as Stroke).getPath().toString()
+		).toBe(
+			stroke.getPath().toString()
+		);
+	});
+
+	it('transforming a cloned stroke should not affect the original', () => {
+		const editor = createEditor();
+		const stroke = new Stroke([
+			Path.fromString('m1,1 2,2 3,3 z').toRenderable({ fill: Color4.red })
+		]);
+		const origBBox = stroke.getBBox();
+		expect(origBBox).toMatchObject({
+			x: 1, y: 1,
+			w: 5, h: 5,
+		});
+
+		const copy = stroke.clone();
+		expect(copy.getBBox()).objEq(origBBox);
+
+		stroke.transformBy(
+			Mat33.scaling2D(Vec2.of(10, 10))
+		).apply(editor);
+
+		expect(stroke.getBBox()).not.objEq(origBBox);
+		expect(copy.getBBox()).objEq(origBBox);
+	});
+
+	it('strokes should deserialize from JSON data', () => {
+		const deserialized = Stroke.deserializeFromString(`[
+			{
+				"style": { "fill": "#f00" },
+				"path": "m0,0 l10,10z"
+			}
+		]`);
+		expect(deserialized.getPath().toString()).toBe('M0,0L10,10L0,0');
+	});
 });

package/src/components/Stroke.ts

@@ -2,7 +2,8 @@ import LineSegment2 from '../geometry/LineSegment2';
 import Mat33 from '../geometry/Mat33';
 import Path from '../geometry/Path';
 import Rect2 from '../geometry/Rect2';
-import AbstractRenderer, { RenderablePathSpec, RenderingStyle } from '../rendering/renderers/AbstractRenderer';
+import AbstractRenderer, { RenderablePathSpec } from '../rendering/renderers/AbstractRenderer';
+import RenderingStyle, { styleFromJSON, styleToJSON } from '../rendering/RenderingStyle';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 
@@ -16,7 +17,7 @@ export default class Stroke extends AbstractComponent {
 	protected contentBBox: Rect2;
 
 	public constructor(parts: RenderablePathSpec[]) {
-		super();
+		super('stroke');
 
 		this.parts = parts.map(section => {
 			const path = Path.fromRenderable(section);
@@ -96,7 +97,41 @@ export default class Stroke extends AbstractComponent {
 		});
 	}
 
+	public getPath() {
+		return this.parts.reduce((accumulator: Path|null, current: StrokePart) => {
+			return accumulator?.union(current.path) ?? current.path;
+		}, null) ?? Path.empty;
+	}
+
 	public description(localization: ImageComponentLocalization): string {
 		return localization.stroke;
 	}
+
+	protected createClone(): AbstractComponent {
+		return new Stroke(this.parts);
+	}
+
+	protected serializeToString(): string | null {
+		return JSON.stringify(this.parts.map(part => {
+			return {
+				style: styleToJSON(part.style),
+				path: part.path.serialize(),
+			};
+		}));
+	}
+
+	public static deserializeFromString(data: string): Stroke {
+		const json = JSON.parse(data);
+		if (typeof json !== 'object' || typeof json.length !== 'number') {
+			throw new Error(`${data} is missing required field, parts, or parts is of the wrong type.`);
+		}
+
+		const pathSpec: RenderablePathSpec[] = json.map((part: any) => {
+			const style = styleFromJSON(part.style);
+			return Path.fromString(part.path).toRenderable(style);
+		});
+		return new Stroke(pathSpec);
+	}
 }
+
+AbstractComponent.registerComponent('stroke', Stroke.deserializeFromString);

package/src/components/Text.test.ts

@@ -0,0 +1,38 @@
+import Color4 from '../Color4';
+import Mat33 from '../geometry/Mat33';
+import Rect2 from '../geometry/Rect2';
+import AbstractComponent from './AbstractComponent';
+import Text, { TextStyle } from './Text';
+import { loadExpectExtensions } from '../testing/loadExpectExtensions';
+
+loadExpectExtensions();
+
+const estimateTextBounds = (text: string, style: TextStyle): Rect2 => {
+	const widthEst = text.length * style.size;
+	const heightEst = style.size;
+
+	// Text is drawn with (0, 0) as its baseline. As such, the majority of the text's height should
+	// be above (0, 0).
+	return new Rect2(0, -heightEst * 2/3, widthEst, heightEst);
+};
+
+// Don't use the default Canvas-based text bounding code. The canvas-based code may not work
+// with jsdom.
+AbstractComponent.registerComponent('text', (data: string) => Text.deserializeFromString(data, estimateTextBounds));
+
+describe('Text', () => {
+	it('should be serializable', () => {
+		const style: TextStyle = {
+			size: 12,
+			fontFamily: 'serif',
+			renderingStyle: { fill: Color4.black },
+		};
+		const text = new Text(
+			[ 'Foo' ], Mat33.identity, style, estimateTextBounds
+		);
+		const serialized = text.serialize();
+		const deserialized = AbstractComponent.deserialize(serialized) as Text;
+		expect(deserialized.getBBox()).objEq(text.getBBox());
+		expect(deserialized['getText']()).toContain('Foo');
+	});
+});