the resize bar works cool

.prettierignore

@@ -1,3 +1,3 @@
 node_modules
 dist
-src/libs/ace
+out

src/index.ts

@@ -15,11 +15,16 @@ const createWindow = (): void => {
     webPreferences: {
       nodeIntegration: true,
     },
+    show: false,
   });
 
   // and load the index.html of the app.
   win.loadFile(path.join(__dirname, "window/index.html"));
 
+  win.once("ready-to-show", () => {
+    win.show();
+  });
+
   win.webContents.on("before-input-event", (e, input) => {
     if (
       (input.control || input.meta) &&

src/ui/dragBar.ts

@@ -1,16 +1,47 @@
 import { Element } from "./index";
 import { create } from "../libs/elements";
 
+let bars = [];
+let target = null;
+
+document.addEventListener("mousedown", (event) => {
+  target = null;
+  const filtered = bars.filter((i) => i.element.contains(event.target));
+  if (filtered.length === 0) return;
+  if (!filtered[0].hasOwnProperty("dragged")) return;
+  target = filtered[0];
+  target.dragged(event);
+});
+
+document.addEventListener("mousemove", (event) => {
+  if (!target) return;
+  target.dragged(event);
+});
+
+document.addEventListener("mouseup", (event) => {
+  if (!target) return;
+  target.dragged(event);
+  target = null;
+});
+
 export class Bar extends Element {
+  dragged: Function;
   constructor(parent: HTMLElement, direction: string) {
     super();
     const el = create("div", ["bar"]);
-    if(direction === "leftRight") {
+    if (direction === "leftRight") {
       el.style.cursor = "ew-resize";
     } else {
       el.style.cursor = "ns-resize";
     }
     parent.append(el);
+    bars.push(this);
     this.element = el;
   }
+
+  dispose() {
+    super.dispose();
+    bars = bars.filter((i) => i !== this);
+    return null;
+  }
 }

src/ui/editor.ts

@@ -9,10 +9,10 @@ ace.require("ace/ext/language_tools");
 
 export class Editor extends Element {
   editor;
-  
+
   constructor(parent: HTMLElement) {
     super();
-    
+
     // create element
     const el = create("div", ["editor"]);
     el.id = Math.random().toString(36).slice(2);
@@ -28,7 +28,6 @@ export class Editor extends Element {
     editor.setOption("esversion", "8");
     this.editor = editor;
     this.element = el;
-
   }
 
   listen(name: string, key: string, exec: Function): void {

src/ui/inspect.ts

@@ -31,13 +31,14 @@ function displayArray(arr: Array<unknown>): HTMLElement {
       for (const i in arr) {
         const item = create("div", ["item"]);
         item.append(displayPart(arr[i]));
-        if(Number(i) !== arr.length - 1)item.append(create("div", ["comma"], ","));
+        if (Number(i) !== arr.length - 1)
+          item.append(create("div", ["comma"], ","));
         cont.append(item);
       }
-      if(arr.length>10) {
-        cont.style.display="block";
-      }else{
-        cont.style.display="flex";
+      if (arr.length > 10) {
+        cont.style.display = "block";
+      } else {
+        cont.style.display = "flex";
       }
       cont.append(create("div", ["expand"], "]"));
     } else {
@@ -98,11 +99,12 @@ function displayFunction(func: Function): HTMLElement {
 function displayError(err: Error): HTMLElement {
   const main = err.toString();
   const stack = ""; //err.stack; // problem with vm2
-  return create("div", ["error"], main+stack);
+  return create("div", ["error"], main + stack);
 }
 
 function displayPart(thing): HTMLElement {
-  if(typeof thing === "undefined") return create("div", ["value", "undefined"], "undefined");
+  if (typeof thing === "undefined")
+    return create("div", ["value", "undefined"], "undefined");
   switch (typeof thing) {
     case "string":
       return create("div", ["value", "string"], `"${thing}"`);

src/window/console.css

@@ -45,12 +45,12 @@
 }
 
 .display .string {
-  color: #E1D672;
+  color: #e1d672;
 }
 
 .display .number,
 .display .boolean {
-  color: #A97DF7;
+  color: #a97df7;
 }
 
 .display .key {
@@ -58,7 +58,7 @@
 }
 
 .display .function {
-  color: #C95BFC;
+  color: #c95bfc;
 }
 
 .display .undefined {

src/window/index.css

@@ -7,27 +7,23 @@
 }
 
 body {
-  font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
+  font: 12px / normal "Monaco", "Menlo", "Ubuntu Mono", "Consolas",
+    "source-code-pro", monospace;
   color: var(--foreground);
   background: var(--background);
   overflow: hidden;
 }
 
 #main {
-  position: ;
-  display: grid;
-  height: 100vh;
-  width: 100vw;
-  grid-template-areas: "editor resize console";
-  grid-template-columns: 1fr 3px 1fr;
-}
-
-.editor {
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
-  bottom: 0;
-  width: 50%;
+  height: 100vh;
+  width: 100vw;
+
+  display: grid;
+  grid-template-areas: "editor resize console";
+  grid-template-columns: 1fr 3px 1fr;
 }
 
 .bar {

src/window/main.ts

@@ -23,17 +23,28 @@ edit.listen("open", "ctrl-o", () => {
 });
 
 edit.listen("format", "ctrl-alt-s", (editor) => {
-  const result = format(editor.session.getValue(), {
-    cursorOffset: editor.session.doc.positionToIndex(
-      editor.selection.getCursor()
-    ),
-  }, {parser: "babel"});
+  const cursor = editor.selection.getCursor();
+  const index = editor.session.doc.positionToIndex(cursor);
+  const value = editor.session.getValue();
+  const result = format(value, { cursorOffset: index, parser: "babel" });
   editor.session.setValue(result.formatted, -1);
-  editor.moveCursorToPosition(
-    editor.session.doc.indexToPosition(result.cursorOffset)
-  );
+  const position = editor.session.doc.indexToPosition(result.cursorOffset);
+  editor.moveCursorToPosition(position);
 });
 
+bar.dragged = function (e) {
+  const barWidth = 3,
+    minX = 0,
+    maxX = window.innerWidth - barWidth;
+  let newX = e.clientX;
+  if (newX < minX) newX = minX;
+  if (newX > maxX) newX = maxX;
+  main.style.gridTemplateColumns = `${newX}px ${barWidth}px 1fr`;
+  const atEdge = newX === minX || newX === maxX;
+  bar.element.style.opacity = String(atEdge ? 0 : 1);
+  edit.editor.resize();
+};
+
 ipcRenderer.on("runCode", (e) => {
   const res = run(edit.editor.session.getValue());
   consol.log(res);