From 35049e3de73ba63a7f3b2aaa5763716ecf06f4b7 Mon Sep 17 00:00:00 2001 From: David Luzar Date: Mon, 25 May 2020 00:17:14 +0200 Subject: [PATCH] History tweaks (#1641) Co-authored-by: Pete Hunt --- src/element/mutateElement.ts | 4 +- src/history.ts | 44 +++++-------------- .../regressionTests.test.tsx.snap | 20 ++++----- 3 files changed, 22 insertions(+), 46 deletions(-) diff --git a/src/element/mutateElement.ts b/src/element/mutateElement.ts index 2f15687f..fd39bd65 100644 --- a/src/element/mutateElement.ts +++ b/src/element/mutateElement.ts @@ -6,7 +6,7 @@ import { randomInteger } from "../random"; type ElementUpdate = Omit< Partial, - "id" | "seed" + "id" | "seed" | "version" | "versionNonce" >; // This function tracks updates of text elements for the purposes for collaboration. @@ -52,7 +52,7 @@ export const newElementWith = ( updates: ElementUpdate, ): TElement => ({ ...element, + ...updates, version: element.version + 1, versionNonce: randomInteger(), - ...updates, }); diff --git a/src/history.ts b/src/history.ts index a33ee229..a2b0a7aa 100644 --- a/src/history.ts +++ b/src/history.ts @@ -1,6 +1,5 @@ import { AppState } from "./types"; import { ExcalidrawElement } from "./element/types"; -import { newElementWith } from "./element/mutateElement"; import { isLinearElement } from "./element/typeChecks"; import { deepCopyElement } from "./element/newElement"; @@ -11,12 +10,11 @@ export interface HistoryEntry { interface DehydratedExcalidrawElement { id: string; - version: number; versionNonce: number; } interface DehydratedHistoryEntry { - appState: ReturnType; + appState: string; elements: DehydratedExcalidrawElement[]; } @@ -29,10 +27,7 @@ const clearAppStatePropertiesForHistory = (appState: AppState) => { }; export class SceneHistory { - private elementCache = new Map< - string, - Map> - >(); + private elementCache = new Map>(); private recording: boolean = true; private stateHistory: DehydratedHistoryEntry[] = []; private redoStack: DehydratedHistoryEntry[] = []; @@ -43,18 +38,16 @@ export class SceneHistory { elements, }: DehydratedHistoryEntry): HistoryEntry { return { - appState, + appState: JSON.parse(appState), elements: elements.map((dehydratedExcalidrawElement) => { const element = this.elementCache .get(dehydratedExcalidrawElement.id) - ?.get(dehydratedExcalidrawElement.version) ?.get(dehydratedExcalidrawElement.versionNonce); if (!element) { throw new Error( - `Element not found: ${dehydratedExcalidrawElement.id}:${dehydratedExcalidrawElement.version}:${dehydratedExcalidrawElement.versionNonce}`, + `Element not found: ${dehydratedExcalidrawElement.id}:${dehydratedExcalidrawElement.versionNonce}`, ); } - return element; }), }; @@ -65,22 +58,17 @@ export class SceneHistory { elements, }: HistoryEntry): DehydratedHistoryEntry { return { - appState, - elements: elements.map((element) => { + appState: JSON.stringify(appState), + elements: elements.map((element: ExcalidrawElement) => { if (!this.elementCache.has(element.id)) { this.elementCache.set(element.id, new Map()); } const versions = this.elementCache.get(element.id)!; - if (!versions.has(element.version)) { - versions.set(element.version, new Map()); - } - const nonces = versions.get(element.version)!; - if (!nonces.has(element.versionNonce)) { - nonces.set(element.versionNonce, deepCopyElement(element)); + if (!versions.has(element.versionNonce)) { + versions.set(element.versionNonce, deepCopyElement(element)); } return { id: element.id, - version: element.version, versionNonce: element.versionNonce, }; }), @@ -162,7 +150,6 @@ export class SceneHistory { !prev || !next || prev.id !== next.id || - prev.version !== next.version || prev.versionNonce !== next.versionNonce ) { return true; @@ -199,17 +186,6 @@ export class SceneHistory { } } - private restoreEntry(entrySerialized: DehydratedHistoryEntry): HistoryEntry { - const entry = this.hydrateHistoryEntry(entrySerialized); - if (entry) { - entry.elements = entry.elements.map((element) => { - // renew versions - return newElementWith(element, {}); - }); - } - return entry; - } - clearRedoStack() { this.redoStack.splice(0, this.redoStack.length); } @@ -223,7 +199,7 @@ export class SceneHistory { if (entryToRestore !== undefined) { this.stateHistory.push(entryToRestore); - return this.restoreEntry(entryToRestore); + return this.hydrateHistoryEntry(entryToRestore); } return null; @@ -240,7 +216,7 @@ export class SceneHistory { if (currentEntry !== undefined) { this.redoStack.push(currentEntry); - return this.restoreEntry(entryToRestore); + return this.hydrateHistoryEntry(entryToRestore); } return null; diff --git a/src/tests/__snapshots__/regressionTests.test.tsx.snap b/src/tests/__snapshots__/regressionTests.test.tsx.snap index 9ac95364..b75d4197 100644 --- a/src/tests/__snapshots__/regressionTests.test.tsx.snap +++ b/src/tests/__snapshots__/regressionTests.test.tsx.snap @@ -3697,8 +3697,8 @@ Object { "strokeStyle": "solid", "strokeWidth": 1, "type": "rectangle", - "version": 3, - "versionNonce": 1014066025, + "version": 4, + "versionNonce": 1116226695, "width": 10, "x": 10, "y": 10, @@ -3720,8 +3720,8 @@ Object { "strokeStyle": "solid", "strokeWidth": 1, "type": "rectangle", - "version": 3, - "versionNonce": 238820263, + "version": 4, + "versionNonce": 1014066025, "width": 10, "x": 30, "y": 10, @@ -12061,8 +12061,8 @@ Object { "strokeStyle": "solid", "strokeWidth": 1, "type": "rectangle", - "version": 3, - "versionNonce": 941653321, + "version": 6, + "versionNonce": 1006504105, "width": 10, "x": 10, "y": 10, @@ -12084,8 +12084,8 @@ Object { "strokeStyle": "solid", "strokeWidth": 1, "type": "rectangle", - "version": 3, - "versionNonce": 908564423, + "version": 6, + "versionNonce": 289600103, "width": 10, "x": 30, "y": 10, @@ -12121,8 +12121,8 @@ Object { "strokeStyle": "solid", "strokeWidth": 1, "type": "arrow", - "version": 9, - "versionNonce": 1349943049, + "version": 11, + "versionNonce": 1315507081, "width": 10, "x": 10, "y": 30,