@opensumi/ide-main-layout 3.7.1 → 3.7.2-next-1739859371.0

package/src/browser/layout.service.ts

@@ -32,6 +32,8 @@ import { Deferred, getDebugLogger, isUndefined } from '@opensumi/ide-core-common
 import { ThemeChangedEvent } from '@opensumi/ide-theme';
 
 import {
+  DROP_BOTTOM_CONTAINER,
+  DROP_RIGHT_CONTAINER,
   IMainLayoutService,
   MainLayoutContribution,
   SUPPORT_ACCORDION_LOCATION,
@@ -201,7 +203,7 @@ export class LayoutService extends WithEventBus implements IMainLayoutService {
     /**
      * ContainerId 存在三种值类型，对应的处理模式如下：
      * 1. undefined: 采用首个注册的容器作为当前 containerId
-     * 2. string: 直接使用该 containerId 作为当前 containerId
+     * 2. string: 非 drop container 直接使用该 containerId 作为当前 containerId
      * 3. '': 直接清空当前 containerId，不展开相应的 viewContainer
      */
     if (isUndefined(currentId)) {
@@ -211,19 +213,93 @@ export class LayoutService extends WithEventBus implements IMainLayoutService {
       } else {
         service.updateCurrentContainerId(defaultContainer);
       }
-    } else if (currentId) {
+    } else if (currentId && !this.isDropContainer(currentId)) {
       if (service.containersMap.has(currentId)) {
         service.updateCurrentContainerId(currentId);
       } else {
-        service.updateCurrentContainerId(defaultContainer);
-        // 等待后续新容器注册时，更新当前的 containerId
-        service.updateNextContainerId(currentId);
+        // 如果在别的 tabbar 中存在该 containerId，则将其移动到当前 tabbar
+        if (this.findTabbarServiceByContainerId(currentId)) {
+          this.moveContainerTo(currentId, service.location);
+          service.updateCurrentContainerId(currentId);
+        } else {
+          service.updateCurrentContainerId(defaultContainer);
+          // 等待后续新容器注册时，更新当前的 containerId
+          service.updateNextContainerId(currentId);
+        }
       }
-    } else if (currentId === '') {
+    } else if (currentId === '' || this.isDropContainer(currentId)) {
       service.updateCurrentContainerId('');
     }
   };
 
+  findTabbarServiceByContainerId(containerId: string): TabbarService | undefined {
+    let tabbarService: undefined | TabbarService;
+    for (const value of this.tabbarServices.values()) {
+      if (value.containersMap.has(containerId)) {
+        tabbarService = value;
+        break;
+      }
+    }
+
+    return tabbarService;
+  }
+
+  moveContainerTo(containerId: string, to: string): void {
+    const fromTabbar = this.findTabbarServiceByContainerId(containerId);
+
+    if (!fromTabbar) {
+      this.logger.error(`cannot find container: ${containerId}`);
+      return;
+    }
+    const container = fromTabbar.getContainer(containerId);
+    if (!container) {
+      this.logger.error(`cannot find container: ${containerId}`);
+      return;
+    }
+    if (!container.options?.draggable) {
+      this.logger.warn(`container: ${containerId} is not draggable`);
+      return;
+    }
+
+    const toTabbar = this.getTabbarService(to);
+
+    fromTabbar.removeContainer(containerId);
+
+    if (!fromTabbar.visibleContainers.length || fromTabbar.currentContainerId.get() === containerId) {
+      this.toggleSlot(fromTabbar.location, false);
+    }
+    toTabbar.dynamicAddContainer(containerId, container);
+    const newHandler = this.injector.get(TabBarHandler, [containerId, this.getTabbarService(toTabbar.location)]);
+    this.handleMap.set(containerId, newHandler!);
+  }
+
+  showDropAreaForContainer(containerId: string): void {
+    const tabbarService = this.findTabbarServiceByContainerId(containerId);
+    const bottomService = this.tabbarServices.get('bottom');
+    const rightService = this.tabbarServices.get('right');
+    if (!tabbarService) {
+      this.logger.error(`cannot find container: ${containerId}`);
+      return;
+    }
+    if (tabbarService?.location === 'right') {
+      bottomService?.updateCurrentContainerId(DROP_BOTTOM_CONTAINER);
+    }
+    if (tabbarService?.location === 'bottom') {
+      rightService?.updateCurrentContainerId(DROP_RIGHT_CONTAINER);
+    }
+  }
+
+  hideDropArea(): void {
+    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) {
     const tabbarService = this.getTabbarService(location);
     return !!tabbarService.currentContainerId.get();
@@ -245,18 +321,13 @@ export class LayoutService extends WithEventBus implements IMainLayoutService {
       return;
     }
     if (show === true) {
-      tabbarService.updateCurrentContainerId(
-        tabbarService.currentContainerId.get() ||
-          tabbarService.previousContainerId ||
-          tabbarService.containersMap.keys().next().value!,
-      );
+      // 不允许通过该api展示drop面板
+      tabbarService.updateCurrentContainerId(this.findNonDropContainerId(tabbarService));
     } else if (show === false) {
       tabbarService.updateCurrentContainerId('');
     } else {
       tabbarService.updateCurrentContainerId(
-        tabbarService.currentContainerId.get()
-          ? ''
-          : tabbarService.previousContainerId || tabbarService.containersMap.keys().next().value!,
+        tabbarService.currentContainerId.get() ? '' : this.findNonDropContainerId(tabbarService),
       );
     }
     if (tabbarService.currentContainerId.get() && size) {
@@ -264,6 +335,28 @@ export class LayoutService extends WithEventBus implements IMainLayoutService {
     }
   }
 
+  private isDropContainer(containerId: string): boolean {
+    return [DROP_BOTTOM_CONTAINER, DROP_RIGHT_CONTAINER].includes(containerId);
+  }
+
+  private findNonDropContainerId(tabbarService: TabbarService): string {
+    const currentContainerId = tabbarService.currentContainerId.get();
+    if (currentContainerId && !this.isDropContainer(currentContainerId)) {
+      return currentContainerId;
+    }
+    if (tabbarService.previousContainerId && !this.isDropContainer(tabbarService.previousContainerId)) {
+      return tabbarService.previousContainerId;
+    }
+
+    for (const key of tabbarService.containersMap.keys()) {
+      if (!this.isDropContainer(key)) {
+        return key;
+      }
+    }
+
+    return '';
+  }
+
   getTabbarService(location: string) {
     const service = this.tabbarServices.get(location) || this.injector.get(TabbarService, [location]);
     if (!this.tabbarServices.get(location)) {

package/src/browser/main-layout.contribution.ts

@@ -41,8 +41,9 @@ import {
 import { ContributionProvider, Domain, IEventBus, WithEventBus, localize } from '@opensumi/ide-core-common';
 import { Command, CommandContribution, CommandRegistry, CommandService } from '@opensumi/ide-core-common/lib/command';
 
-import { IMainLayoutService } from '../common';
+import { DROP_BOTTOM_CONTAINER, DROP_RIGHT_CONTAINER, IMainLayoutService } from '../common';
 
+import { BottomDropArea, RightDropArea } from './drop-area/drop-area';
 import { ViewQuickOpenHandler } from './quick-open-view';
 import { BottomTabRenderer, LeftTabRenderer, RightTabRenderer } from './tabbar/renderer.view';
 
@@ -117,7 +118,14 @@ export const RETRACT_BOTTOM_PANEL: Command = {
   iconClass: getIcon('shrink'),
 };
 
-@Domain(CommandContribution, ClientAppContribution, SlotRendererContribution, MenuContribution, QuickOpenContribution)
+@Domain(
+  CommandContribution,
+  ClientAppContribution,
+  SlotRendererContribution,
+  MenuContribution,
+  QuickOpenContribution,
+  ComponentContribution,
+)
 export class MainLayoutModuleContribution
   extends WithEventBus
   implements
@@ -125,6 +133,7 @@ export class MainLayoutModuleContribution
     ClientAppContribution,
     SlotRendererContribution,
     MenuContribution,
+    ComponentContribution,
     QuickOpenContribution
 {
   @Autowired(IMainLayoutService)
@@ -186,6 +195,19 @@ export class MainLayoutModuleContribution
     }
   }
 
+  registerComponent(registry: ComponentRegistry): void {
+    registry.register(DROP_RIGHT_CONTAINER, [], {
+      component: RightDropArea,
+      hideTab: true,
+      containerId: DROP_RIGHT_CONTAINER,
+    });
+    registry.register(DROP_BOTTOM_CONTAINER, [], {
+      component: BottomDropArea,
+      hideTab: true,
+      containerId: DROP_BOTTOM_CONTAINER,
+    });
+  }
+
   async onStart() {
     this.registerSideToggleKey();
   }

package/src/browser/tabbar/bar.view.tsx

@@ -125,11 +125,15 @@ export const TabbarViewBase: React.FC<ITabbarViewProps> = (props) => {
   });
 
   const renderContainers = React.useCallback(
-    (component: ComponentRegistryInfo, tabbarService: TabbarService, currentContainerId?: string) => {
+    (component: ComponentRegistryInfo, tabbarService: TabbarService, currentContainerId?: string, side?: string) => {
       const containerId = component.options?.containerId;
       if (!containerId) {
         return null;
       }
+      if (side && component.options?.hideLocationTab?.includes(side)) {
+        return null;
+      }
+
       tabbarService.updateTabInMoreKey(containerId, false);
       let ref: HTMLLIElement | null;
       return (
@@ -168,6 +172,9 @@ export const TabbarViewBase: React.FC<ITabbarViewProps> = (props) => {
             }
             tabbarService.handleDrop(e, containerId);
           }}
+          onDragEnd={(e) => {
+            tabbarService.handleDragEnd(e);
+          }}
           key={containerId}
           id={containerId}
           onContextMenu={(e) => tabbarService.handleContextMenu(e, containerId)}
@@ -186,7 +193,7 @@ export const TabbarViewBase: React.FC<ITabbarViewProps> = (props) => {
   return (
     <div className={cls([styles_tab_bar, className])}>
       <div className={styles_bar_content} style={{ flexDirection: Layout.getTabbarDirection(direction) }}>
-        {visibleContainers.map((component) => renderContainers(component, tabbarService, currentContainerId))}
+        {visibleContainers.map((component) => renderContainers(component, tabbarService, currentContainerId, side))}
         {renderOtherVisibleContainers({ props, renderContainers })}
         {hideContainers.length ? (
           <li

package/src/browser/tabbar/panel.view.tsx

@@ -100,12 +100,13 @@ export const ContainerView: React.FC<{
   renderContainerWrap?: React.FC<{
     children: React.ReactNode;
   }>;
+  customTitleBar?: React.ReactNode;
   className?: string;
-}> = ({ component, titleMenu, side, renderContainerWrap, className }) => {
+}> = ({ component, titleMenu, side, renderContainerWrap, className, customTitleBar }) => {
   const ref = React.useRef<HTMLElement | null>();
   const containerRef = React.useRef<HTMLDivElement | null>(null);
   const appConfig = useInjectable<AppConfig>(AppConfig);
-  const { title, titleComponent, component: CustomComponent, containerId } = component.options || {};
+  const { title, titleComponent, component: CustomComponent, containerId, draggable } = component.options || {};
   const injector: Injector = useInjectable(INJECTOR_TOKEN);
   const layoutViewSize = useInjectable<LayoutViewSizeConfig>(LayoutViewSizeConfig);
 
@@ -140,11 +141,15 @@ export const ContainerView: React.FC<{
 
   return (
     <div ref={containerRef} className={cls(styles.view_container, className)}>
+      {!!customTitleBar && customTitleBar}
       {!CustomComponent && (
         <div onContextMenu={handleContextMenu} className={styles.panel_titlebar}>
           {!title ? null : (
             <TitleBar
+              containerId={containerId}
+              side={side}
               title={title}
+              draggable={draggable}
               height={layoutViewSize.panelTitleBarHeight}
               menubar={<InlineActionBar menus={titleMenu} />}
             />

package/src/browser/tabbar/tabbar.service.ts

@@ -664,6 +664,7 @@ export class TabbarService extends WithEventBus {
   // drag & drop
   handleDragStart(e: React.DragEvent, containerId: string) {
     e.dataTransfer.setData('containerId', containerId);
+    this.layoutService.showDropAreaForContainer(containerId);
   }
 
   handleDrop(e: React.DragEvent, target: string) {
@@ -677,6 +678,10 @@ export class TabbarService extends WithEventBus {
     }
   }
 
+  handleDragEnd(e: React.DragEvent) {
+    this.layoutService.hideDropArea();
+  }
+
   restoreState() {
     this.storedState = this.layoutState.getState(LAYOUT_STATE.getTabbarSpace(this.location), {});
     for (const containerId of this.state.keys()) {
@@ -691,6 +696,19 @@ export class TabbarService extends WithEventBus {
     });
   }
 
+  removeContainer(containerId: string) {
+    const disposable = this.disposableMap.get(containerId);
+    disposable?.dispose();
+    this.updateCurrentContainerId('');
+    this.doChangeViewEmitter.fire();
+  }
+
+  dynamicAddContainer(containerId: string, options: ComponentRegistryInfo) {
+    this.registerContainer(containerId, options);
+    this.updateCurrentContainerId(containerId);
+    this.doChangeViewEmitter.fire();
+  }
+
   protected doInsertTab(containers: ComponentRegistryInfo[], sourceIndex: number, targetIndex: number) {
     const targetPriority = this.getContainerState(containers[targetIndex].options!.containerId).priority;
     const changePriority = (sourceIndex: number, targetIndex: number) => {

package/src/common/main-layout.definition.ts

@@ -86,6 +86,10 @@ export interface IMainLayoutService {
   getExtraTopMenu(): IContextMenu;
   getExtraMenu(): IContextMenu;
   getAllAccordionService(): Map<string, AccordionService>;
+  moveContainerTo(containerId: string, to: string): void;
+  showDropAreaForContainer(containerId: string): void;
+  hideDropArea(): void;
+  findTabbarServiceByContainerId(containerId: string): TabbarService | undefined;
 }
 
 export const MainLayoutContribution = Symbol('MainLayoutContribution');
@@ -128,3 +132,6 @@ export class ViewCollapseChangedEvent extends BasicEvent<{
 }> {}
 
 export const SUPPORT_ACCORDION_LOCATION = new Set([SlotLocation.left, SlotLocation.right]);
+
+export const DROP_BOTTOM_CONTAINER = 'drop-bottom';
+export const DROP_RIGHT_CONTAINER = 'drop-right';