feat: auto pan when out of view

tldraw/packages/core/src/lib/TLViewport.ts

@@ -18,6 +18,7 @@ export class TLViewport {
 
   static readonly minZoom = 0.1
   static readonly maxZoom = 4
+  static readonly panMultiplier = 0.05
 
   /* ------------------- Properties ------------------- */
 
@@ -48,6 +49,17 @@ export class TLViewport {
     })
   }
 
+  panToPointWhenOutOfBounds = (point: number[]) => {
+    const deltaMax = Vec.sub([this.currentView.maxX, this.currentView.maxY], point)
+    const deltaMin = Vec.sub([this.currentView.minX, this.currentView.minY], point)
+
+    const deltaX = deltaMax[0] < 0 ? deltaMax[0] : deltaMin[0] > 0 ? deltaMin[0] : 0
+    const deltaY = deltaMax[1] < 0 ? deltaMax[1] : deltaMin[1] > 0 ? deltaMin[1] : 0
+
+    this.panCamera(Vec.mul([deltaX, deltaY], -TLViewport.panMultiplier))
+}
+
+
   @action update = ({ point, zoom }: Partial<{ point: number[]; zoom: number }>): this => {
     if (point !== undefined && !isNaN(point[0]) && !isNaN(point[1])) this.camera.point = point
     if (zoom !== undefined && !isNaN(zoom)) this.camera.zoom = Math.min(4, Math.max(0.1, zoom))

tldraw/packages/core/src/lib/tools/TLSelectTool/states/BrushingState.ts

@@ -68,6 +68,7 @@ export class BrushingState<
       // Select hit shapes
       this.app.setSelectedShapes(hits)
     }
+    this.app.viewport.panToPointWhenOutOfBounds(currentPoint)
   }
 
   onPointerUp: TLEvents<S>['pointer'] = () => {

tldraw/packages/core/src/lib/tools/TLSelectTool/states/ResizingState.ts

@@ -227,6 +227,7 @@ export class ResizingState<
       })
     })
     this.updateCursor(scaleX, scaleY)
+    this.app.viewport.panToPointWhenOutOfBounds(currentPoint)
   }
 
   onPointerUp: TLEvents<S>['pointer'] = () => {

tldraw/packages/core/src/lib/tools/TLSelectTool/states/TranslatingState.ts

@@ -137,7 +137,12 @@ export class TranslatingState<
   }
 
   onPointerMove: TLEvents<S>['pointer'] = () => {
+    const {
+      inputs: { currentPoint },
+    } = this.app
+
     this.moveSelectedShapesToPointer()
+    this.app.viewport.panToPointWhenOutOfBounds(currentPoint)
   }
 
   onPointerDown: TLEvents<S>['pointer'] = () => {