Drag and drop JSON exports to canvas loads the scene (#676)

* Drag and drop JSON exports to canvas loads the scene

* remove unneeded onDragOver
This commit is contained in:
lissitz 2020-02-02 22:02:13 +01:00 committed by GitHub
parent 53994e71e5
commit 92a0f100b8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 6 deletions

View file

@ -37,6 +37,7 @@ import {
addToLoadedScenes,
loadedScenes,
calculateScrollCenter,
loadFromBlob,
} from "./scene";
import { renderScene } from "./renderer";
@ -310,6 +311,8 @@ export class App extends React.Component<any, AppState> {
window.addEventListener("resize", this.onResize, false);
window.addEventListener("unload", this.onUnload, false);
window.addEventListener("blur", this.onUnload, false);
window.addEventListener("dragover", e => e.preventDefault(), false);
window.addEventListener("drop", e => e.preventDefault(), false);
const searchParams = new URLSearchParams(window.location.search);
const id = searchParams.get("id");
@ -1784,6 +1787,19 @@ export class App extends React.Component<any, AppState> {
const hitElement = getElementAtPosition(elements, x, y);
document.documentElement.style.cursor = hitElement ? "move" : "";
}}
onDrop={e => {
const file = e.dataTransfer.files[0];
if (file?.type === "application/json") {
loadFromBlob(file)
.then(({ elements, appState }) =>
this.syncActionResult({
elements,
appState,
} as ActionResult),
)
.catch(err => console.error(err));
}
}}
>
{t("labels.drawingCanvas")}
</canvas>