runlab 1.1.0 → 1.2.0

package/dist/app/app.js

@@ -259,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

@@ -103,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/package.json

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