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

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

Browse source
This commit is contained in:
Vanessa 2025-06-14 14:03:35 +08:00
parent 96a7b4a03e
commit d71680d518
6 changed files with 111 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

41
app/src/protyle/render/av/cell.ts
View file

@ -8,7 +8,7 @@ import {fetchPost} from "../../../util/fetch";
import {focusBlock, focusByRange} from "../../util/selection"; import {focusBlock, focusByRange} from "../../util/selection";
import * as dayjs from "dayjs"; import * as dayjs from "dayjs";
import {unicode2Emoji} from "../../../emoji"; import {unicode2Emoji} from "../../../emoji";
import {getColIconByType} from "./col"; import {getColIconByType, getColId} from "./col";
import {genAVValueHTML} from "./blockAttr"; import {genAVValueHTML} from "./blockAttr";
import {Constants} from "../../../constants"; import {Constants} from "../../../constants";
import {hintRef} from "../../hint/extend"; import {hintRef} from "../../hint/extend";
@ -16,6 +16,8 @@ import {getAssetName, pathPosix} from "../../../util/pathName";
import {mergeAddOption} from "./select"; import {mergeAddOption} from "./select";
import {escapeAttr, escapeHtml} from "../../../util/escape"; import {escapeAttr, escapeHtml} from "../../../util/escape";
import {electronUndo} from "../../undo"; import {electronUndo} from "../../undo";
import {getFieldIdByCellElement} from "./row";
import {getFieldsByData} from "./view";
const renderCellURL = (urlContent: string) => { const renderCellURL = (urlContent: string) => {
let host = urlContent; let host = urlContent;
@ -519,7 +521,7 @@ export const popTextCell = (protyle: IProtyle, cellElements: HTMLElement[], type
} else if (type === "relation") { } else if (type === "relation") {
openMenuPanel({protyle, blockElement, type: "relation", cellElements}); openMenuPanel({protyle, blockElement, type: "relation", cellElements});
} else if (type === "rollup") { } else if (type === "rollup") {
openMenuPanel({protyle, blockElement, type: "rollup", cellElements, colId: cellElements[0].dataset.colId}); openMenuPanel({protyle, blockElement, type: "rollup", cellElements, colId: getColId(cellElements[0], viewType)});
} }
if (viewType === "table" && !hasClosestByClassName(cellElements[0], "custom-attr")) { if (viewType === "table" && !hasClosestByClassName(cellElements[0], "custom-attr")) {
cellElements[0].classList.add("av__cell--select"); cellElements[0].classList.add("av__cell--select");
@ -544,8 +546,8 @@ export const popTextCell = (protyle: IProtyle, cellElements: HTMLElement[], type
id: blockElement.dataset.avId, id: blockElement.dataset.avId,
viewID: blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW) viewID: blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW)
}, (response) => { }, (response) => {
response.data.view.columns.find((item: IAVColumn) => { getFieldsByData(response.data).find((item: IAVColumn) => {
if (item.id === cellElements[0].dataset.colId) { if (item.id === getColId(cellElements[0], viewType)) {
inputElement.value = item.template; inputElement.value = item.template;
inputElement.dataset.template = item.template; inputElement.dataset.template = item.template;
return true; return true;
@ -557,10 +559,12 @@ export const popTextCell = (protyle: IProtyle, cellElements: HTMLElement[], type
inputElement.addEventListener("input", (event: InputEvent) => { inputElement.addEventListener("input", (event: InputEvent) => {
if (Constants.BLOCK_HINT_KEYS.includes(inputElement.value.substring(0, 2))) { if (Constants.BLOCK_HINT_KEYS.includes(inputElement.value.substring(0, 2))) {
protyle.toolbar.range = document.createRange(); protyle.toolbar.range = document.createRange();
if (!blockElement.contains(cellElements[0])) { if (cellElements[0] && !blockElement.contains(cellElements[0])) {
const rowElement = hasClosestByClassName(cellElements[0], "av__row") as HTMLElement; const rowID = getFieldIdByCellElement(cellElements[0], viewType);
if (cellElements[0]) { if (viewType === "table") {
cellElements[0] = blockElement.querySelector(`.av__row[data-id="${rowElement.dataset.id}"] .av__cell[data-col-id="${cellElements[0].dataset.colId}"]`) as HTMLElement; cellElements[0] = (blockElement.querySelector(`.av__row[data-id="${rowID}"] .av__cell[data-col-id="${cellElements[0].dataset.colId}"]`)) as HTMLElement;
} else {
cellElements[0] = (blockElement.querySelector(`.av__gallery-item[data-id="${rowID}"] .av__cell[data-field-id="${cellElements[0].dataset.fieldId}"]`)) as HTMLElement;
} }
} }
protyle.toolbar.range.selectNodeContents(cellElements[0].lastChild); protyle.toolbar.range.selectNodeContents(cellElements[0].lastChild);
@ -643,7 +647,7 @@ const updateCellValueByInput = (protyle: IProtyle, type: TAVCol, blockElement: H
const avMaskElement = document.querySelector(".av__mask"); const avMaskElement = document.querySelector(".av__mask");
const avID = blockElement.getAttribute("data-av-id"); const avID = blockElement.getAttribute("data-av-id");
if (type === "template") { if (type === "template") {
const colId = cellElements[0].getAttribute("data-col-id"); const colId = getColId(cellElements[0], viewType);
const textElement = avMaskElement.querySelector(".b3-text-field") as HTMLInputElement; const textElement = avMaskElement.querySelector(".b3-text-field") as HTMLInputElement;
if (textElement.value !== textElement.dataset.template && !blockElement.getAttribute("data-loading")) { if (textElement.value !== textElement.dataset.template && !blockElement.getAttribute("data-loading")) {
transaction(protyle, [{ transaction(protyle, [{
@ -707,14 +711,16 @@ export const updateCellsValue = (protyle: IProtyle, nodeElement: HTMLElement, va
const isCustomAttr = hasClosestByClassName(cellElements[0], "custom-attr"); const isCustomAttr = hasClosestByClassName(cellElements[0], "custom-attr");
const viewType = nodeElement.getAttribute("data-av-type") as TAVView; const viewType = nodeElement.getAttribute("data-av-type") as TAVView;
cellElements.forEach((item: HTMLElement, elementIndex) => { cellElements.forEach((item: HTMLElement, elementIndex) => {
const rowElement = hasClosestByClassName(item, "av__row") as HTMLElement; const rowID = getFieldIdByCellElement(item, viewType);
if (viewType === "table") { if (!rowID) {
if (!rowElement) { return;
return; }
} if (!nodeElement.contains(item)) {
if (!nodeElement.contains(item)) { if (viewType === "table") {
item = cellElements[elementIndex] = (nodeElement.querySelector(`.av__row[data-id="${rowElement.dataset.id}"] .av__cell[data-col-id="${item.dataset.colId}"]`) || item = cellElements[elementIndex] = (nodeElement.querySelector(`.av__row[data-id="${rowID}"] .av__cell[data-col-id="${item.dataset.colId}"]`) ||
nodeElement.querySelector(`.fn__flex-1[data-col-id="${item.dataset.colId}"]`)) as HTMLElement; nodeElement.querySelector(`.fn__flex-1[data-col-id="${item.dataset.colId}"]`)) as HTMLElement;
} else {
item = cellElements[elementIndex] = (nodeElement.querySelector(`.av__gallery-item[data-id="${rowID}"] .av__cell[data-field-id="${item.dataset.fieldId}"]`)) as HTMLElement;
} }
} }
@ -726,9 +732,8 @@ export const updateCellsValue = (protyle: IProtyle, nodeElement: HTMLElement, va
if (["created", "updated", "template", "rollup"].includes(type)) { if (["created", "updated", "template", "rollup"].includes(type)) {
return; return;
} }
const rowID = viewType === "table" ? rowElement.getAttribute("data-id") : item.getAttribute("data-field-id");
const cellId = item.dataset.id; // 刚创建时无 id，更新需和 oldValue 保持一致 const cellId = item.dataset.id; // 刚创建时无 id，更新需和 oldValue 保持一致
const colId = item.dataset.colId; const colId = getColId(item, viewType)
text += getCellText(item) + ((cellElements[elementIndex + 1] && item.nextElementSibling && item.nextElementSibling.isSameNode(cellElements[elementIndex + 1])) ? "\t" : "\n\n"); text += getCellText(item) + ((cellElements[elementIndex + 1] && item.nextElementSibling && item.nextElementSibling.isSameNode(cellElements[elementIndex + 1])) ? "\t" : "\n\n");
const oldValue = genCellValueByElement(type, item); const oldValue = genCellValueByElement(type, item);

8
app/src/protyle/render/av/col.ts
View file

@ -18,6 +18,14 @@ import {Dialog} from "../../../dialog";
import {escapeAriaLabel, escapeAttr, escapeHtml} from "../../../util/escape"; import {escapeAriaLabel, escapeAttr, escapeHtml} from "../../../util/escape";
import {getFieldsByData} from "./view"; import {getFieldsByData} from "./view";
export const getColId = (element: Element, viewType: TAVView) => {
if (viewType === "table") {
return element.getAttribute("data-col-id");
} else if (viewType === "gallery") {
return element.getAttribute("data-field-id");
}
};
export const duplicateCol = (options: { export const duplicateCol = (options: {
protyle: IProtyle, protyle: IProtyle,
colId: string, colId: string,

19
app/src/protyle/render/av/openMenuPanel.ts
View file

@ -1,6 +1,15 @@
import {transaction} from "../../wysiwyg/transaction"; import {transaction} from "../../wysiwyg/transaction";
import {fetchPost} from "../../../util/fetch"; import {fetchPost} from "../../../util/fetch";
import {addCol, bindEditEvent, duplicateCol, getColIconByType, getColNameByType, getEditHTML, removeCol} from "./col"; import {
addCol,
bindEditEvent,
duplicateCol,
getColIconByType,
getColId,
getColNameByType,
getEditHTML,
removeCol
} from "./col";
import {setPosition} from "../../../util/setPosition"; import {setPosition} from "../../../util/setPosition";
import {hasClosestByAttribute, hasClosestByClassName} from "../../util/hasClosest"; import {hasClosestByAttribute, hasClosestByClassName} from "../../util/hasClosest";
import {addColOptionOrCell, bindSelectEvent, getSelectHTML, removeCellOption, setColOption} from "./select"; import {addColOptionOrCell, bindSelectEvent, getSelectHTML, removeCellOption, setColOption} from "./select";
@ -88,7 +97,7 @@ export const openMenuPanel = (options: {
} else if (options.type === "filters") { } else if (options.type === "filters") {
html = getFiltersHTML(data); html = getFiltersHTML(data);
} else if (options.type === "select") { } else if (options.type === "select") {
html = getSelectHTML(data.view, options.cellElements, true); html = getSelectHTML(fields, options.cellElements, true, options.blockElement);
} else if (options.type === "asset") { } else if (options.type === "asset") {
html = getAssetHTML(options.cellElements); html = getAssetHTML(options.cellElements);
} else if (options.type === "edit") { } else if (options.type === "edit") {
@ -116,7 +125,7 @@ export const openMenuPanel = (options: {
protyle: options.protyle, protyle: options.protyle,
blockElement: options.blockElement, blockElement: options.blockElement,
type: "edit", type: "edit",
colId: options.cellElements[0].dataset.colId colId: getColId(options.cellElements[0], data.viewType)
}); });
return; return;
} }
@ -336,7 +345,7 @@ export const openMenuPanel = (options: {
return; return;
} }
if (targetElement.querySelector('[data-type="setColOption"]')) { if (targetElement.querySelector('[data-type="setColOption"]')) {
const colId = options.cellElements ? options.cellElements[0].dataset.colId : menuElement.querySelector(".b3-menu__item").getAttribute("data-col-id"); const colId = options.cellElements ? getColId(options.cellElements[0], data.viewType) : menuElement.querySelector(".b3-menu__item").getAttribute("data-col-id");
const changeData = fields.find((column) => column.id === colId).options; const changeData = fields.find((column) => column.id === colId).options;
const oldData = Object.assign([], changeData); const oldData = Object.assign([], changeData);
let targetOption: { name: string, color: string }; let targetOption: { name: string, color: string };
@ -369,7 +378,7 @@ export const openMenuPanel = (options: {
}]); }]);
const oldScroll = menuElement.querySelector(".b3-menu__items").scrollTop; const oldScroll = menuElement.querySelector(".b3-menu__items").scrollTop;
if (options.cellElements) { if (options.cellElements) {
menuElement.innerHTML = getSelectHTML(data.view, options.cellElements); menuElement.innerHTML = getSelectHTML(fields, options.cellElements, false, options.blockElement);
bindSelectEvent(options.protyle, data, menuElement, options.cellElements, options.blockElement); bindSelectEvent(options.protyle, data, menuElement, options.cellElements, options.blockElement);
} else { } else {
menuElement.innerHTML = getEditHTML({ menuElement.innerHTML = getEditHTML({

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

@ -479,7 +479,7 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
const avID = operation.action === "setAttrViewName" ? operation.id : operation.avID; const avID = operation.action === "setAttrViewName" ? operation.id : operation.avID;
Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${avID}"]`)).forEach((item: HTMLElement) => { Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${avID}"]`)).forEach((item: HTMLElement) => {
item.removeAttribute("data-render"); item.removeAttribute("data-render");
const updateRow = item.querySelector('.av__row[data-need-update="true"]'); const updateRow = item.querySelector('[data-need-update="true"]');
if (operation.action === "sortAttrViewCol" || operation.action === "sortAttrViewRow") { if (operation.action === "sortAttrViewCol" || operation.action === "sortAttrViewRow") {
item.querySelectorAll(".av__cell--active").forEach((item: HTMLElement) => { item.querySelectorAll(".av__cell--active").forEach((item: HTMLElement) => {
item.classList.remove("av__cell--active"); item.classList.remove("av__cell--active");
@ -506,7 +506,8 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
// 更新属性面板 // 更新属性面板
renderAVAttribute(attrElement.parentElement, attrElement.dataset.nodeId, protyle); renderAVAttribute(attrElement.parentElement, attrElement.dataset.nodeId, protyle);
} else { } else {
if (operation.action === "insertAttrViewBlock" && updateRow && !item.querySelector(`.av__row[data-id="${updateRow.getAttribute("data-id")}"]`)) { if (operation.action === "insertAttrViewBlock" && updateRow &&
!item.querySelector(`[data-id="${updateRow.getAttribute("data-id")}"]`)) {
showMessage(window.siyuan.languages.insertRowTip); showMessage(window.siyuan.languages.insertRowTip);
document.querySelector(".av__mask")?.remove(); document.querySelector(".av__mask")?.remove();
} }

4
app/src/protyle/render/av/row.ts
View file

@ -16,6 +16,10 @@ import * as dayjs from "dayjs";
import {Constants} from "../../../constants"; import {Constants} from "../../../constants";
import {insertGalleryItemAnimation} from "./gallery/item"; import {insertGalleryItemAnimation} from "./gallery/item";
export const getFieldIdByCellElement = (cellElement: Element, viewType:TAVView): string => {
return (hasClosestByClassName(cellElement, viewType === "table" ? "av__row" : "av__gallery-item") as HTMLElement).dataset.id;
}
export const selectRow = (checkElement: Element, type: "toggle" | "select" | "unselect" | "unselectAll") => { export const selectRow = (checkElement: Element, type: "toggle" | "select" | "unselect" | "unselectAll") => {
const rowElement = hasClosestByClassName(checkElement, "av__row"); const rowElement = hasClosestByClassName(checkElement, "av__row");
if (!rowElement) { if (!rowElement) {

102
app/src/protyle/render/av/select.ts
View file

@ -3,12 +3,14 @@ import {transaction} from "../../wysiwyg/transaction";
import {hasClosestBlock, hasClosestByClassName} from "../../util/hasClosest"; import {hasClosestBlock, hasClosestByClassName} from "../../util/hasClosest";
import {confirmDialog} from "../../../dialog/confirmDialog"; import {confirmDialog} from "../../../dialog/confirmDialog";
import {upDownHint} from "../../../util/upDownHint"; import {upDownHint} from "../../../util/upDownHint";
import {bindEditEvent, getEditHTML} from "./col"; import {bindEditEvent, getColId, getEditHTML} from "./col";
import {updateAttrViewCellAnimation} from "./action"; import {updateAttrViewCellAnimation} from "./action";
import {genAVValueHTML} from "./blockAttr"; import {genAVValueHTML} from "./blockAttr";
import {escapeAriaLabel, escapeAttr, escapeHtml} from "../../../util/escape"; import {escapeAriaLabel, escapeAttr, escapeHtml} from "../../../util/escape";
import {genCellValueByElement, getTypeByCellElement} from "./cell"; import {genCellValueByElement, getTypeByCellElement} from "./cell";
import * as dayjs from "dayjs"; import * as dayjs from "dayjs";
import {getFieldsByData} from "./view";
import {getFieldIdByCellElement} from "./row";
let cellValues: IAVCellValue[]; let cellValues: IAVCellValue[];
@ -69,22 +71,25 @@ export const removeCellOption = (protyle: IProtyle, cellElements: HTMLElement[],
if (!target) { if (!target) {
return; return;
} }
const colId = cellElements[0].dataset.colId; const viewType = blockElement.getAttribute("data-av-type") as TAVView;
const colId = getColId(cellElements[0], viewType);
const doOperations: IOperation[] = []; const doOperations: IOperation[] = [];
const undoOperations: IOperation[] = []; const undoOperations: IOperation[] = [];
let mSelectValue: IAVCellSelectValue[]; let mSelectValue: IAVCellSelectValue[];
const avID = blockElement.getAttribute("data-av-id"); const avID = blockElement.getAttribute("data-av-id");
cellElements.forEach((item, elementIndex) => { cellElements.forEach((item, elementIndex) => {
const rowID = getFieldIdByCellElement(item, viewType);
if (!rowID) {
return;
}
if (!blockElement.contains(item)) { if (!blockElement.contains(item)) {
const rowElement = hasClosestByClassName(item, "av__row"); if (viewType === "table") {
if (rowElement) { item = cellElements[elementIndex] = (blockElement.querySelector(`.av__row[data-id="${rowID}"] .av__cell[data-col-id="${item.dataset.colId}"]`) ||
item = cellElements[elementIndex] = blockElement.querySelector(`.fn__flex-1[data-col-id="${item.dataset.colId}"]`)) as HTMLElement;
(blockElement.querySelector(`.av__row[data-id="${rowElement.dataset.id}"] .av__cell[data-col-id="${item.dataset.colId}"]`) || } else {
// block attr item = cellElements[elementIndex] = (blockElement.querySelector(`.av__gallery-item[data-id="${rowID}"] .av__cell[data-field-id="${item.dataset.fieldId}"]`)) as HTMLElement;
blockElement.querySelector(`.fn__flex-1[data-col-id="${item.dataset.colId}"]`)) as HTMLElement;
} }
} }
const rowID = (hasClosestByClassName(item, "av__row") as HTMLElement).dataset.id;
const cellValue: IAVCellValue = cellValues[elementIndex]; const cellValue: IAVCellValue = cellValues[elementIndex];
const oldValue = JSON.parse(JSON.stringify(cellValue)); const oldValue = JSON.parse(JSON.stringify(cellValue));
if (elementIndex === 0) { if (elementIndex === 0) {
@ -141,10 +146,12 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
return; return;
} }
const blockID = blockElement.getAttribute("data-node-id"); const blockID = blockElement.getAttribute("data-node-id");
const colId = cellElements ? cellElements[0].dataset.colId : menuElement.querySelector(".b3-menu__item").getAttribute("data-col-id"); const viewType = blockElement.getAttribute("data-av-type") as TAVView;
const colId = (cellElements && cellElements[0]) ? getColId(cellElements[0], viewType) : menuElement.querySelector(".b3-menu__item").getAttribute("data-col-id");
let name = target.parentElement.dataset.name; let name = target.parentElement.dataset.name;
let desc = target.parentElement.dataset.desc; let desc = target.parentElement.dataset.desc;
let color = target.parentElement.dataset.color; let color = target.parentElement.dataset.color;
const fields = getFieldsByData(data);
const menu = new Menu("av-col-option", () => { const menu = new Menu("av-col-option", () => {
if ((name === inputElement.value && desc === descElement.value) || !inputElement.value) { if ((name === inputElement.value && desc === descElement.value) || !inputElement.value) {
return; return;
@ -175,7 +182,7 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
newDesc: desc newDesc: desc
}, },
}]); }]);
data.view.columns.find(column => { fields.find(column => {
if (column.id === colId) { if (column.id === colId) {
// 重名不进行更新 https://github.com/siyuan-note/siyuan/issues/13554 // 重名不进行更新 https://github.com/siyuan-note/siyuan/issues/13554
let hasName = false; let hasName = false;
@ -205,11 +212,14 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
bindEditEvent({protyle, data, menuElement, isCustomAttr, blockID}); bindEditEvent({protyle, data, menuElement, isCustomAttr, blockID});
} else { } else {
cellElements.forEach((cellElement: HTMLElement, index) => { cellElements.forEach((cellElement: HTMLElement, index) => {
const rowElement = hasClosestByClassName(cellElement, "av__row"); const rowID = getFieldIdByCellElement(cellElement, viewType);
if (rowElement) { if (viewType === "table") {
cellElement = cellElements[index] = (blockElement.querySelector(`.av__row[data-id="${rowElement.dataset.id}"] .av__cell[data-col-id="${cellElement.dataset.colId}"]`) || cellElement = cellElements[index] = (blockElement.querySelector(`.av__row[data-id="${rowID}"] .av__cell[data-col-id="${cellElement.dataset.colId}"]`) ||
blockElement.querySelector(`.fn__flex-1[data-col-id="${cellElement.dataset.colId}"]`)) as HTMLElement; blockElement.querySelector(`.fn__flex-1[data-col-id="${cellElement.dataset.colId}"]`)) as HTMLElement;
} else {
cellElement = cellElements[index] = (blockElement.querySelector(`.av__gallery-item[data-id="${rowID}"] .av__cell[data-field-id="${cellElement.dataset.fieldId}"]`)) as HTMLElement;
} }
cellValues[index].mSelect.find((item) => { cellValues[index].mSelect.find((item) => {
if (item.content === name) { if (item.content === name) {
item.content = inputElement.value; item.content = inputElement.value;
@ -222,7 +232,7 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
updateAttrViewCellAnimation(cellElement, cellValues[index]); updateAttrViewCellAnimation(cellElement, cellValues[index]);
} }
}); });
menuElement.innerHTML = getSelectHTML(data.view, cellElements); menuElement.innerHTML = getSelectHTML(fields, cellElements, false, blockElement);
bindSelectEvent(protyle, data, menuElement, cellElements, blockElement); bindSelectEvent(protyle, data, menuElement, cellElements, blockElement);
} }
if (selectedElement) { if (selectedElement) {
@ -284,7 +294,7 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
click() { click() {
confirmDialog(window.siyuan.languages.deleteOpConfirm, window.siyuan.languages.confirmDelete, () => { confirmDialog(window.siyuan.languages.deleteOpConfirm, window.siyuan.languages.confirmDelete, () => {
let colOptions: { name: string, color: string }[] = []; let colOptions: { name: string, color: string }[] = [];
data.view.columns.find(column => { fields.find(column => {
if (column.id === colId) { if (column.id === colId) {
colOptions = column.options; colOptions = column.options;
return true; return true;
@ -320,10 +330,12 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
bindEditEvent({protyle, data, menuElement, isCustomAttr, blockID}); bindEditEvent({protyle, data, menuElement, isCustomAttr, blockID});
} else { } else {
cellElements.forEach((cellElement: HTMLElement, index) => { cellElements.forEach((cellElement: HTMLElement, index) => {
const rowElement = hasClosestByClassName(cellElement, "av__row"); const rowID = getFieldIdByCellElement(cellElement, viewType);
if (rowElement) { if (viewType === "table") {
cellElement = cellElements[index] = (blockElement.querySelector(`.av__row[data-id="${rowElement.dataset.id}"] .av__cell[data-col-id="${cellElement.dataset.colId}"]`) || cellElement = cellElements[index] = (blockElement.querySelector(`.av__row[data-id="${rowID}"] .av__cell[data-col-id="${cellElement.dataset.colId}"]`) ||
blockElement.querySelector(`.fn__flex-1[data-col-id="${cellElement.dataset.colId}"]`)) as HTMLElement; blockElement.querySelector(`.fn__flex-1[data-col-id="${cellElement.dataset.colId}"]`)) as HTMLElement;
} else {
cellElement = cellElements[index] = (blockElement.querySelector(`.av__gallery-item[data-id="${rowID}"] .av__cell[data-field-id="${cellElement.dataset.fieldId}"]`)) as HTMLElement;
} }
cellValues[index].mSelect.find((item, selectIndex) => { cellValues[index].mSelect.find((item, selectIndex) => {
if (item.content === newName) { if (item.content === newName) {
@ -337,7 +349,7 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
updateAttrViewCellAnimation(cellElement, cellValues[index]); updateAttrViewCellAnimation(cellElement, cellValues[index]);
} }
}); });
menuElement.innerHTML = getSelectHTML(data.view, cellElements); menuElement.innerHTML = getSelectHTML(fields, cellElements, false, blockElement);
bindSelectEvent(protyle, data, menuElement, cellElements, blockElement); bindSelectEvent(protyle, data, menuElement, cellElements, blockElement);
} }
if (selectedElement) { if (selectedElement) {
@ -357,11 +369,11 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
label: html + "</div>", label: html + "</div>",
bind(element) { bind(element) {
element.addEventListener("click", (event) => { element.addEventListener("click", (event) => {
const target = event.target as HTMLElement; const colorTarget = event.target as HTMLElement;
if (target.classList.contains("color__square") && !target.classList.contains("color__square--current")) { if (colorTarget.classList.contains("color__square") && !colorTarget.classList.contains("color__square--current")) {
element.querySelector(".color__square--current")?.classList.remove("color__square--current"); element.querySelector(".color__square--current")?.classList.remove("color__square--current");
target.classList.add("color__square--current"); colorTarget.classList.add("color__square--current");
const newColor = target.getAttribute("data-color"); const newColor = colorTarget.getAttribute("data-color");
transaction(protyle, [{ transaction(protyle, [{
action: "updateAttrViewColOption", action: "updateAttrViewColOption",
id: colId, id: colId,
@ -390,7 +402,7 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
}, },
}]); }]);
data.view.columns.find(column => { fields.find(column => {
if (column.id === colId) { if (column.id === colId) {
column.options.find((item) => { column.options.find((item) => {
if (item.name === name) { if (item.name === name) {
@ -408,10 +420,12 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
bindEditEvent({protyle, data, menuElement, isCustomAttr, blockID}); bindEditEvent({protyle, data, menuElement, isCustomAttr, blockID});
} else { } else {
cellElements.forEach((cellElement: HTMLElement, cellIndex) => { cellElements.forEach((cellElement: HTMLElement, cellIndex) => {
const rowElement = hasClosestByClassName(cellElement, "av__row"); const rowID = getFieldIdByCellElement(cellElement, viewType);
if (rowElement) { if (viewType === "table") {
cellElement = cellElements[cellIndex] = (blockElement.querySelector(`.av__row[data-id="${rowElement.dataset.id}"] .av__cell[data-col-id="${cellElement.dataset.colId}"]`) || cellElement = cellElements[cellIndex] = (blockElement.querySelector(`.av__row[data-id="${rowID}"] .av__cell[data-col-id="${cellElement.dataset.colId}"]`) ||
blockElement.querySelector(`.fn__flex-1[data-col-id="${cellElement.dataset.colId}"]`)) as HTMLElement; blockElement.querySelector(`.fn__flex-1[data-col-id="${cellElement.dataset.colId}"]`)) as HTMLElement;
} else {
cellElement = cellElements[cellIndex] = (blockElement.querySelector(`.av__gallery-item[data-id="${rowID}"] .av__cell[data-field-id="${cellElement.dataset.fieldId}"]`)) as HTMLElement;
} }
cellValues[cellIndex].mSelect.find((item) => { cellValues[cellIndex].mSelect.find((item) => {
if (item.content === name) { if (item.content === name) {
@ -426,7 +440,7 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
updateAttrViewCellAnimation(cellElement, cellValues[cellIndex]); updateAttrViewCellAnimation(cellElement, cellValues[cellIndex]);
} }
}); });
menuElement.innerHTML = getSelectHTML(data.view, cellElements); menuElement.innerHTML = getSelectHTML(fields, cellElements, false, blockElement);
bindSelectEvent(protyle, data, menuElement, cellElements, blockElement); bindSelectEvent(protyle, data, menuElement, cellElements, blockElement);
} }
menuElement.querySelector(".b3-menu__items").scrollTop = oldScroll; menuElement.querySelector(".b3-menu__items").scrollTop = oldScroll;
@ -451,9 +465,9 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
export const bindSelectEvent = (protyle: IProtyle, data: IAV, menuElement: HTMLElement, cellElements: HTMLElement[], blockElement: Element) => { export const bindSelectEvent = (protyle: IProtyle, data: IAV, menuElement: HTMLElement, cellElements: HTMLElement[], blockElement: Element) => {
const inputElement = menuElement.querySelector("input"); const inputElement = menuElement.querySelector("input");
const colId = cellElements[0].dataset.colId; const colId = getColId(cellElements[0], blockElement.getAttribute("data-av-type") as TAVView);
let colData: IAVColumn; let colData: IAVColumn;
data.view.columns.find((item: IAVColumn) => { getFieldsByData(data).find((item: IAVColumn) => {
if (item.id === colId) { if (item.id === colId) {
colData = item; colData = item;
return; return;
@ -508,16 +522,19 @@ export const addColOptionOrCell = (protyle: IProtyle, data: IAV, cellElements: H
const nodeElement = hasClosestBlock(cellElements[0]); const nodeElement = hasClosestBlock(cellElements[0]);
if (!nodeElement) { if (!nodeElement) {
cellElements.forEach((item, index) => { cellElements.forEach((item, index) => {
const rowElement = hasClosestByClassName(item, "av__row"); const rowID = getFieldIdByCellElement(item, data.viewType);
if (rowElement) { if (data.viewType === "table") {
cellElements[index] = (blockElement.querySelector(`.av__row[data-id="${rowElement.dataset.id}"] .av__cell[data-col-id="${item.dataset.colId}"]`) || cellElements[index] = (blockElement.querySelector(`.av__row[data-id="${rowID}"] .av__cell[data-col-id="${item.dataset.colId}"]`) ||
blockElement.querySelector(`.fn__flex-1[data-col-id="${item.dataset.colId}"]`)) as HTMLElement; blockElement.querySelector(`.fn__flex-1[data-col-id="${item.dataset.colId}"]`)) as HTMLElement;
} else {
cellElements[index] = (blockElement.querySelector(`.av__gallery-item[data-id="${rowID}"] .av__cell[data-field-id="${item.dataset.fieldId}"]`)) as HTMLElement;
} }
}); });
} }
const colId = cellElements[0].dataset.colId; const colId = getColId( cellElements[0], blockElement.getAttribute("data-av-type") as TAVView);
let colData: IAVColumn; let colData: IAVColumn;
data.view.columns.find((item: IAVColumn) => { const fields = getFieldsByData(data);
fields.find((item: IAVColumn) => {
if (item.id === colId) { if (item.id === colId) {
colData = item; colData = item;
if (!colData.options) { if (!colData.options) {
@ -531,11 +548,10 @@ export const addColOptionOrCell = (protyle: IProtyle, data: IAV, cellElements: H
const cellUndoOperations: IOperation[] = []; const cellUndoOperations: IOperation[] = [];
let mSelectValue: IAVCellSelectValue[]; let mSelectValue: IAVCellSelectValue[];
cellElements.forEach((item, index) => { cellElements.forEach((item, index) => {
const itemRowElement = hasClosestByClassName(item, "av__row"); const rowID = getFieldIdByCellElement(item, data.viewType);
if (!itemRowElement) { if (!rowID) {
return; return;
} }
const rowID = itemRowElement.dataset.id;
const cellValue: IAVCellValue = cellValues[index]; const cellValue: IAVCellValue = cellValues[index];
const oldValue = JSON.parse(JSON.stringify(cellValue)); const oldValue = JSON.parse(JSON.stringify(cellValue));
if (index === 0) { if (index === 0) {
@ -621,14 +637,14 @@ export const addColOptionOrCell = (protyle: IProtyle, data: IAV, cellElements: H
} else { } else {
const oldScroll = menuElement.querySelector(".b3-menu__items").scrollTop; const oldScroll = menuElement.querySelector(".b3-menu__items").scrollTop;
const oldChipsHeight = menuElement.querySelector(".b3-chips").clientHeight; const oldChipsHeight = menuElement.querySelector(".b3-chips").clientHeight;
menuElement.innerHTML = getSelectHTML(data.view, cellElements); menuElement.innerHTML = getSelectHTML(fields, cellElements, false, blockElement);
bindSelectEvent(protyle, data, menuElement, cellElements, blockElement); bindSelectEvent(protyle, data, menuElement, cellElements, blockElement);
menuElement.querySelector("input").focus(); menuElement.querySelector("input").focus();
menuElement.querySelector(".b3-menu__items").scrollTop = oldScroll + (menuElement.querySelector(".b3-chips").clientHeight - oldChipsHeight); menuElement.querySelector(".b3-menu__items").scrollTop = oldScroll + (menuElement.querySelector(".b3-chips").clientHeight - oldChipsHeight);
} }
}; };
export const getSelectHTML = (data: IAVTable, cellElements: HTMLElement[], init = false) => { export const getSelectHTML = (fields: IAVColumn[], cellElements: HTMLElement[], init = false, blockElement: Element) => {
if (init) { if (init) {
// 快速选中后如果 render 了再使用 genCellValueByElement 获取的元素和当前选中的不一致， https://github.com/siyuan-note/siyuan/issues/11268 // 快速选中后如果 render 了再使用 genCellValueByElement 获取的元素和当前选中的不一致， https://github.com/siyuan-note/siyuan/issues/11268
cellValues = []; cellValues = [];
@ -637,8 +653,8 @@ export const getSelectHTML = (data: IAVTable, cellElements: HTMLElement[], init
cellValues.push(genCellValueByElement(isCustomAttr ? item.dataset.type as TAVCol : getTypeByCellElement(item), item)); cellValues.push(genCellValueByElement(isCustomAttr ? item.dataset.type as TAVCol : getTypeByCellElement(item), item));
}); });
} }
const colId = cellElements[0].dataset["colId"]; const colId = cellElements[0].dataset[blockElement.getAttribute("data-av-type") === "table" ? "colId" : "fieldId"];
const colData = data.columns.find(item => { const colData = fields.find(item => {
if (item.id === colId) { if (item.id === colId) {
return item; return item;
} }