js-draw 0.3.1 → 0.3.2

package/src/EditorImage.ts

@@ -81,6 +81,8 @@ export default class EditorImage {
 
 	// A Command that can access private [EditorImage] functionality
 	private static AddElementCommand = class extends SerializableCommand {
+		private serializedElem: any;
+
 		// If [applyByFlattening], then the rendered content of this element
 		// is present on the display's wet ink canvas. As such, no re-render is necessary
 		// the first time this command is applied (the surfaces are joined instead).
@@ -90,6 +92,10 @@ export default class EditorImage {
 		) {
 			super('add-element');
 
+			// Store the element's serialization --- .serializeToJSON may be called on this
+			// even when this is not at the top of the undo/redo stack.
+			this.serializedElem = element.serialize();
+
 			if (isNaN(element.getBBox().area)) {
 				throw new Error('Elements in the image cannot have NaN bounding boxes');
 			}
@@ -118,7 +124,7 @@ export default class EditorImage {
 
 		protected serializeToJSON() {
 			return {
-				elemData: this.element.serialize(),
+				elemData: this.serializedElem,
 			};
 		}
 

package/src/SVGLoader.ts

@@ -1,5 +1,6 @@
 import Color4 from './Color4';
 import AbstractComponent from './components/AbstractComponent';
+import ImageComponent from './components/ImageComponent';
 import Stroke from './components/Stroke';
 import SVGGlobalAttributesObject from './components/SVGGlobalAttributesObject';
 import Text, { TextStyle } from './components/Text';
@@ -36,7 +37,8 @@ export default class SVGLoader implements ImageLoader {
 	private totalToProcess: number = 0;
 	private rootViewBox: Rect2|null;
 
-	private constructor(private source: SVGSVGElement, private onFinish?: OnFinishListener) {
+	private constructor(
+		private source: SVGSVGElement, private onFinish?: OnFinishListener, private readonly storeUnknown: boolean = true) {
 	}
 
 	private getStyle(node: SVGElement) {
@@ -108,6 +110,10 @@ export default class SVGLoader implements ImageLoader {
 		supportedAttrs: Set<string>,
 		supportedStyleAttrs?: Set<string>
 	) {
+		if (!this.storeUnknown) {
+			return;
+		}
+
 		for (const attr of node.getAttributeNames()) {
 			if (supportedAttrs.has(attr) || (attr === 'style' && supportedStyleAttrs)) {
 				continue;
@@ -161,11 +167,49 @@ export default class SVGLoader implements ImageLoader {
 				'\nAdding as an unknown object.'
 			);
 
-			elem = new UnknownSVGObject(node);
+			if (this.storeUnknown) {
+				elem = new UnknownSVGObject(node);
+			} else {
+				return;
+			}
 		}
 		this.onAddComponent?.(elem);
 	}
 
+	// If given, 'supportedAttrs' will have x, y, etc. attributes that were used in computing the transform added to it,
+	// to prevent storing duplicate transform information when saving the component.
+	private getTransform(elem: SVGElement, supportedAttrs?: string[], computedStyles?: CSSStyleDeclaration): Mat33 {
+		computedStyles ??= window.getComputedStyle(elem);
+		
+		let transformProperty = computedStyles.transform;
+		if (transformProperty === '' || transformProperty === 'none') {
+			transformProperty = elem.style.transform || 'none';
+		}
+
+		// Prefer the actual .style.transform
+		// to the computed stylesheet -- in some browsers, the computedStyles version
+		// can have lower precision.
+		let transform;
+		try {
+			transform = Mat33.fromCSSMatrix(elem.style.transform);
+		} catch(_e) {
+			transform = Mat33.fromCSSMatrix(transformProperty);
+		}
+
+		const elemX = elem.getAttribute('x');
+		const elemY = elem.getAttribute('y');
+		if (elemX && elemY) {
+			const x = parseFloat(elemX);
+			const y = parseFloat(elemY);
+			if (!isNaN(x) && !isNaN(y)) {
+				supportedAttrs?.push('x', 'y');
+				transform = transform.rightMul(Mat33.translation(Vec2.of(x, y)));
+			}
+		}
+
+		return transform;
+	}
+
 	private makeText(elem: SVGTextElement|SVGTSpanElement): Text {
 		const contentList: Array<Text|string> = [];
 		for (const child of elem.childNodes) {
@@ -205,33 +249,8 @@ export default class SVGLoader implements ImageLoader {
 			},
 		};
 
-		let transformProperty = computedStyles.transform;
-		if (transformProperty === '' || transformProperty === 'none') {
-			transformProperty = elem.style.transform || 'none';
-		}
-
-		// Compute transform matrix. Prefer the actual .style.transform
-		// to the computed stylesheet -- in some browsers, the computedStyles version
-		// can have lower precision.
-		let transform;
-		try {
-			transform = Mat33.fromCSSMatrix(elem.style.transform);
-		} catch(_e) {
-			transform = Mat33.fromCSSMatrix(transformProperty);
-		}
-
-		const supportedAttrs = [];
-		const elemX = elem.getAttribute('x');
-		const elemY = elem.getAttribute('y');
-		if (elemX && elemY) {
-			const x = parseFloat(elemX);
-			const y = parseFloat(elemY);
-			if (!isNaN(x) && !isNaN(y)) {
-				supportedAttrs.push('x', 'y');
-				transform = transform.rightMul(Mat33.translation(Vec2.of(x, y)));
-			}
-		}
-
+		const supportedAttrs: string[] = [];
+		const transform = this.getTransform(elem, supportedAttrs, computedStyles);
 		const result = new Text(contentList, transform, style);
 		this.attachUnrecognisedAttrs(
 			result,
@@ -248,14 +267,38 @@ export default class SVGLoader implements ImageLoader {
 			const textElem = this.makeText(elem);
 			this.onAddComponent?.(textElem);
 		} catch (e) {
-			console.error('Invalid text object in node', elem, '. Adding as an unknown object. Error:', e);
+			console.error('Invalid text object in node', elem, '. Continuing.... Error:', e);
+			this.addUnknownNode(elem);
+		}
+	}
+
+	private async addImage(elem: SVGImageElement) {
+		const image = new Image();
+		image.src = elem.getAttribute('xlink:href') ?? elem.href.baseVal;
+
+		try {
+			const supportedAttrs: string[] = [];
+			const transform = this.getTransform(elem, supportedAttrs);
+			const imageElem = await ImageComponent.fromImage(image, transform);
+			this.attachUnrecognisedAttrs(
+				imageElem,
+				elem,
+				new Set(supportedAttrs),
+				new Set([ 'transform' ])
+			);
+
+			this.onAddComponent?.(imageElem);
+		} catch (e) {
+			console.error('Error loading image:', e, '. Element: ', elem, '. Continuing...');
 			this.addUnknownNode(elem);
 		}
 	}
 
 	private addUnknownNode(node: SVGElement) {
-		const component = new UnknownSVGObject(node);
-		this.onAddComponent?.(component);
+		if (this.storeUnknown) {
+			const component = new UnknownSVGObject(node);
+			this.onAddComponent?.(component);
+		}
 	}
 
 	private updateViewBox(node: SVGSVGElement) {
@@ -280,7 +323,9 @@ export default class SVGLoader implements ImageLoader {
 	}
 
 	private updateSVGAttrs(node: SVGSVGElement) {
-		this.onAddComponent?.(new SVGGlobalAttributesObject(this.getSourceAttrs(node)));
+		if (this.storeUnknown) {
+			this.onAddComponent?.(new SVGGlobalAttributesObject(this.getSourceAttrs(node)));
+		}
 	}
 
 	private async visit(node: Element) {
@@ -298,6 +343,12 @@ export default class SVGLoader implements ImageLoader {
 			this.addText(node as SVGTextElement);
 			visitChildren = false;
 			break;
+		case 'image':
+			await this.addImage(node as SVGImageElement);
+
+			// Images should not have children.
+			visitChildren = false;
+			break;
 		case 'svg':
 			this.updateViewBox(node as SVGSVGElement);
 			this.updateSVGAttrs(node as SVGSVGElement);
@@ -305,7 +356,9 @@ export default class SVGLoader implements ImageLoader {
 		default:
 			console.warn('Unknown SVG element,', node);
 			if (!(node instanceof SVGElement)) {
-				console.warn('Element', node, 'is not an SVGElement! Continuing anyway.');
+				console.warn(
+					'Element', node, 'is not an SVGElement!', this.storeUnknown ? 'Continuing anyway.' : 'Skipping.'
+				);
 			}
 
 			this.addUnknownNode(node as SVGElement);
@@ -354,7 +407,8 @@ export default class SVGLoader implements ImageLoader {
 	}
 
 	// TODO: Handling unsafe data! Tripple-check that this is secure!
-	public static fromString(text: string): SVGLoader {
+	// @param sanitize - if `true`, don't store unknown attributes.
+	public static fromString(text: string, sanitize: boolean = false): SVGLoader {
 		const sandbox = document.createElement('iframe');
 		sandbox.src = 'about:blank';
 		sandbox.setAttribute('sandbox', 'allow-same-origin');
@@ -400,6 +454,6 @@ export default class SVGLoader implements ImageLoader {
 		return new SVGLoader(svgElem, () => {
 			svgElem.remove();
 			sandbox.remove();
-		});
+		}, !sanitize);
 	}
 }

package/src/UndoRedoHistory.test.ts

@@ -0,0 +1,33 @@
+
+import { Color4, EditorImage, Path, Stroke, Mat33, Vec2 } from './lib';
+import createEditor from './testing/createEditor';
+
+describe('UndoRedoHistory', () => {
+	it('should keep history size below maximum', () => {
+		const editor = createEditor();
+		const stroke = new Stroke([ Path.fromString('m0,0 10,10').toRenderable({ fill: Color4.red }) ]);
+		editor.dispatch(EditorImage.addElement(stroke));
+
+		for (let i = 0; i < editor.history['maxUndoRedoStackSize'] + 10; i++) {
+			editor.dispatch(stroke.transformBy(Mat33.translation(Vec2.of(1, 1))));
+		}
+
+		expect(editor.history.undoStackSize).toBeLessThan(editor.history['maxUndoRedoStackSize']);
+		expect(editor.history.undoStackSize).toBeGreaterThan(editor.history['maxUndoRedoStackSize'] / 10);
+		expect(editor.history.redoStackSize).toBe(0);
+
+		const origUndoStackSize = editor.history.undoStackSize;
+		while (editor.history.undoStackSize > 0) {
+			editor.history.undo();
+		}
+
+		// After undoing as much as possible, the stroke should still be present
+		expect(editor.image.findParent(stroke)).not.toBe(null);
+
+		// Undoing again shouldn't cause issues.
+		editor.history.undo();
+		expect(editor.image.findParent(stroke)).not.toBe(null);
+
+		expect(editor.history.redoStackSize).toBe(origUndoStackSize);
+	});
+});

package/src/UndoRedoHistory.ts

@@ -9,6 +9,8 @@ class UndoRedoHistory {
 	private undoStack: Command[];
 	private redoStack: Command[];
 
+	private maxUndoRedoStackSize: number = 700;
+
 	// @internal
 	public constructor(
 		private readonly editor: Editor,
@@ -39,6 +41,12 @@ class UndoRedoHistory {
 		}
 		this.redoStack = [];
 
+		if (this.undoStack.length > this.maxUndoRedoStackSize) {
+			const removeAtOnceCount = 10;
+			const removedElements = this.undoStack.splice(0, removeAtOnceCount);
+			removedElements.forEach(elem => elem.onDrop(this.editor));
+		}
+
 		this.fireUpdateEvent();
 		this.editor.notifier.dispatch(EditorEventType.CommandDone, {
 			kind: EditorEventType.CommandDone,

package/src/Viewport.ts

@@ -92,6 +92,7 @@ export class Viewport {
 		this.screenRect = this.screenRect.resizedTo(screenSize);
 	}
 
+	// Get the screen's visible region transformed into canvas space.
 	public get visibleRect(): Rect2 {
 		return this.screenRect.transformedBoundingBox(this.inverseTransform);
 	}
@@ -180,10 +181,8 @@ export class Viewport {
 		return Viewport.roundPoint(point, 1 / this.getScaleFactor());
 	}
 
-	// Returns a Command that transforms the view such that [rect] is visible, and perhaps
-	// centered in the viewport.
-	// Returns null if no transformation is necessary
-	public zoomTo(toMakeVisible: Rect2, allowZoomIn: boolean = true, allowZoomOut: boolean = true): Command {
+	// Computes and returns an affine transformation that makes `toMakeVisible` visible and roughly centered on the screen.
+	public computeZoomToTransform(toMakeVisible: Rect2, allowZoomIn: boolean = true, allowZoomOut: boolean = true): Mat33 {
 		let transform = Mat33.identity;
 
 		if (toMakeVisible.w === 0 || toMakeVisible.h === 0) {
@@ -237,6 +236,16 @@ export class Viewport {
 			transform = Mat33.identity;
 		}
 
+		return transform;
+	}
+
+	// Returns a Command that transforms the view such that [rect] is visible, and perhaps
+	// centered in the viewport.
+	// Returns null if no transformation is necessary
+	//
+	// @see {@link computeZoomToTransform}
+	public zoomTo(toMakeVisible: Rect2, allowZoomIn: boolean = true, allowZoomOut: boolean = true): Command {
+		const transform = this.computeZoomToTransform(toMakeVisible, allowZoomIn, allowZoomOut);
 		return new Viewport.ViewportTransform(transform);
 	}
 }

package/src/commands/lib.ts

@@ -3,6 +3,7 @@ import Duplicate from './Duplicate';
 import Erase from './Erase';
 import invertCommand from './invertCommand';
 import SerializableCommand from './SerializableCommand';
+import uniteCommands from './uniteCommands';
 
 export {
 	Command,
@@ -11,4 +12,5 @@ export {
 	SerializableCommand,
 
 	invertCommand,
+	uniteCommands,
 };

package/src/commands/localization.ts

@@ -18,6 +18,7 @@ export interface CommandLocalization {
 	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;
 }
@@ -29,6 +30,7 @@ export const defaultCommandLocalization: CommandLocalization = {
 	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',

package/src/commands/uniteCommands.test.ts

@@ -0,0 +1,23 @@
+
+import { Color4, EditorImage, Mat33, Path, SerializableCommand, StrokeComponent, Vec2 } from '../lib';
+import uniteCommands from './uniteCommands';
+import createEditor from '../testing/createEditor';
+
+describe('uniteCommands', () => {
+	it('should be serializable and deserializable', () => {
+		const editor = createEditor();
+		const stroke = new StrokeComponent([ Path.fromString('m0,0 l10,10 h-2 z').toRenderable({ 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

@@ -0,0 +1,121 @@
+import Editor from '../Editor';
+import { EditorLocalization } from '../localization';
+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) {
+			for (const command of this.commands) {
+				command.apply(editor);
+			}
+		} else {
+			editor.asyncApplyCommands(this.commands, this.applyChunkSize);
+		}
+	}
+
+	public unapply(editor: Editor) {
+		if (this.applyChunkSize === undefined) {
+			for (const command of this.commands) {
+				command.unapply(editor);
+			}
+		} else {
+			editor.asyncUnapplyCommands(this.commands, this.applyChunkSize);
+		}
+	}
+
+	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;
+	public constructor(private commands: SerializableCommand[], private applyChunkSize: number|undefined) {
+		super('union');
+		this.nonserializableCommand = new NonSerializableUnion(commands, applyChunkSize);
+	}
+
+	protected serializeToJSON() {
+		return {
+			applyChunkSize: this.applyChunkSize,
+			data: this.commands.map(command => command.serialize()),
+		};
+	}
+
+	public apply(editor: Editor) {
+		this.nonserializableCommand.apply(editor);
+	}
+
+	public unapply(editor: Editor) {
+		this.nonserializableCommand.unapply(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.ts

@@ -89,6 +89,52 @@ export default abstract class AbstractComponent {
 		return new AbstractComponent.TransformElementCommand(affineTransfm, this);
 	}
 
+	private static transformElementCommandId = 'transform-element';
+
+	private static UnresolvedTransformElementCommand = class extends SerializableCommand {
+		private command: SerializableCommand|null = null;
+
+		public constructor(
+			private affineTransfm: Mat33,
+			private componentID: string,
+		) {
+			super(AbstractComponent.transformElementCommandId);
+		}
+
+		private resolveCommand(editor: Editor) {
+			if (this.command) {
+				return;
+			}
+
+			const component = editor.image.lookupElement(this.componentID);
+			if (!component) {
+				throw new Error(`Unable to resolve component with ID ${this.componentID}`);
+			}
+			this.command = new AbstractComponent.TransformElementCommand(this.affineTransfm, component);
+		}
+
+		public apply(editor: Editor) {
+			this.resolveCommand(editor);
+			this.command!.apply(editor);
+		}
+
+		public unapply(editor: Editor) {
+			this.resolveCommand(editor);
+			this.command!.unapply(editor);
+		}
+
+		public description(_editor: Editor, localizationTable: EditorLocalization) {
+			return localizationTable.transformedElements(1);
+		}
+
+		protected serializeToJSON() {
+			return {
+				id: this.componentID,
+				transfm: this.affineTransfm.toArray(),
+			};
+		}
+	};
+
 	private static TransformElementCommand = class extends SerializableCommand {
 		private origZIndex: number;
 
@@ -96,7 +142,7 @@ export default abstract class AbstractComponent {
 			private affineTransfm: Mat33,
 			private component: AbstractComponent,
 		) {
-			super('transform-element');
+			super(AbstractComponent.transformElementCommandId);
 			this.origZIndex = component.zIndex;
 		}
 
@@ -134,21 +180,21 @@ export default abstract class AbstractComponent {
 		}
 
 		static {
-			SerializableCommand.register('transform-element', (json: any, editor: Editor) => {
+			SerializableCommand.register(AbstractComponent.transformElementCommandId, (json: any, editor: Editor) => {
 				const elem = editor.image.lookupElement(json.id);
 
-				if (!elem) {
-					throw new Error(`Unable to retrieve non-existent element, ${elem}`);
-				}
-
-				const transform = json.transfm as [
+				const transform = new Mat33(...(json.transfm as [
 					number, number, number,
 					number, number, number,
 					number, number, number,
-				];
+				]));
+
+				if (!elem) {
+					return new AbstractComponent.UnresolvedTransformElementCommand(transform, json.id);
+				}
 
 				return new AbstractComponent.TransformElementCommand(
-					new Mat33(...transform),
+					transform,
 					elem,
 				);
 			});