@opensumi/ide-main-layout 3.9.1-next-1748403761.0 → 3.9.1-next-1748425167.0

package/src/browser/accordion/accordion.service.ts

@@ -21,7 +21,7 @@ import {
   isDefined,
   localize,
 } from '@opensumi/ide-core-browser';
-import { RESIZE_LOCK } from '@opensumi/ide-core-browser/lib/components';
+import { Layout, RESIZE_LOCK } from '@opensumi/ide-core-browser/lib/components';
 import {
   ISplitPanelService,
   SplitPanelManager,
@@ -85,9 +85,6 @@ export class AccordionService extends WithEventBus {
   @Autowired()
   private viewContextKeyRegistry: ViewContextKeyRegistry;
 
-  @Autowired(IMainLayoutService)
-  private readonly mainLayoutService: IMainLayoutService;
-
   @Autowired(IContextKeyService)
   private contextKeyService: IContextKeyService;
 
@@ -152,6 +149,15 @@ export class AccordionService extends WithEventBus {
   private afterDisposeViewEmitter = this.registerDispose(new Emitter<string>());
   public onAfterDisposeViewEvent = this.afterDisposeViewEmitter.event;
 
+  private _alignment: Layout.alignment = 'vertical';
+
+  public set alignment(alignment: Layout.alignment) {
+    if (this._alignment !== alignment) {
+      this._alignment = alignment;
+      this.doUpdateResize();
+    }
+  }
+
   constructor(public containerId: string, private noRestore?: boolean) {
     super();
     this.addDispose(recomputeInitiallyAndOnChange(this.visibleViews));
@@ -611,39 +617,24 @@ export class AccordionService extends WithEventBus {
     const viewState = this.getViewState(viewId);
     this.updateViewState(viewId, { ...viewState, collapsed });
 
-    const container = this.mainLayoutService.getContainer(this.containerId)!;
-    if (container?.options?.alignment !== 'horizontal') {
-      let sizeIncrement: number;
-      if (collapsed) {
-        sizeIncrement = this.setSize(index, 0, false, noAnimation);
-      } else {
-        // 仅有一个视图展开时独占
-        sizeIncrement = this.setSize(
-          index,
-          this.expandedViews.length === 1 ? this.getAvailableSize() : viewState.size || this.minSize,
-          false,
-          noAnimation,
-        );
-      }
-      // 下方视图被影响的情况下，上方视图不会同时变化，该情况会在sizeIncrement=0上体现
-      // 从视图下方最后一个展开的视图起依次减去对应的高度
-      for (let i = this.visibleViews.get().length - 1; i > index; i--) {
-        if (this.getViewState(this.visibleViews.get()[i].id).collapsed !== true) {
-          sizeIncrement = this.setSize(i, sizeIncrement, true, noAnimation);
-        } else {
-          this.setSize(i, 0, false, noAnimation);
-        }
-      }
-      // 找到视图上方首个展开的视图减去对应的高度
-      for (let i = index - 1; i >= 0; i--) {
-        if ((this.state[this.visibleViews.get()[i].id] || {}).collapsed !== true) {
-          sizeIncrement = this.setSize(i, sizeIncrement, true, noAnimation);
-        } else {
-          this.setSize(i, 0, false, noAnimation);
-        }
-      }
+    const isHorizontal = this._alignment === 'horizontal';
+
+    // 统一的尺寸计算和设置逻辑
+    let sizeIncrement: number;
+    if (collapsed) {
+      sizeIncrement = this.setSizeByAlignment(index, 0, false, noAnimation, isHorizontal);
+    } else {
+      // 仅有一个视图展开时独占
+      const targetSize =
+        this.expandedViews.length === 1
+          ? this.getAvailableSizeByAlignment(isHorizontal)
+          : viewState.size || this.minSize;
+      sizeIncrement = this.setSizeByAlignment(index, targetSize, false, noAnimation, isHorizontal);
     }
 
+    // 统一的相邻视图调整逻辑
+    this.adjustAdjacentViews(index, sizeIncrement, noAnimation, isHorizontal);
+
     this.eventBus.fire(
       new ViewCollapseChangedEvent({
         viewId,
@@ -652,6 +643,49 @@ export class AccordionService extends WithEventBus {
     );
   }
 
+  private setSizeByAlignment(
+    index: number,
+    targetSize: number,
+    isIncrement?: boolean,
+    noAnimation?: boolean,
+    isHorizontal?: boolean,
+  ): number {
+    return isHorizontal
+      ? this.setSizeHorizontal(index, targetSize, isIncrement, noAnimation)
+      : this.setSize(index, targetSize, isIncrement, noAnimation);
+  }
+
+  private getAvailableSizeByAlignment(isHorizontal: boolean): number {
+    return isHorizontal ? this.getAvailableSizeHorizontal() : this.getAvailableSize();
+  }
+
+  private adjustAdjacentViews(
+    currentIndex: number,
+    sizeIncrement: number,
+    noAnimation?: boolean,
+    isHorizontal?: boolean,
+  ) {
+    const visibleViews = this.visibleViews.get();
+
+    // 处理当前视图后方的视图（右侧或下方）
+    for (let i = visibleViews.length - 1; i > currentIndex; i--) {
+      if (this.getViewState(visibleViews[i].id).collapsed !== true) {
+        sizeIncrement = this.setSizeByAlignment(i, sizeIncrement, true, noAnimation, isHorizontal);
+      } else {
+        this.setSizeByAlignment(i, 0, false, noAnimation, isHorizontal);
+      }
+    }
+
+    // 处理当前视图前方的视图（左侧或上方）
+    for (let i = currentIndex - 1; i >= 0; i--) {
+      if ((this.state[visibleViews[i].id] || {}).collapsed !== true) {
+        sizeIncrement = this.setSizeByAlignment(i, sizeIncrement, true, noAnimation, isHorizontal);
+      } else {
+        this.setSizeByAlignment(i, 0, false, noAnimation, isHorizontal);
+      }
+    }
+  }
+
   protected setSize(index: number, targetSize: number, isIncrement?: boolean, noAnimation?: boolean): number {
     const view = this.visibleViews.get()[index];
     const fullHeight = this.splitPanelService.rootNode?.clientHeight;
@@ -725,6 +759,89 @@ export class AccordionService extends WithEventBus {
     return fullHeight ? fullHeight - (this.visibleViews.get().length - 1) * this.headerSize : 0;
   }
 
+  protected setSizeHorizontal(index: number, targetSize: number, isIncrement?: boolean, noAnimation?: boolean): number {
+    const view = this.visibleViews.get()[index];
+    const fullWidth = this.splitPanelService.rootNode?.clientWidth;
+    const panel = this.splitPanelService.panels[index];
+
+    if (!panel) {
+      return 0;
+    }
+
+    if (!noAnimation) {
+      panel.classList.add('resize-ease-horizontal');
+    }
+
+    if (!targetSize && !isIncrement) {
+      targetSize = this.headerSize;
+      panel.classList.add(RESIZE_LOCK);
+    } else {
+      panel.classList.remove(RESIZE_LOCK);
+    }
+
+    // clientWidth会被上次展开的元素挤掉
+    const prevSize = panel.clientWidth;
+    const viewState = this.getViewState(view.id);
+    let calcTargetSize: number = targetSize;
+
+    if (isIncrement) {
+      calcTargetSize = Math.max(prevSize - targetSize, this.minSize);
+    }
+
+    if (index === this.expandedViews.length - 1 && isDefined(fullWidth)) {
+      // 最后一个视图需要兼容最大宽度超出总视图宽度及最大宽度不足总视图宽度的情况
+      if (calcTargetSize + index * this.minSize > fullWidth) {
+        calcTargetSize -= calcTargetSize + index * this.minSize - fullWidth;
+      } else {
+        const restSize = this.getPanelFullWidthHorizontal(view.id);
+        if (calcTargetSize + restSize < fullWidth) {
+          calcTargetSize += fullWidth - (calcTargetSize + restSize);
+        }
+      }
+    }
+
+    if (this.rendered) {
+      let toSaveSize: number;
+      if (targetSize === this.headerSize) {
+        // 当前视图即将折叠且不是唯一展开的视图时，存储当前宽度
+        toSaveSize = prevSize;
+      } else {
+        toSaveSize = calcTargetSize;
+      }
+      if (toSaveSize !== this.headerSize) {
+        // 视图折叠宽度不做存储
+        viewState.size = toSaveSize;
+      }
+    }
+
+    this.storeState();
+    viewState.nextSize = calcTargetSize;
+
+    if (!noAnimation) {
+      setTimeout(() => {
+        // 动画 0.1s，保证结束后移除
+        panel.classList.remove('resize-ease-horizontal');
+      }, 200);
+    }
+
+    return isIncrement ? calcTargetSize - (prevSize - targetSize) : targetSize - prevSize;
+  }
+
+  protected getAvailableSizeHorizontal() {
+    const fullWidth = this.splitPanelService.rootNode?.clientWidth;
+    return fullWidth ? fullWidth - (this.visibleViews.get().length - 1) * this.headerSize : 0;
+  }
+
+  private getPanelFullWidthHorizontal(ignoreViewId?: string) {
+    return Object.keys(this.state)
+      .filter((viewId) => this.views.find((item) => item.id === viewId) && viewId !== ignoreViewId)
+      .reduce(
+        (acc, id) =>
+          acc + (this.state[id].collapsed ? this.headerSize : this.state[id].hidden ? 0 : this.state[id].size!),
+        0,
+      );
+  }
+
   private handleContextKeyChange() {
     Array.from(this.viewsWithContextKey.values()).forEach((view) => {
       if (

package/src/browser/accordion/accordion.view.tsx

@@ -1,3 +1,4 @@
+import cls from 'classnames';
 import React, { useMemo } from 'react';
 
 import { View, useAutorun, useInjectable } from '@opensumi/ide-core-browser';
@@ -33,6 +34,7 @@ export const AccordionContainer = ({
   const layoutViewSize = useInjectable<LayoutViewSizeConfig>(LayoutViewSizeConfig);
 
   const accordionService: AccordionService = useInjectable(AccordionServiceFactory)(containerId, noRestore);
+  accordionService.alignment = alignment;
   const visibleViews = useAutorun(accordionService.visibleViews);
 
   useAutorun(accordionService.stateObservable);
@@ -52,10 +54,10 @@ export const AccordionContainer = ({
   React.useEffect(() => {
     accordionService.initConfig({ headerSize: layoutHeaderSize, minSize });
   }, []);
-
+  // FIXME: accordion 的 resize event 失效了
   return (
     <SplitPanel
-      className={className}
+      className={cls(className, { horizontal: alignment === 'horizontal' })}
       style={style}
       headerSize={headerSize}
       dynamicTarget={true}

package/src/browser/accordion/section.view.tsx

@@ -169,7 +169,11 @@ export const AccordionSection = ({
   }, [expanded, headerSize, alignment]);
 
   return (
-    <div className={styles_kt_split_panel} data-view-id={viewId} draggable={false}>
+    <div
+      className={cls(styles_kt_split_panel, { horizontal: alignment === 'horizontal' })}
+      data-view-id={viewId}
+      draggable={false}
+    >
       {!noHeader && (
         <div
           {...attrs}

package/src/browser/accordion/styles.module.less

@@ -2,6 +2,9 @@
   .resize-ease {
     transition: height 0.1s ease-out;
   }
+  .resize-ease-horizontal {
+    transition: width 0.1s ease-out;
+  }
 }
 
 .kt_split_panel_container {
@@ -10,6 +13,10 @@
   height: 100%;
   white-space: nowrap;
   flex-direction: column;
+
+  &.horizontal {
+    flex-direction: row;
+  }
 }
 
 .kt_split_panel {
@@ -19,6 +26,14 @@
   display: flex;
   flex-direction: column;
   position: relative;
+
+  &.horizontal {
+    flex-direction: column;
+    width: auto;
+    min-width: 0;
+    height: 100%;
+  }
+
   &:hover .actions_wrap {
     display: block;
   }
@@ -224,3 +239,49 @@
     }
   }
 }
+
+// 水平模式样式支持
+.kt_split_panel.horizontal {
+  .kt_split_panel_header {
+    writing-mode: vertical-lr;
+    text-orientation: mixed;
+    border-top: 1px solid transparent;
+    border-left: 1px solid var(--sideBar-border);
+    flex-direction: column;
+    width: 100%;
+    height: auto;
+    justify-content: flex-start;
+  }
+
+  .label_wrap {
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+
+    i.arrow_icon {
+      margin: 4px 0;
+      &.kt_mod_collapsed {
+        transform: rotate(-180deg);
+      }
+    }
+  }
+
+  .section_label {
+    writing-mode: vertical-lr;
+    text-orientation: mixed;
+    line-height: normal;
+  }
+
+  .section_description {
+    writing-mode: vertical-lr;
+    text-orientation: mixed;
+    margin-left: 0;
+    margin-top: 10px;
+    line-height: normal;
+  }
+
+  .section_badge {
+    margin-left: 0;
+    margin-top: 6px;
+  }
+}

package/src/browser/command.ts

@@ -0,0 +1,99 @@
+import { Command, getIcon } from '@opensumi/ide-core-browser';
+import { MenuCommandDesc } from '@opensumi/ide-core-browser/lib/menu/next';
+
+/** @deprecated 请使用 main-layout.view.toggle */
+export const TOGGLE_LEFT_PANEL_COMMAND: Command = {
+  id: 'main-layout.left-panel.toggle',
+  delegate: 'main-layout.view.toggle',
+};
+
+/** @deprecated 请使用 main-layout.extendView.toggle */
+export const TOGGLE_RIGHT_PANEL_COMMAND: Command = {
+  id: 'main-layout.right-panel.toggle',
+  delegate: 'main-layout.extend-view.toggle',
+};
+
+/** @deprecated 请使用 main-layout.panel.toggle */
+export const TOGGLE_BOTTOM_PANEL_COMMAND: Command = {
+  id: 'main-layout.bottom-panel.toggle',
+  delegate: 'main-layout.panel.toggle',
+};
+
+/** @deprecated 请使用 main-layout.panel.is-visible */
+export const IS_VISIBLE_BOTTOM_PANEL_COMMAND: Command = {
+  id: 'main-layout.bottom-panel.is-visible',
+  delegate: 'main-layout.panel.is-visible',
+};
+
+/** @deprecated 请使用 main-layout.view.is-visible */
+export const IS_VISIBLE_LEFT_PANEL_COMMAND: Command = {
+  id: 'main-layout.left-panel.is-visible',
+  delegate: 'main-layout.view.is-visible',
+};
+
+/** @deprecated 请使用 main-layout.extend-view.is-visible */
+export const IS_VISIBLE_RIGHT_PANEL_COMMAND: Command = {
+  id: 'main-layout.right-panel.is-visible',
+  delegate: 'main-layout.extend-view.is-visible',
+};
+
+/** @deprecated 请使用 main-layout.panel.expand */
+export const EXPAND_BOTTOM_PANEL: Command = {
+  id: 'main-layout.bottom-panel.expand',
+  delegate: 'main-layout.panel.expand',
+};
+
+/** @deprecated 请使用 main-layout.panel.retract */
+export const RETRACT_BOTTOM_PANEL: Command = {
+  id: 'main-layout.bottom-panel.retract',
+  delegate: 'main-layout.panel.retract',
+};
+
+export const WORKBENCH_ACTION_CLOSESIDECAR: Command = {
+  id: 'workbench.action.closeSidebar',
+  label: '%main-layout.sidebar.hide%',
+};
+
+export const WORKBENCH_ACTION_CLOSEPANEL: Command = {
+  id: 'workbench.action.closePanel',
+};
+
+export const TOGGLE_VIEW_COMMAND: MenuCommandDesc = {
+  id: 'main-layout.view.toggle',
+  label: '%main-layout.view.toggle%',
+};
+
+export const TOGGLE_EXTEND_VIEW_COMMAND: MenuCommandDesc = {
+  id: 'main-layout.extend-view.toggle',
+  label: '%main-layout.extend-view.toggle%',
+};
+
+export const TOGGLE_PANEL_COMMAND: Command = {
+  id: 'main-layout.panel.toggle',
+  iconClass: getIcon('minus'),
+  label: '%main-layout.panel.toggle%',
+};
+
+export const IS_VISIBLE_VIEW_COMMAND: Command = {
+  id: 'main-layout.view.is-visible',
+};
+
+export const IS_VISIBLE_EXTEND_VIEW_COMMAND: Command = {
+  id: 'main-layout.extend-view.is-visible',
+};
+
+export const IS_VISIBLE_PANEL_COMMAND: Command = {
+  id: 'main-layout.panel.is-visible',
+};
+
+export const EXPAND_PANEL_COMMAND: Command = {
+  id: 'main-layout.panel.expand',
+  label: '%layout.tabbar.expand%',
+  iconClass: getIcon('expand'),
+};
+
+export const RETRACT_PANEL_COMMAND: Command = {
+  id: 'main-layout.panel.retract',
+  label: '%layout.tabbar.retract%',
+  iconClass: getIcon('shrink'),
+};

package/src/browser/default-config.ts

@@ -1,7 +1,7 @@
 /* istanbul ignore file */
 import { LayoutConfig, SlotLocation } from '@opensumi/ide-core-browser';
 
-import { DROP_BOTTOM_CONTAINER, DROP_RIGHT_CONTAINER } from '../common';
+import { DROP_EXTEND_VIEW_CONTAINER, DROP_PANEL_CONTAINER, DROP_VIEW_CONTAINER } from '../common';
 
 export const defaultConfig: LayoutConfig = {
   [SlotLocation.top]: {
@@ -10,25 +10,26 @@ export const defaultConfig: LayoutConfig = {
   [SlotLocation.action]: {
     modules: ['@opensumi/ide-toolbar-action'],
   },
-  [SlotLocation.left]: {
+  [SlotLocation.view]: {
     modules: [
+      DROP_VIEW_CONTAINER,
       '@opensumi/ide-explorer',
       '@opensumi/ide-search',
       '@opensumi/ide-scm',
-      '@opensumi/ide-extension-manager',
       '@opensumi/ide-debug',
+      '@opensumi/ide-extension-manager',
       '@opensumi/ide-notebook',
     ],
   },
-  [SlotLocation.right]: {
-    modules: [DROP_RIGHT_CONTAINER],
+  [SlotLocation.extendView]: {
+    modules: [DROP_EXTEND_VIEW_CONTAINER],
   },
   [SlotLocation.main]: {
     modules: ['@opensumi/ide-editor'],
   },
-  [SlotLocation.bottom]: {
+  [SlotLocation.panel]: {
     modules: [
-      DROP_BOTTOM_CONTAINER,
+      DROP_PANEL_CONTAINER,
       '@opensumi/ide-terminal-next',
       '@opensumi/ide-output',
       'debug-console',

package/src/browser/drop-area/drop-area.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { localize, useInjectable } from '@opensumi/ide-core-browser';
+import { SlotLocation, localize, useInjectable } from '@opensumi/ide-core-browser';
 
 import { IMainLayoutService } from '../../common';
 
@@ -18,6 +18,7 @@ const DropArea: React.FC<IDropAreaProps> = (props) => {
     (e: React.DragEvent) => {
       const containerId = e.dataTransfer?.getData('containerId');
       layoutService.moveContainerTo(containerId, location);
+      layoutService.hideDropArea();
     },
     [layoutService, location],
   );
@@ -35,6 +36,8 @@ const DropArea: React.FC<IDropAreaProps> = (props) => {
   );
 };
 
-export const RightDropArea = () => <DropArea location='right' />;
+export const ViewDropArea = () => <DropArea location={SlotLocation.view} />;
 
-export const BottomDropArea = () => <DropArea location='bottom' />;
+export const ExtendViewDropArea = () => <DropArea location={SlotLocation.extendView} />;
+
+export const PanelDropArea = () => <DropArea location={SlotLocation.panel} />;

package/src/browser/index.ts

@@ -1,5 +1,6 @@
 import { Injectable, Injector, Provider } from '@opensumi/di';
 import { BrowserModule } from '@opensumi/ide-core-browser';
+import { Layout } from '@opensumi/ide-core-browser/lib/components';
 
 import { IMainLayoutService, IViewsRegistry, MainLayoutContribution } from '../common';