js-draw 0.1.0 → 0.1.3

package/dist/src/tools/localization.d.ts

@@ -1,10 +1,13 @@
 export interface ToolLocalization {
+    rightClickDragPanTool: string;
     penTool: (penId: number) => string;
     selectionTool: string;
     eraserTool: string;
     touchPanTool: string;
     twoFingerPanZoomTool: string;
     undoRedoTool: string;
+    textTool: string;
+    enterTextToInsert: string;
     toolEnabledAnnouncement: (toolName: string) => string;
     toolDisabledAnnouncement: (toolName: string) => string;
 }

package/dist/src/tools/localization.js

@@ -5,6 +5,9 @@ export const defaultToolLocalization = {
     touchPanTool: 'Touch Panning',
     twoFingerPanZoomTool: 'Panning and Zooming',
     undoRedoTool: 'Undo/Redo',
+    rightClickDragPanTool: 'Right-click drag',
+    textTool: 'Text',
+    enterTextToInsert: 'Text to insert',
     toolEnabledAnnouncement: (toolName) => `${toolName} enabled`,
     toolDisabledAnnouncement: (toolName) => `${toolName} disabled`,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
   "main": "dist/src/Editor.js",
   "types": "dist/src/Editor.d.ts",

package/src/Editor.ts

@@ -165,6 +165,10 @@ export class Editor {
 		// May be required to prevent text selection on iOS/Safari:
 		// See https://stackoverflow.com/a/70992717/17055750
 		this.renderingRegion.addEventListener('touchstart', evt => evt.preventDefault());
+		this.renderingRegion.addEventListener('contextmenu', evt => {
+			// Don't show a context menu
+			evt.preventDefault();
+		});
 
 		this.renderingRegion.addEventListener('pointerdown', evt => {
 			const pointer = Pointer.ofEvent(evt, true, this.viewport);
@@ -370,9 +374,11 @@ export class Editor {
 		// Draw a rectangle around the region that will be visible on save
 		const renderer = this.display.getDryInkRenderer();
 
+		this.image.renderWithCache(renderer, this.display.getCache(), this.viewport);
+
 		if (showImageBounds) {
 			const exportRectFill = { fill: Color4.fromHex('#44444455') };
-			const exportRectStrokeWidth = 12;
+			const exportRectStrokeWidth = 5 * this.viewport.getSizeOfPixelOnCanvas();
 			renderer.drawRect(
 				this.importExportViewport.visibleRect,
 				exportRectStrokeWidth,
@@ -380,8 +386,6 @@ export class Editor {
 			);
 		}
 
-		//this.image.render(renderer, this.viewport);
-		this.image.renderWithCache(renderer, this.display.getCache(), this.viewport);
 		this.rerenderQueued = false;
 	}
 

package/src/EditorImage.ts

@@ -73,6 +73,10 @@ export default class EditorImage {
 		) {
 			this.#element = element;
 			this.#applyByFlattening = applyByFlattening;
+
+			if (isNaN(this.#element.getBBox().area)) {
+				throw new Error('Elements in the image cannot have NaN bounding boxes');
+			}
 		}
 
 		public apply(editor: Editor) {
@@ -137,7 +141,7 @@ export class ImageNode {
 		return this.parent;
 	}
 
-	public getChildrenInRegion(region: Rect2): ImageNode[] {
+	private getChildrenIntersectingRegion(region: Rect2): ImageNode[] {
 		return this.children.filter(child => {
 			return child.getBBox().intersects(region);
 		});
@@ -147,7 +151,7 @@ export class ImageNode {
 		if (this.content) {
 			return [this];
 		}
-		return this.getChildrenInRegion(region);
+		return this.getChildrenIntersectingRegion(region);
 	}
 
 	// Returns a list of `ImageNode`s with content (and thus no children).
@@ -163,7 +167,7 @@ export class ImageNode {
 			result.push(this);
 		}
 
-		const children = this.getChildrenInRegion(region);
+		const children = this.getChildrenIntersectingRegion(region);
 		for (const child of children) {
 			result.push(...child.getLeavesIntersectingRegion(region, isTooSmall));
 		}

package/src/Pointer.ts

@@ -5,7 +5,8 @@ export enum PointerDevice {
 	Pen,
 	Eraser,
 	Touch,
-	Mouse,
+	PrimaryButtonMouse,
+	RightButtonMouse,
 	Other,
 }
 
@@ -31,7 +32,7 @@ export default class Pointer {
         public readonly id: number,
 
         // Numeric timestamp (milliseconds, as from (new Date).getTime())
-        public readonly timeStamp: number
+        public readonly timeStamp: number,
 	) {
 	}
 
@@ -39,7 +40,7 @@ export default class Pointer {
 		const screenPos = Vec2.of(evt.offsetX, evt.offsetY);
 
 		const pointerTypeToDevice: Record<string, PointerDevice> = {
-			'mouse': PointerDevice.Mouse,
+			'mouse': PointerDevice.PrimaryButtonMouse,
 			'pen': PointerDevice.Pen,
 			'touch': PointerDevice.Touch,
 		};
@@ -53,6 +54,14 @@ export default class Pointer {
 		const timeStamp = (new Date()).getTime();
 		const canvasPos = viewport.roundPoint(viewport.screenToCanvas(screenPos));
 
+		if (device === PointerDevice.PrimaryButtonMouse) {
+			if (evt.buttons & 0x2) {
+				device = PointerDevice.RightButtonMouse;
+			} else if (!(evt.buttons & 0x1)) {
+				device = PointerDevice.Other;
+			}
+		} 
+
 		return new Pointer(
 			screenPos,
 			canvasPos,
@@ -61,7 +70,7 @@ export default class Pointer {
 			isDown,
 			device,
 			evt.pointerId,
-			timeStamp
+			timeStamp,
 		);
 	}
 

package/src/SVGLoader.ts

@@ -2,9 +2,12 @@ import Color4 from './Color4';
 import AbstractComponent from './components/AbstractComponent';
 import Stroke from './components/Stroke';
 import SVGGlobalAttributesObject from './components/SVGGlobalAttributesObject';
+import Text, { TextStyle } from './components/Text';
 import UnknownSVGObject from './components/UnknownSVGObject';
+import Mat33 from './geometry/Mat33';
 import Path from './geometry/Path';
 import Rect2 from './geometry/Rect2';
+import { Vec2 } from './geometry/Vec2';
 import { RenderablePathSpec, RenderingStyle } from './rendering/renderers/AbstractRenderer';
 import { ComponentAddedListener, ImageLoader, OnDetermineExportRectListener, OnProgressListener } from './types';
 
@@ -13,6 +16,16 @@ type OnFinishListener = ()=> void;
 // Size of a loaded image if no size is specified.
 export const defaultSVGViewRect = new Rect2(0, 0, 500, 500);
 
+// Key to retrieve unrecognised attributes from an AbstractComponent
+export const svgAttributesDataKey = 'svgAttrs';
+export const svgStyleAttributesDataKey = 'svgStyleAttrs';
+
+// [key, value]
+export type SVGLoaderUnknownAttribute = [ string, string ];
+
+// [key, value, priority]
+export type SVGLoaderUnknownStyleAttribute = { key: string, value: string, priority?: string };
+
 export default class SVGLoader implements ImageLoader {
 	private onAddComponent: ComponentAddedListener|null = null;
 	private onProgress: OnProgressListener|null = null;
@@ -88,12 +101,58 @@ export default class SVGLoader implements ImageLoader {
 		return result;
 	}
 
+	private attachUnrecognisedAttrs(
+		elem: AbstractComponent,
+		node: SVGElement,
+		supportedAttrs: Set<string>,
+		supportedStyleAttrs?: Set<string>
+	) {
+		for (const attr of node.getAttributeNames()) {
+			if (supportedAttrs.has(attr) || (attr === 'style' && supportedStyleAttrs)) {
+				continue;
+			}
+
+			elem.attachLoadSaveData(svgAttributesDataKey,
+				[ attr, node.getAttribute(attr) ] as SVGLoaderUnknownAttribute,
+			);
+		}
+
+		if (supportedStyleAttrs) {
+			for (const attr of node.style) {
+				if (attr === '' || !attr) {
+					continue;
+				}
+
+				if (supportedStyleAttrs.has(attr)) {
+					continue;
+				}
+
+				// TODO: Do we need special logic for !important properties?
+				elem.attachLoadSaveData(svgStyleAttributesDataKey, 
+					{
+						key: attr,
+						value: node.style.getPropertyValue(attr),
+						priority: node.style.getPropertyPriority(attr)
+					} as SVGLoaderUnknownStyleAttribute
+				);
+			}
+		}
+	}
+
 	// Adds a stroke with a single path
 	private addPath(node: SVGPathElement) {
 		let elem: AbstractComponent;
 		try {
 			const strokeData = this.strokeDataFromElem(node);
+
 			elem = new Stroke(strokeData);
+
+			const supportedStyleAttrs = [ 'stroke', 'fill', 'stroke-width' ];
+			this.attachUnrecognisedAttrs(
+				elem, node,
+				new Set([ ...supportedStyleAttrs, 'd' ]),
+				new Set(supportedStyleAttrs)
+			);
 		} catch (e) {
 			console.error(
 				'Invalid path in node', node,
@@ -106,6 +165,80 @@ export default class SVGLoader implements ImageLoader {
 		this.onAddComponent?.(elem);
 	}
 
+	private makeText(elem: SVGTextElement|SVGTSpanElement): Text {
+		const contentList: Array<Text|string> = [];
+		for (const child of elem.childNodes) {
+			if (child.nodeType === Node.TEXT_NODE) {
+				contentList.push(child.nodeValue ?? '');
+			} else if (child.nodeType === Node.ELEMENT_NODE) {
+				const subElem = child as SVGElement;
+				if (subElem.tagName.toLowerCase() === 'tspan') {
+					contentList.push(this.makeText(subElem as SVGTSpanElement));
+				} else {
+					throw new Error(`Unrecognized text child element: ${subElem}`);
+				}
+			} else {
+				throw new Error(`Unrecognized text child node: ${child}.`);
+			}
+		}
+
+		// Compute styles.
+		const computedStyles = window.getComputedStyle(elem);
+		const fontSizeMatch = /^([-0-9.e]+)px/i.exec(computedStyles.fontSize);
+
+		const supportedStyleAttrs = [
+			'fontFamily',
+			'fill',
+			'transform'
+		];
+		let fontSize = 12;
+		if (fontSizeMatch) {
+			supportedStyleAttrs.push('fontSize');
+			fontSize = parseFloat(fontSizeMatch[1]);
+		}
+		const style: TextStyle = {
+			size: fontSize,
+			fontFamily: computedStyles.fontFamily || 'sans',
+			renderingStyle: {
+				fill: Color4.fromString(computedStyles.fill)
+			},
+		};
+
+		// Compute transform matrix
+		let transform = Mat33.fromCSSMatrix(computedStyles.transform);
+		const supportedAttrs = [];
+		const elemX = elem.getAttribute('x');
+		const elemY = elem.getAttribute('y');
+		if (elemX && elemY) {
+			const x = parseFloat(elemX);
+			const y = parseFloat(elemY);
+			if (!isNaN(x) && !isNaN(y)) {
+				supportedAttrs.push('x', 'y');
+				transform = transform.rightMul(Mat33.translation(Vec2.of(x, y)));
+			}
+		}
+
+		const result = new Text(contentList, transform, style);
+		this.attachUnrecognisedAttrs(
+			result,
+			elem,
+			new Set(supportedAttrs),
+			new Set(supportedStyleAttrs)
+		);
+
+		return result;
+	}
+
+	private addText(elem: SVGTextElement|SVGTSpanElement) {
+		try {
+			const textElem = this.makeText(elem);
+			this.onAddComponent?.(textElem);
+		} catch (e) {
+			console.error('Invalid text object in node', elem, '. Adding as an unknown object. Error:', e);
+			this.addUnknownNode(elem);
+		}
+	}
+
 	private addUnknownNode(node: SVGElement) {
 		const component = new UnknownSVGObject(node);
 		this.onAddComponent?.(component);
@@ -117,13 +250,14 @@ export default class SVGLoader implements ImageLoader {
 			return;
 		}
 
-		const components = viewBoxAttr.split(/[ \t,]/);
+		const components = viewBoxAttr.split(/[ \t\n,]+/);
 		const x = parseFloat(components[0]);
 		const y = parseFloat(components[1]);
 		const width = parseFloat(components[2]);
 		const height = parseFloat(components[3]);
 
 		if (isNaN(x) || isNaN(y) || isNaN(width) || isNaN(height)) {
+			console.warn(`node ${node} has an unparsable viewbox. Viewbox: ${viewBoxAttr}. Match: ${components}.`);
 			return;
 		}
 
@@ -137,6 +271,7 @@ export default class SVGLoader implements ImageLoader {
 
 	private async visit(node: Element) {
 		this.totalToProcess += node.childElementCount;
+		let visitChildren = true;
 
 		switch (node.tagName.toLowerCase()) {
 		case 'g':
@@ -145,6 +280,10 @@ export default class SVGLoader implements ImageLoader {
 		case 'path':
 			this.addPath(node as SVGPathElement);
 			break;
+		case 'text':
+			this.addText(node as SVGTextElement);
+			visitChildren = false;
+			break;
 		case 'svg':
 			this.updateViewBox(node as SVGSVGElement);
 			this.updateSVGAttrs(node as SVGSVGElement);
@@ -159,8 +298,10 @@ export default class SVGLoader implements ImageLoader {
 			return;
 		}
 
-		for (const child of node.children) {
-			await this.visit(child);
+		if (visitChildren) {
+			for (const child of node.children) {
+				await this.visit(child);
+			}
 		}
 
 		this.processedCount ++;
@@ -214,9 +355,7 @@ export default class SVGLoader implements ImageLoader {
 			throw new Error('SVG loading iframe is not sandboxed.');
 		}
 
-		// Try running JavaScript within the iframe
 		const sandboxDoc = sandbox.contentWindow?.document ?? sandbox.contentDocument;
-
 		if (sandboxDoc == null) throw new Error('Unable to open a sandboxed iframe!');
 
 		sandboxDoc.open();
@@ -242,8 +381,10 @@ export default class SVGLoader implements ImageLoader {
 			'http://www.w3.org/2000/svg', 'svg'
 		);
 		svgElem.innerHTML = text;
+		sandboxDoc.body.appendChild(svgElem);
 
 		return new SVGLoader(svgElem, () => {
+			svgElem.remove();
 			sandbox.remove();
 		});
 	}

package/src/Viewport.ts

@@ -170,9 +170,17 @@ export class Viewport {
 	// Returns a Command that transforms the view such that [rect] is visible, and perhaps
 	// centered in the viewport.
 	// Returns null if no transformation is necessary
-	public zoomTo(toMakeVisible: Rect2): Command {
+	public zoomTo(toMakeVisible: Rect2, allowZoomIn: boolean = true, allowZoomOut: boolean = true): Command {
 		let transform = Mat33.identity;
 
+		if (toMakeVisible.w === 0 || toMakeVisible.h === 0) {
+			throw new Error(`${toMakeVisible.toString()} rectangle is empty! Cannot zoom to!`);
+		}
+
+		if (isNaN(toMakeVisible.size.magnitude())) {
+			throw new Error(`${toMakeVisible.toString()} rectangle has NaN size! Cannot zoom to!`);
+		}
+
 		// Try to move the selection within the center 2/3rds of the viewport.
 		const recomputeTargetRect = () => {
 			// transform transforms objects on the canvas. As such, we need to invert it
@@ -187,7 +195,7 @@ export class Viewport {
 		// Ensure that toMakeVisible is at least 1/8th of the visible region.
 		const muchSmallerThanTarget = toMakeVisible.maxDimension / targetRect.maxDimension < 0.125;
 
-		if (largerThanTarget || muchSmallerThanTarget) {
+		if ((largerThanTarget && allowZoomOut) || (muchSmallerThanTarget && allowZoomIn)) {
 			// If larger than the target, ensure that the longest axis is visible.
 			// If smaller, shrink the visible rectangle as much as possible
 			const multiplier = (largerThanTarget ? Math.max : Math.min)(
@@ -210,7 +218,11 @@ export class Viewport {
 
 			transform = transform.rightMul(viewportContentTransform);
 		}
-		
+
+		if (!transform.invertable()) {
+			console.warn('Unable to zoom to ', toMakeVisible, '! Computed transform', transform, 'is singular.');
+			transform = Mat33.identity;
+		}
 
 		return new Viewport.ViewportTransform(transform);
 	}

package/src/components/AbstractComponent.ts

@@ -7,6 +7,9 @@ import Rect2 from '../geometry/Rect2';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import { ImageComponentLocalization } from './localization';
 
+type LoadSaveData = unknown;
+export type LoadSaveDataTable = Record<string, Array<LoadSaveData>>;
+
 export default abstract class AbstractComponent {
 	protected lastChangedTime: number;
 	protected abstract contentBBox: Rect2;
@@ -20,13 +23,25 @@ export default abstract class AbstractComponent {
 		this.zIndex = AbstractComponent.zIndexCounter++;
 	}
 
+	// Get and manage data attached by a loader.
+	private loadSaveData: LoadSaveDataTable = {};
+	public attachLoadSaveData(key: string, data: LoadSaveData) {
+		if (!this.loadSaveData[key]) {
+			this.loadSaveData[key] = [];
+		}
+		this.loadSaveData[key].push(data);
+	}
+	public getLoadSaveData(): LoadSaveDataTable {
+		return this.loadSaveData;
+	}
+
 	public getZIndex(): number {
 		return this.zIndex;
 	}
-
 	public getBBox(): Rect2 {
 		return this.contentBBox;
 	}
+
 	public abstract render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
 	public abstract intersects(lineSegment: LineSegment2): boolean;
 

package/src/components/SVGGlobalAttributesObject.ts

@@ -20,7 +20,6 @@ export default class SVGGlobalAttributesObject extends AbstractComponent {
 			return;
 		}
 
-		console.log('Rendering to SVG.', this.attrs);
 		for (const [ attr, value ] of this.attrs) {
 			canvas.setRootSVGAttribute(attr, value);
 		}

package/src/components/Stroke.ts

@@ -58,7 +58,7 @@ export default class Stroke extends AbstractComponent {
 				canvas.drawPath(part);
 			}
 		}
-		canvas.endObject();
+		canvas.endObject(this.getLoadSaveData());
 	}
 
 	// Grows the bounding box for a given stroke part based on that part's style.

package/src/components/Text.ts

@@ -0,0 +1,136 @@
+import LineSegment2 from '../geometry/LineSegment2';
+import Mat33 from '../geometry/Mat33';
+import Rect2 from '../geometry/Rect2';
+import AbstractRenderer, { RenderingStyle } from '../rendering/renderers/AbstractRenderer';
+import AbstractComponent from './AbstractComponent';
+import { ImageComponentLocalization } from './localization';
+
+export interface TextStyle {
+	size: number;
+	fontFamily: string;
+	fontWeight?: string;
+	fontVariant?: string;
+	renderingStyle: RenderingStyle;
+}
+
+
+export default class Text extends AbstractComponent {
+	protected contentBBox: Rect2;
+
+	public constructor(protected textObjects: Array<string|Text>, private transform: Mat33, private style: TextStyle) {
+		super();
+		this.recomputeBBox();
+	}
+
+	public static applyTextStyles(ctx: CanvasRenderingContext2D, style: TextStyle) {
+		ctx.font =	[
+			(style.size ?? 12) + 'px',
+			style.fontWeight ?? '',
+			`"${style.fontFamily.replace(/["]/g, '\\"')}"`,
+			style.fontWeight
+		].join(' ');
+		ctx.textAlign = 'left';
+	}
+
+	private static textMeasuringCtx: CanvasRenderingContext2D;
+	private static getTextDimens(text: string, style: TextStyle): Rect2 {
+		Text.textMeasuringCtx ??= document.createElement('canvas').getContext('2d')!;
+		const ctx = Text.textMeasuringCtx;
+		Text.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|Text) {
+		if (typeof part === 'string') {
+			const textBBox = Text.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;
+	}
+
+	public render(canvas: AbstractRenderer, _visibleRect?: Rect2): void {
+		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);
+				canvas.popTransform();
+			}
+		}
+		canvas.endObject(this.getLoadSaveData());
+	}
+
+	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 = Text.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;
+	}
+
+	protected applyTransformation(affineTransfm: Mat33): void {
+		this.transform = affineTransfm.rightMul(this.transform);
+		this.recomputeBBox();
+	}
+
+	private 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(' ');
+	}
+
+	public description(localizationTable: ImageComponentLocalization): string {
+		return localizationTable.text(this.getText());
+	}
+}

package/src/components/builders/FreehandLineBuilder.ts

@@ -212,7 +212,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		const lowerBoundary = computeBoundaryCurve(-1, halfVec);
 
 		// If the boundaries have two intersections, increasing the half vector's length could fix this.
-		if (upperBoundary.intersects(lowerBoundary).length === 2) {
+		if (upperBoundary.intersects(lowerBoundary).length > 0) {
 			halfVec = halfVec.times(2);
 		}
 

package/src/components/localization.ts

@@ -1,4 +1,5 @@
 export interface ImageComponentLocalization {
+	text: (text: string)=> string;
 	stroke: string;
     svgObject: string;
 }
@@ -6,4 +7,5 @@ export interface ImageComponentLocalization {
 export const defaultComponentLocalization: ImageComponentLocalization = {
 	stroke: 'Stroke',
 	svgObject: 'SVG Object',
+	text: (text) => `Text object: ${text}`,
 };