js-draw 1.6.0 → 1.7.0

package/dist/mjs/components/TextComponent.mjs

@@ -99,30 +99,33 @@ class TextComponent extends AbstractComponent {
         let bbox = null;
         const cursor = new TextComponent.TextCursor(this.transform, this.style);
         for (const textObject of this.textObjects) {
-            const transform = cursor.update(textObject);
+            const transform = cursor.update(textObject).transform;
             const currentBBox = this.computeUntransformedBBoxOfPart(textObject).transformedBoundingBox(transform);
             bbox ??= currentBBox;
             bbox = bbox.union(currentBBox);
         }
         this.contentBBox = bbox ?? Rect2.empty;
     }
-    renderInternal(canvas) {
+    renderInternal(canvas, visibleRect) {
         const cursor = new TextComponent.TextCursor(this.transform, this.style);
         for (const textObject of this.textObjects) {
-            const transform = cursor.update(textObject);
+            const { transform, bbox } = cursor.update(textObject);
+            if (visibleRect && !visibleRect.intersects(bbox)) {
+                continue;
+            }
             if (typeof textObject === 'string') {
                 canvas.drawText(textObject, transform, this.style);
             }
             else {
                 canvas.pushTransform(transform);
-                textObject.renderInternal(canvas);
+                textObject.renderInternal(canvas, visibleRect?.transformedBoundingBox(transform.inverse()));
                 canvas.popTransform();
             }
         }
     }
-    render(canvas, _visibleRect) {
+    render(canvas, visibleRect) {
         canvas.startObject(this.contentBBox);
-        this.renderInternal(canvas);
+        this.renderInternal(canvas, visibleRect);
         canvas.endObject(this.getLoadSaveData());
     }
     getProportionalRenderingTime() {
@@ -132,7 +135,7 @@ class TextComponent extends AbstractComponent {
         const cursor = new TextComponent.TextCursor(this.transform, this.style);
         for (const subObject of this.textObjects) {
             // Convert canvas space to internal space relative to the current object.
-            const invTransform = cursor.update(subObject).inverse();
+            const invTransform = cursor.update(subObject).transform.inverse();
             const transformedLine = lineSegment.transformedBy(invTransform);
             if (typeof subObject === 'string') {
                 const textBBox = TextComponent.getTextDimens(subObject, this.style);
@@ -310,11 +313,11 @@ TextComponent.TextCursor = class {
         this.transform = Mat33.identity;
     }
     /**
-     * Based on previous calls to `update`, returns the transformation of
-     * the given `element` (including the parentTransform given to this cursor's
-     * constructor).
+     * Based on previous calls to `update`, returns the transformation and bounding box (relative
+     * to the parent element, or if none, the canvas) of the given `element`. Note that
+     * this is computed in part using the `parentTransform` provivded to this cursor's constructor.
      *
-     * The result does not take into account
+     * Warning: There may be edge cases here that are not taken into account.
      */
     update(elem) {
         let elementTransform = Mat33.identity;
@@ -353,7 +356,11 @@ TextComponent.TextCursor = class {
         // Update this.transform so that future calls to update return correct values.
         const endShiftTransform = Mat33.translation(Vec2.of(textSize.width, 0));
         this.transform = elementTransform.rightMul(elemInternalTransform).rightMul(endShiftTransform);
-        return this.parentTransform.rightMul(elementTransform);
+        const transform = this.parentTransform.rightMul(elementTransform);
+        return {
+            transform,
+            bbox: textSize.transformedBoundingBox(transform),
+        };
     }
 };
 export default TextComponent;

package/dist/mjs/image/EditorImage.mjs

@@ -182,11 +182,11 @@ class EditorImage {
      * @see {@link Display.flatten}
      */
     static addElement(elem, applyByFlattening = false) {
-        return new EditorImage.AddElementCommand(elem, applyByFlattening);
+        return new _a.AddElementCommand(elem, applyByFlattening);
     }
     /** @see EditorImage.addElement */
     addElement(elem, applyByFlattening) {
-        return EditorImage.addElement(elem, applyByFlattening);
+        return _a.addElement(elem, applyByFlattening);
     }
     /**
      * @returns a `Viewport` for rendering the image when importing/exporting.
@@ -205,7 +205,7 @@ class EditorImage {
      * autoresize (if it was previously enabled).
      */
     setImportExportRect(imageRect) {
-        return EditorImage.SetImportExportRectCommand.of(this, imageRect, false);
+        return _a.SetImportExportRectCommand.of(this, imageRect, false);
     }
     getAutoresizeEnabled() {
         return this.shouldAutoresizeExportViewport;
@@ -216,7 +216,7 @@ class EditorImage {
             return Command.empty;
         }
         const newBBox = this.root.getBBox();
-        return EditorImage.SetImportExportRectCommand.of(this, newBBox, autoresize);
+        return _a.SetImportExportRectCommand.of(this, newBBox, autoresize);
     }
     setAutoresizeEnabledDirectly(shouldAutoresize) {
         if (shouldAutoresize !== this.shouldAutoresizeExportViewport) {
@@ -322,7 +322,7 @@ EditorImage.AddElementCommand = (_b = class extends SerializableCommand {
             const id = json.elemData.id;
             const foundElem = editor.image.lookupElement(id);
             const elem = foundElem ?? AbstractComponent.deserialize(json.elemData);
-            const result = new EditorImage.AddElementCommand(elem);
+            const result = new _a.AddElementCommand(elem);
             result.serializedElem = json.elemData;
             return result;
         });
@@ -331,7 +331,7 @@ EditorImage.AddElementCommand = (_b = class extends SerializableCommand {
 // Handles resizing the background import/export region of the image.
 EditorImage.SetImportExportRectCommand = (_c = class extends SerializableCommand {
         constructor(originalSize, originalTransform, originalAutoresize, newExportRect, newAutoresize) {
-            super(EditorImage.SetImportExportRectCommand.commandId);
+            super(_a.SetImportExportRectCommand.commandId);
             this.originalSize = originalSize;
             this.originalTransform = originalTransform;
             this.originalAutoresize = originalAutoresize;
@@ -344,7 +344,7 @@ EditorImage.SetImportExportRectCommand = (_c = class extends SerializableCommand
             const originalSize = importExportViewport.visibleRect.size;
             const originalTransform = importExportViewport.canvasToScreenTransform;
             const originalAutoresize = image.getAutoresizeEnabled();
-            return new EditorImage.SetImportExportRectCommand(originalSize, originalTransform, originalAutoresize, newExportRect, newAutoresize);
+            return new _a.SetImportExportRectCommand(originalSize, originalTransform, originalAutoresize, newExportRect, newAutoresize);
         }
         apply(editor) {
             editor.image.setAutoresizeEnabledDirectly(this.newAutoresize);
@@ -405,7 +405,7 @@ EditorImage.SetImportExportRectCommand = (_c = class extends SerializableCommand
             const finalRect = new Rect2(json.newRegion.x, json.newRegion.y, json.newRegion.w, json.newRegion.h);
             const autoresize = json.autoresize ?? false;
             const originalAutoresize = json.originalAutoresize ?? false;
-            return new EditorImage.SetImportExportRectCommand(originalSize, originalTransform, originalAutoresize, finalRect, autoresize);
+            return new _a.SetImportExportRectCommand(originalSize, originalTransform, originalAutoresize, finalRect, autoresize);
         });
     })(),
     _c);

package/dist/mjs/localization.d.ts

@@ -10,5 +10,7 @@ export interface EditorLocalization extends ToolbarLocalization, ToolLocalizatio
     doneLoading: string;
     loading: (percentage: number) => string;
     imageEditor: string;
+    softwareLibraries: string;
+    developerInformation: string;
 }
 export declare const defaultEditorLocalization: EditorLocalization;

package/dist/mjs/localization.mjs

@@ -19,4 +19,6 @@ export const defaultEditorLocalization = {
     doneLoading: 'Done loading',
     undoAnnouncement: (commandDescription) => `Undid ${commandDescription}`,
     redoAnnouncement: (commandDescription) => `Redid ${commandDescription}`,
+    softwareLibraries: 'Libraries',
+    developerInformation: 'Developer information',
 };

package/dist/mjs/localizations/comments.mjs

@@ -2,6 +2,7 @@
  * Comments to help translators create translations.
  */
 const comments = {
+    pen: 'Likely unused',
     dragAndDropHereOrBrowse: 'Uses {{curly braces}} to denote bold text',
     closeSidebar: 'Currently used as an accessibilty label',
 };

package/dist/mjs/rendering/RenderablePathSpec.mjs

@@ -21,11 +21,26 @@ export const visualEquivalent = (renderablePath, visibleRect) => {
     const path = pathFromRenderable(renderablePath);
     const strokeWidth = renderablePath.style.stroke?.width ?? 0;
     const onlyStroked = strokeWidth > 0 && renderablePath.style.fill.a === 0;
+    const styledPathBBox = path.bbox.grownBy(strokeWidth);
+    // Are we close enough to the path that it fills the entire screen?
+    if (onlyStroked
+        && renderablePath.style.stroke
+        && strokeWidth > visibleRect.maxDimension
+        && styledPathBBox.containsRect(visibleRect)) {
+        const strokeRadius = strokeWidth / 2;
+        // Do a fast, but with many false negatives, check.
+        for (const point of path.startEndPoints()) {
+            // If within the strokeRadius of any point
+            if (visibleRect.isWithinRadiusOf(strokeRadius, point)) {
+                return pathToRenderable(Path.fromRect(visibleRect), { fill: renderablePath.style.stroke.color });
+            }
+        }
+    }
     // Scale the expanded rect --- the visual equivalent is only close for huge strokes.
     const expandedRect = visibleRect.grownBy(strokeWidth)
         .transformedBoundingBox(Mat33.scaling2D(4, visibleRect.center));
     // TODO: Handle simplifying very small paths.
-    if (expandedRect.containsRect(path.bbox.grownBy(strokeWidth))) {
+    if (expandedRect.containsRect(styledPathBBox)) {
         return renderablePath;
     }
     const parts = [];

package/dist/mjs/rendering/caching/CacheRecordManager.d.ts

@@ -9,4 +9,5 @@ export declare class CacheRecordManager {
     setSharedState(state: CacheState): void;
     allocCanvas(drawTo: Rect2, onDealloc: BeforeDeallocCallback): CacheRecord;
     private getLeastRecentlyUsedRecord;
+    getDebugInfo(): string;
 }

package/dist/mjs/rendering/caching/CacheRecordManager.mjs

@@ -40,4 +40,22 @@ export class CacheRecordManager {
         this.cacheRecords.sort((a, b) => a.getLastUsedCycle() - b.getLastUsedCycle());
         return this.cacheRecords[0];
     }
+    // Returns information to (hopefully) help debug performance issues
+    getDebugInfo() {
+        let numberAllocd = 0;
+        let averageReassignedCount = 0;
+        for (const cacheRecord of this.cacheRecords) {
+            averageReassignedCount += cacheRecord.allocCount;
+            if (cacheRecord.isAllocd()) {
+                numberAllocd++;
+            }
+        }
+        averageReassignedCount /= Math.max(this.cacheRecords.length, 0);
+        const debugInfo = [
+            `${this.cacheRecords.length} cache records (max ${this.maxCanvases})`,
+            `${numberAllocd} assigned to screen regions`,
+            `Average number of times reassigned: ${Math.round(averageReassignedCount * 100) / 100}`,
+        ];
+        return debugInfo.join('\n');
+    }
 }

package/dist/mjs/rendering/caching/RenderingCache.d.ts

@@ -8,4 +8,5 @@ export default class RenderingCache {
     private rootNode;
     constructor(cacheProps: CacheProps);
     render(screenRenderer: AbstractRenderer, image: ImageNode, viewport: Viewport): void;
+    getDebugInfo(): string;
 }

package/dist/mjs/rendering/caching/RenderingCache.mjs

@@ -41,4 +41,7 @@ export default class RenderingCache {
             image.render(screenRenderer, visibleRect);
         }
     }
+    getDebugInfo() {
+        return this.recordManager.getDebugInfo();
+    }
 }

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

@@ -144,9 +144,10 @@ export default class CanvasRenderer extends AbstractRenderer {
             return;
         }
         // If part of a huge object, it might be worth trimming the path
-        if (this.currentObjectBBox?.containsRect(this.getViewport().visibleRect)) {
+        const visibleRect = this.getViewport().visibleRect;
+        if (this.currentObjectBBox?.containsRect(visibleRect)) {
             // Try to trim/remove parts of the path outside of the bounding box.
-            path = visualEquivalent(path, this.getViewport().visibleRect);
+            path = visualEquivalent(path, visibleRect);
         }
         super.drawPath(path);
     }

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

@@ -9,7 +9,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _BaseWidget_instances, _BaseWidget_hasDropdown, _BaseWidget_disabledDueToReadOnlyEditor, _BaseWidget_tags, _BaseWidget_removeEditorListeners, _BaseWidget_addEditorListeners;
+var _BaseWidget_instances, _a, _BaseWidget_hasDropdown, _BaseWidget_disabledDueToReadOnlyEditor, _BaseWidget_tags, _BaseWidget_removeEditorListeners, _BaseWidget_addEditorListeners;
 import  ToolbarShortcutHandler  from '../../tools/ToolbarShortcutHandler.mjs';
 import  { keyPressEventFromHTMLEvent, keyUpEventFromHTMLEvent }  from '../../inputEvents.mjs';
 import  { toolbarCSSPrefix }  from '../constants.mjs';
@@ -422,13 +422,13 @@ class BaseWidget {
         }
     }
 }
-_BaseWidget_hasDropdown = new WeakMap(), _BaseWidget_disabledDueToReadOnlyEditor = new WeakMap(), _BaseWidget_tags = new WeakMap(), _BaseWidget_removeEditorListeners = new WeakMap(), _BaseWidget_instances = new WeakSet(), _BaseWidget_addEditorListeners = function _BaseWidget_addEditorListeners() {
+_a = BaseWidget, _BaseWidget_hasDropdown = new WeakMap(), _BaseWidget_disabledDueToReadOnlyEditor = new WeakMap(), _BaseWidget_tags = new WeakMap(), _BaseWidget_removeEditorListeners = new WeakMap(), _BaseWidget_instances = new WeakSet(), _BaseWidget_addEditorListeners = function _BaseWidget_addEditorListeners() {
     __classPrivateFieldGet(this, _BaseWidget_removeEditorListeners, "f")?.call(this);
     const toolbarShortcutHandlers = this.editor.toolController.getMatchingTools(ToolbarShortcutHandler);
     let removeKeyPressListener = null;
     // If the onKeyPress function has been extended and the editor is configured to send keypress events to
     // toolbar widgets,
-    if (toolbarShortcutHandlers.length > 0 && this.onKeyPress !== BaseWidget.prototype.onKeyPress) {
+    if (toolbarShortcutHandlers.length > 0 && this.onKeyPress !== _a.prototype.onKeyPress) {
         const keyPressListener = (event) => this.onKeyPress(event);
         const handler = toolbarShortcutHandlers[0];
         handler.registerListener(keyPressListener);

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

@@ -15,7 +15,8 @@ export default class Selection {
     private transformers;
     private transform;
     private selectedElems;
-    private container;
+    private outerContainer;
+    private innerContainer;
     private backgroundElem;
     private hasParent;
     constructor(startPoint: Point2, editor: Editor);
@@ -32,10 +33,10 @@ export default class Selection {
     get regionRotation(): number;
     get preTransformedScreenRegion(): Rect2;
     get preTransformedScreenRegionRotation(): number;
-    get screenRegion(): Rect2;
+    getScreenRegion(): Rect2;
     get screenRegionRotation(): number;
     setTransform(transform: Mat33, preview?: boolean): void;
-    finalizeTransform(): Promise<void>;
+    finalizeTransform(): void | Promise<void>;
     private static ApplyTransformationCommand;
     private previewTransformCmds;
     resolveToObjects(): boolean;
@@ -53,7 +54,7 @@ export default class Selection {
     onDragUpdate(pointer: Pointer): void;
     onDragEnd(): void;
     onDragCancel(): void;
-    scrollTo(): Promise<void>;
+    scrollTo(): boolean;
     deleteSelectedObjects(): Command;
     private selectionDuplicatedAnimationTimeout;
     private runSelectionDuplicatedAnimation;

package/dist/mjs/tools/SelectionTool/Selection.mjs

@@ -36,22 +36,34 @@ class Selection {
             resize: new ResizeTransformer(editor, this),
             rotate: new RotateTransformer(editor, this),
         };
-        this.container = document.createElement('div');
+        // We need two containers for some CSS to apply (the outer container
+        // needs zero height, the inner needs to prevent the selection background
+        // from being visible outside of the editor).
+        this.outerContainer = document.createElement('div');
+        this.outerContainer.classList.add(`${cssPrefix}selection-outer-container`);
+        this.innerContainer = document.createElement('div');
+        this.innerContainer.classList.add(`${cssPrefix}selection-inner-container`);
         this.backgroundElem = document.createElement('div');
         this.backgroundElem.classList.add(`${cssPrefix}selection-background`);
-        this.container.appendChild(this.backgroundElem);
-        const resizeHorizontalHandle = new SelectionHandle({
-            action: HandleAction.ResizeX,
-            side: Vec2.of(1, 0.5),
-        }, this, this.editor.viewport, (startPoint) => this.transformers.resize.onDragStart(startPoint, ResizeMode.HorizontalOnly), (currentPoint) => this.transformers.resize.onDragUpdate(currentPoint), () => this.transformers.resize.onDragEnd());
-        const resizeVerticalHandle = new SelectionHandle({
-            action: HandleAction.ResizeY,
-            side: Vec2.of(0.5, 1),
-        }, this, this.editor.viewport, (startPoint) => this.transformers.resize.onDragStart(startPoint, ResizeMode.VerticalOnly), (currentPoint) => this.transformers.resize.onDragUpdate(currentPoint), () => this.transformers.resize.onDragEnd());
-        const resizeBothHandle = new SelectionHandle({
-            action: HandleAction.ResizeXY,
-            side: Vec2.of(1, 1),
-        }, this, this.editor.viewport, (startPoint) => this.transformers.resize.onDragStart(startPoint, ResizeMode.Both), (currentPoint) => this.transformers.resize.onDragUpdate(currentPoint), () => this.transformers.resize.onDragEnd());
+        this.innerContainer.appendChild(this.backgroundElem);
+        this.outerContainer.appendChild(this.innerContainer);
+        const makeResizeHandle = (mode, side) => {
+            const modeToAction = {
+                [ResizeMode.Both]: HandleAction.ResizeXY,
+                [ResizeMode.HorizontalOnly]: HandleAction.ResizeX,
+                [ResizeMode.VerticalOnly]: HandleAction.ResizeY,
+            };
+            return new SelectionHandle({
+                action: modeToAction[mode],
+                side,
+            }, this, this.editor.viewport, (startPoint) => this.transformers.resize.onDragStart(startPoint, mode), (currentPoint) => this.transformers.resize.onDragUpdate(currentPoint), () => this.transformers.resize.onDragEnd());
+        };
+        const resizeHorizontalHandles = [
+            makeResizeHandle(ResizeMode.HorizontalOnly, Vec2.of(0, 0.5)),
+            makeResizeHandle(ResizeMode.HorizontalOnly, Vec2.of(1, 0.5)),
+        ];
+        const resizeVerticalHandle = makeResizeHandle(ResizeMode.VerticalOnly, Vec2.of(0.5, 1));
+        const resizeBothHandle = makeResizeHandle(ResizeMode.Both, Vec2.of(1, 1));
         const rotationHandle = new SelectionHandle({
             action: HandleAction.Rotate,
             side: Vec2.of(0.5, 0),
@@ -59,7 +71,7 @@ class Selection {
         }, this, this.editor.viewport, (startPoint) => this.transformers.rotate.onDragStart(startPoint), (currentPoint) => this.transformers.rotate.onDragUpdate(currentPoint), () => this.transformers.rotate.onDragEnd());
         this.handles = [
             resizeBothHandle,
-            resizeHorizontalHandle,
+            ...resizeHorizontalHandles,
             resizeVerticalHandle,
             rotationHandle,
         ];
@@ -105,7 +117,7 @@ class Selection {
     get preTransformedScreenRegionRotation() {
         return this.editor.viewport.getRotationAngle();
     }
-    get screenRegion() {
+    getScreenRegion() {
         const toScreen = this.editor.viewport.canvasToScreenTransform;
         const scaleFactor = this.editor.viewport.getScaleFactor();
         const screenCenter = toScreen.transformVec2(this.region.center);
@@ -118,27 +130,33 @@ class Selection {
     setTransform(transform, preview = true) {
         this.transform = transform;
         if (preview && this.hasParent) {
-            this.scrollTo();
             this.previewTransformCmds();
         }
     }
     // Applies the current transformation to the selection
-    async finalizeTransform() {
+    finalizeTransform() {
         const fullTransform = this.transform;
         const selectedElems = this.selectedElems;
         // Reset for the next drag
         this.originalRegion = this.originalRegion.transformedBoundingBox(this.transform);
         this.transform = Mat33.identity;
-        // Make the commands undo-able, but only if the transform is non-empty.
-        if (!fullTransform.eq(Mat33.identity)) {
-            await this.editor.dispatch(new Selection.ApplyTransformationCommand(this, selectedElems, fullTransform));
-        }
+        this.scrollTo();
+        // Make the commands undo-able.
+        // Don't check for non-empty transforms because this breaks changing the
+        // z-index of the just-transformed commands.
+        //
+        // TODO: Check whether the selectedElems are already all toplevel.
+        const transformPromise = this.editor.dispatch(new _a.ApplyTransformationCommand(this, selectedElems, fullTransform));
         // Clear renderings of any in-progress transformations
         const wetInkRenderer = this.editor.display.getWetInkRenderer();
         wetInkRenderer.clear();
+        return transformPromise;
     }
     // Preview the effects of the current transformation on the selection
     previewTransformCmds() {
+        if (this.selectedElems.length === 0) {
+            return;
+        }
         // Don't render what we're moving if it's likely to be slow.
         if (this.selectedElems.length > maxPreviewElemCount) {
             this.updateUI();
@@ -219,28 +237,29 @@ class Selection {
         if (!this.hasParent) {
             return;
         }
+        const screenRegion = this.getScreenRegion();
         // marginLeft, marginTop: Display relative to the top left of the selection overlay.
         // left, top don't work for this.
-        this.backgroundElem.style.marginLeft = `${this.screenRegion.topLeft.x}px`;
-        this.backgroundElem.style.marginTop = `${this.screenRegion.topLeft.y}px`;
-        this.backgroundElem.style.width = `${this.screenRegion.width}px`;
-        this.backgroundElem.style.height = `${this.screenRegion.height}px`;
+        this.backgroundElem.style.marginLeft = `${screenRegion.topLeft.x}px`;
+        this.backgroundElem.style.marginTop = `${screenRegion.topLeft.y}px`;
+        this.backgroundElem.style.width = `${screenRegion.width}px`;
+        this.backgroundElem.style.height = `${screenRegion.height}px`;
         const rotationDeg = this.screenRegionRotation * 180 / Math.PI;
         this.backgroundElem.style.transform = `rotate(${rotationDeg}deg)`;
         this.backgroundElem.style.transformOrigin = 'center';
         // If closer to perpendicular, apply different CSS
         const perpendicularClassName = `${cssPrefix}rotated-near-perpendicular`;
         if (Math.abs(Math.sin(this.screenRegionRotation)) > 0.5) {
-            this.container.classList.add(perpendicularClassName);
+            this.innerContainer.classList.add(perpendicularClassName);
         }
         else {
-            this.container.classList.remove(perpendicularClassName);
+            this.innerContainer.classList.remove(perpendicularClassName);
         }
         for (const handle of this.handles) {
             handle.updatePosition();
         }
     }
-    // Add/remove the contents of this' seleciton from the editor.
+    // Add/remove the contents of this seleciton from the editor.
     // Used to prevent previewed content from looking like duplicate content
     // while dragging.
     //
@@ -248,6 +267,9 @@ class Selection {
     // the editor image is likely to be slow.)
     //
     // If removed from the image, selected elements are drawn as wet ink.
+    //
+    // [inImage] should be `true` if the selected elements should be added to the
+    // main image, `false` if they should be removed.
     addRemoveSelectionFromImage(inImage) {
         // Don't hide elements if doing so will be slow.
         if (!inImage && this.selectedElems.length > maxPreviewElemCount) {
@@ -290,17 +312,18 @@ class Selection {
         document.getSelection()?.removeAllRanges();
         this.targetHandle = null;
         let result = false;
+        this.backgroundDragging = false;
+        if (this.region.containsPoint(pointer.canvasPos)) {
+            this.backgroundDragging = true;
+            result = true;
+        }
         for (const handle of this.handles) {
             if (handle.containsPoint(pointer.canvasPos)) {
                 this.targetHandle = handle;
+                this.backgroundDragging = false;
                 result = true;
             }
         }
-        this.backgroundDragging = false;
-        if (this.region.containsPoint(pointer.canvasPos)) {
-            this.backgroundDragging = true;
-            result = true;
-        }
         if (result) {
             this.removeDeletedElemsFromSelection();
             this.addRemoveSelectionFromImage(false);
@@ -338,23 +361,29 @@ class Selection {
         this.targetHandle = null;
         this.setTransform(Mat33.identity);
         this.addRemoveSelectionFromImage(true);
+        this.updateUI();
     }
     // Scroll the viewport to this. Does not zoom
-    async scrollTo() {
+    scrollTo() {
         if (this.selectedElems.length === 0) {
-            return;
+            return false;
         }
-        const screenRect = new Rect2(0, 0, this.editor.display.width, this.editor.display.height);
-        if (!screenRect.containsPoint(this.screenRegion.center)) {
-            const closestPoint = screenRect.getClosestPointOnBoundaryTo(this.screenRegion.center);
-            const screenDelta = this.screenRegion.center.minus(closestPoint);
-            const delta = this.editor.viewport.screenToCanvasTransform.transformVec3(screenDelta);
-            await this.editor.dispatchNoAnnounce(Viewport.transformBy(Mat33.translation(delta.times(-1))), false);
-            // Re-renders clear wet ink, so we need to re-draw the preview
-            // after the full re-render.
-            await this.editor.queueRerender();
-            this.previewTransformCmds();
+        const screenSize = this.editor.viewport.getScreenRectSize();
+        const screenRect = new Rect2(0, 0, screenSize.x, screenSize.y);
+        const selectionScreenRegion = this.getScreenRegion();
+        if (!screenRect.containsPoint(selectionScreenRegion.center)) {
+            const targetPointScreen = selectionScreenRegion.center;
+            const closestPointScreen = screenRect.getClosestPointOnBoundaryTo(targetPointScreen);
+            const closestPointCanvas = this.editor.viewport.screenToCanvas(closestPointScreen);
+            const targetPointCanvas = this.region.center;
+            const delta = closestPointCanvas.minus(targetPointCanvas);
+            this.editor.dispatchNoAnnounce(Viewport.transformBy(Mat33.translation(delta.times(0.5))), false);
+            this.editor.queueRerender().then(() => {
+                this.previewTransformCmds();
+            });
+            return true;
         }
+        return false;
     }
     deleteSelectedObjects() {
         if (this.backgroundDragging || this.targetHandle) {
@@ -382,7 +411,7 @@ class Selection {
         if (wasTransforming) {
             // Don't update the selection's focus when redoing/undoing
             const selectionToUpdate = null;
-            tmpApplyCommand = new Selection.ApplyTransformationCommand(selectionToUpdate, this.selectedElems, this.transform);
+            tmpApplyCommand = new _a.ApplyTransformationCommand(selectionToUpdate, this.selectedElems, this.transform);
             // Transform to ensure that the duplicates are in the correct location
             await tmpApplyCommand.apply(this.editor);
             // Show items again
@@ -399,10 +428,10 @@ class Selection {
         return duplicateCommand;
     }
     addTo(elem) {
-        if (this.container.parentElement) {
-            this.container.remove();
+        if (this.outerContainer.parentElement) {
+            this.outerContainer.remove();
         }
-        elem.appendChild(this.container);
+        elem.appendChild(this.outerContainer);
         this.hasParent = true;
     }
     setToPoint(point) {
@@ -411,8 +440,8 @@ class Selection {
         this.updateUI();
     }
     cancelSelection() {
-        if (this.container.parentElement) {
-            this.container.remove();
+        if (this.outerContainer.parentElement) {
+            this.outerContainer.remove();
         }
         this.originalRegion = Rect2.empty;
         this.selectionTightBoundingBox = null;

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

@@ -16,7 +16,7 @@ export interface HandlePresentation {
 export declare const handleSize = 30;
 export type DragStartCallback = (startPoint: Point2) => void;
 export type DragUpdateCallback = (canvasPoint: Point2) => void;
-export type DragEndCallback = () => void;
+export type DragEndCallback = () => Promise<void> | void;
 export default class SelectionHandle {
     readonly presentation: HandlePresentation;
     private readonly parent;
@@ -50,7 +50,7 @@ export default class SelectionHandle {
     private dragLastPos;
     handleDragStart(pointer: Pointer): void;
     handleDragUpdate(pointer: Pointer): void;
-    handleDragEnd(): void;
+    handleDragEnd(): void | Promise<void>;
     setSnapToGrid(snap: boolean): void;
     isSnappingToGrid(): boolean;
 }

package/dist/mjs/tools/SelectionTool/SelectionHandle.mjs

@@ -13,6 +13,7 @@ export var HandleAction;
     HandleAction["ResizeX"] = "resize-x";
     HandleAction["ResizeY"] = "resize-y";
 })(HandleAction || (HandleAction = {}));
+// The *interactable* handle size. The visual size will be slightly smaller.
 export const handleSize = 30;
 export default class SelectionHandle {
     constructor(presentation, parent, viewport, onDragStart, onDragUpdate, onDragEnd) {
@@ -25,10 +26,14 @@ export default class SelectionHandle {
         this.dragLastPos = null;
         this.element = document.createElement('div');
         this.element.classList.add(`${cssPrefix}handle`, `${cssPrefix}${presentation.action}`);
+        // Create a slightly smaller content/background element.
+        const visibleContent = document.createElement('div');
+        visibleContent.classList.add(`${cssPrefix}content`);
+        this.element.appendChild(visibleContent);
         this.parentSide = presentation.side;
         const icon = presentation.icon;
         if (icon) {
-            this.element.appendChild(icon);
+            visibleContent.appendChild(icon);
             icon.classList.add('icon');
         }
         if (presentation.action === HandleAction.Rotate) {
@@ -61,7 +66,7 @@ export default class SelectionHandle {
      * selection box.
      */
     getBBoxParentCoords() {
-        const parentRect = this.parent.screenRegion;
+        const parentRect = this.parent.getScreenRegion();
         const size = Vec2.of(handleSize, handleSize);
         const topLeft = parentRect.size.scale(this.parentSide)
             // Center
@@ -115,7 +120,7 @@ export default class SelectionHandle {
         if (!this.dragLastPos) {
             return;
         }
-        this.onDragEnd();
+        return this.onDragEnd();
     }
     setSnapToGrid(snap) {
         this.snapToGrid = snap;

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

@@ -13,13 +13,15 @@ export default class SelectionTool extends BaseTool {
     private expandingSelectionBox;
     private shiftKeyPressed;
     private snapToGrid;
+    private lastPointer;
+    private autoscroller;
     constructor(editor: Editor, description: string);
     private makeSelectionBox;
     private snapSelectionToGrid;
     private selectionBoxHandlingEvt;
     onPointerDown({ allPointers, current }: PointerEvt): boolean;
     onPointerMove(event: PointerEvt): void;
-    private onGestureEnd;
+    private onMainPointerUpdated;
     onPointerUp(event: PointerEvt): void;
     onGestureCancel(): void;
     private lastSelectedObjects;