js-draw 0.22.0 → 0.23.0

package/dist/mjs/src/commands/uniteCommands.mjs

@@ -1,3 +1,4 @@
+import  waitForAll  from '../util/waitForAll.mjs';
 import  Command  from './Command.mjs';
 import  SerializableCommand  from './SerializableCommand.mjs';
 class NonSerializableUnion extends Command {
@@ -6,21 +7,10 @@ class NonSerializableUnion extends Command {
         this.commands = commands;
         this.applyChunkSize = applyChunkSize;
     }
-    static waitForAll(commands) {
-        // If any are Promises...
-        if (commands.some(command => command && command['then'])) {
-            console.log('waiting...');
-            // Wait for all commands to finish.
-            return Promise.all(commands)
-                // Ensure we return a Promise<void> and not a Promise<void[]>
-                .then(() => { });
-        }
-        return;
-    }
     apply(editor) {
         if (this.applyChunkSize === undefined) {
             const results = this.commands.map(cmd => cmd.apply(editor));
-            return NonSerializableUnion.waitForAll(results);
+            return waitForAll(results);
         }
         else {
             return editor.asyncApplyCommands(this.commands, this.applyChunkSize);
@@ -31,12 +21,15 @@ class NonSerializableUnion extends Command {
         commands.reverse();
         if (this.applyChunkSize === undefined) {
             const results = commands.map(cmd => cmd.unapply(editor));
-            return NonSerializableUnion.waitForAll(results);
+            return waitForAll(results);
         }
         else {
             return editor.asyncUnapplyCommands(commands, this.applyChunkSize, false);
         }
     }
+    onDrop(editor) {
+        this.commands.forEach(command => command.onDrop(editor));
+    }
     description(editor, localizationTable) {
         const descriptions = [];
         let lastDescription = null;
@@ -68,17 +61,25 @@ class SerializableUnion extends SerializableCommand {
         this.nonserializableCommand = new NonSerializableUnion(commands, applyChunkSize);
     }
     serializeToJSON() {
+        if (this.serializedData) {
+            return this.serializedData;
+        }
         return {
             applyChunkSize: this.applyChunkSize,
             data: this.commands.map(command => command.serialize()),
         };
     }
     apply(editor) {
+        // Cache this' serialized form -- applying this may change how commands serialize.
+        this.serializedData = this.serializeToJSON();
         return this.nonserializableCommand.apply(editor);
     }
     unapply(editor) {
         return this.nonserializableCommand.unapply(editor);
     }
+    onDrop(editor) {
+        this.nonserializableCommand.onDrop(editor);
+    }
     description(editor, localizationTable) {
         return this.nonserializableCommand.description(editor, localizationTable);
     }

package/dist/mjs/src/components/BackgroundComponent.mjs

@@ -167,7 +167,7 @@ export default class BackgroundComponent extends AbstractComponent {
         if (this.backgroundType === BackgroundType.None) {
             return;
         }
-        const clip = true;
+        const clip = this.backgroundType === BackgroundType.Grid;
         canvas.startObject(this.contentBBox, clip);
         if (this.backgroundType === BackgroundType.SolidColor || this.backgroundType === BackgroundType.Grid) {
             // If the rectangle for this region contains the visible rect,
@@ -235,9 +235,16 @@ export default class BackgroundComponent extends AbstractComponent {
         if (this.backgroundType === BackgroundType.SolidColor) {
             return localizationTable.filledBackgroundWithColor(this.mainColor.toString());
         }
-        else {
+        else if (this.backgroundType === BackgroundType.None) {
             return localizationTable.emptyBackground;
         }
+        else if (this.backgroundType === BackgroundType.Grid) {
+            return localizationTable.gridBackground;
+        }
+        else {
+            const exhaustivenessCheck = this.backgroundType;
+            return exhaustivenessCheck;
+        }
     }
     createClone() {
         return new BackgroundComponent(this.backgroundType, this.mainColor);

package/dist/mjs/src/components/ImageComponent.d.ts

@@ -14,6 +14,12 @@ export default class ImageComponent extends AbstractComponent {
     render(canvas: AbstractRenderer, _visibleRect?: Rect2): void;
     getProportionalRenderingTime(): number;
     intersects(lineSegment: LineSegment2): boolean;
+    protected applyTransformation(affineTransfm: Mat33): void;
+    description(localizationTable: ImageComponentLocalization): string;
+    getAltText(): string | undefined;
+    getURL(): string;
+    getTransformation(): Mat33;
+    protected createClone(): AbstractComponent;
     protected serializeToJSON(): {
         src: string;
         label: string | undefined;
@@ -21,11 +27,5 @@ export default class ImageComponent extends AbstractComponent {
         height: number;
         transform: Mat33Array;
     };
-    protected applyTransformation(affineTransfm: Mat33): void;
-    description(localizationTable: ImageComponentLocalization): string;
-    getAltText(): string | undefined;
-    getURL(): string;
-    getTransformation(): Mat33;
-    protected createClone(): AbstractComponent;
     static deserializeFromJSON(data: any): ImageComponent;
 }

package/dist/mjs/src/components/ImageComponent.mjs

@@ -9,6 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import  Mat33  from '../math/Mat33.mjs';
 import  Rect2  from '../math/Rect2.mjs';
+import  { assertIsNumber, assertIsNumberArray }  from '../util/assertions.mjs';
 import  AbstractComponent  from './AbstractComponent.mjs';
 // Represents a raster image.
 export default class ImageComponent extends AbstractComponent {
@@ -98,16 +99,6 @@ export default class ImageComponent extends AbstractComponent {
         }
         return false;
     }
-    serializeToJSON() {
-        return {
-            src: this.image.base64Url,
-            label: this.image.label,
-            // Store the width and height for bounding box computations while the image is loading.
-            width: this.image.image.width,
-            height: this.image.image.height,
-            transform: this.image.transform.toArray(),
-        };
-    }
     applyTransformation(affineTransfm) {
         this.image.transform = affineTransfm.rightMul(this.image.transform);
         this.recomputeBBox();
@@ -127,19 +118,33 @@ export default class ImageComponent extends AbstractComponent {
     createClone() {
         return new ImageComponent(Object.assign({}, this.image));
     }
+    serializeToJSON() {
+        return {
+            src: this.image.base64Url,
+            label: this.image.label,
+            // Store the width and height for bounding box computations while the image is loading.
+            width: this.image.image.width,
+            height: this.image.image.height,
+            transform: this.image.transform.toArray(),
+        };
+    }
     static deserializeFromJSON(data) {
         if (!(typeof data.src === 'string')) {
             throw new Error(`${data} has invalid format! Expected src property.`);
         }
+        assertIsNumberArray(data.transform);
+        assertIsNumber(data.width);
+        assertIsNumber(data.height);
         const image = new Image();
         image.src = data.src;
         image.width = data.width;
         image.height = data.height;
+        const transform = new Mat33(...data.transform);
         return new ImageComponent({
             image: image,
-            base64Url: image.src,
+            base64Url: data.src,
             label: data.label,
-            transform: new Mat33(...data.transform),
+            transform,
         });
     }
 }

package/dist/mjs/src/components/lib.d.ts

@@ -10,4 +10,4 @@ import ImageComponent from './ImageComponent';
 import RestyleableComponent from './RestylableComponent';
 import { createRestyleComponentCommand, isRestylableComponent, ComponentStyle as RestyleableComponentStyle } from './RestylableComponent';
 import BackgroundComponent from './BackgroundComponent';
-export { Stroke, TextComponent as Text, RestyleableComponent, createRestyleComponentCommand, isRestylableComponent, RestyleableComponentStyle, TextComponent, Stroke as StrokeComponent, BackgroundComponent, ImageComponent, };
+export { Stroke, RestyleableComponent, createRestyleComponentCommand, isRestylableComponent, RestyleableComponentStyle, TextComponent, TextComponent as Text, Stroke as StrokeComponent, BackgroundComponent, ImageComponent, };

package/dist/mjs/src/components/lib.mjs

@@ -9,4 +9,6 @@ import  TextComponent  from './TextComponent.mjs';
 import  ImageComponent  from './ImageComponent.mjs';
 import  { createRestyleComponentCommand, isRestylableComponent }  from './RestylableComponent.mjs';
 import  BackgroundComponent  from './BackgroundComponent.mjs';
-export { Stroke, TextComponent as Text, createRestyleComponentCommand, isRestylableComponent, TextComponent, Stroke as StrokeComponent, BackgroundComponent, ImageComponent, };
+export { Stroke, createRestyleComponentCommand, isRestylableComponent, TextComponent, 
+// @deprecated
+TextComponent as Text, Stroke as StrokeComponent, BackgroundComponent, ImageComponent, };

package/dist/mjs/src/components/localization.d.ts

@@ -5,6 +5,7 @@ export interface ImageComponentLocalization {
     stroke: string;
     svgObject: string;
     emptyBackground: string;
+    gridBackground: string;
     filledBackgroundWithColor: (color: string) => string;
     restyledElement: (elementDescription: string) => string;
 }

package/dist/mjs/src/components/localization.mjs

@@ -3,6 +3,7 @@ export const defaultComponentLocalization = {
     stroke: 'Stroke',
     svgObject: 'SVG Object',
     emptyBackground: 'Empty background',
+    gridBackground: 'Grid background',
     filledBackgroundWithColor: (color) => `Filled background (${color})`,
     text: (text) => `Text object: ${text}`,
     imageNode: (description) => `Image: ${description}`,

package/dist/mjs/src/math/Vec2.d.ts

@@ -1,12 +1,32 @@
 import Vec3 from './Vec3';
 export declare namespace Vec2 {
+    /**
+     * Creates a `Vec2` from an x and y coordinate.
+     *
+     * For example,
+     * ```ts
+     * const v = Vec2.of(3, 4); // x=3, y=4.
+     * ```
+     */
     const of: (x: number, y: number) => Vec2;
+    /**
+     * Creates a `Vec2` from an object containing x and y coordinates.
+     *
+     * For example,
+     * ```ts
+     * const v1 = Vec2.ofXY({ x: 3, y: 4.5 });
+     * const v2 = Vec2.ofXY({ x: -123.4, y: 1 });
+     * ```
+     */
     const ofXY: ({ x, y }: {
         x: number;
         y: number;
     }) => Vec2;
+    /** A vector of length 1 in the X direction (→). */
     const unitX: Vec3;
+    /** A vector of length 1 in the Y direction (↑). */
     const unitY: Vec3;
+    /** The zero vector: A vector with x=0, y=0. */
     const zero: Vec3;
 }
 export type Point2 = Vec3;

package/dist/mjs/src/math/Vec2.mjs

@@ -1,13 +1,33 @@
 import  Vec3  from './Vec3.mjs';
 export var Vec2;
 (function (Vec2) {
+    /**
+     * Creates a `Vec2` from an x and y coordinate.
+     *
+     * For example,
+     * ```ts
+     * const v = Vec2.of(3, 4); // x=3, y=4.
+     * ```
+     */
     Vec2.of = (x, y) => {
         return Vec3.of(x, y, 0);
     };
+    /**
+     * Creates a `Vec2` from an object containing x and y coordinates.
+     *
+     * For example,
+     * ```ts
+     * const v1 = Vec2.ofXY({ x: 3, y: 4.5 });
+     * const v2 = Vec2.ofXY({ x: -123.4, y: 1 });
+     * ```
+     */
     Vec2.ofXY = ({ x, y }) => {
         return Vec3.of(x, y, 0);
     };
+    /** A vector of length 1 in the X direction (→). */
     Vec2.unitX = Vec2.of(1, 0);
+    /** A vector of length 1 in the Y direction (↑). */
     Vec2.unitY = Vec2.of(0, 1);
+    /** The zero vector: A vector with x=0, y=0. */
     Vec2.zero = Vec2.of(0, 0);
 })(Vec2 || (Vec2 = {}));

package/dist/mjs/src/rendering/renderers/AbstractRenderer.d.ts

@@ -19,6 +19,11 @@ export interface RenderableImage {
     base64Url: string;
     label?: string;
 }
+/**
+ * Abstract base class for renderers.
+ *
+ * @see {@link EditorImage.render}
+ */
 export default abstract class AbstractRenderer {
     private viewport;
     private selfTransform;
@@ -40,9 +45,21 @@ export default abstract class AbstractRenderer {
     protected objectLevel: number;
     private currentPaths;
     private flushPath;
+    /**
+     * Draws a styled path. If within an object started by {@link startObject},
+     * the resultant path may not be visible until {@link endObject} is called.
+     */
     drawPath(path: RenderablePathSpec): void;
     drawRect(rect: Rect2, lineWidth: number, lineFill: RenderingStyle): void;
+    /** Draws a filled rectangle. */
     fillRect(rect: Rect2, fill: Color4): void;
+    /**
+     * This should be called whenever a new object is being drawn.
+     *
+     * @param _boundingBox The bounding box of the object to be drawn.
+     * @param _clip Whether content outside `_boundingBox` should be drawn. Renderers
+     *              that override this method are not required to support `_clip`.
+     */
     startObject(_boundingBox: Rect2, _clip?: boolean): void;
     /**
      * Notes the end of an object.

package/dist/mjs/src/rendering/renderers/AbstractRenderer.mjs

@@ -1,6 +1,11 @@
 import  Path, { PathCommandType }  from '../../math/Path.mjs';
 import  { Vec2 }  from '../../math/Vec2.mjs';
 import  { stylesEqual }  from '../RenderingStyle.mjs';
+/**
+ * Abstract base class for renderers.
+ *
+ * @see {@link EditorImage.render}
+ */
 export default class AbstractRenderer {
     constructor(viewport) {
         this.viewport = viewport;
@@ -49,7 +54,12 @@ export default class AbstractRenderer {
         if (lastStyle) {
             this.endPath(lastStyle);
         }
+        this.currentPaths = [];
     }
+    /**
+     * Draws a styled path. If within an object started by {@link startObject},
+     * the resultant path may not be visible until {@link endObject} is called.
+     */
     drawPath(path) {
         // If we're being called outside of an object,
         // we can't delay rendering
@@ -70,14 +80,22 @@ export default class AbstractRenderer {
         const path = Path.fromRect(rect, lineWidth);
         this.drawPath(path.toRenderable(lineFill));
     }
-    // Fills a rectangle.
+    /** Draws a filled rectangle. */
     fillRect(rect, fill) {
         const path = Path.fromRect(rect);
         this.drawPath(path.toRenderable({ fill }));
     }
-    // Note the start of an object with the given bounding box.
-    // Renderers are not required to support [clip]
+    /**
+     * This should be called whenever a new object is being drawn.
+     *
+     * @param _boundingBox The bounding box of the object to be drawn.
+     * @param _clip Whether content outside `_boundingBox` should be drawn. Renderers
+     *              that override this method are not required to support `_clip`.
+     */
     startObject(_boundingBox, _clip) {
+        if (this.objectLevel > 0) {
+            this.flushPath();
+        }
         this.currentPaths = [];
         this.objectLevel++;
     }

package/dist/mjs/src/rendering/renderers/CanvasRenderer.mjs

@@ -175,14 +175,19 @@ export default class CanvasRenderer extends AbstractRenderer {
         super.startObject(boundingBox);
         this.currentObjectBBox = boundingBox;
         if (!this.ignoringObject && clip) {
-            this.clipLevels.push(this.objectLevel);
-            this.ctx.save();
-            this.ctx.beginPath();
-            for (const corner of boundingBox.corners) {
-                const screenCorner = this.canvasToScreen(corner);
-                this.ctx.lineTo(screenCorner.x, screenCorner.y);
+            // Don't clip if it would only remove content already trimmed by
+            // the edge of the screen.
+            const clippedIsOutsideScreen = boundingBox.containsRect(this.getViewport().visibleRect);
+            if (!clippedIsOutsideScreen) {
+                this.clipLevels.push(this.objectLevel);
+                this.ctx.save();
+                this.ctx.beginPath();
+                for (const corner of boundingBox.corners) {
+                    const screenCorner = this.canvasToScreen(corner);
+                    this.ctx.lineTo(screenCorner.x, screenCorner.y);
+                }
+                this.ctx.clip();
             }
-            this.ctx.clip();
         }
     }
     endObject() {

package/dist/mjs/src/toolbar/localization.d.ts

@@ -26,6 +26,7 @@ export interface ToolbarLocalization {
     duplicateSelection: string;
     pickColorFromScreen: string;
     clickToPickColorAnnouncement: string;
+    colorSelectionCanceledAnnouncement: string;
     reformatSelection: string;
     undo: string;
     redo: string;

package/dist/mjs/src/toolbar/localization.mjs

@@ -23,6 +23,7 @@ export const defaultToolbarLocalization = {
     selectPenType: 'Pen type: ',
     pickColorFromScreen: 'Pick color from screen',
     clickToPickColorAnnouncement: 'Click on the screen to pick a color',
+    colorSelectionCanceledAnnouncement: 'Color selection canceled',
     selectionToolKeyboardShortcuts: 'Selection tool: Use arrow keys to move selected items, lowercase/uppercase ‘i’ and ‘o’ to resize.',
     documentProperties: 'Page',
     backgroundColor: 'Background Color: ',

package/dist/mjs/src/toolbar/makeColorInput.mjs

@@ -42,6 +42,11 @@ export const makeColorInput = (editor, onColorChange) => {
             open: true,
         });
         pipetteController.cancel();
+        // Focus the Coloris color picker, if it exists.
+        // Don't focus the text input within the color picker, however,
+        // as this displays a keyboard on mobile devices.
+        const colorPickerElem = document.querySelector('#clr-picker #clr-hue-slider');
+        colorPickerElem === null || colorPickerElem === void 0 ? void 0 : colorPickerElem.focus();
     });
     colorInput.addEventListener('close', () => {
         editor.notifier.dispatch(EditorEventType.ColorPickerToggled, {
@@ -49,6 +54,8 @@ export const makeColorInput = (editor, onColorChange) => {
             open: false,
         });
         onInputEnd();
+        // Restore focus to the input that opened the color picker
+        colorInput.focus();
     });
     const setColorInputValue = (color) => {
         if (typeof color === 'object') {
@@ -94,6 +101,7 @@ const addPipetteTool = (editor, container, onColorChange) => {
         // If already picking, cancel it.
         if (pipetteButton.classList.contains('active')) {
             endColorSelectMode();
+            editor.announceForAccessibility(editor.localization.colorSelectionCanceledAnnouncement);
             return;
         }
         pipetteTool === null || pipetteTool === void 0 ? void 0 : pipetteTool.setColorListener(pipetteColorPreview, pipetteColorSelect);

package/dist/mjs/src/toolbar/widgets/BaseWidget.d.ts

@@ -46,6 +46,7 @@ export default abstract class BaseWidget {
     protected updateIcon(): void;
     setDisabled(disabled: boolean): void;
     setSelected(selected: boolean): void;
+    private hideDropdownTimeout;
     protected setDropdownVisible(visible: boolean): void;
     canBeInOverflowMenu(): boolean;
     getButtonWidth(): number;

package/dist/mjs/src/toolbar/widgets/BaseWidget.mjs

@@ -23,6 +23,7 @@ export default class BaseWidget {
         this.subWidgets = {};
         this.toplevel = true;
         this.toolbarWidgetToggleListener = null;
+        this.hideDropdownTimeout = null;
         this.localizationTable = localizationTable !== null && localizationTable !== void 0 ? localizationTable : editor.localization;
         this.icon = null;
         this.container = document.createElement('div');
@@ -211,13 +212,18 @@ export default class BaseWidget {
         if (currentlySelected === selected) {
             return;
         }
+        // Ensure that accessibility tools check and read the value of
+        // aria-checked.
+        // TODO: Ensure that 'role' is set to 'switch' by default for selectable
+        //       buttons.
+        this.button.setAttribute('role', 'switch');
         if (selected) {
             this.container.classList.add('selected');
-            this.button.ariaSelected = 'true';
+            this.button.setAttribute('aria-checked', 'true');
         }
         else {
             this.container.classList.remove('selected');
-            this.button.ariaSelected = 'false';
+            this.button.setAttribute('aria-checked', 'false');
         }
     }
     setDropdownVisible(visible) {
@@ -225,6 +231,13 @@ export default class BaseWidget {
         if (currentlyVisible === visible) {
             return;
         }
+        // If waiting to hide the dropdown, cancel it.
+        if (this.hideDropdownTimeout) {
+            clearTimeout(this.hideDropdownTimeout);
+            this.hideDropdownTimeout = null;
+            this.dropdownContainer.classList.remove('hiding');
+        }
+        const animationDuration = 150; // ms
         if (visible) {
             this.dropdownContainer.classList.remove('hidden');
             this.container.classList.add('dropdownVisible');
@@ -235,10 +248,20 @@ export default class BaseWidget {
             });
         }
         else {
-            this.dropdownContainer.classList.add('hidden');
             this.container.classList.remove('dropdownVisible');
             this.editor.announceForAccessibility(this.localizationTable.dropdownHidden(this.getTitle()));
+            this.dropdownContainer.classList.add('hiding');
+            // Hide the dropdown *slightly* before the animation finishes. This
+            // prevents flickering in some browsers.
+            const hideDelay = animationDuration * 0.95;
+            this.hideDropdownTimeout = setTimeout(() => {
+                this.dropdownContainer.classList.add('hidden');
+                this.dropdownContainer.classList.remove('hiding');
+            }, hideDelay);
         }
+        // Animate
+        const animationName = `var(--dropdown-${visible ? 'show' : 'hide'}-animation)`;
+        this.dropdownContainer.style.animation = `${animationDuration}ms ease ${animationName}`;
         this.repositionDropdown();
     }
     canBeInOverflowMenu() {
@@ -257,11 +280,11 @@ export default class BaseWidget {
         const dropdownBBox = this.dropdownContainer.getBoundingClientRect();
         const screenWidth = document.body.clientWidth;
         if (dropdownBBox.left > screenWidth / 2) {
-            this.dropdownContainer.style.marginLeft = this.button.clientWidth + 'px';
-            this.dropdownContainer.style.transform = 'translate(-100%, 0)';
+            // Use .translate so as not to conflict with CSS animating the
+            // transform property.
+            this.dropdownContainer.style.translate = `calc(${this.button.clientWidth + 'px'} - 100%) 0`;
         }
         else {
-            this.dropdownContainer.style.marginLeft = '';
             this.dropdownContainer.style.transform = '';
         }
     }

package/dist/mjs/src/tools/Pen.d.ts

@@ -14,9 +14,12 @@ export default class Pen extends BaseTool {
     private builderFactory;
     protected builder: ComponentBuilder | null;
     private lastPoint;
+    private startPoint;
     private ctrlKeyPressed;
+    private shiftKeyPressed;
     constructor(editor: Editor, description: string, style: PenStyle, builderFactory?: ComponentBuilderFactory);
     private getPressureMultiplier;
+    private xyAxesSnap;
     protected toStrokePoint(pointer: Pointer): StrokeDataPoint;
     protected previewStroke(): void;
     protected addPointToStroke(point: StrokeDataPoint): void;
@@ -34,6 +37,7 @@ export default class Pen extends BaseTool {
     getStrokeFactory(): ComponentBuilderFactory;
     setEnabled(enabled: boolean): void;
     private isSnappingToGrid;
+    private isAngleLocked;
     onKeyPress({ key, ctrlKey }: KeyPressEvent): boolean;
     onKeyUp({ key }: KeyUpEvent): boolean;
 }

package/dist/mjs/src/tools/Pen.mjs

@@ -11,14 +11,26 @@ export default class Pen extends BaseTool {
         this.builderFactory = builderFactory;
         this.builder = null;
         this.lastPoint = null;
+        this.startPoint = null;
         this.ctrlKeyPressed = false;
+        this.shiftKeyPressed = false;
     }
     getPressureMultiplier() {
         return 1 / this.editor.viewport.getScaleFactor() * this.style.thickness;
     }
+    // Snap the given pointer to the nearer of the x/y axes.
+    xyAxesSnap(pointer) {
+        if (!this.startPoint) {
+            return pointer;
+        }
+        return pointer.lockedToXYAxes(this.startPoint.pos, this.editor.viewport);
+    }
     // Converts a `pointer` to a `StrokeDataPoint`.
     toStrokePoint(pointer) {
         var _a;
+        if (this.isAngleLocked() && this.lastPoint) {
+            pointer = this.xyAxesSnap(pointer);
+        }
         if (this.isSnappingToGrid()) {
             pointer = pointer.snappedToGrid(this.editor.viewport);
         }
@@ -64,7 +76,8 @@ export default class Pen extends BaseTool {
             }
         }
         if ((allPointers.length === 1 && !isEraser) || anyDeviceIsStylus) {
-            this.builder = this.builderFactory(this.toStrokePoint(current), this.editor.viewport);
+            this.startPoint = this.toStrokePoint(current);
+            this.builder = this.builderFactory(this.startPoint, this.editor.viewport);
             return true;
         }
         return false;
@@ -104,6 +117,7 @@ export default class Pen extends BaseTool {
             }
         }
         this.builder = null;
+        this.lastPoint = null;
         this.editor.clearWetInk();
     }
     noteUpdated() {
@@ -138,6 +152,7 @@ export default class Pen extends BaseTool {
         this.ctrlKeyPressed = false;
     }
     isSnappingToGrid() { return this.ctrlKeyPressed; }
+    isAngleLocked() { return this.shiftKeyPressed; }
     onKeyPress({ key, ctrlKey }) {
         key = key.toLowerCase();
         let newThickness;
@@ -156,6 +171,10 @@ export default class Pen extends BaseTool {
             this.ctrlKeyPressed = true;
             return true;
         }
+        if (key === 'shift') {
+            this.shiftKeyPressed = true;
+            return true;
+        }
         // Ctrl+Z: End the stroke so that it can be undone/redone.
         if (key === 'z' && ctrlKey && this.builder) {
             this.finalizeStroke();
@@ -168,6 +187,10 @@ export default class Pen extends BaseTool {
             this.ctrlKeyPressed = false;
             return true;
         }
+        if (key === 'shift') {
+            this.shiftKeyPressed = false;
+            return true;
+        }
         return false;
     }
 }

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

@@ -10,6 +10,7 @@ export default class SelectionTool extends BaseTool {
     private prevSelectionBox;
     private selectionBox;
     private lastEvtTarget;
+    private startPoint;
     private expandingSelectionBox;
     private shiftKeyPressed;
     private ctrlKeyPressed;