runlab 0.1.1 → 1.0.0

package/dist/app/app.js

@@ -1,6 +1,7 @@
 import { createEditor } from "./core/editor.js";
 import { createNavbar } from "./core/navbar.js";
 import { FileExplorer } from "./fileExplorer/FileExplorer.js";
+import { createTerminal } from "./terminal/terminal.js";
 
 export function generateContainer(parentId,w,h) {
   const container = document.createElement("div");
@@ -13,13 +14,50 @@ export function generateContainer(parentId,w,h) {
     justifyContent: "center",
     alignItems: "center",
     overflow: "hidden"
-  }); 
+  });
   document.getElementById(parentId).appendChild(container);
   gridTemplate("runlab-container", w, h);
-  createNavbar("runlab-navbar");
   createEditor("runlab-editor","");
 
-  new FileExplorer("runlab-file-explorer");
+  // View and Editor toggle
+  const editor = document.getElementById("runlab-editor");
+  const overlay = document.createElement("div");
+  overlay.id = "runlab-view";
+  Object.assign(overlay.style, {
+    position: "absolute",
+    inset: "0",
+    backgroundColor: "#303030"
+  });
+  editor.style.position = "relative";
+  editor.appendChild(overlay);
+
+  const viewContent = document.createElement("iframe");
+  viewContent.id = "runlab-view-content";
+  Object.assign(viewContent.style, {
+    width: "100%",
+    height: "100%",
+    border: "none",
+    backgroundColor: "rgba(255, 255, 255, 0.8)"
+  });
+  document.getElementById("runlab-view").appendChild(viewContent);
+
+  const fe = new FileExplorer("runlab-file-explorer");
+  const root = fe.getRoot();
+  setFileExplorerNode(fe);
+  createNavbar("runlab-navbar");
+
+  setEditorActive(false); // Start with editor off
+
+  // ===============================
+
+  createTerminal("runlab-terminal",root);
+
+}
+
+export function appendViewContent(codeReturned) {
+  const viewContent = document.getElementById("runlab-view-content");
+  viewContent.srcdoc = codeReturned;
+
 }
 
 function gridTemplate(parent) {
@@ -60,7 +98,10 @@ function gridTemplate(parent) {
   Object.assign(editor.style, {
     gridColumn: "2 / 3",
     gridRow: "2 / 3",  // linha logo após a navbar
-    border: "1px solid #09090b"
+    border: "1px solid #09090b",
+    width: "100%",
+    height: "100%",
+    overflow: "hidden"
   });
 
   // Right Bottom
@@ -69,6 +110,9 @@ function gridTemplate(parent) {
   Object.assign(terminal.style, {
     gridColumn: "2 / 3",
     gridRow: "3 / 4",  // última linha
+    width: "100%",
+    height: "100%",
+    overflow: "hidden",
     border: "1px solid #09090b"
   });
 
@@ -77,4 +121,136 @@ function gridTemplate(parent) {
   grid.appendChild(editor);
   grid.appendChild(terminal);
   document.getElementById(parent).appendChild(grid);
+}
+
+export function setViewActive(status = false){
+
+  const editorBtn = document.getElementById("runlab-editor-btn");
+  const viewBtn = document.getElementById("runlab-view-btn");
+
+  editorBtn.classList.remove("active");
+  viewBtn.classList.remove("active");
+  if(status){
+    viewBtn.classList.add("active");
+  }
+  if(!status){
+    editorBtn.classList.add("active");
+  }
+
+  [editorBtn, viewBtn].forEach(b => {
+      b.style.background = "transparent";
+      b.style.color = "#000";
+  });
+
+  if(status){
+    document.getElementById("runlab-view").style.display = "block";
+    viewBtn.style.background = "#303030";
+    viewBtn.style.color = "#fff";
+  }
+
+  if (!status){
+    document.getElementById("runlab-view").style.display = "none";
+    editorBtn.style.background = "#303030";
+    editorBtn.style.color = "#fff";
+  }
+}
+
+export function setEditorActive(status = true){
+  const editorWarning = document.createElement("div");
+  editorWarning.id = "runlab-editor-warning";
+  Object.assign(editorWarning.style, {
+    position: "absolute",
+    inset: "0",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "8px",
+    textAlign: "center",
+  });
+  
+  //================================ SVG Warning Icon ================================
+  const warningImage = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+
+  warningImage.setAttribute("viewBox", "0 0 128 128");
+  warningImage.setAttribute("width", "128");
+  warningImage.setAttribute("height", "128");
+  warningImage.setAttribute("fill", "none");
+
+  warningImage.innerHTML = `
+    <path
+      d="M24 8 H80 L104 32 V112 H24 Z M80 8 V32 H104"
+      stroke="currentColor"
+      stroke-width="4"
+      stroke-linejoin="round"
+    />
+
+    <rect x="40" y="44" rx="6" ry="6" width="20" height="4"
+      fill="currentColor" transform="rotate(-25 36 44)" />
+    <rect x="68" y="44" rx="6" ry="6" width="20" height="4"
+      fill="currentColor" transform="rotate(25 64 44)" />
+
+    <circle cx="50" cy="64" r="5" fill="currentColor" />
+    <circle cx="78" cy="64" r="5" fill="currentColor" />
+
+    <rect x="44" y="80" rx="6" ry="6" width="40" height="5"
+      fill="currentColor" />
+  `;
+
+  warningImage.style.color = "#aaa";
+  
+  //================================ SVG Warning Text ================================
+
+  const warningText = document.createElement("p");
+  warningText.textContent = "No file selected.";
+  warningText.style.color = "#aaa";
+  warningText.style.fontSize = "0.9em";
+  warningText.style.margin = "0";
+
+  const warningText2 = document.createElement("p");
+  warningText2.textContent =
+    "Please create a file using right click on the file explorer at the left container and select it.";
+  warningText2.style.color = "#aaa";
+  warningText2.style.fontSize = "0.75em";
+  warningText2.style.margin = "0";
+
+  //====================================================================================
+  
+  editorWarning.appendChild(warningImage);
+  editorWarning.appendChild(warningText);
+  editorWarning.appendChild(warningText2);
+
+  const editorCodeMirror = document.getElementsByClassName("cm-editor ͼ1 ͼ3 ͼ16")[0];
+
+  if(!status){
+    document.getElementById("runlab-editor").appendChild(editorWarning);
+    if(editorCodeMirror){
+      editorCodeMirror.display = "none";
+    }
+  }
+
+  if(status){
+    const existingWarning = document.getElementById("runlab-editor-warning");
+    if(existingWarning){
+      existingWarning.remove();
+    }
+    if(editorCodeMirror){
+      editorCodeMirror.display = "block";
+    }
+  }
+
+}  
+
+let feNode = null;
+
+function setFileExplorerNode(node) {
+  feNode = node;
+}
+
+export function getFeExecutables() {
+  return feNode.getExecutables()
+}
+
+export function getFileNode(file) {
+  return feNode.getFileNode(file);
 }

package/dist/app/core/editor.js

@@ -11,7 +11,6 @@ import { json } from "@codemirror/lang-json";
 import { markdown } from "@codemirror/lang-markdown";
 import { xml } from "@codemirror/lang-xml";
 import { yaml } from "@codemirror/lang-yaml";
-import { go } from "@codemirror/lang-go";
 
 // VS Code look & feel
 import { vscodeDark } from "@uiw/codemirror-theme-vscode";
@@ -29,12 +28,26 @@ export const languageCompartment = new Compartment();
 
 export function setActiveFile(file) {
   activeFile = file;
+  let navbarFileName = document.getElementById("runlab-navbar-active-file-name")
+  if (navbarFileName) {
+    navbarFileName.textContent = file ? `${file.name}.${file.ext}` : "";
+  }
 }
 
 function getActiveFile() {
   return activeFile;
 }
 
+export function getCurrentCode() {
+  const activeFile = getActiveFile();
+  return activeFile ? activeFile.content : "";
+}
+
+export function getCurrentExtension() {
+  const activeFile = getActiveFile();
+  return activeFile ? activeFile.ext : "";
+}
+
 export function languageFromExtension(ext) {
   switch (ext) {
     case "txt": return [];
@@ -48,12 +61,11 @@ export function languageFromExtension(ext) {
     case "css":return css();
     case "js":return javascript({ typescript: false });
     case "ts":return javascript({ typescript: true });
-    case "go":return go();
+    case "lua":return [];
     default:return [];
   }
 }
 
-
 export function createEditor(parentId, initialCode = "") {
   const parent = document.getElementById(parentId);
   if (!parent) throw new Error(`Elemento #${parentId} não encontrado`);

package/dist/app/core/navbar.js

@@ -1,4 +1,7 @@
-
+import { sendCode } from "../../index.js";
+import { setViewActive } from "../app.js";
+import { getCurrentCode, getCurrentExtension } from "./editor.js";
+import Swal from "sweetalert2";
 
 export function createNavbar(parentId) {
     const navbar = document.createElement("nav");
@@ -8,28 +11,144 @@ export function createNavbar(parentId) {
       height: "100%"
     });
 
+    // ========== Menu Items ==========
+
     const ul = document.createElement("ul");
     Object.assign(ul.style, {
         listStyleType: "none",
         margin: "0",
         padding: "0",
-        display: "flex"
+        display: "flex",
+        alignItems: "center",
+        width: "100%"
     });
     navbar.appendChild(ul);
 
-    const menuItems = ["File", "Edit", "View", "Help"];
+
+    // ========== Left Menu Items ==========
+
+    const leftGroup = document.createElement("div");
+    Object.assign(leftGroup.style, {
+        display: "flex",
+        alignItems: "center"
+    });
+    ul.appendChild(leftGroup);
+
+    const menuItems = ["Run", "Help"];
     menuItems.forEach(item => {
-      const li = document.createElement("li"); 
+        const li = document.createElement("li");
         li.textContent = item;
-        ul.appendChild(li);
+
         Object.assign(li.style, {
-            marginRight: "20px",
+            marginRight: "15px",
+            marginLeft: "15px",
             padding: "10px 14px",
             cursor: "pointer",
-            color: "#fff",
-            textDecoration: "none"
+            color: "#fff"
         });
+        if (item === "Run") {
+            li.addEventListener("click", () => {
+                sendCode(getCurrentCode(),getCurrentExtension());
+                setViewActive(true);
+            });
+        }
+        if (item === "Help") {
+            li.addEventListener("click", () => {
+                Swal.fire({
+                    title: "RunLab Help",
+                    html: `
+                    <p>RunLab is a web-based code editor and runtime environment.</p>
+                    <p>Here's how to use it:</p>
+                    <ul style="text-align: left;">
+                        <li><strong>File Explorer:</strong> Use the file explorer to create, open, and manage your project files. Start it by right clicking on the left container.</li>
+                        <li><strong>Editor:</strong> Write your code in the editor pane. It supports multiple file types. To use it you should click on a file.</li>
+                        <li><strong>View:</strong> After writing your code, click the "Run" button in the navbar to execute it. The output will be displayed in the view pane.</li>
+                        <li><strong>Terminal:</strong> You can run terminal commands in the terminal pane.</li>
+                    </ul>
+                    <p>Available terminal commands:</p>
+                    <ul style="text-align: left;">
+                        <li><span style="font-weight: bold;">ls</span>: List directory contents</li>
+                        <li><span style="font-weight: bold;">cd</span>: Change directory</li>
+                        <li><span style="font-weight: bold;">clear</span>: Clear the terminal</li>
+                        <li><span style="font-weight: bold;">pwd</span>: Print current directory</li>
+                        <li><span style="font-weight: bold;">run</span>: Run a file (e.g., run script.js)</li>
+                        <li><span style="font-weight: bold;">help | h</span>: Show help message</li>
+                    </ul>
+                    `,
+                    width: 700,
+                    confirmButtonText: "Got it!"
+                            })
+            });
+        }
+
+        leftGroup.appendChild(li);
     });
 
+    // ========== Append navbar ==========
+
     document.getElementById(parentId).appendChild(navbar);
+
+    // ========== ActiveFile Name ==========
+    const activeFileName = document.createElement("li");
+    activeFileName.id = "runlab-navbar-active-file-name";
+
+    Object.assign(activeFileName.style, {
+        margin: "0 auto",
+        padding: "10px 14px",
+        fontWeight: "600",
+        color: "#FFDE21",
+        whiteSpace: "nowrap"
+    });
+
+    ul.appendChild(activeFileName);
+    // ========== Editor/View Toggle ==========
+        
+    const toggleLi = document.createElement("li");
+    Object.assign(toggleLi.style, {
+        
+        padding: "4px 10px"
+    });
+
+    const toggle = document.createElement("div");
+    Object.assign(toggle.style, {
+        display: "grid",
+        gridTemplateColumns: "1fr 1fr",
+        width: "180px",
+        height: "28px",
+        border: "2px solid #09090b",
+        borderRadius: "8px",
+        overflow: "hidden",
+        background: "#e5e7eb",
+        fontFamily: "sans-serif",
+        marginLeft: "20px"
+    });
+
+    const editorBtn = document.createElement("button");
+    editorBtn.id = "runlab-editor-btn";
+    editorBtn.textContent = "Editor";
+    editorBtn.classList.add("active");
+
+    const viewBtn = document.createElement("button");
+    viewBtn.id = "runlab-view-btn";
+    viewBtn.textContent = "View";
+
+    [editorBtn, viewBtn].forEach(btn => {
+        Object.assign(btn.style, {
+            border: "none",
+            cursor: "pointer",
+            fontWeight: "500",
+            transition: "0.2s",
+            color: "#000"
+        });
+    });
+
+    toggle.append(editorBtn, viewBtn);
+    toggleLi.appendChild(toggle);
+    ul.appendChild(toggleLi);
+
+    //Initialize with editor active
+    setViewActive(false);
+
+    editorBtn.onclick = () => setViewActive(false);
+    viewBtn.onclick   = () => setViewActive(true);
 }

package/dist/app/fileExplorer/FileExplorer.js

@@ -2,15 +2,46 @@ import { Folder } from "./Folder.js";
 import { File } from "./File.js";
 import { updateEditorContentById, setActiveFile } from "../core/editor.js";
 import Swal from "sweetalert2";
+import { setEditorActive, setViewActive } from "../app.js";
 
 export class FileExplorer {
     constructor(parentId) {
         this.container = document.getElementById(parentId);
         this.root = new Folder("root", null);
-
+        this.execFiles = [];
+        this.filesPath = [];
+        this.path = [];
         this.render();
     }
 
+    getRoot() {
+        return this.root;
+    }
+
+    getFileNode(file) {
+        const name = file.name.split(".")[0];
+        const ext = file.name.split(".")[1];
+        const path = file.path;
+        let currentNode = this.root;
+
+        for (let i = 1; i < path.length; i++) {
+            const part = path[i];
+            const nextNode = currentNode.children.find(c => c.name === part && !c.ext);
+            if (!nextNode) return null;
+            currentNode = nextNode;
+        }
+
+        return currentNode.children.find(c => c.name === name && c.ext === ext);
+    }
+
+    getExecutables() {
+        return this.execFiles;
+    }
+
+    setExecutables(files) {
+        this.execFiles = files;
+    }
+
     /* =========================
        RENDER
     ========================== */
@@ -50,12 +81,17 @@ export class FileExplorer {
                 btn.style.paddingBottom = "8px";
                 btn.style.cursor = "pointer";
                 
+                
 
                 btn.onmouseover = () => btn.style.backgroundColor = "#555";
                 btn.onmouseout = () => btn.style.backgroundColor = "transparent";
 
                 const ul = document.createElement("ul"); 
                 ul.style.display = "none";
+                ul.style.listStyle = "none";
+                ul.style.margin = "0";
+                ul.style.padding = "0 0 0 24px";
+
 
                 btn.onclick = () => this.toggle(ul);
                 btn.oncontextmenu = e => {
@@ -79,9 +115,12 @@ export class FileExplorer {
                 li.style.paddingTop = "8px";
                 li.style.paddingBottom = "8px";
                 li.style.cursor = "pointer";
+                
 
                 li.onclick = () => {
                     setActiveFile(node);
+                    setViewActive(false);
+                    setEditorActive(true);
                     updateEditorContentById("runlab-editor", node.content);
                 };
 
@@ -92,8 +131,12 @@ export class FileExplorer {
                 };
 
                 parentUl.appendChild(li);
+                this.filesPath.push({ name: `${node.name}.${node.ext}`, path: node.parent.path });
+
             }
         });
+
+        this.setExecutables(this.filesPath);
     }
 
     toggle(el) {
@@ -138,6 +181,7 @@ export class FileExplorer {
                     input: 'text',
                     showCancelButton: true,
                     confirmButtonText: 'Create',
+                    draggable: true,
                     preConfirm: (name) => {
                         if (name) {
                             this.addFolder(this.root, name);
@@ -151,20 +195,21 @@ export class FileExplorer {
                     title: 'Choose extension and filename',
                     html:
                         '<select id="swal-select" class="swal2-input">' +
-                            '<option value="txt">.txt - Text</option>' +
-                            '<option value="md">.md - Text</option>' +
-                            '<option value="json">.json - Data</option>' +
-                            '<option value="yaml">.yaml - Data</option>' +
-                            '<option value="toml">.toml - Data</option>' +
-                            '<option value="html">.html - Markup</option>' +
-                            '<option value="xml">.xml - Markup</option>' +
-                            '<option value="css">.css - Style</option>' +
-                            '<option value="js">.js - JavaScript</option>' +
-                            '<option value="ts">.ts - TypeScript</option>' +
-                            '<option value="go">.go - GO</option>' +
+                            '<option value="txt">📄 .txt - Text</option>' +
+                            '<option value="md">📝 .md - Text</option>' +
+                            '<option value="json">🧩 .json - Data</option>' +
+                            '<option value="yaml">🧩 .yaml - Data</option>' +
+                            '<option value="toml">🧩 .toml - Data</option>' +
+                            '<option value="html">🌐 .html - Markup</option>' +
+                            '<option value="xml">🌐 .xml - Markup</option>' +
+                            '<option value="css">🎨 .css - Style</option>' +
+                            '<option value="js">🟨 .js - JavaScript</option>' +
+                            '<option value="ts">🟦 .ts - TypeScript</option>' +
+                            '<option value="py">🐍 .py - Python</option>' +
                         '</select>' +
                         '<input id="swal-input" class="swal2-input" placeholder="filename">',
                     focusConfirm: false,
+                    draggable: true,
                     preConfirm: () => {
                         return [
                         document.getElementById('swal-select').value,
@@ -177,10 +222,21 @@ export class FileExplorer {
                         this.addFile(this.root, text, selection);
                     }
                 })
-            }
+            }   
         ]);
 
         this.openMenu(e, menu);
+
+        const closeMenu = () => {
+            menu.remove();
+            document.removeEventListener("click", closeMenu);
+            document.removeEventListener("contextmenu", closeMenu);
+        };
+
+        setTimeout(() => {
+            document.addEventListener("click", closeMenu);
+            document.addEventListener("contextmenu", closeMenu);
+        });
     }
 
     showFolderMenu(e, folder) {
@@ -190,6 +246,7 @@ export class FileExplorer {
                     input: 'text',
                     showCancelButton: true,
                     confirmButtonText: 'Create',
+                    draggable: true,
                     preConfirm: (name) => {
                         if (name) {
                             this.addFolder(folder, name);
@@ -200,20 +257,21 @@ export class FileExplorer {
                     title: 'Choose extension and filename',
                     html:
                         '<select id="swal-select" class="swal2-input">' +
-                            '<option value="txt">.txt - Text</option>' +
-                            '<option value="md">.md - Text</option>' +
-                            '<option value="json">.json - Data</option>' +
-                            '<option value="yaml">.yaml - Data</option>' +
-                            '<option value="toml">.toml - Data</option>' +
-                            '<option value="html">.html - Markup</option>' +
-                            '<option value="xml">.xml - Markup</option>' +
-                            '<option value="css">.css - Style</option>' +
-                            '<option value="js">.js - JavaScript</option>' +
-                            '<option value="ts">.ts - TypeScript</option>' +
-                            '<option value="go">.go - GO</option>' +
+                            '<option value="txt">📄 .txt - Text</option>' +
+                            '<option value="md">📝 .md - Text</option>' +
+                            '<option value="json">🧩 .json - Data</option>' +
+                            '<option value="yaml">🧩 .yaml - Data</option>' +
+                            '<option value="toml">🧩 .toml - Data</option>' +
+                            '<option value="html">🌐 .html - Markup</option>' +
+                            '<option value="xml">🌐 .xml - Markup</option>' +
+                            '<option value="css">🎨 .css - Style</option>' +
+                            '<option value="js">🟨 .js - JavaScript</option>' +
+                            '<option value="ts">🟦 .ts - TypeScript</option>' +
+                            '<option value="py">🐍 .py - Python</option>' +
                         '</select>' +
                         '<input id="swal-input" class="swal2-input" placeholder="filename">',
                     focusConfirm: false,
+                    draggable: true,
                     preConfirm: () => {
                         return [
                         document.getElementById('swal-select').value,
@@ -223,7 +281,7 @@ export class FileExplorer {
                 }).then((result) => {
                     if (result.value) {
                         const [selection, text] = result.value;
-                        this.addFile(this.root, text, selection);
+                        this.addFile(folder, text, selection);
                     }
                 })
             },
@@ -232,6 +290,7 @@ export class FileExplorer {
                     input: 'text',
                     showCancelButton: true,
                     confirmButtonText: 'Rename',
+                    draggable: true,
                     preConfirm: (name) => {
                         if (name) {
                             this.rename(folder, name);
@@ -242,6 +301,17 @@ export class FileExplorer {
         ]);
 
         this.openMenu(e, menu);
+
+        const closeMenu = () => {
+            menu.remove();
+            document.removeEventListener("click", closeMenu);
+            document.removeEventListener("contextmenu", closeMenu);
+        };
+
+        setTimeout(() => {
+            document.addEventListener("click", closeMenu);
+            document.addEventListener("contextmenu", closeMenu);
+        });
     }
 
     showFileMenu(e, file) {
@@ -251,6 +321,7 @@ export class FileExplorer {
                     input: 'text',  
                     showCancelButton: true,
                     confirmButtonText: 'Rename',
+                    draggable: true,
                     preConfirm: (name) => {
                         if (name) {
                             this.rename(file, name);
@@ -261,6 +332,7 @@ export class FileExplorer {
                     title: '',
                     showCancelButton: true,
                     confirmButtonText: 'Delete',
+                    draggable: true,
                     preConfirm: (name) => {
                         if (name) {
                             this.delete(file);
@@ -270,6 +342,17 @@ export class FileExplorer {
         ]);
 
         this.openMenu(e, menu);
+
+        const closeMenu = () => {
+            menu.remove();
+            document.removeEventListener("click", closeMenu);
+            document.removeEventListener("contextmenu", closeMenu);
+        };
+
+        setTimeout(() => {
+            document.addEventListener("click", closeMenu);
+            document.addEventListener("contextmenu", closeMenu);
+        });
     }
 
     /* =========================