From 32828f391ba979a57a9d7f2d53ee8ee076098275 Mon Sep 17 00:00:00 2001 From: Brandon Liu Date: Fri, 2 Dec 2022 12:33:33 +0800 Subject: [PATCH] inspector: improve type checks, map color scheme [#49] --- app/package-lock.json | 10 ++++++++++ app/package.json | 1 + app/src/Inspector.tsx | 26 ++++++++++---------------- app/src/MaplibreMap.tsx | 17 +++++++++-------- app/src/stitches.config.ts | 4 +--- 5 files changed, 31 insertions(+), 27 deletions(-) diff --git a/app/package-lock.json b/app/package-lock.json index d3620e2..97f06a0 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -37,6 +37,7 @@ "@types/pbf": "^3.0.2", "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", + "@types/react-svg-pan-zoom": "^3.3.5", "@vitejs/plugin-react": "^1.3.0", "typescript": "^4.6.3", "vite": "^2.9.13" @@ -1433,6 +1434,15 @@ "@types/react": "*" } }, + "node_modules/@types/react-svg-pan-zoom": { + "version": "3.3.5", + "resolved": "https://registry.npmjs.org/@types/react-svg-pan-zoom/-/react-svg-pan-zoom-3.3.5.tgz", + "integrity": "sha512-W8GRFCDy7raSDr5OXGjSyvX5KmdWlIQfv0NLa1jfAYVUO4ClVbgorWeAAom7nY3Pl+4h9blXE1Bnu2CW1iMEvQ==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz", diff --git a/app/package.json b/app/package.json index 0fa8dc3..685c502 100644 --- a/app/package.json +++ b/app/package.json @@ -37,6 +37,7 @@ "@types/pbf": "^3.0.2", "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", + "@types/react-svg-pan-zoom": "^3.3.5", "@vitejs/plugin-react": "^1.3.0", "typescript": "^4.6.3", "vite": "^2.9.13" diff --git a/app/src/Inspector.tsx b/app/src/Inspector.tsx index 5cec18b..bc0f453 100644 --- a/app/src/Inspector.tsx +++ b/app/src/Inspector.tsx @@ -9,12 +9,7 @@ import { schemeSet3 } from "d3-scale-chromatic"; import * as DialogPrimitive from "@radix-ui/react-dialog"; import { useMeasure } from "react-use"; import { - INITIAL_VALUE, - ReactSVGPanZoom, - TOOL_NONE, - fitSelection, - zoomOnViewerCenter, - fitToViewer, + UncontrolledReactSVGPanZoom, } from "react-svg-pan-zoom"; const TableContainer = styled("div", { @@ -40,6 +35,7 @@ const TableRow = styled( "tr", { cursor: "pointer", + fontFamily: "monospace" }, { "&:hover": { color: "red" } } ); @@ -185,10 +181,12 @@ const VectorPreview = (props: { }) => { let [layers, setLayers] = useState([]); let [selectedFeature, setSelectedFeature] = useState(null); - const Viewer = useRef(null); - const [tool, setTool] = useState(TOOL_NONE); - const [value, setValue] = useState(INITIAL_VALUE); - const [ref, { width, height }] = useMeasure(); + const Viewer = useRef(null); + const [ref, { width, height }] = useMeasure(); + + useEffect(() => { + Viewer.current!.zoomOnViewerCenter(0.1); + },[]); useEffect(() => { let fn = async (entry: Entry) => { @@ -251,21 +249,17 @@ const VectorPreview = (props: { return ( - console.log("click", event.x, event.y, event.originalEvent) } > {elems} - + {selectedFeature ? : null} ); diff --git a/app/src/MaplibreMap.tsx b/app/src/MaplibreMap.tsx index 79aa9d4..3577259 100644 --- a/app/src/MaplibreMap.tsx +++ b/app/src/MaplibreMap.tsx @@ -4,6 +4,7 @@ import { Protocol } from "../../js/adapters"; import { styled } from "./stitches.config"; import maplibregl from "maplibre-gl"; import "maplibre-gl/dist/maplibre-gl.css"; +import { schemeSet3 } from "d3-scale-chromatic"; const MapContainer = styled("div", { height: "calc(100vh - $4 - $4)", @@ -46,14 +47,14 @@ const vectorStyle = async (file: PMTiles): Promise => { } if (vector_layers) { - for (let layer of vector_layers) { + for (let [i,layer] of vector_layers.entries()) { layers.push({ id: layer.id + "_fill", type: "fill", source: "source", "source-layer": layer.id, paint: { - "fill-color": "white", + "fill-color": schemeSet3[i % 12], "fill-opacity": 0.2, }, filter: ["==", ["geometry-type"], "Polygon"], @@ -64,7 +65,7 @@ const vectorStyle = async (file: PMTiles): Promise => { source: "source", "source-layer": layer.id, paint: { - "line-color": "steelblue", + "line-color": schemeSet3[i % 12], "line-width": 0.5, }, filter: ["==", ["geometry-type"], "LineString"], @@ -75,13 +76,13 @@ const vectorStyle = async (file: PMTiles): Promise => { source: "source", "source-layer": layer.id, paint: { - "circle-color": "red", + "circle-color": schemeSet3[i % 12], }, filter: ["==", ["geometry-type"], "Point"], }); } } else if (tilestats) { - for (let layer of tilestats.layers) { + for (let [i,layer] of tilestats.layers.entries()) { if (layer.geometry === "Polygon") { layers.push({ id: layer.layer + "_fill", @@ -89,7 +90,7 @@ const vectorStyle = async (file: PMTiles): Promise => { source: "source", "source-layer": layer.layer, paint: { - "fill-color": "white", + "fill-color": schemeSet3[i % 12], "fill-opacity": 0.2, }, }); @@ -100,7 +101,7 @@ const vectorStyle = async (file: PMTiles): Promise => { source: "source", "source-layer": layer.layer, paint: { - "line-color": "steelblue", + "line-color": schemeSet3[i % 12], "line-width": 0.5, }, }); @@ -111,7 +112,7 @@ const vectorStyle = async (file: PMTiles): Promise => { source: "source", "source-layer": layer.layer, paint: { - "circle-color": "red", + "circle-color": schemeSet3[i % 12], }, }); } diff --git a/app/src/stitches.config.ts b/app/src/stitches.config.ts index 04b1a71..e8fd523 100644 --- a/app/src/stitches.config.ts +++ b/app/src/stitches.config.ts @@ -55,8 +55,6 @@ export const globalStyles = globalCss({ margin: 0, padding: 0, border: 0, - fontFamily: "Inter, sans-serif", }, - body: { backgroundColor: "$black", color: "$white" }, - "@import": ["url('https://rsms.me/inter/inter.css')"], + body: { backgroundColor: "$black", color: "$white", fontFamily: "sans-serif" } });