Skip to content

Commit 3d303e0

Browse files
inkerinker
committed
react
change extension init update removed 'dummy' update split view update update update update update . gradients + colors circular transfers transfer slight shift mouse on transfers update . fix stadium split components optimize rerendering . . refactor . optimize rerendering font size further optimization . . . refactor stadium angle fix stadium . update . detailed E colors . . platform offset single platform per station . by route offset -> slot . restructure update fix update makeShouldSwapFunc refactor getPositions . patches optimization update update replaced slot positions with slots bang operator fix . fix overlapped points moved optimization, span sorting & cost func to separate files moved span sorting & cost func to separate files . intersecting a parallel batch reduced penalty . . update comparePropsLevel update upd . . dummy fix . . upd upd . update update fixes ref -> innerRef osi update initSlots remove distance factor update algos getDerivedStateFromProps update update update fix comparisonLevel fix stadium for firefox tooltip font update naming PositioningEngine . mounting update memoize-one memoization of styles update hooks remove withRefs update update transfers update update object memoization update update Modal -> Portal update update update dependencies update dependencies update config update
1 parent 0eb1c8d commit 3d303e0

60 files changed

Lines changed: 4052 additions & 1101 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.eslintrc.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
module.exports = {
22
extends: [
3+
'eslint-config-airbnb',
34
'@inker/eslint-config-typescript',
45
// 'plugin:import/errors',
56
// 'plugin:import/warnings',
@@ -50,6 +51,16 @@ module.exports = {
5051
allowAllPropertiesOnSameLine: false,
5152
}],
5253

54+
'react/prop-types': 0,
55+
'react/jsx-one-expression-per-line': 0,
56+
'react/jsx-props-no-spreading': 0,
57+
'react/jsx-filename-extension': [2, {
58+
extensions: [
59+
'.jsx',
60+
'.tsx',
61+
],
62+
}],
63+
5364
'@typescript-eslint/no-unused-vars': [2, {
5465
vars: 'all',
5566
args: 'after-used',

‎package-lock.json‎

Lines changed: 571 additions & 42 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,17 @@
1010
"download.js": "^1.0.0",
1111
"github-api": "^3.4.0",
1212
"hammerjs": "^2.0.8",
13+
"history": "^5.0.0",
1314
"html-tags": "^3.1.0",
1415
"leaflet": "^1.7.1",
1516
"localforage": "^1.9.0",
1617
"lodash": "^4.17.21",
18+
"memoize-one": "^5.1.1",
1719
"normalize.css": "^8.0.1",
20+
"react": "^17.0.2",
21+
"react-dom": "^17.0.2",
22+
"react-router-dom": "^5.1.2",
23+
"styled-components": "^5.0.1",
1824
"svgio": "^0.4.0",
1925
"tryfunc": "^3.1.0",
2026
"tslib": "^2.3.0",
@@ -25,9 +31,16 @@
2531
"@types/hammerjs": "^2.0.40",
2632
"@types/leaflet": "^1.7.4",
2733
"@types/lodash": "^4.14.171",
34+
"@types/memoize-one": "^5.1.2",
35+
"@types/react": "^17.0.14",
36+
"@types/react-dom": "^17.0.9",
37+
"@types/react-router-dom": "^5.1.3",
2838
"copy-webpack-plugin": "^9.0.1",
2939
"css-loader": "^6.2.0",
3040
"eslint": "^7.31.0",
41+
"eslint-config-airbnb": "^18.2.0",
42+
"eslint-plugin-jsx-a11y": "^6.3.1",
43+
"eslint-plugin-react": "^7.20.3",
3144
"html-webpack-plugin": "^5.3.1",
3245
"mini-css-extract-plugin": "^2.1.0",
3346
"npm-run-all": "^4.1.5",

‎src/Config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ export default interface Config {
55
minZoom: number,
66
maxZoom: number,
77
detailedZoom: number,
8+
detailedE: boolean,
89
url: {
910
[resource: string]: string,
1011
},

‎src/Metro/DummyContainer.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React, { memo } from 'react'
2+
import styled from 'styled-components'
3+
4+
import memoizeObject from 'utils/memoizeObject'
5+
6+
const memoDummyTransfersStyle = memoizeObject()
7+
const memoDummyPlatformsStyle = memoizeObject()
8+
9+
const DummyPlatforms = styled.g`
10+
opacity: 0;
11+
/* stroke: blue; */
12+
/* stroke-width: 0.5px; */
13+
`
14+
15+
const DummyTransfers = styled.g`
16+
opacity: 0;
17+
18+
& path {
19+
fill: none;
20+
pointer-events: stroke;
21+
}
22+
`
23+
24+
interface Props {
25+
dummyTransfersStrokeWidth: number,
26+
dummyPlatformsStrokeWidth: number,
27+
mountDummyTransfers: (g: SVGGElement) => void,
28+
mountDummyPlatforms: (g: SVGGElement) => void,
29+
}
30+
31+
const DummyContainer = (props: Props) => (
32+
<>
33+
<DummyTransfers
34+
ref={props.mountDummyTransfers}
35+
style={memoDummyTransfersStyle({
36+
stroke: 'black',
37+
strokeWidth: `${props.dummyTransfersStrokeWidth}px`,
38+
})}
39+
/>
40+
41+
<DummyPlatforms
42+
ref={props.mountDummyPlatforms}
43+
style={memoDummyPlatformsStyle({
44+
strokeWidth: `${props.dummyPlatformsStrokeWidth}px`,
45+
})}
46+
/>
47+
</>
48+
)
49+
50+
export default memo(DummyContainer)

‎src/Metro/MapContainer.tsx‎

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
import React, {
2+
memo,
3+
useState,
4+
useCallback,
5+
useMemo,
6+
} from 'react'
7+
8+
import {
9+
Point,
10+
LatLng,
11+
} from 'leaflet'
12+
13+
import { meanColor } from 'utils/color'
14+
15+
import {
16+
tryGetFromMap,
17+
} from 'utils/collections'
18+
19+
import Network, {
20+
Platform,
21+
} from '../network'
22+
23+
import Config from '../Config'
24+
25+
import makeWhiskers from './utils/makeWhiskers'
26+
import makeCircumcircles from './utils/makeCircumcircles'
27+
28+
import PositioningEngine from './PositioningEngine'
29+
import Platforms from './Platforms'
30+
import Transfers from './Transfers'
31+
import Spans from './Spans'
32+
33+
import { Containers as MetroContainers } from '.'
34+
35+
const GRAY = '#999'
36+
const BLACK = '#000'
37+
38+
interface Props {
39+
config: Config,
40+
zoom: number,
41+
lineRules: Map<string, CSSStyleDeclaration>,
42+
network: Network,
43+
svgSizes: any,
44+
containers: MetroContainers,
45+
featuredPlatforms: Platform[] | null,
46+
getPlatformPosition: (platform: Platform) => Point,
47+
setFeaturedPlatforms: (platforms: Platform[] | null) => void,
48+
latLngToOverlayPoint: (latLng: LatLng) => Point,
49+
}
50+
51+
function linesToColors(lines: Set<string>, lineRules: Map<string, CSSStyleDeclaration>): string[] {
52+
const rgbs: string[] = []
53+
for (const line of lines) {
54+
const { stroke } = tryGetFromMap(lineRules, line[0] === 'M' ? line : line[0])
55+
if (stroke) {
56+
rgbs.push(stroke)
57+
}
58+
}
59+
return rgbs
60+
}
61+
62+
const MapContainer = ({
63+
config,
64+
zoom,
65+
network,
66+
lineRules,
67+
svgSizes: {
68+
lineWidth,
69+
lightLineWidth,
70+
circleBorder,
71+
circleRadius,
72+
transferWidth,
73+
transferBorder,
74+
fullCircleRadius,
75+
},
76+
getPlatformPosition,
77+
featuredPlatforms,
78+
setFeaturedPlatforms,
79+
containers: {
80+
dummyTransfers,
81+
dummyPlatforms,
82+
defs,
83+
},
84+
}: Props) => {
85+
const [pathsInner, setPathsInner] = useState<SVGGElement | null>(null)
86+
const [transfersInner, setTransfersInner] = useState<SVGGElement | null>(null)
87+
88+
const isDetailed = useMemo(() => zoom >= config.detailedZoom, [zoom])
89+
const stationCircumpoints = useMemo(() => makeCircumcircles(network), [zoom])
90+
const whiskers = useMemo(() => makeWhiskers(network.stations, getPlatformPosition), [zoom])
91+
92+
const unsetFeaturedPlatforms = useCallback(() => {
93+
setFeaturedPlatforms(null)
94+
}, [setFeaturedPlatforms])
95+
96+
const getPlatformWhiskers = useCallback(
97+
(platform: Platform) => tryGetFromMap(whiskers, platform),
98+
[whiskers],
99+
)
100+
101+
const getPlatformColor = useCallback(
102+
(platform: Platform) => {
103+
const passingLines = platform.passingLines()
104+
105+
if (!isDetailed) {
106+
// return BLACK
107+
return config.detailedE && !platform.passingLines().has('E') ? GRAY : BLACK
108+
}
109+
110+
if (!config.detailedE) {
111+
return meanColor(linesToColors(passingLines, lineRules))
112+
}
113+
if (!passingLines.has('E')) {
114+
return GRAY
115+
}
116+
// TODO: temp
117+
return BLACK
118+
// const line = passingLines.values().next().value
119+
// return passingLines.size === 1 && tryGetFromMap(lineRules, line).stroke || BLACK
120+
},
121+
[config, lineRules, isDetailed],
122+
)
123+
124+
// const lineWidth = 2 ** (zoom / 4 - 1.75);
125+
126+
const lightRailPathStyle = tryGetFromMap(lineRules, 'L')
127+
lightRailPathStyle.strokeWidth = `${lightLineWidth}px`
128+
129+
return (
130+
<PositioningEngine
131+
detailedE={config.detailedE}
132+
lineWidth={lineWidth}
133+
network={network}
134+
getPlatformPosition={getPlatformPosition}
135+
getPlatformWhiskers={getPlatformWhiskers}
136+
>
137+
{({
138+
getSpanSlotsScaled,
139+
getSpanOffset,
140+
getPlatformSlotPoints,
141+
}) => (
142+
<>
143+
{pathsInner && network.spans
144+
&& (
145+
<Spans
146+
spans={network.spans}
147+
lineWidth={lineWidth}
148+
lineRules={lineRules}
149+
detailedE={config.detailedE}
150+
pathsInnerWrapper={pathsInner}
151+
getPlatformPosition={getPlatformPosition}
152+
getPlatformWhiskers={getPlatformWhiskers}
153+
getSpanSlotsScaled={getSpanSlotsScaled}
154+
getSpanOffset={getSpanOffset}
155+
/>
156+
)}
157+
158+
<g
159+
ref={setPathsInner}
160+
/>
161+
162+
{transfersInner && dummyTransfers && defs && network.transfers
163+
&& (
164+
<Transfers
165+
transfers={network.transfers}
166+
isDetailed={isDetailed}
167+
stationCircumpoints={stationCircumpoints}
168+
featuredPlatforms={featuredPlatforms}
169+
transferWidth={transferWidth}
170+
transferBorder={transferBorder}
171+
fullCircleRadius={fullCircleRadius}
172+
transfersInnerWrapper={transfersInner}
173+
dummyTransfers={dummyTransfers}
174+
defs={defs}
175+
getPlatformPosition={getPlatformPosition}
176+
getPlatformSlotPoints={getPlatformSlotPoints}
177+
getPlatformColor={getPlatformColor}
178+
setFeaturedPlatforms={setFeaturedPlatforms}
179+
unsetFeaturedPlatforms={unsetFeaturedPlatforms}
180+
/>
181+
)}
182+
183+
{dummyPlatforms && network.platforms
184+
&& (
185+
<Platforms
186+
platforms={network.platforms}
187+
isDetailed={isDetailed}
188+
strokeWidth={circleBorder}
189+
circleRadius={circleRadius}
190+
dummyPlatforms={dummyPlatforms}
191+
featuredPlatforms={featuredPlatforms}
192+
getPlatformSlotPoints={getPlatformSlotPoints}
193+
getPlatformColor={getPlatformColor}
194+
setFeaturedPlatforms={setFeaturedPlatforms}
195+
unsetFeaturedPlatforms={unsetFeaturedPlatforms}
196+
/>
197+
)}
198+
199+
<g
200+
ref={setTransfersInner}
201+
/>
202+
203+
</>
204+
)}
205+
</PositioningEngine>
206+
)
207+
}
208+
209+
export default memo(MapContainer)

0 commit comments

Comments
 (0)