Skip to content

Improve RMC mobile header layout to preserve right-side controls and Export Video action #1583

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
langonginc merged 7 commits into from
Oct 7, 2026
Merged

Improve RMC mobile header layout to preserve right-side controls and Export Video action #1583

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
865fef5
Initial plan
Copilot Oct 7, 2026
8ddc6bb
fix: improve timeline header mobile layout
Copilot Oct 7, 2026
c96ae8e
Apply remaining changes
Copilot Oct 7, 2026
0ab72e0
fix mobile device cannot move cards
langonginc Oct 7, 2026
1a78c7a
resize track card
langonginc Oct 7, 2026
1382e67
fix line info modal
langonginc Oct 7, 2026
7caf078
fix home page
langonginc Oct 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 0 additions & 42 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

34 changes: 34 additions & 0 deletions src/components/page-header/line-info-modal.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -381,6 +381,40 @@ describe('line information and export panels', () => {
expect(store.getState().param.past).toHaveLength(0);
});

it('drags interval handle via native mobile touch events', () => {
const store = setup();
const graph = store.getState().param.present.graph;
render(
<RmgThemeProvider>
<LineIntervalModal
graph={graph}
line={graph.attributes.lineDefinitions![0]}
onClose={vi.fn()}
onApply={vi.fn()}
/>
</RmgThemeProvider>,
{ store }
);
const handle = screen.getByRole('slider', { name: 'Start' });
vi.spyOn(handle.closest('svg')!, 'getBoundingClientRect').mockReturnValue({
left: 0,
top: 0,
width: 480,
height: 210,
right: 480,
bottom: 210,
x: 0,
y: 0,
toJSON: () => ({}),
});
const touch1 = { identifier: 42, clientX: 40, clientY: 90 };
fireEvent.touchStart(handle, { touches: [touch1], changedTouches: [touch1] });
const touch2 = { identifier: 42, clientX: 141, clientY: 90 };
fireEvent.touchMove(window, { touches: [touch2], changedTouches: [touch2] });
fireEvent.touchEnd(window, { touches: [], changedTouches: [touch2] });
expect(handle).toHaveAttribute('aria-valuenow', '1');
});

it('switches to the complementary loop arc for the same endpoint pair', () => {
const store = setup([
['A', 'B'],
Expand Down
168 changes: 152 additions & 16 deletions src/components/page-header/line-interval-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,14 +76,103 @@ export const LineIntervalModal = ({
}
}, [graph, line.id, route, start, end]);

const move = (handle: 'start' | 'end', index: number) => {
if (!route) return;
const stateRef = React.useRef({ start, end, last, route, width });
stateRef.current = { start, end, last, route, width };
const startRef = React.useRef<SVGGElement | null>(null);
const endRef = React.useRef<SVGGElement | null>(null);

const move = React.useCallback((handle: 'start' | 'end', index: number) => {
const { start: curStart, end: curEnd, last: curLast, route: curRoute } = stateRef.current;
if (!curRoute) return;
const nextStart = handle === 'start' ? Math.max(0, Math.min(index, curEnd - 1)) : curStart;
const nextEnd = handle === 'end' ? Math.min(curLast, Math.max(index, curStart + 1)) : curEnd;
if (nextStart === curStart && nextEnd === curEnd) return;
setSelection({
key: route.key,
start: handle === 'start' ? Math.max(0, Math.min(index, end - 1)) : start,
end: handle === 'end' ? Math.min(last, Math.max(index, start + 1)) : end,
key: curRoute.key,
start: nextStart,
end: nextEnd,
});
};
}, []);

const updateHandle = React.useCallback(
(handle: 'start' | 'end', clientX: number) => {
if (!svgRef.current) return;
const rect = svgRef.current.getBoundingClientRect();
if (!rect.width) return;
const svgX = ((clientX - rect.left) * stateRef.current.width) / rect.width;
const index = Math.round((svgX - PADDING) / GAP);
move(handle, index);
},
[move]
);

const handleTouchStart = React.useCallback(
(kind: 'start' | 'end') => (event: React.TouchEvent | TouchEvent) => {
const touches = 'touches' in event ? event.touches : undefined;
if (touches && touches.length !== 1) return;
if (typeof event.preventDefault === 'function') event.preventDefault();
if (typeof event.stopPropagation === 'function') event.stopPropagation();
const clientX = touches ? touches[0].clientX : (event as unknown as { clientX: number }).clientX;
const touchId = touches ? touches[0].identifier : 0;
drag.current = { handle: kind, pointerId: touchId };
updateHandle(kind, clientX);

let rafId: number | null = null;
let lastClientX: number | null = null;

const onTouchMove = (moveEvent: TouchEvent) => {
const touch = Array.from(moveEvent.touches).find(t => t.identifier === touchId);
if (!touch) return;
moveEvent.preventDefault();
moveEvent.stopPropagation();
lastClientX = touch.clientX;
if (rafId === null) {
rafId = requestAnimationFrame(() => {
rafId = null;
if (lastClientX !== null && drag.current?.handle === kind) {
updateHandle(kind, lastClientX);
}
});
}
};

const onTouchEnd = (endEvent: TouchEvent) => {
const touch = Array.from(endEvent.changedTouches).find(t => t.identifier === touchId);
if (!touch) return;
if (rafId !== null) {
cancelAnimationFrame(rafId);
rafId = null;
}
if (lastClientX !== null) {
updateHandle(kind, lastClientX);
}
drag.current = undefined;
window.removeEventListener('touchmove', onTouchMove);
window.removeEventListener('touchend', onTouchEnd);
window.removeEventListener('touchcancel', onTouchEnd);
};

window.addEventListener('touchmove', onTouchMove, { passive: false });
window.addEventListener('touchend', onTouchEnd);
window.addEventListener('touchcancel', onTouchEnd);
},
[updateHandle]
);

React.useEffect(() => {
const startEl = startRef.current;
const endEl = endRef.current;
if (!startEl && !endEl) return;
const startListener = handleTouchStart('start') as unknown as EventListener;
const endListener = handleTouchStart('end') as unknown as EventListener;
startEl?.addEventListener('touchstart', startListener, { passive: false });
endEl?.addEventListener('touchstart', endListener, { passive: false });
return () => {
startEl?.removeEventListener('touchstart', startListener);
endEl?.removeEventListener('touchstart', endListener);
};
}, [handleTouchStart, route?.key]);

const swapArc = () => {
if (!route || !isLoop) return;
const a = route.stationIds[start],
Expand All @@ -106,8 +195,11 @@ export const LineIntervalModal = ({
setRouteIndex(index);
setSelection({ key: options[index].key, start: 0, end: options[index].stationIds.indexOf(b) });
};

const handleRing = (kind: 'start' | 'end', index: number, colour: string) => (
<g
key={kind}
ref={kind === 'start' ? startRef : endRef}
role="slider"
tabIndex={0}
aria-label={t(`header.lineInfo.${kind === 'start' ? 'rangeStart' : 'rangeEnd'}`)}
Expand All @@ -117,25 +209,68 @@ export const LineIntervalModal = ({
aria-valuetext={route ? getStationLabel(graph, route.stationIds[index]) : ''}
transform={`translate(${PADDING + index * GAP},${INTERVAL_ROUTE_Y})`}
style={{ cursor: 'ew-resize', touchAction: 'none' }}
onTouchStart={handleTouchStart(kind)}
onPointerDown={event => {
if (event.button !== 0 || event.isPrimary === false) return;
if (drag.current) return;
event.preventDefault();
drag.current = { handle: kind, pointerId: event.pointerId };
event.currentTarget.setPointerCapture?.(event.pointerId);
try {
event.currentTarget.setPointerCapture?.(event.pointerId);
} catch {
// SVG pointer capture might fail in some WebKit browsers
}
updateHandle(kind, event.clientX);

let rafId: number | null = null;
let lastClientX: number | null = null;

const onPointerMove = (moveEvent: PointerEvent) => {
if (drag.current?.handle !== kind || drag.current.pointerId !== moveEvent.pointerId) return;
lastClientX = moveEvent.clientX;
if (rafId === null) {
rafId = requestAnimationFrame(() => {
rafId = null;
if (lastClientX !== null && drag.current?.handle === kind) {
updateHandle(kind, lastClientX);
}
});
}
};
const onPointerUp = (upEvent: PointerEvent) => {
if (upEvent.pointerId !== event.pointerId) return;
if (rafId !== null) {
cancelAnimationFrame(rafId);
rafId = null;
}
if (lastClientX !== null) {
updateHandle(kind, lastClientX);
}
drag.current = undefined;
window.removeEventListener('pointermove', onPointerMove);
window.removeEventListener('pointerup', onPointerUp);
window.removeEventListener('pointercancel', onPointerUp);
};
window.addEventListener('pointermove', onPointerMove);
window.addEventListener('pointerup', onPointerUp);
window.addEventListener('pointercancel', onPointerUp);
}}
onPointerMove={event => {
if (drag.current?.handle !== kind || drag.current.pointerId !== event.pointerId || !svgRef.current)
return;
const rect = svgRef.current.getBoundingClientRect();
if (rect.width)
move(kind, Math.round((((event.clientX - rect.left) * width) / rect.width - PADDING) / GAP));
if (drag.current?.handle !== kind || drag.current.pointerId !== event.pointerId) return;
updateHandle(kind, event.clientX);
}}
onPointerUp={event => {
drag.current = undefined;
event.currentTarget.releasePointerCapture?.(event.pointerId);
try {
event.currentTarget.releasePointerCapture?.(event.pointerId);
} catch {
// ignore
}
}}
onPointerCancel={() => {
drag.current = undefined;
onPointerCancel={event => {
if (drag.current?.pointerId === event.pointerId) {
drag.current = undefined;
}
}}
onLostPointerCapture={() => {
drag.current = undefined;
Expand All @@ -155,8 +290,9 @@ export const LineIntervalModal = ({
}
}}
>
<circle r="26" fill="white" opacity="0.001" cursor="ew-resize" />
<circle r="18" fill="transparent" stroke={colour} strokeWidth="4" />
<text y="-33" textAnchor="middle" fill={colour} fontSize="13">
<text y="-33" textAnchor="middle" fill={colour} fontSize="13" pointerEvents="none">
{t(`header.lineInfo.${kind === 'start' ? 'rangeStart' : 'rangeEnd'}`)}
</text>
</g>
Expand Down
Loading
Loading