ranui
Version:
A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.
63 lines (62 loc) • 10.5 kB
JavaScript
const i=require("./chunk-Y2CYZVJY-DPaYLFFP.cjs"),O=require("./src-D8aDujwE.cjs"),y=require("./chunk-I66GZJ75-BzqGKy7F.cjs"),Z=require("./chunk-NSK5VX7P-DcRXFc-R.cjs"),yt=require("./chunk-3NCLNEKW-CHPh0zzA.cjs"),ut=require("./chunk-JWPE2WC7-D8EnWK1B.cjs"),gt=require("./mermaid-parser.core-DQClw8Il.cjs");var at=i.__name(()=>({domains:new Map,transitions:[]}),"createDefaultData"),F=at(),V={getDomains:i.__name(()=>F.domains,"getDomains"),getTransitions:i.__name(()=>F.transitions,"getTransitions"),setDomains:i.__name(t=>{if(t)for(const e of t){const n=e.domain,a=(e.items??[]).map(s=>({label:s.label}));F.domains.set(n,{name:n,items:a})}},"setDomains"),setTransitions:i.__name(t=>{t&&(F.transitions=t.filter(e=>e.from===e.to?(O.log.warn(`Cynefin: self-loop transition on domain "${e.from}" is not meaningful and will be skipped.`),!1):!0).map(e=>({from:e.from,to:e.to,label:e.label||void 0})))},"setTransitions"),getConfig:i.__name(()=>Z.cleanAndMerge({...y.defaultConfig_default.cynefin,...y.getConfig().cynefin}),"getConfig"),clear:i.__name(()=>{y.clear(),F=at()},"clear"),setAccTitle:y.setAccTitle,getAccTitle:y.getAccTitle,setDiagramTitle:y.setDiagramTitle,getDiagramTitle:y.getDiagramTitle,getAccDescription:y.getAccDescription,setAccDescription:y.setAccDescription},ht=i.__name(t=>{ut.populateCommonDb(t,V),V.setDomains(t.domains),V.setTransitions(t.transitions)},"populate"),xt={parse:i.__name(async t=>{const e=await gt.parse("cynefin",t);O.log.debug(e),ht(e)},"parse")};function G(t){let e=t+1831565813|0;return e=Math.imul(e^e>>>15,e|1),e^=e+Math.imul(e^e>>>7,e|61),((e^e>>>14)>>>0)/4294967296}i.__name(G,"seededRandom");function ot(t){let e=0;for(let n=0;n<t.length;n++){const a=t.charCodeAt(n);e=(e<<5)-e+a,e|=0}return e}i.__name(ot,"hashString");function rt(t,e){return typeof t=="number"&&Number.isFinite(t)&&t!==0?t:ot(e)}i.__name(rt,"resolveSeed");function it(t,e,n,a){const s=t/2,m=a??t*.015,D=7,z=e/D,d=[];for(let o=0;o<=D;o++){const p=G(n+o*17)*m*2-m;d.push({x:s+p,y:o*z})}let k=`M${d[0].x},${d[0].y}`;for(let o=0;o<d.length-1;o++){const p=d[o],c=d[o+1],f=(p.y+c.y)/2,_=o%2===0?1:-1,h=m*1.5*_*G(n+o*31+7),W=p.x+h,P=f,I=c.x-h;k+=` C${W},${P} ${I},${f} ${c.x},${c.y}`}return k}i.__name(it,"generateFoldPath");function ct(t,e,n,a){const s=e/2,m=a??e*.015,D=7,z=t/D,d=[];for(let o=0;o<=D;o++){const p=G(n+o*23)*m*2-m;d.push({x:o*z,y:s+p})}let k=`M${d[0].x},${d[0].y}`;for(let o=0;o<d.length-1;o++){const p=d[o],c=d[o+1],f=(p.x+c.x)/2,_=o%2===0?1:-1,h=m*1.5*_*G(n+o*37+11),W=f,P=p.y+h,I=f,E=c.y-h;k+=` C${W},${P} ${I},${E} ${c.x},${c.y}`}return k}i.__name(ct,"generateHorizontalBoundary");function st(t,e){const n=t/2,a=e*.5,s=e,m=t*.03;return[`M${n},${a}`,`C${n+m},${a+(s-a)*.2}`,`${n-m*1.5},${a+(s-a)*.55}`,`${n+m*.5},${a+(s-a)*.75}`,`C${n-m},${a+(s-a)*.85}`,`${n+m*.3},${a+(s-a)*.95}`,`${n},${s}`].join(" ")}i.__name(st,"generateCliffPath");function lt(t,e,n,a){return[`M${t-n},${e}`,`A${n},${a} 0 1,1 ${t+n},${e}`,`A${n},${a} 0 1,1 ${t-n},${e}`,"Z"].join(" ")}i.__name(lt,"generateConfusionPath");var nt={complex:{model:"Probe → Sense → Respond",practice:"Emergent Practices"},complicated:{model:"Sense → Analyse → Respond",practice:"Good Practices"},clear:{model:"Sense → Categorise → Respond",practice:"Best Practices"},chaotic:{model:"Act → Sense → Respond",practice:"Novel Practices"},confusion:{model:"",practice:"Disorder"}},$t=i.__name((t,e)=>{const n=t/2,a=e/2;return{complex:{cx:n/2,cy:a/2,x:0,y:0,w:n,h:a},complicated:{cx:n+n/2,cy:a/2,x:n,y:0,w:n,h:a},chaotic:{cx:n/2,cy:a+a/2,x:0,y:a,w:n,h:a},clear:{cx:n+n/2,cy:a+a/2,x:n,y:a,w:n,h:a},confusion:{cx:n,cy:a,x:n*.7,y:a*.7,w:n*.6,h:a*.6}}},"getDomainLayouts"),bt=i.__name(()=>{const t=y.getThemeVariables3(),e=y.getConfig();return Z.cleanAndMerge(t,e.themeVariables).cynefin},"getCynefinDomainColors"),J=3,_t={draw:i.__name((t,e,n,a)=>{const s=a.db,m=s.getDomains(),D=s.getTransitions(),z=s.getDiagramTitle(),d=s.getAccTitle(),k=s.getAccDescription(),o=s.getConfig(),p=bt();O.log.debug("Rendering Cynefin diagram");const c=o.width,f=o.height,_=o.padding,h=o.showDomainDescriptions,W=o.boundaryAmplitude,P=c+_*2,I=f+_*2,E={complex:p.complexBg,complicated:p.complicatedBg,clear:p.clearBg,chaotic:p.chaoticBg,confusion:p.confusionBg},A=yt.selectSvgElement(e);y.configureSvgSize(A,I,P,o.useMaxWidth??!0),A.attr("viewBox",`0 0 ${P} ${I}`),d&&A.append("title").text(d),k&&A.append("desc").text(k);const T=A.append("g").attr("transform",`translate(${_}, ${_})`),R=$t(c,f),K=rt(o.seed,e),dt=T.append("g").attr("class","cynefin-backgrounds"),X=["complex","complicated","chaotic","clear"];for(const l of X){const r=R[l];dt.append("rect").attr("class","cynefinDomain").attr("x",r.x).attr("y",r.y).attr("width",r.w).attr("height",r.h).attr("fill",E[l]).attr("fill-opacity",.4).attr("stroke","none")}const j=T.append("g").attr("class","cynefin-boundaries");j.append("path").attr("class","cynefinBoundary").attr("d",it(c,f,K,W)).attr("fill","none"),j.append("path").attr("class","cynefinBoundary").attr("d",ct(c,f,K+100,W)).attr("fill","none"),j.append("path").attr("class","cynefinCliff").attr("d",st(c,f)).attr("fill","none");const ft=c*.15,mt=f*.15;T.append("path").attr("class","cynefinConfusion").attr("d",lt(c/2,f/2,ft,mt)).attr("fill",E.confusion).attr("fill-opacity",.5);const U=T.append("g").attr("class","cynefin-labels");for(const l of X){const r=R[l];U.append("text").attr("class","cynefinDomainLabel").attr("x",r.cx).attr("y",h?r.cy-30:r.cy).attr("text-anchor","middle").attr("dominant-baseline","middle").text(l.charAt(0).toUpperCase()+l.slice(1))}if(U.append("text").attr("class","cynefinDomainLabel").attr("x",c/2).attr("y",h?f/2-10:f/2).attr("text-anchor","middle").attr("dominant-baseline","middle").text("Confusion"),h){const l=T.append("g").attr("class","cynefin-subtitles");for(const r of X){const g=R[r],u=nt[r];l.append("text").attr("class","cynefinSubtitle").attr("x",g.cx).attr("y",g.cy-10).attr("text-anchor","middle").attr("dominant-baseline","middle").text(u.model),l.append("text").attr("class","cynefinSubtitle").attr("x",g.cx).attr("y",g.cy+5).attr("text-anchor","middle").attr("dominant-baseline","middle").text(u.practice)}l.append("text").attr("class","cynefinSubtitle").attr("x",c/2).attr("y",f/2+8).attr("text-anchor","middle").attr("dominant-baseline","middle").text(nt.confusion.practice)}const Q=T.append("g").attr("class","cynefin-items"),Y=26;for(const l of["complex","complicated","chaotic","clear","confusion"]){const r=m.get(l);if(!r||r.items.length===0)continue;const g=R[l],u=l==="confusion";let M=r.items,q=0;u&&r.items.length>J&&(q=r.items.length-J,M=r.items.slice(0,J));let v;if(u){const $=h?22:14;v=g.cy+$}else v=g.cy+(h?25:15);if([...M].forEach(($,B)=>{const C=v+B*30,S=Q.append("g"),L=S.append("text").attr("class","cynefinItemText").attr("x",0).attr("y",Y/2).attr("text-anchor","middle").attr("dominant-baseline","central").text($.label);let b=$.label.length*7;const x=L.node();if(x&&typeof x.getBBox=="function"){const H=x.getBBox();H.width>0&&(b=H.width)}const w=b+20,N=g.cx-w/2;S.attr("transform",`translate(${N}, ${C})`),S.insert("rect","text").attr("class","cynefinItem").attr("x",0).attr("y",0).attr("width",w).attr("height",Y).attr("rx",4).attr("ry",4).attr("fill",E[l]).attr("fill-opacity",.95),L.attr("x",w/2).attr("y",Y/2)}),q>0){const $=v+M.length*30,B=`+${q} more`,C=Q.append("g"),S=C.append("text").attr("class","cynefinItemText").attr("x",0).attr("y",Y/2).attr("text-anchor","middle").attr("dominant-baseline","central").text(B);let L=B.length*7;const b=S.node();if(b&&typeof b.getBBox=="function"){const N=b.getBBox();N.width>0&&(L=N.width)}const x=L+20,w=g.cx-x/2;C.attr("transform",`translate(${w}, ${$})`),C.insert("rect","text").attr("class","cynefinItemOverflow").attr("x",0).attr("y",0).attr("width",x).attr("height",Y).attr("rx",4).attr("ry",4).attr("fill",E[l]).attr("fill-opacity",.6),S.attr("x",x/2).attr("y",Y/2)}}if(D.length>0){const l=A.select("defs").empty()?A.append("defs"):A.select("defs"),r=`cynefin-arrow-${e}`;l.append("marker").attr("id",r).attr("viewBox","0 0 10 10").attr("refX",9).attr("refY",5).attr("markerWidth",6).attr("markerHeight",6).attr("orient","auto-start-reverse").append("path").attr("d","M 0 0 L 10 5 L 0 10 z").attr("class","cynefinArrowHead");const g=T.append("g").attr("class","cynefin-arrows");D.forEach(u=>{const M=R[u.from],q=R[u.to];if(!M||!q)return;if(u.from===u.to){O.log.warn(`Cynefin renderer: skipping self-loop on domain "${u.from}"`);return}const v=M.cx,$=M.cy,B=q.cx,C=q.cy,S=(v+B)/2,L=($+C)/2,b=B-v,x=C-$,w=Math.sqrt(b*b+x*x),N=w*.15,H=-x/w,pt=b/w,tt=S+H*N,et=L+pt*N;g.append("path").attr("class","cynefinArrowLine").attr("d",`M${v},${$} Q${tt},${et} ${B},${C}`).attr("fill","none").attr("marker-end",`url(#${r})`),u.label&&g.append("text").attr("class","cynefinArrowLabel").attr("x",tt).attr("y",et-6).attr("text-anchor","middle").attr("dominant-baseline","auto").text(u.label)})}z&&T.append("text").attr("class","cynefinTitle").attr("x",c/2).attr("y",-_/2).attr("text-anchor","middle").attr("dominant-baseline","middle").text(z)},"draw")},Ct=i.__name(()=>{const t=y.getThemeVariables3(),e=y.getConfig();return Z.cleanAndMerge(t,e.themeVariables).cynefin},"getCynefinTheme"),wt={parser:xt,db:V,renderer:_t,styles:i.__name(()=>{const t=Ct();return`
.cynefinDomain {
stroke: none;
}
.cynefinDomainLabel {
font-size: ${t.domainFontSize}px;
font-weight: bold;
fill: ${t.labelColor};
}
.cynefinSubtitle {
font-size: ${t.itemFontSize-1}px;
fill: ${t.textColor};
font-style: italic;
}
.cynefinItem {
fill-opacity: 0.95;
stroke: ${t.boundaryColor};
stroke-width: 1;
}
.cynefinItemText {
font-size: ${t.itemFontSize}px;
fill: ${t.textColor};
}
.cynefinItemOverflow {
fill-opacity: 0.6;
stroke: ${t.boundaryColor};
stroke-width: 1;
stroke-dasharray: 3 2;
}
.cynefinBoundary {
stroke: ${t.boundaryColor};
stroke-width: ${t.boundaryWidth};
stroke-dasharray: 6 3;
}
.cynefinCliff {
stroke: ${t.cliffColor};
stroke-width: ${t.cliffWidth};
}
.cynefinConfusion {
stroke: ${t.boundaryColor};
stroke-width: 1.5;
stroke-dasharray: 4 2;
}
.cynefinArrowLine {
stroke: ${t.arrowColor};
stroke-width: ${t.arrowWidth};
fill: none;
}
.cynefinArrowHead {
fill: ${t.arrowColor};
stroke: none;
}
.cynefinArrowLabel {
font-size: ${t.itemFontSize-1}px;
fill: ${t.textColor};
}
.cynefinTitle {
font-size: ${t.domainFontSize+2}px;
font-weight: bold;
fill: ${t.labelColor};
}
`},"styles")};exports.diagram=wt;