smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add button when scrolled outside of visible area (#643)

Browse source 
With the infinite scroll behavior, it's easy to scroll super far away from where the content is and have a hard time getting back. This PR adds a button to refocus on the center of the scene when no elements are visible anymore.
This commit is contained in:
Christopher Chedeau 2020-02-01 16:52:10 +00:00 • committed by GitHub
parent 7c9e6dd3f1
commit be97bd980e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 44 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/index.tsx
View file

@ -36,6 +36,7 @@ import {
importFromBackend,
addToLoadedScenes,
loadedScenes,
calculateScrollCenter,
} from "./scene";
import { renderScene } from "./renderer";
@ -1764,6 +1765,16 @@ export class App extends React.Component<any, AppState> {
currentLanguage={getLanguage()}
/>
{this.renderIdsDropdown()}
{this.state.scrolledOutside && (
<button
className="scroll-back-to-content"
onClick={() => {
this.setState({ ...calculateScrollCenter(elements) });
}}
>
{t("buttons.scrollBackToContent")}
</button>
)}
</footer>
</div>
);
@ -1872,11 +1883,20 @@ export class App extends React.Component<any, AppState> {
}, 300);
componentDidUpdate() {
renderScene(elements, this.rc!, this.canvas!, {
scrollX: this.state.scrollX,
scrollY: this.state.scrollY,
viewBackgroundColor: this.state.viewBackgroundColor,
});
const atLeastOneVisibleElement = renderScene(
elements,
this.rc!,
this.canvas!,
{
scrollX: this.state.scrollX,
scrollY: this.state.scrollY,
viewBackgroundColor: this.state.viewBackgroundColor,
},
);
const scrolledOutside = !atLeastOneVisibleElement && elements.length > 0;
if (this.state.scrolledOutside !== scrolledOutside) {
this.setState({ scrolledOutside: scrolledOutside });
}
this.saveDebounced();
if (history.isRecording()) {
history.pushEntry(