fix: make history local to a given excalidraw instance (#3481)

* fix: make history local to a given excalidraw instance

* changelog

* Update src/packages/excalidraw/CHANGELOG.md
This commit is contained in:
Aakansha Doshi 2021-04-24 18:21:02 +05:30 committed by GitHub
parent 891ac82447
commit d3106495b2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 33 additions and 411 deletions

View file

@ -137,7 +137,7 @@ import {
isSelectedViaGroup,
selectGroupsForSelectedElements,
} from "../groups";
import { createHistory, SceneHistory } from "../history";
import History from "../history";
import { defaultLang, getLanguage, languages, setLanguage, t } from "../i18n";
import {
CODES,
@ -203,8 +203,6 @@ const ExcalidrawContainerContext = React.createContext<HTMLDivElement | null>(
export const useExcalidrawContainer = () =>
useContext(ExcalidrawContainerContext);
const { history } = createHistory();
let didTapTwice: boolean = false;
let tappedTwiceTimer = 0;
let cursorX = 0;
@ -321,6 +319,7 @@ class App extends React.Component<AppProps, AppState> {
public library: Library;
public libraryItemsFromStorage: LibraryItems | undefined;
private id: string;
private history: History;
constructor(props: AppProps) {
super(props);
@ -379,7 +378,7 @@ class App extends React.Component<AppProps, AppState> {
}
this.scene = new Scene();
this.library = new Library(this);
this.history = new History();
this.actionManager = new ActionManager(
this.syncActionResult,
() => this.state,
@ -388,8 +387,8 @@ class App extends React.Component<AppProps, AppState> {
);
this.actionManager.registerAll(actions);
this.actionManager.registerAction(createUndoAction(history));
this.actionManager.registerAction(createRedoAction(history));
this.actionManager.registerAction(createUndoAction(this.history));
this.actionManager.registerAction(createRedoAction(this.history));
}
private renderCanvas() {
@ -564,13 +563,13 @@ class App extends React.Component<AppProps, AppState> {
});
this.scene.replaceAllElements(actionResult.elements);
if (actionResult.commitToHistory) {
history.resumeRecording();
this.history.resumeRecording();
}
}
if (actionResult.appState || editingElement) {
if (actionResult.commitToHistory) {
history.resumeRecording();
this.history.resumeRecording();
}
let viewModeEnabled = actionResult?.appState?.viewModeEnabled || false;
@ -614,7 +613,7 @@ class App extends React.Component<AppProps, AppState> {
},
() => {
if (actionResult.syncHistory) {
history.setCurrentState(
this.history.setCurrentState(
this.state,
this.scene.getElementsIncludingDeleted(),
);
@ -689,7 +688,7 @@ class App extends React.Component<AppProps, AppState> {
};
private resetHistory = () => {
history.clear();
this.history.clear();
};
/**
@ -822,6 +821,10 @@ class App extends React.Component<AppProps, AppState> {
configurable: true,
value: this,
},
history: {
configurable: true,
value: this.history,
},
});
}
@ -1123,7 +1126,7 @@ class App extends React.Component<AppProps, AppState> {
this.setState({ scrolledOutside });
}
history.record(this.state, this.scene.getElementsIncludingDeleted());
this.history.record(this.state, this.scene.getElementsIncludingDeleted());
// Do not notify consumers if we're still loading the scene. Among other
// potential issues, this fixes a case where the tab isn't focused during
@ -1332,7 +1335,7 @@ class App extends React.Component<AppProps, AppState> {
);
this.scene.replaceAllElements(nextElements);
history.resumeRecording();
this.history.resumeRecording();
this.setState(
selectGroupsForSelectedElements(
{
@ -1378,7 +1381,7 @@ class App extends React.Component<AppProps, AppState> {
element,
]);
this.setState({ selectedElementIds: { [element.id]: true } });
history.resumeRecording();
this.history.resumeRecording();
}
// Collaboration
@ -1452,7 +1455,7 @@ class App extends React.Component<AppProps, AppState> {
public updateScene = withBatchedUpdates((sceneData: SceneData) => {
if (sceneData.commitToHistory) {
history.resumeRecording();
this.history.resumeRecording();
}
// currently we only support syncing background color
@ -1595,7 +1598,7 @@ class App extends React.Component<AppProps, AppState> {
!this.state.editingLinearElement ||
this.state.editingLinearElement.elementId !== selectedElements[0].id
) {
history.resumeRecording();
this.history.resumeRecording();
this.setState({
editingLinearElement: new LinearElementEditor(
selectedElements[0],
@ -1789,7 +1792,7 @@ class App extends React.Component<AppProps, AppState> {
fixBindingsAfterDeletion(this.scene.getElements(), [element]);
}
if (!isDeleted || isExistingElement) {
history.resumeRecording();
this.history.resumeRecording();
}
this.setState({
@ -1970,7 +1973,7 @@ class App extends React.Component<AppProps, AppState> {
!this.state.editingLinearElement ||
this.state.editingLinearElement.elementId !== selectedElements[0].id
) {
history.resumeRecording();
this.history.resumeRecording();
this.setState({
editingLinearElement: new LinearElementEditor(
selectedElements[0],
@ -2687,7 +2690,7 @@ class App extends React.Component<AppProps, AppState> {
event,
this.state,
(appState) => this.setState(appState),
history,
this.history,
pointerDownState.origin,
);
if (ret.hitElement) {
@ -3379,7 +3382,7 @@ class App extends React.Component<AppProps, AppState> {
if (isLinearElement(draggingElement)) {
if (draggingElement!.points.length > 1) {
history.resumeRecording();
this.history.resumeRecording();
}
const pointerCoords = viewportCoordsToSceneCoords(
childEvent,
@ -3463,7 +3466,7 @@ class App extends React.Component<AppProps, AppState> {
}
if (resizingElement) {
history.resumeRecording();
this.history.resumeRecording();
}
if (resizingElement && isInvisiblySmallElement(resizingElement)) {
@ -3577,7 +3580,7 @@ class App extends React.Component<AppProps, AppState> {
elementType !== "selection" ||
isSomeElementSelected(this.scene.getElements(), this.state)
) {
history.resumeRecording();
this.history.resumeRecording();
}
if (pointerDownState.drag.hasOccurred || isResizing || isRotating) {
@ -4269,8 +4272,8 @@ declare global {
elements: readonly ExcalidrawElement[];
state: AppState;
setState: React.Component<any, AppState>["setState"];
history: SceneHistory;
app: InstanceType<typeof App>;
history: History;
};
}
}
@ -4291,10 +4294,6 @@ if (
return this.app.scene.replaceAllElements(elements);
},
},
history: {
configurable: true,
get: () => history,
},
});
}
export default App;