js-draw 1.6.1 → 1.7.0

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/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,29 +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;
+        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.
-        await this.editor.dispatch(new _a.ApplyTransformationCommand(this, selectedElems, fullTransform));
+        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();
@@ -249,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.
     //
@@ -278,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) {
@@ -320,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);
@@ -368,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) {
@@ -429,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) {
@@ -441,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 {};

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

@@ -0,0 +1,83 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const math_1 = require("@js-draw/math");
+const untilNextAnimationFrame_1 = __importDefault(require("../../util/untilNextAnimationFrame"));
+/**
+ * Automatically scrolls the viewport such that the user's pointer is visible.
+ */
+class ToPointerAutoscroller {
+    constructor(viewport, scrollByCanvasDelta) {
+        this.viewport = viewport;
+        this.scrollByCanvasDelta = scrollByCanvasDelta;
+        this.started = false;
+        this.updateLoopId = 0;
+        this.updateLoopRunning = false;
+        this.targetPoint = null;
+        this.scrollRate = 1000; // px/s
+    }
+    getScrollForPoint(screenPoint) {
+        const screenSize = this.viewport.getScreenRectSize();
+        const screenRect = new math_1.Rect2(0, 0, screenSize.x, screenSize.y);
+        // Starts autoscrolling when the cursor is **outside of** this region
+        const marginSize = 44;
+        const autoscrollBoundary = screenRect.grownBy(-marginSize);
+        if (autoscrollBoundary.containsPoint(screenPoint)) {
+            return math_1.Vec2.zero;
+        }
+        const closestEdgePoint = autoscrollBoundary.getClosestPointOnBoundaryTo(screenPoint);
+        const distToEdge = closestEdgePoint.minus(screenPoint).magnitude();
+        const toEdge = closestEdgePoint.minus(screenPoint);
+        // Go faster for points further away from the boundary.
+        const maximumScaleFactor = 1.25;
+        const scaleFactor = Math.min(distToEdge / marginSize, maximumScaleFactor);
+        return toEdge.normalizedOrZero().times(scaleFactor);
+    }
+    start() {
+        this.started = true;
+    }
+    onPointerMove(pointerScreenPosition) {
+        if (!this.started) {
+            return;
+        }
+        if (this.getScrollForPoint(pointerScreenPosition) === math_1.Vec2.zero) {
+            this.stopUpdateLoop();
+        }
+        else {
+            this.targetPoint = pointerScreenPosition;
+            this.startUpdateLoop();
+        }
+    }
+    stop() {
+        this.targetPoint = null;
+        this.started = false;
+        this.stopUpdateLoop();
+    }
+    startUpdateLoop() {
+        if (this.updateLoopRunning) {
+            return;
+        }
+        (async () => {
+            this.updateLoopId++;
+            const currentUpdateLoopId = this.updateLoopId;
+            let lastUpdateTime = performance.now();
+            while (this.updateLoopId === currentUpdateLoopId && this.targetPoint) {
+                this.updateLoopRunning = true;
+                const currentTime = performance.now();
+                const deltaTimeMs = currentTime - lastUpdateTime;
+                const scrollDirection = this.getScrollForPoint(this.targetPoint);
+                const screenScrollAmount = scrollDirection.times(this.scrollRate * deltaTimeMs / 1000);
+                this.scrollByCanvasDelta(this.viewport.screenToCanvasTransform.transformVec3(screenScrollAmount));
+                lastUpdateTime = currentTime;
+                await (0, untilNextAnimationFrame_1.default)();
+            }
+            this.updateLoopRunning = false;
+        })();
+    }
+    stopUpdateLoop() {
+        this.updateLoopId++;
+    }
+}
+exports.default = ToPointerAutoscroller;

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

@@ -9,26 +9,33 @@ export declare class DragTransformer {
     constructor(editor: Editor, selection: Selection);
     onDragStart(startPoint: Vec3): void;
     onDragUpdate(canvasPos: Vec3): void;
-    onDragEnd(): void;
+    onDragEnd(): void | Promise<void>;
 }
 export declare class ResizeTransformer {
     private readonly editor;
     private selection;
     private mode;
     private dragStartPoint;
+    private transformOrigin;
+    private scaleRate;
     constructor(editor: Editor, selection: Selection);
     onDragStart(startPoint: Vec3, mode: ResizeMode): void;
+    private computeOriginAndScaleRate;
     onDragUpdate(canvasPos: Vec3): void;
-    onDragEnd(): void;
+    onDragEnd(): void | Promise<void>;
 }
 export declare class RotateTransformer {
     private readonly editor;
     private selection;
     private startAngle;
+    private targetRotation;
+    private maximumDistFromStart;
+    private startPoint;
     constructor(editor: Editor, selection: Selection);
     private getAngle;
     private roundAngle;
     onDragStart(startPoint: Vec3): void;
+    private setRotationTo;
     onDragUpdate(canvasPos: Vec3): void;
-    onDragEnd(): void;
+    onDragEnd(): void | Promise<void>;
 }