js-draw 0.3.0 → 0.3.2

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

package/src/components/ImageComponent.ts

@@ -0,0 +1,153 @@
+import LineSegment2 from '../math/LineSegment2';
+import Mat33 from '../math/Mat33';
+import Rect2 from '../math/Rect2';
+import AbstractRenderer, { RenderableImage } from '../rendering/renderers/AbstractRenderer';
+import AbstractComponent from './AbstractComponent';
+import { ImageComponentLocalization } from './localization';
+
+// Represents a raster image.
+export default class ImageComponent extends AbstractComponent {
+	protected contentBBox: Rect2;
+	private image: RenderableImage;
+
+	public constructor(image: RenderableImage) {
+		super('image-component');
+		this.image = {
+			...image,
+			label: image.label ?? image.image.getAttribute('alt') ?? image.image.getAttribute('aria-label') ?? undefined,
+		};
+
+		const isHTMLImageElem = (elem: HTMLCanvasElement|HTMLImageElement): elem is HTMLImageElement => {
+			return elem.getAttribute('src') !== undefined;
+		};
+		if (isHTMLImageElem(image.image) && !image.image.complete) {
+			image.image.onload = () => this.recomputeBBox();
+		}
+
+		this.recomputeBBox();
+	}
+
+	private getImageRect() {
+		return new Rect2(0, 0, this.image.image.width, this.image.image.height);
+	}
+
+	private recomputeBBox() {
+		this.contentBBox = this.getImageRect();
+		this.contentBBox = this.contentBBox.transformedBoundingBox(this.image.transform);
+	}
+
+	// Load from an image. Waits for the image to load if incomplete.
+	public static async fromImage(elem: HTMLImageElement, transform: Mat33) {
+		if (!elem.complete) {
+			await new Promise((resolve, reject) => {
+				elem.onload = resolve;
+				elem.onerror = reject;
+				elem.onabort = reject;
+			});
+		}
+
+		let width, height;
+		if (
+			typeof elem.width === 'number' && typeof elem.height === 'number'
+			&& elem.width !== 0 && elem.height !== 0
+		) {
+			width = elem.width as number;
+			height = elem.height as number;
+		} else {
+			width = elem.clientWidth;
+			height = elem.clientHeight;
+		}
+
+		let image;
+		let url = elem.src ?? '';
+		if (!url.startsWith('data:image/')) {
+			// Convert to a data URL:
+			const canvas = document.createElement('canvas');
+			canvas.width = width;
+			canvas.height = height;
+
+			const ctx = canvas.getContext('2d')!;
+			ctx.drawImage(elem, 0, 0, canvas.width, canvas.height);
+			url = canvas.toDataURL();
+			image = canvas;
+		} else {
+			image = new Image();
+			image.src = url;
+			image.width = width;
+			image.height = height;
+		}
+
+		return new ImageComponent({
+			image,
+			base64Url: url,
+			transform: transform,
+		});
+	}
+
+	public render(canvas: AbstractRenderer, _visibleRect?: Rect2): void {
+		canvas.drawImage(this.image);
+	}
+
+	public intersects(lineSegment: LineSegment2): boolean {
+		const rect = this.getImageRect();
+		const edges = rect.getEdges().map(edge => edge.transformedBy(this.image.transform));
+		for (const edge of edges) {
+			if (edge.intersects(lineSegment)) {
+				return true;
+			}
+		}
+		return false;
+	}
+
+	protected serializeToJSON() {
+		return {
+			src: this.image.base64Url,
+			label: this.image.label,
+
+			// Store the width and height for bounding box computations while the image is loading.
+			width: this.image.image.width,
+			height: this.image.image.height,
+
+			transform: this.image.transform.toArray(),
+		};
+	}
+
+	protected applyTransformation(affineTransfm: Mat33) {
+		this.image.transform = affineTransfm.rightMul(this.image.transform);
+		this.recomputeBBox();
+	}
+
+	public description(localizationTable: ImageComponentLocalization): string {
+		return this.image.label ? localizationTable.imageNode(this.image.label) : localizationTable.unlabeledImageNode;
+	}
+
+	protected createClone(): AbstractComponent {
+		return new ImageComponent({
+			...this.image,
+		});
+	}
+
+	public static deserializeFromJSON(data: any): ImageComponent {
+		if (!(typeof data.src === 'string')) {
+			throw new Error(`${data} has invalid format! Expected src property.`);
+		}
+
+		const image = new Image();
+		image.src = data.src;
+		image.width = data.width;
+		image.height = data.height;
+
+		return new ImageComponent({
+			image: image,
+			base64Url: image.src,
+			label: data.label,
+			transform: new Mat33(...(data.transform as [
+				number, number, number,
+				number, number, number,
+				number, number, number,
+			])),
+		});
+	}
+}
+
+AbstractComponent.registerComponent('image-component', ImageComponent.deserializeFromJSON);

package/src/components/Stroke.test.ts

@@ -64,6 +64,11 @@ describe('Stroke', () => {
 				"path": "m0,0 l10,10z"
 			}
 		]`);
+		const path = deserialized.getPath();
+
+		// Should cache the original string representation.
+		expect(deserialized.getPath().toString()).toBe('m0,0 l10,10z');
+		path['cachedStringVersion'] = null;
 		expect(deserialized.getPath().toString()).toBe('M0,0L10,10L0,0');
 	});
 });

package/src/components/Stroke.ts

@@ -9,7 +9,6 @@ import { ImageComponentLocalization } from './localization';
 
 interface StrokePart extends RenderablePathSpec {
 	path: Path;
-	bbox: Rect2;
 }
 
 export default class Stroke extends AbstractComponent {
@@ -19,7 +18,7 @@ export default class Stroke extends AbstractComponent {
 	public constructor(parts: RenderablePathSpec[]) {
 		super('stroke');
 
-		this.parts = parts.map(section => {
+		this.parts = parts.map((section): StrokePart => {
 			const path = Path.fromRenderable(section);
 			const pathBBox = this.bboxForPart(path.bbox, section.style);
 
@@ -31,7 +30,6 @@ export default class Stroke extends AbstractComponent {
 
 			return {
 				path,
-				bbox: pathBBox,
 
 				// To implement RenderablePathSpec
 				startPoint: path.startPoint,
@@ -54,10 +52,19 @@ export default class Stroke extends AbstractComponent {
 	public render(canvas: AbstractRenderer, visibleRect?: Rect2): void {
 		canvas.startObject(this.getBBox());
 		for (const part of this.parts) {
-			const bbox = part.bbox;
-			if (!visibleRect || bbox.intersects(visibleRect)) {
-				canvas.drawPath(part);
+			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.closedRoughlyIntersects(visibleRect)) {
+					continue;
+				}
 			}
+
+			canvas.drawPath(part);
 		}
 		canvas.endObject(this.getLoadSaveData());
 	}
@@ -89,7 +96,6 @@ export default class Stroke extends AbstractComponent {
 
 			return {
 				path: newPath,
-				bbox: newBBox,
 				startPoint: newPath.startPoint,
 				commands: newPath.parts,
 				style: part.style,

package/src/components/builders/FreehandLineBuilder.ts

@@ -12,9 +12,9 @@ import RenderingStyle from '../../rendering/RenderingStyle';
 
 export const makeFreehandLineBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, viewport: Viewport) => {
 	// Don't smooth if input is more than ± 7 pixels from the true curve, do smooth if
-	// less than ± 2 px from the curve.
+	// less than ±1 px from the curve.
 	const maxSmoothingDist = viewport.getSizeOfPixelOnCanvas() * 7;
-	const minSmoothingDist = viewport.getSizeOfPixelOnCanvas() * 2;
+	const minSmoothingDist = viewport.getSizeOfPixelOnCanvas();
 
 	return new FreehandLineBuilder(
 		initialPoint, minSmoothingDist, maxSmoothingDist
@@ -197,7 +197,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 				return;
 			}
 
-			const width = Viewport.roundPoint(this.startPoint.width / 3.5, this.minFitAllowed);
+			const width = Viewport.roundPoint(this.startPoint.width / 3.5, Math.min(this.minFitAllowed, this.startPoint.width / 4));
 			const center = this.roundPoint(this.startPoint.pos);
 
 			// Start on the right, cycle clockwise:
@@ -329,9 +329,9 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 			return upperBoundary.intersects(lowerBoundary).length > 0;
 		};
 
-		// If the boundaries have two intersections, increasing the half vector's length could fix this.
+		// If the boundaries have intersections, increasing the half vector's length could fix this.
 		if (boundariesIntersect()) {
-			halfVec = halfVec.times(2);
+			halfVec = halfVec.times(1.1);
 		}
 
 		// Each starts at startPt ± startVec
@@ -492,7 +492,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 				const dist = proj.minus(point).magnitude();
 
 				const minFit = Math.max(
-					Math.min(this.curveStartWidth, this.curveEndWidth) / 2,
+					Math.min(this.curveStartWidth, this.curveEndWidth) / 3,
 					this.minFitAllowed
 				);
 				if (dist > minFit || dist > this.maxFitAllowed) {
@@ -503,7 +503,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		};
 
 		const approxCurveLen = controlPoint.minus(segmentStart).magnitude() + segmentEnd.minus(controlPoint).magnitude();
-		if (this.buffer.length > 3 && approxCurveLen > this.curveEndWidth / 2) {
+		if (this.buffer.length > 3 && approxCurveLen > this.curveEndWidth / 3) {
 			if (!curveMatchesPoints(this.currentCurve)) {
 				// Use a curve that better fits the points
 				this.currentCurve = prevCurve;

package/src/components/lib.ts

@@ -1,12 +1,17 @@
 export * from './builders/types';
 export { makeFreehandLineBuilder } from './builders/FreehandLineBuilder';
 
-import AbstractComponent from './AbstractComponent';
+export * from './AbstractComponent';
+export { default as AbstractComponent } from './AbstractComponent';
 import Stroke from './Stroke';
 import Text from './Text';
+import ImageComponent from './ImageComponent';
 
 export {
-	AbstractComponent,
 	Stroke,
 	Text,
+
+	Text as TextComponent,
+	Stroke as StrokeComponent,
+	ImageComponent,
 };

package/src/components/localization.ts

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

package/src/math/LineSegment2.test.ts

@@ -1,6 +1,7 @@
 import LineSegment2 from './LineSegment2';
 import { loadExpectExtensions } from '../testing/loadExpectExtensions';
 import { Vec2 } from './Vec2';
+import Mat33 from './Mat33';
 
 loadExpectExtensions();
 
@@ -89,4 +90,12 @@ describe('Line2', () => {
 		const line = new LineSegment2(Vec2.of(1, 1), Vec2.of(2, 4));
 		expect(line.closestPointTo(Vec2.of(5, 2))).objEq(Vec2.of(2, 4));
 	});
+
+	it('Should translate when translated by a translation matrix', () => {
+		const line = new LineSegment2(Vec2.of(-1, 1), Vec2.of(2, 100));
+		expect(line.transformedBy(Mat33.translation(Vec2.of(1, -2)))).toMatchObject({
+			p1: Vec2.of(0, -1),
+			p2: Vec2.of(3, 98),
+		});
+	});
 });

package/src/math/LineSegment2.ts

@@ -1,3 +1,4 @@
+import Mat33 from './Mat33';
 import Rect2 from './Rect2';
 import { Vec2, Point2 } from './Vec2';
 
@@ -126,6 +127,10 @@ export default class LineSegment2 {
 		};
 	}
 
+	public intersects(other: LineSegment2) {
+		return this.intersection(other) !== null;
+	}
+
 	// Returns the closest point on this to [target]
 	public closestPointTo(target: Point2) {
 		// Distance from P1 along this' direction.
@@ -144,4 +149,12 @@ export default class LineSegment2 {
 			return this.p1;
 		}
 	}
+
+	public transformedBy(affineTransfm: Mat33): LineSegment2 {
+		return new LineSegment2(affineTransfm.transformVec2(this.p1), affineTransfm.transformVec2(this.p2));
+	}
+
+	public toString() {
+		return `LineSegment(${this.p1.toString()}, ${this.p2.toString()})`;
+	}
 }

package/src/math/Path.test.ts

@@ -1,6 +1,7 @@
 import { Bezier } from 'bezier-js';
 import LineSegment2 from './LineSegment2';
 import Path, { PathCommandType } from './Path';
+import Rect2 from './Rect2';
 import { Vec2 } from './Vec2';
 
 describe('Path', () => {
@@ -93,4 +94,56 @@ describe('Path', () => {
 			y: 100,
 		});
 	});
+
+	describe('polylineApproximation', () => {
+		it('should approximate Bézier curves with polylines', () => {
+			const path = Path.fromString('m0,0 l4,4 Q 1,4 4,1z');
+
+			expect(path.polylineApproximation()).toMatchObject([
+				new LineSegment2(Vec2.of(0, 0), Vec2.of(4, 4)),
+				new LineSegment2(Vec2.of(4, 4), Vec2.of(1, 4)),
+				new LineSegment2(Vec2.of(1, 4), Vec2.of(4, 1)),
+				new LineSegment2(Vec2.of(4, 1), Vec2.of(0, 0)),
+			]);
+		});
+	});
+
+	describe('roughlyIntersectsClosed', () => {
+		it('small, line-only path', () => {
+			const path = Path.fromString('m0,0 l10,10 L0,10 z');
+			expect(
+				path.closedRoughlyIntersects(Rect2.fromCorners(Vec2.zero, Vec2.of(20, 20)))
+			).toBe(true);
+			expect(
+				path.closedRoughlyIntersects(Rect2.fromCorners(Vec2.zero, Vec2.of(2, 2)))
+			).toBe(true);
+			expect(
+				path.closedRoughlyIntersects(new Rect2(10, 1, 1, 1))
+			).toBe(false);
+			expect(
+				path.closedRoughlyIntersects(new Rect2(1, 5, 1, 1))
+			).toBe(true);
+		});
+
+		it('path with Bézier curves', () => {
+			const path = Path.fromString(`
+				M1090,2560
+				L1570,2620
+				Q1710,1300 1380,720
+				Q980,100 -460,-640
+				L-680,-200
+				Q670,470 960,980
+				Q1230,1370 1090,2560
+			`);
+			expect(
+				path.closedRoughlyIntersects(new Rect2(0, 0, 500, 500))
+			).toBe(true);
+			expect(
+				path.closedRoughlyIntersects(new Rect2(0, 0, 5, 5))
+			).toBe(true);
+			expect(
+				path.closedRoughlyIntersects(new Rect2(-10000, 0, 500, 500))
+			).toBe(false);
+		});
+	});
 });

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

@@ -42,13 +42,15 @@ describe('Path.toString', () => {
 			},
 		]);
 
-		expect(path.toString()).toBe('M1000,2000000L30.0001,40');
+		expect(path.toString()).toBe('M1000,2000000l-970-1999960');
 	});
 
 	it('deserialized path should serialize to the same/similar path, but with rounded components', () => {
 		const path1 = Path.fromString('M100,100 L101,101 Q102,102 90.000000001,89.99999999 Z');
+		path1['cachedStringVersion'] = null; // Clear the cache.
+
 		expect(path1.toString()).toBe([
-			'M100,100', 'L101,101', 'Q102,102 90,90', 'L100,100'
+			'M100,100', 'l1,1', 'q1,1 -11-11', 'l10,10'
 		].join(''));
 	});
 });