@r74tech/docusaurus-plugin-panzoom/dist/PanZoom.js

A plugin to enable the panzoom component on SVG and other elements

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const panzoom_1 = __importDefault(require("@panzoom/panzoom"));
const config = require('@generated/docusaurus.config').default;
const { themeConfig } = config;
const { zoom } = themeConfig;
const { selectors = ['div.mermaid[data-processed="true"]', 'div.docusaurus-mermaid-container', '.drawio'], wrap = true, timeout = 1000, excludeClass = 'panzoom-exclude', ...panZoomConfig } = zoom;
/**
 * Main work method to zoom the set of elements.  You can pass in global options to the pan zoom component
 * as well as control whether the items will be wrapped.
 * @param selectors
 */
const zoomElements = (selectors) => {
    const foundElements = [];
    selectors.forEach((selector) => {
        foundElements.push(...document.querySelectorAll(selector));
    });
    foundElements.forEach((element) => {
        const instance = (0, panzoom_1.default)(element, { excludeClass, ...panZoomConfig });
        if (wrap) {
            const wrapper = document.createElement('div');
            wrapper.setAttribute('style', "overflow: hidden");
            element.parentElement?.insertBefore(wrapper, element);
            wrapper.appendChild(element);
            wrapper.addEventListener('wheel', (event) => {
                instance.zoomWithWheel(event);
            });
            wrapper.addEventListener('dblclick', (event) => {
                instance.reset();
            });
        }
        if (!wrap) {
            element.addEventListener('wheel', (event) => {
                instance.zoomWithWheel(event);
            });
            element.addEventListener('dblclick', (event) => {
                instance.reset();
            });
        }
    });
};
/**
 * Client module implementation.  Wait a bit before trying this, some components like mermaid take a second to process / render
 */
const ZoomModule = {
    onRouteDidUpdate() {
        setTimeout(() => {
            zoomElements(selectors);
        }, timeout);
    },
};
exports.default = ZoomModule;