scroll the closest element to center (#1670)

Co-authored-by: Sanghyeon Lee <yongdamsh@gmail.com>
This commit is contained in:
Aakansha Doshi 2020-05-30 17:32:32 +05:30 committed by GitHub
parent 0db7ac78c4
commit fa359034c5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 100 additions and 15 deletions

View file

@ -847,6 +847,8 @@ class App extends React.Component<any, AppState> {
remoteElements.filter((element: { isDeleted: boolean }) => {
return !element.isDeleted;
}),
this.state,
this.canvas,
),
});
}

View file

@ -256,7 +256,9 @@ const LayerUI = ({
<button
className="scroll-back-to-content"
onClick={() => {
setAppState({ ...calculateScrollCenter(elements) });
setAppState({
...calculateScrollCenter(elements, appState, canvas),
});
}}
>
{t("buttons.scrollBackToContent")}
@ -276,6 +278,7 @@ const LayerUI = ({
onRoomCreate={onRoomCreate}
onRoomDestroy={onRoomDestroy}
onLockToggle={onLockToggle}
canvas={canvas}
/>
) : (
<div className="layer-ui__wrapper">

View file

@ -27,6 +27,7 @@ type MobileMenuProps = {
onUsernameChange: (username: string) => void;
onRoomDestroy: () => void;
onLockToggle: () => void;
canvas: HTMLCanvasElement | null;
};
export const MobileMenu = ({
@ -39,6 +40,7 @@ export const MobileMenu = ({
onUsernameChange,
onRoomDestroy,
onLockToggle,
canvas,
}: MobileMenuProps) => (
<>
{appState.isLoading && <LoadingMessage />}
@ -131,7 +133,9 @@ export const MobileMenu = ({
<button
className="scroll-back-to-content"
onClick={() => {
setAppState({ ...calculateScrollCenter(elements) });
setAppState({
...calculateScrollCenter(elements, appState, canvas),
});
}}
>
{t("buttons.scrollBackToContent")}