github/siyuan
4
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-05-14 08:01:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

🐛 cell 获取错误

Browse Source
This commit is contained in:
Vanessa 2023-12-29 12:55:26 +08:00
parent d7a22abaa1
commit bd00b45c24
3 changed files with 99 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
app/src/protyle/render/av/cell.ts
View File

@ -31,23 +31,20 @@ export const getCellText = (cellElement: HTMLElement | false) => {
return cellText; return cellText;
}; };
const genCellValueByElement = (colType: TAVCol, cellElement: HTMLElement) => { export const genCellValueByElement = (colType: TAVCol, cellElement: HTMLElement) => {
let cellValue: IAVCellValue; const cellValue: IAVCellValue = {
type: colType,
id: cellElement.dataset.id,
};
if (colType === "number") { if (colType === "number") {
const value = cellElement.querySelector(".av__celltext").getAttribute("data-content"); const value = cellElement.querySelector(".av__celltext").getAttribute("data-content");
cellValue = { cellValue.number = {
type: colType, content: parseFloat(value) || 0,
number: { isNotEmpty: !!value
content: parseFloat(value) || 0,
isNotEmpty: !!value
}
}; };
} else if (["text", "block", "url", "phone", "email", "template"].includes(colType)) { } else if (["text", "block", "url", "phone", "email", "template"].includes(colType)) {
cellValue = { cellValue[colType as "text"] = {
type: colType, content: cellElement.querySelector(".av__celltext").textContent.trim()
[colType]: {
content: cellElement.querySelector(".av__celltext").textContent.trim()
}
}; };
} else if (colType === "mSelect" || colType === "select") { } else if (colType === "mSelect" || colType === "select") {
const mSelect: IAVCellSelectValue[] = []; const mSelect: IAVCellSelectValue[] = [];
@ -57,29 +54,17 @@ const genCellValueByElement = (colType: TAVCol, cellElement: HTMLElement) => {
color: item.style.color.replace("var(--b3-font-color", "").replace(")", "") color: item.style.color.replace("var(--b3-font-color", "").replace(")", "")
}); });
}); });
cellValue = { cellValue.mSelect = mSelect;
type: colType,
mSelect
};
} else if (["date", "created", "updated"].includes(colType)) { } else if (["date", "created", "updated"].includes(colType)) {
cellValue = { cellValue[colType as "date"] = JSON.parse(cellElement.querySelector(".av__celltext").getAttribute("data-value"))
type: colType,
[colType]: JSON.parse(cellElement.querySelector(".av__celltext").getAttribute("data-value"))
};
} else if (colType === "checkbox") { } else if (colType === "checkbox") {
cellValue = { cellValue.checkbox = {
type: colType, checked: cellElement.querySelector("use").getAttribute("xlink:href") === "#iconCheck" ? true : false
checkbox: {
checked: cellElement.querySelector("use").getAttribute("xlink:href") === "#iconCheck" ? true : false
}
}; };
} else if (colType === "relation") { } else if (colType === "relation") {
cellValue = { cellValue.relation = {
type: colType, blockIDs: Array.from(cellElement.querySelectorAll("span")).map((item: HTMLElement) => item.getAttribute("data-id")),
relation: { contents: Array.from(cellElement.querySelectorAll("span")).map((item: HTMLElement) => item.textContent),
blockIDs: Array.from(cellElement.querySelectorAll("span")).map((item: HTMLElement) => item.getAttribute("data-id")),
contents: Array.from(cellElement.querySelectorAll("span")).map((item: HTMLElement) => item.textContent),
}
}; };
} else if (colType === "mAsset") { } else if (colType === "mAsset") {
const mAsset: IAVCellAssetValue[] = [] const mAsset: IAVCellAssetValue[] = []
@ -91,10 +76,7 @@ const genCellValueByElement = (colType: TAVCol, cellElement: HTMLElement) => {
name: isImg ? "" : item.textContent name: isImg ? "" : item.textContent
}) })
}) })
cellValue = { cellValue.mAsset = mAsset
type: colType,
mAsset
};
} }
if (colType === "block") { if (colType === "block") {
cellValue.isDetached = cellElement.dataset.detached === "true"; cellValue.isDetached = cellElement.dataset.detached === "true";

10
app/src/protyle/render/av/openMenuPanel.ts
View File

@ -91,7 +91,7 @@ export const openMenuPanel = (options: {
if (["select", "date", "asset", "relation"].includes(options.type)) { if (["select", "date", "asset", "relation"].includes(options.type)) {
const cellRect = options.cellElements[options.cellElements.length - 1].getBoundingClientRect(); const cellRect = options.cellElements[options.cellElements.length - 1].getBoundingClientRect();
if (options.type === "select") { if (options.type === "select") {
bindSelectEvent(options.protyle, data, menuElement, options.cellElements); bindSelectEvent(options.protyle, data, menuElement, options.cellElements, options.blockElement);
} else if (options.type === "date") { } else if (options.type === "date") {
bindDateEvent({protyle: options.protyle, data, menuElement, cellElements: options.cellElements}); bindDateEvent({protyle: options.protyle, data, menuElement, cellElements: options.cellElements});
} else if (options.type === "asset") { } else if (options.type === "asset") {
@ -296,7 +296,7 @@ export const openMenuPanel = (options: {
}]); }]);
if (options.cellElements) { if (options.cellElements) {
menuElement.innerHTML = getSelectHTML(data.view, options.cellElements); menuElement.innerHTML = getSelectHTML(data.view, options.cellElements);
bindSelectEvent(options.protyle, data, menuElement, options.cellElements); bindSelectEvent(options.protyle, data, menuElement, options.cellElements, options.blockElement);
} else { } else {
menuElement.innerHTML = getEditHTML({ menuElement.innerHTML = getEditHTML({
protyle: options.protyle, protyle: options.protyle,
@ -905,7 +905,7 @@ export const openMenuPanel = (options: {
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "setColOption") { } else if (type === "setColOption") {
setColOption(options.protyle, data, target, options.cellElements); setColOption(options.protyle, data, target, options.blockElement, options.cellElements);
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
break; break;
@ -915,13 +915,13 @@ export const openMenuPanel = (options: {
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "addColOptionOrCell") { } else if (type === "addColOptionOrCell") {
addColOptionOrCell(options.protyle, data, options.cellElements, target, menuElement); addColOptionOrCell(options.protyle, data, options.cellElements, target, menuElement, options.blockElement);
window.siyuan.menus.menu.remove(); window.siyuan.menus.menu.remove();
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "removeCellOption") { } else if (type === "removeCellOption") {
removeCellOption(options.protyle, data, options.cellElements, target.parentElement); removeCellOption(options.protyle, data, options.cellElements, target.parentElement, options.blockElement);
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
break; break;

180
app/src/protyle/render/av/select.ts
View File

@ -1,12 +1,13 @@
import {Menu} from "../../../plugin/Menu"; import {Menu} from "../../../plugin/Menu";
import {transaction} from "../../wysiwyg/transaction"; import {transaction} from "../../wysiwyg/transaction";
import {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, getEditHTML} from "./col";
import {updateAttrViewCellAnimation} from "./action"; import {updateAttrViewCellAnimation} from "./action";
import {genAVValueHTML} from "./blockAttr"; import {genAVValueHTML} from "./blockAttr";
import {escapeAttr} from "../../../util/escape"; import {escapeAttr} from "../../../util/escape";
import {genCellValueByElement, getTypeByCellElement} from "./cell";
const filterSelectHTML = (key: string, options: { name: string, color: string }[]) => { const filterSelectHTML = (key: string, options: { name: string, color: string }[]) => {
let html = ""; let html = "";
@ -46,71 +47,67 @@ const filterSelectHTML = (key: string, options: { name: string, color: string }[
return html; return html;
}; };
export const removeCellOption = (protyle: IProtyle, data: IAV, cellElements: HTMLElement[], target: HTMLElement) => { export const removeCellOption = (protyle: IProtyle, data: IAV, cellElements: HTMLElement[], target: HTMLElement, blockElement: Element) => {
if (!target) { if (!target) {
return; return;
} }
const colId = cellElements[0].dataset.colId; const colId = cellElements[0].dataset.colId;
const doOperations: IOperation[] = []; const doOperations: IOperation[] = [];
const undoOperations: IOperation[] = []; const undoOperations: IOperation[] = [];
let newData: IAVCellSelectValue[];
cellElements.forEach((item, elementIndex) => { cellElements.forEach((item, elementIndex) => {
if (!blockElement.contains(item)) {
item = cellElements[elementIndex] = blockElement.querySelector(`.av__cell[data-id="${item.dataset.id}"]`) as HTMLElement;
}
const rowID = (hasClosestByClassName(item, "av__row") as HTMLElement).dataset.id; const rowID = (hasClosestByClassName(item, "av__row") as HTMLElement).dataset.id;
const cellId = item.dataset.id; const cellValue = genCellValueByElement(getTypeByCellElement(item) || item.dataset.type as TAVCol, item);
let cellData: IAVCell; const oldValue = Object.assign({}, cellValue.mSelect);
if (elementIndex === 0) {
cellValue.mSelect?.find((item: { content: string }, index: number) => {
if (item.content === target.dataset.content) {
cellValue.mSelect.splice(index, 1);
return true;
}
});
}
doOperations.push({
action: "updateAttrViewCell",
id: cellValue.id,
keyID: colId,
rowID,
avID: data.id,
data: cellValue
});
undoOperations.push({
action: "updateAttrViewCell",
id: cellValue.id,
keyID: colId,
rowID,
avID: data.id,
data: oldValue
});
data.view.rows.find(row => { data.view.rows.find(row => {
if (row.id === rowID) { if (row.id === rowID) {
row.cells.find(cell => { row.cells.find(cell => {
if (cell.id === cellId) { if (cell.id === cellValue.id) {
cellData = cell; cell.value = cellValue;
return true; return true;
} }
}); });
return true; return true;
} }
}); });
const oldValue = Object.assign([], cellData.value.mSelect);
if (elementIndex === 0) {
cellData.value.mSelect?.find((item: { content: string }, index: number) => {
if (item.content === target.dataset.content) {
cellData.value.mSelect.splice(index, 1);
return true;
}
});
newData = cellData.value.mSelect;
} else {
cellData.value.mSelect = newData;
}
doOperations.push({
action: "updateAttrViewCell",
id: cellId,
keyID: colId,
rowID,
avID: data.id,
data: cellData.value
});
undoOperations.push({
action: "updateAttrViewCell",
id: cellId,
keyID: colId,
rowID,
avID: data.id,
data: {
mSelect: oldValue
}
});
if (item.classList.contains("custom-attr__avvalue")) { if (item.classList.contains("custom-attr__avvalue")) {
item.innerHTML = genAVValueHTML(cellData.value); item.innerHTML = genAVValueHTML(cellValue);
} else { } else {
updateAttrViewCellAnimation(item, cellData.value); updateAttrViewCellAnimation(item, cellValue);
} }
}); });
transaction(protyle, doOperations, undoOperations); transaction(protyle, doOperations, undoOperations);
target.remove(); target.remove();
}; };
export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement, cellElements?: HTMLElement[]) => { export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement, blockElement: Element, cellElements?: HTMLElement[]) => {
const menuElement = hasClosestByClassName(target, "b3-menu"); const menuElement = hasClosestByClassName(target, "b3-menu");
if (!menuElement) { if (!menuElement) {
return; return;
@ -195,7 +192,7 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
}); });
}); });
menuElement.innerHTML = getSelectHTML(data.view, cellElements); menuElement.innerHTML = getSelectHTML(data.view, cellElements);
bindSelectEvent(protyle, data, menuElement, cellElements); bindSelectEvent(protyle, data, menuElement, cellElements, blockElement);
} }
}); });
if (menu.isOpen) { if (menu.isOpen) {
@ -273,7 +270,7 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
}); });
}); });
menuElement.innerHTML = getSelectHTML(data.view, cellElements); menuElement.innerHTML = getSelectHTML(data.view, cellElements);
bindSelectEvent(protyle, data, menuElement, cellElements); bindSelectEvent(protyle, data, menuElement, cellElements, blockElement);
} }
}); });
} }
@ -353,7 +350,7 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
}); });
}); });
menuElement.innerHTML = getSelectHTML(data.view, cellElements); menuElement.innerHTML = getSelectHTML(data.view, cellElements);
bindSelectEvent(protyle, data, menuElement, cellElements); bindSelectEvent(protyle, data, menuElement, cellElements, blockElement);
} }
name = inputElement.value; name = inputElement.value;
color = (index + 1).toString(); color = (index + 1).toString();
@ -372,7 +369,7 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
inputElement.select(); inputElement.select();
}; };
export const bindSelectEvent = (protyle: IProtyle, data: IAV, menuElement: HTMLElement, cellElements: HTMLElement[]) => { 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 = cellElements[0].dataset.colId;
let colData: IAVColumn; let colData: IAVColumn;
@ -407,14 +404,14 @@ export const bindSelectEvent = (protyle: IProtyle, data: IAV, menuElement: HTMLE
if (!currentElement) { if (!currentElement) {
currentElement = menuElement.querySelector(".b3-menu__item--current"); currentElement = menuElement.querySelector(".b3-menu__item--current");
} }
addColOptionOrCell(protyle, data, cellElements, currentElement, menuElement); addColOptionOrCell(protyle, data, cellElements, currentElement, menuElement, blockElement);
} else if (event.key === "Backspace" && inputElement.value === "") { } else if (event.key === "Backspace" && inputElement.value === "") {
removeCellOption(protyle, data, cellElements, inputElement.previousElementSibling as HTMLElement); removeCellOption(protyle, data, cellElements, inputElement.previousElementSibling as HTMLElement, blockElement);
} }
}); });
}; };
export const addColOptionOrCell = (protyle: IProtyle, data: IAV, cellElements: HTMLElement[], currentElement: HTMLElement, menuElement: HTMLElement) => { export const addColOptionOrCell = (protyle: IProtyle, data: IAV, cellElements: HTMLElement[], currentElement: HTMLElement, menuElement: HTMLElement, blockElement: Element) => {
let hasSelected = false; let hasSelected = false;
Array.from(menuElement.querySelectorAll(".b3-chips .b3-chip")).find((item: HTMLElement) => { Array.from(menuElement.querySelectorAll(".b3-chips .b3-chip")).find((item: HTMLElement) => {
if (item.dataset.content === currentElement.dataset.name) { if (item.dataset.content === currentElement.dataset.name) {
@ -427,17 +424,12 @@ export const addColOptionOrCell = (protyle: IProtyle, data: IAV, cellElements: H
return; return;
} }
const rowElement = hasClosestByClassName(cellElements[0], "av__row"); const nodeElement = hasClosestBlock(cellElements[0]);
if (!rowElement) { if (!nodeElement) {
return; cellElements.forEach((item, index) => {
cellElements[index] = blockElement.querySelector(`.av__cell[data-id="${item.dataset.id}"]`) as HTMLElement;
});
} }
let cellIndex: number;
Array.from(rowElement.querySelectorAll(".av__cell")).find((item: HTMLElement, index) => {
if (item.dataset.id === cellElements[0].dataset.id) {
cellIndex = index;
return true;
}
});
const colId = cellElements[0].dataset.colId; const colId = cellElements[0].dataset.colId;
let colData: IAVColumn; let colData: IAVColumn;
data.view.columns.find((item: IAVColumn) => { data.view.columns.find((item: IAVColumn) => {
@ -452,87 +444,67 @@ export const addColOptionOrCell = (protyle: IProtyle, data: IAV, cellElements: H
const cellDoOperations: IOperation[] = []; const cellDoOperations: IOperation[] = [];
const cellUndoOperations: IOperation[] = []; const cellUndoOperations: IOperation[] = [];
let newValue: IAVCellSelectValue[];
cellElements.forEach((item, index) => { cellElements.forEach((item, index) => {
const itemRowElement = hasClosestByClassName(item, "av__row"); const itemRowElement = hasClosestByClassName(item, "av__row");
if (!itemRowElement) { if (!itemRowElement) {
return; return;
} }
let cellData: IAVCell; const cellValue = genCellValueByElement(colData.type, item);
const rowID = itemRowElement.dataset.id; const oldValue = Object.assign({}, cellValue);
data.view.rows.find(row => { if (index === 0) {
if (row.id === rowID) { if (colData.type === "mSelect") {
if (typeof cellIndex === "number") {
cellData = row.cells[cellIndex];
// 为空时 cellId 每次请求都不一致
cellData.id = item.dataset.id;
if (!cellData.value || !cellData.value.mSelect) {
cellData.value = {mSelect: []} as IAVCellValue;
}
} else {
cellData = row.cells.find(cellItem => {
if (cellItem.id === item.dataset.id) {
return true;
}
});
}
return true;
}
});
const oldValue = Object.assign([], cellData.value.mSelect);
if (colData.type === "mSelect") {
if (index === 0) {
let hasOption = false; let hasOption = false;
cellData.value.mSelect.find((item) => { cellValue.mSelect.find((item) => {
if (item.content === currentElement.dataset.name) { if (item.content === currentElement.dataset.name) {
hasOption = true; hasOption = true;
return true; return true;
} }
}); });
if (!hasOption) { if (!hasOption) {
cellData.value.mSelect.push({ cellValue.mSelect.push({
color: currentElement.dataset.color, color: currentElement.dataset.color,
content: currentElement.dataset.name content: currentElement.dataset.name
}); });
} }
newValue = cellData.value.mSelect;
} else { } else {
cellData.value.mSelect = newValue; cellValue.mSelect = [{
}
} else {
if (index === 0) {
cellData.value.mSelect = [{
color: currentElement.dataset.color, color: currentElement.dataset.color,
content: currentElement.dataset.name content: currentElement.dataset.name
}]; }];
newValue = cellData.value.mSelect;
} else {
cellData.value.mSelect = newValue;
} }
} }
const rowID = itemRowElement.dataset.id;
cellDoOperations.push({ cellDoOperations.push({
action: "updateAttrViewCell", action: "updateAttrViewCell",
id: cellData.id, id: cellValue.id,
keyID: colId, keyID: colId,
rowID, rowID,
avID: data.id, avID: data.id,
data: cellData.value data: cellValue
}); });
cellUndoOperations.push({ cellUndoOperations.push({
action: "updateAttrViewCell", action: "updateAttrViewCell",
id: cellData.id, id: cellValue.id,
keyID: colId, keyID: colId,
rowID, rowID,
avID: data.id, avID: data.id,
data: { data: oldValue
[colData.type]: oldValue
}
}); });
data.view.rows.find(row => {
if (row.id === rowID) {
row.cells.find(cell => {
if (cell.id === cellValue.id) {
cell.value = cellValue;
return true;
}
});
return true;
}
})
if (item.classList.contains("custom-attr__avvalue")) { if (item.classList.contains("custom-attr__avvalue")) {
item.innerHTML = genAVValueHTML(cellData.value); item.innerHTML = genAVValueHTML(cellValue);
} else { } else {
updateAttrViewCellAnimation(item, cellData.value); updateAttrViewCellAnimation(item, cellValue);
} }
}); });
@ -560,7 +532,7 @@ export const addColOptionOrCell = (protyle: IProtyle, data: IAV, cellElements: H
menuElement.parentElement.remove(); menuElement.parentElement.remove();
} else { } else {
menuElement.innerHTML = getSelectHTML(data.view, cellElements); menuElement.innerHTML = getSelectHTML(data.view, cellElements);
bindSelectEvent(protyle, data, menuElement, cellElements); bindSelectEvent(protyle, data, menuElement, cellElements, blockElement);
menuElement.querySelector("input").focus(); menuElement.querySelector("input").focus();
} }
}; };