@r74tech/docusaurus-plugin-panzoom 2.3.0 → 2.4.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [2.4.0](https://github.com/r74tech/docusaurus-plugin-panzoom/compare/v2.3.0...v2.4.0) (2025-07-19)
+
+
+### Features
+
+* add options to better control the zoom ([#7](https://github.com/r74tech/docusaurus-plugin-panzoom/issues/7)) ([4dc537c](https://github.com/r74tech/docusaurus-plugin-panzoom/commit/4dc537c8e059908cc2cae407fc78ae93de34c6dd))
+
 # [2.3.0](https://github.com/r74tech/docusaurus-plugin-panzoom/compare/v2.2.0...v2.3.0) (2025-07-17)
 
 

package/dist/PanZoom.js

@@ -12,9 +12,10 @@ require("./styles/panzoom.css");
 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', toolbar: { enabled = false, position = PanzoomPluginOptions_1.PanZoomPluginToolbarPosition.TopRight, opacity = 0 } = {}, ...panZoomConfig } = zoom;
+const { selectors = ['div.mermaid[data-processed="true"]', 'div.docusaurus-mermaid-container', '.drawio'], wrap = true, timeout = 1000, excludeClass = 'panzoom-exclude', toolbar: { enabled = false, position = PanzoomPluginOptions_1.PanZoomPluginToolbarPosition.TopRight, opacity = 0 } = {}, enableWheelZoom = true, enableWheelZoomWithShift = false, enableDoubleClickResetZoom = true, restrictZoomOutBeyondOrigin = false, ...panZoomConfig } = zoom;
 /**
  * Creates a toolbar with zoom controls for a panzoom instance
+ *
  * @param container The container element to append the toolbar to
  * @param instance The panzoom instance to control
  * @param position The position of the toolbar
@@ -44,16 +45,72 @@ const createToolbar = (container, instance, position) => {
     };
     // Create and append all buttons
     const buttons = [
-        createButton(zoom_in_1.default, 'Zoom in', () => instance.zoomIn()),
-        createButton(zoom_out_1.default, 'Zoom out', () => instance.zoomOut()),
-        createButton(zoom_reset_1.default, 'Reset zoom', () => instance.reset()),
+        // Zoom in
+        createButton(zoom_in_1.default, 'Zoom in', () => {
+            instance.zoomIn();
+        }),
+        // Zoom out
+        createButton(zoom_out_1.default, 'Zoom out', () => {
+            if (!restrictZoomOutBeyondOrigin) {
+                instance.zoomOut();
+                return;
+            }
+            if (instance.getScale() > 1) {
+                instance.zoomOut();
+            }
+        }),
+        // Reset zoom
+        createButton(zoom_reset_1.default, 'Reset zoom', () => {
+            instance.reset();
+        }),
     ];
     buttons.forEach((button) => toolbar.appendChild(button));
     container.appendChild(toolbar);
 };
+/**
+ * Attach event listeners to the element where panzoom is applied.
+ * The listeners to add are based on the configuration options provided.
+ *
+ * @param element The element to add event listeners to
+ * @param instance The panzoom instance to control
+ */
+const addEventListeners = (element, instance) => {
+    const handleZoomWithWheel = (event) => {
+        if (restrictZoomOutBeyondOrigin) {
+            // Allow zooming in or zooming out only to the original size
+            if (event.deltaY < 0 || (event.deltaY > 0 && instance.getScale() > 1)) {
+                instance.zoomWithWheel(event);
+            }
+        }
+        else {
+            instance.zoomWithWheel(event);
+        }
+    };
+    // Handle the wheel zoom functionality if at least one of the options is enabled
+    if (enableWheelZoom || enableWheelZoomWithShift) {
+        element.addEventListener('wheel', (event) => {
+            // Handle zoom with shift key
+            if (enableWheelZoomWithShift && event.shiftKey) {
+                handleZoomWithWheel(event);
+                return;
+            }
+            // Handle regular zoom
+            if (enableWheelZoom && !event.shiftKey) {
+                handleZoomWithWheel(event);
+            }
+        });
+    }
+    // Handle double-click reset zoom
+    if (enableDoubleClickResetZoom) {
+        element.addEventListener('dblclick', () => {
+            instance.reset();
+        });
+    }
+};
 /**
  * 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) => {
@@ -69,24 +126,14 @@ const zoomElements = (selectors) => {
             wrapper.setAttribute('style', 'overflow: hidden; position: relative;');
             element.parentElement?.insertBefore(wrapper, element);
             wrapper.appendChild(element);
-            wrapper.addEventListener('wheel', (event) => {
-                instance.zoomWithWheel(event);
-            });
-            wrapper.addEventListener('dblclick', () => {
-                instance.reset();
-            });
             container = wrapper;
         }
         else {
-            element.style.position = 'relative';
-            element.addEventListener('wheel', (event) => {
-                instance.zoomWithWheel(event);
-            });
-            element.addEventListener('dblclick', () => {
-                instance.reset();
-            });
-            container = element;
+            const htmlElement = element;
+            htmlElement.style.position = 'relative';
+            container = htmlElement;
         }
+        addEventListeners(container, instance);
         // Add toolbar if enabled
         if (enabled) {
             createToolbar(container, instance, position);

package/dist/PanzoomPluginOptions.d.ts

@@ -59,4 +59,35 @@ export type PanZoomPluginOptions = PanzoomOptions & {
          */
         opacity?: number;
     };
+    /**
+     * Whether to enable zooming with the mouse wheel.
+     * If true, the user can zoom in and out using the mouse wheel.
+     *
+     * default: true
+     */
+    enableWheelZoom?: boolean;
+    /**
+     * Whether to enable zooming with the mouse wheel while holding the shift key.
+     * If true, the user can zoom in and out using the mouse wheel while holding the shift key.
+     *
+     * This option is independent of `enableWheelZoom`. Meaning, even if `enableWheelZoom` is false,
+     * and `enableWheelZoomWithShift` is true, the user can still zoom using shift + mouse whee.
+     * Also, `enableWheelZoom` and `enableWheelZoomWithShift` can be used together.
+     *
+     * default: false
+     */
+    enableWheelZoomWithShift?: boolean;
+    /**
+     * Whether to enable double-click to reset zoom.
+     * If true, double-clicking on the panzoom element will reset the zoom level.
+     *
+     * default: true
+     */
+    enableDoubleClickResetZoom?: boolean;
+    /**
+     * Whether to restrict zooming out beyond the original size of the element.
+     *
+     * default: false
+     */
+    restrictZoomOutBeyondOrigin?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@r74tech/docusaurus-plugin-panzoom",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "A plugin to enable the panzoom component on SVG and other elements",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",