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.4 kB
JavaScript
const ut=require("./mermaid-parser.core-DYumW1vq.cjs"),i=require("./chunk-Y2CYZVJY-DPaYLFFP.cjs"),G=require("./src-C9EhKhbk.cjs"),y=require("./chunk-WYO6CB5R-u4mJNOcO.cjs"),J=require("./chunk-ICXQ74PX-BbT9JaEW.cjs"),gt=require("./chunk-VAUOI2AC-DfQf5L2_.cjs"),ht=require("./chunk-JWPE2WC7-D8EnWK1B.cjs");var ot=i.__name(()=>({domains:new Map,transitions:[]}),"createDefaultData"),F=ot(),X={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?(G.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(()=>J.cleanAndMerge({...y.defaultConfig_default.cynefin,...y.getConfig().cynefin}),"getConfig"),clear:i.__name(()=>{y.clear(),F=ot()},"clear"),setAccTitle:y.setAccTitle,getAccTitle:y.getAccTitle,setDiagramTitle:y.setDiagramTitle,getDiagramTitle:y.getDiagramTitle,getAccDescription:y.getAccDescription,setAccDescription:y.setAccDescription},xt=i.__name(t=>{ht.populateCommonDb(t,X),X.setDomains(t.domains),X.setTransitions(t.transitions)},"populate"),$t={parse:i.__name(async t=>{const e=await ut.parse("cynefin",t);G.log.debug(e),xt(e)},"parse")};function H(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(H,"seededRandom");function rt(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(rt,"hashString");function it(t,e){return typeof t=="number"&&Number.isFinite(t)&&t!==0?t:rt(e)}i.__name(it,"resolveSeed");function ct(t,e,n,a){const s=t/2,m=a??t*.015,D=7,P=e/D,d=[];for(let o=0;o<=D;o++){const p=H(n+o*17)*m*2-m;d.push({x:s+p,y:o*P})}let A=`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*_*H(n+o*31+7),W=p.x+h,I=f,N=c.x-h;A+=` C${W},${I} ${N},${f} ${c.x},${c.y}`}return A}i.__name(ct,"generateFoldPath");function st(t,e,n,a){const s=e/2,m=a??e*.015,D=7,P=t/D,d=[];for(let o=0;o<=D;o++){const p=H(n+o*23)*m*2-m;d.push({x:o*P,y:s+p})}let A=`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*_*H(n+o*37+11),W=f,I=p.y+h,N=f,R=c.y-h;A+=` C${W},${I} ${N},${R} ${c.x},${c.y}`}return A}i.__name(st,"generateHorizontalBoundary");function lt(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(lt,"generateCliffPath");function dt(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(dt,"generateConfusionPath");var at={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"}},bt=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"),_t=i.__name(()=>J.cleanAndMerge(y.getThemeVariables3(),y.getConfig().themeVariables).cynefin,"getCynefinDomainColors"),U=3,Ct={draw:i.__name((t,e,n,a)=>{const s=a.db,m=s.getDomains(),D=s.getTransitions(),P=s.getDiagramTitle(),d=s.getAccTitle(),A=s.getAccDescription(),o=s.getConfig(),p=_t();G.log.debug("Rendering Cynefin diagram");const c=o.width,f=o.height,_=o.padding,h=o.showDomainDescriptions,W=o.boundaryAmplitude,I=c+_*2,N=f+_*2,R={complex:p.complexBg,complicated:p.complicatedBg,clear:p.clearBg,chaotic:p.chaoticBg,confusion:p.confusionBg},k=gt.selectSvgElement(e);y.configureSvgSize(k,N,I,o.useMaxWidth??!0),k.attr("viewBox",`0 0 ${I} ${N}`),d&&k.append("title").text(d),A&&k.append("desc").text(A);const T=k.append("g").attr("transform",`translate(${_}, ${_})`),Y=bt(c,f),Q=it(o.seed,e),ft=T.append("g").attr("class","cynefin-backgrounds"),V=["complex","complicated","chaotic","clear"];for(const l of V){const r=Y[l];ft.append("rect").attr("class","cynefinDomain").attr("x",r.x).attr("y",r.y).attr("width",r.w).attr("height",r.h).attr("fill",R[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",ct(c,f,Q,W)).attr("fill","none"),j.append("path").attr("class","cynefinBoundary").attr("d",st(c,f,Q+100,W)).attr("fill","none"),j.append("path").attr("class","cynefinCliff").attr("d",lt(c,f)).attr("fill","none");const mt=c*.15,pt=f*.15;T.append("path").attr("class","cynefinConfusion").attr("d",dt(c/2,f/2,mt,pt)).attr("fill",R.confusion).attr("fill-opacity",.5);const Z=T.append("g").attr("class","cynefin-labels");for(const l of V){const r=Y[l];Z.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(Z.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 V){const g=Y[r],u=at[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(at.confusion.practice)}const K=T.append("g").attr("class","cynefin-items"),E=26,tt=10;for(const l of["complex","complicated","chaotic","clear","confusion"]){const r=m.get(l);if(!r||r.items.length===0)continue;const g=Y[l],u=l==="confusion";let M=r.items,q=0;u&&r.items.length>U&&(q=r.items.length-U,M=r.items.slice(0,U));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=K.append("g"),z=S.append("text").attr("class","cynefinItemText").attr("x",0).attr("y",E/2).attr("text-anchor","middle").attr("dominant-baseline","central").text($.label);let b=$.label.length*7;const x=z.node();if(x&&typeof x.getBBox=="function"){const O=x.getBBox();O.width>0&&(b=O.width)}const w=b+tt*2,L=g.cx-w/2;S.attr("transform",`translate(${L}, ${C})`),S.insert("rect","text").attr("class","cynefinItem").attr("x",0).attr("y",0).attr("width",w).attr("height",E).attr("rx",4).attr("ry",4).attr("fill",R[l]).attr("fill-opacity",.95),z.attr("x",w/2).attr("y",E/2)}),q>0){const $=v+M.length*30,B=`+${q} more`,C=K.append("g"),S=C.append("text").attr("class","cynefinItemText").attr("x",0).attr("y",E/2).attr("text-anchor","middle").attr("dominant-baseline","central").text(B);let z=B.length*7;const b=S.node();if(b&&typeof b.getBBox=="function"){const L=b.getBBox();L.width>0&&(z=L.width)}const x=z+tt*2,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",E).attr("rx",4).attr("ry",4).attr("fill",R[l]).attr("fill-opacity",.6),S.attr("x",x/2).attr("y",E/2)}}if(D.length>0){const l=k.select("defs").empty()?k.append("defs"):k.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=Y[u.from],q=Y[u.to];if(!M||!q)return;if(u.from===u.to){G.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,z=($+C)/2,b=B-v,x=C-$,w=Math.sqrt(b*b+x*x),L=w*.15,O=-x/w,yt=b/w,et=S+O*L,nt=z+yt*L;g.append("path").attr("class","cynefinArrowLine").attr("d",`M${v},${$} Q${et},${nt} ${B},${C}`).attr("fill","none").attr("marker-end",`url(#${r})`),u.label&&g.append("text").attr("class","cynefinArrowLabel").attr("x",et).attr("y",nt-6).attr("text-anchor","middle").attr("dominant-baseline","auto").text(u.label)})}P&&T.append("text").attr("class","cynefinTitle").attr("x",c/2).attr("y",-_/2).attr("text-anchor","middle").attr("dominant-baseline","middle").text(P)},"draw")},wt=i.__name(()=>J.cleanAndMerge(y.getThemeVariables3(),y.getConfig().themeVariables).cynefin,"getCynefinTheme"),Dt={parser:$t,db:X,renderer:Ct,styles:i.__name(()=>{const t=wt();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=Dt;