edge scrolling (todo: use rAF instead of timers)

This commit is contained in:
Tomáš Mládek 2021-01-09 22:50:06 +01:00
parent 5293c3f6e4
commit 6e07542ace
2 changed files with 41 additions and 1 deletions

View file

@ -1,5 +1,5 @@
<template> <template>
<SVGContent id="root" url="content/intro.svg"/> <SVGContent id="root" url="content/intro.svg" edge-scrolling />
</template> </template>
<script lang="ts"> <script lang="ts">

View file

@ -19,6 +19,7 @@ export default defineComponent({
type: String, type: String,
required: true required: true
}, },
edgeScrolling: Boolean
}, },
setup(props) { setup(props) {
const root = ref(null); const root = ref(null);
@ -42,6 +43,45 @@ export default defineComponent({
}); });
panzoom.value = pz; 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
anchors.value = processAnchors(svg); anchors.value = processAnchors(svg);
panToAnchor.value = (anchor: SVGRectElement) => { panToAnchor.value = (anchor: SVGRectElement) => {