js-draw 0.7.2 → 0.8.0

package/src/components/util/StrokeSmoother.ts

@@ -0,0 +1,290 @@
+import { Bezier } from 'bezier-js';
+import { Point2, Vec2 } from '../../math/Vec2';
+import Rect2 from '../../math/Rect2';
+import LineSegment2 from '../../math/LineSegment2';
+import { StrokeDataPoint } from '../../types';
+
+export interface Curve {
+    startPoint: Vec2;
+    startWidth: number;
+
+    controlPoint: Vec2;
+
+    endWidth: number;
+    endPoint: Vec2;
+}
+
+type OnCurveAddedCallback = (curve: Curve|null)=>void;
+
+// Handles stroke smoothing
+export class StrokeSmoother {
+	private isFirstSegment: boolean = true;
+
+	private buffer: Point2[];
+	private lastPoint: StrokeDataPoint;
+	private lastExitingVec: Vec2|null = null;
+	private currentCurve: Bezier|null = null;
+	private curveStartWidth: number;
+	private curveEndWidth: number;
+
+	// Stroke smoothing and tangent approximation
+	private momentum: Vec2;
+	private bbox: Rect2;
+
+	public constructor(
+		private startPoint: StrokeDataPoint,
+
+		// Maximum distance from the actual curve (irrespective of stroke width)
+		// for which a point is considered 'part of the curve'.
+		// Note that the maximum will be smaller if the stroke width is less than
+		// [maxFitAllowed].
+		private minFitAllowed: number,
+		private maxFitAllowed: number,
+
+        private onCurveAdded: OnCurveAddedCallback,
+	) {
+		this.lastPoint = this.startPoint;
+
+		this.buffer = [this.startPoint.pos];
+		this.momentum = Vec2.zero;
+		this.currentCurve = null;
+		this.curveStartWidth = startPoint.width;
+
+		this.bbox = new Rect2(this.startPoint.pos.x, this.startPoint.pos.y, 0, 0);
+	}
+
+	public getBBox(): Rect2 {
+		return this.bbox;
+	}
+
+	public preview(): Curve|null {
+		if (!this.currentCurve) {
+			return null;
+		}
+
+		return this.currentSegmentToPath();
+	}
+
+	// Returns the distance between the start, control, and end points of the curve.
+	private approxCurrentCurveLength() {
+		if (!this.currentCurve) {
+			return 0;
+		}
+		const startPt = Vec2.ofXY(this.currentCurve.points[0]);
+		const controlPt = Vec2.ofXY(this.currentCurve.points[1]);
+		const endPt = Vec2.ofXY(this.currentCurve.points[2]);
+		const toControlDist = startPt.minus(controlPt).length();
+		const toEndDist = endPt.minus(controlPt).length();
+		return toControlDist + toEndDist;
+	}
+
+	public finalizeCurrentCurve() {
+		// Case where no points have been added
+		if (!this.currentCurve) {
+			return;
+		}
+
+		this.onCurveAdded(this.currentSegmentToPath());
+
+		const lastPoint = this.buffer[this.buffer.length - 1];
+		this.lastExitingVec = Vec2.ofXY(
+			this.currentCurve.points[2]
+		).minus(Vec2.ofXY(this.currentCurve.points[1]));
+		console.assert(this.lastExitingVec.magnitude() !== 0, 'lastExitingVec has zero length!');
+
+		// Use the last two points to start a new curve (the last point isn't used
+		// in the current curve and we want connected curves to share end points)
+		this.buffer = [
+			this.buffer[this.buffer.length - 2], lastPoint,
+		];
+		this.currentCurve = null;
+	}
+
+	// Returns [upper curve, connector, lower curve]
+	private currentSegmentToPath() {
+		if (this.currentCurve == null) {
+			throw new Error('Invalid State: currentCurve is null!');
+		}
+
+		const startVec = Vec2.ofXY(this.currentCurve.normal(0)).normalized();
+
+		if (!isFinite(startVec.magnitude())) {
+			throw new Error(`startVec(${startVec}) is NaN or ∞`);
+		}
+
+		const startPt = Vec2.ofXY(this.currentCurve.get(0));
+		const endPt = Vec2.ofXY(this.currentCurve.get(1));
+		const controlPoint = Vec2.ofXY(this.currentCurve.points[1]);
+
+		return {
+			startPoint: startPt,
+			controlPoint,
+			endPoint: endPt,
+			startWidth: this.curveStartWidth,
+			endWidth: this.curveEndWidth,
+		};
+	}
+
+	// Compute the direction of the velocity at the end of this.buffer
+	private computeExitingVec(): Vec2 {
+		return this.momentum.normalized().times(this.lastPoint.width / 2);
+	}
+
+	public addPoint(newPoint: StrokeDataPoint) {
+		if (this.lastPoint) {
+			// Ignore points that are identical
+			const fuzzEq = 1e-10;
+			const deltaTime = newPoint.time - this.lastPoint.time;
+			if (newPoint.pos.eq(this.lastPoint.pos, fuzzEq) || deltaTime === 0) {
+				return;
+			} else if (isNaN(newPoint.pos.magnitude())) {
+				console.warn('Discarding NaN point.', newPoint);
+				return;
+			}
+
+			const threshold = Math.min(this.lastPoint.width, newPoint.width) / 3;
+			const shouldSnapToInitial = this.startPoint.pos.minus(newPoint.pos).magnitude() < threshold
+				&& this.isFirstSegment;
+
+			// Snap to the starting point if the stroke is contained within a small ball centered
+			// at the starting point.
+			// This allows us to create a circle/dot at the start of the stroke.
+			if (shouldSnapToInitial) {
+				return;
+			}
+
+			const velocity = newPoint.pos.minus(this.lastPoint.pos).times(1 / (deltaTime) * 1000);
+			this.momentum = this.momentum.lerp(velocity, 0.9);
+		}
+
+		const lastPoint = this.lastPoint ?? newPoint;
+		this.lastPoint = newPoint;
+
+		this.buffer.push(newPoint.pos);
+		const pointRadius = newPoint.width / 2;
+		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);
+
+		if (this.currentCurve === null) {
+			const p1 = lastPoint.pos;
+			const p2 = lastPoint.pos.plus(this.lastExitingVec ?? Vec2.unitX);
+			const p3 = newPoint.pos;
+
+			// Quadratic Bézier curve
+			this.currentCurve = new Bezier(
+				p1.xy, p2.xy, p3.xy
+			);
+			this.curveStartWidth = lastPoint.width / 2;
+			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 / 2);
+			if (sampleIdx === 0 || sampleIdx >= this.buffer.length) {
+				sampleIdx = this.buffer.length - 1;
+			}
+
+			enteringVec = this.buffer[sampleIdx].minus(this.buffer[0]);
+		}
+
+		let exitingVec = this.computeExitingVec();
+
+		// Find the intersection between the entering vector and the exiting vector
+		const maxRelativeLength = 2.2;
+		const segmentStart = this.buffer[0];
+		const segmentEnd = newPoint.pos;
+		const startEndDist = segmentEnd.minus(segmentStart).magnitude();
+		const maxControlPointDist = maxRelativeLength * startEndDist;
+
+		// Exit in cases where we would divide by zero
+		if (maxControlPointDist === 0 || exitingVec.magnitude() === 0 || !isFinite(exitingVec.magnitude())) {
+			return;
+		}
+
+		console.assert(isFinite(enteringVec.magnitude()), 'Pre-normalized enteringVec has NaN or ∞ magnitude!');
+
+		enteringVec = enteringVec.normalized();
+		exitingVec = exitingVec.normalized();
+
+		console.assert(isFinite(enteringVec.magnitude()), 'Normalized enteringVec has NaN or ∞ magnitude!');
+
+		const lineFromStart = new LineSegment2(
+			segmentStart,
+			segmentStart.plus(enteringVec.times(maxControlPointDist))
+		);
+		const lineFromEnd = new LineSegment2(
+			segmentEnd.minus(exitingVec.times(maxControlPointDist)),
+			segmentEnd
+		);
+		const intersection = lineFromEnd.intersection(lineFromStart);
+
+		// Position the control point at this intersection
+		let controlPoint: Point2|null = null;
+		if (intersection) {
+			controlPoint = intersection.point;
+		}
+
+		// No intersection or the intersection is one of the end points?
+		if (!controlPoint || segmentStart.eq(controlPoint) || segmentEnd.eq(controlPoint)) {
+			// Position the control point closer to the first -- the connecting
+			// segment will be roughly a line.
+			controlPoint = segmentStart.plus(enteringVec.times(startEndDist / 3));
+		}
+
+		console.assert(!segmentStart.eq(controlPoint, 1e-11), 'Start and control points are equal!');
+		console.assert(!controlPoint.eq(segmentEnd, 1e-11), 'Control and end points are equal!');
+
+		const prevCurve = this.currentCurve;
+		this.currentCurve = new Bezier(segmentStart.xy, controlPoint.xy, segmentEnd.xy);
+
+		if (isNaN(Vec2.ofXY(this.currentCurve.normal(0)).magnitude())) {
+			console.error('NaN normal at 0. Curve:', this.currentCurve);
+			this.currentCurve = prevCurve;
+		}
+
+		// Should we start making a new curve? Check whether all buffer points are within
+		// ±strokeWidth of the curve.
+		const curveMatchesPoints = (curve: Bezier): boolean => {
+			for (const point of this.buffer) {
+				const proj =
+					Vec2.ofXY(curve.project(point.xy));
+				const dist = proj.minus(point).magnitude();
+
+				const minFit = Math.max(
+					Math.min(this.curveStartWidth, this.curveEndWidth) / 3,
+					this.minFitAllowed
+				);
+				if (dist > minFit || dist > this.maxFitAllowed) {
+					return false;
+				}
+			}
+			return true;
+		};
+
+		if (this.buffer.length > 3 && this.approxCurrentCurveLength() > this.curveStartWidth) {
+			if (!curveMatchesPoints(this.currentCurve)) {
+				// Use a curve that better fits the points
+				this.currentCurve = prevCurve;
+				this.curveEndWidth = prevEndWidth;
+
+				// Reset the last point -- the current point was not added to the curve.
+				this.lastPoint = lastPoint;
+
+				this.finalizeCurrentCurve();
+				return;
+			}
+		}
+	}
+}
+
+export default StrokeSmoother;

package/src/math/Mat33.ts

@@ -274,6 +274,11 @@ export default class Mat33 {
 		);
 	}
 
+	/** Estimate the scale factor of this matrix (based on the first row). */
+	public getScaleFactor() {
+		return Math.hypot(this.a1, this.a2);
+	}
+
 	/** Constructs a 3x3 translation matrix (for translating `Vec2`s) */
 	public static translation(amount: Vec2): Mat33 {
 		// When transforming Vec2s by a 3x3 matrix, we give the input

package/src/math/Path.test.ts

@@ -146,4 +146,29 @@ describe('Path', () => {
 			).toBe(false);
 		});
 	});
+
+	describe('roughlyIntersects', () => {
+		it('should consider parts outside bbox of individual parts of a line as not intersecting', () => {
+			const path = Path.fromString(`
+				M10,10
+				L20,20
+				L100,21
+			`);
+			expect(
+				path.roughlyIntersects(new Rect2(0, 0, 50, 50))
+			).toBe(true);
+			expect(
+				path.roughlyIntersects(new Rect2(0, 0, 5, 5))
+			).toBe(false);
+			expect(
+				path.roughlyIntersects(new Rect2(8, 22, 1, 1))
+			).toBe(false);
+			expect(
+				path.roughlyIntersects(new Rect2(21, 11, 1, 1))
+			).toBe(false);
+			expect(
+				path.roughlyIntersects(new Rect2(50, 19, 1, 2))
+			).toBe(true);
+		});
+	});
 });

package/src/math/Path.ts

@@ -267,6 +267,51 @@ export default class Path {
 		]);
 	}
 
+	private getEndPoint() {
+		if (this.parts.length === 0) {
+			return this.startPoint;
+		}
+		const lastPart = this.parts[this.parts.length - 1];
+		if (lastPart.kind === PathCommandType.QuadraticBezierTo || lastPart.kind === PathCommandType.CubicBezierTo) {
+			return lastPart.endPoint;
+		} else {
+			return lastPart.point;
+		}
+	}
+
+	public roughlyIntersects(rect: Rect2, strokeWidth: number = 0) {
+		if (this.parts.length === 0) {
+			return rect.containsPoint(this.startPoint);
+		}
+		const isClosed = this.startPoint.eq(this.getEndPoint());
+        
+		if (isClosed && strokeWidth == 0) {
+			return this.closedRoughlyIntersects(rect);
+		}
+
+		if (rect.containsRect(this.bbox)) {
+			return true;
+		}
+
+		// Does the rectangle intersect the bounding boxes of any of this' parts?
+		let startPoint = this.startPoint;
+		for (const part of this.parts) {
+			const bbox = Path.computeBBoxForSegment(startPoint, part).grownBy(strokeWidth);
+
+			if (part.kind === PathCommandType.LineTo || part.kind === PathCommandType.MoveTo) {
+				startPoint = part.point;
+			} else {
+				startPoint = part.endPoint;
+			}
+
+			if (rect.intersects(bbox)) {
+				return true;
+			}
+		}
+
+		return false;
+	}
+
 	// Treats this as a closed path and returns true if part of `rect` is roughly within
 	// this path's interior.
 	//

package/src/rendering/renderers/CanvasRenderer.ts

@@ -94,6 +94,8 @@ export default class CanvasRenderer extends AbstractRenderer {
 		if (style.stroke) {
 			this.ctx.strokeStyle = style.stroke.color.toHexString();
 			this.ctx.lineWidth = this.getSizeOfCanvasPixelOnScreen() * style.stroke.width;
+			this.ctx.lineCap = 'round';
+			this.ctx.lineJoin = 'round';
 			this.ctx.stroke();
 		}
 

package/src/rendering/renderers/SVGRenderer.ts

@@ -11,6 +11,8 @@ import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
 import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
 
+export const renderedStylesheetId = 'js-draw-style-sheet';
+
 const svgNameSpace = 'http://www.w3.org/2000/svg';
 export default class SVGRenderer extends AbstractRenderer {
 	private lastPathStyle: RenderingStyle|null = null;
@@ -23,6 +25,23 @@ export default class SVGRenderer extends AbstractRenderer {
 	public constructor(private elem: SVGSVGElement, viewport: Viewport, private sanitize: boolean = false) {
 		super(viewport);
 		this.clear();
+
+		this.addStyleSheet();
+	}
+
+	private addStyleSheet() {
+		if (!this.elem.querySelector(`#${renderedStylesheetId}`)) {
+			// Default to rounded strokes.
+			const styleSheet = document.createElementNS('http://www.w3.org/2000/svg', 'style');
+			styleSheet.innerHTML = `
+				path {
+					stroke-linecap: round;
+					stroke-linejoin: round;
+				}
+			`.replace(/\s+/g, '');
+			styleSheet.setAttribute('id', renderedStylesheetId);
+			this.elem.appendChild(styleSheet);
+		}
 	}
 
 	// Sets an attribute on the root SVG element.
@@ -252,6 +271,11 @@ export default class SVGRenderer extends AbstractRenderer {
 			return;
 		}
 
+		// Don't add multiple copies of the default stylesheet.
+		if (elem.tagName.toLowerCase() === 'style' && elem.getAttribute('id') === renderedStylesheetId) {
+			return;
+		}
+
 		this.elem.appendChild(elem.cloneNode(true));
 	}
 

package/src/toolbar/localization.ts

@@ -8,6 +8,7 @@ export interface ToolbarLocalization {
 	linePen: string;
 	arrowPen: string;
 	freehandPen: string;
+	pressureSensitiveFreehandPen: string;
 	selectObjectType: string;
 	colorLabel: string;
 	pen: string;
@@ -55,6 +56,7 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 	touchPanning: 'Touchscreen panning',
 
 	freehandPen: 'Freehand',
+	pressureSensitiveFreehandPen: 'Freehand (pressure sensitive)',
 	arrowPen: 'Arrow',
 	linePen: 'Line',
 	outlinedRectanglePen: 'Outlined rectangle',

package/src/toolbar/widgets/PenToolWidget.ts

@@ -1,5 +1,6 @@
 import { makeArrowBuilder } from '../../components/builders/ArrowBuilder';
 import { makeFreehandLineBuilder } from '../../components/builders/FreehandLineBuilder';
+import { makePressureSensitiveFreehandLineBuilder } from '../../components/builders/PressureSensitiveFreehandLineBuilder';
 import { makeLineBuilder } from '../../components/builders/LineBuilder';
 import { makeFilledRectangleBuilder, makeOutlinedRectangleBuilder } from '../../components/builders/RectangleBuilder';
 import { ComponentBuilderFactory } from '../../components/builders/types';
@@ -31,6 +32,10 @@ export default class PenToolWidget extends BaseToolWidget {
 
 		// Default pen types
 		this.penTypes = [
+			{
+				name: localization.pressureSensitiveFreehandPen,
+				factory: makePressureSensitiveFreehandLineBuilder,
+			},
 			{
 				name: localization.freehandPen,
 				factory: makeFreehandLineBuilder,
@@ -72,7 +77,7 @@ export default class PenToolWidget extends BaseToolWidget {
 
 	protected createIcon(): Element {
 		const strokeFactory = this.tool.getStrokeFactory();
-		if (strokeFactory === makeFreehandLineBuilder) {
+		if (strokeFactory === makeFreehandLineBuilder || strokeFactory === makePressureSensitiveFreehandLineBuilder) {
 			// Use a square-root scale to prevent the pen's tip from overflowing.
 			const scale = Math.round(Math.sqrt(this.tool.getThickness()) * 4);
 			const color = this.tool.getColor();

package/src/tools/Pen.test.ts

@@ -144,7 +144,7 @@ describe('Pen', () => {
 		const elems = editor.image.getElementsIntersectingRegion(new Rect2(0, 0, 1000, 1000));
 		expect(elems).toHaveLength(1);
 
-		expect(elems[0].getBBox().topLeft).objEq(Vec2.of(420, 24), 8); // ± 8
+		expect(elems[0].getBBox().topLeft).objEq(Vec2.of(420, 24), 32); // ± 32
 		expect(elems[0].getBBox().bottomRight).objEq(Vec2.of(420, 340), 25); // ± 25
 	});
-});
+});

package/src/tools/Pen.ts

@@ -14,13 +14,13 @@ export interface PenStyle {
 
 export default class Pen extends BaseTool {
 	protected builder: ComponentBuilder|null = null;
-	protected builderFactory: ComponentBuilderFactory = makeFreehandLineBuilder;
 	private lastPoint: StrokeDataPoint|null = null;
 
 	public constructor(
 		private editor: Editor,
 		description: string,
 		private style: PenStyle,
+		private builderFactory: ComponentBuilderFactory = makeFreehandLineBuilder,
 	) {
 		super(editor.notifier, description);
 	}

package/src/tools/SelectionTool/Selection.ts

@@ -37,6 +37,8 @@ export default class Selection {
 	private container: HTMLElement;
 	private backgroundElem: HTMLElement;
 
+	private hasParent: boolean = true;
+
 	public constructor(startPoint: Point2, private editor: Editor) {
 		this.originalRegion = new Rect2(startPoint.x, startPoint.y, 0, 0);
 		this.transformers = {
@@ -155,7 +157,7 @@ export default class Selection {
 	public setTransform(transform: Mat33, preview: boolean = true) {
 		this.transform = transform;
 
-		if (preview) {
+		if (preview && this.hasParent) {
 			this.previewTransformCmds();
 			this.scrollTo();
 		}
@@ -329,6 +331,11 @@ export default class Selection {
 
 	// @internal
 	public updateUI() {
+		// Don't update old selections.
+		if (!this.hasParent) {
+			return;
+		}
+
 		// marginLeft, marginTop: Display relative to the top left of the selection overlay.
 		// left, top don't work for this.
 		this.backgroundElem.style.marginLeft = `${this.screenRegion.topLeft.x}px`;
@@ -428,6 +435,7 @@ export default class Selection {
 		}
 
 		elem.appendChild(this.container);
+		this.hasParent = true;
 	}
 
 	public setToPoint(point: Point2) {
@@ -440,6 +448,7 @@ export default class Selection {
 			this.container.remove();
 		}
 		this.originalRegion = Rect2.empty;
+		this.hasParent = false;
 	}
 
 	public setSelectedObjects(objects: AbstractComponent[], bbox: Rect2) {

package/src/tools/ToolController.ts

@@ -14,6 +14,7 @@ import PipetteTool from './PipetteTool';
 import ToolSwitcherShortcut from './ToolSwitcherShortcut';
 import PasteHandler from './PasteHandler';
 import ToolbarShortcutHandler from './ToolbarShortcutHandler';
+import { makePressureSensitiveFreehandLineBuilder } from '../components/builders/PressureSensitiveFreehandLineBuilder';
 
 export default class ToolController {
 	private tools: BaseTool[];
@@ -34,7 +35,7 @@ export default class ToolController {
 			new Pen(editor, localization.penTool(2), { color: Color4.clay, thickness: 4 }),
 			
 			// Highlighter-like pen with width=64
-			new Pen(editor, localization.penTool(3), { color: Color4.ofRGBA(1, 1, 0, 0.5), thickness: 64 }),
+			new Pen(editor, localization.penTool(3), { color: Color4.ofRGBA(1, 1, 0, 0.5), thickness: 64 }, makePressureSensitiveFreehandLineBuilder),
 			
 			new Eraser(editor, localization.eraserTool),
 			new SelectionTool(editor, localization.selectionTool),