`;
- // The track line background
stationsHtml += `
`;
+ // Draw highlighted route line if start and end are on the same line
+ let routeStartIndex = -1;
+ let routeEndIndex = -1;
+
+ if (selection[0] && selection[1] && Array.isArray(currentRoute) && currentRoute.length > 0) {
+ routeStartIndex = stops.indexOf(selection[0]);
+ routeEndIndex = stops.indexOf(selection[1]);
+
+ if (routeStartIndex !== -1 && routeEndIndex !== -1) {
+ const startPos = Math.min(routeStartIndex, routeEndIndex);
+ const endPos = Math.max(routeStartIndex, routeEndIndex);
+ const leftOffset = 35 + startPos * 70; // 70px is the width of each station node
+ const lineWidth = (endPos - startPos) * 70;
+
+ // Base yellow highlight line
+ stationsHtml += `
`;
+
+ // Animated arrows
+ const isForward = routeStartIndex < routeEndIndex;
+ const arrowCount = Math.max(1, Math.floor(lineWidth / 40));
+
+ stationsHtml += `
`;
+ for (let i = 0; i < arrowCount; i++) {
+ stationsHtml += ``;
+ }
+ stationsHtml += `
`;
+ }
+ }
+
let hasStations = false;
- stops.forEach(code => {
- if (code === '-') return; // Skip breakpoints in this view
+ stops.forEach((code, index) => {
+ if (code === '-') return;
hasStations = true;
const name = stationNameByCode[code] || code;
@@ -181,24 +209,28 @@
let nodeSize = isTransfer ? '20px' : '14px';
let nodeBorder = isTransfer ? '4px' : '3px';
let badgeHtml = '';
+ let nodeZIndex = 4;
if (isSelectedFrom) {
nodeColor = 'var(--success, #16a34a)';
nodeSize = '24px';
+ nodeZIndex = 5;
badgeHtml = `
起点
`;
} else if (isSelectedTo) {
nodeColor = 'var(--danger, #dc2626)';
nodeSize = '24px';
+ nodeZIndex = 5;
badgeHtml = `
终点
`;
} else if (inRoute) {
nodeColor = 'var(--primary, #facc15)';
+ nodeZIndex = 5;
if (!isTransfer) nodeSize = '18px';
else nodeSize = '24px';
}
let transferDotsHtml = '';
if (isTransfer) {
- transferDotsHtml = `
`;
+ transferDotsHtml = `
`;
transferLines.slice(0, 3).forEach(l => {
transferDotsHtml += `
`;
});
@@ -208,15 +240,14 @@
stationsHtml += `