#497 Add glow effect for selected

[Copilot]

Implements a dynamic fluorescent yellow glow effect for all selected elements (stations, misc nodes, and line styles) using SVG filter animations, addressing the user request for visual feedback without modifying individual element components.

Problem

Users needed a visual indicator to clearly identify selected elements on the canvas. The requirement was to implement a dynamic glow effect (外发光效果) using SVG animation functionality while avoiding modifications to each individual element implementation.

Solution

Added an animated SVG filter that applies a fluorescent yellow pulsating glow effect to selected elements:

Technical Implementation

• SVG Filter Definition: Created #selected-glow filter with animated Gaussian blur
• Dynamic Application: Filter is conditionally applied to all components (pre, main, post) of selected elements based on Redux state
• Universal Compatibility: Works automatically for all element types without individual modifications

Key Changes

1. SVG Filter (svg-wrapper.tsx): Added animated fluorescent yellow glow filter with fast 0.5-second pulsating cycle
2. Conditional Rendering (svg-layer.tsx): Wrap all selected element components (pre, main, post) with glow filter group
3. State Integration (svg-canvas-graph.tsx): Pass selection state to SVG layer

The filter uses feColorMatrix to create fluorescent yellow color and feGaussianBlur with <animate> to create a smooth fast pulsating effect from 1px to 3px blur radius, providing clear visual feedback with crisp edges for element selection.

Visual Result

The screenshot shows a station with the bright fluorescent yellow animated glow effect applied, demonstrating the smooth visual feedback for selected elements.

Benefits

• Zero breaking changes: Preserves all existing functionality
• Performance optimized: Filter only applies to selected elements
• Maintainable: Centralized effect definition
• Universal: Works for stations, misc nodes, and line segments automatically (including pre and post components)
• Professional appearance: Smooth animated fluorescent yellow glow with proper layering and clear edges
• Fast feedback: Quick 0.5s animation cycle for responsive visual indication

---

✨ 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]

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)

[langonginc]

• The horizontal and vertical lines will be disappeared when selected.
• Item in black will not be added with yellow effect.

[thekingofcity]

• The horizontal and vertical lines will be disappeared when selected.
• Item in black will not be added with yellow effect.

Both were fixed :)

[Copilot]

Pull request overview

This PR implements a fluorescent yellow glow effect for selected elements (stations, misc nodes, and line styles) to provide visual feedback during selection. The implementation uses a centralized SVG filter approach that applies conditionally to selected elements without modifying individual component implementations.

Changes:

• Added SVG filter definition for selection glow effect with yellow color and blur
• Modified svg-layer.tsx to wrap all selected element components (pre, main, post) with the glow filter
• Updated svg-canvas-graph.tsx to pass selection state to SvgLayer component
• Added filter removal logic in download.ts to prevent glow effect in exported files

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

File	Description
src/components/svg-wrapper.tsx	Added selected-glow SVG filter definition with yellow color matrix and blur effects
src/components/svg-layer.tsx	Wrapped all element components (lines, stations, misc-nodes) with conditional glow filter based on selection state; updated memoization to include selected prop
src/components/svg-canvas-graph.tsx	Passed selected Set to SvgLayer component
src/util/download.ts	Added logic to remove glow filter attribute from elements during export