Add advanced export image options with node centering controls, internationalization, and improved state management

[Copilot]

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.

[thekingofcity]

@copilot Please address the feedback provided in the latest code review.

• Padding should also have four directions instead of one
• The center node should be an input field with nodes as an option
• top left, top right, bottom left, bottom right positions should be initialized with the current size and later be updated whenever the advanced properties are changed
• top left, top right, bottom left, bottom right positions should be used in the final export by setting the viewbox of the cloned svg element

[Copilot]

@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.

[Copilot]

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)

[thekingofcity]

@copilot Displaying proportions using the least common denominator

[Copilot]

Implemented aspect ratio display using least common denominator. The ratio is now calculated using the greatest common divisor (GCD) algorithm and displayed in simplified form (e.g., 16:9 instead of 1.78:1). Commit 2d65601

[thekingofcity]

@copilot Translate and layout width/height/ration on one row with each taking 1/3 space

[Copilot]

Reorganized the layout to display width, height, and ratio in one row with equal spacing (1/3 each) using HStack. Added i18n translations for "Width", "Height", and "Ratio" labels in all 5 supported languages (English, Japanese, Korean, Simplified Chinese, Traditional Chinese). Commit 2d65601