Pan and zoom for images
Try to use gestures with this image ๐
Introduction
@beoe/pan-zoom
โ is a small client-side script that adds pan and zoom capabilities to SVG images (or any DOM node, actually).
There are many similar scripts, but the main difference is that this one supports gestures for all types of devices:
Intention | Mouse | Trackpad/Touchpad | Touchscreen |
---|---|---|---|
Pan | Click + move | Click + move | Two-finger drag |
Zoom | Ctrl + wheel | Pinch | Pinch |
Reset | Double click | Double click | Double tap |
Scroll | Wheel | Two-finger drag | One-finger drag |
Pay attention to the following:
- Gestures are intentionally selected to avoid interfering with the systemโs default scroll gestures, to prevent โscroll traps.โ
- Cmd + click - zoom in.
- Alt + click - zoom out.
- The first double click (or tap) - zooms in by 2x.
Installation
-
Install dependencies
Terminal window pnpm add @beoe/pan-zoom -
Add
svgpanzoom.ts
src/components/svgpanzoom.ts import "@beoe/pan-zoom/css/PanZoomUi.css";import { PanZoomUi } from "@beoe/pan-zoom";// for BEOE diagramsdocument.querySelectorAll(".beoe").forEach((container) => {const element = container.firstElementChild;if (!element) return;// @ts-expect-errornew PanZoomUi({ element, container }).on();});// for content imagesdocument.querySelectorAll(".sl-markdown-content > img[src$='.svg' i]," +".sl-markdown-content > p > img[src$='.svg' i]," +// for development environment".sl-markdown-content > img[src$='f=svg' i]," +".sl-markdown-content > img[src$='f=svg' i]").forEach((element) => {if (element.parentElement?.tagName === "PICTURE") {element = element.parentElement;}const container = document.createElement("figure");container.classList.add("beoe", "not-content");element.replaceWith(container);container.append(element);// @ts-expect-errornew PanZoomUi({ element, container }).on();}); -
Use
svgpanzoom.ts
in the base layout
Starlight specific code
-
Use
svgpanzoom.ts
in thePageFrame
src/components/PageFrame.astro ---import type { Props } from "@astrojs/starlight/props";import Default from "@astrojs/starlight/components/PageFrame.astro";---<Default {...Astro.props}><slot name="header" slot="header" /><slot name="sidebar" slot="sidebar" /><slot /></Default><script>import "./svgpanzoom.ts";</script> -
Override
PageFrame
in Astro configastro.config.mjs export default defineConfig({integrations: [starlight({components: {PageFrame: "./src/components/PageFrame.astro",},}),],});