ignore controls while a smooth pan is in progress

This commit is contained in:
Tomáš Mládek 2021-01-12 18:59:05 +01:00
parent 7361147f85
commit 4dbb9094b7

View file

@ -83,6 +83,7 @@ export default defineComponent({
x: ref(0), x: ref(0),
y: ref(0) y: ref(0)
}); });
const panning = ref(false);
onMounted(async () => { onMounted(async () => {
const element = root.value as unknown as HTMLDivElement; const element = root.value as unknown as HTMLDivElement;
@ -110,7 +111,13 @@ export default defineComponent({
maxZoom: 3637937, maxZoom: 3637937,
zoomSpeed: 0.05, zoomSpeed: 0.05,
zoomDoubleClickSpeed: 1, zoomDoubleClickSpeed: 1,
onDoubleClick: function () { beforeMouseDown: () => {
return panning.value;
},
beforeWheel: () => {
return panning.value;
},
onDoubleClick: () => {
if (!document.fullscreenElement) { if (!document.fullscreenElement) {
console.debug("[SVG] Fullscreen requested."); console.debug("[SVG] Fullscreen requested.");
document.body.requestFullscreen(); document.body.requestFullscreen();
@ -147,6 +154,8 @@ export default defineComponent({
const svgTargetY = (target.y.baseVal.value + target.height.baseVal.value / 2) * currentRatio; const svgTargetY = (target.y.baseVal.value + target.height.baseVal.value / 2) * currentRatio;
if (smooth) { if (smooth) {
panning.value = true;
pz.smoothMoveTo( pz.smoothMoveTo(
svgTargetX * -1 + window.innerWidth / 2, svgTargetX * -1 + window.innerWidth / 2,
svgTargetY * -1 + window.innerHeight / 2, svgTargetY * -1 + window.innerHeight / 2,
@ -159,6 +168,9 @@ export default defineComponent({
(svgTargetY + finalTransform.y), (svgTargetY + finalTransform.y),
targetScale targetScale
); );
setTimeout(() => {
panning.value = false;
}, 400);
}, 400 * 2); }, 400 * 2);
} else { } else {
pz.moveTo( pz.moveTo(
@ -249,7 +261,7 @@ export default defineComponent({
const MOVE_EDGE_Y = window.innerHeight * .25; const MOVE_EDGE_Y = window.innerHeight * .25;
const MAX_SPEED = 20; const MAX_SPEED = 20;
if (document.fullscreenElement && mouse) { if (mouse && !panning.value && document.fullscreenElement) {
let horizontalShift: number; let horizontalShift: number;
let verticalShift: number; let verticalShift: number;