Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-18 15:40:12 +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

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

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

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

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

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

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

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

@ -209,7 +209,7 @@ const genUploadedLabel = (responseText: string, protyle: IProtyle) => {
insertHTML(successFileText, protyle, insertBlock); insertHTML(successFileText, protyle, insertBlock);
// 粘贴图片后定位不准确 https://github.com/siyuan-note/siyuan/issues/13336 // 粘贴图片后定位不准确 https://github.com/siyuan-note/siyuan/issues/13336
setTimeout(() => { setTimeout(() => {
scrollCenter(protyle, undefined, {behavior: "smooth"}); scrollCenter(protyle, undefined, "nearest", "smooth");
}, hasImage ? 0 : Constants.TIMEOUT_LOAD); }, 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")); blockElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss"));
updateTransaction(protyle, id, blockElement.outerHTML, oldHTML); updateTransaction(protyle, id, blockElement.outerHTML, oldHTML);
setTimeout(() => { setTimeout(() => {
scrollCenter(protyle, blockElement, {behavior: "smooth"}); scrollCenter(protyle, undefined, "nearest", "smooth");
}, Constants.TIMEOUT_LOAD); }, Constants.TIMEOUT_LOAD);
return; 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 // 下一个请求过来前需断开，否则 observerLoad 重新赋值后无法 disconnect https://ld246.com/article/1704612002446
protyle.observerLoad?.disconnect(); 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)) { 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(); if (!hasScrollTop) {
const focusRect = focusElement.getBoundingClientRect(); scrollCenter(protyle, focusElement);
if (!hasScrollTop && (contentRect.top > focusRect.top || contentRect.bottom < focusRect.bottom)) {
scrollCenter(protyle, focusElement, {position: "top"});
} }
} else { } else {
return; return;
@ -504,10 +502,8 @@ const focusElementById = (protyle: IProtyle, action: string[], scrollAttr?: IScr
protyle.contentElement.scrollTop = scrollAttr.scrollTop; protyle.contentElement.scrollTop = scrollAttr.scrollTop;
} }
if (action.includes(Constants.CB_GET_FOCUS) || action.includes(Constants.CB_GET_HL) || action.includes(Constants.CB_GET_FOCUSFIRST)) { if (action.includes(Constants.CB_GET_FOCUS) || action.includes(Constants.CB_GET_HL) || action.includes(Constants.CB_GET_FOCUSFIRST)) {
const contentRect = protyle.contentElement.getBoundingClientRect(); if (!hasScrollTop) {
const focusRect = focusElement.getBoundingClientRect(); scrollCenter(protyle, focusElement);
if (!hasScrollTop && (contentRect.top > focusRect.top || contentRect.bottom < focusRect.bottom)) {
scrollCenter(protyle, focusElement, {position: "top"});
} }
} }
}); });

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); processRender(protyle.wysiwyg.element);
highlightRender(protyle.wysiwyg.element); highlightRender(protyle.wysiwyg.element);
avRender(protyle.wysiwyg.element, protyle); avRender(protyle.wysiwyg.element, protyle);
scrollCenter(protyle, undefined, {behavior: "smooth"}); scrollCenter(protyle, undefined, "nearest", "smooth");
}); });
return; return;
} else if (files && files.length > 0) { } 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) { if (nodeElement.classList.contains("av") && selectCellElement) {
cellScrollIntoView(nodeElement, selectCellElement); cellScrollIntoView(nodeElement, selectCellElement);
} else { } 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); updateTransaction(protyle, previousElement.parentElement.parentElement.parentElement.getAttribute("data-node-id"), previousElement.parentElement.parentElement.parentElement.outerHTML, oldListHTML);
preventScroll(protyle); preventScroll(protyle);
scrollCenter(protyle);
focusByWbr(previousElement.parentElement, range); focusByWbr(previousElement.parentElement, range);
scrollCenter(protyle);
return; return;
} }
if (!sourceElements[0].previousElementSibling || sourceElements[0].previousElementSibling?.classList.contains("protyle-action")) { 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); updateTransaction(protyle, nextElement.parentElement.parentElement.parentElement.getAttribute("data-node-id"), nextElement.parentElement.parentElement.parentElement.outerHTML, oldListHTML);
preventScroll(protyle); preventScroll(protyle);
scrollCenter(protyle);
focusByWbr(nextElement.parentElement, range); focusByWbr(nextElement.parentElement, range);
scrollCenter(protyle);
return; return;
} }
if (!sourceElements[sourceElements.length - 1].nextElementSibling || sourceElements[sourceElements.length - 1].nextElementSibling?.classList.contains("protyle-attr")) { 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); focusByOffset(getContenteditableElement(blockElement), stack.position.start, stack.position.end);
scrollCenter(protyle, blockElement); scrollCenter(protyle);
} }
return true; return true;
} else { } else {
@ -136,7 +136,7 @@ const focusStack = async (app: App, stack: IBackStack) => {
stack.protyle.model.parent.parent.switchTab(stack.protyle.model.parent.headElement); stack.protyle.model.parent.parent.switchTab(stack.protyle.model.parent.headElement);
} }
focusByOffset(getContenteditableElement(blockElement), stack.position.start, stack.position.end); focusByOffset(getContenteditableElement(blockElement), stack.position.start, stack.position.end);
scrollCenter(stack.protyle, blockElement); scrollCenter(stack.protyle);
getAllModels().outline.forEach(item => { getAllModels().outline.forEach(item => {
if (item.blockId === stack.protyle.block.rootID) { if (item.blockId === stack.protyle.block.rootID) {
item.setCurrent(blockElement); item.setCurrent(blockElement);
@ -179,7 +179,7 @@ const focusStack = async (app: App, stack: IBackStack) => {
} }
}); });
focusByOffset(getContenteditableElement(blockElement), stack.position.start, stack.position.end); 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); focusByOffset(getContenteditableElement(blockElement), stack.position.start, stack.position.end);
scrollCenter(stack.protyle, blockElement, {position: "top"}); scrollCenter(stack.protyle);
} }
}); });
return true; return true;

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

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