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

🎨 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

10
app/src/editor/util.ts
View file

@ -385,17 +385,17 @@ const switchEditor = (editor: Editor, options: IOpenFileOptions, allModels: IMod
preventScroll(editor.editor.protyle);
editor.editor.protyle.observerLoad?.disconnect();
if (options.action?.includes(Constants.CB_GET_HL)) {
highlightById(editor.editor.protyle, options.id, "top");
highlightById(editor.editor.protyle, options.id, "start");
} else if (options.action?.includes(Constants.CB_GET_FOCUS)) {
if (nodeElement) {
const newRange = focusBlock(nodeElement, undefined, !options.action?.includes(Constants.CB_GET_OUTLINE));
if (newRange) {
editor.editor.protyle.toolbar.range = newRange;
}
scrollCenter(editor.editor.protyle, nodeElement, {position: "top"});
scrollCenter(editor.editor.protyle);
editor.editor.protyle.observerLoad = new ResizeObserver(() => {
if (document.contains(nodeElement)) {
scrollCenter(editor.editor.protyle, nodeElement, {position: "top"});
scrollCenter(editor.editor.protyle);
}
});
setTimeout(() => {
@ -407,9 +407,7 @@ const switchEditor = (editor: Editor, options: IOpenFileOptions, allModels: IMod
} else if (editor.editor.protyle.toolbar.range) {
nodeElement = hasClosestBlock(editor.editor.protyle.toolbar.range.startContainer) as Element;
focusByRange(editor.editor.protyle.toolbar.range);
if (nodeElement) {
scrollCenter(editor.editor.protyle, nodeElement);
}
scrollCenter(editor.editor.protyle);
}
}
pushBack(editor.editor.protyle, editor.editor.protyle.toolbar.range);

2
app/src/layout/Wnd.ts
View file

@ -548,7 +548,7 @@ export class Wnd {
range.collapse();
currentTab.model.editor.protyle.toolbar.range = range;
}
scrollCenter(currentTab.model.editor.protyle, nodeElement, {position: "top"});
scrollCenter(currentTab.model.editor.protyle, nodeElement, "start");
} else {
openFileById({
app: this.app,

2
app/src/menus/protyle.ts
View file

@ -1022,7 +1022,7 @@ export const zoomOut = (options: {
}
focusBlock(showElement);
const resizeObserver = new ResizeObserver(() => {
scrollCenter(options.protyle, focusElement, {position: "top"});
scrollCenter(options.protyle, focusElement, "start");
});
resizeObserver.observe(options.protyle.wysiwyg.element);
setTimeout(() => {

4
app/src/mobile/editor.ts
View file

@ -41,9 +41,9 @@ export const openMobileFileById = (app: App, id: string, action: TProtyleAction[
});
if (blockElement) {
pushBack();
scrollCenter(window.siyuan.mobile.editor.protyle, blockElement, {position: "top"});
scrollCenter(window.siyuan.mobile.editor.protyle, blockElement, "start");
if (action.includes(Constants.CB_GET_HL)) {
highlightById(window.siyuan.mobile.editor.protyle, id, "top");
highlightById(window.siyuan.mobile.editor.protyle, id, "start");
}
closePanel();
// 更新文档浏览时间

2
app/src/protyle/upload/index.ts
View file

@ -209,7 +209,7 @@ const genUploadedLabel = (responseText: string, protyle: IProtyle) => {
insertHTML(successFileText, protyle, insertBlock);
// 粘贴图片后定位不准确 https://github.com/siyuan-note/siyuan/issues/13336
setTimeout(() => {
scrollCenter(protyle, undefined, {behavior: "smooth"});
scrollCenter(protyle, undefined, "nearest", "smooth");
}, hasImage ? 0 : Constants.TIMEOUT_LOAD);
};

2
app/src/protyle/util/insertHTML.ts
View file

@ -333,7 +333,7 @@ export const insertHTML = (html: string, protyle: IProtyle, isBlock = false,
blockElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss"));
updateTransaction(protyle, id, blockElement.outerHTML, oldHTML);
setTimeout(() => {
scrollCenter(protyle, blockElement, {behavior: "smooth"});
scrollCenter(protyle, undefined, "nearest", "smooth");
}, Constants.TIMEOUT_LOAD);
return;
}

12
app/src/protyle/util/onGet.ts
View file

@ -490,10 +490,8 @@ const focusElementById = (protyle: IProtyle, action: string[], scrollAttr?: IScr
// 下一个请求过来前需断开，否则 observerLoad 重新赋值后无法 disconnect https://ld246.com/article/1704612002446
protyle.observerLoad?.disconnect();
if (action.includes(Constants.CB_GET_FOCUS) || action.includes(Constants.CB_GET_SCROLL) || action.includes(Constants.CB_GET_HL) || action.includes(Constants.CB_GET_FOCUSFIRST)) {
const contentRect = protyle.contentElement.getBoundingClientRect();
const focusRect = focusElement.getBoundingClientRect();
if (!hasScrollTop && (contentRect.top > focusRect.top || contentRect.bottom < focusRect.bottom)) {
scrollCenter(protyle, focusElement, {position: "top"});
if (!hasScrollTop) {
scrollCenter(protyle, focusElement);
}
} else {
return;
@ -504,10 +502,8 @@ const focusElementById = (protyle: IProtyle, action: string[], scrollAttr?: IScr
protyle.contentElement.scrollTop = scrollAttr.scrollTop;
}
if (action.includes(Constants.CB_GET_FOCUS) || action.includes(Constants.CB_GET_HL) || action.includes(Constants.CB_GET_FOCUSFIRST)) {
const contentRect = protyle.contentElement.getBoundingClientRect();
const focusRect = focusElement.getBoundingClientRect();
if (!hasScrollTop && (contentRect.top > focusRect.top || contentRect.bottom < focusRect.bottom)) {
scrollCenter(protyle, focusElement, {position: "top"});
if (!hasScrollTop) {
scrollCenter(protyle, focusElement);
}
}
});

4
app/src/protyle/util/paste.ts
View file

@ -539,7 +539,7 @@ export const paste = async (protyle: IProtyle, event: (ClipboardEvent | DragEven
processRender(protyle.wysiwyg.element);
highlightRender(protyle.wysiwyg.element);
avRender(protyle.wysiwyg.element, protyle);
scrollCenter(protyle, undefined, {behavior: "smooth"});
scrollCenter(protyle, undefined, "nearest", "smooth");
});
return;
} else if (files && files.length > 0) {
@ -592,7 +592,7 @@ export const paste = async (protyle: IProtyle, event: (ClipboardEvent | DragEven
if (nodeElement.classList.contains("av") && selectCellElement) {
cellScrollIntoView(nodeElement, selectCellElement);
} else {
scrollCenter(protyle, undefined, {behavior: "smooth"});
scrollCenter(protyle, undefined, "nearest", "smooth");
}
};

4
app/src/protyle/wysiwyg/move.ts
View file

@ -78,8 +78,8 @@ export const moveToUp = (protyle: IProtyle, nodeElement: HTMLElement, range: Ran
}
updateTransaction(protyle, previousElement.parentElement.parentElement.parentElement.getAttribute("data-node-id"), previousElement.parentElement.parentElement.parentElement.outerHTML, oldListHTML);
preventScroll(protyle);
scrollCenter(protyle);
focusByWbr(previousElement.parentElement, range);
scrollCenter(protyle);
return;
}
if (!sourceElements[0].previousElementSibling || sourceElements[0].previousElementSibling?.classList.contains("protyle-action")) {
@ -176,8 +176,8 @@ export const moveToDown = (protyle: IProtyle, nodeElement: HTMLElement, range: R
}
updateTransaction(protyle, nextElement.parentElement.parentElement.parentElement.getAttribute("data-node-id"), nextElement.parentElement.parentElement.parentElement.outerHTML, oldListHTML);
preventScroll(protyle);
scrollCenter(protyle);
focusByWbr(nextElement.parentElement, range);
scrollCenter(protyle);
return;
}
if (!sourceElements[sourceElements.length - 1].nextElementSibling || sourceElements[sourceElements.length - 1].nextElementSibling?.classList.contains("protyle-attr")) {

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
});
}
};