js-draw 0.14.0 → 0.15.0

package/src/SVGLoader.ts

@@ -3,7 +3,7 @@ import AbstractComponent from './components/AbstractComponent';
 import ImageComponent from './components/ImageComponent';
 import Stroke from './components/Stroke';
 import SVGGlobalAttributesObject from './components/SVGGlobalAttributesObject';
-import TextComponent, { TextStyle } from './components/TextComponent';
+import TextComponent from './components/TextComponent';
 import UnknownSVGObject from './components/UnknownSVGObject';
 import Mat33 from './math/Mat33';
 import Path from './math/Path';
@@ -11,6 +11,7 @@ import Rect2 from './math/Rect2';
 import { Vec2 } from './math/Vec2';
 import { RenderablePathSpec } from './rendering/renderers/AbstractRenderer';
 import RenderingStyle from './rendering/RenderingStyle';
+import TextStyle from './rendering/TextRenderingStyle';
 import { ComponentAddedListener, ImageLoader, OnDetermineExportRectListener, OnProgressListener } from './types';
 
 type OnFinishListener = ()=> void;

package/src/commands/UnresolvedCommand.ts

@@ -0,0 +1,37 @@
+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/uniteCommands.ts

@@ -32,11 +32,14 @@ class NonSerializableUnion extends Command {
 	}
 
 	public unapply(editor: Editor) {
+		const commands = [ ...this.commands ];
+		commands.reverse();
+
 		if (this.applyChunkSize === undefined) {
-			const results = this.commands.map(cmd => cmd.unapply(editor));
+			const results = commands.map(cmd => cmd.unapply(editor));
 			return NonSerializableUnion.waitForAll(results);
 		} else {
-			return editor.asyncUnapplyCommands(this.commands, this.applyChunkSize);
+			return editor.asyncUnapplyCommands(commands, this.applyChunkSize, false);
 		}
 	}
 

package/src/components/AbstractComponent.ts

@@ -7,6 +7,7 @@ import Rect2 from '../math/Rect2';
 import { EditorLocalization } from '../localization';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import { ImageComponentLocalization } from './localization';
+import UnresolvedSerializableCommand from '../commands/UnresolvedCommand';
 
 export type LoadSaveData = (string[]|Record<symbol, string|number>);
 export type LoadSaveDataTable = Record<string, Array<LoadSaveData>>;
@@ -132,12 +133,12 @@ export default abstract class AbstractComponent {
 	// Returns a command that, when applied, transforms this by [affineTransfm] and
 	// updates the editor.
 	public transformBy(affineTransfm: Mat33): SerializableCommand {
-		return new AbstractComponent.TransformElementCommand(affineTransfm, this);
+		return new AbstractComponent.TransformElementCommand(affineTransfm, this.getId(), this);
 	}
 
 	// Returns a command that updates this component's z-index.
 	public setZIndex(newZIndex: number): SerializableCommand {
-		return new AbstractComponent.TransformElementCommand(Mat33.identity, this, newZIndex);
+		return new AbstractComponent.TransformElementCommand(Mat33.identity, this.getId(), this, newZIndex);
 	}
 
 	// @returns true iff this component can be selected (e.g. by the selection tool.)
@@ -154,69 +155,42 @@ export default abstract class AbstractComponent {
 
 	private static transformElementCommandId = 'transform-element';
 
-	private static UnresolvedTransformElementCommand = class extends SerializableCommand {
-		private command: SerializableCommand|null = null;
+	private static TransformElementCommand = class extends UnresolvedSerializableCommand {
+		private origZIndex: number|null = null;
+		private targetZIndex: number;
 
+		// Construct a new TransformElementCommand. `component`, while optional, should
+		// be provided if available. If not provided, it will be fetched from the editor's
+		// document when the command is applied.
 		public constructor(
 			private affineTransfm: Mat33,
-			private componentID: string,
-			private targetZIndex?: number,
+			componentID: string,
+			component?: AbstractComponent,
+			targetZIndex?: number,
 		) {
-			super(AbstractComponent.transformElementCommandId);
-		}
-
-		private resolveCommand(editor: Editor) {
-			if (this.command) {
-				return;
-			}
+			super(AbstractComponent.transformElementCommandId, componentID, component);
+			this.targetZIndex = targetZIndex ?? AbstractComponent.zIndexCounter++;
 
-			const component = editor.image.lookupElement(this.componentID);
-			if (!component) {
-				throw new Error(`Unable to resolve component with ID ${this.componentID}`);
+			// Ensure that we keep drawing on top even after changing the z-index.
+			if (this.targetZIndex >= AbstractComponent.zIndexCounter) {
+				AbstractComponent.zIndexCounter = this.targetZIndex + 1;
 			}
-			this.command = new AbstractComponent.TransformElementCommand(
-				this.affineTransfm, component, this.targetZIndex
-			);
-		}
-
-		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(),
-				targetZIndex: this.targetZIndex,
-			};
 		}
-	};
 
-	private static TransformElementCommand = class extends SerializableCommand {
-		private origZIndex: number;
-		private targetZIndex: number;
+		protected resolveComponent(image: EditorImage): void {
+			if (this.component) {
+				return;
+			}
 
-		public constructor(
-			private affineTransfm: Mat33,
-			private component: AbstractComponent,
-			targetZIndex?: number,
-		) {
-			super(AbstractComponent.transformElementCommandId);
-			this.origZIndex = component.zIndex;
-			this.targetZIndex = targetZIndex ?? AbstractComponent.zIndexCounter++;
+			super.resolveComponent(image);
+			this.origZIndex = this.component!.getZIndex();
 		}
 
 		private updateTransform(editor: Editor, newTransfm: Mat33) {
+			if (!this.component) {
+				throw new Error('this.component is undefined or null!');
+			}
+
 			// Any parent should have only one direct child.
 			const parent = editor.image.findParent(this.component);
 			let hadParent = false;
@@ -235,13 +209,17 @@ export default abstract class AbstractComponent {
 		}
 
 		public apply(editor: Editor) {
-			this.component.zIndex = this.targetZIndex;
+			this.resolveComponent(editor.image);
+
+			this.component!.zIndex = this.targetZIndex;
 			this.updateTransform(editor, this.affineTransfm);
 			editor.queueRerender();
 		}
 
 		public unapply(editor: Editor) {
-			this.component.zIndex = this.origZIndex;
+			this.resolveComponent(editor.image);
+
+			this.component!.zIndex = this.origZIndex!;
 			this.updateTransform(editor, this.affineTransfm.inverse());
 			editor.queueRerender();
 		}
@@ -252,16 +230,13 @@ export default abstract class AbstractComponent {
 
 		static {
 			SerializableCommand.register(AbstractComponent.transformElementCommandId, (json: any, editor: Editor) => {
-				const elem = editor.image.lookupElement(json.id);
+				const elem = editor.image.lookupElement(json.id) ?? undefined;
 				const transform = new Mat33(...(json.transfm as Mat33Array));
 				const targetZIndex = json.targetZIndex;
 
-				if (!elem) {
-					return new AbstractComponent.UnresolvedTransformElementCommand(transform, json.id, targetZIndex);
-				}
-
 				return new AbstractComponent.TransformElementCommand(
 					transform,
+					json.id,
 					elem,
 					targetZIndex,
 				);
@@ -270,7 +245,7 @@ export default abstract class AbstractComponent {
 
 		protected serializeToJSON() {
 			return {
-				id: this.component.getId(),
+				id: this.componentID,
 				transfm: this.affineTransfm.toArray(),
 				targetZIndex: this.targetZIndex,
 			};

package/src/components/RestylableComponent.ts

@@ -0,0 +1,142 @@
+import Color4 from '../Color4';
+import SerializableCommand from '../commands/SerializableCommand';
+import UnresolvedSerializableCommand from '../commands/UnresolvedCommand';
+import Editor from '../Editor';
+import { EditorLocalization } from '../localization';
+import TextStyle, { textStyleFromJSON, textStyleToJSON } from '../rendering/TextRenderingStyle';
+import AbstractComponent from './AbstractComponent';
+
+export interface ComponentStyle {
+	color?: Color4;
+	textStyle?: TextStyle;
+}
+
+const serializeComponentStyle = (style: ComponentStyle) => {
+	const result: Record<string, any> = { };
+	
+	if (style.color) {
+		result.color = style.color.toHexString();
+	}
+
+	if (style.textStyle) {
+		result.textStyle = textStyleToJSON(style.textStyle);
+	}
+
+	return result;
+};
+
+const deserializeComponentStyle = (json: Record<string, any>|any): ComponentStyle => {
+	const color = json.color ? Color4.fromHex(json.color) : undefined;
+	const textStyle = json.textStyle ? textStyleFromJSON(json.textStyle) : undefined;
+
+	return {
+		color,
+		textStyle,
+	};
+};
+
+// For internal use by Components implementing `updateStyle`:
+export const createRestyleComponentCommand = (
+	initialStyle: ComponentStyle,
+	newStyle: ComponentStyle,
+	component: RestyleableComponent,
+): SerializableCommand => {
+	return new DefaultRestyleComponentCommand(
+		initialStyle, newStyle, component.getId(), component
+	);
+};
+
+
+// Returns true if `component` is a `RestylableComponent`.
+export const isRestylableComponent = (component: AbstractComponent): component is RestyleableComponent => {
+	const hasMethods = 'getStyle' in component && 'updateStyle' in component && 'forceStyle' in component;
+	if (!hasMethods) {
+		return false;
+	}
+
+	if (!('isRestylableComponent' in component) || !(component as any)['isRestylableComponent']) {
+		return false;
+	}
+
+	return true;
+};
+
+export interface RestyleableComponent extends AbstractComponent {
+	getStyle(): ComponentStyle;
+
+	updateStyle(style: ComponentStyle): SerializableCommand;
+
+	/**
+	 * Set the style of this component in a way that can't be undone/redone
+	 * (does not create a command).
+	 * 
+	 * Prefer `updateStyle(style).apply(editor)`.
+	 */
+	forceStyle(style: ComponentStyle, editor: Editor|null): void;
+
+	isRestylableComponent: true;
+}
+
+export default RestyleableComponent;
+
+
+const defaultRestyleComponentCommandId = 'default-restyle-element';
+
+class DefaultRestyleComponentCommand extends UnresolvedSerializableCommand {
+	public constructor(
+		private originalStyle: ComponentStyle,
+		private newStyle: ComponentStyle,
+		componentID: string,
+		component?: RestyleableComponent,
+	) {
+		super(defaultRestyleComponentCommandId, componentID, component);
+	}
+
+	private getComponent(editor: Editor): RestyleableComponent {
+		this.resolveComponent(editor.image);
+
+		const component = this.component as any;
+		if (!component || !component['forceStyle'] || !component['updateStyle']) {
+			throw new Error('this.component is missing forceStyle and/or updateStyle methods!');
+		}
+
+		return component;
+	}
+
+	public apply(editor: Editor) {
+		this.getComponent(editor).forceStyle(this.newStyle, editor);
+	}
+
+	public unapply(editor: Editor) {
+		this.getComponent(editor).forceStyle(this.originalStyle, editor);
+	}
+
+	public description(_editor: Editor, localizationTable: EditorLocalization): string {
+		return localizationTable.restyledElements;
+	}
+
+	protected serializeToJSON() {
+		return {
+			id: this.componentID,
+			originalStyle: serializeComponentStyle(this.originalStyle),
+			newStyle: serializeComponentStyle(this.newStyle),
+		};
+	}
+
+	static {
+		SerializableCommand.register(defaultRestyleComponentCommandId, (json: any, _editor: Editor) => {
+			const origStyle = deserializeComponentStyle(json.originalStyle);
+			const newStyle = deserializeComponentStyle(json.newStyle);
+			const id = json.id;
+			if (typeof json.id !== 'string') {
+				throw new Error(`json.id is of type ${(typeof json.id)}, not string.`);
+			}
+
+			return new DefaultRestyleComponentCommand(
+				origStyle,
+				newStyle,
+				id,
+			);
+		});
+	}
+}

package/src/components/Stroke.test.ts

@@ -4,6 +4,9 @@ import { Vec2 } from '../math/Vec2';
 import Stroke from './Stroke';
 import createEditor from '../testing/createEditor';
 import Mat33 from '../math/Mat33';
+import EditorImage from '../EditorImage';
+import AbstractComponent from './AbstractComponent';
+import { DummyRenderer, SerializableCommand } from '../lib';
 
 describe('Stroke', () => {
 	it('empty stroke should have an empty bounding box', () => {
@@ -68,4 +71,69 @@ describe('Stroke', () => {
 		path['cachedStringVersion'] = null;
 		expect(deserialized.getPath().toString()).toBe('M0,0L10,10L0,0');
 	});
+
+	it('strokes should load from just-serialized JSON data', () => {
+		const deserialized = Stroke.deserializeFromJSON(`[
+			{
+				"style": { "fill": "#f00" },
+				"path": "m0,0 l10,10z"
+			}
+		]`);
+
+		const redeserialized = AbstractComponent.deserialize(deserialized.serialize()) as Stroke;
+		expect(redeserialized.getPath().toString()).toBe(deserialized.getPath().toString());
+		expect(redeserialized.getStyle().color).objEq(deserialized.getStyle().color!);
+	});
+
+	it('strokes should be restylable', () => {
+		const stroke = Stroke.deserializeFromJSON(`[
+			{
+				"style": { "fill": "#f00" },
+				"path": "m0,0 l10,10z"
+			},
+			{
+				"style": { "fill": "#f00" },
+				"path": "m10,10 l100,10z"
+			}
+		]`);
+
+		expect(stroke.getStyle().color).objEq(Color4.fromHex('#f00'));
+
+		// Should restyle even if no editor
+		stroke.forceStyle({
+			color: Color4.fromHex('#0f0')
+		}, null);
+
+		expect(stroke.getStyle().color).objEq(Color4.fromHex('#0f0'));
+
+		const editor = createEditor();
+		EditorImage.addElement(stroke).apply(editor);
+
+		// Re-rendering should render with the new color
+		const renderer = new DummyRenderer(editor.viewport);
+		stroke.render(renderer);
+		expect(renderer.lastFillStyle!.fill).toBe(stroke.getStyle().color);
+
+		// Calling updateStyle should have similar results.
+		const updateStyleCommand = stroke.updateStyle({
+			color: Color4.fromHex('#00f'),
+		});
+		expect(stroke.getStyle().color).objEq(Color4.fromHex('#0f0'));
+
+		updateStyleCommand.apply(editor);
+		expect(editor.isRerenderQueued()).toBe(true);
+
+		// Should do and undo correclty
+		expect(stroke.getStyle().color).objEq(Color4.fromHex('#00f'));
+		updateStyleCommand.unapply(editor);
+		expect(stroke.getStyle().color).objEq(Color4.fromHex('#0f0'));
+
+		// As should a deserialized updateStyle.
+		const deserializedUpdateStyle = SerializableCommand.deserialize(updateStyleCommand.serialize(), editor);
+		deserializedUpdateStyle.apply(editor);
+
+		expect(stroke.getStyle().color).objEq(Color4.fromHex('#00f'));
+		updateStyleCommand.unapply(editor);
+		expect(stroke.getStyle().color).objEq(Color4.fromHex('#0f0'));
+	});
 });

package/src/components/Stroke.ts

@@ -1,24 +1,31 @@
+import SerializableCommand from '../commands/SerializableCommand';
 import LineSegment2 from '../math/LineSegment2';
 import Mat33 from '../math/Mat33';
 import Path from '../math/Path';
 import Rect2 from '../math/Rect2';
+import Editor from '../Editor';
 import AbstractRenderer, { RenderablePathSpec } from '../rendering/renderers/AbstractRenderer';
 import RenderingStyle, { styleFromJSON, styleToJSON } from '../rendering/RenderingStyle';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
+import RestyleableComponent, { ComponentStyle, createRestyleComponentCommand } from './RestylableComponent';
 
 interface StrokePart extends RenderablePathSpec {
 	path: Path;
 }
 
-export default class Stroke extends AbstractComponent {
+export default class Stroke extends AbstractComponent implements RestyleableComponent {
 	private parts: StrokePart[];
 	protected contentBBox: Rect2;
+	
+	// eslint-disable-next-line @typescript-eslint/prefer-as-const
+	readonly isRestylableComponent: true = true;
 
 	// See `getProportionalRenderingTime`
 	private approximateRenderingTime: number;
 
-	// Creates a `Stroke` from the given `parts`.
+	// Creates a `Stroke` from the given `parts`. All parts should have the
+	// same color.
 	public constructor(parts: RenderablePathSpec[]) {
 		super('stroke');
 
@@ -49,6 +56,65 @@ export default class Stroke extends AbstractComponent {
 		this.contentBBox ??= Rect2.empty;
 	}
 
+	public getStyle(): ComponentStyle {
+		if (this.parts.length === 0) {
+			return { };
+		}
+		const firstPart = this.parts[0];
+
+		if (
+			firstPart.style.stroke === undefined
+			|| firstPart.style.stroke.width === 0
+		) {
+			return {
+				color: firstPart.style.fill,
+			};
+		}
+
+		return {
+			color: firstPart.style.stroke.color,
+		};
+	}
+
+	public updateStyle(style: ComponentStyle): SerializableCommand {
+		return createRestyleComponentCommand(this.getStyle(), style, this);
+	}
+
+	public forceStyle(style: ComponentStyle, editor: Editor|null): void {
+		if (!style.color) {
+			return;
+		}
+
+		this.parts = this.parts.map((part) => {
+			const newStyle = {
+				...part.style,
+				stroke: part.style.stroke ? {
+					...part.style.stroke,
+				} : undefined,
+			};
+
+			// Change the stroke color if a stroked shape. Else,
+			// change the fill.
+			if (newStyle.stroke && newStyle.stroke.width > 0) {
+				newStyle.stroke.color = style.color!;
+			} else {
+				newStyle.fill = style.color!;
+			}
+
+			return {
+				path: part.path,
+				startPoint: part.startPoint,
+				commands: part.commands,
+				style: newStyle,
+			};
+		});
+
+		if (editor) {
+			editor.image.queueRerenderOf(this);
+			editor.queueRerender();
+		}
+	}
+
 	public intersects(line: LineSegment2): boolean {
 		for (const part of this.parts) {
 			if (part.path.intersection(line).length > 0) {

package/src/components/TextComponent.test.ts

@@ -1,10 +1,13 @@
 import Color4 from '../Color4';
+import EditorImage from '../EditorImage';
 import Mat33 from '../math/Mat33';
+import TextStyle from '../rendering/TextRenderingStyle';
+import createEditor from '../testing/createEditor';
 import AbstractComponent from './AbstractComponent';
-import TextComponent, { TextStyle } from './TextComponent';
+import TextComponent from './TextComponent';
 
 
-describe('Text', () => {
+describe('TextComponent', () => {
 	it('should be serializable', () => {
 		const style: TextStyle = {
 			size: 12,
@@ -17,4 +20,55 @@ describe('Text', () => {
 		expect(deserialized.getBBox()).objEq(text.getBBox());
 		expect(deserialized['getText']()).toContain('Foo');
 	});
+
+	it('should be deserializable', () => {
+		const textComponent = TextComponent.deserializeFromString(`{
+			"textObjects": [ { "text": "Foo" } ],
+			"transform": [ 1, 0, 0, 0, 1, 0, 0, 0, 1 ],
+			"style": {
+				"fontFamily": "sans",
+				"size": 10,
+				"renderingStyle": { "fill": "#000" }
+			}
+		}`);
+
+		expect(textComponent.getText()).toBe('Foo');
+		expect(textComponent.getTransform()).objEq(Mat33.identity);
+		expect(textComponent.getStyle().color!).objEq(Color4.black);
+		expect(textComponent.getTextStyle().fontFamily!).toBe('sans');
+	});
+
+	it('should be restylable', () => {
+		const style: TextStyle = {
+			size: 10,
+			fontFamily: 'sans',
+			renderingStyle: { fill: Color4.red },
+		};
+		const text = new TextComponent([ 'Foo' ], Mat33.identity, style);
+
+		expect(text.getStyle().color).objEq(Color4.red);
+		text.forceStyle({
+			color: Color4.green,
+		}, null);
+		expect(text.getStyle().color).objEq(Color4.green);
+		expect(text.getTextStyle().renderingStyle.fill).objEq(Color4.green);
+
+		const restyleCommand = text.updateStyle({
+			color: Color4.purple,
+		});
+
+		// Should queue a re-render after restyling.
+		const editor = createEditor();
+		EditorImage.addElement(text).apply(editor);
+
+		editor.rerender();
+		expect(editor.isRerenderQueued()).toBe(false);
+		editor.dispatch(restyleCommand);
+		expect(editor.isRerenderQueued()).toBe(true);
+
+		// Undoing should reset to the correct color.
+		expect(text.getStyle().color).objEq(Color4.purple);
+		editor.history.undo();
+		expect(text.getStyle().color).objEq(Color4.green);
+	});
 });