Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: #1772 code review 组件,代码展开按钮与评论相邻时,点击展开按钮会报错 #1773

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 37 additions & 9 deletions packages/devui-vue/devui/code-review/src/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@ export function parseDiffCode(container: HTMLElement, code: string, outputFormat
const trList = diffHtmlStr.match(TableTrReg) as RegExpMatchArray;
const trListLength = trList.length;
let newTrStr = '';
const offset = trListLength / 2;
const offset = Math.floor(trListLength / 2);
for (let i = 0; i < trListLength / 2; i++) {
const leftTdList = trList[i].match(TableTdReg);
const rightTdList = trList[i + offset].match(TableTdReg);
Expand Down Expand Up @@ -197,10 +197,37 @@ export function setLineNumberInDataset(trNode: HTMLElement, prevL: number, prevR

// 中间行展开后,折叠行数小于阈值时,将向上向下展开按钮更新为全部展开
export function updateExpandUpDownButton(trNode: HTMLElement) {
trNode.children[0].children[0].remove();
trNode.children[0].children[0].classList.remove('up-expand');
trNode.children[0].children[0].classList.add('all-expand');
trNode.children[0].children[0].innerHTML = AllExpandIcon();
trNode.children[0]?.children[0]?.remove();
trNode.children[0]?.children[0]?.classList.remove('up-expand');
trNode.children[0]?.children[0]?.classList.add('all-expand');
trNode.children[0]?.children[0] && (trNode.children[0].children[0].innerHTML = AllExpandIcon());
}

/**
* 查找给定节点的前一个同级元素节点。
* 适用于下一行是新增行或者删除行的情况
*
* @param _node 如果折叠行后一行左边获取不到行数,则寻找第一个左边有行数的行。
* @returns 返回找到的后一个同级元素节点,如果没有找到则返回null。
*/
export function findNextElement(_node: Element): Element {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

在单栏模式也存在此问题,针对该问题修复可以尝试两种模式考虑

if (_node.children[0]?.innerText) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

此处以及下文代码一些地方会存在TS错误

return _node;
}
return findNextElement(_node.nextElementSibling);
}
/**
* 查找给定节点的前一个同级元素节点。
* 适用于上一行是新增行或者删除行或者评论行的情况
*
* @param _node 如果折叠行后一行左边获取不到行数,则寻找第一个左边有行数的行。
* @returns 返回找到的前一个同级元素节点,如果没有找到则返回null。
*/
export function findPrevElement(_node: Element): Element {
if (_node.children[0]?.innerText) {
return _node;
}
return findPrevElement(_node.previousElementSibling);
}

/*
Expand All @@ -221,20 +248,20 @@ export function updateLineNumberInDatasetForDoubleColumn(
let nextR: number;
let prevR: number;
if (position === 'top') {
const nextLineNode = trNode.nextElementSibling as HTMLElement;
const nextLineNode = findNextElement(trNode.nextElementSibling) as HTMLElement;
nextL = parseInt((nextLineNode.children[0] as HTMLElement).innerText) - 1;
prevL = Math.max(nextL - expandThreshold + 1, 1);
nextR = parseInt((nextLineNode.children[2] as HTMLElement).innerText) - 1;
prevR = Math.max(nextR - expandThreshold + 1, 1);
} else if (position === 'bottom') {
const prevLineNode = trNode.previousElementSibling as HTMLElement;
const prevLineNode = findPrevElement(trNode.previousElementSibling) as HTMLElement;
prevL = parseInt((prevLineNode?.children[0] as HTMLElement)?.innerText) + 1;
nextL = prevL + expandThreshold - 1;
prevR = parseInt((prevLineNode?.children[2] as HTMLElement)?.innerText) + 1;
nextR = prevR + expandThreshold - 1;
} else {
const prevLineNode = trNode.previousElementSibling as HTMLElement;
const nextLineNode = trNode.nextElementSibling as HTMLElement;
const prevLineNode = findPrevElement(trNode.previousElementSibling) as HTMLElement;
const nextLineNode = findNextElement(trNode.nextElementSibling) as HTMLElement;
const prevLineNumber = parseInt((prevLineNode.children[0] as HTMLElement).innerText);
const nextLineNumber = parseInt((nextLineNode.children[0] as HTMLElement).innerText);
prevL = prevLineNumber + 1;
Expand All @@ -243,6 +270,7 @@ export function updateLineNumberInDatasetForDoubleColumn(
nextR = parseInt((nextLineNode.children[2] as HTMLElement).innerText) - 1;
const isExpandAll = nextLineNumber - prevLineNumber <= expandThreshold;
if (isExpandAll && updateExpandButton) {
trNode.style.display = 'none';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

此处的display置为none操作是用来何种作用呢

updateExpandUpDownButton(trNode);
}
}
Expand Down