moritz
/
shulkerscript-webpage
mirror of https://github.com/moritz-hoelting/shulkerscript-webpage.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

implement rename and delete for files

This commit is contained in:
Moritz Hölting 2024-06-23 20:28:12 +02:00
parent a02af4f90c
commit 7096d02e8c
10 changed files with 322 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
README.md
View File

@ -10,9 +10,9 @@ All commands are run from the root of the project, from a terminal:
| Command | Action |
| :------------------------ | :----------------------------------------------- |
| `npm install` | Installs dependencies |
| `npm run dev` | Starts local dev server at `localhost:4321` |
| `npm run build` | Build your production site to `./dist/` |
| `npm run preview` | Preview your build locally, before deploying |
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
| `npm run astro -- --help` | Get help using the Astro CLI |
| `pnpm install` | Installs dependencies |
| `pnpm run dev` | Starts local dev server at `localhost:4321` |
| `pnpm run build` | Build your production site to `./dist/` |
| `pnpm run preview` | Preview your build locally, before deploying |
| `pnpm run astro ...` | Run CLI commands like `astro add`, `astro check` |
| `pnpm run astro -- --help` | Get help using the Astro CLI |

77
src/components/Playground.tsx
View File

@ -175,8 +175,32 @@ export default function Playground({ lang }: { lang: PlaygroundLang }) {
<FileView
className="file-view"
root={rootDir}
fileName={fileName}
selectedFileName={fileName}
setSelectedFileName={setFileName}
deleteFile={(name) => {
if (monaco) {
console.log(name);
deleteFile(monaco, updateRootDir, name);
if (name === fileName) {
const newFile = monaco.editor
.getModels()[0]
?.uri.path.slice(1);
if (newFile) {
setFileName(newFile);
} else {
setFileName("");
}
}
}
}}
renameFile={(oldName, newName) => {
if (monaco) {
renameFile(monaco, updateRootDir, oldName, newName);
if (oldName === fileName) {
setFileName(newName);
}
}
}}
lang={lang.explorer}
/>
<Editor
@ -274,9 +298,20 @@ function loadFile(
file: File,
name: string
) {
let extension = name.split(".").pop()!;
let lang = undefined;
if (extension === "shu") {
lang = "shulkerscript";
} else if (extension === "toml") {
lang = "toml";
} else if (extension === "mcfunction") {
lang = "mcfunction";
} else if (extension === "json") {
lang = "json";
}
const uri = monaco.Uri.parse(name);
if (!monaco.editor.getModel(uri)) {
monaco.editor.createModel(file.content, file.language, uri);
monaco.editor.createModel(file.content, lang, uri);
}
updater((dir) => {
if (dir) {
@ -295,7 +330,10 @@ function loadFile(
if (!current.files) {
current.files = {};
}
current.files[last] = file;
current.files[last] = {
content: file.content,
language: lang,
};
}
});
}
@ -320,3 +358,36 @@ function jsonReplacer(key: any, value: any): any {
return value;
}
}
function deleteFile(monaco: Monaco, updater: Updater<Directory>, name: string) {
const uri = monaco.Uri.parse(name);
const model = monaco.editor.getModel(uri);
if (model) {
model.dispose();
}
updater((dir) => {
let current = dir;
const parts = name.split("/").filter((s) => s !== "");
const last = parts.pop()!;
for (const part of parts) {
if (!current.dirs) {
current.dirs = {};
}
if (!current.dirs[part]) {
current.dirs[part] = {};
}
current = current.dirs[part];
}
if (current.files) {
delete current.files[last];
}
});
}
function renameFile(monaco: Monaco, updater: Updater<Directory>, oldName: string, newName: string) {
const file = getFile(getFiles(monaco), oldName);
if (file) {
deleteFile(monaco, updater, oldName);
loadFile(monaco, updater, file, newName);
}
}

100
src/components/playground/FileView.tsx → src/components/playground/FileView/DirElement.tsx
View File

@ -4,86 +4,31 @@ import {
GoChevronDown as ChevDown,
GoChevronRight as ChevRight,
} from "react-icons/go";
import FileElement from "./FileElement";
export default function FileView({
lang,
root,
fileName,
setSelectedFileName,
className,
}: {
lang: PlaygroundExplorerLang;
root: Directory;
fileName: string;
setSelectedFileName: SetState<string>;
className?: string;
}) {
return (
<div className={className}>
<h3>{lang.title}</h3>
<div className="entries">
{Object.entries(root.dirs ?? {}).map(([name, dir]) => {
return (
<DirElement
key={name}
name={name}
dir={dir}
fileName={fileName.slice(name.length + 1)}
setSelectedFileName={setSelectedFileName}
/>
);
})}
{Object.entries(root.files ?? {}).map(([name, _]) => {
return (
<span key={name}>
<FileElement
name={name}
disabled={fileName == name}
onClick={() => setSelectedFileName(name)}
/>
</span>
);
})}
</div>
</div>
);
}
function FileElement({
name,
disabled,
onClick,
}: {
name: string;
disabled: boolean;
onClick?: React.MouseEventHandler<HTMLButtonElement>;
}) {
return (
<button disabled={disabled} onClick={onClick} className="file">
{name}
</button>
);
}
function DirElement({
export default function DirElement({
name,
fullPath,
dir: currentDir,
collapsed: pCollapsed,
fileName,
selectedFileName,
lang,
setSelectedFileName,
deleteFile,
renameFile,
}: {
name: string;
fullPath: string;
dir: Directory;
collapsed?: boolean;
fileName: string;
selectedFileName: string;
lang: PlaygroundExplorerLang;
setSelectedFileName: SetState<string>;
deleteFile: (name: string) => void;
renameFile: (oldName: string, newName: string) => void;
}) {
const [collapsed, setCollapsed] = useState(pCollapsed ?? false);
const modSetSelectedFileName: SetState<string> = (selected) => {
setSelectedFileName(name + "/" + selected);
};
const chevStyles: React.CSSProperties = {
marginBottom: "-2px",
};
@ -117,27 +62,36 @@ function DirElement({
<DirElement
key={dirname}
name={dirname}
fullPath={fullPath + "/" + dirname}
dir={dir}
fileName={fileName.slice(
dirname.length + 1
)}
selectedFileName={selectedFileName}
lang={lang}
setSelectedFileName={
modSetSelectedFileName
setSelectedFileName
}
deleteFile={deleteFile}
renameFile={renameFile}
/>
);
}
)}
{Object.entries(currentDir.files ?? {}).map(
([currentName, _]) => {
const currentPath = fullPath + "/" + currentName;
return (
<FileElement
key={currentName}
fullPath={currentPath}
name={currentName}
disabled={fileName == currentName}
isSelected={selectedFileName == currentPath}
lang={lang}
onClick={() =>
modSetSelectedFileName(currentName)
setSelectedFileName(currentPath)
}
onDelete={() =>
deleteFile(currentPath)
}
renameFile={renameFile}
/>
);
}

113
src/components/playground/FileView/FileElement.tsx Normal file
View File

@ -0,0 +1,113 @@
import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Menu, MenuItem, TextField } from "@mui/material";
import type { PlaygroundExplorerLang } from "@utils/playground";
import React from "react";
import { useState } from "react";
export default function FileElement({
name,
fullPath,
isSelected,
lang,
onClick,
renameFile,
onDelete,
}: {
name: string;
fullPath: string;
isSelected: boolean;
lang: PlaygroundExplorerLang;
onClick?: React.MouseEventHandler<HTMLButtonElement>;
renameFile?: (oldName: string, newName: string) => void;
onDelete?: React.MouseEventHandler<HTMLLIElement>;
}) {
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const contextOpen = Boolean(anchorEl);
const handleContext = (event: React.MouseEvent<HTMLElement>) => {
event.preventDefault();
setAnchorEl(event.currentTarget);
};
const handleContextClose = () => {
setAnchorEl(null);
};
const [renameOpen, setRenameOpen] = React.useState(false);
const handleRenameClose = () => {
setRenameOpen(false);
};
return (
<div className="file">
<button
onClick={onClick}
onContextMenu={handleContext}
className={"file" + (isSelected ? " selected" : "")}
>
{name}
</button>
<Menu
anchorEl={anchorEl}
open={contextOpen}
onClose={handleContextClose}
>
<MenuItem
onClick={(ev) => {
handleContextClose();
setRenameOpen(true);
}}
>
{lang.menu.rename}
</MenuItem>
<MenuItem
onClick={(ev) => {
handleContextClose();
onDelete?.(ev);
}}
>
{lang.menu.delete}
</MenuItem>
</Menu>
<Dialog
open={renameOpen}
onClose={handleRenameClose}
PaperProps={{
component: "form",
onSubmit: (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
const formData = new FormData(event.currentTarget);
const formJson = Object.fromEntries(
(formData as any).entries()
);
const filepath = formJson.filepath;
if (renameFile) {
renameFile(fullPath, filepath);
}
handleRenameClose();
},
}}
>
<DialogTitle>{lang.menu.rename} - {fullPath}</DialogTitle>
<DialogContent>
<DialogContentText>
{lang.menu.renamePrompt.message}
</DialogContentText>
<TextField
autoFocus
required
margin="dense"
id="filepath"
name="filepath"
label={lang.menu.renamePrompt.label}
type="text"
fullWidth
variant="filled"
defaultValue={fullPath}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleRenameClose}>{lang.menu.cancel}</Button>
<Button type="submit">{lang.menu.rename}</Button>
</DialogActions>
</Dialog>
</div>
);
}

71
src/components/playground/FileView/index.tsx Normal file
View File

@ -0,0 +1,71 @@
import type {
Directory,
PlaygroundExplorerLang,
SetState,
} from "@utils/playground";
import DirElement from "./DirElement";
import FileElement from "./FileElement";
export default function FileView({
lang,
root,
selectedFileName,
setSelectedFileName,
deleteFile,
renameFile,
className,
}: {
lang: PlaygroundExplorerLang;
root: Directory;
selectedFileName: string;
setSelectedFileName: SetState<string>;
deleteFile: (name: string) => void;
renameFile: (oldName: string, newName: string) => void;
className?: string;
}) {
return (
<div className={className}>
<h3>{lang.title}</h3>
<div className="entries">
{Object.entries(root.dirs ?? {}).map(([name, dir]) => {
return (
<DirElement
key={name}
name={name}
fullPath={name}
dir={dir}
selectedFileName={selectedFileName}
lang={lang}
setSelectedFileName={setSelectedFileName}
deleteFile={deleteFile}
renameFile={renameFile}
/>
);
})}
{Object.entries(root.files ?? {}).map(([name, _]) => {
const isSelected = selectedFileName == name;
return (
<span key={name}>
<FileElement
name={name}
fullPath={name}
isSelected={isSelected}
lang={lang}
onClick={
isSelected
? () => {}
: () => setSelectedFileName(name)
}
onDelete={() => deleteFile(name)}
renameFile={renameFile}
/>
</span>
);
})}
</div>
</div>
);
}

9
src/pages/de/playground.astro
View File

@ -15,6 +15,15 @@ const lang: PlaygroundLang = {
},
explorer: {
title: "Dateien",
menu: {
delete: "Löschen",
rename: "Umbenennen",
renamePrompt: {
label: "Neuer Dateipfad",
message: "Pfad eingeben, zu dem die Datei umbenannt/verschoben werden soll."
},
cancel: "Abbrechen",
}
},
};
---

9
src/pages/playground.astro
View File

@ -15,6 +15,15 @@ const lang: PlaygroundLang = {
},
explorer: {
title: "Explorer",
menu: {
delete: "Delete",
rename: "Rename",
renamePrompt: {
label: "New file path",
message: "Enter the path you want the file to be renamed/moved to."
},
cancel: "Cancel",
}
},
};
---

19
src/styles/playground.scss
View File

@ -25,13 +25,12 @@
cursor: pointer;
&:hover {
background-color: #444444;
background-color: var(--sl-color-gray-5);
}
&:disabled {
cursor: default;
&.selected {
color: var(--sl-color-text);
background-color: #333;
background-color: var(--sl-color-gray-6);
}
}
}
@ -40,15 +39,3 @@
grid-area: editor;
}
}
:root[data-theme='light'] {
.playground > .file-view .entries button {
&:hover {
background-color: var(--sl-color-gray-5);
}
&:disabled {
background-color: var(--sl-color-gray-6);
}
}
}

9
src/utils/playground.ts
View File

@ -14,6 +14,15 @@ export type PlaygroundHeaderLang = {
};
export type PlaygroundExplorerLang = {
title: string;
menu: {
rename: string;
renamePrompt: {
message: string;
label: string;
}
delete: string;
cancel: string;
}
};
export type File = {

2
src/wasm/webcompiler/Cargo.toml
View File

@ -10,7 +10,7 @@ crate-type = ["cdylib"]
[dependencies]
wasm-bindgen = "0.2.92"
shulkerscript = { git = "https://github.com/moritz-hoelting/shulkerscript-lang.git", default-features = false, features = ["serde", "shulkerbox"], rev = "af544ac79eea4498ef4563acfb7e8dd14ec5c84e" }
shulkerscript = { git = "https://github.com/moritz-hoelting/shulkerscript-lang.git", default-features = false, features = ["serde", "shulkerbox", "lua"], rev = "af544ac79eea4498ef4563acfb7e8dd14ec5c84e" }
serde = "1.0"
serde-wasm-bindgen = "0.6.5"
anyhow = "1.0.86"