@r74tech/docusaurus-plugin-panzoom 2.1.0 → 2.3.0

package/.prettierrc

@@ -0,0 +1,12 @@
+{
+  "semi": true,
+  "tabWidth": 2,
+  "printWidth": 120,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "jsxSingleQuote": true,
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "endOfLine": "lf",
+  "proseWrap": "always"
+}

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [2.3.0](https://github.com/r74tech/docusaurus-plugin-panzoom/compare/v2.2.0...v2.3.0) (2025-07-17)
+
+
+### Features
+
+* add toolbar to control zooming (zoom in, zoom out, reset) ([a170e52](https://github.com/r74tech/docusaurus-plugin-panzoom/commit/a170e5253e2bf5b1ddb12bf7b0e648722b053bcb))
+* merge all toolbar props into a single object ([0c32e6c](https://github.com/r74tech/docusaurus-plugin-panzoom/commit/0c32e6c361563ad81517818c99693a9de717f33f))
+
+# [2.2.0](https://github.com/r74tech/docusaurus-plugin-panzoom/compare/v2.1.0...v2.2.0) (2025-07-12)
+
+
+### Features
+
+* add Prettier and ESLint to documentation website ([33dd381](https://github.com/r74tech/docusaurus-plugin-panzoom/commit/33dd381ae478260cade8f15e8c69670c75628905))
+
 # [2.1.0](https://github.com/r74tech/docusaurus-plugin-panzoom/compare/v2.0.0...v2.1.0) (2025-04-14)
 
 

package/dist/PanZoom.d.ts

@@ -1,4 +1,5 @@
 import type { ClientModule } from '@docusaurus/types';
+import './styles/panzoom.css';
 /**
  * Client module implementation.  Wait a bit before trying this, some components like mermaid take a second to process / render
  */

package/dist/PanZoom.js

@@ -4,10 +4,53 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const panzoom_1 = __importDefault(require("@panzoom/panzoom"));
+const PanzoomPluginOptions_1 = require("./PanzoomPluginOptions");
+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");
 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;
+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;
+/**
+ * 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
+ */
+const createToolbar = (container, instance, position) => {
+    const toolbar = document.createElement('div');
+    toolbar.className = `panzoom-toolbar panzoom-toolbar-${position} ${excludeClass}`;
+    // Apply custom opacity from configuration
+    toolbar.style.opacity = opacity.toString();
+    // Prevent double-click events from bubbling up to the container
+    // By default the panzoom library will reset on double click
+    toolbar.addEventListener('dblclick', (e) => {
+        e.stopPropagation();
+    });
+    // Helper function to create toolbar buttons
+    const createButton = (svg, title, action) => {
+        const button = document.createElement('button');
+        button.innerHTML = svg;
+        button.title = title;
+        button.className = excludeClass;
+        button.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            action();
+        });
+        return button;
+    };
+    // 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()),
+    ];
+    buttons.forEach((button) => toolbar.appendChild(button));
+    container.appendChild(toolbar);
+};
 /**
  * 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.
@@ -20,25 +63,33 @@ const zoomElements = (selectors) => {
     });
     foundElements.forEach((element) => {
         const instance = (0, panzoom_1.default)(element, { excludeClass, ...panZoomConfig });
+        let container;
         if (wrap) {
             const wrapper = document.createElement('div');
-            wrapper.setAttribute('style', "overflow: hidden");
+            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', (event) => {
+            wrapper.addEventListener('dblclick', () => {
                 instance.reset();
             });
+            container = wrapper;
         }
-        if (!wrap) {
+        else {
+            element.style.position = 'relative';
             element.addEventListener('wheel', (event) => {
                 instance.zoomWithWheel(event);
             });
-            element.addEventListener('dblclick', (event) => {
+            element.addEventListener('dblclick', () => {
                 instance.reset();
             });
+            container = element;
+        }
+        // Add toolbar if enabled
+        if (enabled) {
+            createToolbar(container, instance, position);
         }
     });
 };

package/dist/PanZoomPlugin.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.validatedThemeConfig = exports.PanZoomPlugin = void 0;
 const utils_validation_1 = require("@docusaurus/utils-validation");
+const PanzoomPluginOptions_1 = require("./PanzoomPluginOptions");
 const path_1 = require("path");
 /**
  * Main module for the PanZoom plugin
@@ -11,15 +12,15 @@ const path_1 = require("path");
  */
 const PanZoomPlugin = (context, options) => {
     return {
-        name: "docusaurus-plugin-panzoom",
+        name: 'docusaurus-plugin-panzoom',
         getClientModules() {
-            return [
-                (0, path_1.resolve)(__dirname, "./PanZoom")
-            ];
-        }
+            return [(0, path_1.resolve)(__dirname, './PanZoom'), (0, path_1.resolve)(__dirname, './styles/panzoom.css')];
+        },
     };
 };
 exports.PanZoomPlugin = PanZoomPlugin;
+// Extract the valid toolbar position values from the enum
+const validToolbarPositions = Object.values(PanzoomPluginOptions_1.PanZoomPluginToolbarPosition);
 /**
  * Theme validation rules for this plugin
  */
@@ -29,7 +30,12 @@ const panZoomValidator = utils_validation_1.Joi.object({
         wrap: utils_validation_1.Joi.boolean(),
         timeout: utils_validation_1.Joi.number(),
         excludeClass: utils_validation_1.Joi.string(),
-    })
+        toolbar: utils_validation_1.Joi.object({
+            enabled: utils_validation_1.Joi.boolean(),
+            position: utils_validation_1.Joi.string().valid(...validToolbarPositions),
+            opacity: utils_validation_1.Joi.number().min(0).max(1),
+        }),
+    }),
 });
 /**
  * Add a validation for the theme configuration

package/dist/PanzoomPluginOptions.d.ts

@@ -1,4 +1,10 @@
 import type { PanzoomOptions } from '@panzoom/panzoom';
+export declare enum PanZoomPluginToolbarPosition {
+    TopRight = "top-right",
+    TopLeft = "top-left",
+    BottomRight = "bottom-right",
+    BottomLeft = "bottom-left"
+}
 export type PanZoomPluginOptions = PanzoomOptions & {
     /**
      * A list of selectors to look for elements to enable pan and zoom
@@ -28,4 +34,29 @@ export type PanZoomPluginOptions = PanzoomOptions & {
      * default: 'panzoom-exclude'
      */
     excludeClass?: string;
+    /**
+     * Toolbar options for the Panzoom plugin.
+     */
+    toolbar?: {
+        /**
+         * Whether to enable and show a control toolbar with buttons for zoom in, zoom out, and reset.
+         *
+         * default: false
+         */
+        enabled?: boolean;
+        /**
+         * The toolbar position (top-right, top-left, bottom-right, bottom-left)
+         *
+         * default: 'top-right'
+         */
+        position?: PanZoomPluginToolbarPosition;
+        /**
+         * The toolbar opacity when not hovered (value between 0 and 1)
+         * The toolbar will become fully opaque (opacity: 1) when hovered.
+         *
+         * example: 0.5
+         * default: 0
+         */
+        opacity?: number;
+    };
 };

package/dist/PanzoomPluginOptions.js

@@ -1,2 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanZoomPluginToolbarPosition = void 0;
+var PanZoomPluginToolbarPosition;
+(function (PanZoomPluginToolbarPosition) {
+    PanZoomPluginToolbarPosition["TopRight"] = "top-right";
+    PanZoomPluginToolbarPosition["TopLeft"] = "top-left";
+    PanZoomPluginToolbarPosition["BottomRight"] = "bottom-right";
+    PanZoomPluginToolbarPosition["BottomLeft"] = "bottom-left";
+})(PanZoomPluginToolbarPosition = exports.PanZoomPluginToolbarPosition || (exports.PanZoomPluginToolbarPosition = {}));

package/dist/img/zoom-in.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#000\"><path d=\"M450-450H220v-60h230v-230h60v230h230v60H510v230h-60v-230Z\"/></svg>";
+export default _default;

package/dist/img/zoom-in.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000"><path d="M450-450H220v-60h230v-230h60v230h230v60H510v230h-60v-230Z"/></svg>';

package/dist/img/zoom-out.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#000\"><path d=\"M220-450v-60h520v60H220Z\"/></svg>";
+export default _default;

package/dist/img/zoom-out.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000"><path d="M220-450v-60h520v60H220Z"/></svg>';

package/dist/img/zoom-reset.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#000\"><path d=\"M480-333.85v-91.92q0-22.6 15.82-38.41Q511.63-480 534.23-480h91.92v47.69h-98.46v98.46H480ZM534.23-100q-22.6 0-38.41-15.82Q480-131.64 480-154.23v-91.92h47.69v98.46h98.46V-100h-91.92Zm278.08-233.85v-98.46h-98.46V-480h91.92q22.59 0 38.41 15.82Q860-448.37 860-425.77v91.92h-47.69ZM713.85-100v-47.69h98.46v-98.46H860v91.92q0 22.59-15.82 38.41Q828.36-100 805.77-100h-91.92Zm94.07-467.69h-62.23q-27.54-84.54-99.57-138.43Q574.08-760 480-760q-117 0-198.5 81.5T200-480q0 78.15 38.46 141.81 38.46 63.65 101.54 99.34V-360h60v220H180v-60h113.23q-69.3-45-111.27-118.27Q140-391.54 140-480q0-70.8 26.77-132.63t72.77-107.83q46-46 107.83-72.77Q409.2-820 480-820q118.61 0 208.81 71.42Q779-677.15 807.92-567.69Z\"/></svg>";
+export default _default;

package/dist/img/zoom-reset.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000"><path d="M480-333.85v-91.92q0-22.6 15.82-38.41Q511.63-480 534.23-480h91.92v47.69h-98.46v98.46H480ZM534.23-100q-22.6 0-38.41-15.82Q480-131.64 480-154.23v-91.92h47.69v98.46h98.46V-100h-91.92Zm278.08-233.85v-98.46h-98.46V-480h91.92q22.59 0 38.41 15.82Q860-448.37 860-425.77v91.92h-47.69ZM713.85-100v-47.69h98.46v-98.46H860v91.92q0 22.59-15.82 38.41Q828.36-100 805.77-100h-91.92Zm94.07-467.69h-62.23q-27.54-84.54-99.57-138.43Q574.08-760 480-760q-117 0-198.5 81.5T200-480q0 78.15 38.46 141.81 38.46 63.65 101.54 99.34V-360h60v220H180v-60h113.23q-69.3-45-111.27-118.27Q140-391.54 140-480q0-70.8 26.77-132.63t72.77-107.83q46-46 107.83-72.77Q409.2-820 480-820q118.61 0 208.81 71.42Q779-677.15 807.92-567.69Z"/></svg>';

package/dist/styles/panzoom.css

@@ -0,0 +1,48 @@
+.panzoom-toolbar {
+  position: absolute;
+  z-index: 10;
+  display: flex;
+  gap: 5px;
+  padding: 5px;
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 4px;
+  transition: opacity 0.2s ease-in-out;
+}
+
+*:hover > .panzoom-toolbar {
+  opacity: 1 !important;
+}
+
+.panzoom-toolbar-top-right {
+  top: 10px;
+  right: 10px;
+}
+
+.panzoom-toolbar-top-left {
+  top: 10px;
+  left: 10px;
+}
+
+.panzoom-toolbar-bottom-right {
+  bottom: 10px;
+  right: 10px;
+}
+
+.panzoom-toolbar-bottom-left {
+  bottom: 10px;
+  left: 10px;
+}
+
+.panzoom-toolbar button {
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  background-color: #fff;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

package/eslint.config.mjs

@@ -0,0 +1,32 @@
+import js from '@eslint/js';
+import tsParser from '@typescript-eslint/parser';
+import tseslint from '@typescript-eslint/eslint-plugin';
+import globals from 'globals';
+import prettierPlugin from 'eslint-plugin-prettier';
+
+export default [
+  {
+    files: ['src/**/*.{ts,css}'],
+    ignores: ['**/dist/**', '**/node_modules/**'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      sourceType: 'module',
+      globals: {
+        ...globals.node,
+        ...globals.browser,
+      },
+      parser: tsParser,
+    },
+    plugins: {
+      '@typescript-eslint': tseslint,
+      prettier: prettierPlugin,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...tseslint.configs.recommended.rules,
+      'prettier/prettier': 'error',
+      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
+    },
+  },
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@r74tech/docusaurus-plugin-panzoom",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "description": "A plugin to enable the panzoom component on SVG and other elements",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -15,8 +15,12 @@
   "author": "r74tech",
   "license": "MIT",
   "scripts": {
-    "build": "tsc",
-    "prepublishOnly": "npm run build"
+    "build": "tsc && npm run copy-assets",
+    "copy-assets": "mkdir -p dist/styles && cp -r src/styles/* dist/styles/",
+    "prepublishOnly": "npm run build",
+    "lint": "eslint 'src/**/*.{ts,css}' --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "eslint --fix 'src/**/*.{ts,css}'",
+    "format": "prettier --write --no-error-on-unmatched-pattern 'src/**/*.{ts,css}' --config ./.prettierrc"
   },
   "dependencies": {
     "@docusaurus/utils-validation": "^3.7.0",
@@ -24,6 +28,8 @@
   },
   "devDependencies": {
     "@docusaurus/types": "^3.7.0",
+    "@eslint/compat": "^1.2.3",
+    "@eslint/js": "^9.14.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/commit-analyzer": "^9.0.2",
     "@semantic-release/git": "^10.0.1",
@@ -32,10 +38,19 @@
     "@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",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "semantic-release": "^24.2.3",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "typescript-eslint": "^8.13.0"
   },
   "release": {
     "plugins": [
@@ -79,5 +94,10 @@
     "type": "git",
     "url": "git+https://github.com/r74tech/docusaurus-plugin-panzoom.git"
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "lint-staged": {
+    "src/**/*.{ts,css}": [
+      "prettier --write --no-error-on-unmatched-pattern --config ./.prettierrc"
+    ]
+  }
 }

package/docs/README.md

@@ -1,56 +0,0 @@
-# Docusaurus Plugin PanZoom Documentation
-
-This is the documentation website for the [@r74tech/docusaurus-plugin-panzoom](https://github.com/r74tech/docusaurus-plugin-panzoom) package. The site is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
-
-## Getting Started
-
-### Prerequisites
-
-- Node.js 20.0 or higher
-- pnpm (recommended) or npm
-
-### Installation
-
-```bash
-# Install dependencies
-pnpm install
-```
-
-### Local Development
-
-To start the local development server:
-
-```bash
-# Start the development server
-pnpm start
-```
-
-This command starts a local development server and opens a browser window. Most changes are reflected live without having to restart the server.
-
-### Building the Documentation
-
-To build the static website:
-
-```bash
-# Build the static site
-pnpm build
-```
-
-This command generates static content in the `build` directory, which can be served using any static content hosting service.
-
-## Project Structure
-
-- `/docs` - Documentation content in Markdown format
-- `/static` - Static assets like images and favicon
-
-## Deployment
-
-The documentation is automatically deployed to GitHub Pages using GitHub Actions whenever changes are pushed to the main branch.
-
-## Contributing
-
-Contributions to improve the documentation are welcome! Please feel free to submit a pull request.
-
-## License
-
-This documentation is licensed under the same [MIT License](https://github.com/r74tech/docusaurus-plugin-panzoom/blob/main/LICENSE) as the main project.

package/docs/docs/example/index.md

@@ -1,35 +0,0 @@
----
-sidebar_position: 1
-title: Examples
-description: Examples of docusaurus-plugin-panzoom in action
----
-
-# Pan and Zoom Examples
-
-This page demonstrates the pan and zoom functionality provided by the docusaurus-plugin-panzoom plugin.
-Try dragging to pan, using the mouse wheel to zoom, and double-clicking to reset.
-
-## Basic Example
-
-A simple div with the panzoom-example class:
-
-<div className="panzoom-example">
-  Drag here, use wheel to zoom, double-click to reset
-</div>
-
-## Image Example
-
-An image with pan and zoom functionality:
-
-<div className="panzoom-example">
-  <img src="https://picsum.photos/400/300" alt="Scenic landscape" style={{ width: '100%', height: 'auto' }} />
-</div>
-
-## Placeholder Example
-
-A placeholder image with pan and zoom functionality:
-
-<div className="panzoom-example">
-  <img src="https://placeholder.pics/svg/400x300" alt="Placeholder graphic" style={{ width: '100%', height: 'auto' }} />
-</div>
-

package/docs/docs/index.md

@@ -1,57 +0,0 @@
----
-sidebar_position: 1
----
-
-# Introduction
-
-**docusaurus-plugin-panzoom** is a plugin that adds pan and zoom functionality to images and SVG images in Docusaurus websites.
-
-## Overview
-
-Complex diagrams and charts, especially those generated with mermaid.js, can be difficult to examine in detail in a browser. This plugin allows users to drag to move (pan) and zoom in or out of diagrams for better visibility.
-
-This plugin implements the excellent [@panzoom/panzoom](https://www.npmjs.com/package/@panzoom/panzoom) library.
-
-## Key Features
-
-- Adds pan and zoom functionality to images and SVG elements
-- Works with mermaid.js generated diagrams
-- Customizable selectors to target specific elements
-- Option to wrap elements to contain them within their original container
-- Wheel zoom and double-click reset functionality
-
-## Demo
-
-Here's an example of an element with pan and zoom functionality enabled. Try dragging to pan, using the mouse wheel to zoom, and double-clicking to reset.
-
-<div class="panzoom-example">
-  Drag here, use wheel to zoom, double-click to reset
-</div>
-
-## Installation
-
-```bash
-npm install @r74tech/docusaurus-plugin-panzoom
-```
-
-```javascript
-// Add to docusaurus.config.js
-// ...
-plugins: ['@r74tech/docusaurus-plugin-panzoom'],
-// or
-plugins: [['@r74tech/docusaurus-plugin-panzoom', {} /* options */]],
-```
-
-## Next Steps
-
-- Check out the [Basic Usage](usage/basic)
-- See [Examples](example)
-
-## License
-
-MIT, see [LICENSE](https://github.com/r74tech/docusaurus-plugin-panzoom/blob/main/LICENSE) for more details.
-
-> [!NOTE]
-> This package is a fork of [act-org/docusaurus-plugin-panzoom](https://github.com/act-org/docusaurus-plugin-panzoom) under the MIT license. It was forked because the original package was not being actively maintained.
->
-> If the original package is updated and maintained again, we recommend migrating back to the original package. This fork will continue to be maintained until then.

package/docs/docs/usage/basic.md

@@ -1,120 +0,0 @@
----
-sidebar_position: 1
----
-
-# Basic Usage
-
-This page explains the basic usage of docusaurus-plugin-panzoom.
-
-## Installation
-
-First, install the plugin using npm:
-
-```bash
-npm install @r74tech/docusaurus-plugin-panzoom
-```
-
-## Configuration
-
-### Adding the Plugin
-
-Add the plugin to your Docusaurus configuration file (`docusaurus.config.js` or `docusaurus.config.ts`):
-
-```javascript
-// Add to docusaurus.config.js
-module.exports = {
-  // ...
-  plugins: ['@r74tech/docusaurus-plugin-panzoom'],
-  // ...
-};
-```
-
-Or, if you want to specify options:
-
-```javascript
-// Add to docusaurus.config.js
-module.exports = {
-  // ...
-  plugins: [
-    [
-      '@r74tech/docusaurus-plugin-panzoom',
-      {
-        // Options can be specified here (currently not used)
-      }
-    ]
-  ],
-  // ...
-};
-```
-
-### Theme Configuration
-
-To customize the plugin's behavior, add a `zoom` object to the `themeConfig` section:
-
-```javascript
-// Add to docusaurus.config.js
-module.exports = {
-  // ...
-  themeConfig: {
-    // ...
-    zoom: {
-      // A list of selectors to look for elements to enable pan and zoom
-      // Default: ['div.mermaid[data-processed="true"]', 'div.docusaurus-mermaid-container', '.drawio']
-      selectors: ['div.mermaid[data-processed="true"]', '.drawio'],
-      
-      // Whether to wrap the panzoom items in a div with overflow:hidden
-      // This constrains the pan zoom detail into the original container
-      // Default: true
-      wrap: true,
-      
-      // The amount of time to wait in MS before the plugin client module tries to look for
-      // and alter pan zoom elements. Some renders take a little bit before they appear in the
-      // dom to find.
-      // Default: 1000
-      timeout: 1000,
-      
-      // You can also pass any options supported by @panzoom/panzoom
-      // See: https://github.com/timmywil/panzoom for available options
-    }
-  },
-  // ...
-};
-```
-
-## Basic Usage
-
-Once you've installed and configured the plugin, pan and zoom functionality will be automatically added to elements matching the specified selectors.
-
-### Default Behavior
-
-By default, pan and zoom functionality is added to the following elements:
-
-1. `div.mermaid[data-processed="true"]` - Processed mermaid.js diagrams
-2. `div.docusaurus-mermaid-container` - Docusaurus mermaid containers
-3. `.drawio` - Diagrams created with draw.io
-
-### User Interactions
-
-For elements with pan and zoom functionality enabled, users can:
-
-- **Pan**: Click and drag the element to move the view area
-- **Zoom**: Use the mouse wheel to zoom in and out of the element
-- **Reset**: Double-click the element to reset to the original view state
-
-## Adding Custom Selectors
-
-If you want to add pan and zoom functionality to specific elements, add custom selectors to the `selectors` array:
-
-```javascript
-zoom: {
-  selectors: [
-    'div.mermaid[data-processed="true"]',
-    '.drawio',
-    '.my-custom-diagram',  // Add a custom selector
-    '#specific-image'      // Add a specific ID element
-  ],
-  // Other options...
-}
-```
-
-Check out the [Examples](../example) page for demonstrations.

package/docs/docusaurus.config.ts

@@ -1,123 +0,0 @@
-import {themes as prismThemes} from 'prism-react-renderer';
-import type {Config} from '@docusaurus/types';
-import type * as Preset from '@docusaurus/preset-classic';
-
-// This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
-
-const config: Config = {
-  title: 'Docusaurus Plugin PanZoom',
-  tagline: 'Add pan and zoom functionality to images and SVGs in your Docusaurus site',
-  favicon: 'img/favicon.ico',
-
-  // Set the production url of your site here
-  url: 'https://r74tech.github.io',
-  // Set the /<baseUrl>/ pathname under which your site is served
-  // For GitHub pages deployment, it is often '/<projectName>/'
-  baseUrl: '/docusaurus-plugin-panzoom/',
-
-  // GitHub pages deployment config.
-  // If you aren't using GitHub pages, you don't need these.
-  organizationName: 'r74tech', // Usually your GitHub org/user name.
-  projectName: 'docusaurus-plugin-panzoom', // Usually your repo name.
-
-  onBrokenLinks: 'throw',
-  onBrokenMarkdownLinks: 'warn',
-
-  // Even if you don't use internationalization, you can use this field to set
-  // useful metadata like html lang. For example, if your site is Chinese, you
-  // may want to replace "en" with "zh-Hans".
-  i18n: {
-    defaultLocale: 'en',
-    locales: ['en'],
-  },
-
-  presets: [
-    [
-      'classic',
-      {
-        docs: {
-          sidebarPath: './sidebars.ts',
-          // Please change this to your repo.
-          // Remove this to remove the "edit this page" links.
-          editUrl:
-            'https://github.com/r74tech/docusaurus-plugin-panzoom/tree/main/docs/',
-          routeBasePath: '/', // Changed from 'docs' to '/' to make docs the main route
-        },
-        blog: false, // Disable the blog feature
-      } satisfies Preset.Options,
-    ],
-  ],
-  
-  plugins: [
-    '@r74tech/docusaurus-plugin-panzoom'
-  ],
-
-  themeConfig: {
-    // Replace with your project's social card
-    image: 'img/docusaurus-social-card.jpg',
-    navbar: {
-      title: 'Docusaurus Plugin PanZoom',
-      logo: {
-        alt: 'Docusaurus Plugin PanZoom Logo',
-        src: 'img/logo.svg',
-      },
-      items: [
-        {
-          type: 'docSidebar',
-          sidebarId: 'tutorialSidebar',
-          position: 'left',
-          label: 'Docs',
-        },
-        {
-          type: 'doc',
-          docId: 'example/index',
-          position: 'left',
-          label: 'Example',
-        },
-        {
-          href: 'https://github.com/r74tech/docusaurus-plugin-panzoom',
-          label: 'GitHub',
-          position: 'right',
-        },
-      ],
-    },
-    footer: {
-      style: 'dark',
-      links: [
-        {
-          title: 'Links',
-          items: [
-            {
-              label: 'Docs',
-              to: '/',
-            },
-            {
-              label: 'Example',
-              to: '/example/',
-            },
-            {
-              label: 'GitHub',
-              href: 'https://github.com/r74tech/docusaurus-plugin-panzoom',
-            },
-            {
-              label: 'npm',
-              href: 'https://www.npmjs.com/package/@r74tech/docusaurus-plugin-panzoom',
-            },
-          ],
-        },
-      ],
-      copyright: `Copyright © ${new Date().getFullYear()} r74tech. Built with Docusaurus.`,
-    },
-    prism: {
-      theme: prismThemes.github,
-      darkTheme: prismThemes.dracula,
-    },
-    zoom: {
-      selectors: ['div.mermaid[data-processed="true"]', 'div.docusaurus-mermaid-container', '.drawio', '.panzoom-example'],
-      wrap: true,
-      timeout: 1000,
-    },
-  } satisfies Preset.ThemeConfig,
-};
-
-export default config;

package/docs/package.json

@@ -1,48 +0,0 @@
-{
-  "name": "docs",
-  "version": "0.0.0",
-  "private": true,
-  "scripts": {
-    "docusaurus": "docusaurus",
-    "start": "docusaurus start",
-    "build": "docusaurus build",
-    "swizzle": "docusaurus swizzle",
-    "deploy": "docusaurus deploy",
-    "clear": "docusaurus clear",
-    "serve": "docusaurus serve",
-    "write-translations": "docusaurus write-translations",
-    "write-heading-ids": "docusaurus write-heading-ids",
-    "typecheck": "tsc"
-  },
-  "dependencies": {
-    "@docusaurus/core": "3.7.0",
-    "@docusaurus/preset-classic": "3.7.0",
-    "@mdx-js/react": "^3.0.0",
-    "@r74tech/docusaurus-plugin-panzoom": "file:..",
-    "clsx": "^2.0.0",
-    "prism-react-renderer": "^2.3.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
-  },
-  "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.7.0",
-    "@docusaurus/tsconfig": "3.7.0",
-    "@docusaurus/types": "3.7.0",
-    "typescript": "~5.6.2"
-  },
-  "browserslist": {
-    "production": [
-      ">0.5%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 3 chrome version",
-      "last 3 firefox version",
-      "last 5 safari version"
-    ]
-  },
-  "engines": {
-    "node": ">=20.0"
-  }
-}

package/docs/sidebars.ts

@@ -1,22 +0,0 @@
-import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';
-
-/**
- * Creating a sidebar enables you to:
- - create an ordered group of docs
- - render a sidebar for each doc of that group
- - provide next/previous navigation
-
- The sidebars can be generated from the filesystem, or explicitly defined here.
-
- Create as many sidebars as you want.
- */
-const sidebars: SidebarsConfig = {
-  // Manually defined sidebar with specific items
-  tutorialSidebar: [
-    'index', // Main documentation page (docs/index.md)
-    'usage/basic', // Basic usage guide
-    'example/index', // Examples page
-  ],
-};
-
-export default sidebars;

package/docs/static/img/logo.svg

@@ -1 +0,0 @@
-<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="#FFF" d="M99 52h84v34H99z"/><path d="M23 163c-7.398 0-13.843-4.027-17.303-10A19.886 19.886 0 0 0 3 163c0 11.046 8.954 20 20 20h20v-20H23z" fill="#3ECC5F"/><path d="M112.98 57.376L183 53V43c0-11.046-8.954-20-20-20H73l-2.5-4.33c-1.112-1.925-3.889-1.925-5 0L63 23l-2.5-4.33c-1.111-1.925-3.889-1.925-5 0L53 23l-2.5-4.33c-1.111-1.925-3.889-1.925-5 0L43 23c-.022 0-.042.003-.065.003l-4.142-4.141c-1.57-1.571-4.252-.853-4.828 1.294l-1.369 5.104-5.192-1.392c-2.148-.575-4.111 1.389-3.535 3.536l1.39 5.193-5.102 1.367c-2.148.576-2.867 3.259-1.296 4.83l4.142 4.142c0 .021-.003.042-.003.064l-4.33 2.5c-1.925 1.111-1.925 3.889 0 5L23 53l-4.33 2.5c-1.925 1.111-1.925 3.889 0 5L23 63l-4.33 2.5c-1.925 1.111-1.925 3.889 0 5L23 73l-4.33 2.5c-1.925 1.111-1.925 3.889 0 5L23 83l-4.33 2.5c-1.925 1.111-1.925 3.889 0 5L23 93l-4.33 2.5c-1.925 1.111-1.925 3.889 0 5L23 103l-4.33 2.5c-1.925 1.111-1.925 3.889 0 5L23 113l-4.33 2.5c-1.925 1.111-1.925 3.889 0 5L23 123l-4.33 2.5c-1.925 1.111-1.925 3.889 0 5L23 133l-4.33 2.5c-1.925 1.111-1.925 3.889 0 5L23 143l-4.33 2.5c-1.925 1.111-1.925 3.889 0 5L23 153l-4.33 2.5c-1.925 1.111-1.925 3.889 0 5L23 163c0 11.046 8.954 20 20 20h120c11.046 0 20-8.954 20-20V83l-70.02-4.376A10.645 10.645 0 0 1 103 68c0-5.621 4.37-10.273 9.98-10.624" fill="#3ECC5F"/><path fill="#3ECC5F" d="M143 183h30v-40h-30z"/><path d="M193 158c-.219 0-.428.037-.639.064-.038-.15-.074-.301-.116-.451A5 5 0 0 0 190.32 148a4.96 4.96 0 0 0-3.016 1.036 26.531 26.531 0 0 0-.335-.336 4.955 4.955 0 0 0 1.011-2.987 5 5 0 0 0-9.599-1.959c-.148-.042-.297-.077-.445-.115.027-.211.064-.42.064-.639a5 5 0 0 0-5-5 5 5 0 0 0-5 5c0 .219.037.428.064.639-.148.038-.297.073-.445.115a4.998 4.998 0 0 0-9.599 1.959c0 1.125.384 2.151 1.011 2.987-3.717 3.632-6.031 8.693-6.031 14.3 0 11.046 8.954 20 20 20 9.339 0 17.16-6.41 19.361-15.064.211.027.42.064.639.064a5 5 0 0 0 5-5 5 5 0 0 0-5-5" fill="#44D860"/><path fill="#3ECC5F" d="M153 123h30v-20h-30z"/><path d="M193 115.5a2.5 2.5 0 1 0 0-5c-.109 0-.214.019-.319.032-.02-.075-.037-.15-.058-.225a2.501 2.501 0 0 0-.963-4.807c-.569 0-1.088.197-1.508.518a6.653 6.653 0 0 0-.168-.168c.314-.417.506-.931.506-1.494a2.5 2.5 0 0 0-4.8-.979A9.987 9.987 0 0 0 183 103c-5.522 0-10 4.478-10 10s4.478 10 10 10c.934 0 1.833-.138 2.69-.377a2.5 2.5 0 0 0 4.8-.979c0-.563-.192-1.077-.506-1.494.057-.055.113-.111.168-.168.42.321.939.518 1.508.518a2.5 2.5 0 0 0 .963-4.807c.021-.074.038-.15.058-.225.105.013.21.032.319.032" fill="#44D860"/><path d="M63 55.5a2.5 2.5 0 0 1-2.5-2.5c0-4.136-3.364-7.5-7.5-7.5s-7.5 3.364-7.5 7.5a2.5 2.5 0 1 1-5 0c0-6.893 5.607-12.5 12.5-12.5S65.5 46.107 65.5 53a2.5 2.5 0 0 1-2.5 2.5" fill="#000"/><path d="M103 183h60c11.046 0 20-8.954 20-20V93h-60c-11.046 0-20 8.954-20 20v70z" fill="#FFFF50"/><path d="M168.02 124h-50.04a1 1 0 1 1 0-2h50.04a1 1 0 1 1 0 2m0 20h-50.04a1 1 0 1 1 0-2h50.04a1 1 0 1 1 0 2m0 20h-50.04a1 1 0 1 1 0-2h50.04a1 1 0 1 1 0 2m0-49.814h-50.04a1 1 0 1 1 0-2h50.04a1 1 0 1 1 0 2m0 19.814h-50.04a1 1 0 1 1 0-2h50.04a1 1 0 1 1 0 2m0 20h-50.04a1 1 0 1 1 0-2h50.04a1 1 0 1 1 0 2M183 61.611c-.012 0-.022-.006-.034-.005-3.09.105-4.552 3.196-5.842 5.923-1.346 2.85-2.387 4.703-4.093 4.647-1.889-.068-2.969-2.202-4.113-4.46-1.314-2.594-2.814-5.536-5.963-5.426-3.046.104-4.513 2.794-5.807 5.167-1.377 2.528-2.314 4.065-4.121 3.994-1.927-.07-2.951-1.805-4.136-3.813-1.321-2.236-2.848-4.75-5.936-4.664-2.994.103-4.465 2.385-5.763 4.4-1.373 2.13-2.335 3.428-4.165 3.351-1.973-.07-2.992-1.51-4.171-3.177-1.324-1.873-2.816-3.993-5.895-3.89-2.928.1-4.399 1.97-5.696 3.618-1.232 1.564-2.194 2.802-4.229 2.724a1 1 0 0 0-.072 2c3.017.101 4.545-1.8 5.872-3.487 1.177-1.496 2.193-2.787 4.193-2.855 1.926-.082 2.829 1.115 4.195 3.045 1.297 1.834 2.769 3.914 5.731 4.021 3.103.104 4.596-2.215 5.918-4.267 1.182-1.834 2.202-3.417 4.15-3.484 1.793-.067 2.769 1.35 4.145 3.681 1.297 2.197 2.766 4.686 5.787 4.796 3.125.108 4.634-2.62 5.949-5.035 1.139-2.088 2.214-4.06 4.119-4.126 1.793-.042 2.728 1.595 4.111 4.33 1.292 2.553 2.757 5.445 5.825 5.556l.169.003c3.064 0 4.518-3.075 5.805-5.794 1.139-2.41 2.217-4.68 4.067-4.773v-2z" fill="#000"/><path fill="#3ECC5F" d="M83 183h40v-40H83z"/><path d="M143 158c-.219 0-.428.037-.639.064-.038-.15-.074-.301-.116-.451A5 5 0 0 0 140.32 148a4.96 4.96 0 0 0-3.016 1.036 26.531 26.531 0 0 0-.335-.336 4.955 4.955 0 0 0 1.011-2.987 5 5 0 0 0-9.599-1.959c-.148-.042-.297-.077-.445-.115.027-.211.064-.42.064-.639a5 5 0 0 0-5-5 5 5 0 0 0-5 5c0 .219.037.428.064.639-.148.038-.297.073-.445.115a4.998 4.998 0 0 0-9.599 1.959c0 1.125.384 2.151 1.011 2.987-3.717 3.632-6.031 8.693-6.031 14.3 0 11.046 8.954 20 20 20 9.339 0 17.16-6.41 19.361-15.064.211.027.42.064.639.064a5 5 0 0 0 5-5 5 5 0 0 0-5-5" fill="#44D860"/><path fill="#3ECC5F" d="M83 123h40v-20H83z"/><path d="M133 115.5a2.5 2.5 0 1 0 0-5c-.109 0-.214.019-.319.032-.02-.075-.037-.15-.058-.225a2.501 2.501 0 0 0-.963-4.807c-.569 0-1.088.197-1.508.518a6.653 6.653 0 0 0-.168-.168c.314-.417.506-.931.506-1.494a2.5 2.5 0 0 0-4.8-.979A9.987 9.987 0 0 0 123 103c-5.522 0-10 4.478-10 10s4.478 10 10 10c.934 0 1.833-.138 2.69-.377a2.5 2.5 0 0 0 4.8-.979c0-.563-.192-1.077-.506-1.494.057-.055.113-.111.168-.168.42.321.939.518 1.508.518a2.5 2.5 0 0 0 .963-4.807c.021-.074.038-.15.058-.225.105.013.21.032.319.032" fill="#44D860"/><path d="M143 41.75c-.16 0-.33-.02-.49-.05a2.52 2.52 0 0 1-.47-.14c-.15-.06-.29-.14-.431-.23-.13-.09-.259-.2-.38-.31-.109-.12-.219-.24-.309-.38s-.17-.28-.231-.43a2.619 2.619 0 0 1-.189-.96c0-.16.02-.33.05-.49.03-.16.08-.31.139-.47.061-.15.141-.29.231-.43.09-.13.2-.26.309-.38.121-.11.25-.22.38-.31.141-.09.281-.17.431-.23.149-.06.31-.11.47-.14.32-.07.65-.07.98 0 .159.03.32.08.47.14.149.06.29.14.43.23.13.09.259.2.38.31.11.12.22.25.31.38.09.14.17.28.23.43.06.16.11.31.14.47.029.16.05.33.05.49 0 .66-.271 1.31-.73 1.77-.121.11-.25.22-.38.31-.14.09-.281.17-.43.23a2.565 2.565 0 0 1-.96.19m20-1.25c-.66 0-1.3-.27-1.771-.73a3.802 3.802 0 0 1-.309-.38c-.09-.14-.17-.28-.231-.43a2.619 2.619 0 0 1-.189-.96c0-.66.27-1.3.729-1.77.121-.11.25-.22.38-.31.141-.09.281-.17.431-.23.149-.06.31-.11.47-.14.32-.07.66-.07.98 0 .159.03.32.08.47.14.149.06.29.14.43.23.13.09.259.2.38.31.459.47.73 1.11.73 1.77 0 .16-.021.33-.05.49-.03.16-.08.32-.14.47-.07.15-.14.29-.23.43-.09.13-.2.26-.31.38-.121.11-.25.22-.38.31-.14.09-.281.17-.43.23a2.565 2.565 0 0 1-.96.19" fill="#000"/></g></svg>