js-draw 0.18.1 → 0.18.2

package/src/components/UnknownSVGObject.ts

@@ -0,0 +1,60 @@
+//
+// 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

@@ -0,0 +1,107 @@
+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

@@ -0,0 +1,212 @@
+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

@@ -0,0 +1,77 @@
+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;
+	}
+}