Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-23 01:50:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

🐛 fix https://github.com/siyuan-note/siyuan/issues/10052

Browse source
This commit is contained in:
Vanessa 2024-01-02 23:04:25 +08:00
parent d9bfc45592
commit 84f3da2ae8
2 changed files with 27 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

57
app/src/protyle/render/av/asset.ts
View file

@ -51,43 +51,27 @@ export const bindAssetEvent = (options: {
}); });
}; };
export const getAssetHTML = (data: IAVTable, cellElements: HTMLElement[]) => { export const getAssetHTML = (cellElements: HTMLElement[]) => {
const cellId = cellElements[0].dataset.id;
const rowId = (hasClosestByClassName(cellElements[0], "av__row") as HTMLElement).dataset.id;
let cellData: IAVCell;
data.rows.find(row => {
if (row.id === rowId) {
row.cells.find(cell => {
if (cell.id === cellId) {
cellData = cell;
return true;
}
});
return true;
}
});
let html = ""; let html = "";
if (cellData?.value?.mAsset) { genCellValueByElement(getTypeByCellElement(cellElements[0]), cellElements[0]).mAsset.forEach(item => {
cellData.value.mAsset.forEach(item => { if (!item.content) {
if (!item.content) { return;
return; }
} let contentHTML;
let contentHTML; if (item.type === "image") {
if (item.type === "image") { contentHTML = `<span data-type="openAssetItem" class="fn__flex-1">
contentHTML = `<span data-type="openAssetItem" class="fn__flex-1">
<img style="max-height: 180px;max-width: 360px;border-radius: var(--b3-border-radius);margin: 4px 0;" src="${item.content}"/> <img style="max-height: 180px;max-width: 360px;border-radius: var(--b3-border-radius);margin: 4px 0;" src="${item.content}"/>
</span>`; </span>`;
} else { } else {
contentHTML = `<span data-type="openAssetItem" class="fn__ellipsis b3-menu__label" style="max-width: 360px">${item.name}</span>`; contentHTML = `<span data-type="openAssetItem" class="fn__ellipsis b3-menu__label" style="max-width: 360px">${item.name}</span>`;
} }
html += `<button class="b3-menu__item" draggable="true" data-name="${item.name}" data-type="${item.type}" data-content="${item.content}"> html += `<button class="b3-menu__item" draggable="true" data-name="${item.name}" data-type="${item.type}" data-content="${item.content}">
<svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg> <svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg>
${contentHTML} ${contentHTML}
<svg class="b3-menu__action" data-type="editAssetItem"><use xlink:href="#iconEdit"></use></svg> <svg class="b3-menu__action" data-type="editAssetItem"><use xlink:href="#iconEdit"></use></svg>
</button>`; </button>`;
}); });
}
return `<div class="b3-menu__items"> return `<div class="b3-menu__items">
${html} ${html}
<button data-type="addAssetExist" class="b3-menu__item"> <button data-type="addAssetExist" class="b3-menu__item">
@ -121,7 +105,18 @@ export const updateAssetCell = (options: {
const cellUndoOperations: IOperation[] = []; const cellUndoOperations: IOperation[] = [];
options.cellElements.forEach((item, elementIndex) => { options.cellElements.forEach((item, elementIndex) => {
if (!options.blockElement.contains(item)) { if (!options.blockElement.contains(item)) {
item = options.cellElements[elementIndex] = options.blockElement.querySelector(`.av__cell[data-id="${item.dataset.id}"]`) as HTMLElement; const rowElement = hasClosestByClassName(item, "av__row");
if (rowElement) {
let cellIndex: number;
rowElement.querySelectorAll(".av__cell").forEach((cellElement: HTMLElement, ghostIndex) => {
if (cellElement.dataset.id === item.dataset.id) {
cellIndex = ghostIndex
}
});
if (typeof cellIndex === "number") {
item = options.cellElements[elementIndex] = options.blockElement.querySelectorAll(`.av__row[data-id="${rowElement.dataset.id}"] .av__cell`)[cellIndex] as HTMLElement;
}
}
} }
const cellValue = genCellValueByElement(getTypeByCellElement(item) || item.dataset.type as TAVCol, item); 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;
@ -193,7 +188,7 @@ export const updateAssetCell = (options: {
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.cellElements);
bindAssetEvent({ bindAssetEvent({
protyle: options.protyle, protyle: options.protyle,
data: options.data, data: options.data,

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

@ -65,7 +65,7 @@ export const openMenuPanel = (options: {
} else if (options.type === "select") { } else if (options.type === "select") {
html = getSelectHTML(data.view, options.cellElements); html = getSelectHTML(data.view, options.cellElements);
} else if (options.type === "asset") { } else if (options.type === "asset") {
html = getAssetHTML(data.view, options.cellElements); html = getAssetHTML(options.cellElements);
} else if (options.type === "edit") { } else if (options.type === "edit") {
html = getEditHTML({protyle: options.protyle, data, colId: options.colId}); html = getEditHTML({protyle: options.protyle, data, colId: options.colId});
} else if (options.type === "date") { } else if (options.type === "date") {