From 6f872c796afd6cf538ce81d35c5a40dcccbe7013 Mon Sep 17 00:00:00 2001 From: David Sheldrick Date: Tue, 14 Nov 2023 11:57:43 +0000 Subject: [PATCH] No impure getters pt6 (#2218) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit follow up to #2189 ### Change Type - [x] `patch` — Bug fix --- packages/editor/api-report.md | 10 ++ packages/editor/api/api.json | 169 +++++++++++++++++- packages/editor/src/lib/components/Canvas.tsx | 6 +- .../lib/components/GeometryDebuggingView.tsx | 2 +- .../src/lib/components/LiveCollaborators.tsx | 3 +- packages/editor/src/lib/editor/Editor.ts | 114 ++++++++---- .../src/lib/editor/managers/SnapManager.ts | 2 +- .../editor/shapes/group/DashedOutlineBox.tsx | 2 +- .../editor/src/lib/hooks/useDocumentEvents.ts | 2 +- .../editor/src/lib/hooks/useGestureEvents.ts | 8 +- packages/editor/src/lib/hooks/useZoomCss.ts | 4 +- .../lib/canvas/TldrawSelectionForeground.tsx | 4 +- .../src/lib/defaultExternalContentHandlers.ts | 25 +-- .../src/lib/shapes/arrow/ArrowShapeUtil.tsx | 2 +- .../lib/shapes/bookmark/BookmarkShapeUtil.tsx | 2 +- .../src/lib/shapes/draw/toolStates/Drawing.ts | 4 +- .../src/lib/shapes/geo/GeoShapeUtil.tsx | 2 +- .../src/lib/shapes/image/ImageShapeUtil.tsx | 2 +- .../src/lib/shapes/note/NoteShapeUtil.tsx | 2 +- .../src/lib/shapes/shared/ShapeFill.tsx | 4 +- .../src/lib/shapes/shared/useForceSolid.ts | 2 +- .../src/lib/shapes/video/VideoShapeUtil.tsx | 4 +- .../lib/tools/EraserTool/children/Erasing.ts | 2 +- .../lib/tools/EraserTool/children/Pointing.ts | 2 +- .../tldraw/src/lib/tools/HandTool/HandTool.ts | 2 +- .../lib/tools/SelectTool/children/Brushing.ts | 2 +- .../src/lib/tools/SelectTool/children/Idle.ts | 4 +- .../SelectTool/children/PointingShape.ts | 2 +- .../SelectTool/children/ScribbleBrushing.ts | 2 +- .../tools/ZoomTool/children/ZoomBrushing.ts | 4 +- .../getHitShapeOnCanvasPointerDown.ts | 2 +- .../selectOnCanvasPointerUp.ts | 2 +- .../tools/selection-logic/updateHoveredId.ts | 2 +- .../src/lib/ui/components/EmbedDialog.tsx | 2 +- .../src/lib/ui/components/HTMLCanvas.tsx | 4 +- .../ui/components/NavigationZone/Minimap.tsx | 6 +- .../NavigationZone/MinimapManager.ts | 7 +- .../ui/components/NavigationZone/ZoomMenu.tsx | 6 +- .../hooks/clipboard/pasteExcalidrawContent.ts | 2 +- .../tldraw/src/lib/ui/hooks/useActions.tsx | 10 +- .../src/lib/ui/hooks/useActionsMenuSchema.tsx | 2 +- .../tldraw/src/lib/ui/hooks/useBreakpoint.tsx | 2 +- .../tldraw/src/lib/ui/hooks/useInsertMedia.ts | 2 +- .../tldraw/src/lib/ui/hooks/useMenuSchema.tsx | 2 +- packages/tldraw/src/test/HandTool.test.ts | 26 +-- packages/tldraw/src/test/ZoomTool.test.ts | 60 +++---- .../src/test/commands/animationSpeed.test.ts | 18 +- .../src/test/commands/centerOnPoint.test.ts | 8 +- .../src/test/commands/clipboard.test.ts | 16 +- .../src/test/commands/duplicatePage.test.ts | 2 +- .../test/commands/moveShapesToPage.test.ts | 2 +- packages/tldraw/src/test/commands/pan.test.ts | 8 +- .../src/test/commands/resetZoom.test.ts | 14 +- .../src/test/commands/screenToPage.test.ts | 62 ++++--- .../commands/updateViewportPageBounds.test.ts | 20 +-- .../tldraw/src/test/commands/zoomIn.test.ts | 18 +- .../tldraw/src/test/commands/zoomOut.test.ts | 12 +- .../src/test/commands/zoomToBounds.test.ts | 18 +- .../src/test/commands/zoomToSelection.test.ts | 4 +- packages/tldraw/src/test/paste.test.ts | 14 +- packages/tldraw/src/test/translating.test.ts | 4 +- 61 files changed, 493 insertions(+), 259 deletions(-) diff --git a/packages/editor/api-report.md b/packages/editor/api-report.md index bb0e674b1..c17c1cf10 100644 --- a/packages/editor/api-report.md +++ b/packages/editor/api-report.md @@ -763,6 +763,11 @@ export class Editor extends EventEmitter { darkMode?: boolean | undefined; preserveAspectRatio: React.SVGAttributes['preserveAspectRatio']; }>): Promise; + getViewportPageBounds(): Box2d; + getViewportPageCenter(): Vec2d; + getViewportScreenBounds(): Box2d; + getViewportScreenCenter(): Vec2d; + getZoomLevel(): number; groupShapes(shapes: TLShape[] | TLShapeId[], groupId?: TLShapeId): this; hasAncestor(shape: TLShape | TLShapeId | undefined, ancestorId: TLShapeId): boolean; // @deprecated (undocumented) @@ -941,12 +946,17 @@ export class Editor extends EventEmitter { updateShapes(partials: (null | TLShapePartial | undefined)[], historyOptions?: TLCommandHistoryOptions): this; updateViewportScreenBounds(center?: boolean): this; readonly user: UserPreferencesManager; + // @deprecated (undocumented) get viewportPageBounds(): Box2d; + // @deprecated (undocumented) get viewportPageCenter(): Vec2d; + // @deprecated (undocumented) get viewportScreenBounds(): Box2d; + // @deprecated (undocumented) get viewportScreenCenter(): Vec2d; visitDescendants(parent: TLPage | TLParentId | TLShape, visitor: (id: TLShapeId) => false | void): this; zoomIn(point?: Vec2d, animation?: TLAnimationOptions): this; + // @deprecated (undocumented) get zoomLevel(): number; zoomOut(point?: Vec2d, animation?: TLAnimationOptions): this; zoomToBounds(bounds: Box2d, targetZoom?: number, animation?: TLAnimationOptions): this; diff --git a/packages/editor/api/api.json b/packages/editor/api/api.json index 5bb844404..ddaa9075a 100644 --- a/packages/editor/api/api.json +++ b/packages/editor/api/api.json @@ -13275,6 +13275,165 @@ "isAbstract": false, "name": "getSvg" }, + { + "kind": "Method", + "canonicalReference": "@tldraw/editor!Editor#getViewportPageBounds:member(1)", + "docComment": "/**\n * The current viewport in the current page space.\n *\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "getViewportPageBounds(): " + }, + { + "kind": "Reference", + "text": "Box2d", + "canonicalReference": "@tldraw/editor!Box2d:class" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isStatic": false, + "returnTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "releaseTag": "Public", + "isProtected": false, + "overloadIndex": 1, + "parameters": [], + "isOptional": false, + "isAbstract": false, + "name": "getViewportPageBounds" + }, + { + "kind": "Method", + "canonicalReference": "@tldraw/editor!Editor#getViewportPageCenter:member(1)", + "docComment": "/**\n * The center of the viewport in the current page space.\n *\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "getViewportPageCenter(): " + }, + { + "kind": "Reference", + "text": "Vec2d", + "canonicalReference": "@tldraw/editor!Vec2d:class" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isStatic": false, + "returnTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "releaseTag": "Public", + "isProtected": false, + "overloadIndex": 1, + "parameters": [], + "isOptional": false, + "isAbstract": false, + "name": "getViewportPageCenter" + }, + { + "kind": "Method", + "canonicalReference": "@tldraw/editor!Editor#getViewportScreenBounds:member(1)", + "docComment": "/**\n * The bounds of the editor's viewport in screen space.\n *\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "getViewportScreenBounds(): " + }, + { + "kind": "Reference", + "text": "Box2d", + "canonicalReference": "@tldraw/editor!Box2d:class" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isStatic": false, + "returnTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "releaseTag": "Public", + "isProtected": false, + "overloadIndex": 1, + "parameters": [], + "isOptional": false, + "isAbstract": false, + "name": "getViewportScreenBounds" + }, + { + "kind": "Method", + "canonicalReference": "@tldraw/editor!Editor#getViewportScreenCenter:member(1)", + "docComment": "/**\n * The center of the editor's viewport in screen space.\n *\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "getViewportScreenCenter(): " + }, + { + "kind": "Reference", + "text": "Vec2d", + "canonicalReference": "@tldraw/editor!Vec2d:class" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isStatic": false, + "returnTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "releaseTag": "Public", + "isProtected": false, + "overloadIndex": 1, + "parameters": [], + "isOptional": false, + "isAbstract": false, + "name": "getViewportScreenCenter" + }, + { + "kind": "Method", + "canonicalReference": "@tldraw/editor!Editor#getZoomLevel:member(1)", + "docComment": "/**\n * The current camera zoom level.\n *\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "getZoomLevel(): " + }, + { + "kind": "Content", + "text": "number" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isStatic": false, + "returnTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "releaseTag": "Public", + "isProtected": false, + "overloadIndex": 1, + "parameters": [], + "isOptional": false, + "isAbstract": false, + "name": "getZoomLevel" + }, { "kind": "Method", "canonicalReference": "@tldraw/editor!Editor#groupShapes:member(1)", @@ -19125,7 +19284,7 @@ { "kind": "Property", "canonicalReference": "@tldraw/editor!Editor#viewportPageBounds:member", - "docComment": "/**\n * The current viewport in the current page space.\n *\n * @public\n */\n", + "docComment": "/**\n * @deprecated\n *\n * Use `getViewportPageBounds` instead.\n */\n", "excerptTokens": [ { "kind": "Content", @@ -19156,7 +19315,7 @@ { "kind": "Property", "canonicalReference": "@tldraw/editor!Editor#viewportPageCenter:member", - "docComment": "/**\n * The center of the viewport in the current page space.\n *\n * @public\n */\n", + "docComment": "/**\n * @deprecated\n *\n * Use `getViewportPageCenter` instead.\n */\n", "excerptTokens": [ { "kind": "Content", @@ -19187,7 +19346,7 @@ { "kind": "Property", "canonicalReference": "@tldraw/editor!Editor#viewportScreenBounds:member", - "docComment": "/**\n * The bounds of the editor's viewport in screen space.\n *\n * @public\n */\n", + "docComment": "/**\n * @deprecated\n *\n * Use `getViewportScreenBounds` instead.\n */\n", "excerptTokens": [ { "kind": "Content", @@ -19218,7 +19377,7 @@ { "kind": "Property", "canonicalReference": "@tldraw/editor!Editor#viewportScreenCenter:member", - "docComment": "/**\n * The center of the editor's viewport in screen space.\n *\n * @public\n */\n", + "docComment": "/**\n * @deprecated\n *\n * Use `getViewportScreenCenter` instead.\n */\n", "excerptTokens": [ { "kind": "Content", @@ -19407,7 +19566,7 @@ { "kind": "Property", "canonicalReference": "@tldraw/editor!Editor#zoomLevel:member", - "docComment": "/**\n * The current camera zoom level.\n *\n * @public\n */\n", + "docComment": "/**\n * @deprecated\n *\n * Use `getZoomLevel` instead.\n */\n", "excerptTokens": [ { "kind": "Content", diff --git a/packages/editor/src/lib/components/Canvas.tsx b/packages/editor/src/lib/components/Canvas.tsx index e34ace8ae..555afe56b 100644 --- a/packages/editor/src/lib/components/Canvas.tsx +++ b/packages/editor/src/lib/components/Canvas.tsx @@ -148,7 +148,7 @@ function GridWrapper() { function ScribbleWrapper() { const editor = useEditor() const scribbles = useValue('scribbles', () => editor.getInstanceState().scribbles, [editor]) - const zoomLevel = useValue('zoomLevel', () => editor.zoomLevel, [editor]) + const zoomLevel = useValue('zoomLevel', () => editor.getZoomLevel(), [editor]) const { Scribble } = useEditorComponents() if (!(Scribble && scribbles.length)) return null @@ -190,7 +190,7 @@ function ZoomBrushWrapper() { function SnapLinesWrapper() { const editor = useEditor() const lines = useValue('snapLines', () => editor.snaps.lines, [editor]) - const zoomLevel = useValue('zoomLevel', () => editor.zoomLevel, [editor]) + const zoomLevel = useValue('zoomLevel', () => editor.getZoomLevel(), [editor]) const { SnapLine } = useEditorComponents() if (!(SnapLine && lines.length > 0)) return null @@ -210,7 +210,7 @@ function HandlesWrapper() { const editor = useEditor() const { Handles } = useEditorComponents() - const zoomLevel = useValue('zoomLevel', () => editor.zoomLevel, [editor]) + const zoomLevel = useValue('zoomLevel', () => editor.getZoomLevel(), [editor]) const isCoarse = useValue('coarse pointer', () => editor.getInstanceState().isCoarsePointer, [ editor, ]) diff --git a/packages/editor/src/lib/components/GeometryDebuggingView.tsx b/packages/editor/src/lib/components/GeometryDebuggingView.tsx index a827efa3d..531c3f554 100644 --- a/packages/editor/src/lib/components/GeometryDebuggingView.tsx +++ b/packages/editor/src/lib/components/GeometryDebuggingView.tsx @@ -29,8 +29,8 @@ export const GeometryDebuggingView = track(function GeometryDebuggingView({ useTick(showClosestPointOnOutline) + const zoomLevel = editor.getZoomLevel() const { - zoomLevel, renderingShapes, inputs: { currentPagePoint }, } = editor diff --git a/packages/editor/src/lib/components/LiveCollaborators.tsx b/packages/editor/src/lib/components/LiveCollaborators.tsx index f2066a4cd..af2edde38 100644 --- a/packages/editor/src/lib/components/LiveCollaborators.tsx +++ b/packages/editor/src/lib/components/LiveCollaborators.tsx @@ -80,7 +80,8 @@ const Collaborator = track(function Collaborator({ CollaboratorShapeIndicator, } = useEditorComponents() - const { viewportPageBounds, zoomLevel } = editor + const zoomLevel = editor.getZoomLevel() + const viewportPageBounds = editor.getViewportPageBounds() const { userId, chatMessage, brush, scribbles, selectedShapeIds, userName, cursor, color } = latestPresence diff --git a/packages/editor/src/lib/editor/Editor.ts b/packages/editor/src/lib/editor/Editor.ts index 6ca560bee..3f381dc29 100644 --- a/packages/editor/src/lib/editor/Editor.ts +++ b/packages/editor/src/lib/editor/Editor.ts @@ -2208,10 +2208,17 @@ export class Editor extends EventEmitter { * * @public */ - @computed get zoomLevel() { + @computed getZoomLevel() { return this.getCamera().z } + /** + * @deprecated Use `getZoomLevel` instead. + */ + get zoomLevel() { + return this.getZoomLevel() + } + /** @internal */ private _setCamera(point: VecLike): this { const currentCamera = this.getCamera() @@ -2264,7 +2271,7 @@ export class Editor extends EventEmitter { setCamera(point: VecLike, animation?: TLAnimationOptions): this { const x = Number.isFinite(point.x) ? point.x : 0 const y = Number.isFinite(point.y) ? point.y : 0 - const z = Number.isFinite(point.z) ? point.z! : this.zoomLevel + const z = Number.isFinite(point.z) ? point.z! : this.getZoomLevel() // Stop any camera animations this.stopCameraAnimation() @@ -2275,7 +2282,7 @@ export class Editor extends EventEmitter { } if (animation) { - const { width, height } = this.viewportScreenBounds + const { width, height } = this.getViewportScreenBounds() return this._animateToViewport(new Box2d(-x, -y, width / z, height / z), animation) } else { this._setCamera({ x, y, z }) @@ -2301,9 +2308,7 @@ export class Editor extends EventEmitter { centerOnPoint(point: VecLike, animation?: TLAnimationOptions): this { if (!this.getInstanceState().canMoveCamera) return this - const { - viewportPageBounds: { width: pw, height: ph }, - } = this + const { width: pw, height: ph } = this.getViewportPageBounds() this.setCamera( { x: -(point.x - pw / 2), y: -(point.y - ph / 2), z: this.getCamera().z }, @@ -2329,7 +2334,7 @@ export class Editor extends EventEmitter { const bounds = this.getSelectionPageBounds() ?? this.currentPageBounds if (bounds) { - this.zoomToBounds(bounds, Math.min(1, this.zoomLevel), { duration: 220 }) + this.zoomToBounds(bounds, Math.min(1, this.getZoomLevel()), { duration: 220 }) } return this @@ -2374,7 +2379,7 @@ export class Editor extends EventEmitter { * * @public */ - resetZoom(point = this.viewportScreenCenter, animation?: TLAnimationOptions): this { + resetZoom(point = this.getViewportScreenCenter(), animation?: TLAnimationOptions): this { if (!this.getInstanceState().canMoveCamera) return this const { x: cx, y: cy, z: cz } = this.getCamera() @@ -2401,7 +2406,7 @@ export class Editor extends EventEmitter { * * @public */ - zoomIn(point = this.viewportScreenCenter, animation?: TLAnimationOptions): this { + zoomIn(point = this.getViewportScreenCenter(), animation?: TLAnimationOptions): this { if (!this.getInstanceState().canMoveCamera) return this const { x: cx, y: cy, z: cz } = this.getCamera() @@ -2439,7 +2444,7 @@ export class Editor extends EventEmitter { * * @public */ - zoomOut(point = this.viewportScreenCenter, animation?: TLAnimationOptions): this { + zoomOut(point = this.getViewportScreenCenter(), animation?: TLAnimationOptions): this { if (!this.getInstanceState().canMoveCamera) return this const { x: cx, y: cy, z: cz } = this.getCamera() @@ -2486,7 +2491,7 @@ export class Editor extends EventEmitter { const selectionPageBounds = this.getSelectionPageBounds() if (!selectionPageBounds) return this - this.zoomToBounds(selectionPageBounds, Math.max(1, this.zoomLevel), animation) + this.zoomToBounds(selectionPageBounds, Math.max(1, this.getZoomLevel()), animation) return this } @@ -2505,14 +2510,16 @@ export class Editor extends EventEmitter { if (ids.length <= 0) return this const selectionBounds = Box2d.Common(compact(ids.map((id) => this.getShapePageBounds(id)))) - const { viewportPageBounds } = this + const viewportPageBounds = this.getViewportPageBounds() if (viewportPageBounds.h < selectionBounds.h || viewportPageBounds.w < selectionBounds.w) { this.zoomToBounds(selectionBounds, this.getCamera().z, animation) return this } else { - const insetViewport = this.viewportPageBounds.clone().expandBy(-32 / this.zoomLevel) + const insetViewport = this.getViewportPageBounds() + .clone() + .expandBy(-32 / this.getZoomLevel()) let offsetX = 0 let offsetY = 0 @@ -2562,7 +2569,7 @@ export class Editor extends EventEmitter { zoomToBounds(bounds: Box2d, targetZoom?: number, animation?: TLAnimationOptions): this { if (!this.getInstanceState().canMoveCamera) return this - const { viewportScreenBounds } = this + const viewportScreenBounds = this.getViewportScreenBounds() const inset = Math.min(256, viewportScreenBounds.width * 0.28) @@ -2646,7 +2653,7 @@ export class Editor extends EventEmitter { const { elapsed, easing, duration, start, end } = this._viewportAnimation if (elapsed > duration) { - this._setCamera({ x: -end.x, y: -end.y, z: this.viewportScreenBounds.width / end.width }) + this._setCamera({ x: -end.x, y: -end.y, z: this.getViewportScreenBounds().width / end.width }) cancel() return } @@ -2658,7 +2665,7 @@ export class Editor extends EventEmitter { const top = start.minY + (end.minY - start.minY) * t const right = start.maxX + (end.maxX - start.maxX) * t - this._setCamera({ x: -left, y: -top, z: this.viewportScreenBounds.width / (right - left) }) + this._setCamera({ x: -left, y: -top, z: this.getViewportScreenBounds().width / (right - left) }) } /** @internal */ @@ -2666,8 +2673,8 @@ export class Editor extends EventEmitter { const { duration = 0, easing = EASINGS.easeInOutCubic } = opts const { user: { animationSpeed }, - viewportPageBounds, } = this + const viewportPageBounds = this.getViewportPageBounds() // If we have an existing animation, then stop it; also stop following any user this.stopCameraAnimation() @@ -2680,7 +2687,7 @@ export class Editor extends EventEmitter { return this._setCamera({ x: -targetViewportPage.x, y: -targetViewportPage.y, - z: this.viewportScreenBounds.width / targetViewportPage.width, + z: this.getViewportScreenBounds().width / targetViewportPage.width, }) } @@ -2811,7 +2818,7 @@ export class Editor extends EventEmitter { animateToShape(shapeId: TLShapeId, opts: TLAnimationOptions = DEFAULT_ANIMATION_OPTIONS): this { if (!this.getInstanceState().canMoveCamera) return this - const activeArea = this.viewportScreenBounds.clone().expandBy(-32) + const activeArea = this.getViewportScreenBounds().clone().expandBy(-32) const viewportAspectRatio = activeArea.width / activeArea.height const shapePageBounds = this.getShapePageBounds(shapeId) @@ -2869,7 +2876,7 @@ export class Editor extends EventEmitter { Math.max(rect.width, 1), Math.max(rect.height, 1) ) - const boundsAreEqual = screenBounds.equals(this.viewportScreenBounds) + const boundsAreEqual = screenBounds.equals(this.getViewportScreenBounds()) const { _willSetInitialBounds } = this @@ -2886,7 +2893,7 @@ export class Editor extends EventEmitter { } else { if (center && !this.getInstanceState().followingUserId) { // Get the page center before the change, make the change, and restore it - const before = this.viewportPageCenter + const before = this.getViewportPageCenter() this.updateInstanceState( { screenBounds: screenBounds.toJson() }, { squashing: true, ephemeral: true } @@ -2913,18 +2920,32 @@ export class Editor extends EventEmitter { * * @public */ - @computed get viewportScreenBounds() { + @computed getViewportScreenBounds() { const { x, y, w, h } = this.getInstanceState().screenBounds return new Box2d(x, y, w, h) } + /** + * @deprecated Use `getViewportScreenBounds` instead. + */ + get viewportScreenBounds() { + return this.getViewportScreenBounds() + } + /** * The center of the editor's viewport in screen space. * * @public */ - @computed get viewportScreenCenter() { - return this.viewportScreenBounds.center + @computed getViewportScreenCenter() { + return this.getViewportScreenBounds().center + } + + /** + * @deprecated Use `getViewportScreenCenter` instead. + */ + get viewportScreenCenter() { + return this.getViewportScreenCenter() } /** @@ -2932,19 +2953,33 @@ export class Editor extends EventEmitter { * * @public */ - @computed get viewportPageBounds() { - const { w, h } = this.viewportScreenBounds + @computed getViewportPageBounds() { + const { w, h } = this.getViewportScreenBounds() const { x: cx, y: cy, z: cz } = this.getCamera() return new Box2d(-cx, -cy, w / cz, h / cz) } + /** + * @deprecated Use `getViewportPageBounds` instead. + */ + get viewportPageBounds() { + return this.getViewportPageBounds() + } + /** * The center of the viewport in the current page space. * * @public */ - @computed get viewportPageCenter() { - return this.viewportPageBounds.center + @computed getViewportPageCenter() { + return this.getViewportPageBounds().center + } + + /** + * @deprecated Use `getViewportPageCenter` instead. + */ + get viewportPageCenter() { + return this.getViewportPageCenter() } /** @@ -3053,7 +3088,7 @@ export class Editor extends EventEmitter { } // Get the bounds of the follower (me) and the leader (them) - const { center, width, height } = this.viewportPageBounds + const { center, width, height } = this.getViewportPageBounds() const leaderScreen = Box2d.From(leaderPresence.screenBounds) const leaderWidth = leaderScreen.width / leaderPresence.camera.z const leaderHeight = leaderScreen.height / leaderPresence.camera.z @@ -3075,8 +3110,8 @@ export class Editor extends EventEmitter { : height / desiredHeight const targetZoom = clamp(this.getCamera().z * ratio, MIN_ZOOM, MAX_ZOOM) - const targetWidth = this.viewportScreenBounds.w / targetZoom - const targetHeight = this.viewportScreenBounds.h / targetZoom + const targetWidth = this.getViewportScreenBounds().w / targetZoom + const targetHeight = this.getViewportScreenBounds().h / targetZoom // Figure out where to move the camera const displacement = leaderCenter.sub(center) @@ -3349,13 +3384,13 @@ export class Editor extends EventEmitter { * @internal */ updateRenderingBounds(): this { - const { viewportPageBounds } = this + const viewportPageBounds = this.getViewportPageBounds() if (viewportPageBounds.equals(this._renderingBounds.__unsafe__getWithoutCapture())) return this this._renderingBounds.set(viewportPageBounds.clone()) if (Number.isFinite(this.renderingBoundsMargin)) { this._renderingBoundsExpanded.set( - viewportPageBounds.clone().expandBy(this.renderingBoundsMargin / this.zoomLevel) + viewportPageBounds.clone().expandBy(this.renderingBoundsMargin / this.getZoomLevel()) ) } else { this._renderingBoundsExpanded.set(viewportPageBounds) @@ -4425,7 +4460,8 @@ export class Editor extends EventEmitter { filter?: (shape: TLShape) => boolean } ): TLShape | undefined { - const { viewportPageBounds, zoomLevel } = this + const zoomLevel = this.getZoomLevel() + const viewportPageBounds = this.getViewportPageBounds() const { filter, margin = 0, @@ -5479,7 +5515,7 @@ export class Editor extends EventEmitter { // contained in the current viewport. If not, then animate the camera to be centered on the // new shapes. const selectionPageBounds = this.getSelectionPageBounds() - const { viewportPageBounds } = this + const viewportPageBounds = this.getViewportPageBounds() if (selectionPageBounds && !viewportPageBounds.contains(selectionPageBounds)) { this.centerOnPoint(selectionPageBounds.center, { duration: ANIMATION_MEDIUM_MS, @@ -7988,7 +8024,7 @@ export class Editor extends EventEmitter { if (!isPageId(pasteParentId)) { const parent = this.getShape(pasteParentId) if (parent) { - if (!this.viewportPageBounds.includes(this.getShapePageBounds(parent)!)) { + if (!this.getViewportPageBounds().includes(this.getShapePageBounds(parent)!)) { pasteParentId = currentPageId } else { if (rootShapeIds.length === 1) { @@ -8189,7 +8225,7 @@ export class Editor extends EventEmitter { this.getShapeGeometry(shape).bounds.center ) } else { - const { viewportPageBounds } = this + const viewportPageBounds = this.getViewportPageBounds() if (preservePosition || viewportPageBounds.includes(Box2d.From(bounds))) { // Otherwise, put shapes where they used to be point = bounds.center @@ -8872,7 +8908,7 @@ export class Editor extends EventEmitter { inputs.isPointing && originPagePoint.dist(currentPagePoint) > (this.getInstanceState().isCoarsePointer ? COARSE_DRAG_DISTANCE : DRAG_DISTANCE) / - this.zoomLevel + this.getZoomLevel() ) { inputs.isDragging = true } @@ -8960,7 +8996,7 @@ export class Editor extends EventEmitter { inputs.isPointing && originPagePoint.dist(currentPagePoint) > (this.getInstanceState().isCoarsePointer ? COARSE_DRAG_DISTANCE : DRAG_DISTANCE) / - this.zoomLevel + this.getZoomLevel() ) { inputs.isDragging = true } diff --git a/packages/editor/src/lib/editor/managers/SnapManager.ts b/packages/editor/src/lib/editor/managers/SnapManager.ts index 0c7b34a90..db32e3bb5 100644 --- a/packages/editor/src/lib/editor/managers/SnapManager.ts +++ b/packages/editor/src/lib/editor/managers/SnapManager.ts @@ -242,7 +242,7 @@ export class SnapManager { } @computed get snapThreshold() { - return 8 / this.editor.zoomLevel + return 8 / this.editor.getZoomLevel() } // TODO: make this an incremental derivation diff --git a/packages/editor/src/lib/editor/shapes/group/DashedOutlineBox.tsx b/packages/editor/src/lib/editor/shapes/group/DashedOutlineBox.tsx index 433b5302b..725ad0b6f 100644 --- a/packages/editor/src/lib/editor/shapes/group/DashedOutlineBox.tsx +++ b/packages/editor/src/lib/editor/shapes/group/DashedOutlineBox.tsx @@ -6,7 +6,7 @@ import { getPerfectDashProps } from '../shared/getPerfectDashProps' export function DashedOutlineBox({ bounds, className }: { bounds: Box2d; className: string }) { const editor = useEditor() - const zoomLevel = useValue('zoom level', () => editor.zoomLevel, [editor]) + const zoomLevel = useValue('zoom level', () => editor.getZoomLevel(), [editor]) return ( diff --git a/packages/editor/src/lib/hooks/useDocumentEvents.ts b/packages/editor/src/lib/hooks/useDocumentEvents.ts index c383059c0..fe58b7925 100644 --- a/packages/editor/src/lib/hooks/useDocumentEvents.ts +++ b/packages/editor/src/lib/hooks/useDocumentEvents.ts @@ -225,7 +225,7 @@ export function useDocumentEvents() { // touchstart event in that case. if ( touchXPosition - touchXRadius < 10 || - touchXPosition + touchXRadius > editor.viewportScreenBounds.width - 10 + touchXPosition + touchXRadius > editor.getViewportScreenBounds().width - 10 ) { if ((e.target as HTMLElement)?.tagName === 'BUTTON') { // Force a click before bailing diff --git a/packages/editor/src/lib/hooks/useGestureEvents.ts b/packages/editor/src/lib/hooks/useGestureEvents.ts index 896263eb3..0671ebd29 100644 --- a/packages/editor/src/lib/hooks/useGestureEvents.ts +++ b/packages/editor/src/lib/hooks/useGestureEvents.ts @@ -155,12 +155,12 @@ export function useGestureEvents(ref: React.RefObject) { initPointBetweenFingers.x = origin[0] initPointBetweenFingers.y = origin[1] initDistanceBetweenFingers = da[0] - initZoom = editor.zoomLevel + initZoom = editor.getZoomLevel() editor.dispatch({ type: 'pinch', name: 'pinch_start', - point: { x: origin[0], y: origin[1], z: editor.zoomLevel }, + point: { x: origin[0], y: origin[1], z: editor.getZoomLevel() }, delta: { x: 0, y: 0 }, shiftKey: event.shiftKey, altKey: event.altKey, @@ -302,9 +302,9 @@ export function useGestureEvents(ref: React.RefObject) { target: ref, eventOptions: { passive: false }, pinch: { - from: () => [editor.zoomLevel, 0], // Return the camera z to use when pinch starts + from: () => [editor.getZoomLevel(), 0], // Return the camera z to use when pinch starts scaleBounds: () => { - return { from: editor.zoomLevel, max: 8, min: 0.05 } + return { from: editor.getZoomLevel(), max: 8, min: 0.05 } }, }, }) diff --git a/packages/editor/src/lib/hooks/useZoomCss.ts b/packages/editor/src/lib/hooks/useZoomCss.ts index 88664d300..44e7602b9 100644 --- a/packages/editor/src/lib/hooks/useZoomCss.ts +++ b/packages/editor/src/lib/hooks/useZoomCss.ts @@ -15,9 +15,9 @@ export function useZoomCss() { const scheduler = new EffectScheduler('useZoomCss', () => { const numShapes = editor.currentPageShapeIds.size if (numShapes < 300) { - setScale(editor.zoomLevel) + setScale(editor.getZoomLevel()) } else { - setScaleDebounced(editor.zoomLevel) + setScaleDebounced(editor.getZoomLevel()) } }) diff --git a/packages/tldraw/src/lib/canvas/TldrawSelectionForeground.tsx b/packages/tldraw/src/lib/canvas/TldrawSelectionForeground.tsx index 5d24ffdf9..4843bd979 100644 --- a/packages/tldraw/src/lib/canvas/TldrawSelectionForeground.tsx +++ b/packages/tldraw/src/lib/canvas/TldrawSelectionForeground.tsx @@ -54,7 +54,7 @@ export const TldrawSelectionForeground: TLSelectionForegroundComponent = track( if (!bounds) return null bounds = bounds.clone().expandBy(expandOutlineBy).zeroFix() - const zoom = editor.zoomLevel + const zoom = editor.getZoomLevel() const isChangingStyle = editor.getInstanceState().isChangingStyle const width = bounds.width @@ -501,7 +501,7 @@ export const MobileRotateHandle = function RotateHandle({ const events = useSelectionEvents('mobile_rotate') const editor = useEditor() - const zoom = useValue('zoom level', () => editor.zoomLevel, [editor]) + const zoom = useValue('zoom level', () => editor.getZoomLevel(), [editor]) const bgRadius = Math.max(14 * (1 / zoom), 20 / Math.max(1, zoom)) return ( diff --git a/packages/tldraw/src/lib/defaultExternalContentHandlers.ts b/packages/tldraw/src/lib/defaultExternalContentHandlers.ts index 95313e39e..1e55afe42 100644 --- a/packages/tldraw/src/lib/defaultExternalContentHandlers.ts +++ b/packages/tldraw/src/lib/defaultExternalContentHandlers.ts @@ -165,7 +165,8 @@ export function registerDefaultExternalContentHandlers( // svg text editor.registerExternalContentHandler('svg-text', async ({ point, text }) => { const position = - point ?? (editor.inputs.shiftKey ? editor.inputs.currentPagePoint : editor.viewportPageCenter) + point ?? + (editor.inputs.shiftKey ? editor.inputs.currentPagePoint : editor.getViewportPageCenter()) const svg = new DOMParser().parseFromString(text, 'image/svg+xml').querySelector('svg') if (!svg) { @@ -197,7 +198,8 @@ export function registerDefaultExternalContentHandlers( // embeds editor.registerExternalContentHandler('embed', ({ point, url, embed }) => { const position = - point ?? (editor.inputs.shiftKey ? editor.inputs.currentPagePoint : editor.viewportPageCenter) + point ?? + (editor.inputs.shiftKey ? editor.inputs.currentPagePoint : editor.getViewportPageCenter()) const { width, height } = embed @@ -221,7 +223,8 @@ export function registerDefaultExternalContentHandlers( // files editor.registerExternalContentHandler('files', async ({ point, files }) => { const position = - point ?? (editor.inputs.shiftKey ? editor.inputs.currentPagePoint : editor.viewportPageCenter) + point ?? + (editor.inputs.shiftKey ? editor.inputs.currentPagePoint : editor.getViewportPageCenter()) const pagePoint = new Vec2d(position.x, position.y) @@ -272,7 +275,8 @@ export function registerDefaultExternalContentHandlers( // text editor.registerExternalContentHandler('text', async ({ point, text }) => { const p = - point ?? (editor.inputs.shiftKey ? editor.inputs.currentPagePoint : editor.viewportPageCenter) + point ?? + (editor.inputs.shiftKey ? editor.inputs.currentPagePoint : editor.getViewportPageCenter()) const defaultProps = editor.getShapeUtil('text').getDefaultProps() @@ -301,8 +305,8 @@ export function registerDefaultExternalContentHandlers( }) const minWidth = Math.min( - isMultiLine ? editor.viewportPageBounds.width * 0.9 : 920, - Math.max(200, editor.viewportPageBounds.width * 0.9) + isMultiLine ? editor.getViewportPageBounds().width * 0.9 : 920, + Math.max(200, editor.getViewportPageBounds().width * 0.9) ) if (rawSize.w > minWidth) { @@ -323,8 +327,8 @@ export function registerDefaultExternalContentHandlers( autoSize = true } - if (p.y - h / 2 < editor.viewportPageBounds.minY + 40) { - p.y = editor.viewportPageBounds.minY + 40 + h / 2 + if (p.y - h / 2 < editor.getViewportPageBounds().minY + 40) { + p.y = editor.getViewportPageBounds().minY + 40 + h / 2 } editor.createShapes([ @@ -359,7 +363,8 @@ export function registerDefaultExternalContentHandlers( } const position = - point ?? (editor.inputs.shiftKey ? editor.inputs.currentPagePoint : editor.viewportPageCenter) + point ?? + (editor.inputs.shiftKey ? editor.inputs.currentPagePoint : editor.getViewportPageCenter()) const assetId: TLAssetId = AssetRecordType.createId(getHashForString(url)) const shape = createEmptyBookmarkShape(editor, url, position) @@ -475,7 +480,7 @@ export async function createShapesForAssets( function centerSelectionAroundPoint(editor: Editor, position: VecLike) { // Re-position shapes so that the center of the group is at the provided point - const { viewportPageBounds } = editor + const viewportPageBounds = editor.getViewportPageBounds() let selectionPageBounds = editor.getSelectionPageBounds() if (selectionPageBounds) { diff --git a/packages/tldraw/src/lib/shapes/arrow/ArrowShapeUtil.tsx b/packages/tldraw/src/lib/shapes/arrow/ArrowShapeUtil.tsx index c237fb0a9..ff474ef5e 100644 --- a/packages/tldraw/src/lib/shapes/arrow/ArrowShapeUtil.tsx +++ b/packages/tldraw/src/lib/shapes/arrow/ArrowShapeUtil.tsx @@ -288,7 +288,7 @@ export class ArrowShapeUtil extends ShapeUtil { precise = Vec2d.Dist(pointInTargetSpace, targetBounds.center) > Math.max(4, Math.min(Math.min(targetBounds.width, targetBounds.height) * 0.15, 16)) / - this.editor.zoomLevel + this.editor.getZoomLevel() } if (!isPrecise) { diff --git a/packages/tldraw/src/lib/shapes/bookmark/BookmarkShapeUtil.tsx b/packages/tldraw/src/lib/shapes/bookmark/BookmarkShapeUtil.tsx index b744ef7bb..635901bfd 100644 --- a/packages/tldraw/src/lib/shapes/bookmark/BookmarkShapeUtil.tsx +++ b/packages/tldraw/src/lib/shapes/bookmark/BookmarkShapeUtil.tsx @@ -67,7 +67,7 @@ export class BookmarkShapeUtil extends BaseBoxShapeUtil { ) : (
)} - +
{asset?.props.title && ( diff --git a/packages/tldraw/src/lib/shapes/draw/toolStates/Drawing.ts b/packages/tldraw/src/lib/shapes/draw/toolStates/Drawing.ts index 5b30f5179..4a7807f6e 100644 --- a/packages/tldraw/src/lib/shapes/draw/toolStates/Drawing.ts +++ b/packages/tldraw/src/lib/shapes/draw/toolStates/Drawing.ts @@ -87,7 +87,7 @@ export class Drawing extends StateNode { if (inputs.isPen) { if ( Vec2d.Dist(inputs.currentPagePoint, this.lastRecordedPoint) >= - 1 / this.editor.zoomLevel + 1 / this.editor.getZoomLevel() ) { this.lastRecordedPoint = inputs.currentPagePoint.clone() this.mergeNextPoint = false @@ -474,7 +474,7 @@ export class Drawing extends StateNode { if (shouldSnap) { if (newSegments.length > 2) { let nearestPoint: Vec2dModel | undefined = undefined - let minDistance = 8 / this.editor.zoomLevel + let minDistance = 8 / this.editor.getZoomLevel() // Don't try to snap to the last two segments for (let i = 0, n = segments.length - 2; i < n; i++) { diff --git a/packages/tldraw/src/lib/shapes/geo/GeoShapeUtil.tsx b/packages/tldraw/src/lib/shapes/geo/GeoShapeUtil.tsx index d4bcf23a9..a97b475f2 100644 --- a/packages/tldraw/src/lib/shapes/geo/GeoShapeUtil.tsx +++ b/packages/tldraw/src/lib/shapes/geo/GeoShapeUtil.tsx @@ -540,7 +540,7 @@ export class GeoShapeUtil extends BaseBoxShapeUtil { bounds={props.geo === 'cloud' ? this.getGeometry(shape).bounds : undefined} /> {shape.props.url && ( - + )} diff --git a/packages/tldraw/src/lib/shapes/image/ImageShapeUtil.tsx b/packages/tldraw/src/lib/shapes/image/ImageShapeUtil.tsx index 5cc885f0e..23503cfe3 100644 --- a/packages/tldraw/src/lib/shapes/image/ImageShapeUtil.tsx +++ b/packages/tldraw/src/lib/shapes/image/ImageShapeUtil.tsx @@ -155,7 +155,7 @@ export class ImageShapeUtil extends BaseBoxShapeUtil { )}
{'url' in shape.props && shape.props.url && ( - + )} diff --git a/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx b/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx index f4c9f3fd2..da6beadef 100644 --- a/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx +++ b/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx @@ -94,7 +94,7 @@ export class NoteShapeUtil extends ShapeUtil { {'url' in shape.props && shape.props.url && ( - + )} ) diff --git a/packages/tldraw/src/lib/shapes/shared/ShapeFill.tsx b/packages/tldraw/src/lib/shapes/shared/ShapeFill.tsx index 58720a8fd..0c94fd8ad 100644 --- a/packages/tldraw/src/lib/shapes/shared/ShapeFill.tsx +++ b/packages/tldraw/src/lib/shapes/shared/ShapeFill.tsx @@ -40,10 +40,10 @@ export const ShapeFill = React.memo(function ShapeFill({ theme, d, color, fill } const PatternFill = function PatternFill({ d, color, theme }: ShapeFillProps) { const editor = useEditor() - const zoomLevel = useValue('zoomLevel', () => editor.zoomLevel, [editor]) + const zoomLevel = useValue('zoomLevel', () => editor.getZoomLevel(), [editor]) const intZoom = Math.ceil(zoomLevel) - const teenyTiny = editor.zoomLevel <= 0.18 + const teenyTiny = editor.getZoomLevel() <= 0.18 return ( <> diff --git a/packages/tldraw/src/lib/shapes/shared/useForceSolid.ts b/packages/tldraw/src/lib/shapes/shared/useForceSolid.ts index 6dca0a618..b37da5458 100644 --- a/packages/tldraw/src/lib/shapes/shared/useForceSolid.ts +++ b/packages/tldraw/src/lib/shapes/shared/useForceSolid.ts @@ -2,5 +2,5 @@ import { useEditor, useValue } from '@tldraw/editor' export function useForceSolid() { const editor = useEditor() - return useValue('zoom', () => editor.zoomLevel < 0.35, [editor]) + return useValue('zoom', () => editor.getZoomLevel() < 0.35, [editor]) } diff --git a/packages/tldraw/src/lib/shapes/video/VideoShapeUtil.tsx b/packages/tldraw/src/lib/shapes/video/VideoShapeUtil.tsx index f687feda7..3c0b31c81 100644 --- a/packages/tldraw/src/lib/shapes/video/VideoShapeUtil.tsx +++ b/packages/tldraw/src/lib/shapes/video/VideoShapeUtil.tsx @@ -71,7 +71,7 @@ const TLVideoUtilComponent = track(function TLVideoUtilComponent(props: { }) { const { shape, videoUtil } = props const showControls = - videoUtil.editor.getShapeGeometry(shape).bounds.w * videoUtil.editor.zoomLevel >= 110 + videoUtil.editor.getShapeGeometry(shape).bounds.w * videoUtil.editor.getZoomLevel() >= 110 const asset = shape.props.assetId ? videoUtil.editor.getAsset(shape.props.assetId) : null const { time, playing } = shape.props const isEditing = useIsEditing(shape.id) @@ -208,7 +208,7 @@ const TLVideoUtilComponent = track(function TLVideoUtilComponent(props: { {'url' in shape.props && shape.props.url && ( - + )} ) diff --git a/packages/tldraw/src/lib/tools/EraserTool/children/Erasing.ts b/packages/tldraw/src/lib/tools/EraserTool/children/Erasing.ts index 739445393..709ee6bd7 100644 --- a/packages/tldraw/src/lib/tools/EraserTool/children/Erasing.ts +++ b/packages/tldraw/src/lib/tools/EraserTool/children/Erasing.ts @@ -79,8 +79,8 @@ export class Erasing extends StateNode { update() { const erasingShapeIds = this.editor.getErasingShapeIds() + const zoomLevel = this.editor.getZoomLevel() const { - zoomLevel, currentPageShapes: currentPageShapes, inputs: { currentPagePoint, previousPagePoint }, } = this.editor diff --git a/packages/tldraw/src/lib/tools/EraserTool/children/Pointing.ts b/packages/tldraw/src/lib/tools/EraserTool/children/Pointing.ts index d917d6c7b..db3c84e28 100644 --- a/packages/tldraw/src/lib/tools/EraserTool/children/Pointing.ts +++ b/packages/tldraw/src/lib/tools/EraserTool/children/Pointing.ts @@ -11,10 +11,10 @@ export class Pointing extends StateNode { static override id = 'pointing' override onEnter = () => { + const zoomLevel = this.editor.getZoomLevel() const { inputs: { currentPagePoint }, currentPageShapesSorted: sortedShapesOnCurrentPage, - zoomLevel, } = this.editor const erasing = new Set() diff --git a/packages/tldraw/src/lib/tools/HandTool/HandTool.ts b/packages/tldraw/src/lib/tools/HandTool/HandTool.ts index 8941e20da..2b1cfb3ee 100644 --- a/packages/tldraw/src/lib/tools/HandTool/HandTool.ts +++ b/packages/tldraw/src/lib/tools/HandTool/HandTool.ts @@ -25,8 +25,8 @@ export class HandTool extends StateNode { override onQuadrupleClick: TLClickEvent = (info) => { if (info.phase === 'settle') { + const zoomLevel = this.editor.getZoomLevel() const { - zoomLevel, inputs: { currentScreenPoint }, } = this.editor diff --git a/packages/tldraw/src/lib/tools/SelectTool/children/Brushing.ts b/packages/tldraw/src/lib/tools/SelectTool/children/Brushing.ts index 40a81cf58..5d1d87826 100644 --- a/packages/tldraw/src/lib/tools/SelectTool/children/Brushing.ts +++ b/packages/tldraw/src/lib/tools/SelectTool/children/Brushing.ts @@ -93,8 +93,8 @@ export class Brushing extends StateNode { } private hitTestShapes() { + const zoomLevel = this.editor.getZoomLevel() const { - zoomLevel, currentPageId, currentPageShapes: currentPageShapes, inputs: { originPagePoint, currentPagePoint, shiftKey, ctrlKey }, diff --git a/packages/tldraw/src/lib/tools/SelectTool/children/Idle.ts b/packages/tldraw/src/lib/tools/SelectTool/children/Idle.ts index 2dc3e0232..c01cd3e3f 100644 --- a/packages/tldraw/src/lib/tools/SelectTool/children/Idle.ts +++ b/packages/tldraw/src/lib/tools/SelectTool/children/Idle.ts @@ -176,7 +176,7 @@ export class Idle extends StateNode { ? hoveredShape : this.editor.getSelectedShapeAtPoint(this.editor.inputs.currentPagePoint) ?? this.editor.getShapeAtPoint(this.editor.inputs.currentPagePoint, { - margin: HIT_TEST_MARGIN / this.editor.zoomLevel, + margin: HIT_TEST_MARGIN / this.editor.getZoomLevel(), hitInside: false, }) @@ -329,7 +329,7 @@ export class Idle extends StateNode { hoveredShape && !this.editor.isShapeOfType(hoveredShape, 'group') ? hoveredShape : this.editor.getShapeAtPoint(this.editor.inputs.currentPagePoint, { - margin: HIT_TEST_MARGIN / this.editor.zoomLevel, + margin: HIT_TEST_MARGIN / this.editor.getZoomLevel(), hitInside: false, hitLabels: true, hitFrameInside: false, diff --git a/packages/tldraw/src/lib/tools/SelectTool/children/PointingShape.ts b/packages/tldraw/src/lib/tools/SelectTool/children/PointingShape.ts index 13344ec8a..00168047f 100644 --- a/packages/tldraw/src/lib/tools/SelectTool/children/PointingShape.ts +++ b/packages/tldraw/src/lib/tools/SelectTool/children/PointingShape.ts @@ -62,8 +62,8 @@ export class PointingShape extends StateNode { override onPointerUp: TLEventHandlers['onPointerUp'] = (info) => { const selectedShapeIds = this.editor.getSelectedShapeIds() const focusedGroupId = this.editor.getFocusedGroupId() + const zoomLevel = this.editor.getZoomLevel() const { - zoomLevel, inputs: { currentPagePoint, shiftKey }, } = this.editor diff --git a/packages/tldraw/src/lib/tools/SelectTool/children/ScribbleBrushing.ts b/packages/tldraw/src/lib/tools/SelectTool/children/ScribbleBrushing.ts index b460b5d3d..8540c98af 100644 --- a/packages/tldraw/src/lib/tools/SelectTool/children/ScribbleBrushing.ts +++ b/packages/tldraw/src/lib/tools/SelectTool/children/ScribbleBrushing.ts @@ -85,8 +85,8 @@ export class ScribbleBrushing extends StateNode { } private updateScribbleSelection(addPoint: boolean) { + const zoomLevel = this.editor.getZoomLevel() const { - zoomLevel, currentPageShapes: currentPageShapes, inputs: { shiftKey, originPagePoint, previousPagePoint, currentPagePoint }, } = this.editor diff --git a/packages/tldraw/src/lib/tools/ZoomTool/children/ZoomBrushing.ts b/packages/tldraw/src/lib/tools/ZoomTool/children/ZoomBrushing.ts index 1105b1c17..f92d58266 100644 --- a/packages/tldraw/src/lib/tools/ZoomTool/children/ZoomBrushing.ts +++ b/packages/tldraw/src/lib/tools/ZoomTool/children/ZoomBrushing.ts @@ -43,7 +43,7 @@ export class ZoomBrushing extends StateNode { private complete() { const { zoomBrush } = this - const threshold = 8 / this.editor.zoomLevel + const threshold = 8 / this.editor.getZoomLevel() // If the selected area is small then treat it as a click if (zoomBrush.width < threshold && zoomBrush.height < threshold) { const point = this.editor.inputs.currentScreenPoint @@ -53,7 +53,7 @@ export class ZoomBrushing extends StateNode { this.editor.zoomIn(point, { duration: 220 }) } } else { - const zoomLevel = this.editor.inputs.altKey ? this.editor.zoomLevel / 2 : undefined + const zoomLevel = this.editor.inputs.altKey ? this.editor.getZoomLevel() / 2 : undefined this.editor.zoomToBounds(zoomBrush, zoomLevel, { duration: 220 }) } diff --git a/packages/tldraw/src/lib/tools/selection-logic/getHitShapeOnCanvasPointerDown.ts b/packages/tldraw/src/lib/tools/selection-logic/getHitShapeOnCanvasPointerDown.ts index 22bb861f7..7d1c8344e 100644 --- a/packages/tldraw/src/lib/tools/selection-logic/getHitShapeOnCanvasPointerDown.ts +++ b/packages/tldraw/src/lib/tools/selection-logic/getHitShapeOnCanvasPointerDown.ts @@ -1,8 +1,8 @@ import { Editor, HIT_TEST_MARGIN, TLShape } from '@tldraw/editor' export function getHitShapeOnCanvasPointerDown(editor: Editor): TLShape | undefined { + const zoomLevel = editor.getZoomLevel() const { - zoomLevel, inputs: { currentPagePoint }, } = editor diff --git a/packages/tldraw/src/lib/tools/selection-logic/selectOnCanvasPointerUp.ts b/packages/tldraw/src/lib/tools/selection-logic/selectOnCanvasPointerUp.ts index b86d6c0db..a77e92066 100644 --- a/packages/tldraw/src/lib/tools/selection-logic/selectOnCanvasPointerUp.ts +++ b/packages/tldraw/src/lib/tools/selection-logic/selectOnCanvasPointerUp.ts @@ -6,7 +6,7 @@ export function selectOnCanvasPointerUp(editor: Editor) { const hitShape = editor.getShapeAtPoint(currentPagePoint, { hitInside: false, - margin: HIT_TEST_MARGIN / editor.zoomLevel, + margin: HIT_TEST_MARGIN / editor.getZoomLevel(), hitLabels: true, renderingOnly: true, filter: (shape) => !shape.isLocked, diff --git a/packages/tldraw/src/lib/tools/selection-logic/updateHoveredId.ts b/packages/tldraw/src/lib/tools/selection-logic/updateHoveredId.ts index 894b9cc2f..9f0d44202 100644 --- a/packages/tldraw/src/lib/tools/selection-logic/updateHoveredId.ts +++ b/packages/tldraw/src/lib/tools/selection-logic/updateHoveredId.ts @@ -5,7 +5,7 @@ export function updateHoveredId(editor: Editor) { const hitShape = editor.getShapeAtPoint(editor.inputs.currentPagePoint, { hitInside: false, hitLabels: false, - margin: HIT_TEST_MARGIN / editor.zoomLevel, + margin: HIT_TEST_MARGIN / editor.getZoomLevel(), renderingOnly: true, }) diff --git a/packages/tldraw/src/lib/ui/components/EmbedDialog.tsx b/packages/tldraw/src/lib/ui/components/EmbedDialog.tsx index dc751b80f..650542531 100644 --- a/packages/tldraw/src/lib/ui/components/EmbedDialog.tsx +++ b/packages/tldraw/src/lib/ui/components/EmbedDialog.tsx @@ -108,7 +108,7 @@ export const EmbedDialog = track(function EmbedDialog({ onClose }: TLUiDialogPro editor.putExternalContent({ type: 'embed', url, - point: editor.viewportPageCenter, + point: editor.getViewportPageCenter(), embed: embedInfoForUrl.definition, }) diff --git a/packages/tldraw/src/lib/ui/components/HTMLCanvas.tsx b/packages/tldraw/src/lib/ui/components/HTMLCanvas.tsx index 05d60676a..b058eda4a 100644 --- a/packages/tldraw/src/lib/ui/components/HTMLCanvas.tsx +++ b/packages/tldraw/src/lib/ui/components/HTMLCanvas.tsx @@ -37,8 +37,8 @@ export const HTMLCanvas = track(function HTMLCanvas() { return ( ) diff --git a/packages/tldraw/src/lib/ui/components/NavigationZone/Minimap.tsx b/packages/tldraw/src/lib/ui/components/NavigationZone/Minimap.tsx index 3e1f6e224..708475413 100644 --- a/packages/tldraw/src/lib/ui/components/NavigationZone/Minimap.tsx +++ b/packages/tldraw/src/lib/ui/components/NavigationZone/Minimap.tsx @@ -64,7 +64,7 @@ export function Minimap({ shapeFill, selectFill, viewportFill }: MinimapProps) { const clampedPoint = minimap.minimapScreenPointToPagePoint(e.clientX, e.clientY, false, true) minimap.originPagePoint.setTo(clampedPoint) - minimap.originPageCenter.setTo(editor.viewportPageBounds.center) + minimap.originPageCenter.setTo(editor.getViewportPageBounds().center) editor.centerOnPoint(point, { duration: ANIMATION_MEDIUM_MS }) }, @@ -85,7 +85,7 @@ export function Minimap({ shapeFill, selectFill, viewportFill }: MinimapProps) { const clampedPoint = minimap.minimapScreenPointToPagePoint(e.clientX, e.clientY, false, true) - const _vpPageBounds = editor.viewportPageBounds + const _vpPageBounds = editor.getViewportPageBounds() minimap.isInViewport = _vpPageBounds.containsPoint(clampedPoint) @@ -189,9 +189,9 @@ export function Minimap({ shapeFill, selectFill, viewportFill }: MinimapProps) { () => { const { currentPageShapeIds: shapeIdsOnCurrentPage, - viewportPageBounds, currentPageBounds: commonBoundsOfAllShapesOnCurrentPage, } = editor + const viewportPageBounds = editor.getViewportPageBounds() const _dpr = devicePixelRatio.get() // dereference diff --git a/packages/tldraw/src/lib/ui/components/NavigationZone/MinimapManager.ts b/packages/tldraw/src/lib/ui/components/NavigationZone/MinimapManager.ts index 618c3f9bf..50c8cd4cf 100644 --- a/packages/tldraw/src/lib/ui/components/NavigationZone/MinimapManager.ts +++ b/packages/tldraw/src/lib/ui/components/NavigationZone/MinimapManager.ts @@ -118,7 +118,7 @@ export class MinimapManager { clampToBounds = false ) => { const { editor } = this - const { viewportPageBounds } = editor + const viewportPageBounds = editor.getViewportPageBounds() let { x: px, y: py } = this.getPagePoint(x, y) @@ -179,9 +179,8 @@ export class MinimapManager { this const { width: cw, height: ch } = canvasScreenBounds - const selectedShapeIds = this.editor.getSelectedShapeIds() - - const { viewportPageBounds } = editor + const selectedShapeIds = editor.getSelectedShapeIds() + const viewportPageBounds = editor.getViewportPageBounds() if (!cvs || !pageBounds) { return diff --git a/packages/tldraw/src/lib/ui/components/NavigationZone/ZoomMenu.tsx b/packages/tldraw/src/lib/ui/components/NavigationZone/ZoomMenu.tsx index 713dfe928..0115561a8 100644 --- a/packages/tldraw/src/lib/ui/components/NavigationZone/ZoomMenu.tsx +++ b/packages/tldraw/src/lib/ui/components/NavigationZone/ZoomMenu.tsx @@ -11,13 +11,13 @@ export const ZoomMenu = track(function ZoomMenu() { const msg = useTranslation() const breakpoint = useBreakpoint() - const zoom = editor.zoomLevel + const zoom = editor.getZoomLevel() const hasShapes = editor.currentPageShapeIds.size > 0 const hasSelected = editor.getSelectedShapeIds().length > 0 - const isZoomedTo100 = editor.zoomLevel === 1 + const isZoomedTo100 = editor.getZoomLevel() === 1 const handleDoubleClick = React.useCallback(() => { - editor.resetZoom(editor.viewportScreenCenter, { duration: ANIMATION_MEDIUM_MS }) + editor.resetZoom(editor.getViewportScreenCenter(), { duration: ANIMATION_MEDIUM_MS }) }, [editor]) return ( diff --git a/packages/tldraw/src/lib/ui/hooks/clipboard/pasteExcalidrawContent.ts b/packages/tldraw/src/lib/ui/hooks/clipboard/pasteExcalidrawContent.ts index 8a704a59b..7fd6ef9a3 100644 --- a/packages/tldraw/src/lib/ui/hooks/clipboard/pasteExcalidrawContent.ts +++ b/packages/tldraw/src/lib/ui/hooks/clipboard/pasteExcalidrawContent.ts @@ -345,7 +345,7 @@ export async function pasteExcalidrawContent(editor: Editor, clipboard: any, poi const rootShapes = compact(rootShapeIds.map((id) => editor.getShape(id))) const bounds = Box2d.Common(rootShapes.map((s) => editor.getShapePageBounds(s)!)) - const viewPortCenter = editor.viewportPageBounds.center + const viewPortCenter = editor.getViewportPageBounds().center editor.updateShapes( rootShapes.map((s) => { const delta = { diff --git a/packages/tldraw/src/lib/ui/hooks/useActions.tsx b/packages/tldraw/src/lib/ui/hooks/useActions.tsx index 48dde27ef..9811b8b77 100644 --- a/packages/tldraw/src/lib/ui/hooks/useActions.tsx +++ b/packages/tldraw/src/lib/ui/hooks/useActions.tsx @@ -409,8 +409,8 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) { y: 0, } : { - x: 16 / editor.zoomLevel, - y: 16 / editor.zoomLevel, + x: 16 / editor.getZoomLevel(), + y: 16 / editor.getZoomLevel(), } editor.mark('duplicate shapes') editor.duplicateShapes(ids, offset) @@ -869,7 +869,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) { readonlyOk: true, onSelect(source) { trackEvent('zoom-in', { source }) - editor.zoomIn(editor.viewportScreenCenter, { duration: ANIMATION_MEDIUM_MS }) + editor.zoomIn(editor.getViewportScreenCenter(), { duration: ANIMATION_MEDIUM_MS }) }, }, { @@ -879,7 +879,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) { readonlyOk: true, onSelect(source) { trackEvent('zoom-out', { source }) - editor.zoomOut(editor.viewportScreenCenter, { duration: ANIMATION_MEDIUM_MS }) + editor.zoomOut(editor.getViewportScreenCenter(), { duration: ANIMATION_MEDIUM_MS }) }, }, { @@ -890,7 +890,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) { readonlyOk: true, onSelect(source) { trackEvent('reset-zoom', { source }) - editor.resetZoom(editor.viewportScreenCenter, { duration: ANIMATION_MEDIUM_MS }) + editor.resetZoom(editor.getViewportScreenCenter(), { duration: ANIMATION_MEDIUM_MS }) }, }, { diff --git a/packages/tldraw/src/lib/ui/hooks/useActionsMenuSchema.tsx b/packages/tldraw/src/lib/ui/hooks/useActionsMenuSchema.tsx index f93d0a993..2c1d3f2df 100644 --- a/packages/tldraw/src/lib/ui/hooks/useActionsMenuSchema.tsx +++ b/packages/tldraw/src/lib/ui/hooks/useActionsMenuSchema.tsx @@ -52,7 +52,7 @@ export const ActionsMenuSchemaProvider = ({ const allowUngroup = useAllowUngroup() const showEditLink = useHasLinkShapeSelected() const breakpoint = useBreakpoint() - const isZoomedTo100 = useValue('zoom is 1', () => editor.zoomLevel === 1, [editor]) + const isZoomedTo100 = useValue('zoom is 1', () => editor.getZoomLevel() === 1, [editor]) const actionTLUiMenuSchema = useMemo(() => { const results = [ diff --git a/packages/tldraw/src/lib/ui/hooks/useBreakpoint.tsx b/packages/tldraw/src/lib/ui/hooks/useBreakpoint.tsx index 00bc3917a..3738894e8 100644 --- a/packages/tldraw/src/lib/ui/hooks/useBreakpoint.tsx +++ b/packages/tldraw/src/lib/ui/hooks/useBreakpoint.tsx @@ -18,7 +18,7 @@ export function BreakPointProvider({ 'breakpoint', () => { // This will recompute the viewport screen bounds changes... - const { width } = editor.viewportScreenBounds + const { width } = editor.getViewportScreenBounds() const maxBreakpoint = forceMobile ? 3 : PORTRAIT_BREAKPOINTS.length - 1 diff --git a/packages/tldraw/src/lib/ui/hooks/useInsertMedia.ts b/packages/tldraw/src/lib/ui/hooks/useInsertMedia.ts index 7bd402256..e8ded7bb1 100644 --- a/packages/tldraw/src/lib/ui/hooks/useInsertMedia.ts +++ b/packages/tldraw/src/lib/ui/hooks/useInsertMedia.ts @@ -17,7 +17,7 @@ export function useInsertMedia() { await editor.putExternalContent({ type: 'files', files: Array.from(fileList), - point: editor.viewportPageBounds.center, + point: editor.getViewportPageBounds().center, ignoreParent: false, }) input.value = '' diff --git a/packages/tldraw/src/lib/ui/hooks/useMenuSchema.tsx b/packages/tldraw/src/lib/ui/hooks/useMenuSchema.tsx index c4e45b66b..c470101c9 100644 --- a/packages/tldraw/src/lib/ui/hooks/useMenuSchema.tsx +++ b/packages/tldraw/src/lib/ui/hooks/useMenuSchema.tsx @@ -79,7 +79,7 @@ export function TLUiMenuSchemaProvider({ overrides, children }: TLUiMenuSchemaPr const allowUngroup = useAllowUngroup() const canUndo = useCanUndo() const canRedo = useCanRedo() - const isZoomedTo100 = useValue('isZoomedTo100', () => editor.zoomLevel === 1, [editor]) + const isZoomedTo100 = useValue('isZoomedTo100', () => editor.getZoomLevel() === 1, [editor]) const oneEmbedSelected = useValue( 'oneEmbedSelected', diff --git a/packages/tldraw/src/test/HandTool.test.ts b/packages/tldraw/src/test/HandTool.test.ts index 86fa008a7..dee9348ef 100644 --- a/packages/tldraw/src/test/HandTool.test.ts +++ b/packages/tldraw/src/test/HandTool.test.ts @@ -19,55 +19,55 @@ jest.useFakeTimers() describe(HandTool, () => { it('Double taps to zoom in', () => { editor.setCurrentTool('hand') - expect(editor.zoomLevel).toBe(1) + expect(editor.getZoomLevel()).toBe(1) editor.click() editor.click() // double click! jest.advanceTimersByTime(300) - expect(editor.zoomLevel).not.toBe(1) // animating + expect(editor.getZoomLevel()).not.toBe(1) // animating jest.advanceTimersByTime(300) - expect(editor.zoomLevel).toBe(2) // all done + expect(editor.getZoomLevel()).toBe(2) // all done }) it('Triple taps to zoom out', () => { editor.setCurrentTool('hand') - expect(editor.zoomLevel).toBe(1) + expect(editor.getZoomLevel()).toBe(1) editor.click() editor.click() editor.click() // triple click! jest.advanceTimersByTime(300) - expect(editor.zoomLevel).not.toBe(1) // animating + expect(editor.getZoomLevel()).not.toBe(1) // animating jest.advanceTimersByTime(300) - expect(editor.zoomLevel).toBe(0.5) // all done + expect(editor.getZoomLevel()).toBe(0.5) // all done }) it('Quadruple taps to reset zoom', () => { editor.setCurrentTool('hand') editor.zoomIn() // zoom to 2 - expect(editor.zoomLevel).toBe(2) + expect(editor.getZoomLevel()).toBe(2) editor.click() editor.click() editor.click() editor.click() // quad click! jest.advanceTimersByTime(300) - expect(editor.zoomLevel).not.toBe(2) // animating + expect(editor.getZoomLevel()).not.toBe(2) // animating jest.advanceTimersByTime(300) - expect(editor.zoomLevel).toBe(1) // all done + expect(editor.getZoomLevel()).toBe(1) // all done }) it('Quadruple taps from zoom=1 to zoom to fit', () => { editor.setCurrentTool('hand') - expect(editor.zoomLevel).toBe(1) + expect(editor.getZoomLevel()).toBe(1) editor.createShapes(createDefaultShapes()) // makes some shapes editor.click() editor.click() editor.click() editor.click() // quad click! jest.advanceTimersByTime(300) - expect(editor.zoomLevel).not.toBe(1) // animating + expect(editor.getZoomLevel()).not.toBe(1) // animating jest.advanceTimersByTime(300) - const z = editor.zoomLevel + const z = editor.getZoomLevel() editor.zoomToFit() // call zoom to fit manually to compare - expect(editor.zoomLevel).toBe(z) // zoom should not have changed + expect(editor.getZoomLevel()).toBe(z) // zoom should not have changed }) }) diff --git a/packages/tldraw/src/test/ZoomTool.test.ts b/packages/tldraw/src/test/ZoomTool.test.ts index a1f9faa5e..5fdeaa601 100644 --- a/packages/tldraw/src/test/ZoomTool.test.ts +++ b/packages/tldraw/src/test/ZoomTool.test.ts @@ -39,24 +39,24 @@ describe('TLSelectTool.Zooming', () => { it('Correctly zooms in when clicking', () => { editor.keyDown('z') - expect(editor.zoomLevel).toBe(1) - expect(editor.viewportPageBounds).toMatchObject({ x: -0, y: -0, w: 1080, h: 720 }) - expect(editor.viewportPageCenter).toMatchObject({ x: 540, y: 360 }) + expect(editor.getZoomLevel()).toBe(1) + expect(editor.getViewportPageBounds()).toMatchObject({ x: -0, y: -0, w: 1080, h: 720 }) + expect(editor.getViewportPageCenter()).toMatchObject({ x: 540, y: 360 }) editor.click() editor.expectToBeIn('zoom.idle') jest.advanceTimersByTime(300) - expect(editor.zoomLevel).toBe(2) + expect(editor.getZoomLevel()).toBe(2) }) it('Correctly zooms out when clicking while pressing Alt', () => { editor.keyDown('z') editor.keyDown('Alt') - expect(editor.zoomLevel).toBe(1) - expect(editor.viewportPageBounds).toMatchObject({ x: -0, y: -0, w: 1080, h: 720 }) - expect(editor.viewportPageCenter).toMatchObject({ x: 540, y: 360 }) + expect(editor.getZoomLevel()).toBe(1) + expect(editor.getViewportPageBounds()).toMatchObject({ x: -0, y: -0, w: 1080, h: 720 }) + expect(editor.getViewportPageCenter()).toMatchObject({ x: 540, y: 360 }) editor.click() jest.advanceTimersByTime(300) - expect(editor.zoomLevel).toBe(0.5) + expect(editor.getZoomLevel()).toBe(0.5) }) it('Cancels while pointing', () => { @@ -67,7 +67,7 @@ describe('TLSelectTool.Zooming', () => { editor.cancel() editor.expectToBeIn('zoom.idle') editor.pointerUp() - expect(editor.zoomLevel).toBe(1) + expect(editor.getZoomLevel()).toBe(1) }) it('Cancels while brushing', () => { @@ -80,7 +80,7 @@ describe('TLSelectTool.Zooming', () => { editor.cancel() editor.expectToBeIn('zoom.idle') editor.pointerUp() - expect(editor.zoomLevel).toBe(1) + expect(editor.getZoomLevel()).toBe(1) }) it('Interrupts while pointing', () => { @@ -91,7 +91,7 @@ describe('TLSelectTool.Zooming', () => { editor.interrupt() editor.expectToBeIn('select.idle') editor.pointerUp() - expect(editor.zoomLevel).toBe(1) + expect(editor.getZoomLevel()).toBe(1) }) it('Interrupts while brushing', () => { @@ -104,16 +104,16 @@ describe('TLSelectTool.Zooming', () => { editor.interrupt() editor.expectToBeIn('select.idle') editor.pointerUp() - expect(editor.zoomLevel).toBe(1) + expect(editor.getZoomLevel()).toBe(1) }) it('When the dragged area is small it zooms in instead of zooming to the area', () => { const originalCenter = { x: 540, y: 360 } const originalPageBounds = { x: -0, y: -0, w: 1080, h: 720 } const change = 6 - expect(editor.zoomLevel).toBe(1) - expect(editor.viewportPageBounds).toMatchObject(originalPageBounds) - expect(editor.viewportPageCenter).toMatchObject(originalCenter) + expect(editor.getZoomLevel()).toBe(1) + expect(editor.getViewportPageBounds()).toMatchObject(originalPageBounds) + expect(editor.getViewportPageCenter()).toMatchObject(originalCenter) editor.keyDown('z') editor.expectToBeIn('zoom.idle') editor.pointerDown(0, 0) @@ -123,14 +123,14 @@ describe('TLSelectTool.Zooming', () => { editor.pointerUp(change, change) editor.expectToBeIn('zoom.idle') jest.advanceTimersByTime(300) - expect(editor.zoomLevel).toBe(2) - expect(editor.viewportPageBounds).toMatchObject({ + expect(editor.getZoomLevel()).toBe(2) + expect(editor.getViewportPageBounds()).toMatchObject({ x: change / 2, y: change / 2, w: originalPageBounds.w / 2, h: originalPageBounds.h / 2, }) - expect(editor.viewportPageCenter).toMatchObject({ + expect(editor.getViewportPageCenter()).toMatchObject({ x: (originalCenter.x + change) / 2, y: (originalCenter.y + change) / 2, }) @@ -142,9 +142,9 @@ describe('TLSelectTool.Zooming', () => { const newBoundsX = 100 const newBoundsY = 200 editor.expectToBeIn('select.idle') - expect(editor.zoomLevel).toBe(1) - expect(editor.viewportPageBounds).toMatchObject({ x: -0, y: -0, w: 1080, h: 720 }) - expect(editor.viewportPageCenter).toMatchObject({ x: 540, y: 360 }) + expect(editor.getZoomLevel()).toBe(1) + expect(editor.getViewportPageBounds()).toMatchObject({ x: -0, y: -0, w: 1080, h: 720 }) + expect(editor.getViewportPageCenter()).toMatchObject({ x: 540, y: 360 }) editor.keyDown('z') editor.expectToBeIn('zoom.idle') editor.pointerDown(newBoundsX, newBoundsY) @@ -157,14 +157,14 @@ describe('TLSelectTool.Zooming', () => { }) editor.pointerUp(newBoundsX + newBoundsWidth, newBoundsY + newBoundsHeight) jest.advanceTimersByTime(300) - expect(editor.zoomLevel).toBeCloseTo(1.2888) - expect(editor.viewportPageBounds).toMatchObject({ + expect(editor.getZoomLevel()).toBeCloseTo(1.2888) + expect(editor.getViewportPageBounds()).toMatchObject({ x: -48.9655172413793, y: 100.68965517241382, w: 837.9310344827586, h: 558.6206896551723, }) - expect(editor.viewportPageCenter).toMatchObject({ + expect(editor.getViewportPageCenter()).toMatchObject({ x: newBoundsX + newBoundsWidth / 2, y: newBoundsY + newBoundsHeight / 2, }) @@ -178,9 +178,9 @@ describe('TLSelectTool.Zooming', () => { const newBoundsY = 200 editor.expectToBeIn('select.idle') const originalZoomLevel = 1 - expect(editor.zoomLevel).toBe(originalZoomLevel) - expect(editor.viewportPageBounds).toMatchObject({ x: -0, y: -0, w: 1080, h: 720 }) - expect(editor.viewportPageCenter).toMatchObject({ x: 540, y: 360 }) + expect(editor.getZoomLevel()).toBe(originalZoomLevel) + expect(editor.getViewportPageBounds()).toMatchObject({ x: -0, y: -0, w: 1080, h: 720 }) + expect(editor.getViewportPageCenter()).toMatchObject({ x: 540, y: 360 }) editor.keyDown('z') editor.expectToBeIn('zoom.idle') editor.keyDown('Alt') @@ -194,14 +194,14 @@ describe('TLSelectTool.Zooming', () => { }) editor.pointerUp() jest.advanceTimersByTime(500) - expect(editor.zoomLevel).toBeCloseTo(originalZoomLevel / 2) - expect(editor.viewportPageBounds).toMatchObject({ + expect(editor.getZoomLevel()).toBeCloseTo(originalZoomLevel / 2) + expect(editor.getViewportPageBounds()).toMatchObject({ x: -440, y: -160, w: 2160, h: 1440, }) - expect(editor.viewportPageCenter).toMatchObject({ + expect(editor.getViewportPageCenter()).toMatchObject({ x: newBoundsX + newBoundsWidth / 2, y: newBoundsY + newBoundsHeight / 2, }) diff --git a/packages/tldraw/src/test/commands/animationSpeed.test.ts b/packages/tldraw/src/test/commands/animationSpeed.test.ts index ece452f40..f2a5b0e6d 100644 --- a/packages/tldraw/src/test/commands/animationSpeed.test.ts +++ b/packages/tldraw/src/test/commands/animationSpeed.test.ts @@ -9,30 +9,30 @@ beforeEach(() => { jest.useFakeTimers() it('zooms in gradually when duration is present and animtion speed is default', () => { - expect(editor.zoomLevel).toBe(1) + expect(editor.getZoomLevel()).toBe(1) editor.user.updateUserPreferences({ animationSpeed: 1 }) // default editor.zoomIn(undefined, { duration: 100 }) editor.emit('tick', 25) // <-- quarter way - expect(editor.zoomLevel).not.toBe(2) + expect(editor.getZoomLevel()).not.toBe(2) editor.emit('tick', 25) // 50 <-- half way - expect(editor.zoomLevel).not.toBe(2) + expect(editor.getZoomLevel()).not.toBe(2) editor.emit('tick', 50) // 50 <-- done! - expect(editor.zoomLevel).toBe(2) + expect(editor.getZoomLevel()).toBe(2) }) it('zooms in gradually when duration is present and animtion speed is off', () => { - expect(editor.zoomLevel).toBe(1) + expect(editor.getZoomLevel()).toBe(1) editor.user.updateUserPreferences({ animationSpeed: 0 }) // none editor.zoomIn(undefined, { duration: 100 }) - expect(editor.zoomLevel).toBe(2) // <-- Should skip! + expect(editor.getZoomLevel()).toBe(2) // <-- Should skip! }) it('zooms in gradually when duration is present and animtion speed is double', () => { - expect(editor.zoomLevel).toBe(1) + expect(editor.getZoomLevel()).toBe(1) editor.user.updateUserPreferences({ animationSpeed: 2 }) // default editor.zoomIn(undefined, { duration: 100 }) editor.emit('tick', 25) // <-- half way - expect(editor.zoomLevel).not.toBe(2) + expect(editor.getZoomLevel()).not.toBe(2) editor.emit('tick', 25) // 50 <-- should finish - expect(editor.zoomLevel).toBe(2) + expect(editor.getZoomLevel()).toBe(2) }) diff --git a/packages/tldraw/src/test/commands/centerOnPoint.test.ts b/packages/tldraw/src/test/commands/centerOnPoint.test.ts index e4a73cfbf..b3720e28f 100644 --- a/packages/tldraw/src/test/commands/centerOnPoint.test.ts +++ b/packages/tldraw/src/test/commands/centerOnPoint.test.ts @@ -8,14 +8,14 @@ beforeEach(() => { it('centers on the point', () => { editor.centerOnPoint({ x: 400, y: 400 }) - expect(editor.viewportPageCenter).toMatchObject({ x: 400, y: 400 }) + expect(editor.getViewportPageCenter()).toMatchObject({ x: 400, y: 400 }) }) it('centers on the point with animation', () => { editor.centerOnPoint({ x: 400, y: 400 }, { duration: 200 }) - expect(editor.viewportPageCenter).not.toMatchObject({ x: 400, y: 400 }) + expect(editor.getViewportPageCenter()).not.toMatchObject({ x: 400, y: 400 }) jest.advanceTimersByTime(100) - expect(editor.viewportPageCenter).not.toMatchObject({ x: 400, y: 400 }) + expect(editor.getViewportPageCenter()).not.toMatchObject({ x: 400, y: 400 }) jest.advanceTimersByTime(200) - expect(editor.viewportPageCenter).toMatchObject({ x: 400, y: 400 }) + expect(editor.getViewportPageCenter()).toMatchObject({ x: 400, y: 400 }) }) diff --git a/packages/tldraw/src/test/commands/clipboard.test.ts b/packages/tldraw/src/test/commands/clipboard.test.ts index 9bfe154de..0df3f05a9 100644 --- a/packages/tldraw/src/test/commands/clipboard.test.ts +++ b/packages/tldraw/src/test/commands/clipboard.test.ts @@ -78,7 +78,7 @@ describe('When copying and pasting', () => { editor.setCamera({ x: editor.getCamera().x - testOffsetX, y: editor.getCamera().y - testOffsetY, - z: editor.zoomLevel, + z: editor.getZoomLevel(), }) editor.paste() @@ -123,7 +123,7 @@ describe('When copying and pasting', () => { editor.setCamera({ x: editor.getCamera().x - testOffsetX, y: editor.getCamera().y - testOffsetY, - z: editor.zoomLevel, + z: editor.getZoomLevel(), }) editor.paste() @@ -161,11 +161,11 @@ describe('When copying and pasting', () => { const testOffsetX = 2000 const testOffsetY = 3000 - const { w: screenWidth, h: screenHeight } = editor.viewportScreenBounds + const { w: screenWidth, h: screenHeight } = editor.getViewportScreenBounds() editor.setCamera({ x: editor.getCamera().x - testOffsetX, y: editor.getCamera().y - testOffsetY, - z: editor.zoomLevel, + z: editor.getZoomLevel(), }) editor.paste() @@ -295,7 +295,7 @@ describe('When copying and pasting', () => { editor.setCamera({ x: editor.getCamera().x - testOffsetX, y: editor.getCamera().y - testOffsetY, - z: editor.zoomLevel, + z: editor.getZoomLevel(), }) editor.paste() @@ -325,7 +325,7 @@ describe('When copying and pasting', () => { editor.setCamera({ x: editor.getCamera().x - testOffsetX, y: editor.getCamera().y - testOffsetY, - z: editor.zoomLevel, + z: editor.getZoomLevel(), }) editor.paste() @@ -354,11 +354,11 @@ describe('When copying and pasting', () => { const testOffsetX = 2000 const testOffsetY = 3000 - const { w: screenWidth, h: screenHeight } = editor.viewportScreenBounds + const { w: screenWidth, h: screenHeight } = editor.getViewportScreenBounds() editor.setCamera({ x: editor.getCamera().x - testOffsetX, y: editor.getCamera().y - testOffsetY, - z: editor.zoomLevel, + z: editor.getZoomLevel(), }) editor.paste() diff --git a/packages/tldraw/src/test/commands/duplicatePage.test.ts b/packages/tldraw/src/test/commands/duplicatePage.test.ts index 25df07b6c..ddc3305b7 100644 --- a/packages/tldraw/src/test/commands/duplicatePage.test.ts +++ b/packages/tldraw/src/test/commands/duplicatePage.test.ts @@ -36,7 +36,7 @@ it('Duplicates a page', () => { // Also duplicates the camera expect(editor.getCamera().x).toBe(camera.x) expect(editor.getCamera().y).toBe(camera.y) - expect(editor.zoomLevel).toBe(camera.z) + expect(editor.getZoomLevel()).toBe(camera.z) editor.undo() expect(editor.pages.length).toBe(n) diff --git a/packages/tldraw/src/test/commands/moveShapesToPage.test.ts b/packages/tldraw/src/test/commands/moveShapesToPage.test.ts index 5cc102805..890f91ff0 100644 --- a/packages/tldraw/src/test/commands/moveShapesToPage.test.ts +++ b/packages/tldraw/src/test/commands/moveShapesToPage.test.ts @@ -241,6 +241,6 @@ describe('arrows', () => { editor.moveShapesToPage([ids.box1, ids.box2], ids.page2) const selectionPageBounds = editor.getSelectionPageBounds() - expect(editor.viewportPageCenter).toMatchObject(selectionPageBounds!.center) + expect(editor.getViewportPageCenter()).toMatchObject(selectionPageBounds!.center) }) }) diff --git a/packages/tldraw/src/test/commands/pan.test.ts b/packages/tldraw/src/test/commands/pan.test.ts index 690973ed4..12a1d4564 100644 --- a/packages/tldraw/src/test/commands/pan.test.ts +++ b/packages/tldraw/src/test/commands/pan.test.ts @@ -15,17 +15,17 @@ describe('When panning', () => { }) it('Updates the pageBounds', () => { - const screenBounds = editor.viewportScreenBounds + const screenBounds = editor.getViewportScreenBounds() const beforeScreenBounds = new Box2d( screenBounds.x, screenBounds.y, screenBounds.w, screenBounds.h ) - const beforePageBounds = editor.viewportPageBounds.clone() + const beforePageBounds = editor.getViewportPageBounds().clone() editor.pan({ x: 200, y: 200 }) - expect(editor.viewportScreenBounds).toMatchObject(beforeScreenBounds.toJson()) - expect(editor.viewportPageBounds.toJson()).toMatchObject( + expect(editor.getViewportScreenBounds()).toMatchObject(beforeScreenBounds.toJson()) + expect(editor.getViewportPageBounds().toJson()).toMatchObject( beforePageBounds.translate(new Vec2d(-200, -200)).toJson() ) }) diff --git a/packages/tldraw/src/test/commands/resetZoom.test.ts b/packages/tldraw/src/test/commands/resetZoom.test.ts index 25fd23bb0..8e21f8c8f 100644 --- a/packages/tldraw/src/test/commands/resetZoom.test.ts +++ b/packages/tldraw/src/test/commands/resetZoom.test.ts @@ -8,23 +8,23 @@ beforeEach(() => { describe('When resetting zoom', () => { it('Resets the zoom when zoomed out', () => { - const center = editor.viewportScreenBounds.center.clone() + const center = editor.getViewportScreenBounds().center.clone() editor.zoomOut() editor.resetZoom() - expect(editor.zoomLevel).toBe(1) + expect(editor.getZoomLevel()).toBe(1) editor.zoomIn() editor.resetZoom() - expect(editor.zoomLevel).toBe(1) - expect(editor.viewportScreenBounds.center.clone()).toMatchObject(center) + expect(editor.getZoomLevel()).toBe(1) + expect(editor.getViewportScreenBounds().center.clone()).toMatchObject(center) }) it('Resets the zoom when zoomed in', () => { - const center = editor.viewportScreenBounds.center.clone() + const center = editor.getViewportScreenBounds().center.clone() editor.zoomOut() editor.resetZoom() - expect(editor.viewportScreenBounds.center.clone()).toMatchObject(center) + expect(editor.getViewportScreenBounds().center.clone()).toMatchObject(center) editor.zoomIn() editor.resetZoom() - expect(editor.viewportScreenBounds.center.clone()).toMatchObject(center) + expect(editor.getViewportScreenBounds().center.clone()).toMatchObject(center) }) }) diff --git a/packages/tldraw/src/test/commands/screenToPage.test.ts b/packages/tldraw/src/test/commands/screenToPage.test.ts index 7416490a3..58bb935a8 100644 --- a/packages/tldraw/src/test/commands/screenToPage.test.ts +++ b/packages/tldraw/src/test/commands/screenToPage.test.ts @@ -47,7 +47,9 @@ describe('viewport.screenToPage', () => { }) it('converts correctly when offset', () => { - editor.updateInstanceState({ screenBounds: { ...editor.viewportScreenBounds, x: 100, y: 100 } }) + editor.updateInstanceState({ + screenBounds: { ...editor.getViewportScreenBounds(), x: 100, y: 100 }, + }) checkScreenPage({ x: 0, y: 0 }, { x: -100, y: -100 }) checkScreenPage({ x: -100, y: -100 }, { x: -200, y: -200 }) @@ -57,7 +59,9 @@ describe('viewport.screenToPage', () => { it('converts correctly when zoomed out', () => { // camera at zero, screenbounds at zero, but zoom at .5 editor.setCamera({ x: 0, y: 0, z: 0.5 }) - editor.updateInstanceState({ screenBounds: { ...editor.viewportScreenBounds, x: 0, y: 0 } }) + editor.updateInstanceState({ + screenBounds: { ...editor.getViewportScreenBounds(), x: 0, y: 0 }, + }) checkScreenPage({ x: 0, y: 0 }, { x: 0, y: 0 }) checkScreenPage({ x: -100, y: -100 }, { x: -200, y: -200 }) @@ -66,7 +70,9 @@ describe('viewport.screenToPage', () => { it('converts correctly when zoomed in', () => { editor.setCamera({ x: 0, y: 0, z: 2 }) - editor.updateInstanceState({ screenBounds: { ...editor.viewportScreenBounds, x: 0, y: 0 } }) + editor.updateInstanceState({ + screenBounds: { ...editor.getViewportScreenBounds(), x: 0, y: 0 }, + }) checkScreenPage({ x: 0, y: 0 }, { x: 0, y: 0 }) checkScreenPage({ x: -100, y: -100 }, { x: -50, y: -50 }) @@ -75,7 +81,9 @@ describe('viewport.screenToPage', () => { it('converts correctly when zoomed', () => { // camera at zero, screenbounds at zero, but zoom at .5 - editor.updateInstanceState({ screenBounds: { ...editor.viewportScreenBounds, x: 0, y: 0 } }) + editor.updateInstanceState({ + screenBounds: { ...editor.getViewportScreenBounds(), x: 0, y: 0 }, + }) editor.setCamera({ x: 0, y: 0, z: 0.5 }) checkScreenPage({ x: 0, y: 0 }, { x: 0, y: 0 }) @@ -85,7 +93,9 @@ describe('viewport.screenToPage', () => { it('converts correctly when offset and zoomed', () => { editor.setCamera({ x: 0, y: 0, z: 0.5 }) - editor.updateInstanceState({ screenBounds: { ...editor.viewportScreenBounds, x: 100, y: 100 } }) + editor.updateInstanceState({ + screenBounds: { ...editor.getViewportScreenBounds(), x: 100, y: 100 }, + }) checkScreenPage({ x: 0, y: 0 }, { x: -200, y: -200 }) checkScreenPage({ x: -100, y: -100 }, { x: -400, y: -400 }) @@ -93,7 +103,9 @@ describe('viewport.screenToPage', () => { }) it('converts correctly when zoomed and panned', () => { - editor.updateInstanceState({ screenBounds: { ...editor.viewportScreenBounds, x: 0, y: 0 } }) + editor.updateInstanceState({ + screenBounds: { ...editor.getViewportScreenBounds(), x: 0, y: 0 }, + }) editor.setCamera({ x: 100, y: 100, z: 0.5 }) checkScreenPage({ x: 0, y: 0 }, { x: -100, y: -100 }) @@ -102,7 +114,9 @@ describe('viewport.screenToPage', () => { }) it('converts correctly when offset', () => { - editor.updateInstanceState({ screenBounds: { ...editor.viewportScreenBounds, x: 100, y: 100 } }) + editor.updateInstanceState({ + screenBounds: { ...editor.getViewportScreenBounds(), x: 100, y: 100 }, + }) editor.setCamera({ x: 0, y: 0, z: 0.5 }) checkScreenPage({ x: 0, y: 0 }, { x: -200, y: -200 }) @@ -111,7 +125,9 @@ describe('viewport.screenToPage', () => { }) it('converts correctly when panned', () => { - editor.updateInstanceState({ screenBounds: { ...editor.viewportScreenBounds, x: 0, y: 0 } }) + editor.updateInstanceState({ + screenBounds: { ...editor.getViewportScreenBounds(), x: 0, y: 0 }, + }) editor.setCamera({ x: 100, y: 100, z: 1 }) checkScreenPage({ x: 0, y: 0 }, { x: -100, y: -100 }) @@ -120,7 +136,9 @@ describe('viewport.screenToPage', () => { }) it('converts correctly when panned and zoomed', () => { - editor.updateInstanceState({ screenBounds: { ...editor.viewportScreenBounds, x: 0, y: 0 } }) + editor.updateInstanceState({ + screenBounds: { ...editor.getViewportScreenBounds(), x: 0, y: 0 }, + }) editor.setCamera({ x: 100, y: 100, z: 0.5 }) checkScreenPage({ x: 0, y: 0 }, { x: -100, y: -100 }) @@ -129,7 +147,9 @@ describe('viewport.screenToPage', () => { }) it('converts correctly when panned and zoomed and offset', () => { - editor.updateInstanceState({ screenBounds: { ...editor.viewportScreenBounds, x: 100, y: 100 } }) + editor.updateInstanceState({ + screenBounds: { ...editor.getViewportScreenBounds(), x: 100, y: 100 }, + }) editor.setCamera({ x: 100, y: 100, z: 0.5 }) checkScreenPage({ x: 0, y: 0 }, { x: -300, y: -300 }) @@ -141,11 +161,11 @@ describe('viewport.screenToPage', () => { describe('viewportPageBounds', () => { it('sets the page bounds', () => { editor.updateInstanceState({ - screenBounds: { ...editor.viewportScreenBounds, x: 0, y: 0, w: 1000, h: 1000 }, + screenBounds: { ...editor.getViewportScreenBounds(), x: 0, y: 0, w: 1000, h: 1000 }, }) editor.setCamera({ x: 0, y: 0, z: 1 }) - expect(editor.viewportPageBounds).toMatchObject({ + expect(editor.getViewportPageBounds()).toMatchObject({ x: -0, y: -0, w: 1000, @@ -155,11 +175,11 @@ describe('viewportPageBounds', () => { it('sets the page bounds when camera is zoomed', () => { editor.updateInstanceState({ - screenBounds: { ...editor.viewportScreenBounds, x: 0, y: 0, w: 1000, h: 1000 }, + screenBounds: { ...editor.getViewportScreenBounds(), x: 0, y: 0, w: 1000, h: 1000 }, }) editor.setCamera({ x: 0, y: 0, z: 2 }) - expect(editor.viewportPageBounds).toMatchObject({ + expect(editor.getViewportPageBounds()).toMatchObject({ x: -0, y: -0, w: 500, @@ -167,7 +187,7 @@ describe('viewportPageBounds', () => { }) editor.setCamera({ x: 0, y: 0, z: 0.5 }) - expect(editor.viewportPageBounds).toMatchObject({ + expect(editor.getViewportPageBounds()).toMatchObject({ x: -0, y: -0, w: 2000, @@ -177,11 +197,11 @@ describe('viewportPageBounds', () => { it('sets the page bounds when camera is panned', () => { editor.updateInstanceState({ - screenBounds: { ...editor.viewportScreenBounds, x: 0, y: 0, w: 1000, h: 1000 }, + screenBounds: { ...editor.getViewportScreenBounds(), x: 0, y: 0, w: 1000, h: 1000 }, }) editor.setCamera({ x: 100, y: 100, z: 1 }) - expect(editor.viewportPageBounds).toMatchObject({ + expect(editor.getViewportPageBounds()).toMatchObject({ x: -100, y: -100, w: 1000, @@ -193,11 +213,11 @@ describe('viewportPageBounds', () => { it('sets the page bounds when camera is panned and zoomed', () => { editor.updateInstanceState({ - screenBounds: { ...editor.viewportScreenBounds, x: 0, y: 0, w: 1000, h: 1000 }, + screenBounds: { ...editor.getViewportScreenBounds(), x: 0, y: 0, w: 1000, h: 1000 }, }) editor.setCamera({ x: 100, y: 100, z: 2 }) - expect(editor.viewportPageBounds).toMatchObject({ + expect(editor.getViewportPageBounds()).toMatchObject({ x: -100, y: -100, w: 500, @@ -209,12 +229,12 @@ describe('viewportPageBounds', () => { it('sets the page bounds when viewport is offset', () => { editor.updateInstanceState({ - screenBounds: { ...editor.viewportScreenBounds, x: 100, y: 100, w: 1000, h: 1000 }, + screenBounds: { ...editor.getViewportScreenBounds(), x: 100, y: 100, w: 1000, h: 1000 }, }) editor.setCamera({ x: 0, y: 0, z: 2 }) // changing the screen bounds should not affect the page bounds - expect(editor.viewportPageBounds).toMatchObject({ + expect(editor.getViewportPageBounds()).toMatchObject({ x: -0, y: -0, w: 500, diff --git a/packages/tldraw/src/test/commands/updateViewportPageBounds.test.ts b/packages/tldraw/src/test/commands/updateViewportPageBounds.test.ts index 0fb71cd07..4fc00916a 100644 --- a/packages/tldraw/src/test/commands/updateViewportPageBounds.test.ts +++ b/packages/tldraw/src/test/commands/updateViewportPageBounds.test.ts @@ -17,7 +17,7 @@ beforeEach(() => { describe('When resizing', () => { it('sets the viewport bounds with Editor.resize', () => { editor.setScreenBounds({ x: 100, y: 200, w: 700, h: 600 }) - expect(editor.viewportScreenBounds).toMatchObject({ + expect(editor.getViewportScreenBounds()).toMatchObject({ x: 100, y: 200, w: 700, @@ -30,7 +30,7 @@ describe('When resizing', () => { editor.undo() // this should have no effect - expect(editor.viewportScreenBounds).toMatchObject({ + expect(editor.getViewportScreenBounds()).toMatchObject({ x: 100, y: 200, w: 700, @@ -40,7 +40,7 @@ describe('When resizing', () => { it('clamps bounds to minimim 0,0,1,1', () => { editor.setScreenBounds({ x: -100, y: -200, w: -700, h: 0 }) - expect(editor.viewportScreenBounds).toMatchObject({ + expect(editor.getViewportScreenBounds()).toMatchObject({ x: -100, y: -200, w: 1, @@ -54,7 +54,7 @@ describe('When center is false', () => { const a = editor.screenToPage({ x: 0, y: 0 }) expect(a).toMatchObject({ x: 0, y: 0 }) editor.setScreenBounds({ x: 100, y: 200, w: 500, h: 600 }, false) - expect(editor.viewportScreenBounds).toMatchObject({ + expect(editor.getViewportScreenBounds()).toMatchObject({ x: 100, y: 200, w: 500, @@ -70,7 +70,7 @@ describe('When center is false', () => { expect(a).toMatchObject({ x: 100, y: 100 }) editor.setScreenBounds({ x: 100, y: 200, w: 500, h: 600 }, false) - expect(editor.viewportScreenBounds).toMatchObject({ + expect(editor.getViewportScreenBounds()).toMatchObject({ x: 100, y: 200, w: 500, @@ -87,7 +87,7 @@ describe('When center is false', () => { expect(editor.screenToPage({ x: 0, y: 0 })).toMatchObject({ x: 100, y: 100 }) editor.setScreenBounds({ x: 100, y: 100, w: 500, h: 600 }, false) - expect(editor.viewportScreenBounds).toMatchObject({ + expect(editor.getViewportScreenBounds()).toMatchObject({ x: 100, y: 100, w: 500, @@ -99,17 +99,17 @@ describe('When center is false', () => { describe('When center is true', () => { it('keep the same page center when resized', () => { - const a = editor.viewportPageCenter.toJson() + const a = editor.getViewportPageCenter().toJson() editor.setScreenBounds({ x: 100, y: 200, w: 500, h: 600 }, true) - const b = editor.viewportPageCenter.toJson() + const b = editor.getViewportPageCenter().toJson() expect(a).toMatchObject(b) }) it('keep the same page center when resized while panned / zoomed', () => { editor.setCamera({ x: -100, y: -100, z: 1.2 }) - const a = editor.viewportPageCenter.toJson() + const a = editor.getViewportPageCenter().toJson() editor.setScreenBounds({ x: 100, y: 200, w: 500, h: 600 }, true) - const b = editor.viewportPageCenter.toJson() + const b = editor.getViewportPageCenter().toJson() expect(a).toMatchObject(b) }) }) diff --git a/packages/tldraw/src/test/commands/zoomIn.test.ts b/packages/tldraw/src/test/commands/zoomIn.test.ts index fe9eab704..c11afcadd 100644 --- a/packages/tldraw/src/test/commands/zoomIn.test.ts +++ b/packages/tldraw/src/test/commands/zoomIn.test.ts @@ -9,29 +9,29 @@ beforeEach(() => { it('zooms by increments', () => { // Starts at 1 - expect(editor.zoomLevel).toBe(1) - expect(editor.zoomLevel).toBe(ZOOMS[3]) + expect(editor.getZoomLevel()).toBe(1) + expect(editor.getZoomLevel()).toBe(ZOOMS[3]) // zooms in - expect(editor.zoomLevel).toBe(ZOOMS[3]) + expect(editor.getZoomLevel()).toBe(ZOOMS[3]) editor.zoomIn() - expect(editor.zoomLevel).toBe(ZOOMS[4]) + expect(editor.getZoomLevel()).toBe(ZOOMS[4]) editor.zoomIn() - expect(editor.zoomLevel).toBe(ZOOMS[5]) + expect(editor.getZoomLevel()).toBe(ZOOMS[5]) editor.zoomIn() - expect(editor.zoomLevel).toBe(ZOOMS[6]) + expect(editor.getZoomLevel()).toBe(ZOOMS[6]) // does not zoom in past max editor.zoomIn() - expect(editor.zoomLevel).toBe(ZOOMS[6]) + expect(editor.getZoomLevel()).toBe(ZOOMS[6]) }) it('zooms to from B to D when B >= (C - A)/2, else zooms from B to C', () => { editor.setCamera({ x: 0, y: 0, z: (ZOOMS[2] + ZOOMS[3]) / 2 }) editor.zoomIn() - expect(editor.zoomLevel).toBe(ZOOMS[4]) + expect(editor.getZoomLevel()).toBe(ZOOMS[4]) editor.setCamera({ x: 0, y: 0, z: (ZOOMS[2] + ZOOMS[3]) / 2 - 0.1 }) editor.zoomIn() - expect(editor.zoomLevel).toBe(ZOOMS[3]) + expect(editor.getZoomLevel()).toBe(ZOOMS[3]) }) it('does not zoom when camera is frozen', () => { diff --git a/packages/tldraw/src/test/commands/zoomOut.test.ts b/packages/tldraw/src/test/commands/zoomOut.test.ts index ca3fedc7e..aec509e5f 100644 --- a/packages/tldraw/src/test/commands/zoomOut.test.ts +++ b/packages/tldraw/src/test/commands/zoomOut.test.ts @@ -9,17 +9,17 @@ beforeEach(() => { it('zooms by increments', () => { // Starts at 1 - expect(editor.zoomLevel).toBe(1) - expect(editor.zoomLevel).toBe(ZOOMS[3]) + expect(editor.getZoomLevel()).toBe(1) + expect(editor.getZoomLevel()).toBe(ZOOMS[3]) editor.zoomOut() - expect(editor.zoomLevel).toBe(ZOOMS[2]) + expect(editor.getZoomLevel()).toBe(ZOOMS[2]) editor.zoomOut() - expect(editor.zoomLevel).toBe(ZOOMS[1]) + expect(editor.getZoomLevel()).toBe(ZOOMS[1]) editor.zoomOut() - expect(editor.zoomLevel).toBe(ZOOMS[0]) + expect(editor.getZoomLevel()).toBe(ZOOMS[0]) // does not zoom out past min editor.zoomOut() - expect(editor.zoomLevel).toBe(ZOOMS[0]) + expect(editor.getZoomLevel()).toBe(ZOOMS[0]) }) it('does not zoom out when camera is frozen', () => { diff --git a/packages/tldraw/src/test/commands/zoomToBounds.test.ts b/packages/tldraw/src/test/commands/zoomToBounds.test.ts index 9ba73dcfa..42eb58dc3 100644 --- a/packages/tldraw/src/test/commands/zoomToBounds.test.ts +++ b/packages/tldraw/src/test/commands/zoomToBounds.test.ts @@ -9,15 +9,15 @@ beforeEach(() => { describe('When zooming to bounds', () => { it('centers the camera on the new bounds', () => { - expect(editor.viewportPageCenter).toMatchObject({ x: 540, y: 360 }) + expect(editor.getViewportPageCenter()).toMatchObject({ x: 540, y: 360 }) editor.setScreenBounds({ x: 0, y: 0, w: 1000, h: 1000 }) - expect(editor.viewportPageCenter).toMatchObject({ x: 500, y: 500 }) + expect(editor.getViewportPageCenter()).toMatchObject({ x: 500, y: 500 }) editor.setCamera({ x: 0, y: 0, z: 1 }) - expect(editor.viewportPageBounds).toCloselyMatchObject({ + expect(editor.getViewportPageBounds()).toCloselyMatchObject({ x: -0, y: -0, w: 1000, @@ -26,25 +26,25 @@ describe('When zooming to bounds', () => { editor.zoomToBounds(new Box2d(200, 300, 300, 300)) expect(editor.getCamera().z).toCloselyMatchObject((1000 - 256) / 300) - expect(editor.viewportPageBounds.width).toCloselyMatchObject(1000 / ((1000 - 256) / 300)) - expect(editor.viewportPageBounds.height).toCloselyMatchObject(1000 / ((1000 - 256) / 300)) + expect(editor.getViewportPageBounds().width).toCloselyMatchObject(1000 / ((1000 - 256) / 300)) + expect(editor.getViewportPageBounds().height).toCloselyMatchObject(1000 / ((1000 - 256) / 300)) }) }) it('does not zoom past max', () => { editor.zoomToBounds(new Box2d(0, 0, 1, 1)) - expect(editor.zoomLevel).toBe(8) + expect(editor.getZoomLevel()).toBe(8) }) it('does not zoom past min', () => { editor.zoomToBounds(new Box2d(0, 0, 1000000, 100000)) - expect(editor.zoomLevel).toBe(0.1) + expect(editor.getZoomLevel()).toBe(0.1) }) it('does not zoom to bounds when camera is frozen', () => { editor.setScreenBounds({ x: 0, y: 0, w: 1000, h: 1000 }) - expect(editor.viewportPageCenter.toJson()).toCloselyMatchObject({ x: 500, y: 500 }) + expect(editor.getViewportPageCenter().toJson()).toCloselyMatchObject({ x: 500, y: 500 }) editor.updateInstanceState({ canMoveCamera: false }) editor.zoomToBounds(new Box2d(200, 300, 300, 300)) - expect(editor.viewportPageCenter.toJson()).toCloselyMatchObject({ x: 500, y: 500 }) + expect(editor.getViewportPageCenter().toJson()).toCloselyMatchObject({ x: 500, y: 500 }) }) diff --git a/packages/tldraw/src/test/commands/zoomToSelection.test.ts b/packages/tldraw/src/test/commands/zoomToSelection.test.ts index ed4fd7e63..b49215ecd 100644 --- a/packages/tldraw/src/test/commands/zoomToSelection.test.ts +++ b/packages/tldraw/src/test/commands/zoomToSelection.test.ts @@ -23,14 +23,14 @@ it('does not zoom past max', () => { editor.updateShapes([{ id: ids.box1, type: 'geo', props: { w: 1, h: 1 } }]) editor.select(ids.box1) editor.zoomToSelection() - expect(editor.zoomLevel).toBe(1) // double check again when we're zooming in hard + expect(editor.getZoomLevel()).toBe(1) // double check again when we're zooming in hard }) it('does not zoom past min', () => { editor.updateShapes([{ id: ids.box1, type: 'geo', props: { w: 100000, h: 100000 } }]) editor.select(ids.box1) editor.zoomToSelection() - expect(editor.zoomLevel).toBe(0.1) + expect(editor.getZoomLevel()).toBe(0.1) }) it('does not zoom to selection when camera is frozen', () => { diff --git a/packages/tldraw/src/test/paste.test.ts b/packages/tldraw/src/test/paste.test.ts index 47dacee33..a31b9a51d 100644 --- a/packages/tldraw/src/test/paste.test.ts +++ b/packages/tldraw/src/test/paste.test.ts @@ -460,11 +460,11 @@ describe('When pasting into frames...', () => { { id: ids.frame1, type: 'frame', - x: editor.viewportScreenBounds.w, - y: editor.viewportScreenBounds.h, + x: editor.getViewportScreenBounds().w, + y: editor.getViewportScreenBounds().h, props: { - w: editor.viewportScreenBounds.w, - h: editor.viewportScreenBounds.h, + w: editor.getViewportScreenBounds().w, + h: editor.getViewportScreenBounds().h, }, }, ]) @@ -472,7 +472,11 @@ describe('When pasting into frames...', () => { // rotate the frame for hard mode editor.rotateSelection(45) // center on the center of the frame - editor.setCamera({ x: -editor.viewportScreenBounds.w, y: -editor.viewportScreenBounds.h, z: 1 }) + editor.setCamera({ + x: -editor.getViewportScreenBounds().w, + y: -editor.getViewportScreenBounds().h, + z: 1, + }) // paste the box editor.paste() const boxId = editor.getOnlySelectedShape()!.id diff --git a/packages/tldraw/src/test/translating.test.ts b/packages/tldraw/src/test/translating.test.ts index 12752bbe5..5792e073f 100644 --- a/packages/tldraw/src/test/translating.test.ts +++ b/packages/tldraw/src/test/translating.test.ts @@ -562,7 +562,7 @@ describe('snapping with single shapes', () => { editor.pointerDown(25, 5, ids.box2).pointerMove(36, 5, { ctrlKey: true }) expect(editor.snaps.lines!.length).toBe(0) - editor.updateShapes([{ id: ids.box1, type: 'geo', x: editor.viewportScreenBounds.w + 10 }]) + editor.updateShapes([{ id: ids.box1, type: 'geo', x: editor.getViewportScreenBounds().w + 10 }]) editor.pointerMove(33, 5, { ctrlKey: true }) expect(editor.snaps.lines!.length).toBe(0) @@ -572,7 +572,7 @@ describe('snapping with single shapes', () => { expect(editor.snaps.lines!.length).toBe(0) editor.updateShapes([ - { id: ids.box1, type: 'geo', x: 0, y: editor.viewportScreenBounds.h + 10 }, + { id: ids.box1, type: 'geo', x: 0, y: editor.getViewportScreenBounds().h + 10 }, ]) editor.pointerMove(5, 5, { ctrlKey: true })