js-draw 0.1.11 → 0.2.0

package/src/components/Text.ts

@@ -1,6 +1,6 @@
-import LineSegment2 from '../geometry/LineSegment2';
-import Mat33 from '../geometry/Mat33';
-import Rect2 from '../geometry/Rect2';
+import LineSegment2 from '../math/LineSegment2';
+import Mat33 from '../math/Mat33';
+import Rect2 from '../math/Rect2';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import RenderingStyle, { styleFromJSON, styleToJSON } from '../rendering/RenderingStyle';
 import AbstractComponent from './AbstractComponent';
@@ -26,6 +26,7 @@ export default class Text extends AbstractComponent {
 		private readonly style: TextStyle,
 
 		// If not given, an HtmlCanvasElement is used to determine text boundaries.
+		// @internal
 		private readonly getTextDimens: GetTextDimensCallback = Text.getTextDimens,
 	) {
 		super(componentTypeId);
@@ -152,7 +153,7 @@ export default class Text extends AbstractComponent {
 		return localizationTable.text(this.getText());
 	}
 
-	protected serializeToString(): string {
+	protected serializeToJSON(): Record<string, any> {
 		const serializableStyle = {
 			...this.style,
 			renderingStyle: styleToJSON(this.style.renderingStyle),
@@ -165,21 +166,19 @@ export default class Text extends AbstractComponent {
 				};
 			} else {
 				return {
-					json: text.serializeToString(),
+					json: text.serializeToJSON(),
 				};
 			}
 		});
 
-		return JSON.stringify({
+		return {
 			textObjects,
 			transform: this.transform.toArray(),
 			style: serializableStyle,
-		});
+		};
 	}
 
-	public static deserializeFromString(data: string, getTextDimens: GetTextDimensCallback = Text.getTextDimens): Text {
-		const json = JSON.parse(data);
-
+	public static deserializeFromString(json: any, getTextDimens: GetTextDimensCallback = Text.getTextDimens): Text {
 		const style: TextStyle = {
 			renderingStyle: styleFromJSON(json.style.renderingStyle),
 			size: json.style.size,

package/src/components/UnknownSVGObject.ts

@@ -1,6 +1,12 @@
-import LineSegment2 from '../geometry/LineSegment2';
-import Mat33 from '../geometry/Mat33';
-import Rect2 from '../geometry/Rect2';
+//
+// 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';
@@ -39,7 +45,7 @@ export default class UnknownSVGObject extends AbstractComponent {
 		return localization.svgObject;
 	}
 
-	protected serializeToString(): string | null {
+	protected serializeToJSON(): string | null {
 		return JSON.stringify({
 			html: this.svgObject.outerHTML,
 		});

package/src/components/builders/ArrowBuilder.ts

@@ -1,5 +1,5 @@
-import { PathCommandType } from '../../geometry/Path';
-import Rect2 from '../../geometry/Rect2';
+import { PathCommandType } from '../../math/Path';
+import Rect2 from '../../math/Rect2';
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import Viewport from '../../Viewport';

package/src/components/builders/FreehandLineBuilder.ts

@@ -1,9 +1,9 @@
 import { Bezier } from 'bezier-js';
 import AbstractRenderer, { RenderablePathSpec } from '../../rendering/renderers/AbstractRenderer';
-import { Point2, Vec2 } from '../../geometry/Vec2';
-import Rect2 from '../../geometry/Rect2';
-import { PathCommand, PathCommandType } from '../../geometry/Path';
-import LineSegment2 from '../../geometry/LineSegment2';
+import { Point2, Vec2 } from '../../math/Vec2';
+import Rect2 from '../../math/Rect2';
+import { LinePathCommand, PathCommandType, QuadraticBezierPathCommand } from '../../math/Path';
+import LineSegment2 from '../../math/LineSegment2';
 import Stroke from '../Stroke';
 import Viewport from '../../Viewport';
 import { StrokeDataPoint } from '../../types';
@@ -22,9 +22,35 @@ export const makeFreehandLineBuilder: ComponentBuilderFactory = (initialPoint: S
 	);
 };
 
+type CurrentSegmentToPathResult = {
+	upperCurve: QuadraticBezierPathCommand,
+	lowerToUpperConnector: LinePathCommand,
+	upperToLowerConnector: LinePathCommand,
+	lowerCurve: QuadraticBezierPathCommand,
+};
+
 // Handles stroke smoothing and creates Strokes from user/stylus input.
 export default class FreehandLineBuilder implements ComponentBuilder {
-	private segments: RenderablePathSpec[];
+	private isFirstSegment: boolean = true;
+	private pathStartConnector: LinePathCommand|null = null;
+	private mostRecentConnector: LinePathCommand|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: QuadraticBezierPathCommand[];
+	private lowerSegments: QuadraticBezierPathCommand[];
+
 	private buffer: Point2[];
 	private lastPoint: StrokeDataPoint;
 	private lastExitingVec: Vec2;
@@ -47,7 +73,9 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		private maxFitAllowed: number
 	) {
 		this.lastPoint = this.startPoint;
-		this.segments = [];
+		this.upperSegments = [];
+		this.lowerSegments = [];
+
 		this.buffer = [this.startPoint.pos];
 		this.momentum = Vec2.zero;
 		this.currentCurve = null;
@@ -65,19 +93,82 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		};
 	}
 
-	// Get the segments that make up this' path. Can be called after calling build()
-	private getPreview(): RenderablePathSpec[] {
-		if (this.currentCurve && this.lastPoint) {
-			const currentPath = this.currentSegmentToPath();
-			return this.segments.concat(currentPath);
+	private previewPath(): RenderablePathSpec|null {
+		let upperPath: QuadraticBezierPathCommand[];
+		let lowerPath: QuadraticBezierPathCommand[];
+		let lowerToUpperCap: LinePathCommand;
+		let pathStartConnector: LinePathCommand;
+		if (this.currentCurve) {
+			const { upperCurve, lowerToUpperConnector, upperToLowerConnector, lowerCurve } = this.currentSegmentToPath();
+			upperPath = this.upperSegments.concat(upperCurve);
+			lowerPath = this.lowerSegments.concat(lowerCurve);
+			lowerToUpperCap = lowerToUpperConnector;
+			pathStartConnector = this.pathStartConnector ?? upperToLowerConnector;
+		} else {
+			if (this.mostRecentConnector === null || this.pathStartConnector === null) {
+				return null;
+			}
+
+			upperPath = this.upperSegments.slice();
+			lowerPath = this.lowerSegments.slice();
+			lowerToUpperCap = this.mostRecentConnector;
+			pathStartConnector = this.pathStartConnector;
 		}
+		const startPoint = lowerPath[lowerPath.length - 1].endPoint;
 
-		return this.segments;
+
+		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 previewStroke(): Stroke|null {
+		const pathPreview = this.previewPath();
+
+		if (pathPreview) {
+			return new Stroke([ pathPreview ]);
+		}
+		return null;
 	}
 
 	public preview(renderer: AbstractRenderer) {
-		for (const part of this.getPreview()) {
-			renderer.drawPath(part);
+		const path = this.previewPath();
+		if (path) {
+			renderer.drawPath(path);
 		}
 	}
 
@@ -85,9 +176,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		if (this.lastPoint) {
 			this.finalizeCurrentCurve();
 		}
-		return new Stroke(
-			this.segments,
-		);
+		return this.previewStroke()!;
 	}
 
 	private roundPoint(point: Point2): Point2 {
@@ -98,59 +187,77 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		// Case where no points have been added
 		if (!this.currentCurve) {
 			// Don't create a circle around the initial point if the stroke has more than one point.
-			if (this.segments.length > 0) {
+			if (!this.isFirstSegment) {
 				return;
 			}
 
-			const width = Viewport.roundPoint(this.startPoint.width / 3, this.minFitAllowed);
+			const width = Viewport.roundPoint(this.startPoint.width / 3.5, this.minFitAllowed);
 			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.segments.push({
-				// Start on the right, cycle clockwise:
-				//    |
-				//  ----- ←
-				//    |
-				startPoint: this.startPoint.pos.plus(Vec2.of(width, 0)),
-				commands: [
-					{
-						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)),
-					},
-				],
-				style: this.getRenderingStyle(),
-			});
+			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;
 		}
 
-		this.segments.push(this.currentSegmentToPath());
+		const { upperCurve, lowerToUpperConnector, upperToLowerConnector, lowerCurve } = this.currentSegmentToPath();
+
+		if (this.isFirstSegment) {
+			// 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.upperSegments.push(upperCurve);
+		this.lowerSegments.push(lowerCurve);
+
 		const lastPoint = this.buffer[this.buffer.length - 1];
 		this.lastExitingVec = Vec2.ofXY(
 			this.currentCurve.points[2]
 		).minus(Vec2.ofXY(this.currentCurve.points[1]));
-		console.assert(this.lastExitingVec.magnitude() !== 0);
+		console.assert(this.lastExitingVec.magnitude() !== 0, 'lastExitingVec has zero length!');
 
 		// Use the last two points to start a new curve (the last point isn't used
 		// in the current curve and we want connected curves to share end points)
@@ -160,7 +267,8 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		this.currentCurve = null;
 	}
 
-	private currentSegmentToPath(): RenderablePathSpec {
+	// Returns [upper curve, connector, lower curve]
+	private currentSegmentToPath(): CurrentSegmentToPathResult {
 		if (this.currentCurve == null) {
 			throw new Error('Invalid State: currentCurve is null!');
 		}
@@ -217,31 +325,33 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 			halfVec = halfVec.times(2);
 		}
 
+		// Each starts at startPt ± startVec
 
-		const pathCommands: PathCommand[] = [
-			{
-				kind: PathCommandType.QuadraticBezierTo,
-				controlPoint: this.roundPoint(controlPoint.plus(halfVec)),
-				endPoint: this.roundPoint(endPt.plus(endVec)),
-			},
+		const lowerCurve: QuadraticBezierPathCommand = {
+			kind: PathCommandType.QuadraticBezierTo,
+			controlPoint: this.roundPoint(controlPoint.plus(halfVec)),
+			endPoint: this.roundPoint(endPt.plus(endVec)),
+		};
 
-			{
-				kind: PathCommandType.LineTo,
-				point: this.roundPoint(endPt.minus(endVec)),
-			},
-
-			{
-				kind: PathCommandType.QuadraticBezierTo,
-				controlPoint: this.roundPoint(controlPoint.minus(halfVec)),
-				endPoint: this.roundPoint(startPt.minus(startVec)),
-			},
-		];
+		// From the end of the upperCurve to the start of the lowerCurve:
+		const upperToLowerConnector: LinePathCommand = {
+			kind: PathCommandType.LineTo,
+			point: this.roundPoint(startPt.plus(startVec)),
+		};
 
-		return {
-			startPoint: this.roundPoint(startPt.plus(startVec)),
-			commands: pathCommands,
-			style: this.getRenderingStyle(),
+		// From the end of lowerCurve to the start of upperCurve:
+		const lowerToUpperConnector: LinePathCommand = {
+			kind: PathCommandType.LineTo,
+			point: this.roundPoint(endPt.minus(endVec))
+		};
+
+		const upperCurve: QuadraticBezierPathCommand = {
+			kind: PathCommandType.QuadraticBezierTo,
+			controlPoint: this.roundPoint(controlPoint.minus(halfVec)),
+			endPoint: this.roundPoint(startPt.minus(startVec)),
 		};
+
+		return { upperCurve, upperToLowerConnector, lowerToUpperConnector, lowerCurve };
 	}
 
 	// Compute the direction of the velocity at the end of this.buffer
@@ -264,7 +374,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 			
 			const threshold = Math.min(this.lastPoint.width, newPoint.width) / 4;
 			const shouldSnapToInitial = this.startPoint.pos.minus(newPoint.pos).magnitude() < threshold
-				&& this.segments.length === 0;
+				&& this.isFirstSegment;
 			
 			// Snap to the starting point if the stroke is contained within a small ball centered
 			// at the starting point.

package/src/components/builders/LineBuilder.ts

@@ -1,5 +1,5 @@
-import { PathCommandType } from '../../geometry/Path';
-import Rect2 from '../../geometry/Rect2';
+import { PathCommandType } from '../../math/Path';
+import Rect2 from '../../math/Rect2';
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import Viewport from '../../Viewport';

package/src/components/builders/RectangleBuilder.ts

@@ -1,6 +1,6 @@
-import Mat33 from '../../geometry/Mat33';
-import Path from '../../geometry/Path';
-import Rect2 from '../../geometry/Rect2';
+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';

package/src/components/builders/types.ts

@@ -1,4 +1,4 @@
-import Rect2 from '../../geometry/Rect2';
+import Rect2 from '../../math/Rect2';
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import Viewport from '../../Viewport';

package/src/components/lib.ts

@@ -0,0 +1,9 @@
+import AbstractComponent from './AbstractComponent';
+import Stroke from './Stroke';
+import Text from './Text';
+
+export {
+	AbstractComponent,
+	Stroke,
+	Text,
+};

package/src/lib.ts

@@ -0,0 +1,28 @@
+/**
+ * The main entrypoint for the NPM package. Everything exported by this file
+ * is available through the `js-draw` package.
+ * 
+ * @example
+ * ```
+ * import { Editor, Vec3, Mat33 } from 'js-draw';
+ * ```
+ * 
+ * @see
+ * {@link Editor!}
+ * 
+ * @packageDocumentation
+ */
+
+import Editor from './Editor';
+export { EditorEventType } from './types';
+export { default as getLocalizationTable } from './localizations/getLocalizationTable';
+export * from './localization';
+
+export { default as Color4 } from './Color4';
+export * from './math/lib';
+export * from './components/lib';
+export * from './commands/lib';
+export { default as HTMLToolbar } from './toolbar/HTMLToolbar';
+
+export { Editor };
+export default Editor;

package/src/localization.ts

@@ -6,6 +6,7 @@ import { defaultToolLocalization, ToolLocalization } from './tools/localization'
 
 
 export interface EditorLocalization extends ToolbarLocalization, ToolLocalization, CommandLocalization, ImageComponentLocalization, TextRendererLocalization {
+	accessibilityInputInstructions: string;
 	undoAnnouncement: (actionDescription: string)=> string;
 	redoAnnouncement: (actionDescription: string)=> string;
 	doneLoading: string;
@@ -19,6 +20,11 @@ export const defaultEditorLocalization: EditorLocalization = {
 	...defaultCommandLocalization,
 	...defaultComponentLocalization,
 	...defaultTextRendererLocalization,
+	accessibilityInputInstructions: [
+		'Press "t" to read the contents of the viewport as text.',
+		'Use the arrow keys to move the viewport, click and drag to draw strokes.',
+		'Press "w" to zoom in and "s" to zoom out.',
+	].join(' '),
 	loading: (percentage: number) => `Loading ${percentage}%...`,
 	imageEditor: 'Image Editor',
 	doneLoading: 'Done loading',

package/src/localizations/es.ts

@@ -38,7 +38,8 @@ const localization: EditorLocalization = {
 	resizeImageToSelection: 'Redimensionar la imagen a lo que está seleccionado',
 	deleteSelection: 'Borra la selección',
 	duplicateSelection: 'Duplica la selección',
-	pickColorFronScreen: 'Selecciona un color de la pantalla',
+	pickColorFromScreen: 'Selecciona un color de la pantalla',
+	clickToPickColorAnnouncement: 'Haga un clic en la pantalla para seleccionar un color',
 	dropdownShown(toolName: string): string {
 		return `Menú por ${toolName} es visible`;
 	},