mirrors/PMTiles
1
0
Fork 0
mirror of https://github.com/protomaps/PMTiles.git synced 2026-02-04 10:51:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

prettier formatting for app/

Browse Source
This commit is contained in:
Brandon Liu
2023-03-12 13:34:50 +08:00
parent 802f6aea4e
commit 84fad95cde
7 changed files with 132 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/src/Inspector.tsx
View File

@@ -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: {
<td>{y}</td>
<td>{props.entry.offset}</td>
<td>{props.entry.length}</td>
<td>{props.entry.runLength == 0 ? "directory" : `tile(${props.entry.runLength})`}</td>
<td>
{props.entry.runLength == 0
? "directory"
: `tile(${props.entry.runLength})`}
</td>
</TableRow>
);
};
@@ -289,8 +293,8 @@ const RasterPreview = (props: { file: PMTiles; entry: Entry }) => {
return <img src={imgSrc}></img>;
};
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";

8
app/src/Loader.tsx
View File

@@ -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, {

57
app/src/Metadata.tsx
View File

@@ -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 (
<Padded>
{ header ? <Heading>
<div>root directory: offset={header.rootDirectoryOffset} len={header.rootDirectoryLength}</div>
<div>metadata: offset={header.jsonMetadataOffset} len={header.jsonMetadataLength}</div>
<div>leaf directories: offset={header.leafDirectoryOffset} len={header.leafDirectoryLength}</div>
<div>tile data: offset={header.tileDataOffset} len={header.tileDataLength}</div>
<div>num addressed tiles: {header.numAddressedTiles}</div>
<div>num tile entries: {header.numTileEntries}</div>
<div>num tile contents: {header.numTileContents}</div>
<div>clustered: {header.clustered ? "true" : "false"}</div>
<div>internal compression: {header.internalCompression}</div>
<div>tile compression: {header.tileCompression}</div>
<div>tile type: {header.tileType}</div>
<div>min zoom: {header.minZoom}</div>
<div>max zoom: {header.maxZoom}</div>
<div>min lon, min lat, max lon, max lat: {header.minLon}, {header.minLat}, {header.maxLon}, {header.maxLat}</div>
<div>center zoom: {header.centerZoom}</div>
<div>center lon, center lat: {header.centerLon}, {header.centerLat}</div>
</Heading> : null }
{header ? (
<Heading>
<div>
root directory: offset={header.rootDirectoryOffset} len=
{header.rootDirectoryLength}
</div>
<div>
metadata: offset={header.jsonMetadataOffset} len=
{header.jsonMetadataLength}
</div>
<div>
leaf directories: offset={header.leafDirectoryOffset} len=
{header.leafDirectoryLength}
</div>
<div>
tile data: offset={header.tileDataOffset} len=
{header.tileDataLength}
</div>
<div>num addressed tiles: {header.numAddressedTiles}</div>
<div>num tile entries: {header.numTileEntries}</div>
<div>num tile contents: {header.numTileContents}</div>
<div>clustered: {header.clustered ? "true" : "false"}</div>
<div>internal compression: {header.internalCompression}</div>
<div>tile compression: {header.tileCompression}</div>
<div>tile type: {header.tileType}</div>
<div>min zoom: {header.minZoom}</div>
<div>max zoom: {header.maxZoom}</div>
<div>
min lon, min lat, max lon, max lat: {header.minLon}, {header.minLat}
, {header.maxLon}, {header.maxLat}
</div>
<div>center zoom: {header.centerZoom}</div>
<div>
center lon, center lat: {header.centerLon}, {header.centerLat}
</div>
</Heading>
) : null}
<JsonViewer value={metadata} theme="dark" defaultInspectDepth={1} />
</Padded>

110
app/src/stitches.config.ts
View File

@@ -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",
},
});