Zooming improvement (#2149)

This improves how zooming works when we zoom in an inactive window. With
this change you should zoom towards the pointer position, while before
it zoomed towards the last known pointer position before the window
became inactive.

Fixes #2165 

Before


https://github.com/tldraw/tldraw/assets/2523721/50018782-533a-43bb-88a5-21fc4419b723

After


https://github.com/tldraw/tldraw/assets/2523721/c3859f84-ef56-4db8-96b9-50a2de060507



### Change Type

- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. Open the tldraw editor.
2. Click away from the browser window so that it's not longer active.
3. Hover over the browser window and start zooming. 

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Improves zooming for inactive windows.

packages/editor/api-report.md

@@ -2598,6 +2598,7 @@ export type TLWheelEventInfo = TLBaseEventInfo & {
     type: 'wheel';
     name: 'wheel';
     delta: Vec2dModel;
+    point: Vec2dModel;
 };
 
 // @public

packages/editor/api/api.json

@@ -41343,6 +41343,15 @@
               "text": "Vec2dModel",
               "canonicalReference": "@tldraw/tlschema!Vec2dModel:interface"
             },
+            {
+              "kind": "Content",
+              "text": ";\n    point: "
+            },
+            {
+              "kind": "Reference",
+              "text": "Vec2dModel",
+              "canonicalReference": "@tldraw/tlschema!Vec2dModel:interface"
+            },
             {
               "kind": "Content",
               "text": ";\n}"
@@ -41357,7 +41366,7 @@
           "name": "TLWheelEventInfo",
           "typeTokenRange": {
             "startIndex": 1,
-            "endIndex": 5
+            "endIndex": 7
           }
         },
         {

packages/editor/src/lib/editor/Editor.ts

@@ -121,7 +121,12 @@ import { StateNode, TLStateNodeConstructor } from './tools/StateNode'
 import { SvgExportContext, SvgExportDef } from './types/SvgExportContext'
 import { TLContent } from './types/clipboard-types'
 import { TLEventMap } from './types/emit-types'
-import { TLEventInfo, TLPinchEventInfo, TLPointerEventInfo } from './types/event-types'
+import {
+	TLEventInfo,
+	TLPinchEventInfo,
+	TLPointerEventInfo,
+	TLWheelEventInfo,
+} from './types/event-types'
 import { TLExternalAssetContent, TLExternalContent } from './types/external-content'
 import { TLCommandHistoryOptions } from './types/history-types'
 import { OptionalKeys, RequiredKeys } from './types/misc-types'
@@ -8324,11 +8329,13 @@ export class Editor extends EventEmitter<TLEventMap> {
 	}
 
 	/**
-	 * Update the input points from a pointer or pinch event.
+	 * Update the input points from a pointer, pinch, or wheel event.
 	 *
 	 * @param info - The event info.
 	 */
-	private _updateInputsFromEvent(info: TLPointerEventInfo | TLPinchEventInfo): void {
+	private _updateInputsFromEvent(
+		info: TLPointerEventInfo | TLPinchEventInfo | TLWheelEventInfo
+	): void {
 		const { previousScreenPoint, previousPagePoint, currentScreenPoint, currentPagePoint } =
 			this.inputs
 
@@ -8646,6 +8653,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 				case 'wheel': {
 					if (!this.instanceState.canMoveCamera) return
 
+					this._updateInputsFromEvent(info)
+
 					if (this.isMenuOpen) {
 						// noop
 					} else {

packages/editor/src/lib/editor/types/event-types.ts

@@ -89,6 +89,7 @@ export type TLWheelEventInfo = TLBaseEventInfo & {
 	type: 'wheel'
 	name: 'wheel'
 	delta: Vec2dModel
+	point: Vec2dModel
 }
 
 /** @public */

packages/editor/src/lib/hooks/useGestureEvents.ts

@@ -119,6 +119,7 @@ export function useGestureEvents(ref: React.RefObject<HTMLDivElement>) {
 				type: 'wheel',
 				name: 'wheel',
 				delta,
+				point: new Vec2d(event.x, event.y),
 				shiftKey: event.shiftKey,
 				altKey: event.altKey,
 				ctrlKey: event.metaKey || event.ctrlKey,

packages/tldraw/src/lib/ui/components/NavigationZone/Minimap.tsx

@@ -151,6 +151,7 @@ export function Minimap({ shapeFill, selectFill, viewportFill }: MinimapProps) {
 				type: 'wheel',
 				name: 'wheel',
 				delta: offset,
+				point: new Vec2d(e.clientX, e.clientY),
 				shiftKey: e.shiftKey,
 				altKey: e.altKey,
 				ctrlKey: e.metaKey || e.ctrlKey,

packages/tldraw/src/test/TestEditor.ts

@@ -387,6 +387,7 @@ export class TestEditor extends Editor {
 		this.dispatch({
 			type: 'wheel',
 			name: 'wheel',
+			point: new Vec2d(this.inputs.currentScreenPoint.x, this.inputs.currentScreenPoint.y),
 			shiftKey: this.inputs.shiftKey,
 			ctrlKey: this.inputs.ctrlKey,
 			altKey: this.inputs.altKey,