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

🎨 fix https://github.com/siyuan-note/siyuan/issues/10527

Browse source
This commit is contained in:
Vanessa 2024-03-07 23:40:57 +08:00
parent ab2664fb9c
commit b54ac4b436
3 changed files with 32 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

10
app/src/protyle/render/av/cell.ts
View file

@ -79,7 +79,7 @@ export const genCellValueByElement = (colType: TAVCol, cellElement: HTMLElement)
content: item.textContent, content: item.textContent,
id: item.dataset.id, id: item.dataset.id,
}, },
type:"block" type: "block"
}); });
}); });
cellValue.relation = { cellValue.relation = {
@ -656,11 +656,7 @@ export const renderCell = (cellValue: IAVCellValue) => {
} else if (cellValue.type === "relation") { } else if (cellValue.type === "relation") {
cellValue?.relation?.contents?.forEach((item) => { cellValue?.relation?.contents?.forEach((item) => {
if (item && item.block) { if (item && item.block) {
if (item.isDetached) { text += renderRollup(item) + ", ";
text += `<span class="av__celltext" data-id="${item.block.id}">${item.block.content || "Untitled"}</span>, `;
} else {
text += `<span data-type="block-ref" data-id="${item.block.id}" data-subtype="s" class="av__celltext av__celltext--ref">${item.block.content || "Untitled"}</span>, `;
}
} }
}); });
if (text && text.endsWith(", ")) { if (text && text.endsWith(", ")) {
@ -689,7 +685,7 @@ const renderRollup = (cellValue: IAVCellValue) => {
} }
} else if (cellValue.type === "block") { } else if (cellValue.type === "block") {
if (cellValue?.isDetached) { if (cellValue?.isDetached) {
text = `<span class="av__celltext">${cellValue.block?.content || "Untitled"}</span>`; text = `<span class="av__celltext" data-id="${cellValue.block?.id}">${cellValue.block?.content || "Untitled"}</span>`;
} else { } else {
text = `<span data-type="block-ref" data-id="${cellValue.block?.id}" data-subtype="s" class="av__celltext av__celltext--ref">${cellValue.block?.content || "Untitled"}</span>`; text = `<span data-type="block-ref" data-id="${cellValue.block?.id}" data-subtype="s" class="av__celltext av__celltext--ref">${cellValue.block?.content || "Untitled"}</span>`;
} }

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

@ -365,7 +365,24 @@ export const openMenuPanel = (options: {
targetElement.after(sourceElement); targetElement.after(sourceElement);
} }
targetElement.classList.remove("dragover__bottom", "dragover__top"); targetElement.classList.remove("dragover__bottom", "dragover__top");
setRelationCell(options.protyle, options.blockElement as HTMLElement, sourceElement.parentElement, options.cellElements); const blockIDs: string[] = [];
const contents: IAVCellValue[] = []
targetElement.parentElement.querySelectorAll(".fn__grab").forEach(item => {
const dateElement = item.nextElementSibling as HTMLElement
blockIDs.push(dateElement.dataset.id)
contents.push({
isDetached: !dateElement.style.color,
type: "block",
block: {
content: dateElement.textContent,
id: dateElement.dataset.id
}
})
})
updateCellsValue(options.protyle, options.blockElement as HTMLElement, {
blockIDs,
contents,
}, options.cellElements);
return; return;
} }

24
app/src/protyle/render/av/relation.ts
View file

@ -212,11 +212,9 @@ export const toggleUpdateRelationBtn = (menuItemsElement: HTMLElement, avId: str
const genSelectItemHTML = (type: "selected" | "empty" | "unselect", id?: string, isDetached?: boolean, text?: string) => { const genSelectItemHTML = (type: "selected" | "empty" | "unselect", id?: string, isDetached?: boolean, text?: string) => {
if (type === "selected") { if (type === "selected") {
return `<button data-id="${id}" data-type="setRelationCell" class="b3-menu__item" draggable="true"> return `<svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
<svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg> <span class="b3-menu__label${isDetached ? "" : " popover__block"}" ${isDetached ? "" : 'style="color:var(--b3-protyle-inline-blockref-color)"'} data-id="${id}">${text}</span>
<span class="b3-menu__label${isDetached ? "" : " popover__block"}" ${isDetached ? "" : 'style="color:var(--b3-protyle-inline-blockref-color)"'} data-id="${id}">${text}</span> <svg class="b3-menu__action"><use xlink:href="#iconMin"></use></svg>`;
<svg class="b3-menu__action"><use xlink:href="#iconMin"></use></svg>
</button>`;
} }
if (type === "empty") { if (type === "empty") {
return `<button class="b3-menu__item"> return `<button class="b3-menu__item">
@ -241,10 +239,8 @@ const filterItem = (menuElement: Element, cellElement: HTMLElement, keyword: str
let selectHTML = ""; let selectHTML = "";
const hasIds: string[] = [] const hasIds: string[] = []
cellElement.querySelectorAll("span").forEach((item) => { cellElement.querySelectorAll("span").forEach((item) => {
if (item.textContent.indexOf(keyword) > -1) { hasIds.push(item.dataset.id);
hasIds.push(item.dataset.id); selectHTML += `<button data-id="${item.dataset.id}" data-type="setRelationCell" class="b3-menu__item${item.textContent.indexOf(keyword) > -1 ? "" : " fn__none"}" draggable="true">${genSelectItemHTML("selected", item.dataset.id, !item.classList.contains("av__celltext--ref"), item.textContent || "Untitled")}</button>`;
selectHTML += genSelectItemHTML("selected", item.dataset.id, !item.classList.contains("av__celltext--ref"), item.textContent || "Untitled");
}
}) })
cells.forEach((item) => { cells.forEach((item) => {
if (!hasIds.includes(item.block.id)) { if (!hasIds.includes(item.block.id)) {
@ -254,6 +250,7 @@ const filterItem = (menuElement: Element, cellElement: HTMLElement, keyword: str
menuElement.querySelector(".b3-menu__items").innerHTML = `${selectHTML || genSelectItemHTML("empty")} menuElement.querySelector(".b3-menu__items").innerHTML = `${selectHTML || genSelectItemHTML("empty")}
<button class="b3-menu__separator"></button> <button class="b3-menu__separator"></button>
${html || genSelectItemHTML("empty")}`; ${html || genSelectItemHTML("empty")}`;
menuElement.querySelector(".b3-menu__items .b3-menu__item:not(.fn__none)").classList.add("b3-menu__item--current");
}); });
}; };
@ -273,7 +270,7 @@ export const bindRelationEvent = (options: {
const hasIds: string[] = [] const hasIds: string[] = []
options.cellElements[0].querySelectorAll("span").forEach((item) => { options.cellElements[0].querySelectorAll("span").forEach((item) => {
hasIds.push(item.dataset.id); hasIds.push(item.dataset.id);
selectHTML += genSelectItemHTML("selected", item.dataset.id, !item.classList.contains("av__celltext--ref"), item.textContent || "Untitled"); selectHTML += `<button data-id="${item.dataset.id}" data-type="setRelationCell" class="b3-menu__item" draggable="true">${genSelectItemHTML("selected", item.dataset.id, !item.classList.contains("av__celltext--ref"), item.textContent || "Untitled")}</button>`;
}) })
cells.forEach((item) => { cells.forEach((item) => {
if (!hasIds.includes(item.block.id)) { if (!hasIds.includes(item.block.id)) {
@ -286,7 +283,7 @@ export const bindRelationEvent = (options: {
${html || genSelectItemHTML("empty")}`; ${html || genSelectItemHTML("empty")}`;
const cellRect = options.cellElements[options.cellElements.length - 1].getBoundingClientRect(); const cellRect = options.cellElements[options.cellElements.length - 1].getBoundingClientRect();
setPosition(options.menuElement, cellRect.left, cellRect.bottom, cellRect.height); setPosition(options.menuElement, cellRect.left, cellRect.bottom, cellRect.height);
options.menuElement.querySelector(".b3-menu__items .b3-menu__item").classList.add("b3-menu__item--current"); options.menuElement.querySelector(".b3-menu__items .b3-menu__item:not(.fn__none)").classList.add("b3-menu__item--current");
const inputElement = options.menuElement.querySelector("input"); const inputElement = options.menuElement.querySelector("input");
inputElement.focus(); inputElement.focus();
const listElement = options.menuElement.querySelector(".b3-menu__items"); const listElement = options.menuElement.querySelector(".b3-menu__items");
@ -386,12 +383,13 @@ export const setRelationCell = (protyle: IProtyle, nodeElement: HTMLElement, tar
isDetached: !target.firstElementChild.getAttribute("style") isDetached: !target.firstElementChild.getAttribute("style")
}); });
separatorElement.before(target); separatorElement.before(target);
target.outerHTML = genSelectItemHTML("selected", targetId, !target.querySelector(".popover__block"), target.querySelector(".b3-menu__label").textContent); target.outerHTML = `<button data-id="${targetId}" data-type="setRelationCell" class="b3-menu__item" draggable="true">${genSelectItemHTML("selected", targetId, !target.querySelector(".popover__block"), target.querySelector(".b3-menu__label").textContent)}</button>`;
if (!separatorElement.nextElementSibling) { if (!separatorElement.nextElementSibling) {
separatorElement.insertAdjacentHTML("afterend", genSelectItemHTML("empty")); separatorElement.insertAdjacentHTML("afterend", genSelectItemHTML("empty"));
} }
} }
menuElement.firstElementChild.classList.add("b3-menu__item--current"); menuElement.querySelector(".b3-menu__item--current").classList.remove("b3-menu__item--current");
menuElement.querySelector(".b3-menu__items .b3-menu__item:not(.fn__none)").classList.add("b3-menu__item--current");
} }
updateCellsValue(protyle, nodeElement, newValue, cellElements); updateCellsValue(protyle, nodeElement, newValue, cellElements);
}; };