runlab 1.0.0 → 1.2.0

package/dist/app/app.js

@@ -3,12 +3,18 @@ import { createNavbar } from "./core/navbar.js";
 import { FileExplorer } from "./fileExplorer/FileExplorer.js";
 import { createTerminal } from "./terminal/terminal.js";
 
-export function generateContainer(parentId,w,h) {
+export function generateContainer(parentId) {
   const container = document.createElement("div");
   container.id = "runlab-container";
   Object.assign(container.style, {
-    width: w + "px",
-    height: h + "px",
+    position: "fixed",
+    inset: "0",
+    left: "0",
+    bottom: "0",
+
+    width: "100vw",
+    height: "100vh",
+
     border: "1px solid #000",
     display: "flex",
     justifyContent: "center",
@@ -16,7 +22,7 @@ export function generateContainer(parentId,w,h) {
     overflow: "hidden"
   });
   document.getElementById(parentId).appendChild(container);
-  gridTemplate("runlab-container", w, h);
+  gridTemplate("runlab-container");
   createEditor("runlab-editor","");
 
   // View and Editor toggle
@@ -202,7 +208,7 @@ export function setEditorActive(status = true){
   //================================ SVG Warning Text ================================
 
   const warningText = document.createElement("p");
-  warningText.textContent = "No file selected.";
+  warningText.textContent = "No files selected.";
   warningText.style.color = "#aaa";
   warningText.style.fontSize = "0.9em";
   warningText.style.margin = "0";
@@ -253,4 +259,12 @@ export function getFeExecutables() {
 
 export function getFileNode(file) {
   return feNode.getFileNode(file);
+}
+
+export function getNodeFromPath(path, currentPath) {
+  return feNode.getNodeFromPath(path, currentPath);
+}
+
+export function setMoveNode(node, destNode) {
+  feNode.setMoveNode(node, destNode);
 }

package/dist/app/core/navbar.js

@@ -34,7 +34,7 @@ export function createNavbar(parentId) {
     });
     ul.appendChild(leftGroup);
 
-    const menuItems = ["Run", "Help"];
+    const menuItems = ["✕", "🗗","Run", "Help"];
     menuItems.forEach(item => {
         const li = document.createElement("li");
         li.textContent = item;
@@ -46,6 +46,36 @@ export function createNavbar(parentId) {
             cursor: "pointer",
             color: "#fff"
         });
+        if (item === "✕") {
+            li.addEventListener("click", () => {
+                const app = document.getElementById("runlab-custom-div");
+                app.style.display = "none";
+                document.getElementById("runlab-custom-btn").textContent = "Show App";
+            });
+        }
+        if (item === "🗗"){
+            li.addEventListener("click", () => {
+                const container = document.getElementById("runlab-container");
+                let isMaximized = container.style.height === "100vh"? false: true;
+
+                if(isMaximized){
+                    container.style.height = "100vh";
+                    container.style.width = "100vw";
+                    container.style.left = "0";
+                    container.style.top = "0";
+                    container.style.bottom = "0";
+                    container.style.transform = "none";
+                }
+                if(!isMaximized){
+                    container.style.height = "70vh";
+                    container.style.width = "70vw";
+                    container.style.left = "50%";
+                    container.style.top = "auto";
+                    container.style.bottom = "0";
+                    container.style.transform = "translateX(-50%)";
+                }
+            });
+        }
         if (item === "Run") {
             li.addEventListener("click", () => {
                 sendCode(getCurrentCode(),getCurrentExtension());
@@ -73,7 +103,9 @@ export function createNavbar(parentId) {
                         <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>
+                        <li><span style="font-weight: bold;">mv</span>: Move a file or folder (e.g., mv folder1/script.js folder2)</li>
                     </ul>
+                    <p>If the path starts with / it will be considered absolute (from root), otherwise it will be considered relative to the current path.</p>
                     `,
                     width: 700,
                     confirmButtonText: "Got it!"

package/dist/app/fileExplorer/FileExplorer.js

@@ -11,6 +11,7 @@ export class FileExplorer {
         this.execFiles = [];
         this.filesPath = [];
         this.path = [];
+        this.currentNodeDragged = null;
         this.render();
     }
 
@@ -42,6 +43,106 @@ export class FileExplorer {
         this.execFiles = files;
     }
 
+    getNodeFromPath(path, currentPath) {
+        
+        if (path === "/") {
+            return this.root;
+        }
+
+        if (path.includes("..")) {
+            return null;
+        }
+        // Absolute path
+        if (path.startsWith("/")) {
+            path = path.slice(1);
+            let currentNode = this.root;
+
+            if (!path.includes("/")) {
+                if (path.includes(".")) { //File
+                    const [name, ext] = path.split(".");
+                    return currentNode.children.find(c => c.name === name && c.ext === ext);
+                }
+                return currentNode.children.find(c => c.name === path);//Folder
+            }
+
+            let pathList = path.split("/").filter(p => p);
+    
+            for (let i = 0; i < pathList.length; i++) {
+                const part = pathList[i];
+    
+                if (part.includes(".")) {
+                    const [name, ext] = part.split(".");
+                    const nextNode = currentNode.children.find(c => c.name === name && c.ext === ext);
+                    if (!nextNode) return null;
+                    currentNode = nextNode;
+                }
+    
+                if (!part.includes(".")) {
+                    const nextNode = currentNode.children.find(c => c.name === part && !c.ext);
+                    if (!nextNode) return null;
+                    currentNode = nextNode;
+                }
+                
+            }
+            return currentNode;
+
+        }
+        // Relative path
+        if (!path.startsWith("/")) {
+            let currentNode = this.root;
+
+            if (currentPath.length > 1) {
+                for (let i = 1; i < currentPath.length; i++) {
+                    const part = currentPath[i];
+                    const nextNode = currentNode.children.find(c => c.name === part && !c.ext);
+                    if (!nextNode) return null;
+                    currentNode = nextNode;
+                }
+            }
+
+            if (!path.includes("/")) {
+                if (path.includes(".")) { //File
+                    const [name, ext] = path.split(".");
+                    return currentNode.children.find(c => c.name === name && c.ext === ext);
+                }
+                return currentNode.children.find(c => c.name === path);//Folder
+            }
+
+            let pathList = path.split("/").filter(p => p);
+
+            for (let i = 0; i < pathList.length; i++) {
+                const part = pathList[i];
+                
+                if (part.includes(".")) {
+                    const [name, ext] = part.split(".");
+                    const nextNode = currentNode.children.find(c => c.name === name && c.ext === ext);
+                    if (!nextNode) return null;
+                    currentNode = nextNode;
+                }
+    
+                if (!part.includes(".")) {
+                    const nextNode = currentNode.children.find(c => c.name === part && !c.ext);
+                    if (!nextNode) return null;
+                    currentNode = nextNode;
+                }
+                
+            }
+            return currentNode;
+
+        }
+
+    }
+
+    setMoveNode(node, destNode) {
+        if (node === this.root) return;
+        if (node instanceof File) {
+            this.moveFile(node, destNode);
+        }
+        if (node instanceof Folder) {
+            this.moveFolder(node, destNode);
+        }
+    }
+
     /* =========================
        RENDER
     ========================== */
@@ -61,6 +162,19 @@ export class FileExplorer {
             this.showRootMenu(e);
         };
 
+        rootDiv.addEventListener("dragover", (e) => {
+            rootDiv.style.border = "1px solid #117bd1";
+            e.preventDefault();
+        });
+        rootDiv.addEventListener("dragleave", (e) => {
+            rootDiv.style.border = "none";
+        });
+        rootDiv.addEventListener("drop", (e) => {
+            rootDiv.style.border = "none";
+            e.preventDefault();
+            this.setMoveNode(this.currentNodeDragged, this.root);
+            this.currentNodeDragged = null;
+        });
 
         this.renderFolder(this.root, rootDiv);
 
@@ -70,6 +184,8 @@ export class FileExplorer {
     renderFolder(folder, parentUl) {
         folder.children.forEach(node => {
             if (node instanceof Folder) {
+
+                /* ============ BUTTON =============== */
                 const btn = document.createElement("button");
                 btn.textContent = `📁 ${node.name}`;
                 btn.style.width = "100%";
@@ -80,18 +196,18 @@ export class FileExplorer {
                 btn.style.paddingTop = "8px";
                 btn.style.paddingBottom = "8px";
                 btn.style.cursor = "pointer";
-                
-                
-
-                btn.onmouseover = () => btn.style.backgroundColor = "#555";
-                btn.onmouseout = () => btn.style.backgroundColor = "transparent";
-
+                btn.draggable = true;
+                /* ============ UL =============== */
                 const ul = document.createElement("ul"); 
                 ul.style.display = "none";
                 ul.style.listStyle = "none";
                 ul.style.margin = "0";
                 ul.style.padding = "0 0 0 24px";
-
+                /* ============ DIV =============== */
+                const div = document.createElement("div");
+                /* ============ EVENTS =============== */
+                btn.onmouseover = () => btn.style.backgroundColor = "#555";
+                btn.onmouseout = () => btn.style.backgroundColor = "transparent";
 
                 btn.onclick = () => this.toggle(ul);
                 btn.oncontextmenu = e => {
@@ -100,11 +216,46 @@ export class FileExplorer {
                     this.showFolderMenu(e, node);
                 };
 
-                parentUl.append(btn, ul);
+                btn.addEventListener("dragstart", (e) => {
+
+                    this.currentNodeDragged = node;
+                });
+                btn.addEventListener("dragover", (e) => {
+                    div.style.border = "1px solid #117bd1";
+                    e.preventDefault();
+                });
+                btn.addEventListener("dragleave", (e) => {
+                    div.style.border = "none";
+                });
+                btn.addEventListener("drop", (e) => {
+                    div.style.border = "none";
+                    e.preventDefault();
+                    this.setMoveNode(this.currentNodeDragged, node);
+                    this.currentNodeDragged = null;
+                });
+
+                ul.addEventListener("dragover", (e) => {
+                    div.style.border = "1px solid #117bd1";
+                    e.preventDefault();
+                });
+                ul.addEventListener("dragleave", (e) => {
+                    div.style.border = "none";
+                });
+                ul.addEventListener("drop", (e) => {
+                    div.style.border = "none";
+                    e.preventDefault();
+                    this.setMoveNode(this.currentNodeDragged, node);
+                    this.currentNodeDragged = null;
+                });
+
+                /* ============ APPEND =============== */
+                div.append(btn, ul);
+                parentUl.append(div);
                 this.renderFolder(node, ul);
             }
 
             if (node instanceof File) {
+                /* ============ LI =============== */
                 const li = document.createElement("li");
                 li.textContent = `📄 ${node.name}.${node.ext}`;
                 li.style.width = "100%";
@@ -115,8 +266,8 @@ export class FileExplorer {
                 li.style.paddingTop = "8px";
                 li.style.paddingBottom = "8px";
                 li.style.cursor = "pointer";
-                
-
+                li.draggable = true;
+                /* ============ EVENTS =============== */
                 li.onclick = () => {
                     setActiveFile(node);
                     setViewActive(false);
@@ -130,6 +281,23 @@ export class FileExplorer {
                     this.showFileMenu(e, node);
                 };
 
+                li.addEventListener("dragstart", (e) => {
+                    this.currentNodeDragged = node;
+                });
+                li.addEventListener("dragover", (e) => {
+                    parentUl.parentElement.style.border = "1px solid #117bd1";
+                    e.preventDefault();
+                });
+                li.addEventListener("dragleave", (e) => {
+                    parentUl.parentElement.style.border = "none";
+                });
+                li.addEventListener("drop", (e) => {
+                    parentUl.parentElement.style.border = "none";
+                    e.preventDefault();
+                    this.setMoveNode(this.currentNodeDragged, node.parent);
+                    this.currentNodeDragged = null;
+                });
+                /* ============ APPEND =============== */
                 parentUl.appendChild(li);
                 this.filesPath.push({ name: `${node.name}.${node.ext}`, path: node.parent.path });
 
@@ -168,6 +336,29 @@ export class FileExplorer {
         this.render();
     }
 
+    moveFile(node, newParent) {
+        if (newParent === node) return;
+        if (newParent instanceof File) return;
+        if (node === this.root) return;
+        const oldParent = node.parent;
+        oldParent.children = oldParent.children.filter(c => c !== node);
+        newParent.children.push(node);
+        node.parent = newParent;
+        this.render();
+    }
+
+    moveFolder(node, newParent) {
+        if (newParent === node) return;
+        if (newParent instanceof File) return;
+        if (node === this.root) return;
+        const oldParent = node.parent;
+        oldParent.children = oldParent.children.filter(c => c !== node);
+        newParent.children.push(node);
+        node.parent = newParent;
+        node.path = [...newParent.path, node.name];
+        this.render();
+    }
+
     /* =========================
        MENUS
     ========================== */

package/dist/app/terminal/commands.js

@@ -1,6 +1,6 @@
 import { getCurrentDir, getCurrentPath, setCurrentDir, setCurrentPath } from "./terminal.js"
 import { sendCode } from "../../index.js";
-import { setViewActive, getFeExecutables, getFileNode } from "../app.js";
+import { setViewActive, getFeExecutables, getFileNode, getNodeFromPath, setMoveNode } from "../app.js";
 
 export function print(text = "") {
     const div = document.createElement("div")
@@ -114,4 +114,33 @@ export function handleRun(cmd) {
     const fileNode = getFileNode(file)
     sendCode(fileNode.content, fileNode.ext)
     setViewActive(true)
+}
+
+export function handleMove(cmd) {
+
+    if (cmd.split(" ").length !== 3) {
+        print("Invalid move command format! Use: mv <source> <destination>")
+        return
+    }
+
+    const nodePath = cmd.split(" ")[1];
+    const destPath = cmd.split(" ")[2];
+
+    const currentPath = getCurrentPath();
+
+    const node = getNodeFromPath(nodePath, currentPath);
+    const destNode = getNodeFromPath(destPath, currentPath);
+
+    if (!node) {
+        print("File or folder to be moved not found!")
+        return
+    }
+
+    if (!destNode) {
+        print("Folder to move into not found!")
+        return
+    }
+
+    setMoveNode(node, destNode)
+
 }

package/dist/app/terminal/terminal.js

@@ -1,4 +1,4 @@
-import {print, handleLS, handleClear, handleChangeDirectory, handleRun} from "./commands.js"
+import {print, handleLS, handleClear, handleChangeDirectory, handleRun, handleMove} from "./commands.js"
 
 export let currentDirNode = null
 export let currentPath = []
@@ -120,7 +120,13 @@ function handleCommand(cmd) {
         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("- mv: Move a file or folder (e.g., mv <source> <destination>)")
+        print("  If the path starts with / it will be considered absolute (from root), otherwise it will be considered relative to the current path.")
+
+    } else if (split[0] === "mv") { 
+        handleMove(trimmed)
+
+    }else if (trimmed !== "") {
         print(`command not found: ${trimmed}`)
     }
 }

package/dist/index.js

@@ -1,5 +1,6 @@
 import { generateContainer } from "./app/app.js";
 import { appendViewContent } from "./app/app.js";
+import { ReactRunlabButton } from "./reactButton.jsx";
 
 let runtimeUrl = "";
 function setRuntimeUrl(url) {
@@ -11,11 +12,9 @@ function getRuntimeUrl() {
 
 export async function run({
   parentId,
-  width = 1200,
-  height = 800,
   runtimeUrl = ""
 }) {
-  generateContainer(parentId, width, height);
+  generateContainer(parentId);
   setRuntimeUrl(runtimeUrl);
 }
 
@@ -47,3 +46,7 @@ export async function sendCode(code, ext = "txt") {
     console.error(err);
   }
 }
+
+//=============================== Buttons ===============================
+
+export { ReactRunlabButton };

package/dist/reactButton.jsx

@@ -0,0 +1,46 @@
+import { useEffect } from 'react';
+import { run } from "./index.js";
+
+export function ReactRunlabButton(props = { runConfig: {} }) {
+  const { runConfig } = props;
+
+  useEffect(() => {
+    if (typeof window !== 'undefined' && window.__runlab_started) return;
+
+    if (typeof window !== 'undefined') {
+      window.__runlab_started = true;
+    }
+
+    run(runConfig);
+  }, []);
+
+  const showApp = () => {
+    const app = document.getElementById("runlab-custom-div");
+    const btn = document.getElementById("runlab-custom-btn");
+
+    const displayStyle = window.getComputedStyle(app).display;
+
+    if (displayStyle === "none") {
+      app.style.display = "block";
+      btn.textContent = "Hide App";
+    }
+    if (displayStyle === "block") {
+      app.style.display = "none";
+      btn.textContent = "Show App";
+    }
+  };
+
+  return (
+    <>
+      <button
+        id="runlab-custom-btn"
+        onClick={showApp}
+        className="show-app-button"
+      >
+        Show App
+      </button>
+
+      <div id="runlab-custom-div" style={{ display: "none" }}></div>
+    </>
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "runlab",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",