qsharp-lang 1.14.5-dev → 1.15.1-dev

package/ux/circuit-vis/draggable.ts

@@ -0,0 +1,352 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import { getMinMaxRegIdx } from "../../src/utils";
+import { ComponentGrid, Operation } from "./circuit";
+import { gatePadding, minGateWidth, startX } from "./constants";
+import { box, controlDot } from "./formatters/formatUtils";
+import { formatGate } from "./formatters/gateFormatter";
+import { toMetadata } from "./panel";
+import { Sqore } from "./sqore";
+import {
+  findLocation,
+  getHostElems,
+  getToolboxElems,
+  getWireData,
+  locationStringToIndexes,
+} from "./utils";
+
+interface Context {
+  container: HTMLElement;
+  operationGrid: ComponentGrid;
+  wireData: number[];
+  paddingY: number;
+}
+
+/**
+ * Create dragzones 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 svg = container.querySelector("svg[id]") as SVGElement;
+
+  const context: Context = {
+    container,
+    operationGrid: sqore.circuit.componentGrid,
+    wireData: getWireData(container),
+    paddingY: 20,
+  };
+  _addStyles(container, getWireData(container));
+  _addDataWires(container);
+  svg.appendChild(_dropzoneLayer(context));
+};
+
+/**
+ * Creates a ghost element for dragging operations in the circuit visualization.
+ *
+ * @param ev The mouse event that triggered the creation of the ghost element.
+ * @param container The HTML container element where the ghost element will be appended.
+ * @param selectedOperation The operation that is being dragged.
+ * @param isControl A boolean indicating if the ghost element is for a control operation.
+ */
+const createGhostElement = (
+  ev: MouseEvent,
+  container: HTMLElement,
+  selectedOperation: Operation,
+  isControl: boolean,
+) => {
+  const ghost = isControl
+    ? controlDot(20, 20)
+    : (() => {
+        const ghostMetadata = toMetadata(selectedOperation, 0, 0);
+        return formatGate(ghostMetadata).cloneNode(true) as SVGElement;
+      })();
+
+  // Generate svg element to wrap around ghost element
+  const svgElem = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svgElem.append(ghost);
+
+  // Generate div element to wrap around svg element
+  const divElem = document.createElement("div");
+  divElem.classList.add("ghost");
+  divElem.appendChild(svgElem);
+  divElem.style.position = "fixed";
+
+  if (container) {
+    container.appendChild(divElem);
+
+    // Now that the element is appended to the DOM, get its dimensions
+    const [ghostWidth, ghostHeight] = isControl
+      ? [40, 40]
+      : (() => {
+          const ghostRect = ghost.getBoundingClientRect();
+          return [ghostRect.width, ghostRect.height];
+        })();
+
+    const updateDivLeftTop = (ev: MouseEvent) => {
+      divElem.style.left = `${ev.clientX - ghostWidth / 2}px`;
+      divElem.style.top = `${ev.clientY - ghostHeight / 2}px`;
+    };
+
+    updateDivLeftTop(ev);
+
+    container.addEventListener("mousemove", updateDivLeftTop);
+  } else {
+    console.error("container not found");
+  }
+};
+
+/**
+ * Create a dropzone element that spans the length of the wire.
+ *
+ * @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.
+ * @returns The created dropzone SVG element.
+ */
+const createWireDropzone = (
+  circuitSvg: SVGElement,
+  wireData: number[],
+  wireIndex: number,
+): SVGElement => {
+  const wireY = wireData[wireIndex];
+  const svgWidth = Number(circuitSvg.getAttribute("width"));
+  const paddingY = 20;
+
+  const dropzone = box(
+    0,
+    wireY - paddingY,
+    svgWidth,
+    paddingY * 2,
+    "dropzone-full-wire",
+  );
+  dropzone.setAttribute("data-dropzone-wire", `${wireIndex}`);
+
+  return dropzone;
+};
+
+/**
+ * Remove all wire dropzones.
+ *
+ * @param circuitSvg The SVG element representing the circuit.
+ */
+const removeAllWireDropzones = (circuitSvg: SVGElement) => {
+  const dropzones = circuitSvg.querySelectorAll(".dropzone-full-wire");
+  dropzones.forEach((elem) => {
+    elem.parentNode?.removeChild(elem);
+  });
+};
+
+/**
+ * Add data-wire to all host elements
+ */
+const _addDataWires = (container: HTMLElement) => {
+  const elems = getHostElems(container);
+  elems.forEach((elem) => {
+    const { cY } = _center(elem);
+    // i.e. cY = 40, wireData returns [40, 100, 140, 180]
+    // dataWire will return 0, which is the index of 40 in wireData
+    const dataWire = getWireData(container).findIndex((y) => y === cY);
+    if (dataWire !== -1) {
+      elem.setAttribute("data-wire", `${dataWire}`);
+    } else {
+      const { y, height } = elem.getBBox();
+      const wireData = getWireData(container);
+      const groupDataWire = wireData.findIndex(
+        (wireY) => wireY > y && wireY < y + height,
+      );
+      elem.setAttribute("data-wire", `${groupDataWire}`);
+    }
+  });
+};
+
+/**
+ * Create a list of wires that element is spanning on
+ * i.e. Gate 'Foo' spans on wire 0 (y=40), 1 (y=100), and 2 (y=140)
+ *      Function returns [40, 100, 140]
+ */
+const _wireYs = (elem: SVGGraphicsElement, wireData: number[]): number[] => {
+  const { y, height } = elem.getBBox();
+  return wireData.filter((wireY) => wireY > y && wireY < y + height);
+};
+
+/**
+ * Add custom styles specific to this module
+ */
+const _addStyles = (container: HTMLElement, wireData: number[]): void => {
+  const elems = getHostElems(container);
+  elems.forEach((elem) => {
+    if (_wireYs(elem, wireData).length < 2) elem.style.cursor = "grab";
+  });
+
+  const toolBoxElems = getToolboxElems(container);
+  toolBoxElems.forEach((elem) => {
+    elem.style.cursor = "grab";
+  });
+};
+
+/**
+ * Find center point of element
+ */
+const _center = (elem: SVGGraphicsElement): { cX: number; cY: number } => {
+  const { x, y, width, height } = elem.getBBox();
+  return { cX: x + width / 2, cY: y + height / 2 };
+};
+
+/**
+ * Create dropzone layer with all dropzones populated
+ */
+const _dropzoneLayer = (context: Context) => {
+  const dropzoneLayer = document.createElementNS(
+    "http://www.w3.org/2000/svg",
+    "g",
+  );
+  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]);
+
+  // 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;
+  };
+
+  // Create dropzones for each intersection of columns and wires
+  sortedColWidths.forEach(([colIndex, colWidth]) => {
+    const columnOps = operationGrid[colIndex];
+    let wireIndex = 0;
+
+    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),
+        );
+        // 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),
+          );
+        }
+
+        wireIndex++;
+      }
+    });
+
+    // 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,
+        ),
+      );
+
+      wireIndex++;
+    }
+    xOffset += colWidth + gatePadding * 2;
+  });
+
+  // This assumes column indexes are continuous
+  const endColIndex = sortedColWidths.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);
+    // 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");
+    dropzoneLayer.appendChild(dropzone);
+  }
+
+  return dropzoneLayer;
+};
+
+export {
+  createDragzones,
+  createGhostElement,
+  createWireDropzone,
+  removeAllWireDropzones,
+};