🐛 cell 获取错误

This commit is contained in:
Vanessa 2023-12-29 14:30:46 +08:00
parent 52de7a24d4
commit aa2b52bad9
5 changed files with 72 additions and 69 deletions

View file

@ -14,12 +14,14 @@ import {genAVValueHTML} from "./blockAttr";
import {hideMessage, showMessage} from "../../../dialog/message"; import {hideMessage, showMessage} from "../../../dialog/message";
import {fetchPost} from "../../../util/fetch"; import {fetchPost} from "../../../util/fetch";
import {hasClosestBlock, hasClosestByClassName} from "../../util/hasClosest"; import {hasClosestBlock, hasClosestByClassName} from "../../util/hasClosest";
import {genCellValueByElement, getTypeByCellElement} from "./cell";
export const bindAssetEvent = (options: { export const bindAssetEvent = (options: {
protyle: IProtyle, protyle: IProtyle,
data: IAV, data: IAV,
menuElement: HTMLElement, menuElement: HTMLElement,
cellElements: HTMLElement[] cellElements: HTMLElement[],
blockElement: Element
}) => { }) => {
options.menuElement.querySelector("input").addEventListener("change", (event: InputEvent & { options.menuElement.querySelector("input").addEventListener("change", (event: InputEvent & {
target: HTMLInputElement target: HTMLInputElement
@ -42,7 +44,8 @@ export const bindAssetEvent = (options: {
data: options.data, data: options.data,
cellElements: options.cellElements, cellElements: options.cellElements,
type: "addUpdate", type: "addUpdate",
addUpdateValue: value addUpdateValue: value,
blockElement: options.blockElement
}); });
}); });
}); });
@ -110,61 +113,33 @@ export const updateAssetCell = (options: {
type: "replace" | "addUpdate" | "remove", type: "replace" | "addUpdate" | "remove",
replaceValue?: IAVCellAssetValue[], replaceValue?: IAVCellAssetValue[],
addUpdateValue?: IAVCellAssetValue[], addUpdateValue?: IAVCellAssetValue[],
removeContent?: string removeContent?: string,
blockElement: Element
}) => { }) => {
let cellIndex: number;
Array.from((hasClosestByClassName(options.cellElements[0], "av__row") as HTMLElement).querySelectorAll(".av__cell")).find((item: HTMLElement, index) => {
if (item.dataset.id === options.cellElements[0].dataset.id) {
cellIndex = index;
return true;
}
});
const colId = options.cellElements[0].dataset.colId; const colId = options.cellElements[0].dataset.colId;
const cellDoOperations: IOperation[] = []; const cellDoOperations: IOperation[] = [];
const cellUndoOperations: IOperation[] = []; const cellUndoOperations: IOperation[] = [];
let newValue: IAVCellAssetValue[] = [];
options.cellElements.forEach((item, elementIndex) => { options.cellElements.forEach((item, elementIndex) => {
let cellData: IAVCell; if (!options.blockElement.contains(item)) {
item = options.cellElements[elementIndex] = options.blockElement.querySelector(`.av__cell[data-id="${item.dataset.id}"]`) as HTMLElement;
}
const cellValue = genCellValueByElement(getTypeByCellElement(item) || item.dataset.type as TAVCol, item);
const rowID = (hasClosestByClassName(item, "av__row") as HTMLElement).dataset.id; const rowID = (hasClosestByClassName(item, "av__row") as HTMLElement).dataset.id;
options.data.view.rows.find(row => { const oldValue = JSON.parse(JSON.stringify(cellValue))
if (row.id === rowID) { if (elementIndex === 0) {
if (typeof cellIndex === "number") { if (options.type === "remove") {
cellData = row.cells[cellIndex]; cellValue.mAsset.find((oldItem, index) => {
// 为空时 cellId 每次请求都不一致
cellData.id = item.dataset.id;
if (!cellData.value || !cellData.value.mAsset) {
cellData.value = {type: "mAsset", mAsset: []} as IAVCellValue;
}
} else {
cellData = row.cells.find(cellItem => {
if (cellItem.id === item.dataset.id) {
return true;
}
});
}
return true;
}
});
const oldValue = Object.assign([], cellData.value.mAsset);
if (options.type === "remove") {
if (elementIndex === 0) {
cellData.value.mAsset.find((oldItem, index) => {
if (oldItem.content === options.removeContent) { if (oldItem.content === options.removeContent) {
cellData.value.mAsset.splice(index, 1); cellValue.mAsset.splice(index, 1);
return true; return true;
} }
}); });
newValue = cellData.value.mAsset; } else if (options.type === "addUpdate") {
} else {
cellData.value.mAsset = newValue;
}
} else if (options.type === "addUpdate") {
if (elementIndex === 0) {
options.addUpdateValue.forEach(newitem => { options.addUpdateValue.forEach(newitem => {
if (!newitem.content) { if (!newitem.content) {
return; return;
} }
const hasMatch = cellData.value.mAsset.find(oldItem => { const hasMatch = cellValue.mAsset.find(oldItem => {
if (oldItem.content === newitem.content) { if (oldItem.content === newitem.content) {
oldItem.name = newitem.name; oldItem.name = newitem.name;
oldItem.type = newitem.type; oldItem.type = newitem.type;
@ -175,45 +150,57 @@ export const updateAssetCell = (options: {
if (newitem.type === "file" && !newitem.name) { if (newitem.type === "file" && !newitem.name) {
newitem.name = newitem.content; newitem.name = newitem.content;
} }
cellData.value.mAsset.push(newitem); cellValue.mAsset.push(newitem);
} }
}); });
newValue = cellData.value.mAsset;
} else { } else {
cellData.value.mAsset = newValue; cellValue.mAsset = options.replaceValue;
} }
} else {
cellData.value.mAsset = options.replaceValue;
} }
cellDoOperations.push({ cellDoOperations.push({
action: "updateAttrViewCell", action: "updateAttrViewCell",
id: cellData.id, id: cellValue.id,
keyID: colId, keyID: colId,
rowID, rowID,
avID: options.data.id, avID: options.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: options.data.id, avID: options.data.id,
data: { data: oldValue
mAsset: oldValue });
options.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);
} }
}); });
transaction(options.protyle, cellDoOperations, cellUndoOperations); transaction(options.protyle, cellDoOperations, cellUndoOperations);
const menuElement = document.querySelector(".av__panel > .b3-menu") as HTMLElement; const menuElement = document.querySelector(".av__panel > .b3-menu") as HTMLElement;
if (menuElement) { if (menuElement) {
menuElement.innerHTML = getAssetHTML(options.data.view, options.cellElements); menuElement.innerHTML = getAssetHTML(options.data.view, options.cellElements);
bindAssetEvent({protyle: options.protyle, data: options.data, menuElement, cellElements: options.cellElements}); bindAssetEvent({
protyle: options.protyle,
data: options.data,
menuElement,
cellElements: options.cellElements,
blockElement: options.blockElement
});
const cellRect = (options.cellElements[0].classList.contains("custom-attr__avvalue") ? options.cellElements[0] : options.protyle.wysiwyg.element.querySelector(`.av__cell[data-id="${options.cellElements[0].dataset.id}"]`)).getBoundingClientRect(); const cellRect = (options.cellElements[0].classList.contains("custom-attr__avvalue") ? options.cellElements[0] : options.protyle.wysiwyg.element.querySelector(`.av__cell[data-id="${options.cellElements[0].dataset.id}"]`)).getBoundingClientRect();
setTimeout(() => { setTimeout(() => {
setPosition(menuElement, cellRect.left, cellRect.bottom, cellRect.height); setPosition(menuElement, cellRect.left, cellRect.bottom, cellRect.height);
@ -221,7 +208,7 @@ export const updateAssetCell = (options: {
} }
}; };
export const editAssetItem = (protyle: IProtyle, data: IAV, cellElements: HTMLElement[], target: HTMLElement) => { export const editAssetItem = (protyle: IProtyle, data: IAV, cellElements: HTMLElement[], target: HTMLElement, blockElement: Element) => {
const linkAddress = target.dataset.content; const linkAddress = target.dataset.content;
const type = target.dataset.type as "image" | "file"; const type = target.dataset.type as "image" | "file";
const menu = new Menu("av-asset-edit", () => { const menu = new Menu("av-asset-edit", () => {
@ -233,6 +220,7 @@ export const editAssetItem = (protyle: IProtyle, data: IAV, cellElements: HTMLEl
data, data,
cellElements, cellElements,
type: "addUpdate", type: "addUpdate",
blockElement,
addUpdateValue: [{ addUpdateValue: [{
content: linkAddress, content: linkAddress,
name: textElement.value, name: textElement.value,
@ -265,6 +253,7 @@ export const editAssetItem = (protyle: IProtyle, data: IAV, cellElements: HTMLEl
protyle, protyle,
data, data,
cellElements, cellElements,
blockElement,
type: "remove", type: "remove",
removeContent: linkAddress removeContent: linkAddress
}); });
@ -289,7 +278,7 @@ export const editAssetItem = (protyle: IProtyle, data: IAV, cellElements: HTMLEl
}); });
}; };
export const addAssetLink = (protyle: IProtyle, data: IAV, cellElements: HTMLElement[], target: HTMLElement) => { export const addAssetLink = (protyle: IProtyle, data: IAV, cellElements: HTMLElement[], target: HTMLElement, blockElement: Element) => {
const menu = new Menu("av-asset-link", () => { const menu = new Menu("av-asset-link", () => {
const textElements = menu.element.querySelectorAll("textarea"); const textElements = menu.element.querySelectorAll("textarea");
if (!textElements[0].value) { if (!textElements[0].value) {
@ -299,6 +288,7 @@ export const addAssetLink = (protyle: IProtyle, data: IAV, cellElements: HTMLEle
protyle, protyle,
data, data,
cellElements, cellElements,
blockElement,
type: "addUpdate", type: "addUpdate",
addUpdateValue: [{ addUpdateValue: [{
type: "file", type: "file",
@ -327,7 +317,7 @@ export const addAssetLink = (protyle: IProtyle, data: IAV, cellElements: HTMLEle
}); });
}; };
export const dragUpload = (files: string[], protyle: IProtyle, cellElement: HTMLElement, avID: string) => { export const dragUpload = (files: string[], protyle: IProtyle, cellElement: HTMLElement, avID: string, blockElement: Element) => {
const msgId = showMessage(window.siyuan.languages.uploading, 0); const msgId = showMessage(window.siyuan.languages.uploading, 0);
fetchPost("/api/asset/insertLocalAssets", { fetchPost("/api/asset/insertLocalAssets", {
assetPaths: files, assetPaths: files,
@ -361,6 +351,7 @@ export const dragUpload = (files: string[], protyle: IProtyle, cellElement: HTML
}, (response) => { }, (response) => {
updateAssetCell({ updateAssetCell({
protyle, protyle,
blockElement,
data: response.data as IAV, data: response.data as IAV,
cellElements: [cellElement], cellElements: [cellElement],
type: "addUpdate", type: "addUpdate",

View file

@ -158,10 +158,12 @@ export const setDateValue = (options: {
const cellValue = genCellValueByElement(getTypeByCellElement(item) || item.dataset.type as TAVCol, item); const cellValue = genCellValueByElement(getTypeByCellElement(item) || item.dataset.type as TAVCol, item);
const oldValue = JSON.parse(JSON.stringify(cellValue)) const oldValue = JSON.parse(JSON.stringify(cellValue))
const rowID = (hasClosestByClassName(item, "av__row") as HTMLElement).dataset.id; const rowID = (hasClosestByClassName(item, "av__row") as HTMLElement).dataset.id;
cellValue.date = Object.assign(cellValue.date || { if (elementIndex === 0) {
isNotEmpty2: false, cellValue.date = Object.assign(cellValue.date || {
isNotEmpty: false isNotEmpty2: false,
}, options.value); isNotEmpty: false
}, options.value);
}
cellDoOperations.push({ cellDoOperations.push({
action: "updateAttrViewCell", action: "updateAttrViewCell",
id: cellValue.id, id: cellValue.id,

View file

@ -101,7 +101,13 @@ export const openMenuPanel = (options: {
blockElement: options.blockElement blockElement: options.blockElement
}); });
} else if (options.type === "asset") { } else if (options.type === "asset") {
bindAssetEvent({protyle: options.protyle, data, menuElement, cellElements: options.cellElements}); bindAssetEvent({
protyle: options.protyle,
data,
menuElement,
cellElements: options.cellElements,
blockElement: options.blockElement
});
setTimeout(() => { setTimeout(() => {
setPosition(menuElement, cellRect.left, cellRect.bottom, cellRect.height); setPosition(menuElement, cellRect.left, cellRect.bottom, cellRect.height);
}, Constants.TIMEOUT_LOAD); // 等待加载 }, Constants.TIMEOUT_LOAD); // 等待加载
@ -264,7 +270,8 @@ export const openMenuPanel = (options: {
data, data,
cellElements: options.cellElements, cellElements: options.cellElements,
type: "replace", type: "replace",
replaceValue replaceValue,
blockElement: options.blockElement
}); });
return; return;
} }
@ -932,7 +939,7 @@ export const openMenuPanel = (options: {
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "addAssetLink") { } else if (type === "addAssetLink") {
addAssetLink(options.protyle, data, options.cellElements, target); addAssetLink(options.protyle, data, options.cellElements, target, options.blockElement);
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
break; break;
@ -963,7 +970,8 @@ export const openMenuPanel = (options: {
data, data,
cellElements: options.cellElements, cellElements: options.cellElements,
type: "addUpdate", type: "addUpdate",
addUpdateValue: [value] addUpdateValue: [value],
blockElement: options.blockElement
}); });
window.siyuan.menus.menu.remove(); window.siyuan.menus.menu.remove();
}); });
@ -996,7 +1004,7 @@ export const openMenuPanel = (options: {
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "editAssetItem") { } else if (type === "editAssetItem") {
editAssetItem(options.protyle, data, options.cellElements, target.parentElement); editAssetItem(options.protyle, data, options.cellElements, target.parentElement, options.blockElement);
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
break; break;

View file

@ -145,12 +145,14 @@ const genUploadedLabel = (responseText: string, protyle: IProtyle) => {
}); });
if ((nodeElement && nodeElement.classList.contains("av"))) { if ((nodeElement && nodeElement.classList.contains("av"))) {
updateCellsValue(protyle, nodeElement, avAssets); updateCellsValue(protyle, nodeElement, avAssets);
document.querySelector(".av__panel")?.remove();
return return
} }
if (document.querySelector(".av__panel")) { if (document.querySelector(".av__panel")) {
const blockElement = hasClosestBlock(protyle.wysiwyg.element.querySelector(".av__cell--select")); const blockElement = hasClosestBlock(protyle.wysiwyg.element.querySelector(".av__cell--select"));
if (blockElement) { if (blockElement) {
updateCellsValue(protyle, blockElement, avAssets); updateCellsValue(protyle, blockElement, avAssets);
document.querySelector(".av__panel")?.remove();
return; return;
} }
} }

View file

@ -1016,7 +1016,7 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
for (let i = 0; i < event.dataTransfer.files.length; i++) { for (let i = 0; i < event.dataTransfer.files.length; i++) {
files.push(event.dataTransfer.files[i].path); files.push(event.dataTransfer.files[i].path);
} }
dragUpload(files, protyle, cellElement, avElement.dataset.avId); dragUpload(files, protyle, cellElement, avElement.dataset.avId, avElement);
} }
} }
} }