Add initial viewport settings to configure map position and zoom on load

[Copilot]

Overview

This PR adds a new feature to the settings drawer that allows users to configure the initial viewport (x, y, zoom) for when a learning map is loaded. This addresses the issue where users want to control the default view of their maps.

Changes

Settings Drawer UI

Added a new "Initial Viewport" section in the settings drawer with:

• X Position: Controls horizontal pan position (number input)
• Y Position: Controls vertical pan position (number input)
• Zoom: Controls zoom level with range 0.1 to 10 (number input with step 0.1)
• "Use Current Viewport" button: Captures the current viewport state and populates the input fields

The button provides a convenient way to set the initial viewport by navigating to the desired view and clicking the button, rather than manually entering coordinates.

Implementation Details

Translation Support: Added new translation keys for both English and German languages to maintain full internationalization support.

Editor Integration:

• The EditorCanvas component now applies viewport settings from the store when it mounts
• Settings are persisted through the existing Zustand store with localStorage persistence
• Viewport values are automatically rounded (X/Y to integers, Zoom to 2 decimal places) for cleaner data

Viewer Integration:

• The LearningMap viewer component uses viewport from settings as a fallback when no explicit initialState prop is provided
• Maintains full backward compatibility with existing usage patterns
• Priority order: initialState prop → settings.viewport → defaults (0, 0, 1)

Screenshots

Settings drawer with new Initial Viewport section:

After clicking "Use Current Viewport" - values are automatically populated:

Map loads with the configured viewport applied:

Testing

• ✅ All existing tests pass
• ✅ TypeScript compilation succeeds with no errors
• ✅ Manual testing confirms viewport is correctly saved and applied
• ✅ "Use Current Viewport" button accurately captures current view
• ✅ Manual editing of viewport values works correctly
• ✅ Settings persist across page reloads

Files Modified

• packages/learningmap/src/translations.ts - Added i18n strings
• packages/learningmap/src/SettingsDrawer.tsx - Added viewport UI controls
• packages/learningmap/src/EditorCanvas.tsx - Apply viewport on mount
• packages/learningmap/src/LearningMap.tsx - Use viewport from settings as fallback

Closes #[issue-number]

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Add setting for initial viewport</issue_title>
<issue_description>In the settings drawer should be an option to set the x, y and zoom of the initial viewport, when the map is loaded. There should also be a button "Use current viewport" or something like this. To set the current values for the x,y and zoom.</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes #22

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
learningmap	Ready	Preview	Comment	Oct 14, 2025 6:04am