Fix zoom behavior in circuit diagrams (#2979)

minestarks · web-flow · commit fcaf99fd7472 · 2026-02-27T19:18:45.000Z
- Expanding/collapsing a box via the UI should *not* change the zoom
level.
- When a box is expanded/collapsed via the UI, we should disable
zoom-to-fit if the window is subsequently resized.
- We already disable zoom-to-fit today, when the user sets the zoom
level manually throught the control. Keep that behavior.

To achieve this, we had to push all the zooming code in `circuit.tsx`
one level deeper into `circuit-vis/sqore.ts` so that we can be aware of
the expand/collapse interactions. IMO this makes the code more
well-encapsulated overall.

Tested VS code and widgets.

Co-authored-by: Mine Starks &lt;&gt;
diff --git a/source/npm/qsharp/test/circuits-cases/bell-pair.qs.snapshot.html b/source/npm/qsharp/test/circuits-cases/bell-pair.qs.snapshot.html
@@ -15,7 +15,6 @@
         class="qviz"
         width="341"
         height="308"
-        style="max-width: fit-content"
         viewBox="0 0 341 308"
       >
         <g class="qubit-input-states">
@@ -325,7 +324,6 @@
         class="qviz"
         width="341"
         height="344"
-        style="max-width: fit-content"
         viewBox="0 0 341 344"
       >
         <g class="qubit-input-states">
diff --git a/source/npm/qsharp/test/circuits-cases/conditionals.qsc.snapshot.html b/source/npm/qsharp/test/circuits-cases/conditionals.qsc.snapshot.html
@@ -260,7 +260,6 @@ <h2 class="title">Toolbox</h2>
           class="qviz"
           width="1386"
           height="4852"
-          style="max-width: fit-content"
           viewBox="0 0 1386 4852"
         >
           <g class="qubit-input-states">
diff --git a/source/npm/qsharp/test/circuits-cases/empty.qsc.snapshot.html b/source/npm/qsharp/test/circuits-cases/empty.qsc.snapshot.html
@@ -260,7 +260,6 @@ <h2 class="title">Toolbox</h2>
           class="qviz"
           width="92"
           height="116"
-          style="max-width: fit-content"
           viewBox="0 0 92 116"
         >
           <g class="qubit-input-states" />
diff --git a/source/npm/qsharp/test/circuits-cases/functors.qs.snapshot.html b/source/npm/qsharp/test/circuits-cases/functors.qs.snapshot.html
@@ -15,7 +15,6 @@
         class="qviz"
         width="320"
         height="204"
-        style="max-width: fit-content"
         viewBox="0 0 320 204"
       >
         <g class="qubit-input-states">
@@ -238,7 +237,6 @@
         class="qviz"
         width="354"
         height="240"
-        style="max-width: fit-content"
         viewBox="0 0 354 240"
       >
         <g class="qubit-input-states">
diff --git a/source/npm/qsharp/test/circuits-cases/gate-and-measure.qsc.snapshot.html b/source/npm/qsharp/test/circuits-cases/gate-and-measure.qsc.snapshot.html
@@ -260,7 +260,6 @@ <h2 class="title">Toolbox</h2>
           class="qviz"
           width="190"
           height="220"
-          style="max-width: fit-content"
           viewBox="0 0 190 220"
         >
           <g class="qubit-input-states">
diff --git a/source/npm/qsharp/test/circuits-cases/if-else.qsc.snapshot.html b/source/npm/qsharp/test/circuits-cases/if-else.qsc.snapshot.html
@@ -260,7 +260,6 @@ <h2 class="title">Toolbox</h2>
           class="qviz"
           width="560"
           height="396"
-          style="max-width: fit-content"
           viewBox="0 0 560 396"
         >
           <g class="qubit-input-states">
diff --git a/source/npm/qsharp/test/circuits-cases/intersecting-wires.qs.snapshot.html b/source/npm/qsharp/test/circuits-cases/intersecting-wires.qs.snapshot.html
@@ -15,7 +15,6 @@
         class="qviz"
         width="612"
         height="880"
-        style="max-width: fit-content"
         viewBox="0 0 612 880"
       >
         <g class="qubit-input-states">
@@ -1111,7 +1110,6 @@
         class="qviz"
         width="1128"
         height="1060"
-        style="max-width: fit-content"
         viewBox="0 0 1128 1060"
       >
         <g class="qubit-input-states">
diff --git a/source/npm/qsharp/test/circuits-cases/intrinsics.qs.snapshot.html b/source/npm/qsharp/test/circuits-cases/intrinsics.qs.snapshot.html
@@ -15,7 +15,6 @@
         class="qviz"
         width="508"
         height="204"
-        style="max-width: fit-content"
         viewBox="0 0 508 204"
       >
         <g class="qubit-input-states">
@@ -233,7 +232,6 @@
         class="qviz"
         width="508"
         height="240"
-        style="max-width: fit-content"
         viewBox="0 0 508 240"
       >
         <g class="qubit-input-states">
diff --git a/source/npm/qsharp/test/circuits-cases/lambda.qs.snapshot.html b/source/npm/qsharp/test/circuits-cases/lambda.qs.snapshot.html
@@ -15,7 +15,6 @@
         class="qviz"
         width="350"
         height="204"
-        style="max-width: fit-content"
         viewBox="0 0 350 204"
       >
         <g class="qubit-input-states">
@@ -235,7 +234,6 @@
         class="qviz"
         width="386"
         height="240"
-        style="max-width: fit-content"
         viewBox="0 0 386 240"
       >
         <g class="qubit-input-states">
diff --git a/source/npm/qsharp/test/circuits-cases/loops.qs.snapshot.html b/source/npm/qsharp/test/circuits-cases/loops.qs.snapshot.html
@@ -15,7 +15,6 @@
         class="qviz"
         width="408"
         height="1072"
-        style="max-width: fit-content"
         viewBox="0 0 408 1072"
       >
         <g class="qubit-input-states">
@@ -1151,7 +1150,6 @@
         class="qviz"
         width="1860"
         height="1144"
-        style="max-width: fit-content"
         viewBox="0 0 1860 1144"
       >
         <g class="qubit-input-states">
diff --git a/source/npm/qsharp/test/circuits-cases/nested-callables.qs.snapshot.html b/source/npm/qsharp/test/circuits-cases/nested-callables.qs.snapshot.html
@@ -15,7 +15,6 @@
         class="qviz"
         width="338"
         height="448"
-        style="max-width: fit-content"
         viewBox="0 0 338 448"
       >
         <g class="qubit-input-states">
@@ -527,7 +526,6 @@
         class="qviz"
         width="870"
         height="592"
-        style="max-width: fit-content"
         viewBox="0 0 870 592"
       >
         <g class="qubit-input-states">
diff --git a/source/npm/qsharp/test/circuits-cases/ops-with-gap-ranges.qs.snapshot.html b/source/npm/qsharp/test/circuits-cases/ops-with-gap-ranges.qs.snapshot.html
@@ -15,7 +15,6 @@
         class="qviz"
         width="316"
         height="1140"
-        style="max-width: fit-content"
         viewBox="0 0 316 1140"
       >
         <g class="qubit-input-states">
@@ -1387,7 +1386,6 @@
         class="qviz"
         width="386"
         height="1212"
-        style="max-width: fit-content"
         viewBox="0 0 386 1212"
       >
         <g class="qubit-input-states">
diff --git a/source/npm/qsharp/test/circuits-cases/qubit-reuse.qs.snapshot.html b/source/npm/qsharp/test/circuits-cases/qubit-reuse.qs.snapshot.html
@@ -15,7 +15,6 @@
         class="qviz"
         width="418"
         height="256"
-        style="max-width: fit-content"
         viewBox="0 0 418 256"
       >
         <g class="qubit-input-states">
@@ -316,7 +315,6 @@
         class="qviz"
         width="418"
         height="256"
-        style="max-width: fit-content"
         viewBox="0 0 418 256"
       >
         <g class="qubit-input-states">
diff --git a/source/npm/qsharp/test/circuits-cases/two-qubit-gates.qs.snapshot.html b/source/npm/qsharp/test/circuits-cases/two-qubit-gates.qs.snapshot.html
@@ -15,7 +15,6 @@
         class="qviz"
         width="382"
         height="308"
-        style="max-width: fit-content"
         viewBox="0 0 382 308"
       >
         <g class="qubit-input-states">
@@ -366,7 +365,6 @@
         class="qviz"
         width="382"
         height="308"
-        style="max-width: fit-content"
         viewBox="0 0 382 308"
       >
         <g class="qubit-input-states">
diff --git a/source/npm/qsharp/ux/circuit-vis/index.ts b/source/npm/qsharp/ux/circuit-vis/index.ts
@@ -24,9 +24,17 @@ export const draw = (
   circuitGroup: CircuitGroup,
   container: HTMLElement,
   options: DrawOptions = {},
-): void => {
+): {
+  userSetZoomLevel: (zoomLevel: number) => void;
+} => {
   const sqore = new Sqore(circuitGroup, options);
   sqore.draw(container);
+  return {
+    userSetZoomLevel: (zoomLevel: number) => {
+      sqore.zoomOnResize = false;
+      sqore.updateZoomLevel(zoomLevel);
+    },
+  };
 };
 
 export type { DrawOptions, EditorHandlers } from "./sqore.js";
diff --git a/source/npm/qsharp/ux/circuit-vis/sqore.ts b/source/npm/qsharp/ux/circuit-vis/sqore.ts
@@ -64,9 +64,15 @@ export type EditorHandlers = {
 export type DrawOptions = {
   renderDepth?: number;
   renderLocations?: (l: SourceLocation[]) => { title: string; href: string };
-  // When provided, enables editing behaviors (dropzones, run button, etc.) and
-  // requires the callbacks necessary to support those behaviors.
+  /**
+   * When provided, enables editing behaviors (dropzones, run button, etc.) and
+   * requires the callbacks necessary to support those behaviors.
+   */
   editor?: EditorHandlers;
+  /**
+   * When provided, enables zoom-to-fit behavior. The callback is called with the new zoom level whenever it changes.
+   */
+  onZoomChange?: (zoomLevel: number) => void;
 };
 
 /**
@@ -76,6 +82,9 @@ export class Sqore {
   circuit: Circuit;
   gateRegistry: GateRegistry = {};
   renderDepth: number = this.options.renderDepth ?? 0;
+  container: HTMLElement | null = null;
+  zoomOnResize: boolean = true;
+  zoomLevel: number = 100;
   /**
    * Initializes Sqore object.
    *
@@ -104,11 +113,86 @@ export class Sqore {
    *
    * @param container HTML element for rendering visualization into.
    */
-  draw(container: HTMLElement): void {
+  draw(container: HTMLElement) {
     // Inject into container
     if (container == null) throw new Error(`Container not provided.`);
 
+    this.container = container;
+
     this.renderCircuit(container);
+
+    if (this.options.onZoomChange != null) {
+      this.zoomToFit();
+      window.addEventListener("resize", () => this.onResize());
+    }
+  }
+
+  /**
+   * Window resize handler to recalculate and set the zoom level
+   * based on the new window width.
+   */
+  private onResize() {
+    if (!this.zoomOnResize) {
+      return;
+    }
+
+    // Recalculate the zoom level based on the container width
+    this.zoomToFit();
+  }
+
+  /**
+   * Calculate and set the zoom level to fit the circuit within the container.
+   */
+  private zoomToFit() {
+    if (this.options.onZoomChange == null || this.container == null) {
+      return;
+    }
+    const zoomLevel = this.calculateZoomToFit(this.container);
+    this.updateZoomLevel(zoomLevel);
+    this.options.onZoomChange?.(zoomLevel);
+  }
+
+  /**
+   * Update the zoom level setting and apply it to the SVG element.
+   */
+  updateZoomLevel(zoomLevel: number) {
+    this.zoomLevel = zoomLevel;
+    const svg = this.container?.querySelector("svg.qviz");
+    if (svg) {
+      this.updateSvgWidth(svg as SVGElement, zoomLevel);
+    }
+  }
+
+  /**
+   * Update the width of the SVG element based on the zoom level.
+   */
+  updateSvgWidth(svg: SVGElement, zoomLevel: number) {
+    // The width attribute contains the true width.
+    // We'll leave this attribute untouched, so we can use it again if the
+    // zoom level is ever updated.
+    const width = svg.getAttribute("width")!;
+
+    // We'll set the width in the style attribute to (true width * zoom level).
+    // This value takes precedence over the true width in the width attribute.
+    svg.setAttribute(
+      "style",
+      `max-width: ${width}; width: ${(parseInt(width) * (zoomLevel || 100)) / 100}; height: auto`,
+    );
+  }
+
+  /**
+   * Calculate the zoom level that will fit the circuit into the current size of the container.
+   */
+  calculateZoomToFit(container: HTMLElement): number {
+    const svg = container.querySelector("svg.qviz") as SVGElement;
+    const containerWidth = container.clientWidth;
+    // width and height are the true dimensions generated by qviz
+    const width = parseInt(svg.getAttribute("width")!);
+    const height = svg.getAttribute("height")!;
+
+    svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+    const zoom = Math.min(Math.ceil((containerWidth / width) * 100), 100);
+    return zoom;
   }
 
   /**
@@ -139,6 +223,9 @@ export class Sqore {
     const composedSqore: ComposedSqore = this.compose(_circuit);
     const svg: SVGElement = this.generateSvg(composedSqore);
     this.setViewBox(svg);
+    if (this.options.onZoomChange != null) {
+      this.updateSvgWidth(svg, this.zoomLevel);
+    }
     const previousSvg = container.querySelector("svg.qviz");
     if (previousSvg == null) {
       container.appendChild(svg);
@@ -308,7 +395,6 @@ export class Sqore {
     svg.setAttribute("class", "qviz");
     svg.setAttribute("width", width.toString());
     svg.setAttribute("height", height.toString());
-    svg.style.setProperty("max-width", "fit-content");
 
     // Add styles
     document.documentElement.style.setProperty(
@@ -390,6 +476,7 @@ export class Sqore {
           } else if (ctrl.classList.contains("gate-expand")) {
             this.expandOperation(circuit.componentGrid, gateId);
           }
+          this.zoomOnResize = false;
           this.renderCircuit(container, circuit);
 
           ev.stopPropagation();
diff --git a/source/npm/qsharp/ux/circuit.tsx b/source/npm/qsharp/ux/circuit.tsx

Original file line number	Diff line number	Diff line change
`@@ -260,7 +260,6 @@ <h2 class="title">Toolbox</h2>`
`260`	`260`	`class="qviz"`
`261`	`261`	`width="1386"`
`262`	`262`	`height="4852"`
`263`		`- style="max-width: fit-content"`
`264`	`263`	`viewBox="0 0 1386 4852"`
`265`	`264`	`>`
`266`	`265`	`<g class="qubit-input-states">`