feat: auto pan when out of view

cybaj · Feb 19, 2023 · 0f48180 · 0f48180
1 parent a6c3cca
commit 0f48180
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 0 deletions.
diff --git a/tldraw/packages/core/src/lib/TLViewport.ts b/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))

diff --git a/tldraw/packages/core/src/lib/tools/TLSelectTool/states/BrushingState.ts b/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'] = () => {

diff --git a/tldraw/packages/core/src/lib/tools/TLSelectTool/states/ResizingState.ts b/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'] = () => {

diff --git a/tldraw/packages/core/src/lib/tools/TLSelectTool/states/TranslatingState.ts b/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'] = () => {
-Original file line number
+Diff line change
@@ Expand Up / @@ -227,6 +227,7 @@ export class ResizingState< @@
           })
         })
         this.updateCursor(scaleX, scaleY)
+        this.app.viewport.panToPointWhenOutOfBounds(currentPoint)
       }
       onPointerUp: TLEvents<S>['pointer'] = () => {
@@ Expand Down @@