js-draw 0.5.0 → 0.7.0

package/src/components/builders/FreehandLineBuilder.ts

@@ -11,21 +11,24 @@ import { ComponentBuilder, ComponentBuilderFactory } from './types';
 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
+	// Don't smooth if input is more than ± 3 pixels from the true curve, do smooth if
 	// less than ±1 px from the curve.
-	const maxSmoothingDist = viewport.getSizeOfPixelOnCanvas() * 7;
+	const maxSmoothingDist = viewport.getSizeOfPixelOnCanvas() * 3;
 	const minSmoothingDist = viewport.getSizeOfPixelOnCanvas();
 
 	return new FreehandLineBuilder(
-		initialPoint, minSmoothingDist, maxSmoothingDist
+		initialPoint, minSmoothingDist, maxSmoothingDist, viewport
 	);
 };
 
 type CurrentSegmentToPathResult = {
-	upperCurve: QuadraticBezierPathCommand,
+	upperCurveCommand: QuadraticBezierPathCommand,
 	lowerToUpperConnector: PathCommand,
 	upperToLowerConnector: PathCommand,
-	lowerCurve: QuadraticBezierPathCommand,
+	lowerCurveCommand: QuadraticBezierPathCommand,
+
+	upperCurve: Bezier,
+	lowerCurve: Bezier,
 };
 
 // Handles stroke smoothing and creates Strokes from user/stylus input.
@@ -47,8 +50,11 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 	// least recent edge.
 	// The lowerSegments form a path that goes from the least recent edge to the most
 	// recent edge.
-	private upperSegments: QuadraticBezierPathCommand[];
-	private lowerSegments: QuadraticBezierPathCommand[];
+	private upperSegments: PathCommand[];
+	private lowerSegments: PathCommand[];
+	private lastUpperBezier: Bezier|null = null;
+	private lastLowerBezier: Bezier|null = null;
+	private parts: RenderablePathSpec[] = [];
 
 	private buffer: Point2[];
 	private lastPoint: StrokeDataPoint;
@@ -69,7 +75,9 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		// Note that the maximum will be smaller if the stroke width is less than
 		// [maxFitAllowed].
 		private minFitAllowed: number,
-		private maxFitAllowed: number
+		private maxFitAllowed: number,
+
+		private viewport: Viewport,
 	) {
 		this.lastPoint = this.startPoint;
 		this.upperSegments = [];
@@ -93,15 +101,19 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		};
 	}
 
-	private previewPath(): RenderablePathSpec|null {
-		let upperPath: QuadraticBezierPathCommand[];
-		let lowerPath: QuadraticBezierPathCommand[];
+	private previewCurrentPath(): RenderablePathSpec|null {
+		const upperPath = this.upperSegments.slice();
+		const lowerPath = this.lowerSegments.slice();
 		let lowerToUpperCap: PathCommand;
 		let pathStartConnector: PathCommand;
 		if (this.currentCurve) {
-			const { upperCurve, lowerToUpperConnector, upperToLowerConnector, lowerCurve } = this.currentSegmentToPath();
-			upperPath = this.upperSegments.concat(upperCurve);
-			lowerPath = this.lowerSegments.concat(lowerCurve);
+			const {
+				upperCurveCommand, lowerToUpperConnector, upperToLowerConnector, lowerCurveCommand
+			} = this.currentSegmentToPath();
+
+			upperPath.push(upperCurveCommand);
+			lowerPath.push(lowerCurveCommand);
+
 			lowerToUpperCap = lowerToUpperConnector;
 			pathStartConnector = this.pathStartConnector ?? upperToLowerConnector;
 		} else {
@@ -109,13 +121,17 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 				return null;
 			}
 
-			upperPath = this.upperSegments.slice();
-			lowerPath = this.lowerSegments.slice();
 			lowerToUpperCap = this.mostRecentConnector;
 			pathStartConnector = this.pathStartConnector;
 		}
-		const startPoint = lowerPath[lowerPath.length - 1].endPoint;
 
+		let startPoint: Point2;
+		const lastLowerSegment = lowerPath[lowerPath.length - 1];
+		if (lastLowerSegment.kind === PathCommandType.LineTo || lastLowerSegment.kind === PathCommandType.MoveTo) {
+			startPoint = lastLowerSegment.point;
+		} else {
+			startPoint = lastLowerSegment.endPoint;
+		}
 
 		return {
 			// Start at the end of the lower curve:
@@ -156,24 +172,37 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		};
 	}
 
+	private previewFullPath(): RenderablePathSpec[]|null {
+		const preview = this.previewCurrentPath();
+		if (preview) {
+			return [ ...this.parts, preview ];
+		}
+		return null;
+	}
+
 	private previewStroke(): Stroke|null {
-		const pathPreview = this.previewPath();
+		const pathPreview = this.previewFullPath();
 
 		if (pathPreview) {
-			return new Stroke([ pathPreview ]);
+			return new Stroke(pathPreview);
 		}
 		return null;
 	}
 
 	public preview(renderer: AbstractRenderer) {
-		const path = this.previewPath();
-		if (path) {
-			renderer.drawPath(path);
+		const paths = this.previewFullPath();
+		if (paths) {
+			const approxBBox = this.viewport.visibleRect;
+			renderer.startObject(approxBBox);
+			for (const path of paths) {
+				renderer.drawPath(path);
+			}
+			renderer.endObject();
 		}
 	}
 
 	public build(): Stroke {
-		if (this.lastPoint && (this.lowerSegments.length === 0 || this.approxCurrentCurveLength() > this.curveStartWidth * 2)) {
+		if (this.lastPoint) {
 			this.finalizeCurrentCurve();
 		}
 		return this.previewStroke()!;
@@ -189,6 +218,74 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		return Viewport.roundPoint(point, minFit);
 	}
 
+	// Returns true if, due to overlap with previous segments, a new RenderablePathSpec should be created.
+	private shouldStartNewSegment(lowerCurve: Bezier, upperCurve: Bezier): boolean {
+		if (!this.lastLowerBezier || !this.lastUpperBezier) {
+			return false;
+		}
+
+		const getIntersection = (curve1: Bezier, curve2: Bezier): Point2|null => {
+			const intersection = curve1.intersects(curve2) as (string[] | null | undefined);
+			if (!intersection || intersection.length === 0) {
+				return null;
+			}
+
+			// From http://pomax.github.io/bezierjs/#intersect-curve,
+			// .intersects returns an array of 't1/t2' pairs, where curve1.at(t1) gives the point.
+			const firstTPair = intersection[0];
+			const match = /^([-0-9.eE]+)\/([-0-9.eE]+)$/.exec(firstTPair);
+
+			if (!match) {
+				throw new Error(
+					`Incorrect format returned by .intersects: ${intersection} should be array of "number/number"!`
+				);
+			}
+
+			const t = parseFloat(match[1]);
+			return Vec2.ofXY(curve1.get(t));
+		};
+
+		const getExitDirection = (curve: Bezier): Vec2 => {
+			return Vec2.ofXY(curve.points[2]).minus(Vec2.ofXY(curve.points[1])).normalized();
+		};
+
+		const getEnterDirection = (curve: Bezier): Vec2 => {
+			return Vec2.ofXY(curve.points[1]).minus(Vec2.ofXY(curve.points[0])).normalized();
+		};
+
+		// Prevent
+		//         /
+		//       / /
+		//      /  /  /| 
+		//    /    /   |
+		//  /          |
+		// where the next stroke and the previous stroke are in different directions.
+		//
+		// Are the exit/enter directions of the previous and current curves in different enough directions?
+		if (getEnterDirection(upperCurve).dot(getExitDirection(this.lastUpperBezier)) < 0.3
+			|| getEnterDirection(lowerCurve).dot(getExitDirection(this.lastLowerBezier)) < 0.3
+
+			// Also handle if the curves exit/enter directions differ
+			|| getEnterDirection(upperCurve).dot(getExitDirection(upperCurve)) < 0
+			|| getEnterDirection(lowerCurve).dot(getExitDirection(lowerCurve)) < 0) {
+			return true;
+		}
+
+		// Check whether the lower curve intersects the other wall:
+		//       /    / ← lower
+		//    / /   /
+		// /   / /
+		//   //
+		// / /
+		const lowerIntersection = getIntersection(lowerCurve, this.lastUpperBezier);
+		const upperIntersection = getIntersection(upperCurve, this.lastLowerBezier);
+		if (lowerIntersection || upperIntersection) {
+			return true;
+		}
+
+		return false;
+	}
+
 	// Returns the distance between the start, control, and end points of the curve.
 	private approxCurrentCurveLength() {
 		if (!this.currentCurve) {
@@ -257,9 +354,23 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 			return;
 		}
 
-		const { upperCurve, lowerToUpperConnector, upperToLowerConnector, lowerCurve } = this.currentSegmentToPath();
+		const {
+			upperCurveCommand, lowerToUpperConnector, upperToLowerConnector, lowerCurveCommand,
+			lowerCurve, upperCurve,
+		} = this.currentSegmentToPath();
 
-		if (this.isFirstSegment) {
+		const shouldStartNew = this.shouldStartNewSegment(lowerCurve, upperCurve);
+		if (shouldStartNew) {
+			const part = this.previewCurrentPath();
+
+			if (part) {
+				this.parts.push(part);
+				this.upperSegments = [];
+				this.lowerSegments = [];
+			}
+		}
+
+		if (this.isFirstSegment || shouldStartNew) {
 			// We draw the upper path (reversed), then the lower path, so we need the
 			// upperToLowerConnector to join the two paths.
 			this.pathStartConnector = upperToLowerConnector;
@@ -269,8 +380,11 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		// upperPath:
 		this.mostRecentConnector = lowerToUpperConnector;
 
-		this.upperSegments.push(upperCurve);
-		this.lowerSegments.push(lowerCurve);
+		this.lowerSegments.push(lowerCurveCommand);
+		this.upperSegments.push(upperCurveCommand);
+
+		this.lastLowerBezier = lowerCurve;
+		this.lastUpperBezier = upperCurve;
 
 		const lastPoint = this.buffer[this.buffer.length - 1];
 		this.lastExitingVec = Vec2.ofXY(
@@ -325,12 +439,14 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 			);
 
 		// Each starts at startPt ± startVec
+		const lowerCurveStartPoint = this.roundPoint(startPt.plus(startVec));
 		const lowerCurveControlPoint = this.roundPoint(controlPoint.plus(halfVec));
 		const lowerCurveEndPoint = this.roundPoint(endPt.plus(endVec));
 		const upperCurveControlPoint = this.roundPoint(controlPoint.minus(halfVec));
 		const upperCurveStartPoint = this.roundPoint(endPt.minus(endVec));
+		const upperCurveEndPoint = this.roundPoint(startPt.minus(startVec));
 
-		const lowerCurve: QuadraticBezierPathCommand = {
+		const lowerCurveCommand: QuadraticBezierPathCommand = {
 			kind: PathCommandType.QuadraticBezierTo,
 			controlPoint: lowerCurveControlPoint,
 			endPoint: lowerCurveEndPoint,
@@ -339,7 +455,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		// From the end of the upperCurve to the start of the lowerCurve:
 		const upperToLowerConnector: LinePathCommand = {
 			kind: PathCommandType.LineTo,
-			point: this.roundPoint(startPt.plus(startVec)),
+			point: lowerCurveStartPoint,
 		};
 
 		// From the end of lowerCurve to the start of upperCurve:
@@ -348,13 +464,19 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 			point: upperCurveStartPoint,
 		};
 
-		const upperCurve: QuadraticBezierPathCommand = {
+		const upperCurveCommand: QuadraticBezierPathCommand = {
 			kind: PathCommandType.QuadraticBezierTo,
 			controlPoint: upperCurveControlPoint,
-			endPoint: this.roundPoint(startPt.minus(startVec)),
+			endPoint: upperCurveEndPoint,
 		};
 
-		return { upperCurve, upperToLowerConnector, lowerToUpperConnector, lowerCurve };
+		const upperCurve = new Bezier(upperCurveStartPoint, upperCurveControlPoint, upperCurveEndPoint);
+		const lowerCurve = new Bezier(lowerCurveStartPoint, lowerCurveControlPoint, lowerCurveEndPoint);
+
+		return {
+			upperCurveCommand, upperToLowerConnector, lowerToUpperConnector, lowerCurveCommand,
+			upperCurve, lowerCurve,
+		};
 	}
 
 	// Compute the direction of the velocity at the end of this.buffer
@@ -397,6 +519,11 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		const prevEndWidth = this.curveEndWidth;
 		this.curveEndWidth = pointRadius;
 
+		if (this.isFirstSegment) {
+			// The start of a curve often lacks accurate pressure information. Update it.
+			this.curveStartWidth = (this.curveStartWidth + pointRadius) / 2;
+		}
+
 		// recompute bbox
 		this.bbox = this.bbox.grownToPoint(newPoint.pos, pointRadius);
 
@@ -413,10 +540,11 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 			console.assert(!isNaN(p1.magnitude()) && !isNaN(p2.magnitude()) && !isNaN(p3.magnitude()), 'Expected !NaN');
 		}
 
+		// If there isn't an entering vector (e.g. because this.isFirstCurve), approximate it.
 		let enteringVec = this.lastExitingVec;
 		if (!enteringVec) {
-			let sampleIdx = Math.ceil(this.buffer.length / 3);
-			if (sampleIdx === 0) {
+			let sampleIdx = Math.ceil(this.buffer.length / 2);
+			if (sampleIdx === 0 || sampleIdx >= this.buffer.length) {
 				sampleIdx = this.buffer.length - 1;
 			}
 

package/src/components/lib.ts

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

package/src/rendering/renderers/CanvasRenderer.ts

@@ -1,5 +1,5 @@
 import Color4 from '../../Color4';
-import Text, { TextStyle } from '../../components/Text';
+import TextComponent, { TextStyle } from '../../components/Text';
 import Mat33 from '../../math/Mat33';
 import Rect2 from '../../math/Rect2';
 import { Point2, Vec2 } from '../../math/Vec2';
@@ -153,7 +153,7 @@ export default class CanvasRenderer extends AbstractRenderer {
 		this.ctx.save();
 		transform = this.getCanvasToScreenTransform().rightMul(transform);
 		this.transformBy(transform);
-		Text.applyTextStyles(this.ctx, style);
+		TextComponent.applyTextStyles(this.ctx, style);
 
 		if (style.renderingStyle.fill.a !== 0) {
 			this.ctx.fillStyle = style.renderingStyle.fill.toHexString();

package/src/rendering/renderers/SVGRenderer.ts

@@ -100,39 +100,64 @@ export default class SVGRenderer extends AbstractRenderer {
 	}
 
 	// Apply [elemTransform] to [elem].
-	private transformFrom(elemTransform: Mat33, elem: SVGElement) {
-		let transform = this.getCanvasToScreenTransform().rightMul(elemTransform);
+	private transformFrom(elemTransform: Mat33, elem: SVGElement, inCanvasSpace: boolean = false) {
+		let transform = !inCanvasSpace ? this.getCanvasToScreenTransform().rightMul(elemTransform) : elemTransform;
 		const translation = transform.transformVec2(Vec2.zero);
 		transform = transform.rightMul(Mat33.translation(translation.times(-1)));
 
-		elem.style.transform = `matrix(
-			${transform.a1}, ${transform.b1},
-			${transform.a2}, ${transform.b2},
-			${transform.a3}, ${transform.b3}
-		)`;
+		if (!transform.eq(Mat33.identity)) {
+			elem.style.transform = `matrix(
+				${transform.a1}, ${transform.b1},
+				${transform.a2}, ${transform.b2},
+				${transform.a3}, ${transform.b3}
+			)`;
+		} else {
+			elem.style.transform = '';
+		}
+
 		elem.setAttribute('x', `${toRoundedString(translation.x)}`);
 		elem.setAttribute('y', `${toRoundedString(translation.y)}`);
 	}
 
+	private textContainer: SVGTextElement|null = null;
+	private textContainerTransform: Mat33|null = null;
 	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();
-
-		if (style.renderingStyle.stroke) {
-			const strokeStyle = style.renderingStyle.stroke;
-			textElem.style.stroke = strokeStyle.color.toHexString();
-			textElem.style.strokeWidth = strokeStyle.width + 'px';
-		}
+		const applyTextStyles = (elem: SVGTextElement|SVGTSpanElement, style: TextStyle) => {
+			elem.style.fontFamily = style.fontFamily;
+			elem.style.fontVariant = style.fontVariant ?? '';
+			elem.style.fontWeight = style.fontWeight ?? '';
+			elem.style.fontSize = style.size + 'px';
+			elem.style.fill = style.renderingStyle.fill.toHexString();
+
+			if (style.renderingStyle.stroke) {
+				const strokeStyle = style.renderingStyle.stroke;
+				elem.style.stroke = strokeStyle.color.toHexString();
+				elem.style.strokeWidth = strokeStyle.width + 'px';
+			}
+		};
+		transform = this.getCanvasToScreenTransform().rightMul(transform);
+
+		if (!this.textContainer) {
+			const container = document.createElementNS(svgNameSpace, 'text');
+			container.appendChild(document.createTextNode(text));
+			this.transformFrom(transform, container, true);
+			applyTextStyles(container, style);
+
+			this.elem.appendChild(container);
+			this.objectElems?.push(container);
+			if (this.objectLevel > 0) {
+				this.textContainer = container;
+				this.textContainerTransform = transform;
+			}
+		} else {
+			const elem = document.createElementNS(svgNameSpace, 'tspan');
+			elem.appendChild(document.createTextNode(text));
+			this.textContainer.appendChild(elem);
 
-		this.elem.appendChild(textElem);
-		this.objectElems?.push(textElem);
+			transform = this.textContainerTransform!.inverse().rightMul(transform);
+			this.transformFrom(transform, elem, true);
+			applyTextStyles(elem, style);
+		}
 	}
 
 	public drawImage(image: RenderableImage) {
@@ -153,6 +178,7 @@ export default class SVGRenderer extends AbstractRenderer {
 		// Only accumulate a path within an object
 		this.lastPathString = [];
 		this.lastPathStyle = null;
+		this.textContainer = null;
 		this.objectElems = [];
 	}
 

package/src/testing/beforeEachFile.ts

@@ -1,3 +1,8 @@
 import loadExpectExtensions from './loadExpectExtensions';
 loadExpectExtensions();
-jest.useFakeTimers();
+jest.useFakeTimers();
+
+// jsdom doesn't support HTMLCanvasElement#getContext — it logs an error
+// to the console. Make it return null so we can handle a non-existent Canvas
+// at runtime (e.g. use something else, if available).
+HTMLCanvasElement.prototype.getContext = () => null;

package/src/toolbar/HTMLToolbar.ts

@@ -5,7 +5,6 @@ import { coloris, init as colorisInit } from '@melloware/coloris';
 import Color4 from '../Color4';
 import { defaultToolbarLocalization, ToolbarLocalization } from './localization';
 import { ActionButtonIcon } from './types';
-import { makeRedoIcon, makeUndoIcon } from './icons';
 import SelectionTool from '../tools/SelectionTool/SelectionTool';
 import PanZoomTool from '../tools/PanZoom';
 import TextTool from '../tools/TextTool';
@@ -156,13 +155,13 @@ export default class HTMLToolbar {
 
 		const undoButton = this.addActionButton({
 			label: this.localizationTable.undo,
-			icon: makeUndoIcon()
+			icon: this.editor.icons.makeUndoIcon()
 		}, () => {
 			this.editor.history.undo();
 		}, undoRedoGroup);
 		const redoButton = this.addActionButton({
 			label: this.localizationTable.redo,
-			icon: makeRedoIcon(),
+			icon: this.editor.icons.makeRedoIcon(),
 		}, () => {
 			this.editor.history.redo();
 		}, undoRedoGroup);