@matfsw/docusaurus-plantuml-plugin 1.0.1 → 1.0.2

package/CHANGELOG.md

@@ -7,6 +7,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.0.2]
+
+### Fixed
+
+- The zoom buttons and keyboard shortcuts now zoom about the viewport's top-left corner rather
+  than its centre. A diagram that fits its viewport is left-aligned, so the empty space is to
+  its right and below; zooming about the centre scaled that empty space and pushed the diagram
+  off the top and left edges, most visibly on a maximized diagram. Wheel zoom continues to
+  track the pointer.
+
 ## [1.0.1]
 
 ### Fixed
@@ -86,7 +96,8 @@ Initial release.
   opt-out.
 - Plugin option validation that rejects unknown keys and out-of-range values at build time.
 
-[Unreleased]: https://github.com/matf/docusaurus-plantuml-plugin/compare/v1.0.1...HEAD
+[Unreleased]: https://github.com/matf/docusaurus-plantuml-plugin/compare/v1.0.2...HEAD
+[1.0.2]: https://github.com/matf/docusaurus-plantuml-plugin/compare/v1.0.1...v1.0.2
 [1.0.1]: https://github.com/matf/docusaurus-plantuml-plugin/compare/v1.0.0...v1.0.1
 [1.0.0]: https://github.com/matf/docusaurus-plantuml-plugin/compare/v0.1.0...v1.0.0
 [0.1.0]: https://github.com/matf/docusaurus-plantuml-plugin/releases/tag/v0.1.0

package/README.md

@@ -277,6 +277,13 @@ The diagram viewport is focusable. Once focused:
 Keys with Ctrl, Cmd or Alt held are left to the browser, so shortcuts such as Ctrl + 0 keep
 working, and `Tab` always moves on — the diagram is never a keyboard trap.
 
+The toolbar buttons and the keyboard zoom about the **top-left corner** of the viewport, while
+the wheel zooms about the **pointer**. That difference is deliberate: a diagram rarely fills its
+viewport, and one that fits is left-aligned, so the empty space sits to its right and below.
+Zooming about the centre would scale that empty space and push the diagram off the top and left
+edges — most visibly when maximized. Anchoring at the top-left grows the diagram into the empty
+space instead and keeps it visible as long as possible.
+
 Scale is limited to 0.25×–8×, and the view resets to 100% whenever the diagram source or the
 site colour mode changes.
 

package/dist/theme/PlantUmlDiagram/useZoomPan.js

@@ -54,12 +54,19 @@ export function useZoomPan({ enabled, resetKey }) {
     const reset = useCallback(() => {
         apply(IDENTITY);
     }, [apply]);
-    /** Zooms about the middle of the viewport, which is what buttons and keys should do. */
+    /**
+     * Zooms about the viewport's top-left corner.
+     *
+     * Not the centre: a diagram rarely fills its viewport, and a diagram that fits is
+     * left-aligned, so the empty space sits to its right and below. Zooming about the centre
+     * scales that empty space too and pushes the diagram off the top and left edges — most
+     * visibly when maximized. Anchoring at the top-left leaves a left-aligned diagram exactly
+     * where it is and grows it into the empty space, keeping it visible as long as possible.
+     *
+     * Wheel zoom still tracks the pointer, which is what direct manipulation should do.
+     */
     const zoomByStep = useCallback((factor) => {
-        const viewport = viewportRef.current;
-        const focalX = (viewport?.clientWidth ?? 0) / 2;
-        const focalY = (viewport?.clientHeight ?? 0) / 2;
-        apply(zoomAbout(transformRef.current, factor, focalX, focalY));
+        apply(zoomAbout(transformRef.current, factor, 0, 0));
     }, [apply]);
     const zoomIn = useCallback(() => zoomByStep(SCALE_STEP), [zoomByStep]);
     const zoomOut = useCallback(() => zoomByStep(1 / SCALE_STEP), [zoomByStep]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matfsw/docusaurus-plantuml-plugin",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Render PlantUML diagrams in Docusaurus 3 entirely in the browser - no Java, no PlantUML server, no CDN.",
   "keywords": [
     "docusaurus",