qsharp-lang 1.13.1-dev → 1.13.3-dev

package/ux/circuit-vis/formatters/formatUtils.ts

@@ -0,0 +1,220 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import { labelFontSize, svgNS } from "../constants";
+
+// Helper functions for basic SVG components
+
+/**
+ * Create an SVG element.
+ *
+ * @param type The type of element to be created.
+ * @param attributes The attributes that define the element.
+ *
+ * @returns SVG element.
+ */
+export const createSvgElement = (
+  type: string,
+  attributes: { [attr: string]: string } = {},
+): SVGElement => {
+  const el: SVGElement = document.createElementNS(svgNS, type);
+  Object.entries(attributes).forEach(([attrName, attrVal]) =>
+    el.setAttribute(attrName, attrVal),
+  );
+  return el;
+};
+
+/**
+ * Given an array of SVG elements, group them as an SVG group using the `<g>` tag.
+ *
+ * @param svgElems   Array of SVG elements.
+ * @param attributes Key-value pairs of attributes and they values.
+ *
+ * @returns SVG element for grouped elements.
+ */
+export const group = (
+  svgElems: SVGElement[],
+  attributes: { [attr: string]: string } = {},
+): SVGElement => {
+  const el: SVGElement = createSvgElement("g", attributes);
+  svgElems.forEach((child: SVGElement) => el.appendChild(child));
+  return el;
+};
+
+/**
+ * Generate an SVG line.
+ *
+ * @param x1        x coord of starting point of line.
+ * @param y1        y coord of starting point of line.
+ * @param x2        x coord of ending point of line.
+ * @param y2        y coord fo ending point of line.
+ * @param className Class name of element.
+ *
+ * @returns SVG element for line.
+ */
+export const line = (
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number,
+  className?: string,
+): SVGElement => {
+  const attrs: { [attr: string]: string } = {
+    x1: x1.toString(),
+    x2: x2.toString(),
+    y1: y1.toString(),
+    y2: y2.toString(),
+  };
+  if (className != null) attrs["class"] = className;
+  return createSvgElement("line", attrs);
+};
+
+/**
+ * Generate an SVG circle.
+ *
+ * @param x      x coord of circle.
+ * @param y      y coord of circle.
+ * @param radius Radius of circle.
+ *
+ * @returns SVG element for circle.
+ */
+export const circle = (
+  x: number,
+  y: number,
+  radius: number,
+  className?: string,
+): SVGElement => {
+  const attrs: { [attr: string]: string } = {
+    cx: x.toString(),
+    cy: y.toString(),
+    r: radius.toString(),
+  };
+  if (className != null) attrs["class"] = className;
+  return createSvgElement("circle", attrs);
+};
+
+/**
+ * Generate the SVG representation of a control dot used for controlled operations.
+ *
+ * @param x      x coord of circle.
+ * @param y      y coord of circle.
+ * @param radius Radius of circle.
+ *
+ * @returns SVG element for control dot.
+ */
+export const controlDot = (x: number, y: number, radius = 5): SVGElement =>
+  circle(x, y, radius, "control-dot");
+
+/**
+ * Generate the SVG representation of a unitary box that represents an arbitrary unitary operation.
+ *
+ * @param x         x coord of box.
+ * @param y         y coord of box.
+ * @param width     Width of box.
+ * @param height    Height of box.
+ * @param className Class name of element.
+ *
+ * @returns SVG element for unitary box.
+ */
+export const box = (
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  className = "gate-unitary",
+): SVGElement =>
+  createSvgElement("rect", {
+    class: className,
+    x: x.toString(),
+    y: y.toString(),
+    width: width.toString(),
+    height: height.toString(),
+  });
+
+/**
+ * Generate the SVG text element from a given text string.
+ *
+ * @param text String to render as SVG text.
+ * @param x    Middle x coord of text.
+ * @param y    Middle y coord of text.
+ * @param fs   Font size of text.
+ *
+ * @returns SVG element for text.
+ */
+export const text = (
+  text: string,
+  x: number,
+  y: number,
+  fs: number = labelFontSize,
+): SVGElement => {
+  const el: SVGElement = createSvgElement("text", {
+    "font-size": fs.toString(),
+    x: x.toString(),
+    y: y.toString(),
+  });
+  el.textContent = text;
+  return el;
+};
+
+/**
+ * Generate the SVG representation of the arc used in the measurement box.
+ *
+ * @param x  x coord of arc.
+ * @param y  y coord of arc.
+ * @param rx x radius of arc.
+ * @param ry y radius of arc.
+ *
+ * @returns SVG element for arc.
+ */
+export const arc = (x: number, y: number, rx: number, ry: number): SVGElement =>
+  createSvgElement("path", {
+    class: "arc-measure",
+    d: `M ${x + 2 * rx} ${y} A ${rx} ${ry} 0 0 0 ${x} ${y}`,
+  });
+
+/**
+ * Generate a dashed SVG line.
+ *
+ * @param x1        x coord of starting point of line.
+ * @param y1        y coord of starting point of line.
+ * @param x2        x coord of ending point of line.
+ * @param y2        y coord fo ending point of line.
+ * @param className Class name of element.
+ *
+ * @returns SVG element for dashed line.
+ */
+export const dashedLine = (
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number,
+  className?: string,
+): SVGElement => {
+  const el: SVGElement = line(x1, y1, x2, y2, className);
+  el.setAttribute("stroke-dasharray", "8, 8");
+  return el;
+};
+
+/**
+ * Generate the SVG representation of the dashed box used for enclosing groups of operations controlled on a classical register.
+ *
+ * @param x         x coord of box.
+ * @param y         y coord of box.
+ * @param width     Width of box.
+ * @param height    Height of box.
+ * @param className Class name of element.
+ *
+ * @returns SVG element for dashed box.
+ */
+export const dashedBox = (
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  className?: string,
+): SVGElement => {
+  const el: SVGElement = box(x, y, width, height, className);
+  el.setAttribute("fill-opacity", "0");
+  el.setAttribute("stroke-dasharray", "8, 8");
+  return el;
+};