diff --git a/app/.prettierrc.json b/app/.prettierrc.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/app/.prettierrc.json @@ -0,0 +1 @@ +{} diff --git a/app/package-lock.json b/app/package-lock.json index 34e5a96..7a53cb5 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -40,6 +40,7 @@ "@types/react-dom": "^18.0.0", "@types/react-svg-pan-zoom": "^3.3.5", "@vitejs/plugin-react": "^1.3.0", + "prettier": "^2.8.4", "typescript": "^4.6.3", "vite": "^2.9.13" } @@ -2663,6 +2664,21 @@ "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz", "integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==" }, + "node_modules/prettier": { + "version": "2.8.4", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.4.tgz", + "integrity": "sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==", + "dev": true, + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/prop-types": { "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", diff --git a/app/package.json b/app/package.json index 4f19bdd..e0cdbd5 100644 --- a/app/package.json +++ b/app/package.json @@ -1,11 +1,13 @@ { - "name": "docs", + "name": "pmtiles-app", "private": true, "version": "0.0.0", "scripts": { "dev": "vite", "preview": "vite preview", - "tsc": "tsc --watch" + "tsc": "tsc --watch", + "prettier": "prettier --write src/*", + "prettier-check": "prettier --check src/*" }, "dependencies": { "@mapbox/vector-tile": "^1.3.1", @@ -40,6 +42,7 @@ "@types/react-dom": "^18.0.0", "@types/react-svg-pan-zoom": "^3.3.5", "@vitejs/plugin-react": "^1.3.0", + "prettier": "^2.8.4", "typescript": "^4.6.3", "vite": "^2.9.13" }, diff --git a/app/src/Inspector.tsx b/app/src/Inspector.tsx index 28dfaa1..f7f8bb5 100644 --- a/app/src/Inspector.tsx +++ b/app/src/Inspector.tsx @@ -43,7 +43,7 @@ const Split = styled("div", { const TileRow = (props: { entry: Entry; - setSelectedEntry:(val: Entry | null) => void; + setSelectedEntry: (val: Entry | null) => void; }) => { let [z, x, y] = tileIdToZxy(props.entry.tileId); return ( @@ -58,7 +58,11 @@ const TileRow = (props: { {y} {props.entry.offset} {props.entry.length} - {props.entry.runLength == 0 ? "directory" : `tile(${props.entry.runLength})`} + + {props.entry.runLength == 0 + ? "directory" + : `tile(${props.entry.runLength})`} + ); }; @@ -289,8 +293,8 @@ const RasterPreview = (props: { file: PMTiles; entry: Entry }) => { return ; }; -function getHashString(entry:Entry) { - const [z,x,y] = tileIdToZxy(entry.tileId); +function getHashString(entry: Entry) { + const [z, x, y] = tileIdToZxy(entry.tileId); let hash = `${z}/${x}/${y}`; const hashName = "inspector"; diff --git a/app/src/Loader.tsx b/app/src/Loader.tsx index 9a86403..b4be520 100644 --- a/app/src/Loader.tsx +++ b/app/src/Loader.tsx @@ -41,7 +41,13 @@ const StyledLink = styled( justifyContent: "center", alignItems: "center", }, - { "&:hover": { backgroundColor: "$hover", color:"$white", cursor: "pointer" } } + { + "&:hover": { + backgroundColor: "$hover", + color: "$white", + cursor: "pointer", + }, + } ); const StyledToggleGroup = styled(ToolbarPrimitive.ToggleGroup, { diff --git a/app/src/Metadata.tsx b/app/src/Metadata.tsx index 22716c0..2fb9109 100644 --- a/app/src/Metadata.tsx +++ b/app/src/Metadata.tsx @@ -9,7 +9,7 @@ const Padded = styled("div", { const Heading = styled("div", { paddingBottom: "2rem", - fontFamily: "monospace" + fontFamily: "monospace", }); function Metadata(props: { file: PMTiles }) { @@ -27,24 +27,43 @@ function Metadata(props: { file: PMTiles }) { return ( - { header ? -
root directory: offset={header.rootDirectoryOffset} len={header.rootDirectoryLength}
-
metadata: offset={header.jsonMetadataOffset} len={header.jsonMetadataLength}
-
leaf directories: offset={header.leafDirectoryOffset} len={header.leafDirectoryLength}
-
tile data: offset={header.tileDataOffset} len={header.tileDataLength}
-
num addressed tiles: {header.numAddressedTiles}
-
num tile entries: {header.numTileEntries}
-
num tile contents: {header.numTileContents}
-
clustered: {header.clustered ? "true" : "false"}
-
internal compression: {header.internalCompression}
-
tile compression: {header.tileCompression}
-
tile type: {header.tileType}
-
min zoom: {header.minZoom}
-
max zoom: {header.maxZoom}
-
min lon, min lat, max lon, max lat: {header.minLon}, {header.minLat}, {header.maxLon}, {header.maxLat}
-
center zoom: {header.centerZoom}
-
center lon, center lat: {header.centerLon}, {header.centerLat}
- : null } + {header ? ( + +
+ root directory: offset={header.rootDirectoryOffset} len= + {header.rootDirectoryLength} +
+
+ metadata: offset={header.jsonMetadataOffset} len= + {header.jsonMetadataLength} +
+
+ leaf directories: offset={header.leafDirectoryOffset} len= + {header.leafDirectoryLength} +
+
+ tile data: offset={header.tileDataOffset} len= + {header.tileDataLength} +
+
num addressed tiles: {header.numAddressedTiles}
+
num tile entries: {header.numTileEntries}
+
num tile contents: {header.numTileContents}
+
clustered: {header.clustered ? "true" : "false"}
+
internal compression: {header.internalCompression}
+
tile compression: {header.tileCompression}
+
tile type: {header.tileType}
+
min zoom: {header.minZoom}
+
max zoom: {header.maxZoom}
+
+ min lon, min lat, max lon, max lat: {header.minLon}, {header.minLat} + , {header.maxLon}, {header.maxLat} +
+
center zoom: {header.centerZoom}
+
+ center lon, center lat: {header.centerLon}, {header.centerLat} +
+ + ) : null} diff --git a/app/src/stitches.config.ts b/app/src/stitches.config.ts index e8fd523..1a14d7a 100644 --- a/app/src/stitches.config.ts +++ b/app/src/stitches.config.ts @@ -1,60 +1,64 @@ import { createStitches, globalCss } from "@stitches/react"; export const { styled } = createStitches({ - theme: { - colors: { - black: "rgba(0, 0, 0)", - white: "rgba(236, 237, 238)", - hover: "#7180B9", - primary: "#3423A6", - primaryText: "white" - }, - fonts: { - sans: "Inter, sans-serif", - }, - fontSizes: { - 1: "12px", - 2: "14px", - 3: "16px", - 4: "20px", - 5: "24px", - 6: "32px", - }, - space: { - 1: "10px", - 2: "20px", - 3: "40px", - }, - sizes: { - 1: "4px", - 2: "8px", - 3: "16px", - 4: "32px", - 5: "64px", - 6: "128px", - }, - radii: { - 1: "2px", - 2: "4px", - 3: "8px", - round: "9999px", - }, - fontWeights: {}, - lineHeights: {}, - letterSpacings: {}, - borderWidths: {}, - borderStyles: {}, - shadows: {}, - zIndices: {}, - transitions: {}, - }, + theme: { + colors: { + black: "rgba(0, 0, 0)", + white: "rgba(236, 237, 238)", + hover: "#7180B9", + primary: "#3423A6", + primaryText: "white", + }, + fonts: { + sans: "Inter, sans-serif", + }, + fontSizes: { + 1: "12px", + 2: "14px", + 3: "16px", + 4: "20px", + 5: "24px", + 6: "32px", + }, + space: { + 1: "10px", + 2: "20px", + 3: "40px", + }, + sizes: { + 1: "4px", + 2: "8px", + 3: "16px", + 4: "32px", + 5: "64px", + 6: "128px", + }, + radii: { + 1: "2px", + 2: "4px", + 3: "8px", + round: "9999px", + }, + fontWeights: {}, + lineHeights: {}, + letterSpacings: {}, + borderWidths: {}, + borderStyles: {}, + shadows: {}, + zIndices: {}, + transitions: {}, + }, }); export const globalStyles = globalCss({ - "*": { - margin: 0, - padding: 0, - border: 0, - }, - body: { backgroundColor: "$black", color: "$white", fontFamily: "sans-serif" } + "*": { + margin: 0, + padding: 0, + border: 0, + }, + body: { + backgroundColor: "$black", + color: "$white", + fontFamily: "sans-serif", + }, });