[shared-ui] Fix main graph zooming (#3856)

#3836
breadboard-ai · Dec 3, 2024 · 3ffdfd8 · 3ffdfd8
1 parent cb8ce91
commit 3ffdfd8
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git a/.changeset/famous-files-brake.md b/.changeset/famous-files-brake.md
@@ -0,0 +1,5 @@
+---
+"@breadboard-ai/shared-ui": patch
+---
+
+Fix main graph zooming
diff --git a/packages/shared-ui/src/elements/editor/graph-renderer.ts b/packages/shared-ui/src/elements/editor/graph-renderer.ts
@@ -1225,7 +1225,7 @@ export class GraphRenderer extends LitElement {
   }
 
   zoomToNode(id: string, subGraphId: string | null, offset = 0) {
-    this.zoomToFit(0, subGraphId);
+    this.zoomToFit(0, subGraphId, subGraphId !== null);
 
     for (const graph of this.#container.children) {
       if (!(graph instanceof Graph) || !graph.visible) {
@@ -1245,16 +1245,21 @@ export class GraphRenderer extends LitElement {
       const graphNodeBounds = graphNode.getBounds();
       const rendererBounds = this.getBoundingClientRect();
 
+      const graphMidX =
+        (graphBounds.x + graphBounds.width / 2) / rendererBounds.width;
+      const graphMidY =
+        (graphBounds.y + graphBounds.height / 2) / rendererBounds.height;
+
       const xShift =
-        (0.5 +
+        (graphMidX +
           offset -
           (graphNodeBounds.x - graphBounds.x + graphNodeBounds.width * 0.5) /
             graphBounds.width) *
         graphBounds.width;
       this.#container.x += xShift;
 
       const yShift =
-        (0.5 -
+        (graphMidY -
           (graphNodeBounds.y - graphBounds.y + graphNodeBounds.height * 0.5) /
             graphBounds.height) *
         graphBounds.height;
@@ -1285,7 +1290,11 @@ export class GraphRenderer extends LitElement {
     }
   }
 
-  zoomToFit(reduceRenderBoundsWidth = 0, subGraphId: string | null = null) {
+  zoomToFit(
+    reduceRenderBoundsWidth = 0,
+    subGraphId: string | null = null,
+    includeSubGraphs = true
+  ) {
     this.#container.position.set(0, 0);
     this.#container.scale.set(1, 1);
 
@@ -1297,6 +1306,10 @@ export class GraphRenderer extends LitElement {
         continue;
       }
 
+      if (!includeSubGraphs && graph.subGraphId) {
+        continue;
+      }
+
       if (subGraphId && graph.subGraphId !== subGraphId) {
         continue;
       }