@r74tech/docusaurus-plugin-panzoom 2.3.0 → 2.4.2

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [2.4.2](https://github.com/r74tech/docusaurus-plugin-panzoom/compare/v2.4.1...v2.4.2) (2026-02-08)
+
+
+### Bug Fixes
+
+* npm CLIを最新版に更新（OIDC trusted publishing対応） ([93e241b](https://github.com/r74tech/docusaurus-plugin-panzoom/commit/93e241b8113ce187ac6ec5f4ccf196844b2ac1b5))
+
+## [2.4.1](https://github.com/r74tech/docusaurus-plugin-panzoom/compare/v2.4.0...v2.4.1) (2026-02-08)
+
+
+### Bug Fixes
+
+* CIのNode.jsバージョンを22に更新 ([21d9a57](https://github.com/r74tech/docusaurus-plugin-panzoom/commit/21d9a57a26716a4e07e994fbbbdb74e2044d0e08))
+* OIDC trusted publishingの設定を修正 ([31764e1](https://github.com/r74tech/docusaurus-plugin-panzoom/commit/31764e10638d9b89715cadf173ba90f7f18d50c2))
+
+# [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

@@ -9,12 +9,14 @@ const zoom_in_1 = __importDefault(require("./img/zoom-in"));
 const zoom_out_1 = __importDefault(require("./img/zoom-out"));
 const zoom_reset_1 = __importDefault(require("./img/zoom-reset"));
 require("./styles/panzoom.css");
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 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 +46,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 +127,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/PanZoomPlugin.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.validatedThemeConfig = exports.PanZoomPlugin = void 0;
+exports.PanZoomPlugin = void 0;
+exports.validatedThemeConfig = validatedThemeConfig;
 const utils_validation_1 = require("@docusaurus/utils-validation");
 const PanzoomPluginOptions_1 = require("./PanzoomPluginOptions");
 const path_1 = require("path");
@@ -10,7 +11,7 @@ const path_1 = require("path");
  * @param options
  * @returns
  */
-const PanZoomPlugin = (context, options) => {
+const PanZoomPlugin = (_context, _options) => {
     return {
         name: 'docusaurus-plugin-panzoom',
         getClientModules() {
@@ -47,4 +48,3 @@ function validatedThemeConfig(data) {
     const validated = validate(panZoomValidator, themeConfig);
     return validated;
 }
-exports.validatedThemeConfig = validatedThemeConfig;

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/dist/PanzoomPluginOptions.js

@@ -7,4 +7,4 @@ var PanZoomPluginToolbarPosition;
     PanZoomPluginToolbarPosition["TopLeft"] = "top-left";
     PanZoomPluginToolbarPosition["BottomRight"] = "bottom-right";
     PanZoomPluginToolbarPosition["BottomLeft"] = "bottom-left";
-})(PanZoomPluginToolbarPosition = exports.PanZoomPluginToolbarPosition || (exports.PanZoomPluginToolbarPosition = {}));
+})(PanZoomPluginToolbarPosition || (exports.PanZoomPluginToolbarPosition = PanZoomPluginToolbarPosition = {}));

package/eslint.config.mjs

@@ -6,7 +6,7 @@ import prettierPlugin from 'eslint-plugin-prettier';
 
 export default [
   {
-    files: ['src/**/*.{ts,css}'],
+    files: ['src/**/*.ts'],
     ignores: ['**/dist/**', '**/node_modules/**'],
     languageOptions: {
       ecmaVersion: 2020,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@r74tech/docusaurus-plugin-panzoom",
-  "version": "2.3.0",
+  "version": "2.4.2",
   "description": "A plugin to enable the panzoom component on SVG and other elements",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -10,7 +10,8 @@
     "PanZoom"
   ],
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true
   },
   "author": "r74tech",
   "license": "MIT",
@@ -23,34 +24,34 @@
     "format": "prettier --write --no-error-on-unmatched-pattern 'src/**/*.{ts,css}' --config ./.prettierrc"
   },
   "dependencies": {
-    "@docusaurus/utils-validation": "^3.7.0",
-    "@panzoom/panzoom": "^4.6.0"
+    "@docusaurus/utils-validation": "^3.9.2",
+    "@panzoom/panzoom": "^4.6.1"
   },
   "devDependencies": {
-    "@docusaurus/types": "^3.7.0",
-    "@eslint/compat": "^1.2.3",
-    "@eslint/js": "^9.14.0",
+    "@docusaurus/types": "^3.9.2",
+    "@eslint/compat": "^1.4.1",
+    "@eslint/js": "^9.39.2",
     "@semantic-release/changelog": "^6.0.3",
-    "@semantic-release/commit-analyzer": "^9.0.2",
+    "@semantic-release/commit-analyzer": "^13.0.1",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/github": "^11.0.1",
-    "@semantic-release/npm": "^12.0.1",
-    "@semantic-release/release-notes-generator": "^10.0.3",
-    "@tsconfig/docusaurus": "^1.0.7",
-    "@types/node": "^22.14.0",
-    "@typescript-eslint/eslint-plugin": "^8.36.0",
-    "@typescript-eslint/parser": "^8.13.0",
-    "eslint": "^9.14.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.5.1",
-    "globals": "^15.12.0",
-    "lint-staged": "^15.2.10",
-    "prettier": "^3.3.3",
+    "@semantic-release/github": "^12.0.5",
+    "@semantic-release/npm": "^13.1.0",
+    "@semantic-release/release-notes-generator": "^14.1.0",
+    "@tsconfig/docusaurus": "^2.0.8",
+    "@types/node": "^25.2.2",
+    "@typescript-eslint/eslint-plugin": "^8.54.0",
+    "@typescript-eslint/parser": "^8.54.0",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.5",
+    "globals": "^15.15.0",
+    "lint-staged": "^16.2.7",
+    "prettier": "^3.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "semantic-release": "^24.2.3",
-    "typescript": "^4.9.5",
-    "typescript-eslint": "^8.13.0"
+    "semantic-release": "^25.0.3",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.54.0"
   },
   "release": {
     "plugins": [
@@ -71,7 +72,7 @@
           "assets": [
             "CHANGELOG.md",
             "package.json",
-            "package-lock.json"
+            "pnpm-lock.yaml"
           ],
           "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
         }