-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathaxure-to-mermaid-injected.min.js
2 lines (2 loc) · 5.56 KB
/
axure-to-mermaid-injected.min.js
1
2
javascript:(()=>{var g={all:{text:"Full",type:"generate"},startHere:{text:"Current",type:"generate"},copy:{text:"Copy",type:"copy"},txtDownload:{text:"TXT",type:"download"},svgUrl:{text:"SVG",type:"url"},svgDownload:{text:"SVG",type:"download"},pngUrl:{text:"PNG",type:"url"},pngDownload:{text:"PNG",type:"download"}},y=[["Sitemap",["all","startHere"]],["Code",["copy"]],["Download",["txtDownload","svgDownload","pngDownload"]],["URL",["svgUrl","pngUrl"]]],b=["https://cdn.jsdelivr.net/npm/[email protected]/dist/pako.min.js","https://cdn.jsdelivr.net/npm/[email protected]/base64.min.js"];async function w(){for(let a of b)await v(a)}function v(a){return new Promise((e,o)=>{let t=document.createElement("script");t.type="text/javascript",t.src=a,t.onload=e,t.onerror=o,document.head.appendChild(t)})}function c(a,e="",o={}){let t=document.createElement(a);t.textContent=e;for(let[n,r]of Object.entries(o))n==="style"&&typeof r=="object"?Object.entries(r).forEach(([s,i])=>{t.style[s]=i}):t[n]=r;return t}function l(a){console.log(a);let e=document.createElement("textarea");e.value=a,document.body.appendChild(e),e.select(),document.execCommand("copy"),document.body.removeChild(e)}function m(a){let e={code:a,mermaid:JSON.stringify({theme:"default"},null,2),updateEditor:!0,autoSync:!0,updateDiagram:!0},o=JSON.stringify(e),t=new TextEncoder().encode(o),n=pako.deflate(t,{level:9});return Base64.fromUint8Array(n,!0)}async function h(a,e=!1){let t=`https://mermaid.ink/svg/pako:${m(a)}`;if(e){let r=await(await fetch(t)).text();x(r,"sitemap.svg","image/svg+xml")}else window.open(t,"_blank")}async function f(a,e=!1){let t=`https://mermaid.ink/img/pako:${m(a)}?type=png`;if(e){let r=await(await fetch(t)).blob();x(r,"sitemap.png","image/png")}else window.open(t,"_blank")}function x(a,e,o){let t=new Blob([a],{type:o}),n=URL.createObjectURL(t),r=document.createElement("a");r.href=n,r.download=e,document.body.appendChild(r),r.click(),document.body.removeChild(r),URL.revokeObjectURL(n)}function C(a){x(a,"sitemap.txt","text/plain")}var d=class{constructor(e,o){this.processor=e,this.sitemapArray=o,this.currentMermaidText="",this.toolbar=c("div","",{style:{position:"fixed",display:"flex",flexDirection:"row",bottom:"2vh",right:"2vw",backgroundColor:"white",padding:"10px",border:"1px solid #ccc",zIndex:"1000",gap:"3ch"}}),this.buttons=this.createButtons(),this.attachButtons(),document.body.appendChild(this.toolbar)}createButtons(){return Object.entries(g).reduce((e,[o,t])=>(e[o]=c("button",`${t.text}`,{disabled:t.type!=="generate",dataset:{buttonType:t.type},onclick:()=>this.handleButtonClick(o,t.type)}),e),{})}handleButtonClick(e,o){({generate:{all:()=>this.handleAllClick(),startHere:()=>this.handleStartHereClick()},copy:{copy:()=>{console.log(this.currentMermaidText),l(this.currentMermaidText)}},download:{txtDownload:()=>C(this.currentMermaidText),svgDownload:()=>h(this.currentMermaidText,!0),pngDownload:()=>f(this.currentMermaidText,!0)},url:{svgUrl:()=>h(this.currentMermaidText),pngUrl:()=>f(this.currentMermaidText)}})[o]?.[e]?.()}handleAllClick(){let e=this.processor.processSitemap(this.sitemapArray);this.currentMermaidText=this.processor.generateMermaidMarkup(e),l(this.currentMermaidText),this.enableExportButtons()}handleStartHereClick(){let e=$axure.page.shortId;if(e||(e=new URLSearchParams(window.parent.location.search).get("id")),!e){let o=new URLSearchParams(window.parent.location.search).get("p");if(o){let t=n=>{for(let r of n){if(r.url&&r.url.replace(".html","")===o)return r.id;if(r.children){let s=t(r.children);if(s)return s}}return null};e=t($axure.document.sitemap.rootNodes)}}if(e){let o=this.processor.findCurrentNode(this.sitemapArray,e);if(o){let t=this.processor.processSitemap([o]);this.currentMermaidText=this.processor.generateMermaidMarkup(t),l(this.currentMermaidText),this.enableExportButtons()}}}enableExportButtons(){Object.values(this.buttons).forEach(e=>{e.dataset.buttonType!=="generate"&&(e.disabled=!1)})}unload(){this.toolbar?.parentNode?.removeChild(this.toolbar)}attachButtons(){y.forEach(([o,t])=>{let n=c("div","",{style:{display:"flex",flexDirection:"column",alignItems:"center",fontSize:".875rem",gap:".25rem"}}),r=c("span",o);n.appendChild(r);let s=c("div","",{style:{display:"flex",gap:".125rem"}});t.forEach(i=>{s.appendChild(this.buttons[i])}),n.appendChild(s),this.toolbar.appendChild(n)});let e=c("button","X",{style:{height:"2rem",width:"2rem",margin:"auto 0"},onclick:()=>this.unload()});this.toolbar.appendChild(e)}};var p=class{constructor(){}processSitemap(e,o=1,t=null,n=[]){return e.forEach(r=>{let s=r.id||`folder_${Math.random().toString(36).substr(2,7)}`;n.push({id:s,name:r.pageName,level:o,parentId:t,type:r.type}),r.children&&this.processSitemap(r.children,o+1,s,n)}),n}generateMermaidMarkup(e){let o=["graph TD","classDef containers fill:transparent,stroke-width:0",""],t=Math.max(...e.map(r=>r.level));for(let r=1;r<=t;r++){let s=e.filter(i=>i.level===r);o.push(""),o.push(` subgraph tier${r}[" "]`),s.forEach(i=>{r===1?o.push(` ${i.id}["${i.name}"]`):o.push(` ${i.parentId} --- ${i.id}["${i.name}"]`)}),o.push(" end","")}o.push(""),o.push(` class ${Array.from({length:t},(r,s)=>`tier${s+1}`).join(",")} containers`);let n=o.join(`
`);return console.log(n),n}findCurrentNode(e,o){for(let t of e){if(t.id===o)return t;if(t.children){let n=this.findCurrentNode(t.children,o);if(n)return n}}return null}};var u=class{constructor(){this.init()}async init(){let e={name:$axure.document.configuration.projectName,id:$axure.document.configuration.projectId};this.toolbar=new d(new p,$axure.document.sitemap.rootNodes)}};async function E(){await w(),window.AxureToMermaid=new u}E().catch(console.error);})();