@r74tech/docusaurus-plugin-panzoom 2.0.0

package/CHANGELOG.md

@@ -0,0 +1,29 @@
+# [2.0.0](https://github.com/r74tech/docusaurus-plugin-panzoom/compare/v1.0.1...v2.0.0) (2025-04-09)
+
+
+* feat!: migrate package from [@actinc](https://github.com/actinc) to [@r74tech](https://github.com/r74tech) namespace ([ed56447](https://github.com/r74tech/docusaurus-plugin-panzoom/commit/ed56447becf424c44f0d91badd6209d246b5f401))
+
+
+### BREAKING CHANGES
+
+* Package has been renamed from @actinc/docusaurus-plugin-panzoom to @r74tech/docusaurus-plugin-panzoom. This requires users to update their import statements and configuration.
+
+- Updated dependencies to support Docusaurus v3
+- Changed author information
+- Updated repository URLs
+- Added proper build scripts
+- Enhanced documentation
+
+## [1.0.1](https://github.com/act-org/docusaurus-plugin-panzoom/compare/v1.0.0...v1.0.1) (2023-03-02)
+
+
+### Bug Fixes
+
+* Add theme-mermaid class naming convention as a default selector ([9543aee](https://github.com/act-org/docusaurus-plugin-panzoom/commit/9543aee990c3d70daf7f7a231c7e5ec214c95334))
+
+# 1.0.0 (2023-03-02)
+
+
+### Features
+
+* Initial release of module ([7fe5711](https://github.com/act-org/docusaurus-plugin-panzoom/commit/7fe571118dc286791d608489b6eb59f1b8b27a86))

package/CONTRIBUTING.md

@@ -0,0 +1,110 @@
+# Contributing to docusaurus-plugin-panzoom
+
+I appreciate your consideration to contribute to this project! This document is a guide to help make your contribution easier and more effective.
+
+## Getting Started
+
+### Prerequisites
+
+- [Node.js](https://nodejs.org) (v20 or later recommended)
+
+### Installation
+
+1. Clone the repository
+
+    ```bash
+    git clone https://github.com/r74tech/docusaurus-plugin-panzoom.git
+    ```
+
+2. Move to the directory and install dependencies
+
+    ```bash
+    cd docusaurus-plugin-panzoom
+    npm install
+    ```
+
+### Development
+
+The main scripts used during development are:
+
+- `npm run build`: Builds the TypeScript code.
+- `npm run prepublishOnly`: Runs the build script before publishing.
+
+## How to Contribute
+
+### Reporting Issues
+
+If you find a bug or have a feature request, please open an issue on GitHub.
+
+1. Check [the Issue Tracker](https://github.com/r74tech/docusaurus-plugin-panzoom/issues) for existing issues.
+2. When requesting a new issue or feature, please provide as much detail as possible.
+
+### Development
+
+1. Check [the Issue Tracker](https://github.com/r74tech/docusaurus-plugin-panzoom/issues), make sure if there is anything relevant to the problem you are trying to solve.
+2. Keep the repository you did folk up to date.
+
+   ```bash
+    git fetch upstream
+    git rebase upstream/main
+   ```
+
+3. Create a new branch.
+
+   ```bash
+   git switch -c feature/your-feature-name
+   ```
+
+4. Make changes to the code and run tests to make sure everything is working properly.
+5. Write a clear commit message following the Conventional Commits style.
+
+### Commit Messages
+
+- Commit messages should concisely describe the changes you made.
+- Commits should be split into appropriate chunks, and we recommend using [the Conventional Commits](https://www.conventionalcommits.org/) style. Below are the available Conventional Commits types:
+  - `feat`: a commit that adds new functionality (triggers a MINOR version bump).
+  - `fix`: a commit that fixes a bug (triggers a PATCH version bump).
+  - `docs`: a commit that adds or improves documentation.
+  - `style`: changes that do not affect the meaning of the code.
+  - `refactor`: a code change that neither fixes a bug nor adds a feature.
+  - `perf`: a commit that improves performance, without functional changes.
+  - `test`: adding missing tests or correcting existing tests.
+  - `build`: changes that affect the build system or external dependencies.
+  - `ci`: changes to our CI configuration files and scripts.
+  - `chore`: other changes that don't modify src or test files.
+  - `revert`: reverts a previous commit.
+
+> [!NOTE]
+> If there is a single commit in the pull request, the commit message must be the same as a pull request title. Because the merge strategy in this repository is "Squash and merge". When you "Squash and merge" a pull request on a branch that has only one commit, the default commit message will be the commit message in that branch.
+>
+> cf. [About pull request merges - GitHub Docs](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/incorporating-changes-from-a-pull-request/about-pull-request-merges#merge-message-for-a-squash-merge)
+
+### Breaking Changes
+
+For commits that introduce breaking changes, add an exclamation mark after the type and include a "BREAKING CHANGE:" section in the commit body:
+
+```
+feat!: completely revamp the API
+
+BREAKING CHANGE: The new API is not compatible with previous versions
+```
+
+### Pull Requests
+
+1. Write the title of pull request in the [the Conventional Commits](https://www.conventionalcommits.org/) style.
+2. Create a pull request and include the following information:
+   - Description of the change
+   - Purpose of the change
+   - Relevant issue number (if any)
+
+## Automated Releases
+
+This project uses [semantic-release](https://github.com/semantic-release/semantic-release) for automated version management and package publishing. The release process is triggered automatically when changes are merged into the main branch.
+
+- `fix:` commits trigger a PATCH version bump (e.g., 1.0.0 → 1.0.1)
+- `feat:` commits trigger a MINOR version bump (e.g., 1.0.0 → 1.1.0)
+- Commits with `BREAKING CHANGE:` trigger a MAJOR version bump (e.g., 1.0.0 → 2.0.0)
+
+## License
+
+This project is based on [MIT License](/LICENSE).

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) ACT, Inc. and its affiliates.
+Copyright (c) 2025 r74tech.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,60 @@
+# docusaurus-plugin-panzoom
+
+This plugin adds the ability to pan and zoom images and SVG images inside of a docusaurus website.  This is useful for embedding diagrams or
+complex mermaid.js renders around models and object schemas.  The normal theme doesn't scale tremendously well in a browser so some augmentation
+for complex diagrams is necessary.
+
+This implements the excellent [@panzoom/panzoom](https://www.npmjs.com/package/@panzoom/panzoom) plugin 
+
+## Installation
+
+```bash
+npm install @r74tech/docusaurus-plugin-panzoom
+```
+
+```javascript
+// In docusaurus.config.js
+// ...
+plugins: ['@r74tech/docusaurus-plugin-panzoom'],
+// or
+plugins: [['@r74tech/docusaurus-plugin-panzoom', {} /* options */]],
+```
+
+## Configuration
+
+The plugin accepts the following configuration options:
+
+```javascript
+// In docusaurus.config.js
+// ...
+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
+  }
+}
+```
+
+> [!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.
+
+## License
+
+MIT, see [LICENSE](LICENSE) for more details.

package/dist/PanZoom.d.ts

@@ -0,0 +1,6 @@
+import type { ClientModule } from '@docusaurus/types';
+/**
+ * Client module implementation.  Wait a bit before trying this, some components like mermaid take a second to process / render
+ */
+declare const ZoomModule: ClientModule;
+export default ZoomModule;

package/dist/PanZoom.js

@@ -0,0 +1,55 @@
+"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, ...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, 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;

package/dist/PanZoomPlugin.d.ts

@@ -0,0 +1,15 @@
+import type { PluginModule, ThemeConfigValidationContext } from '@docusaurus/types';
+import { PanZoomPluginOptions } from './PanzoomPluginOptions';
+/**
+ * Main module for the PanZoom plugin
+ * @param context
+ * @param options
+ * @returns
+ */
+export declare const PanZoomPlugin: PluginModule;
+/**
+ * Add a validation for the theme configuration
+ * @param data
+ * @returns
+ */
+export declare function validatedThemeConfig(data: ThemeConfigValidationContext<PanZoomPluginOptions>): PanZoomPluginOptions;

package/dist/PanZoomPlugin.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validatedThemeConfig = exports.PanZoomPlugin = void 0;
+const utils_validation_1 = require("@docusaurus/utils-validation");
+const path_1 = require("path");
+/**
+ * Main module for the PanZoom plugin
+ * @param context
+ * @param options
+ * @returns
+ */
+const PanZoomPlugin = (context, options) => {
+    return {
+        name: "docusaurus-plugin-panzoom",
+        getClientModules() {
+            return [
+                (0, path_1.resolve)(__dirname, "./PanZoom")
+            ];
+        }
+    };
+};
+exports.PanZoomPlugin = PanZoomPlugin;
+/**
+ * Theme validation rules for this plugin
+ */
+const panZoomValidator = utils_validation_1.Joi.object({
+    zoom: utils_validation_1.Joi.object({
+        selectors: utils_validation_1.Joi.array(),
+        wrap: utils_validation_1.Joi.boolean(),
+        timeout: utils_validation_1.Joi.number(),
+    })
+});
+/**
+ * Add a validation for the theme configuration
+ * @param data
+ * @returns
+ */
+function validatedThemeConfig(data) {
+    const { themeConfig, validate } = data;
+    const validated = validate(panZoomValidator, themeConfig);
+    return validated;
+}
+exports.validatedThemeConfig = validatedThemeConfig;

package/dist/PanzoomPluginOptions.d.ts

@@ -0,0 +1,24 @@
+import type { PanzoomOptions } from '@panzoom/panzoom';
+export type PanZoomPluginOptions = PanzoomOptions & {
+    /**
+     * A list of selectors to look for elements to enable pan and zoom
+     *
+     * The default value is ['div.mermaid[data-processed="true"]', '.drawio']
+     */
+    selectors?: string[];
+    /**
+     * 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?: boolean;
+    /**
+     * 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.
+     *
+     * The default is 1000
+     */
+    timeout?: number;
+};

package/dist/PanzoomPluginOptions.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { PanZoomPlugin as default, validatedThemeConfig } from './PanZoomPlugin';
+export type { PanZoomPluginOptions } from './PanzoomPluginOptions';

package/dist/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validatedThemeConfig = exports.default = void 0;
+var PanZoomPlugin_1 = require("./PanZoomPlugin");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return PanZoomPlugin_1.PanZoomPlugin; } });
+Object.defineProperty(exports, "validatedThemeConfig", { enumerable: true, get: function () { return PanZoomPlugin_1.validatedThemeConfig; } });

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@r74tech/docusaurus-plugin-panzoom",
+  "version": "2.0.0",
+  "description": "A plugin to enable the panzoom component on SVG and other elements",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "keywords": [
+    "Docusaurus",
+    "Plugin",
+    "PanZoom"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "r74tech",
+  "license": "MIT",
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@docusaurus/utils-validation": "^3.7.0",
+    "@panzoom/panzoom": "^4.6.0"
+  },
+  "devDependencies": {
+    "@docusaurus/types": "^3.7.0",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/commit-analyzer": "^9.0.2",
+    "@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",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "semantic-release": "^24.2.3",
+    "typescript": "^4.9.5"
+  },
+  "release": {
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      [
+        "@semantic-release/changelog",
+        {
+          "changelogFile": "CHANGELOG.md",
+          "changeLogTitle": "# Changelog"
+        }
+      ],
+      "@semantic-release/npm",
+      "@semantic-release/github",
+      [
+        "@semantic-release/git",
+        {
+          "assets": [
+            "CHANGELOG.md",
+            "package.json",
+            "package-lock.json"
+          ],
+          "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
+        }
+      ]
+    ],
+    "repositoryUrl": "git@github.com:r74tech/docusaurus-plugin-panzoom.git",
+    "branches": [
+      {
+        "name": "main",
+        "prerelease": false
+      },
+      {
+        "name": "next",
+        "prerelease": true
+      }
+    ],
+    "initialVersion": "2.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/r74tech/docusaurus-plugin-panzoom.git"
+  },
+  "sideEffects": false
+}