mirror of
https://github.com/siyuan-note/siyuan.git
synced 2025-12-22 09:30:14 +01:00
🐛 cell 获取错误
This commit is contained in:
parent
52de7a24d4
commit
aa2b52bad9
5 changed files with 72 additions and 69 deletions
|
|
@ -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",
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue