diff --git a/assets/src/components/v2/disruption_diagram/disruption_diagram.tsx b/assets/src/components/v2/disruption_diagram/disruption_diagram.tsx index fd1256ef6..fc103ef7e 100644 --- a/assets/src/components/v2/disruption_diagram/disruption_diagram.tsx +++ b/assets/src/components/v2/disruption_diagram/disruption_diagram.tsx @@ -4,7 +4,9 @@ import { classWithModifier, classWithModifiers } from "Util/util"; const MAX_WIDTH = 904; const SLOT_WIDTH = 24; const LINE_HEIGHT = 24; -const L = 13; +// L can vary based on arrow vs diamond (current stop). Would be nice if this was +// programmatic, but this works for now +const L = 17; const R = 165; const W = MAX_WIDTH - (L + R); @@ -98,91 +100,119 @@ interface IconProps { className?: string; } -const CurrentStopIconRedLine: ComponentType = ({ x }) => ( - <> - - - -); +// Translate by: width of the icon + stroke-width +const CurrentStopIconRedLine: ComponentType = ({ x }) => { + const iconWidth = 52; + const strokeWidth = 4; -const CurrentStopIcon: ComponentType = ({ x }) => ( - <> - - -); + return ( + <> + + + + ); +}; -const CurrentStopIconEndpointRedLine: ComponentType = ({ x }) => ( - <> +// Translate by: width of the icon + stroke-width +const CurrentStopIcon: ComponentType = ({ x }) => { + const iconWidth = 52; + const strokeWidth = 4; + + return ( + <> + + + ); +}; + +const CurrentStopIconEndpointRedLine: ComponentType = ({ x }) => { + const iconWidth = 64; + + return ( + <> + + + + ); +}; + +const CurrentStopIconEndpoint: ComponentType = ({ x }) => { + const iconWidth = 64; + + return ( - - -); + ); +}; -const CurrentStopIconEndpoint: ComponentType = ({ x }) => ( - -); +const SuspensionStopIcon: ComponentType = ({ x }) => { + const iconWidth = 30; -const SuspensionStopIcon: ComponentType = ({ x }) => ( - <> - + return ( + <> + + + + ); +}; + +const StationClosureStopIcon: ComponentType = ({ x, className }) => { + const iconWidth = 30; + + return ( - -); - -const StationClosureStopIcon: ComponentType = ({ x, className }) => ( - -); + ); +}; const ShuttleStopIcon: ComponentType = ({ x }) => ( @@ -497,14 +527,22 @@ const MiddleSlotComponent: ComponentType = ({ <> {background} {icon} - - {label === "…" ? label : abbreviate ? label.abbrev : label.full} - + {label === "…" ? ( + + {" "} + {label}{" "} + + ) : ( + + {abbreviate ? label.abbrev : label.full} + + )} ); }; @@ -524,16 +562,16 @@ const EffectBackgroundComponent: ComponentType< const rangeEnd = effectRegionSlotIndexRange[1]; const x1 = rangeStart * (spaceBetween + SLOT_WIDTH) + L; - const x2 = (spaceBetween + SLOT_WIDTH) * rangeEnd; + const x2 = (spaceBetween + SLOT_WIDTH) * rangeEnd + L; let background; if (effect === "shuttle") { - const dashPlusGap = (spaceBetween + SLOT_WIDTH / 2) / 3; - const dash = dashPlusGap / 1.5; - const gap = dash / 2; + const dashXunit = (spaceBetween + SLOT_WIDTH) / 18; + const dash = dashXunit * 4; + const gap = dashXunit * 2; background = ( = ({ effect, }) => { const rangeStart = effectRegionSlotIndexRange[0]; - const rangeEnd = effectRegionSlotIndexRange[1] - 1; + const rangeEnd = effectRegionSlotIndexRange[1]; - const x1 = Math.max( - (spaceBetween + SLOT_WIDTH) * rangeStart + L * 2, - L - 8 + SLOT_WIDTH / 2 - ); - const x2 = (spaceBetween + SLOT_WIDTH) * (rangeEnd - rangeStart + 1); - const middleOfLine = (x1 + x2 + (x1 - L - 8)) / 2; + const x1 = rangeStart * (spaceBetween + SLOT_WIDTH) + L; + const x2 = (spaceBetween + SLOT_WIDTH) * rangeEnd + L; + + const middleOfLine = (x2 - x1) / 2 + x1; const widthOfBackground = 40; let icon; @@ -629,19 +665,19 @@ const AlertEmphasisComponent: ComponentType = ({ 2 && ( <> = (props) => { } effect={effect} /> - {middleSlots}