js-draw 0.18.2 → 0.20.0

package/src/components/builders/PressureSensitiveFreehandLineBuilder.ts

@@ -1,454 +0,0 @@
-import { Bezier } from 'bezier-js';
-import AbstractRenderer, { RenderablePathSpec } from '../../rendering/renderers/AbstractRenderer';
-import { Point2, Vec2 } from '../../math/Vec2';
-import Rect2 from '../../math/Rect2';
-import { LinePathCommand, PathCommand, PathCommandType, QuadraticBezierPathCommand } from '../../math/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';
-
-export const makePressureSensitiveFreehandLineBuilder: 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 PressureSensitiveFreehandLineBuilder(
-		initialPoint, minSmoothingDist, maxSmoothingDist, viewport
-	);
-};
-
-type CurrentSegmentToPathResult = {
-	upperCurveCommand: QuadraticBezierPathCommand,
-	lowerToUpperConnector: PathCommand,
-	upperToLowerConnector: PathCommand,
-	lowerCurveCommand: QuadraticBezierPathCommand,
-
-	upperCurve: Bezier,
-	lowerCurve: Bezier,
-};
-
-// Handles stroke smoothing and creates Strokes from user/stylus input.
-export default class PressureSensitiveFreehandLineBuilder implements ComponentBuilder {
-	private isFirstSegment: boolean = true;
-	private pathStartConnector: PathCommand|null = null;
-	private mostRecentConnector: PathCommand|null = null;
-
-	//    Beginning of the list of lower parts
-	//        ↓
-	//        /---pathStartConnector---/ ← Beginning of the list of upper parts
-	//    ___/                      __/
-	//   /                         /
-	//  /--Most recent connector--/ ← most recent upper part goes here
-	//  ↑
-	//  most recent lower part goes here
-	//
-	// The upperSegments form a path that goes in reverse from the most recent edge to the
-	// least recent edge.
-	// The lowerSegments form a path that goes from the least recent edge to the most
-	// recent edge.
-	private upperSegments: PathCommand[];
-	private lowerSegments: PathCommand[];
-	private lastUpperBezier: Bezier|null = null;
-	private lastLowerBezier: Bezier|null = null;
-	private parts: RenderablePathSpec[] = [];
-	private curveFitter: StrokeSmoother;
-
-	private curveStartWidth: number;
-
-	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,
-		maxFitAllowed: number,
-
-		private viewport: Viewport,
-	) {
-		this.upperSegments = [];
-		this.lowerSegments = [];
-
-		this.curveFitter = new StrokeSmoother(startPoint, minFitAllowed, maxFitAllowed, curve => this.addCurve(curve));
-
-		this.curveStartWidth = startPoint.width;
-		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.startPoint.color ?? null,
-		};
-	}
-
-	private previewCurrentPath(): RenderablePathSpec|null {
-		const upperPath = this.upperSegments.slice();
-		const lowerPath = this.lowerSegments.slice();
-		let lowerToUpperCap: PathCommand;
-		let pathStartConnector: PathCommand;
-
-		const currentCurve = this.curveFitter.preview();
-		if (currentCurve) {
-			const {
-				upperCurveCommand, lowerToUpperConnector, upperToLowerConnector, lowerCurveCommand
-			} = this.segmentToPath(currentCurve);
-
-			upperPath.push(upperCurveCommand);
-			lowerPath.push(lowerCurveCommand);
-
-			lowerToUpperCap = lowerToUpperConnector;
-			pathStartConnector = this.pathStartConnector ?? upperToLowerConnector;
-		} else {
-			if (this.mostRecentConnector === null || this.pathStartConnector === null) {
-				return null;
-			}
-
-			lowerToUpperCap = this.mostRecentConnector;
-			pathStartConnector = this.pathStartConnector;
-		}
-
-		let startPoint: Point2;
-		const lastLowerSegment = lowerPath[lowerPath.length - 1];
-		if (lastLowerSegment.kind === PathCommandType.LineTo || lastLowerSegment.kind === PathCommandType.MoveTo) {
-			startPoint = lastLowerSegment.point;
-		} else {
-			startPoint = lastLowerSegment.endPoint;
-		}
-
-		return {
-			// Start at the end of the lower curve:
-			//    Start point
-			//     ↓
-			//  __/  __/ ← Most recent points on this end
-			// /___ /
-			//  ↑
-			//  Oldest points
-			startPoint,
-
-			commands: [
-				// Move to the most recent point on the upperPath:
-				//     ----→•
-				//  __/  __/
-				// /___ /
-				lowerToUpperCap,
-
-				// Move to the beginning of the upperPath:
-				//  __/  __/
-				// /___ /
-				//     • ←-
-				...upperPath.reverse(),
-
-				// Move to the beginning of the lowerPath:
-				//  __/  __/
-				// /___ /
-				// •
-				pathStartConnector,
-
-				// Move back to the start point:
-				//     •
-				//  __/  __/
-				// /___ /
-				...lowerPath,
-			],
-			style: this.getRenderingStyle(),
-		};
-	}
-
-	private previewFullPath(): RenderablePathSpec[]|null {
-		const preview = this.previewCurrentPath();
-		if (preview) {
-			return [ ...this.parts, 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();
-		if (this.isFirstSegment) {
-			// Ensure we have something.
-			this.addCurve(null);
-		}
-
-		return this.previewStroke()!;
-	}
-
-	private roundPoint(point: Point2): Point2 {
-		let minFit = Math.min(this.minFitAllowed, this.curveStartWidth / 3);
-
-		if (minFit < 1e-10) {
-			minFit = this.minFitAllowed;
-		}
-
-		return Viewport.roundPoint(point, minFit);
-	}
-
-	// Returns true if, due to overlap with previous segments, a new RenderablePathSpec should be created.
-	private shouldStartNewSegment(lowerCurve: Bezier, upperCurve: Bezier): boolean {
-		if (!this.lastLowerBezier || !this.lastUpperBezier) {
-			return false;
-		}
-
-		const getIntersection = (curve1: Bezier, curve2: Bezier): Point2|null => {
-			const intersection = curve1.intersects(curve2) as (string[] | null | undefined);
-			if (!intersection || intersection.length === 0) {
-				return null;
-			}
-
-			// From http://pomax.github.io/bezierjs/#intersect-curve,
-			// .intersects returns an array of 't1/t2' pairs, where curve1.at(t1) gives the point.
-			const firstTPair = intersection[0];
-			const match = /^([-0-9.eE]+)\/([-0-9.eE]+)$/.exec(firstTPair);
-
-			if (!match) {
-				throw new Error(
-					`Incorrect format returned by .intersects: ${intersection} should be array of "number/number"!`
-				);
-			}
-
-			const t = parseFloat(match[1]);
-			return Vec2.ofXY(curve1.get(t));
-		};
-
-		const getExitDirection = (curve: Bezier): Vec2 => {
-			return Vec2.ofXY(curve.points[2]).minus(Vec2.ofXY(curve.points[1])).normalized();
-		};
-
-		const getEnterDirection = (curve: Bezier): Vec2 => {
-			return Vec2.ofXY(curve.points[1]).minus(Vec2.ofXY(curve.points[0])).normalized();
-		};
-
-		// Prevent
-		//         /
-		//       / /
-		//      /  /  /|
-		//    /    /   |
-		//  /          |
-		// where the next stroke and the previous stroke are in different directions.
-		//
-		// Are the exit/enter directions of the previous and current curves in different enough directions?
-		if (getEnterDirection(upperCurve).dot(getExitDirection(this.lastUpperBezier)) < 0.3
-			|| getEnterDirection(lowerCurve).dot(getExitDirection(this.lastLowerBezier)) < 0.3
-
-			// Also handle if the curves exit/enter directions differ
-			|| getEnterDirection(upperCurve).dot(getExitDirection(upperCurve)) < 0
-			|| getEnterDirection(lowerCurve).dot(getExitDirection(lowerCurve)) < 0) {
-			return true;
-		}
-
-		// Check whether the lower curve intersects the other wall:
-		//       /    / ← lower
-		//    / /   /
-		// /   / /
-		//   //
-		// / /
-		const lowerIntersection = getIntersection(lowerCurve, this.lastUpperBezier);
-		const upperIntersection = getIntersection(upperCurve, this.lastLowerBezier);
-		if (lowerIntersection || upperIntersection) {
-			return true;
-		}
-
-		return false;
-	}
-
-	private addCurve(curve: Curve|null) {
-		// 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;
-			}
-
-			const width = Viewport.roundPoint(this.startPoint.width / 2.2, Math.min(this.minFitAllowed, this.startPoint.width / 4));
-			const center = this.roundPoint(this.startPoint.pos);
-
-			// Start on the right, cycle clockwise:
-			//    |
-			//  ----- ←
-			//    |
-			const startPoint = this.startPoint.pos.plus(Vec2.of(width, 0));
-
-			// Draw a circle-ish shape around the start point
-			this.lowerSegments.push(
-				{
-					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)),
-				}
-			);
-			this.pathStartConnector = {
-				kind: PathCommandType.LineTo,
-				point: startPoint,
-			};
-			this.mostRecentConnector = this.pathStartConnector;
-
-			return;
-		}
-
-		const {
-			upperCurveCommand, lowerToUpperConnector, upperToLowerConnector, lowerCurveCommand,
-			lowerCurve, upperCurve,
-		} = this.segmentToPath(curve);
-
-		const shouldStartNew = this.shouldStartNewSegment(lowerCurve, upperCurve);
-
-		if (shouldStartNew) {
-			const part = this.previewCurrentPath();
-
-			if (part) {
-				this.parts.push(part);
-				this.upperSegments = [];
-				this.lowerSegments = [];
-			}
-		}
-
-		if (this.isFirstSegment || shouldStartNew) {
-			// We draw the upper path (reversed), then the lower path, so we need the
-			// upperToLowerConnector to join the two paths.
-			this.pathStartConnector = upperToLowerConnector;
-			this.isFirstSegment = false;
-		}
-		// With the most recent connector, we're joining the end of the lowerPath to the most recent
-		// upperPath:
-		this.mostRecentConnector = lowerToUpperConnector;
-
-		this.lowerSegments.push(lowerCurveCommand);
-		this.upperSegments.push(upperCurveCommand);
-
-		this.lastLowerBezier = lowerCurve;
-		this.lastUpperBezier = upperCurve;
-		this.curveStartWidth = curve.startWidth;
-	}
-
-	// Returns [upper curve, connector, lower curve]
-	private segmentToPath(curve: Curve): CurrentSegmentToPathResult {
-		const bezier = new Bezier(curve.startPoint.xy, curve.controlPoint.xy, curve.endPoint.xy);
-		let startVec = Vec2.ofXY(bezier.normal(0)).normalized();
-		let endVec = Vec2.ofXY(bezier.normal(1)).normalized();
-
-		startVec = startVec.times(curve.startWidth / 2);
-		endVec = endVec.times(curve.endWidth / 2);
-
-		if (!isFinite(startVec.magnitude())) {
-			console.error('Warning: startVec is NaN or ∞', startVec, endVec, curve);
-			startVec = endVec;
-		}
-
-		const startPt = curve.startPoint;
-		const endPt = curve.endPoint;
-		const controlPoint = curve.controlPoint;
-
-		// Approximate the normal at the location of the control point
-		let projectionT = bezier.project(controlPoint.xy).t;
-		if (!projectionT) {
-			if (startPt.minus(controlPoint).magnitudeSquared() < endPt.minus(controlPoint).magnitudeSquared()) {
-				projectionT = 0.1;
-			} else {
-				projectionT = 0.9;
-			}
-		}
-
-		const halfVecT = projectionT;
-		const halfVec = Vec2.ofXY(bezier.normal(halfVecT))
-			.normalized().times(
-				curve.startWidth / 2 * halfVecT
-				+ curve.endWidth / 2 * (1 - halfVecT)
-			);
-
-		// Each starts at startPt ± startVec
-		const lowerCurveStartPoint = this.roundPoint(startPt.plus(startVec));
-		const lowerCurveControlPoint = this.roundPoint(controlPoint.plus(halfVec));
-		const lowerCurveEndPoint = this.roundPoint(endPt.plus(endVec));
-		const upperCurveControlPoint = this.roundPoint(controlPoint.minus(halfVec));
-		const upperCurveStartPoint = this.roundPoint(endPt.minus(endVec));
-		const upperCurveEndPoint = this.roundPoint(startPt.minus(startVec));
-
-		const lowerCurveCommand: QuadraticBezierPathCommand = {
-			kind: PathCommandType.QuadraticBezierTo,
-			controlPoint: lowerCurveControlPoint,
-			endPoint: lowerCurveEndPoint,
-		};
-
-		// From the end of the upperCurve to the start of the lowerCurve:
-		const upperToLowerConnector: LinePathCommand = {
-			kind: PathCommandType.LineTo,
-			point: lowerCurveStartPoint,
-		};
-
-		// From the end of lowerCurve to the start of upperCurve:
-		const lowerToUpperConnector: LinePathCommand = {
-			kind: PathCommandType.LineTo,
-			point: upperCurveStartPoint,
-		};
-
-		const upperCurveCommand: QuadraticBezierPathCommand = {
-			kind: PathCommandType.QuadraticBezierTo,
-			controlPoint: upperCurveControlPoint,
-			endPoint: upperCurveEndPoint,
-		};
-
-		const upperCurve = new Bezier(upperCurveStartPoint, upperCurveControlPoint, upperCurveEndPoint);
-		const lowerCurve = new Bezier(lowerCurveStartPoint, lowerCurveControlPoint, lowerCurveEndPoint);
-
-		return {
-			upperCurveCommand, upperToLowerConnector, lowerToUpperConnector, lowerCurveCommand,
-			upperCurve, lowerCurve,
-		};
-	}
-
-	public addPoint(newPoint: StrokeDataPoint) {
-		this.curveFitter.addPoint(newPoint);
-	}
-}

package/src/components/builders/RectangleBuilder.ts

@@ -1,74 +0,0 @@
-import Mat33 from '../../math/Mat33';
-import Path from '../../math/Path';
-import Rect2 from '../../math/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 makeFilledRectangleBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, viewport: Viewport) => {
-	return new RectangleBuilder(initialPoint, true, viewport);
-};
-
-export const makeOutlinedRectangleBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, viewport: Viewport) => {
-	return new RectangleBuilder(initialPoint, false, viewport);
-};
-
-export default class RectangleBuilder implements ComponentBuilder {
-	private endPoint: StrokeDataPoint;
-
-	public constructor(
-		private readonly startPoint: StrokeDataPoint,
-		private filled: boolean,
-		private 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 canvasAngle = this.viewport.getRotationAngle();
-		const rotationMat = Mat33.zRotation(-canvasAngle);
-
-		// Adjust startPoint and endPoint such that applying [rotationMat] to them
-		// brings them to this.startPoint and this.endPoint.
-		const startPoint = rotationMat.inverse().transformVec2(this.startPoint.pos);
-		const endPoint = rotationMat.inverse().transformVec2(this.endPoint.pos);
-
-		const rect = Rect2.fromCorners(startPoint, endPoint);
-		const path = Path.fromRect(
-			rect,
-			this.filled ? null : this.endPoint.width,
-		).transformedBy(
-			// Rotate the canvas rectangle so that its rotation matches the screen
-			rotationMat
-		).mapPoints(point => this.viewport.roundPoint(point));
-
-		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

@@ -1,15 +0,0 @@
-import Rect2 from '../../math/Rect2';
-import AbstractRenderer from '../../rendering/renderers/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/components/lib.ts

@@ -1,25 +0,0 @@
-export * from './builders/types';
-export { makeFreehandLineBuilder } from './builders/FreehandLineBuilder';
-export { makePressureSensitiveFreehandLineBuilder } from './builders/PressureSensitiveFreehandLineBuilder';
-export { default as StrokeSmoother, Curve as StrokeSmootherCurve } from './util/StrokeSmoother';
-
-export * from './AbstractComponent';
-export { default as AbstractComponent } from './AbstractComponent';
-import Stroke from './Stroke';
-import TextComponent from './TextComponent';
-import ImageComponent from './ImageComponent';
-import RestyleableComponent, { createRestyleComponentCommand, isRestylableComponent } from './RestylableComponent';
-import ImageBackground from './ImageBackground';
-
-export {
-	Stroke,
-	TextComponent as Text,
-	RestyleableComponent,
-	createRestyleComponentCommand,
-	isRestylableComponent,
-
-	TextComponent,
-	Stroke as StrokeComponent,
-	ImageBackground as BackgroundComponent,
-	ImageComponent,
-};

package/src/components/localization.ts

@@ -1,22 +0,0 @@
-export interface ImageComponentLocalization {
-	unlabeledImageNode: string;
-	text: (text: string)=> string;
-	imageNode: (description: string)=> string;
-	stroke: string;
-    svgObject: string;
-	emptyBackground: string;
-	filledBackgroundWithColor: (color: string)=> string;
-
-	restyledElement: (elementDescription: string) => string;
-}
-
-export const defaultComponentLocalization: ImageComponentLocalization = {
-	unlabeledImageNode: 'Unlabeled image node',
-	stroke: 'Stroke',
-	svgObject: 'SVG Object',
-	emptyBackground: 'Empty background',
-	filledBackgroundWithColor: (color) => `Filled background (${color})`,
-	text: (text) => `Text object: ${text}`,
-	imageNode: (description: string) => `Image: ${description}`,
-	restyledElement: (elementDescription: string) => `Restyled ${elementDescription}`,
-};