Revert "zoom to affected shapes after undo/redo" (#2310)
Reverts tldraw/tldraw#2293
This commit is contained in:
parent
f7ae99dd1f
commit
be93cc0eb6
8 changed files with 8 additions and 123 deletions
2
.github/workflows/checks.yml
vendored
2
.github/workflows/checks.yml
vendored
|
@ -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'
|
||||||
|
|
||||||
|
|
|
@ -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'
|
||||||
|
|
||||||
|
|
2
.github/workflows/playwright.yml
vendored
2
.github/workflows/playwright.yml
vendored
|
@ -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'
|
||||||
|
|
||||||
|
|
2
.github/workflows/publish-canary.yml
vendored
2
.github/workflows/publish-canary.yml
vendored
|
@ -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'
|
||||||
|
|
||||||
|
|
2
.github/workflows/publish-manual.yml
vendored
2
.github/workflows/publish-manual.yml
vendored
|
@ -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'
|
||||||
|
|
||||||
|
|
2
.github/workflows/publish-new.yml
vendored
2
.github/workflows/publish-new.yml
vendored
|
@ -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'
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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,
|
|
||||||
}
|
|
||||||
`)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
Loading…
Reference in a new issue