diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts index a62a96620..96b360d85 100644 --- a/app/src/protyle/render/av/openMenuPanel.ts +++ b/app/src/protyle/render/av/openMenuPanel.ts @@ -55,7 +55,7 @@ export const openMenuPanel = (options: { const avID = options.blockElement.getAttribute("data-av-id"); fetchPost("/api/av/renderAttributeView", { id: avID, - query: (options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement)?.value ||"", + query: (options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement)?.value || "", pageSize: parseInt(options.blockElement.getAttribute("data-page-size")) || undefined, viewID: options.blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW) }, (response) => { @@ -81,7 +81,7 @@ export const openMenuPanel = (options: { } else if (options.type === "filters") { html = getFiltersHTML(data.view); } else if (options.type === "select") { - html = getSelectHTML(data.view, options.cellElements); + html = getSelectHTML(data.view, options.cellElements, true); } else if (options.type === "asset") { html = getAssetHTML(options.cellElements); } else if (options.type === "edit") { @@ -1127,7 +1127,7 @@ export const openMenuPanel = (options: { break; } else if (type === "addColOptionOrCell") { if (target.querySelector(".b3-menu__checked")) { - removeCellOption(options.protyle, data, options.cellElements, menuElement.querySelector(`.b3-chips .b3-chip[data-content="${escapeAttr(target.dataset.name)}"]`), options.blockElement); + removeCellOption(options.protyle, options.cellElements, menuElement.querySelector(`.b3-chips .b3-chip[data-content="${escapeAttr(target.dataset.name)}"]`), options.blockElement); } else { addColOptionOrCell(options.protyle, data, options.cellElements, target, menuElement, options.blockElement); } @@ -1136,7 +1136,7 @@ export const openMenuPanel = (options: { event.stopPropagation(); break; } else if (type === "removeCellOption") { - removeCellOption(options.protyle, data, options.cellElements, target.parentElement, options.blockElement); + removeCellOption(options.protyle, options.cellElements, target.parentElement, options.blockElement); event.preventDefault(); event.stopPropagation(); break; diff --git a/app/src/protyle/render/av/select.ts b/app/src/protyle/render/av/select.ts index bc4a1a4da..7ba43be00 100644 --- a/app/src/protyle/render/av/select.ts +++ b/app/src/protyle/render/av/select.ts @@ -7,7 +7,9 @@ import {bindEditEvent, getEditHTML} from "./col"; import {updateAttrViewCellAnimation} from "./action"; import {genAVValueHTML} from "./blockAttr"; import {escapeAttr} from "../../../util/escape"; -import {genCellValueByElement} from "./cell"; +import {genCellValueByElement, getTypeByCellElement} from "./cell"; + +let cellValues: IAVCellValue[]; const filterSelectHTML = (key: string, options: { name: string, color: string }[], selected: string[] = []) => { let html = ""; @@ -53,7 +55,7 @@ const filterSelectHTML = (key: string, options: { name: string, color: string }[ return html; }; -export const removeCellOption = (protyle: IProtyle, data: IAV, cellElements: HTMLElement[], target: HTMLElement, blockElement: Element) => { +export const removeCellOption = (protyle: IProtyle, cellElements: HTMLElement[], target: HTMLElement, blockElement: Element) => { if (!target) { return; } @@ -61,26 +63,19 @@ export const removeCellOption = (protyle: IProtyle, data: IAV, cellElements: HTM const doOperations: IOperation[] = []; const undoOperations: IOperation[] = []; let mSelectValue: IAVCellSelectValue[]; + const avID = blockElement.getAttribute("data-av-id") cellElements.forEach((item, elementIndex) => { if (!blockElement.contains(item)) { - item = cellElements[elementIndex] = blockElement.querySelector(`.av__cell[data-id="${item.dataset.id}"]`) as HTMLElement; + const rowElement = hasClosestByClassName(item, "av__row"); + if (rowElement) { + item = cellElements[elementIndex] = + (blockElement.querySelector(`.av__row[data-id="${rowElement.dataset.id}"] .av__cell[data-col-id="${item.dataset.colId}"]`) || + // block attr + blockElement.querySelector(`.fn__flex-1[data-col-id="${item.dataset.colId}"]`)) as HTMLElement; + } } const rowID = (hasClosestByClassName(item, "av__row") as HTMLElement).dataset.id; - let cellValue: IAVCellValue; - data.view.rows.find(row => { - if (row.id === rowID) { - row.cells.find(cell => { - if (cell.value.keyID === item.dataset.colId) { - if (!cell.value.mSelect) { - cell.value.mSelect = []; - } - cellValue = cell.value; - return true; - } - }); - return true; - } - }); + const cellValue: IAVCellValue = cellValues[elementIndex]; const oldValue = JSON.parse(JSON.stringify(cellValue)); if (elementIndex === 0) { cellValue.mSelect?.find((item, index) => { @@ -98,7 +93,7 @@ export const removeCellOption = (protyle: IProtyle, data: IAV, cellElements: HTM id: cellValue.id, keyID: colId, rowID, - avID: data.id, + avID, data: cellValue }); undoOperations.push({ @@ -106,7 +101,7 @@ export const removeCellOption = (protyle: IProtyle, data: IAV, cellElements: HTM id: cellValue.id, keyID: colId, rowID, - avID: data.id, + avID, data: oldValue }); if (item.classList.contains("custom-attr__avvalue")) { @@ -187,28 +182,23 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement, menuElement.innerHTML = getEditHTML({protyle, data, colId, isCustomAttr}); bindEditEvent({protyle, data, menuElement, isCustomAttr, blockID}); } else { - cellElements.forEach((cellElement: HTMLMediaElement) => { - data.view.rows.find(row => { - if (row.id === (hasClosestByClassName(cellElement, "av__row") as HTMLElement).dataset.id) { - row.cells.find(cell => { - if (cell.id === cellElement.dataset.id) { - cell.value.mSelect.find((item) => { - if (item.content === name) { - item.content = inputElement.value; - return true; - } - }); - if (cellElement.classList.contains("custom-attr__avvalue")) { - cellElement.innerHTML = genAVValueHTML(cell.value); - } else { - updateAttrViewCellAnimation(cellElement, cell.value); - } - return true; - } - }); + cellElements.forEach((cellElement: HTMLElement, index) => { + const rowElement = hasClosestByClassName(cellElement, "av__row"); + if (rowElement) { + cellElement = cellElements[index] = (blockElement.querySelector(`.av__row[data-id="${rowElement.dataset.id}"] .av__cell[data-col-id="${cellElement.dataset.colId}"]`) || + blockElement.querySelector(`.fn__flex-1[data-col-id="${cellElement.dataset.colId}"]`)) as HTMLElement; + } + cellValues[index].mSelect.find((item) => { + if (item.content === name) { + item.content = inputElement.value; return true; } }); + if (cellElement.classList.contains("custom-attr__avvalue")) { + cellElement.innerHTML = genAVValueHTML(cellValues[index]); + } else { + updateAttrViewCellAnimation(cellElement, cellValues[index]); + } }); menuElement.innerHTML = getSelectHTML(data.view, cellElements); bindSelectEvent(protyle, data, menuElement, cellElements, blockElement); @@ -265,28 +255,23 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement, menuElement.innerHTML = getEditHTML({protyle, data, colId, isCustomAttr}); bindEditEvent({protyle, data, menuElement, isCustomAttr, blockID}); } else { - cellElements.forEach((cellElement: HTMLElement) => { - data.view.rows.find(row => { - if (row.id === (hasClosestByClassName(cellElement, "av__row") as HTMLElement).dataset.id) { - row.cells.find(cell => { - if (cell.id === cellElement.dataset.id) { - cell.value.mSelect.find((item, index) => { - if (item.content === newName) { - cell.value.mSelect.splice(index, 1); - return true; - } - }); - if (cellElement.classList.contains("custom-attr__avvalue")) { - cellElement.innerHTML = genAVValueHTML(cell.value); - } else { - updateAttrViewCellAnimation(cellElement, cell.value); - } - return true; - } - }); + cellElements.forEach((cellElement: HTMLElement, index) => { + const rowElement = hasClosestByClassName(cellElement, "av__row"); + if (rowElement) { + cellElement = cellElements[index] = (blockElement.querySelector(`.av__row[data-id="${rowElement.dataset.id}"] .av__cell[data-col-id="${cellElement.dataset.colId}"]`) || + blockElement.querySelector(`.fn__flex-1[data-col-id="${cellElement.dataset.colId}"]`)) as HTMLElement; + } + cellValues[index].mSelect.find((item, selectIndex) => { + if (item.content === newName) { + cellValues[index].mSelect.splice(selectIndex, 1); return true; } }); + if (cellElement.classList.contains("custom-attr__avvalue")) { + cellElement.innerHTML = genAVValueHTML(cellValues[index]); + } else { + updateAttrViewCellAnimation(cellElement, cellValues[index]); + } }); menuElement.innerHTML = getSelectHTML(data.view, cellElements); bindSelectEvent(protyle, data, menuElement, cellElements, blockElement); @@ -344,29 +329,24 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement, menuElement.innerHTML = getEditHTML({protyle, data, colId, isCustomAttr}); bindEditEvent({protyle, data, menuElement, isCustomAttr, blockID}); } else { - cellElements.forEach((cellElement: HTMLElement) => { - data.view.rows.find(row => { - if (row.id === (hasClosestByClassName(cellElement, "av__row") as HTMLElement).dataset.id) { - row.cells.find(cell => { - if (cell.id === cellElement.dataset.id) { - cell.value.mSelect.find((item) => { - if (item.content === name) { - item.content = inputElement.value; - item.color = (index + 1).toString(); - return true; - } - }); - if (cellElement.classList.contains("custom-attr__avvalue")) { - cellElement.innerHTML = genAVValueHTML(cell.value); - } else { - updateAttrViewCellAnimation(cellElement, cell.value); - } - return true; - } - }); + cellElements.forEach((cellElement: HTMLElement, cellIndex) => { + const rowElement = hasClosestByClassName(cellElement, "av__row"); + if (rowElement) { + cellElement = cellElements[cellIndex] = (blockElement.querySelector(`.av__row[data-id="${rowElement.dataset.id}"] .av__cell[data-col-id="${cellElement.dataset.colId}"]`) || + blockElement.querySelector(`.fn__flex-1[data-col-id="${cellElement.dataset.colId}"]`)) as HTMLElement; + } + cellValues[cellIndex].mSelect.find((item) => { + if (item.content === name) { + item.content = inputElement.value; + item.color = (index + 1).toString(); return true; } }); + if (cellElement.classList.contains("custom-attr__avvalue")) { + cellElement.innerHTML = genAVValueHTML(cellValues[cellIndex]); + } else { + updateAttrViewCellAnimation(cellElement, cellValues[cellIndex]); + } }); menuElement.innerHTML = getSelectHTML(data.view, cellElements); bindSelectEvent(protyle, data, menuElement, cellElements, blockElement); @@ -421,12 +401,12 @@ export const bindSelectEvent = (protyle: IProtyle, data: IAV, menuElement: HTMLE currentElement = menuElement.querySelector(".b3-menu__item--current"); } if (currentElement.querySelector(".b3-menu__checked")) { - removeCellOption(protyle, data, cellElements, menuElement.querySelector(`.b3-chips .b3-chip[data-content="${escapeAttr(currentElement.dataset.name)}"]`), blockElement); + removeCellOption(protyle, cellElements, menuElement.querySelector(`.b3-chips .b3-chip[data-content="${escapeAttr(currentElement.dataset.name)}"]`), blockElement); } else { addColOptionOrCell(protyle, data, cellElements, currentElement, menuElement, blockElement); } } else if (event.key === "Backspace" && inputElement.value === "") { - removeCellOption(protyle, data, cellElements, inputElement.previousElementSibling as HTMLElement, blockElement); + removeCellOption(protyle, cellElements, inputElement.previousElementSibling as HTMLElement, blockElement); } }); }; @@ -450,7 +430,7 @@ export const addColOptionOrCell = (protyle: IProtyle, data: IAV, cellElements: H const rowElement = hasClosestByClassName(item, "av__row"); if (rowElement) { cellElements[index] = (blockElement.querySelector(`.av__row[data-id="${rowElement.dataset.id}"] .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; } }); } @@ -474,23 +454,8 @@ export const addColOptionOrCell = (protyle: IProtyle, data: IAV, cellElements: H if (!itemRowElement) { return; } - let cellValue: IAVCellValue; const rowID = itemRowElement.dataset.id; - // 快速选中后如果 render 了再使用 genCellValueByElement 获取的元素和当前选中的不一致, https://github.com/siyuan-note/siyuan/issues/11268 - data.view.rows.find(row => { - if (row.id === rowID) { - row.cells.find(cell => { - if (cell.value.keyID === item.dataset.colId) { - if (!cell.value.mSelect) { - cell.value.mSelect = []; - } - cellValue = cell.value; - return true; - } - }); - return true; - } - }); + const cellValue: IAVCellValue = cellValues[index]; const oldValue = JSON.parse(JSON.stringify(cellValue)); if (index === 0) { if (colData.type === "mSelect") { @@ -569,7 +534,15 @@ export const addColOptionOrCell = (protyle: IProtyle, data: IAV, cellElements: H } }; -export const getSelectHTML = (data: IAVTable, cellElements: HTMLElement[]) => { +export const getSelectHTML = (data: IAVTable, cellElements: HTMLElement[], init = false) => { + if (init) { + // 快速选中后如果 render 了再使用 genCellValueByElement 获取的元素和当前选中的不一致, https://github.com/siyuan-note/siyuan/issues/11268 + cellValues = []; + const isCustomAttr = cellElements[0].classList.contains("custom-attr__avvalue"); + cellElements.forEach(item => { + cellValues.push(genCellValueByElement(isCustomAttr ? item.dataset.type as TAVCol : getTypeByCellElement(item), item)); + }); + } const colId = cellElements[0].dataset["colId"]; const colData = data.columns.find(item => { if (item.id === colId) { @@ -579,7 +552,7 @@ export const getSelectHTML = (data: IAVTable, cellElements: HTMLElement[]) => { let selectedHTML = ""; const selected: string[] = []; - genCellValueByElement(colData.type, cellElements[0]).mSelect?.forEach((item) => { + cellValues[0].mSelect?.forEach((item) => { selected.push(item.content); selectedHTML += `
${item.content}
`; });