js-draw 0.3.1 → 0.3.2

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/builders/FreehandLineBuilder.ts

@@ -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

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';
 
@@ -149,6 +150,10 @@ export default class LineSegment2 {
 		}
 	}
 
+	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/rendering/localization.ts

@@ -2,13 +2,19 @@
 export interface TextRendererLocalization {
 	pathNodeCount(pathCount: number): string;
 	textNodeCount(nodeCount: number): string;
+	imageNodeCount(nodeCount: number): string;
     textNode(content: string): string;
+	unlabeledImageNode: string;
+	imageNode(label: string): string;
     rerenderAsText: string;
 }
 
 export const defaultTextRendererLocalization: TextRendererLocalization = {
 	pathNodeCount: (count: number) => `There are ${count} visible path objects.`,
 	textNodeCount: (count: number) => `There are ${count} visible text nodes.`,
+	imageNodeCount: (nodeCount: number) => `There are ${nodeCount} visible image nodes.`,
 	textNode: (content: string) => `Text: ${content}`,
+	imageNode: (label: string) => `Image: ${label}`,
+	unlabeledImageNode: 'Unlabeled image',
 	rerenderAsText: 'Re-render as text',
 };

package/src/rendering/renderers/AbstractRenderer.ts

@@ -14,6 +14,21 @@ export interface RenderablePathSpec {
 	path?: Path;
 }
 
+export interface RenderableImage {
+	transform: Mat33;
+
+	// An Image or HTMLCanvasElement. If an Image, it must be loaded from the same origin as this
+	// (and should have `src=this.base64Url`).
+	image: HTMLImageElement|HTMLCanvasElement;
+
+	// All images that can be drawn **must** have a base64 URL in the form
+	// data:image/[format];base64,[data here]
+	// If `image` is an Image, this should be equivalent to `image.src`.
+	base64Url: string;
+
+	label?: string;
+}
+
 export default abstract class AbstractRenderer {
 	// If null, this' transformation is linked to the Viewport
 	private selfTransform: Mat33|null = null;
@@ -41,6 +56,7 @@ export default abstract class AbstractRenderer {
 		controlPoint: Point2, endPoint: Point2,
 	): void;
 	public abstract drawText(text: string, transform: Mat33, style: TextStyle): void;
+	public abstract drawImage(image: RenderableImage): void;
 
 	// Returns true iff the given rectangle is so small, rendering anything within
 	// it has no effect on the image.

package/src/rendering/renderers/CanvasRenderer.ts

@@ -6,7 +6,7 @@ import { Point2, Vec2 } from '../../math/Vec2';
 import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
-import AbstractRenderer, { RenderablePathSpec } from './AbstractRenderer';
+import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
 
 export default class CanvasRenderer extends AbstractRenderer {
 	private ignoreObjectsAboveLevel: number|null = null;
@@ -168,6 +168,15 @@ export default class CanvasRenderer extends AbstractRenderer {
 		this.ctx.restore();
 	}
 
+	public drawImage(image: RenderableImage) {
+		this.ctx.save();
+		const transform = this.getCanvasToScreenTransform().rightMul(image.transform);
+		this.transformBy(transform);
+
+		this.ctx.drawImage(image.image, 0, 0);
+		this.ctx.restore();
+	}
+
 	private clipLevels: number[] = [];
 	public startObject(boundingBox: Rect2, clip: boolean) {
 		if (this.isTooSmallToRender(boundingBox)) {

package/src/rendering/renderers/DummyRenderer.ts

@@ -7,7 +7,7 @@ import { Point2, Vec2 } from '../../math/Vec2';
 import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
-import AbstractRenderer from './AbstractRenderer';
+import AbstractRenderer, { RenderableImage } from './AbstractRenderer';
 
 export default class DummyRenderer extends AbstractRenderer {
 	// Variables that track the state of what's been rendered
@@ -17,6 +17,7 @@ export default class DummyRenderer extends AbstractRenderer {
 	public lastPoint: Point2|null = null;
 	public objectNestingLevel: number = 0;
 	public lastText: string|null = null;
+	public lastImage: RenderableImage|null = null;
 
 	// List of points drawn since the last clear.
 	public pointBuffer: Point2[] = [];
@@ -44,6 +45,7 @@ export default class DummyRenderer extends AbstractRenderer {
 		this.renderedPathCount = 0;
 		this.pointBuffer = [];
 		this.lastText = null;
+		this.lastImage = null;
 
 		// Ensure all objects finished rendering
 		if (this.objectNestingLevel > 0) {
@@ -96,6 +98,9 @@ export default class DummyRenderer extends AbstractRenderer {
 	public drawText(text: string, _transform: Mat33, _style: TextStyle): void {
 		this.lastText = text;
 	}
+	public drawImage(image: RenderableImage) {
+		this.lastImage = image;
+	}
 
 	public startObject(boundingBox: Rect2, _clip: boolean) {
 		super.startObject(boundingBox);

package/src/rendering/renderers/SVGRenderer.ts

@@ -9,7 +9,7 @@ import { Point2, Vec2 } from '../../math/Vec2';
 import { svgAttributesDataKey, SVGLoaderUnknownAttribute, SVGLoaderUnknownStyleAttribute, svgStyleAttributesDataKey } from '../../SVGLoader';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
-import AbstractRenderer, { RenderablePathSpec } from './AbstractRenderer';
+import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
 
 const svgNameSpace = 'http://www.w3.org/2000/svg';
 export default class SVGRenderer extends AbstractRenderer {
@@ -19,13 +19,18 @@ export default class SVGRenderer extends AbstractRenderer {
 
 	private overwrittenAttrs: Record<string, string|null> = {};
 
-	public constructor(private elem: SVGSVGElement, viewport: Viewport) {
+	// Renders onto `elem`. If `sanitize`, don't render potentially untrusted data.
+	public constructor(private elem: SVGSVGElement, viewport: Viewport, private sanitize: boolean = false) {
 		super(viewport);
 		this.clear();
 	}
 
 	// Sets an attribute on the root SVG element.
 	public setRootSVGAttribute(name: string, value: string|null) {
+		if (this.sanitize) {
+			return;
+		}
+	
 		// Make the original value of the attribute restorable on clear
 		if (!(name in this.overwrittenAttrs)) {
 			this.overwrittenAttrs[name] = this.elem.getAttribute(name);
@@ -43,18 +48,21 @@ export default class SVGRenderer extends AbstractRenderer {
 	}
 
 	public clear() {
-		// Restore all alltributes
-		for (const attrName in this.overwrittenAttrs) {
-			const value = this.overwrittenAttrs[attrName];
-
-			if (value) {
-				this.elem.setAttribute(attrName, value);
-			} else {
-				this.elem.removeAttribute(attrName);
+		this.lastPathString = [];
+
+		if (!this.sanitize) {
+			// Restore all all attributes
+			for (const attrName in this.overwrittenAttrs) {
+				const value = this.overwrittenAttrs[attrName];
+
+				if (value) {
+					this.elem.setAttribute(attrName, value);
+				} else {
+					this.elem.removeAttribute(attrName);
+				}
 			}
+			this.overwrittenAttrs = {};
 		}
-		this.overwrittenAttrs = {};
-		this.lastPathString = [];
 	}
 
 	// Push [this.fullPath] to the SVG
@@ -91,26 +99,31 @@ export default class SVGRenderer extends AbstractRenderer {
 		this.lastPathString.push(path.toString());
 	}
 
-	public drawText(text: string, transform: Mat33, style: TextStyle): void {
-		transform = this.getCanvasToScreenTransform().rightMul(transform);
-
+	// Apply [elemTransform] to [elem].
+	private transformFrom(elemTransform: Mat33, elem: SVGElement) {
+		let transform = this.getCanvasToScreenTransform().rightMul(elemTransform);
 		const translation = transform.transformVec2(Vec2.zero);
 		transform = transform.rightMul(Mat33.translation(translation.times(-1)));
 
-		const textElem = document.createElementNS(svgNameSpace, 'text');
-		textElem.appendChild(document.createTextNode(text));
-		textElem.style.transform = `matrix(
+		elem.style.transform = `matrix(
 			${transform.a1}, ${transform.b1},
 			${transform.a2}, ${transform.b2},
 			${transform.a3}, ${transform.b3}
 		)`;
+		elem.setAttribute('x', `${toRoundedString(translation.x)}`);
+		elem.setAttribute('y', `${toRoundedString(translation.y)}`);
+	}
+
+	public drawText(text: string, transform: Mat33, style: TextStyle): void {
+		const textElem = document.createElementNS(svgNameSpace, 'text');
+		textElem.appendChild(document.createTextNode(text));
+		this.transformFrom(transform, textElem);
+
 		textElem.style.fontFamily = style.fontFamily;
 		textElem.style.fontVariant = style.fontVariant ?? '';
 		textElem.style.fontWeight = style.fontWeight ?? '';
 		textElem.style.fontSize = style.size + 'px';
 		textElem.style.fill = style.renderingStyle.fill.toHexString();
-		textElem.setAttribute('x', `${toRoundedString(translation.x)}`);
-		textElem.setAttribute('y', `${toRoundedString(translation.y)}`);
 
 		if (style.renderingStyle.stroke) {
 			const strokeStyle = style.renderingStyle.stroke;
@@ -122,6 +135,18 @@ export default class SVGRenderer extends AbstractRenderer {
 		this.objectElems?.push(textElem);
 	}
 
+	public drawImage(image: RenderableImage) {
+		const svgImgElem = document.createElementNS(svgNameSpace, 'image');
+		svgImgElem.setAttribute('href', image.base64Url);
+		svgImgElem.setAttribute('width', image.image.getAttribute('width') ?? '');
+		svgImgElem.setAttribute('height', image.image.getAttribute('height') ?? '');
+		svgImgElem.setAttribute('aria-label', image.image.getAttribute('aria-label') ?? image.image.getAttribute('alt') ?? '');
+		this.transformFrom(image.transform, svgImgElem);
+
+		this.elem.appendChild(svgImgElem);
+		this.objectElems?.push(svgImgElem);
+	}
+
 	public startObject(boundingBox: Rect2) {
 		super.startObject(boundingBox);
 
@@ -137,7 +162,7 @@ export default class SVGRenderer extends AbstractRenderer {
 		// Don't extend paths across objects
 		this.addPathToSVG();
 
-		if (loaderData) {
+		if (loaderData && !this.sanitize) {
 			// Restore any attributes unsupported by the app.
 			for (const elem of this.objectElems ?? []) {
 				const attrs = loaderData[svgAttributesDataKey] as SVGLoaderUnknownAttribute[]|undefined;
@@ -181,6 +206,10 @@ export default class SVGRenderer extends AbstractRenderer {
 
 	// Renders a **copy** of the given element.
 	public drawSVGElem(elem: SVGElement) {
+		if (this.sanitize) {
+			return;
+		}
+
 		this.elem.appendChild(elem.cloneNode(true));
 	}
 

package/src/rendering/renderers/TextOnlyRenderer.ts

@@ -6,7 +6,7 @@ import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import { TextRendererLocalization } from '../localization';
 import RenderingStyle from '../RenderingStyle';
-import AbstractRenderer from './AbstractRenderer';
+import AbstractRenderer, { RenderableImage } from './AbstractRenderer';
 
 // Outputs a description of what was rendered.
 
@@ -14,6 +14,7 @@ export default class TextOnlyRenderer extends AbstractRenderer {
 	private descriptionBuilder: string[] = [];
 	private pathCount: number = 0;
 	private textNodeCount: number = 0;
+	private imageNodeCount: number = 0;
 
 	public constructor(viewport: Viewport, private localizationTable: TextRendererLocalization) {
 		super(viewport);
@@ -33,7 +34,8 @@ export default class TextOnlyRenderer extends AbstractRenderer {
 	public getDescription(): string {
 		return [
 			this.localizationTable.pathNodeCount(this.pathCount),
-			this.localizationTable.textNodeCount(this.textNodeCount),
+			...(this.textNodeCount > 0 ? this.localizationTable.textNodeCount(this.textNodeCount) : []),
+			...(this.imageNodeCount > 0 ? this.localizationTable.imageNodeCount(this.imageNodeCount) : []),
 			...this.descriptionBuilder
 		].join('\n');
 	}
@@ -55,6 +57,12 @@ export default class TextOnlyRenderer extends AbstractRenderer {
 		this.descriptionBuilder.push(this.localizationTable.textNode(text));
 		this.textNodeCount ++;
 	}
+	public drawImage(image: RenderableImage) {
+		const label = image.label ? this.localizationTable.imageNode(image.label) : this.localizationTable.unlabeledImageNode;
+
+		this.descriptionBuilder.push(label);
+		this.imageNodeCount ++;
+	}
 	public isTooSmallToRender(rect: Rect2): boolean {
 		return rect.maxDimension < 15 / this.getSizeOfCanvasPixelOnScreen();
 	}

package/src/tools/BaseTool.ts

@@ -1,4 +1,4 @@
-import { PointerEvtListener, WheelEvt, PointerEvt, EditorNotifier, EditorEventType, KeyPressEvent, KeyUpEvent } from '../types';
+import { PointerEvtListener, WheelEvt, PointerEvt, EditorNotifier, EditorEventType, KeyPressEvent, KeyUpEvent, PasteEvent, CopyEvent } from '../types';
 import ToolEnabledGroup from './ToolEnabledGroup';
 
 export default abstract class BaseTool implements PointerEvtListener {
@@ -17,6 +17,14 @@ export default abstract class BaseTool implements PointerEvtListener {
 		return false;
 	}
 
+	public onCopy(_event: CopyEvent): boolean {
+		return false;
+	}
+
+	public onPaste(_event: PasteEvent): boolean {
+		return false;
+	}
+
 	public onKeyPress(_event: KeyPressEvent): boolean {
 		return false;
 	}