thallada/modmapper-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Handle drag and drop of Data dir

Browse Source 
Also some general fixes to the data dir picker button.
This commit is contained in:
Tyler Hallada 2022-03-09 01:35:20 -05:00
parent 1b48c34974
commit d681d84416
4 changed files with 185 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
components/DataDirPicker.tsx
View File

@ -1,24 +1,32 @@
import React, { useContext } from "react";
import React, { useContext, useRef, useState, useEffect } from "react";
import { WorkerPoolContext } from "../lib/WorkerPool";
import { useAppDispatch } from "../lib/hooks";
import { clearPlugins, setPending } from "../slices/plugins";
import { useAppSelector } from "../lib/hooks";
import { isPlugin, parsePluginFiles } from "../lib/plugins";
import styles from "../styles/DataDirPicker.module.css";
export const excludedPlugins = [
"Skyrim.esm",
"Update.esm",
"Dawnguard.esm",
"HearthFires.esm",
"Dragonborn.esm",
];
type Props = {};
const DataDirPicker: React.FC<Props> = () => {
const workerPool = useContext(WorkerPoolContext);
const dispatch = useAppDispatch();
const inputRef = useRef<HTMLInputElement>(null);
const plugins = useAppSelector((state) => state.plugins.plugins);
const pluginsPending = useAppSelector((state) => state.plugins.pending);
const [loading, setLoading] = useState<boolean>(false);
useEffect(() => {
if (pluginsPending === 0 && loading) {
setLoading(false);
} else if (pluginsPending > 0 && !loading) {
setLoading(true);
}
}, [pluginsPending, loading, setLoading]);
// It would be nice to open the directory with window.showDirectoryPicker() in supported browsers,
// but it does not allow selecting directories under C:\\Program Files and it does not throw any error
// that I can catch here when a user tries to select it, so it's basically useless. So instead, I have
// to use this non-standard webkitdirectory input attribute that loads all files in a directory instead
// of just selecting the directory itself. Yay.
const onDataDirButtonClick = async (event: {
target: { files: FileList | null };
}) => {
@ -26,47 +34,43 @@ const DataDirPicker: React.FC<Props> = () => {
return alert("Workers not loaded yet");
}
const files = event.target.files ?? [];
dispatch(clearPlugins());
const plugins = [];
for (let i = 0; i < files.length; i++) {
const file = files[i];
if (
file.name.endsWith(".esp") ||
file.name.endsWith(".esm") ||
file.name.endsWith(".esl")
) {
if (isPlugin(file)) {
plugins.push(file);
}
}
dispatch(setPending(plugins.length));
plugins.forEach(async (plugin, index) => {
const contents = new Uint8Array(await plugin.arrayBuffer());
try {
workerPool.pushTask({
skipParsing: excludedPlugins.includes(plugin.name),
filename: plugin.name,
lastModified: plugin.lastModified,
contents,
});
} catch (error) {
console.error(error);
}
});
parsePluginFiles(plugins, workerPool);
};
return (
<>
<p className={styles["no-top-margin"]}>
To see all of the cell edits and conflicts for your current mod load
order select your <code>Data</code> directory below to load the plugins.
order select or drag-and-drop your <code>Data</code> directory below to
load the plugins.
</p>
<input
type="file"
webkitdirectory=""
onChange={onDataDirButtonClick}
disabled={!workerPool}
style={{ display: "none" }}
ref={inputRef}
/>
{/* input webkitdirectory is buggy, so keep it hidden and control it through a normal button */}
<button
onClick={() => {
if (inputRef.current) {
inputRef.current.value = ""; // clear the value so reloading same directory works
inputRef.current.click();
}
}}
disabled={!workerPool || loading}
>
{loading ? "Loading" : plugins.length > 0 ? "Reload" : "Open"} Skyrim
Data directory
</button>
</>
);
};

2
components/PluginsList.tsx
View File

@ -2,9 +2,9 @@ import Link from "next/link";
import React from "react";
import { useAppSelector, useAppDispatch } from "../lib/hooks";
import { excludedPlugins } from "../lib/plugins";
import { togglePlugin } from "../slices/plugins";
import styles from "../styles/PluginList.module.css";
import { excludedPlugins } from "./DataDirPicker";
type Props = {};

41
lib/plugins.ts Normal file
View File

@ -0,0 +1,41 @@
import { WorkerPool } from "./WorkerPool";
import store from "./store";
import { clearPlugins, setPending } from "../slices/plugins";
export const excludedPlugins = [
"Skyrim.esm",
"Update.esm",
"Dawnguard.esm",
"HearthFires.esm",
"Dragonborn.esm",
];
export const isPluginPath = (path: string) => {
if (
path.endsWith(".esp") ||
path.endsWith(".esm") ||
path.endsWith(".esl")
) {
return true;
}
return false;
}
export const isPlugin = (file: File) => {
return isPluginPath(file.name);
}
export const parsePluginFiles = (pluginFiles: File[], workerPool: WorkerPool) => {
store.dispatch(clearPlugins());
store.dispatch(setPending(pluginFiles.length));
pluginFiles.forEach(async (plugin) => {
const contents = new Uint8Array(await plugin.arrayBuffer());
workerPool.pushTask({
skipParsing: excludedPlugins.includes(plugin.name),
filename: plugin.name,
lastModified: plugin.lastModified,
contents,
});
});
}

103
pages/index.tsx
View File

@ -5,6 +5,7 @@ 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";
@ -94,11 +95,111 @@ const Home: NextPage = () => {
evt.preventDefault();
if (evt.dataTransfer.items && evt.dataTransfer.items.length > 0) {
const file = evt.dataTransfer.items[0].getAsFile();
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));
});
}
}
}}
>
<Map />