From be93cc0eb6d8554d04273d67dbb2a08dfb8e469c Mon Sep 17 00:00:00 2001 From: David Sheldrick Date: Tue, 12 Dec 2023 11:36:52 +0000 Subject: [PATCH] Revert "zoom to affected shapes after undo/redo" (#2310) Reverts tldraw/tldraw#2293 --- .github/workflows/checks.yml | 2 +- .../workflows/playwright-update-snapshots.yml | 2 +- .github/workflows/playwright.yml | 2 +- .github/workflows/publish-canary.yml | 2 +- .github/workflows/publish-manual.yml | 2 +- .github/workflows/publish-new.yml | 2 +- packages/editor/src/lib/editor/Editor.ts | 32 +------ packages/tldraw/src/test/Editor.test.tsx | 87 ------------------- 8 files changed, 8 insertions(+), 123 deletions(-) diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml index bba3b10e2..7e010baa2 100644 --- a/.github/workflows/checks.yml +++ b/.github/workflows/checks.yml @@ -27,7 +27,7 @@ jobs: - name: Setup Node.js environment uses: actions/setup-node@v3 with: - node-version: 18 + node-version: 18.18.2 cache: 'yarn' cache-dependency-path: 'public-yarn.lock' diff --git a/.github/workflows/playwright-update-snapshots.yml b/.github/workflows/playwright-update-snapshots.yml index 0cbdb965f..33535d911 100644 --- a/.github/workflows/playwright-update-snapshots.yml +++ b/.github/workflows/playwright-update-snapshots.yml @@ -54,7 +54,7 @@ jobs: - name: Setup Node.js environment uses: actions/setup-node@v3 with: - node-version: 18 + node-version: 18.18.2 cache: 'yarn' cache-dependency-path: 'public-yarn.lock' diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml index 2605abd2f..b589206d8 100644 --- a/.github/workflows/playwright.yml +++ b/.github/workflows/playwright.yml @@ -27,7 +27,7 @@ jobs: - name: Setup Node.js environment uses: actions/setup-node@v3 with: - node-version: 18 + node-version: 18.18.2 cache: 'yarn' cache-dependency-path: 'public-yarn.lock' diff --git a/.github/workflows/publish-canary.yml b/.github/workflows/publish-canary.yml index ed83d8ce6..ed11efec5 100644 --- a/.github/workflows/publish-canary.yml +++ b/.github/workflows/publish-canary.yml @@ -20,7 +20,7 @@ jobs: - name: Setup Node.js environment uses: actions/setup-node@v3 with: - node-version: 18 + node-version: 18.18.2 cache: 'yarn' cache-dependency-path: 'public-yarn.lock' diff --git a/.github/workflows/publish-manual.yml b/.github/workflows/publish-manual.yml index 0aa20f510..bc13a8056 100644 --- a/.github/workflows/publish-manual.yml +++ b/.github/workflows/publish-manual.yml @@ -19,7 +19,7 @@ jobs: - name: Setup Node.js environment uses: actions/setup-node@v3 with: - node-version: 18 + node-version: 18.18.2 cache: 'yarn' cache-dependency-path: 'public-yarn.lock' diff --git a/.github/workflows/publish-new.yml b/.github/workflows/publish-new.yml index 32a2e0d32..731c43bdd 100644 --- a/.github/workflows/publish-new.yml +++ b/.github/workflows/publish-new.yml @@ -31,7 +31,7 @@ jobs: - name: Setup Node.js environment uses: actions/setup-node@v3 with: - node-version: 18 + node-version: 18.18.2 cache: 'yarn' cache-dependency-path: 'public-yarn.lock' diff --git a/packages/editor/src/lib/editor/Editor.ts b/packages/editor/src/lib/editor/Editor.ts index 597d2bcbd..c5aa2753b 100644 --- a/packages/editor/src/lib/editor/Editor.ts +++ b/packages/editor/src/lib/editor/Editor.ts @@ -99,7 +99,6 @@ import { sortByIndex, } from '../utils/reordering/reordering' import { applyRotationToSnapshotShapes, getRotationSnapshot } from '../utils/rotation' -import { uniq } from '../utils/uniq' import { uniqueId } from '../utils/uniqueId' import { arrowBindingsIndex } from './derivations/arrowBindingsIndex' import { parentsToChildren } from './derivations/parentsToChildren' @@ -782,29 +781,6 @@ export class Editor extends EventEmitter { } ) - 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. * @@ -816,9 +792,7 @@ export class Editor extends EventEmitter { * @public */ undo(): this { - this._ensureAffectedShapesAreMadeVisible(() => { - this.history.undo() - }) + this.history.undo() return this } @@ -851,9 +825,7 @@ export class Editor extends EventEmitter { * @public */ redo(): this { - this._ensureAffectedShapesAreMadeVisible(() => { - this.history.redo() - }) + this.history.redo() return this } diff --git a/packages/tldraw/src/test/Editor.test.tsx b/packages/tldraw/src/test/Editor.test.tsx index 46d92ab27..c138e0b3e 100644 --- a/packages/tldraw/src/test/Editor.test.tsx +++ b/packages/tldraw/src/test/Editor.test.tsx @@ -1,7 +1,6 @@ import { AssetRecordType, BaseBoxShapeUtil, - Box2d, PageRecordType, TLShape, createShapeId, @@ -646,89 +645,3 @@ describe('when the user prefers light UI', () => { 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, - } - `) - }) -})