js-draw 0.11.3 → 0.13.0

package/dist/src/toolbar/widgets/EraserToolWidget.js

@@ -1,16 +1,57 @@
+import { EditorEventType } from '../../types';
+import { toolbarCSSPrefix } from '../HTMLToolbar';
 import BaseToolWidget from './BaseToolWidget';
 export default class EraserToolWidget extends BaseToolWidget {
     constructor(editor, tool, localizationTable) {
         super(editor, tool, 'eraser-tool-widget', localizationTable);
+        this.tool = tool;
+        this.thicknessInput = null;
+        this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
+            if (toolEvt.kind === EditorEventType.ToolUpdated && toolEvt.tool === this.tool) {
+                this.updateInputs();
+                this.updateIcon();
+            }
+        });
     }
     getTitle() {
         return this.localizationTable.eraser;
     }
     createIcon() {
-        return this.editor.icons.makeEraserIcon();
+        return this.editor.icons.makeEraserIcon(this.tool.getThickness());
     }
-    fillDropdown(_dropdown) {
-        // No dropdown associated with the eraser
-        return false;
+    updateInputs() {
+        if (this.thicknessInput) {
+            this.thicknessInput.value = `${this.tool.getThickness()}`;
+        }
+    }
+    fillDropdown(dropdown) {
+        const thicknessLabel = document.createElement('label');
+        this.thicknessInput = document.createElement('input');
+        this.thicknessInput.type = 'range';
+        this.thicknessInput.min = '4';
+        this.thicknessInput.max = '40';
+        this.thicknessInput.oninput = () => {
+            this.tool.setThickness(parseFloat(this.thicknessInput.value));
+        };
+        this.thicknessInput.id = `${toolbarCSSPrefix}eraserThicknessInput${EraserToolWidget.nextThicknessInputId++}`;
+        thicknessLabel.innerText = this.localizationTable.thicknessLabel;
+        thicknessLabel.htmlFor = this.thicknessInput.id;
+        this.updateInputs();
+        dropdown.replaceChildren(thicknessLabel, this.thicknessInput);
+        return true;
+    }
+    serializeState() {
+        return Object.assign(Object.assign({}, super.serializeState()), { thickness: this.tool.getThickness() });
+    }
+    deserializeFrom(state) {
+        super.deserializeFrom(state);
+        if (state.thickness) {
+            const parsedThickness = parseFloat(state.thickness);
+            if (typeof parsedThickness !== 'number' || !isFinite(parsedThickness)) {
+                throw new Error(`Deserializing property ${parsedThickness} is not a number or is not finite.`);
+            }
+            this.tool.setThickness(parsedThickness);
+        }
     }
 }
+EraserToolWidget.nextThicknessInputId = 0;

package/dist/src/toolbar/widgets/PenToolWidget.js

@@ -105,8 +105,8 @@ export default class PenToolWidget extends BaseToolWidget {
         const objectSelectLabel = document.createElement('label');
         const objectTypeSelect = document.createElement('select');
         // Give inputs IDs so we can label them with a <label for=...>Label text</label>
-        thicknessInput.id = `${toolbarCSSPrefix}thicknessInput${PenToolWidget.idCounter++}`;
-        objectTypeSelect.id = `${toolbarCSSPrefix}builderSelect${PenToolWidget.idCounter++}`;
+        thicknessInput.id = `${toolbarCSSPrefix}penThicknessInput${PenToolWidget.idCounter++}`;
+        objectTypeSelect.id = `${toolbarCSSPrefix}penBuilderSelect${PenToolWidget.idCounter++}`;
         thicknessLabel.innerText = this.localizationTable.thicknessLabel;
         thicknessLabel.setAttribute('for', thicknessInput.id);
         objectSelectLabel.innerText = this.localizationTable.selectObjectType;

package/dist/src/toolbar/widgets/SelectionToolWidget.js

@@ -1,3 +1,12 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { EditorEventType } from '../../types';
 import ActionButtonWidget from './ActionButtonWidget';
 import BaseToolWidget from './BaseToolWidget';
@@ -13,10 +22,10 @@ export default class SelectionToolWidget extends BaseToolWidget {
             this.editor.dispatch(selection.deleteSelectedObjects());
             this.tool.clearSelection();
         }, localization);
-        const duplicateButton = new ActionButtonWidget(editor, 'duplicate-btn', () => editor.icons.makeDuplicateSelectionIcon(), this.localizationTable.duplicateSelection, () => {
+        const duplicateButton = new ActionButtonWidget(editor, 'duplicate-btn', () => editor.icons.makeDuplicateSelectionIcon(), this.localizationTable.duplicateSelection, () => __awaiter(this, void 0, void 0, function* () {
             const selection = this.tool.getSelection();
-            this.editor.dispatch(selection.duplicateSelectedObjects());
-        }, localization);
+            this.editor.dispatch(yield selection.duplicateSelectedObjects());
+        }), localization);
         this.addSubWidget(resizeButton);
         this.addSubWidget(deleteButton);
         this.addSubWidget(duplicateButton);

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

@@ -4,11 +4,20 @@ import Editor from '../Editor';
 export default class Eraser extends BaseTool {
     private editor;
     private lastPoint;
+    private isFirstEraseEvt;
     private toRemove;
+    private thickness;
     private partialCommands;
     constructor(editor: Editor, description: string);
+    private clearPreview;
+    private getSizeOnCanvas;
+    private drawPreviewAt;
+    private getEraserRect;
+    private eraseTo;
     onPointerDown(event: PointerEvt): boolean;
     onPointerMove(event: PointerEvt): void;
-    onPointerUp(_event: PointerEvt): void;
+    onPointerUp(event: PointerEvt): void;
     onGestureCancel(): void;
+    getThickness(): number;
+    setThickness(thickness: number): void;
 }

package/dist/src/tools/Eraser.js

@@ -1,31 +1,55 @@
+import { EditorEventType } from '../types';
 import BaseTool from './BaseTool';
+import { Vec2 } from '../math/Vec2';
 import LineSegment2 from '../math/LineSegment2';
 import Erase from '../commands/Erase';
 import { PointerDevice } from '../Pointer';
+import Color4 from '../Color4';
+import Rect2 from '../math/Rect2';
 export default class Eraser extends BaseTool {
     constructor(editor, description) {
         super(editor.notifier, description);
         this.editor = editor;
+        this.lastPoint = null;
+        this.isFirstEraseEvt = true;
+        this.thickness = 10;
         // Commands that each remove one element
         this.partialCommands = [];
     }
-    onPointerDown(event) {
-        if (event.allPointers.length === 1 || event.current.device === PointerDevice.Eraser) {
-            this.lastPoint = event.current.canvasPos;
-            this.toRemove = [];
-            return true;
-        }
-        return false;
+    clearPreview() {
+        this.editor.clearWetInk();
     }
-    onPointerMove(event) {
-        const currentPoint = event.current.canvasPos;
-        if (currentPoint.minus(this.lastPoint).magnitude() === 0) {
+    getSizeOnCanvas() {
+        return this.thickness / this.editor.viewport.getScaleFactor();
+    }
+    drawPreviewAt(point) {
+        this.clearPreview();
+        const size = this.getSizeOnCanvas();
+        const renderer = this.editor.display.getWetInkRenderer();
+        const rect = this.getEraserRect(point);
+        const fill = {
+            fill: Color4.gray,
+        };
+        renderer.drawRect(rect, size / 4, fill);
+    }
+    getEraserRect(centerPoint) {
+        const size = this.getSizeOnCanvas();
+        const halfSize = Vec2.of(size / 2, size / 2);
+        return Rect2.fromCorners(centerPoint.minus(halfSize), centerPoint.plus(halfSize));
+    }
+    eraseTo(currentPoint) {
+        if (!this.isFirstEraseEvt && currentPoint.minus(this.lastPoint).magnitude() === 0) {
             return;
         }
+        this.isFirstEraseEvt = false;
+        // Currently only objects within eraserRect or that intersect a straight line
+        // from the center of the current rect to the previous are erased. TODO: Erase
+        // all objects as if there were pointerMove events between the two points.
+        const eraserRect = this.getEraserRect(currentPoint);
         const line = new LineSegment2(this.lastPoint, currentPoint);
-        const region = line.bbox;
+        const region = Rect2.union(line.bbox, eraserRect);
         const intersectingElems = this.editor.image.getElementsIntersectingRegion(region).filter(component => {
-            return component.intersects(line);
+            return component.intersects(line) || component.intersectsRect(eraserRect);
         });
         // Remove any intersecting elements.
         this.toRemove.push(...intersectingElems);
@@ -33,9 +57,25 @@ export default class Eraser extends BaseTool {
         const newPartialCommands = intersectingElems.map(elem => new Erase([elem]));
         newPartialCommands.forEach(cmd => cmd.apply(this.editor));
         this.partialCommands.push(...newPartialCommands);
+        this.drawPreviewAt(currentPoint);
         this.lastPoint = currentPoint;
     }
-    onPointerUp(_event) {
+    onPointerDown(event) {
+        if (event.allPointers.length === 1 || event.current.device === PointerDevice.Eraser) {
+            this.lastPoint = event.current.canvasPos;
+            this.toRemove = [];
+            this.isFirstEraseEvt = true;
+            this.drawPreviewAt(event.current.canvasPos);
+            return true;
+        }
+        return false;
+    }
+    onPointerMove(event) {
+        const currentPoint = event.current.canvasPos;
+        this.eraseTo(currentPoint);
+    }
+    onPointerUp(event) {
+        this.eraseTo(event.current.canvasPos);
         if (this.toRemove.length > 0) {
             // Undo commands for each individual component and unite into a single command.
             this.partialCommands.forEach(cmd => cmd.unapply(this.editor));
@@ -43,9 +83,21 @@ export default class Eraser extends BaseTool {
             const command = new Erase(this.toRemove);
             this.editor.dispatch(command); // dispatch: Makes undo-able.
         }
+        this.clearPreview();
     }
     onGestureCancel() {
         this.partialCommands.forEach(cmd => cmd.unapply(this.editor));
         this.partialCommands = [];
+        this.clearPreview();
+    }
+    getThickness() {
+        return this.thickness;
+    }
+    setThickness(thickness) {
+        this.thickness = thickness;
+        this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+            kind: EditorEventType.ToolUpdated,
+            tool: this,
+        });
     }
 }

package/dist/src/tools/PanZoom.js

@@ -266,7 +266,7 @@ export default class PanZoom extends BaseTool {
         const toCanvas = this.editor.viewport.screenToCanvasTransform;
         // Transform without including translation
         const translation = toCanvas.transformVec3(Vec3.of(-delta.x, -delta.y, 0));
-        const pinchZoomScaleFactor = 1.04;
+        const pinchZoomScaleFactor = 1.03;
         const transformUpdate = Mat33.scaling2D(Math.max(0.25, Math.min(Math.pow(pinchZoomScaleFactor, -delta.z), 4)), canvasPos).rightMul(Mat33.translation(translation));
         this.updateTransform(transformUpdate, true);
         return true;

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

@@ -1,10 +1,17 @@
-/**
- * A tool that handles paste events.
- * @packageDocumentation
- */
 import Editor from '../Editor';
 import { PasteEvent } from '../types';
 import BaseTool from './BaseTool';
+/**
+ * A tool that handles paste events (e.g. as triggered by ctrl+V).
+ *
+ * @example
+ * While `ToolController` has a `PasteHandler` in its default list of tools,
+ * if a non-default set is being used, `PasteHandler` can be added as follows:
+ * ```ts
+ * const toolController = editor.toolController;
+ * toolController.addTool(new PasteHandler(editor));
+ * ```
+ */
 export default class PasteHandler extends BaseTool {
     private editor;
     constructor(editor: Editor);

package/dist/src/tools/PasteHandler.js

@@ -1,7 +1,3 @@
-/**
- * A tool that handles paste events.
- * @packageDocumentation
- */
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -18,12 +14,23 @@ import BaseTool from './BaseTool';
 import TextTool from './TextTool';
 import Color4 from '../Color4';
 import ImageComponent from '../components/ImageComponent';
-// { @inheritDoc PasteHandler! }
+/**
+ * A tool that handles paste events (e.g. as triggered by ctrl+V).
+ *
+ * @example
+ * While `ToolController` has a `PasteHandler` in its default list of tools,
+ * if a non-default set is being used, `PasteHandler` can be added as follows:
+ * ```ts
+ * const toolController = editor.toolController;
+ * toolController.addTool(new PasteHandler(editor));
+ * ```
+ */
 export default class PasteHandler extends BaseTool {
     constructor(editor) {
         super(editor.notifier, editor.localization.pasteHandler);
         this.editor = editor;
     }
+    // @internal
     onPaste(event) {
         const mime = event.mime.toLowerCase();
         if (mime === 'image/svg+xml') {

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

@@ -1,7 +1,7 @@
 import Color4 from '../Color4';
 import Editor from '../Editor';
 import Pointer from '../Pointer';
-import { KeyPressEvent, PointerEvt, StrokeDataPoint } from '../types';
+import { KeyPressEvent, KeyUpEvent, PointerEvt, StrokeDataPoint } from '../types';
 import BaseTool from './BaseTool';
 import { ComponentBuilder, ComponentBuilderFactory } from '../components/builders/types';
 export interface PenStyle {
@@ -14,6 +14,7 @@ export default class Pen extends BaseTool {
     private builderFactory;
     protected builder: ComponentBuilder | null;
     private lastPoint;
+    private ctrlKeyPressed;
     constructor(editor: Editor, description: string, style: PenStyle, builderFactory?: ComponentBuilderFactory);
     private getPressureMultiplier;
     protected toStrokePoint(pointer: Pointer): StrokeDataPoint;
@@ -23,6 +24,7 @@ export default class Pen extends BaseTool {
     onPointerMove({ current }: PointerEvt): void;
     onPointerUp({ current }: PointerEvt): void;
     onGestureCancel(): void;
+    private finalizeStroke;
     private noteUpdated;
     setColor(color: Color4): void;
     setThickness(thickness: number): void;
@@ -30,5 +32,8 @@ export default class Pen extends BaseTool {
     getThickness(): number;
     getColor(): Color4;
     getStrokeFactory(): ComponentBuilderFactory;
-    onKeyPress({ key }: KeyPressEvent): boolean;
+    setEnabled(enabled: boolean): void;
+    private isSnappingToGrid;
+    onKeyPress({ key, ctrlKey }: KeyPressEvent): boolean;
+    onKeyUp({ key }: KeyUpEvent): boolean;
 }

package/dist/src/tools/Pen.js

@@ -11,6 +11,7 @@ export default class Pen extends BaseTool {
         this.builderFactory = builderFactory;
         this.builder = null;
         this.lastPoint = null;
+        this.ctrlKeyPressed = false;
     }
     getPressureMultiplier() {
         return 1 / this.editor.viewport.getScaleFactor() * this.style.thickness;
@@ -18,6 +19,9 @@ export default class Pen extends BaseTool {
     // Converts a `pointer` to a `StrokeDataPoint`.
     toStrokePoint(pointer) {
         var _a;
+        if (this.isSnappingToGrid()) {
+            pointer = pointer.snappedToGrid(this.editor.viewport);
+        }
         const minPressure = 0.3;
         let pressure = Math.max((_a = pointer.pressure) !== null && _a !== void 0 ? _a : 1.0, minPressure);
         if (!isFinite(pressure)) {
@@ -27,8 +31,9 @@ export default class Pen extends BaseTool {
         console.assert(isFinite(pointer.canvasPos.length()), 'Non-finite canvas position!');
         console.assert(isFinite(pointer.screenPos.length()), 'Non-finite screen position!');
         console.assert(isFinite(pointer.timeStamp), 'Non-finite timeStamp on pointer!');
+        const pos = pointer.canvasPos;
         return {
-            pos: pointer.canvasPos,
+            pos,
             width: pressure * this.getPressureMultiplier(),
             color: this.style.color,
             time: pointer.timeStamp,
@@ -65,6 +70,8 @@ export default class Pen extends BaseTool {
         return false;
     }
     onPointerMove({ current }) {
+        if (!this.builder)
+            return;
         this.addPointToStroke(this.toStrokePoint(current));
     }
     onPointerUp({ current }) {
@@ -76,7 +83,15 @@ export default class Pen extends BaseTool {
         const currentPoint = this.toStrokePoint(current);
         const strokePoint = Object.assign(Object.assign({}, currentPoint), { width: (_b = (_a = this.lastPoint) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : currentPoint.width });
         this.addPointToStroke(strokePoint);
-        if (this.builder && current.isPrimary) {
+        if (current.isPrimary) {
+            this.finalizeStroke();
+        }
+    }
+    onGestureCancel() {
+        this.editor.clearWetInk();
+    }
+    finalizeStroke() {
+        if (this.builder) {
             const stroke = this.builder.build();
             this.previewStroke();
             if (stroke.getBBox().area > 0) {
@@ -91,9 +106,6 @@ export default class Pen extends BaseTool {
         this.builder = null;
         this.editor.clearWetInk();
     }
-    onGestureCancel() {
-        this.editor.clearWetInk();
-    }
     noteUpdated() {
         this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
             kind: EditorEventType.ToolUpdated,
@@ -121,7 +133,12 @@ export default class Pen extends BaseTool {
     getThickness() { return this.style.thickness; }
     getColor() { return this.style.color; }
     getStrokeFactory() { return this.builderFactory; }
-    onKeyPress({ key }) {
+    setEnabled(enabled) {
+        super.setEnabled(enabled);
+        this.ctrlKeyPressed = false;
+    }
+    isSnappingToGrid() { return this.ctrlKeyPressed; }
+    onKeyPress({ key, ctrlKey }) {
         key = key.toLowerCase();
         let newThickness;
         if (key === '-' || key === '_') {
@@ -135,6 +152,22 @@ export default class Pen extends BaseTool {
             this.setThickness(newThickness);
             return true;
         }
+        if (key === 'control') {
+            this.ctrlKeyPressed = true;
+            return true;
+        }
+        // Ctrl+Z: End the stroke so that it can be undone/redone.
+        if (key === 'z' && ctrlKey && this.builder) {
+            this.finalizeStroke();
+        }
+        return false;
+    }
+    onKeyUp({ key }) {
+        key = key.toLowerCase();
+        if (key === 'control') {
+            this.ctrlKeyPressed = false;
+            return true;
+        }
         return false;
     }
 }

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

@@ -19,6 +19,7 @@ export default class Selection {
     private backgroundElem;
     private hasParent;
     constructor(startPoint: Point2, editor: Editor);
+    getBackgroundElem(): HTMLElement;
     getTransform(): Mat33;
     get preTransformRegion(): Rect2;
     get region(): Rect2;
@@ -36,7 +37,9 @@ export default class Selection {
     getMinCanvasSize(): number;
     getSelectedItemCount(): number;
     updateUI(): void;
+    private removedFromImage;
     private addRemoveSelectionFromImage;
+    private removeDeletedElemsFromSelection;
     private targetHandle;
     private backgroundDragging;
     onDragStart(pointer: Pointer, target: EventTarget): boolean;
@@ -45,7 +48,7 @@ export default class Selection {
     onDragCancel(): void;
     scrollTo(): Promise<void>;
     deleteSelectedObjects(): Command;
-    duplicateSelectedObjects(): Command;
+    duplicateSelectedObjects(): Promise<Command>;
     addTo(elem: HTMLElement): void;
     setToPoint(point: Point2): void;
     cancelSelection(): void;

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

@@ -32,6 +32,8 @@ export default class Selection {
         this.transform = Mat33.identity;
         this.selectedElems = [];
         this.hasParent = true;
+        // Maps IDs to whether we removed the component from the image
+        this.removedFromImage = {};
         this.targetHandle = null;
         this.backgroundDragging = false;
         this.originalRegion = new Rect2(startPoint.x, startPoint.y, 0, 0);
@@ -58,6 +60,10 @@ export default class Selection {
             handle.addTo(this.backgroundElem);
         }
     }
+    // @internal Intended for unit tests
+    getBackgroundElem() {
+        return this.backgroundElem;
+    }
     getTransform() {
         return this.transform;
     }
@@ -140,16 +146,7 @@ export default class Selection {
             singleItemSelectionMode = true;
         }
         this.selectedElems = this.editor.image.getElementsIntersectingRegion(this.region).filter(elem => {
-            if (this.region.containsRect(elem.getBBox())) {
-                return true;
-            }
-            // Calculated bounding boxes can be slightly larger than their actual contents' bounding box.
-            // As such, test with more lines than just this' edges.
-            const testLines = [];
-            for (const subregion of this.region.divideIntoGrid(2, 2)) {
-                testLines.push(...subregion.getEdges());
-            }
-            return testLines.some(edge => elem.intersects(edge));
+            return elem.intersectsRect(this.region);
         });
         if (singleItemSelectionMode && this.selectedElems.length > 0) {
             this.selectedElems = [this.selectedElems[this.selectedElems.length - 1]];
@@ -215,30 +212,45 @@ export default class Selection {
     //
     // If removed from the image, selected elements are drawn as wet ink.
     addRemoveSelectionFromImage(inImage) {
-        return __awaiter(this, void 0, void 0, function* () {
-            // Don't hide elements if doing so will be slow.
-            if (!inImage && this.selectedElems.length > maxPreviewElemCount) {
-                return;
+        // Don't hide elements if doing so will be slow.
+        if (!inImage && this.selectedElems.length > maxPreviewElemCount) {
+            return;
+        }
+        for (const elem of this.selectedElems) {
+            const parent = this.editor.image.findParent(elem);
+            if (!inImage && parent) {
+                this.removedFromImage[elem.getId()] = true;
+                parent.remove();
             }
-            for (const elem of this.selectedElems) {
-                const parent = this.editor.image.findParent(elem);
-                if (!inImage) {
-                    parent === null || parent === void 0 ? void 0 : parent.remove();
-                }
-                // If we're making things visible and the selected object wasn't previously
-                // visible,
-                else if (!parent) {
-                    EditorImage.addElement(elem).apply(this.editor);
-                }
+            // If we're making things visible and the selected object wasn't previously
+            // visible,
+            else if (!parent && this.removedFromImage[elem.getId()]) {
+                EditorImage.addElement(elem).apply(this.editor);
+                this.removedFromImage[elem.getId()] = false;
+                delete this.removedFromImage[elem.getId()];
             }
-            yield this.editor.queueRerender();
+        }
+        // Don't await queueRerender. If we're running in a test, the re-render might never
+        // happen.
+        this.editor.queueRerender().then(() => {
             if (!inImage) {
                 this.previewTransformCmds();
             }
         });
     }
+    removeDeletedElemsFromSelection() {
+        // Remove any deleted elements from the selection.
+        this.selectedElems = this.selectedElems.filter(elem => {
+            const hasParent = !!this.editor.image.findParent(elem);
+            // If we removed the element and haven't added it back yet, don't remove it
+            // from the selection.
+            const weRemoved = this.removedFromImage[elem.getId()];
+            return hasParent || weRemoved;
+        });
+    }
     onDragStart(pointer, target) {
-        void this.addRemoveSelectionFromImage(false);
+        this.removeDeletedElemsFromSelection();
+        this.addRemoveSelectionFromImage(false);
         for (const handle of this.handles) {
             if (handle.isTarget(target)) {
                 handle.handleDragStart(pointer);
@@ -299,10 +311,34 @@ export default class Selection {
         });
     }
     deleteSelectedObjects() {
+        if (this.backgroundDragging || this.targetHandle) {
+            this.onDragEnd();
+        }
         return new Erase(this.selectedElems);
     }
     duplicateSelectedObjects() {
-        return new Duplicate(this.selectedElems);
+        return __awaiter(this, void 0, void 0, function* () {
+            const wasTransforming = this.backgroundDragging || this.targetHandle;
+            let tmpApplyCommand = null;
+            if (wasTransforming) {
+                // Don't update the selection's focus when redoing/undoing
+                const selectionToUpdate = null;
+                tmpApplyCommand = new Selection.ApplyTransformationCommand(selectionToUpdate, this.selectedElems, this.transform);
+                // Transform to ensure that the duplicates are in the correct location
+                yield tmpApplyCommand.apply(this.editor);
+                // Show items again
+                this.addRemoveSelectionFromImage(true);
+            }
+            const duplicateCommand = new Duplicate(this.selectedElems);
+            if (wasTransforming) {
+                // Move the selected objects back to the correct location.
+                yield (tmpApplyCommand === null || tmpApplyCommand === void 0 ? void 0 : tmpApplyCommand.unapply(this.editor));
+                this.addRemoveSelectionFromImage(false);
+                this.previewTransformCmds();
+                this.updateUI();
+            }
+            return duplicateCommand;
+        });
     }
     addTo(elem) {
         if (this.container.parentElement) {
@@ -323,6 +359,7 @@ export default class Selection {
         this.hasParent = false;
     }
     setSelectedObjects(objects, bbox) {
+        this.addRemoveSelectionFromImage(true);
         this.originalRegion = bbox;
         this.selectedElems = objects.filter(object => object.isSelectable());
         this.updateUI();

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

@@ -17,6 +17,7 @@ export default class SelectionHandle {
     private readonly onDragUpdate;
     private readonly onDragEnd;
     private element;
+    private snapToGrid;
     constructor(shape: HandleShape, parentSide: Vec2, parent: Selection, onDragStart: DragStartCallback, onDragUpdate: DragUpdateCallback, onDragEnd: DragEndCallback);
     /**
      * Adds this to `container`, where `conatiner` should be the background/selection
@@ -32,4 +33,6 @@ export default class SelectionHandle {
     handleDragStart(pointer: Pointer): void;
     handleDragUpdate(pointer: Pointer): void;
     handleDragEnd(): void;
+    setSnapToGrid(snap: boolean): void;
+    isSnappingToGrid(): boolean;
 }

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

@@ -72,4 +72,10 @@ export default class SelectionHandle {
         }
         this.onDragEnd();
     }
+    setSnapToGrid(snap) {
+        this.snapToGrid = snap;
+    }
+    isSnappingToGrid() {
+        return this.snapToGrid;
+    }
 }

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

@@ -12,10 +12,12 @@ export default class SelectionTool extends BaseTool {
     private lastEvtTarget;
     private expandingSelectionBox;
     private shiftKeyPressed;
+    private ctrlKeyPressed;
     constructor(editor: Editor, description: string);
     private makeSelectionBox;
+    private snapSelectionToGrid;
     private selectionBoxHandlingEvt;
-    onPointerDown(event: PointerEvt): boolean;
+    onPointerDown({ allPointers, current }: PointerEvt): boolean;
     onPointerMove(event: PointerEvt): void;
     private onSelectionUpdated;
     private onGestureEnd;