https://hesprs.github.io/assets/chunks/DemoViewer.B8a3yegD.js

1import{Bt as e,Et as t,J as n,Lt as r,W as i,Y as a,Z as o,et as s,ft as c,jt as l,nt as u,o as d,y as f}from"./framework.DmUbhTcw.js";import{i as p,n as m,r as h,t as g}from"./dist.BhgI-MHW.js";var _={edges:[{id:`69024ca37afac075`,styleAttributes:{},fromNode:`05070749b6678ecb`,fromSide:`bottom`,toNode:`ad03bace3d526a2d`,toSide:`top`,color:`6`,label:`After Processing`},{id:`1ec2644450457af2`,styleAttributes:{},fromNode:`7879f90910615218`,fromSide:`left`,toNode:`dd6210669d6e7586`,toSide:`left`,color:`5`},{id:`3d50d033d2b95cd0`,styleAttributes:{path:`short-dashed`},fromNode:`dd6210669d6e7586`,fromSide:`right`,toNode:`7879f90910615218`,toSide:`right`,color:`5`,label:`Forward Ref`},{id:`69d26e847f46bc42`,styleAttributes:{},fromNode:`3be1cd40924f4ff1`,fromSide:`right`,toNode:`7879f90910615218`,toSide:`right`,color:`5`},{id:`3385235c6a13cb58`,styleAttributes:{},fromNode:`3be1cd40924f4ff1`,fromSide:`right`,toNode:`f188948a86462f74`,toSide:`right`,color:`5`},{id:`c44cdfc12c9eba05`,styleAttributes:{},fromNode:`5750528f086cf0dd`,fromSide:`left`,toNode:`f188948a86462f74`,toSide:`left`,color:`5`},{id:`44bab6781ea91ad3`,styleAttributes:{},fromNode:`5750528f086cf0dd`,fromSide:`left`,toNode:`dd6210669d6e7586`,toSide:`left`,color:`5`},{id:`07c96354cd6ccc4a`,styleAttributes:{},fromNode:`5750528f086cf0dd`,fromSide:`left`,toNode:`7879f90910615218`,toSide:`left`,color:`5`},{id:`4cefa24f7400341a`,styleAttributes:{},fromNode:`5750528f086cf0dd`,fromSide:`left`,toNode:`3be1cd40924f4ff1`,toSide:`left`,color:`5`},{id:`f407467a654f1841`,styleAttributes:{},fromNode:`22232f8a6f091b5e`,fromSide:`right`,toNode:`5750528f086cf0dd`,toSide:`left`,color:`5`},{id:`cee4aff4dc6dd164`,styleAttributes:{},fromNode:`22232f8a6f091b5e`,fromSide:`right`,toNode:`f188948a86462f74`,toSide:`left`,color:`5`},{id:`e127e8106fbb9b8a`,styleAttributes:{},fromNode:`22232f8a6f091b5e`,fromSide:`right`,toNode:`dd6210669d6e7586`,toSide:`left`,color:`5`},{id:`ec4a2b2f91a2c327`,styleAttributes:{},fromNode:`22232f8a6f091b5e`,fromSide:`right`,toNode:`7879f90910615218`,toSide:`left`,color:`5`},{id:`bf7af48c1a778405`,styleAttributes:{},fromNode:`22232f8a6f091b5e`,fromSide:`right`,toNode:`3be1cd40924f4ff1`,toSide:`left`,color:`5`},{id:`cbc78d17ed306141`,styleAttributes:{},fromNode:`22232f8a6f091b5e`,fromSide:`right`,toNode:`3a6b316c15b9dfd8`,toSide:`left`,color:`5`},{id:`c863cc3999863aa4`,styleAttributes:{},fromNode:`3484cb50304a8f95`,fromSide:`right`,toNode:`05070749b6678ecb`,toSide:`left`,color:`6`},{id:`174e433f44b17c80`,styleAttributes:{},fromNode:`e0807693f63ec21e`,fromSide:`right`,toNode:`05070749b6678ecb`,toSide:`left`,color:`6`},{id:`852629e4effecdb5`,styleAttributes:{},fromNode:`3d072911e8eb02c7`,fromSide:`right`,toNode:`05070749b6678ecb`,toSide:`left`,color:`6`},{id:`7f2dfd4cb35a72a5`,styleAttributes:{},fromNode:`222011ffbe3e170b`,fromSide:`right`,toNode:`05070749b6678ecb`,toSide:`left`,color:`6`},{id:`5293a076e8cae9ee`,styleAttributes:{},fromNode:`07bdb2d1ee50513b`,fromSide:`right`,toNode:`05070749b6678ecb`,toSide:`left`,color:`6`},{id:`8bcb6e002caa7462`,styleAttributes:{},fromNode:`04726f1b68830bc2`,fromSide:`right`,toNode:`05070749b6678ecb`,toSide:`left`,color:`6`},{id:`6b78025b58507afe`,styleAttributes:{},fromNode:`ad03bace3d526a2d`,fromSide:`left`,toNode:`43c6ee8f4e535cc9`,toSide:`right`,color:`6`},{id:`65f15bad81c4f4f3`,styleAttributes:{},fromFloating:!1,fromNode:`6f2874961565b1a9`,fromSide:`top`,toNode:`22232f8a6f091b5e`,toSide:`bottom`,color:`5`},{id:`95150de3cd517bae`,styleAttributes:{},fromNode:`62c0bf430454e577`,fromSide:`right`,toNode:`1e4c16e7d7eaf055`,toSide:`left`},{id:`7179314583e20608`,styleAttributes:{},toFloating:!1,fromNode:`d53b08a635029dc8`,fromSide:`left`,toNode:`6f2874961565b1a9`,toSide:`right`,color:`5`},{id:`3f2c19f968c5d664`,styleAttributes:{},toFloating:!1,fromFloating:!1,fromNode:`1ae6fa286a80276c`,fromSide:`right`,toNode:`05070749b6678ecb`,toSide:`left`,color:`6`},{id:`e43e50cee761f200`,styleAttributes:{},toFloating:!1,fromNode:`5750528f086cf0dd`,fromSide:`left`,toNode:`4640b4e7b1c2817f`,toSide:`left`,color:`5`},{id:`0c8afceb49f386c8`,styleAttributes:{},toFloating:!1,fromFloating:!1,fromNode:`4640b4e7b1c2817f`,fromSide:`right`,toNode:`3be1cd40924f4ff1`,toSide:`right`,color:`5`},{id:`08a9b86c8cc587a5`,styleAttributes:{},toFloating:!1,fromFloating:!1,fromNode:`4640b4e7b1c2817f`,fromSide:`right`,toNode:`7879f90910615218`,toSide:`right`,color:`5`},{id:`617fe3d9880b1c50`,styleAttributes:{},toFloating:!1,fromFloating:!1,fromNode:`4640b4e7b1c2817f`,fromSide:`right`,toNode:`f188948a86462f74`,toSide:`right`,color:`5`}],metadata:{frontmatter:{},version:`1.0-1.0`},nodes:[{id:`9d2fd1cf9560b5cf`,type:`group`,x:980,y:580,width:478,height:240,color:`1`,label:`Main Class`},{id:`35c44106f4320a95`,type:`group`,x:980,y:-20,width:478,height:240,color:`3`,label:`Renderer`},{id:`3a71c9fbd8775a12`,type:`group`,x:980,y:280,width:478,height:240,color:`3`,label:`Data Manager`},{id:`fc8278214b199cdb`,type:`group`,x:980,y:-620,width:478,height:240,color:`3`,label:`Overlay Manager`},{id:`ecc016305ff46026`,type:`group`,x:980,y:-320,width:478,height:240,color:`3`,label:`Interaction Hander`},{id:`197ccbfc946052f6`,type:`group`,x:980,y:-920,width:478,height:240,color:`3`,label:`Style Manager`},{id:`3d271e1f35d6cefb`,type:`group`,x:980,y:-1200,width:478,height:220,color:`3`,label:`Controller`},{id:`89d1ce7cd68dbeed`,type:`group`,x:980,y:-1440,width:478,height:180,color:`3`,label:`Custom Module`},{id:`3d072911e8eb02c7`,styleAttributes:{},text:`<h3>Interface</h3>
2`,type:`text`,x:1e3,y:-600,width:440,height:60},{id:`7879f90910615218`,styleAttributes:{},text:`<h3>Logic</h3>
3<p><strong>Work</strong>: Constructs interactive canvas elements and manages element interactions and rendering.</p>
4`,type:`text`,x:1e3,y:-520,width:440,height:119},{id:`222011ffbe3e170b`,styleAttributes:{},text:`<h3>Interface</h3>
5`,type:`text`,x:1e3,y:-300,width:440,height:60},{id:`dd6210669d6e7586`,styleAttributes:{},text:`<h3>Logic</h3>
6<p><strong>Work</strong>: Uses <a href="https://pointeract.consensia.cc">Pointeract</a> to listen to interactions on the viewer and translate to <code>DataManager</code> method calls.</p>
7`,type:`text`,x:1e3,y:-220,width:440,height:120},{id:`07bdb2d1ee50513b`,styleAttributes:{},text:`<h3>Interface</h3>
8`,type:`text`,x:1e3,y:0,width:440,height:60},{id:`f188948a86462f74`,styleAttributes:{},text:`<h3>Logic</h3>
9<p><strong>Work</strong>: Renders all groups, edges and labels that doesn&#39;t need interactivity.</p>
10`,type:`text`,x:1e3,y:80,width:440,height:120},{id:`04726f1b68830bc2`,styleAttributes:{},text:`<h3>Interface</h3>
11`,type:`text`,x:1e3,y:300,width:440,height:60},{id:`5750528f086cf0dd`,styleAttributes:{},text:`<h3>Logic</h3>
12<p><strong>Work</strong>: Initializes the canvas, manages states, and provides canvas control mathods.</p>
13`,type:`text`,x:1e3,y:380,width:440,height:120},{id:`43c6ee8f4e535cc9`,styleAttributes:{},text:`<h2>Main Interface</h2>
14`,type:`text`,x:1e3,y:600,width:440,height:60},{id:`d53b08a635029dc8`,styleAttributes:{},text:`<h2>Main Logic</h2>
15<p><strong>Work</strong>: Controls lazy loading, provides start and dispose hooks, and manages modules.</p>
16`,type:`text`,x:1e3,y:680,width:440,height:120},{id:`3484cb50304a8f95`,styleAttributes:{},text:`<h3>Interface</h3>
17`,type:`text`,x:1e3,y:-1420,width:440,height:60},{id:`3a6b316c15b9dfd8`,styleAttributes:{},text:`<h3>Logic</h3>
18`,type:`text`,x:1e3,y:-1340,width:440,height:60},{id:`3be1cd40924f4ff1`,styleAttributes:{},text:`<h3>Logic</h3>
19<p><strong>Work</strong>: Controls main render loop and handles viewer resize</p>
20`,type:`text`,x:1e3,y:-1100,width:440,height:100},{id:`e0807693f63ec21e`,styleAttributes:{},text:`<h3>Interface</h3>
21`,type:`text`,x:1e3,y:-1180,width:440,height:60},{id:`4640b4e7b1c2817f`,styleAttributes:{},text:`<h3>Logic</h3>
22<p><strong>Work</strong>: Generates applies and caches color palette. Controls viewer theme toggling.</p>
23`,type:`text`,x:1e3,y:-820,width:440,height:119},{id:`1ae6fa286a80276c`,styleAttributes:{},text:`<h3>Interface</h3>
24`,type:`text`,x:1e3,y:-900,width:440,height:60},{id:`05070749b6678ecb`,styleAttributes:{textAlign:null},text:`<h3>Central Type Machine</h3>
25`,type:`text`,x:1920,y:-460,width:320,height:60},{id:`ad03bace3d526a2d`,styleAttributes:{},text:`<h3>All Available Options and Main Class Augmentations</h3>
26`,type:`text`,x:1920,y:580,width:320,height:100},{id:`6f2874961565b1a9`,styleAttributes:{},text:`<h3>Received Options and Augmentations</h3>
27`,type:`text`,x:160,y:708,width:440,height:65},{id:`22232f8a6f091b5e`,styleAttributes:{},text:`<h3>Coordinator</h3>
28<ul>
29<li>Start/dispose hooks</li>
30<li>DI container</li>
31</ul>
32`,type:`text`,x:265,y:-525,width:230,height:130},{file:`https://github.com/hesprs/json-canvas-viewer/raw/main/assets/logo.svg`,

32id:`62c0bf430454e577`,type:`file`,x:2360,y:-960,width:400,height:400},{id:`5a670d40836205ec`,type:`link`,url:`https://jsoncanvas.org`,x:2360,y:-380,width:1020,height:710},{id:`1e4c16e7d7eaf055`,styleAttributes:{},text:`<h2>Learn More</h2>
33<ul>
34<li><a href="https://github.com/hesprs/json-canvas-viewer/wiki/1-%F0%9F%9A%80-Quick-Start#-chimpanzee-version">Deadly simple chimp usage</a></li>
35<li><a href="https://github.com/hesprs/json-canvas-viewer/wiki/1-%F0%9F%9A%80-Quick-Start#-full-version">Full setup</a></li>
36<li><a href="https://github.com/hesprs/json-canvas-viewer/wiki/1-%F0%9F%9A%80-Quick-Start#vite">Vite plugin</a></li>
37<li><a href="https://github.com/hesprs/json-canvas-viewer/wiki/1-%F0%9F%9A%80-Quick-Start#vue">Use as a Vue component</a></li>
38<li><a href="https://github.com/hesprs/json-canvas-viewer/wiki/1-%F0%9F%9A%80-Quick-Start#react">Use as a React component</a></li>
39<li><a href="https://github.com/hesprs/json-canvas-viewer/wiki/1-%F0%9F%9A%80-Quick-Start#preact">Use as a Preact component</a></li>
40<li><a href="https://github.com/hesprs/json-canvas-viewer/wiki/4-%F0%9F%96%87%EF%B8%8F-Prerendering-and-Bridges#prerendering">Prerendering</a></li>
41<li><a href="https://github.com/hesprs/json-canvas-viewer/wiki/3-%F0%9F%A7%A9-Modules">Optional modules</a></li>
42<li><a href="https://github.com/hesprs/json-canvas-viewer/wiki/5-%F0%9F%A7%91%E2%80%8D%F0%9F%92%BB-Develop-a-Module">Extend the viewer</a></li>
43</ul>
44`,type:`text`,x:2820,y:-960,width:560,height:400}]},v={class:`canvas-mount-demo`},y={class:`counter-container`},b={class:`counter-value`},x=d(u({__name:`DemoCounter`,setup(t){let r=l(0),i=()=>r.value++,a=()=>r.value--;return(t,s)=>(c(),o(`div`,v,[s[0]||=n(`div`,{class:`header-line`},` Now you can mount your own components (Vue, React, Preact) into the canvas! `,-1),n(`div`,y,[n(`button`,{onClick:a,class:`counter-btn`},`−`),n(`span`,b,e(r.value),1),n(`button`,{onClick:i,class:`counter-btn`},`+`)])]))}}),[[`__scopeId`,`data-v-33d0ed29`]]),S=u({__name:`DemoViewer`,setup(e){let{isDark:n}=f();return(e,o)=>(c(),a(i,null,{default:t(()=>[s(r(g),{options:{loading:`lazy`,minimapCollapsed:!0,preventMistouchAtStart:!0},class:`canvas-viewer`,modules:[r(h),r(m),r(p)],theme:r(n)?`dark`:`light`,canvas:r(_),isPrerendering:r(!1)},{link:t(()=>[s(x)]),_:1},8,[`modules`,`theme`,`canvas`,`isPrerendering`])]),_:1}))}});export{S as t};