Vanessa 2024-12-28 00:05:33 +08:00
parent 35b7a7cfca
commit fd10e51164
3 changed files with 52 additions and 24 deletions

View file

@ -11,8 +11,9 @@ import {renderAVAttribute} from "./blockAttr";
import {showMessage} from "../../../dialog/message"; import {showMessage} from "../../../dialog/message";
import {addClearButton} from "../../../util/addClearButton"; import {addClearButton} from "../../../util/addClearButton";
import {escapeAriaLabel, escapeAttr, escapeHtml} from "../../../util/escape"; import {escapeAriaLabel, escapeAttr, escapeHtml} from "../../../util/escape";
import {electronUndo} from "../../undo";
export const avRender = (element: Element, protyle: IProtyle, cb?: () => void, viewID?: string) => { export const avRender = (element: Element, protyle: IProtyle, cb?: () => void, viewID?: string, renderAll = true) => {
let avElements: Element[] = []; let avElements: Element[] = [];
if (element.getAttribute("data-type") === "NodeAttributeView") { if (element.getAttribute("data-type") === "NodeAttributeView") {
// 编辑器内代码块编辑渲染 // 编辑器内代码块编辑渲染
@ -209,6 +210,25 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex)}
viewData = item; viewData = item;
} }
}); });
const avBodyHTML = `<div class="av__body">
${tableHTML}
<div class="av__row--util${data.rowCount > data.rows.length ? " av__readonly--show" : ""}">
<div class="av__colsticky">
<button class="b3-button" data-type="av-add-bottom">
<svg><use xlink:href="#iconAdd"></use></svg>
<span>${window.siyuan.languages.newRow}</span>
</button>
<span class="fn__space"></span>
<button class="b3-button${data.rowCount > data.rows.length ? "" : " fn__none"}" data-type="av-load-more">
<svg><use xlink:href="#iconArrowDown"></use></svg>
<span>${window.siyuan.languages.loadMore}</span>
<svg data-type="set-page-size" data-size="${data.pageSize}"><use xlink:href="#iconMore"></use></svg>
</button>
</div>
</div>
<div class="av__row--footer${hasCalc ? " av__readonly--show" : ""}">${calcHTML}</div>
</div>`
if (renderAll) {
e.firstElementChild.outerHTML = `<div class="av__container"> e.firstElementChild.outerHTML = `<div class="av__container">
<div class="av__header"> <div class="av__header">
<div class="fn__flex av__views${isSearching || query ? " av__views--show" : ""}"> <div class="fn__flex av__views${isSearching || query ? " av__views--show" : ""}">
@ -257,27 +277,13 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex)}
<div class="av__counter fn__none"></div> <div class="av__counter fn__none"></div>
</div> </div>
<div class="av__scroll"> <div class="av__scroll">
<div class="av__body"> ${avBodyHTML}
${tableHTML}
<div class="av__row--util${data.rowCount > data.rows.length ? " av__readonly--show" : ""}">
<div class="av__colsticky">
<button class="b3-button" data-type="av-add-bottom">
<svg><use xlink:href="#iconAdd"></use></svg>
<span>${window.siyuan.languages.newRow}</span>
</button>
<span class="fn__space"></span>
<button class="b3-button${data.rowCount > data.rows.length ? "" : " fn__none"}" data-type="av-load-more">
<svg><use xlink:href="#iconArrowDown"></use></svg>
<span>${window.siyuan.languages.loadMore}</span>
<svg data-type="set-page-size" data-size="${data.pageSize}"><use xlink:href="#iconMore"></use></svg>
</button>
</div>
</div>
<div class="av__row--footer${hasCalc ? " av__readonly--show" : ""}">${calcHTML}</div>
</div>
</div> </div>
<div class="av__cursor" contenteditable="true">${Constants.ZWSP}</div> <div class="av__cursor" contenteditable="true">${Constants.ZWSP}</div>
</div>`; </div>`;
} else {
e.firstElementChild.querySelector(".av__scroll").innerHTML = avBodyHTML;
}
e.setAttribute("data-render", "true"); e.setAttribute("data-render", "true");
// 历史兼容 // 历史兼容
e.style.margin = ""; e.style.margin = "";
@ -343,6 +349,9 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex)}
if (cb) { if (cb) {
cb(); cb();
} }
if (!renderAll) {
return;
}
const viewsElement = e.querySelector(".av__views") as HTMLElement; const viewsElement = e.querySelector(".av__views") as HTMLElement;
searchInputElement = e.querySelector('[data-type="av-search"]') as HTMLInputElement; searchInputElement = e.querySelector('[data-type="av-search"]') as HTMLInputElement;
searchInputElement.value = query || ""; searchInputElement.value = query || "";
@ -352,6 +361,12 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex)}
searchInputElement.addEventListener("compositionstart", (event: KeyboardEvent) => { searchInputElement.addEventListener("compositionstart", (event: KeyboardEvent) => {
event.stopPropagation(); event.stopPropagation();
}); });
searchInputElement.addEventListener("keydown", (event: KeyboardEvent) => {
if (event.isComposing) {
return;
}
electronUndo(event);
});
searchInputElement.addEventListener("input", (event: KeyboardEvent) => { searchInputElement.addEventListener("input", (event: KeyboardEvent) => {
event.stopPropagation(); event.stopPropagation();
if (event.isComposing) { if (event.isComposing) {
@ -403,7 +418,7 @@ const updateSearch = (e: HTMLElement, protyle: IProtyle) => {
clearTimeout(searchTimeout); clearTimeout(searchTimeout);
searchTimeout = window.setTimeout(() => { searchTimeout = window.setTimeout(() => {
e.removeAttribute("data-render"); e.removeAttribute("data-render");
avRender(e, protyle); avRender(e, protyle, undefined, undefined, false);
}, Constants.TIMEOUT_INPUT); }, Constants.TIMEOUT_INPUT);
}; };

View file

@ -193,11 +193,11 @@ const processAV = (range: Range, html: string, protyle: IProtyle, blockElement:
text.split("\n").forEach(row => { text.split("\n").forEach(row => {
textJSON.push(row.split("\t")); textJSON.push(row.split("\t"));
}); });
if (rowsElement && textJSON.length === 1 && textJSON[0].length === 1) { if (rowsElement.length > 0 && textJSON.length === 1 && textJSON[0].length === 1) {
updateCellsValue(protyle, blockElement as HTMLElement, text, undefined, columns, html); updateCellsValue(protyle, blockElement as HTMLElement, text, undefined, columns, html);
return; return;
} }
if (rowsElement) { if (rowsElement.length > 0) {
rowsElement.forEach(rowElement => { rowsElement.forEach(rowElement => {
rowElement.querySelectorAll(".av__cell").forEach((cellElement: HTMLElement) => { rowElement.querySelectorAll(".av__cell").forEach((cellElement: HTMLElement) => {
cellElements.push(cellElement); cellElements.push(cellElement);

View file

@ -744,7 +744,20 @@ export const onTransaction = (protyle: IProtyle, operation: IOperation, isUndo:
"removeAttrViewView", "setAttrViewViewName", "setAttrViewViewIcon", "duplicateAttrViewView", "sortAttrViewView", "removeAttrViewView", "setAttrViewViewName", "setAttrViewViewIcon", "duplicateAttrViewView", "sortAttrViewView",
"updateAttrViewColRelation", "setAttrViewPageSize", "updateAttrViewColRollup", "sortAttrViewKey", "updateAttrViewColRelation", "setAttrViewPageSize", "updateAttrViewColRollup", "sortAttrViewKey",
"duplicateAttrViewKey", "setAttrViewViewDesc", "setAttrViewColDesc"].includes(operation.action)) { "duplicateAttrViewKey", "setAttrViewViewDesc", "setAttrViewColDesc"].includes(operation.action)) {
if (!isUndo) {
// 撤销 transaction 会进行推送,需使用推送来进行刷新最新数据 https://github.com/siyuan-note/siyuan/issues/13607
refreshAV(protyle, operation); refreshAV(protyle, operation);
} else if (operation.action === "setAttrViewName") {
// setAttrViewName 同文档不会推送,需手动刷新
Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${operation.id}"]`)).forEach((item: HTMLElement) => {
const titleElement = item.querySelector(".av__title") as HTMLElement;
if (!titleElement) {
return;
}
titleElement.textContent = operation.data;
titleElement.dataset.title = operation.data;
});
}
return; return;
} }
if (operation.action === "doUpdateUpdated") { if (operation.action === "doUpdateUpdated") {