runlab 0.1.0 → 1.0.0

package/dist/app/fileExplorer/FileExplorer.js

@@ -0,0 +1,405 @@
+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
+    ========================== */
+
+    render() {
+        this.container.innerHTML = "";
+
+        const rootDiv = document.createElement("div");
+        rootDiv.style.width = "100%";
+        rootDiv.style.height = "100%";
+        rootDiv.style.display = "block";
+        rootDiv.style.pointerEvents = "auto";
+        rootDiv.style.position = "relative";
+
+        rootDiv.oncontextmenu = e => {
+            e.preventDefault();
+            this.showRootMenu(e);
+        };
+
+
+        this.renderFolder(this.root, rootDiv);
+
+        this.container.append(rootDiv);
+    }
+
+    renderFolder(folder, parentUl) {
+        folder.children.forEach(node => {
+            if (node instanceof Folder) {
+                const btn = document.createElement("button");
+                btn.textContent = `📁 ${node.name}`;
+                btn.style.width = "100%";
+                btn.style.textAlign = "left";
+                btn.style.border = "none";
+                btn.style.background = "none";
+                btn.style.color = "white";
+                btn.style.paddingTop = "8px";
+                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 => {
+                    e.preventDefault(); 
+                    e.stopPropagation();
+                    this.showFolderMenu(e, node);
+                };
+
+                parentUl.append(btn, ul);
+                this.renderFolder(node, ul);
+            }
+
+            if (node instanceof File) {
+                const li = document.createElement("li");
+                li.textContent = `📄 ${node.name}.${node.ext}`;
+                li.style.width = "100%";
+                li.style.textAlign = "left";
+                li.style.border = "none";
+                li.style.background = "none";
+                li.style.color = "white";
+                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);
+                };
+
+                li.oncontextmenu = e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.showFileMenu(e, node);
+                };
+
+                parentUl.appendChild(li);
+                this.filesPath.push({ name: `${node.name}.${node.ext}`, path: node.parent.path });
+
+            }
+        });
+
+        this.setExecutables(this.filesPath);
+    }
+
+    toggle(el) {
+        el.style.display = el.style.display === "none" ? "block" : "none";
+    }
+
+    /* =========================
+       AÇÕES (MODEL)
+    ========================== */
+
+    addFolder(parent, name) {
+        parent.children.push(new Folder(name, parent));
+        this.render();
+    }
+
+    addFile(parent, name, ext=".txt") {
+        parent.children.push(new File(name, parent, ext));
+        this.render();
+    }
+
+    rename(node, newName) {
+        node.name = newName;
+        this.render();
+    }
+
+    delete(node) {
+        const parent = node.parent;
+        parent.children = parent.children.filter(c => c !== node);
+        this.render();
+    }
+
+    /* =========================
+       MENUS
+    ========================== */
+
+    showRootMenu(e) {
+        const menu = this.createMenu([
+            {
+                label: "New Folder",
+                action: () => Swal.fire({
+                    title: 'Folder name',
+                    input: 'text',
+                    showCancelButton: true,
+                    confirmButtonText: 'Create',
+                    draggable: true,
+                    preConfirm: (name) => {
+                        if (name) {
+                            this.addFolder(this.root, name);
+                        }
+                    }
+                })
+            },
+            {
+                label: "New File",
+                action: () => Swal.fire({
+                    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="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,
+                        document.getElementById('swal-input').value
+                        ];
+                    }
+                }).then((result) => {
+                    if (result.value) {
+                        const [selection, text] = result.value;
+                        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) {
+        const menu = this.createMenu([
+            { label: "New Folder", action: () => Swal.fire({
+                    title: 'Folder name',
+                    input: 'text',
+                    showCancelButton: true,
+                    confirmButtonText: 'Create',
+                    draggable: true,
+                    preConfirm: (name) => {
+                        if (name) {
+                            this.addFolder(folder, name);
+                        }
+                    }
+            })},
+            { label: "New File", action: () => Swal.fire({
+                    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="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,
+                        document.getElementById('swal-input').value
+                        ];
+                    }
+                }).then((result) => {
+                    if (result.value) {
+                        const [selection, text] = result.value;
+                        this.addFile(folder, text, selection);
+                    }
+                })
+            },
+            { label: "Rename", action: () => Swal.fire({
+                    title: 'New name',
+                    input: 'text',
+                    showCancelButton: true,
+                    confirmButtonText: 'Rename',
+                    draggable: true,
+                    preConfirm: (name) => {
+                        if (name) {
+                            this.rename(folder, name);
+                        }
+                    }
+            }) },
+            { label: "Delete", action: () => this.delete(folder) }
+        ]);
+
+        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) {
+        const menu = this.createMenu([
+            { label: "Rename", action: () => Swal.fire({
+                    title: 'New name',
+                    input: 'text',  
+                    showCancelButton: true,
+                    confirmButtonText: 'Rename',
+                    draggable: true,
+                    preConfirm: (name) => {
+                        if (name) {
+                            this.rename(file, name);
+                        }
+                    }
+            }) },
+            { label: "Delete", action: () => Swal.fire({
+                    title: '',
+                    showCancelButton: true,
+                    confirmButtonText: 'Delete',
+                    draggable: true,
+                    preConfirm: (name) => {
+                        if (name) {
+                            this.delete(file);
+                        }
+                    }
+            }) }
+        ]);
+
+        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);
+        });
+    }
+
+    /* =========================
+       HELPERS
+    ========================== */
+
+    prompt(label, callback) {
+        const value = prompt(label);
+        if (value) callback(value);
+    }
+
+    createMenu(items) {
+        const div = document.createElement("div");
+        div.className = "context-menu";
+        div.style.position = "absolute";
+        div.style.backgroundColor = "#333";
+        div.style.border = "1px solid #222";
+        div.style.padding = "8px";
+        div.style.zIndex = "3000";
+        div.style.color = "white";
+        div.style.minWidth = "100px";
+
+        items.forEach(i => {
+            const item = document.createElement("div");
+            item.textContent = i.label;
+            item.style.padding = "4px 8px";
+            item.style.cursor = "pointer";
+            item.onmouseover = () => item.style.backgroundColor = "#555";
+            item.onmouseout = () => item.style.backgroundColor = "transparent";
+            item.style.border = "1px solid #444";
+            item.onclick = () => {
+                i.action();
+                div.remove();
+            };
+            div.appendChild(item);
+        });
+
+        return div;
+    }
+
+    openMenu(e, menu) {
+        document.querySelectorAll(".context-menu").forEach(m => m.remove());
+
+        menu.style.position = "absolute";
+        menu.style.top = `${e.clientY}px`;
+        menu.style.left = `${e.clientX}px`;
+
+        document.body.appendChild(menu);
+    }
+}

package/dist/app/fileExplorer/Folder.js

@@ -0,0 +1,12 @@
+import { FSNode } from "./FSNode.js";
+
+class Folder extends FSNode {
+    constructor(name, parent) {
+        super(name);
+        this.parent = parent;
+        this.children = [];
+        this.path = parent ? [...parent.path, name] : [name];
+    }
+}
+
+export { Folder };

package/dist/app/terminal/commands.js

@@ -0,0 +1,117 @@
+import { getCurrentDir, getCurrentPath, setCurrentDir, setCurrentPath } from "./terminal.js"
+import { sendCode } from "../../index.js";
+import { setViewActive, getFeExecutables, getFileNode } from "../app.js";
+
+export function print(text = "") {
+    const div = document.createElement("div")
+    div.textContent = text
+    const output = document.getElementById("runlab-terminal-output")
+    output.appendChild(div)
+
+}
+
+export function handleLS() {
+
+    const currentDirNode = getCurrentDir()
+  
+    if (!currentDirNode.children || currentDirNode.children.length === 0) {
+        print("")
+        return
+    }
+
+    const names = currentDirNode.children.map(
+        child => `${child.ext ? `${child.name}.${child.ext}` : `/${child.name}`}`
+    )
+    print(names.join("  "))
+}
+
+export function handleClear() {
+    const output = document.getElementById("runlab-terminal-output")
+    output.innerHTML = ""
+}
+
+export function handleChangeDirectory(cmd) {
+    const dirName = cmd.split(" ")[1]
+    const currentDirNode = getCurrentDir()
+    const childrenNames = currentDirNode.children.map(child => child.name)
+
+    if (dirName === "..") {
+        const path = getCurrentPath()
+
+        if (path.length <= 1) {
+            print("Already at root directory.")
+            return
+        } // já está na raiz
+        
+        path.pop()
+        setCurrentPath(path)
+        setCurrentDir(getCurrentDir().parent)
+
+        document.getElementById("runlab-terminal-prompt").textContent = `${path.join("/")}> `
+
+        return
+    }
+    if (dirName && childrenNames.includes(dirName)) {
+        const child = currentDirNode.children.find(c => c.name === dirName)
+        if (child && !child.ext) {
+            setCurrentDir(child)
+            setCurrentPath([...getCurrentPath(), dirName])
+
+            document.getElementById("runlab-terminal-prompt").textContent = `${getCurrentPath().join("/")}> `
+
+            return
+        }
+    }
+
+    print("Directory not found or inaccessible.")
+}`
+`
+function parseRunCommand(cmd) {
+    const arg = cmd.split(" ")[1]
+    if (!arg) return null
+
+    const clean = arg.replace(/^\/+/, "")
+    const parts = clean.split("/")
+
+    const fileName = parts.pop()
+    const path = parts
+
+    return { fileName, path }
+}
+
+function resolvePathRelative(parsed, currentPath) {
+    return [...currentPath, ...parsed.path]
+}
+
+function samePath(a, b) {
+    if (a.length !== b.length) return false
+    return a.every((dir, i) => dir === b[i])
+}
+
+export function handleRun(cmd) {
+    const parsed = parseRunCommand(cmd)
+    if (!parsed) {
+        print("Executable file command not valid!")
+        return
+    }
+
+    const executables = getFeExecutables()
+    const currentPath = getCurrentPath()
+
+    const resolvedPath = resolvePathRelative(parsed, currentPath)
+
+    
+    const file = executables.find(e =>
+        e.name === parsed.fileName &&
+        samePath(e.path, resolvedPath)
+    )
+
+    if (!file) {
+        print("Executable file not found!")
+        return
+    }
+
+    const fileNode = getFileNode(file)
+    sendCode(fileNode.content, fileNode.ext)
+    setViewActive(true)
+}

package/dist/app/terminal/terminal.js

@@ -0,0 +1,126 @@
+import {print, handleLS, handleClear, handleChangeDirectory, handleRun} from "./commands.js"
+
+export let currentDirNode = null
+export let currentPath = []
+
+export function setCurrentDir(node) {
+    currentDirNode = node
+}
+
+export function getCurrentDir() {
+    return currentDirNode
+}
+
+export function setCurrentPath(path) {
+    currentPath = path
+}
+
+export function getCurrentPath() {
+    return currentPath
+}
+
+export function createTerminal(parentId,root) {
+    const parent = document.getElementById(parentId)
+
+    const terminal = document.createElement("div")
+    terminal.id = "runlab-inside-terminal"
+
+    Object.assign(terminal.style, {
+    backgroundColor: "#1E1E1E",
+    color: "#c7cbd9",
+    fontFamily: "monospace",
+    padding: "12px",
+    height: "100%",
+    overflowY: "auto",
+    boxSizing: "border-box"
+    })
+
+    terminal.tabIndex = 0
+
+    // ===== estrutura =====
+    const output = document.createElement("div")
+    output.id = "runlab-terminal-output"
+
+    const line = document.createElement("div")
+
+    const prompt = document.createElement("span")
+    prompt.id = "runlab-terminal-prompt"
+    prompt.textContent = "root> "
+
+    const input = document.createElement("span")
+
+    const cursor = document.createElement("span")
+    cursor.textContent = "█"
+    cursor.style.marginLeft = "2px"
+
+    line.append(prompt, input, cursor)
+    terminal.append(output, line)
+    parent.appendChild(terminal)
+
+    // ===== estado =====
+    const state = {
+    buffer: ""
+    }
+
+    currentDirNode = root
+    currentPath.push("root")
+
+    // ===== teclado =====
+    terminal.addEventListener("keydown", (e) => {
+    e.preventDefault()
+
+    if (e.key === "Backspace") {
+        state.buffer = state.buffer.slice(0, -1)
+    }
+    else if (e.key === "Enter") {
+        print(`${currentPath.join("/")}> ${state.buffer}`)
+        handleCommand(state.buffer,currentDirNode)
+        state.buffer = ""
+    }
+    else if (e.key.length === 1) {
+        state.buffer += e.key
+    }
+
+    input.textContent = state.buffer
+    terminal.scrollTop = terminal.scrollHeight
+    })
+
+    terminal.addEventListener("mousedown", () => {
+    terminal.focus()
+    })
+
+    terminal.focus()
+}
+
+function handleCommand(cmd) {
+    const trimmed = cmd.trim()
+    const split = trimmed.split(" ")
+
+
+    if (trimmed === "ls") {
+        handleLS()
+
+    } else if (trimmed === "clear") {
+        handleClear()
+
+    } else if (split[0] === "cd") {
+        handleChangeDirectory(trimmed)
+    
+    }else if (split[0] === "run") {
+        handleRun(trimmed)
+    
+    } else if (trimmed === "pwd") {
+        print(currentPath.join("/"))
+        
+    } else if (trimmed === "help" || trimmed === "h") {
+        print("Available commands:")
+        print("- ls: List directory contents")
+        print("- cd: Change directory")
+        print("- clear: Clear the terminal")
+        print("- pwd: Print current directory")
+        print("- run: Run a file (e.g., run script.js)")
+        print("- help | h: Show this help message")
+    } else if (trimmed !== "") {
+        print(`command not found: ${trimmed}`)
+    }
+}