js-draw 1.6.0 → 1.7.0

package/dist/cjs/rendering/RenderablePathSpec.js

@@ -26,11 +26,26 @@ const visualEquivalent = (renderablePath, visibleRect) => {
     const path = (0, exports.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 (0, exports.pathToRenderable)(math_1.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(math_1.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/cjs/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/cjs/rendering/caching/CacheRecordManager.js

@@ -46,5 +46,23 @@ 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');
+    }
 }
 exports.CacheRecordManager = CacheRecordManager;

package/dist/cjs/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/cjs/rendering/caching/RenderingCache.js

@@ -46,5 +46,8 @@ class RenderingCache {
             image.render(screenRenderer, visibleRect);
         }
     }
+    getDebugInfo() {
+        return this.recordManager.getDebugInfo();
+    }
 }
 exports.default = RenderingCache;

package/dist/cjs/rendering/renderers/CanvasRenderer.js

@@ -149,9 +149,10 @@ class CanvasRenderer extends AbstractRenderer_1.default {
             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 = (0, RenderablePathSpec_1.visualEquivalent)(path, this.getViewport().visibleRect);
+            path = (0, RenderablePathSpec_1.visualEquivalent)(path, visibleRect);
         }
         super.drawPath(path);
     }

package/dist/cjs/toolbar/widgets/BaseWidget.js

@@ -13,7 +13,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-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;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToolbarWidgetTag = void 0;
 const ToolbarShortcutHandler_1 = __importDefault(require("../../tools/ToolbarShortcutHandler"));
@@ -428,13 +428,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_1.default);
     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/cjs/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/cjs/tools/SelectionTool/Selection.js

@@ -64,22 +64,34 @@ class Selection {
             resize: new TransformMode_1.ResizeTransformer(editor, this),
             rotate: new TransformMode_1.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(`${SelectionTool_1.cssPrefix}selection-outer-container`);
+        this.innerContainer = document.createElement('div');
+        this.innerContainer.classList.add(`${SelectionTool_1.cssPrefix}selection-inner-container`);
         this.backgroundElem = document.createElement('div');
         this.backgroundElem.classList.add(`${SelectionTool_1.cssPrefix}selection-background`);
-        this.container.appendChild(this.backgroundElem);
-        const resizeHorizontalHandle = new SelectionHandle_1.default({
-            action: SelectionHandle_1.HandleAction.ResizeX,
-            side: math_1.Vec2.of(1, 0.5),
-        }, this, this.editor.viewport, (startPoint) => this.transformers.resize.onDragStart(startPoint, types_1.ResizeMode.HorizontalOnly), (currentPoint) => this.transformers.resize.onDragUpdate(currentPoint), () => this.transformers.resize.onDragEnd());
-        const resizeVerticalHandle = new SelectionHandle_1.default({
-            action: SelectionHandle_1.HandleAction.ResizeY,
-            side: math_1.Vec2.of(0.5, 1),
-        }, this, this.editor.viewport, (startPoint) => this.transformers.resize.onDragStart(startPoint, types_1.ResizeMode.VerticalOnly), (currentPoint) => this.transformers.resize.onDragUpdate(currentPoint), () => this.transformers.resize.onDragEnd());
-        const resizeBothHandle = new SelectionHandle_1.default({
-            action: SelectionHandle_1.HandleAction.ResizeXY,
-            side: math_1.Vec2.of(1, 1),
-        }, this, this.editor.viewport, (startPoint) => this.transformers.resize.onDragStart(startPoint, types_1.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 = {
+                [types_1.ResizeMode.Both]: SelectionHandle_1.HandleAction.ResizeXY,
+                [types_1.ResizeMode.HorizontalOnly]: SelectionHandle_1.HandleAction.ResizeX,
+                [types_1.ResizeMode.VerticalOnly]: SelectionHandle_1.HandleAction.ResizeY,
+            };
+            return new SelectionHandle_1.default({
+                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(types_1.ResizeMode.HorizontalOnly, math_1.Vec2.of(0, 0.5)),
+            makeResizeHandle(types_1.ResizeMode.HorizontalOnly, math_1.Vec2.of(1, 0.5)),
+        ];
+        const resizeVerticalHandle = makeResizeHandle(types_1.ResizeMode.VerticalOnly, math_1.Vec2.of(0.5, 1));
+        const resizeBothHandle = makeResizeHandle(types_1.ResizeMode.Both, math_1.Vec2.of(1, 1));
         const rotationHandle = new SelectionHandle_1.default({
             action: SelectionHandle_1.HandleAction.Rotate,
             side: math_1.Vec2.of(0.5, 0),
@@ -87,7 +99,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,
         ];
@@ -133,7 +145,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);
@@ -146,27 +158,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 = math_1.Mat33.identity;
-        // Make the commands undo-able, but only if the transform is non-empty.
-        if (!fullTransform.eq(math_1.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();
@@ -247,28 +265,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 = `${SelectionTool_1.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.
     //
@@ -276,6 +295,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) {
@@ -318,17 +340,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);
@@ -366,23 +389,29 @@ class Selection {
         this.targetHandle = null;
         this.setTransform(math_1.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 math_1.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_1.default.transformBy(math_1.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 math_1.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_1.default.transformBy(math_1.Mat33.translation(delta.times(0.5))), false);
+            this.editor.queueRerender().then(() => {
+                this.previewTransformCmds();
+            });
+            return true;
         }
+        return false;
     }
     deleteSelectedObjects() {
         if (this.backgroundDragging || this.targetHandle) {
@@ -410,7 +439,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
@@ -427,10 +456,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) {
@@ -439,8 +468,8 @@ class Selection {
         this.updateUI();
     }
     cancelSelection() {
-        if (this.container.parentElement) {
-            this.container.remove();
+        if (this.outerContainer.parentElement) {
+            this.outerContainer.remove();
         }
         this.originalRegion = math_1.Rect2.empty;
         this.selectionTightBoundingBox = null;

package/dist/cjs/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/cjs/tools/SelectionTool/SelectionHandle.js

@@ -16,6 +16,7 @@ var HandleAction;
     HandleAction["ResizeX"] = "resize-x";
     HandleAction["ResizeY"] = "resize-y";
 })(HandleAction || (exports.HandleAction = HandleAction = {}));
+// The *interactable* handle size. The visual size will be slightly smaller.
 exports.handleSize = 30;
 class SelectionHandle {
     constructor(presentation, parent, viewport, onDragStart, onDragUpdate, onDragEnd) {
@@ -28,10 +29,14 @@ class SelectionHandle {
         this.dragLastPos = null;
         this.element = document.createElement('div');
         this.element.classList.add(`${SelectionTool_1.cssPrefix}handle`, `${SelectionTool_1.cssPrefix}${presentation.action}`);
+        // Create a slightly smaller content/background element.
+        const visibleContent = document.createElement('div');
+        visibleContent.classList.add(`${SelectionTool_1.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) {
@@ -64,7 +69,7 @@ class SelectionHandle {
      * selection box.
      */
     getBBoxParentCoords() {
-        const parentRect = this.parent.screenRegion;
+        const parentRect = this.parent.getScreenRegion();
         const size = math_1.Vec2.of(exports.handleSize, exports.handleSize);
         const topLeft = parentRect.size.scale(this.parentSide)
             // Center
@@ -118,7 +123,7 @@ class SelectionHandle {
         if (!this.dragLastPos) {
             return;
         }
-        this.onDragEnd();
+        return this.onDragEnd();
     }
     setSnapToGrid(snap) {
         this.snapToGrid = snap;

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

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

@@ -12,6 +12,7 @@ const SVGRenderer_1 = __importDefault(require("../../rendering/renderers/SVGRend
 const Selection_1 = __importDefault(require("./Selection"));
 const TextComponent_1 = __importDefault(require("../../components/TextComponent"));
 const keybindings_1 = require("../keybindings");
+const ToPointerAutoscroller_1 = __importDefault(require("./ToPointerAutoscroller"));
 exports.cssPrefix = 'selection-tool-';
 // Allows users to select/transform portions of the `EditorImage`.
 // With respect to `extend`ing, `SelectionTool` is not stable.
@@ -23,8 +24,19 @@ class SelectionTool extends BaseTool_1.default {
         this.expandingSelectionBox = false;
         this.shiftKeyPressed = false;
         this.snapToGrid = false;
+        this.lastPointer = null;
         this.selectionBoxHandlingEvt = false;
         this.lastSelectedObjects = [];
+        this.autoscroller = new ToPointerAutoscroller_1.default(editor.viewport, (scrollBy) => {
+            editor.dispatch(Viewport_1.default.transformBy(math_1.Mat33.translation(scrollBy)), false);
+            // Update the selection box/content to match the new viewport.
+            if (this.lastPointer) {
+                // The viewport has changed -- ensure that the screen and canvas positions
+                // of the pointer are both correct
+                const updatedPointer = this.lastPointer.withScreenPosition(this.lastPointer.screenPos, editor.viewport);
+                this.onMainPointerUpdated(updatedPointer);
+            }
+        });
         this.handleOverlay = document.createElement('div');
         editor.createHTMLOverlay(this.handleOverlay);
         this.handleOverlay.style.display = 'none';
@@ -87,14 +99,22 @@ class SelectionTool extends BaseTool_1.default {
                 this.expandingSelectionBox = this.shiftKeyPressed;
                 this.makeSelectionBox(current.canvasPos);
             }
+            else {
+                // Only autoscroll if we're transforming an existing selection
+                this.autoscroller.start();
+            }
             return true;
         }
         return false;
     }
     onPointerMove(event) {
+        this.onMainPointerUpdated(event.current);
+    }
+    onMainPointerUpdated(currentPointer) {
+        this.lastPointer = currentPointer;
         if (!this.selectionBox)
             return;
-        let currentPointer = event.current;
+        this.autoscroller.onPointerMove(currentPointer.screenPos);
         if (!this.expandingSelectionBox && this.shiftKeyPressed && this.startPoint) {
             const screenPos = this.editor.viewport.canvasToScreen(this.startPoint);
             currentPointer = currentPointer.lockedToXYAxesScreen(screenPos, this.editor.viewport);
@@ -109,21 +129,8 @@ class SelectionTool extends BaseTool_1.default {
             this.selectionBox.setToPoint(currentPointer.canvasPos);
         }
     }
-    // Called after a gestureCancel and a pointerUp
-    onGestureEnd() {
-        if (!this.selectionBox)
-            return;
-        if (!this.selectionBoxHandlingEvt) {
-            // Expand/shrink the selection rectangle, if applicable
-            this.selectionBox.resolveToObjects();
-            this.onSelectionUpdated();
-        }
-        else {
-            this.selectionBox.onDragEnd();
-        }
-        this.selectionBoxHandlingEvt = false;
-    }
     onPointerUp(event) {
+        this.autoscroller.stop();
         if (!this.selectionBox)
             return;
         let currentPointer = event.current;
@@ -142,10 +149,20 @@ class SelectionTool extends BaseTool_1.default {
             ]);
         }
         else {
-            this.onGestureEnd();
+            if (!this.selectionBoxHandlingEvt) {
+                // Expand/shrink the selection rectangle, if applicable
+                this.selectionBox.resolveToObjects();
+                this.onSelectionUpdated();
+            }
+            else {
+                this.selectionBox.onDragEnd();
+            }
+            this.selectionBoxHandlingEvt = false;
+            this.lastPointer = null;
         }
     }
     onGestureCancel() {
+        this.autoscroller.stop();
         if (this.selectionBoxHandlingEvt) {
             this.selectionBox?.onDragCancel();
         }
@@ -158,6 +175,8 @@ class SelectionTool extends BaseTool_1.default {
             this.prevSelectionBox = null;
         }
         this.expandingSelectionBox = false;
+        this.lastPointer = null;
+        this.selectionBoxHandlingEvt = false;
     }
     onSelectionUpdated() {
         const selectedItemCount = this.selectionBox?.getSelectedItemCount() ?? 0;
@@ -283,6 +302,7 @@ class SelectionTool extends BaseTool_1.default {
             const transform = math_1.Mat33.scaling2D(scaleFactor, this.editor.viewport.roundPoint(region.topLeft)).rightMul(math_1.Mat33.translation(regionCenter).rightMul(roundedRotationMatrix).rightMul(math_1.Mat33.translation(regionCenter.times(-1)))).rightMul(math_1.Mat33.translation(this.editor.viewport.roundPoint(math_1.Vec2.of(xTranslateSteps, yTranslateSteps).times(translateStepSize))));
             const oldTransform = this.selectionBox.getTransform();
             this.selectionBox.setTransform(oldTransform.rightMul(transform));
+            this.selectionBox.scrollTo();
         }
         if (this.selectionBox && !handled && (event.key === 'Delete' || event.key === 'Backspace')) {
             this.editor.dispatch(this.selectionBox.deleteSelectedObjects());

package/dist/cjs/tools/SelectionTool/ToPointerAutoscroller.d.ts

@@ -0,0 +1,23 @@
+import { Point2, Vec2 } from '@js-draw/math';
+import Viewport from '../../Viewport';
+type ScrollByCallback = (delta: Vec2) => void;
+/**
+ * Automatically scrolls the viewport such that the user's pointer is visible.
+ */
+export default class ToPointerAutoscroller {
+    private viewport;
+    private scrollByCanvasDelta;
+    private started;
+    private updateLoopId;
+    private updateLoopRunning;
+    private targetPoint;
+    private scrollRate;
+    constructor(viewport: Viewport, scrollByCanvasDelta: ScrollByCallback);
+    private getScrollForPoint;
+    start(): void;
+    onPointerMove(pointerScreenPosition: Point2): void;
+    stop(): void;
+    private startUpdateLoop;
+    private stopUpdateLoop;
+}
+export {};