Circuit Dropzone

Placeholder to drop circuit operations.

The circuit dropzone is a placeholder for the placement of operations such as quantum gates, etc. The circuit dropzone is aligned inside the circuit step, and its number is equal to the number of qubits in the quantum circuit.

<quantum-circuit>
  <!-- STEP #0 -->
  <circuit-step>
    <circuit-dropzone></circuit-dropzone>
    <circuit-dropzone></circuit-dropzone>
    <circuit-dropzone></circuit-dropzone>
    <circuit-dropzone></circuit-dropzone>
  </circuit-step>

  <!-- STEP #1 -->
  <circuit-step>
    <circuit-dropzone></circuit-dropzone>
    <circuit-dropzone></circuit-dropzone>
    <circuit-dropzone></circuit-dropzone>
    <circuit-dropzone></circuit-dropzone>
  </circuit-step>

  <!-- STEP #2 -->
  ...
</quantum-circuit>

JavaScript API

When drawing circuits with the JavaScript API, you don't need to be aware of the placement of the <circuit-dropzone> elements; each time you call the JavaScript API's .write() or .h(), the necessary <circuit-dropzone> tags are automatically inserted into the quantum circuit.

JSON API

As in the case of the JavaScript API, there is no need to explicitly put the <circuit-dropzone> tag in the JSON API. The <circuit-dropzone> tag will be automatically placed outside of the "H", "X", etc. gates and the Identity gate represented by 1.

Raw HTML

To write a circuit dropzone in raw HTML, add a number of <circuit-dropzone> tags equal to the number of qubits inside the <circuit-step> tag. Inside the <circuit-dropzone> ... </circuit-dropzone>, you can include operations such as <h-gate>.

<quantum-circuit>
  <circuit-step>
    <circuit-dropzone>
      <write-gate></write-gate>
    </circuit-dropzone>
    <circuit-dropzone>
      <write-gate></write-gate>
    </circuit-dropzone>
  </circuit-step>

  <circuit-step>
    <circuit-dropzone>
      <h-gate></h-gate>
    </circuit-dropzone>
    <circuit-dropzone>
    </circuit-dropzone>
  </circuit-step>

  <circuit-step>
    <circuit-dropzone>
      <control-gate></control-gate>
    </circuit-dropzone>
    <circuit-dropzone>
      <x-gate></x-gate>
    </circuit-dropzone>
  </circuit-step>

  <circuit-step>
    <circuit-dropzone>
      <measurement-gate></measurement-gate>
    </circuit-dropzone>
    <circuit-dropzone>
    </circuit-dropzone>
  </circuit-step>

  <circuit-step>
    <circuit-dropzone>
    </circuit-dropzone>
    <circuit-dropzone>
      <measurement-gate></measurement-gate>
    </circuit-dropzone>
  </circuit-step>
</quantum-circuit>