js-draw 0.0.1

package/src/SVGLoader.ts

@@ -0,0 +1,230 @@
+import Color4 from './Color4';
+import AbstractComponent from './components/AbstractComponent';
+import Stroke from './components/Stroke';
+import UnknownSVGObject from './components/UnknownSVGObject';
+import Path from './geometry/Path';
+import Rect2 from './geometry/Rect2';
+import { RenderablePathSpec, RenderingStyle } from './rendering/AbstractRenderer';
+import { ComponentAddedListener, ImageLoader, OnProgressListener } from './types';
+
+type OnFinishListener = ()=> void;
+
+// Size of a loaded image if no size is specified.
+export const defaultSVGViewRect = new Rect2(0, 0, 500, 500);
+
+export default class SVGLoader implements ImageLoader {
+	private onAddComponent: ComponentAddedListener|null = null;
+	private onProgress: OnProgressListener|null = null;
+	private processedCount: number = 0;
+	private totalToProcess: number = 0;
+	private rootViewBox: Rect2|null;
+
+	private constructor(private source: SVGSVGElement, private onFinish?: OnFinishListener) {
+	}
+
+	private getStyle(node: SVGElement) {
+		const style: RenderingStyle = {
+			fill: Color4.transparent,
+		};
+
+		const fillAttribute = node.getAttribute('fill') ?? node.style.fill;
+		if (fillAttribute) {
+			try {
+				style.fill = Color4.fromString(fillAttribute);
+			} catch (e) {
+				console.error('Unknown fill color,', fillAttribute);
+			}
+		}
+
+		const strokeAttribute = node.getAttribute('stroke') ?? node.style.stroke;
+		const strokeWidthAttr = node.getAttribute('stroke-width') ?? node.style.strokeWidth;
+		if (strokeAttribute) {
+			try {
+				let width = parseFloat(strokeWidthAttr ?? '1');
+				if (!isFinite(width)) {
+					width = 0;
+				}
+
+				style.stroke = {
+					width,
+					color: Color4.fromString(strokeAttribute),
+				};
+			} catch (e) {
+				console.error('Error parsing stroke data:', e);
+			}
+		}
+
+		return style;
+	}
+
+	private strokeDataFromElem(node: SVGPathElement): RenderablePathSpec[] {
+		const result: RenderablePathSpec[] = [];
+		const pathData = node.getAttribute('d') ?? '';
+		const style = this.getStyle(node);
+
+		// Break the path into chunks at each moveTo ('M') command:
+		const parts = pathData.split('M');
+		let isFirst = true;
+		for (const part of parts) {
+			if (part !== '') {
+				// We split the path by moveTo commands, so add the 'M' back in
+				// if it was present.
+				const current = !isFirst ? `M${part}` : part;
+				const path = Path.fromString(current);
+				const spec = path.toRenderable(style);
+				result.push(spec);
+			}
+
+			isFirst = false;
+		}
+
+		return result;
+	}
+
+	// Adds a stroke with a single path
+	private addPath(node: SVGPathElement) {
+		let elem: AbstractComponent;
+		try {
+			const strokeData = this.strokeDataFromElem(node);
+			elem = new Stroke(strokeData);
+		} catch (e) {
+			console.error(
+				'Invalid path in node', node,
+				'\nError:', e,
+				'\nAdding as an unknown object.'
+			);
+
+			elem = new UnknownSVGObject(node);
+		}
+		this.onAddComponent?.(elem);
+	}
+
+	private addUnknownNode(node: SVGElement) {
+		const component = new UnknownSVGObject(node);
+		this.onAddComponent?.(component);
+	}
+
+	private updateViewBox(node: SVGSVGElement) {
+		const viewBoxAttr = node.getAttribute('viewBox');
+		if (this.rootViewBox || !viewBoxAttr) {
+			return;
+		}
+
+		const components = viewBoxAttr.split(/[ \t,]/);
+		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)) {
+			return;
+		}
+
+		this.rootViewBox = new Rect2(x, y, width, height);
+	}
+
+	private async visit(node: Element) {
+		this.totalToProcess += node.childElementCount;
+
+		switch (node.tagName.toLowerCase()) {
+		case 'g':
+			// Continue -- visit the node's children.
+			break;
+		case 'path':
+			this.addPath(node as SVGPathElement);
+			break;
+		case 'svg':
+			this.updateViewBox(node as SVGSVGElement);
+			break;
+		default:
+			console.warn('Unknown SVG element,', node);
+			if (!(node instanceof SVGElement)) {
+				console.warn('Element', node, 'is not an SVGElement! Continuing anyway.');
+			}
+
+			this.addUnknownNode(node as SVGElement);
+			return;
+		}
+
+		for (const child of node.children) {
+			await this.visit(child);
+		}
+
+		this.processedCount ++;
+		await this.onProgress?.(this.processedCount, this.totalToProcess);
+	}
+
+	public async start(
+		onAddComponent: ComponentAddedListener, onProgress: OnProgressListener
+	): Promise<Rect2> {
+		this.onAddComponent = onAddComponent;
+		this.onProgress = onProgress;
+
+		// Estimate the number of tags to process.
+		this.totalToProcess = this.source.childElementCount;
+		this.processedCount = 0;
+
+		this.rootViewBox = null;
+		await this.visit(this.source);
+
+		const viewBox = this.rootViewBox;
+		let result = defaultSVGViewRect;
+
+		if (viewBox) {
+			result = Rect2.of(viewBox);
+		}
+
+		this.onFinish?.();
+		return result;
+	}
+
+	// TODO: Handling unsafe data! Tripple-check that this is secure!
+	public static fromString(text: string): SVGLoader {
+		const sandbox = document.createElement('iframe');
+		sandbox.src = 'about:blank';
+		sandbox.setAttribute('sandbox', 'allow-same-origin');
+		sandbox.setAttribute('csp', 'default-src \'about:blank\'');
+		sandbox.style.display = 'none';
+
+		// Required to access the frame's DOM. See https://stackoverflow.com/a/17777943/17055750
+		document.body.appendChild(sandbox);
+
+		if (!sandbox.hasAttribute('sandbox')) {
+			sandbox.remove();
+			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();
+		sandboxDoc.write(`
+			<!DOCTYPE html>
+			<html>
+				<head>
+					<title>SVG Loading Sandbox</title>
+				</head>
+				<body>
+					<script>
+						console.error('JavaScript should not be able to run here!');
+						throw new Error(
+							'The SVG sandbox is broken! Please double-check the sandboxing setting.'
+						);
+					</script>
+				</body>
+			</html>
+		`);
+		sandboxDoc.close();
+
+		const svgElem = sandboxDoc.createElementNS(
+			'http://www.w3.org/2000/svg', 'svg'
+		);
+		svgElem.innerHTML = text;
+
+		return new SVGLoader(svgElem, () => {
+			sandbox.remove();
+		});
+	}
+}

package/src/StrokeBuilder.ts

@@ -0,0 +1,362 @@
+import Color4 from './Color4';
+import { Bezier } from 'bezier-js';
+import { RenderingStyle, RenderablePathSpec } from './rendering/AbstractRenderer';
+import { Point2, Vec2 } from './geometry/Vec2';
+import Rect2 from './geometry/Rect2';
+import { PathCommand, PathCommandType } from './geometry/Path';
+import LineSegment2 from './geometry/LineSegment2';
+import Stroke from './components/Stroke';
+import Viewport from './Viewport';
+
+export interface StrokeDataPoint {
+	pos: Point2;
+	width: number;
+	time: number;
+	color: Color4;
+}
+
+// Handles stroke smoothing and creates Strokes from user/stylus input.
+export default class StrokeBuilder {
+	private segments: RenderablePathSpec[];
+	private buffer: Point2[];
+	private lastPoint: StrokeDataPoint;
+	private lastExitingVec: Vec2;
+	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
+	) {
+		this.lastPoint = this.startPoint;
+		this.segments = [];
+		this.buffer = [this.startPoint.pos];
+		this.momentum = Vec2.zero;
+		this.currentCurve = null;
+
+		this.bbox = new Rect2(this.startPoint.pos.x, this.startPoint.pos.y, 0, 0);
+	}
+
+	public getBBox(): Rect2 {
+		return this.bbox;
+	}
+
+	private getRenderingStyle(): RenderingStyle {
+		return {
+			fill: this.lastPoint.color ?? null,
+		};
+	}
+
+	// Get the segments that make up this' path. Can be called after calling build()
+	public preview(): RenderablePathSpec[] {
+		if (this.currentCurve && this.lastPoint) {
+			const currentPath = this.currentSegmentToPath();
+			return this.segments.concat(currentPath);
+		}
+
+		return this.segments;
+	}
+
+	public build(): Stroke {
+		if (this.lastPoint) {
+			this.finalizeCurrentCurve();
+		}
+		return new Stroke(
+			this.segments,
+		);
+	}
+
+	private roundPoint(point: Point2): Point2 {
+		return Viewport.roundPoint(point, this.minFitAllowed);
+	}
+
+	private finalizeCurrentCurve() {
+		// Case where no points have been added
+		if (!this.currentCurve) {
+			// Don't create a circle around the initial point if the stroke has more than one point.
+			if (this.segments.length > 0) {
+				return;
+			}
+
+			const width = Viewport.roundPoint(this.startPoint.width / 3, this.minFitAllowed);
+			const center = this.roundPoint(this.startPoint.pos);
+
+			// Draw a circle-ish shape around the start point
+			this.segments.push({
+				// Start on the right, cycle clockwise:
+				//    |
+				//  ----- ←
+				//    |
+				startPoint: this.startPoint.pos.plus(Vec2.of(width, 0)),
+				commands: [
+					{
+						kind: PathCommandType.QuadraticBezierTo,
+						controlPoint: center.plus(Vec2.of(width, width)),
+
+						// Bottom of the circle
+						//    |
+						//  -----
+						//    |
+						//    ↑
+						endPoint: center.plus(Vec2.of(0, width)),
+					},
+					{
+						kind: PathCommandType.QuadraticBezierTo,
+						controlPoint: center.plus(Vec2.of(-width, width)),
+						endPoint: center.plus(Vec2.of(-width, 0)),
+					},
+					{
+						kind: PathCommandType.QuadraticBezierTo,
+						controlPoint: center.plus(Vec2.of(-width, -width)),
+						endPoint: center.plus(Vec2.of(0, -width)),
+					},
+					{
+						kind: PathCommandType.QuadraticBezierTo,
+						controlPoint: center.plus(Vec2.of(width, -width)),
+						endPoint: center.plus(Vec2.of(width, 0)),
+					},
+				],
+				style: this.getRenderingStyle(),
+			});
+			return;
+		}
+
+		this.segments.push(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);
+
+		// 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;
+	}
+
+	private currentSegmentToPath(): RenderablePathSpec {
+		if (this.currentCurve == null) {
+			throw new Error('Invalid State: currentCurve is null!');
+		}
+
+		let startVec = Vec2.ofXY(this.currentCurve.normal(0)).normalized();
+		let endVec = Vec2.ofXY(this.currentCurve.normal(1)).normalized();
+
+		startVec = startVec.times(this.curveStartWidth / 2);
+		endVec = endVec.times(this.curveEndWidth / 2);
+
+		if (isNaN(startVec.magnitude())) {
+			// TODO: This can happen when events are too close together. Find out why and
+			// 		 fix.
+			console.error('startVec is NaN', startVec, endVec, this.currentCurve);
+			startVec = endVec;
+		}
+
+		const startPt = Vec2.ofXY(this.currentCurve.get(0));
+		const endPt = Vec2.ofXY(this.currentCurve.get(1));
+		const controlPoint = Vec2.ofXY(this.currentCurve.points[1]);
+
+		// Approximate the normal at the location of the control point
+		let projectionT = this.currentCurve.project(controlPoint.xy).t;
+
+		if (!projectionT) {
+			if (startPt.minus(controlPoint).magnitudeSquared() < endPt.minus(controlPoint).magnitudeSquared()) {
+				projectionT = 0.1;
+			} else {
+				projectionT = 0.9;
+			}
+		}
+
+		const halfVec = Vec2.ofXY(this.currentCurve.normal(projectionT))
+			.normalized().times(
+				this.curveStartWidth / 2 * projectionT
+				+ this.curveEndWidth / 2 * (1 - projectionT)
+			);
+
+		const pathCommands: PathCommand[] = [
+			{
+				kind: PathCommandType.QuadraticBezierTo,
+				controlPoint: this.roundPoint(controlPoint.plus(halfVec)),
+				endPoint: this.roundPoint(endPt.plus(endVec)),
+			},
+
+			{
+				kind: PathCommandType.LineTo,
+				point: this.roundPoint(endPt.minus(endVec)),
+			},
+
+			{
+				kind: PathCommandType.QuadraticBezierTo,
+				controlPoint: this.roundPoint(controlPoint.minus(halfVec)),
+				endPoint: this.roundPoint(startPt.minus(startVec)),
+			},
+		];
+
+		return {
+			startPoint: this.roundPoint(startPt.plus(startVec)),
+			commands: pathCommands,
+			style: this.getRenderingStyle(),
+		};
+	}
+
+	// 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) {
+				console.warn('Discarding identical point');
+				return;
+			} else if (isNaN(newPoint.pos.magnitude())) {
+				console.warn('Discarding NaN point.', newPoint);
+				return;
+			}
+			
+			const threshold = Math.min(this.lastPoint.width, newPoint.width) / 4;
+			if (this.lastPoint.pos.minus(newPoint.pos).magnitude() < threshold) {
+				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;
+
+		// 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');
+		}
+
+		let enteringVec = this.lastExitingVec;
+		if (!enteringVec) {
+			let sampleIdx = Math.ceil(this.buffer.length / 3);
+			if (sampleIdx === 0) {
+				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;
+		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 || isNaN(exitingVec.magnitude())) {
+			return;
+		}
+
+		console.assert(!isNaN(enteringVec.magnitude()));
+
+		enteringVec = enteringVec.normalized();
+		exitingVec = exitingVec.normalized();
+
+		console.assert(!isNaN(enteringVec.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;
+		if (intersection) {
+			controlPoint = intersection.point;
+		} else {
+			// Position the control point closer to the first -- the connecting
+			// segment will be roughly a line.
+			controlPoint = segmentStart.plus(enteringVec.times(startEndDist / 4));
+		}
+
+		if (isNaN(controlPoint.magnitude()) || isNaN(segmentStart.magnitude())) {
+			console.error('controlPoint is NaN', intersection, 'Start:', segmentStart, 'End:', segmentEnd, 'in:', enteringVec, 'out:', exitingVec);
+		}
+
+		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) / 2,
+					this.minFitAllowed
+				);
+				if (dist > minFit || dist > this.maxFitAllowed) {
+					return false;
+				}
+			}
+			return true;
+		};
+
+		if (this.buffer.length > 3) {
+			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;
+			}
+		}
+	}
+}

package/src/UndoRedoHistory.ts

@@ -0,0 +1,61 @@
+import Editor from './Editor';
+import Command from './commands/Command';
+import { EditorEventType } from './types';
+
+type AnnounceRedoCallback = (command: Command)=>void;
+type AnnounceUndoCallback = (command: Command)=>void;
+
+class UndoRedoHistory {
+	private undoStack: Command[];
+	private redoStack: Command[];
+
+	public constructor(
+		private readonly editor: Editor,
+		private announceRedoCallback: AnnounceRedoCallback,
+		private announceUndoCallback: AnnounceUndoCallback,
+	) {
+		this.undoStack = [];
+		this.redoStack = [];
+	}
+
+	private fireUpdateEvent() {
+		this.editor.notifier.dispatch(EditorEventType.UndoRedoStackUpdated, {
+			kind: EditorEventType.UndoRedoStackUpdated,
+			undoStackSize: this.undoStack.length,
+			redoStackSize: this.redoStack.length,
+		});
+	}
+
+	// Adds the given command to this and applies it to the editor.
+	public push(command: Command, apply: boolean = true) {
+		if (apply) {
+			command.apply(this.editor);
+		}
+		this.undoStack.push(command);
+		this.redoStack = [];
+		this.fireUpdateEvent();
+	}
+
+	// Remove the last command from this' undo stack and apply it.
+	public undo() {
+		const command = this.undoStack.pop();
+		if (command) {
+			this.redoStack.push(command);
+			command.unapply(this.editor);
+			this.announceUndoCallback(command);
+		}
+		this.fireUpdateEvent();
+	}
+
+	public redo() {
+		const command = this.redoStack.pop();
+		if (command) {
+			this.undoStack.push(command);
+			command.apply(this.editor);
+			this.announceRedoCallback(command);
+		}
+		this.fireUpdateEvent();
+	}
+}
+
+export default UndoRedoHistory;