Skip to content

Commit

Permalink
fix circle-notation display problems caused by data-magnitudes attr
Browse files Browse the repository at this point in the history
  • Loading branch information
@yasuhito
yasuhito committed Apr 21, 2022
1 parent b3c6da9 commit 1105e85
Show file tree
Hide file tree
Showing 7 changed files with 47 additions and 44 deletions.
26 changes: 13 additions & 13 deletions apps/tutorial/application.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9784,7 +9784,7 @@ var sr = /* @__PURE__ */ __name(class extends HTMLElement {
super(...arguments);
this.qubitCount = 1;
this.size = "";
this.magnitudes = "1.0";
this.magnitudes = "";
this.phases = "";
this.multiQubits = false;
this.showKets = false;
Expand All @@ -9797,8 +9797,7 @@ var sr = /* @__PURE__ */ __name(class extends HTMLElement {
let d = xr.from(l);
c.setAttribute("data-amplitude-real", d.real.toString()), c.setAttribute("data-amplitude-imag", d.imag.toString());
let v = d.abs();
if (this.setRoundedMagnitude(c, v), v === 0)
continue;
this.setRoundedMagnitude(c, v);
let b = d.phase() / Math.PI * 180;
this.setRoundedPhase(c, b);
}
Expand Down Expand Up @@ -9834,7 +9833,7 @@ var sr = /* @__PURE__ */ __name(class extends HTMLElement {
return [].concat(...e);
}
update() {
te(K`<style>
if (te(K`<style>
@media (min-width: 768px) {
:host([data-qubit-count='8']),
:host([data-qubit-count='9']),
Expand Down Expand Up @@ -10491,15 +10490,16 @@ var sr = /* @__PURE__ */ __name(class extends HTMLElement {
}
</style>

<div id="body">${this.qubitCirclesHtml}</div>`, this.shadowRoot);
for (let [e, t] of (this.getAttribute("data-magnitudes") || "1.0").split(",").entries())
this.setRoundedMagnitude(this.qubitCircles[e], parseFloat(t));
for (let [e, t] of (this.getAttribute("data-phases") || "").split(",").entries()) {
let i = this.qubitCircles[e], l = t ? parseFloat(t) : 0;
this.setRoundedPhase(i, l);
let c = i.querySelector(".qubit-circle__phase");
c.style.transform = `rotate(${-l}deg)`;
}
<div id="body">${this.qubitCirclesHtml}</div>`, this.shadowRoot), this.magnitudes !== "")
for (let [e, t] of this.magnitudes.split(",").entries())
this.setRoundedMagnitude(this.qubitCircles[e], parseFloat(t));
if (this.phases !== "")
for (let [e, t] of this.phases.split(",").entries()) {
let i = this.qubitCircles[e], l = t ? parseFloat(t) : 0;
this.setRoundedPhase(i, l);
let c = i.querySelector(".qubit-circle__phase");
c.style.transform = `rotate(${-l}deg)`;
}
}
setRoundedMagnitude(e, t) {
if (e === null || e === void 0)
Expand Down
4 changes: 2 additions & 2 deletions apps/tutorial/application.js.map
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions apps/tutorial/x_gate.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
<div class="my-5 flex justify-center md:mr-auto md:w-7/12">
<div class="flex flex-col">
<div class="mb-8 flex flex-row items-center space-x-1">
<circle-notation data-size="xl" data-show-kets></circle-notation>
<circle-notation data-size="xl" data-magnitudes="1,0" data-show-kets></circle-notation>
<div class="flex flex-row items-center">
{% include minus.svg class="h-6 w-6 fill-current text-neutral-400" %}
<x-gate></x-gate>
Expand All @@ -50,7 +50,7 @@
<x-gate></x-gate>
{% include arrow_right.svg class="h-6 w-6 fill-current text-neutral-400" %}
</div>
<circle-notation data-size="xl" data-show-kets></circle-notation>
<circle-notation data-size="xl" data-magnitudes="1,0" data-show-kets></circle-notation>
</div>
</div>
</div>
Expand Down
26 changes: 13 additions & 13 deletions docs/application.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9784,7 +9784,7 @@ var sr = /* @__PURE__ */ __name(class extends HTMLElement {
super(...arguments);
this.qubitCount = 1;
this.size = "";
this.magnitudes = "1.0";
this.magnitudes = "";
this.phases = "";
this.multiQubits = false;
this.showKets = false;
Expand All @@ -9797,8 +9797,7 @@ var sr = /* @__PURE__ */ __name(class extends HTMLElement {
let d = xr.from(l);
c.setAttribute("data-amplitude-real", d.real.toString()), c.setAttribute("data-amplitude-imag", d.imag.toString());
let v = d.abs();
if (this.setRoundedMagnitude(c, v), v === 0)
continue;
this.setRoundedMagnitude(c, v);
let b = d.phase() / Math.PI * 180;
this.setRoundedPhase(c, b);
}
Expand Down Expand Up @@ -9834,7 +9833,7 @@ var sr = /* @__PURE__ */ __name(class extends HTMLElement {
return [].concat(...e);
}
update() {
te(K`<style>
if (te(K`<style>
@media (min-width: 768px) {
:host([data-qubit-count='8']),
:host([data-qubit-count='9']),
Expand Down Expand Up @@ -10491,15 +10490,16 @@ var sr = /* @__PURE__ */ __name(class extends HTMLElement {
}
</style>

<div id="body">${this.qubitCirclesHtml}</div>`, this.shadowRoot);
for (let [e, t] of (this.getAttribute("data-magnitudes") || "1.0").split(",").entries())
this.setRoundedMagnitude(this.qubitCircles[e], parseFloat(t));
for (let [e, t] of (this.getAttribute("data-phases") || "").split(",").entries()) {
let i = this.qubitCircles[e], l = t ? parseFloat(t) : 0;
this.setRoundedPhase(i, l);
let c = i.querySelector(".qubit-circle__phase");
c.style.transform = `rotate(${-l}deg)`;
}
<div id="body">${this.qubitCirclesHtml}</div>`, this.shadowRoot), this.magnitudes !== "")
for (let [e, t] of this.magnitudes.split(",").entries())
this.setRoundedMagnitude(this.qubitCircles[e], parseFloat(t));
if (this.phases !== "")
for (let [e, t] of this.phases.split(",").entries()) {
let i = this.qubitCircles[e], l = t ? parseFloat(t) : 0;
this.setRoundedPhase(i, l);
let c = i.querySelector(".qubit-circle__phase");
c.style.transform = `rotate(${-l}deg)`;
}
}
setRoundedMagnitude(e, t) {
if (e === null || e === void 0)
Expand Down
Loading

0 comments on commit 1105e85

Please sign in to comment.