Core: Zoom tool reimplementation #33375

ghengeveld · 2025-12-16T14:41:58Z

What I did

This is an almost complete rewrite of the Zoom tool. Notable changes:

Tool is moved from the left-hand side of the toolbar to the right-hand side.
The three toolbar items have been replaced with a single button, showing the current zoom percentage.
Zooming now uses a set of predefined levels rather than a zoom factor (multiplier), for more predictability and consistency with other software (e.g. DevTools).
Keyboard shortcuts ⌥+, ⌥- and ⌥0 have been added for quick access.
Custom zoom percentages are now supported, even outside of the usual 25-400% range.
The Viewports feature has been updated to play well with zooming, so that the canvas scales along with the zoom level.

Screen.Recording.2025-12-16.at.11.20.15.mov

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

Checklist for Maintainers

When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts
Make sure this PR contains one of the labels below:
Available labels
- bug: Internal changes that fixes incorrect behavior.
- maintenance: User-facing maintenance tasks.
- dependencies: Upgrading (sometimes downgrading) dependencies.
- build: Internal-facing build tooling & test updates. Will not show up in release changelog.
- cleanup: Minor cleanup style change. Will not show up in release changelog.
- documentation: Documentation only changes. Will not show up in release changelog.
- feature request: Introducing a new feature.
- BREAKING CHANGE: Changes that break compatibility in some way with current major version.
- other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

New Features
- Keyboard shortcut badges now display in a styled format throughout the UI.
- Numeric input fields support arrow keys to increment/decrement values while preserving units.
- Zoom tool enhanced with keyboard shortcuts, preset zoom levels, and improved controls.
Improvements
- Improved viewport and iframe scaling behavior for consistent sizing.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

…ions - Updated ZoomIFrame to correctly apply scaling transformations. - Enhanced ZoomProvider to manage zoom levels with predefined constants. - Refactored Zoom component to utilize ActionList for zoom controls and added keyboard shortcuts for zoom actions. - Improved ZoomWrapper to dynamically adjust zoom levels based on user interactions.

… component

nx-cloud · 2025-12-16T14:42:41Z

View your CI Pipeline Execution ↗ for commit 955f23b

Command	Status	Duration	Result
`nx run-many -t compile,check,knip,test,pretty-d...`	❌ Failed	17m 45s	View ↗

☁️ Nx Cloud last updated this comment at 2025-12-16 15:01:57 UTC

coderabbitai · 2025-12-16T14:46:58Z

📝 Walkthrough

Walkthrough

This pull request refactors keyboard shortcut handling by extracting the Shortcut component from Menu.tsx into a dedicated module, replaces the SizeInput component with a new NumericInput implementation, introduces Zoom storybook stories, and reorganizes the Zoom tool with context-based state management and enhanced UI. Additionally, iframe scaling logic is adjusted in ZoomIFrame and Viewport, and various import paths are updated accordingly.

Changes

Cohort / File(s)	Change Summary
Shortcut component extraction and reorganization `code/core/src/manager/components/Shortcut.tsx`, `code/core/src/manager/container/Menu.tsx`, `code/core/src/manager/container/Menu.stories.tsx`, `code/core/src/manager/container/Preview.tsx`, `code/core/src/manager/components/sidebar/ContextMenu.tsx`, `code/core/src/manager/components/preview/tools/share.tsx`	New Shortcut component exported from dedicated module; previously defined in Menu.tsx. Import paths updated across ContextMenu, share tool, and Menu to use new location. No logic changes to the component itself.
NumericInput replacement for SizeInput `code/core/src/manager/components/preview/NumericInput.tsx`, `code/core/src/manager/components/preview/NumericInput.stories.tsx`, `code/core/src/manager/components/preview/SizeInput.tsx`	New NumericInput component with forwardRef, ArrowUp/ArrowDown increment/decrement support, unit preservation, and selection control; replaces removed SizeInput with similar functionality. Storybook stories added for NumericInput with unit and baseUnit scenarios.
Zoom tool refactor with context and UI enhancements `code/core/src/manager/components/preview/tools/zoom.tsx`, `code/core/src/manager/components/preview/tools/zoom.stories.tsx`	Zoom component reworked to accept controlled state (value, zoomIn, zoomOut, zoomTo) instead of imperative callbacks; new ZoomContext and ZoomWrapper introduced; keyboard shortcut integration via useStorybookApi; new ZoomButton and ZoomInput styled utilities; PopoverProvider-based UI replaces inline buttons. Storybook stories added with Default, ZoomIn, ZoomOut, Undo, MaxZoom, and MinZoom variants.
Viewport and iframe scaling adjustments `code/core/src/manager/components/preview/Viewport.tsx`, `code/core/src/manager/components/preview/ZoomIFrame.tsx`, `code/.storybook/bench/bench.stories.tsx`	Viewport introduces scale-aware transform wrapper, frameStyles computation, and drag-to-resize with scale division; new ScrollEdge components and enhanced drag handlers with data-value attributes. ZoomIFrame adjusts width/height/transform calculations from scale * 100% to (1 / scale) * 100% and updates transform to use scale(scale) directly. Bench stories updates iframe to fixed positioning.
Toolbar tool reorganization `code/core/src/manager/container/Preview.tsx`	zoomTool moved from defaultTools to defaultToolsExtra; defaultTools now contains menuTool and remountTool only.
Import path updates `code/core/src/components/components/ActionList/ActionList.stories.tsx`	Shortcut import path updated from '../../../manager/container/Menu' to '../../../manager/components/Shortcut'.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45–75 minutes

Viewport.tsx: Scale-aware transform wrapper, frameStyles computation, drag-to-resize with scale division, ScrollEdge components, and drag handler enhancements with scroll-into-view behavior require careful review of scale calculations and drag event flow.
zoom.tsx: Context-based state management, new ZoomWrapper structure, keyboard shortcut integration via useStorybookApi, and PopoverProvider-based UI need verification for proper state synchronization and callback wiring.
NumericInput.tsx: New imperative ref API (select method), input value synchronization with external value, ArrowUp/ArrowDown keyboard handling, and unit suffix preservation require thorough logic verification.
ZoomIFrame.tsx: Scale calculation inversions (scale * 100% → (1 / scale) * 100%) and transform adjustments need verification against expected layout behavior.

Possibly related PRs

Core: Add "open in editor" feature #32452: Centralizes Shortcut component extraction and import updates across multiple files (Menu, ContextMenu, share tool), directly matching this PR's Shortcut refactoring work.
Core: Significantly improve Storybook's own accessibility #32458: Large accessibility refactor that modifies the same Shortcut, Zoom, Viewport, and NumericInput component code, suggesting overlapping refactoring efforts.
Onboarding: Guided tour checklist #32795: Refactors Menu.tsx and useMenu hook, affecting the same file where Shortcut was previously extracted from in this PR.

✨ Finishing touches

📝 Generate docstrings

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (5)

code/core/src/manager/components/preview/Viewport.tsx (1)
417-429: Minor: data-value initialization may show units for non-px dimensions.

The .replace('px', '') only strips px. For other units like % or vh, the unit would still appear in the tooltip. Consider using parseNumber(width)?.number for consistency.
         <DragHandle
           ref={dragRefX}
           isDefault={isDefault}
           data-side="right"
-          data-value={width.replace('px', '')}
+          data-value={parseNumber(width)?.number ?? width}
         />
         <DragHandle
           ref={dragRefY}
           isDefault={isDefault}
           data-side="bottom"
-          data-value={height.replace('px', '')}
+          data-value={parseNumber(height)?.number ?? height}
         />
code/core/src/manager/components/preview/tools/zoom.stories.tsx (1)
27-28: Consider using ZOOM_LEVELS for consistent behavior.

The story's zoomIn/zoomOut use a fixed 0.5 increment, while the actual implementation uses predefined ZOOM_LEVELS. This divergence may cause stories to behave differently than production. For more realistic testing, consider importing and using the same zoom level logic.
+import { Zoom, ZOOM_LEVELS } from './zoom';
-import { Zoom } from './zoom';
...
-          zoomIn: () => setValue(value + 0.5),
-          zoomOut: () => setValue(value - 0.5),
+          zoomIn: () => {
+            const higher = ZOOM_LEVELS.find((level) => level > value);
+            if (higher) setValue(higher);
+          },
+          zoomOut: () => {
+            const lower = [...ZOOM_LEVELS].reverse().find((level) => level < value);
+            if (lower) setValue(lower);
+          },
Note: This would require exporting ZOOM_LEVELS from zoom.tsx.
code/core/src/manager/components/preview/NumericInput.tsx (2)
71-71: Escape special regex characters in baseUnit.

If baseUnit contains regex metacharacters (e.g., %, ., +), the pattern may not match correctly. Consider escaping special characters.
-    const baseUnitRegex = useMemo(() => baseUnit && new RegExp(`${baseUnit}$`), [baseUnit]);
+    const baseUnitRegex = useMemo(
+      () => baseUnit && new RegExp(`${baseUnit.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}$`),
+      [baseUnit]
+    );
77-77: Type mismatch in useImperativeHandle.

The forwardRef declares { select: () => void } but exposes the full HTMLInputElement. While this works because HTMLInputElement has a select() method, it's semantically incorrect and exposes more than intended.
-    useImperativeHandle(forwardedRef, () => inputRef.current!);
+    useImperativeHandle(forwardedRef, () => ({
+      select: () => inputRef.current?.select(),
+    }));
code/core/src/manager/components/preview/tools/zoom.tsx (1)
182-201: Shortcuts re-registered on every zoom level change.

The useEffect dependencies include zoomIn, zoomOut, and zoomTo, which are recreated on each value change. This causes setAddonShortcut to be called repeatedly. Consider stabilizing the callbacks using refs or extracting state access to avoid re-registration on every zoom level change.
+  const valueRef = useRef(value);
+  valueRef.current = value;
+
+  const stableZoomIn = useCallback(() => {
+    const higherZoomLevel = ZOOM_LEVELS.find((level) => level > valueRef.current);
+    if (higherZoomLevel) set(higherZoomLevel);
+  }, [set]);
+
+  const stableZoomOut = useCallback(() => {
+    const lowerZoomLevel = ZOOM_LEVELS.findLast((level) => level < valueRef.current);
+    if (lowerZoomLevel) set(lowerZoomLevel);
+  }, [set]);
+
+  const stableZoomTo = useCallback((v: number) => set(v), [set]);
+
   useEffect(() => {
     api.setAddonShortcut('zoom', {
       label: 'Zoom to 100%',
       defaultShortcut: ['alt', '0'],
       actionName: 'zoomReset',
-      action: () => zoomTo(1),
+      action: () => stableZoomTo(1),
     });
     // ... similar for other shortcuts
-  }, [api, zoomIn, zoomOut, zoomTo]);
+  }, [api, stableZoomIn, stableZoomOut, stableZoomTo]);

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 879b3c2 and 955f23b.

📒 Files selected for processing (15)

code/.storybook/bench/bench.stories.tsx (1 hunks)
code/core/src/components/components/ActionList/ActionList.stories.tsx (1 hunks)
code/core/src/components/components/Zoom/ZoomIFrame.tsx (2 hunks)
code/core/src/manager/components/Shortcut.tsx (1 hunks)
code/core/src/manager/components/preview/NumericInput.stories.tsx (1 hunks)
code/core/src/manager/components/preview/NumericInput.tsx (1 hunks)
code/core/src/manager/components/preview/SizeInput.tsx (0 hunks)
code/core/src/manager/components/preview/Viewport.tsx (9 hunks)
code/core/src/manager/components/preview/tools/share.tsx (1 hunks)
code/core/src/manager/components/preview/tools/zoom.stories.tsx (1 hunks)
code/core/src/manager/components/preview/tools/zoom.tsx (2 hunks)
code/core/src/manager/components/sidebar/ContextMenu.tsx (1 hunks)
code/core/src/manager/container/Menu.stories.tsx (1 hunks)
code/core/src/manager/container/Menu.tsx (1 hunks)
code/core/src/manager/container/Preview.tsx (1 hunks)

💤 Files with no reviewable changes (1)

code/core/src/manager/components/preview/SizeInput.tsx

🧰 Additional context used

📓 Path-based instructions (5)

**/*.{js,jsx,json,html,ts,tsx,mjs}