Merge pull request #105 from Open-STEM/kq-bugs

kcq888 · web-flow · commit 475ef5b74692 · 2025-10-30T13:20:43.000-04:00
Addressed folder tree interaction during run state
diff --git a/src/components/folder-header.tsx b/src/components/folder-header.tsx
@@ -1,5 +1,7 @@
+import AppMgr, { EventType } from '@/managers/appmgr';
 import { StorageKeys } from '@/utils/localstorage';
 import { ModeType } from '@/utils/types';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AiOutlineFileAdd } from "react-icons/ai";
 import { AiOutlineFolderAdd } from "react-icons/ai";
@@ -18,6 +20,20 @@ interface FolderHeaderProps {
 function FolderHeader({ storageCapacity, openFolderCallback, closeFolderCallback, newFolderCallback, newFileCallback }: FolderHeaderProps) {
     const { t } = useTranslation();
     const modeType = useReadLocalStorage(StorageKeys.MODESETTING);
+    const [isRunning, setIsRunning] = useState<boolean>(false);
+
+    useEffect(() => {
+        const appMgr = AppMgr.getInstance();
+
+        appMgr.on(EventType.EVENT_ISRUNNING, (running: string) => {
+            if (running === 'running') {
+                setIsRunning(true);
+            } else if (running === 'stopped') {
+                setIsRunning(false);
+            }
+        });
+    }, []);
+    
     return (
         <div className="flex flex-row items-center justify-between bg-mountain-mist-100 p-1 text-sm dark:bg-mountain-mist-800">
             <div className="flex flex-row">
@@ -26,18 +42,18 @@ function FolderHeader({ storageCapacity, openFolderCallback, closeFolderCallback
             <div className="flex flex-row gap-1">
                 {modeType === ModeType.SYSTEM && (
                     <>
-                        <button title={t('openFolder')} onClick={openFolderCallback}>
-                            <FaRegFolderOpen size={'1.5em'} />
+                        <button title={t('openFolder')} onClick={openFolderCallback} disabled={isRunning}>
+                            <FaRegFolderOpen className={`${isRunning ? 'opacity-50' : 'opacity-100'}`} size={'1.5em'} />
                         </button>
-                        <button title={t('closeFolder')} onClick={closeFolderCallback}>
-                            <FaRegFolderClosed size={'1.2em'} />
+                        <button title={t('closeFolder')} onClick={closeFolderCallback} disabled={isRunning}>
+                            <FaRegFolderClosed className={`${isRunning ? 'opacity-50' : 'opacity-100'}`} size={'1.2em'} />
                         </button>
                     </>
                 )}
-                <button title={t('newFolder')} onClick={newFolderCallback}>
-                    <AiOutlineFolderAdd size={'1.5em'} />
+                <button title={t('newFolder')} onClick={newFolderCallback} disabled={isRunning}>
+                    <AiOutlineFolderAdd className={`${isRunning ? 'opacity-50' : 'opacity-100'}`} size={'1.5em'} />
                 </button>
-                <button title={t('newFile')} onClick={newFileCallback}>
+                <button title={t('newFile')} className={`${isRunning ? 'opacity-50' : 'opacity-100'}`} onClick={newFileCallback} disabled={isRunning}>
                     <AiOutlineFileAdd size={'1.4em'} />
                 </button>
             </div>
diff --git a/src/components/folder-tree.tsx b/src/components/folder-tree.tsx
@@ -37,6 +37,7 @@ function FolderTree(treeProps: TreeProps) {
     const [capacity, setCapacity] = useState<string>('0/0');
     const [treeData, setTreeData] = useState<FolderItem[] | undefined>(undefined);
     const [selectedItems, setSelectedItems] = useState<FolderItem[] | undefined>(undefined);
+    const [isRunning, setIsRunning] = useState<boolean>(false);
     const appMgrRef = useRef<AppMgr>();
     const treeRef = useRef(null);
     const { ref, width, height } = useResizeObserver();
@@ -57,11 +58,19 @@ function FolderTree(treeProps: TreeProps) {
 
         setConnected(appMgrRef.current.getConnection()?.isConnected() ?? false);
 
-        AppMgr.getInstance().on(EventType.EVENT_CONNECTION_STATUS, (state: string) => {
+        appMgrRef.current.on(EventType.EVENT_CONNECTION_STATUS, (state: string) => {
             if (state === ConnectionState.Connected.toString()) {
                 setConnected(true);
             }
         });
+
+        appMgrRef.current.on(EventType.EVENT_ISRUNNING, (running: string) => {
+            if (running === 'running') {
+                setIsRunning(true);
+            } else if (running === 'stopped') {
+                setIsRunning(false);
+            }
+        });
         
         appMgrRef.current.on(EventType.EVENT_FILESYS, (filesysJson: string) => {
             try {
@@ -150,10 +159,10 @@ function FolderTree(treeProps: TreeProps) {
             <div
                 ref={dragHandle}
                 style={style}
-                className={`group flex flex-row items-center justify-between hover:bg-matisse-400 dark:hover:bg-shark-500 ${node.isSelected ? 'bg-curious-blue-300 dark:bg-shark-400' : ''}`}
+                className={`group flex flex-row items-center justify-between hover:bg-matisse-400 dark:hover:bg-shark-500 ${node.isSelected ? 'bg-curious-blue-300 dark:bg-shark-400' : ''} ${isRunning ? 'opacity-50 pointer-events-none' : 'opacity-100 pointer-events-auto'}}`}
                 onClick={(e) => {
                     if (node.isInternal) node.toggle();
-                    if (!(e.detail % 2)) {
+                    if (!(e.detail % 2) && !isRunning) {
                         if (node.children === null) {
                             const filePath =
                                 node.data.path === '/'
@@ -180,10 +189,10 @@ function FolderTree(treeProps: TreeProps) {
                 </div>
                 {!treeProps.onSelected && (
                     <div className="invisible flex flex-row items-center gap-1 px-2 group-hover:visible">
-                        <button onClick={() => node.edit()} title={t('rename')}>
+                        <button className={`${isRunning ? 'opacity-50 pointer-events-none' : 'opacity-100 pointer-events-auto'}`} onClick={() => node.edit()} title={t('rename')}>
                             <MdEdit size={'1.5em'} />
                         </button>
-                        <button
+                        <button className={`${isRunning ? 'opacity-50 pointer-events-none' : 'opacity-100 pointer-events-auto'}`}
                             onClick={() => {
                                 tree.delete(node.id);
                             }}
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
@@ -621,6 +621,14 @@ function NavBar({ layoutref }: NavBarProps) {
         toggleDialog();
     }
 
+    /**
+     * boadcastRunningState - broadcast the running state to the app manager
+     * @param running
+     */
+    function broadcastRunningState(running: boolean) {
+        AppMgr.getInstance().emit(EventType.EVENT_ISRUNNING, running ? 'running' : 'stopped');
+    }
+
     /**
      * onRunBtnClicked
      */
@@ -653,6 +661,7 @@ function NavBar({ layoutref }: NavBarProps) {
             }
 
             setRunning(true);
+            broadcastRunningState(true);
 
             // Check battery voltage && version
             await CommandToXRPMgr.getInstance()
@@ -694,9 +703,11 @@ function NavBar({ layoutref }: NavBarProps) {
                         });
                 }
                 setRunning(false);
+                broadcastRunningState(false);
             }
         } else {
             setRunning(false);
+            broadcastRunningState(false);
             CommandToXRPMgr.getInstance().stopProgram();
         }
     }
diff --git a/src/managers/appmgr.ts b/src/managers/appmgr.ts
@@ -40,6 +40,7 @@ export enum EventType {
     EVENT_BLOCKLY_TOOLBOX_UPDATED = 'blockly-toolbox-updated', // Blockly toolbox has been updated
     EVENT_GAMEPAD_STATUS = 'gamepad-status', // Gamepad status on/off
     EVENT_ALERT = 'alert', // Alert dialog event
+    EVENT_ISRUNNING = 'is-running', // XRP is running user code
 }
 
 type Events = {
@@ -71,6 +72,7 @@ type Events = {
     [EventType.EVENT_BLOCKLY_TOOLBOX_UPDATED]: string;
     [EventType.EVENT_GAMEPAD_STATUS]: string;
     [EventType.EVENT_ALERT]: string;
+    [EventType.EVENT_ISRUNNING]: string;
 };
 
 /**
@@ -184,10 +186,14 @@ export default class AppMgr {
     }
 
     /**
-     * Remove all listeners for a given event
+     * Remove listeners for a given event or all listeners if no event is provided
      */
-    public off(): void {
-        this._emitter.all.clear();
+    public off(eventName?: EventType): void {
+        if (eventName) {
+            this._emitter.off(eventName);
+        } else {
+            this._emitter.all.clear();
+        }
     }
 
     /**

Original file line number	Diff line number	Diff line change
`@@ -621,6 +621,14 @@ function NavBar({ layoutref }: NavBarProps) {`
`621`	`621`	`toggleDialog();`
`622`	`622`	`}`
`623`	`623`
	`624`	`+ /**`
	`625`	`+ * boadcastRunningState - broadcast the running state to the app manager`
	`626`	`+ * @param running`
	`627`	`+ */`
	`628`	`+ function broadcastRunningState(running: boolean) {`
	`629`	`+ AppMgr.getInstance().emit(EventType.EVENT_ISRUNNING, running ? 'running' : 'stopped');`
	`630`	`+ }`
	`631`	`+`
`624`	`632`	`/**`
`625`	`633`	`* onRunBtnClicked`
`626`	`634`	`*/`
`@@ -653,6 +661,7 @@ function NavBar({ layoutref }: NavBarProps) {`
`653`	`661`	`}`
`654`	`662`
`655`	`663`	`setRunning(true);`
	`664`	`+ broadcastRunningState(true);`
`656`	`665`
`657`	`666`	`// Check battery voltage && version`
`658`	`667`	`await CommandToXRPMgr.getInstance()`
`@@ -694,9 +703,11 @@ function NavBar({ layoutref }: NavBarProps) {`
`694`	`703`	`});`
`695`	`704`	`}`
`696`	`705`	`setRunning(false);`
	`706`	`+ broadcastRunningState(false);`
`697`	`707`	`}`
`698`	`708`	`} else {`
`699`	`709`	`setRunning(false);`
	`710`	`+ broadcastRunningState(false);`
`700`	`711`	`CommandToXRPMgr.getInstance().stopProgram();`
`701`	`712`	`}`
`702`	`713`	`}`