集成 CommandPalette 和 ThemePalette (#75)

* feat(monaco-editor): override layoutService and quickAccessService

There encapusulated a monacoService, the default monaco-editor component will be created by it, and
also you can access ServiceCollection

* refactor: create the monacoInstance by monacoService

* feat: update IColorTheme and add enum type ColorScheme

* feat: add selectColorThemeAction

* feat: add monacoService

* feat: add getColorTheme method

* feat: add editorInstance public property

* feat(activitybar): open CommandPalette and ThemePalette in settings menu

re #16, re #70

* fix: remove monacoInstnace dispose action

* refactor: delcare the monacoService innerly

* test: mock canvas and monacoService

jest.config.js

@@ -22,7 +22,7 @@ module.exports = {
         '\\.(css|scss|less)$': '<rootDir>/mock/styleMock.js',
         '^mo/(.*)$': '<rootDir>/src/$1',
         '^mo$': '<rootDir>/src/index.ts',
-        // '^monaco-editor(.*)$': '<rootDir>/mock/monacoMock.jsx',
         '^monaco-editor$': '<rootDir>/mock/monacoMock.js',
     },
+    setupFiles: ['jest-canvas-mock', './test/setupTests.ts'],
 };

mock/monacoMock.js

@@ -9,4 +9,6 @@ module.exports = {
         setTheme: function (theme) {},
         create: function (dom, options, override) {},
     },
+    KeyMod: {},
+    KeyCode: {},
 };

package.json

@@ -76,6 +76,7 @@
         "extract-loader": "^5.1.0",
         "husky": "^4.3.0",
         "jest": "^26.0.1",
+        "jest-canvas-mock": "^2.3.1",
         "monaco-editor-webpack-plugin": "^2.0.0",
         "prettier": "^2.1.2",
         "react-test-renderer": "^17.0.1",

src/components/monaco/index.tsx

@@ -1,7 +1,9 @@
+import 'reflect-metadata';
 import * as React from 'react';
 import { PureComponent } from 'react';
 import * as monaco from 'monaco-editor';
 import { APP_PREFIX } from 'mo/common/const';
+import { monacoService } from 'mo/monaco/monacoService';
 
 export const SYMBOL_MONACO_EDITOR = `${APP_PREFIX}-monaco-editor`;
 
@@ -37,21 +39,19 @@ export default class MonacoEditor extends PureComponent<IMonacoEditorProps> {
 
     componentDidMount() {
         const { options = {}, override, editorInstanceRef } = this.props;
-        this.monacoInstance = monaco.editor.create(
-            this.monacoDom,
-            options,
-            override
-        );
+        if (monacoService) {
+            this.monacoInstance = monacoService.create(
+                this.monacoDom,
+                options,
+                override
+            );
+        }
         if (editorInstanceRef) {
             editorInstanceRef(this.monacoInstance);
         }
     }
 
-    componentWillUnmount() {
-        if (this.monacoInstance) {
-            this.monacoInstance.dispose();
-        }
-    }
+    componentWillUnmount() {}
 
     render() {
         const { style } = this.props;

src/controller/activityBar.ts

@@ -1,11 +1,22 @@
-import { ActivityBarEvent, IActivityBarItem } from 'mo/model';
+import { IMenuItem } from 'mo/components/menu';
+import {
+    ActivityBarEvent,
+    CONTEXT_MENU_COLOR_THEME,
+    CONTEXT_MENU_COMMAND_PALETTE,
+    CONTEXT_MENU_SETTINGS,
+    IActivityBarItem,
+} from 'mo/model';
 import { Controller } from 'mo/react/controller';
-import { activityBarService } from 'mo/services';
+import { activityBarService, editorService } from 'mo/services';
 import { singleton } from 'tsyringe';
-
+import { SelectColorThemeAction } from 'mo/monaco/selectColorThemeAction';
 export interface IActivityBarController {
     onSelect?: (key: string, item?: IActivityBarItem) => void;
     onClick?: (event: React.MouseEvent, item: IActivityBarItem) => void;
+    onContextMenuClick?: (
+        e: React.MouseEvent,
+        item: IMenuItem | undefined
+    ) => void;
 }
 
 @singleton()
@@ -34,4 +45,48 @@ export class ActivityBarController
     ) => {
         this.emit(ActivityBarEvent.OnClick, event, item);
     };
+
+    private gotoQuickCommand() {
+        const actionId = 'editor.action.quickCommand';
+        editorService.editorInstance?.focus(); // The QuickCommand action requires the editor focusing
+        editorService.editorInstance?.getAction(actionId).run();
+    }
+
+    private onSelectColorTheme = () => {
+        editorService.editorInstance?.focus(); // The QuickCommand action requires the editor focusing
+        editorService.editorInstance
+            ?.getAction(SelectColorThemeAction.ID)
+            .run();
+    };
+
+    private gotoSettings() {
+        editorService.open({
+            id: 'Settings',
+            name: 'Settings',
+        });
+    }
+
+    public readonly onContextMenuClick = (
+        e: React.MouseEvent,
+        item: IMenuItem | undefined
+    ) => {
+        const contextMenu = item?.id;
+        switch (contextMenu) {
+            case CONTEXT_MENU_COMMAND_PALETTE.id: {
+                this.gotoQuickCommand();
+                break;
+            }
+            case CONTEXT_MENU_SETTINGS.id: {
+                this.gotoSettings();
+                break;
+            }
+            case CONTEXT_MENU_COLOR_THEME.id: {
+                this.onSelectColorTheme();
+                break;
+            }
+            default: {
+                // Do Something()
+            }
+        }
+    };
 }

src/extensions/index.ts

@@ -1,4 +1,3 @@
-import { ExtendActivityBar } from './activityBar';
 import { ExtendSearch } from './search';
 import { ExtendStatusBar } from './statusBar';
 import { defaultColorThemeExtension } from './theme-defaults';
@@ -9,7 +8,6 @@ import { paleNightColorThemeExtension } from './vscode-palenight-theme';
  * Default extensions
  */
 export const defaultExtensions = [
-    ExtendActivityBar,
     ExtendSearch,
     ExtendStatusBar,
     defaultColorThemeExtension,

src/model/colorTheme.ts

@@ -7,15 +7,26 @@ export interface TokenColor extends Object {
     settings?: object;
 }
 
+/**
+ * Color scheme used by the OS and by color themes.
+ */
+export enum ColorScheme {
+    DARK = 'dark',
+    LIGHT = 'light',
+    HIGH_CONTRAST = 'hc',
+}
+
 export interface IColorTheme {
     /**
      * The id of component, theme will be applied by this ID
      */
     id: string;
     label: string;
-    name: string;
-    uiTheme: string;
+    name?: string;
+    uiTheme?: string;
     path?: string;
+    description?: string;
+    type?: ColorScheme;
     colors?: IColors;
     tokenColors?: TokenColor[];
     /**

src/model/workbench/activityBar.ts

@@ -1,5 +1,5 @@
 import 'reflect-metadata';
-import { container, inject, injectable } from 'tsyringe';
+import { injectable } from 'tsyringe';
 import { IMenuItem } from 'mo/components/menu';
 
 /**
@@ -34,19 +34,46 @@ export interface IActivityBar {
     data?: IActivityBarItem[];
     selected?: string;
 }
+
+export const CONTEXT_MENU_COMMAND_PALETTE = {
+    id: 'CommandPalette',
+    name: 'Command Palette...',
+};
+
+export const CONTEXT_MENU_SETTINGS = {
+    id: 'Settings',
+    name: 'Settings',
+};
+
+export const CONTEXT_MENU_COLOR_THEME = {
+    id: 'ColorTheme',
+    name: 'Color Theme',
+};
+
+export const ACTIVITY_BAR_GLOBAL_SETTINGS: IActivityBarItem = {
+    id: 'global-settings',
+    name: 'Settings',
+    iconName: 'codicon-settings-gear',
+    type: 'global',
+    contextMenu: [
+        CONTEXT_MENU_COMMAND_PALETTE,
+        CONTEXT_MENU_SETTINGS,
+        CONTEXT_MENU_COLOR_THEME,
+    ],
+};
+
+export const ACTIVITY_BAR_GLOBAL_ACCOUNT: IActivityBarItem = {
+    id: 'global-Account',
+    name: 'Account',
+    iconName: 'codicon-account',
+    type: 'global',
+};
+
 @injectable()
 export class ActivityBarModel implements IActivityBar {
-    public data: IActivityBarItem[];
-    public selected: string;
-
-    constructor(
-        @inject('ActivityBarData') data: IActivityBarItem[] = [],
-        @inject('ActivityBarSelected') selected: string = ''
-    ) {
-        this.data = data;
-        this.selected = selected;
-    }
+    public data: IActivityBarItem[] = [
+        ACTIVITY_BAR_GLOBAL_ACCOUNT,
+        ACTIVITY_BAR_GLOBAL_SETTINGS,
+    ];
+    public selected: string = '';
 }
-
-container.register('ActivityBarData', { useValue: [] });
-container.register('ActivityBarSelected', { useValue: '' });