Implement IpcEvents.MONACO_SAVE_FILE

Author: newrun

src/ipcEvents.ts

@@ -4,6 +4,7 @@ export enum IpcEvents {
   STOP_BROWSER_TAB = 'STOP_BROWSER_TAB',
   SET_MENU_ITEM_OPTIONS = 'SET_MENU_ITEM_OPTIONS',
   MONACO_TOGGLE_OPTION = 'MONACO_TOGGLE_OPTION',
+  MONACO_SAVE_FILE = 'MONACO_SAVE_FILE',
   TOGGLE_DEV_TOOLS = 'TOGGLE_DEV_TOOLS',
   RELOAD_WINDOW = 'RELOAD_WINDOW',
   SELECT_ALL_IN_EDITOR = 'SELECT_ALL_IN_EDITOR',
@@ -26,6 +27,7 @@ export const ipcMainEvents = [
 
 export const ipcRendererEvents = [
   IpcEvents.NEW_BROWSER_TAB,
+  IpcEvents.MONACO_SAVE_FILE,
   IpcEvents.RELOAD_BROWSER_TAB,
   IpcEvents.STOP_BROWSER_TAB,
   IpcEvents.MONACO_TOGGLE_OPTION,

src/main/menu.ts

@@ -169,6 +169,14 @@ function getFileMenu(): MenuItemConstructorOptions {
       click: () => createMainWindow(),
       accelerator: 'CmdOrCtrl+Shift+N',
     },
+    { type: 'separator' },
+    {
+      label: 'Save',
+      click: () => {
+        return ipcMainManager.send(IpcEvents.MONACO_SAVE_FILE);
+      },
+      accelerator: 'CmdOrCtrl+S',
+    },
   ];
 
   // macOS has these items in the "CodingBrowser" menu

src/renderer/MainPage.jsx

@@ -4,16 +4,24 @@ import HomeView from './views/HomeView';
 import DevView from './views/DevView';
 import RuntimeView from './views/RuntimeView';
 import { ActivityBar } from './components/ActivityBar';
+import {
+  activityItems,
+  activeItemToIndex,
+  useWorkspace,
+} from './workspace/useWorkspace';
+
+const activityItems = ['home', 'play', 'files'];
+const activeItemToIndex = (name) => activityItems.indexOf(name);
 
 export default function () {
-  const [activity, setActivity] = useState(0);
+  const { activityIndex, setActivityIndex } = useWorkspace();
 
   return (
     <Allotment proportionalLayout={false}>
       <Allotment.Pane>
-        <HomeView visible={activity == 0} />
-        <RuntimeView visible={activity === 1} />
-        <DevView visible={activity === 2} />
+        <HomeView visible={activityIndex == activeItemToIndex('home')} />
+        <RuntimeView visible={activityIndex === activeItemToIndex('play')} />
+        <DevView visible={activityIndex === activeItemToIndex('files')} />
       </Allotment.Pane>
       <Allotment.Pane
         key="activityBar"
@@ -22,9 +30,9 @@ export default function () {
         visible={true}
       >
         <ActivityBar
-          checked={activity}
-          items={['home', 'play', 'files']}
-          onClick={setActivity}
+          checked={activityIndex}
+          items={activityItems}
+          onClick={setActivityIndex}
         />
       </Allotment.Pane>
     </Allotment>

src/renderer/components/editor/Toolbar.jsx

@@ -7,20 +7,12 @@ import {
 import { useToolbar } from './useCodeEditors';
 
 export default function () {
-  const { dirty, execution, save, start, stop } = useToolbar();
+  const { dirty, save } = useToolbar();
 
   const handleSave = async () => {
     save();
   };
 
-  const hanedleStart = async () => {
-    start();
-  };
-
-  const handleStop = async () => {
-    stop();
-  };
-
   return (
     <div style={{ height: '34px' }}>
       <Row
@@ -29,27 +21,6 @@ export default function () {
         }}
       >
         <Col flex="300px" style={{ padding: 1 }}>
-          {execution === 'start' ? (
-            <Button
-              type="text"
-              icon={<StopOutlined style={{ color: '#cc0000' }} />}
-              size="middle"
-              style={{ color: '#525252', fontWeight: 'normal' }}
-              onClick={handleStop}
-            >
-              Stop
-            </Button>
-          ) : (
-            <Button
-              type="text"
-              icon={<PlayCircleOutlined style={{ color: 'green' }} />}
-              size="middle"
-              style={{ color: '#525252', fontWeight: 'normal' }}
-              onClick={hanedleStart}
-            >
-              Start
-            </Button>
-          )}
           <Button
             type="text"
             icon={<SaveOutlined />}

src/renderer/components/editor/useCodeEditors.js

@@ -4,7 +4,7 @@ import { createContext } from '../../hooks/context';
 import { defaultOption, toggleEditorOption } from './manacoOption';
 import { ipcRendererManager, useIpcRendererListener } from '../../ipc';
 import { IpcEvents } from '../../../ipcEvents';
-import { useWorkspace } from '../../workspace/useWorkspace';
+import { activeItemToIndex, useWorkspace } from '../../workspace/useWorkspace';
 
 function getDefaultScript(filepath) {
   switch (filepath) {
@@ -62,7 +62,7 @@ export function useCodeEditors() {
   const [tabs, setTabs] = useState([]);
   const [monacoOption, setMonacoOption] = useState(defaultOption);
   const [activeTabKey, setActiveTabKey] = useState('');
-  const { startAll, stopAll } = useWorkspace();
+  const { startAll, stopAll, activityIndex } = useWorkspace();
 
   useEffect(() => {
     initializeDefaultTabs();
@@ -75,6 +75,15 @@ export function useCodeEditors() {
     }
   });
 
+  useIpcRendererListener(
+    IpcEvents.MONACO_SAVE_FILE,
+    useCallback(() => {
+      if (activeItemToIndex('files') === activityIndex) {
+        save(activeTabKey);
+      }
+    }, [activityIndex, activeTabKey])
+  );
+
   const initializeDefaultTabs = () => {
     const defaultTabs = [
       createTab({
@@ -106,15 +115,6 @@ export function useCodeEditors() {
     });
   };
 
-  const start = async () => {
-    await saveAll();
-    startAll();
-  };
-
-  const stop = async () => {
-    stopAll();
-  };
-
   const save = useCallback(
     async (tabKey) => {
       const tab = tabs.find((tab) => tab.key === tabKey);
@@ -173,8 +173,6 @@ export function useCodeEditors() {
     activeTabKey,
     setActiveTabKey,
     setDirty,
-    start,
-    stop,
     save,
     load,
     register,
@@ -183,16 +181,15 @@ export function useCodeEditors() {
 }
 
 export function useToolbar() {
-  const { tabs, activeTabKey, save, start, stop } = useCodeEditorsContext();
+  const { tabs, activeTabKey, save } = useCodeEditorsContext();
   const activeTab = tabs.find((tab) => tab.key === activeTabKey);
   const dirty = !!activeTab?.dirty;
-  const { execution } = useWorkspace();
 
   const saveCallback = useCallback(() => {
     save(activeTabKey);
   }, [activeTabKey]);
 
-  return { dirty, execution, save: saveCallback, start, stop };
+  return { dirty, save: saveCallback };
 }
 
 export function useCodeEditorTabs() {

src/renderer/workspace/useWorkspace.js

@@ -3,12 +3,16 @@ import { useWorkspaceContext } from './useWorkspaceProvider';
 import { ipcRendererManager } from '../ipc';
 import { IpcEvents } from '../../ipcEvents';
 
+export { activityItems, activeItemToIndex } from './useWorkspaceProvider';
+
 export function useWorkspace() {
   const {
     rootPath,
     mainScript,
     preloadScript,
     execution,
+    activityIndex,
+    setActivityIndex,
     startWorkspace,
     stopWorkspace,
   } = useWorkspaceContext();
@@ -49,8 +53,10 @@ export function useWorkspace() {
     mainScript,
     preloadScript,
     execution,
+    activityIndex,
     startAll,
     stopAll,
+    setActivityIndex,
   };
 }
 

src/renderer/workspace/useWorkspaceProvider.js

@@ -5,12 +5,18 @@ export const [WorkspaceProvider, useWorkspaceContext] = createContext({
   name: 'WorkspaceContext',
 });
 
+export const activityItems = ['home', 'play', 'files'];
+export const activeItemToIndex = (name) => activityItems.indexOf(name);
+
 export function useWorkspaceProvider() {
   const [rootPath, setRootPath] = useState('memory://');
   const [preloadScript, setPreloadScript] = useState(null);
   const [mainScript, setMainScript] = useState(null);
   const [execution, setExecution] = useState('stop'); // 'stop', 'start'
   const [consoleLogs, setConsoleLogs] = useState([]);
+  const [activityIndex, setActivityIndex] = useState(
+    activeItemToIndex('files')
+  );
 
   const startWorkspace = (main, preload) => {
     setMainScript(main);
@@ -34,8 +40,10 @@ export function useWorkspaceProvider() {
     preloadScript,
     execution,
     consoleLogs,
+    activityIndex,
     startWorkspace,
     stopWorkspace,
     addConsoleLog,
+    setActivityIndex,
   };
 }