@opensumi/ide-opened-editor 2.21.7-rc-1670229502.0 → 2.21.7

package/src/browser/opened-editor-node.module.less

@@ -1,195 +0,0 @@
-.opened_editor_node {
-  height: 22px;
-  line-height: 22px;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  cursor: pointer;
-
-  &:hover {
-    color: var(--kt-tree-hoverForeground);
-    background: var(--kt-tree-hoverBackground);
-    .opened_editor_action_bar {
-      display: block;
-    }
-    &::before {
-      display: none !important;
-    }
-  }
-
-  &.mod_selected {
-    color: var(--kt-tree-inactiveSelectionForeground) !important;
-    background: var(--kt-tree-inactiveSelectionBackground);
-    .expansion_toggle,
-    .opened_editor_node_description {
-      color: var(--kt-tree-inactiveSelectionForeground) !important;
-    }
-  }
-
-  &.mod_focused {
-    outline: 1px solid var(--list-focusOutline);
-    outline-offset: -1px;
-    color: var(--kt-tree-activeSelectionForeground) !important;
-    background: var(--kt-tree-activeSelectionBackground);
-    .expansion_toggle,
-    .opened_editor_node_description {
-      color: var(--kt-tree-activeSelectionForeground) !important;
-    }
-  }
-
-  &.mod_actived {
-    outline: 1px solid var(--list-focusOutline);
-    outline-offset: -1px;
-    .expansion_toggle {
-      color: var(--kt-tree-activeSelectionForeground) !important;
-    }
-  }
-
-  &.mod_dirty {
-    &::before {
-      content: '';
-      display: block;
-      width: 8px;
-      height: 8px;
-      border-radius: 4px;
-      margin: 7px 5px;
-      background: var(--kt-dirtyDot-foreground);
-      position: absolute;
-      left: 18px;
-    }
-  }
-}
-
-.opened_editor_node_description {
-  display: inline;
-  transform: scale(0.96);
-  color: var(--descriptionForeground);
-}
-
-.opened_editor_node_content {
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 100%;
-
-  match {
-    background-color: var(--editor-findMatchHighlightBackground);
-  }
-}
-
-.opened_editor_node_status {
-  opacity: 0.75;
-  text-align: center;
-  font-size: 12px;
-  padding-right: 0;
-}
-
-.opened_editor_node_segment {
-  flex-grow: 0;
-  white-space: nowrap;
-  color: inherit;
-  &_grow {
-    flex-grow: 1 !important;
-    text-align: left;
-    z-index: 10;
-    padding-right: 5px;
-
-    &.overflow_visible {
-      overflow: visible !important;
-    }
-  }
-}
-
-.opened_editor_node_displayname {
-  margin-right: 6px;
-  display: inline;
-  white-space: pre;
-}
-
-.opened_editor_node_description {
-  display: inline;
-  transform: scale(0.96);
-  color: var(--descriptionForeground);
-}
-
-.opened_editor_node_overflow_wrap {
-  flex: 1;
-  flex-shrink: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  text-align: left;
-  color: var(--foreground);
-}
-
-.opened_editor_node_flex_wrap {
-  display: flex;
-  flex-direction: row;
-}
-
-.opened_editor_node_segment_grow {
-  flex-grow: 1 !important;
-  text-align: left;
-  z-index: 10;
-  padding-right: 5px;
-
-  &.overflow_visible {
-    overflow: visible !important;
-  }
-}
-
-.file_icon {
-  position: relative;
-  color: var(--icon-foreground);
-  margin-right: 4px;
-  &:before {
-    font-size: 16px;
-    text-align: center;
-  }
-}
-
-.file_icon:global(&.fileIcon:before) {
-  font-size: 18px;
-}
-
-.opened_editor_node_tail {
-  text-align: center;
-  margin-right: 10px;
-  position: relative;
-  height: 22px;
-  display: flex;
-  align-items: center;
-}
-
-.opened_editor_action_bar {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  display: flex;
-  display: none;
-  z-index: 10;
-  .action_icon {
-    margin-left: 6px;
-    font-size: 14px;
-  }
-}
-
-.opened_editor_left_actions {
-  position: absolute;
-  left: 14px;
-}
-
-.opened_editor_right_actions {
-  right: 0;
-  position: absolute;
-  margin-right: 10px;
-}
-
-.opened_editor_left_actions,
-.opened_editor_right_actions {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 22px;
-}

package/src/browser/opened-editor-node.tsx

@@ -1,232 +0,0 @@
-import cls from 'classnames';
-import React from 'react';
-
-import {
-  TreeNode,
-  CompositeTreeNode,
-  INodeRendererProps,
-  ClasslistComposite,
-  TreeNodeType,
-  Button,
-} from '@opensumi/ide-components';
-import { URI, OPEN_EDITORS_COMMANDS, localize, getIcon, CommandService } from '@opensumi/ide-core-browser';
-import { LabelService } from '@opensumi/ide-core-browser/lib/services';
-import { EDITOR_WEBVIEW_SCHEME } from '@opensumi/ide-webview';
-
-import { EditorFileGroup, EditorFile } from './opened-editor-node.define';
-import styles from './opened-editor-node.module.less';
-import { OpenedEditorDecorationService } from './services/opened-editor-decoration.service';
-
-export interface IEditorNodeProps {
-  item: any;
-  defaultLeftPadding?: number;
-  leftPadding?: number;
-  decorationService: OpenedEditorDecorationService;
-  commandService: CommandService;
-  labelService: LabelService;
-  decorations?: ClasslistComposite;
-  onClick: (ev: React.MouseEvent, item: TreeNode | CompositeTreeNode, type: TreeNodeType, activeUri?: URI) => void;
-  onContextMenu: (
-    ev: React.MouseEvent,
-    item: TreeNode | CompositeTreeNode,
-    type: TreeNodeType,
-    activeUri?: URI,
-  ) => void;
-}
-
-export type EditorNodeRenderedProps = IEditorNodeProps & INodeRendererProps;
-
-export const EditorTreeNode: React.FC<EditorNodeRenderedProps> = ({
-  item,
-  defaultLeftPadding = 8,
-  leftPadding = 8,
-  onClick,
-  onContextMenu,
-  itemType,
-  decorationService,
-  labelService,
-  commandService,
-  decorations,
-}: EditorNodeRenderedProps) => {
-  const decoration = EditorFileGroup.is(item) ? null : decorationService.getDecoration(item.uri, false);
-
-  const handleClick = (ev: React.MouseEvent) => {
-    if (itemType === TreeNodeType.TreeNode || itemType === TreeNodeType.CompositeTreeNode) {
-      onClick(ev, item as EditorFile, itemType);
-    }
-  };
-
-  const handleContextMenu = (ev: React.MouseEvent) => {
-    if (ev.nativeEvent.which === 0) {
-      return;
-    }
-    if (itemType === TreeNodeType.TreeNode || itemType === TreeNodeType.CompositeTreeNode) {
-      onContextMenu(ev, item as TreeNode, itemType);
-    }
-  };
-
-  const paddingLeft = `${
-    defaultLeftPadding + (item.depth || 0) * (leftPadding || 0) + (!EditorFileGroup.is(item) ? 16 : 0)
-  }px`;
-
-  const editorNodeStyle = {
-    color: decoration ? decoration.color : '',
-    height: OPENED_EDITOR_TREE_NODE_HEIGHT,
-    lineHeight: `${OPENED_EDITOR_TREE_NODE_HEIGHT}px`,
-    paddingLeft,
-  } as React.CSSProperties;
-
-  const renderIcon = (node: EditorFileGroup | EditorFile) => {
-    if (EditorFileGroup.is(node)) {
-      return null;
-    }
-    const iconClass = node.resource.icon || labelService.getIcon((node as EditorFile).uri, { isDirectory: false });
-    return (
-      <div
-        className={cls(styles.file_icon, iconClass)}
-        style={{ height: OPENED_EDITOR_TREE_NODE_HEIGHT, lineHeight: `${OPENED_EDITOR_TREE_NODE_HEIGHT}px` }}
-      ></div>
-    );
-  };
-
-  const getNodeName = (node: EditorFileGroup | EditorFile) => {
-    if (!EditorFileGroup.is(node)) {
-      if (node.uri.scheme === EDITOR_WEBVIEW_SCHEME) {
-        return node.displayName;
-      }
-
-      return node.displayName || labelService.getName(node.uri);
-    }
-
-    return node.displayName;
-  };
-
-  const renderDisplayName = (node: EditorFileGroup | EditorFile) => (
-    <div className={cls(styles.opened_editor_node_segment, styles.opened_editor_node_displayname)}>
-      {getNodeName(node)}
-    </div>
-  );
-
-  const renderDescription = (node: EditorFileGroup | EditorFile) => {
-    if (EditorFileGroup.is(node)) {
-      return null;
-    }
-    return (
-      <div className={cls(styles.opened_editor_node_segment_grow, styles.opened_editor_node_description)}>
-        {node.tooltip}
-      </div>
-    );
-  };
-
-  const renderStatusTail = () => (
-    <div className={cls(styles.opened_editor_node_segment, styles.opened_editor_node_tail)}>{renderBadge()}</div>
-  );
-
-  const renderBadge = () => {
-    if (!decoration) {
-      return null;
-    }
-    return <div className={styles.opened_editor_node_status}>{decoration.badge.slice()}</div>;
-  };
-
-  const getItemTooltip = () => {
-    let tooltip = item.tooltip;
-    if (decoration && decoration.badge) {
-      tooltip += ` • ${decoration.tooltip}`;
-    }
-    return tooltip;
-  };
-
-  const renderAction = () => {
-    let actions: any[] = [];
-    if (EditorFileGroup.is(item)) {
-      actions = [
-        {
-          icon: getIcon('save-all'),
-          title: localize('opened.editors.save.byGroup'),
-          command: OPEN_EDITORS_COMMANDS.SAVE_BY_GROUP.id,
-        },
-        {
-          icon: getIcon('clear'),
-          title: localize('opened.editors.close.byGroup'),
-          command: OPEN_EDITORS_COMMANDS.CLOSE_BY_GROUP.id,
-        },
-      ];
-      return (
-        <div className={styles.opened_editor_right_actions}>
-          {actions.map((action) => {
-            const clickHandler = (event: React.MouseEvent) => {
-              event.stopPropagation();
-              event.preventDefault();
-              commandService.executeCommand(action.command, item);
-            };
-            return (
-              <Button
-                type='icon'
-                key={`${item.id}-${action.command}`}
-                iconClass={cls(styles.action_icon, action.icon)}
-                title={action.title}
-                onClick={clickHandler}
-              />
-            );
-          })}
-        </div>
-      );
-    } else {
-      actions = [
-        {
-          icon: getIcon('close'),
-          title: localize('file.close'),
-          command: OPEN_EDITORS_COMMANDS.CLOSE.id,
-        },
-      ];
-      return (
-        <div className={styles.opened_editor_left_actions}>
-          {actions.map((action) => {
-            const clickHandler = (event: React.MouseEvent) => {
-              event.stopPropagation();
-              event.preventDefault();
-              commandService.executeCommand(action.command, item);
-            };
-            return (
-              <Button
-                type='icon'
-                key={`${item.id}-${action.command}`}
-                iconClass={cls(styles.action_icon, action.icon)}
-                title={action.title}
-                onClick={clickHandler}
-              />
-            );
-          })}
-        </div>
-      );
-    }
-  };
-
-  const renderActionBar = () => <div className={styles.opened_editor_action_bar}>{renderAction()}</div>;
-
-  return (
-    <div
-      key={item.id}
-      onClick={handleClick}
-      onContextMenu={handleContextMenu}
-      title={getItemTooltip()}
-      className={cls(styles.opened_editor_node, decorations ? decorations.classlist : null)}
-      style={editorNodeStyle}
-      data-id={item.id}
-    >
-      {renderActionBar()}
-      <div className={cls(styles.opened_editor_node_content)}>
-        {renderIcon(item)}
-        <div className={styles.opened_editor_node_overflow_wrap}>
-          {renderDisplayName(item)}
-          {renderDescription(item)}
-        </div>
-        {renderStatusTail()}
-      </div>
-    </div>
-  );
-};
-
-export const OPENED_EDITOR_TREE_NODE_HEIGHT = 22;
-export const OPENED_EDITOR_BADGE_LIMIT = 99;

package/src/browser/opened-editor.contribution.ts

@@ -1,193 +0,0 @@
-import { Autowired } from '@opensumi/di';
-import {
-  Domain,
-  localize,
-  CommandContribution,
-  CommandRegistry,
-  OPEN_EDITORS_COMMANDS,
-  CommandService,
-  FILE_COMMANDS,
-  EDITOR_COMMANDS,
-} from '@opensumi/ide-core-browser';
-import { ClientAppContribution } from '@opensumi/ide-core-browser';
-import { ToolbarRegistry, TabBarToolbarContribution } from '@opensumi/ide-core-browser/lib/layout';
-import { MenuContribution, IMenuRegistry, MenuId } from '@opensumi/ide-core-browser/lib/menu/next';
-import { WorkbenchEditorService } from '@opensumi/ide-editor';
-import { EXPLORER_CONTAINER_ID } from '@opensumi/ide-explorer/lib/browser/explorer-contribution';
-import { IMainLayoutService } from '@opensumi/ide-main-layout';
-
-import { ExplorerOpenEditorPanel } from './opened-editor';
-import { EditorFile, EditorFileGroup } from './opened-editor-node.define';
-import { OpenedEditorModelService } from './services/opened-editor-model.service';
-
-export const ExplorerOpenedEditorViewId = 'file-opened-editor';
-
-@Domain(ClientAppContribution, TabBarToolbarContribution, CommandContribution, MenuContribution)
-export class OpenedEditorContribution
-  implements ClientAppContribution, TabBarToolbarContribution, CommandContribution, MenuContribution
-{
-  @Autowired(IMainLayoutService)
-  private readonly mainLayoutService: IMainLayoutService;
-
-  @Autowired(WorkbenchEditorService)
-  private readonly workbenchEditorService: WorkbenchEditorService;
-
-  @Autowired(OpenedEditorModelService)
-  private readonly openedEditorModelService: OpenedEditorModelService;
-
-  @Autowired(CommandService)
-  private readonly commandService: CommandService;
-
-  async onStart() {
-    this.mainLayoutService.collectViewComponent(
-      {
-        id: ExplorerOpenedEditorViewId,
-        name: localize('opened.editors.title'),
-        weight: 1,
-        priority: 10,
-        collapsed: true,
-        component: ExplorerOpenEditorPanel,
-      },
-      EXPLORER_CONTAINER_ID,
-    );
-  }
-
-  registerCommands(commands: CommandRegistry) {
-    commands.registerCommand(OPEN_EDITORS_COMMANDS.SAVE_ALL, {
-      execute: () => {
-        this.workbenchEditorService.saveAll();
-      },
-    });
-
-    commands.registerCommand(OPEN_EDITORS_COMMANDS.CLOSE_ALL, {
-      execute: async () => {
-        await this.workbenchEditorService.closeAll();
-        this.openedEditorModelService.clear();
-      },
-    });
-
-    commands.registerCommand(OPEN_EDITORS_COMMANDS.CLOSE_BY_GROUP, {
-      execute: (node: EditorFileGroup) => {
-        this.openedEditorModelService.closeAllByGroup(node);
-      },
-    });
-
-    commands.registerCommand(OPEN_EDITORS_COMMANDS.SAVE_BY_GROUP, {
-      execute: (node: EditorFileGroup) => {
-        this.openedEditorModelService.saveAllByGroup(node);
-      },
-    });
-
-    commands.registerCommand(OPEN_EDITORS_COMMANDS.CLOSE, {
-      execute: async (node: EditorFile) => {
-        let group;
-        if (node.parent && EditorFileGroup.is(node.parent as EditorFileGroup)) {
-          group = (node.parent as EditorFileGroup).group;
-        }
-        await this.commandService.executeCommand(EDITOR_COMMANDS.CLOSE.id, { group, uri: node.uri });
-        // 提前移除节点
-        (node.parent as EditorFileGroup).unlinkItem(node);
-      },
-    });
-
-    commands.registerCommand(OPEN_EDITORS_COMMANDS.OPEN, {
-      execute: (node: EditorFile) => {
-        let groupIndex = 0;
-        if (node.parent && EditorFileGroup.is(node.parent as EditorFileGroup)) {
-          groupIndex = (node.parent as EditorFileGroup).group.index;
-        }
-        this.commandService.executeCommand(EDITOR_COMMANDS.OPEN_RESOURCE.id, node.uri, { groupIndex });
-      },
-    });
-
-    commands.registerCommand(OPEN_EDITORS_COMMANDS.OPEN_TO_THE_SIDE, {
-      execute: (node: EditorFile) => {
-        let groupIndex = 0;
-        if (node.parent && EditorFileGroup.is(node.parent as EditorFileGroup)) {
-          groupIndex = (node.parent as EditorFileGroup).group.index;
-        }
-        this.commandService.executeCommand(EDITOR_COMMANDS.OPEN_RESOURCE.id, node.uri, {
-          groupIndex,
-          split: 4 /** right */,
-          focus: true,
-        });
-      },
-    });
-
-    commands.registerCommand(OPEN_EDITORS_COMMANDS.COMPARE_SELECTED, {
-      execute: (node: EditorFile) => {
-        this.commandService.executeCommand(FILE_COMMANDS.COMPARE_SELECTED.id, node.uri, [node.uri]);
-      },
-    });
-
-    commands.registerCommand(OPEN_EDITORS_COMMANDS.COPY_PATH, {
-      execute: (node: EditorFile) => {
-        this.commandService.executeCommand(FILE_COMMANDS.COPY_PATH.id, node.uri, [node.uri]);
-      },
-    });
-
-    commands.registerCommand(OPEN_EDITORS_COMMANDS.COPY_RELATIVE_PATH, {
-      execute: (node: EditorFile) => {
-        this.commandService.executeCommand(FILE_COMMANDS.COPY_RELATIVE_PATH.id, node.uri, [node.uri]);
-      },
-    });
-  }
-
-  registerToolbarItems(registry: ToolbarRegistry) {
-    registry.registerItem({
-      id: OPEN_EDITORS_COMMANDS.SAVE_ALL.id,
-      command: OPEN_EDITORS_COMMANDS.SAVE_ALL.id,
-      viewId: ExplorerOpenedEditorViewId,
-      label: localize('opened.editors.save.all'),
-    });
-    registry.registerItem({
-      id: OPEN_EDITORS_COMMANDS.CLOSE_ALL.id,
-      command: OPEN_EDITORS_COMMANDS.CLOSE_ALL.id,
-      viewId: ExplorerOpenedEditorViewId,
-      label: localize('opened.editors.close.all'),
-    });
-  }
-
-  registerMenus(menuRegistry: IMenuRegistry): void {
-    menuRegistry.registerMenuItem(MenuId.OpenEditorsContext, {
-      command: {
-        id: OPEN_EDITORS_COMMANDS.OPEN.id,
-        label: localize('opened.editors.open'),
-      },
-      order: 1,
-      group: '1_open',
-    });
-
-    menuRegistry.registerMenuItem(MenuId.OpenEditorsContext, {
-      command: {
-        id: OPEN_EDITORS_COMMANDS.OPEN_TO_THE_SIDE.id,
-        label: localize('opened.editors.openToTheSide'),
-      },
-      order: 2,
-      group: '1_open',
-    });
-
-    menuRegistry.registerMenuItem(MenuId.OpenEditorsContext, {
-      command: {
-        id: OPEN_EDITORS_COMMANDS.COMPARE_SELECTED.id,
-        label: localize('opened.editors.compare'),
-      },
-      group: '2_operator',
-    });
-
-    menuRegistry.registerMenuItem(MenuId.OpenEditorsContext, {
-      command: {
-        id: OPEN_EDITORS_COMMANDS.COPY_PATH.id,
-        label: localize('opened.editors.copyPath'),
-      },
-      group: '3_path',
-    });
-    menuRegistry.registerMenuItem(MenuId.OpenEditorsContext, {
-      command: {
-        id: OPEN_EDITORS_COMMANDS.COPY_RELATIVE_PATH.id,
-        label: localize('opened.editors.copyRelativePath'),
-      },
-      group: '3_path',
-    });
-  }
-}