js-draw 1.0.1 → 1.1.0

package/src/components/builders/FreehandLineBuilder.test.ts

@@ -1,24 +0,0 @@
-import Viewport from '../../Viewport';
-import { Vec2, Color4 } from '@js-draw/math';
-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: performance.now(),
-			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,210 +0,0 @@
-import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
-import RenderablePathSpec from '../../rendering/RenderablePathSpec';
-import { Point2, Vec2, Rect2, Color4, PathCommand, PathCommandType } from '@js-draw/math';
-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';
-
-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, Rect2 } from '@js-draw/math';
-import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
-import { pathToRenderable } from '../../rendering/RenderablePathSpec';
-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([
-			pathToRenderable(path, { 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;
-	}
-}