js-draw 0.25.1 → 1.0.0

package/src/components/builders/ArrowBuilder.ts

@@ -1,107 +0,0 @@
-import Path, { PathCommandType } from '../../math/shapes/Path';
-import Rect2 from '../../math/shapes/Rect2';
-import AbstractRenderer from '../../rendering/renderers/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, viewport);
-};
-
-export default class ArrowBuilder implements ComponentBuilder {
-	private endPoint: StrokeDataPoint;
-
-	public constructor(private readonly startPoint: StrokeDataPoint, private readonly viewport: Viewport) {
-		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 lineStartPoint = this.startPoint.pos;
-		const endPoint = this.endPoint.pos;
-		const toEnd = endPoint.minus(lineStartPoint).normalized();
-		const arrowLength = endPoint.minus(lineStartPoint).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 path = new Path(arrowTipBase.minus(scaledBaseNormal), [
-			// Stem
-			{
-				kind: PathCommandType.LineTo,
-				point: lineStartPoint.minus(scaledStartNormal),
-			},
-			{
-				kind: PathCommandType.LineTo,
-				point: lineStartPoint.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),
-			},
-		// Round all points in the arrow (to remove unnecessary decimal places)
-		]).mapPoints(point => this.viewport.roundPoint(point));
-
-		const preview = new Stroke([
-			{
-				startPoint: path.startPoint,
-				commands: path.parts,
-				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/CircleBuilder.ts

@@ -1,102 +0,0 @@
-import { Vec2 } from '../../math/Vec2';
-import Path, { PathCommand, PathCommandType } from '../../math/shapes/Path';
-import Rect2 from '../../math/shapes/Rect2';
-import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
-import { StrokeDataPoint } from '../../types';
-import Viewport from '../../Viewport';
-import AbstractComponent from '../AbstractComponent';
-import Stroke from '../Stroke';
-import { ComponentBuilder, ComponentBuilderFactory } from './types';
-import Color4 from '../../Color4';
-
-export const makeOutlinedCircleBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, viewport: Viewport) => {
-	return new CircleBuilder(initialPoint, viewport);
-};
-
-class CircleBuilder implements ComponentBuilder {
-	private endPoint: StrokeDataPoint;
-
-	public constructor(
-		private readonly startPoint: StrokeDataPoint,
-		private readonly viewport: Viewport,
-	) {
-		// 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 pathCommands: PathCommand[] = [];
-		const numDivisions = 6;
-		const stepSize = Math.PI * 2 / numDivisions;
-
-		// Round the stroke width so that when exported it doesn't have unnecessary trailing decimals.
-		const strokeWidth =
-			Viewport.roundPoint(this.endPoint.width, 5 / this.viewport.getScaleFactor());
-
-		const center = this.startPoint.pos.lerp(this.endPoint.pos, 0.5);
-		const startEndDelta = this.endPoint.pos.minus(center);
-		const radius = startEndDelta.length() - strokeWidth / 2;
-
-		const startPoint = center.plus(Vec2.of(radius, 0));
-
-		for (let t = stepSize; t <= Math.PI * 2; t += stepSize) {
-			const endPoint = Vec2.of(
-				radius * Math.cos(t),
-				-radius * Math.sin(t),
-			).plus(center);
-
-			// controlPointRadiusScale is selected to make the circles appear circular and
-			// **does** depend on stepSize.
-			const controlPointRadiusScale = 1.141;
-			const controlPoint = Vec2.of(
-				Math.cos(t - stepSize / 2),
-				-Math.sin(t - stepSize / 2),
-			).times(
-				radius * controlPointRadiusScale
-			).plus(center);
-
-			pathCommands.push({
-				kind: PathCommandType.QuadraticBezierTo,
-				controlPoint,
-				endPoint,
-			});
-		}
-
-		pathCommands.push({
-			kind: PathCommandType.LineTo,
-			point: startPoint,
-		});
-
-		const path = new Path(startPoint, pathCommands)
-			.mapPoints(point => this.viewport.roundPoint(point));
-
-		const preview = new Stroke([
-			path.toRenderable({
-				fill: Color4.transparent,
-				stroke: {
-					width: strokeWidth,
-					color: 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/FreehandLineBuilder.test.ts

@@ -1,25 +0,0 @@
-import Color4 from '../../Color4';
-import Viewport from '../../Viewport';
-import { Vec2 } from '../../math/Vec2';
-import { StrokeDataPoint } from '../../types';
-import { makeFreehandLineBuilder } from './FreehandLineBuilder';
-
-describe('FreehandLineBuilder', () => {
-	it('should create a dot on click', () => {
-		const viewport = new Viewport(() => {});
-		const startPoint: StrokeDataPoint = {
-			pos: Vec2.zero,
-			width: 1,
-			time: (new Date()).getTime(),
-			color: Color4.red,
-		};
-		const lineBuilder = makeFreehandLineBuilder(startPoint, viewport);
-
-		const component = lineBuilder.build();
-		const bbox = component.getBBox();
-
-		expect(bbox.area).toBeGreaterThan(0);
-		expect(bbox.width).toBeGreaterThan(0.5);
-		expect(bbox.height).toBeGreaterThan(0.5);
-	});
-});

package/src/components/builders/FreehandLineBuilder.ts

@@ -1,212 +0,0 @@
-import AbstractRenderer, { RenderablePathSpec } from '../../rendering/renderers/AbstractRenderer';
-import { Point2, Vec2 } from '../../math/Vec2';
-import Rect2 from '../../math/shapes/Rect2';
-import { PathCommand, PathCommandType } from '../../math/shapes/Path';
-import Stroke from '../Stroke';
-import Viewport from '../../Viewport';
-import { StrokeDataPoint } from '../../types';
-import { ComponentBuilder, ComponentBuilderFactory } from './types';
-import RenderingStyle from '../../rendering/RenderingStyle';
-import { StrokeSmoother, Curve } from '../util/StrokeSmoother';
-import Color4 from '../../Color4';
-
-export const makeFreehandLineBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, viewport: Viewport) => {
-	// 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() * 3;
-	const minSmoothingDist = viewport.getSizeOfPixelOnCanvas();
-
-	return new FreehandLineBuilder(
-		initialPoint, minSmoothingDist, maxSmoothingDist, viewport
-	);
-};
-
-// Handles stroke smoothing and creates Strokes from user/stylus input.
-export default class FreehandLineBuilder implements ComponentBuilder {
-	private isFirstSegment: boolean = true;
-	private parts: PathCommand[] = [];
-
-	private curveFitter: StrokeSmoother;
-
-	private bbox: Rect2;
-	private averageWidth: number;
-	private widthAverageNumSamples: number = 1;
-
-	public constructor(
-		private startPoint: StrokeDataPoint,
-
-		private minFitAllowed: number,
-		maxFitAllowed: number,
-
-		private viewport: Viewport,
-	) {
-		this.curveFitter = new StrokeSmoother(startPoint, minFitAllowed, maxFitAllowed, (curve: Curve|null) => this.addCurve(curve));
-
-		this.averageWidth = startPoint.width;
-		this.bbox = new Rect2(this.startPoint.pos.x, this.startPoint.pos.y, 0, 0);
-	}
-
-	public getBBox(): Rect2 {
-		return this.bbox;
-	}
-
-	protected getRenderingStyle(): RenderingStyle {
-		return {
-			fill: Color4.transparent,
-			stroke: {
-				color: this.startPoint.color,
-				width: this.roundDistance(this.averageWidth),
-			}
-		};
-	}
-
-	protected previewCurrentPath(): RenderablePathSpec|null {
-		const path = this.parts.slice();
-		const commands = [...path, ...this.curveToPathCommands(this.curveFitter.preview())];
-		const startPoint = this.startPoint.pos;
-
-		return {
-			startPoint,
-
-			commands,
-			style: this.getRenderingStyle(),
-		};
-	}
-
-	protected previewFullPath(): RenderablePathSpec[]|null {
-		const preview = this.previewCurrentPath();
-		if (preview) {
-			return [ preview ];
-		}
-		return null;
-	}
-
-	private previewStroke(): Stroke|null {
-		const pathPreview = this.previewFullPath();
-
-		if (pathPreview) {
-			return new Stroke(pathPreview);
-		}
-		return null;
-	}
-
-	public preview(renderer: AbstractRenderer) {
-		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 {
-		this.curveFitter.finalizeCurrentCurve();
-		return this.previewStroke()!;
-	}
-
-	private getMinFit(): number {
-		let minFit = Math.min(this.minFitAllowed, this.averageWidth / 3);
-
-		if (minFit < 1e-10) {
-			minFit = this.minFitAllowed;
-		}
-
-		return minFit;
-	}
-
-	private roundPoint(point: Point2): Point2 {
-		const minFit = this.getMinFit();
-		return Viewport.roundPoint(point, minFit);
-	}
-
-	private roundDistance(dist: number): number {
-		const minFit = this.getMinFit();
-		return Viewport.roundPoint(dist, minFit);
-	}
-
-	private curveToPathCommands(curve: Curve|null): PathCommand[] {
-		// Case where no points have been added
-		if (!curve) {
-			// Don't create a circle around the initial point if the stroke has more than one point.
-			if (!this.isFirstSegment) {
-				return [];
-			}
-
-			// Make the circle small -- because of the stroke style, we'll be drawing a stroke around it.
-			const width = Viewport.roundPoint(this.averageWidth / 10, Math.min(this.minFitAllowed, this.averageWidth / 10));
-			const center = this.roundPoint(this.startPoint.pos);
-
-			// Start on the right, cycle clockwise:
-			//    |
-			//  ----- ←
-			//    |
-
-			// Draw a circle-ish shape around the start point
-			return [
-				{
-					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)),
-				}
-			];
-		}
-
-		const result: PathCommand[] = [];
-
-		if (this.isFirstSegment) {
-			result.push({
-				kind: PathCommandType.MoveTo,
-				point: this.roundPoint(curve.startPoint),
-			});
-		}
-
-		result.push({
-			kind: PathCommandType.QuadraticBezierTo,
-			controlPoint: this.roundPoint(curve.controlPoint),
-			endPoint: this.roundPoint(curve.endPoint),
-		});
-
-		return result;
-	}
-
-	private addCurve(curve: Curve|null) {
-		const parts = this.curveToPathCommands(curve);
-		this.parts.push(...parts);
-
-		if (this.isFirstSegment) {
-			this.isFirstSegment = false;
-		}
-	}
-
-	public addPoint(newPoint: StrokeDataPoint) {
-		this.curveFitter.addPoint(newPoint);
-		this.widthAverageNumSamples ++;
-		this.averageWidth =
-			this.averageWidth * (this.widthAverageNumSamples - 1) / this.widthAverageNumSamples
-				+ newPoint.width / this.widthAverageNumSamples;
-	}
-}

package/src/components/builders/LineBuilder.ts

@@ -1,77 +0,0 @@
-import Path, { PathCommandType } from '../../math/shapes/Path';
-import Rect2 from '../../math/shapes/Rect2';
-import AbstractRenderer from '../../rendering/renderers/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, viewport);
-};
-
-export default class LineBuilder implements ComponentBuilder {
-	private endPoint: StrokeDataPoint;
-
-	public constructor(private readonly startPoint: StrokeDataPoint, private readonly viewport: Viewport) {
-		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 strokeStartPoint = startPoint.minus(scaledStartNormal);
-
-		const path = new Path(strokeStartPoint, [
-			{
-				kind: PathCommandType.LineTo,
-				point: startPoint.plus(scaledStartNormal),
-			},
-			{
-				kind: PathCommandType.LineTo,
-				point: endPoint.plus(scaledEndNormal),
-			},
-			{
-				kind: PathCommandType.LineTo,
-				point: endPoint.minus(scaledEndNormal),
-			},
-			{
-				kind: PathCommandType.LineTo,
-				point: startPoint.minus(scaledStartNormal),
-			},
-		]).mapPoints(point => this.viewport.roundPoint(point));
-
-		const preview = new Stroke([
-			path.toRenderable({ 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;
-	}
-}