smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

485: Ability to switch to previously loaded ids in UI (#583)

Browse source
This commit is contained in:
Robinson Marquez 2020-01-30 16:39:37 -03:00 • committed by GitHub
parent bd1c00014b
commit 4ad38e317e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 1461 additions and 795 deletions
Download patch file Download diff file Expand all files Collapse all files

56
src/index.tsx
View file

@ -34,6 +34,8 @@ import {
hasText,
exportCanvas,
importFromBackend,
addToLoadedScenes,
loadedScenes,
} from "./scene";
import { renderScene } from "./renderer";
@ -86,6 +88,7 @@ import { ExportDialog } from "./components/ExportDialog";
import { withTranslation } from "react-i18next";
import { LanguageList } from "./components/LanguageList";
import i18n, { languages, parseDetectedLang } from "./i18n";
import { StoredScenesList } from "./components/StoredScenesList";
let { elements } = createScene();
const { history } = createHistory();
@ -237,21 +240,13 @@ export class App extends React.Component<any, AppState> {
return true;
}
public async componentDidMount() {
document.addEventListener("copy", this.onCopy);
document.addEventListener("paste", this.onPaste);
document.addEventListener("cut", this.onCut);
document.addEventListener("keydown", this.onKeyDown, false);
document.addEventListener("mousemove", this.updateCurrentCursorPosition);
window.addEventListener("resize", this.onResize, false);
window.addEventListener("unload", this.onUnload, false);
private async loadScene(id: string | null) {
let data;
const searchParams = new URLSearchParams(window.location.search);
if (searchParams.get("id") != null) {
data = await importFromBackend(searchParams.get("id"));
let selectedId;
if (id != null) {
data = await importFromBackend(id);
addToLoadedScenes(id);
selectedId = id;
window.history.replaceState({}, "Excalidraw", window.location.origin);
} else {
data = restoreFromLocalStorage();
@ -262,12 +257,28 @@ export class App extends React.Component<any, AppState> {
}
if (data.appState) {
this.setState(data.appState);
this.setState({ ...data.appState, selectedId });
} else {
this.setState({});
}
}
public async componentDidMount() {
document.addEventListener("copy", this.onCopy);
document.addEventListener("paste", this.onPaste);
document.addEventListener("cut", this.onCut);
document.addEventListener("keydown", this.onKeyDown, false);
document.addEventListener("mousemove", this.updateCurrentCursorPosition);
window.addEventListener("resize", this.onResize, false);
window.addEventListener("unload", this.onUnload, false);
const searchParams = new URLSearchParams(window.location.search);
const id = searchParams.get("id");
this.loadScene(id);
}
public componentWillUnmount() {
document.removeEventListener("copy", this.onCopy);
document.removeEventListener("paste", this.onPaste);
@ -1420,11 +1431,26 @@ export class App extends React.Component<any, AppState> {
languages={languages}
currentLanguage={parseDetectedLang(i18n.language)}
/>
{this.renderIdsDropdown()}
</footer>
</div>
);
}
private renderIdsDropdown() {
const scenes = loadedScenes();
if (scenes.length === 0) {
return;
}
return (
<StoredScenesList
scenes={scenes}
currentId={this.state.selectedId}
onChange={id => this.loadScene(id)}
/>
);
}
private handleWheel = (e: WheelEvent) => {
e.preventDefault();
const { deltaX, deltaY } = e;