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> <template>
<SVGContent id="root" url="content/intro.svg" edge-scrolling @set-background="setBackground"/> <SVGContent id="root" url="content/intro.svg" @set-background="setBackground"/>
</template> </template>
<script lang="ts"> <script lang="ts">

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

@ -18,8 +18,7 @@ export default defineComponent({
url: { url: {
type: String, type: String,
required: true required: true
}, }
edgeScrolling: Boolean
}, },
setup(props, {emit}) { setup(props, {emit}) {
const root = ref(null); const root = ref(null);
@ -58,46 +57,44 @@ export default defineComponent({
panzoom.value = pz; panzoom.value = pz;
// Edge scrolling // Edge scrolling
if (props.edgeScrolling) { const MOVE_EDGE = 75;
const MOVE_EDGE = 75; const MAX_SPEED = 20;
const MAX_SPEED = 20; let edgeScrollInterval: number | undefined;
let edgeScrollInterval: number | undefined; window.addEventListener("mousemove", (ev) => {
window.addEventListener("mousemove", (ev) => { clearTimeout(edgeScrollInterval);
clearTimeout(edgeScrollInterval); edgeScrollInterval = undefined;
edgeScrollInterval = undefined; if (!document.fullscreenElement) {
if (!document.fullscreenElement) { return;
return; }
}
let horizontalShift: number; let horizontalShift: number;
let verticalShift: number; let verticalShift: number;
const transform = pz.getTransform(); const transform = pz.getTransform();
if (ev.clientX < MOVE_EDGE || ev.clientX > window.innerWidth - MOVE_EDGE) { if (ev.clientX < MOVE_EDGE || ev.clientX > window.innerWidth - MOVE_EDGE) {
const horizontalEdgeDistance = const horizontalEdgeDistance =
(ev.clientX < window.innerWidth / 2) ? ev.clientX : (ev.clientX - window.innerWidth); (ev.clientX < window.innerWidth / 2) ? ev.clientX : (ev.clientX - window.innerWidth);
const horizontalRatio = (MOVE_EDGE - Math.abs(horizontalEdgeDistance)) / MOVE_EDGE; const horizontalRatio = (MOVE_EDGE - Math.abs(horizontalEdgeDistance)) / MOVE_EDGE;
horizontalShift = horizontalRatio * Math.sign(horizontalEdgeDistance) * MAX_SPEED; horizontalShift = horizontalRatio * Math.sign(horizontalEdgeDistance) * MAX_SPEED;
} else { } else {
horizontalShift = 0; horizontalShift = 0;
} }
if (ev.clientY < MOVE_EDGE || ev.clientY > window.innerHeight - MOVE_EDGE) { if (ev.clientY < MOVE_EDGE || ev.clientY > window.innerHeight - MOVE_EDGE) {
const verticalEdgeDistance = const verticalEdgeDistance =
(ev.clientY < window.innerHeight / 2) ? ev.clientY : (ev.clientY - window.innerHeight); (ev.clientY < window.innerHeight / 2) ? ev.clientY : (ev.clientY - window.innerHeight);
const verticalRatio = (MOVE_EDGE - Math.abs(verticalEdgeDistance)) / MOVE_EDGE; const verticalRatio = (MOVE_EDGE - Math.abs(verticalEdgeDistance)) / MOVE_EDGE;
verticalShift = verticalRatio * Math.sign(verticalEdgeDistance) * MAX_SPEED; verticalShift = verticalRatio * Math.sign(verticalEdgeDistance) * MAX_SPEED;
} else { } else {
verticalShift = 0; verticalShift = 0;
} }
if (horizontalShift || verticalShift) { if (horizontalShift || verticalShift) {
edgeScrollInterval = setInterval(() => { edgeScrollInterval = setInterval(() => {
pz.moveTo(transform!.x + horizontalShift, transform!.y + verticalShift); pz.moveTo(transform!.x + horizontalShift, transform!.y + verticalShift);
}, 1000 / 60); }, 1000 / 60);
} }
}); });
}
// Anchors // Anchors
anchors.value = processAnchors(svg); anchors.value = processAnchors(svg);