Refactor drag-n-drop to component with overlay
This commit is contained in:
parent
d681d84416
commit
8496c775f2
152
components/DropZone.tsx
Normal file
152
components/DropZone.tsx
Normal file
@ -0,0 +1,152 @@
|
||||
import React, { useState, useRef } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
|
||||
import { WorkerPool } from "../lib/WorkerPool";
|
||||
import { isPluginPath, parsePluginFiles } from "../lib/plugins";
|
||||
import { setPluginsTxtAndApplyLoadOrder } from "../slices/pluginsTxt";
|
||||
import { useAppDispatch } from "../lib/hooks";
|
||||
import styles from "../styles/DropZone.module.css";
|
||||
|
||||
type Props = {
|
||||
children?: React.ReactNode;
|
||||
workerPool: WorkerPool | null;
|
||||
};
|
||||
|
||||
export const DropZone: React.FC<Props> = ({ children, workerPool }) => {
|
||||
const dispatch = useAppDispatch();
|
||||
const [entered, setEntered] = useState(0);
|
||||
const overlay = useRef<HTMLDivElement>(null);
|
||||
|
||||
const handleDropFileSystemHandle = async (
|
||||
item: DataTransferItem
|
||||
): Promise<boolean> => {
|
||||
if (!item.getAsFileSystemHandle) {
|
||||
return false;
|
||||
}
|
||||
const entry = await item.getAsFileSystemHandle();
|
||||
if (entry.kind === "file") {
|
||||
const file = await (entry as FileSystemFileHandle).getFile();
|
||||
dispatch(setPluginsTxtAndApplyLoadOrder(await file.text()));
|
||||
return true;
|
||||
} else if (entry.kind === "directory") {
|
||||
const plugins: { getFile: () => Promise<File> }[] = [];
|
||||
const values = (
|
||||
entry as FileSystemDirectoryHandle & { values: any }
|
||||
).values();
|
||||
// I'm scared of yield and generators so I'm just going to do a lame while loop
|
||||
while (true) {
|
||||
const next = await values.next();
|
||||
if (next.done) {
|
||||
break;
|
||||
}
|
||||
if (next.value.kind == "file" && isPluginPath(next.value.name)) {
|
||||
plugins.push(next.value);
|
||||
}
|
||||
}
|
||||
const pluginFiles = await Promise.all(
|
||||
plugins.map(async (plugin) => plugin.getFile())
|
||||
);
|
||||
if (workerPool) {
|
||||
parsePluginFiles(pluginFiles, workerPool);
|
||||
} else {
|
||||
alert("Workers not loaded yet");
|
||||
}
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const handleDropWebkitEntry = async (
|
||||
item: DataTransferItem
|
||||
): Promise<boolean> => {
|
||||
if (!item.webkitGetAsEntry) {
|
||||
return false;
|
||||
}
|
||||
const entry = item.webkitGetAsEntry();
|
||||
if (entry?.isFile) {
|
||||
(entry as FileSystemFileEntry).file(async (file) => {
|
||||
dispatch(setPluginsTxtAndApplyLoadOrder(await file.text()));
|
||||
});
|
||||
return true;
|
||||
} else if (entry?.isDirectory) {
|
||||
const reader = (entry as FileSystemDirectoryEntry).createReader();
|
||||
const plugins = await new Promise<FileSystemFileEntry[]>(
|
||||
(resolve, reject) => {
|
||||
const plugins: FileSystemFileEntry[] = [];
|
||||
reader.readEntries((entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry?.isFile && isPluginPath(entry.name)) {
|
||||
plugins.push(entry as FileSystemFileEntry);
|
||||
}
|
||||
});
|
||||
resolve(plugins);
|
||||
}, reject);
|
||||
}
|
||||
);
|
||||
const pluginFiles = await Promise.all(
|
||||
plugins.map(
|
||||
(plugin) =>
|
||||
new Promise<File>((resolve, reject) =>
|
||||
plugin.file((file) => resolve(file), reject)
|
||||
)
|
||||
)
|
||||
);
|
||||
if (workerPool) {
|
||||
parsePluginFiles(pluginFiles, workerPool);
|
||||
} else {
|
||||
alert("Workers not loaded yet");
|
||||
}
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const handleDrop = async (event: React.DragEvent<HTMLDivElement>) => {
|
||||
event.preventDefault();
|
||||
setEntered(0);
|
||||
|
||||
if (event.dataTransfer.items && event.dataTransfer.items.length > 0) {
|
||||
const item = event.dataTransfer.items[0];
|
||||
if (item.kind === "file") {
|
||||
// Gotta love all these competing web file system standards...
|
||||
let processed = await handleDropFileSystemHandle(item);
|
||||
if (!processed) {
|
||||
processed = await handleDropWebkitEntry(item);
|
||||
}
|
||||
if (!processed) {
|
||||
const file = item.getAsFile();
|
||||
if (file) {
|
||||
dispatch(setPluginsTxtAndApplyLoadOrder(await file.text()));
|
||||
}
|
||||
}
|
||||
} else if (item.kind === "string") {
|
||||
item.getAsString((str) => {
|
||||
dispatch(setPluginsTxtAndApplyLoadOrder(str));
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div id="drop-zone-overlay" ref={overlay} />
|
||||
{overlay.current && entered > 0
|
||||
? createPortal(
|
||||
<div className={styles.overlay}>
|
||||
Drop Skyrim Data folder or plugins.txt file
|
||||
</div>,
|
||||
overlay.current
|
||||
)
|
||||
: null}
|
||||
<div
|
||||
className={styles["drop-zone"]}
|
||||
onDragOver={(event) => event.preventDefault()}
|
||||
onDragEnter={() => setEntered((entered) => entered + 1)}
|
||||
onDragLeave={() => setEntered((entered) => entered - 1)}
|
||||
onDrop={handleDrop}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
4
filesystem.d.ts
vendored
Normal file
4
filesystem.d.ts
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
interface DataTransferItem extends DataTransferItem {
|
||||
getAsFileSystemHandle?(): Promise<FileSystemFileHandle|FileSystemDirectoryHandle>;
|
||||
webkitGetAsEntry?(): FileSystemEntry | null;
|
||||
}
|
||||
131
pages/index.tsx
131
pages/index.tsx
@ -4,14 +4,11 @@ import Head from "next/head";
|
||||
import "mapbox-gl/dist/mapbox-gl.css";
|
||||
|
||||
import Map from "../components/Map";
|
||||
import { useAppDispatch } from "../lib/hooks";
|
||||
import { isPlugin, isPluginPath, parsePluginFiles } from "../lib/plugins";
|
||||
import { setPluginsTxtAndApplyLoadOrder } from "../slices/pluginsTxt";
|
||||
import { WorkerPool, WorkerPoolContext } from "../lib/WorkerPool";
|
||||
import { DropZone } from "../components/DropZone";
|
||||
|
||||
const Home: NextPage = () => {
|
||||
const [workerPool, setWorkerPool] = useState<WorkerPool | null>(null);
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const createWorkerPool = useCallback(async () => {
|
||||
setWorkerPool(
|
||||
@ -26,7 +23,7 @@ const Home: NextPage = () => {
|
||||
}
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [dispatch]);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
createWorkerPool();
|
||||
@ -81,129 +78,9 @@ const Home: NextPage = () => {
|
||||
<meta name="twitter:creator" content="@tyhallada" />
|
||||
</Head>
|
||||
<WorkerPoolContext.Provider value={workerPool}>
|
||||
<div
|
||||
style={{
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}
|
||||
onDragOver={(evt) => {
|
||||
evt.preventDefault();
|
||||
}}
|
||||
onDrop={async (evt) => {
|
||||
evt.preventDefault();
|
||||
|
||||
if (evt.dataTransfer.items && evt.dataTransfer.items.length > 0) {
|
||||
const item = evt.dataTransfer.items[0];
|
||||
if (item.kind === "file") {
|
||||
// Gotta love all these competing web file system standards...
|
||||
if (
|
||||
(
|
||||
item as DataTransferItem & {
|
||||
getAsFileSystemHandle?: () => Promise<FileSystemHandle>;
|
||||
}
|
||||
).getAsFileSystemHandle
|
||||
) {
|
||||
const entry = await (
|
||||
item as DataTransferItem & {
|
||||
getAsFileSystemHandle: () => Promise<FileSystemHandle>;
|
||||
}
|
||||
).getAsFileSystemHandle();
|
||||
if (entry.kind === "file") {
|
||||
const file = await (
|
||||
entry as FileSystemFileHandle
|
||||
).getFile();
|
||||
dispatch(setPluginsTxtAndApplyLoadOrder(await file.text()));
|
||||
return;
|
||||
} else if (entry.kind === "directory") {
|
||||
const plugins: { getFile: () => Promise<File> }[] = [];
|
||||
const values = (
|
||||
entry as FileSystemDirectoryHandle & { values: any }
|
||||
).values();
|
||||
// I'm scared of yield and generators so I'm just going to do a lame while loop
|
||||
while (true) {
|
||||
const next = await values.next();
|
||||
if (next.done) {
|
||||
break;
|
||||
}
|
||||
if (
|
||||
next.value.kind == "file" &&
|
||||
isPluginPath(next.value.name)
|
||||
) {
|
||||
plugins.push(next.value);
|
||||
}
|
||||
}
|
||||
const pluginFiles = await Promise.all(
|
||||
plugins.map(async (plugin) => plugin.getFile())
|
||||
);
|
||||
if (workerPool) {
|
||||
parsePluginFiles(pluginFiles, workerPool);
|
||||
} else {
|
||||
alert("Workers not loaded yet");
|
||||
}
|
||||
}
|
||||
} else if (
|
||||
(
|
||||
item as DataTransferItem & {
|
||||
webkitGetAsEntry?: FileSystemEntry | null;
|
||||
}
|
||||
).webkitGetAsEntry
|
||||
) {
|
||||
const entry = item.webkitGetAsEntry();
|
||||
if (entry?.isFile) {
|
||||
(entry as FileSystemFileEntry).file(async (file) => {
|
||||
dispatch(
|
||||
setPluginsTxtAndApplyLoadOrder(await file.text())
|
||||
);
|
||||
});
|
||||
} else if (entry?.isDirectory) {
|
||||
const reader = (
|
||||
entry as FileSystemDirectoryEntry
|
||||
).createReader();
|
||||
const plugins = await new Promise<FileSystemFileEntry[]>(
|
||||
(resolve, reject) => {
|
||||
const plugins: FileSystemFileEntry[] = [];
|
||||
reader.readEntries((entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry?.isFile && isPluginPath(entry.name)) {
|
||||
plugins.push(entry as FileSystemFileEntry);
|
||||
}
|
||||
});
|
||||
resolve(plugins);
|
||||
}, reject);
|
||||
}
|
||||
);
|
||||
const pluginFiles = await Promise.all(
|
||||
plugins.map(
|
||||
(plugin) =>
|
||||
new Promise<File>((resolve, reject) =>
|
||||
plugin.file((file) => resolve(file), reject)
|
||||
)
|
||||
)
|
||||
);
|
||||
if (workerPool) {
|
||||
parsePluginFiles(pluginFiles, workerPool);
|
||||
} else {
|
||||
alert("Workers not loaded yet");
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const file = item.getAsFile();
|
||||
if (file) {
|
||||
dispatch(setPluginsTxtAndApplyLoadOrder(await file.text()));
|
||||
}
|
||||
}
|
||||
} else if (item.kind === "string") {
|
||||
item.getAsString((str) => {
|
||||
dispatch(setPluginsTxtAndApplyLoadOrder(str));
|
||||
});
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DropZone workerPool={workerPool}>
|
||||
<Map />
|
||||
</div>
|
||||
</DropZone>
|
||||
</WorkerPoolContext.Provider>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -52,6 +52,7 @@ export const pluginsSlice = createSlice({
|
||||
initialState,
|
||||
reducers: {
|
||||
addPlugin: (state, action: PayloadAction<PluginFile>) => ({ plugins: [...state.plugins, action.payload], pending: state.pending }),
|
||||
updatePlugin: (state, action: PayloadAction<PluginFile>) => ({ plugins: [...state.plugins.filter(plugin => plugin.hash !== action.payload.hash), action.payload], pending: state.pending }),
|
||||
setPlugins: (state, action: PayloadAction<PluginFile[]>) => ({ plugins: action.payload, pending: state.pending }),
|
||||
setPending: (state, action: PayloadAction<number>) => ({ plugins: state.plugins, pending: action.payload }),
|
||||
decrementPending: (state, action: PayloadAction<number>) => ({ plugins: state.plugins, pending: state.pending - action.payload }),
|
||||
|
||||
26
styles/DropZone.module.css
Normal file
26
styles/DropZone.module.css
Normal file
@ -0,0 +1,26 @@
|
||||
.drop-zone {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 6;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 7;
|
||||
position: fixed;
|
||||
pointer-events: none;
|
||||
border: 8px dashed #0087f7;
|
||||
font-size: 2rem;
|
||||
color: white;
|
||||
text-shadow: -8px -8px 8px #000, 8px -8px 8px #000, -8px 8px 8px #000,
|
||||
8px 8px 8px #000;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user