@opensumi/ide-opened-editor 2.21.6 → 2.21.7-next-1670228715.0

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

@@ -0,0 +1,195 @@
+.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

@@ -0,0 +1,232 @@
+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

@@ -0,0 +1,193 @@
+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',
+    });
+  }
+}