@opensumi/ide-core-browser 2.21.13 → 2.22.0

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

@@ -0,0 +1,88 @@
+import clsx from 'classnames';
+import React from 'react';
+
+import { Layout } from './layout';
+import styles from './styles.module.less';
+
+export interface IChildComponentProps {
+  /**
+   * 创建的 div 标签样式中要使用的 flex 属性
+   */
+  flex?: number;
+  /**
+   * 创建的 div 标签样式中要使用的默认宽度
+   */
+  defaultSize?: number;
+  id: string;
+  overflow: string;
+  /**
+   * 创建的 div 标签样式中要使用的 zIndex 属性
+   */
+  zIndex?: number;
+  /**
+   * 创建的 div 标签样式中要使用的 z-index 属性
+   */
+  'z-index'?: number;
+  /**
+   * 创建的 div 标签样式中要使用的 backgroundColor 属性
+   */
+  backgroundColor?: string;
+
+  // 以上都是老代码，直接取 props 的相关属性太直接了
+  // 优雅一些的做法是使用 data- 标签
+  /**
+   * 创建的 div 标签要使用的 id
+   */
+  'data-wrapper-id'?: string;
+  /**
+   * 创建的 div 标签要使用的 className
+   */
+  'data-wrapper-class'?: string;
+}
+
+type ChildComponent = React.ReactElement<IChildComponentProps>;
+
+/**
+ * 包裹放入其中的元素，并为每个元素创建一个 div
+ *
+ * 可以通过修改传入的 children 的 props 来定义一些属性，props 的定义可见：{ @link ChildComponent }
+ */
+export const BoxPanel: React.FC<{
+  children?: ChildComponent | ChildComponent[];
+  className?: string;
+  direction?: Layout.direction;
+  flex?: number;
+  zIndex?: number;
+}> = ({ className, children = [], direction = 'left-to-right', ...restProps }) => {
+  // convert children to list
+  const arrayChildren = React.Children.toArray(children) as ChildComponent[];
+
+  return (
+    <div
+      {...restProps}
+      className={clsx(styles['box-panel'], className)}
+      style={{ flexDirection: Layout.getFlexDirection(direction), zIndex: restProps['z-index'] }}
+    >
+      {arrayChildren.map((child, index) => (
+        <div
+          key={index}
+          id={child['props']?.['data-wrapper-id']}
+          className={clsx(styles.wrapper, child['props']?.['data-wrapper-class'])}
+          style={
+            child['props']
+              ? {
+                  flex: child['props'].flex,
+                  overflow: child['props'].overflow,
+                  zIndex: child['props'].zIndex || child['props']['z-index'],
+                  [Layout.getMinSizeProperty(direction)]: child['props'].defaultSize,
+                  backgroundColor: child['props'].backgroundColor,
+                }
+              : {}
+          }
+        >
+          {child}
+        </div>
+      ))}
+    </div>
+  );
+};

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

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import { SlotRenderer } from '../../react-providers/slot';
+
+import { BoxPanel } from './box-panel';
+import { SplitPanel } from './split-panel';
+
+export const getStorageValue = () => {
+  // 启动时渲染的颜色和尺寸，弱依赖
+  let savedLayout: { [key: string]: { size: number; currentId: string } } = {};
+  let savedColors: { [colorKey: string]: string } = {};
+  try {
+    savedLayout = JSON.parse(localStorage.getItem('layout') || '{}');
+    savedColors = JSON.parse(localStorage.getItem('theme') || '{}');
+  } catch (err) {}
+  return {
+    layout: savedLayout,
+    colors: savedColors,
+  };
+};
+
+export const DefaultLayout = ToolbarActionBasedLayout;
+
+export function ToolbarActionBasedLayout() {
+  const { colors, layout } = getStorageValue();
+  return (
+    <BoxPanel direction='top-to-bottom'>
+      <SlotRenderer backgroundColor={colors.menuBarBackground} defaultSize={0} slot='top' z-index={2} />
+      <SplitPanel id='main-horizontal' flex={1}>
+        <SlotRenderer
+          backgroundColor={colors.sideBarBackground}
+          slot='left'
+          isTabbar={true}
+          defaultSize={layout.left?.currentId ? layout.left?.size || 310 : 49}
+          minResize={204}
+          minSize={49}
+        />
+        <SplitPanel id='main-vertical' minResize={300} flexGrow={1} direction='top-to-bottom'>
+          <SlotRenderer backgroundColor={colors.editorBackground} flex={2} flexGrow={1} minResize={200} slot='main' />
+          <SlotRenderer
+            backgroundColor={colors.panelBackground}
+            flex={1}
+            defaultSize={layout.bottom?.size}
+            minResize={160}
+            slot='bottom'
+            isTabbar={true}
+          />
+        </SplitPanel>
+        <SlotRenderer
+          backgroundColor={colors.sideBarBackground}
+          slot='right'
+          isTabbar={true}
+          defaultSize={layout.right?.currentId ? layout.right?.size || 310 : 0}
+          minResize={200}
+          minSize={0}
+        />
+      </SplitPanel>
+      <SlotRenderer backgroundColor={colors.statusBarBackground} defaultSize={24} slot='statusBar' />
+    </BoxPanel>
+  );
+}

package/src/components/layout/index.ts

@@ -0,0 +1,4 @@
+export * from './layout';
+export * from './split-panel';
+export * from './box-panel';
+export * from './default-layout';

package/src/components/layout/layout.ts

@@ -0,0 +1,80 @@
+import { ResizeHandleVertical, ResizeHandleHorizontal } from '../resize/resize';
+
+const flexDirectionMap: {
+  [index: string]: {
+    direction: any;
+    size: 'width' | 'height';
+    domSize: 'clientWidth' | 'clientHeight';
+    minSize: 'minWidth' | 'minHeight';
+    maxSize: 'maxWidth' | 'maxHeight';
+  };
+} = {
+  'left-to-right': {
+    direction: 'row',
+    size: 'width',
+    domSize: 'clientHeight',
+    minSize: 'minWidth',
+    maxSize: 'maxWidth',
+  },
+  'right-to-left': {
+    direction: 'row-reverse',
+    size: 'width',
+    domSize: 'clientHeight',
+    minSize: 'minWidth',
+    maxSize: 'maxWidth',
+  },
+  'top-to-bottom': {
+    direction: 'column',
+    size: 'height',
+    domSize: 'clientWidth',
+    minSize: 'minHeight',
+    maxSize: 'maxHeight',
+  },
+  'bottom-to-top': {
+    direction: 'column-reverse',
+    size: 'height',
+    domSize: 'clientWidth',
+    minSize: 'minHeight',
+    maxSize: 'maxHeight',
+  },
+};
+
+export namespace Layout {
+  export type direction = 'left-to-right' | 'right-to-left' | 'top-to-bottom' | 'bottom-to-top';
+
+  export type alignment = 'horizontal' | 'vertical';
+
+  export function getFlexDirection(direction: Layout.direction) {
+    return flexDirectionMap[direction].direction;
+  }
+
+  export function getSizeProperty(direction: Layout.direction) {
+    return flexDirectionMap[direction].size;
+  }
+
+  export function getDomSizeProperty(direction: Layout.direction) {
+    return flexDirectionMap[direction].domSize;
+  }
+
+  export function getMinSizeProperty(direction: Layout.direction) {
+    return flexDirectionMap[direction].minSize;
+  }
+
+  export function getMaxSizeProperty(direction: Layout.direction) {
+    return flexDirectionMap[direction].maxSize;
+  }
+
+  export function getResizeHandle(direction: Layout.direction) {
+    if (direction === 'bottom-to-top' || direction === 'top-to-bottom') {
+      return ResizeHandleVertical;
+    }
+    return ResizeHandleHorizontal;
+  }
+
+  export function getTabbarDirection(direction: Layout.direction) {
+    if (direction === 'bottom-to-top' || direction === 'top-to-bottom') {
+      return 'row';
+    }
+    return 'column';
+  }
+}

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

@@ -0,0 +1,56 @@
+import { Injectable, INJECTOR_TOKEN, Injector, Autowired } from '@opensumi/di';
+
+@Injectable({ multiple: true })
+export class SplitPanelService {
+  private static MIN_SIZE = 120;
+  constructor(public panelId: string) {}
+
+  panels: HTMLElement[] = [];
+
+  rootNode: HTMLElement | undefined;
+
+  get isVisible(): boolean {
+    return (this.rootNode && this.rootNode.clientHeight > 0) || false;
+  }
+
+  getFirstResizablePanel(index: number, direction: boolean, isPrev?: boolean): HTMLElement | undefined {
+    if (isPrev) {
+      if (direction) {
+        return this.panels[index];
+      } else {
+        for (let i = index; i >= 0; i--) {
+          if (this.panels[i].clientHeight > SplitPanelService.MIN_SIZE) {
+            return this.panels[i];
+          }
+        }
+      }
+    } else {
+      if (!direction) {
+        return this.panels[index + 1];
+      } else {
+        for (let i = index + 1; i < this.panels.length; i++) {
+          if (this.panels[i].clientHeight > SplitPanelService.MIN_SIZE) {
+            return this.panels[i];
+          }
+        }
+      }
+    }
+  }
+}
+
+@Injectable()
+export class SplitPanelManager {
+  @Autowired(INJECTOR_TOKEN)
+  injector: Injector;
+
+  services: Map<string, SplitPanelService> = new Map();
+
+  getService(panelId: string) {
+    let service = this.services.get(panelId);
+    if (!service) {
+      service = this.injector.get(SplitPanelService, [panelId]);
+      this.services.set(panelId, service);
+    }
+    return service;
+  }
+}

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

@@ -0,0 +1,315 @@
+import clsx from 'classnames';
+import React from 'react';
+
+import { IEventBus } from '@opensumi/ide-core-common';
+
+import { ResizeEvent } from '../../layout';
+import { useInjectable } from '../../react-hooks';
+import { IResizeHandleDelegate, ResizeFlexMode } from '../resize/resize';
+
+import { Layout } from './layout';
+import { SplitPanelManager } from './split-panel.service';
+import styles from './styles.module.less';
+
+export interface ResizeHandle {
+  setSize: (targetSize?: number, isLatter?: boolean) => void;
+  setRelativeSize: (prev: number, next: number, isLatter: boolean) => void;
+  getSize: (isLatter: boolean) => number;
+  getRelativeSize: (isLatter: boolean) => number[];
+  lockSize: (lock: boolean | undefined, isLatter: boolean) => void;
+  setMaxSize: (lock: boolean | undefined, isLatter: boolean) => void;
+  hidePanel: (show?: boolean) => void;
+}
+
+export const PanelContext = React.createContext<ResizeHandle>({
+  setSize: (targetSize: number, isLatter: boolean) => {},
+  setRelativeSize: (prev, next, isLatter) => {},
+  getSize: (isLatter: boolean) => 0,
+  getRelativeSize: (isLatter: boolean) => [0, 0],
+  lockSize: (lock: boolean | undefined, isLatter: boolean) => {},
+  setMaxSize: (lock: boolean | undefined, isLatter: boolean) => {},
+  hidePanel: (show?: boolean) => {},
+});
+
+type ChildComponent = React.ReactElement<SplitChildProps>;
+
+/**
+ * 推荐使用 `data-sp-` 方式来传递这些参数。
+ *
+ * 如：
+ *
+ * ```tsx
+ * <SplitPanel>
+ *   <div data-sp-id="div1" data-sp-minResize={100}></div>
+ *   <div></div>
+ * </SplitPanel>
+ * ```
+ */
+interface SplitChildProps {
+  id: string;
+  minSize?: number;
+  maxSize?: number;
+  minResize?: number;
+  flex?: number;
+  overflow?: string;
+  flexGrow?: number;
+  slot?: string;
+  noResize?: boolean;
+  savedSize?: number;
+  defaultSize?: number;
+  children?: ChildComponent | ChildComponent[];
+}
+
+export interface SplitPanelProps extends SplitChildProps {
+  className?: string;
+  style?: React.CSSProperties;
+  direction?: Layout.direction;
+  id: string;
+  // setAbsoluteSize 时保证相邻节点总宽度不变
+  resizeKeep?: boolean;
+  dynamicTarget?: boolean;
+  // 控制使用传入尺寸之和作为总尺寸或使用dom尺寸
+  useDomSize?: boolean;
+  /**
+   * ResizeHandle 的 className，用以展示分割线等
+   */
+  resizeHandleClassName?: string;
+}
+
+const getProp = (child: React.ReactNode, prop: string) =>
+  child && child['props'] && (child['props'][prop] ?? child['props'][`data-sp-${prop}`]);
+
+export const SplitPanel: React.FC<SplitPanelProps> = ({
+  id,
+  className,
+  resizeHandleClassName,
+  style,
+  children = [],
+  direction = 'left-to-right',
+  resizeKeep = true,
+  flexGrow,
+  dynamicTarget,
+  minResize,
+  useDomSize,
+  ...restProps
+}) => {
+  const ResizeHandle = Layout.getResizeHandle(direction);
+  // convert children to list
+  const childList = React.Children.toArray(children);
+  const totalFlexNum = childList.reduce(
+    (accumulator, item) => accumulator + (getProp(item, 'flex') !== undefined ? getProp(item, 'flex') : 1),
+    0,
+  );
+  const elements: React.ReactNodeArray = [];
+  const resizeDelegates = React.useRef<IResizeHandleDelegate[]>([]);
+  const eventBus = useInjectable<IEventBus>(IEventBus);
+  const rootRef = React.useRef<HTMLElement>();
+
+  const splitPanelService = useInjectable<SplitPanelManager>(SplitPanelManager).getService(id);
+  const maxLockState = React.useRef(childList.map(() => false));
+  const hideState = React.useRef(childList.map(() => false));
+  const resizeLockState = React.useRef(maxLockState.current.slice(0, childList.length - 1));
+  const [locks, setLocks] = React.useState<boolean[]>(resizeLockState.current);
+  const [hides, setHides] = React.useState<boolean[]>(hideState.current);
+  const [maxLocks, setMaxLocks] = React.useState<boolean[]>(maxLockState.current);
+  splitPanelService.panels = [];
+
+  // 获取setSize的handle，对于最右端或最底部的视图，取上一个位置的handle
+  const setSizeHandle = (index) => (size?: number, isLatter?: boolean) => {
+    const targetIndex = isLatter ? index - 1 : index;
+    const delegate = resizeDelegates.current[targetIndex];
+    if (delegate) {
+      delegate.setAbsoluteSize(
+        size !== undefined ? size : getProp(childList[index], 'defaultSize'),
+        isLatter,
+        resizeKeep,
+      );
+    }
+  };
+
+  const setRelativeSizeHandle = (index) => (prev: number, next: number, isLatter?: boolean) => {
+    const targetIndex = isLatter ? index - 1 : index;
+    const delegate = resizeDelegates.current[targetIndex];
+    if (delegate) {
+      delegate.setRelativeSize(prev, next);
+    }
+  };
+
+  const getSizeHandle = (index) => (isLatter?: boolean) => {
+    const targetIndex = isLatter ? index - 1 : index;
+    const delegate = resizeDelegates.current[targetIndex];
+    if (delegate) {
+      return delegate.getAbsoluteSize(isLatter);
+    }
+    return 0;
+  };
+
+  const getRelativeSizeHandle = (index) => (isLatter?: boolean) => {
+    const targetIndex = isLatter ? index - 1 : index;
+    const delegate = resizeDelegates.current[targetIndex];
+    if (delegate) {
+      return delegate.getRelativeSize();
+    }
+    return [0, 0];
+  };
+
+  const lockResizeHandle = (index) => (lock: boolean | undefined, isLatter?: boolean) => {
+    const targetIndex = isLatter ? index - 1 : index;
+    const newResizeState = resizeLockState.current.map((state, idx) =>
+      idx === targetIndex ? (lock !== undefined ? lock : !state) : state,
+    );
+    resizeLockState.current = newResizeState;
+    setLocks(newResizeState);
+  };
+
+  const setMaxSizeHandle = (index) => (lock: boolean | undefined, isLatter?: boolean) => {
+    const newMaxState = maxLockState.current.map((state, idx) =>
+      idx === index ? (lock !== undefined ? lock : !state) : state,
+    );
+    maxLockState.current = newMaxState;
+    setMaxLocks(newMaxState);
+  };
+
+  const hidePanelHandle = (index: number) => (show?: boolean) => {
+    const newHideState = hideState.current.map((state, idx) =>
+      idx === index ? (show !== undefined ? !show : !state) : state,
+    );
+    hideState.current = newHideState;
+    const location = getProp(childList[index], 'slot') || getProp(childList[index], 'id');
+    if (location) {
+      fireResizeEvent(location);
+    }
+    setHides(newHideState);
+  };
+
+  const fireResizeEvent = (location?: string) => {
+    if (location) {
+      eventBus.fire(new ResizeEvent({ slotLocation: location }));
+    }
+  };
+
+  childList.forEach((element, index) => {
+    if (index !== 0) {
+      const targetElement = index === 1 ? childList[index - 1] : childList[index];
+      let flexMode: ResizeFlexMode | undefined;
+      if (getProp(element, 'flexGrow')) {
+        flexMode = ResizeFlexMode.Prev;
+      } else if (getProp(childList[index - 1], 'flexGrow')) {
+        flexMode = ResizeFlexMode.Next;
+      }
+      const noResize = getProp(targetElement, 'noResize') || locks[index - 1];
+      if (!noResize) {
+        elements.push(
+          <ResizeHandle
+            className={resizeHandleClassName}
+            onResize={(prev, next) => {
+              const prevLocation = getProp(childList[index - 1], 'slot') || getProp(childList[index - 1], 'id');
+              const nextLocation = getProp(childList[index], 'slot') || getProp(childList[index], 'id');
+              fireResizeEvent(prevLocation!);
+              fireResizeEvent(nextLocation!);
+            }}
+            noColor={true}
+            findNextElement={
+              dynamicTarget
+                ? (direction: boolean) => splitPanelService.getFirstResizablePanel(index - 1, direction)
+                : undefined
+            }
+            findPrevElement={
+              dynamicTarget
+                ? (direction: boolean) => splitPanelService.getFirstResizablePanel(index - 1, direction, true)
+                : undefined
+            }
+            key={`split-handle-${index}`}
+            delegate={(delegate) => {
+              resizeDelegates.current.push(delegate);
+            }}
+            flexMode={flexMode}
+          />,
+        );
+      }
+    }
+    elements.push(
+      <PanelContext.Provider
+        key={index}
+        value={{
+          setSize: setSizeHandle(index),
+          getSize: getSizeHandle(index),
+          setRelativeSize: setRelativeSizeHandle(index),
+          getRelativeSize: getRelativeSizeHandle(index),
+          lockSize: lockResizeHandle(index),
+          setMaxSize: setMaxSizeHandle(index),
+          hidePanel: hidePanelHandle(index),
+        }}
+      >
+        <div
+          data-min-resize={getProp(element, 'minResize')}
+          ref={(ele) => {
+            if (ele && splitPanelService.panels.indexOf(ele) === -1) {
+              splitPanelService.panels.push(ele);
+            }
+          }}
+          id={getProp(element, 'id') /* @deprecated: query by data-view-id */}
+          style={{
+            // 手风琴场景，固定尺寸和flex尺寸混合布局；需要在resize flex模式下禁用
+            ...(getProp(element, 'flex') &&
+            !getProp(element, 'savedSize') &&
+            !childList.find((item) => getProp(item, 'flexGrow'))
+              ? { flex: getProp(element, 'flex') }
+              : { [Layout.getSizeProperty(direction)]: getElementSize(element) }),
+            // 相对尺寸带来的问题，必须限制最小最大尺寸
+            [Layout.getMinSizeProperty(direction)]: getProp(element, 'minSize')
+              ? getProp(element, 'minSize') + 'px'
+              : '-1px',
+            [Layout.getMaxSizeProperty(direction)]:
+              maxLocks[index] && getProp(element, 'maxSize') ? getProp(element, 'maxSize') + 'px' : 'unset',
+            // resize flex模式下应用flexGrow
+            ...(getProp(element, 'flexGrow') !== undefined ? { flexGrow: getProp(element, 'flexGrow') } : {}),
+            display: hides[index] ? 'none' : 'block',
+            backgroundColor: getProp(element, 'backgroundColor'),
+          }}
+        >
+          {element}
+        </div>
+      </PanelContext.Provider>,
+    );
+  });
+
+  function getElementSize(element: any) {
+    if (getProp(element, 'savedSize')) {
+      return getProp(element, 'savedSize') + 'px';
+    } else if (getProp(element, 'defaultSize') !== undefined) {
+      return getProp(element, 'defaultSize') + 'px';
+    } else if (getProp(element, 'flex')) {
+      return (getProp(element, 'flex') / totalFlexNum) * 100 + '%';
+    } else {
+      return (1 / totalFlexNum) * 100 + '%';
+    }
+  }
+
+  React.useEffect(() => {
+    if (rootRef.current) {
+      splitPanelService.rootNode = rootRef.current;
+    }
+    const disposer = eventBus.on(ResizeEvent, (e) => {
+      if (e.payload.slotLocation === id) {
+        childList.forEach((c) => {
+          fireResizeEvent(getProp(c, 'slot') || getProp(c, 'id'));
+        });
+      }
+    });
+    return () => {
+      disposer.dispose();
+    };
+  }, []);
+
+  return (
+    <div
+      ref={(ele) => (rootRef.current = ele!)}
+      {...restProps}
+      className={clsx(styles['split-panel'], className)}
+      style={{ flexDirection: Layout.getFlexDirection(direction), ...style }}
+    >
+      {elements}
+    </div>
+  );
+};

package/src/components/layout/styles.module.less

@@ -0,0 +1,21 @@
+.split-panel {
+  display: flex;
+  flex: 1;
+  width: 100%;
+  height: 100%;
+}
+
+.box-panel {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+.ease {
+  transition: height 0.1s ease-out, width 0.1s ease-out;
+}
+
+.wrapper {
+  position: relative;
+  z-index: 2;
+}

package/src/components/loading/index.ts

@@ -0,0 +1 @@
+export * from './loading.view';

package/src/components/loading/loading.less

@@ -0,0 +1,14 @@
+.loading_indicator {
+  width: 20px;
+  height: 20px;
+  background-image: url('./media/loading.svg');
+  background-size: cover;
+}
+
+.vs-dark .loading_indicator {
+  background-image: url('./media/loading-dark.svg');
+}
+
+.hc-black .loading_indicator {
+  background-image: url('./media/loading-hc.svg');
+}

package/src/components/loading/loading.view.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import './loading.less';
+
+export const Loading: React.FC<React.HTMLAttributes<HTMLDivElement>> = () => <div className='loading_indicator ' />;
+
+Loading.displayName = 'Loading';