mirrors/VTable
1
0
Fork 0
mirror of https://github.com/VisActor/VTable synced 2024-11-22 01:52:03 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix: fix highlight logic in InvertHighlightPlugin

Browse Source
This commit is contained in:
Rui-Sun 2024-10-17 14:23:42 +08:00
parent 023da0bad6
commit a2f99ca64e
2 changed files with 39 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
packages/vtable/examples/interactive/mask.ts
View File

@ -18,7 +18,7 @@ const generatePersons = count => {
};
export function createTable() {
const records = generatePersons(5);
const records = generatePersons(20);
const columns: VTable.ColumnsDefine = [
{
field: 'image',
@ -76,7 +76,10 @@ export function createTable() {
records,
columns,
theme: VTable.themes.DARK,
heightMode: 'adaptive'
// heightMode: 'adaptive',
select: {
disableSelect: true
}
};
const tableInstance = new VTable.ListTable(option);
window.tableInstance = tableInstance;
@ -86,14 +89,32 @@ export function createTable() {
});
const highlightPlugin = new VTable.InvertHighlightPlugin(tableInstance);
highlightPlugin.setInvertHighlightRange({
start: {
col: 0,
row: 6
},
end: {
col: 6,
row: 6
// highlightPlugin.setInvertHighlightRange({
// start: {
// col: 0,
// row: 6
// },
// end: {
// col: 6,
// row: 6
// }
// });
tableInstance.on('click_cell', event => {
const { col, row } = event;
if (tableInstance.isHeader(col, row)) {
highlightPlugin.setInvertHighlightRange(undefined);
} else {
highlightPlugin.setInvertHighlightRange({
start: {
col: 0,
row
},
end: {
col: tableInstance.colCount - 1,
row
}
});
}
});
}

11
packages/vtable/src/plugins/invert-highlight.ts
View File

@ -72,7 +72,14 @@ export class InvertHighlightPlugin {
}
cell.attachShadow(cell.shadowRoot);
const shadowGroup = cell.shadowRoot;
if (range && !shadowGroup.firstChild && !cellInRange(range, cell.col, cell.row)) {
if (!range) {
// no highlight
shadowGroup.removeAllChild();
} else if (cellInRange(range, cell.col, cell.row)) {
// inside highlight
shadowGroup.removeAllChild();
} else if (!shadowGroup.firstChild) {
// outside highlight
const shadowRect = createRect({
x: 0,
y: 0,
@ -83,8 +90,6 @@ export class InvertHighlightPlugin {
});
shadowRect.name = 'shadow-rect';
shadowGroup.appendChild(shadowRect);
} else {
shadowGroup.removeAllChild();
}
});
}