railmapgen
Add advanced export image options with node centering controls, internationalization, and improved state management
This PR implements advanced export image options that allow users to better control the size and positioning of exported images, with the ability to center the export around a selected node.
New Features
The download modal now includes an expandable "Advanced options" section with the following controls:
- Center node selection: Input field with autocomplete support to select any station or miscellaneous node as the center point for the export
- Distance controls: Left, right, top, and bottom distance inputs to control the viewport around the selected center node (automatically disabled when no node is selected, showing empty values when inactive)
- Aspect ratio selection: Predefined ratios including 16:9, 4:3, 3:2, 1:1, 2:3, 3:4, 9:16, plus "Current dimensions" as default
- Directional padding: Four separate padding controls (left, right, top, bottom) for precise boundary adjustment
- Position controls: Manual coordinate inputs for precise positioning of top-left, top-right, bottom-left, and bottom-right corners that automatically update based on advanced settings
- Canvas dimensions display: Real-time display of current export area width, height, and aspect ratio in a single organized row
- Aspect ratio display: Real-time display of current export area aspect ratio using least common denominator format (e.g., 16:9 instead of 1.78:1)
- Modal state management: Advanced properties are automatically reset when the modal reopens for consistent behavior
- Full internationalization: All interface text is properly localized using i18n with support for English, Japanese, Korean, Simplified Chinese, and Traditional Chinese
Implementation Details
- Uses Chakra UI Accordion component for clean collapsible interface
- Center node input field with HTML datalist for autocomplete functionality showing both station names and node IDs
- Position controls are initialized with current canvas dimensions and automatically update when advanced properties change
- The export process uses position control values to set the SVG viewBox for precise rendering
- Proper field interdependencies: distance controls are disabled until a center node is selected and show empty values when no node is selected to prevent calculation confusion
- Maintains backward compatibility with existing export functionality
-
Consolidated state management: All related state variables are grouped into objects (
distance,padding,fourCornersPosition) for better maintainability and atomic updates - Dynamic scale calculation: Scale options are recalculated based on current position controls for accurate browser capability detection
- Organized field layout: Distance and padding fields are separated into distinct visual groups for better user experience
- Improved aspect ratio calculation: Uses greatest common divisor (GCD) algorithm to display ratios in their simplest form
- Enhanced UI layout: Width, height, and ratio are displayed in a single row with equal spacing using HStack for better visual organization
User Interface
The advanced options are collapsed by default to maintain the simple export workflow for basic users, while providing power users with granular control over export positioning and sizing. All text elements are properly internationalized and will display in the user's selected language. The canvas information is now displayed in a clean, organized layout with width, height, and simplified aspect ratio in one row.
Before (collapsed):
Advanced options expanded:
Center node input with autocomplete:
Fixes #726.
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.
@copilot Please address the feedback provided in the latest code review.
- Padding should also have four directions instead of one ...
All feedback has been addressed in commit cc09dfe:
✅ Padding: Changed to four directions (left, right, top, bottom) instead of one ✅ Center node: Now an input field with autocomplete node options ✅ Position initialization: Controls are initialized with current canvas size and update automatically ✅ Export integration: Position controls now directly set the viewBox for export
The advanced export options now provide full control over the export area boundaries with proper reactive updates.
Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.
[!WARNING]
Firewall rules blocked me from connecting to one or more addresses (expand for details)
I tried to connect to the following addresses, but was blocked by firewall rules:
railmapgen.org
- Triggering command:
node /home/REDACTED/work/rmp/rmp/node_modules/.bin/vite --host(dns block)If you need me to access, download, or install something from one of these locations, you can either:
- Configure Actions setup steps to set up my environment, which run before the firewall is enabled
- Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)