js-draw 0.1.7 → 0.1.10

package/dist/src/tools/BaseTool.js

@@ -16,6 +16,9 @@ export default class BaseTool {
     onKeyPress(_event) {
         return false;
     }
+    onKeyUp(_event) {
+        return false;
+    }
     setEnabled(enabled) {
         var _a;
         this.enabled = enabled;

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

@@ -14,7 +14,8 @@ export declare enum PanZoomMode {
     OneFingerTouchGestures = 1,
     TwoFingerTouchGestures = 2,
     RightClickDrags = 4,
-    SinglePointerGestures = 8
+    SinglePointerGestures = 8,
+    Keyboard = 16
 }
 export default class PanZoom extends BaseTool {
     private editor;

package/dist/src/tools/PanZoom.js

@@ -12,6 +12,7 @@ export var PanZoomMode;
     PanZoomMode[PanZoomMode["TwoFingerTouchGestures"] = 2] = "TwoFingerTouchGestures";
     PanZoomMode[PanZoomMode["RightClickDrags"] = 4] = "RightClickDrags";
     PanZoomMode[PanZoomMode["SinglePointerGestures"] = 8] = "SinglePointerGestures";
+    PanZoomMode[PanZoomMode["Keyboard"] = 16] = "Keyboard";
 })(PanZoomMode || (PanZoomMode = {}));
 export default class PanZoom extends BaseTool {
     constructor(editor, mode, description) {
@@ -133,6 +134,9 @@ export default class PanZoom extends BaseTool {
         return true;
     }
     onKeyPress({ key }) {
+        if (!(this.mode & PanZoomMode.Keyboard)) {
+            return false;
+        }
         let translation = Vec2.zero;
         let scale = 1;
         let rotation = 0;

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

@@ -1,8 +1,9 @@
 import Command from '../commands/Command';
 import Editor from '../Editor';
+import Mat33 from '../geometry/Mat33';
 import Rect2 from '../geometry/Rect2';
 import { Point2, Vec2 } from '../geometry/Vec2';
-import { PointerEvt } from '../types';
+import { KeyPressEvent, KeyUpEvent, PointerEvt } from '../types';
 import BaseTool from './BaseTool';
 import { ToolType } from './ToolController';
 declare class Selection {
@@ -20,7 +21,8 @@ declare class Selection {
     handleResizeCornerDrag(deltaPosition: Vec2): void;
     handleRotateCircleDrag(offset: Vec2): void;
     private computeTransformCommands;
-    finishDragging(): void;
+    transformPreview(transform: Mat33): void;
+    finalizeTransform(): void;
     private static ApplyTransformationCommand;
     private previewTransformCmds;
     appendBackgroundBoxTo(elem: HTMLElement): void;
@@ -32,6 +34,7 @@ declare class Selection {
     private recomputeBoxRotation;
     getSelectedItemCount(): number;
     updateUI(): void;
+    scrollTo(): void;
     deleteSelectedObjects(): Command;
     duplicateSelectedObjects(): Command;
 }
@@ -45,8 +48,12 @@ export default class SelectionTool extends BaseTool {
     onPointerDown(event: PointerEvt): boolean;
     onPointerMove(event: PointerEvt): void;
     private onGestureEnd;
+    private zoomToSelection;
     onPointerUp(event: PointerEvt): void;
     onGestureCancel(): void;
+    private static handleableKeys;
+    onKeyPress(event: KeyPressEvent): boolean;
+    onKeyUp(evt: KeyUpEvent): boolean;
     setEnabled(enabled: boolean): void;
     getSelection(): Selection | null;
     clearSelection(): void;

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.7",
+  "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) {
@@ -391,6 +408,11 @@ export class Editor {
 	public rerender(showImageBounds: boolean = true) {
 		this.display.startRerender();
 
+		// Don't render if the display has zero size.
+		if (this.display.width === 0 || this.display.height === 0) {
+			return;
+		}
+
 		// Draw a rectangle around the region that will be visible on save
 		const renderer = this.display.getDryInkRenderer();
 

package/src/EditorImage.test.ts

@@ -48,7 +48,7 @@ describe('EditorImage', () => {
 		expect(renderer.objectNestingLevel).toBe(0);
 		editor.dispatch(addTestStrokeCommand);
 		editor.rerender();
-		expect(renderer.renderedPathCount - emptyDocumentPathCount).toBe(1);
+		expect(renderer.renderedPathCount - emptyDocumentPathCount).toBeGreaterThanOrEqual(1);
 
 		// Should not be within objects after finished rendering
 		expect(renderer.objectNestingLevel).toBe(0);

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/components/builders/RectangleBuilder.ts

@@ -1,3 +1,4 @@
+import Mat33 from '../../geometry/Mat33';
 import Path from '../../geometry/Path';
 import Rect2 from '../../geometry/Rect2';
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
@@ -7,18 +8,22 @@ 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);
+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);
+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) {
+	public constructor(
+		private readonly startPoint: StrokeDataPoint,
+		private filled: boolean,
+		private viewport: Viewport,
+	) {
 		// Initially, the start and end points are the same.
 		this.endPoint = startPoint;
 	}
@@ -29,11 +34,21 @@ export default class RectangleBuilder implements ComponentBuilder {
 	}
 
 	private buildPreview(): Stroke {
-		const startPoint = this.startPoint.pos;
-		const endPoint = this.endPoint.pos;
+		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(
-			Rect2.fromCorners(startPoint, endPoint),
+			rect,
 			this.filled ? null : this.endPoint.width,
+		).transformedBy(
+			// Rotate the canvas rectangle so that its rotation matches the screen
+			rotationMat
 		);
 
 		const preview = new Stroke([

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;
+		}
+	}
 }