ranui/dist/stateDiagram-2N3HPSRC-B7VpgjJu.cjs

A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.

const C=require("./chunk-Y2CYZVJY-DPaYLFFP.cjs"),w=require("./src-C9EhKhbk.cjs"),t=require("./chunk-WYO6CB5R-u4mJNOcO.cjs"),N=require("./chunk-ICXQ74PX-BbT9JaEW.cjs"),T=require("./line-CAB5QHC6.cjs");require("./chunk-HOUHSVGY-BGB3dOvI.cjs");require("./chunk-Q4XR5HBZ-aBnPq509.cjs");require("./chunk-7BUUIJ7U-DMv_UkjI.cjs");require("./chunk-OGEWGWER-DX8sW1dT.cjs");const z=require("./graphlib-Du-578Js.cjs"),L=require("./dagre-D1-W1tt6.cjs");require("./chunk-32BRIVSS-BXVdG_nV.cjs");require("./chunk-XXDRQBXY-C8VGLZmt.cjs");require("./chunk-VR4S4FIN-KiwnPF31.cjs");require("./chunk-C7G6YPKG-CKEeW9TM.cjs");require("./chunk-ZGVPDNZ5-Cw5_HJba.cjs");require("./chunk-52WLFC77-BChUrU24.cjs");require("./chunk-FWX5IMBZ-D11-gbhc.cjs");const k=require("./chunk-EX3LRPZG-DbfbNdXo.cjs");var P=C.__name(e=>e.append("circle").attr("class","start-state").attr("r",t.getConfig2().state.sizeUnit).attr("cx",t.getConfig2().state.padding+t.getConfig2().state.sizeUnit).attr("cy",t.getConfig2().state.padding+t.getConfig2().state.sizeUnit),"drawStartState"),R=C.__name(e=>e.append("line").style("stroke","grey").style("stroke-dasharray","3").attr("x1",t.getConfig2().state.textHeight).attr("class","divider").attr("x2",t.getConfig2().state.textHeight*2).attr("y1",0).attr("y2",0),"drawDivider"),A=C.__name((e,n)=>{const d=e.append("text").attr("x",2*t.getConfig2().state.padding).attr("y",t.getConfig2().state.textHeight+2*t.getConfig2().state.padding).attr("font-size",t.getConfig2().state.fontSize).attr("class","state-title").text(n.id),g=d.node().getBBox();return e.insert("rect",":first-child").attr("x",t.getConfig2().state.padding).attr("y",t.getConfig2().state.padding).attr("width",g.width+2*t.getConfig2().state.padding).attr("height",g.height+2*t.getConfig2().state.padding).attr("rx",t.getConfig2().state.radius),d},"drawSimpleState"),G=C.__name((e,n)=>{const d=C.__name(function(c,u,B){const _=c.append("tspan").attr("x",2*t.getConfig2().state.padding).text(u);B||_.attr("dy",t.getConfig2().state.textHeight)},"addTspan"),g=e.append("text").attr("x",2*t.getConfig2().state.padding).attr("y",t.getConfig2().state.textHeight+1.3*t.getConfig2().state.padding).attr("font-size",t.getConfig2().state.fontSize).attr("class","state-title").text(n.descriptions[0]).node().getBBox(),r=g.height,p=e.append("text").attr("x",t.getConfig2().state.padding).attr("y",r+t.getConfig2().state.padding*.4+t.getConfig2().state.dividerMargin+t.getConfig2().state.textHeight).attr("class","state-description");let h=!0,i=!0;n.descriptions.forEach(function(c){h||(d(p,c,i),i=!1),h=!1});const o=e.append("line").attr("x1",t.getConfig2().state.padding).attr("y1",t.getConfig2().state.padding+r+t.getConfig2().state.dividerMargin/2).attr("y2",t.getConfig2().state.padding+r+t.getConfig2().state.dividerMargin/2).attr("class","descr-divider"),f=p.node().getBBox(),s=Math.max(f.width,g.width);return o.attr("x2",s+3*t.getConfig2().state.padding),e.insert("rect",":first-child").attr("x",t.getConfig2().state.padding).attr("y",t.getConfig2().state.padding).attr("width",s+2*t.getConfig2().state.padding).attr("height",f.height+r+2*t.getConfig2().state.padding).attr("rx",t.getConfig2().state.radius),e},"drawDescrState"),W=C.__name((e,n,d)=>{const g=t.getConfig2().state.padding,r=2*t.getConfig2().state.padding,p=e.node().getBBox(),h=p.width,i=p.x,o=e.append("text").attr("x",0).attr("y",t.getConfig2().state.titleShift).attr("font-size",t.getConfig2().state.fontSize).attr("class","state-title").text(n.id),f=o.node().getBBox().width+r;let s=Math.max(f,h);s===h&&(s=s+r);let c;const u=e.node().getBBox();n.doc,c=i-g,f>h&&(c=(h-s)/2+g),Math.abs(i-u.x)<g&&f>h&&(c=i-(f-h)/2);const B=1-t.getConfig2().state.textHeight;return e.insert("rect",":first-child").attr("x",c).attr("y",B).attr("class",d?"alt-composit":"composit").attr("width",s).attr("height",u.height+t.getConfig2().state.textHeight+t.getConfig2().state.titleShift+1).attr("rx","0"),o.attr("x",c+g),f<=h&&o.attr("x",i+(s-r)/2-f/2+g),e.insert("rect",":first-child").attr("x",c).attr("y",t.getConfig2().state.titleShift-t.getConfig2().state.textHeight-t.getConfig2().state.padding).attr("width",s).attr("height",t.getConfig2().state.textHeight*3).attr("rx",t.getConfig2().state.radius),e.insert("rect",":first-child").attr("x",c).attr("y",t.getConfig2().state.titleShift-t.getConfig2().state.textHeight-t.getConfig2().state.padding).attr("width",s).attr("height",u.height+3+2*t.getConfig2().state.textHeight).attr("rx",t.getConfig2().state.radius),e},"addTitleAndBox"),U=C.__name(e=>(e.append("circle").attr("class","end-state-outer").attr("r",t.getConfig2().state.sizeUnit+t.getConfig2().state.miniPadding).attr("cx",t.getConfig2().state.padding+t.getConfig2().state.sizeUnit+t.getConfig2().state.miniPadding).attr("cy",t.getConfig2().state.padding+t.getConfig2().state.sizeUnit+t.getConfig2().state.miniPadding),e.append("circle").attr("class","end-state-inner").attr("r",t.getConfig2().state.sizeUnit).attr("cx",t.getConfig2().state.padding+t.getConfig2().state.sizeUnit+2).attr("cy",t.getConfig2().state.padding+t.getConfig2().state.sizeUnit+2)),"drawEndState"),F=C.__name((e,n)=>{let d=t.getConfig2().state.forkWidth,g=t.getConfig2().state.forkHeight;if(n.parentId){let r=d;d=g,g=r}return e.append("rect").style("stroke","black").style("fill","black").attr("width",d).attr("height",g).attr("x",t.getConfig2().state.padding).attr("y",t.getConfig2().state.padding)},"drawForkJoinState"),X=C.__name((e,n,d,g)=>{let r=0;const p=g.append("text");p.style("text-anchor","start"),p.attr("class","noteText");let h=e.replace(/\r\n/g,"<br/>");h=h.replace(/\n/g,"<br/>");const i=h.split(t.common_default.lineBreakRegex);let o=1.25*t.getConfig2().state.noteMargin;for(const f of i){const s=f.trim();if(s.length>0){const c=p.append("tspan");if(c.text(s),o===0){const u=c.node().getBBox();o+=u.height}r+=o,c.attr("x",n+t.getConfig2().state.noteMargin),c.attr("y",d+r+1.25*t.getConfig2().state.noteMargin)}}return{textWidth:p.node().getBBox().width,textHeight:r}},"_drawLongText"),Y=C.__name((e,n)=>{n.attr("class","state-note");const d=n.append("rect").attr("x",0).attr("y",t.getConfig2().state.padding),{textWidth:g,textHeight:r}=X(e,0,0,n.append("g"));return d.attr("height",r+2*t.getConfig2().state.noteMargin),d.attr("width",g+t.getConfig2().state.noteMargin*2),d},"drawNote"),v=C.__name(function(e,n){const d=n.id,g={id:d,label:n.id,width:0,height:0},r=e.append("g").attr("id",d).attr("class","stateGroup");n.type==="start"&&P(r),n.type==="end"&&U(r),(n.type==="fork"||n.type==="join")&&F(r,n),n.type==="note"&&Y(n.note.text,r),n.type==="divider"&&R(r),n.type==="default"&&n.descriptions.length===0&&A(r,n),n.type==="default"&&n.descriptions.length>0&&G(r,n);const p=r.node().getBBox();return g.width=p.width+2*t.getConfig2().state.padding,g.height=p.height+2*t.getConfig2().state.padding,g},"drawState"),M=0,D=C.__name(function(e,n,d){const g=C.__name(function(o){switch(o){case k.StateDB.relationType.AGGREGATION:return"aggregation";case k.StateDB.relationType.EXTENSION:return"extension";case k.StateDB.relationType.COMPOSITION:return"composition";case k.StateDB.relationType.DEPENDENCY:return"dependency"}},"getRelationType");n.points=n.points.filter(o=>!Number.isNaN(o.y));const r=n.points,p=T.line_default().x(function(o){return o.x}).y(function(o){return o.y}).curve(N.basis_default),h=e.append("path").attr("d",p(r)).attr("id","edge"+M).attr("class","transition");let i="";if(t.getConfig2().state.arrowMarkerAbsolute&&(i=t.getUrl(!0)),h.attr("marker-end","url("+i+"#"+g(k.StateDB.relationType.DEPENDENCY)+"End)"),d.title!==void 0){const o=e.append("g").attr("class","stateLabel"),{x:f,y:s}=N.utils_default.calcLabelPosition(n.points),c=t.common_default.getRows(d.title);let u=0;const B=[];let _=0,E=0;for(let x=0;x<=c.length;x++){const l=o.append("text").attr("text-anchor","middle").text(c[x]).attr("x",f).attr("y",s+u),y=l.node().getBBox();_=Math.max(_,y.width),E=Math.min(E,y.x),w.log.info(y.x,f,s+u),u===0&&(u=l.node().getBBox().height,w.log.info("Title height",u,s)),B.push(l)}let b=u*c.length;if(c.length>1){const x=(c.length-1)*u*.5;B.forEach((l,y)=>l.attr("y",s+y*u-x)),b=u*c.length}const a=o.node().getBBox();o.insert("rect",":first-child").attr("class","box").attr("x",f-_/2-t.getConfig2().state.padding/2).attr("y",s-b/2-t.getConfig2().state.padding/2-3.5).attr("width",_+t.getConfig2().state.padding).attr("height",b+t.getConfig2().state.padding),w.log.info(a)}M++},"drawEdge"),m,q={},O=C.__name(function(){},"setConf"),J=C.__name(function(e){e.append("defs").append("marker").attr("id","dependencyEnd").attr("refX",19).attr("refY",7).attr("markerWidth",20).attr("markerHeight",28).attr("orient","auto").append("path").attr("d","M 19,7 L9,13 L14,7 L9,1 Z")},"insertMarkers"),I=C.__name(function(e,n,d,g){m=t.getConfig2().state;const r=t.getConfig2().securityLevel;let p;r==="sandbox"&&(p=w.select_default("#i"+n));const h=r==="sandbox"?w.select_default(p.nodes()[0].contentDocument.body):w.select_default("body"),i=r==="sandbox"?p.nodes()[0].contentDocument:document;w.log.debug("Rendering diagram "+e);const o=h.select(`[id='${n}']`);J(o),H(g.db.getRootDoc(),o.append("g").attr("id",n+"-root"),void 0,!1,h,i,g);const f=m.padding,s=o.node().getBBox(),c=s.width+f*2,u=s.height+f*2;t.configureSvgSize(o,u,c*1.75,m.useMaxWidth),o.attr("viewBox",`${s.x-m.padding}  ${s.y-m.padding} `+c+" "+u)},"draw"),Z=C.__name(e=>e?e.length*m.fontSizeFactor:1,"getLabelWidth"),H=C.__name((e,n,d,g,r,p,h)=>{const i=new z.Graph({compound:!0,multigraph:!0});let o,f=!0;for(o=0;o<e.length;o++)if(e[o].stmt==="relation"){f=!1;break}d?i.setGraph({rankdir:"LR",multigraph:!0,compound:!0,ranker:"tight-tree",ranksep:f?1:m.edgeLengthFactor,nodeSep:f?1:50,isMultiGraph:!0}):i.setGraph({rankdir:"TB",multigraph:!0,compound:!0,ranksep:f?1:m.edgeLengthFactor,nodeSep:f?1:50,ranker:"tight-tree",isMultiGraph:!0}),i.setDefaultEdgeLabel(function(){return{}});const s=h.db.getStates(),c=h.db.getRelations(),u=Object.keys(s);for(const a of u){const x=s[a];d&&(x.parentId=d);let l;if(x.doc){let y=n.append("g").attr("id",x.id).attr("class","stateGroup");l=H(x.doc,y,x.id,!g,r,p,h);{y=W(y,x,g);let S=y.node().getBBox();l.width=S.width,l.height=S.height+m.padding/2,q[x.id]={y:m.compositTitleSize}}}else l=v(n,x,i);if(x.note){const y=v(n,{descriptions:[],id:x.id+"-note",note:x.note,type:"note"},i);x.note.position==="left of"?(i.setNode(l.id+"-note",y),i.setNode(l.id,l)):(i.setNode(l.id,l),i.setNode(l.id+"-note",y)),i.setParent(l.id,l.id+"-group"),i.setParent(l.id+"-note",l.id+"-group")}else i.setNode(l.id,l)}w.log.debug("Count=",i.nodeCount(),i);let B=0;c.forEach(function(a){B++,w.log.debug("Setting edge",a),i.setEdge(a.id1,a.id2,{relation:a,width:Z(a.title),height:m.labelHeight*t.common_default.getRows(a.title).length,labelpos:"c"},"id"+B)}),L.layout(i),w.log.debug("Graph after layout",i.nodes());const _=n.node();i.nodes().forEach(function(a){a!==void 0&&i.node(a)!==void 0?(w.log.warn("Node "+a+": "+JSON.stringify(i.node(a))),r.select("#"+_.id+" #"+a).attr("transform","translate("+(i.node(a).x-i.node(a).width/2)+","+(i.node(a).y+(q[a]?q[a].y:0)-i.node(a).height/2)+" )"),r.select("#"+_.id+" #"+a).attr("data-x-shift",i.node(a).x-i.node(a).width/2),p.querySelectorAll("#"+_.id+" #"+a+" .divider").forEach(x=>{const l=x.parentElement;let y=0,S=0;l&&(l.parentElement&&(y=l.parentElement.getBBox().width),S=parseInt(l.getAttribute("data-x-shift"),10),Number.isNaN(S)&&(S=0)),x.setAttribute("x1",0-S+8),x.setAttribute("x2",y-S-8)})):w.log.debug("No Node "+a+": "+JSON.stringify(i.node(a)))});let E=_.getBBox();i.edges().forEach(function(a){a!==void 0&&i.edge(a)!==void 0&&(w.log.debug("Edge "+a.v+" -> "+a.w+": "+JSON.stringify(i.edge(a))),D(n,i.edge(a),i.edge(a).relation))}),E=_.getBBox();const b={id:d||"root",label:d||"root",width:0,height:0};return b.width=E.width+2*m.padding,b.height=E.height+2*m.padding,w.log.debug("Doc rendered",b,i),b},"renderDoc"),$={parser:k.stateDiagram_default,get db(){return new k.StateDB(1)},renderer:{setConf:O,draw:I},styles:k.styles_default,init:C.__name(e=>{e.state||(e.state={}),e.state.arrowMarkerAbsolute=e.arrowMarkerAbsolute},"init")};exports.diagram=$;