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

remove edgeScrolling prop/flag (since it's limited to fullscreen)

Browse source
This commit is contained in:
Tomáš Mládek 2021-01-10 16:29:51 +01:00
parent b3212c6c6a
commit 2305ae1a82
2 changed files with 36 additions and 39 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" edge-scrolling @set-background="setBackground"/>
<SVGContent id="root" url="content/intro.svg" @set-background="setBackground"/>
</template>
<script lang="ts">

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

@ -18,8 +18,7 @@ export default defineComponent({
url: {
type: String,
required: true
},
edgeScrolling: Boolean
}
},
setup(props, {emit}) {
const root = ref(null);
@ -58,46 +57,44 @@ 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;
if (!document.fullscreenElement) {
return;
}
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;
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;
}
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 (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);
}
});
}
if (horizontalShift || verticalShift) {
edgeScrollInterval = setInterval(() => {
pz.moveTo(transform!.x + horizontalShift, transform!.y + verticalShift);
}, 1000 / 60);
}
});
// Anchors
anchors.value = processAnchors(svg);