From 4af92421b3ad1258bdfa6581defd55afcc7f7979 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= Date: Tue, 7 Nov 2023 14:51:28 +0100 Subject: [PATCH] Zooming improvement (#2149) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 | 1 + packages/editor/api/api.json | 11 ++++++++++- packages/editor/src/lib/editor/Editor.ts | 15 ++++++++++++--- .../editor/src/lib/editor/types/event-types.ts | 1 + packages/editor/src/lib/hooks/useGestureEvents.ts | 1 + .../lib/ui/components/NavigationZone/Minimap.tsx | 1 + packages/tldraw/src/test/TestEditor.ts | 1 + 7 files changed, 27 insertions(+), 4 deletions(-) diff --git a/packages/editor/api-report.md b/packages/editor/api-report.md index 6c50d83f7..7c5a0bec7 100644 --- a/packages/editor/api-report.md +++ b/packages/editor/api-report.md @@ -2598,6 +2598,7 @@ export type TLWheelEventInfo = TLBaseEventInfo & { type: 'wheel'; name: 'wheel'; delta: Vec2dModel; + point: Vec2dModel; }; // @public diff --git a/packages/editor/api/api.json b/packages/editor/api/api.json index e0355cb48..3dba41e86 100644 --- a/packages/editor/api/api.json +++ b/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 } }, { diff --git a/packages/editor/src/lib/editor/Editor.ts b/packages/editor/src/lib/editor/Editor.ts index 61a96d8de..fd2eed037 100644 --- a/packages/editor/src/lib/editor/Editor.ts +++ b/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 { } /** - * 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 { case 'wheel': { if (!this.instanceState.canMoveCamera) return + this._updateInputsFromEvent(info) + if (this.isMenuOpen) { // noop } else { diff --git a/packages/editor/src/lib/editor/types/event-types.ts b/packages/editor/src/lib/editor/types/event-types.ts index 7132b0e21..1b3476665 100644 --- a/packages/editor/src/lib/editor/types/event-types.ts +++ b/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 */ diff --git a/packages/editor/src/lib/hooks/useGestureEvents.ts b/packages/editor/src/lib/hooks/useGestureEvents.ts index 7f1c405aa..3404a6127 100644 --- a/packages/editor/src/lib/hooks/useGestureEvents.ts +++ b/packages/editor/src/lib/hooks/useGestureEvents.ts @@ -119,6 +119,7 @@ export function useGestureEvents(ref: React.RefObject) { type: 'wheel', name: 'wheel', delta, + point: new Vec2d(event.x, event.y), shiftKey: event.shiftKey, altKey: event.altKey, ctrlKey: event.metaKey || event.ctrlKey, diff --git a/packages/tldraw/src/lib/ui/components/NavigationZone/Minimap.tsx b/packages/tldraw/src/lib/ui/components/NavigationZone/Minimap.tsx index 72874331f..52527e0a4 100644 --- a/packages/tldraw/src/lib/ui/components/NavigationZone/Minimap.tsx +++ b/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, diff --git a/packages/tldraw/src/test/TestEditor.ts b/packages/tldraw/src/test/TestEditor.ts index e71c5db48..d2415540a 100644 --- a/packages/tldraw/src/test/TestEditor.ts +++ b/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,