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

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

View file

@ -32,7 +32,7 @@ export function renderScene(
renderSelection?: boolean;
} = {},
) {
if (!canvas) return;
if (!canvas) return false;
const context = canvas.getContext("2d")!;
const fillStyle = context.fillStyle;
@ -57,6 +57,7 @@ export function renderScene(
scrollY: typeof offsetY === "number" ? offsetY : sceneState.scrollY,
};
let atLeastOneVisibleElement = false;
elements.forEach(element => {
if (
!isVisibleElement(
@ -71,6 +72,7 @@ export function renderScene(
) {
return;
}
atLeastOneVisibleElement = true;
context.translate(
element.x + sceneState.scrollX,
element.y + sceneState.scrollY,
@ -141,6 +143,8 @@ export function renderScene(
context.strokeStyle = strokeStyle;
context.fillStyle = fillStyle;
}
return atLeastOneVisibleElement;
}
function isVisibleElement(