From ae4840fdf18be534330e2a1d7d4540ce3de44080 Mon Sep 17 00:00:00 2001
From: Brandon Liu <bdon@users.noreply.github.com>
Date: Fri, 25 Apr 2025 11:29:11 +0800
Subject: [PATCH] app: fix tile border display [#49] (#558)

* clean up comments and console
---
 app/src/PageArchive.tsx |  1 -
 app/src/PageTile.tsx    | 22 ++++++++++------------
 app/src/index.css       |  8 ++++++++
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/app/src/PageArchive.tsx b/app/src/PageArchive.tsx
index 5987709..90355e8 100644
--- a/app/src/PageArchive.tsx
+++ b/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;
diff --git a/app/src/PageTile.tsx b/app/src/PageTile.tsx
index f407bb5..9b07b3f 100644
--- a/app/src/PageTile.tsx
+++ b/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;
 
diff --git a/app/src/index.css b/app/src/index.css
index 9a0d880..a2b2d21 100644
--- a/app/src/index.css
+++ b/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);
 	}