@opensumi/ide-editor 3.2.4 → 3.2.5-next-1724132734.0

package/src/browser/editor-scrollbar/inedx.tsx

@@ -0,0 +1,399 @@
+import cls from 'classnames';
+import React, { MouseEvent, UIEvent } from 'react';
+
+import styles from './index.module.less';
+
+export interface ScrollAreaProps {
+  className?: string;
+  onScroll?: (position: ScrollPosition) => any;
+  atTopClassName?: string;
+  style?: any;
+  containerStyle?: any;
+  delegate?: (delegate: IScrollDelegate) => void;
+
+  forwardedRef: (ref: HTMLDivElement) => void;
+
+  children: any;
+}
+
+export interface IScrollDelegate {
+  scrollTo(position: ScrollPosition): void;
+}
+
+export interface ScrollPosition {
+  top: number;
+  left: number;
+}
+
+export interface ScrollSizes {
+  scrollHeight: number;
+  offsetHeight: number;
+  offsetWidth: number;
+  scrollWidth: number;
+}
+
+export class Scroll extends React.Component<ScrollAreaProps, any> {
+  public ref: HTMLDivElement;
+
+  public container: HTMLDivElement;
+
+  private thumbV!: HTMLDivElement;
+
+  private trackV!: HTMLDivElement;
+
+  private thumbH!: HTMLDivElement;
+
+  private trackH!: HTMLDivElement;
+
+  private decorationL: HTMLDivElement;
+  private decorationR: HTMLDivElement;
+
+  private size: ScrollSizes;
+
+  private position: ScrollPosition = {
+    top: 0,
+    left: 0,
+  };
+
+  private dragging = false;
+
+  private draggingStart = 0;
+
+  private draggingStartPos = 0;
+
+  private requestFrame: any;
+
+  private shouldHideThumb = true;
+
+  private isAtTop = true;
+
+  onScroll(e: UIEvent<HTMLDivElement>) {
+    this.position = {
+      top: this.ref.scrollTop,
+      left: this.ref.scrollLeft,
+    };
+    if (this.props.onScroll) {
+      this.props.onScroll(this.position);
+    }
+    this.update(() => {
+      const contentWidth = this.ref.scrollWidth;
+      const width = this.ref.offsetWidth;
+      const contentHeight = this.ref.scrollHeight;
+      const height = this.ref.offsetHeight;
+      this.thumbH.style.left = (this.position.left * width) / contentWidth + 'px';
+      this.thumbV.style.top = (this.position.top * height) / contentHeight + 'px';
+    });
+    if (!this.isAtTop && this.ref.scrollTop === 0) {
+      this.isAtTop = true;
+      this.setCss();
+    } else if (this.isAtTop && this.ref.scrollTop !== 0) {
+      this.isAtTop = false;
+      this.setCss();
+    }
+
+    if (this.ref.scrollLeft > 0) {
+      this.decorationL.style.opacity = String(1);
+      this.decorationR.style.opacity = String(1);
+    } else {
+      this.decorationL.style.opacity = String(0);
+    }
+
+    if (
+      this.ref.scrollWidth === this.ref.offsetWidth ||
+      this.ref.scrollLeft === this.ref.scrollWidth - this.ref.offsetWidth
+    ) {
+      this.decorationR.style.opacity = String(0);
+    }
+  }
+
+  scrollTo(position: ScrollPosition) {
+    this.ref.scrollLeft = position.left;
+    this.ref.scrollTop = position.top;
+  }
+
+  onMouseDownHorizontal(e: MouseEvent<HTMLDivElement>) {
+    this.dragging = true;
+    if (e.target === this.trackH) {
+      this.onMouseDownOnTrack(e);
+    }
+    this.draggingStart = e.pageX;
+    this.draggingStartPos = this.ref.scrollLeft;
+    document.addEventListener('mousemove', this.onMouseMoveHorizontal);
+    document.addEventListener('mouseup', this.onMouseUpHorizontal);
+  }
+
+  onMouseMoveHorizontal = (e) => {
+    if (!this.dragging) {
+      return;
+    }
+    const move = e.pageX - this.draggingStart;
+    this.ref.scrollLeft = this.draggingStartPos + this.calculateXToLeft(move);
+  };
+
+  onMouseUpHorizontal = (e) => {
+    this.dragging = false;
+    document.removeEventListener('mousemove', this.onMouseMoveHorizontal);
+    document.removeEventListener('mouseup', this.onMouseUpHorizontal);
+    if (this.shouldHideThumb) {
+      this.hideThumb();
+    }
+  };
+
+  onMouseDownOnTrack(e: MouseEvent<HTMLDivElement>) {
+    const track = e.target as HTMLDivElement;
+    const x = e.clientX - track.getBoundingClientRect().left;
+    const contentWidth = this.ref.scrollWidth;
+    const width = this.ref.offsetWidth;
+    const left = (x * contentWidth) / width - 0.5 * width;
+    this.scrollTo({
+      left,
+      top: this.position.top,
+    });
+  }
+
+  calculateXToLeft(x) {
+    const contentWidth = this.ref.scrollWidth;
+    const width = this.ref.offsetWidth;
+    return (x * contentWidth) / width;
+  }
+
+  onMouseDownVertical(e: MouseEvent<HTMLDivElement>) {
+    this.dragging = true;
+    if (e.target === this.trackV) {
+      this.onMouseDownOnTrackVertical(e);
+    }
+    this.draggingStart = e.pageY;
+    this.draggingStartPos = this.ref.scrollTop;
+    document.addEventListener('mousemove', this.onMouseMoveVertical);
+    document.addEventListener('mouseup', this.onMouseUpVertical);
+  }
+
+  onMouseMoveVertical = (e) => {
+    if (!this.dragging) {
+      return;
+    }
+    const move = e.pageY - this.draggingStart;
+    this.ref.scrollTop = this.draggingStartPos + this.calculateYToTop(move);
+  };
+
+  onMouseUpVertical = (e) => {
+    this.dragging = false;
+    document.removeEventListener('mousemove', this.onMouseMoveVertical);
+    document.removeEventListener('mouseup', this.onMouseUpVertical);
+    if (this.shouldHideThumb) {
+      this.hideThumb();
+    }
+  };
+
+  onMouseDownOnTrackVertical(e: MouseEvent<HTMLDivElement>) {
+    const track = e.target as HTMLDivElement;
+    const x = e.clientY - track.getBoundingClientRect().top;
+    const contentHeight = this.ref.scrollHeight;
+    const height = this.ref.offsetHeight;
+    const top = (x * contentHeight) / height - 0.5 * height;
+    this.scrollTo({
+      left: this.position.left,
+      top,
+    });
+  }
+
+  onMousewheel = (e: WheelEvent) => {
+    // 鼠标滚动滚轮只在有横向滚动条的情况下
+    // 页面有缩放的时候，scrollHeight 可能会小于 clientHeight / offsetHeight
+    if (this.ref.clientHeight >= this.ref.scrollHeight) {
+      if (e.deltaY !== 0) {
+        // scrollLeft 内部有边界判断
+        this.ref.scrollLeft += e.deltaY;
+      }
+      if (e.deltaX !== 0) {
+        this.ref.scrollLeft += e.deltaX;
+      }
+    }
+  };
+
+  calculateYToTop(y) {
+    const contentHeight = this.ref.scrollHeight;
+    const height = this.ref.offsetHeight;
+    return (y * contentHeight) / height;
+  }
+
+  componentDidUpdate() {
+    this.update();
+    if (this.props.delegate) {
+      this.props.delegate({
+        scrollTo: this.scrollTo.bind(this),
+      });
+    }
+  }
+
+  componentDidMount() {
+    this.update();
+    window.addEventListener('resize', this.handleWindowResize);
+    if (this.props.delegate) {
+      this.props.delegate({
+        scrollTo: this.scrollTo.bind(this),
+      });
+    }
+    if (this.ref) {
+      this.ref.addEventListener('mouseenter', this.onMouseEnter);
+      this.ref.addEventListener('wheel', this.onMousewheel);
+    }
+  }
+
+  onMouseEnter = () => {
+    this.update();
+  };
+
+  componentWillUnmount() {
+    if (this.ref) {
+      this.ref.removeEventListener('mouseenter', this.onMouseEnter);
+      this.ref.addEventListener('wheel', this.onMousewheel);
+    }
+    window.removeEventListener('resize', this.handleWindowResize);
+    if (this.requestFrame) {
+      window.cancelAnimationFrame(this.requestFrame);
+    }
+  }
+
+  handleWindowResize = () => {
+    this.update();
+  };
+
+  sizeEqual(size1: ScrollSizes, size2: ScrollSizes): boolean {
+    return (
+      size1 &&
+      size2 &&
+      size1.offsetHeight === size2.offsetHeight &&
+      size1.scrollHeight === size2.scrollHeight &&
+      size1.offsetWidth === size2.offsetWidth &&
+      size1.scrollWidth === size2.scrollWidth
+    );
+  }
+
+  update = (callback?) => {
+    if (this.requestFrame) {
+      window.cancelAnimationFrame(this.requestFrame);
+    }
+    this.requestFrame = window.requestAnimationFrame(() => {
+      this._update();
+      if (callback) {
+        callback();
+      }
+    });
+  };
+
+  _update() {
+    if (this.ref) {
+      if (!this.sizeEqual(this.size, this.ref)) {
+        this.size = {
+          offsetHeight: this.ref.offsetHeight,
+          offsetWidth: this.ref.offsetWidth,
+          scrollWidth: this.ref.scrollWidth,
+          scrollHeight: this.ref.scrollHeight,
+        };
+        this.updateScrollBar();
+      }
+    }
+  }
+
+  updateScrollBar() {
+    const contentWidth = this.ref.scrollWidth;
+    const width = this.ref.offsetWidth;
+    if (width < contentWidth) {
+      const thumbHWidth = (width * width) / contentWidth;
+      this.thumbH.style.width = thumbHWidth + 'px';
+      this.trackH.parentElement!.style.display = 'block';
+    } else {
+      this.trackH.parentElement!.style.display = 'none';
+    }
+    const contentHeight = this.ref.scrollHeight;
+    const height = this.ref.offsetHeight;
+    if (height < contentHeight) {
+      this.thumbV.style.height = (height * height) / contentHeight + 'px';
+      this.trackV.parentElement!.style.display = 'block';
+    } else {
+      this.trackV.parentElement!.style.display = 'none';
+    }
+  }
+
+  hideThumb() {
+    this.shouldHideThumb = true;
+    if (!this.dragging) {
+      this.setCss();
+    }
+  }
+
+  showThumb() {
+    this.shouldHideThumb = false;
+    this.setCss();
+  }
+
+  setCss() {
+    this.container.className = cls({
+      [styles.scroll]: true,
+      [styles['hide-thumb']]: this.shouldHideThumb && !this.dragging,
+    });
+    const clses = {};
+    if (this.props.atTopClassName) {
+      clses[this.props.atTopClassName] = this.isAtTop;
+    }
+    if (this.props.className) {
+      clses[this.props.className] = true;
+    }
+    this.ref.className = cls(clses);
+  }
+
+  render() {
+    return (
+      <div
+        className={cls(styles.scroll, styles['hide-thumb'])}
+        ref={(e) => {
+          if (e) {
+            this.container = e;
+            this.props.forwardedRef(e);
+          }
+        }}
+        onMouseMove={() => this.showThumb()}
+        onMouseLeave={() => this.hideThumb()}
+        style={this.props.containerStyle}
+      >
+        <div
+          style={this.props.style}
+          className={cls(this.props.className)}
+          onScroll={this.onScroll.bind(this)}
+          ref={(e) => e && (this.ref = e)}
+          onMouseDown={() => this.update()}
+          onMouseUp={() => this.update()}
+        >
+          {this.props.children}
+        </div>
+        <div className={styles['scrollbar-decoration-vertical-l']} ref={(e) => e && (this.decorationL = e)} />
+        <div className={styles['scrollbar-decoration-vertical-r']} ref={(e) => e && (this.decorationR = e)} />
+        <div className={styles['scroll-horizontal']}>
+          <div
+            className={styles['track-horizontal']}
+            ref={(e) => e && (this.trackH = e)}
+            onMouseDown={this.onMouseDownHorizontal.bind(this)}
+          />
+          <div
+            className={'thumb-horizontal'}
+            onMouseDown={this.onMouseDownHorizontal.bind(this)}
+            ref={(e) => e && (this.thumbH = e)}
+          />
+        </div>
+        <div className={styles['scroll-vertical']}>
+          <div
+            className={styles['track-vertical']}
+            ref={(e) => e && (this.trackV = e)}
+            onMouseDown={this.onMouseDownVertical.bind(this)}
+          />
+          <div
+            className={'thumb-vertical'}
+            onMouseDown={this.onMouseDownVertical.bind(this)}
+            ref={(e) => e && (this.thumbV = e)}
+          />
+        </div>
+      </div>
+    );
+  }
+}

package/src/browser/editor.module.less

@@ -304,7 +304,7 @@
         position: relative;
         background: var(--tab-activeBackground);
         color: var(--tab-activeForeground);
-        z-index: 11;
+        z-index: var(--stacking-level-editor-tabbar-current, 11);
         &::before {
           position: absolute;
           content: '';
@@ -312,7 +312,7 @@
           width: 100%;
           top: -1px;
           left: 0;
-          z-index: 999;
+          z-index: var(--stacking-level-popover-component, 1000);
           background-color: var(--tab-activeBorderTop);
         }
         .dirty {
@@ -489,7 +489,7 @@
   .overlay-shadow();
   border-radius: 2px;
   padding: 5px 10px;
-  z-index: 10001;
+  z-index: var(--stacking-level-overlay-top, 1000);
   white-space: nowrap;
   .editor_action_tip_close {
     cursor: pointer;

package/src/browser/editor.view.tsx

@@ -17,8 +17,10 @@ import {
   PreferenceService,
   URI,
   View,
+  renderView,
   useDesignStyles,
   useDisposable,
+  usePreference,
 } from '@opensumi/ide-core-browser';
 import {
   IResizeHandleDelegate,
@@ -241,7 +243,6 @@ const EditorEmptyComponent: React.FC<{
 export const EditorGroupView = observer(({ group }: { group: EditorGroup }) => {
   const groupWrapperRef = React.useRef<HTMLElement | null>();
 
-  const preferenceService = useInjectable(PreferenceService) as PreferenceService;
   const [isEmpty, setIsEmpty] = React.useState(group.resources.length === 0);
   const styles_kt_editor_group = useDesignStyles(styles.kt_editor_group, 'kt_editor_group');
 
@@ -263,20 +264,7 @@ export const EditorGroupView = observer(({ group }: { group: EditorGroup }) => {
     };
   }, []);
 
-  const [showActionWhenGroupEmpty, setShowActionWhenGroupEmpty] = React.useState(
-    () => !!preferenceService.get<boolean>('editor.showActionWhenGroupEmpty'),
-  );
-
-  useDisposable(
-    () => [
-      preferenceService.onPreferenceChanged((change) => {
-        if (change.preferenceName === 'editor.showActionWhenGroupEmpty') {
-          setShowActionWhenGroupEmpty(!!change.newValue);
-        }
-      }),
-    ],
-    [],
-  );
+  const showActionWhenGroupEmpty = usePreference('editor.showActionWhenGroupEmpty', false);
 
   const componentRegistry = useInjectable<ComponentRegistry>(ComponentRegistry);
 
@@ -314,12 +302,7 @@ export const EditorGroupView = observer(({ group }: { group: EditorGroup }) => {
             backgroundImage: !EmptyEditorViewConfig && editorBackgroundImage ? `url(${editorBackgroundImage})` : 'none',
           }}
         >
-          {EmptyEditorViewConfig && ReactIs.isValidElementType(EmptyEditorViewConfig.component) ? (
-            <ErrorBoundary>
-              {EmptyEditorViewConfig.component &&
-                React.createElement(EmptyEditorViewConfig.component, EmptyEditorViewConfig.initialProps)}
-            </ErrorBoundary>
-          ) : null}
+          {renderView(EmptyEditorViewConfig)}
         </div>
       )}
     </div>

package/src/browser/grid/grid.service.ts

@@ -1,5 +1,5 @@
 import { Emitter, IDisposable, IEventBus, MaybeNull } from '@opensumi/ide-core-browser';
-import { makeRandomHexString } from '@opensumi/ide-core-common';
+import { DisposableStore, makeRandomHexString } from '@opensumi/ide-core-common';
 
 import { Direction, IEditorGroup, IEditorGroupState } from '../../common';
 import { GridResizeEvent } from '../types';
@@ -7,17 +7,19 @@ import { GridResizeEvent } from '../types';
 export const editorGridUid = new Set();
 
 export class EditorGrid implements IDisposable {
+  private _disposables = new DisposableStore();
+
   public editorGroup: IGridEditorGroup | null = null;
 
   public children: EditorGrid[] = [];
 
   public splitDirection: SplitDirection | undefined;
 
-  protected readonly _onDidGridStateChange = new Emitter<void>();
+  protected readonly _onDidGridStateChange = this._disposables.add(new Emitter<void>());
 
   public readonly onDidGridStateChange = this._onDidGridStateChange.event;
 
-  protected readonly _onDidGridAndDesendantStateChange = new Emitter<void>();
+  protected readonly _onDidGridAndDesendantStateChange = this._disposables.add(new Emitter<void>());
 
   public readonly onDidGridAndDesendantStateChange = this._onDidGridAndDesendantStateChange.event;
 
@@ -30,10 +32,12 @@ export class EditorGrid implements IDisposable {
     }
     this.uid = uid;
     editorGridUid.add(uid);
-    this.onDidGridStateChange(() => {
-      this._onDidGridAndDesendantStateChange.fire();
-      this.parent?._onDidGridAndDesendantStateChange.fire();
-    });
+    this._disposables.add(
+      this.onDidGridStateChange(() => {
+        this._onDidGridAndDesendantStateChange.fire();
+        this.parent?._onDidGridAndDesendantStateChange.fire();
+      }),
+    );
   }
 
   setEditorGroup(editorGroup: IGridEditorGroup) {
@@ -106,6 +110,8 @@ export class EditorGrid implements IDisposable {
     } else {
       // 应该不会落入这里
     }
+
+    this._disposables.dispose();
   }
 
   public replaceBy(target: EditorGrid) {

package/src/browser/navigation.module.less

@@ -15,12 +15,13 @@
   }
 
   .navigation_icon {
-    font-size: 12px;
+    font-size: 12px !important;
     color: var(--breadcrumb-foreground);
   }
+
   .navigation-part {
     color: var(--breadcrumb-foreground);
-    font-size: 12px;
+    font-size: 12px !important;
     padding: 0 4px;
     position: relative;
     line-height: 22px;

package/src/browser/navigation.view.tsx

@@ -56,7 +56,7 @@ export const NavigationBar = ({ editorGroup }: { editorGroup: EditorGroup }) =>
   }
   return parts.length === 0 ? null : (
     <div
-      className={styles_navigation_container}
+      className={cls('kt-navigation-container', styles_navigation_container)}
       onContextMenu={(event) => {
         event.preventDefault();
       }}

package/src/browser/tab.view.tsx

@@ -13,8 +13,8 @@ import React, {
   useState,
 } from 'react';
 
-import { Scrollbars } from '@opensumi/ide-components';
 import {
+  ComponentRegistry,
   ConfigContext,
   Disposable,
   DisposableCollection,
@@ -29,6 +29,7 @@ import {
   getExternalIcon,
   getIcon,
   getSlotLocation,
+  renderView,
   useDesignStyles,
 } from '@opensumi/ide-core-browser';
 import { InlineMenuBar } from '@opensumi/ide-core-browser/lib/components/actions';
@@ -37,8 +38,16 @@ import { VIEW_CONTAINERS } from '@opensumi/ide-core-browser/lib/layout/view-id';
 import { IMenuRegistry, MenuId } from '@opensumi/ide-core-browser/lib/menu/next';
 import { useInjectable, useUpdateOnEventBusEvent } from '@opensumi/ide-core-browser/lib/react-hooks';
 
-import { IEditorGroup, IResource, ResourceDidUpdateEvent, ResourceService, WorkbenchEditorService } from '../common';
-
+import {
+  IEditorGroup,
+  IResource,
+  ResourceDidUpdateEvent,
+  ResourceService,
+  TabbarRightExtraContentId,
+  WorkbenchEditorService,
+} from '../common';
+
+import { Scroll } from './editor-scrollbar/inedx';
 import styles from './editor.module.less';
 import { TabTitleMenuService } from './menu/title-context.menu';
 import {
@@ -72,6 +81,7 @@ export const Tabs = ({ group }: ITabsProps) => {
   const menuRegistry = useInjectable<IMenuRegistry>(IMenuRegistry);
   const editorTabService = useInjectable<IEditorTabService>(IEditorTabService);
   const layoutViewSize = useInjectable<LayoutViewSizeConfig>(LayoutViewSizeConfig);
+  const componentRegistry = useInjectable<ComponentRegistry>(ComponentRegistry);
 
   const styles_tab_right = useDesignStyles(styles.tab_right, 'tab_right');
   const styles_close_tab = useDesignStyles(styles.close_tab, 'close_tab');
@@ -105,6 +115,13 @@ export const Tabs = ({ group }: ITabsProps) => {
 
   const slotLocation = useMemo(() => getSlotLocation(pkgName, configContext.layoutConfig), []);
 
+  const RightExtraContentViewConfig = React.useMemo(() => {
+    const firstView = componentRegistry.getComponentRegistryInfo(TabbarRightExtraContentId)?.views?.[0];
+    if (firstView) {
+      return firstView;
+    }
+  }, []);
+
   useUpdateOnGroupTabChange(group);
   useUpdateOnEventBusEvent(
     ResourceDidUpdateEvent,
@@ -492,18 +509,19 @@ export const Tabs = ({ group }: ITabsProps) => {
         onDoubleClick={handleEmptyDBClick}
       >
         {!wrapMode ? (
-          <Scrollbars
-            tabBarMode
+          <Scroll
             forwardedRef={(el) => (el ? (tabContainer.current = el) : null)}
             className={styles.kt_editor_tabs_scroll}
           >
             {renderTabContent()}
-          </Scrollbars>
+          </Scroll>
         ) : (
           <div className={styles.kt_editor_wrap_container}>{renderTabContent()}</div>
         )}
       </div>
       {!wrapMode && <EditorActions ref={editorActionRef} group={group} />}
+
+      {renderView(RightExtraContentViewConfig)}
     </div>
   );
 };

package/src/browser/workbench-editor.service.ts

@@ -491,10 +491,13 @@ export class WorkbenchEditorServiceImpl extends WithEventBus implements Workbenc
       state = this.openedResourceState.get<IEditorGridState>('grid', state);
     }
     this.topGrid = new EditorGrid();
-    this.topGrid.onDidGridAndDesendantStateChange(() => {
-      this._sortedEditorGroups = undefined;
-      this._onDidEditorGroupsChanged.fire();
-    });
+    this.addDispose(this.topGrid);
+    this.addDispose(
+      this.topGrid.onDidGridAndDesendantStateChange(() => {
+        this._sortedEditorGroups = undefined;
+        this._onDidEditorGroupsChanged.fire();
+      }),
+    );
     const editorRestorePromises = [];
     const promise = this.topGrid
       .deserialize(state, () => this.createEditorGroup(), editorRestorePromises)

package/src/common/components.ts

@@ -0,0 +1,2 @@
+export const TabbarRightExtraContentId = 'tabbar-right-extra-content';
+export const TabbarLeftExtraContentId = 'tabbar-left-extra-content';

package/src/common/index.ts

@@ -4,3 +4,4 @@ export * from './resource';
 export * from './language';
 export * from './utils';
 export * from './language-status';
+export * from './components';