js-draw 0.22.0 → 0.23.0

package/dist/cjs/src/math/Vec2.js

@@ -7,13 +7,33 @@ exports.Vec2 = void 0;
 const Vec3_1 = __importDefault(require("./Vec3"));
 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_1.default.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_1.default.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 = exports.Vec2 || (exports.Vec2 = {}));

package/dist/cjs/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/cjs/src/rendering/renderers/AbstractRenderer.js

@@ -26,6 +26,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const Path_1 = __importStar(require("../../math/Path"));
 const Vec2_1 = require("../../math/Vec2");
 const RenderingStyle_1 = require("../RenderingStyle");
+/**
+ * Abstract base class for renderers.
+ *
+ * @see {@link EditorImage.render}
+ */
 class AbstractRenderer {
     constructor(viewport) {
         this.viewport = viewport;
@@ -74,7 +79,12 @@ 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
@@ -95,14 +105,22 @@ class AbstractRenderer {
         const path = Path_1.default.fromRect(rect, lineWidth);
         this.drawPath(path.toRenderable(lineFill));
     }
-    // Fills a rectangle.
+    /** Draws a filled rectangle. */
     fillRect(rect, fill) {
         const path = Path_1.default.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/cjs/src/rendering/renderers/CanvasRenderer.js

@@ -180,14 +180,19 @@ class CanvasRenderer extends AbstractRenderer_1.default {
         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/cjs/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/cjs/src/toolbar/localization.js

@@ -26,6 +26,7 @@ exports.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/cjs/src/toolbar/makeColorInput.js

@@ -48,6 +48,11 @@ 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(types_1.EditorEventType.ColorPickerToggled, {
@@ -55,6 +60,8 @@ 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') {
@@ -101,6 +108,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/cjs/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/cjs/src/toolbar/widgets/BaseWidget.js

@@ -28,6 +28,7 @@ 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');
@@ -216,13 +217,18 @@ 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) {
@@ -230,6 +236,13 @@ 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');
@@ -240,10 +253,20 @@ 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() {
@@ -262,11 +285,11 @@ 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/cjs/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/cjs/src/tools/Pen.js

@@ -16,14 +16,26 @@ class Pen extends BaseTool_1.default {
         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);
         }
@@ -69,7 +81,8 @@ class Pen extends BaseTool_1.default {
             }
         }
         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;
@@ -109,6 +122,7 @@ class Pen extends BaseTool_1.default {
             }
         }
         this.builder = null;
+        this.lastPoint = null;
         this.editor.clearWetInk();
     }
     noteUpdated() {
@@ -143,6 +157,7 @@ class Pen extends BaseTool_1.default {
         this.ctrlKeyPressed = false;
     }
     isSnappingToGrid() { return this.ctrlKeyPressed; }
+    isAngleLocked() { return this.shiftKeyPressed; }
     onKeyPress({ key, ctrlKey }) {
         key = key.toLowerCase();
         let newThickness;
@@ -161,6 +176,10 @@ class Pen extends BaseTool_1.default {
             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();
@@ -173,6 +192,10 @@ class Pen extends BaseTool_1.default {
             this.ctrlKeyPressed = false;
             return true;
         }
+        if (key === 'shift') {
+            this.shiftKeyPressed = false;
+            return true;
+        }
         return false;
     }
 }

package/dist/cjs/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;

package/dist/cjs/src/tools/SelectionTool/SelectionTool.js

@@ -20,6 +20,7 @@ class SelectionTool extends BaseTool_1.default {
         super(editor.notifier, description);
         this.editor = editor;
         this.lastEvtTarget = null;
+        this.startPoint = null; // canvas position
         this.expandingSelectionBox = false;
         this.shiftKeyPressed = false;
         this.ctrlKeyPressed = false;
@@ -30,6 +31,9 @@ class SelectionTool extends BaseTool_1.default {
         this.handleOverlay.classList.add('handleOverlay');
         editor.notifier.on(types_1.EditorEventType.ViewportChanged, _data => {
             var _a;
+            // The selection box could be using the wet ink display if its transformation
+            // hasn't been finalized yet. Clear before updating the UI.
+            this.editor.clearWetInk();
             (_a = this.selectionBox) === null || _a === void 0 ? void 0 : _a.updateUI();
         });
         this.editor.handleKeyEventsFrom(this.handleOverlay);
@@ -67,6 +71,7 @@ class SelectionTool extends BaseTool_1.default {
             current = current.snappedToGrid(this.editor.viewport);
         }
         if (allPointers.length === 1 && current.isPrimary) {
+            this.startPoint = current.canvasPos;
             let transforming = false;
             if (this.lastEvtTarget && this.selectionBox) {
                 if (snapToGrid) {
@@ -92,6 +97,9 @@ class SelectionTool extends BaseTool_1.default {
         if (!this.selectionBox)
             return;
         let currentPointer = event.current;
+        if (!this.expandingSelectionBox && this.shiftKeyPressed && this.startPoint) {
+            currentPointer = currentPointer.lockedToXYAxes(this.startPoint, this.editor.viewport);
+        }
         if (this.ctrlKeyPressed) {
             currentPointer = currentPointer.snappedToGrid(this.editor.viewport);
         }

package/dist/cjs/src/util/waitForAll.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Resolves when all given promises have resolved. If no promises are given,
+ * does not return a Promise.
+ */
+declare const waitForAll: (results: (Promise<void> | void)[]) => Promise<void> | void;
+export default waitForAll;

package/dist/cjs/src/util/waitForAll.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Resolves when all given promises have resolved. If no promises are given,
+ * does not return a Promise.
+ */
+const waitForAll = (results) => {
+    // If any are Promises...
+    if (results.some(command => command && command['then'])) {
+        // Wait for all commands to finish.
+        return Promise.all(results)
+            // Ensure we return a Promise<void> and not a Promise<void[]>
+            .then(() => { });
+    }
+    return;
+};
+exports.default = waitForAll;

package/dist/mjs/src/Pointer.d.ts

@@ -1,4 +1,4 @@
-import { Point2 } from './math/Vec2';
+import { Point2, Vec2 } from './math/Vec2';
 import Viewport from './Viewport';
 export declare enum PointerDevice {
     Pen = 0,
@@ -19,6 +19,8 @@ export default class Pointer {
     readonly timeStamp: number;
     private constructor();
     snappedToGrid(viewport: Viewport): Pointer;
+    lockedToXYAxes(originPoint: Vec2, viewport: Viewport): Pointer;
+    withCanvasPosition(canvasPos: Point2, viewport: Viewport): Pointer;
     static ofEvent(evt: PointerEvent, isDown: boolean, viewport: Viewport, relativeTo?: HTMLElement): Pointer;
     static ofCanvasPoint(canvasPos: Point2, isDown: boolean, viewport: Viewport, id?: number, device?: PointerDevice, isPrimary?: boolean, pressure?: number | null): Pointer;
 }

package/dist/mjs/src/Pointer.mjs

@@ -36,8 +36,33 @@ export default class Pointer {
     // this.
     snappedToGrid(viewport) {
         const snappedCanvasPos = viewport.snapToGrid(this.canvasPos);
-        const snappedScreenPos = viewport.canvasToScreen(snappedCanvasPos);
-        return new Pointer(snappedScreenPos, snappedCanvasPos, this.pressure, this.isPrimary, this.down, this.device, this.id, this.timeStamp);
+        return this.withCanvasPosition(snappedCanvasPos, viewport);
+    }
+    // Snap this pointer to the X or Y axis (whichever is closer), where (0,0)
+    // is considered to be at `originPoint`.
+    // @internal
+    lockedToXYAxes(originPoint, viewport) {
+        const current = this.canvasPos;
+        const currentFromStart = current.minus(originPoint);
+        // Determine whether the last point was closer to being on the
+        // x- or y- axis.
+        const projOntoXAxis = Vec2.unitX.times(currentFromStart.x);
+        const projOntoYAxis = Vec2.unitY.times(currentFromStart.y);
+        let pos;
+        if (currentFromStart.dot(projOntoXAxis) > currentFromStart.dot(projOntoYAxis)) {
+            pos = projOntoXAxis;
+        }
+        else {
+            pos = projOntoYAxis;
+        }
+        pos = pos.plus(originPoint);
+        return this.withCanvasPosition(pos, viewport);
+    }
+    // Returns a copy of this pointer with a new position. The screen position is determined
+    // by the given `canvasPos`.
+    withCanvasPosition(canvasPos, viewport) {
+        const screenPos = viewport.canvasToScreen(canvasPos);
+        return new Pointer(screenPos, canvasPos, this.pressure, this.isPrimary, this.down, this.device, this.id, this.timeStamp);
     }
     // Creates a Pointer from a DOM event. If `relativeTo` is given, (0, 0) in screen coordinates is
     // considered the top left of `relativeTo`.

package/dist/mjs/src/commands/Duplicate.d.ts

@@ -2,6 +2,29 @@ import AbstractComponent from '../components/AbstractComponent';
 import Editor from '../Editor';
 import { EditorLocalization } from '../localization';
 import SerializableCommand from './SerializableCommand';
+/**
+ * A command that duplicates the {@link AbstractComponent}s it's given. This command
+ * is the reverse of an {@link Erase} command.
+ *
+ * @example
+ * ```ts
+ * // Given some editor...
+ *
+ * // Find all elements intersecting the rectangle with top left (0,0) and
+ * // (width,height)=(100,100).
+ * const elems = editor.image.getElementsIntersectingRegion(
+ * 	new Rect2(0, 0, 100, 100)
+ * );
+ *
+ * // Create a command that, when applied, will duplicate the elements.
+ * const duplicateElems = new Duplicate(elems);
+ *
+ * // Apply the command (and make it undoable)
+ * editor.dispatch(duplicateElems);
+ * ```
+ *
+ * @see {@link Editor.dispatch} {@link EditorImage.getElementsIntersectingRegion}
+ */
 export default class Duplicate extends SerializableCommand {
     private toDuplicate;
     private duplicates;
@@ -9,6 +32,7 @@ export default class Duplicate extends SerializableCommand {
     constructor(toDuplicate: AbstractComponent[]);
     apply(editor: Editor): void;
     unapply(editor: Editor): void;
+    onDrop(editor: Editor): void;
     description(_editor: Editor, localizationTable: EditorLocalization): string;
     protected serializeToJSON(): string[];
 }

package/dist/mjs/src/commands/Duplicate.mjs

@@ -1,6 +1,29 @@
 import  describeComponentList  from '../components/util/describeComponentList.mjs';
 import  Erase  from './Erase.mjs';
 import  SerializableCommand  from './SerializableCommand.mjs';
+/**
+ * A command that duplicates the {@link AbstractComponent}s it's given. This command
+ * is the reverse of an {@link Erase} command.
+ *
+ * @example
+ * ```ts
+ * // Given some editor...
+ *
+ * // Find all elements intersecting the rectangle with top left (0,0) and
+ * // (width,height)=(100,100).
+ * const elems = editor.image.getElementsIntersectingRegion(
+ * 	new Rect2(0, 0, 100, 100)
+ * );
+ *
+ * // Create a command that, when applied, will duplicate the elements.
+ * const duplicateElems = new Duplicate(elems);
+ *
+ * // Apply the command (and make it undoable)
+ * editor.dispatch(duplicateElems);
+ * ```
+ *
+ * @see {@link Editor.dispatch} {@link EditorImage.getElementsIntersectingRegion}
+ */
 export default class Duplicate extends SerializableCommand {
     constructor(toDuplicate) {
         super('duplicate');
@@ -14,6 +37,9 @@ export default class Duplicate extends SerializableCommand {
     unapply(editor) {
         this.reverse.apply(editor);
     }
+    onDrop(editor) {
+        this.reverse.onDrop(editor);
+    }
     description(_editor, localizationTable) {
         var _a;
         if (this.duplicates.length === 0) {

package/dist/mjs/src/commands/Erase.d.ts

@@ -2,6 +2,26 @@ import AbstractComponent from '../components/AbstractComponent';
 import Editor from '../Editor';
 import { EditorLocalization } from '../localization';
 import SerializableCommand from './SerializableCommand';
+/**
+ * Removes the given {@link AbstractComponent}s from the image.
+ *
+ * @example
+ * ```ts
+ * // Given some editor...
+ *
+ * // Find all elements intersecting the rectangle with top left (-10,-30) and
+ * // (width,height)=(50,100).
+ * const elems = editor.image.getElementsIntersectingRegion(
+ * 	new Rect2(-10, -30, 50, 100)
+ * );
+ *
+ * // Create a command that erases [elems] when applied
+ * const eraseElemsCmd = new Erase(elems);
+ *
+ * // Apply the command (and make it undoable)
+ * editor.dispatch(eraseElemsCmd);
+ * ```
+ */
 export default class Erase extends SerializableCommand {
     private toRemove;
     private applied;

package/dist/mjs/src/commands/Erase.mjs

@@ -1,6 +1,26 @@
 import  describeComponentList  from '../components/util/describeComponentList.mjs';
 import  EditorImage  from '../EditorImage.mjs';
 import  SerializableCommand  from './SerializableCommand.mjs';
+/**
+ * Removes the given {@link AbstractComponent}s from the image.
+ *
+ * @example
+ * ```ts
+ * // Given some editor...
+ *
+ * // Find all elements intersecting the rectangle with top left (-10,-30) and
+ * // (width,height)=(50,100).
+ * const elems = editor.image.getElementsIntersectingRegion(
+ * 	new Rect2(-10, -30, 50, 100)
+ * );
+ *
+ * // Create a command that erases [elems] when applied
+ * const eraseElemsCmd = new Erase(elems);
+ *
+ * // Apply the command (and make it undoable)
+ * editor.dispatch(eraseElemsCmd);
+ * ```
+ */
 export default class Erase extends SerializableCommand {
     constructor(toRemove) {
         super('erase');

package/dist/mjs/src/commands/invertCommand.mjs

@@ -15,6 +15,9 @@ const invertCommand = (command) => {
             unapply(editor) {
                 command.unapply(editor);
             }
+            onDrop(editor) {
+                command.onDrop(editor);
+            }
             description(editor, localizationTable) {
                 return localizationTable.inverseOf(command.description(editor, localizationTable));
             }
@@ -29,6 +32,9 @@ const invertCommand = (command) => {
             unapply(editor) {
                 command.apply(editor);
             }
+            onDrop(editor) {
+                command.onDrop(editor);
+            }
             description(editor, localizationTable) {
                 return localizationTable.inverseOf(command.description(editor, localizationTable));
             }