Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-09-22 00:20:47 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

🎨 https://github.com/siyuan-note/siyuan/issues/15562

Browse source
This commit is contained in:
Vanessa 2025-08-14 00:22:27 +08:00
parent 1712d4be68
commit 5e74bb89b9
1 changed files with 52 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

69
app/src/protyle/render/av/render.ts
View file

@ -20,6 +20,12 @@ import {getPageSize} from "./groups";
import {clearSelect} from "../../util/clearSelect"; import {clearSelect} from "../../util/clearSelect";
import {showMessage} from "../../../dialog/message"; import {showMessage} from "../../../dialog/message";
interface IIds {
groupId: string,
rowId: string,
colId?: string
}
interface ITableOptions { interface ITableOptions {
protyle: IProtyle, protyle: IProtyle,
blockElement: HTMLElement, blockElement: HTMLElement,
@ -31,11 +37,11 @@ interface ITableOptions {
alignSelf: string, alignSelf: string,
headerTransform: string, headerTransform: string,
footerTransform: string, footerTransform: string,
selectCellId: string,
isSearching: boolean, isSearching: boolean,
selectRowIds: string[], selectCellId: IIds,
dragFillId: string, selectRowIds: IIds[],
activeIds: string[], dragFillId: IIds,
activeIds: IIds[],
query: string, query: string,
pageSizes: { [key: string]: string }, pageSizes: { [key: string]: string },
} }
@ -300,7 +306,10 @@ const afterRenderTable = (options: ITableOptions) => {
}, Constants.TIMEOUT_LOAD); }, Constants.TIMEOUT_LOAD);
} }
if (options.resetData.selectCellId) { if (options.resetData.selectCellId) {
const newCellElement = options.blockElement.querySelector(`.av__row[data-id="${options.resetData.selectCellId.split(Constants.ZWSP)[0]}"] .av__cell[data-col-id="${options.resetData.selectCellId.split(Constants.ZWSP)[1]}"]`); let newCellElement = options.blockElement.querySelector(`.av__body[data-group-id="${options.resetData.selectCellId.groupId}"] .av__row[data-id="${options.resetData.selectCellId.rowId}"] .av__cell[data-col-id="${options.resetData.selectCellId.colId}"]`);
if (!newCellElement) {
newCellElement = options.blockElement.querySelector(`.av__row[data-id="${options.resetData.selectCellId.rowId}"] .av__cell[data-col-id="${options.resetData.selectCellId.colId}"]`);
}
if (newCellElement) { if (newCellElement) {
newCellElement.classList.add("av__cell--select"); newCellElement.classList.add("av__cell--select");
cellScrollIntoView(options.blockElement, newCellElement); cellScrollIntoView(options.blockElement, newCellElement);
@ -320,7 +329,10 @@ const afterRenderTable = (options: ITableOptions) => {
} }
} }
options.resetData.selectRowIds.forEach((selectRowId, index) => { options.resetData.selectRowIds.forEach((selectRowId, index) => {
const rowElement = options.blockElement.querySelector(`.av__row[data-id="${selectRowId}"]`) as HTMLElement; let rowElement = options.blockElement.querySelector(`.av__body[data-group-id="${selectRowId.groupId}"] .av__row[data-id="${selectRowId.rowId}"]`) as HTMLElement;
if (!rowElement) {
rowElement = options.blockElement.querySelector(`.av__row[data-id="${selectRowId.rowId}"]`) as HTMLElement;
}
if (rowElement) { if (rowElement) {
rowElement.classList.add("av__row--select"); rowElement.classList.add("av__row--select");
rowElement.querySelector(".av__firstcol use").setAttribute("xlink:href", "#iconCheck"); rowElement.querySelector(".av__firstcol use").setAttribute("xlink:href", "#iconCheck");
@ -340,10 +352,18 @@ const afterRenderTable = (options: ITableOptions) => {
} }
}); });
if (options.resetData.dragFillId) { if (options.resetData.dragFillId) {
addDragFill(options.blockElement.querySelector(`.av__row[data-id="${options.resetData.dragFillId.split(Constants.ZWSP)[0]}"] .av__cell[data-col-id="${options.resetData.dragFillId.split(Constants.ZWSP)[1]}"]`)); let dragCellElement = options.blockElement.querySelector(`.av__body[data-group-id="${options.resetData.dragFillId.groupId}"] .av__row[data-id="${options.resetData.dragFillId.rowId}"] .av__cell[data-col-id="${options.resetData.dragFillId.colId}"]`);
if (!dragCellElement) {
dragCellElement = options.blockElement.querySelector(`.av__row[data-id="${options.resetData.dragFillId.rowId}"] .av__cell[data-col-id="${options.resetData.dragFillId.colId}"]`);
}
addDragFill(dragCellElement);
} }
options.resetData.activeIds.forEach(activeId => { options.resetData.activeIds.forEach(activeId => {
options.blockElement.querySelector(`.av__row[data-id="${activeId.split(Constants.ZWSP)[0]}"] .av__cell[data-col-id="${activeId.split(Constants.ZWSP)[1]}"]`)?.classList.add("av__cell--active"); let activeCellElement = options.blockElement.querySelector(`.av__body[data-group-id="${activeId.groupId}"] .av__row[data-id="${activeId.rowId}"] .av__cell[data-col-id="${activeId.colId}"]`);
if (!activeCellElement) {
activeCellElement = options.blockElement.querySelector(`.av__row[data-id="${activeId.rowId}"] .av__cell[data-col-id="${activeId.colId}"]`);
}
activeCellElement?.classList.add("av__cell--active");
}); });
if (getSelection().rangeCount > 0) { if (getSelection().rangeCount > 0) {
// 修改表头后光标重新定位 // 修改表头后光标重新定位
@ -444,26 +464,41 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: (data: IAV) =
return; return;
} }
let selectCellId = ""; let selectCellId;
const selectCellElement = e.querySelector(".av__cell--select") as HTMLElement; const selectCellElement = e.querySelector(".av__cell--select") as HTMLElement;
if (selectCellElement) { if (selectCellElement) {
selectCellId = (hasClosestByClassName(selectCellElement, "av__row") as HTMLElement).dataset.id + Constants.ZWSP + selectCellElement.getAttribute("data-col-id"); selectCellId = {
groupId: (hasClosestByClassName(selectCellElement, "av__body") as HTMLElement).dataset.groupId || "",
rowId: (hasClosestByClassName(selectCellElement, "av__row") as HTMLElement).dataset.id,
colId: selectCellElement.getAttribute("data-col-id"),
};
} }
const selectRowIds: string[] = []; const selectRowIds: IIds[] = [];
e.querySelectorAll(".av__row--select").forEach(rowItem => { e.querySelectorAll(".av__row--select").forEach(rowItem => {
const rowId = rowItem.getAttribute("data-id"); const rowId = rowItem.getAttribute("data-id");
if (rowId) { if (rowId) {
selectRowIds.push(rowId); selectRowIds.push({
groupId: (hasClosestByClassName(rowItem, "av__body") as HTMLElement).dataset.groupId || "",
rowId
});
} }
}); });
let dragFillId = ""; let dragFillId;
const dragFillElement = e.querySelector(".av__drag-fill") as HTMLElement; const dragFillElement = e.querySelector(".av__drag-fill") as HTMLElement;
if (dragFillElement) { if (dragFillElement) {
dragFillId = (hasClosestByClassName(dragFillElement, "av__row") as HTMLElement).dataset.id + Constants.ZWSP + dragFillElement.parentElement.getAttribute("data-col-id"); dragFillId = {
groupId: (hasClosestByClassName(dragFillElement, "av__body") as HTMLElement).dataset.groupId || "",
rowId: (hasClosestByClassName(dragFillElement, "av__row") as HTMLElement).dataset.id,
colId: dragFillElement.parentElement.getAttribute("data-col-id"),
};
} }
const activeIds: string[] = []; const activeIds: IIds[] = [];
e.querySelectorAll(".av__cell--active").forEach((item: HTMLElement) => { e.querySelectorAll(".av__cell--active").forEach((item: HTMLElement) => {
activeIds.push((hasClosestByClassName(item, "av__row") as HTMLElement).dataset.id + Constants.ZWSP + item.getAttribute("data-col-id")); activeIds.push({
groupId: (hasClosestByClassName(item, "av__body") as HTMLElement).dataset.groupId || "",
rowId: (hasClosestByClassName(item, "av__row") as HTMLElement).dataset.id,
colId: item.getAttribute("data-col-id"),
});
}); });
const searchInputElement = e.querySelector('[data-type="av-search"]') as HTMLInputElement; const searchInputElement = e.querySelector('[data-type="av-search"]') as HTMLInputElement;
const pageSizes: { [key: string]: string } = {}; const pageSizes: { [key: string]: string } = {};
@ -520,7 +555,7 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: (data: IAV) =
renderGroupTable({blockElement: e, protyle, cb, renderAll, data: response.data, resetData}); renderGroupTable({blockElement: e, protyle, cb, renderAll, data: response.data, resetData});
return; return;
} }
const avBodyHTML = `<div class="av__body" data-page-size="${data.pageSize}" style="float: left"> const avBodyHTML = `<div class="av__body" data-group-id="" data-page-size="${data.pageSize}" style="float: left">
${getTableHTMLs(data, e)} ${getTableHTMLs(data, e)}
</div>`; </div>`;
if (renderAll) { if (renderAll) {