js-draw 0.5.0 → 0.7.0

package/src/SVGLoader.test.ts

@@ -0,0 +1,57 @@
+import { Rect2, TextComponent, Vec2 } from './lib';
+import SVGLoader from './SVGLoader';
+import createEditor from './testing/createEditor';
+
+describe('SVGLoader', () => {
+	it('should correctly load x/y-positioned text nodes', async () => {
+		const editor = createEditor();
+		await editor.loadFrom(SVGLoader.fromString(`
+			<svg>
+				<text>Testing...</text>
+				<text y=100>Test 2...</text>
+				<text x=100>Test 3...</text>
+				<text x=100 y=100>Test 3...</text>
+		
+				<!-- Transform matrix: translate by (100,0) -->
+				<text style='transform: matrix(1,0,0,1,100,0);'>Test 3...</text>
+			</svg>
+		`, true));
+		const elems = editor.image
+			.getElementsIntersectingRegion(new Rect2(-1000, -1000, 10000, 10000))
+			.filter(elem => elem instanceof TextComponent);
+		expect(elems).toHaveLength(5);
+		const topLefts = elems.map(elem => elem.getBBox().topLeft);
+
+		// Top-left of Testing... should be (0, 0) ± 10 pixels (objects are aligned based on baseline)
+		expect(topLefts[0]).objEq(Vec2.of(0, 0), 10);
+
+		expect(topLefts[1].y - topLefts[0].y).toBe(100);
+		expect(topLefts[1].x - topLefts[0].x).toBe(0);
+
+		expect(topLefts[2].y - topLefts[0].y).toBe(0);
+		expect(topLefts[2].x - topLefts[0].x).toBe(100);
+
+		expect(topLefts[4].x - topLefts[0].x).toBe(100);
+		expect(topLefts[4].y - topLefts[0].y).toBe(0);
+	});
+
+	it('should correctly load tspans within texts nodes', async () => {
+		const editor = createEditor();
+		await editor.loadFrom(SVGLoader.fromString(`
+			<svg>
+				<text>
+					Testing...
+					<tspan x=0 y=100>Test 2...</tspan>
+					<tspan x=0 y=200>Test 2...</tspan>
+				</text>
+			</svg>
+		`, true));
+		const elem = editor.image
+			.getElementsIntersectingRegion(new Rect2(-1000, -1000, 10000, 10000))
+			.filter(elem => elem instanceof TextComponent)[0];
+		expect(elem).not.toBeNull();
+		expect(elem.getBBox().topLeft.y).toBeLessThan(0);
+		expect(elem.getBBox().topLeft.x).toBe(0);
+		expect(elem.getBBox().h).toBeGreaterThan(200);
+	});
+});

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 Text, { TextStyle } from './components/Text';
+import TextComponent, { TextStyle } from './components/Text';
 import UnknownSVGObject from './components/UnknownSVGObject';
 import Mat33 from './math/Mat33';
 import Path from './math/Path';
@@ -124,7 +124,7 @@ export default class SVGLoader implements ImageLoader {
 			);
 		}
 
-		if (supportedStyleAttrs) {
+		if (supportedStyleAttrs && node.style) {
 			for (const attr of node.style) {
 				if (attr === '' || !attr) {
 					continue;
@@ -198,9 +198,9 @@ export default class SVGLoader implements ImageLoader {
 
 		const elemX = elem.getAttribute('x');
 		const elemY = elem.getAttribute('y');
-		if (elemX && elemY) {
-			const x = parseFloat(elemX);
-			const y = parseFloat(elemY);
+		if (elemX || elemY) {
+			const x = parseFloat(elemX ?? '0');
+			const y = parseFloat(elemY ?? '0');
 			if (!isNaN(x) && !isNaN(y)) {
 				supportedAttrs?.push('x', 'y');
 				transform = transform.rightMul(Mat33.translation(Vec2.of(x, y)));
@@ -210,8 +210,8 @@ export default class SVGLoader implements ImageLoader {
 		return transform;
 	}
 
-	private makeText(elem: SVGTextElement|SVGTSpanElement): Text {
-		const contentList: Array<Text|string> = [];
+	private makeText(elem: SVGTextElement|SVGTSpanElement): TextComponent {
+		const contentList: Array<TextComponent|string> = [];
 		for (const child of elem.childNodes) {
 			if (child.nodeType === Node.TEXT_NODE) {
 				contentList.push(child.nodeValue ?? '');
@@ -245,13 +245,13 @@ export default class SVGLoader implements ImageLoader {
 			size: fontSize,
 			fontFamily: computedStyles.fontFamily || elem.style.fontFamily || 'sans-serif',
 			renderingStyle: {
-				fill: Color4.fromString(computedStyles.fill)
+				fill: Color4.fromString(computedStyles.fill || elem.style.fill || '#000')
 			},
 		};
 
 		const supportedAttrs: string[] = [];
 		const transform = this.getTransform(elem, supportedAttrs, computedStyles);
-		const result = new Text(contentList, transform, style);
+		const result = new TextComponent(contentList, transform, style);
 		this.attachUnrecognisedAttrs(
 			result,
 			elem,
@@ -406,7 +406,6 @@ export default class SVGLoader implements ImageLoader {
 		this.onFinish?.();
 	}
 
-	// TODO: Handling unsafe data! Tripple-check that this is secure!
 	// @param sanitize - if `true`, don't store unknown attributes.
 	public static fromString(text: string, sanitize: boolean = false): SVGLoader {
 		const sandbox = document.createElement('iframe');

package/src/components/AbstractComponent.ts

@@ -89,6 +89,11 @@ export default abstract class AbstractComponent {
 		return new AbstractComponent.TransformElementCommand(affineTransfm, this);
 	}
 
+	// @returns true iff this component can be selected (e.g. by the selection tool.)
+	public isSelectable(): boolean {
+		return true;
+	}
+
 	private static transformElementCommandId = 'transform-element';
 
 	private static UnresolvedTransformElementCommand = class extends SerializableCommand {

package/src/components/SVGGlobalAttributesObject.ts

@@ -43,6 +43,10 @@ export default class SVGGlobalAttributesObject extends AbstractComponent {
 	protected applyTransformation(_affineTransfm: Mat33): void {
 	}
 
+	public isSelectable() {
+		return false;
+	}
+
 	protected createClone() {
 		return new SVGGlobalAttributesObject(this.attrs);
 	}

package/src/components/Stroke.ts

@@ -15,6 +15,7 @@ export default class Stroke extends AbstractComponent {
 	private parts: StrokePart[];
 	protected contentBBox: Rect2;
 
+	// Creates a `Stroke` from the given `parts`.
 	public constructor(parts: RenderablePathSpec[]) {
 		super('stroke');
 

package/src/components/Text.test.ts

@@ -1,21 +1,8 @@
 import Color4 from '../Color4';
 import Mat33 from '../math/Mat33';
-import Rect2 from '../math/Rect2';
 import AbstractComponent from './AbstractComponent';
-import Text, { TextStyle } from './Text';
+import TextComponent, { TextStyle } from './Text';
 
-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', () => {
@@ -24,11 +11,9 @@ describe('Text', () => {
 			fontFamily: 'serif',
 			renderingStyle: { fill: Color4.black },
 		};
-		const text = new Text(
-			[ 'Foo' ], Mat33.identity, style, estimateTextBounds
-		);
+		const text = new TextComponent([ 'Foo' ], Mat33.identity, style);
 		const serialized = text.serialize();
-		const deserialized = AbstractComponent.deserialize(serialized) as Text;
+		const deserialized = AbstractComponent.deserialize(serialized) as TextComponent;
 		expect(deserialized.getBBox()).objEq(text.getBBox());
 		expect(deserialized['getText']()).toContain('Foo');
 	});

package/src/components/Text.ts

@@ -1,6 +1,7 @@
 import LineSegment2 from '../math/LineSegment2';
 import Mat33, { Mat33Array } from '../math/Mat33';
 import Rect2 from '../math/Rect2';
+import { Vec2 } from '../math/Vec2';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import RenderingStyle, { styleFromJSON, styleToJSON } from '../rendering/RenderingStyle';
 import AbstractComponent from './AbstractComponent';
@@ -14,23 +15,24 @@ export interface TextStyle {
 	renderingStyle: RenderingStyle;
 }
 
-type GetTextDimensCallback = (text: string, style: TextStyle) => Rect2;
-
 const componentTypeId = 'text';
-export default class Text extends AbstractComponent {
+export default class TextComponent extends AbstractComponent {
 	protected contentBBox: Rect2;
 
 	public constructor(
-		protected readonly textObjects: Array<string|Text>,
+		protected readonly textObjects: Array<string|TextComponent>,
 		private transform: Mat33,
-		private readonly style: TextStyle,
-
-		// If not given, an HtmlCanvasElement is used to determine text boundaries.
-		// @internal
-		private readonly getTextDimens: GetTextDimensCallback = Text.getTextDimens,
+		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) {
@@ -47,11 +49,27 @@ export default class Text extends AbstractComponent {
 		ctx.textAlign = 'left';
 	}
 
-	private static textMeasuringCtx: CanvasRenderingContext2D;
+	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 {
-		Text.textMeasuringCtx ??= document.createElement('canvas').getContext('2d')!;
-		const ctx = Text.textMeasuringCtx;
-		Text.applyTextStyles(ctx, style);
+		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);
 
@@ -61,9 +79,9 @@ export default class Text extends AbstractComponent {
 		return new Rect2(0, textY, measure.width, textHeight);
 	}
 
-	private computeBBoxOfPart(part: string|Text) {
+	private computeBBoxOfPart(part: string|TextComponent) {
 		if (typeof part === 'string') {
-			const textBBox = this.getTextDimens(part, this.style);
+			const textBBox = TextComponent.getTextDimens(part, this.style);
 			return textBBox.transformedBoundingBox(this.transform);
 		} else {
 			const bbox = part.contentBBox.transformedBoundingBox(this.transform);
@@ -83,19 +101,23 @@ export default class Text extends AbstractComponent {
 		this.contentBBox = bbox ?? Rect2.empty;
 	}
 
-	public render(canvas: AbstractRenderer, _visibleRect?: Rect2): void {
+	private renderInternal(canvas: AbstractRenderer) {
 		const cursor = this.transform;
 
-		canvas.startObject(this.contentBBox);
 		for (const textObject of this.textObjects) {
 			if (typeof textObject === 'string') {
 				canvas.drawText(textObject, cursor, this.style);
 			} else {
 				canvas.pushTransform(cursor);
-				textObject.render(canvas);
+				textObject.renderInternal(canvas);
 				canvas.popTransform();
 			}
 		}
+	}
+
+	public render(canvas: AbstractRenderer, _visibleRect?: Rect2): void {
+		canvas.startObject(this.contentBBox);
+		this.renderInternal(canvas);
 		canvas.endObject(this.getLoadSaveData());
 	}
 
@@ -109,7 +131,7 @@ export default class Text extends AbstractComponent {
 
 		for (const subObject of this.textObjects) {
 			if (typeof subObject === 'string') {
-				const textBBox = Text.getTextDimens(subObject, this.style);
+				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.
@@ -126,13 +148,25 @@ export default class Text extends AbstractComponent {
 		return false;
 	}
 
+	public getBaselinePos() {
+		return this.transform.transformVec2(Vec2.zero);
+	}
+
+	public getTextStyle() {
+		return this.style;
+	}
+
+	public getTransform(): Mat33 {
+		return this.transform;
+	}
+
 	protected applyTransformation(affineTransfm: Mat33): void {
 		this.transform = affineTransfm.rightMul(this.transform);
 		this.recomputeBBox();
 	}
 
 	protected createClone(): AbstractComponent {
-		return new Text(this.textObjects, this.transform, this.style);
+		return new TextComponent(this.textObjects, this.transform, this.style);
 	}
 
 	public getText() {
@@ -178,7 +212,7 @@ export default class Text extends AbstractComponent {
 		};
 	}
 
-	public static deserializeFromString(json: any, getTextDimens: GetTextDimensCallback = Text.getTextDimens): Text {
+	public static deserializeFromString(json: any): TextComponent {
 		const style: TextStyle = {
 			renderingStyle: styleFromJSON(json.style.renderingStyle),
 			size: json.style.size,
@@ -187,12 +221,12 @@ export default class Text extends AbstractComponent {
 			fontFamily: json.style.fontFamily,
 		};
 
-		const textObjects: Array<string|Text> = json.textObjects.map((data: any) => {
+		const textObjects: Array<string|TextComponent> = json.textObjects.map((data: any) => {
 			if ((data.text ?? null) !== null) {
 				return data.text;
 			}
 
-			return Text.deserializeFromString(data.json);
+			return TextComponent.deserializeFromString(data.json);
 		});
 
 		json.transform = json.transform.filter((elem: any) => typeof elem === 'number');
@@ -203,8 +237,27 @@ export default class Text extends AbstractComponent {
 		const transformData = json.transform as Mat33Array;
 		const transform = new Mat33(...transformData);
 
-		return new Text(textObjects, transform, style, getTextDimens);
+		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) => Text.deserializeFromString(data));
+AbstractComponent.registerComponent(componentTypeId, (data: string) => TextComponent.deserializeFromString(data));

package/src/components/UnknownSVGObject.ts

@@ -37,6 +37,10 @@ export default class UnknownSVGObject extends AbstractComponent {
 	protected applyTransformation(_affineTransfm: Mat33): void {
 	}
 
+	public isSelectable() {
+		return false;
+	}
+
 	protected createClone(): AbstractComponent {
 		return new UnknownSVGObject(this.svgObject.cloneNode(true) as SVGElement);
 	}