@opensumi/ide-comments 2.21.13 → 2.22.0

package/src/browser/tree/comment-node.tsx

@@ -0,0 +1,130 @@
+import cls from 'classnames';
+import React, { useCallback } from 'react';
+
+import { INodeRendererProps, ClasslistComposite } from '@opensumi/ide-components';
+import { getIcon } from '@opensumi/ide-core-browser';
+
+import { CommentContentNode, CommentFileNode, CommentReplyNode } from './tree-node.defined';
+import styles from './tree-node.module.less';
+
+export interface ICommentNodeProps {
+  item: any;
+  defaultLeftPadding?: number;
+  leftPadding?: number;
+  decorations?: ClasslistComposite;
+  onClick: (ev: React.MouseEvent, item: CommentContentNode | CommentFileNode) => void;
+}
+
+export type ICommentNodeRenderedProps = ICommentNodeProps & INodeRendererProps;
+
+export const CommentNodeRendered: React.FC<ICommentNodeRenderedProps> = ({
+  item,
+  defaultLeftPadding = 8,
+  leftPadding = 8,
+  decorations,
+  onClick,
+}: ICommentNodeRenderedProps) => {
+  const handleClick = useCallback(
+    (ev: React.MouseEvent) => {
+      if (item.onSelect) {
+        item.onSelect(item);
+      }
+      onClick(ev, item as CommentContentNode);
+    },
+    [onClick],
+  );
+
+  const paddingLeft = `${
+    defaultLeftPadding +
+    (item.depth || 0) * (leftPadding || 0) +
+    (CommentContentNode.is(item) ? 16 : CommentFileNode.is(item) ? 0 : 28)
+  }px`;
+
+  const renderedNodeStyle = {
+    height: COMMENT_TREE_NODE_HEIGHT,
+    lineHeight: `${COMMENT_TREE_NODE_HEIGHT}px`,
+    paddingLeft,
+  } as React.CSSProperties;
+
+  const renderIcon = useCallback((node: CommentFileNode | CommentContentNode | CommentReplyNode) => {
+    if (CommentContentNode.is(node) || CommentFileNode.is(node)) {
+      return (
+        <div
+          className={cls(styles.icon, node.icon)}
+          style={{
+            height: COMMENT_TREE_NODE_HEIGHT,
+            lineHeight: `${COMMENT_TREE_NODE_HEIGHT}px`,
+          }}
+        ></div>
+      );
+    }
+  }, []);
+
+  const renderDisplayName = useCallback((node: CommentFileNode | CommentContentNode | CommentReplyNode) => {
+    if (CommentContentNode.is(node)) {
+      return (
+        <div className={cls(styles.segment, styles.displayname)}>
+          {node.renderedLabel ? (
+            node.renderedLabel
+          ) : (
+            <>
+              {node.comment}
+              <span className={styles.separator}>·</span>
+              {node.author.name}
+            </>
+          )}
+        </div>
+      );
+    } else {
+      return <div className={cls(styles.segment, styles.displayname)}>{node.renderedLabel}</div>;
+    }
+  }, []);
+
+  const renderDescription = useCallback(
+    (node: CommentFileNode | CommentContentNode | CommentReplyNode) => (
+      <div className={cls(styles.segment_grow, styles.description)}>{node.renderedDescription}</div>
+    ),
+    [],
+  );
+
+  const renderFolderToggle = useCallback(
+    (node: CommentFileNode) => (
+      <div
+        className={cls(styles.segment, styles.expansion_toggle, getIcon('arrow-right'), {
+          [`${styles.mod_collapsed}`]: !(node as CommentFileNode).expanded,
+        })}
+      />
+    ),
+    [],
+  );
+
+  const renderTwice = useCallback((node: CommentFileNode | CommentContentNode | CommentReplyNode) => {
+    if (CommentFileNode.is(node)) {
+      return renderFolderToggle(node as CommentFileNode);
+    }
+  }, []);
+
+  const getItemTooltip = useCallback(() => item.tooltip, [item]);
+
+  return (
+    <div
+      key={item.id}
+      onClick={handleClick}
+      title={getItemTooltip()}
+      className={cls(styles.search_node, decorations ? decorations.classlist : null)}
+      style={renderedNodeStyle}
+      data-id={item.id}
+    >
+      <div className={styles.content}>
+        {renderTwice(item)}
+        {renderIcon(item)}
+        <div className={styles.overflow_wrap}>
+          {renderDisplayName(item)}
+          {renderDescription(item)}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const COMMENT_TREE_NODE_HEIGHT = 22;

package/src/browser/tree/tree-model.service.ts

@@ -0,0 +1,173 @@
+/* eslint-disable import/order */
+import { Injectable, Autowired, INJECTOR_TOKEN, Injector, Optional } from '@opensumi/di';
+import { DecorationsManager, Decoration, IRecycleTreeHandle, TreeModel } from '@opensumi/ide-components';
+import { DisposableCollection, Emitter, Event, Disposable } from '@opensumi/ide-core-browser';
+import { ICommentsService } from '../../common/index';
+
+import { CommentContentNode, CommentFileNode, CommentReplyNode, CommentRoot } from './tree-node.defined';
+import styles from './tree-node.module.less';
+
+export interface IEditorTreeHandle extends IRecycleTreeHandle {
+  hasDirectFocus: () => boolean;
+}
+
+@Injectable({ multiple: true })
+export class CommentTreeModel extends TreeModel {
+  constructor(@Optional() root: CommentRoot) {
+    super();
+    this.init(root);
+  }
+}
+
+@Injectable()
+export class CommentModelService extends Disposable {
+  @Autowired(ICommentsService)
+  private readonly commentService: ICommentsService;
+
+  @Autowired(INJECTOR_TOKEN)
+  private readonly injector: Injector;
+
+  private _treeModel: CommentTreeModel;
+
+  private _whenReady: Promise<void>;
+
+  private _decorations: DecorationsManager;
+  private _commentTreeHandle: IRecycleTreeHandle;
+
+  // All decoration
+  private selectedDecoration: Decoration = new Decoration(styles.mod_selected); // selected
+  private focusedDecoration: Decoration = new Decoration(styles.mod_focused); // focused
+
+  private _focusedNode: CommentFileNode | CommentContentNode | CommentReplyNode | null;
+  private _selectedNodes: (CommentFileNode | CommentContentNode | CommentReplyNode)[] = [];
+
+  private onDidUpdateTreeModelEmitter: Emitter<CommentTreeModel | undefined> = new Emitter();
+
+  private disposableCollection: DisposableCollection = new DisposableCollection();
+
+  constructor() {
+    super();
+    this._whenReady = this.initTreeModel();
+  }
+
+  get onDidUpdateTreeModel(): Event<CommentTreeModel | undefined> {
+    return this.onDidUpdateTreeModelEmitter.event;
+  }
+
+  get whenReady() {
+    return this._whenReady;
+  }
+
+  get commentTreeHandle() {
+    return this._commentTreeHandle;
+  }
+
+  get decorations() {
+    return this._decorations;
+  }
+
+  get treeModel() {
+    return this._treeModel;
+  }
+
+  get focusedNode() {
+    return this._focusedNode;
+  }
+
+  get selectedNodes() {
+    return this._selectedNodes;
+  }
+
+  async initTreeModel() {
+    const childs = await this.commentService.resolveChildren();
+    if (!childs) {
+      return;
+    }
+    const root = childs[0];
+    if (!root) {
+      return;
+    }
+    this._treeModel = this.injector.get<any>(CommentTreeModel, [root]);
+    await this._treeModel.ensureReady;
+
+    this.initDecorations(root);
+
+    this.disposables.push(
+      this.commentService.onThreadsCommentChange(() => {
+        this.refresh();
+      }),
+    );
+
+    this.onDidUpdateTreeModelEmitter.fire(this._treeModel);
+  }
+
+  initDecorations(root) {
+    this._decorations = new DecorationsManager(root as any);
+    this._decorations.addDecoration(this.selectedDecoration);
+    this._decorations.addDecoration(this.focusedDecoration);
+    return this._decorations;
+  }
+
+  handleTreeHandler(handle: IRecycleTreeHandle) {
+    this._commentTreeHandle = handle;
+  }
+
+  applyFocusedDecoration = (target: CommentFileNode | CommentContentNode | CommentReplyNode, dispatch = true) => {
+    if (target) {
+      for (const target of this._selectedNodes) {
+        this.selectedDecoration.removeTarget(target);
+      }
+      if (this.focusedNode) {
+        this.focusedDecoration.removeTarget(this.focusedNode);
+      }
+      this.selectedDecoration.addTarget(target);
+      this.focusedDecoration.addTarget(target);
+      this._focusedNode = target;
+      this._selectedNodes = [target];
+
+      dispatch && this.treeModel?.dispatchChange();
+    }
+  };
+
+  removeFocusedDecoration = () => {
+    if (this.focusedNode) {
+      this.focusedDecoration.removeTarget(this.focusedNode);
+      this.treeModel?.dispatchChange();
+    }
+    this._focusedNode = null;
+  };
+
+  handleTreeBlur = () => {
+    this.removeFocusedDecoration();
+  };
+
+  handleItemClick = async (ev: React.MouseEvent, node: CommentFileNode | CommentContentNode | CommentReplyNode) => {
+    this.applyFocusedDecoration(node);
+    if (CommentFileNode.is(node)) {
+      this.toggleDirectory(node);
+    } else if (node) {
+    }
+  };
+
+  toggleDirectory = (item: CommentFileNode | CommentContentNode) => {
+    if (item.expanded) {
+      this.commentTreeHandle.collapseNode(item);
+    } else {
+      this.commentTreeHandle.expandNode(item);
+    }
+  };
+
+  async refresh() {
+    await this.whenReady;
+    this.treeModel.root.refresh();
+  }
+
+  async collapsedAll() {
+    await this.whenReady;
+    return this.treeModel.root.collapsedAll();
+  }
+
+  dispose() {
+    this.disposableCollection.dispose();
+  }
+}

package/src/browser/tree/tree-node.defined.ts

@@ -0,0 +1,167 @@
+import React from 'react';
+
+import { TreeNode, CompositeTreeNode, ITree } from '@opensumi/ide-components';
+import { URI } from '@opensumi/ide-core-common';
+
+import { ICommentAuthorInformation, ICommentsService, ICommentsThread } from '../../common/index';
+
+export class CommentRoot extends CompositeTreeNode {
+  static is(node: CommentFileNode | CommentRoot): node is CommentRoot {
+    return !!node && !node.parent;
+  }
+
+  constructor(tree: ICommentsService) {
+    super(tree as ITree, undefined);
+  }
+
+  get expanded() {
+    return true;
+  }
+}
+
+export class CommentFileNode extends CompositeTreeNode {
+  public static is(node: any): node is CommentFileNode {
+    return CompositeTreeNode.is(node) && 'threads' in node;
+  }
+
+  private _renderedLabel: string | React.ReactNode;
+  private _renderedDescription: string | React.ReactNode;
+
+  private _onSelectHandler: (node?: CommentFileNode) => void;
+
+  constructor(
+    tree: ICommentsService,
+    public threads: ICommentsThread[],
+    description = '',
+    public tooltip: string,
+    public icon: string,
+    public resource: URI,
+    parent: CommentRoot,
+  ) {
+    super(tree as ITree, parent);
+    this.isExpanded = true;
+    this._renderedLabel = this.resource.displayName;
+    this._renderedDescription = description;
+  }
+
+  set label(value: any) {
+    this._renderedLabel = value as string | React.ReactNode;
+  }
+
+  set description(value: any) {
+    this._renderedDescription = value as string | React.ReactNode;
+  }
+
+  get renderedLabel() {
+    return this._renderedLabel;
+  }
+
+  get renderedDescription() {
+    return this._renderedDescription;
+  }
+
+  set onSelect(handler: (node?: CommentFileNode) => void) {
+    this._onSelectHandler = handler;
+  }
+
+  get onSelect() {
+    return this._onSelectHandler;
+  }
+}
+
+export class CommentContentNode extends CompositeTreeNode {
+  public static is(node: any): node is CommentContentNode {
+    return CompositeTreeNode.is(node) && 'author' in node;
+  }
+
+  private _renderedLabel: string | React.ReactNode;
+  private _renderedDescription: string | React.ReactNode;
+
+  private _onSelectHandler: (node?: CommentContentNode) => void;
+
+  constructor(
+    tree: ICommentsService,
+    public thread: ICommentsThread,
+    public comment: string,
+    description = '',
+    public icon: string,
+    public author: ICommentAuthorInformation,
+    public resource: URI,
+    parent: CommentFileNode | undefined,
+  ) {
+    super(tree as ITree, parent);
+    this._renderedDescription = description;
+  }
+
+  get expanded() {
+    return true;
+  }
+
+  set label(value: string | React.ReactNode) {
+    this._renderedLabel = value;
+  }
+
+  set description(value: string | React.ReactNode) {
+    this._renderedDescription = value;
+  }
+
+  get renderedLabel() {
+    return this._renderedLabel;
+  }
+
+  get renderedDescription() {
+    return this._renderedDescription;
+  }
+
+  set onSelect(handler: (node?: CommentContentNode) => void) {
+    this._onSelectHandler = handler;
+  }
+
+  get onSelect() {
+    return this._onSelectHandler;
+  }
+}
+
+export class CommentReplyNode extends TreeNode {
+  private _renderedLabel: string | React.ReactNode;
+  private _renderedDescription: string | React.ReactNode;
+  private _onSelectHandler: (node?: CommentReplyNode) => void;
+
+  constructor(
+    tree: ICommentsService,
+    public thread: ICommentsThread,
+    label: string,
+    description = '',
+    public icon: string,
+    public resource: URI,
+    parent: CommentContentNode | undefined,
+  ) {
+    super(tree as ITree, parent);
+    this._renderedLabel = label;
+    this._renderedDescription = description;
+  }
+
+  set label(value: any) {
+    this._renderedLabel = value as string | React.ReactNode;
+  }
+
+  set description(value: any) {
+    this._renderedDescription = value as string | React.ReactNode;
+  }
+
+  get renderedLabel() {
+    return this._renderedLabel;
+  }
+
+  get renderedDescription() {
+    return this._renderedDescription;
+  }
+
+  set onSelect(handler: (node?: CommentReplyNode) => void) {
+    this._onSelectHandler = handler;
+  }
+
+  get onSelect() {
+    return this._onSelectHandler;
+  }
+}

package/src/browser/tree/tree-node.module.less

@@ -0,0 +1,154 @@
+.search_node {
+  height: 22px;
+  line-height: 22px;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  cursor: pointer;
+
+  .displayname {
+    color: var(--foreground);
+    margin-right: 6px;
+    display: inline;
+    white-space: pre;
+  }
+
+  .description {
+    display: inline;
+    color: var(--descriptionForeground);
+  }
+
+  .separator {
+    margin: 0 3px;
+  }
+
+  .content {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  .status {
+    text-align: center;
+    font-size: 12px;
+  }
+
+  .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;
+      }
+    }
+  }
+
+  .segment_grow {
+    flex-grow: 1 !important;
+    text-align: left;
+    z-index: 10;
+    padding-right: 5px;
+
+    &.overflow_visible {
+      overflow: visible !important;
+    }
+  }
+
+  .tail {
+    text-align: center;
+    margin-right: 10px;
+    position: relative;
+    height: 22px;
+    display: flex;
+    align-items: center;
+  }
+
+  .overflow_wrap {
+    flex: 1;
+    flex-shrink: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: left;
+    color: var(--foreground);
+  }
+
+  .flex_wrap {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .icon {
+    position: relative;
+    color: var(--icon-foreground);
+    margin-right: 4px;
+    &:before {
+      font-size: 16px;
+      text-align: center;
+    }
+  }
+  &:hover {
+    color: var(--kt-tree-hoverForeground);
+    background: var(--kt-tree-hoverBackground);
+    .action_bar {
+      display: block;
+    }
+    &::before {
+      display: none;
+    }
+  }
+
+  &.mod_selected {
+    color: var(--kt-tree-inactiveSelectionForeground);
+    background: var(--kt-tree-inactiveSelectionBackground);
+    .expansion_toggle,
+    .description {
+      color: var(--kt-tree-inactiveSelectionForeground);
+    }
+  }
+
+  &.mod_focused {
+    outline: 1px solid var(--list-focusOutline);
+    outline-offset: -1px;
+    .expansion_toggle,
+    .description {
+      color: var(--kt-tree-activeSelectionForeground);
+    }
+  }
+
+  &.mod_actived {
+    outline: 1px solid var(--list-focusOutline);
+    outline-offset: -1px;
+    .expansion_toggle {
+      color: var(--kt-tree-activeSelectionForeground);
+    }
+  }
+}
+
+.expansion_toggle {
+  min-width: 20px;
+  display: flex;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: 16px;
+  color: var(--foreground);
+  &.mod_collapsed {
+    &:before {
+      display: block;
+    }
+  }
+
+  &:not(.mod_collapsed) {
+    &:before {
+      display: block;
+      transform: rotate(90deg);
+    }
+  }
+}