Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2026-02-19 21:48:06 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

🎨 https://github.com/siyuan-note/siyuan/pull/16290

Browse source
This commit is contained in:
Vanessa 2025-11-09 15:50:22 +08:00
parent 8d6c422af0
commit ef03fd4cb3
11 changed files with 55 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

8
app/src/util/backForward.ts
View file

@ -104,7 +104,7 @@ const focusStack = async (app: App, stack: IBackStack) => {
}
});
focusByOffset(getContenteditableElement(blockElement), stack.position.start, stack.position.end);
scrollCenter(protyle, blockElement);
scrollCenter(protyle);
}
return true;
} else {
@ -136,7 +136,7 @@ const focusStack = async (app: App, stack: IBackStack) => {
stack.protyle.model.parent.parent.switchTab(stack.protyle.model.parent.headElement);
}
focusByOffset(getContenteditableElement(blockElement), stack.position.start, stack.position.end);
scrollCenter(stack.protyle, blockElement);
scrollCenter(stack.protyle);
getAllModels().outline.forEach(item => {
if (item.blockId === stack.protyle.block.rootID) {
item.setCurrent(blockElement);
@ -179,7 +179,7 @@ const focusStack = async (app: App, stack: IBackStack) => {
}
});
focusByOffset(getContenteditableElement(blockElement), stack.position.start, stack.position.end);
scrollCenter(stack.protyle, blockElement, {position: "top"});
scrollCenter(stack.protyle);
}
});
});
@ -207,7 +207,7 @@ const focusStack = async (app: App, stack: IBackStack) => {
}
});
focusByOffset(getContenteditableElement(blockElement), stack.position.start, stack.position.end);
scrollCenter(stack.protyle, blockElement, {position: "top"});
scrollCenter(stack.protyle);
}
});
return true;

81
app/src/util/highlightById.ts
View file

@ -8,7 +8,7 @@ export const bgFade = (element: Element) => {
}, 1024);
};
export const highlightById = (protyle: IProtyle, id: string, position: "auto" | "center" | "top" = "auto") => {
export const highlightById = (protyle: IProtyle, id: string, position: ScrollLogicalPosition = "nearest") => {
let nodeElement: HTMLElement;
const protyleElement = protyle.wysiwyg.element;
if (!protyle.preview.element.classList.contains("fn__none")) {
@ -28,7 +28,7 @@ export const highlightById = (protyle: IProtyle, id: string, position: "auto" |
}
});
if (nodeElement) {
scrollCenter(protyle, nodeElement, {position});
scrollCenter(protyle, nodeElement, position);
bgFade(nodeElement);
return nodeElement;// 仅配合前进后退使用
}
@ -41,13 +41,10 @@ export const highlightById = (protyle: IProtyle, id: string, position: "auto" |
export const scrollCenter = (
protyle: IProtyle,
nodeElement?: Element,
options?: {
position?: "top" | "center" | "auto";
behavior?: ScrollBehavior;
}
position: ScrollLogicalPosition = "nearest",
behavior: ScrollBehavior = "auto"
) => {
const {position = "auto", behavior = "auto"} = options || {};
if (!protyle.disabled && position === "auto" && getSelection().rangeCount > 0) {
if (!protyle.disabled && !nodeElement && getSelection().rangeCount > 0) {
const range = getSelection().getRangeAt(0);
const blockElement = hasClosestBlock(range.startContainer);
if (blockElement) {
@ -55,7 +52,7 @@ export const scrollCenter = (
if (blockElement.classList.contains("code-block")) {
const brElement = document.createElement("br");
range.insertNode(brElement);
brElement.scrollIntoView({block: "nearest", behavior});
brElement.scrollIntoView({block: position, behavior});
brElement.remove();
return;
}
@ -68,9 +65,9 @@ export const scrollCenter = (
}
const activeElement = blockElement.querySelector(".av__cell--select, .av__row--select, .av__gallery-item--select");
if (activeElement) {
activeElement.scrollIntoView({block: "nearest", behavior});
activeElement.scrollIntoView({block: position, behavior});
} else {
blockElement.scrollIntoView({block: "nearest", behavior});
blockElement.scrollIntoView({block: position, behavior});
}
return;
}
@ -103,46 +100,34 @@ export const scrollCenter = (
if (!nodeElement) {
return;
}
let offsetTop = 0;
let parentNodeElement = nodeElement;
while (parentNodeElement && !parentNodeElement.classList.contains("protyle-wysiwyg")) {
offsetTop += (parentNodeElement as HTMLElement).offsetTop;
parentNodeElement = parentNodeElement.parentElement;
}
let contentTop = 0;
let topElement = protyle.element.firstElementChild;
while (topElement && !topElement.classList.contains("protyle-content")) {
contentTop += topElement.clientHeight;
topElement = topElement.nextElementSibling;
}
if (position === "center") {
const elementRect = nodeElement.getBoundingClientRect();
const contentRect = protyle.contentElement.getBoundingClientRect();
// 如果块的高度超过容器视口，让块的上边界贴着容器上边界；否则让整个块居中
if (elementRect.height > contentRect.height) {
protyle.contentElement.scroll({top: protyle.contentElement.scrollTop + elementRect.top - contentRect.top, behavior});
} else {
const elementCenter = elementRect.top + elementRect.height / 2;
const contentCenter = contentRect.top + contentRect.height / 2;
protyle.contentElement.scroll({top: protyle.contentElement.scrollTop + elementCenter - contentCenter, behavior});
}
return;
} else if (position === "top") {
protyle.contentElement.scroll({top: offsetTop - contentTop, behavior});
return;
}
if (protyle.contentElement.scrollTop > offsetTop - 32) {
protyle.contentElement.scroll({top: offsetTop - contentTop, behavior});
return;
} else if (protyle.contentElement.scrollTop + protyle.contentElement.clientHeight < offsetTop + nodeElement.clientHeight - contentTop) {
const elementRect = nodeElement.getBoundingClientRect();
const contentRect = protyle.contentElement.getBoundingClientRect();
if (position === "start") {
protyle.contentElement.scroll({
top: offsetTop + nodeElement.clientHeight - contentTop - protyle.contentElement.clientHeight,
top: protyle.contentElement.scrollTop + elementRect.top - contentRect.top,
behavior
});
return;
}
const elementRect = nodeElement.getBoundingClientRect();
const contentRect = protyle.contentElement.getBoundingClientRect();
protyle.contentElement.scroll({top: protyle.contentElement.scrollTop + elementRect.top - contentRect.top - contentRect.height / 2, behavior});
if (position === "nearest") {
// 在可视区域内不进行滚动
if (elementRect.top < contentRect.top) {
protyle.contentElement.scroll({
top: protyle.contentElement.scrollTop + elementRect.top - contentRect.top,
behavior
});
} else if (elementRect.bottom > contentRect.bottom) {
protyle.contentElement.scroll({
top: protyle.contentElement.scrollTop + elementRect.bottom - contentRect.bottom,
behavior
});
}
return;
}
if (position === "center") {
protyle.contentElement.scroll({
top: protyle.contentElement.scrollTop + elementRect.top - (contentRect.top + contentRect.height / 2),
behavior
});
}
};