toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-18 13:41:50 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: scrollManager can not get scrollcontainer after create new page

Browse Source
This commit is contained in:
QiShaoXuan 2022-08-05 23:52:16 +08:00
parent 1920921ee7
commit 15d908626e
2 changed files with 37 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
apps/ligo-virgo/src/pages/workspace/docs/Page.tsx
View File

@ -93,38 +93,29 @@ const EditorContainer = ({
workspace: string;
}) => {
const [lockScroll, setLockScroll] = useState(false);
const scrollContainerRef = useRef<HTMLDivElement>();
const [scrollContainer, setScrollContainer] = useState<HTMLElement>();
const editorRef = useRef<BlockEditor>();
const onScroll = (event: UIEvent) => {
editorRef.current.getHooks().onRootNodeScroll(event);
editorRef.current.scrollManager.emitScrollEvent(event);
};
useEffect(() => {
editorRef.current.scrollManager.scrollContainer =
scrollContainerRef.current;
editorRef.current.scrollManager.scrollController = {
lockScroll: () => setLockScroll(true),
unLockScroll: () => setLockScroll(false),
};
}, []);
const { setPageClientWidth } = usePageClientWidth();
useEffect(() => {
if (scrollContainerRef.current) {
if (scrollContainer) {
const obv = new ResizeObserver(e => {
setPageClientWidth(e[0].contentRect.width);
});
obv.observe(scrollContainerRef.current);
obv.observe(scrollContainer);
return () => obv.disconnect();
}
}, [setPageClientWidth]);
}, [setPageClientWidth, scrollContainer]);
return (
<StyledEditorContainer
lockScroll={lockScroll}
ref={scrollContainerRef}
ref={ref => setScrollContainer(ref)}
onScroll={onScroll}
>
{pageId ? (
@ -132,6 +123,11 @@ const EditorContainer = ({
workspace={workspace}
rootBlockId={pageId}
ref={editorRef}
scrollContainer={scrollContainer}
scrollController={{
lockScroll: () => setLockScroll(true),
unLockScroll: () => setLockScroll(false),
}}
/>
) : (
<Box

27
libs/components/affine-editor/src/Editor.tsx
View File

@ -18,6 +18,12 @@ interface AffineEditorProps {
scrollBlank?: boolean;
isWhiteboard?: boolean;
scrollContainer?: HTMLElement;
scrollController?: {
lockScroll: () => void;
unLockScroll: () => void;
};
}
function _useConstantWithDispose(
@ -53,13 +59,32 @@ function _useConstantWithDispose(
}
export const AffineEditor = forwardRef<BlockEditor, AffineEditorProps>(
({ workspace, rootBlockId, scrollBlank = true, isWhiteboard }, ref) => {
(
{
workspace,
rootBlockId,
scrollBlank = true,
isWhiteboard,
scrollController,
scrollContainer,
},
ref
) => {
const editor = _useConstantWithDispose(
workspace,
rootBlockId,
isWhiteboard
);
useEffect(() => {
if (scrollContainer) {
editor.scrollManager.scrollContainer = scrollContainer;
}
if (scrollController) {
editor.scrollManager.scrollController = scrollController;
}
}, [editor, scrollContainer, scrollController]);
useImperativeHandle(ref, () => editor);
return (