Revert "zoom to affected shapes after undo/redo" (#2310)

Reverts tldraw/tldraw#2293
This commit is contained in:
David Sheldrick 2023-12-12 11:36:52 +00:00 committed by GitHub
parent f7ae99dd1f
commit be93cc0eb6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 8 additions and 123 deletions

View file

@ -27,7 +27,7 @@ jobs:
- name: Setup Node.js environment - name: Setup Node.js environment
uses: actions/setup-node@v3 uses: actions/setup-node@v3
with: with:
node-version: 18 node-version: 18.18.2
cache: 'yarn' cache: 'yarn'
cache-dependency-path: 'public-yarn.lock' cache-dependency-path: 'public-yarn.lock'

View file

@ -54,7 +54,7 @@ jobs:
- name: Setup Node.js environment - name: Setup Node.js environment
uses: actions/setup-node@v3 uses: actions/setup-node@v3
with: with:
node-version: 18 node-version: 18.18.2
cache: 'yarn' cache: 'yarn'
cache-dependency-path: 'public-yarn.lock' cache-dependency-path: 'public-yarn.lock'

View file

@ -27,7 +27,7 @@ jobs:
- name: Setup Node.js environment - name: Setup Node.js environment
uses: actions/setup-node@v3 uses: actions/setup-node@v3
with: with:
node-version: 18 node-version: 18.18.2
cache: 'yarn' cache: 'yarn'
cache-dependency-path: 'public-yarn.lock' cache-dependency-path: 'public-yarn.lock'

View file

@ -20,7 +20,7 @@ jobs:
- name: Setup Node.js environment - name: Setup Node.js environment
uses: actions/setup-node@v3 uses: actions/setup-node@v3
with: with:
node-version: 18 node-version: 18.18.2
cache: 'yarn' cache: 'yarn'
cache-dependency-path: 'public-yarn.lock' cache-dependency-path: 'public-yarn.lock'

View file

@ -19,7 +19,7 @@ jobs:
- name: Setup Node.js environment - name: Setup Node.js environment
uses: actions/setup-node@v3 uses: actions/setup-node@v3
with: with:
node-version: 18 node-version: 18.18.2
cache: 'yarn' cache: 'yarn'
cache-dependency-path: 'public-yarn.lock' cache-dependency-path: 'public-yarn.lock'

View file

@ -31,7 +31,7 @@ jobs:
- name: Setup Node.js environment - name: Setup Node.js environment
uses: actions/setup-node@v3 uses: actions/setup-node@v3
with: with:
node-version: 18 node-version: 18.18.2
cache: 'yarn' cache: 'yarn'
cache-dependency-path: 'public-yarn.lock' cache-dependency-path: 'public-yarn.lock'

View file

@ -99,7 +99,6 @@ import {
sortByIndex, sortByIndex,
} from '../utils/reordering/reordering' } from '../utils/reordering/reordering'
import { applyRotationToSnapshotShapes, getRotationSnapshot } from '../utils/rotation' import { applyRotationToSnapshotShapes, getRotationSnapshot } from '../utils/rotation'
import { uniq } from '../utils/uniq'
import { uniqueId } from '../utils/uniqueId' import { uniqueId } from '../utils/uniqueId'
import { arrowBindingsIndex } from './derivations/arrowBindingsIndex' import { arrowBindingsIndex } from './derivations/arrowBindingsIndex'
import { parentsToChildren } from './derivations/parentsToChildren' import { parentsToChildren } from './derivations/parentsToChildren'
@ -782,29 +781,6 @@ export class Editor extends EventEmitter<TLEventMap> {
} }
) )
private _ensureAffectedShapesAreMadeVisible(fn: () => void) {
// here we collect all the ids of shapes that are created or updated by the function
// along with the selectedIds of the current page
// then we attempt to make sure that they are all visible in the viewport after
// the function is run.
const changes = this.store.extractingChanges(fn)
const affectedRecordIds = uniq(
Object.keys(changes.added)
.concat(Object.keys(changes.updated))
.concat(this.getSelectedShapeIds())
)
const shapes = compact(
affectedRecordIds.map((id) => (isShapeId(id) ? this.getShape(id) : null))
)
if (!shapes.length) return this
const bounds = Box2d.Common(compact(shapes.map((shape) => this.getShapePageBounds(shape))))
const viewport = this.getViewportPageBounds()
if (!viewport.contains(bounds)) {
this.zoomToBounds(bounds, this.getCamera().z, { duration: 220 })
}
return this
}
/** /**
* Undo to the last mark. * Undo to the last mark.
* *
@ -816,9 +792,7 @@ export class Editor extends EventEmitter<TLEventMap> {
* @public * @public
*/ */
undo(): this { undo(): this {
this._ensureAffectedShapesAreMadeVisible(() => {
this.history.undo() this.history.undo()
})
return this return this
} }
@ -851,9 +825,7 @@ export class Editor extends EventEmitter<TLEventMap> {
* @public * @public
*/ */
redo(): this { redo(): this {
this._ensureAffectedShapesAreMadeVisible(() => {
this.history.redo() this.history.redo()
})
return this return this
} }

View file

@ -1,7 +1,6 @@
import { import {
AssetRecordType, AssetRecordType,
BaseBoxShapeUtil, BaseBoxShapeUtil,
Box2d,
PageRecordType, PageRecordType,
TLShape, TLShape,
createShapeId, createShapeId,
@ -646,89 +645,3 @@ describe('when the user prefers light UI', () => {
expect(editor.user.getIsDarkMode()).toBe(false) expect(editor.user.getIsDarkMode()).toBe(false)
}) })
}) })
describe('undo and redo', () => {
test('cause the camera to move if the affected shapes are offscreen', () => {
editor = new TestEditor({})
editor.setScreenBounds(new Box2d(0, 0, 1000, 1000))
editor.user.updateUserPreferences({ animationSpeed: 0 })
const boxId = createShapeId('box')
editor.createShapes([{ id: boxId, type: 'geo', x: 100, y: 100, props: { w: 100, h: 100 } }])
editor.panZoomIntoView([boxId])
editor.mark()
const cameraBefore = editor.getCamera()
editor.updateShapes([
{
id: boxId,
type: 'geo',
x: 100,
y: 100,
props: {
geo: 'cloud',
w: 100,
h: 100,
},
},
])
expect(editor.getCamera()).toMatchInlineSnapshot(`
Object {
"id": "camera:page:page",
"meta": Object {},
"typeName": "camera",
"x": 0,
"y": 0,
"z": 1,
}
`)
editor.undo()
expect(editor.getCamera()).toEqual(cameraBefore)
editor.updateShapes([
{
id: boxId,
type: 'geo',
x: -500,
y: -500,
},
])
editor.mark()
editor.updateShapes([
{
id: boxId,
type: 'geo',
x: 500,
y: 500,
},
])
editor.undo()
expect(editor.getCamera()).not.toEqual(cameraBefore)
expect(editor.getCamera()).toMatchInlineSnapshot(`
Object {
"id": "camera:page:page",
"meta": Object {},
"typeName": "camera",
"x": 950,
"y": 950,
"z": 1,
}
`)
editor.redo()
expect(editor.getCamera()).toMatchInlineSnapshot(`
Object {
"id": "camera:page:page",
"meta": Object {},
"typeName": "camera",
"x": -50,
"y": -50,
"z": 1,
}
`)
})
})