diff --git a/src/components/DropBox.tsx b/src/components/DropBox.tsx index 5881a4d4b..741d08744 100644 --- a/src/components/DropBox.tsx +++ b/src/components/DropBox.tsx @@ -8,10 +8,10 @@ export default function DropBox() { // Make sure the ref is defined addDragDrop(); }, []); // Empty dependency array means this effect runs once after initial render - + return (
- Drop an SVG or JS file. + Drop an SVG or JS file.
); } function addDragDrop() { const droparea: HTMLElement | null = document.querySelector(".droparea"); - + window.addEventListener("drop", function (evt) { const { view } = getStore(); - + let dt = evt.dataTransfer; - + if (dt === null || droparea === null) return; - + let files = dt.files; - + droparea.classList.add("hidden"); - + const file = files[0]; const fileName = file.name.split("."); const name = fileName[0]; const extension = fileName[fileName.length - 1]; - + var reader = new FileReader(); reader.readAsText(file); - + reader.onloadend = (event) => { let text = reader.result; - + if (extension === "js") { loadCodeFromString(text); } else if (extension === "svg") { text = text.replaceAll("\n", ""); - + const polylines = JSON.stringify(tk.svgToPolylines(text)); - + customAlert(polylines); - + // const newLines = `const importedSVG = ${polylines};\n`; - + // view.dispatch({ // changes: { from: 0, insert: newLines }, // }); @@ -79,19 +79,19 @@ function addDragDrop() { throw Error("Unknown extension:" + extension); } }; - + pauseEvent(evt); }); - + window.addEventListener("dragover", function (evt) { droparea.classList.remove("hidden"); pauseEvent(evt); }); ["mouseout"].forEach((trigger) => window.addEventListener(trigger, function (evt) { - droparea.classList.add("hidden"); - }), -); + droparea.classList.add("hidden"); + }), + ); } function pauseEvent(e) { @@ -137,7 +137,7 @@ function customAlert(polylines) {
Here are the polylines of your SVG. Copy and paste it into the editor.
${polylines}
- +