Skip to content

Commit 58c0153

Browse files
AksharP5AksharP5
committed
fix(registry): clear flowchart selection after click-away
1 parent 91db93a commit 58c0153

6 files changed

Lines changed: 10 additions & 42 deletions

File tree

‎docs/catalog/blocks/flowchart-vertical.mdx‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,7 @@ That writes one file: `compositions/flowchart-vertical.html`.
144144
/>
145145
</svg>
146146
</div>
147+
<div class="selection-border"></div>
147148
</div>
148149
<div id="node-nocode" class="node blue" style="left: 600px; top: 960px">
149150
Try no-code first
@@ -335,7 +336,6 @@ That writes one file: `compositions/flowchart-vertical.html`.
335336
(function () {
336337
const tl = gsap.timeline({ paused: true });
337338
const S = "#flowchart-vertical";
338-
const nodePython = document.querySelector(S + " #node-python");
339339
const pythonText = document.querySelector(S + " #python-text");
340340
341341
// 1. Root node scales in
@@ -406,15 +406,7 @@ That writes one file: `compositions/flowchart-vertical.html`.
406406
tl.to(S + " #cursor", { x: -1110, y: -1560, duration: 1, ease: "power1.inOut" }, "hold3");
407407
408408
// 10. Cursor clicks — selection border
409-
tl.add(() => {
410-
if (!nodePython) return;
411-
if (!nodePython.querySelector(".selection-border")) {
412-
const border = document.createElement("div");
413-
border.className = "selection-border";
414-
nodePython.appendChild(border);
415-
}
416-
gsap.set(S + " .selection-border", { opacity: 1 });
417-
}, "hold3+=1");
409+
tl.set(S + " .selection-border", { opacity: 1 }, "hold3+=1");
418410
419411
tl.to(
420412
S + " #cursor",

‎docs/catalog/blocks/flowchart.mdx‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,7 @@ That writes one file: `compositions/flowchart.html`.
144144
/>
145145
</svg>
146146
</div>
147+
<div class="selection-border"></div>
147148
</div>
148149
<div id="node-nocode" class="node blue" style="left: 800px; top: 500px">
149150
Try no-code first
@@ -335,7 +336,6 @@ That writes one file: `compositions/flowchart.html`.
335336
(function () {
336337
const tl = gsap.timeline({ paused: true });
337338
const S = '[data-composition-id="flowchart"]';
338-
const nodePython = document.querySelector(S + " #node-python");
339339
const pythonText = document.querySelector(S + " #python-text");
340340
341341
// 1. Root node scales in
@@ -406,15 +406,7 @@ That writes one file: `compositions/flowchart.html`.
406406
tl.to(S + " #cursor", { x: -1470, y: -540, duration: 1, ease: "power1.inOut" }, "hold3");
407407
408408
// 10. Cursor clicks — selection border
409-
tl.add(() => {
410-
if (!nodePython) return;
411-
if (!nodePython.querySelector(".selection-border")) {
412-
const border = document.createElement("div");
413-
border.className = "selection-border";
414-
nodePython.appendChild(border);
415-
}
416-
gsap.set(S + " .selection-border", { opacity: 1 });
417-
}, "hold3+=1");
409+
tl.set(S + " .selection-border", { opacity: 1 }, "hold3+=1");
418410
419411
tl.to(
420412
S + " #cursor",

‎docs/public/catalog/blocks/flowchart-vertical.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎docs/public/catalog/blocks/flowchart.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎registry/blocks/flowchart-vertical/flowchart-vertical.html‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,7 @@
119119
/>
120120
</svg>
121121
</div>
122+
<div class="selection-border"></div>
122123
</div>
123124
<div id="node-nocode" class="node blue" style="left: 600px; top: 960px">
124125
Try no-code first
@@ -310,7 +311,6 @@
310311
(function () {
311312
const tl = gsap.timeline({ paused: true });
312313
const S = "#flowchart-vertical";
313-
const nodePython = document.querySelector(S + " #node-python");
314314
const pythonText = document.querySelector(S + " #python-text");
315315

316316
// 1. Root node scales in
@@ -381,15 +381,7 @@
381381
tl.to(S + " #cursor", { x: -1110, y: -1560, duration: 1, ease: "power1.inOut" }, "hold3");
382382

383383
// 10. Cursor clicks — selection border
384-
tl.add(() => {
385-
if (!nodePython) return;
386-
if (!nodePython.querySelector(".selection-border")) {
387-
const border = document.createElement("div");
388-
border.className = "selection-border";
389-
nodePython.appendChild(border);
390-
}
391-
gsap.set(S + " .selection-border", { opacity: 1 });
392-
}, "hold3+=1");
384+
tl.set(S + " .selection-border", { opacity: 1 }, "hold3+=1");
393385

394386
tl.to(
395387
S + " #cursor",

‎registry/blocks/flowchart/flowchart.html‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,7 @@
119119
/>
120120
</svg>
121121
</div>
122+
<div class="selection-border"></div>
122123
</div>
123124
<div id="node-nocode" class="node blue" style="left: 800px; top: 500px">
124125
Try no-code first
@@ -310,7 +311,6 @@
310311
(function () {
311312
const tl = gsap.timeline({ paused: true });
312313
const S = '[data-composition-id="flowchart"]';
313-
const nodePython = document.querySelector(S + " #node-python");
314314
const pythonText = document.querySelector(S + " #python-text");
315315

316316
// 1. Root node scales in
@@ -381,15 +381,7 @@
381381
tl.to(S + " #cursor", { x: -1470, y: -540, duration: 1, ease: "power1.inOut" }, "hold3");
382382

383383
// 10. Cursor clicks — selection border
384-
tl.add(() => {
385-
if (!nodePython) return;
386-
if (!nodePython.querySelector(".selection-border")) {
387-
const border = document.createElement("div");
388-
border.className = "selection-border";
389-
nodePython.appendChild(border);
390-
}
391-
gsap.set(S + " .selection-border", { opacity: 1 });
392-
}, "hold3+=1");
384+
tl.set(S + " .selection-border", { opacity: 1 }, "hold3+=1");
393385

394386
tl.to(
395387
S + " #cursor",

0 commit comments

Comments
 (0)