@opensumi/ide-main-layout 3.9.1-next-1749181695.0 → 3.9.1-next-1749196667.0

package/src/browser/layout.service.ts

@@ -18,7 +18,7 @@ import {
   WithEventBus,
   slotRendererRegistry,
 } from '@opensumi/ide-core-browser';
-import { Layout, fixLayout } from '@opensumi/ide-core-browser/lib/components';
+import { fixLayout } from '@opensumi/ide-core-browser/lib/components';
 import { LAYOUT_STATE, LayoutState } from '@opensumi/ide-core-browser/lib/layout/layout-state';
 import { ComponentRegistryInfo } from '@opensumi/ide-core-browser/lib/layout/layout.interface';
 import {
@@ -29,13 +29,11 @@ import {
   MenuId,
 } from '@opensumi/ide-core-browser/lib/menu/next';
 import { Deferred, getDebugLogger, isUndefined } from '@opensumi/ide-core-common';
-import { transaction } from '@opensumi/ide-monaco/lib/common/observable';
 import { ThemeChangedEvent } from '@opensumi/ide-theme';
 
 import {
-  DROP_EXTEND_VIEW_CONTAINER,
-  DROP_PANEL_CONTAINER,
-  DROP_VIEW_CONTAINER,
+  DROP_BOTTOM_CONTAINER,
+  DROP_RIGHT_CONTAINER,
   IMainLayoutService,
   MainLayoutContribution,
   SUPPORT_ACCORDION_LOCATION,
@@ -47,21 +45,19 @@ import { TabbarService } from './tabbar/tabbar.service';
 import { TabBarHandler } from './tabbar-handler';
 
 const defaultLayoutState = {
-  [SlotLocation.view]: {
+  [SlotLocation.left]: {
     currentId: undefined,
     size: undefined,
   },
-  [SlotLocation.extendView]: {
+  [SlotLocation.right]: {
     // 依照下面的恢复逻辑，这里设置为 `''` 时，就不会恢复右侧的 TabBar 的状态（即选中相应的 viewContainer）
     currentId: '',
     size: undefined,
   },
-  [SlotLocation.panel]: {
+  [SlotLocation.bottom]: {
     currentId: undefined,
     size: undefined,
   },
-  // 存储 Container 的移动信息：containerId -> location
-  containerLocations: {},
 };
 
 @Injectable()
@@ -115,9 +111,6 @@ export class LayoutService extends WithEventBus implements IMainLayoutService {
     };
   } = {};
 
-  // 记录正在恢复状态的 location，防止恢复过程中存储中间状态
-  private isRestoring = new Set<string>();
-
   private customViews = new Map<string, View>();
 
   private debug = getDebugLogger();
@@ -157,16 +150,10 @@ export class LayoutService extends WithEventBus implements IMainLayoutService {
   }
 
   storeState(service: TabbarService, currentId?: string) {
-    // 如果正在恢复中，跳过存储，避免存储中间状态
-    if (this.isRestoring.has(service.location)) {
-      return;
-    }
-
     this.state[service.location] = {
       currentId,
       size: service.prevSize,
     };
-
     this.layoutState.setState(LAYOUT_STATE.MAIN, this.state);
   }
 
@@ -187,89 +174,63 @@ export class LayoutService extends WithEventBus implements IMainLayoutService {
 
   restoreTabbarService = async (service: TabbarService) => {
     this.state = fixLayout(this.layoutState.getState(LAYOUT_STATE.MAIN, defaultLayoutState));
+
     const { currentId, size } = this.state[service.location] || {};
     service.prevSize = size;
-
-    // 根据存储的容器位置信息恢复容器位置(drag & drop 移动过的)
-    if (this.state.containerLocations) {
-      for (const [containerId, targetLocation] of Object.entries(this.state.containerLocations)) {
-        if (targetLocation === service.location && !this.isDropContainer(containerId)) {
-          // 检查容器是否在其他 tabbar 中，如果是则移动到当前 tabbar
-          const expectTabbar = this.findTabbarServiceByContainerId(containerId);
-          if (expectTabbar && expectTabbar.location !== service.location) {
-            this.moveContainerTo(containerId, service.location);
+    let defaultContainer = service.visibleContainers[0] && service.visibleContainers[0].options!.containerId;
+    const defaultPanels = this.appConfig.defaultPanels;
+    const restorePanel = defaultPanels && defaultPanels[service.location];
+    if (defaultPanels && restorePanel !== undefined) {
+      if (restorePanel) {
+        if (service.containersMap.has(restorePanel)) {
+          defaultContainer = restorePanel;
+        } else {
+          const componentInfo = this.componentRegistry.getComponentRegistryInfo(restorePanel);
+          if (
+            componentInfo &&
+            this.appConfig.layoutConfig[service.location]?.modules &&
+            ~this.appConfig.layoutConfig[service.location].modules.indexOf(restorePanel)
+          ) {
+            defaultContainer = componentInfo.options!.containerId;
           } else {
-            // 清理无用的状态
-            delete this.state.containerLocations[containerId];
-            this.layoutState.setState(LAYOUT_STATE.MAIN, this.state);
+            this.logger.warn(`[defaultPanels] No \`${restorePanel}\` view found!`);
           }
         }
+      } else {
+        defaultContainer = '';
       }
     }
-
-    const defaultContainer = this.getDefaultContainer(service);
-    this.restoreContainerId(service, currentId, defaultContainer);
-  };
-
-  private getDefaultContainer(service: TabbarService): string | undefined {
-    const defaultPanels = this.appConfig.defaultPanels;
-    const defaultPanel = defaultPanels && defaultPanels[service.location];
-
-    // 如果配置了默认面板,则使用配置的面板
-    if (defaultPanels && defaultPanel !== undefined) {
-      if (!defaultPanel) {
-        return '';
-      }
-      if (service.containersMap.has(defaultPanel)) {
-        return defaultPanel;
-      }
-
-      const componentInfo = this.componentRegistry.getComponentRegistryInfo(defaultPanel);
-      const isValidModule =
-        componentInfo && this.appConfig.layoutConfig[service.location]?.modules?.includes(defaultPanel);
-
-      if (isValidModule) {
-        return componentInfo.options!.containerId;
-      }
-
-      this.logger.warn(`[defaultPanels] No \`${defaultPanel}\` view found!`);
-    }
-
-    // 获取第一个可见容器作为默认值
-    return service.visibleContainers[0]?.options?.containerId;
-  }
-
-  private restoreContainerId(
-    service: TabbarService,
-    currentId: string | undefined,
-    defaultContainer: string | undefined,
-  ) {
+    /**
+     * ContainerId 存在三种值类型，对应的处理模式如下：
+     * 1. undefined: 采用首个注册的容器作为当前 containerId
+     * 2. string: 非 drop container 直接使用该 containerId 作为当前 containerId
+     * 3. '': 直接清空当前 containerId，不展开相应的 viewContainer
+     */
     if (isUndefined(currentId)) {
-      // 未指定 currentId 时,使用默认容器或第一个注册的容器
       if (isUndefined(defaultContainer)) {
+        // 默认采用首个注册的容器作为当前 containerId
         service.updateNextContainerId();
       } else {
         service.updateCurrentContainerId(defaultContainer);
       }
-      return;
-    }
-
-    if (currentId && !this.isDropContainer(currentId)) {
+    } else if (currentId && !this.isDropContainer(currentId)) {
       if (service.containersMap.has(currentId)) {
         service.updateCurrentContainerId(currentId);
-        return;
+      } else {
+        // 如果在别的 tabbar 中存在该 containerId，则将其移动到当前 tabbar
+        if (this.findTabbarServiceByContainerId(currentId)) {
+          this.moveContainerTo(currentId, service.location);
+          service.updateCurrentContainerId(currentId);
+        } else {
+          service.updateCurrentContainerId(defaultContainer);
+          // 等待后续新容器注册时，更新当前的 containerId
+          service.updateNextContainerId(currentId);
+        }
       }
-
-      // 如果当前 containerId 不存在，则使用默认容器
-      service.updateCurrentContainerId(defaultContainer || '');
-      service.updateNextContainerId(currentId);
-      return;
-    }
-
-    if (currentId === '' || this.isDropContainer(currentId)) {
+    } else if (currentId === '' || this.isDropContainer(currentId)) {
       service.updateCurrentContainerId('');
     }
-  }
+  };
 
   findTabbarServiceByContainerId(containerId: string): TabbarService | undefined {
     let tabbarService: undefined | TabbarService;
@@ -295,7 +256,7 @@ export class LayoutService extends WithEventBus implements IMainLayoutService {
       this.logger.error(`cannot find container: ${containerId}`);
       return;
     }
-    if (container.options?.draggable === false) {
+    if (!container.options?.draggable) {
       this.logger.warn(`container: ${containerId} is not draggable`);
       return;
     }
@@ -310,59 +271,33 @@ export class LayoutService extends WithEventBus implements IMainLayoutService {
     toTabbar.dynamicAddContainer(containerId, container);
     const newHandler = this.injector.get(TabBarHandler, [containerId, this.getTabbarService(toTabbar.location)]);
     this.handleMap.set(containerId, newHandler!);
-
-    // 更新容器位置信息
-    if (!this.state.containerLocations) {
-      this.state.containerLocations = {};
-    }
-    this.state.containerLocations[containerId] = to;
-    // this.layoutState.setState(LAYOUT_STATE.MAIN, this.state);
   }
 
   showDropAreaForContainer(containerId: string): void {
     const tabbarService = this.findTabbarServiceByContainerId(containerId);
-    const panelService = this.tabbarServices.get(SlotLocation.panel);
-    const extendViewService = this.tabbarServices.get(SlotLocation.extendView);
-    const viewService = this.tabbarServices.get(SlotLocation.view);
+    const bottomService = this.tabbarServices.get('bottom');
+    const rightService = this.tabbarServices.get('right');
     if (!tabbarService) {
       this.logger.error(`cannot find container: ${containerId}`);
       return;
     }
-    const otherServices = {
-      [SlotLocation.extendView]: [panelService, viewService],
-      [SlotLocation.panel]: [extendViewService, viewService],
-      [SlotLocation.view]: [panelService, extendViewService],
-    };
-
-    const dropContainers = {
-      [SlotLocation.panel]: DROP_PANEL_CONTAINER,
-      [SlotLocation.extendView]: DROP_EXTEND_VIEW_CONTAINER,
-      [SlotLocation.view]: DROP_VIEW_CONTAINER,
-    };
-
-    transaction((tx) => {
-      otherServices[tabbarService?.location]?.forEach((service) => {
-        service?.updateCurrentContainerId(dropContainers[service?.location], tx);
-      });
-    });
+    if (tabbarService?.location === 'right') {
+      bottomService?.updateCurrentContainerId(DROP_BOTTOM_CONTAINER);
+    }
+    if (tabbarService?.location === 'bottom') {
+      rightService?.updateCurrentContainerId(DROP_RIGHT_CONTAINER);
+    }
   }
 
   hideDropArea(): void {
-    const panelService = this.tabbarServices.get(SlotLocation.panel);
-    const extendViewService = this.tabbarServices.get(SlotLocation.extendView);
-    const viewService = this.tabbarServices.get(SlotLocation.view);
-
-    transaction((tx) => {
-      if (panelService?.currentContainerId.get() === DROP_PANEL_CONTAINER) {
-        panelService.updateCurrentContainerId(panelService.previousContainerId || '', tx);
-      }
-      if (extendViewService?.currentContainerId.get() === DROP_EXTEND_VIEW_CONTAINER) {
-        extendViewService.updateCurrentContainerId(extendViewService.previousContainerId || '', tx);
-      }
-      if (viewService?.currentContainerId.get() === DROP_VIEW_CONTAINER) {
-        viewService.updateCurrentContainerId(viewService.previousContainerId || '', tx);
-      }
-    });
+    const bottomService = this.tabbarServices.get('bottom');
+    const rightService = this.tabbarServices.get('right');
+    if (bottomService?.currentContainerId.get() === DROP_BOTTOM_CONTAINER) {
+      bottomService.updateCurrentContainerId(bottomService.previousContainerId || '');
+    }
+    if (rightService?.currentContainerId.get() === DROP_RIGHT_CONTAINER) {
+      rightService.updateCurrentContainerId(rightService.previousContainerId || '');
+    }
   }
 
   isVisible(location: string) {
@@ -401,7 +336,7 @@ export class LayoutService extends WithEventBus implements IMainLayoutService {
   }
 
   private isDropContainer(containerId: string): boolean {
-    return [DROP_PANEL_CONTAINER, DROP_EXTEND_VIEW_CONTAINER, DROP_VIEW_CONTAINER].includes(containerId);
+    return [DROP_BOTTOM_CONTAINER, DROP_RIGHT_CONTAINER].includes(containerId);
   }
 
   private findNonDropContainerId(tabbarService: TabbarService): string {
@@ -440,24 +375,14 @@ export class LayoutService extends WithEventBus implements IMainLayoutService {
         }),
       );
       service.viewReady.promise
-        .then(() => {
-          // 标记开始恢复，防止恢复过程中存储中间状态
-          this.isRestoring.add(service.location);
-          return service.restoreState();
-        })
+        .then(() => service.restoreState())
         .then(() => this.restoreTabbarService(service))
-        .then(() => {
-          // 恢复完成，清除标记
-          this.isRestoring.delete(service.location);
-        })
         .catch((err) => {
-          // 出错时也要清除标记
-          this.isRestoring.delete(service.location);
           this.logger.error(`[TabbarService:${location}] restore state error`, err);
         });
       const debouncedStoreState = debounce(() => this.storeState(service, service.currentContainerId.get()), 100);
       service.addDispose(service.onSizeChange(debouncedStoreState));
-      if (location === SlotLocation.panel) {
+      if (location === SlotLocation.bottom) {
         // use this getter's side effect to set bottomExpanded contextKey
         const debouncedUpdate = debounce(() => void this.bottomExpanded, 100);
         service.addDispose(service.onSizeChange(() => debouncedUpdate));
@@ -538,7 +463,6 @@ export class LayoutService extends WithEventBus implements IMainLayoutService {
     if (Fc) {
       this.debug.warn('collectTabbarComponent api warning: Please move react component into options.component!');
     }
-    side = this.mapSideToLocation(side);
     if (options.hideIfEmpty && !views.length && !options.component) {
       this.holdTabbarComponent.set(options.containerId, { views, options, side });
       if (this.tabbarUpdateSet.has(options.containerId)) {
@@ -571,19 +495,6 @@ export class LayoutService extends WithEventBus implements IMainLayoutService {
     return options.containerId;
   }
 
-  private mapSideToLocation(side: string): SlotLocation {
-    switch (side) {
-      case 'left':
-        return SlotLocation.view;
-      case 'right':
-        return SlotLocation.extendView;
-      case 'bottom':
-        return SlotLocation.panel;
-      default:
-        return side;
-    }
-  }
-
   getViewAccordionService(viewId: string) {
     const containerId = this.viewToContainerMap.get(viewId);
     if (!containerId) {
@@ -729,7 +640,7 @@ export class LayoutService extends WithEventBus implements IMainLayoutService {
 
   // TODO 这样很耦合，不能做到tab renderer自由拆分
   expandBottom(expand: boolean): void {
-    const tabbarService = this.getTabbarService(SlotLocation.panel);
+    const tabbarService = this.getTabbarService(SlotLocation.bottom);
     if (!tabbarService.currentContainerId.get()) {
       tabbarService.updateCurrentContainerId(
         tabbarService.currentContainerId.get() ||
@@ -742,7 +653,7 @@ export class LayoutService extends WithEventBus implements IMainLayoutService {
   }
 
   get bottomExpanded(): boolean {
-    const tabbarService = this.getTabbarService(SlotLocation.panel);
+    const tabbarService = this.getTabbarService(SlotLocation.bottom);
     this.contextKeyService.createKey('bottomFullExpanded', tabbarService.isExpanded);
     return tabbarService.isExpanded;
   }