React

.eslintrc.js

@@ -1,5 +1,6 @@
 module.exports = {
   extends: [
+    'eslint-config-airbnb',
     '@inker/eslint-config-typescript',
     // 'plugin:import/errors',
     // 'plugin:import/warnings',
@@ -50,6 +51,16 @@ module.exports = {
       allowAllPropertiesOnSameLine: false,
     }],
 
+    'react/prop-types': 0,
+    'react/jsx-one-expression-per-line': 0,
+    'react/jsx-props-no-spreading': 0,
+    'react/jsx-filename-extension': [2, {
+      extensions: [
+        '.jsx',
+        '.tsx',
+      ],
+    }],
+
     '@typescript-eslint/no-unused-vars': [2, {
       vars: 'all',
       args: 'after-used',

package.json

@@ -10,11 +10,17 @@
     "download.js": "^1.0.0",
     "github-api": "^3.4.0",
     "hammerjs": "^2.0.8",
+    "history": "^5.0.0",
     "html-tags": "^3.1.0",
     "leaflet": "^1.7.1",
     "localforage": "^1.9.0",
     "lodash": "^4.17.21",
+    "memoize-one": "^5.1.1",
     "normalize.css": "^8.0.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^5.1.2",
+    "styled-components": "^5.0.1",
     "svgio": "^0.4.0",
     "tryfunc": "^3.1.0",
     "tslib": "^2.4.0",
@@ -25,9 +31,17 @@
     "@types/hammerjs": "^2.0.40",
     "@types/leaflet": "^1.7.4",
     "@types/lodash": "^4.14.171",
+    "@types/memoize-one": "^5.1.2",
+    "@types/react": "^17.0.14",
+    "@types/react-dom": "^17.0.9",
+    "@types/react-router-dom": "^5.1.3",
+    "@types/styled-components": "^5.1.25",
     "copy-webpack-plugin": "^9.0.1",
-    "css-loader": "^6.2.0",
+    "css-loader": "^6.7.1",
     "eslint": "^8.21.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-react": "^7.30.1",
     "html-webpack-plugin": "^5.3.1",
     "mini-css-extract-plugin": "^2.1.0",
     "npm-run-all": "^4.1.5",

src/Config.ts

@@ -5,6 +5,7 @@ export default interface Config {
   minZoom: number,
   maxZoom: number,
   detailedZoom: number,
+  detailedE: boolean,
   url: {
       [resource: string]: string,
   },

src/Metro/DummyContainer.tsx

@@ -0,0 +1,50 @@
+import React, { memo } from 'react'
+import styled from 'styled-components'
+
+import memoizeObject from 'utils/memoizeObject'
+
+const memoDummyTransfersStyle = memoizeObject()
+const memoDummyPlatformsStyle = memoizeObject()
+
+const DummyPlatforms = styled.g`
+  opacity: 0;
+  /* stroke: blue; */
+  /* stroke-width: 0.5px; */
+`
+
+const DummyTransfers = styled.g`
+  opacity: 0;
+
+  & path {
+    fill: none;
+    pointer-events: stroke;
+  }
+`
+
+interface Props {
+  dummyTransfersStrokeWidth: number,
+  dummyPlatformsStrokeWidth: number,
+  mountDummyTransfers: (g: SVGGElement) => void,
+  mountDummyPlatforms: (g: SVGGElement) => void,
+}
+
+const DummyContainer = (props: Props) => (
+  <>
+    <DummyTransfers
+      ref={props.mountDummyTransfers}
+      style={memoDummyTransfersStyle({
+        stroke: 'black',
+        strokeWidth: `${props.dummyTransfersStrokeWidth}px`,
+      })}
+    />
+
+    <DummyPlatforms
+      ref={props.mountDummyPlatforms}
+      style={memoDummyPlatformsStyle({
+        strokeWidth: `${props.dummyPlatformsStrokeWidth}px`,
+      })}
+    />
+  </>
+)
+
+export default memo(DummyContainer)

src/Metro/MapContainer.tsx

@@ -0,0 +1,209 @@
+import React, {
+  memo,
+  useState,
+  useCallback,
+  useMemo,
+} from 'react'
+
+import {
+  Point,
+  LatLng,
+} from 'leaflet'
+
+import { meanColor } from 'utils/color'
+
+import {
+  tryGetFromMap,
+} from 'utils/collections'
+
+import Network, {
+  Platform,
+} from '../network'
+
+import Config from '../Config'
+
+import makeWhiskers from './utils/makeWhiskers'
+import makeCircumcircles from './utils/makeCircumcircles'
+
+import PositioningEngine from './PositioningEngine'
+import Platforms from './Platforms'
+import Transfers from './Transfers'
+import Spans from './Spans'
+
+import { Containers as MetroContainers } from '.'
+
+const GRAY = '#999'
+const BLACK = '#000'
+
+interface Props {
+  config: Config,
+  zoom: number,
+  lineRules: Map<string, CSSStyleDeclaration>,
+  network: Network,
+  svgSizes: any,
+  containers: MetroContainers,
+  featuredPlatforms: Platform[] | null,
+  getPlatformPosition: (platform: Platform) => Point,
+  setFeaturedPlatforms: (platforms: Platform[] | null) => void,
+  latLngToOverlayPoint: (latLng: LatLng) => Point,
+}
+
+function linesToColors(lines: Set<string>, lineRules: Map<string, CSSStyleDeclaration>): string[] {
+  const rgbs: string[] = []
+  for (const line of lines) {
+    const { stroke } = tryGetFromMap(lineRules, line[0] === 'M' ? line : line[0])
+    if (stroke) {
+      rgbs.push(stroke)
+    }
+  }
+  return rgbs
+}
+
+const MapContainer = ({
+  config,
+  zoom,
+  network,
+  lineRules,
+  svgSizes: {
+    lineWidth,
+    lightLineWidth,
+    circleBorder,
+    circleRadius,
+    transferWidth,
+    transferBorder,
+    fullCircleRadius,
+  },
+  getPlatformPosition,
+  featuredPlatforms,
+  setFeaturedPlatforms,
+  containers: {
+    dummyTransfers,
+    dummyPlatforms,
+    defs,
+  },
+}: Props) => {
+  const [pathsInner, setPathsInner] = useState<SVGGElement | null>(null)
+  const [transfersInner, setTransfersInner] = useState<SVGGElement | null>(null)
+
+  const isDetailed = useMemo(() => zoom >= config.detailedZoom, [zoom])
+  const stationCircumpoints = useMemo(() => makeCircumcircles(network), [zoom])
+  const whiskers = useMemo(() => makeWhiskers(network.stations, getPlatformPosition), [zoom])
+
+  const unsetFeaturedPlatforms = useCallback(() => {
+    setFeaturedPlatforms(null)
+  }, [setFeaturedPlatforms])
+
+  const getPlatformWhiskers = useCallback(
+    (platform: Platform) => tryGetFromMap(whiskers, platform),
+    [whiskers],
+  )
+
+  const getPlatformColor = useCallback(
+    (platform: Platform) => {
+      const passingLines = platform.passingLines()
+
+      if (!isDetailed) {
+        // return BLACK
+        return config.detailedE && !platform.passingLines().has('E') ? GRAY : BLACK
+      }
+
+      if (!config.detailedE) {
+        return meanColor(linesToColors(passingLines, lineRules))
+      }
+      if (!passingLines.has('E')) {
+        return GRAY
+      }
+      // TODO: temp
+      return BLACK
+      // const line = passingLines.values().next().value
+      // return passingLines.size === 1 && tryGetFromMap(lineRules, line).stroke || BLACK
+    },
+    [config, lineRules, isDetailed],
+  )
+
+  // const lineWidth = 2 ** (zoom / 4 - 1.75);
+
+  const lightRailPathStyle = tryGetFromMap(lineRules, 'L')
+  lightRailPathStyle.strokeWidth = `${lightLineWidth}px`
+
+  return (
+    <PositioningEngine
+      detailedE={config.detailedE}
+      lineWidth={lineWidth}
+      network={network}
+      getPlatformPosition={getPlatformPosition}
+      getPlatformWhiskers={getPlatformWhiskers}
+    >
+      {({
+        getSpanSlotsScaled,
+        getSpanOffset,
+        getPlatformSlotPoints,
+      }) => (
+        <>
+          {pathsInner && network.spans
+            && (
+            <Spans
+              spans={network.spans}
+              lineWidth={lineWidth}
+              lineRules={lineRules}
+              detailedE={config.detailedE}
+              pathsInnerWrapper={pathsInner}
+              getPlatformPosition={getPlatformPosition}
+              getPlatformWhiskers={getPlatformWhiskers}
+              getSpanSlotsScaled={getSpanSlotsScaled}
+              getSpanOffset={getSpanOffset}
+            />
+            )}
+
+          <g
+            ref={setPathsInner}
+          />
+
+          {transfersInner && dummyTransfers && defs && network.transfers
+            && (
+            <Transfers
+              transfers={network.transfers}
+              isDetailed={isDetailed}
+              stationCircumpoints={stationCircumpoints}
+              featuredPlatforms={featuredPlatforms}
+              transferWidth={transferWidth}
+              transferBorder={transferBorder}
+              fullCircleRadius={fullCircleRadius}
+              transfersInnerWrapper={transfersInner}
+              dummyTransfers={dummyTransfers}
+              defs={defs}
+              getPlatformPosition={getPlatformPosition}
+              getPlatformSlotPoints={getPlatformSlotPoints}
+              getPlatformColor={getPlatformColor}
+              setFeaturedPlatforms={setFeaturedPlatforms}
+              unsetFeaturedPlatforms={unsetFeaturedPlatforms}
+            />
+            )}
+
+          {dummyPlatforms && network.platforms
+            && (
+            <Platforms
+              platforms={network.platforms}
+              isDetailed={isDetailed}
+              strokeWidth={circleBorder}
+              circleRadius={circleRadius}
+              dummyPlatforms={dummyPlatforms}
+              featuredPlatforms={featuredPlatforms}
+              getPlatformSlotPoints={getPlatformSlotPoints}
+              getPlatformColor={getPlatformColor}
+              setFeaturedPlatforms={setFeaturedPlatforms}
+              unsetFeaturedPlatforms={unsetFeaturedPlatforms}
+            />
+            )}
+
+          <g
+            ref={setTransfersInner}
+          />
+
+        </>
+      )}
+    </PositioningEngine>
+  )
+}
+
+export default memo(MapContainer)