@opensumi/ide-core-browser 3.2.5 → 3.2.6-next-1724824955.0

package/src/components/layout/default-layout.tsx

@@ -5,14 +5,26 @@ import { SlotRenderer } from '../../react-providers/slot';
 import { BoxPanel } from './box-panel';
 import { SplitPanel } from './split-panel';
 
+export interface ILayoutConfigCache {
+  [key: string]: { size: number; currentId: string };
+}
+
 export const getStorageValue = () => {
   // 启动时渲染的颜色和尺寸，弱依赖
-  let savedLayout: { [key: string]: { size: number; currentId: string } } = {};
+  let savedLayout: ILayoutConfigCache = {};
   let savedColors: { [colorKey: string]: string } = {};
   try {
-    savedLayout = JSON.parse(localStorage.getItem('layout') || '{}');
-    savedColors = JSON.parse(localStorage.getItem('theme') || '{}');
+    const layoutConfigStr = localStorage.getItem('layout');
+    if (layoutConfigStr) {
+      savedLayout = JSON.parse(layoutConfigStr);
+    }
+
+    const themeConfigStr = localStorage.getItem('theme');
+    if (themeConfigStr) {
+      savedColors = JSON.parse(themeConfigStr);
+    }
   } catch (err) {}
+
   return {
     layout: savedLayout,
     colors: savedColors,
@@ -42,7 +54,13 @@ export function ToolbarActionBasedLayout(
         />
         <SplitPanel id='main-vertical' minResize={300} flexGrow={1} direction='top-to-bottom'>
           <SlotRenderer flex={2} flexGrow={1} minResize={200} slot='main' />
-          <SlotRenderer flex={1} defaultSize={layout.bottom?.size} minResize={160} slot='bottom' isTabbar={true} />
+          <SlotRenderer
+            flex={1}
+            defaultSize={layout.bottom?.currentId ? layout.bottom?.size : 24}
+            minResize={160}
+            slot='bottom'
+            isTabbar={true}
+          />
         </SplitPanel>
         <SlotRenderer
           slot='right'

package/src/components/layout/split-panel.service.ts

@@ -3,6 +3,7 @@ import React from 'react';
 import { Autowired, INJECTOR_TOKEN, Injectable, Injector } from '@opensumi/di';
 import { Deferred, Disposable, IDisposable } from '@opensumi/ide-core-common';
 
+import { AppConfig, SlotRenderer } from '../../react-providers';
 import { RESIZE_LOCK } from '../resize/resize';
 
 import { SplitPanelProps } from './split-panel';
@@ -19,12 +20,16 @@ export interface ISplitPanelService extends IDisposable {
     props: SplitPanelProps,
   ): React.ReactElement;
   interceptProps(props: SplitPanelProps): SplitPanelProps;
+  checkChildNoResize(child: React.ReactNode): boolean;
   setRootNode(node: HTMLElement): void;
   whenReady: Promise<void>;
 }
 
 @Injectable({ multiple: true })
 export class SplitPanelService extends Disposable implements ISplitPanelService {
+  @Autowired(AppConfig)
+  appConfig: AppConfig;
+
   constructor(protected readonly panelId: string) {
     super();
   }
@@ -82,6 +87,17 @@ export class SplitPanelService extends Disposable implements ISplitPanelService
     }
   }
 
+  checkChildNoResize(child: React.ReactNode) {
+    if (child && (child as React.ReactElement).type === SlotRenderer) {
+      // slot render must have modules
+      const modules = this.appConfig.layoutConfig[(child as React.ReactElement).props?.slot]?.modules;
+      if (!modules || modules.length === 0) {
+        return true;
+      }
+    }
+    return false;
+  }
+
   public renderSplitPanel(component: React.JSX.Element, children: React.ReactNode[], props: SplitPanelProps) {
     return React.cloneElement(component, { ...props, ...component.props }, children);
   }

package/src/components/layout/split-panel.tsx

@@ -247,7 +247,10 @@ export const SplitPanel: React.FC<SplitPanelProps> = (props) => {
             } else if (getProp(childList[index - 1], 'flexGrow')) {
               flexMode = ResizeFlexMode.Next;
             }
-            const noResize = getProp(targetElement, 'noResize') || locks[index - 1];
+            const noResize =
+              splitPanelService.checkChildNoResize(targetElement) ||
+              getProp(targetElement, 'noResize') ||
+              locks[index - 1];
             if (!noResize) {
               result.push(
                 <ResizeHandle

package/src/contextkey/ai-native.ts

@@ -5,3 +5,4 @@ export const InlineCompletionIsTrigger = new RawContextKey('ai.native.inlineComp
 export const InlineHintWidgetIsVisible = new RawContextKey('ai.native.inlineHintWidgetIsVisible', false);
 export const InlineInputWidgetIsVisible = new RawContextKey('ai.native.inlineInputWidgetIsVisible', false);
 export const InlineDiffPartialEditsIsVisible = new RawContextKey('ai.native.inlineDiffPartialEditsIsVisible', false);
+export const MultiLineCompletionsIsVisible = new RawContextKey('ai.native.multiLineCompletionsIsVisible', false);

package/src/design/rule.ts

@@ -1,35 +1,51 @@
 /**
  * 定义了 zIndex 的层级
  */
-export const StackingLevel = {
+export const StackingLevel = Object.freeze({
   /**
    * 基础层级
    */
-  Base: 0,
   Background: 0,
 
+  /**
+   * IDE 的主要内容区域，基础控件
+   */
   Workbench: 1,
-  WorkbenchEditor: 1,
 
+  /**
+   * 顶部的工具栏
+   */
   Toolbar: 2,
 
-  XtermDecoration: 8, // xterm.css 中 decoration 的 z-index 是 7，所以这里要比它大一点
+  /**
+   * xterm.css 中 decoration 的 z-index 是 7，所以这里要比它大一点
+   */
+  XtermDecoration: 8,
 
+  /**
+   * 顶部工具栏的下拉菜单
+   */
   ToolbarDropdown: 10,
 
+  EditorTabbarCurrent: 11,
+
   ResizeHandle: 12,
 
+  EditorTabbarOverlay: 15,
+
   EditorFloatingContainer: 20,
 
-  /**
-   * 一级弹窗
-   */
+  // #region 中级弹窗区域
   Popup: 100,
-  PopoverComponent: 1000,
-  PopoverComponentArrow: 1001,
+  // #endregion
+
+  // #region 顶级弹窗区域
   Overlay: 800,
+  PopoverComponent: 999,
+  PopoverComponentArrow: 1000,
   OverlayTop: 1000,
-} as const;
+  // #endregion
+} as const);
 
 export const StackingLevelStr = Object.fromEntries(
   Object.entries(StackingLevel).map(([key, value]) => [key, value.toString()]),

package/src/index.ts

@@ -1,4 +1,3 @@
-// 输出所有 common 里面会有的内容
 export * from '@opensumi/ide-core-common';
 
 // 输出当前 browser 特有的内容
@@ -45,3 +44,4 @@ export * from './markdown';
 export * from './extensions';
 
 export * from './static-resource';
+export * from './context-key';

package/src/layout/constants.ts

@@ -1,7 +1,7 @@
 import merge from 'lodash/merge';
 
 import { Injectable } from '@opensumi/di';
-import { IDesignLayoutConfig, isMacintosh } from '@opensumi/ide-core-common';
+import { IDesignLayoutConfig, isDefined, isMacintosh } from '@opensumi/ide-core-common';
 
 import { electronEnv } from '../utils/electron';
 
@@ -25,15 +25,48 @@ export const DEFAULT_LAYOUT_VIEW_SIZE: ILayoutViewSize = {
   accordionHeaderSizeHeight: 24,
 };
 
+export enum ConfigPriority {
+  ModuleDefined,
+  UserDefined,
+}
+
+/**
+ * 支持多档优先级配置
+ */
+class ConfigAtom<T> {
+  /**
+   * index 越高，优先级越高
+   */
+  protected _value: (T | undefined)[] = [];
+  constructor(public defaultValue: T) {}
+
+  setValue(value: T | undefined, priority: number) {
+    this._value[priority] = value;
+  }
+
+  getValue(): T {
+    let value = this.defaultValue;
+
+    for (let i = this._value.length - 1; i >= 0; i--) {
+      if (isDefined(this._value[i])) {
+        value = this._value[i]!;
+        break;
+      }
+    }
+
+    return value;
+  }
+}
+
 @Injectable()
 export class LayoutViewSizeConfig implements ILayoutViewSize {
-  #menubarHeight: number;
-  #editorTabsHeight: number;
-  #bigSurTitleBarHeight: number;
-  #titleBarHeight: number;
-  #panelTitleBarHeight: number;
-  #statusBarHeight: number;
-  #accordionHeaderSizeHeight: number;
+  #menubarHeight = new ConfigAtom(DEFAULT_LAYOUT_VIEW_SIZE.menubarHeight);
+  #editorTabsHeight = new ConfigAtom(DEFAULT_LAYOUT_VIEW_SIZE.editorTabsHeight);
+  #bigSurTitleBarHeight = new ConfigAtom(DEFAULT_LAYOUT_VIEW_SIZE.bigSurTitleBarHeight);
+  #titleBarHeight = new ConfigAtom(DEFAULT_LAYOUT_VIEW_SIZE.titleBarHeight);
+  #panelTitleBarHeight = new ConfigAtom(DEFAULT_LAYOUT_VIEW_SIZE.panelTitleBarHeight);
+  #statusBarHeight = new ConfigAtom(DEFAULT_LAYOUT_VIEW_SIZE.statusBarHeight);
+  #accordionHeaderSizeHeight = new ConfigAtom(DEFAULT_LAYOUT_VIEW_SIZE.accordionHeaderSizeHeight);
 
   private inited = false;
   init(layoutViewSize: Partial<ILayoutViewSize> = {}) {
@@ -42,63 +75,62 @@ export class LayoutViewSizeConfig implements ILayoutViewSize {
     }
     this.inited = true;
 
-    this.#menubarHeight = layoutViewSize.menubarHeight || DEFAULT_LAYOUT_VIEW_SIZE.menubarHeight;
-    this.#editorTabsHeight = layoutViewSize.editorTabsHeight || DEFAULT_LAYOUT_VIEW_SIZE.editorTabsHeight;
-    this.#bigSurTitleBarHeight = layoutViewSize.bigSurTitleBarHeight || DEFAULT_LAYOUT_VIEW_SIZE.bigSurTitleBarHeight;
-    this.#titleBarHeight = layoutViewSize.titleBarHeight || DEFAULT_LAYOUT_VIEW_SIZE.titleBarHeight;
-    this.#panelTitleBarHeight = layoutViewSize.panelTitleBarHeight || DEFAULT_LAYOUT_VIEW_SIZE.panelTitleBarHeight;
-    this.#statusBarHeight = layoutViewSize.statusBarHeight || DEFAULT_LAYOUT_VIEW_SIZE.statusBarHeight;
-    this.#accordionHeaderSizeHeight =
-      layoutViewSize.accordionHeaderSizeHeight || DEFAULT_LAYOUT_VIEW_SIZE.accordionHeaderSizeHeight;
+    this.#menubarHeight.setValue(layoutViewSize.menubarHeight, ConfigPriority.UserDefined);
+    this.#editorTabsHeight.setValue(layoutViewSize.editorTabsHeight, ConfigPriority.UserDefined);
+    this.#bigSurTitleBarHeight.setValue(layoutViewSize.bigSurTitleBarHeight, ConfigPriority.UserDefined);
+    this.#titleBarHeight.setValue(layoutViewSize.titleBarHeight, ConfigPriority.UserDefined);
+    this.#panelTitleBarHeight.setValue(layoutViewSize.panelTitleBarHeight, ConfigPriority.UserDefined);
+    this.#statusBarHeight.setValue(layoutViewSize.statusBarHeight, ConfigPriority.UserDefined);
+    this.#accordionHeaderSizeHeight.setValue(layoutViewSize.accordionHeaderSizeHeight, ConfigPriority.UserDefined);
   }
 
   get menubarHeight(): number {
-    return this.#menubarHeight;
+    return this.#menubarHeight.getValue();
   }
-  setMenubarHeight(value: number) {
-    this.#menubarHeight = value;
+  setMenubarHeight(value: number, priority?: number) {
+    this.#menubarHeight.setValue(value, priority ?? ConfigPriority.ModuleDefined);
   }
 
   get editorTabsHeight(): number {
-    return this.#editorTabsHeight;
+    return this.#editorTabsHeight.getValue();
   }
-  setEditorTabsHeight(value: number) {
-    this.#editorTabsHeight = value;
+  setEditorTabsHeight(value: number, priority?: number) {
+    this.#editorTabsHeight.setValue(value, priority ?? ConfigPriority.ModuleDefined);
   }
 
   get bigSurTitleBarHeight(): number {
-    return this.#bigSurTitleBarHeight;
+    return this.#bigSurTitleBarHeight.getValue();
   }
-  setBigSurTitleBarHeight(value: number) {
-    this.#bigSurTitleBarHeight = value;
+  setBigSurTitleBarHeight(value: number, priority?: number) {
+    this.#bigSurTitleBarHeight.setValue(value, priority ?? ConfigPriority.ModuleDefined);
   }
 
   get titleBarHeight(): number {
-    return this.#titleBarHeight;
+    return this.#titleBarHeight.getValue();
   }
-  setTitleBarHeight(value: number) {
-    this.#titleBarHeight = value;
+  setTitleBarHeight(value: number, priority?: number) {
+    this.#titleBarHeight.setValue(value, priority ?? ConfigPriority.ModuleDefined);
   }
 
   get panelTitleBarHeight(): number {
-    return this.#panelTitleBarHeight;
+    return this.#panelTitleBarHeight.getValue();
   }
-  setPanelTitleBarHeight(value: number) {
-    this.#panelTitleBarHeight = value;
+  setPanelTitleBarHeight(value: number, priority?: number) {
+    this.#panelTitleBarHeight.setValue(value, priority ?? ConfigPriority.ModuleDefined);
   }
 
   get statusBarHeight(): number {
-    return this.#statusBarHeight;
+    return this.#statusBarHeight.getValue();
   }
-  setStatusBarHeight(value: number) {
-    this.#statusBarHeight = value;
+  setStatusBarHeight(value: number, priority?: number) {
+    this.#statusBarHeight.setValue(value, priority ?? ConfigPriority.ModuleDefined);
   }
 
   get accordionHeaderSizeHeight(): number {
-    return this.#accordionHeaderSizeHeight;
+    return this.#accordionHeaderSizeHeight.getValue();
   }
-  setAccordionHeaderSizeHeight(value: number) {
-    this.#accordionHeaderSizeHeight = value;
+  setAccordionHeaderSizeHeight(value: number, priority?: number) {
+    this.#accordionHeaderSizeHeight.setValue(value, priority ?? ConfigPriority.ModuleDefined);
   }
 
   protected supportNewMacHeaderBar = electronEnv.osRelease ? parseFloat(electronEnv.osRelease) >= 20 : false;

package/src/layout/index.ts

@@ -3,3 +3,4 @@ export * from './layout-hooks';
 export * from './layout.interface';
 export * from './accordion/view-context-key.registry';
 export * from './accordion/tab-bar-toolbar';
+export * from './render';

package/src/layout/render.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactIs from 'react-is';
+
+import { ErrorBoundary } from '../react-providers';
+
+import { View } from './layout.interface';
+
+export const renderView = (view?: View) => (
+    <>
+      {view && ReactIs.isValidElementType(view.component) ? (
+        <ErrorBoundary>{view.component && React.createElement(view.component, view.initialProps)}</ErrorBoundary>
+      ) : null}
+    </>
+  );

package/src/react-hooks/injectable-hooks.tsx

@@ -5,6 +5,8 @@ import { Disposable } from '@opensumi/ide-core-common';
 
 import { ConfigContext } from '../react-providers/config-provider';
 
+import { useMemorizeFn } from './memorize-fn';
+
 import type { EventEmitter } from '@opensumi/events';
 
 function isDisposable(target: any): target is Disposable {
@@ -43,12 +45,15 @@ export function useEventDrivenState<T, Events extends EventEmitter<any>, Event e
   eventName: Event,
   factory: (emitter: any) => T,
 ) {
-  const [state, setState] = useState(factory(emitter));
+  const memorizeFactory = useMemorizeFn(factory);
+  const [state, setState] = useState(memorizeFactory(emitter));
 
   useEffect(() => {
     const listener = (...args: any[]) => {
-      setState(factory(emitter));
+      setState(() => memorizeFactory(emitter));
     };
+    // 绑定事件前先取下值，避免期间事件已 emit
+    listener();
     emitter.on(eventName, listener);
     return () => emitter.off(eventName, listener);
   }, [emitter]);

package/src/react-hooks/memorize-fn.ts

@@ -0,0 +1,7 @@
+import { useCallback, useMemo, useRef } from 'react';
+
+export function useMemorizeFn<T extends (...args: any[]) => any>(fn: T) {
+  const fnRef = useRef<T>(fn);
+  fnRef.current = useMemo(() => fn, [fn]);
+  return useCallback((...args: any) => fnRef.current(...args), []) as T;
+}