js-draw 0.1.9 → 0.1.10

package/dist/src/tools/SelectionTool.js

@@ -15,6 +15,7 @@ import Mat33 from '../geometry/Mat33';
 import Rect2 from '../geometry/Rect2';
 import { Vec2 } from '../geometry/Vec2';
 import { EditorEventType } from '../types';
+import Viewport from '../Viewport';
 import BaseTool from './BaseTool';
 import { ToolType } from './ToolController';
 const handleScreenSize = 30;
@@ -143,13 +144,13 @@ class Selection {
         this.transform = Mat33.identity;
         makeDraggable(draggableBackground, (deltaPosition) => {
             this.handleBackgroundDrag(deltaPosition);
-        }, () => this.finishDragging());
+        }, () => this.finalizeTransform());
         makeDraggable(resizeCorner, (deltaPosition) => {
             this.handleResizeCornerDrag(deltaPosition);
-        }, () => this.finishDragging());
+        }, () => this.finalizeTransform());
         makeDraggable(this.rotateCircle, (_deltaPosition, offset) => {
             this.handleRotateCircleDrag(offset);
-        }, () => this.finishDragging());
+        }, () => this.finalizeTransform());
     }
     // Note a small change in the position of this' background while dragging
     // At the end of a drag, changes should be applied by calling this.finishDragging()
@@ -159,9 +160,7 @@ class Selection {
         deltaPosition = this.editor.viewport.screenToCanvasTransform.transformVec3(deltaPosition);
         // Snap position to a multiple of 10 (additional decimal points lead to larger files).
         deltaPosition = this.editor.viewport.roundPoint(deltaPosition);
-        this.region = this.region.translatedBy(deltaPosition);
-        this.transform = this.transform.rightMul(Mat33.translation(deltaPosition));
-        this.previewTransformCmds();
+        this.transformPreview(Mat33.translation(deltaPosition));
     }
     handleResizeCornerDrag(deltaPosition) {
         deltaPosition = this.editor.viewport.screenToCanvasTransform.transformVec3(deltaPosition);
@@ -170,18 +169,11 @@ class Selection {
         const oldHeight = this.region.h;
         const newSize = this.region.size.plus(deltaPosition);
         if (newSize.y > 0 && newSize.x > 0) {
-            this.region = this.region.resizedTo(newSize);
-            const scaleFactor = Vec2.of(this.region.w / oldWidth, this.region.h / oldHeight);
-            const currentTransfm = Mat33.scaling2D(scaleFactor, this.region.topLeft);
-            this.transform = this.transform.rightMul(currentTransfm);
-            this.previewTransformCmds();
+            const scaleFactor = Vec2.of(newSize.x / oldWidth, newSize.y / oldHeight);
+            this.transformPreview(Mat33.scaling2D(scaleFactor, this.region.topLeft));
         }
     }
     handleRotateCircleDrag(offset) {
-        this.boxRotation = this.boxRotation % (2 * Math.PI);
-        if (this.boxRotation < 0) {
-            this.boxRotation += 2 * Math.PI;
-        }
         let targetRotation = offset.angle();
         targetRotation = targetRotation % (2 * Math.PI);
         if (targetRotation < 0) {
@@ -198,17 +190,32 @@ class Selection {
             deltaRotation = Math.floor(Math.abs(deltaRotation) / rotationStep) * rotationStep;
             deltaRotation *= rotationDirection;
         }
-        this.transform = this.transform.rightMul(Mat33.zRotation(deltaRotation, this.region.center));
-        this.boxRotation += deltaRotation;
-        this.previewTransformCmds();
+        this.transformPreview(Mat33.zRotation(deltaRotation, this.region.center));
     }
     computeTransformCommands() {
         return this.selectedElems.map(elem => {
             return elem.transformBy(this.transform);
         });
     }
+    // Applies, previews, but doesn't finalize the given transformation.
+    transformPreview(transform) {
+        this.transform = this.transform.rightMul(transform);
+        const deltaRotation = transform.transformVec3(Vec2.unitX).angle();
+        transform = transform.rightMul(Mat33.zRotation(-deltaRotation, this.region.center));
+        this.boxRotation += deltaRotation;
+        this.boxRotation = this.boxRotation % (2 * Math.PI);
+        if (this.boxRotation < 0) {
+            this.boxRotation += 2 * Math.PI;
+        }
+        const newSize = transform.transformVec3(this.region.size);
+        const translation = transform.transformVec2(this.region.topLeft).minus(this.region.topLeft);
+        this.region = this.region.resizedTo(newSize);
+        this.region = this.region.translatedBy(translation);
+        this.previewTransformCmds();
+        this.scrollTo();
+    }
     // Applies the current transformation to the selection
-    finishDragging() {
+    finalizeTransform() {
         this.transformationCommands.forEach(cmd => {
             cmd.unapply(this.editor);
         });
@@ -328,6 +335,16 @@ class Selection {
         this.backgroundBox.style.transform = `rotate(${rotationDeg}deg)`;
         this.rotateCircle.style.transform = `rotate(${-rotationDeg}deg)`;
     }
+    // Scroll the viewport to this. Does not zoom
+    scrollTo() {
+        const viewport = this.editor.viewport;
+        const visibleRect = viewport.visibleRect;
+        if (!visibleRect.containsPoint(this.region.center)) {
+            const closestPoint = visibleRect.getClosestPointOnBoundaryTo(this.region.center);
+            const delta = this.region.center.minus(closestPoint);
+            this.editor.dispatchNoAnnounce(new Viewport.ViewportTransform(Mat33.translation(delta.times(-1))), false);
+        }
+    }
     deleteSelectedObjects() {
         return new Erase(this.selectedElems);
     }
@@ -384,6 +401,7 @@ export default class SelectionTool extends BaseTool {
             (_a = this.selectionBox) === null || _a === void 0 ? void 0 : _a.recomputeRegion();
             (_b = this.selectionBox) === null || _b === void 0 ? void 0 : _b.updateUI();
         });
+        this.editor.handleKeyEventsFrom(this.handleOverlay);
     }
     onPointerDown(event) {
         if (event.allPointers.length === 1 && event.current.isPrimary) {
@@ -413,6 +431,11 @@ export default class SelectionTool extends BaseTool {
         });
         if (hasSelection) {
             this.editor.announceForAccessibility(this.editor.localization.selectedElements(this.selectionBox.getSelectedItemCount()));
+            this.zoomToSelection();
+        }
+    }
+    zoomToSelection() {
+        if (this.selectionBox) {
             const selectionRect = this.selectionBox.region;
             this.editor.dispatchNoAnnounce(this.editor.viewport.zoomTo(selectionRect, false), false);
         }
@@ -430,12 +453,93 @@ export default class SelectionTool extends BaseTool {
         this.selectionBox = this.prevSelectionBox;
         (_b = this.selectionBox) === null || _b === void 0 ? void 0 : _b.appendBackgroundBoxTo(this.handleOverlay);
     }
+    onKeyPress(event) {
+        let rotationSteps = 0;
+        let xTranslateSteps = 0;
+        let yTranslateSteps = 0;
+        let xScaleSteps = 0;
+        let yScaleSteps = 0;
+        switch (event.key) {
+            case 'a':
+            case 'h':
+            case 'ArrowLeft':
+                xTranslateSteps -= 1;
+                break;
+            case 'd':
+            case 'l':
+            case 'ArrowRight':
+                xTranslateSteps += 1;
+                break;
+            case 'q':
+            case 'k':
+            case 'ArrowUp':
+                yTranslateSteps -= 1;
+                break;
+            case 'e':
+            case 'j':
+            case 'ArrowDown':
+                yTranslateSteps += 1;
+                break;
+            case 'r':
+                rotationSteps += 1;
+                break;
+            case 'R':
+                rotationSteps -= 1;
+                break;
+            case 'i':
+                xScaleSteps -= 1;
+                break;
+            case 'I':
+                xScaleSteps += 1;
+                break;
+            case 'o':
+                yScaleSteps -= 1;
+                break;
+            case 'O':
+                yScaleSteps += 1;
+                break;
+        }
+        let handled = xTranslateSteps !== 0
+            || yTranslateSteps !== 0
+            || rotationSteps !== 0
+            || xScaleSteps !== 0
+            || yScaleSteps !== 0;
+        if (!this.selectionBox) {
+            handled = false;
+        }
+        else if (handled) {
+            const translateStepSize = 10 * this.editor.viewport.getSizeOfPixelOnCanvas();
+            const rotateStepSize = Math.PI / 8;
+            const scaleStepSize = translateStepSize / 2;
+            const region = this.selectionBox.region;
+            const scaledSize = this.selectionBox.region.size.plus(Vec2.of(xScaleSteps, yScaleSteps).times(scaleStepSize));
+            const transform = Mat33.scaling2D(Vec2.of(
+            // Don't more-than-half the size of the selection
+            Math.max(0.5, scaledSize.x / region.size.x), Math.max(0.5, scaledSize.y / region.size.y)), region.topLeft).rightMul(Mat33.zRotation(rotationSteps * rotateStepSize, region.center)).rightMul(Mat33.translation(Vec2.of(xTranslateSteps, yTranslateSteps).times(translateStepSize)));
+            this.selectionBox.transformPreview(transform);
+        }
+        return handled;
+    }
+    onKeyUp(evt) {
+        if (this.selectionBox && SelectionTool.handleableKeys.some(key => key === evt.key)) {
+            this.selectionBox.finalizeTransform();
+            return true;
+        }
+        return false;
+    }
     setEnabled(enabled) {
         super.setEnabled(enabled);
         // Clear the selection
         this.handleOverlay.replaceChildren();
         this.selectionBox = null;
         this.handleOverlay.style.display = enabled ? 'block' : 'none';
+        if (enabled) {
+            this.handleOverlay.tabIndex = 0;
+            this.handleOverlay.ariaLabel = this.editor.localization.selectionToolKeyboardShortcuts;
+        }
+        else {
+            this.handleOverlay.tabIndex = -1;
+        }
     }
     // Get the object responsible for displaying this' selection.
     getSelection() {
@@ -451,3 +555,11 @@ export default class SelectionTool extends BaseTool {
         });
     }
 }
+SelectionTool.handleableKeys = [
+    'a', 'h', 'ArrowLeft',
+    'd', 'l', 'ArrowRight',
+    'q', 'k', 'ArrowUp',
+    'e', 'j', 'ArrowDown',
+    'r', 'R',
+    'i', 'I', 'o', 'O',
+];

package/dist/src/tools/ToolController.js

@@ -23,6 +23,7 @@ export default class ToolController {
     constructor(editor, localization) {
         const primaryToolEnabledGroup = new ToolEnabledGroup();
         const panZoomTool = new PanZoom(editor, PanZoomMode.TwoFingerTouchGestures | PanZoomMode.RightClickDrags, localization.touchPanTool);
+        const keyboardPanZoomTool = new PanZoom(editor, PanZoomMode.Keyboard, localization.keyboardPanZoom);
         const primaryPenTool = new Pen(editor, localization.penTool(1), { color: Color4.purple, thickness: 16 });
         const primaryTools = [
             new SelectionTool(editor, localization.selectionTool),
@@ -38,6 +39,7 @@ export default class ToolController {
             new PipetteTool(editor, localization.pipetteTool),
             panZoomTool,
             ...primaryTools,
+            keyboardPanZoomTool,
             new UndoRedoShortcut(editor),
         ];
         primaryTools.forEach(tool => tool.setToolGroup(primaryToolEnabledGroup));
@@ -76,8 +78,9 @@ export default class ToolController {
             this.activeTool = null;
             handled = true;
         }
-        else if (event.kind === InputEvtType.WheelEvt || event.kind === InputEvtType.KeyPressEvent) {
+        else if (event.kind === InputEvtType.WheelEvt || event.kind === InputEvtType.KeyPressEvent || event.kind === InputEvtType.KeyUpEvent) {
             const isKeyPressEvt = event.kind === InputEvtType.KeyPressEvent;
+            const isKeyReleaseEvt = event.kind === InputEvtType.KeyUpEvent;
             const isWheelEvt = event.kind === InputEvtType.WheelEvt;
             for (const tool of this.tools) {
                 if (!tool.isEnabled()) {
@@ -85,7 +88,8 @@ export default class ToolController {
                 }
                 const wheelResult = isWheelEvt && tool.onWheel(event);
                 const keyPressResult = isKeyPressEvt && tool.onKeyPress(event);
-                handled = keyPressResult || wheelResult;
+                const keyReleaseResult = isKeyReleaseEvt && tool.onKeyUp(event);
+                handled = keyPressResult || wheelResult || keyReleaseResult;
                 if (handled) {
                     break;
                 }

package/dist/src/tools/localization.d.ts

@@ -1,4 +1,5 @@
 export interface ToolLocalization {
+    keyboardPanZoom: string;
     penTool: (penId: number) => string;
     selectionTool: string;
     eraserTool: string;

package/dist/src/tools/localization.js

@@ -7,6 +7,7 @@ export const defaultToolLocalization = {
     undoRedoTool: 'Undo/Redo',
     rightClickDragPanTool: 'Right-click drag',
     pipetteTool: 'Pick color from screen',
+    keyboardPanZoom: 'Keyboard pan/zoom shortcuts',
     textTool: 'Text',
     enterTextToInsert: 'Text to insert',
     toolEnabledAnnouncement: (toolName) => `${toolName} enabled`,

package/dist/src/types.d.ts

@@ -19,7 +19,8 @@ export declare enum InputEvtType {
     PointerUpEvt = 2,
     GestureCancelEvt = 3,
     WheelEvt = 4,
-    KeyPressEvent = 5
+    KeyPressEvent = 5,
+    KeyUpEvent = 6
 }
 export interface WheelEvt {
     readonly kind: InputEvtType.WheelEvt;
@@ -31,6 +32,11 @@ export interface KeyPressEvent {
     readonly key: string;
     readonly ctrlKey: boolean;
 }
+export interface KeyUpEvent {
+    readonly kind: InputEvtType.KeyUpEvent;
+    readonly key: string;
+    readonly ctrlKey: boolean;
+}
 export interface GestureCancelEvt {
     readonly kind: InputEvtType.GestureCancelEvt;
 }
@@ -48,7 +54,7 @@ export interface PointerUpEvt extends PointerEvtBase {
     readonly kind: InputEvtType.PointerUpEvt;
 }
 export declare type PointerEvt = PointerDownEvt | PointerMoveEvt | PointerUpEvt;
-export declare type InputEvt = KeyPressEvent | WheelEvt | GestureCancelEvt | PointerEvt;
+export declare type InputEvt = KeyPressEvent | KeyUpEvent | WheelEvt | GestureCancelEvt | PointerEvt;
 export declare type EditorNotifier = EventDispatcher<EditorEventType, EditorEventDataType>;
 export declare enum EditorEventType {
     ToolEnabled = 0,

package/dist/src/types.js

@@ -7,6 +7,7 @@ export var InputEvtType;
     InputEvtType[InputEvtType["GestureCancelEvt"] = 3] = "GestureCancelEvt";
     InputEvtType[InputEvtType["WheelEvt"] = 4] = "WheelEvt";
     InputEvtType[InputEvtType["KeyPressEvent"] = 5] = "KeyPressEvent";
+    InputEvtType[InputEvtType["KeyUpEvent"] = 6] = "KeyUpEvent";
 })(InputEvtType || (InputEvtType = {}));
 export var EditorEventType;
 (function (EditorEventType) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
   "main": "dist/src/Editor.js",
   "types": "dist/src/Editor.d.ts",
@@ -9,6 +9,14 @@
       "types": "./dist/src/Editor.d.ts",
       "default": "./dist/src/Editor.js"
     },
+    "./localizations/getLocalizationTable": {
+      "types": "./dist/src/localizations/getLocalizationTable.d.ts",
+      "default": "./dist/src/localizations/getLocalizationTable.js"
+    },
+    "./getLocalizationTable": {
+      "types": "./dist/src/localizations/getLocalizationTable.d.ts",
+      "default": "./dist/src/localizations/getLocalizationTable.js"
+    },
     "./styles": {
       "default": "./src/styles.js"
     },

package/src/Editor.ts

@@ -17,7 +17,8 @@ import SVGLoader from './SVGLoader';
 import Pointer from './Pointer';
 import Mat33 from './geometry/Mat33';
 import Rect2 from './geometry/Rect2';
-import { defaultEditorLocalization, EditorLocalization } from './localization';
+import { EditorLocalization } from './localization';
+import getLocalizationTable from './localizations/getLocalizationTable';
 
 export interface EditorSettings {
 	// Defaults to RenderingMode.CanvasRenderer
@@ -43,7 +44,7 @@ export class Editor {
 
 	// Viewport for the exported/imported image
 	private importExportViewport: Viewport;
-	public localization: EditorLocalization = defaultEditorLocalization;
+	public localization: EditorLocalization;
 
 	public viewport: Viewport;
 	public toolController: ToolController;
@@ -59,7 +60,7 @@ export class Editor {
 		settings: Partial<EditorSettings> = {},
 	) {
 		this.localization = {
-			...this.localization,
+			...getLocalizationTable(),
 			...settings.localization,
 		};
 
@@ -238,17 +239,7 @@ export class Editor {
 			pointerEnd(evt);
 		});
 
-		this.renderingRegion.addEventListener('keydown', evt => {
-			if (this.toolController.dispatchInputEvent({
-				kind: InputEvtType.KeyPressEvent,
-				key: evt.key,
-				ctrlKey: evt.ctrlKey,
-			})) {
-				evt.preventDefault();
-			} else if (evt.key === 'Escape') {
-				this.renderingRegion.blur();
-			}
-		});
+		this.handleKeyEventsFrom(this.renderingRegion);
 
 		this.container.addEventListener('wheel', evt => {
 			let delta = Vec3.of(evt.deltaX, evt.deltaY, evt.deltaZ);
@@ -307,6 +298,32 @@ export class Editor {
 		});
 	}
 
+	// Adds event listners for keypresses to [elem] and forwards those events to the
+	// editor.
+	public handleKeyEventsFrom(elem: HTMLElement) {
+		elem.addEventListener('keydown', evt => {
+			if (this.toolController.dispatchInputEvent({
+				kind: InputEvtType.KeyPressEvent,
+				key: evt.key,
+				ctrlKey: evt.ctrlKey,
+			})) {
+				evt.preventDefault();
+			} else if (evt.key === 'Escape') {
+				this.renderingRegion.blur();
+			}
+		});
+
+		elem.addEventListener('keyup', evt => {
+			if (this.toolController.dispatchInputEvent({
+				kind: InputEvtType.KeyUpEvent,
+				key: evt.key,
+				ctrlKey: evt.ctrlKey,
+			})) {
+				evt.preventDefault();
+			}
+		});
+	}
+
 	// Adds to history by default
 	public dispatch(command: Command, addToHistory: boolean = true) {
 		if (addToHistory) {

package/src/UndoRedoHistory.ts

@@ -32,6 +32,10 @@ class UndoRedoHistory {
 			command.apply(this.editor);
 		}
 		this.undoStack.push(command);
+
+		for (const elem of this.redoStack) {
+			elem.onDrop(this.editor);
+		}
 		this.redoStack = [];
 		this.fireUpdateEvent();
 	}

package/src/bundle/bundled.ts

@@ -2,6 +2,7 @@
 
 import '../styles';
 import Editor from '../Editor';
+import getLocalizationTable from '../localizations/getLocalizationTable';
 
 export default Editor;
-export { Editor };
+export { Editor, getLocalizationTable };

package/src/geometry/LineSegment2.test.ts

@@ -74,4 +74,19 @@ describe('Line2', () => {
 		expect(line1.intersection(line2)).toBeNull();
 		expect(line2.intersection(line1)).toBeNull();
 	});
+
+	it('Closest point to (0,0) on the line x = 1 should be (1,0)', () => {
+		const line = new LineSegment2(Vec2.of(1, 100), Vec2.of(1, -100));
+		expect(line.closestPointTo(Vec2.zero)).objEq(Vec2.of(1, 0));
+	});
+
+	it('Closest point from (-1,2) to segment((1,1) -> (2,4)) should be (1,1)', () => {
+		const line = new LineSegment2(Vec2.of(1, 1), Vec2.of(2, 4));
+		expect(line.closestPointTo(Vec2.of(-1, 2))).objEq(Vec2.of(1, 1));
+	});
+
+	it('Closest point from (5,2) to segment((1,1) -> (2,4)) should be (2,4)', () => {
+		const line = new LineSegment2(Vec2.of(1, 1), Vec2.of(2, 4));
+		expect(line.closestPointTo(Vec2.of(5, 2))).objEq(Vec2.of(2, 4));
+	});
 });

package/src/geometry/LineSegment2.ts

@@ -7,6 +7,7 @@ interface IntersectionResult {
 }
 
 export default class LineSegment2 {
+	// invariant: ||direction|| = 1
 	public readonly direction: Vec2;
 	public readonly length: number;
 	public readonly bbox;
@@ -124,4 +125,23 @@ export default class LineSegment2 {
 			t: resultT,
 		};
 	}
+
+	// Returns the closest point on this to [target]
+	public closestPointTo(target: Point2) {
+		// Distance from P1 along this' direction.
+		const projectedDistFromP1 = target.minus(this.p1).dot(this.direction);
+		const projectedDistFromP2 = this.length - projectedDistFromP1;
+
+		const projection = this.p1.plus(this.direction.times(projectedDistFromP1));
+
+		if (projectedDistFromP1 > 0 && projectedDistFromP1 < this.length) {
+			return projection;
+		}
+
+		if (Math.abs(projectedDistFromP2) < Math.abs(projectedDistFromP1)) {
+			return this.p2;
+		} else {
+			return this.p1;
+		}
+	}
 }

package/src/geometry/Rect2.test.ts

@@ -147,14 +147,27 @@ describe('Rect2', () => {
 		it('division of empty square', () => {
 			expect(Rect2.empty.divideIntoGrid(1000, 10000).length).toBe(1);
 		});
+
+		it('division of rectangle', () => {
+			expect(new Rect2(0, 0, 2, 1).divideIntoGrid(2, 2)).toMatchObject(
+				[
+					new Rect2(0, 0, 1, 0.5), new Rect2(1, 0, 1, 0.5),
+					new Rect2(0, 0.5, 1, 0.5), new Rect2(1, 0.5, 1, 0.5),
+				]
+			);
+		});
 	});
 
-	it('division of rectangle', () => {
-		expect(new Rect2(0, 0, 2, 1).divideIntoGrid(2, 2)).toMatchObject(
-			[
-				new Rect2(0, 0, 1, 0.5), new Rect2(1, 0, 1, 0.5),
-				new Rect2(0, 0.5, 1, 0.5), new Rect2(1, 0.5, 1, 0.5),
-			]
-		);
+	describe('should correctly return the closest point on the edge of a rectangle', () => {
+		it('with the unit square', () => {
+			const rect = Rect2.unitSquare;
+			expect(rect.getClosestPointOnBoundaryTo(Vec2.zero)).objEq(Vec2.zero);
+			expect(rect.getClosestPointOnBoundaryTo(Vec2.of(-1, -1))).objEq(Vec2.zero);
+			expect(rect.getClosestPointOnBoundaryTo(Vec2.of(-1, 0.5))).objEq(Vec2.of(0, 0.5));
+			expect(rect.getClosestPointOnBoundaryTo(Vec2.of(1, 0.5))).objEq(Vec2.of(1, 0.5));
+			expect(rect.getClosestPointOnBoundaryTo(Vec2.of(0.6, 0.6))).objEq(Vec2.of(1, 0.6));
+			expect(rect.getClosestPointOnBoundaryTo(Vec2.of(2, 0.5))).objEq(Vec2.of(1, 0.5));
+			expect(rect.getClosestPointOnBoundaryTo(Vec2.of(0.6, 0.6))).objEq(Vec2.of(1, 0.6));
+		});
 	});
 });

package/src/geometry/Rect2.ts

@@ -51,6 +51,7 @@ export default class Rect2 {
 		return new Rect2(vec.x + this.x, vec.y + this.y, this.w, this.h);
 	}
 
+	// Returns a copy of this with the given size (but same top-left).
 	public resizedTo(size: Vec2): Rect2 {
 		return new Rect2(this.x, this.y, size.x, size.y);
 	}
@@ -163,6 +164,23 @@ export default class Rect2 {
 		);
 	}
 
+	public getClosestPointOnBoundaryTo(target: Point2) {
+		const closestEdgePoints = this.getEdges().map(edge => {
+			return edge.closestPointTo(target);
+		});
+
+		let closest: Point2|null = null;
+		let closestDist: number|null = null;
+		for (const point of closestEdgePoints) {
+			const dist = point.minus(target).length();
+			if (closestDist === null || dist < closestDist) {
+				closest = point;
+				closestDist = dist;
+			}
+		}
+		return closest!;
+	}
+
 	public get corners(): Point2[] {
 		return [
 			this.bottomRight,
@@ -172,7 +190,7 @@ export default class Rect2 {
 		];
 	}
 
-	public get maxDimension(): number {
+	public get maxDimension() {
 		return Math.max(this.w, this.h);
 	}
 

package/src/localizations/en.ts

@@ -0,0 +1,8 @@
+import { defaultEditorLocalization, EditorLocalization } from '../localization';
+
+// Default localizations are already in English.
+const localization: EditorLocalization = {
+	...defaultEditorLocalization,
+};
+
+export default localization;

package/src/localizations/es.ts

@@ -0,0 +1,60 @@
+import { defaultEditorLocalization, EditorLocalization } from '../localization';
+
+// A partial Spanish localization.
+const localization: EditorLocalization = {
+	...defaultEditorLocalization,
+
+	// Strings for the main editor interface
+	// (see src/localization.ts)
+	loading: (percentage: number) => `Cargando: ${percentage}%...`,
+	imageEditor: 'Editor de dibujos',
+
+	undoAnnouncement: (commandDescription: string) => `${commandDescription} fue deshecho`,
+	redoAnnouncement: (commandDescription: string) => `${commandDescription} fue rehecho`,
+	undo: 'Deshace',
+	redo: 'Rehace',
+
+	// Strings for the toolbar
+	// (see src/toolbar/localization.ts)
+	pen: 'Lapiz',
+	eraser: 'Borrador',
+	select: 'Selecciona',
+	thicknessLabel: 'Tamaño: ',
+	colorLabel: 'Color: ',
+	doneLoading: 'El cargado terminó',
+	fontLabel: 'Fuente: ',
+	anyDevicePanning: 'Mover la pantalla con todo dispotivo',
+	touchPanning: 'Mover la pantalla con un dedo',
+	touchPanTool: 'Instrumento de mover la pantalla con un dedo',
+	outlinedRectanglePen: 'Rectángulo con nada más que un borde',
+	filledRectanglePen: 'Rectángulo sin borde',
+	linePen: 'Línea',
+	arrowPen: 'Flecha',
+	freehandPen: 'Dibuja sin restricción de forma',
+	selectObjectType: 'Forma de dibuja:',
+	handTool: 'Mover',
+	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',
+	dropdownShown(toolName: string): string {
+		return `Menú por ${toolName} es visible`;
+	},
+	dropdownHidden: function (toolName: string): string {
+		return `Menú por ${toolName} fue ocultado`;
+	},
+	colorChangedAnnouncement: function (color: string): string {
+		return `Color fue cambiado a ${color}`;
+	},
+	keyboardPanZoom: 'Mover la pantalla con el teclado',
+	penTool: function (penId: number): string {
+		return `Lapiz ${penId}`;
+	},
+	selectionTool: 'Selecciona',
+	eraserTool: 'Borrador',
+	textTool: 'Texto',
+	enterTextToInsert: 'Entra texto',
+	rerenderAsText: 'Redibuja la pantalla al texto',
+};
+
+export default localization;