feat: develop open editors window

src/common/id.ts

@@ -5,3 +5,4 @@ export const ID_SIDE_BAR = 'sidebar';
 export const ID_EXPLORER = 'explorer';
 export const ID_STATUS_BAR = 'statusBar';
 export const ID_FOLDER_TREE = 'folderTree';
+export const ID_EDITOR_TREE = 'editorTree';

src/controller/explorer/editorTree.tsx

@@ -0,0 +1,132 @@
+import 'reflect-metadata';
+import React from 'react';
+import { Controller } from 'mo/react/controller';
+import { container, singleton } from 'tsyringe';
+import {
+    builtInEditorTreeContextMenu,
+    builtInEditorTreeHeaderContextMenu,
+    EditorTreeEvent,
+} from 'mo/model/workbench/explorer/editorTree';
+import { EditorService, ExplorerService, FolderTreeService } from 'mo/services';
+import {
+    builtInExplorerEditorPanel,
+    EDITOR_MENU_CLOSE,
+    EDITOR_MENU_CLOSE_ALL,
+    EDITOR_MENU_CLOSE_OTHERS,
+    EDITOR_MENU_CLOSE_SAVED,
+} from 'mo/model';
+import {
+    EditorTree,
+    IOpenEditProps,
+} from 'mo/workbench/sidebar/explore/editorTree';
+import { connect } from 'mo/react';
+import { IMenuItemProps, ITabProps } from 'mo/components';
+
+export interface IEditorTreeController {
+    readonly onClose: (tabId: string, groupId: number) => void;
+    readonly onSelect: (tabId: string, groupId: number) => void;
+    readonly onCloseGroup: (groupId: number) => void;
+    readonly onSaveGroup: (groupId: number) => void;
+    /**
+     * Trigger by context menu click event
+     * When click the context menu from group header, it doesn't have file info
+     */
+    readonly onContextMenu: (
+        menu: IMenuItemProps,
+        groupId: number,
+        file?: ITabProps
+    ) => void;
+}
+
+@singleton()
+export class EditorTreeController
+    extends Controller
+    implements IEditorTreeController {
+    private readonly explorerService: ExplorerService;
+    private readonly folderTreeService: FolderTreeService;
+    private readonly editService: EditorService;
+
+    constructor() {
+        super();
+        this.editService = container.resolve(EditorService);
+        this.explorerService = container.resolve(ExplorerService);
+        this.folderTreeService = container.resolve(FolderTreeService);
+        this.initView();
+    }
+
+    public initView() {
+        const EditorTreeView = connect<IOpenEditProps>(
+            this.editService,
+            EditorTree
+        );
+        const { groupToolbar, ...restEditor } = builtInExplorerEditorPanel();
+        const contextMenu = builtInEditorTreeContextMenu();
+        const headerContextMenu = builtInEditorTreeHeaderContextMenu();
+
+        this.explorerService.addPanel({
+            ...restEditor,
+            renderPanel: () => (
+                <EditorTreeView
+                    contextMenu={contextMenu}
+                    headerContextMenu={headerContextMenu}
+                    groupToolbar={groupToolbar}
+                    onClose={this.onClose}
+                    onSelect={this.onSelect}
+                    onCloseGroup={this.onCloseGroup}
+                    onSaveGroup={this.onSaveGroup}
+                    onContextMenu={this.onContextMenu}
+                    getFileIconByExtensionName={
+                        this.folderTreeService.getFileIconByExtensionName
+                    }
+                />
+            ),
+        });
+    }
+
+    public onContextMenu = (
+        menu: IMenuItemProps,
+        groupId: number,
+        file?: ITabProps
+    ) => {
+        switch (menu.id) {
+            case EDITOR_MENU_CLOSE:
+                this.onClose(file?.id!, groupId);
+                break;
+
+            case EDITOR_MENU_CLOSE_OTHERS:
+                this.emit(EditorTreeEvent.onCloseOthers, file, groupId);
+                break;
+
+            case EDITOR_MENU_CLOSE_SAVED:
+                this.emit(EditorTreeEvent.onCloseSaved, groupId);
+                break;
+
+            case EDITOR_MENU_CLOSE_ALL:
+                this.emit(EditorTreeEvent.onCloseAll, groupId);
+                break;
+
+            default:
+                this.emit(EditorTreeEvent.onContextMenu, menu, file, groupId);
+                break;
+        }
+    };
+
+    public onClose = (tabId: string, groupId: number) => {
+        this.emit(EditorTreeEvent.onClose, tabId, groupId);
+    };
+
+    public onSelect = (tabId: string, groupId: number) => {
+        this.emit(EditorTreeEvent.onSelect, tabId, groupId);
+    };
+
+    public onCloseGroup = (groupId: number) => {
+        this.emit(EditorTreeEvent.onCloseAll, groupId);
+    };
+
+    public onSaveGroup = (groupId: number) => {
+        this.emit(EditorTreeEvent.onSaveAll, groupId);
+    };
+}
+
+// Register singleton
+container.resolve(EditorTreeController);

src/controller/explorer/explorer.tsx

@@ -10,8 +10,10 @@ import { IActivityBarItem } from 'mo/model/workbench/activityBar';
 import {
     builtInExplorerActivityItem,
     builtInExplorerFolderPanel,
-    builtInExplorerEditorPanel,
     ExplorerEvent,
+    EXPLORER_TOGGLE_CLOSE_ALL_EDITORS,
+    EXPLORER_TOGGLE_SAVE_ALL,
+    EXPLORER_TOGGLE_VERTICAL,
     IExplorerPanelItem,
 } from 'mo/model/workbench/explorer/explorer';
 import {
@@ -21,6 +23,7 @@ import {
     REMOVE_COMMAND_ID,
     FileTypes,
     FolderTreeEvent,
+    EditorTreeEvent,
 } from 'mo/model';
 import { IActionBarItemProps } from 'mo/components/actionBar';
 import {
@@ -36,6 +39,7 @@ import {
     IMenuBarService,
 } from 'mo/services';
 import { FolderTreeController, IFolderTreeController } from './folderTree';
+
 export interface IExplorerController {
     onActionsContextMenuClick?: (
         e: React.MouseEvent,
@@ -122,11 +126,6 @@ export class ExplorerController
             ...builtInExplorerFolderPanel(),
             renderPanel: this.renderFolderTree,
         });
-
-        // add editor panel
-        this.explorerService.addPanel({
-            ...builtInExplorerEditorPanel(),
-        });
     }
 
     private createFileOrFolder = (type: keyof typeof FileTypes) => {
@@ -177,6 +176,17 @@ export class ExplorerController
                 this.emit(ExplorerEvent.onDeletePanel, parentPanel);
                 break;
             }
+            case EXPLORER_TOGGLE_CLOSE_ALL_EDITORS: {
+                this.emit(EditorTreeEvent.onCloseAll);
+                break;
+            }
+            case EXPLORER_TOGGLE_SAVE_ALL: {
+                this.emit(EditorTreeEvent.onSaveAll);
+                break;
+            }
+            case EXPLORER_TOGGLE_VERTICAL: {
+                this.emit(EditorTreeEvent.onSplitEditorLayout);
+            }
             default:
                 console.log('onCollapseToolbar');
         }

src/controller/index.ts

@@ -10,5 +10,6 @@ export * from './statusBar';
 export * from './workbench';
 export * from './explorer/explorer';
 export * from './explorer/folderTree';
+export * from './explorer/editorTree';
 export * from './explorer/outline';
 export * from './search/search';

src/extensions/editorTree/index.ts

@@ -0,0 +1,41 @@
+import molecule from 'mo';
+import { IExtension } from 'mo/model/extension';
+
+export const ExtendsEditorTree: IExtension = {
+    activate() {
+        molecule.editorTree.onSelect((tabId, groupId) => {
+            molecule.editor.setActive(groupId, tabId);
+        });
+
+        molecule.editorTree.onClose((tabId, groupId) => {
+            molecule.editor.closeTab(tabId, groupId);
+        });
+
+        molecule.editorTree.onCloseOthers((tabItem, groupId) => {
+            molecule.editor.closeOthers(tabItem, groupId);
+        });
+
+        molecule.editorTree.onCloseSaved((groupId) => {
+            // TODO: editor close saved
+        });
+
+        molecule.editorTree.onCloseAll((groupId) => {
+            if (groupId) {
+                molecule.editor.closeAll(groupId);
+            } else {
+                const { groups } = molecule.editor.getState();
+                groups?.forEach((group) => {
+                    molecule.editor.closeAll(group.id!);
+                });
+            }
+        });
+
+        molecule.editorTree.onSaveAll((groupId) => {
+            // TODO: editor save
+        });
+
+        molecule.editorTree.onLayout(() => {
+            // TODO: layoutService
+        });
+    },
+};

src/extensions/index.ts

@@ -6,6 +6,7 @@ import { ExtendsMenuBar } from './menuBar';
 import { ExtendsActivityBar } from './activityBar';
 import { ExtendsPanel } from './panel';
 import { ExtendsExplorer } from './explorer';
+import { ExtendsEditorTree } from './editorTree';
 
 import { defaultColorThemeExtension } from './theme-defaults';
 import { monokaiColorThemeExtension } from './theme-monokai';
@@ -22,6 +23,7 @@ export const defaultExtensions = [
     ExtendsStatusBar,
     ExtendsProblems,
     ExtendsExplorer,
+    ExtendsEditorTree,
     defaultColorThemeExtension,
     monokaiColorThemeExtension,
     paleNightColorThemeExtension,

src/extensions/theme-defaults/themes/dark_defaults.json

@@ -12,6 +12,7 @@
         "editorGroupHeader.tabsBackground": "rgb(37, 37, 38)",
         "list.dropBackground": "#383B3D",
         "list.activeSelectionBackground": "#094771",
+        "list.inactiveSelectionBackground": "#37373D",
         "list.focusOutline": "#007FD4",
         "activityBarBadge.background": "#007ACC",
         "sidebarTitle.foreground": "#BBBBBB",

src/extensions/theme-defaults/themes/light_defaults.json

@@ -15,6 +15,7 @@
         "sideBarSectionHeader.border": "#61616130",
         "list.hoverBackground": "#E8E8E8",
         "list.activeSelectionBackground": "#0060C0",
+        "list.inactiveSelectionBackground": "#E4E6F1",
         "list.focusOutline": "#0090F1",
         "input.placeholderForeground": "#767676",
         "inputOption.activeBackground": "#007fd466",

src/i18n/source/en.ts

@@ -27,6 +27,7 @@ export default {
         'sidebar.explore.title': 'Explorer',
         'sidebar.explore.folders': 'Folders',
         'sidebar.explore.openEditor': 'Open Editors',
+        'sidebar.explore.openEditor.group': 'Group ${i}',
         'sidebar.explore.outline': 'Outline',
         'sidebar.search.title': 'Search',
         'sidebar.replace.placement': 'Replace',
@@ -53,6 +54,7 @@ export default {
         'editor.closeToRight': 'Close To Right',
         'editor.closeToLeft': 'Close To Left',
         'editor.closeAll': 'Close All',
+        'editor.closeSaved': 'Close Saved',
         'editor.closeOthers': 'Close Others',
         'editor.close': 'Close',
         'editor.showOpenEditors': 'Show Opened Editors',

src/i18n/source/zh-CN.json

@@ -32,6 +32,7 @@
         "menu.about": "关于",
         "sidebar.explore.title": "浏览",
         "sidebar.explore.openEditor": "打开的编辑器",
+        "sidebar.explore.openEditor.group": "第 ${i} 组",
         "sidebar.explore.outline": "轮廓",
         "sidebar.explore.outlineMore": "更多操作...",
         "sidebar.explore.refresh": "刷新浏览",
@@ -52,6 +53,7 @@
         "editor.closeToLeft": "关闭左边",
         "editor.closeAll": "关闭所有",
         "editor.closeOthers": "关闭其他",
+        "editor.closeSaved": "关闭已保存",
         "editor.close": "关闭",
         "editor.showOpenEditors": "展示已打开的编辑器"
     }

src/model/workbench/editor.ts

@@ -52,6 +52,7 @@ export const EDITOR_MENU_CLOSE_TO_RIGHT = 'editor.closeToRight';
 export const EDITOR_MENU_CLOSE_TO_LEFT = 'editor.closeToLeft';
 export const EDITOR_MENU_CLOSE_ALL = 'editor.closeAll';
 export const EDITOR_MENU_CLOSE_OTHERS = 'editor.closeOthers';
+export const EDITOR_MENU_CLOSE_SAVED = 'editor.closeSaved';
 export const EDITOR_MENU_CLOSE = 'editor.close';
 export const EDITOR_MENU_SHOW_OPENEDITORS = 'editor.showOpenEditors';
 

src/model/workbench/explorer/editorTree.ts

@@ -0,0 +1,56 @@
+import { localize } from 'mo/i18n/localize';
+import {
+    EDITOR_MENU_CLOSE,
+    EDITOR_MENU_CLOSE_ALL,
+    EDITOR_MENU_CLOSE_OTHERS,
+    EDITOR_MENU_CLOSE_SAVED,
+} from 'mo/model';
+
+export enum EditorTreeEvent {
+    onClose = 'editorTree.close',
+    onSelect = 'editorTree.select',
+    onCloseOthers = 'editorTree.closeOthers',
+    onCloseSaved = 'editorTree.closeSaved',
+    onCloseAll = 'editorTree.closeAll',
+    onSaveAll = 'editorTree.saveAll',
+    onSplitEditorLayout = 'editorTree.splitEditorLayout',
+    onContextMenu = 'editorTree.contextMenuClick',
+}
+
+export function builtInEditorTreeHeaderContextMenu() {
+    return [
+        {
+            id: EDITOR_MENU_CLOSE_SAVED,
+            name: localize(EDITOR_MENU_CLOSE_SAVED, 'Close Saved'),
+        },
+        {
+            id: EDITOR_MENU_CLOSE_ALL,
+            name: localize(EDITOR_MENU_CLOSE_ALL, 'Close All'),
+        },
+    ];
+}
+
+export function builtInEditorTreeContextMenu() {
+    return [
+        {
+            id: EDITOR_MENU_CLOSE,
+            name: localize(EDITOR_MENU_CLOSE, 'Close'),
+        },
+        {
+            id: EDITOR_MENU_CLOSE_OTHERS,
+            name: localize(EDITOR_MENU_CLOSE_OTHERS, 'Close Others'),
+        },
+        {
+            id: EDITOR_MENU_CLOSE_SAVED,
+            name: localize(EDITOR_MENU_CLOSE_SAVED, 'Close Saved'),
+        },
+        {
+            id: EDITOR_MENU_CLOSE_ALL,
+            name: localize(EDITOR_MENU_CLOSE_ALL, 'Close All'),
+        },
+    ];
+}
+
+export class EditorTree {
+    constructor() {}
+}