Skip to content

Commit

Permalink
重构逻辑，非必要不操作元素
Browse files Browse the repository at this point in the history
  • Loading branch information
@TCOTC
TCOTC committed Jan 30, 2025
1 parent e01ba8c commit cd909f9
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 41 deletions.
6 changes: 6 additions & 0 deletions app/src/assets/scss/component/_tooltips.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,12 @@
}
}

.clonedTooltip {
animation: unset;
opacity: 0;
pointer-events: none;
}

.b3-tooltips {
position: relative;
cursor: pointer;
Expand Down
76 changes: 39 additions & 37 deletions app/src/dialog/tooltip.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,26 +10,13 @@ export const showTooltip = (message: string, target: Element, tooltipClass?: str
return;
}

const className = tooltipClass ? `tooltip tooltip--${tooltipClass}` : "tooltip";
let messageElement = document.getElementById("tooltip");
if (!messageElement) {
document.body.insertAdjacentHTML("beforeend", `<div id="tooltip" class="${className}">${message}</div>`);
messageElement = document.getElementById("tooltip");
} else {
let needsRemoveStyle = false;
if (messageElement.className !== className) {
messageElement.className = className;
needsRemoveStyle = true;
}
if (messageElement.innerHTML !== message) {
messageElement.innerHTML = message;
needsRemoveStyle = true;
}
if (needsRemoveStyle) {
// 避免原本的 top 和 left 影响计算
Object.assign(messageElement.style, { top: "0", left: "0" });
}
}
const tooltipElement = document.getElementById("tooltip");
const clonedTooltip = tooltipElement.cloneNode(true) as HTMLElement;
clonedTooltip.id = "clonedTooltip";
clonedTooltip.removeAttribute("style");
clonedTooltip.className = "tooltip";
clonedTooltip.innerHTML = message;
document.body.append(clonedTooltip);

// position: parentE; parentW; ${number}parentW; ${number}bottom;
// right; right${number}bottom; right${number}top; top;
Expand All @@ -40,7 +27,7 @@ export const showTooltip = (message: string, target: Element, tooltipClass?: str

if (position?.startsWith("right")) {
// block icon and background icon
left = targetRect.right - messageElement.clientWidth;
left = targetRect.right - clonedTooltip.clientWidth;
}

if (position === "parentE") {
Expand All @@ -50,46 +37,61 @@ export const showTooltip = (message: string, target: Element, tooltipClass?: str
} else if (position?.endsWith("parentW")) {
// 数据库属性视图
top = parentRect.top + (parseInt(position) || 8);
left = parentRect.left - messageElement.clientWidth;
left = parentRect.left - clonedTooltip.clientWidth;
} else if (position?.endsWith("bottom")) {
top = targetRect.bottom + parseInt(position.replace("right", "").replace("left", ""));
top = targetRect.bottom + parseInt(position.replace("right", ""));
} else if (position?.endsWith("top")) {
// 数据库视图、编辑器动态滚动条
top = targetRect.top - messageElement.clientHeight;
} else if (position === "west") {
top = targetRect.top - clonedTooltip.clientHeight;
} else if (position === "directLeft") {
// 关联字段选项
top = targetRect.top + (parseInt(position) || 0);
left = targetRect.left - messageElement.clientWidth - 8;
left = targetRect.left - clonedTooltip.clientWidth - 8;
}

// 确保不会超出屏幕
top = top >= 0 ? top : targetRect.bottom;
left = left >= 0 ? left : targetRect.left;

const topHeight = position === "parentE" ? top : targetRect.top;
const bottomHeight = window.innerHeight - top;

messageElement.style.maxHeight = Math.max(topHeight, bottomHeight) + "px";
clonedTooltip.style.maxHeight = Math.max(topHeight, bottomHeight) + "px";

if (top + messageElement.clientHeight > window.innerHeight && topHeight > bottomHeight) {
messageElement.style.top = ((position === "parentE" || position === "west" ? parentRect.bottom : targetRect.top) - messageElement.clientHeight) + "px";
if (top + clonedTooltip.clientHeight > window.innerHeight && topHeight > bottomHeight) {
clonedTooltip.style.top = ((position === "parentE" || position === "directLeft" ? parentRect.bottom : targetRect.top) - clonedTooltip.clientHeight) + "px";
} else {
messageElement.style.top = top + "px";
clonedTooltip.style.top = top + "px";
}

if (left + messageElement.clientWidth > window.innerWidth) {
if (left + clonedTooltip.clientWidth > window.innerWidth) {
if (position === "parentE") {
messageElement.style.left = (parentRect.left - 8 - messageElement.clientWidth) + "px";
clonedTooltip.style.left = (parentRect.left - 8 - clonedTooltip.clientWidth) + "px";
} else {
messageElement.style.left = (window.innerWidth - 1 - messageElement.clientWidth) + "px";
clonedTooltip.style.left = (window.innerWidth - 1 - clonedTooltip.clientWidth) + "px";
}
} else {
messageElement.style.left = Math.max(0, left) + "px";
clonedTooltip.style.left = Math.max(0, left) + "px";
}

const cloneStyle = clonedTooltip.getAttribute("style");
if (tooltipElement.getAttribute("style") !== cloneStyle) {
tooltipElement.setAttribute("style", cloneStyle);
}
const className = tooltipClass ? `tooltip tooltip--${tooltipClass}` : "tooltip";
if (tooltipElement.className !== className) {
tooltipElement.className = className;
}
if (tooltipElement.innerHTML !== clonedTooltip.innerHTML) {
tooltipElement.innerHTML = clonedTooltip.innerHTML;
}

clonedTooltip.remove();
};

export const hideTooltip = () => {
const messageElement = document.getElementById("tooltip");
if (messageElement) {
messageElement.classList.add("fn__none");
const tooltipElement = document.getElementById("tooltip");
if (tooltipElement && !tooltipElement.classList.contains("fn__none")) {
tooltipElement.classList.add("fn__none");
}
};
8 changes: 4 additions & 4 deletions app/src/protyle/render/av/relation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -224,7 +224,7 @@ const genSelectItemHTML = (type: "selected" | "empty" | "unselect", id?: string,
</button>`;
}
if (type == "unselect") {
return `<button data-id="${id}" class="b3-menu__item" data-position="west" data-type="setRelationCell">
return `<button data-id="${id}" class="b3-menu__item" data-position="directLeft" data-type="setRelationCell">
<span class="b3-menu__label fn__ellipsis${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="#iconAdd"></use></svg>
</button>`;
Expand All @@ -243,7 +243,7 @@ const filterItem = (menuElement: Element, cellElement: HTMLElement, keyword: str
cellElement.querySelectorAll(".av__cell--relation").forEach((relationItem: HTMLElement) => {
const item = relationItem.querySelector(".av__celltext") as HTMLElement;
hasIds.push(item.dataset.id);
selectHTML += `<button data-id="${item.dataset.id}" data-position="west" data-type="setRelationCell"
selectHTML += `<button data-id="${item.dataset.id}" data-position="directLeft" 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"), Lute.EscapeHTMLStr(item.textContent || window.siyuan.languages.untitled))}</button>`;
});
Expand Down Expand Up @@ -277,7 +277,7 @@ export const bindRelationEvent = (options: {
options.cellElements[0].querySelectorAll(".av__cell--relation").forEach((relationItem: HTMLElement) => {
const item = relationItem.querySelector(".av__celltext") as HTMLElement;
hasIds.push(item.dataset.id);
selectHTML += `<button data-id="${item.dataset.id}" data-position="west" data-type="setRelationCell" class="b3-menu__item"
selectHTML += `<button data-id="${item.dataset.id}" data-position="directLeft" data-type="setRelationCell" class="b3-menu__item"
draggable="true">${genSelectItemHTML("selected", item.dataset.id, !item.classList.contains("av__celltext--ref"), Lute.EscapeHTMLStr(item.textContent || window.siyuan.languages.untitled))}</button>`;
});
cells.forEach((item) => {
Expand Down Expand Up @@ -437,7 +437,7 @@ draggable="true">${genSelectItemHTML("selected", targetId, !target.querySelector
},
isDetached: true
});
separatorElement.insertAdjacentHTML("beforebegin", `<button data-id="${rowId}" data-position="west" data-type="setRelationCell"
separatorElement.insertAdjacentHTML("beforebegin", `<button data-id="${rowId}" data-position="directLeft" data-type="setRelationCell"
class="b3-menu__item" draggable="true">${genSelectItemHTML("selected", rowId, true, Lute.EscapeHTMLStr(content))}</button>`);
}
menuElement.querySelector(".b3-menu__item--current")?.classList.remove("b3-menu__item--current");
Expand Down

0 comments on commit cd909f9

Please sign in to comment.