app: fix tile border display [#49] (#558)

* clean up comments and console

app/src/PageArchive.tsx

@@ -347,7 +347,6 @@ function DirectoryTable(props: {
 
 function ArchiveView(props: { genericTileset: Accessor<Tileset> }) {
   const tileset = createMemo(() => {
-    console.log("memo!");
     const g = props.genericTileset();
     if (g instanceof PMTilesTileset) {
       return g as PMTilesTileset;

app/src/PageTile.tsx

@@ -128,9 +128,6 @@ function ZoomableTile(props: {
     const height = containerRef.clientHeight;
     const width = containerRef.clientWidth;
 
-    // const width = 800;
-    // const height = 300;
-
     const x = scaleLinear()
       .domain([-1000, 4096 + 1000])
       .range([-1000, 4096 + 1000]);
@@ -158,15 +155,6 @@ function ZoomableTile(props: {
       undefined
     >;
     view = svg.append("g");
-    view
-      .append("rect")
-      .attr("width", 4096)
-      .attr("height", 4096)
-      .attr("x", 0)
-      .attr("y", 0)
-      .attr("fill", "none")
-      .attr("strokeWidth", "1")
-      .attr("stroke", "blue");
     const gX = svg.append("g").attr("class", "axis axis--x").call(xAxis);
     const gY = svg.append("g").attr("class", "axis axis--y").call(yAxis);
 
@@ -239,6 +227,16 @@ function ZoomableTile(props: {
 
   createEffect(async () => {
     view.selectAll("*").remove();
+    view
+      .append("rect")
+      .attr("width", 4096)
+      .attr("height", 4096)
+      .attr("x", 0)
+      .attr("y", 0)
+      .attr("fill", "none")
+      .attr("class", "tile-border")
+      .attr("strokeWidth", "1");
+
     const tile = parsedTile();
     if (!tile) return;
 

app/src/index.css

@@ -9,6 +9,10 @@ json-viewer {
 	padding: 4px;
 }
 
+.tile-border {
+	stroke: black;
+}
+
 @theme {
 	--color-purple: #3131dc;
 	--color-slate: #e7e7f9;
@@ -81,6 +85,10 @@ json-viewer {
 }
 
 @media (prefers-color-scheme: dark) {
+	.tile-border {
+		stroke: white;
+	}
+
 	.maplibregl-ctrl.maplibregl-ctrl-group {
 		filter: invert(1);
 	}