Skip to content

Commit

Permalink
[tweak] Disruption diagram maths (#1830)
Browse files Browse the repository at this point in the history
  • Loading branch information
@hannahpurcell
hannahpurcell authored Aug 3, 2023
1 parent 2de875f commit 3b2680f
Showing 1 changed file with 134 additions and 99 deletions.
233 changes: 134 additions & 99 deletions assets/src/components/v2/disruption_diagram/disruption_diagram.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -98,91 +100,119 @@ interface IconProps {
className?: string;
}

const CurrentStopIconRedLine: ComponentType<IconProps> = ({ x }) => (
<>
<path
transform={`translate(${x - SLOT_WIDTH} -4)`}
d="M32.6512 3.92661C30.0824 1.3578 25.9176 1.3578 23.3488 3.92661L3.92661 23.3488C1.3578 25.9176 1.3578 30.0824 3.92661 32.6512L23.3488 52.0734C25.9176 54.6422 30.0824 54.6422 32.6512 52.0734L52.0734 32.6512C54.6422 30.0824 54.6422 25.9176 52.0734 23.3488L32.6512 3.92661Z"
className="middle-slot__background--red"
stroke="#E6E4E1"
strokeWidth="4"
strokeLinejoin="round"
/>
<path
transform={`translate(${x - SLOT_WIDTH} -4)`}
fillRule="evenodd"
clipRule="evenodd"
d="M15.4855 29.219C14.7045 28.438 14.7045 27.1717 15.4855 26.3906L26.3906 15.4855C27.1717 14.7045 28.438 14.7045 29.219 15.4855L40.1242 26.3906C40.9052 27.1717 40.9052 28.438 40.1241 29.219L29.219 40.1242C28.438 40.9052 27.1717 40.9052 26.3906 40.1241L15.4855 29.219Z"
fill="white"
/>
</>
);
// Translate by: width of the icon + stroke-width
const CurrentStopIconRedLine: ComponentType<IconProps> = ({ x }) => {
const iconWidth = 52;
const strokeWidth = 4;

const CurrentStopIcon: ComponentType<IconProps> = ({ x }) => (
<>
<path
transform={`translate(${x - SLOT_WIDTH} -4)`}
d="M3.15665 25.2076C1.61445 26.7498 1.61445 29.2502 3.15665 30.7924L25.2076 52.8434C26.7498 54.3856 29.2502 54.3856 30.7924 52.8434L52.8434 30.7924C54.3856 29.2502 54.3856 26.7498 52.8434 25.2076L30.7924 3.15668C29.2502 1.61448 26.7498 1.61448 25.2076 3.15668L3.15665 25.2076Z"
fill="#EE2E24"
stroke="#E6E4E1"
strokeWidth="4"
/>
</>
);
return (
<>
<path
transform={`translate(${x - (iconWidth + strokeWidth) / 2} -4)`}
d="M32.6512 3.92661C30.0824 1.3578 25.9176 1.3578 23.3488 3.92661L3.92661 23.3488C1.3578 25.9176 1.3578 30.0824 3.92661 32.6512L23.3488 52.0734C25.9176 54.6422 30.0824 54.6422 32.6512 52.0734L52.0734 32.6512C54.6422 30.0824 54.6422 25.9176 52.0734 23.3488L32.6512 3.92661Z"
className="middle-slot__background--red"
stroke="#E6E4E1"
strokeWidth={strokeWidth}
strokeLinejoin="round"
/>
<path
transform={`translate(${x - (iconWidth + strokeWidth) / 2} -4)`}
fillRule="evenodd"
clipRule="evenodd"
d="M15.4855 29.219C14.7045 28.438 14.7045 27.1717 15.4855 26.3906L26.3906 15.4855C27.1717 14.7045 28.438 14.7045 29.219 15.4855L40.1242 26.3906C40.9052 27.1717 40.9052 28.438 40.1241 29.219L29.219 40.1242C28.438 40.9052 27.1717 40.9052 26.3906 40.1241L15.4855 29.219Z"
fill="white"
/>
</>
);
};

const CurrentStopIconEndpointRedLine: ComponentType<IconProps> = ({ x }) => (
<>
// Translate by: width of the icon + stroke-width
const CurrentStopIcon: ComponentType<IconProps> = ({ x }) => {
const iconWidth = 52;
const strokeWidth = 4;

return (
<>
<path
transform={`translate(${x - (iconWidth + strokeWidth) / 2} -4)`}
d="M3.15665 25.2076C1.61445 26.7498 1.61445 29.2502 3.15665 30.7924L25.2076 52.8434C26.7498 54.3856 29.2502 54.3856 30.7924 52.8434L52.8434 30.7924C54.3856 29.2502 54.3856 26.7498 52.8434 25.2076L30.7924 3.15668C29.2502 1.61448 26.7498 1.61448 25.2076 3.15668L3.15665 25.2076Z"
fill="#EE2E24"
stroke="#E6E4E1"
strokeWidth={strokeWidth}
/>
</>
);
};

const CurrentStopIconEndpointRedLine: ComponentType<IconProps> = ({ x }) => {
const iconWidth = 64;

return (
<>
<path
transform={`translate(${x - iconWidth / 2} -8)`}
d="M39.4605 4.26181C36.4447 1.24606 31.5553 1.24606 28.5395 4.26181L4.26181 28.5395C1.24606 31.5553 1.24606 36.4447 4.26181 39.4605L28.5395 63.7382C31.5553 66.7539 36.4447 66.7539 39.4605 63.7382L63.7382 39.4605C66.7539 36.4447 66.7539 31.5553 63.7382 28.5395L39.4605 4.26181Z"
fill="#EE2E24"
stroke="#E6E4E1"
strokeWidth="4"
strokeLinejoin="round"
/>
<path
transform={`translate(${x - iconWidth / 2} -8)`}
fillRule="evenodd"
clipRule="evenodd"
d="M18.0032 35.1702C17.2222 34.3892 17.2222 33.1229 18.0032 32.3418L32.3417 18.0033C33.1228 17.2223 34.3891 17.2223 35.1702 18.0033L49.5086 32.3418C50.2897 33.1229 50.2897 34.3892 49.5086 35.1702L35.1702 49.5087C34.3891 50.2898 33.1228 50.2898 32.3417 49.5087L18.0032 35.1702Z"
fill="white"
/>
</>
);
};

const CurrentStopIconEndpoint: ComponentType<IconProps> = ({ x }) => {
const iconWidth = 64;

return (
<path
transform={`translate(${x - SLOT_WIDTH} -8)`}
d="M39.4605 4.26181C36.4447 1.24606 31.5553 1.24606 28.5395 4.26181L4.26181 28.5395C1.24606 31.5553 1.24606 36.4447 4.26181 39.4605L28.5395 63.7382C31.5553 66.7539 36.4447 66.7539 39.4605 63.7382L63.7382 39.4605C66.7539 36.4447 66.7539 31.5553 63.7382 28.5395L39.4605 4.26181Z"
transform={`translate(${x - iconWidth / 2} -8)`}
d="M3.13388 28.7629C1.74155 30.1552 1.74155 32.4126 3.13388 33.8049L28.2253 58.8964C29.6176 60.2887 31.8751 60.2887 33.2674 58.8964L58.3588 33.8049C59.7511 32.4126 59.7511 30.1552 58.3588 28.7629L33.2674 3.67141C31.8751 2.27909 29.6176 2.27909 28.2253 3.67141L3.13388 28.7629Z"
fill="#EE2E24"
stroke="#E6E4E1"
strokeWidth="4"
strokeLinejoin="round"
strokeWidth="3.58209"
/>
<path
transform={`translate(${x - SLOT_WIDTH} -8)`}
fillRule="evenodd"
clipRule="evenodd"
d="M18.0032 35.1702C17.2222 34.3892 17.2222 33.1229 18.0032 32.3418L32.3417 18.0033C33.1228 17.2223 34.3891 17.2223 35.1702 18.0033L49.5086 32.3418C50.2897 33.1229 50.2897 34.3892 49.5086 35.1702L35.1702 49.5087C34.3891 50.2898 33.1228 50.2898 32.3417 49.5087L18.0032 35.1702Z"
fill="white"
/>
</>
);
);
};

const CurrentStopIconEndpoint: ComponentType<IconProps> = ({ x }) => (
<path
transform={`translate(${x - SLOT_WIDTH} -8)`}
d="M3.13388 28.7629C1.74155 30.1552 1.74155 32.4126 3.13388 33.8049L28.2253 58.8964C29.6176 60.2887 31.8751 60.2887 33.2674 58.8964L58.3588 33.8049C59.7511 32.4126 59.7511 30.1552 58.3588 28.7629L33.2674 3.67141C31.8751 2.27909 29.6176 2.27909 28.2253 3.67141L3.13388 28.7629Z"
fill="#EE2E24"
stroke="#E6E4E1"
strokeWidth="3.58209"
/>
);
const SuspensionStopIcon: ComponentType<IconProps> = ({ x }) => {
const iconWidth = 30;

const SuspensionStopIcon: ComponentType<IconProps> = ({ x }) => (
<>
<rect x={x - 6} y="16" width="18" height="16" fill="white" />
return (
<>
<rect x={x - iconWidth / 4} y="16" width="18" height="16" fill="white" />
<path
transform={`translate(${x - iconWidth / 2} 9)`}
fillRule="evenodd"
clipRule="evenodd"
d="M8.93886 0C8.76494 0 8.5985 0.0707868 8.47786 0.196069L0.178995 8.81412C0.0641567 8.93338 0 9.09249 0 9.25805V21.0682C0 21.238 0.0674284 21.4008 0.187452 21.5208L8.47922 29.8125C8.59924 29.9326 8.76202 30 8.93176 30H21.0611C21.2351 30 21.4015 29.9292 21.5221 29.8039L29.821 21.1859C29.9358 21.0666 30 20.9075 30 20.7419V8.93176C30 8.76202 29.9326 8.59924 29.8125 8.47922L21.5208 0.187452C21.4008 0.0674284 21.238 0 21.0682 0H8.93886ZM7.5935 10.0066C7.34658 10.2576 7.34866 10.6608 7.59816 10.9091L11.957 15.248L7.59623 19.6793C7.34824 19.9313 7.35156 20.3366 7.60365 20.5845L9.73397 22.6794C9.98593 22.9272 10.391 22.9239 10.6389 22.672L15 18.2404L19.3611 22.672C19.609 22.9239 20.0141 22.9272 20.266 22.6794L22.3964 20.5845C22.6484 20.3366 22.6518 19.9313 22.4038 19.6793L18.043 15.248L22.4018 10.9091C22.6513 10.6608 22.6534 10.2576 22.4065 10.0066L20.2613 7.82685C20.0124 7.5739 19.6052 7.5718 19.3537 7.82217L15 12.1559L10.6463 7.82217C10.3948 7.5718 9.98758 7.5739 9.73865 7.82685L7.5935 10.0066Z"
fill="#171F26"
/>
</>
);
};

const StationClosureStopIcon: ComponentType<IconProps> = ({ x, className }) => {
const iconWidth = 30;

return (
<path
transform={`translate(${x - 12} 9)`}
fillRule="evenodd"
clipRule="evenodd"
d="M8.93886 0C8.76494 0 8.5985 0.0707868 8.47786 0.196069L0.178995 8.81412C0.0641567 8.93338 0 9.09249 0 9.25805V21.0682C0 21.238 0.0674284 21.4008 0.187452 21.5208L8.47922 29.8125C8.59924 29.9326 8.76202 30 8.93176 30H21.0611C21.2351 30 21.4015 29.9292 21.5221 29.8039L29.821 21.1859C29.9358 21.0666 30 20.9075 30 20.7419V8.93176C30 8.76202 29.9326 8.59924 29.8125 8.47922L21.5208 0.187452C21.4008 0.0674284 21.238 0 21.0682 0H8.93886ZM7.5935 10.0066C7.34658 10.2576 7.34866 10.6608 7.59816 10.9091L11.957 15.248L7.59623 19.6793C7.34824 19.9313 7.35156 20.3366 7.60365 20.5845L9.73397 22.6794C9.98593 22.9272 10.391 22.9239 10.6389 22.672L15 18.2404L19.3611 22.672C19.609 22.9239 20.0141 22.9272 20.266 22.6794L22.3964 20.5845C22.6484 20.3366 22.6518 19.9313 22.4038 19.6793L18.043 15.248L22.4018 10.9091C22.6513 10.6608 22.6534 10.2576 22.4065 10.0066L20.2613 7.82685C20.0124 7.5739 19.6052 7.5718 19.3537 7.82217L15 12.1559L10.6463 7.82217C10.3948 7.5718 9.98758 7.5739 9.73865 7.82685L7.5935 10.0066Z"
className={className}
transform={`translate(${x - iconWidth / 2} -2)`}
d="M22.6628 27.0001L23.9119 25.7308L22.6498 24.4744L17.0202 18.8706L18.8677 16.9933L24.4828 22.5826L25.7463 23.8404L27.0099 22.5826L32.625 16.9933L34.4725 18.8706L28.8429 24.4744L27.5807 25.7308L28.8298 27.0001L34.4649 32.7261L32.6588 34.5021L27.0229 28.7751L25.7463 27.4779L24.4698 28.7751L18.8338 34.5021L17.0278 32.7261L22.6628 27.0001ZM35.0884 18.2575L35.0876 18.2583L35.0884 18.2575ZM19.4568 35.1147L19.456 35.114L19.4568 35.1147ZM3.22013 15.2827L4.51025 16.5251L3.22013 15.2827C2.73421 15.7873 2.46274 16.4606 2.46274 17.1611V34.0832C2.46274 34.8014 2.74805 35.4902 3.25592 35.9981L15.1366 47.8788L16.4031 46.6124L15.1367 47.8788C15.6445 48.3867 16.3333 48.672 17.0515 48.672H34.4309C35.1669 48.672 35.8711 48.3725 36.3816 47.8424L48.2725 35.4941C48.7585 34.9895 49.0299 34.3162 49.0299 33.6157V16.6936C49.0299 15.9754 48.7446 15.2866 48.2368 14.7788L46.9703 16.0452L48.2367 14.7787L36.356 2.898C35.8481 2.39014 35.1593 2.10483 34.4411 2.10483H17.0617C16.3258 2.10483 15.6215 2.40435 15.111 2.93447L3.22013 15.2827Z"
fill="#171F26"
stroke="#E6E4E1"
strokeWidth="3.58209"
/>
</>
);

const StationClosureStopIcon: ComponentType<IconProps> = ({ x, className }) => (
<path
className={className}
transform={`translate(${x - SLOT_WIDTH} -2)`}
d="M22.6628 27.0001L23.9119 25.7308L22.6498 24.4744L17.0202 18.8706L18.8677 16.9933L24.4828 22.5826L25.7463 23.8404L27.0099 22.5826L32.625 16.9933L34.4725 18.8706L28.8429 24.4744L27.5807 25.7308L28.8298 27.0001L34.4649 32.7261L32.6588 34.5021L27.0229 28.7751L25.7463 27.4779L24.4698 28.7751L18.8338 34.5021L17.0278 32.7261L22.6628 27.0001ZM35.0884 18.2575L35.0876 18.2583L35.0884 18.2575ZM19.4568 35.1147L19.456 35.114L19.4568 35.1147ZM3.22013 15.2827L4.51025 16.5251L3.22013 15.2827C2.73421 15.7873 2.46274 16.4606 2.46274 17.1611V34.0832C2.46274 34.8014 2.74805 35.4902 3.25592 35.9981L15.1366 47.8788L16.4031 46.6124L15.1367 47.8788C15.6445 48.3867 16.3333 48.672 17.0515 48.672H34.4309C35.1669 48.672 35.8711 48.3725 36.3816 47.8424L48.2725 35.4941C48.7585 34.9895 49.0299 34.3162 49.0299 33.6157V16.6936C49.0299 15.9754 48.7446 15.2866 48.2368 14.7788L46.9703 16.0452L48.2367 14.7787L36.356 2.898C35.8481 2.39014 35.1593 2.10483 34.4411 2.10483H17.0617C16.3258 2.10483 15.6215 2.40435 15.111 2.93447L3.22013 15.2827Z"
fill="#171F26"
stroke="#E6E4E1"
strokeWidth="3.58209"
/>
);
);
};

const ShuttleStopIcon: ComponentType<IconProps> = ({ x }) => (
<circle cx={x} cy="24" r="10" fill="white" stroke="#171F26" strokeWidth="4" />
Expand Down Expand Up @@ -497,14 +527,22 @@ const MiddleSlotComponent: ComponentType<MiddleSlotComponentProps> = ({
<>
{background}
{icon}
<text
className={classWithModifier(`label-${labelTextClass}`, textModifier)}
transform={`translate(${x} ${-5}) rotate(${
label === "…" ? "0" : "-45"
})`}
>
{label === "…" ? label : abbreviate ? label.abbrev : label.full}
</text>
{label === "…" ? (
<text
className={classWithModifier(`label-${labelTextClass}`, textModifier)}
transform={`translate(${x - 12} ${-5})`}
>
{" "}
{label}{" "}
</text>
) : (
<text
className={classWithModifier(`label-${labelTextClass}`, textModifier)}
transform={`translate(${x} ${-5}) rotate(-45)`}
>
{abbreviate ? label.abbrev : label.full}
</text>
)}
</>
);
};
Expand All @@ -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 = (
<line
x1={x1}
x1={x1 + dashXunit}
y1="24"
x2={x2}
y2="24"
Expand Down Expand Up @@ -573,14 +611,12 @@ const AlertEmphasisComponent: ComponentType<AlertEmphasisComponentProps> = ({
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;
Expand Down Expand Up @@ -629,19 +665,19 @@ const AlertEmphasisComponent: ComponentType<AlertEmphasisComponentProps> = ({
2 && (
<>
<path
d={`M${x1 - L} 4L${x1 - L} 28`}
d={`M${x1} 4L${x1} 28`}
stroke="#737373"
strokeWidth="8"
strokeLinecap="round"
/>
<path
d={`M${x1 - L} 16H${x1 + x2 - L}`}
d={`M${x1} 16H${x2}`}
stroke="#737373"
strokeWidth="8"
strokeLinecap="round"
/>
<path
d={`M${x1 + x2 - L} 4L${x1 + x2 - L} 28`}
d={`M${x2} 4L${x2} 28`}
stroke="#737373"
strokeWidth="8"
strokeLinecap="round"
Expand Down Expand Up @@ -770,7 +806,6 @@ const DisruptionDiagram: ComponentType<DisruptionDiagramData> = (props) => {
}
effect={effect}
/>

{middleSlots}
<LastSlotComponent
slot={end as EndSlot}
Expand Down

0 comments on commit 3b2680f

Please sign in to comment.