fix(ui): surface inaccuracies, zoom reacts everywhere, points are centered

webui/src/views/Surface.svelte

@@ -51,10 +51,7 @@
 
     const svg = view.append("svg");
 
-    const xScale = d3
-      .scaleLinear()
-      .domain([0, width])
-      .range([-1, width + 1]);
+    const xScale = d3.scaleLinear().domain([0, width]).range([0, width]);
 
     const xAxis = d3
       .axisBottom(xScale)
@@ -62,10 +59,7 @@
       .tickSize(height)
       .tickPadding(5 - height);
 
-    const yScale = d3
-      .scaleLinear()
-      .domain([0, height])
-      .range([-1, height + 1]);
+    const yScale = d3.scaleLinear().domain([0, height]).range([0, height]);
 
     const yAxis = d3
       .axisRight(yScale)
@@ -91,10 +85,8 @@
         "transform",
         `translate(${transform.x}px, ${transform.y}px) scale(${transform.k})`
       );
-      points.style("transform-origin", "0 0");
       const allPoints = d3.selectAll(".point");
       allPoints.style("transform", `scale(${1 / transform.k})`);
-      allPoints.style("transform-origin", "0 0");
 
       gX.call(xAxis.scale(transform.rescaleX(xScale)));
       gY.call(yAxis.scale(transform.rescaleY(yScale)));
@@ -104,7 +96,7 @@
       svg.transition().duration(750).call(zoom.transform, d3.zoomIdentity);
     }
 
-    svg.call(zoom);
+    d3.select(".view").call(zoom);
   });
 </script>
 
@@ -121,7 +113,9 @@
     <div class="points">
       {#each points as point}
         <div class="point" style="left: {point.x}px; top: {point.y}px">
-          <UpObject point link address={point.address} />
+          <div class="inner">
+            <UpObject point link address={point.address} />
+          </div>
         </div>
       {/each}
     </div>
@@ -159,10 +153,22 @@
       height: 100%;
     }
 
+    :global(.tick text) {
+      color: var(--foreground-lightest);
+      font-size: 1rem;
+    }
+
+    .points {
+      transform-origin: 0 0;
+    }
+
     .point {
       position: absolute;
-      top: var(--y);
-      left: var(--x);
+      transform-origin: 0 0;
+
+      .inner {
+        transform: translate(-50%, -50%);
+      }
     }
   }
 </style>