diff --git a/src/lib/components/common/PanzoomContainer.svelte b/src/lib/components/common/PanzoomContainer.svelte
index 48a5ab13eb..7f79b3292a 100644
--- a/src/lib/components/common/PanzoomContainer.svelte
+++ b/src/lib/components/common/PanzoomContainer.svelte
@@ -5,8 +5,8 @@
const defaultOpts: PanZoomOptions = {
bounds: true,
boundsPadding: 0.1,
- zoomSpeed: 0.18,
- pinchSpeed: 3.5
+ pinchSpeed: 3.5,
+ beforeWheel: () => true
};
export let className = '';
@@ -20,6 +20,27 @@
zoomLevel = instance?.getTransform().scale ?? 1;
};
+ const handleWheel = (e: WheelEvent) => {
+ if (!instance || !containerElement) return;
+
+ if (!e.ctrlKey && !e.metaKey) {
+ const transform = instance.getTransform();
+ if (Math.abs(transform.scale - 1) < 0.01) return;
+ if (Math.abs(e.deltaY) >= Math.abs(e.deltaX)) return;
+
+ e.preventDefault();
+ instance.moveBy(-e.deltaX, -e.deltaY);
+ updateZoomLevel();
+ return;
+ }
+
+ e.preventDefault();
+
+ const rect = containerElement.getBoundingClientRect();
+ instance.zoomTo(e.clientX - rect.left, e.clientY - rect.top, Math.exp(-e.deltaY * 0.002));
+ updateZoomLevel();
+ };
+
const center = () => ({
x: containerElement?.clientWidth ? containerElement.clientWidth / 2 : 0,
y: containerElement?.clientHeight ? containerElement.clientHeight / 2 : 0
@@ -56,6 +77,6 @@
});
-
+
diff --git a/src/lib/components/common/PptxPreview.svelte b/src/lib/components/common/PptxPreview.svelte
index 924582bbf1..25067b0e2b 100644
--- a/src/lib/components/common/PptxPreview.svelte
+++ b/src/lib/components/common/PptxPreview.svelte
@@ -68,7 +68,7 @@
pzInstance = panzoom(sceneEl, {
bounds: true,
boundsPadding: 0.1,
- zoomSpeed: 0.065,
+ pinchSpeed: 3.5,
filterKey: (e?: KeyboardEvent) => !!e && slideShortcutKeys.includes(e.key),
beforeWheel: () => true,
beforeMouseDown: () => {
@@ -144,8 +144,31 @@
};
const handleStageWheel = (e: WheelEvent) => {
+ if (e.ctrlKey || e.metaKey) {
+ if (!pzInstance || !sceneEl) return;
+
+ e.preventDefault();
+
+ const rect = sceneEl.getBoundingClientRect();
+ pzInstance.zoomTo(e.clientX - rect.left, e.clientY - rect.top, Math.exp(-e.deltaY * 0.002));
+ zoomLevel = pzInstance.getTransform().scale;
+ return;
+ }
+
+ const transform = pzInstance?.getTransform();
+ if (
+ transform &&
+ Math.abs(transform.scale - 1) >= 0.01 &&
+ Math.abs(e.deltaX) > Math.abs(e.deltaY)
+ ) {
+ e.preventDefault();
+ pzInstance?.moveBy(-e.deltaX, -e.deltaY);
+ zoomLevel = pzInstance?.getTransform().scale ?? 1;
+ return;
+ }
+
e.preventDefault();
- if (e.ctrlKey || e.metaKey || slides.length <= 1) return;
+ if (slides.length <= 1) return;
const multiplier = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? stageEl.clientHeight : 1;
const dominantDelta = Math.abs(e.deltaY) >= Math.abs(e.deltaX) ? e.deltaY : e.deltaX;