js-draw 0.13.1 → 0.15.0

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);
+	});
 });

package/src/components/TextComponent.ts

@@ -1,24 +1,22 @@
+import SerializableCommand from '../commands/SerializableCommand';
 import LineSegment2 from '../math/LineSegment2';
 import Mat33, { Mat33Array } from '../math/Mat33';
 import Rect2 from '../math/Rect2';
+import Editor from '../Editor';
 import { Vec2 } from '../math/Vec2';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
-import RenderingStyle, { styleFromJSON, styleToJSON } from '../rendering/RenderingStyle';
+import { TextStyle, textStyleFromJSON, textStyleToJSON } from '../rendering/TextRenderingStyle';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
-
-export interface TextStyle {
-	size: number;
-	fontFamily: string;
-	fontWeight?: string;
-	fontVariant?: string;
-	renderingStyle: RenderingStyle;
-}
+import RestyleableComponent, { ComponentStyle, createRestyleComponentCommand } from './RestylableComponent';
 
 const componentTypeId = 'text';
-export default class TextComponent extends AbstractComponent {
+export default class TextComponent extends AbstractComponent implements RestyleableComponent {
 	protected contentBBox: Rect2;
 
+	// eslint-disable-next-line @typescript-eslint/prefer-as-const
+	readonly isRestylableComponent: true = true;
+
 	public constructor(
 		protected readonly textObjects: Array<string|TextComponent>,
 		private transform: Mat33,
@@ -152,14 +150,57 @@ export default class TextComponent extends AbstractComponent {
 		return false;
 	}
 
-	public getBaselinePos() {
-		return this.transform.transformVec2(Vec2.zero);
+	public getStyle(): ComponentStyle {
+		return {
+			color: this.style.renderingStyle.fill,
+
+			// Make a copy
+			textStyle: {
+				...this.style,
+				renderingStyle: {
+					...this.style.renderingStyle,
+				},
+			},
+		};
+	}
+
+	public updateStyle(style: ComponentStyle): SerializableCommand {
+		return createRestyleComponentCommand(this.getStyle(), style, this);
+	}
+
+	public forceStyle(style: ComponentStyle, editor: Editor|null): void {
+		if (style.textStyle) {
+			this.style = style.textStyle;
+		} else if (style.color) {
+			this.style.renderingStyle = {
+				...this.style.renderingStyle,
+				fill: style.color,
+			};
+		} else {
+			return;
+		}
+
+		for (const child of this.textObjects) {
+			if (child instanceof TextComponent) {
+				child.forceStyle(style, editor);
+			}
+		}
+
+		if (editor) {
+			editor.image.queueRerenderOf(this);
+			editor.queueRerender();
+		}
 	}
 
+	// See this.getStyle
 	public getTextStyle() {
 		return this.style;
 	}
 
+	public getBaselinePos() {
+		return this.transform.transformVec2(Vec2.zero);
+	}
+
 	public getTransform(): Mat33 {
 		return this.transform;
 	}
@@ -191,13 +232,11 @@ export default class TextComponent extends AbstractComponent {
 		return localizationTable.text(this.getText());
 	}
 
+	// Do not rely on the output of `serializeToJSON` taking any particular format.
 	protected serializeToJSON(): Record<string, any> {
-		const serializableStyle = {
-			...this.style,
-			renderingStyle: styleToJSON(this.style.renderingStyle),
-		};
+		const serializableStyle = textStyleToJSON(this.style);
 
-		const textObjects = this.textObjects.map(text => {
+		const serializedTextObjects = this.textObjects.map(text => {
 			if (typeof text === 'string') {
 				return {
 					text,
@@ -210,20 +249,19 @@ export default class TextComponent extends AbstractComponent {
 		});
 
 		return {
-			textObjects,
+			textObjects: serializedTextObjects,
 			transform: this.transform.toArray(),
 			style: serializableStyle,
 		};
 	}
 
+	// @internal
 	public static deserializeFromString(json: any): TextComponent {
-		const style: TextStyle = {
-			renderingStyle: styleFromJSON(json.style.renderingStyle),
-			size: json.style.size,
-			fontWeight: json.style.fontWeight,
-			fontVariant: json.style.fontVariant,
-			fontFamily: json.style.fontFamily,
-		};
+		if (typeof json === 'string') {
+			json = JSON.parse(json);
+		}
+
+		const style = textStyleFromJSON(json.style);
 
 		const textObjects: Array<string|TextComponent> = json.textObjects.map((data: any) => {
 			if ((data.text ?? null) !== null) {

package/src/components/lib.ts

@@ -8,12 +8,15 @@ export { default as AbstractComponent } from './AbstractComponent';
 import Stroke from './Stroke';
 import TextComponent from './TextComponent';
 import ImageComponent from './ImageComponent';
+import RestyleableComponent, { createRestyleComponentCommand } from './RestylableComponent';
 
 export {
 	Stroke,
 	TextComponent as Text,
+	RestyleableComponent,
+	createRestyleComponentCommand,
 
-	TextComponent as TextComponent,
+	TextComponent,
 	Stroke as StrokeComponent,
 	ImageComponent,
 };

package/src/components/localization.ts

@@ -4,12 +4,15 @@ export interface ImageComponentLocalization {
 	imageNode: (description: string)=> string;
 	stroke: string;
     svgObject: string;
+
+	restyledElements: string;
 }
 
 export const defaultComponentLocalization: ImageComponentLocalization = {
 	unlabeledImageNode: 'Unlabeled image node',
 	stroke: 'Stroke',
 	svgObject: 'SVG Object',
+	restyledElements: 'Restyled elements',
 	text: (text) => `Text object: ${text}`,
 	imageNode: (description: string) => `Image: ${description}`,
 };

package/src/math/Path.toString.test.ts

@@ -64,4 +64,14 @@ describe('Path.toString', () => {
 
 		expect(path.toString(true)).toBe(path1.toString(true));
 	});
+
+	it('should remove no-op move-tos', () => {
+		const path1 = Path.fromString('M50,75m0,0q0,12.5 0,50q0,6.3 25,0');
+		path1['cachedStringVersion'] = null;
+		const path2 = Path.fromString('M150,175M150,175q0,12.5 0,50q0,6.3 25,0');
+		path2['cachedStringVersion'] = null;
+
+		expect(path1.toString()).toBe('M50,75q0,12.5 0,50q0,6.3 25,0');
+		expect(path2.toString()).toBe('M150,175q0,12.5 0,50q0,6.3 25,0');
+	});
 });

package/src/math/Path.ts

@@ -493,7 +493,7 @@ export default class Path {
 			}
 
 			// Don't add no-ops.
-			if (commandString === 'l0,0') {
+			if (commandString === 'l0,0' || commandString === 'm0,0') {
 				return;
 			}
 			result.push(commandString);
@@ -503,9 +503,17 @@ export default class Path {
 			}
 		};
 
-		addCommand('M', startPoint);
+		// Don't add two moveTos in a row (this can happen if
+		// the start point corresponds to a moveTo _and_ the first command is
+		// also a moveTo)
+		if (parts[0]?.kind !== PathCommandType.MoveTo) {
+			addCommand('M', startPoint);
+		}
+
 		let exhaustivenessCheck: never;
-		for (const part of parts) {
+		for (let i = 0; i < parts.length; i++) {
+			const part = parts[i];
+
 			switch (part.kind) {
 			case PathCommandType.MoveTo:
 				addCommand('M', part.point);

package/src/math/Rect2.test.ts

@@ -77,13 +77,23 @@ describe('Rect2', () => {
 		expect(new Rect2(-2, -2, 4, 4).containsRect(new Rect2(-1, 0, 10, 1))).toBe(false);
 	});
 
-	it('a rectangle should contain itself', () => {
-		const rect = new Rect2(1 / 3, 1 / 4, 1 / 5, 1 / 6);
-		expect(rect.containsRect(rect)).toBe(true);
-	});
+	describe('containsRect', () => {
+		it('a rectangle should contain itself', () => {
+			const rect = new Rect2(1 / 3, 1 / 4, 1 / 5, 1 / 6);
+			expect(rect.containsRect(rect)).toBe(true);
+		});
 
-	it('empty rect should not contain a larger rect', () => {
-		expect(Rect2.empty.containsRect(new Rect2(-1, -1, 3, 3))).toBe(false);
+		it('empty rect should not contain a larger rect', () => {
+			expect(Rect2.empty.containsRect(new Rect2(-1, -1, 3, 3))).toBe(false);
+		});
+
+		it('should correctly contain rectangles', () => {
+			const testRect = new Rect2(4, -10, 50, 100);
+			expect(testRect.containsRect(new Rect2(4.1, 0, 1, 1))).toBe(true);
+			expect(testRect.containsRect(new Rect2(48, 0, 1, 1))).toBe(true);
+			expect(testRect.containsRect(new Rect2(48, -9, 1, 1))).toBe(true);
+			expect(testRect.containsRect(new Rect2(48, -9, 1, 91))).toBe(true);
+		});
 	});
 
 	it('intersecting rectangles should be identified as intersecting', () => {
@@ -92,6 +102,8 @@ describe('Rect2', () => {
 		expect(new Rect2(-1, -1, 2, 2).intersects(new Rect2(0, 0, 10, 10))).toBe(true);
 		expect(new Rect2(-1, -1, 2, 2).intersects(new Rect2(3, 3, 10, 10))).toBe(false);
 		expect(new Rect2(-1, -1, 2, 2).intersects(new Rect2(0.2, 0.1, 0, 0))).toBe(true);
+		expect(new Rect2(-100, -1, 200, 2).intersects(new Rect2(-5, -5, 10, 30))).toBe(true);
+		expect(new Rect2(-100, -1, 200, 2).intersects(new Rect2(-5, 50, 10, 30))).toBe(false);
 	});
 
 	it('intersecting rectangles should have their intersections correctly computed', () => {

package/src/rendering/TextRenderingStyle.ts

@@ -0,0 +1,38 @@
+import RenderingStyle, { styleFromJSON, styleToJSON } from './RenderingStyle';
+
+export interface TextStyle {
+	size: number;
+	fontFamily: string;
+	fontWeight?: string;
+	fontVariant?: string;
+	renderingStyle: RenderingStyle;
+}
+
+export default TextStyle;
+
+export const textStyleFromJSON = (json: any) => {
+	if (typeof json === 'string') {
+		json = JSON.parse(json);
+	}
+
+	if (typeof(json.fontFamily) !== 'string') {
+		throw new Error('Serialized textStyle missing string fontFamily attribute!');
+	}
+
+	const style: TextStyle = {
+		renderingStyle: styleFromJSON(json.renderingStyle),
+		size: json.size,
+		fontWeight: json.fontWeight,
+		fontVariant: json.fontVariant,
+		fontFamily: json.fontFamily,
+	};
+
+	return style;
+};
+
+export const textStyleToJSON = (style: TextStyle) => {
+	return {
+		...style,
+		renderingStyle: styleToJSON(style.renderingStyle),
+	};
+};