qsharp-lang 1.25.5-dev → 1.25.8-dev

package/ux/circuit.tsx

@@ -68,9 +68,9 @@ function ZoomableCircuit(props: {
   editor?: qviz.EditorHandlers;
 }) {
   const circuitDiv = useRef<HTMLDivElement>(null);
+  const qvizObj = useRef<ReturnType<typeof qviz.draw> | null>(null);
   const [zoomLevel, setZoomLevel] = useState(100);
   const [rendering, setRendering] = useState(true);
-  const [zoomOnResize, setZoomOnResize] = useState(true);
 
   const isEditable = props.editor != null;
 
@@ -85,36 +85,18 @@ function ZoomableCircuit(props: {
     if (rendering) {
       const container = circuitDiv.current!;
       // Draw the circuits - may take a while for large circuits
-      const svg = renderCircuits(
-        props.circuitGroup,
-        container,
-        props.renderLocations,
-        props.editor,
-      );
+      qvizObj.current = qviz.draw(props.circuitGroup, container, {
+        renderLocations: props.renderLocations,
+        editor: props.editor,
+        onZoomChange: (zoom) => {
+          setZoomLevel(zoom);
+        },
+      });
 
-      if (!isEditable) {
-        const initialZoom = calculateZoomToFit(container, svg as SVGElement);
-        // Set the initial zoom level
-        setZoomLevel(initialZoom);
-        // Resize the SVG to fit
-        updateWidth();
-      }
-
-      // Calculate the initial zoom level based on the container width
       // Disable "rendering" text
       setRendering(false);
-    } else if (!isEditable) {
-      // Initial drawing done, attach window resize handler
-      window.addEventListener("resize", onResize);
-      return () => {
-        window.removeEventListener("resize", onResize);
-      };
     }
-  }, [rendering, zoomOnResize]);
-
-  useEffect(() => {
-    updateWidth();
-  }, [zoomLevel]);
+  }, [rendering]);
 
   return (
     <div>
@@ -132,76 +114,11 @@ function ZoomableCircuit(props: {
     </div>
   );
 
-  /**
-   * Window resize handler to recalculate and set the zoom level
-   * based on the new window width.
-   */
-  function onResize() {
-    if (!zoomOnResize) {
-      return;
-    }
-
-    const [container, svg] = [circuitDiv.current, currentSvg()];
-    if (container && svg) {
-      // Recalculate the zoom level based on the container width
-      const initialZoom = calculateZoomToFit(container, svg);
-      // Set the zoom level
-      setZoomLevel(initialZoom);
-    }
-  }
-
-  /**
-   * Update the width of the SVG element based on the current zoom level.
-   */
-  function updateWidth() {
-    const svg = currentSvg();
-    if (svg) {
-      // The width attribute contains the true width, generated by qviz.
-      // 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`,
-      );
+  function userSetZoomLevel(zoomLevel: number) {
+    if (qvizObj.current && circuitDiv.current) {
+      qvizObj.current.userSetZoomLevel(zoomLevel);
     }
   }
-
-  function renderCircuits(
-    circuitGroup: qviz.CircuitGroup,
-    container: HTMLDivElement,
-    renderLocations?: (s: SourceLocation[]) => { title: string; href: string },
-    editor?: qviz.EditorHandlers,
-  ) {
-    qviz.draw(circuitGroup, container, { renderLocations, editor });
-    return container.getElementsByClassName("qviz")[0]!;
-  }
-
-  /**
-   * Calculate the zoom level that will fit the circuit into the current size of the container.
-   */
-  function calculateZoomToFit(container: HTMLDivElement, svg: 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;
-  }
-
-  function currentSvg(): SVGElement | undefined {
-    return circuitDiv.current?.querySelector(".qviz") ?? undefined;
-  }
-
-  function userSetZoomLevel(zoom: number) {
-    setZoomOnResize(false);
-    setZoomLevel(zoom);
-  }
 }
 
 function Unrenderable(props: {

package/ux/qsharp-circuit.css

@@ -180,59 +180,17 @@
     display: none;
   }
 
-  .classically-controlled-unknown {
-    opacity: 0.25;
-  }
-
-  .classically-controlled-one .classical-container,
-  .classically-controlled-one .classical-line {
-    stroke: #4059bd;
-    stroke-width: 1.3;
-    fill: #4059bd;
-    fill-opacity: 0.1;
-  }
-
-  .classically-controlled-zero .classical-container,
-  .classically-controlled-zero .classical-line {
-    stroke: #c40000;
-    stroke-width: 1.3;
-    fill: #c40000;
-    fill-opacity: 0.1;
-  }
-
-  .classically-controlled-btn {
-    cursor: pointer;
-  }
-
-  .classically-controlled-unknown .classically-controlled-btn {
-    fill: #e5e5e5;
-  }
-
-  .classically-controlled-one .classically-controlled-btn {
-    fill: #4059bd;
-  }
-
-  .classically-controlled-zero .classically-controlled-btn {
-    fill: #c40000;
+  .classically-controlled-btn circle {
+    fill: var(--main-background);
+    stroke-width: 1;
   }
 
   .classically-controlled-btn text {
     dominant-baseline: middle;
     text-anchor: middle;
     stroke: none;
-    font-family: Arial;
-  }
-
-  .classically-controlled-unknown .classically-controlled-btn text {
-    fill: #000000;
-  }
-
-  .classically-controlled-one .classically-controlled-btn text {
-    fill: #ffffff;
-  }
-
-  .classically-controlled-zero .classically-controlled-btn text {
-    fill: #ffffff;
+    font-family: "KaTeX_Main", "MJXZERO", "MJXTEX", sans-serif;
+    fill: var(--main-color);
   }
 
   .qviz .gate-collapse,
@@ -633,8 +591,7 @@
 }
 
 .state-edge:focus {
-  outline: 2px solid var(--qdk-focus-border);
-  outline-offset: -2px;
+  outline: none;
 }
 
 .state-edge-text {