feat(editor): add a preference prevent scroll after get focused

opensumi · Jul 12, 2024 · e25feac · e25feac
1 parent 5ece2fb
commit e25feac
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 16 deletions.
diff --git a/packages/core-browser/src/dom/index.ts b/packages/core-browser/src/dom/index.ts
@@ -175,3 +175,14 @@ export class FocusTracker extends Disposable {
 export function trackFocus(element: HTMLElement | Window): IFocusTracker {
   return new FocusTracker(element);
 }
+
+/**
+ * https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/button
+ */
+export const MouseEventButton = {
+  Left: 0,
+  Middle: 1,
+  Right: 2,
+  Back: 3,
+  Forward: 4,
+};
diff --git a/packages/core-browser/src/services/clipboard.service.ts b/packages/core-browser/src/services/clipboard.service.ts
@@ -35,13 +35,17 @@ export class BrowserClipboardService implements IClipboardService {
     textArea.style.position = 'absolute';
 
     textArea.value = text;
-    textArea.focus();
+    textArea.focus({
+      preventScroll: true,
+    });
     textArea.select();
 
     document.execCommand('copy');
 
     if (activeElement instanceof HTMLElement) {
-      activeElement.focus();
+      activeElement.focus({
+        preventScroll: true,
+      });
     }
 
     document.body.removeChild(textArea);

diff --git a/packages/core-common/src/settings/general.ts b/packages/core-common/src/settings/general.ts
@@ -1,4 +1,4 @@
-export const enum GeneralSettingsId {
+export enum GeneralSettingsId {
   Icon = 'general.icon',
   Theme = 'general.theme',
   Language = 'general.language',

diff --git a/packages/editor/src/browser/monaco-contrib/command/command.service.ts b/packages/editor/src/browser/monaco-contrib/command/command.service.ts
@@ -191,7 +191,6 @@ export class MonacoCommandRegistry implements IMonacoCommandsRegistry {
   protected execute(monacoHandler: MonacoEditorCommandHandler, ...args: any[]): any {
     const editor = this.getActiveCodeEditor();
     if (editor) {
-      // editor.focus();
       return Promise.resolve(monacoHandler.execute(editor, ...args));
     }
     return Promise.resolve();

diff --git a/packages/editor/src/browser/tab.view.tsx b/packages/editor/src/browser/tab.view.tsx
@@ -22,6 +22,7 @@ import {
   Event,
   IEventBus,
   MaybeNull,
+  MouseEventButton,
   PreferenceService,
   ResizeEvent,
   URI,
@@ -172,7 +173,10 @@ export const Tabs = ({ group }: ITabsProps) => {
             '.' + styles.kt_editor_tab + "[data-uri='" + group.currentResource.uri.toString() + "']",
           );
           if (currentTab) {
-            currentTab.scrollIntoView();
+            currentTab.scrollIntoView({
+              block: 'nearest',
+              inline: 'nearest',
+            });
           }
         } catch (e) {
           // noop
@@ -425,14 +429,14 @@ export const Tabs = ({ group }: ITabsProps) => {
               }}
               key={resource.uri.toString()}
               onMouseUp={(e) => {
-                if (e.nativeEvent.which === 2) {
+                if (e.nativeEvent.button === MouseEventButton.Middle) {
                   e.preventDefault();
                   e.stopPropagation();
                   group.close(resource.uri);
                 }
               }}
               onMouseDown={(e) => {
-                if (e.nativeEvent.which === 1) {
+                if (e.nativeEvent.button === MouseEventButton.Left) {
                   group.open(resource.uri, { focus: true });
                 }
               }}

diff --git a/packages/editor/src/browser/workbench-editor.service.ts b/packages/editor/src/browser/workbench-editor.service.ts
@@ -1344,6 +1344,11 @@ export class EditorGroup extends WithEventBus implements IGridEditorGroup {
     return this.pinPreviewed(uri);
   }
 
+  protected getPreventScrollOption(options: IResourceOpenOptions = {}) {
+    const preventScroll = options.preventScroll ?? this.preferenceService.get('editor.preventScrollAfterFocused');
+    return preventScroll;
+  }
+
   async doOpen(
     uri: URI,
     options: IResourceOpenOptions = {},
@@ -1357,6 +1362,7 @@ export class EditorGroup extends WithEventBus implements IGridEditorGroup {
       const previewMode =
         this.preferenceService.get('editor.previewMode') &&
         (isUndefinedOrNull(options.preview) ? true : options.preview);
+
       if (
         this.currentResource &&
         this.currentResource.uri.isEqual(uri) &&
@@ -1365,7 +1371,10 @@ export class EditorGroup extends WithEventBus implements IGridEditorGroup {
       ) {
         // 就是当前打开的 Resource
         if (options.focus && this.currentEditor) {
-          this._domNode?.focus();
+          const preventScroll = this.getPreventScrollOption(options);
+          this._domNode?.focus({
+            preventScroll,
+          });
           this.currentEditor.monacoEditor.focus();
         }
         if (options.range && this.currentEditor) {
@@ -1611,7 +1620,8 @@ export class EditorGroup extends WithEventBus implements IGridEditorGroup {
       });
 
       if (options.focus) {
-        this._domNode?.focus();
+        const preventScroll = this.getPreventScrollOption(options);
+        this._domNode?.focus({ preventScroll });
         // monaco 编辑器的 focus 多了一步检查，由于此时其实对应编辑器的 dom 的 display 为 none （需要等 React 下一次渲染才会改变为 block）,
         // 会引起 document.activeElement !== editor.textArea.domNode，进而会导致focus失败
         // 需要等待真正 append 之后再
@@ -1663,7 +1673,10 @@ export class EditorGroup extends WithEventBus implements IGridEditorGroup {
       }
       await this.diffEditor.compare(original, modified, options, resource.uri);
       if (options.focus) {
-        this._domNode?.focus();
+        const preventScroll = this.getPreventScrollOption(options);
+        this._domNode?.focus({
+          preventScroll,
+        });
 
         const disposer = this.eventBus.on(CodeEditorDidVisibleEvent, (e) => {
           if (e.payload.groupName === this.name && e.payload.type === EditorOpenType.diff) {
@@ -2192,6 +2205,7 @@ export class EditorGroup extends WithEventBus implements IGridEditorGroup {
 
   focus() {
     this.gainFocus();
+
     if (this.currentOpenType && this.currentOpenType.type === EditorOpenType.code) {
       this.codeEditor.focus();
     }

diff --git a/packages/editor/src/common/editor.ts b/packages/editor/src/common/editor.ts
@@ -586,6 +586,11 @@ export interface IResourceOpenOptions {
    */
   focus?: boolean;
 
+  /**
+   * If set `focus`, the editor's dom will be focused, This option prevents the element from being scrolled after getting the focus.
+   */
+  preventScroll?: boolean;
+
   /**
    * 强制使用指定的打开方式
    */

diff --git a/packages/terminal-next/src/browser/component/tab.item.tsx b/packages/terminal-next/src/browser/component/tab.item.tsx
@@ -26,7 +26,6 @@ export const renderInfoItem = observer((props: ItemProps) => {
   const iconService = useInjectable<IIconService>(IconService);
   const handleSelect = debounce(() => props.onClick && props.onClick(), 20);
   const handleClose = debounce(() => props.onClose && props.onClose(), 20);
-  const appConfig = useInjectable<AppConfig>(AppConfig);
   const styles_item_container = useDesignStyles(styles.item_container, 'item_container');
   const styles_tab_item_selected = useDesignStyles(styles.tab_item_selected, 'tab_item_selected');
   const styles_item_info_name = useDesignStyles(styles.item_info_name, 'item_info_name');

diff --git a/packages/theme/src/browser/icon.service.ts b/packages/theme/src/browser/icon.service.ts
@@ -95,11 +95,13 @@ export class IconService extends WithEventBus implements IIconService {
   }
 
   private listen() {
-    this.preferenceService.onPreferenceChanged(async (e) => {
-      if (e.preferenceName === GeneralSettingsId.Icon && this.iconContributionRegistry.has(e.newValue)) {
-        await this.applyTheme(this.preferenceService.get<string>(GeneralSettingsId.Icon)!);
-      }
-    });
+    this.addDispose(
+      this.preferenceService.onSpecificPreferenceChange(GeneralSettingsId.Icon, async (e) => {
+        if (this.iconContributionRegistry.has(e.newValue)) {
+          await this.applyTheme(e.newValue);
+        }
+      }),
+    );
   }
 
   private styleSheetCollection = '';