diff --git a/frontend/src/components/Editor.tsx b/frontend/src/components/Editor.tsx index dc9622a..b29dd0e 100644 --- a/frontend/src/components/Editor.tsx +++ b/frontend/src/components/Editor.tsx @@ -80,6 +80,7 @@ export class Editor extends React.Component { componentDidUpdate(prevProps: Readonly, prevState: Readonly, snapshot?: any) { if (prevProps.theme != this.props.theme) this.monaco?.editor.setTheme(this.props.theme); + this.editor?.layout(); } editorLoaded = async (_: IStandaloneCodeEditor, editor: typeof monaco) => { @@ -209,9 +210,8 @@ export class Editor extends React.Component { render() { return this.state.loaded ? void) => JSX.Element; + children: (startMove: (e: React.MouseEvent) => void, dragging: boolean) => JSX.Element; name: string; visible?: boolean; bgColor?: string; @@ -22,6 +22,7 @@ interface ResizableWindowProps { interface ResizableWindowState { windowSize: WindowSize; + dragging: boolean; } export class ResizableWindow extends React.Component { @@ -32,7 +33,8 @@ export class ResizableWindow extends React.Component { @@ -75,6 +78,7 @@ export class ResizableWindow extends React.Component { @@ -183,7 +187,7 @@ export class ResizableWindow extends React.Component e.target == e.currentTarget && this.startMove({ x: e.clientX, y: e.clientY - }))} + }), this.state.dragging)}
diff --git a/frontend/src/styles/App.sass b/frontend/src/styles/App.sass index 8dcf62d..1c754ba 100644 --- a/frontend/src/styles/App.sass +++ b/frontend/src/styles/App.sass @@ -22,8 +22,6 @@ cursor: nwse-resize .content - overflow: hidden - .header width: 100% height: 30px @@ -63,9 +61,8 @@ height: 100% .innerContent - height: calc(100% - 30px) + height: calc(100% - 30px - #{$frame}) width: 100% max-height: calc(100% - 30px) max-width: 100% - background: RGB(var(--bg)) - overflow: hidden \ No newline at end of file + background: RGB(var(--bg)) \ No newline at end of file diff --git a/frontend/src/styles/codeEditor.sass b/frontend/src/styles/codeEditor.sass index f2ddeba..1311d7f 100644 --- a/frontend/src/styles/codeEditor.sass +++ b/frontend/src/styles/codeEditor.sass @@ -178,6 +178,10 @@ background: RGB(var(--bg)) flex: 1 + &[data-dragging=true] + & > * + display: none + .result background: RGB(var(--bg)) height: 30% diff --git a/frontend/src/windows/codeEditor/CodeEditor.tsx b/frontend/src/windows/codeEditor/CodeEditor.tsx index cafa2a1..acf5e7b 100644 --- a/frontend/src/windows/codeEditor/CodeEditor.tsx +++ b/frontend/src/windows/codeEditor/CodeEditor.tsx @@ -99,7 +99,7 @@ class CodeEditor extends React.Component { log = (id: number, data: string) => { if (this.actionId !== id) return; - this.setState({ result: this.state.result + this.converter.toHtml(data) + '
' }); + this.setState({result: this.state.result + this.converter.toHtml(data) + '
'}); } execute = async () => { @@ -315,13 +315,12 @@ class CodeEditor extends React.Component { } setSetting = (key: string, value: any) => { - this.setState({settings: {...this.state.settings, [key]: value}}); - this.saveSettings(); + this.setState({settings: {...this.state.settings, [key]: value}}, this.saveSettings); }; - saveSettings() { + saveSettings = () => { ClientMethods.save('codeEditor:settings', this.state.settings); - } + }; onUpdate = Utils.debounce(this.saveFile, 3000); @@ -341,7 +340,7 @@ class CodeEditor extends React.Component { styleColors['--sep'] = this.state.settings.highlightSeparators === false ? styleColors['--bg'] : styleColors['--fg']; return - {startMove => <> + {(startMove, dragging) => <>
Code editor{!!this.state.activeFile && ` - ${this.state.activeFile} [${this.files.find(f => f.name === this.state.activeFile)?.type === 0 ? 'client' : 'server'}]`}
@@ -385,7 +384,7 @@ class CodeEditor extends React.Component {
-