thm/line-and-surface
1
0
Fork 0
Code Issues 17 Pull requests Projects Releases Wiki Activity

edgeScrolling via rAF, fix bug when distanceToEdge == 0

Browse source
This commit is contained in:
Tomáš Mládek 2021-01-11 22:35:16 +01:00
parent 32de482742
commit f3eb39e034
1 changed files with 64 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

109
app/src/components/SVGContent.vue
View file

@ -154,46 +154,6 @@ export default defineComponent({
}); });
} }
// Edge scrolling
const MOVE_EDGE = 75;
const MAX_SPEED = 20;
let edgeScrollInterval: number | undefined;
window.addEventListener("mousemove", (ev) => {
clearTimeout(edgeScrollInterval);
edgeScrollInterval = undefined;
if (!document.fullscreenElement) {
return;
}
let horizontalShift: number;
let verticalShift: number;
const transform = pz.getTransform();
if (ev.clientX < MOVE_EDGE || ev.clientX > window.innerWidth - MOVE_EDGE) {
const horizontalEdgeDistance =
(ev.clientX < window.innerWidth / 2) ? ev.clientX : (ev.clientX - window.innerWidth);
const horizontalRatio = (MOVE_EDGE - Math.abs(horizontalEdgeDistance)) / MOVE_EDGE;
horizontalShift = horizontalRatio * Math.sign(horizontalEdgeDistance) * MAX_SPEED;
} else {
horizontalShift = 0;
}
if (ev.clientY < MOVE_EDGE || ev.clientY > window.innerHeight - MOVE_EDGE) {
const verticalEdgeDistance =
(ev.clientY < window.innerHeight / 2) ? ev.clientY : (ev.clientY - window.innerHeight);
const verticalRatio = (MOVE_EDGE - Math.abs(verticalEdgeDistance)) / MOVE_EDGE;
verticalShift = verticalRatio * Math.sign(verticalEdgeDistance) * MAX_SPEED;
} else {
verticalShift = 0;
}
if (horizontalShift || verticalShift) {
edgeScrollInterval = setInterval(() => {
pz.moveTo(transform!.x + horizontalShift, transform!.y + verticalShift);
}, 1000 / 60);
}
});
// Anchors // Anchors
anchors.value = processAnchors(svg); anchors.value = processAnchors(svg);
panToAnchor.value = (anchor: SVGRectElement) => { panToAnchor.value = (anchor: SVGRectElement) => {
@ -205,21 +165,74 @@ export default defineComponent({
// Videoscrolls // Videoscrolls
scrolls.value = await processScrolls(svg); scrolls.value = await processScrolls(svg);
// Debug Stats
let stats: Stats | undefined;
if (process.env.VUE_APP_DEMO) {
stats = new Stats();
document.body.appendChild(stats.dom);
} else {
Array.from(document.body.getElementsByClassName("dev")).forEach((el) => {
(el as HTMLElement).style.display = "none";
});
}
// Animations: FPS Counter, Edge scrolling
let mouse: MouseEvent | undefined;
window.addEventListener("mousemove", (ev) => {
mouse = ev;
}); });
if (process.env.VUE_APP_DEMO) { function animate() {
const stats = new Stats(); if (stats) {
document.body.appendChild(stats.dom);
function noop() {
stats.begin(); stats.begin();
stats.end();
requestAnimationFrame(noop);
} }
requestAnimationFrame(noop); // Edge scrolling
const MOVE_EDGE = 75;
const MAX_SPEED = 20;
if (document.fullscreenElement && mouse) {
let horizontalShift: number;
let verticalShift: number;
const transform = pz.getTransform();
if (mouse.clientX < MOVE_EDGE || mouse.clientX > window.innerWidth - MOVE_EDGE) {
const horizontalEdgeDistance =
(mouse.clientX < window.innerWidth / 2) ? mouse.clientX : (mouse.clientX - window.innerWidth);
const horizontalRatio = (MOVE_EDGE - Math.abs(horizontalEdgeDistance)) / MOVE_EDGE;
const direction = mouse.clientX < MOVE_EDGE ? 1 : -1;
horizontalShift = horizontalRatio * direction * MAX_SPEED;
} else {
horizontalShift = 0;
} }
if (mouse.clientY < MOVE_EDGE || mouse.clientY > window.innerHeight - MOVE_EDGE) {
const verticalEdgeDistance =
(mouse.clientY < window.innerHeight / 2) ? mouse.clientY : (mouse.clientY - window.innerHeight);
const verticalRatio = (MOVE_EDGE - Math.abs(verticalEdgeDistance)) / MOVE_EDGE;
const direction = mouse.clientY < MOVE_EDGE ? 1 : -1;
verticalShift = verticalRatio * direction * MAX_SPEED;
} else {
verticalShift = 0;
}
if (horizontalShift || verticalShift) {
pz.moveTo(transform!.x + horizontalShift, transform!.y + verticalShift);
}
}
if (stats) {
stats.end();
}
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
});
return { return {
root, root,
panzoom, panzoom,