@opensumi/ide-editor 3.2.5 → 3.2.6-next-1724824955.0

package/src/browser/editor-scrollbar/index.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.removeEventListener('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={'kt-editor-scrollbar-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={'kt-editor-scrollbar-thumb-vertical'}
+            onMouseDown={this.onMouseDownVertical.bind(this)}
+            ref={(e) => e && (this.thumbV = e)}
+          />
+        </div>
+      </div>
+    );
+  }
+}

package/src/browser/editor.contribution.ts

@@ -808,7 +808,12 @@ export class EditorContribution
           return;
         }
 
-        return this.editorDocumentModelService.getModelReference(uri)?.instance.encoding;
+        const ref = this.editorDocumentModelService.getModelDescription(uri);
+        if (!ref) {
+          return;
+        }
+
+        return ref.encoding;
       },
     });
 
@@ -832,8 +837,8 @@ export class EditorContribution
 
         const provider = await this.contentRegistry.getProvider(uri);
         const guessedEncoding = await provider?.guessEncoding?.(uri);
-        const ref = this.editorDocumentModelService.getModelReference(uri);
-        const currentEncoding = documentModel?.encoding ?? ref?.instance.encoding;
+        const ref = this.editorDocumentModelService.getModelDescription(uri);
+        const currentEncoding = documentModel?.encoding ?? ref?.encoding;
 
         let matchIndex: number | undefined;
         const encodingItems: QuickPickItem<string>[] = Object.keys(SUPPORTED_ENCODINGS)

package/src/browser/editor.module.less

@@ -48,6 +48,7 @@
     position: absolute;
     width: 100%;
     height: 100%;
+    pointer-events: none;
   }
   .kt_editor_tabs {
     display: flex;
@@ -73,7 +74,7 @@
         left: 0;
         position: absolute;
         display: block;
-        z-index: 0;
+        z-index: var(--stacking-level-background, 0);
       }
       &::after {
         content: '';
@@ -84,7 +85,7 @@
         left: 0;
         position: absolute;
         display: block;
-        z-index: 0;
+        z-index: var(--stacking-level-background, 0);
       }
       .editor_action_wrapper {
         margin-left: 8px;
@@ -132,12 +133,6 @@
     }
   }
 
-  .kt_editor_tabs_scroll_wrapper {
-    flex-grow: 1;
-    width: 100%;
-    position: relative;
-  }
-
   .kt_editor_tabs_scroll {
     overflow-y: hidden;
     :global(.loading_indicator) {
@@ -175,7 +170,7 @@
         left: 0;
         position: absolute;
         display: block;
-        z-index: 0;
+        z-index: var(--stacking-level-background, 0);
       }
     }
   }
@@ -184,7 +179,7 @@
   }
   .kt_editor_tabs_content {
     overflow-y: hidden;
-    display: inline-flex;
+    display: flex;
     position: relative;
     height: 100%;
     &.kt_on_drag_over {
@@ -197,8 +192,6 @@
       display: flex;
       position: relative;
       align-items: center;
-      flex-shrink: 1;
-      flex-grow: 1;
       padding: 0 12px;
       border-right: 1px solid var(--tab-border);
       height: 100%;
@@ -209,7 +202,6 @@
       color: var(--tab-inactiveForeground);
       background: var(--tab-inactiveBackground);
       border-top: 1px solid transparent;
-      box-sizing: border-box;
       z-index: 1;
       word-break: keep-all;
       white-space: nowrap;
@@ -304,7 +296,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 +304,7 @@
           width: 100%;
           top: -1px;
           left: 0;
-          z-index: 999;
+          z-index: var(--stacking-level-overlay, 800);
           background-color: var(--tab-activeBorderTop);
         }
         .dirty {
@@ -348,7 +340,7 @@
   }
 
   .editorGroupHeader {
-    z-index: 0;
+    z-index: var(--stacking-level-workbench, 1);
     position: relative;
   }
 
@@ -489,7 +481,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/format/formatter-selector.ts

@@ -47,12 +47,11 @@ export class FormattingSelector implements IFormattingSelector {
     mode: FormattingMode,
     _kind: FormattingKind,
   ): Promise<T | undefined> {
-    const docRef = this.modelService.getModelReference(URI.from(document.uri.toJSON()));
-    if (!docRef) {
+    const docDesc = this.modelService.getModelDescription(URI.from(document.uri.toJSON()));
+    if (!docDesc) {
       return;
     }
-    const languageId = docRef.instance.languageId;
-    docRef.dispose();
+    const languageId = docDesc.languageId;
     const preferred = this.getPreferedFormatter(languageId);
 
     const elements: { [key: string]: T } = {};
@@ -120,12 +119,11 @@ export class FormattingSelector implements IFormattingSelector {
     formatters: T[],
     document: ITextModel,
   ): Promise<T | undefined> {
-    const docRef = this.modelService.getModelReference(URI.from(document.uri.toJSON()));
-    if (!docRef) {
+    const docDesc = this.modelService.getModelDescription(URI.from(document.uri.toJSON()));
+    if (!docDesc) {
       return;
     }
-    const languageId = docRef.instance.languageId;
-    docRef.dispose();
+    const languageId = docDesc.languageId;
 
     const elements: { [key: string]: T } = {};
     formatters.forEach((provider: T) => {

package/src/browser/fs-resource/fs-resource.ts

@@ -181,8 +181,8 @@ export class FileSystemResourceProvider extends WithEventBus implements IResourc
     this.cachedFileStat.delete(resource.uri.toString());
   }
   async shouldCloseResourceWithoutConfirm(resource: IResource) {
-    const documentModelRef = this.documentModelService.getModelReference(resource.uri, 'close-resource-check');
-    if (documentModelRef && documentModelRef.instance.dirty) {
+    const documentModelRef = this.documentModelService.getModelDescription(resource.uri, 'close-resource-check');
+    if (documentModelRef && documentModelRef.dirty) {
       return true;
     }
     return false;
@@ -204,6 +204,7 @@ export class FileSystemResourceProvider extends WithEventBus implements IResourc
       documentModelRef.dispose();
       return false;
     } else {
+      documentModelRef.dispose();
       return true;
     }
   }
@@ -222,11 +223,8 @@ export class FileSystemResourceProvider extends WithEventBus implements IResourc
         }
       }
     }
-    const documentModelRef = this.documentModelService.getModelReference(resource.uri, 'close-resource-check');
-    if (!documentModelRef || !documentModelRef.instance.dirty) {
-      if (documentModelRef) {
-        documentModelRef.dispose();
-      }
+    const documentModelRef = this.documentModelService.getModelDescription(resource.uri, 'close-resource-check');
+    if (!documentModelRef || !documentModelRef.dirty) {
       return true;
     }
 

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) {