From fe8b4055f2a437e45638a80263f5bc165263d738 Mon Sep 17 00:00:00 2001 From: Mark Sujew Date: Sun, 10 Dec 2023 13:59:12 +0000 Subject: [PATCH 1/2] Fix compressed navigator indent highlight --- .../compressed-tree-widget.tsx | 34 +++++++++++++++---- .../core/src/browser/tree/tree-widget.tsx | 31 +++++++++++------ 2 files changed, 48 insertions(+), 17 deletions(-) diff --git a/packages/core/src/browser/tree/tree-compression/compressed-tree-widget.tsx b/packages/core/src/browser/tree/tree-compression/compressed-tree-widget.tsx index ee56f7bf3805b..b9502322dead5 100644 --- a/packages/core/src/browser/tree/tree-compression/compressed-tree-widget.tsx +++ b/packages/core/src/browser/tree/tree-compression/compressed-tree-widget.tsx @@ -58,6 +58,12 @@ export class CompressedTreeWidget extends TreeViewWelcomeWidget { } } + protected override shouldRenderIndent(node: TreeNode): boolean { + return !this.compressionToggle.compress + || !this.compressionService.isCompressionParticipant(node) + || this.compressionService.getCompressionHead(node) === node; + } + protected override shouldDisplayNode(node: TreeNode): boolean { if (this.compressionToggle.compress && this.compressionService.isCompressionParticipant(node) && !this.compressionService.isCompressionHead(node)) { return false; @@ -66,14 +72,18 @@ export class CompressedTreeWidget extends TreeViewWelcomeWidget { } protected override getDepthForNode(node: TreeNode, depths: Map): number { - if (!this.compressionToggle.compress) { return super.getDepthForNode(node, depths); } + if (!this.compressionToggle.compress) { + return super.getDepthForNode(node, depths); + } const parent = this.compressionService.getCompressionHead(node.parent) ?? node.parent; const parentDepth = depths.get(parent); return parentDepth === undefined ? 0 : TreeNode.isVisible(node.parent) ? parentDepth + 1 : parentDepth; } protected override toNodeRow(node: TreeNode, index: number, depth: number): CompressedNodeRow { - if (!this.compressionToggle.compress) { return super.toNodeRow(node, index, depth); } + if (!this.compressionToggle.compress) { + return super.toNodeRow(node, index, depth); + } const row: CompressedNodeRow = { node, index, depth }; if (this.compressionService.isCompressionHead(node)) { row.compressionChain = this.compressionService.getCompressionChain(node); @@ -102,7 +112,9 @@ export class CompressedTreeWidget extends TreeViewWelcomeWidget { } protected override getCaptionChildren(node: TreeNode, props: CompressedNodeProps): React.ReactNode { - if (!this.compressionToggle.compress || !props.compressionChain) { return super.getCaptionChildren(node, props); } + if (!this.compressionToggle.compress || !props.compressionChain) { + return super.getCaptionChildren(node, props); + } return props.compressionChain.map((subNode, index, self) => { const classes = ['theia-tree-compressed-label-part']; if (SelectableTreeNode.isSelected(subNode)) { @@ -129,21 +141,27 @@ export class CompressedTreeWidget extends TreeViewWelcomeWidget { } protected override handleUp(event: KeyboardEvent): void { - if (!this.compressionToggle.compress) { return super.handleUp(event); } + if (!this.compressionToggle.compress) { + return super.handleUp(event); + } const type = this.props.multiSelect && this.hasShiftMask(event) ? TreeSelection.SelectionType.RANGE : undefined; this.model.selectPrevRow(type); this.node.focus(); } protected override handleDown(event: KeyboardEvent): void { - if (!this.compressionToggle.compress) { return super.handleDown(event); } + if (!this.compressionToggle.compress) { + return super.handleDown(event); + } const type = this.props.multiSelect && this.hasShiftMask(event) ? TreeSelection.SelectionType.RANGE : undefined; this.model.selectNextRow(type); this.node.focus(); } protected override async handleLeft(event: KeyboardEvent): Promise { - if (!this.compressionToggle.compress) { return super.handleLeft(event); } + if (!this.compressionToggle.compress) { + return super.handleLeft(event); + } if (Boolean(this.props.multiSelect) && (this.hasCtrlCmdMask(event) || this.hasShiftMask(event))) { return; } @@ -160,7 +178,9 @@ export class CompressedTreeWidget extends TreeViewWelcomeWidget { } protected override async handleRight(event: KeyboardEvent): Promise { - if (!this.compressionToggle.compress) { return super.handleRight(event); } + if (!this.compressionToggle.compress) { + return super.handleRight(event); + } if (Boolean(this.props.multiSelect) && (this.hasCtrlCmdMask(event) || this.hasShiftMask(event))) { return; } diff --git a/packages/core/src/browser/tree/tree-widget.tsx b/packages/core/src/browser/tree/tree-widget.tsx index d2034c3fd0421..815f5c86a009b 100644 --- a/packages/core/src/browser/tree/tree-widget.tsx +++ b/packages/core/src/browser/tree/tree-widget.tsx @@ -894,22 +894,33 @@ export class TreeWidget extends ReactWidget implements StatefulWidget { let current: TreeNode | undefined = node; let depth = props.depth; while (current && depth) { - const classNames: string[] = [TREE_NODE_INDENT_GUIDE_CLASS]; - if (this.needsActiveIndentGuideline(current)) { - classNames.push('active'); - } else { - classNames.push(renderIndentGuides === 'onHover' ? 'hover' : 'always'); + if (this.shouldRenderIndent(current)) { + const classNames: string[] = [TREE_NODE_INDENT_GUIDE_CLASS]; + if (this.needsActiveIndentGuideline(current)) { + classNames.push('active'); + } else { + classNames.push(renderIndentGuides === 'onHover' ? 'hover' : 'always'); + } + const paddingLeft = this.getDepthPadding(depth); + indentDivs.unshift(
); + depth--; } - const paddingLeft = this.getDepthPadding(depth); - indentDivs.unshift(
); current = current.parent; - depth--; } return indentDivs; } + /** + * Determines whether an indentation div should be rendered for the specified tree node. + * If there are multiple tree node inside of a single rendered row, + * this method should only return true for the first node. + */ + protected shouldRenderIndent(node: TreeNode): boolean { + return true; + } + protected needsActiveIndentGuideline(node: TreeNode): boolean { const parent = node.parent; if (!parent || !this.isExpandable(parent)) { From e09a9f9a3ed502b403f42629e9af497896713ed7 Mon Sep 17 00:00:00 2001 From: Mark Sujew Date: Tue, 19 Dec 2023 15:04:52 +0100 Subject: [PATCH 2/2] Update tree-widget.tsx --- packages/core/src/browser/tree/tree-widget.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/browser/tree/tree-widget.tsx b/packages/core/src/browser/tree/tree-widget.tsx index 815f5c86a009b..029ff65db4a02 100644 --- a/packages/core/src/browser/tree/tree-widget.tsx +++ b/packages/core/src/browser/tree/tree-widget.tsx @@ -914,7 +914,7 @@ export class TreeWidget extends ReactWidget implements StatefulWidget { /** * Determines whether an indentation div should be rendered for the specified tree node. - * If there are multiple tree node inside of a single rendered row, + * If there are multiple tree nodes inside of a single rendered row, * this method should only return true for the first node. */ protected shouldRenderIndent(node: TreeNode): boolean {