fix(ui): fix close ui plugin config and focus capturing (#2086)

* fix(ui): fix close ui plugin config close #1914 * fix(ui): fix focus on canvas element is not regained close #1967
dream-num · Apr 26, 2024 · 4a360f7 · 4a360f7
1 parent 1a108f5
commit 4a360f7
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git a/packages/ui/src/render-unit/.gitkeep b/packages/ui/src/render-unit/.gitkeep
diff --git a/packages/ui/src/services/layout/layout.service.ts b/packages/ui/src/services/layout/layout.service.ts
@@ -23,7 +23,14 @@ import { IEditorService } from '../editor/editor.service';
 type FocusHandlerFn = (unitId: string) => void;
 
 export const FOCUSING_UNIVER = 'FOCUSING_UNIVER';
-const collectionOfCnForFocusableEle = ['univer-app-layout', 'univer-toolbar-btn', 'univer-menu-item', 'univer-button', 'univer-sheet-bar-btn'];
+const givingBackFocusElements = [
+    'univer-app-layout',
+    'univer-toolbar-btn',
+    'univer-menu-item',
+    'univer-button',
+    'univer-sheet-bar-btn',
+    'univer-render-canvas',
+];
 
 export interface ILayoutService {
     readonly isFocused: boolean;
@@ -148,8 +155,8 @@ export class DesktopLayoutService extends Disposable implements ILayoutService {
         this.disposeWithMe(
             fromEvent(window, 'focusin').subscribe((event) => {
                 const target = event.target as HTMLElement;
-                if (collectionOfCnForFocusableEle.some((item) => target.classList.contains(item))) {
-                    this._editorBlurListener();
+                if (givingBackFocusElements.some((item) => target.classList.contains(item))) {
+                    this._blurEditor();
                     queueMicrotask(() => this.focus());
                     return;
                 }
@@ -173,9 +180,9 @@ export class DesktopLayoutService extends Disposable implements ILayoutService {
         );
     }
 
-    private _editorBlurListener() {
+    private _blurEditor() {
         const focusEditor = this._editorService.getFocusEditor();
-        if (focusEditor && focusEditor.isSheetEditor() !== true) {
+        if (focusEditor?.isSheetEditor() !== true) {
             this._editorService.blur();
         }
     }

diff --git a/packages/ui/src/ui-plugin.ts b/packages/ui/src/ui-plugin.ts
@@ -14,8 +14,7 @@
  * limitations under the License.
  */
 
-import type { IContextService } from '@univerjs/core';
-import { IConfigService, ILocalStorageService, LocaleService, Plugin } from '@univerjs/core';
+import { IContextService, ILocalStorageService, LocaleService, Plugin } from '@univerjs/core';
 import type { Dependency } from '@wendellhu/redi';
 import { Inject, Injector } from '@wendellhu/redi';
 
@@ -73,7 +72,7 @@ export class UniverUIPlugin extends Plugin {
 
     constructor(
         private _config: Partial<IUniverUIConfig> = {},
-        @IConfigService private readonly _contextService: IContextService,
+        @IContextService private readonly _contextService: IContextService,
         @Inject(Injector) protected readonly _injector: Injector,
         @Inject(LocaleService) private readonly _localeService: LocaleService
     ) {