js-draw 0.18.2 → 0.20.0

package/src/components/Stroke.ts

@@ -1,245 +0,0 @@
-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 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`. All parts should have the
-	// same color.
-	public constructor(parts: RenderablePathSpec[]) {
-		super('stroke');
-
-		this.approximateRenderingTime = 0;
-		this.parts = [];
-
-		for (const section of parts) {
-			const path = Path.fromRenderable(section);
-			const pathBBox = this.bboxForPart(path.bbox, section.style);
-
-			if (!this.contentBBox) {
-				this.contentBBox = pathBBox;
-			} else {
-				this.contentBBox = this.contentBBox.union(pathBBox);
-			}
-
-			this.parts.push({
-				path,
-
-				// To implement RenderablePathSpec
-				startPoint: path.startPoint,
-				style: section.style,
-				commands: path.parts,
-			});
-
-			this.approximateRenderingTime += path.parts.length;
-		}
-		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) {
-				return true;
-			}
-		}
-		return false;
-	}
-
-	public render(canvas: AbstractRenderer, visibleRect?: Rect2): void {
-		canvas.startObject(this.getBBox());
-		for (const part of this.parts) {
-			const bbox = this.bboxForPart(part.path.bbox, part.style);
-			if (visibleRect) {
-				if (!bbox.intersects(visibleRect)) {
-					continue;
-				}
-
-				const muchBiggerThanVisible = bbox.size.x > visibleRect.size.x * 2 || bbox.size.y > visibleRect.size.y * 2;
-				if (muchBiggerThanVisible && !part.path.roughlyIntersects(visibleRect, part.style.stroke?.width ?? 0)) {
-					continue;
-				}
-			}
-
-			canvas.drawPath(part);
-		}
-		canvas.endObject(this.getLoadSaveData());
-	}
-
-	public getProportionalRenderingTime(): number {
-		return this.approximateRenderingTime;
-	}
-
-	// Grows the bounding box for a given stroke part based on that part's style.
-	private bboxForPart(origBBox: Rect2, style: RenderingStyle) {
-		if (!style.stroke) {
-			return origBBox;
-		}
-
-		return origBBox.grownBy(style.stroke.width / 2);
-	}
-
-	protected applyTransformation(affineTransfm: Mat33): void {
-		this.contentBBox = Rect2.empty;
-		let isFirstPart = true;
-
-		// Update each part
-		this.parts = this.parts.map((part) => {
-			const newPath = part.path.transformedBy(affineTransfm);
-			const newStyle = {
-				...part.style,
-				stroke: part.style.stroke ? {
-					...part.style.stroke,
-				} : undefined,
-			};
-
-			// Approximate the scale factor.
-			if (newStyle.stroke) {
-				const scaleFactor = affineTransfm.getScaleFactor();
-				newStyle.stroke.width *= scaleFactor;
-			}
-
-			const newBBox = this.bboxForPart(newPath.bbox, newStyle);
-
-			if (isFirstPart) {
-				this.contentBBox = newBBox;
-				isFirstPart = false;
-			} else {
-				this.contentBBox = this.contentBBox.union(newBBox);
-			}
-
-			return {
-				path: newPath,
-				startPoint: newPath.startPoint,
-				commands: newPath.parts,
-				style: newStyle,
-			};
-		});
-	}
-
-	public getPath() {
-		let result: Path|null = null;
-		for (const part of this.parts) {
-			if (result) {
-				result = result.union(part.path);
-			} else {
-				result ??= part.path;
-			}
-		}
-		return result ?? Path.empty;
-	}
-
-	public description(localization: ImageComponentLocalization): string {
-		return localization.stroke;
-	}
-
-	protected createClone(): AbstractComponent {
-		return new Stroke(this.parts);
-	}
-
-	protected serializeToJSON() {
-		return this.parts.map(part => {
-			return {
-				style: styleToJSON(part.style),
-				path: part.path.serialize(),
-			};
-		});
-	}
-
-	/** @internal */
-	public static deserializeFromJSON(json: any): Stroke {
-		if (typeof json === 'string') {
-			json = JSON.parse(json);
-		}
-
-		if (typeof json !== 'object' || typeof json.length !== 'number') {
-			throw new Error(`${json} 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.deserializeFromJSON);

package/src/components/TextComponent.test.ts

@@ -1,99 +0,0 @@
-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 from './TextComponent';
-
-
-describe('TextComponent', () => {
-	it('should be serializable', () => {
-		const style: TextStyle = {
-			size: 12,
-			fontFamily: 'serif',
-			renderingStyle: { fill: Color4.black },
-		};
-		const text = new TextComponent([ 'Foo' ], Mat33.identity, style);
-		const serialized = text.serialize();
-		const deserialized = AbstractComponent.deserialize(serialized) as TextComponent;
-		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);
-	});
-
-	it('calling forceStyle on the duplicate of a TextComponent should preserve the original\'s style', () => {
-		const originalStyle: TextStyle = {
-			size: 11,
-			fontFamily: 'sans-serif',
-			renderingStyle: { fill: Color4.purple, },
-		};
-
-		const text1 = new TextComponent([ 'Test' ], Mat33.identity, originalStyle);
-		const text2 = text1.clone() as TextComponent;
-
-		text1.forceStyle({
-			color: Color4.red,
-		}, null);
-
-		expect(text2.getStyle().color).objEq(Color4.purple);
-		expect(text1.getStyle().color).objEq(Color4.red);
-
-		text2.forceStyle({
-			textStyle: originalStyle,
-		}, null);
-
-		expect(text1.getStyle().color).objEq(Color4.red);
-		expect(text2.getTextStyle()).toMatchObject(originalStyle);
-	});
-});

package/src/components/TextComponent.ts

@@ -1,315 +0,0 @@
-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 { cloneTextStyle, TextStyle, textStyleFromJSON, textStyleToJSON } from '../rendering/TextRenderingStyle';
-import AbstractComponent from './AbstractComponent';
-import { ImageComponentLocalization } from './localization';
-import RestyleableComponent, { ComponentStyle, createRestyleComponentCommand } from './RestylableComponent';
-
-const componentTypeId = 'text';
-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,
-		private style: TextStyle,
-	) {
-		super(componentTypeId);
-		this.recomputeBBox();
-
-		// If this has no direct children, choose a style representative of this' content
-		// (useful for estimating the style of the TextComponent).
-		const hasDirectContent = textObjects.some(obj => typeof obj === 'string');
-		if (!hasDirectContent && textObjects.length > 0) {
-			this.style = (textObjects[0] as TextComponent).getTextStyle();
-		}
-	}
-
-	public static applyTextStyles(ctx: CanvasRenderingContext2D, style: TextStyle) {
-		// Quote the font family if necessary.
-		const fontFamily = style.fontFamily.match(/\s/) ? style.fontFamily.replace(/["]/g, '\\"') : style.fontFamily;
-
-		ctx.font =	[
-			(style.size ?? 12) + 'px',
-			style.fontWeight ?? '',
-			`${fontFamily}`,
-			style.fontWeight
-		].join(' ');
-
-		ctx.textAlign = 'left';
-	}
-
-	private static textMeasuringCtx: CanvasRenderingContext2D|null = null;
-
-	// Roughly estimate the bounding box of `text`. Use if no CanvasRenderingContext2D is available.
-	private static estimateTextDimens(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);
-	}
-
-	// Returns the bounding box of `text`. This is approximate if no Canvas is available.
-	private static getTextDimens(text: string, style: TextStyle): Rect2 {
-		TextComponent.textMeasuringCtx ??= document.createElement('canvas').getContext('2d') ?? null;
-		if (!TextComponent.textMeasuringCtx) {
-			return this.estimateTextDimens(text, style);
-		}
-
-		const ctx = TextComponent.textMeasuringCtx;
-		TextComponent.applyTextStyles(ctx, style);
-
-		const measure = ctx.measureText(text);
-
-		// Text is drawn with (0,0) at the bottom left of the baseline.
-		const textY = -measure.actualBoundingBoxAscent;
-		const textHeight = measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent;
-		return new Rect2(0, textY, measure.width, textHeight);
-	}
-
-	private computeBBoxOfPart(part: string|TextComponent) {
-		if (typeof part === 'string') {
-			const textBBox = TextComponent.getTextDimens(part, this.style);
-			return textBBox.transformedBoundingBox(this.transform);
-		} else {
-			const bbox = part.contentBBox.transformedBoundingBox(this.transform);
-			return bbox;
-		}
-	}
-
-	private recomputeBBox() {
-		let bbox: Rect2|null = null;
-
-		for (const textObject of this.textObjects) {
-			const currentBBox = this.computeBBoxOfPart(textObject);
-			bbox ??= currentBBox;
-			bbox = bbox.union(currentBBox);
-		}
-
-		this.contentBBox = bbox ?? Rect2.empty;
-	}
-
-	private renderInternal(canvas: AbstractRenderer) {
-		const cursor = this.transform;
-
-		for (const textObject of this.textObjects) {
-			if (typeof textObject === 'string') {
-				canvas.drawText(textObject, cursor, this.style);
-			} else {
-				canvas.pushTransform(cursor);
-				textObject.renderInternal(canvas);
-				canvas.popTransform();
-			}
-		}
-	}
-
-	public render(canvas: AbstractRenderer, _visibleRect?: Rect2): void {
-		canvas.startObject(this.contentBBox);
-		this.renderInternal(canvas);
-		canvas.endObject(this.getLoadSaveData());
-	}
-
-	public getProportionalRenderingTime(): number {
-		return this.textObjects.length;
-	}
-
-	public intersects(lineSegment: LineSegment2): boolean {
-
-		// Convert canvas space to internal space.
-		const invTransform = this.transform.inverse();
-		const p1InThisSpace = invTransform.transformVec2(lineSegment.p1);
-		const p2InThisSpace = invTransform.transformVec2(lineSegment.p2);
-		lineSegment = new LineSegment2(p1InThisSpace, p2InThisSpace);
-
-		for (const subObject of this.textObjects) {
-			if (typeof subObject === 'string') {
-				const textBBox = TextComponent.getTextDimens(subObject, this.style);
-
-				// TODO: Use a better intersection check. Perhaps draw the text onto a CanvasElement and
-				// use pixel-testing to check for intersection with its contour.
-				if (textBBox.getEdges().some(edge => lineSegment.intersection(edge) !== null)) {
-					return true;
-				}
-			} else {
-				if (subObject.intersects(lineSegment)) {
-					return true;
-				}
-			}
-		}
-
-		return false;
-	}
-
-	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 = cloneTextStyle(style.textStyle);
-		} else if (style.color) {
-			this.style = {
-				...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 cloneTextStyle(this.style);
-	}
-
-	public getBaselinePos() {
-		return this.transform.transformVec2(Vec2.zero);
-	}
-
-	public getTransform(): Mat33 {
-		return this.transform;
-	}
-
-	protected applyTransformation(affineTransfm: Mat33): void {
-		this.transform = affineTransfm.rightMul(this.transform);
-		this.recomputeBBox();
-	}
-
-	protected createClone(): AbstractComponent {
-		const clonedTextObjects = this.textObjects.map(obj => {
-			if (typeof obj === 'string') {
-				return obj;
-			} else {
-				return obj.createClone() as TextComponent;
-			}
-		});
-		return new TextComponent(clonedTextObjects, this.transform, this.style);
-	}
-
-	public getText() {
-		const result: string[] = [];
-
-		for (const textObject of this.textObjects) {
-			if (typeof textObject === 'string') {
-				result.push(textObject);
-			} else {
-				result.push(textObject.getText());
-			}
-		}
-
-		return result.join('\n');
-	}
-
-	public description(localizationTable: ImageComponentLocalization): string {
-		return localizationTable.text(this.getText());
-	}
-
-	// Do not rely on the output of `serializeToJSON` taking any particular format.
-	protected serializeToJSON(): Record<string, any> {
-		const serializableStyle = textStyleToJSON(this.style);
-
-		const serializedTextObjects = this.textObjects.map(text => {
-			if (typeof text === 'string') {
-				return {
-					text,
-				};
-			} else {
-				return {
-					json: text.serializeToJSON(),
-				};
-			}
-		});
-
-		return {
-			textObjects: serializedTextObjects,
-			transform: this.transform.toArray(),
-			style: serializableStyle,
-		};
-	}
-
-	// @internal
-	public static deserializeFromString(json: any): TextComponent {
-		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) {
-				return data.text;
-			}
-
-			return TextComponent.deserializeFromString(data.json);
-		});
-
-		json.transform = json.transform.filter((elem: any) => typeof elem === 'number');
-		if (json.transform.length !== 9) {
-			throw new Error(`Unable to deserialize transform, ${json.transform}.`);
-		}
-
-		const transformData = json.transform as Mat33Array;
-		const transform = new Mat33(...transformData);
-
-		return new TextComponent(textObjects, transform, style);
-	}
-
-	public static fromLines(lines: string[], transform: Mat33, style: TextStyle): AbstractComponent {
-		let lastComponent: TextComponent|null = null;
-		const components: TextComponent[] = [];
-
-		for (const line of lines) {
-			let position = Vec2.zero;
-			if (lastComponent) {
-				const lineMargin = Math.floor(style.size);
-				position = lastComponent.getBBox().bottomLeft.plus(Vec2.unitY.times(lineMargin));
-			}
-
-			const component = new TextComponent([ line ], Mat33.translation(position), style);
-			components.push(component);
-			lastComponent = component;
-		}
-
-		return new TextComponent(components, transform, style);
-	}
-}
-
-AbstractComponent.registerComponent(componentTypeId, (data: string) => TextComponent.deserializeFromString(data));

package/src/components/UnknownSVGObject.test.ts

@@ -1,10 +0,0 @@
-import AbstractComponent from './AbstractComponent';
-import UnknownSVGObject from './UnknownSVGObject';
-
-describe('UnknownSVGObject', () => {
-	it('should not be deserializable', () => {
-		const obj = new UnknownSVGObject(document.createElementNS('http://www.w3.org/2000/svg', 'circle'));
-		const serialized = obj.serialize();
-		expect(() => AbstractComponent.deserialize(serialized)).toThrow(/.*cannot be deserialized.*/);
-	});
-});