js-draw 0.0.1 → 0.0.4

package/src/EditorImage.ts

@@ -107,6 +107,8 @@ export class ImageNode {
 	private bbox: Rect2;
 	private children: ImageNode[];
 	private targetChildCount: number = 30;
+	private minZIndex: number|null;
+	private maxZIndex: number|null;
 
 	public constructor(
 		private parent: ImageNode|null = null
@@ -114,6 +116,9 @@ export class ImageNode {
 		this.children = [];
 		this.bbox = Rect2.empty;
 		this.content = null;
+
+		this.minZIndex = null;
+		this.maxZIndex = null;
 	}
 
 	public getContent(): AbstractComponent|null {
@@ -130,7 +135,7 @@ export class ImageNode {
 		});
 	}
 
-	// / Returns a list of `ImageNode`s with content (and thus no children).
+	// Returns a list of `ImageNode`s with content (and thus no children).
 	public getLeavesInRegion(region: Rect2, minFractionOfRegion: number = 0): ImageNode[] {
 		const result: ImageNode[] = [];
 
@@ -228,16 +233,36 @@ export class ImageNode {
 	}
 
 	// Recomputes this' bounding box. If [bubbleUp], also recompute
-	// this' ancestors bounding boxes
+	// this' ancestors bounding boxes. This also re-computes this' bounding box
+	// in the z-direction (z-indicies).
 	public recomputeBBox(bubbleUp: boolean) {
 		const oldBBox = this.bbox;
 		if (this.content !== null) {
 			this.bbox = this.content.getBBox();
+			this.minZIndex = this.content.zIndex;
+			this.maxZIndex = this.content.zIndex;
 		} else {
 			this.bbox = Rect2.empty;
+			this.minZIndex = null;
+			this.maxZIndex = null;
+			let isFirst = true;
 
 			for (const child of this.children) {
-				this.bbox = this.bbox.union(child.getBBox());
+				if (isFirst) {
+					this.bbox = child.getBBox();
+					isFirst = false;
+				} else {
+					this.bbox = this.bbox.union(child.getBBox());
+				}
+
+				this.minZIndex ??= child.minZIndex;
+				this.maxZIndex ??= child.maxZIndex;
+				if (child.minZIndex !== null && this.minZIndex !== null) {
+					this.minZIndex = Math.min(child.minZIndex, this.minZIndex);
+				}
+				if (child.maxZIndex !== null && this.maxZIndex !== null) {
+					this.maxZIndex = Math.max(child.maxZIndex, this.maxZIndex);
+				}
 			}
 		}
 
@@ -270,6 +295,9 @@ export class ImageNode {
 
 	// Remove this node and all of its children
 	public remove() {
+		this.minZIndex = null;
+		this.maxZIndex = null;
+
 		if (!this.parent) {
 			this.content = null;
 			this.children = [];

package/src/Pointer.ts

@@ -51,7 +51,7 @@ export default class Pointer {
 		}
 
 		const timeStamp = (new Date()).getTime();
-		const canvasPos = viewport.screenToCanvas(screenPos);
+		const canvasPos = viewport.roundPoint(viewport.screenToCanvas(screenPos));
 
 		return new Pointer(
 			screenPos,

package/src/Viewport.ts

@@ -5,7 +5,7 @@ import Mat33 from './geometry/Mat33';
 import Rect2 from './geometry/Rect2';
 import { Point2, Vec2 } from './geometry/Vec2';
 import Vec3 from './geometry/Vec3';
-import { StrokeDataPoint } from './StrokeBuilder';
+import { StrokeDataPoint } from './types';
 import { EditorEventType, EditorNotifier } from './types';
 
 // Returns the base type of some type of point/number

package/src/components/AbstractComponent.ts

@@ -23,7 +23,7 @@ export default abstract class AbstractComponent {
 	public getBBox(): Rect2 {
 		return this.contentBBox;
 	}
-	public abstract render(canvas: AbstractRenderer, visibleRect: Rect2): void;
+	public abstract render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
 	public abstract intersects(lineSegment: LineSegment2): boolean;
 
 	// Private helper for transformBy: Apply the given transformation to all points of this.

package/src/components/Stroke.ts

@@ -50,11 +50,11 @@ export default class Stroke extends AbstractComponent {
 		return false;
 	}
 
-	public render(canvas: AbstractRenderer, visibleRect: Rect2): void {
+	public render(canvas: AbstractRenderer, visibleRect?: Rect2): void {
 		canvas.startObject(this.getBBox());
 		for (const part of this.parts) {
 			const bbox = part.bbox;
-			if (bbox.intersects(visibleRect)) {
+			if (!visibleRect || bbox.intersects(visibleRect)) {
 				canvas.drawPath(part);
 			}
 		}

package/src/components/UnknownSVGObject.ts

@@ -14,7 +14,7 @@ export default class UnknownSVGObject extends AbstractComponent {
 		this.contentBBox = Rect2.of(svgObject.getBoundingClientRect());
 	}
 
-	public render(canvas: AbstractRenderer, _visibleRect: Rect2): void {
+	public render(canvas: AbstractRenderer, _visibleRect?: Rect2): void {
 		if (!(canvas instanceof SVGRenderer)) {
 			// Don't draw unrenderable objects if we can't
 			return;

package/src/components/builders/ArrowBuilder.ts

@@ -0,0 +1,104 @@
+import { PathCommandType } from '../../geometry/Path';
+import Rect2 from '../../geometry/Rect2';
+import AbstractRenderer from '../../rendering/AbstractRenderer';
+import { StrokeDataPoint } from '../../types';
+import Viewport from '../../Viewport';
+import AbstractComponent from '../AbstractComponent';
+import Stroke from '../Stroke';
+import { ComponentBuilder, ComponentBuilderFactory } from './types';
+
+export const makeArrowBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, _viewport: Viewport) => {
+	return new ArrowBuilder(initialPoint);
+};
+
+export default class ArrowBuilder implements ComponentBuilder {
+	private endPoint: StrokeDataPoint;
+
+	public constructor(private readonly startPoint: StrokeDataPoint) {
+		this.endPoint = startPoint;
+	}
+
+	private getLineWidth(): number {
+		return Math.max(this.endPoint.width, this.startPoint.width);
+	}
+
+	public getBBox(): Rect2 {
+		const preview = this.buildPreview();
+		return preview.getBBox();
+	}
+
+	private buildPreview(): Stroke {
+		const startPoint = this.startPoint.pos;
+		const endPoint = this.endPoint.pos;
+		const toEnd = endPoint.minus(startPoint).normalized();
+		const arrowLength = endPoint.minus(startPoint).length();
+
+		// Ensure that the arrow tip is smaller than the arrow.
+		const arrowTipSize = Math.min(this.getLineWidth(), arrowLength / 2);
+		const startSize = this.startPoint.width / 2;
+		const endSize = this.endPoint.width / 2;
+
+		const arrowTipBase = endPoint.minus(toEnd.times(arrowTipSize));
+
+		// Scaled normal vectors.
+		const lineNormal = toEnd.orthog();
+		const scaledStartNormal = lineNormal.times(startSize);
+		const scaledBaseNormal = lineNormal.times(endSize);
+
+		const preview = new Stroke([
+			{
+				startPoint: arrowTipBase.minus(scaledBaseNormal),
+				commands: [
+					// Stem
+					{
+						kind: PathCommandType.LineTo,
+						point: startPoint.minus(scaledStartNormal),
+					},
+					{
+						kind: PathCommandType.LineTo,
+						point: startPoint.plus(scaledStartNormal),
+					},
+					{
+						kind: PathCommandType.LineTo,
+						point: arrowTipBase.plus(scaledBaseNormal),
+					},
+
+					// Head
+					{
+						kind: PathCommandType.LineTo,
+						point: arrowTipBase.plus(lineNormal.times(arrowTipSize).plus(scaledBaseNormal))
+					},
+					{
+						kind: PathCommandType.LineTo,
+						point: endPoint.plus(toEnd.times(endSize)),
+					},
+					{
+						kind: PathCommandType.LineTo,
+						point: arrowTipBase.plus(lineNormal.times(-arrowTipSize).minus(scaledBaseNormal)),
+					},
+					{
+						kind: PathCommandType.LineTo,
+						point: arrowTipBase.minus(scaledBaseNormal),
+					},
+				],
+				style: {
+					fill: this.startPoint.color,
+				}
+			}
+		]);
+
+		return preview;
+	}
+
+	public build(): AbstractComponent {
+		return this.buildPreview();
+	}
+
+	public preview(renderer: AbstractRenderer): void {
+		this.buildPreview().render(renderer);
+	}
+
+	public addPoint(point: StrokeDataPoint): void {
+		this.endPoint = point;
+	}
+}

package/src/{StrokeBuilder.ts → components/builders/FreehandLineBuilder.ts}

@@ -1,22 +1,28 @@
-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;
-}
+import AbstractRenderer, { 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 '../Stroke';
+import Viewport from '../../Viewport';
+import { StrokeDataPoint } from '../../types';
+import { ComponentBuilder, ComponentBuilderFactory } from './types';
+
+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
+	// less than ± 2 px from the curve.
+	const canvasTransform = viewport.screenToCanvasTransform;
+	const maxSmoothingDist = canvasTransform.transformVec3(Vec2.unitX).magnitude() * 7;
+	const minSmoothingDist = canvasTransform.transformVec3(Vec2.unitX).magnitude() * 2;
+
+	return new FreehandLineBuilder(
+		initialPoint, minSmoothingDist, maxSmoothingDist
+	);
+};
 
 // Handles stroke smoothing and creates Strokes from user/stylus input.
-export default class StrokeBuilder {
+export default class FreehandLineBuilder implements ComponentBuilder {
 	private segments: RenderablePathSpec[];
 	private buffer: Point2[];
 	private lastPoint: StrokeDataPoint;
@@ -59,7 +65,7 @@ export default class StrokeBuilder {
 	}
 
 	// Get the segments that make up this' path. Can be called after calling build()
-	public preview(): RenderablePathSpec[] {
+	private getPreview(): RenderablePathSpec[] {
 		if (this.currentCurve && this.lastPoint) {
 			const currentPath = this.currentSegmentToPath();
 			return this.segments.concat(currentPath);
@@ -68,6 +74,12 @@ export default class StrokeBuilder {
 		return this.segments;
 	}
 
+	public preview(renderer: AbstractRenderer) {
+		for (const part of this.getPreview()) {
+			renderer.drawPath(part);
+		}
+	}
+
 	public build(): Stroke {
 		if (this.lastPoint) {
 			this.finalizeCurrentCurve();
@@ -231,7 +243,13 @@ export default class StrokeBuilder {
 			}
 			
 			const threshold = Math.min(this.lastPoint.width, newPoint.width) / 4;
-			if (this.lastPoint.pos.minus(newPoint.pos).magnitude() < threshold) {
+			const shouldSnapToInitial = this.startPoint.pos.minus(newPoint.pos).magnitude() < threshold
+				&& this.segments.length === 0;
+			
+			// 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;
 			}
 

package/src/components/builders/LineBuilder.ts

@@ -0,0 +1,75 @@
+import { PathCommandType } from '../../geometry/Path';
+import Rect2 from '../../geometry/Rect2';
+import AbstractRenderer from '../../rendering/AbstractRenderer';
+import { StrokeDataPoint } from '../../types';
+import Viewport from '../../Viewport';
+import AbstractComponent from '../AbstractComponent';
+import Stroke from '../Stroke';
+import { ComponentBuilder, ComponentBuilderFactory } from './types';
+
+export const makeLineBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, _viewport: Viewport) => {
+	return new LineBuilder(initialPoint);
+};
+
+export default class LineBuilder implements ComponentBuilder {
+	private endPoint: StrokeDataPoint;
+
+	public constructor(private readonly startPoint: StrokeDataPoint) {
+		this.endPoint = startPoint;
+	}
+
+	public getBBox(): Rect2 {
+		const preview = this.buildPreview();
+		return preview.getBBox();
+	}
+
+	private buildPreview(): Stroke {
+		const startPoint = this.startPoint.pos;
+		const endPoint = this.endPoint.pos;
+		const toEnd = endPoint.minus(startPoint).normalized();
+
+		const startSize = this.startPoint.width / 2;
+		const endSize = this.endPoint.width / 2;
+
+		const lineNormal = toEnd.orthog();
+		const scaledStartNormal = lineNormal.times(startSize);
+		const scaledEndNormal = lineNormal.times(endSize);
+
+		const preview = new Stroke([
+			{
+				startPoint: startPoint.minus(scaledStartNormal),
+				commands: [
+					{
+						kind: PathCommandType.LineTo,
+						point: startPoint.plus(scaledStartNormal),
+					},
+					{
+						kind: PathCommandType.LineTo,
+						point: endPoint.plus(scaledEndNormal),
+					},
+					{
+						kind: PathCommandType.LineTo,
+						point: endPoint.minus(scaledEndNormal),
+					},
+				],
+				style: {
+					fill: this.startPoint.color,
+				}
+			}
+		]);
+
+		return preview;
+	}
+
+	public build(): AbstractComponent {
+		return this.buildPreview();
+	}
+
+	public preview(renderer: AbstractRenderer): void {
+		this.buildPreview().render(renderer);
+	}
+
+	public addPoint(point: StrokeDataPoint): void {
+		this.endPoint = point;
+	}
+}

package/src/components/builders/RectangleBuilder.ts

@@ -0,0 +1,59 @@
+import Path from '../../geometry/Path';
+import Rect2 from '../../geometry/Rect2';
+import AbstractRenderer from '../../rendering/AbstractRenderer';
+import { StrokeDataPoint } from '../../types';
+import Viewport from '../../Viewport';
+import AbstractComponent from '../AbstractComponent';
+import Stroke from '../Stroke';
+import { ComponentBuilder, ComponentBuilderFactory } from './types';
+
+export const makeFilledRectangleBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, _viewport: Viewport) => {
+	return new RectangleBuilder(initialPoint, true);
+};
+
+export const makeOutlinedRectangleBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, _viewport: Viewport) => {
+	return new RectangleBuilder(initialPoint, false);
+};
+
+export default class RectangleBuilder implements ComponentBuilder {
+	private endPoint: StrokeDataPoint;
+
+	public constructor(private readonly startPoint: StrokeDataPoint, private filled: boolean) {
+		// Initially, the start and end points are the same.
+		this.endPoint = startPoint;
+	}
+
+	public getBBox(): Rect2 {
+		const preview = this.buildPreview();
+		return preview.getBBox();
+	}
+
+	private buildPreview(): Stroke {
+		const startPoint = this.startPoint.pos;
+		const endPoint = this.endPoint.pos;
+		const path = Path.fromRect(
+			Rect2.fromCorners(startPoint, endPoint),
+			this.filled ? null : this.endPoint.width,
+		);
+
+		const preview = new Stroke([
+			path.toRenderable({
+				fill: this.endPoint.color
+			}),
+		]);
+
+		return preview;
+	}
+
+	public build(): AbstractComponent {
+		return this.buildPreview();
+	}
+
+	public preview(renderer: AbstractRenderer): void {
+		this.buildPreview().render(renderer);
+	}
+
+	public addPoint(point: StrokeDataPoint): void {
+		this.endPoint = point;
+	}
+}

package/src/components/builders/types.ts

@@ -0,0 +1,15 @@
+import Rect2 from '../../geometry/Rect2';
+import AbstractRenderer from '../../rendering/AbstractRenderer';
+import { StrokeDataPoint } from '../../types';
+import Viewport from '../../Viewport';
+import AbstractComponent from '../AbstractComponent';
+
+export interface ComponentBuilder {
+	getBBox(): Rect2;
+	build(): AbstractComponent;
+	preview(renderer: AbstractRenderer): void;
+
+	addPoint(point: StrokeDataPoint): void;
+}
+
+export type ComponentBuilderFactory = (startPoint: StrokeDataPoint, viewport: Viewport)=> ComponentBuilder;

package/src/geometry/Path.ts

@@ -223,6 +223,49 @@ export default class Path {
 		]);
 	}
 
+	// Returns a path that outlines [rect]. If [lineWidth] is not given, the resultant path is
+	// the outline of [rect]. Otherwise, the resultant path represents a line of width [lineWidth]
+	// that traces [rect].
+	public static fromRect(rect: Rect2, lineWidth: number|null = null): Path {
+		const commands: PathCommand[] = [];
+
+		let corners;
+		let startPoint;
+
+		if (lineWidth !== null) {
+			// Vector from the top left corner or bottom right corner to the edge of the
+			// stroked region.
+			const cornerToEdge = Vec2.of(lineWidth, lineWidth).times(0.5);
+			const innerRect = Rect2.fromCorners(
+				rect.topLeft.plus(cornerToEdge),
+				rect.bottomRight.minus(cornerToEdge)
+			);
+			const outerRect = Rect2.fromCorners(
+				rect.topLeft.minus(cornerToEdge),
+				rect.bottomRight.plus(cornerToEdge)
+			);
+
+			corners = [
+				innerRect.corners[3],
+				...innerRect.corners,
+				...outerRect.corners.reverse(),
+			];
+			startPoint = outerRect.corners[3];
+		} else {
+			corners = rect.corners.slice(1);
+			startPoint = rect.corners[0];
+		}
+
+		for (const corner of corners) {
+			commands.push({
+				kind: PathCommandType.LineTo,
+				point: corner,
+			});
+		}
+
+		return new Path(startPoint, commands);
+	}
+
 	public static fromRenderable(renderable: RenderablePathSpec): Path {
 		return new Path(renderable.startPoint, renderable.commands);
 	}

package/src/geometry/Vec2.test.ts

@@ -28,5 +28,6 @@ describe('Vec2', () => {
 	it('Perpindicular', () => {
 		const fuzz = 0.001;
 		expect(Vec2.unitX.cross(Vec3.unitZ)).objEq(Vec2.unitY.times(-1), fuzz);
+		expect(Vec2.unitX.orthog()).objEq(Vec2.unitY, fuzz);
 	});
 });

package/src/geometry/Vec3.test.ts

@@ -26,4 +26,18 @@ describe('Vec3', () => {
 		expect(vec1.cross(vec2)).objEq(Vec3.unitZ);
 		expect(vec2.cross(vec1)).objEq(Vec3.unitZ.times(-1));
 	});
+
+	it('.orthog should return an orthogonal vector', () => {
+		expect(Vec3.unitZ.orthog().dot(Vec3.unitZ)).toBe(0);
+
+		// Should return some orthogonal vector, even if given the zero vector
+		expect(Vec3.zero.orthog().dot(Vec3.zero)).toBe(0);
+	});
+
+	it('.orthog should return a unit vector', () => {
+		expect(Vec3.zero.orthog().magnitude()).toBe(1);
+		expect(Vec3.unitZ.orthog().magnitude()).toBe(1);
+		expect(Vec3.unitX.orthog().magnitude()).toBe(1);
+		expect(Vec3.unitY.orthog().magnitude()).toBe(1);
+	});
 });

package/src/geometry/Vec3.ts

@@ -31,6 +31,11 @@ export default class Vec3 {
 		throw new Error(`${idx} out of bounds!`);
 	}
 
+	// Alias for this.magnitude
+	public length(): number {
+		return this.magnitude();
+	}
+
 	public magnitude(): number {
 		return Math.sqrt(this.dot(this));
 	}
@@ -76,6 +81,17 @@ export default class Vec3 {
 		);
 	}
 
+	// Returns a vector orthogonal to this. If this is a Vec2, returns [this] rotated
+	// 90 degrees counter-clockwise.
+	public orthog(): Vec3 {
+		// If parallel to the z-axis
+		if (this.dot(Vec3.unitX) === 0 && this.dot(Vec3.unitY) === 0) {
+			return this.dot(Vec3.unitX) === 0 ? Vec3.unitX : this.cross(Vec3.unitX).normalized();
+		}
+
+		return this.cross(Vec3.unitZ.times(-1)).normalized();
+	}
+
 	// Returns this plus a vector of length [distance] in [direction]
 	public extend(distance: number, direction: Vec3): Vec3 {
 		return this.plus(direction.normalized().times(distance));

package/src/rendering/AbstractRenderer.ts

@@ -1,5 +1,5 @@
 import Color4 from '../Color4';
-import { PathCommand, PathCommandType } from '../geometry/Path';
+import Path, { PathCommand, PathCommandType } from '../geometry/Path';
 import Rect2 from '../geometry/Rect2';
 import { Point2, Vec2 } from '../geometry/Vec2';
 import Viewport from '../Viewport';
@@ -103,37 +103,8 @@ export default abstract class AbstractRenderer {
 
 	// Draw a rectangle. Boundary lines have width [lineWidth] and are filled with [lineFill]
 	public drawRect(rect: Rect2, lineWidth: number, lineFill: RenderingStyle): void {
-		const commands: PathCommand[] = [];
-
-		// Vector from the top left corner or bottom right corner to the edge of the
-		// stroked region.
-		const cornerToEdge = Vec2.of(lineWidth, lineWidth).times(0.5);
-		const innerRect = Rect2.fromCorners(
-			rect.topLeft.plus(cornerToEdge),
-			rect.bottomRight.minus(cornerToEdge)
-		);
-		const outerRect = Rect2.fromCorners(
-			rect.topLeft.minus(cornerToEdge),
-			rect.bottomRight.plus(cornerToEdge)
-		);
-
-		const corners = [
-			innerRect.corners[3],
-			...innerRect.corners,
-			...outerRect.corners.reverse(),
-		];
-		for (const corner of corners) {
-			commands.push({
-				kind: PathCommandType.LineTo,
-				point: corner,
-			});
-		}
-
-		this.drawPath({
-			startPoint: outerRect.corners[3],
-			commands,
-			style: lineFill,
-		});
+		const path = Path.fromRect(rect, lineWidth);
+		this.drawPath(path.toRenderable(lineFill));
 	}
 
 	// Note the start/end of an object with the given bounding box.