From b2d19684929cdff1b82b6c8c393e26dc443a7f87 Mon Sep 17 00:00:00 2001 From: mitsuha Date: Thu, 25 Aug 2022 15:58:29 +0800 Subject: [PATCH 1/2] feature: 1.add primary ability in scroll scrollIntoViewByBlockId API; --- .../workspace/docs/components/toc/TOC.tsx | 11 +++++------ .../editor-core/src/editor/scroll/scroll.ts | 19 +++++++++++++++---- 2 files changed, 20 insertions(+), 10 deletions(-) diff --git a/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx b/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx index eb0f138357..40288ba0c2 100644 --- a/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx +++ b/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx @@ -6,7 +6,6 @@ import { useCallback, useContext, useEffect, - useMemo, useRef, useState, } from 'react'; @@ -168,12 +167,12 @@ export const TOC = () => { }, [updateTocDataSource]); const onClick = async (blockId?: string) => { - if (blockId === activeBlockId) { - return; - } - setActiveBlockId(blockId); - await editor.scrollManager.scrollIntoViewByBlockId(blockId); + await editor.scrollManager.scrollIntoViewByBlockId( + blockId, + 'smooth', + 'primary' + ); }; return ( diff --git a/libs/components/editor-core/src/editor/scroll/scroll.ts b/libs/components/editor-core/src/editor/scroll/scroll.ts index 69b4d85703..2a580089a3 100644 --- a/libs/components/editor-core/src/editor/scroll/scroll.ts +++ b/libs/components/editor-core/src/editor/scroll/scroll.ts @@ -1,5 +1,5 @@ -import { CSSProperties, type UIEvent } from 'react'; import EventEmitter from 'eventemitter3'; +import { type UIEvent } from 'react'; import { domToRect, Rect } from '@toeverything/utils'; import type { Editor as BlockEditor } from '../editor'; @@ -14,6 +14,8 @@ type ScrollController = { unLockScroll: () => void; }; +type ScrollPrimary = undefined | 'primary'; + export class ScrollManager { private _editor: BlockEditor; private _scrollContainer: HTMLElement; @@ -150,20 +152,29 @@ export class ScrollManager { public async scrollIntoViewByBlockId( blockId: string, - behavior: ScrollBehavior = 'smooth' + behavior: ScrollBehavior = 'smooth', + ability?: ScrollPrimary ) { const block = await this._editor.getBlockById(blockId); - await this.scrollIntoViewByBlock(block, behavior); + await this.scrollIntoViewByBlock(block, behavior, ability); } public async scrollIntoViewByBlock( block: AsyncBlock, - behavior: ScrollBehavior = 'smooth' + behavior: ScrollBehavior = 'smooth', + ability?: ScrollPrimary ) { if (!block.dom) { return console.warn(`Block is not exist.`); } + + /* use dom primary ability */ + if (ability === 'primary') { + block.dom.scrollIntoView({ block: 'start', behavior }); + return; + } + const containerRect = domToRect(this._scrollContainer); const blockRect = domToRect(block.dom); From 02f8f8bcec40cf22595020b6c5352ad09290c8fd Mon Sep 17 00:00:00 2001 From: mitsuha Date: Thu, 25 Aug 2022 18:53:15 +0800 Subject: [PATCH 2/2] feature: updatescrollIntoViewByBlockId API; --- .../workspace/docs/components/toc/TOC.tsx | 6 +--- .../editor-core/src/editor/scroll/scroll.ts | 32 +++---------------- 2 files changed, 5 insertions(+), 33 deletions(-) diff --git a/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx b/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx index 40288ba0c2..6e416a8b6b 100644 --- a/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx +++ b/apps/ligo-virgo/src/pages/workspace/docs/components/toc/TOC.tsx @@ -168,11 +168,7 @@ export const TOC = () => { const onClick = async (blockId?: string) => { setActiveBlockId(blockId); - await editor.scrollManager.scrollIntoViewByBlockId( - blockId, - 'smooth', - 'primary' - ); + await editor.scrollManager.scrollIntoViewByBlockId(blockId); }; return ( diff --git a/libs/components/editor-core/src/editor/scroll/scroll.ts b/libs/components/editor-core/src/editor/scroll/scroll.ts index 2a580089a3..08f2b8ec16 100644 --- a/libs/components/editor-core/src/editor/scroll/scroll.ts +++ b/libs/components/editor-core/src/editor/scroll/scroll.ts @@ -14,8 +14,6 @@ type ScrollController = { unLockScroll: () => void; }; -type ScrollPrimary = undefined | 'primary'; - export class ScrollManager { private _editor: BlockEditor; private _scrollContainer: HTMLElement; @@ -152,45 +150,23 @@ export class ScrollManager { public async scrollIntoViewByBlockId( blockId: string, - behavior: ScrollBehavior = 'smooth', - ability?: ScrollPrimary + behavior: ScrollBehavior = 'smooth' ) { const block = await this._editor.getBlockById(blockId); - await this.scrollIntoViewByBlock(block, behavior, ability); + await this.scrollIntoViewByBlock(block, behavior); } public async scrollIntoViewByBlock( block: AsyncBlock, - behavior: ScrollBehavior = 'smooth', - ability?: ScrollPrimary + behavior: ScrollBehavior = 'smooth' ) { if (!block.dom) { return console.warn(`Block is not exist.`); } /* use dom primary ability */ - if (ability === 'primary') { - 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 - ); + block.dom.scrollIntoView({ block: 'start', behavior }); } public async keepBlockInView(