mirror of
https://github.com/siyuan-note/siyuan.git
synced 2025-12-20 00:20:12 +01:00
This commit is contained in:
parent
35b7a7cfca
commit
fd10e51164
3 changed files with 52 additions and 24 deletions
|
|
@ -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);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
|
|
||||||
|
|
@ -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") {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue