Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-11-26 17:43:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1984 from billyvg/feat/add-vim-mode

Browse Source 
feat: Add vim mode to script editor
This commit is contained in:
hydroflame 2021-12-20 12:03:05 -05:00 committed by GitHub
commit 25f78f2b30
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 200 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
dist/ext/monaco-vim.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

3
index.html
View File

@ -17,12 +17,13 @@
<link rel="stylesheet" data-name="vs/editor/editor.main" href="dist/ext/monaco-editor/min/vs/editor/editor.main.css"/>
<script>
var require = { paths: { vs: "dist/ext/monaco-editor/min/vs" } };
var require = { paths: { vs: "dist/ext/monaco-editor/min/vs", "monaco-vim": "dist/ext/monaco-vim" } };
</script>
<script src="dist/ext/monaco-editor/min/vs/loader.js"></script>
<script src="dist/ext/monaco-editor/min/vs/editor/editor.main.nls.js"></script>
<script src="dist/ext/monaco-editor/min/vs/editor/editor.main.js"></script>
<script src="dist/ext/monaco-vim.js"></script>
<!-- Google Analytics -->
<script>

1
src/ScriptEditor/ui/Options.ts
View File

@ -2,4 +2,5 @@ export interface Options {
theme: string;
insertSpaces: boolean;
fontSize: number;
vim: boolean;
}

14
src/ScriptEditor/ui/OptionsModal.tsx
View File

@ -21,12 +21,14 @@ export function OptionsModal(props: IProps): React.ReactElement {
const [theme, setTheme] = useState(props.options.theme);
const [insertSpaces, setInsertSpaces] = useState(props.options.insertSpaces);
const [fontSize, setFontSize] = useState(props.options.fontSize);
const [vim, setVim] = useState(props.options.vim);
function save(): void {
props.save({
theme: theme,
insertSpaces: insertSpaces,
fontSize: fontSize,
theme,
insertSpaces,
fontSize,
vim,
});
props.onClose();
}
@ -54,6 +56,12 @@ export function OptionsModal(props: IProps): React.ReactElement {
<Typography>Use whitespace over tabs: </Typography>
<Switch onChange={(event) => setInsertSpaces(event.target.checked)} checked={insertSpaces} />
</Box>
<Box display="flex" flexDirection="row" alignItems="center">
<Typography>Enable vim mode: </Typography>
<Switch onChange={(event) => setVim(event.target.checked)} checked={vim} />
</Box>
<Box display="flex" flexDirection="row" alignItems="center">
<TextField type="number" label="Font size" value={fontSize} onChange={onFontChange} />
</Box>

230
src/ScriptEditor/ui/ScriptEditorRoot.tsx
View File

@ -2,6 +2,7 @@
import React, { useState, useEffect, useRef, useMemo } from "react";
import Editor, { Monaco } from "@monaco-editor/react";
import * as monaco from "monaco-editor";
type IStandaloneCodeEditor = monaco.editor.IStandaloneCodeEditor;
type ITextModel = monaco.editor.ITextModel;
import { OptionsModal } from "./OptionsModal";
@ -16,7 +17,7 @@ import { TextFile } from "../../TextFile";
import { calculateRamUsage, checkInfiniteLoop } from "../../Script/RamCalculations";
import { RamCalculationErrorCode } from "../../Script/RamCalculationErrorCodes";
import { numeralWrapper } from "../../ui/numeralFormat";
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import { NetscriptFunctions } from "../../NetscriptFunctions";
import { WorkerScript } from "../../Netscript/WorkerScript";
@ -37,13 +38,13 @@ import { PromptEvent } from "../../ui/React/PromptManager";
import libSource from "!!raw-loader!../NetscriptDefinitions.d.ts";
interface IProps {
filename: string;
code: string;
hostname: string;
player: IPlayer;
router: IRouter;
vim?: boolean;
}
// TODO: try to removve global symbols
@ -75,7 +76,6 @@ export function SetupTextEditor(): void {
symbols = symbols.filter((symbol: string) => !exclude.includes(symbol)).sort();
}
// Holds all the data for a open script
class OpenScript {
fileName: string;
@ -97,13 +97,20 @@ class OpenScript {
export function Root(props: IProps): React.ReactElement {
const editorRef = useRef<IStandaloneCodeEditor | null>(null);
const monacoRef = useRef<Monaco | null>(null);
const vimStatusRef = useRef<HTMLElement>(null);
const [vimEditor, setVimEditor] = useState<any>(null);
const [editor, setEditor] = useState<IStandaloneCodeEditor | null>(null);
const [openScripts, setOpenScripts] = useState<OpenScript[]>(
window.localStorage.getItem('scriptEditorOpenScripts') !== null ? JSON.parse(window.localStorage.getItem('scriptEditorOpenScripts')!) : []
window.localStorage.getItem("scriptEditorOpenScripts") !== null
? JSON.parse(window.localStorage.getItem("scriptEditorOpenScripts")!)
: [],
);
const [currentScript, setCurrentScript] = useState<OpenScript | null>(
window.localStorage.getItem('scriptEditorCurrentScript') !== null ? JSON.parse(window.localStorage.getItem('scriptEditorCurrentScript')!) : null
window.localStorage.getItem("scriptEditorCurrentScript") !== null
? JSON.parse(window.localStorage.getItem("scriptEditorCurrentScript")!)
: null,
);
const [ram, setRAM] = useState("RAM: ???");
@ -115,21 +122,28 @@ export function Root(props: IProps): React.ReactElement {
theme: Settings.MonacoTheme,
insertSpaces: Settings.MonacoInsertSpaces,
fontSize: Settings.MonacoFontSize,
vim: props.vim || Settings.MonacoVim,
});
useEffect(() => {
// Save currentScript
window.localStorage.setItem('scriptEditorCurrentScript', JSON.stringify(currentScript, (key, value) => {
if (key == 'model') return undefined;
return value;
}));
window.localStorage.setItem(
"scriptEditorCurrentScript",
JSON.stringify(currentScript, (key, value) => {
if (key == "model") return undefined;
return value;
}),
);
// Save openScripts
window.localStorage.setItem('scriptEditorOpenScripts', JSON.stringify(openScripts, (key, value) => {
if (key == 'model') return undefined;
return value;
}))
}, [currentScript, openScripts])
window.localStorage.setItem(
"scriptEditorOpenScripts",
JSON.stringify(openScripts, (key, value) => {
if (key == "model") return undefined;
return value;
}),
);
}, [currentScript, openScripts]);
useEffect(() => {
if (currentScript !== null) {
@ -146,8 +160,8 @@ export function Root(props: IProps): React.ReactElement {
save();
}
// CTRL/CMD + S
if (event.code == `KeyS` && (event.ctrlKey || event.metaKey)) {
// CTRL/CMD + S
if (event.code == `KeyS` && (event.ctrlKey || event.metaKey)) {
event.preventDefault();
event.stopPropagation();
save();
@ -157,6 +171,35 @@ export function Root(props: IProps): React.ReactElement {
return () => document.removeEventListener("keydown", maybeSave);
});
useEffect(() => {
// setup monaco-vim
if (options.vim && editor && !vimEditor) {
try {
// This library is not typed
// @ts-expect-error
window.require(["monaco-vim"], function (MonacoVim: any) {
setVimEditor(MonacoVim.initVimMode(editor, vimStatusRef.current));
MonacoVim.VimMode.Vim.defineEx("write", "w", function () {
// your own implementation on what you want to do when :w is pressed
save();
});
MonacoVim.VimMode.Vim.defineEx("quit", "q", function () {
save();
});
editor.focus();
});
} catch {}
} else if (!options.vim) {
// Whem vim mode is disabled
vimEditor?.dispose();
setVimEditor(null);
}
return () => {
vimEditor?.dispose();
};
}, [options, editorRef, editor, vimEditor]);
// Generates a new model for the script
function regenerateModel(script: OpenScript): void {
if (monacoRef.current !== null) {
@ -253,9 +296,12 @@ export function Root(props: IProps): React.ReactElement {
loadThemes(monaco);
}
// When the editor is mounted
function onMount(editor: IStandaloneCodeEditor, monaco: Monaco): void {
// Required when switching between site navigation (e.g. from Script Editor -> Terminal and back)
// the `useEffect()` for vim mode is called before editor is mounted.
setEditor(editor);
editorRef.current = editor;
monacoRef.current = monaco;
@ -263,10 +309,16 @@ export function Root(props: IProps): React.ReactElement {
if (props.filename) {
// Check if file is already opened
const openScriptIndex = openScripts.findIndex(script => script.fileName === props.filename && script.hostname === props.hostname);
const openScriptIndex = openScripts.findIndex(
(script) => script.fileName === props.filename && script.hostname === props.hostname,
);
if (openScriptIndex !== -1) {
// Script is already opened
if (openScripts[openScriptIndex].model === undefined || openScripts[openScriptIndex].model === null || openScripts[openScriptIndex].model.isDisposed()) {
if (
openScripts[openScriptIndex].model === undefined ||
openScripts[openScriptIndex].model === null ||
openScripts[openScriptIndex].model.isDisposed()
) {
regenerateModel(openScripts[openScriptIndex]);
}
@ -277,8 +329,14 @@ export function Root(props: IProps): React.ReactElement {
updateRAM(openScripts[openScriptIndex].code);
} else {
// Open script
const newScript = new OpenScript(props.filename, props.code, props.hostname, new monacoRef.current.Position(0, 0), monacoRef.current.editor.createModel(props.code, 'javascript'));
setOpenScripts(oldArray => [...oldArray, newScript]);
const newScript = new OpenScript(
props.filename,
props.code,
props.hostname,
new monacoRef.current.Position(0, 0),
monacoRef.current.editor.createModel(props.code, "javascript"),
);
setOpenScripts((oldArray) => [...oldArray, newScript]);
setCurrentScript({ ...newScript });
editorRef.current.setModel(newScript.model);
updateRAM(newScript.code);
@ -331,9 +389,11 @@ export function Root(props: IProps): React.ReactElement {
if (editorRef.current !== null) {
const newPos = editorRef.current.getPosition();
if (newPos === null) return;
setCurrentScript(oldScript => ({ ...oldScript!, code: newCode, lastPosition: newPos! }))
setCurrentScript((oldScript) => ({ ...oldScript!, code: newCode, lastPosition: newPos! }));
if (currentScript !== null) {
const curIndex = openScripts.findIndex(script => script.fileName === currentScript.fileName && script.hostname === currentScript.hostname);
const curIndex = openScripts.findIndex(
(script) => script.fileName === currentScript.fileName && script.hostname === currentScript.hostname,
);
const newArr = [...openScripts];
const tempScript = currentScript;
tempScript.code = newCode;
@ -342,7 +402,7 @@ export function Root(props: IProps): React.ReactElement {
}
try {
infLoop(newCode);
} catch (err) { }
} catch (err) {}
}
}
@ -477,10 +537,10 @@ export function Root(props: IProps): React.ReactElement {
return result;
}
function onDragEnd(result: any): void{
function onDragEnd(result: any): void {
// Dropped outside of the list
if (!result.destination) {
result
result;
return;
}
@ -492,7 +552,9 @@ export function Root(props: IProps): React.ReactElement {
function onTabClick(index: number): void {
if (currentScript !== null) {
// Save currentScript to openScripts
const curIndex = openScripts.findIndex(script => script.fileName === currentScript.fileName && script.hostname === currentScript.hostname);
const curIndex = openScripts.findIndex(
(script) => script.fileName === currentScript.fileName && script.hostname === currentScript.hostname,
);
openScripts[curIndex] = currentScript;
}
@ -514,29 +576,36 @@ export function Root(props: IProps): React.ReactElement {
async function onTabClose(index: number): Promise<void> {
// See if the script on the server is up to date
const closingScript = openScripts[index];
const savedOpenScripts: Array<OpenScript> = JSON.parse(window.localStorage.getItem('scriptEditorOpenScripts')!);
const savedScriptIndex = savedOpenScripts.findIndex(script => script.fileName === closingScript.fileName && script.hostname === closingScript.hostname);
let savedScriptCode = '';
const savedOpenScripts: Array<OpenScript> = JSON.parse(window.localStorage.getItem("scriptEditorOpenScripts")!);
const savedScriptIndex = savedOpenScripts.findIndex(
(script) => script.fileName === closingScript.fileName && script.hostname === closingScript.hostname,
);
let savedScriptCode = "";
if (savedScriptIndex !== -1) {
savedScriptCode = savedOpenScripts[savedScriptIndex].code;
}
const serverScriptIndex = GetServer(closingScript.hostname)?.scripts.findIndex(script => script.filename === closingScript.fileName);
if (serverScriptIndex === -1 || savedScriptCode !== GetServer(closingScript.hostname)?.scripts[serverScriptIndex as number].code) {
const serverScriptIndex = GetServer(closingScript.hostname)?.scripts.findIndex(
(script) => script.filename === closingScript.fileName,
);
if (
serverScriptIndex === -1 ||
savedScriptCode !== GetServer(closingScript.hostname)?.scripts[serverScriptIndex as number].code
) {
PromptEvent.emit({
txt: 'Do you want to save changes to ' + closingScript.fileName + '?',
txt: "Do you want to save changes to " + closingScript.fileName + "?",
resolve: (result: boolean) => {
if (result) {
// Save changes
closingScript.code = savedScriptCode;
saveScript(closingScript);
}
}
})
},
});
}
if (openScripts.length > 1) {
setOpenScripts(oldScripts => oldScripts.filter((value, i) => i !== index));
setOpenScripts((oldScripts) => oldScripts.filter((value, i) => i !== index));
let indexOffset = -1;
if (openScripts[index + indexOffset] === undefined) {
@ -546,13 +615,17 @@ export function Root(props: IProps): React.ReactElement {
// Change current script if we closed it
setCurrentScript(openScripts[index + indexOffset]);
if (editorRef.current !== null) {
if (openScripts[index + indexOffset].model === undefined || openScripts[index + indexOffset].model === null || openScripts[index + indexOffset].model.isDisposed()) {
if (
openScripts[index + indexOffset].model === undefined ||
openScripts[index + indexOffset].model === null ||
openScripts[index + indexOffset].model.isDisposed()
) {
regenerateModel(openScripts[index + indexOffset]);
}
editorRef.current.setModel(openScripts[index + indexOffset].model);
editorRef.current.setPosition(openScripts[index + indexOffset].lastPosition);
editorRef.current.revealLineInCenter(openScripts[index + indexOffset].lastPosition.lineNumber)
editorRef.current.revealLineInCenter(openScripts[index + indexOffset].lastPosition.lineNumber);
editorRef.current.focus();
}
} else {
@ -562,14 +635,17 @@ export function Root(props: IProps): React.ReactElement {
}
}
// 370px 71%, 725px 85.1%, 1085px 90%, 1300px 91.7%
// fuck around in desmos until you find a function
const p = 11000 / -window.innerHeight + 100;
// TODO: Make this responsive to window resizes
// Toolbars are roughly 108px + vim bar 34px
// Get percentage of space that toolbars represent and the rest should be the
// editor
const editorHeight = 100 - ((108 + (options.vim ? 34 : 0)) / window.innerHeight) * 100;
return (
<>
<div style={{ display: currentScript !== null ? 'block' : 'none', height: '100%', width: '100%' }}>
<div style={{ display: currentScript !== null ? "block" : "none", height: "100%", width: "100%" }}>
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId='tabs' direction='horizontal'>
<Droppable droppableId="tabs" direction="horizontal">
{(provided, snapshot) => (
<Box
maxWidth="1640px"
@ -579,10 +655,18 @@ export function Root(props: IProps): React.ReactElement {
whiteSpace="nowrap"
ref={provided.innerRef}
{...provided.droppableProps}
style={{ backgroundColor: snapshot.isDraggingOver ? '#1F2022' : Settings.theme.backgroundprimary, overflowX: 'scroll' }}
style={{
backgroundColor: snapshot.isDraggingOver ? "#1F2022" : Settings.theme.backgroundprimary,
overflowX: "scroll",
}}
>
{openScripts.map(({ fileName, hostname }, index) => (
<Draggable key={fileName + hostname} draggableId={fileName + hostname} index={index} disableInteractiveElementBlocking={true}>
<Draggable
key={fileName + hostname}
draggableId={fileName + hostname}
index={index}
disableInteractiveElementBlocking={true}
>
{(provided) => (
<div
ref={provided.innerRef}
@ -590,22 +674,33 @@ export function Root(props: IProps): React.ReactElement {
{...provided.dragHandleProps}
style={{
...provided.draggableProps.style,
marginRight: '5px',
flexShrink: 0
marginRight: "5px",
flexShrink: 0,
}}
>
<Button
id={"tabButton" + fileName + hostname}
onClick={() => onTabClick(index)}
style={{ background: currentScript?.fileName === openScripts[index].fileName ? Settings.theme.secondarydark : '' }}
style={{
background:
currentScript?.fileName === openScripts[index].fileName
? Settings.theme.secondarydark
: "",
}}
>
{hostname}:~/{fileName}
</Button>
<Button
id={"tabCloseButton" + fileName + hostname}
onClick={() => onTabClose(index)}
style={{ maxWidth: "20px", minWidth: "20px", background: currentScript?.fileName === openScripts[index].fileName ? Settings.theme.secondarydark : '' }}
style={{
maxWidth: "20px",
minWidth: "20px",
background:
currentScript?.fileName === openScripts[index].fileName
? Settings.theme.secondarydark
: "",
}}
>
x
</Button>
@ -618,18 +713,28 @@ export function Root(props: IProps): React.ReactElement {
)}
</Droppable>
</DragDropContext>
<div style={{ paddingBottom: '5px' }} />
<div style={{ paddingBottom: "5px" }} />
<Editor
beforeMount={beforeMount}
onMount={onMount}
loading={<Typography>Loading script editor!</Typography>}
height={p + "%"}
height={`${editorHeight}%`}
defaultLanguage="javascript"
defaultValue={''}
defaultValue={""}
onChange={updateCode}
theme={options.theme}
options={{ ...options, glyphMargin: true }}
/>
<Box
ref={vimStatusRef}
className="monaco-editor"
display="flex"
flexDirection="row"
sx={{ p: 1 }}
alignItems="center"
></Box>
<Box display="flex" flexDirection="row" sx={{ m: 1 }} alignItems="center">
<Button onClick={beautify}>Beautify</Button>
<Typography color={updatingRam ? "secondary" : "primary"} sx={{ mx: 1 }}>
@ -661,18 +766,31 @@ export function Root(props: IProps): React.ReactElement {
theme: Settings.MonacoTheme,
insertSpaces: Settings.MonacoInsertSpaces,
fontSize: Settings.MonacoFontSize,
vim: Settings.MonacoVim,
}}
save={(options: Options) => {
setOptions(options);
Settings.MonacoTheme = options.theme;
Settings.MonacoInsertSpaces = options.insertSpaces;
Settings.MonacoFontSize = options.fontSize;
Settings.MonacoVim = options.vim;
}}
/>
</div>
<div style={{ display: currentScript !== null ? 'none' : 'flex', height: '100%', width: '100%', justifyContent: 'center', alignItems: 'center' }}>
<p style={{ color: Settings.theme.primary, fontSize: '20px', textAlign: 'center' }}><h1>No open files</h1><h5>Use "nano [File Name]" in the terminal to open files</h5></p>
<div
style={{
display: currentScript !== null ? "none" : "flex",
height: "100%",
width: "100%",
justifyContent: "center",
alignItems: "center",
}}
>
<p style={{ color: Settings.theme.primary, fontSize: "20px", textAlign: "center" }}>
<h1>No open files</h1>
<h5>Use "nano [File Name]" in the terminal to open files</h5>
</p>
</div>
</>
)
);
}

3
src/Settings/Settings.ts
View File

@ -134,6 +134,8 @@ interface ISettings extends IDefaultSettings {
MonacoInsertSpaces: boolean;
MonacoFontSize: number;
MonacoVim: boolean;
}
export const defaultSettings: IDefaultSettings = {
@ -193,6 +195,7 @@ export const Settings: ISettings & ISelfInitializer & ISelfLoading = {
MonacoTheme: "monokai",
MonacoInsertSpaces: false,
MonacoFontSize: 20,
MonacoVim: false,
theme: { ...defaultTheme },
init() {

3
src/index.html
View File

@ -21,12 +21,13 @@
/>
<script>
var require = { paths: { vs: "dist/ext/monaco-editor/min/vs" } };
var require = { paths: { vs: "dist/ext/monaco-editor/min/vs", "monaco-vim": "dist/ext/monaco-vim" } };
</script>
<script src="dist/ext/monaco-editor/min/vs/loader.js"></script>
<script src="dist/ext/monaco-editor/min/vs/editor/editor.main.nls.js"></script>
<script src="dist/ext/monaco-editor/min/vs/editor/editor.main.js"></script>
<script src="dist/ext/monaco-vim.js"></script>
<!-- Google Analytics -->
<script>