feature: updatescrollIntoViewByBlockId API;

This commit is contained in:
mitsuha 2022-08-25 18:53:15 +08:00
parent b2d1968492
commit 02f8f8bcec
2 changed files with 5 additions and 33 deletions

View File

@ -168,11 +168,7 @@ export const TOC = () => {
const onClick = async (blockId?: string) => { const onClick = async (blockId?: string) => {
setActiveBlockId(blockId); setActiveBlockId(blockId);
await editor.scrollManager.scrollIntoViewByBlockId( await editor.scrollManager.scrollIntoViewByBlockId(blockId);
blockId,
'smooth',
'primary'
);
}; };
return ( return (

View File

@ -14,8 +14,6 @@ type ScrollController = {
unLockScroll: () => void; unLockScroll: () => void;
}; };
type ScrollPrimary = undefined | 'primary';
export class ScrollManager { export class ScrollManager {
private _editor: BlockEditor; private _editor: BlockEditor;
private _scrollContainer: HTMLElement; private _scrollContainer: HTMLElement;
@ -152,45 +150,23 @@ export class ScrollManager {
public async scrollIntoViewByBlockId( public async scrollIntoViewByBlockId(
blockId: string, blockId: string,
behavior: ScrollBehavior = 'smooth', behavior: ScrollBehavior = 'smooth'
ability?: ScrollPrimary
) { ) {
const block = await this._editor.getBlockById(blockId); const block = await this._editor.getBlockById(blockId);
await this.scrollIntoViewByBlock(block, behavior, ability); await this.scrollIntoViewByBlock(block, behavior);
} }
public async scrollIntoViewByBlock( public async scrollIntoViewByBlock(
block: AsyncBlock, block: AsyncBlock,
behavior: ScrollBehavior = 'smooth', behavior: ScrollBehavior = 'smooth'
ability?: ScrollPrimary
) { ) {
if (!block.dom) { if (!block.dom) {
return console.warn(`Block is not exist.`); return console.warn(`Block is not exist.`);
} }
/* use dom primary ability */ /* use dom primary ability */
if (ability === 'primary') {
block.dom.scrollIntoView({ block: 'start', behavior }); block.dom.scrollIntoView({ block: 'start', behavior });
return;
}
const containerRect = domToRect(this._scrollContainer);
const blockRect = domToRect(block.dom);
const blockRelativeTopToEditor =
blockRect.top - containerRect.top - containerRect.height / 4;
const blockRelativeLeftToEditor = blockRect.left - containerRect.left;
this.scrollTo({
left: blockRelativeLeftToEditor,
top: blockRelativeTopToEditor,
behavior,
});
this._updateScrollInfo(
blockRelativeLeftToEditor,
blockRelativeTopToEditor
);
} }
public async keepBlockInView( public async keepBlockInView(