fix(webui): surface starts at center

webui/src/components/SurfaceColumn.svelte

@@ -3,7 +3,7 @@
   import api from "../lib/api";
   import Selector from "./utils/Selector.svelte";
   import { onMount, tick } from "svelte";
-  import type { ZoomTransform } from "d3";
+  import type { ZoomBehavior, ZoomTransform } from "d3";
   import Spinner from "./utils/Spinner.svelte";
   import UpObjectCard from "./display/UpObjectCard.svelte";
   import BlobPreview from "./display/BlobPreview.svelte";
@@ -29,6 +29,8 @@
   let currentY = NaN;
 
   let loaded = false;
+  let zoom: ZoomBehavior<Element, unknown> | undefined;
+  let view: any;
   let viewEl: HTMLElement | undefined;
   let viewHeight = 0;
   let viewWidth = 0;
@@ -83,7 +85,7 @@
         viewWidth,
         viewHeight,
       );
-      const view = d3.select(selector);
+      view = d3.select(selector);
       const svg = view.select("svg");
       if (svg.empty()) {
         throw new Error(
@@ -120,14 +122,7 @@
       const gX = svg.append("g").call(xAxis);
       const gY = svg.append("g").call(yAxis);
 
-      const zoom = d3
-        .zoom()
-        // .scaleExtent([1, 40])
-        // .translateExtent([
-        //   [-100, -100],
-        //   [width + 90, height + 100],
-        // ])
-        .on("zoom", zoomed);
+      zoom = d3.zoom().on("zoom", zoomed);
 
       function zoomed({ transform }: { transform: ZoomTransform }) {
         const points = view.select(".content");
@@ -162,6 +157,9 @@
         .on("dblclick.zoom", (_ev: MouseEvent) => {
           selectorCoords = [currentX, currentY];
         });
+
+      zoom.translateBy(view, viewWidth / 2, viewHeight / -2);
+
       loaded = true;
     }