-
Notifications
You must be signed in to change notification settings - Fork 132
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: develop open editors window (#183)
* feat: develop open editors window * feat: editorTree support contextMenus & toolbar * fix: fix explorer openEditor i18n
- Loading branch information
1 parent
ad1bbc1
commit 098c78c
Showing
22 changed files
with
764 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| }); | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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() {} | ||
| } |
Oops, something went wrong.