Vanessa 2024-03-07 23:40:57 +08:00
parent ab2664fb9c
commit b54ac4b436
3 changed files with 32 additions and 21 deletions

View file

@ -79,7 +79,7 @@ export const genCellValueByElement = (colType: TAVCol, cellElement: HTMLElement)
content: item.textContent,
id: item.dataset.id,
},
type:"block"
type: "block"
});
});
cellValue.relation = {
@ -656,11 +656,7 @@ export const renderCell = (cellValue: IAVCellValue) => {
} else if (cellValue.type === "relation") {
cellValue?.relation?.contents?.forEach((item) => {
if (item && item.block) {
if (item.isDetached) {
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>, `;
}
text += renderRollup(item) + ", ";
}
});
if (text && text.endsWith(", ")) {
@ -689,7 +685,7 @@ const renderRollup = (cellValue: IAVCellValue) => {
}
} else if (cellValue.type === "block") {
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 {
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>`;
}

View file

@ -365,7 +365,24 @@ export const openMenuPanel = (options: {
targetElement.after(sourceElement);
}
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;
}

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) => {
if (type === "selected") {
return `<button data-id="${id}" data-type="setRelationCell" class="b3-menu__item" draggable="true">
<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>
<svg class="b3-menu__action"><use xlink:href="#iconMin"></use></svg>
</button>`;
return `<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>
<svg class="b3-menu__action"><use xlink:href="#iconMin"></use></svg>`;
}
if (type === "empty") {
return `<button class="b3-menu__item">
@ -241,10 +239,8 @@ const filterItem = (menuElement: Element, cellElement: HTMLElement, keyword: str
let selectHTML = "";
const hasIds: string[] = []
cellElement.querySelectorAll("span").forEach((item) => {
if (item.textContent.indexOf(keyword) > -1) {
hasIds.push(item.dataset.id);
selectHTML += genSelectItemHTML("selected", item.dataset.id, !item.classList.contains("av__celltext--ref"), item.textContent || "Untitled");
}
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>`;
})
cells.forEach((item) => {
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")}
<button class="b3-menu__separator"></button>
${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[] = []
options.cellElements[0].querySelectorAll("span").forEach((item) => {
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) => {
if (!hasIds.includes(item.block.id)) {
@ -286,7 +283,7 @@ export const bindRelationEvent = (options: {
${html || genSelectItemHTML("empty")}`;
const cellRect = options.cellElements[options.cellElements.length - 1].getBoundingClientRect();
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");
inputElement.focus();
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")
});
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) {
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);
};