import{s as ce,f,a as v,g as y,h as P,d as s,c as m,D as C,j as g,i as a,r as M,w as oe,F as as,x as ts,l as kt,m as Tt,k as D,n as ue,t as re,p as es,e as gt,o as os,u as is,ae as pe,af as je,G as rs}from"./scheduler.2f9f1739.js";import{S as fe,i as ye,b as Ft,d as vt,m as mt,a as _t,t as bt,e as Bt}from"./index.f9f1dac6.js";import{g as ps,a as Ne}from"./styles.a749dd55.js";import{M as cs}from"./MarkdownLayout.50a9a114.js";import{e as wt,u as ss,d as us,a as fs}from"./each.7a84d497.js";import{F as ns}from"./fa.139e50c6.js";import{u as ls}from"./index.b11ac8a0.js";import{f as ys,c as hs,a as ds}from"./7.eca4a750.js";import{L as Fs}from"./link.4e908ad9.js";function Re(h,e,n){const r=h.slice();return r[11]=e[n],r}function Ue(h){let e,n=h[11]+"",r,p,c;return{c(){e=f("div"),r=kt(n),p=v(),this.h()},l(l){e=y(l,"DIV",{class:!0,style:!0});var o=P(e);r=Tt(o,n),p=m(o),o.forEach(s),this.h()},h(){g(e,"class","bar bg-orang dark:bg-dark svelte-16ckiy0"),g(e,"style",c=`height: ${h[11]/h[2]*200}px;`),D(e,"--tag",`bar-${h[11]}`)},m(l,o){a(l,e,o),M(e,r),M(e,p)},p(l,o){o&1&&n!==(n=l[11]+"")&&ue(r,n),o&1&&c!==(c=`height: ${l[11]/l[2]*200}px;`)&&g(e,"style",c);const u=o&1;(o&1||u)&&D(e,"--tag",`bar-${l[11]}`)},d(l){l&&s(e)}}}function vs(h){let e,n,r,p,c,l="start",o,u,_,k,T,L,b=wt(h[0]),d=[];for(let w=0;w<b.length;w+=1)d[w]=Ue(Re(h,b,w));return _=new ns({props:{icon:ls}}),{c(){e=f("div"),n=f("div");for(let w=0;w<d.length;w+=1)d[w].c();r=v(),p=f("div"),c=f("button"),c.textContent=l,o=v(),u=f("button"),Ft(_.$$.fragment),this.h()},l(w){e=y(w,"DIV",{class:!0});var $=P(e);n=y($,"DIV",{id:!0,class:!0});var F=P(n);for(let H=0;H<d.length;H+=1)d[H].l(F);F.forEach(s),r=m($),p=y($,"DIV",{class:!0});var B=P(p);c=y(B,"BUTTON",{id:!0,class:!0,"data-svelte-h":!0}),C(c)!=="svelte-1l528yi"&&(c.textContent=l),o=m(B),u=y(B,"BUTTON",{id:!0,class:!0});var x=P(u);vt(_.$$.fragment,x),x.forEach(s),B.forEach(s),$.forEach(s),this.h()},h(){g(n,"id","visual-container"),g(n,"class","svelte-16ckiy0"),g(c,"id","start-button"),g(c,"class","bg-orang dark:bg-dark svelte-16ckiy0"),g(u,"id","restartBtn"),g(u,"class","bg-orang dark:bg-dark svelte-16ckiy0"),g(p,"class","btn-container svelte-16ckiy0"),g(e,"class","container bg-orange-100 dark:bg-stone-900 rounded-lg svelte-16ckiy0")},m(w,$){a(w,e,$),M(e,n);for(let F=0;F<d.length;F+=1)d[F]&&d[F].m(n,null);h[5](n),M(e,r),M(e,p),M(p,c),M(p,o),M(p,u),mt(_,u,null),k=!0,T||(L=[oe(c,"click",h[3]),oe(u,"click",h[4])],T=!0)},p(w,[$]){if($&5){b=wt(w[0]);let F;for(F=0;F<b.length;F+=1){const B=Re(w,b,F);d[F]?d[F].p(B,$):(d[F]=Ue(B),d[F].c(),d[F].m(n,null))}for(;F<d.length;F+=1)d[F].d(1);d.length=b.length}},i(w){k||(_t(_.$$.fragment,w),k=!0)},o(w){bt(_.$$.fragment,w),k=!1},d(w){w&&s(e),as(d,w),h[5](null),Bt(_),T=!1,ts(L)}}}var We=200;function ms(h,e,n){var r=[5,7,29,18,10,23],p=r.slice();let c,l=Math.max(...p);function o(b){n(0,p=b)}const u=b=>new Promise(d=>setTimeout(d,b));function _(){T(),k(p).then(b=>{console.log("Sorted array:",b)})}async function k(b){const d=b.length;let w;async function $(){do{w=!1;for(let F=0;F<d-1;F++)if(b[F]>b[F+1]){const B=b[F];if(b[F]=b[F+1],b[F+1]=B,w=!0,!document.startViewTransition){o(b),await u(We);continue}document.startViewTransition(async()=>{o(b),await re()}),await u(We)}}while(w)}return $().then(()=>b)}function T(){if(!document.startViewTransition){o(r.slice());return}document.startViewTransition(async()=>{o(r.slice()),await re()})}function L(b){es[b?"unshift":"push"](()=>{c=b,n(1,c)})}return[p,c,l,_,T,L]}class _s extends fe{constructor(e){super(),ye(this,e,ms,vs,ce,{})}}function Ge(h,e,n){const r=h.slice();return r[12]=e[n],r}function Je(h,e,n){const r=h.slice();return r[12]=e[n],r}function bs(h){let e=[],n=new Map,r,p=wt(h[0]);const c=l=>l[12];for(let l=0;l<p.length;l+=1){let o=Ge(h,p,l),u=c(o);n.set(u,e[l]=Qe(u,o))}return{c(){for(let l=0;l<e.length;l+=1)e[l].c();r=gt()},l(l){for(let o=0;o<e.length;o+=1)e[o].l(l);r=gt()},m(l,o){for(let u=0;u<e.length;u+=1)e[u]&&e[u].m(l,o);a(l,r,o)},p(l,o){o&9&&(p=wt(l[0]),e=ss(e,o,c,1,l,p,n,r.parentNode,us,Qe,r,Ge))},d(l){l&&s(r);for(let o=0;o<e.length;o+=1)e[o].d(l)}}}function Bs(h){let e=[],n=new Map,r,p=wt(h[0]);const c=l=>l[12];for(let l=0;l<p.length;l+=1){let o=Je(h,p,l),u=c(o);n.set(u,e[l]=Ke(u,o))}return{c(){for(let l=0;l<e.length;l+=1)e[l].c();r=gt()},l(l){for(let o=0;o<e.length;o+=1)e[o].l(l);r=gt()},m(l,o){for(let u=0;u<e.length;u+=1)e[u]&&e[u].m(l,o);a(l,r,o)},p(l,o){if(o&9){p=wt(l[0]);for(let u=0;u<e.length;u+=1)e[u].r();e=ss(e,o,c,1,l,p,n,r.parentNode,fs,Ke,r,Je);for(let u=0;u<e.length;u+=1)e[u].a()}},d(l){l&&s(r);for(let o=0;o<e.length;o+=1)e[o].d(l)}}}function Qe(h,e){let n,r=e[12]+"",p,c,l,o=`bar-${e[12]}`;return{key:h,first:null,c(){n=f("div"),p=kt(r),c=v(),this.h()},l(u){n=y(u,"DIV",{class:!0,style:!0});var _=P(n);p=Tt(_,r),c=m(_),_.forEach(s),this.h()},h(){g(n,"class","bar bg-orang dark:bg-dark svelte-qgnga4"),g(n,"style",l=`height: ${e[12]/e[3]*200}px;`),D(n,"--tag",o),this.first=n},m(u,_){a(u,n,_),M(n,p),M(n,c)},p(u,_){e=u,_&1&&r!==(r=e[12]+"")&&ue(p,r),_&1&&l!==(l=`height: ${e[12]/e[3]*200}px;`)&&g(n,"style",l);const k=_&1;(_&1&&o!==(o=`bar-${e[12]}`)||k)&&D(n,"--tag",o)},d(u){u&&s(n)}}}function Ke(h,e){let n,r=e[12]+"",p,c,l,o,u=is,_=`bar-${e[12]}`;return{key:h,first:null,c(){n=f("div"),p=kt(r),c=v(),this.h()},l(k){n=y(k,"DIV",{class:!0,style:!0});var T=P(n);p=Tt(T,r),c=m(T),T.forEach(s),this.h()},h(){g(n,"class","bar bg-orang dark:bg-dark svelte-qgnga4"),g(n,"style",l=`height: ${e[12]/e[3]*200}px;`),D(n,"--tag",_),this.first=n},m(k,T){a(k,n,T),M(n,p),M(n,c)},p(k,T){e=k,T&1&&r!==(r=e[12]+"")&&ue(p,r),T&1&&l!==(l=`height: ${e[12]/e[3]*200}px;`)&&g(n,"style",l);const L=T&1;(T&1&&_!==(_=`bar-${e[12]}`)||L)&&D(n,"--tag",_)},r(){o=n.getBoundingClientRect()},f(){ys(n),u()},a(){u(),u=hs(n,o,ds,{})},d(k){k&&s(n)}}}function Xe(h){let e,n=`* your browser does not support <code>view-transtions-api</code>, using
		<code>svelte animaite:flip</code> to simulate behaviour 🫶🏽`;return{c(){e=f("blockquote"),e.innerHTML=n,this.h()},l(r){e=y(r,"BLOCKQUOTE",{class:!0,"data-svelte-h":!0}),C(e)!=="svelte-656psr"&&(e.innerHTML=n),this.h()},h(){g(e,"class","mt-2")},m(r,p){a(r,e,p)},d(r){r&&s(e)}}}function gs(h){let e,n,r,p,c,l="start",o,u,_,k,T,L,b,d;function w(x,H){return x[2]?Bs:bs}let $=w(h),F=$(h);_=new ns({props:{icon:ls}});let B=h[2]&&Xe();return{c(){e=f("div"),n=f("div"),F.c(),r=v(),p=f("div"),c=f("button"),c.textContent=l,o=v(),u=f("button"),Ft(_.$$.fragment),k=v(),B&&B.c(),T=gt(),this.h()},l(x){e=y(x,"DIV",{class:!0});var H=P(e);n=y(H,"DIV",{id:!0,class:!0});var j=P(n);F.l(j),j.forEach(s),r=m(H),p=y(H,"DIV",{class:!0});var I=P(p);c=y(I,"BUTTON",{id:!0,class:!0,"data-svelte-h":!0}),C(c)!=="svelte-1l528yi"&&(c.textContent=l),o=m(I),u=y(I,"BUTTON",{id:!0,class:!0});var Ct=P(u);vt(_.$$.fragment,Ct),Ct.forEach(s),I.forEach(s),H.forEach(s),k=m(x),B&&B.l(x),T=gt(),this.h()},h(){g(n,"id","visual-container"),g(n,"class","svelte-qgnga4"),g(c,"id","start-button"),g(c,"class","bg-orang dark:bg-dark svelte-qgnga4"),g(u,"id","restartBtn"),g(u,"class","bg-orang dark:bg-dark svelte-qgnga4"),g(p,"class","btn-container svelte-qgnga4"),g(e,"class","container bg-orange-100 dark:bg-stone-900 rounded-lg svelte-qgnga4")},m(x,H){a(x,e,H),M(e,n),F.m(n,null),h[6](n),M(e,r),M(e,p),M(p,c),M(p,o),M(p,u),mt(_,u,null),a(x,k,H),B&&B.m(x,H),a(x,T,H),L=!0,b||(d=[oe(c,"click",h[4]),oe(u,"click",h[5])],b=!0)},p(x,[H]){$===($=w(x))&&F?F.p(x,H):(F.d(1),F=$(x),F&&(F.c(),F.m(n,null))),x[2]?B||(B=Xe(),B.c(),B.m(T.parentNode,T)):B&&(B.d(1),B=null)},i(x){L||(_t(_.$$.fragment,x),L=!0)},o(x){bt(_.$$.fragment,x),L=!1},d(x){x&&(s(e),s(k),s(T)),F.d(),h[6](null),Bt(_),B&&B.d(x),b=!1,ts(d)}}}var Ye=200;function ws(h,e,n){var r=[5,7,29,18,10,23,30,13],p=r.slice();let c,l=Math.max(...p),o=!1;function u(d){document.startViewTransition(async()=>{n(0,p=d),await re()})}const _=d=>new Promise(w=>setTimeout(w,d));async function k(){await T(p).then(d=>{console.log("Sorted array:",d)})}async function T(d){const w=d.length;let $;async function F(){do{$=!1;for(let B=0;B<w-1;B++)if(d[B]>d[B+1]){const x=d[B];if(d[B]=d[B+1],d[B+1]=x,$=!0,o){n(0,p=d),await _(Ye);continue}u(d),await _(Ye)}}while($)}return F().then(()=>d)}function L(){if(o){n(0,p=r.slice());return}u(r.slice())}os(()=>{document.startViewTransition||n(2,o=!0)});function b(d){es[d?"unshift":"push"](()=>{c=d,n(1,c)})}return[p,c,o,l,k,L,b]}class Cs extends fe{constructor(e){super(),ye(this,e,ws,gs,ce,{})}}function xs(h){let e;return{c(){e=kt("View Transition API")},l(n){e=Tt(n,"View Transition API")},m(n,r){a(n,e,r)},d(n){n&&s(e)}}}function ks(h){let e,n="Recently I did something I have been wanting to do for a while now, and it has honestly been stuck in my head for the past 2+ years, but I never got to implement it, up until recently.",r,p,c="Getting to put out the initial contents for DevCanvas (online HTML/CSS/JS editor), which i’m currently working on, gave me the motivation to experiment with creating the algorithm visualizer.",l,o,u="Also It happens to be a great time for building on the web, and lots of things that manually used to be done are now been adopted natively by browsers. Which brings me to the whole point of this article - <strong>View Transitions API.</strong>",_,k,T="The view-transitions-api has been in the works for some while in and still in an experimental stage, but hype has only started to grow recently, which has also brought my attention to it.",L,b,d="What is View Transitions API",w,$,F="The API was introduced to solve need to transition between states. it has never been easy to perform this transitions, and often required a lot of work and verbosity, just to make the user experience a little nicer.",B,x,H="Setting this up by ourselves takes lots of our precious time, and often not perfect and flawed heavily in some ways. Although Svelte (my most beloved framework) has a solution for this, the view transitions once fully ready and supported will make things super easier.",j,I,Ct="Nevertheless, we are going to dive in and take a looks at how it works and how I achieved the magic of smooth transition in my sorting algorithm visualizer.",$t,N,he="How it works",Mt,R,de="The view-transition-api has been said to capture the before and after state of a DOM, and smoothly perform the corresponding transition.",Ht,U,Fe="How I created the visualizer",Lt,W,ve="The breakdown of the steps is has follows:",Pt,G,me="<li>Create some kind of bars with the array</li> <li>At every completed action in the sorting algorithm, replace the old bars with the new array.</li>",It,J,_e="This is the entire plan, and with my little knowledge in JavaScript and CSS, I don’t know how I can ever be able to animate that. Thankfully, I’m part of the luckier generations, and I have the view-transitions-api.",Vt,Q,be="One super interesting fact about this is that, the entire transition of this is not more that two lines, maybe three to be fair.",Et,K,Be="There are two functions involved in creating the visualizer:",At,X,ge="<li><strong>Updating the DOM</strong></li>",St,Y,we="This function takes in the array which is the global data, create the bars and append them to there position",Dt,E,Ce=`<code><span class="line"><span style="color: #F97583">function</span><span style="color: #B392F0"> renderChart() {</span></span>
<span class="line"><span style="color: #B392F0">	</span><span style="color: #79B8FF">chartContainer</span><span style="color: #B392F0">.innerHTML </span><span style="color: #F97583">=</span><span style="color: #B392F0"> </span><span style="color: #FFAB70">&#39;&#39;</span><span style="color: #B392F0">;</span></span>
<span class="line"><span style="color: #B392F0">	</span><span style="color: #F97583">const</span><span style="color: #B392F0"> </span><span style="color: #79B8FF">maxValue</span><span style="color: #B392F0"> </span><span style="color: #F97583">=</span><span style="color: #B392F0"> </span><span style="color: #79B8FF">Math</span><span style="color: #B392F0">.max(</span><span style="color: #F97583">...</span><span style="color: #B392F0">data);</span></span>
<span class="line"><span style="color: #B392F0">	</span><span style="color: #79B8FF">data</span><span style="color: #B392F0">.forEach((value) </span><span style="color: #F97583">=&gt;</span><span style="color: #B392F0"> {</span></span>
<span class="line"><span style="color: #B392F0">		</span><span style="color: #F97583">const</span><span style="color: #B392F0"> </span><span style="color: #79B8FF">bar</span><span style="color: #B392F0"> </span><span style="color: #F97583">=</span><span style="color: #B392F0"> </span><span style="color: #79B8FF">document</span><span style="color: #B392F0">.createElement(</span><span style="color: #FFAB70">&#39;div&#39;</span><span style="color: #B392F0">);</span></span>
<span class="line"><span style="color: #B392F0">		</span><span style="color: #79B8FF">bar</span><span style="color: #B392F0">.</span><span style="color: #79B8FF">classList</span><span style="color: #B392F0">.add(</span><span style="color: #FFAB70">&#39;bar&#39;</span><span style="color: #B392F0">);</span></span>
<span class="line"><span style="color: #B392F0">		</span><span style="color: #79B8FF">bar</span><span style="color: #B392F0">.</span><span style="color: #79B8FF">style</span><span style="color: #B392F0">.setProperty(</span><span style="color: #FFAB70">&#39;--tag&#39;</span><span style="color: #BBBBBB">,</span><span style="color: #B392F0"> </span><span style="color: #FFAB70">\`bar-</span><span style="color: #F97583">\${</span><span style="color: #B392F0">value</span><span style="color: #F97583">}</span><span style="color: #FFAB70">\`</span><span style="color: #B392F0">);</span></span>
<span class="line"><span style="color: #B392F0">		</span><span style="color: #F97583">const</span><span style="color: #B392F0"> </span><span style="color: #79B8FF">percentageHeight</span><span style="color: #B392F0"> </span><span style="color: #F97583">=</span><span style="color: #B392F0"> (value </span><span style="color: #F97583">/</span><span style="color: #B392F0"> maxValue) </span><span style="color: #F97583">*</span><span style="color: #B392F0"> </span><span style="color: #F8F8F8">100</span><span style="color: #B392F0">;</span></span>
<span class="line"><span style="color: #B392F0">		</span><span style="color: #79B8FF">bar</span><span style="color: #B392F0">.</span><span style="color: #79B8FF">style</span><span style="color: #B392F0">.height </span><span style="color: #F97583">=</span><span style="color: #B392F0"> </span><span style="color: #FFAB70">\`</span><span style="color: #F97583">\${</span><span style="color: #B392F0">percentageHeight</span><span style="color: #F97583">}</span><span style="color: #FFAB70">%\`</span><span style="color: #B392F0">;</span></span>
<span class="line"><span style="color: #B392F0">		</span><span style="color: #79B8FF">bar</span><span style="color: #B392F0">.textContent </span><span style="color: #F97583">=</span><span style="color: #B392F0"> value;</span></span>
<span class="line"><span style="color: #B392F0">		</span><span style="color: #79B8FF">chartContainer</span><span style="color: #B392F0">.appendChild(bar);</span></span>
<span class="line"><span style="color: #B392F0">	});</span></span>
<span class="line"><span style="color: #B392F0">}</span></span></code>`,qt,Z,xe="One step of the transition is in this function <code>bar.style.setProperty(&#39;--tag&#39;,bar-${value})</code> which set a custom tag for each of the bars. using bar-WHATEVER-THE NUMBER-IS. This value has be unique, which is going to be the identifier that tells our browser, what moved where, or how to do the math.",Ot,q,ke="<li><strong>The Sorting Algorithm.</strong></li>",zt,A,Te=`<code><span class="line"><span style="color: #F97583">async</span><span style="color: #B392F0"> </span><span style="color: #F97583">function</span><span style="color: #B392F0"> bubbleSortWithDelay(arr) {</span></span>
<span class="line"><span style="color: #B392F0">	</span><span style="color: #F97583">const</span><span style="color: #B392F0"> </span><span style="color: #79B8FF">len</span><span style="color: #B392F0"> </span><span style="color: #F97583">=</span><span style="color: #B392F0"> </span><span style="color: #79B8FF">arr</span><span style="color: #B392F0">.</span><span style="color: #79B8FF">length</span><span style="color: #B392F0">;</span></span>
<span class="line"><span style="color: #B392F0">	</span><span style="color: #F97583">let</span><span style="color: #B392F0"> swapped;</span></span>
<span class="line"><span style="color: #B392F0">	</span><span style="color: #F97583">async</span><span style="color: #B392F0"> </span><span style="color: #F97583">function</span><span style="color: #B392F0"> sort() {</span></span>
<span class="line"><span style="color: #B392F0">		</span><span style="color: #F97583">do</span><span style="color: #B392F0"> {</span></span>
<span class="line"><span style="color: #B392F0">			swapped </span><span style="color: #F97583">=</span><span style="color: #B392F0"> </span><span style="color: #79B8FF">false</span><span style="color: #B392F0">;</span></span>
<span class="line"><span style="color: #B392F0">			</span><span style="color: #F97583">for</span><span style="color: #B392F0"> (</span><span style="color: #F97583">let</span><span style="color: #B392F0"> i </span><span style="color: #F97583">=</span><span style="color: #B392F0"> </span><span style="color: #F8F8F8">0</span><span style="color: #B392F0">; i </span><span style="color: #F97583">&lt;</span><span style="color: #B392F0"> len </span><span style="color: #F97583">-</span><span style="color: #B392F0"> </span><span style="color: #F8F8F8">1</span><span style="color: #B392F0">; i</span><span style="color: #F97583">++</span><span style="color: #B392F0">) {</span></span>
<span class="line"><span style="color: #B392F0">				</span><span style="color: #F97583">if</span><span style="color: #B392F0"> (arr[i] </span><span style="color: #F97583">&gt;</span><span style="color: #B392F0"> arr[i </span><span style="color: #F97583">+</span><span style="color: #B392F0"> </span><span style="color: #F8F8F8">1</span><span style="color: #B392F0">]) {</span></span>
<span class="line"><span style="color: #B392F0">					</span><span style="color: #F97583">const</span><span style="color: #B392F0"> </span><span style="color: #79B8FF">temp</span><span style="color: #B392F0"> </span><span style="color: #F97583">=</span><span style="color: #B392F0"> arr[i];</span></span>
<span class="line"><span style="color: #B392F0">					arr[i] </span><span style="color: #F97583">=</span><span style="color: #B392F0"> arr[i </span><span style="color: #F97583">+</span><span style="color: #B392F0"> </span><span style="color: #F8F8F8">1</span><span style="color: #B392F0">];</span></span>
<span class="line"><span style="color: #B392F0">					arr[i </span><span style="color: #F97583">+</span><span style="color: #B392F0"> </span><span style="color: #F8F8F8">1</span><span style="color: #B392F0">] </span><span style="color: #F97583">=</span><span style="color: #B392F0"> temp;</span></span>
<span class="line"><span style="color: #B392F0">					swapped </span><span style="color: #F97583">=</span><span style="color: #B392F0"> </span><span style="color: #79B8FF">true</span><span style="color: #B392F0">;</span></span>
<span class="line"><span style="color: #B392F0">					</span><span style="color: #79B8FF">console</span><span style="color: #B392F0">.log(arr); </span><span style="color: #6B737C">// Log array after each swap</span></span>
<span class="line"><span style="color: #B392F0">					</span><span style="color: #F97583">const</span><span style="color: #B392F0"> </span><span style="color: #79B8FF">transition</span><span style="color: #B392F0"> </span><span style="color: #F97583">=</span><span style="color: #B392F0"> </span><span style="color: #79B8FF">document</span><span style="color: #B392F0">.startViewTransition(() </span><span style="color: #F97583">=&gt;</span><span style="color: #B392F0"> renderChart());</span></span>
<span class="line"><span style="color: #B392F0">					</span><span style="color: #F97583">await</span><span style="color: #B392F0"> delay(speed); </span><span style="color: #6B737C">// Delay in milliseconds (adjust as needed)</span></span>
<span class="line"><span style="color: #B392F0">				}</span></span>
<span class="line"><span style="color: #B392F0">			}</span></span>
<span class="line"><span style="color: #B392F0">		} </span><span style="color: #F97583">while</span><span style="color: #B392F0"> (swapped);</span></span>
<span class="line"><span style="color: #B392F0">	}</span></span>
<span class="line"><span style="color: #B392F0">	</span><span style="color: #F97583">return</span><span style="color: #B392F0"> sort().then(() </span><span style="color: #F97583">=&gt;</span><span style="color: #B392F0"> arr);</span></span>
<span class="line"><span style="color: #B392F0">}</span></span></code>`,jt,tt,$e="I choose bubble sort here, just because it a little bit easier to see what going on more clearly.",Nt,et,Me="Diving into this function, what you first encounter is the extra step that adds the delay, which is a <code>setTimeout</code> function, this helps create the interval between the loops, hence used to increase or decrease the speed of the visualizer.",Rt,st,He="Also in this function is the view-transitions-api called. <code>const transition = document.startViewTransition(() =&gt; renderChart())</code>.",Ut,nt,Le="The <code>startViewTransition</code> instantly captures the current state of our DOM, and the function from before <code>renderChart()</code> updates the DOM.",Wt,lt,Pe="This sums up the entire logic for the visualizer and also the transition.",Gt,at,Ie="If stop here, we will get a cross-fade between the previous and the after state, and the looks super weird. we want an individual transition of the bars, rather than the entire stuff.",Jt,yt,ot,Qt,it,Ve="So we can fix this by adding <code>view-transition-name</code>, this will tell the browser about that individual bar, and will automatically animate to it new position if it changes.",Kt,S,Ee=`<code><span class="line"><span style="color: #B392F0">.bar {</span></span>
<span class="line"><span style="color: #B392F0">	</span><span style="color: #79B8FF">view-transition-name</span><span style="color: #F97583">:</span><span style="color: #B392F0"> var</span><span style="color: #F8F8F8">(--tag)</span><span style="color: #B392F0">;</span></span>
<span class="line"><span style="color: #B392F0">}</span></span></code>`,Xt,rt,Ae="And you can see that I’m using the tag we added to the bars earlier.",Yt,pt,Se=`So now, when the DOM is updated, the view transitions-api sees some like this:
let say <code>--bar-23</code> is in the first position in the array, when the loop goes, it new position moved to 4th, the api can smooth calculate and do the movement magic for us.`,Zt,ht,ct,te,ut,De="Here is the final result of the visualizer, again if you’re on an unsupported browser, like Safari and Firefox, this will not work.",ee,V,qe,se,ft,Oe="<strong>Peace ✌️</strong>",ne,O,dt,ze="View Transitions on MDN docs",ie,z,le;return ot=new _s({}),ct=new Cs({}),z=new Fs({props:{href:"https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API",rel:"nofollow",$$slots:{default:[xs]},$$scope:{ctx:h}}}),{c(){e=f("p"),e.textContent=n,r=v(),p=f("p"),p.textContent=c,l=v(),o=f("p"),o.innerHTML=u,_=v(),k=f("p"),k.textContent=T,L=v(),b=f("h2"),b.textContent=d,w=v(),$=f("p"),$.textContent=F,B=v(),x=f("p"),x.textContent=H,j=v(),I=f("p"),I.textContent=Ct,$t=v(),N=f("h2"),N.textContent=he,Mt=v(),R=f("p"),R.textContent=de,Ht=v(),U=f("h2"),U.textContent=Fe,Lt=v(),W=f("p"),W.textContent=ve,Pt=v(),G=f("ul"),G.innerHTML=me,It=v(),J=f("p"),J.textContent=_e,Vt=v(),Q=f("p"),Q.textContent=be,Et=v(),K=f("p"),K.textContent=Be,At=v(),X=f("ol"),X.innerHTML=ge,St=v(),Y=f("p"),Y.textContent=we,Dt=v(),E=f("pre"),E.innerHTML=Ce,qt=v(),Z=f("p"),Z.innerHTML=xe,Ot=v(),q=f("ol"),q.innerHTML=ke,zt=v(),A=f("pre"),A.innerHTML=Te,jt=v(),tt=f("p"),tt.textContent=$e,Nt=v(),et=f("p"),et.innerHTML=Me,Rt=v(),st=f("p"),st.innerHTML=He,Ut=v(),nt=f("p"),nt.innerHTML=Le,Wt=v(),lt=f("p"),lt.textContent=Pe,Gt=v(),at=f("p"),at.textContent=Ie,Jt=v(),yt=f("div"),Ft(ot.$$.fragment),Qt=v(),it=f("p"),it.innerHTML=Ve,Kt=v(),S=f("pre"),S.innerHTML=Ee,Xt=v(),rt=f("p"),rt.textContent=Ae,Yt=v(),pt=f("p"),pt.innerHTML=Se,Zt=v(),ht=f("div"),Ft(ct.$$.fragment),te=v(),ut=f("p"),ut.textContent=De,ee=v(),V=f("iframe"),se=v(),ft=f("p"),ft.innerHTML=Oe,ne=v(),O=f("p"),dt=f("strong"),dt.textContent=ze,ie=kt(": "),Ft(z.$$.fragment),this.h()},l(t){e=y(t,"P",{"data-svelte-h":!0}),C(e)!=="svelte-13zkvq4"&&(e.textContent=n),r=m(t),p=y(t,"P",{"data-svelte-h":!0}),C(p)!=="svelte-7u2jpm"&&(p.textContent=c),l=m(t),o=y(t,"P",{"data-svelte-h":!0}),C(o)!=="svelte-gkubmd"&&(o.innerHTML=u),_=m(t),k=y(t,"P",{"data-svelte-h":!0}),C(k)!=="svelte-fpiwyb"&&(k.textContent=T),L=m(t),b=y(t,"H2",{"data-svelte-h":!0}),C(b)!=="svelte-n82ofp"&&(b.textContent=d),w=m(t),$=y(t,"P",{"data-svelte-h":!0}),C($)!=="svelte-zldasx"&&($.textContent=F),B=m(t),x=y(t,"P",{"data-svelte-h":!0}),C(x)!=="svelte-1lbx6mt"&&(x.textContent=H),j=m(t),I=y(t,"P",{"data-svelte-h":!0}),C(I)!=="svelte-4i7i06"&&(I.textContent=Ct),$t=m(t),N=y(t,"H2",{"data-svelte-h":!0}),C(N)!=="svelte-g10nkj"&&(N.textContent=he),Mt=m(t),R=y(t,"P",{"data-svelte-h":!0}),C(R)!=="svelte-190egip"&&(R.textContent=de),Ht=m(t),U=y(t,"H2",{"data-svelte-h":!0}),C(U)!=="svelte-20n8cc"&&(U.textContent=Fe),Lt=m(t),W=y(t,"P",{"data-svelte-h":!0}),C(W)!=="svelte-9jkrjf"&&(W.textContent=ve),Pt=m(t),G=y(t,"UL",{"data-svelte-h":!0}),C(G)!=="svelte-1j88p75"&&(G.innerHTML=me),It=m(t),J=y(t,"P",{"data-svelte-h":!0}),C(J)!=="svelte-19b4gjb"&&(J.textContent=_e),Vt=m(t),Q=y(t,"P",{"data-svelte-h":!0}),C(Q)!=="svelte-1v3gvl"&&(Q.textContent=be),Et=m(t),K=y(t,"P",{"data-svelte-h":!0}),C(K)!=="svelte-e59xij"&&(K.textContent=Be),At=m(t),X=y(t,"OL",{"data-svelte-h":!0}),C(X)!=="svelte-1otyy9j"&&(X.innerHTML=ge),St=m(t),Y=y(t,"P",{"data-svelte-h":!0}),C(Y)!=="svelte-9uk5is"&&(Y.textContent=we),Dt=m(t),E=y(t,"PRE",{class:!0,style:!0,tabindex:!0,"data-svelte-h":!0}),C(E)!=="svelte-twqdtl"&&(E.innerHTML=Ce),qt=m(t),Z=y(t,"P",{"data-svelte-h":!0}),C(Z)!=="svelte-2txzto"&&(Z.innerHTML=xe),Ot=m(t),q=y(t,"OL",{start:!0,"data-svelte-h":!0}),C(q)!=="svelte-1n8a3bd"&&(q.innerHTML=ke),zt=m(t),A=y(t,"PRE",{class:!0,style:!0,tabindex:!0,"data-svelte-h":!0}),C(A)!=="svelte-tzc7w6"&&(A.innerHTML=Te),jt=m(t),tt=y(t,"P",{"data-svelte-h":!0}),C(tt)!=="svelte-g4qs10"&&(tt.textContent=$e),Nt=m(t),et=y(t,"P",{"data-svelte-h":!0}),C(et)!=="svelte-mdse1"&&(et.innerHTML=Me),Rt=m(t),st=y(t,"P",{"data-svelte-h":!0}),C(st)!=="svelte-xg10vm"&&(st.innerHTML=He),Ut=m(t),nt=y(t,"P",{"data-svelte-h":!0}),C(nt)!=="svelte-1l85aql"&&(nt.innerHTML=Le),Wt=m(t),lt=y(t,"P",{"data-svelte-h":!0}),C(lt)!=="svelte-4hy8kx"&&(lt.textContent=Pe),Gt=m(t),at=y(t,"P",{"data-svelte-h":!0}),C(at)!=="svelte-1qt0mi8"&&(at.textContent=Ie),Jt=m(t),yt=y(t,"DIV",{});var i=P(yt);vt(ot.$$.fragment,i),i.forEach(s),Qt=m(t),it=y(t,"P",{"data-svelte-h":!0}),C(it)!=="svelte-15q32gw"&&(it.innerHTML=Ve),Kt=m(t),S=y(t,"PRE",{class:!0,style:!0,tabindex:!0,"data-svelte-h":!0}),C(S)!=="svelte-11iaqml"&&(S.innerHTML=Ee),Xt=m(t),rt=y(t,"P",{"data-svelte-h":!0}),C(rt)!=="svelte-1so1ac2"&&(rt.textContent=Ae),Yt=m(t),pt=y(t,"P",{"data-svelte-h":!0}),C(pt)!=="svelte-1k8sozi"&&(pt.innerHTML=Se),Zt=m(t),ht=y(t,"DIV",{});var xt=P(ht);vt(ct.$$.fragment,xt),xt.forEach(s),te=m(t),ut=y(t,"P",{"data-svelte-h":!0}),C(ut)!=="svelte-1obm1q6"&&(ut.textContent=De),ee=m(t),V=y(t,"IFRAME",{title:!0,src:!0,frameborder:!0,height:!0,width:!0,loading:!0}),P(V).forEach(s),se=m(t),ft=y(t,"P",{"data-svelte-h":!0}),C(ft)!=="svelte-tvhrus"&&(ft.innerHTML=Oe),ne=m(t),O=y(t,"P",{});var ae=P(O);dt=y(ae,"STRONG",{"data-svelte-h":!0}),C(dt)!=="svelte-17i7p6m"&&(dt.textContent=ze),ie=Tt(ae,": "),vt(z.$$.fragment,ae),ae.forEach(s),this.h()},h(){g(E,"class","shiki min-dark"),D(E,"background-color","#1f1f1f"),g(E,"tabindex","0"),g(q,"start","2"),g(A,"class","shiki min-dark"),D(A,"background-color","#1f1f1f"),g(A,"tabindex","0"),g(S,"class","shiki min-dark"),D(S,"background-color","#1f1f1f"),g(S,"tabindex","0"),g(V,"title","embed"),rs(V.src,qe="https://devcanvas.art/play/Obw8iQ/embed")||g(V,"src",qe),g(V,"frameborder","0"),g(V,"height","600px"),g(V,"width","100%"),g(V,"loading","lazy")},m(t,i){a(t,e,i),a(t,r,i),a(t,p,i),a(t,l,i),a(t,o,i),a(t,_,i),a(t,k,i),a(t,L,i),a(t,b,i),a(t,w,i),a(t,$,i),a(t,B,i),a(t,x,i),a(t,j,i),a(t,I,i),a(t,$t,i),a(t,N,i),a(t,Mt,i),a(t,R,i),a(t,Ht,i),a(t,U,i),a(t,Lt,i),a(t,W,i),a(t,Pt,i),a(t,G,i),a(t,It,i),a(t,J,i),a(t,Vt,i),a(t,Q,i),a(t,Et,i),a(t,K,i),a(t,At,i),a(t,X,i),a(t,St,i),a(t,Y,i),a(t,Dt,i),a(t,E,i),a(t,qt,i),a(t,Z,i),a(t,Ot,i),a(t,q,i),a(t,zt,i),a(t,A,i),a(t,jt,i),a(t,tt,i),a(t,Nt,i),a(t,et,i),a(t,Rt,i),a(t,st,i),a(t,Ut,i),a(t,nt,i),a(t,Wt,i),a(t,lt,i),a(t,Gt,i),a(t,at,i),a(t,Jt,i),a(t,yt,i),mt(ot,yt,null),a(t,Qt,i),a(t,it,i),a(t,Kt,i),a(t,S,i),a(t,Xt,i),a(t,rt,i),a(t,Yt,i),a(t,pt,i),a(t,Zt,i),a(t,ht,i),mt(ct,ht,null),a(t,te,i),a(t,ut,i),a(t,ee,i),a(t,V,i),a(t,se,i),a(t,ft,i),a(t,ne,i),a(t,O,i),M(O,dt),M(O,ie),mt(z,O,null),le=!0},p(t,i){const xt={};i&2&&(xt.$$scope={dirty:i,ctx:t}),z.$set(xt)},i(t){le||(_t(ot.$$.fragment,t),_t(ct.$$.fragment,t),_t(z.$$.fragment,t),le=!0)},o(t){bt(ot.$$.fragment,t),bt(ct.$$.fragment,t),bt(z.$$.fragment,t),le=!1},d(t){t&&(s(e),s(r),s(p),s(l),s(o),s(_),s(k),s(L),s(b),s(w),s($),s(B),s(x),s(j),s(I),s($t),s(N),s(Mt),s(R),s(Ht),s(U),s(Lt),s(W),s(Pt),s(G),s(It),s(J),s(Vt),s(Q),s(Et),s(K),s(At),s(X),s(St),s(Y),s(Dt),s(E),s(qt),s(Z),s(Ot),s(q),s(zt),s(A),s(jt),s(tt),s(Nt),s(et),s(Rt),s(st),s(Ut),s(nt),s(Wt),s(lt),s(Gt),s(at),s(Jt),s(yt),s(Qt),s(it),s(Kt),s(S),s(Xt),s(rt),s(Yt),s(pt),s(Zt),s(ht),s(te),s(ut),s(ee),s(V),s(se),s(ft),s(ne),s(O)),Bt(ot),Bt(ct),Bt(z)}}}function Ts(h){let e,n;const r=[h[0],Ze];let p={$$slots:{default:[ks]},$$scope:{ctx:h}};for(let c=0;c<r.length;c+=1)p=pe(p,r[c]);return e=new cs({props:p}),{c(){Ft(e.$$.fragment)},l(c){vt(e.$$.fragment,c)},m(c,l){mt(e,c,l),n=!0},p(c,[l]){const o=l&1?ps(r,[l&1&&Ne(c[0]),l&0&&Ne(Ze)]):{};l&2&&(o.$$scope={dirty:l,ctx:c}),e.$set(o)},i(c){n||(_t(e.$$.fragment,c),n=!0)},o(c){bt(e.$$.fragment,c),n=!1},d(c){Bt(e,c)}}}const Ze={title:"How I animated my sorting Algorithm visualizer",description:"If you’re to do this with CSS, you will find it almost impossible if what you’re changing is not a CSS property. With the recent development in view-transitions-api, we’re moving to a phase were it going to become easier to do this.",date:"2024-01-14",lastmod:"2024-01-17",categories:["svelte","transition","tips"],thumbnail:"https://cdn.hashnode.com/res/hashnode/image/upload/v1705306342282/203b7eb8-84fe-470a-949b-0df7288f6ce3.png",label:"Interactive blog",published:!0};function $s(h,e,n){return h.$$set=r=>{n(0,e=pe(pe({},e),je(r)))},e=je(e),[e]}class Ds extends fe{constructor(e){super(),ye(this,e,$s,Ts,ce,{})}}export{Ds as default,Ze as metadata};