edge scrolling (todo: use rAF instead of timers)
This commit is contained in:
parent
5293c3f6e4
commit
6e07542ace
2 changed files with 41 additions and 1 deletions
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<SVGContent id="root" url="content/intro.svg"/>
|
||||
<SVGContent id="root" url="content/intro.svg" edge-scrolling />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
|
@ -19,6 +19,7 @@ export default defineComponent({
|
|||
type: String,
|
||||
required: true
|
||||
},
|
||||
edgeScrolling: Boolean
|
||||
},
|
||||
setup(props) {
|
||||
const root = ref(null);
|
||||
|
@ -42,6 +43,45 @@ export default defineComponent({
|
|||
});
|
||||
panzoom.value = pz;
|
||||
|
||||
// Edge scrolling
|
||||
if (props.edgeScrolling) {
|
||||
const MOVE_EDGE = 75;
|
||||
const MAX_SPEED = 20;
|
||||
let edgeScrollInterval: number | undefined;
|
||||
window.addEventListener("mousemove", (ev) => {
|
||||
clearTimeout(edgeScrollInterval);
|
||||
edgeScrollInterval = undefined;
|
||||
|
||||
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.value = processAnchors(svg);
|
||||
panToAnchor.value = (anchor: SVGRectElement) => {
|
||||
|
|
Loading…
Reference in a new issue