qsharp-lang 1.15.4-dev → 1.16.1-dev

package/ux/circuit-vis/contextMenu.ts

@@ -66,7 +66,7 @@ const addContextMenuToHostElem = (
       const removeControlOption = _createContextMenuItem(
         "Remove control",
         () => {
-          removeControl(selectedOperation, dataWire);
+          removeControl(circuitEvents, selectedOperation, dataWire);
           circuitEvents.renderFn();
         },
       );

package/ux/circuit-vis/draggable.ts

@@ -3,9 +3,16 @@
 
 import { getMinMaxRegIdx } from "../../src/utils";
 import { ComponentGrid, Operation } from "./circuit";
-import { gatePadding, minGateWidth, startX } from "./constants";
-import { box, controlDot } from "./formatters/formatUtils";
+import {
+  gatePadding,
+  minGateWidth,
+  registerHeight,
+  regLineStart,
+  startX,
+} from "./constants";
+import { box, controlDot, line } from "./formatters/formatUtils";
 import { formatGate } from "./formatters/gateFormatter";
+import { qubitInput } from "./formatters/inputFormatter";
 import { toRenderData } from "./panel";
 import { Sqore } from "./sqore";
 import {
@@ -18,28 +25,29 @@ import {
 
 interface Context {
   container: HTMLElement;
+  svg: SVGElement;
   operationGrid: ComponentGrid;
   wireData: number[];
-  paddingY: number;
 }
 
 /**
- * Create dragzones elements for dragging on circuit.
+ * Create dropzones elements for dragging on circuit.
  *
  * @param container     HTML element for rendering visualization into
  * @param sqore         Sqore object
  */
-const createDragzones = (container: HTMLElement, sqore: Sqore): void => {
+const createDropzones = (container: HTMLElement, sqore: Sqore): void => {
   const svg = container.querySelector("svg[id]") as SVGElement;
 
   const context: Context = {
     container,
+    svg,
     operationGrid: sqore.circuit.componentGrid,
     wireData: getWireData(container),
-    paddingY: 20,
   };
   _addStyles(container, getWireData(container));
   _addDataWires(container);
+  svg.appendChild(_ghostQubitLayer(context));
   svg.appendChild(_dropzoneLayer(context));
 };
 
@@ -51,7 +59,7 @@ const createDragzones = (container: HTMLElement, sqore: Sqore): void => {
  * @param selectedOperation The operation that is being dragged.
  * @param isControl A boolean indicating if the ghost element is for a control operation.
  */
-const createGhostElement = (
+const createGateGhost = (
   ev: MouseEvent,
   container: HTMLElement,
   selectedOperation: Operation,
@@ -64,6 +72,63 @@ const createGhostElement = (
         return formatGate(ghostRenderData).cloneNode(true) as SVGElement;
       })();
 
+  _createGhostElement(container, ev, ghost, isControl);
+};
+
+/**
+ * Creates a ghost element for dragging a qubit line label.
+ *
+ * @param ev The mouse event that triggered the drag.
+ * @param container The HTML container element where the ghost will be appended.
+ * @param labelElem The SVGTextElement representing the qubit label to be cloned (including any tspans or formatting).
+ */
+const createQubitLabelGhost = (
+  ev: MouseEvent,
+  container: HTMLElement,
+  labelElem: SVGTextElement,
+) => {
+  const ghostGate: Operation = {
+    kind: "unitary",
+    gate: "?", // This will be replaced by the label elem
+    targets: [],
+  };
+  const ghostRenderData = toRenderData(ghostGate, 0, 0);
+  const ghost = formatGate(ghostRenderData) as SVGElement;
+
+  // Replace the placeholder text with the label element
+  const placeholderText = ghost.querySelector(".qs-maintext");
+  if (placeholderText) {
+    // Remove all children from placeholderText
+    while (placeholderText.firstChild) {
+      placeholderText.removeChild(placeholderText.firstChild);
+    }
+    // Clone and append each child from labelElem
+    for (const child of Array.from(labelElem.childNodes)) {
+      placeholderText.appendChild(child.cloneNode(true));
+    }
+    placeholderText.setAttribute(
+      "font-size",
+      labelElem.getAttribute("font-size") || "16",
+    );
+  }
+
+  _createGhostElement(container, ev, ghost, false);
+};
+
+/**
+ * Creates and appends a draggable "ghost" element to the DOM for visual feedback during drag operations.
+ *
+ * @param container The HTML container element to which the ghost element will be appended.
+ * @param ev The MouseEvent that triggered the drag, used to position the ghost.
+ * @param ghost The SVGElement representing the visual ghost to be dragged.
+ * @param isControl Boolean indicating if the ghost is for a control operation (affects sizing).
+ */
+const _createGhostElement = (
+  container: HTMLElement,
+  ev: MouseEvent,
+  ghost: SVGElement,
+  isControl: boolean,
+) => {
   // Generate svg element to wrap around ghost element
   const svgElem = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   svgElem.append(ghost);
@@ -92,7 +157,16 @@ const createGhostElement = (
 
     updateDivLeftTop(ev);
 
+    const cleanup = () => {
+      container.removeEventListener("mousemove", updateDivLeftTop);
+      document.removeEventListener("mouseup", cleanup);
+      if (divElem.parentNode) {
+        divElem.parentNode.removeChild(divElem);
+      }
+    };
+
     container.addEventListener("mousemove", updateDivLeftTop);
+    document.addEventListener("mouseup", cleanup);
   } else {
     console.error("container not found");
   }
@@ -103,17 +177,31 @@ const createGhostElement = (
  *
  * @param circuitSvg The SVG element representing the circuit.
  * @param wireData An array of y values corresponding to the circuit wires.
- * @param wireIndex The index of the wire for which the dropzone is created.
+ * @param wireIndex The index of the wire or the "between" position.
+ * @param isBetween If true, creates a dropzone between wires.
  * @returns The created dropzone SVG element.
  */
 const createWireDropzone = (
   circuitSvg: SVGElement,
   wireData: number[],
   wireIndex: number,
+  isBetween: boolean = false,
 ): SVGElement => {
-  const wireY = wireData[wireIndex];
   const svgWidth = Number(circuitSvg.getAttribute("width"));
   const paddingY = 20;
+  let wireY: number;
+
+  if (isBetween) {
+    // Dropzone BETWEEN wires (including before first and after last)
+    if (wireIndex === wireData.length) {
+      wireY = wireData[wireData.length - 1] + registerHeight / 2;
+    } else {
+      wireY = wireData[wireIndex] - registerHeight / 2;
+    }
+  } else {
+    // Dropzone ON the wire
+    wireY = wireData[wireIndex];
+  }
 
   const dropzone = box(
     0,
@@ -195,6 +283,55 @@ const _center = (elem: SVGGraphicsElement): { cX: number; cY: number } => {
   return { cX: x + width / 2, cY: y + height / 2 };
 };
 
+/**
+ * Create layer with ghost qubit wire and label
+ */
+const _ghostQubitLayer = (context: Context) => {
+  const { container, svg } = context;
+
+  const wireData = getWireData(container);
+
+  const svgHeight = Number(svg.getAttribute("height") || svg.clientHeight || 0);
+  const svgWidth = Number(svg.getAttribute("width") || svg.clientWidth || 800);
+  const ghostY = svgHeight;
+
+  const ghostLayer = document.createElementNS(
+    "http://www.w3.org/2000/svg",
+    "g",
+  );
+  ghostLayer.classList.add("ghost-qubit-layer");
+  ghostLayer.style.display = "none";
+  // Insert before dropzone-layer if possible, otherwise at end
+  const dzLayer = svg.querySelector("g.dropzone-layer");
+  if (dzLayer) {
+    svg.insertBefore(ghostLayer, dzLayer);
+  } else {
+    svg.appendChild(ghostLayer);
+  }
+
+  const ghostWire = line(
+    regLineStart,
+    ghostY,
+    svgWidth,
+    ghostY,
+    "qubit-wire ghost-opacity",
+  );
+
+  const ghostLabel = qubitInput(
+    ghostY,
+    wireData.length,
+    wireData.length.toString(),
+  );
+  ghostLabel.classList.add("ghost-opacity");
+  ghostLayer.appendChild(ghostWire);
+  ghostLayer.appendChild(ghostLabel);
+
+  context.svg.setAttribute("height", (svgHeight + registerHeight).toString());
+  svg.setAttribute("viewBox", `0 0 ${svgWidth} ${svgHeight + registerHeight}`);
+
+  return ghostLayer;
+};
+
 /**
  * Create dropzone layer with all dropzones populated
  */
@@ -206,97 +343,34 @@ const _dropzoneLayer = (context: Context) => {
   dropzoneLayer.classList.add("dropzone-layer");
   dropzoneLayer.style.display = "none";
 
-  const { container, operationGrid, wireData, paddingY } = context;
-  if (wireData.length === 0) return dropzoneLayer; // Return early if there are no wires
-  const elems = getHostElems(container);
-
-  // Get the widths of each column based on the elements in the column
-  const colWidths = elems.reduce(
-    (acc, elem) => {
-      const location = findLocation(elem);
-      if (!location) return acc;
-      const indexes = locationStringToIndexes(location);
-      // NOTE: for now, we are just going to consider the widths of top-level gates
-      if (indexes.length != 1) return acc;
-      const [colIndex] = indexes[0];
-
-      if (!acc[colIndex]) {
-        acc[colIndex] = Math.max(minGateWidth, elem.getBBox().width);
-      } else {
-        acc[colIndex] = Math.max(acc[colIndex], elem.getBBox().width);
-      }
-      return acc;
-    },
-    {} as Record<number, number>,
-  );
-
-  // Sort colWidths by colIndex
-  const sortedColWidths = Object.entries(colWidths)
-    .sort(([colIndexA], [colIndexB]) => Number(colIndexA) - Number(colIndexB))
-    .map(([colIndex, colWidth]) => [Number(colIndex), colWidth]);
+  const { container, operationGrid } = context;
 
-  // let xOffset = regLineStart;
-  let xOffset = startX - gatePadding;
-
-  /**
-   * Create a dropzone box element.
-   *
-   * @param wireIndex The index of the wire for which the dropzone is created.
-   * @param colIndex The index of the column where the dropzone is located.
-   * @param colWidth The width of the column.
-   * @param opIndex The index of the operation within the column.
-   * @param interColumn Whether the dropzone is between columns.
-   * @returns The created dropzone SVG element.
-   */
-  const _makeDropzoneBox = (
-    wireIndex: number,
-    colIndex: number,
-    colWidth: number,
-    opIndex: number,
-    interColumn: boolean,
-  ): SVGElement => {
-    const wireY = wireData[wireIndex];
-    let dropzone = null;
-    if (interColumn) {
-      dropzone = box(
-        xOffset - gatePadding * 2,
-        wireY - paddingY,
-        gatePadding * 4,
-        paddingY * 2,
-        "dropzone",
-      );
-    } else {
-      dropzone = box(
-        xOffset + gatePadding,
-        wireY - paddingY,
-        colWidth,
-        paddingY * 2,
-        "dropzone",
-      );
-    }
-    dropzone.setAttribute("data-dropzone-location", `${colIndex},${opIndex}`);
-    dropzone.setAttribute("data-dropzone-wire", `${wireIndex}`);
-    dropzone.setAttribute("data-dropzone-inter-column", `${interColumn}`);
-    return dropzone;
-  };
+  const colArray = getColumnOffsetsAndWidths(container);
+  const wireData = getWireData(container);
 
   // Create dropzones for each intersection of columns and wires
-  sortedColWidths.forEach(([colIndex, colWidth]) => {
+  for (let colIndex = 0; colIndex < colArray.length; colIndex++) {
     const columnOps = operationGrid[colIndex];
     let wireIndex = 0;
 
+    const makeBox = (opIndex: number, interColumn: boolean) =>
+      makeDropzoneBox(
+        colIndex,
+        opIndex,
+        colArray,
+        wireData,
+        wireIndex,
+        interColumn,
+      );
+
     columnOps.components.forEach((op, opIndex) => {
       const [minTarget, maxTarget] = getMinMaxRegIdx(op, wireData.length);
       // Add dropzones before the first target
       while (wireIndex <= maxTarget) {
-        dropzoneLayer.appendChild(
-          _makeDropzoneBox(wireIndex, colIndex, colWidth, opIndex, true),
-        );
+        dropzoneLayer.appendChild(makeBox(opIndex, true));
         // We don't want to make a central zone if the spot is occupied by a gate or its connecting lines
         if (wireIndex < minTarget) {
-          dropzoneLayer.appendChild(
-            _makeDropzoneBox(wireIndex, colIndex, colWidth, opIndex, false),
-          );
+          dropzoneLayer.appendChild(makeBox(opIndex, false));
         }
 
         wireIndex++;
@@ -305,36 +379,26 @@ const _dropzoneLayer = (context: Context) => {
 
     // Add dropzones after the last target
     while (wireIndex < wireData.length) {
-      dropzoneLayer.appendChild(
-        _makeDropzoneBox(
-          wireIndex,
-          colIndex,
-          colWidth,
-          columnOps.components.length,
-          true,
-        ),
-      );
-      dropzoneLayer.appendChild(
-        _makeDropzoneBox(
-          wireIndex,
-          colIndex,
-          colWidth,
-          columnOps.components.length,
-          false,
-        ),
-      );
+      dropzoneLayer.appendChild(makeBox(columnOps.components.length, true));
+      dropzoneLayer.appendChild(makeBox(columnOps.components.length, false));
 
       wireIndex++;
     }
-    xOffset += colWidth + gatePadding * 2;
-  });
+  }
 
   // This assumes column indexes are continuous
-  const endColIndex = sortedColWidths.length;
+  const endColIndex = colArray.length;
 
   // Add remaining dropzones to allow users to add gates to the end of the circuit
   for (let wireIndex = 0; wireIndex < wireData.length; wireIndex++) {
-    const dropzone = _makeDropzoneBox(wireIndex, endColIndex, 0, 0, true);
+    const dropzone = makeDropzoneBox(
+      endColIndex,
+      0,
+      colArray,
+      wireData,
+      wireIndex,
+      true,
+    );
     // Note: the last column should have the shape of an inter-column dropzone, but
     // we don't want to attach the inter-column logic to it.
     dropzone.setAttribute("data-dropzone-inter-column", "false");
@@ -344,9 +408,121 @@ const _dropzoneLayer = (context: Context) => {
   return dropzoneLayer;
 };
 
+/**
+ * Computes a sorted array of { xOffset, colWidth } for each column index.
+ * The array index corresponds to the column index.
+ *
+ * @param container The circuit container element.
+ * @returns Array where arr[colIndex] = { xOffset, colWidth }
+ */
+const getColumnOffsetsAndWidths = (
+  container: HTMLElement,
+): { xOffset: number; colWidth: number }[] => {
+  const elems = getHostElems(container);
+
+  if (elems.length === 0) {
+    return [];
+  }
+
+  // Compute column widths
+  const colWidths = elems.reduce(
+    (acc, elem) => {
+      const location = findLocation(elem);
+      if (!location) return acc;
+      const indexes = locationStringToIndexes(location);
+      if (indexes.length != 1) return acc;
+      const [colIndex] = indexes[0];
+      if (!acc[colIndex]) {
+        acc[colIndex] = Math.max(minGateWidth, elem.getBBox().width);
+      } else {
+        acc[colIndex] = Math.max(acc[colIndex], elem.getBBox().width);
+      }
+      return acc;
+    },
+    {} as Record<number, number>,
+  );
+
+  // Find the max colIndex to size the array
+  const maxColIndex = Math.max(...Object.keys(colWidths).map(Number), 0);
+
+  let xOffset = startX - gatePadding;
+  const result: { xOffset: number; colWidth: number }[] = [];
+  for (let colIndex = 0; colIndex <= maxColIndex; colIndex++) {
+    const colWidth = colWidths[colIndex] ?? minGateWidth;
+    result[colIndex] = { xOffset, colWidth };
+    xOffset += colWidth + gatePadding * 2;
+  }
+  return result;
+};
+
+/**
+ * Create a dropzone box element.
+ *
+ * @param colIndex The index of the column where the dropzone is located.
+ * @param opIndex The index of the operation within the column.
+ * @param colArray   An array of objects containing xOffset and colWidth for each column.
+ * @param wireData The array of wire Y positions.
+ * @param wireIndex The index of the wire for which the dropzone is created.
+ * @param interColumn Whether the dropzone is between columns.
+ *
+ * @returns The created dropzone SVG element.
+ */
+const makeDropzoneBox = (
+  colIndex: number,
+  opIndex: number,
+  colArray: { xOffset: number; colWidth: number }[],
+  wireData: number[],
+  wireIndex: number,
+  interColumn: boolean,
+): SVGElement => {
+  const wireY = wireData[wireIndex];
+  let xOffset: number, colWidth: number;
+
+  if (colArray[colIndex]) {
+    ({ xOffset, colWidth } = colArray[colIndex]);
+  } else {
+    // Compute offset for a hypothetical new last column
+    const last = colArray[colArray.length - 1];
+    if (last) {
+      xOffset = last.xOffset + last.colWidth + gatePadding * 2;
+    } else {
+      // If there are no columns at all, start at initial offset
+      xOffset = startX - gatePadding;
+    }
+    colWidth = minGateWidth;
+  }
+
+  const paddingY = 20;
+  let dropzone = null;
+  if (interColumn) {
+    dropzone = box(
+      xOffset - gatePadding * 2,
+      wireY - paddingY,
+      gatePadding * 4,
+      paddingY * 2,
+      "dropzone",
+    );
+  } else {
+    dropzone = box(
+      xOffset + gatePadding,
+      wireY - paddingY,
+      colWidth,
+      paddingY * 2,
+      "dropzone",
+    );
+  }
+  dropzone.setAttribute("data-dropzone-location", `${colIndex},${opIndex}`);
+  dropzone.setAttribute("data-dropzone-wire", `${wireIndex}`);
+  dropzone.setAttribute("data-dropzone-inter-column", `${interColumn}`);
+  return dropzone;
+};
+
 export {
-  createDragzones,
-  createGhostElement,
+  createDropzones,
+  createGateGhost,
+  createQubitLabelGhost,
   createWireDropzone,
   removeAllWireDropzones,
+  getColumnOffsetsAndWidths,
+  makeDropzoneBox,
 };