Minor fixes

zziger · Oct 29, 2021 · 42535ff · 42535ff
1 parent deac2dd
commit 42535ff
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 18 deletions.
diff --git a/frontend/src/components/Editor.tsx b/frontend/src/components/Editor.tsx
@@ -80,6 +80,7 @@ export class Editor extends React.Component<EditorProps, EditorState> {
 
     componentDidUpdate(prevProps: Readonly<EditorProps>, prevState: Readonly<EditorState>, 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<EditorProps, EditorState> {
     render() {
         return this.state.loaded
             ? <MonacoEditor
-                options={{
-                    automaticLayout: true
-                }}
+                width="100%"
+                height="100%"
                 editorDidMount={this.editorLoaded}
                 language="javascript"
                 theme={this.state.loaded ? this.props.theme : 'vs-dark'}

diff --git a/frontend/src/components/ResizableWindow.tsx b/frontend/src/components/ResizableWindow.tsx
@@ -13,7 +13,7 @@ export interface WindowSize extends Vector2 {
 }
 
 interface ResizableWindowProps {
-    children: (startMove: (e: React.MouseEvent) => 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<ResizableWindowProps, ResizableWindowState> {
@@ -32,7 +33,8 @@ export class ResizableWindow extends React.Component<ResizableWindowProps, Resiz
             y: 0,
             width: 500,
             height: 500,
-        }
+        },
+        dragging: false
     }
 
     private startWindowSize?: WindowSize;
@@ -64,6 +66,7 @@ export class ResizableWindow extends React.Component<ResizableWindowProps, Resiz
         this.lastWindowSize = this.state.windowSize;
         document.addEventListener('mousemove', this.processResize);
         document.addEventListener('mouseup', this.stopResize);
+        this.setState({ dragging: true });
     }
 
     stopResize = () => {
@@ -75,6 +78,7 @@ export class ResizableWindow extends React.Component<ResizableWindowProps, Resiz
         document.removeEventListener('mousemove', this.processResize);
         document.removeEventListener('mouseup', this.stopResize);
         this.save();
+        this.setState({ dragging: false });
     };
 
     processResize = (e: MouseEvent) => {
@@ -183,7 +187,7 @@ export class ResizableWindow extends React.Component<ResizableWindowProps, Resiz
                     {this.props.children((e: React.MouseEvent) => e.target == e.currentTarget && this.startMove({
                         x: e.clientX,
                         y: e.clientY
-                    }))}
+                    }), this.state.dragging)}
                 </div>
                 <div className="edge vertical" onMouseDown={this.getResize(true, undefined)}/>
                 <div className="corner right" onMouseDown={this.getResize(false, true)}/>

diff --git 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
+        background: RGB(var(--bg))
diff --git 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
@@ -99,7 +99,7 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
 
     log = (id: number, data: string) => {
         if (this.actionId !== id) return;
-        this.setState({ result: this.state.result + this.converter.toHtml(data) + '<br>' });
+        this.setState({result: this.state.result + this.converter.toHtml(data) + '<br>'});
     }
 
     execute = async () => {
@@ -315,13 +315,12 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
     }
 
     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<CodeEditorProps, CodeEditorState> {
         styleColors['--sep'] = this.state.settings.highlightSeparators === false ? styleColors['--bg'] : styleColors['--fg'];
 
         return <ResizableWindow bgColor={colors.background} fgColor={colors.foreground} name="codeEditor" visible={this.props.active}>
-            {startMove => <>
+            {(startMove, dragging) => <>
                 <div className="header" onMouseDown={startMove}>
                     <div className="name">Code
                         editor{!!this.state.activeFile && ` - ${this.state.activeFile} [${this.files.find(f => f.name === this.state.activeFile)?.type === 0 ? 'client' : 'server'}]`}</div>
@@ -385,7 +384,7 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
                         </div>
                     </div>
                     <div className="mainBlock" ref={this._mainBlockRef}>
-                        <div className="code" style={{
+                        <div className="code" data-dragging={dragging} style={{
                             height: (100 - this.state.resultHeight) + '%'
                         }}>
                             <Editor theme={theme} ref={this._ref} onLoaded={this.onEditorLoad} onUpdate={this.onUpdate}/>