0ct0pu5/siyuan
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Vanessa 2024-05-17 00:42:20 +08:00
parent e141544791
commit 55f377c388
2 changed files with 76 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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;

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

@ -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 += `<div class="b3-chip b3-chip--middle" data-content="${escapeAttr(item.content)}" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">${item.content}<svg class="b3-chip__close" data-type="removeCellOption"><use xlink:href="#iconCloseRound"></use></svg></div>`;
});