js-draw 0.17.4 → 0.18.1

package/src/components/UnknownSVGObject.ts

@@ -1,60 +0,0 @@
-//
-// Stores objects loaded from an SVG that aren't recognised by the editor.
-// @internal
-// @packageDocumentation
-//
-
-import LineSegment2 from '../math/LineSegment2';
-import Mat33 from '../math/Mat33';
-import Rect2 from '../math/Rect2';
-import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
-import SVGRenderer from '../rendering/renderers/SVGRenderer';
-import AbstractComponent from './AbstractComponent';
-import { ImageComponentLocalization } from './localization';
-
-const componentId = 'unknown-svg-object';
-export default class UnknownSVGObject extends AbstractComponent {
-	protected contentBBox: Rect2;
-
-	public constructor(private svgObject: SVGElement) {
-		super(componentId);
-		this.contentBBox = Rect2.of(svgObject.getBoundingClientRect());
-	}
-
-	public render(canvas: AbstractRenderer, _visibleRect?: Rect2): void {
-		if (!(canvas instanceof SVGRenderer)) {
-			// Don't draw unrenderable objects if we can't
-			return;
-		}
-
-		canvas.drawSVGElem(this.svgObject);
-	}
-
-	public intersects(lineSegment: LineSegment2): boolean {
-		return this.contentBBox.getEdges().some(edge => edge.intersection(lineSegment) !== null);
-	}
-
-	protected applyTransformation(_affineTransfm: Mat33): void {
-	}
-
-	public isSelectable() {
-		return false;
-	}
-
-	protected createClone(): AbstractComponent {
-		return new UnknownSVGObject(this.svgObject.cloneNode(true) as SVGElement);
-	}
-
-	public description(localization: ImageComponentLocalization): string {
-		return localization.svgObject;
-	}
-
-	protected serializeToJSON(): string | null {
-		return JSON.stringify({
-			html: this.svgObject.outerHTML,
-		});
-	}
-}
-
-// null: Do not deserialize UnknownSVGObjects.
-AbstractComponent.registerComponent(componentId, null);

package/src/components/builders/ArrowBuilder.ts

@@ -1,107 +0,0 @@
-import Path, { PathCommandType } 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 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/FreehandLineBuilder.ts

@@ -1,212 +0,0 @@
-import AbstractRenderer, { RenderablePathSpec } from '../../rendering/renderers/AbstractRenderer';
-import { Point2, Vec2 } from '../../math/Vec2';
-import Rect2 from '../../math/Rect2';
-import { PathCommand, PathCommandType } 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';
-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/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 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;
-	}
-}