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

edge scrolling (todo: use rAF instead of timers)

master
Tomáš Mládek 2021-01-09 22:50:06 +01:00
parent 5293c3f6e4
commit 6e07542ace
2 changed files with 41 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/App.vue
View File

@ -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">

40
app/src/components/SVGContent.vue
View File

@ -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) => {