contentScript.js000644 0000056000 14717732570011117 0ustar00000000 000000 (()=>{var t={686:t=>{const e={"|":([t,e,n,s,i,o,l,c])=>{const u=document.createElementNS("http://www.w3.org/2000/svg","g");if("_"==e){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1","18"),t.setAttribute("y1","51"),t.setAttribute("x2","30"),t.setAttribute("y2","51"),t.setAttribute("class","part"),u.appendChild(t)}if("_"==s){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1","0"),t.setAttribute("y1","51"),t.setAttribute("x2","12"),t.setAttribute("y2","51"),t.setAttribute("class","part"),u.appendChild(t)}if("_"==i){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1","12"),t.setAttribute("y1","-3"),t.setAttribute("x2","30"),t.setAttribute("y2","-3"),t.setAttribute("class","part"),u.appendChild(t)}if("_"==c){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1","0"),t.setAttribute("y1","-3"),t.setAttribute("x2","18"),t.setAttribute("y2","-3"),t.setAttribute("class","part"),u.appendChild(t)}return u.appendChild(r([!("/"==i&&"\\"==c),["-"].includes(e),!("/"==l&&"\\"==o),["-"].includes(s),"/"==i,"\\"==o,"/"==l,"\\"==c])),u},"-":([t,e,n,s,i,o,l,c])=>r([["|"].includes(t),!0,["|"].includes(n),!0,!1,!1,!1,!1]),"~":([t,e,n,r,s,i,o,l])=>{const c=document.createElementNS("http://www.w3.org/2000/svg","g"),u=document.createElementNS("http://www.w3.org/2000/svg","line");return u.setAttribute("x1","9"),u.setAttribute("y1","27"),u.setAttribute("x2","24"),u.setAttribute("y2","27"),u.setAttribute("class","part"),c.appendChild(u),c},_:t=>{const n=e["-"](t);return n.setAttribute("transform","translate(0 24)"),n},":":([t,e,n,r,s,i,o,l])=>{const c=document.createElementNS("http://www.w3.org/2000/svg","g"),u=document.createElementNS("http://www.w3.org/2000/svg","line");if(u.setAttribute("x1","15"),u.setAttribute("y1","0"),u.setAttribute("x2","15"),u.setAttribute("y2","60"),u.setAttribute("class","part"),u.setAttribute("style","stroke-dasharray: 15; stroke-dashoffset: 0;"),c.appendChild(u),"+"==t){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1","15"),t.setAttribute("y1","-24"),t.setAttribute("x2","15"),t.setAttribute("y2","-15"),t.setAttribute("class","part"),c.appendChild(t)}if("+"==n){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1","15"),t.setAttribute("y1","60"),t.setAttribute("x2","15"),t.setAttribute("y2","78"),t.setAttribute("class","part"),c.appendChild(t)}return c},"=":t=>{const e=document.createElementNS("http://www.w3.org/2000/svg","g"),n=document.createElementNS("http://www.w3.org/2000/svg","line");n.setAttribute("x1","0"),n.setAttribute("y1","21"),n.setAttribute("x2","30"),n.setAttribute("y2","21"),n.setAttribute("class","part"),e.appendChild(n);const r=document.createElementNS("http://www.w3.org/2000/svg","line");return r.setAttribute("x1","0"),r.setAttribute("y1","30"),r.setAttribute("x2","30"),r.setAttribute("y2","30"),r.setAttribute("class","part"),e.appendChild(r),e},"*":([t,e,n,s,i,o,l,c])=>{const u=document.createElementNS("http://www.w3.org/2000/svg","g"),p=document.createElementNS("http://www.w3.org/2000/svg","circle");return p.setAttribute("cx","0"),p.setAttribute("cy","0"),p.setAttribute("r","21"),p.setAttribute("stroke","none"),p.setAttribute("transform","translate(15, 27)"),u.appendChild(p),u.appendChild(r([["+","|"].includes(t),["+","-"].includes(e),["+","|"].includes(n),["+","-"].includes(s),["/"].includes(i),["\\"].includes(o),["/"].includes(l),["\\"].includes(c)])),u},o:([t,e,n,s,i,o,l,c])=>{const u=document.createElementNS("http://www.w3.org/2000/svg","g"),p=document.createElementNS("http://www.w3.org/2000/svg","circle");p.setAttribute("cx","0"),p.setAttribute("cy","0"),p.setAttribute("r","18"),p.setAttribute("stroke-width","6"),p.setAttribute("fill","none"),p.setAttribute("stroke","black"),p.setAttribute("transform","translate(15, 27)"),u.appendChild(p);const a=r([["+","|"].includes(t),["+","-"].includes(e),["+","|"].includes(n),["+","-"].includes(s),["/"].includes(i),["\\"].includes(o),["/"].includes(l),["\\"].includes(c)]);u.appendChild(a);const d=document.createElementNS("http://www.w3.org/2000/svg","circle");return d.setAttribute("cx","0"),d.setAttribute("cy","0"),d.setAttribute("r","15"),d.setAttribute("fill","white"),d.setAttribute("opacity","100%"),d.setAttribute("transform","translate(15, 27)"),u.appendChild(d),u},"/":t=>{const[n,s,i,o,l,c,u,p]=t,a=document.createElementNS("http://www.w3.org/2000/svg","g");if(a.appendChild(r([["|"].includes(n),!1,["|"].includes(i),!1,!0,!1,!0,!1])),"\\"==s){const t=r([!1,!1,!1,!1,!1,!1,!0,!1]);t.setAttribute("transform","translate(30 -54)"),t.setAttribute("clip-path","polygon(-3 0, 0 0, 0 54, -3 54)"),a.appendChild(t)}if("\\"==o){const t=r([!1,!1,!1,!1,!0,!1,!1,!1]);t.setAttribute("transform","translate(-30 54)"),t.setAttribute("clip-path","polygon(15 -6, 33 -6, 33 6, 15 6)"),a.appendChild(t)}if("_"==s){const n=e._(t);a.appendChild(n)}return a},"\\":t=>{const[n,s,i,o,l,c,u,p]=t,a=document.createElementNS("http://www.w3.org/2000/svg","g");if(a.appendChild(r([["|"].includes(n),!1,["|"].includes(i),!1,!1,!0,!1,!0])),"/"==o){const t=r([!1,!1,!1,!1,!1,!0,!1,!1]);t.setAttribute("transform","translate(-30 -54)"),t.setAttribute("clip-path","polygon(15 0, 30 0, 30 54, 15 54)"),a.appendChild(t)}if("/"==s){const t=r([!1,!1,!1,!1,!1,!1,!1,!0]);t.setAttribute("transform","translate(30 54)"),t.setAttribute("clip-path","polygon(-3 0, 0 0, 0 6, -3 6)"),a.appendChild(t)}if("_"==o){const n=e._(t);a.appendChild(n)}return a},"#":([t,e,n,s,i,o,l,c])=>{const u=document.createElementNS("http://www.w3.org/2000/svg","g"),p=document.createElementNS("http://www.w3.org/2000/svg","polygon");return p.setAttribute("points",[[0,0],[42,0],[42,42],[0,42]].map((([t,e])=>`${t},${e}`)).join(" ")),p.setAttribute("transform","translate(-6, 6)"),u.appendChild(p),u.appendChild(r([["+","|"].includes(t),["+","-"].includes(e),["+","|"].includes(n),["+","-"].includes(s),["/"].includes(i),["\\"].includes(o),["/"].includes(l),["\\"].includes(c)])),u},"+":([t,e,n,s,i,o,l,c])=>{const u=document.createElementNS("http://www.w3.org/2000/svg","g"),p=["*","#","-","+","~",">",".","'","`"].includes(e),a=["*","#","-","+","~","<",".","'","`"].includes(s),d=["*","#","|","+",".","`","^"].includes(t),w=["*","#","|","+","'","`","v"].includes(n),g=["/","*","#"].includes(i),b=["\\","*","#"].includes(o),h=["\\","*","#"].includes(c),A=["/","*","#"].includes(l);if(u.appendChild(r([d,p,w,a,g,b,A,h])),(a||p)&&(w||d)){const t=document.createElementNS("http://www.w3.org/2000/svg","polygon");t.setAttribute("points","0,0 6,0 6,6 0,6"),t.setAttribute("transform","translate(-3 -3) translate(15 27)"),u.appendChild(t)}if(g||h){const t=r([!1,!1,!1,!1,!1,h,g,!1]);t.setAttribute("clip-path","polygon(0 -3, 30 -3, 30 0, 0 0)"),u.appendChild(t)}if(b||A){const t=r([!1,!1,!1,!1,A,!1,!1,b]);t.setAttribute("clip-path","polygon(0 27, 15 27, 15 30, 0 30)"),u.appendChild(t)}if(A||h){const t=r([!1,!1,!1,!1,A&&b,h&&g,!1,!1]);t.setAttribute("clip-path","polygon(-3 0, 0 0, 0 54, -3 54)"),u.appendChild(t)}if(b||g){const t=r([!1,!1,!1,!1,!1,!1,g&&h,b&&A]);t.setAttribute("clip-path","polygon(15 0, 30 0, 30 54, 15 54)"),u.appendChild(t)}if(p||a){const t=r([!1,!1,!1,!1,p||A,h,g,a||b]);t.setAttribute("clip-path","polygon(-3 24, 30 24, 30 30, -3 30)"),u.appendChild(t)}return u},".":([t,e,n,s,i,o,l,c])=>{const u=document.createElementNS("http://www.w3.org/2000/svg","g");if(!("-"!=e&&"+"!=e||"|"!=n&&"'"!=n&&"`"!=n&&"+"!=n)){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 30 24\n A 18 18, 0, 0, 0, 12 42\n L 12 54\n L 18 54\n L 18 42\n A 12 12, 0, 0, 1, 30 30\n Z"),u.appendChild(t)}if(!("-"!=s&&"+"!=s||"|"!=n&&"'"!=n&&"`"!=n&&"+"!=n)){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 0 24\n A 18 18, 0, 0, 1, 18 42\n L 18 54\n L 12 54\n L 12 42\n A 12 12, 0, 0, 0, 0 30 \n Z"),u.appendChild(t)}if(!("-"!=e&&"+"!=e||"|"!=t&&"."!=t&&"+"!=t)){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 30 30\n A 18 18, 0, 0, 1, 12 12\n L 12 0\n L 18 0\n L 18 12\n A 12 12, 0, 0, 0, 30 24\n Z"),u.appendChild(t)}if(!("-"!=s&&"+"!=s||"|"!=t&&"."!=t&&"+"!=t)){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 0 30\n A 18 18, 0, 0, 0, 18 12\n L 18 0\n L 12 0\n L 12 12\n A 12 12, 0, 0, 1, 0 24\n Z"),u.appendChild(t)}if("-"==e&&"/"==i){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 30 30\n A 12 12, 0, 0, 1, 18 18\n L 18 15\n L 24 15\n L 24 18\n A 6 6, 0, 0, 0, 30 24\n Z"),u.appendChild(t);const e=r([!1,!1,!1,!1,!0,!1,!1,!1]);e.setAttribute("clip-path","polygon(15px -10px, 30px -10px, 30px 30px, 2px 15px)"),u.appendChild(e)}if("-"==e&&"\\"==c){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M -3 0\n A 60 60, 0, 0, 0, 30 30\n L 30 24\n A 60 60, 0, 0, 1, 0 -6\n Z"),u.appendChild(t)}if("-"==s&&"/"==i){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 0 30\n A 60 60, 0, 0, 0, 33 0\n L 30 -6\n A 60 60, 0, 0, 1, 0 24\n Z"),u.appendChild(t)}if("-"==s&&"\\"==c){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 0 30\n A 12 12, 0, 0, 0, 12 18\n L 12 15\n L 6 15\n L 6 18\n A 6 6, 0, 0, 1, 0 24\n Z"),u.appendChild(t);const e=r([!1,!1,!1,!1,!1,!1,!1,!0]);e.setAttribute("clip-path","polygon(-3 -3, 12 -3, 12 18, -3 18)"),u.appendChild(e)}if("|"==n&&"/"==i){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 12 54\n A 120 120, 0, 0, 1, 30 -6\n L 37 -6\n A 120 120, 0, 0, 0, 18 54\n Z"),u.appendChild(t)}if("|"==t&&"\\"==o){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 30 60\n A 120 120, 0, 0, 1, 12 0\n L 18 0\n A 120 120, 0, 0, 0, 37 60\n Z"),u.appendChild(t)}if("|"==t&&"/"==l){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 0 60\n A 120 120, 0, 0, 0, 18 0\n L 12 0\n A 120 120, 0, 0, 1, -7 60\n Z"),u.appendChild(t)}if("|"==n&&"\\"==c){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 12 54\n A 120 120, 0, 0, 0, -7 -6\n L 0 -6\n A 120 120, 0, 0, 1, 18 54\n Z"),u.appendChild(t)}if("-"==e&&"/"==l){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 0 48\n A 42 42, 0, 0, 1, 30 24\n L 30 30\n A 42 42, 0, 0, 0, 6 48\n Z"),u.appendChild(t);const e=r([!1,!1,!1,!1,!1,!1,!0,!1]);e.setAttribute("clip-path","polygon(-3 15, 12 15, 12 30, -3 30)"),u.appendChild(e)}if("-"==s&&"\\"==o){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 0 24\n A 42 42, 0, 0, 1, 30 48\n L 24 48\n A 42 42, 0, 0, 0, 0 30\n Z"),u.appendChild(t);const e=r([!1,!1,!1,!1,!1,!0,!1,!1]);e.setAttribute("clip-path","polygon(-3 15, 12 15, 21 30, -3 30)"),u.appendChild(e)}if("-"==s&&"/"==l){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 0 24\n A 12 12, 0, 0, 1, 12 39\n L 6 39\n A 6 6, 0, 0, 0, 0 30\n Z"),u.appendChild(t);const e=r([!1,!1,!1,!1,!1,!1,!0,!1]);e.setAttribute("clip-path","polygon(-3 6, 12 6, 12 30, -3 30)"),u.appendChild(e)}if("-"==e&&"\\"==o){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 30 24\n A 12 12, 0, 0, 0, 18 39\n L 24 39\n A 6 6, 0, 0, 1, 30 30 \n Z"),u.appendChild(t);const e=r([!1,!1,!1,!1,!1,!0,!1,!1]);e.setAttribute("clip-path","polygon(3 6, 18 6, 18 30, 3 30)"),u.appendChild(e)}if("/"==l&&"\\"==o){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 3 42\n A 15 15, 0, 0, 1, 27 42\n L 25 51\n A 9 9, 0, 0, 0, 5 51\n Z"),u.appendChild(t);const e=r([!1,!1,!1,!1,!1,!0,!0,!1]);e.setAttribute("clip-path","polygon(-3 15, 33 15, 33 30, -3 30)"),u.appendChild(e)}if("\\"==c&&"/"==i){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 3 12\n A 15 15, 0, 0, 0, 27 12\n L 22 9\n A 9 9, 0, 0, 1, 8 9\n Z"),u.appendChild(t);const e=r([!1,!1,!1,!1,!0,!1,!1,!0]);e.setAttribute("clip-path","polygon(-3 -3, 33 -3, 33 12, -3 12)"),u.appendChild(e)}if("/"==i&&"\\"==o){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 22 9\n A 30 30, 0, 0, 0, 22 45\n L 28 45\n A 30 30, 0, 0, 1, 28 9\n Z"),u.appendChild(t);const e=r([!1,!1,!1,!1,!0,!0,!1,!1]);e.setAttribute("clip-path","polygon(6 -3, 33 -3, 33 57, 6 57)"),u.appendChild(e)}if("\\"==c&&"/"==l){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 8 9\n A 30 30, 0, 0, 1, 8 45\n L 2 45\n A 30 30, 0, 0, 0, 2 9\n Z"),u.appendChild(t);const e=r([!1,!1,!1,!1,!1,!1,!0,!0]);e.setAttribute("clip-path","polygon(-3 -3, 9 -3, 9 57, -3 57)"),u.appendChild(e)}return u}},n={"┌":"+","┐":"+","└":"+","┘":"+","─":"-","►":">","'":".","`":".",V:"v"};for(const[t,r]of Object.entries(n))e[t]=t=>e[r](t);function r([t,e,n,r,s,i,o,l]){const c=document.createElementNS("http://www.w3.org/2000/svg","g");if(t){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1",15),t.setAttribute("y1",0),t.setAttribute("x2",15),t.setAttribute("y2",27),t.setAttribute("class","part"),c.appendChild(t)}if(e){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1",15),t.setAttribute("y1",27),t.setAttribute("x2",30),t.setAttribute("y2",27),t.setAttribute("class","part"),c.appendChild(t)}if(n){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1",15),t.setAttribute("y1",27),t.setAttribute("x2",15),t.setAttribute("y2",54),t.setAttribute("class","part"),c.appendChild(t)}if(r){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1",0),t.setAttribute("y1",27),t.setAttribute("x2",15),t.setAttribute("y2",27),t.setAttribute("class","part"),c.appendChild(t)}if(document.createElementNS("http://www.w3.org/2000/svg","polygon").setAttribute("points",[[0,0],[20.6,0],[20.6,3],[0,3]].map((([t,e])=>`${t},${e}`)).join(" ")),s){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1",30),t.setAttribute("y1",0),t.setAttribute("x2",15),t.setAttribute("y2",27),t.setAttribute("class","part"),c.appendChild(t)}if(i){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1",15),t.setAttribute("y1",27),t.setAttribute("x2",30),t.setAttribute("y2",54),t.setAttribute("class","part"),c.appendChild(t)}if(o){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1",15),t.setAttribute("y1",27),t.setAttribute("x2",0),t.setAttribute("y2",54),t.setAttribute("class","part"),c.appendChild(t)}if(l){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1",0),t.setAttribute("y1",0),t.setAttribute("x2",15),t.setAttribute("y2",27),t.setAttribute("class","part"),c.appendChild(t)}return c}function s(t,e){const n=document.createElementNS("http://www.w3.org/2000/svg","g"),r=document.createElementNS("http://www.w3.org/2000/svg","text"),s=document.createTextNode(t);return r.appendChild(s),e&&r.setAttribute("class","reserved"),r.setAttribute("transform",[[15,24]].map((([t,e])=>`translate(${t}, ${e})`)).join(" ")),n.appendChild(r),n}function i(t,[e,n]){let r=" ",s=" ",i=" ",o=" ",l=" ",c=" ",u=" ",p=" ";return n>0&&(s=t[n-1][e]||" "),e0&&(r=t[n][e-1]||" "),n>0&&e0&&(u=t[n+1][e-1]||" "),n>0&&e>0&&(p=t[n-1][e-1]||" "),[s,i,o,r,l,c,u,p]}e[">"]=([t,e,n,r,s,i,o,l])=>{const c=document.createElementNS("http://www.w3.org/2000/svg","g"),u=document.createElementNS("http://www.w3.org/2000/svg","polygon");u.setAttribute("points","0,0 42,18 0,36");let p=0;return"*"!=e&&"o"!=e&&"#"!=e||(p-=18),u.setAttribute("transform",`translate(${p} 9)`),c.appendChild(u),c},e["<"]=([t,e,n,r,s,i,o,l])=>{const c=document.createElementNS("http://www.w3.org/2000/svg","g"),u=document.createElementNS("http://www.w3.org/2000/svg","polygon");u.setAttribute("points","0,0 42,18 0,36");let p=30;return"*"!=r&&"o"!=r&&"#"!=r||(p+=18),u.setAttribute("transform",`translate(${p} 9) translate(0 36) rotate(180)`),c.appendChild(u),c},e.v=([t,e,n,s,i,o,l,c])=>{const u=document.createElementNS("http://www.w3.org/2000/svg","g"),p=document.createElementNS("http://www.w3.org/2000/svg","polygon");p.setAttribute("points","0,0 42,18 0,36");let a=36;return" "==n?a=12:"_"==n?a+=18:"*"!=n&&"o"!=n&&"#"!=n||(a-=18),"/"==i?p.setAttribute("transform","translate(-36 33) rotate(112.5, 42, 18)"):"\\"==c?p.setAttribute("transform","translate(-18 33) rotate(67.5, 42, 18)"):p.setAttribute("transform",`translate(33 ${a}) rotate(90)`),u.appendChild(p),u.appendChild(r([["|","+"].includes(t),!1,["|","+"].includes(t),!1,["/"].includes(i),!1,!1,["\\"].includes(c)])),u},e["^"]=([t,e,n,s,i,o,l,c])=>{const u=document.createElementNS("http://www.w3.org/2000/svg","g"),p=document.createElementNS("http://www.w3.org/2000/svg","polygon");p.setAttribute("points","0,0 42,18 0,36");let a=42;return"-"==t&&(a-=15),"/"==l?p.setAttribute("transform","translate(-18 -15) rotate(-67.5, 42, 18)"):"\\"==o?p.setAttribute("transform","translate(-36 -15) rotate(-112.5, 42, 18)"):p.setAttribute("transform",`translate(-3 ${a}) rotate(-90)`),u.appendChild(p),u.appendChild(r([!1,!1,["+","|"].includes(n),!1,!1,["\\"].includes(o),["/"].includes(l),!1])),u},t.exports=function(t,n,r){const o=t.split("\n").map((t=>t.trimEnd().split("")));o.shift(),o.splice(-1);let l=0;const c=o.length;for(let t=0;tl&&(l=o[e].length);var u=document.createElementNS("http://www.w3.org/2000/svg","svg");u.setAttribute("width",30*l*n),u.setAttribute("height",54*c*n),u.setAttribute("debug",r),u.setAttribute("viewBox",`0 0 ${30*l+0} ${54*c+0}`),u.setAttribute("class","debug");var p=document.createElementNS("http://www.w3.org/2000/svg","style");return p.innerHTML='\n.diagram {\n display: block;\n}\n\n.diagram line, .diagram circle, .diagram rect {\n stroke: black;\n}\n\n.diagram line {\n stroke-width: 2;\n}\n\n.diagram circle {\n r: 3.5;\n}\n\n.diagram rect {\n width: 6px;\n height: 6px;\n}\n\n.diagram text, .glyph, .debug text {\n /** font-family: Consolas, Monaco, \'Andale Mono\', \'Ubuntu Mono\', monospace; **/\n font-family: Iosevka Fixed, monospace;\n font-size: 3em;\n text-anchor: middle;\n alignment-baseline: central;\n white-space: pre;\n}\n\n.reserved {\n fill: transparent;\n white-space: pre;\n}\n\n.debug[debug="true"] .reserved {\n fill: black;\n opacity: 0.5;\n}\n\n.debug[debug="true"] line.grid {\n stroke: black;\n stroke-width: 0.2;\n stroke-linecap: butt;\n fill: black;\n opacity: 1%;\n}\n\npolygon {\n stroke-width: 0;\n}\n\n.debug[debug="true"] polygon.inner {\n fill: black;\n stroke: black;\n opacity: 5%;\n}\n\npolygon {\n stroke: black;\n /** stroke-width: 0.2; **/\n stroke-linecap: butt;\n fill: black;\n}\n\n.debug[debug="true"] polygon,\n.debug[debug="true"] line.grid\n{\n opacity: 10%;\n}\n\n.debug[debug="true"] polygon,\n.debug[debug="true"] path,\n.debug[debug="true"] circle\n{\n opacity: 50%;\n}\n\n.debug[debug="true"] polygon {\n fill: red;\n stroke: red;\n}\n\n/**\ncircle {\n fill: black;\n}\n**/\n\n.debug[debug="true"] circle,\n.debug[debug="true"] path\n{\n opacity: 50%;\n fill: red;\n}\n\n.debug[debug="true"] circle {\n stroke: red;\n}\n\n.debug[debug="true"] .inner {\n stroke-width: 0.2;\n}\n\nline.part {\n stroke-width: 6;\n stroke-linecap: butt;\n stroke: black;\n}\n\n.debug[debug="true"] line.part {\n opacity: 50%;\n stroke: red;\n}\n\n.debug[debug="true"] line.center {\n stroke-width: 3;\n stroke-linecap: butt;\n opacity: 10%;\n stroke: black;\n}\n\ntext::selection {\n fill: black;\n background-color: #EEE;\n}\n ',u.appendChild(p),u.appendChild(function(t){const n=document.createElementNS("http://www.w3.org/2000/svg","g");for(let r=0;r{"use strict";var t=r;const e=n(686);t.default=function(t){return{plugin:function(t,n){const r=t.renderer.rules.fence||function(t,e,n,r,s){return s.renderToken(t,e,n)};t.renderer.rules.fence=function(n,s,i,o,l){const c=n[s];if("typogram"!=c.info&&"typograms"!=c.info)return r(n,s,i,o,l);const u=e(`\n${c.content}`,.3,!1);return`\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t${t.utils.escapeHtml(c.content)}\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t${u.outerHTML}\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t`}},assets:function(){return[]}}}})(),exports.default=r.default})();index.js000644 0000006306 14717732565007377 0ustar00000000 000000 (()=>{"use strict";var t={998:(t,e)=>{Object.defineProperty(e,"__esModule",{value:!0}),e.default=joplin},143:(t,e)=>{var o,n,i,r,a,l,u,c,p,s;Object.defineProperty(e,"__esModule",{value:!0}),e.ContentScriptType=e.SettingStorage=e.AppType=e.SettingItemSubType=e.SettingItemType=e.ToolbarButtonLocation=e.isContextMenuItemLocation=e.MenuItemLocation=e.ModelType=e.ImportModuleOutputFormat=e.FileSystemItem=void 0,(s=e.FileSystemItem||(e.FileSystemItem={})).File="file",s.Directory="directory",(p=e.ImportModuleOutputFormat||(e.ImportModuleOutputFormat={})).Markdown="md",p.Html="html",(c=e.ModelType||(e.ModelType={}))[c.Note=1]="Note",c[c.Folder=2]="Folder",c[c.Setting=3]="Setting",c[c.Resource=4]="Resource",c[c.Tag=5]="Tag",c[c.NoteTag=6]="NoteTag",c[c.Search=7]="Search",c[c.Alarm=8]="Alarm",c[c.MasterKey=9]="MasterKey",c[c.ItemChange=10]="ItemChange",c[c.NoteResource=11]="NoteResource",c[c.ResourceLocalState=12]="ResourceLocalState",c[c.Revision=13]="Revision",c[c.Migration=14]="Migration",c[c.SmartFilter=15]="SmartFilter",c[c.Command=16]="Command",function(t){t.File="file",t.Edit="edit",t.View="view",t.Note="note",t.Tools="tools",t.Help="help",t.Context="context",t.NoteListContextMenu="noteListContextMenu",t.EditorContextMenu="editorContextMenu",t.FolderContextMenu="folderContextMenu",t.TagContextMenu="tagContextMenu"}(o=e.MenuItemLocation||(e.MenuItemLocation={})),e.isContextMenuItemLocation=function(t){return[o.Context,o.NoteListContextMenu,o.EditorContextMenu,o.FolderContextMenu,o.TagContextMenu].includes(t)},(u=e.ToolbarButtonLocation||(e.ToolbarButtonLocation={})).NoteToolbar="noteToolbar",u.EditorToolbar="editorToolbar",(l=e.SettingItemType||(e.SettingItemType={}))[l.Int=1]="Int",l[l.String=2]="String",l[l.Bool=3]="Bool",l[l.Array=4]="Array",l[l.Object=5]="Object",l[l.Button=6]="Button",(a=e.SettingItemSubType||(e.SettingItemSubType={})).FilePathAndArgs="file_path_and_args",a.FilePath="file_path",a.DirectoryPath="directory_path",(r=e.AppType||(e.AppType={})).Desktop="desktop",r.Mobile="mobile",r.Cli="cli",(i=e.SettingStorage||(e.SettingStorage={}))[i.Database=1]="Database",i[i.File=2]="File",(n=e.ContentScriptType||(e.ContentScriptType={})).MarkdownItPlugin="markdownItPlugin",n.CodeMirrorPlugin="codeMirrorPlugin"},156:function(t,e,o){var n=this&&this.__awaiter||function(t,e,o,n){return new(o||(o=Promise))((function(i,r){function a(t){try{u(n.next(t))}catch(t){r(t)}}function l(t){try{u(n.throw(t))}catch(t){r(t)}}function u(t){var e;t.done?i(t.value):(e=t.value,e instanceof o?e:new o((function(t){t(e)}))).then(a,l)}u((n=n.apply(t,e||[])).next())}))};Object.defineProperty(e,"__esModule",{value:!0});const i=o(998),r=o(143);i.default.plugins.register({onStart:function(){return n(this,void 0,void 0,(function*(){yield i.default.commands.register({name:"typograms-fenceTemplate",label:"Insert Typograms block template",iconName:"fas fa-pencil",execute:()=>n(this,void 0,void 0,(function*(){yield i.default.commands.execute("insertText","```typogram\n\n```")}))}),yield i.default.contentScripts.register(r.ContentScriptType.MarkdownItPlugin,"typogram","./contentScript.js")}))}})}},e={};!function o(n){var i=e[n];if(void 0!==i)return i.exports;var r=e[n]={exports:{}};return t[n].call(r.exports,r,r.exports,o),r.exports}(156)})();manifest.json000644 0000000672 14717732565010433 0ustar00000000 000000 { "manifest_version": 1, "id": "net.cwesson.joplin-plugin-typograms", "app_min_version": "2.11", "version": "1.0.3", "name": "Typograms", "description": "Render Typogram diagrams inside your Joplin notes.", "author": "Conlan Wesson", "homepage_url": "https://github.com/cwesson/joplin-plugin-typograms", "repository_url": "https://github.com/cwesson/joplin-plugin-typograms", "keywords": [], "categories": [], "screenshots": [] } typograms/contributing.md000644 0000002111 14717732565012776 0ustar00000000 000000 # How to Contribute We'd love to accept your patches and contributions to this project. There are just a few small guidelines you need to follow. ## Contributor License Agreement Contributions to this project must be accompanied by a Contributor License Agreement. You (or your employer) retain the copyright to your contribution; this simply gives us permission to use and redistribute your contributions as part of the project. Head over to to see your current agreements on file or to sign a new one. You generally only need to submit a CLA once, so if you've already submitted one (even if it was for a different project), you probably don't need to do it again. ## Code Reviews All submissions, including submissions by project members, require review. We use GitHub pull requests for this purpose. Consult [GitHub Help](https://help.github.com/articles/about-pull-requests/) for more information on using pull requests. ## Community Guidelines This project follows [Google's Open Source Community Guidelines](https://opensource.google/conduct/). typograms/docs/google-sans.css000644 0000025610 14717732565013636 0ustar00000000 000000 /* * See: https://fonts.google.com/license/googlerestricted */ /* cyrillic */ @font-face { font-family: 'Google Sans'; font-style: italic; font-weight: 400; src: local('Google Sans Italic'), local('GoogleSans-Italic'), url(https://fonts.gstatic.com/s/googlesans/v14/4UaErENHsxJlGDuGo1OIlL3L8phULilENlYQ_Q.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek */ @font-face { font-family: 'Google Sans'; font-style: italic; font-weight: 400; src: local('Google Sans Italic'), local('GoogleSans-Italic'), url(https://fonts.gstatic.com/s/googlesans/v14/4UaErENHsxJlGDuGo1OIlL3L8p9ULilENlYQ_Q.woff2) format('woff2'); unicode-range: U+0370-03FF; } /* vietnamese */ @font-face { font-family: 'Google Sans'; font-style: italic; font-weight: 400; src: local('Google Sans Italic'), local('GoogleSans-Italic'), url(https://fonts.gstatic.com/s/googlesans/v14/4UaErENHsxJlGDuGo1OIlL3L8pNULilENlYQ_Q.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Google Sans'; font-style: italic; font-weight: 400; src: local('Google Sans Italic'), local('GoogleSans-Italic'), url(https://fonts.gstatic.com/s/googlesans/v14/4UaErENHsxJlGDuGo1OIlL3L8pJULilENlYQ_Q.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Google Sans'; font-style: italic; font-weight: 400; src: local('Google Sans Italic'), local('GoogleSans-Italic'), url(https://fonts.gstatic.com/s/googlesans/v14/4UaErENHsxJlGDuGo1OIlL3L8pxULilENlY.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic */ @font-face { font-family: 'Google Sans'; font-style: italic; font-weight: 500; src: local('Google Sans Medium Italic'), local('GoogleSans-MediumItalic'), url(https://fonts.gstatic.com/s/googlesans/v14/4UaZrENHsxJlGDuGo1OIlL3L-m93OwBmO3wq9IqeuA.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek */ @font-face { font-family: 'Google Sans'; font-style: italic; font-weight: 500; src: local('Google Sans Medium Italic'), local('GoogleSans-MediumItalic'), url(https://fonts.gstatic.com/s/googlesans/v14/4UaZrENHsxJlGDuGo1OIlL3L-m93OwdmO3wq9IqeuA.woff2) format('woff2'); unicode-range: U+0370-03FF; } /* vietnamese */ @font-face { font-family: 'Google Sans'; font-style: italic; font-weight: 500; src: local('Google Sans Medium Italic'), local('GoogleSans-MediumItalic'), url(https://fonts.gstatic.com/s/googlesans/v14/4UaZrENHsxJlGDuGo1OIlL3L-m93OwtmO3wq9IqeuA.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Google Sans'; font-style: italic; font-weight: 500; src: local('Google Sans Medium Italic'), local('GoogleSans-MediumItalic'), url(https://fonts.gstatic.com/s/googlesans/v14/4UaZrENHsxJlGDuGo1OIlL3L-m93OwpmO3wq9IqeuA.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Google Sans'; font-style: italic; font-weight: 500; src: local('Google Sans Medium Italic'), local('GoogleSans-MediumItalic'), url(https://fonts.gstatic.com/s/googlesans/v14/4UaZrENHsxJlGDuGo1OIlL3L-m93OwRmO3wq9Io.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic */ @font-face { font-family: 'Google Sans'; font-style: italic; font-weight: 700; src: local('Google Sans Bold Italic'), local('GoogleSans-BoldItalic'), url(https://fonts.gstatic.com/s/googlesans/v14/4UaZrENHsxJlGDuGo1OIlL3L-idxOwBmO3wq9IqeuA.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek */ @font-face { font-family: 'Google Sans'; font-style: italic; font-weight: 700; src: local('Google Sans Bold Italic'), local('GoogleSans-BoldItalic'), url(https://fonts.gstatic.com/s/googlesans/v14/4UaZrENHsxJlGDuGo1OIlL3L-idxOwdmO3wq9IqeuA.woff2) format('woff2'); unicode-range: U+0370-03FF; } /* vietnamese */ @font-face { font-family: 'Google Sans'; font-style: italic; font-weight: 700; src: local('Google Sans Bold Italic'), local('GoogleSans-BoldItalic'), url(https://fonts.gstatic.com/s/googlesans/v14/4UaZrENHsxJlGDuGo1OIlL3L-idxOwtmO3wq9IqeuA.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Google Sans'; font-style: italic; font-weight: 700; src: local('Google Sans Bold Italic'), local('GoogleSans-BoldItalic'), url(https://fonts.gstatic.com/s/googlesans/v14/4UaZrENHsxJlGDuGo1OIlL3L-idxOwpmO3wq9IqeuA.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Google Sans'; font-style: italic; font-weight: 700; src: local('Google Sans Bold Italic'), local('GoogleSans-BoldItalic'), url(https://fonts.gstatic.com/s/googlesans/v14/4UaZrENHsxJlGDuGo1OIlL3L-idxOwRmO3wq9Io.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic */ @font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 400; src: local('Google Sans Regular'), local('GoogleSans-Regular'), url(https://fonts.gstatic.com/s/googlesans/v14/4UaGrENHsxJlGDuGo1OIlL3Kwp5eKQtGBlc.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek */ @font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 400; src: local('Google Sans Regular'), local('GoogleSans-Regular'), url(https://fonts.gstatic.com/s/googlesans/v14/4UaGrENHsxJlGDuGo1OIlL3Nwp5eKQtGBlc.woff2) format('woff2'); unicode-range: U+0370-03FF; } /* vietnamese */ @font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 400; src: local('Google Sans Regular'), local('GoogleSans-Regular'), url(https://fonts.gstatic.com/s/googlesans/v14/4UaGrENHsxJlGDuGo1OIlL3Bwp5eKQtGBlc.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 400; src: local('Google Sans Regular'), local('GoogleSans-Regular'), url(https://fonts.gstatic.com/s/googlesans/v14/4UaGrENHsxJlGDuGo1OIlL3Awp5eKQtGBlc.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 400; src: local('Google Sans Regular'), local('GoogleSans-Regular'), url(https://fonts.gstatic.com/s/googlesans/v14/4UaGrENHsxJlGDuGo1OIlL3Owp5eKQtG.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic */ @font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 500; src: local('Google Sans Medium'), local('GoogleSans-Medium'), url(https://fonts.gstatic.com/s/googlesans/v14/4UabrENHsxJlGDuGo1OIlLU94Yt3CwZsPF4oxIs.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek */ @font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 500; src: local('Google Sans Medium'), local('GoogleSans-Medium'), url(https://fonts.gstatic.com/s/googlesans/v14/4UabrENHsxJlGDuGo1OIlLU94YtwCwZsPF4oxIs.woff2) format('woff2'); unicode-range: U+0370-03FF; } /* vietnamese */ @font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 500; src: local('Google Sans Medium'), local('GoogleSans-Medium'), url(https://fonts.gstatic.com/s/googlesans/v14/4UabrENHsxJlGDuGo1OIlLU94Yt8CwZsPF4oxIs.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 500; src: local('Google Sans Medium'), local('GoogleSans-Medium'), url(https://fonts.gstatic.com/s/googlesans/v14/4UabrENHsxJlGDuGo1OIlLU94Yt9CwZsPF4oxIs.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 500; src: local('Google Sans Medium'), local('GoogleSans-Medium'), url(https://fonts.gstatic.com/s/googlesans/v14/4UabrENHsxJlGDuGo1OIlLU94YtzCwZsPF4o.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic */ @font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 700; src: local('Google Sans Bold'), local('GoogleSans-Bold'), url(https://fonts.gstatic.com/s/googlesans/v14/4UabrENHsxJlGDuGo1OIlLV154t3CwZsPF4oxIs.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek */ @font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 700; src: local('Google Sans Bold'), local('GoogleSans-Bold'), url(https://fonts.gstatic.com/s/googlesans/v14/4UabrENHsxJlGDuGo1OIlLV154twCwZsPF4oxIs.woff2) format('woff2'); unicode-range: U+0370-03FF; } /* vietnamese */ @font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 700; src: local('Google Sans Bold'), local('GoogleSans-Bold'), url(https://fonts.gstatic.com/s/googlesans/v14/4UabrENHsxJlGDuGo1OIlLV154t8CwZsPF4oxIs.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 700; src: local('Google Sans Bold'), local('GoogleSans-Bold'), url(https://fonts.gstatic.com/s/googlesans/v14/4UabrENHsxJlGDuGo1OIlLV154t9CwZsPF4oxIs.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 700; src: local('Google Sans Bold'), local('GoogleSans-Bold'), url(https://fonts.gstatic.com/s/googlesans/v14/4UabrENHsxJlGDuGo1OIlLV154tzCwZsPF4o.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } typograms/docs/index.html000644 0000077034 14717732565012712 0ustar00000000 000000
https://github.com/google/typograms/

Overview

Typograms (typographic diagrams) is a lightweight image format (text/typogram) useful for defining simple diagrams in technical documentation.

Like markdown, typograms is heavily inspired by pre-existing conventions found in ASCII diagrams. A small set of primitives and rules to connect them is defined, which you can use to build larger diagrams.

Typograms optimizes for editability and portability (e.g. plain text is easy to maintain, change, store and transmit), at the cost of expressivity (e.g. SVG is more expressive) and ergonomics (e.g. higher level tools produce diagrams faster).

A comparison with related work is available below.

A JS renderer is available that allows you use to use it in browsers.

Installation

To get started, the easiest way to use typograms is to link from our CDN:
      
<body>
  <script  src="https://google.github.io/typograms/typograms.js"></script>
  <script type="text/typogram">
+----+
|    |---> My first diagram!
+----+
  </script>
</body>
      
    
From there, you can download the library directly to serve yourself. You can also use it as a command line tool or a node library: https://github.com/google/typograms

Primitives

Typograms are composed of primitives and connectors that combine them: pipes (| - _ \ / : ~), dots arrows (> ^ * o # v < ) and Connectors (+ . -).

By putting them together, you can form a lot of different diagrams.

Pipes

Dots

Arrows

Text

Examples

Protocols

Mocks

Architecture

Components

Layers

Tables

Flow charts

Trees

Shapes

Big Shapes

Small Shapes

Overlaps and intersections

Grids

Big grids

Small grids

Dot grids

Time series

Chips

Circuits

Mindmaps

Scribbles

Lines with decorations

Line ends

Graph with small nodes

Graphic diagrams

Work in Progress

This is a list of constructions that are currently looking into supporting.

UT8 Diagram Characters Are Off

Triangles connected without + aren't pointy

Diagonals don't join with underscores

Text detection gets confused

Small curved steps

Parenthesis and spheres

Diagonal Side-way Arrows

Related Work

The closest work to typograms is svgbob: it renders diagrams from ASCII and works in browsers (through a webassembly port which spits out SVGs). It supports a similar set of features (with the notable exception of its support for circle drawing) and picks a similar set of typographic conventions (with the notable exception of text rendering). It is well-specified. I ran into enough challenges with (a) the text rendering and (b) running in the browser through the webassembly port that motivated me to write an ASCII diagram renderer in JS (svgbob is written in rust), but is otherwise a perfectly valid (more mature) alternative.

From there, there is a series of projects that rendered images from ASCII diagrams but weren't either (a) particularly good to be used in isolation (i.e. just diagrams) or (b) on webpages (i.e. running natively in browsers): asciitosvg, ditaa and markdeep (and the go port GoAT) most notably.

Unlike libraries like mermaid, typograms are defined typographically (WYSWYG), rather than semantically (a transformation from a high level description to graphics), which picks a different trade-off: it gives you more control over the rendering (expressivity) at the cost of making you type more (productivity).

Specification


typograms/docs/test.html000644 0000005576 14717732565012564 0ustar00000000 000000

typograms/docs/typograms.js000644 0000054516 14717732565013300 0ustar00000000 000000 !function(){var t;const e={"|":([t,e,n,s,i,o,l,c])=>{const u=document.createElementNS("http://www.w3.org/2000/svg","g");if("_"==e){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1","18"),t.setAttribute("y1","51"),t.setAttribute("x2","30"),t.setAttribute("y2","51"),t.setAttribute("class","part"),u.appendChild(t)}if("_"==s){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1","0"),t.setAttribute("y1","51"),t.setAttribute("x2","12"),t.setAttribute("y2","51"),t.setAttribute("class","part"),u.appendChild(t)}if("_"==i){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1","12"),t.setAttribute("y1","-3"),t.setAttribute("x2","30"),t.setAttribute("y2","-3"),t.setAttribute("class","part"),u.appendChild(t)}if("_"==c){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1","0"),t.setAttribute("y1","-3"),t.setAttribute("x2","18"),t.setAttribute("y2","-3"),t.setAttribute("class","part"),u.appendChild(t)}return u.appendChild(r([!("/"==i&&"\\"==c),["-"].includes(e),!("/"==l&&"\\"==o),["-"].includes(s),"/"==i,"\\"==o,"/"==l,"\\"==c])),u},"-":([t,e,n,s,i,o,l,c])=>r([["|"].includes(t),!0,["|"].includes(n),!0,!1,!1,!1,!1]),"~":([t,e,n,r,s,i,o,l])=>{const c=document.createElementNS("http://www.w3.org/2000/svg","g"),u=document.createElementNS("http://www.w3.org/2000/svg","line");return u.setAttribute("x1","9"),u.setAttribute("y1","27"),u.setAttribute("x2","24"),u.setAttribute("y2","27"),u.setAttribute("class","part"),c.appendChild(u),c},_:t=>{const n=e["-"](t);return n.setAttribute("transform","translate(0 24)"),n},":":([t,e,n,r,s,i,o,l])=>{const c=document.createElementNS("http://www.w3.org/2000/svg","g"),u=document.createElementNS("http://www.w3.org/2000/svg","line");if(u.setAttribute("x1","15"),u.setAttribute("y1","0"),u.setAttribute("x2","15"),u.setAttribute("y2","60"),u.setAttribute("class","part"),u.setAttribute("style","stroke-dasharray: 15; stroke-dashoffset: 0;"),c.appendChild(u),"+"==t){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1","15"),t.setAttribute("y1","-24"),t.setAttribute("x2","15"),t.setAttribute("y2","-15"),t.setAttribute("class","part"),c.appendChild(t)}if("+"==n){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1","15"),t.setAttribute("y1","60"),t.setAttribute("x2","15"),t.setAttribute("y2","78"),t.setAttribute("class","part"),c.appendChild(t)}return c},"=":t=>{const e=document.createElementNS("http://www.w3.org/2000/svg","g"),n=document.createElementNS("http://www.w3.org/2000/svg","line");n.setAttribute("x1","0"),n.setAttribute("y1","21"),n.setAttribute("x2","30"),n.setAttribute("y2","21"),n.setAttribute("class","part"),e.appendChild(n);const r=document.createElementNS("http://www.w3.org/2000/svg","line");return r.setAttribute("x1","0"),r.setAttribute("y1","30"),r.setAttribute("x2","30"),r.setAttribute("y2","30"),r.setAttribute("class","part"),e.appendChild(r),e},"*":([t,e,n,s,i,o,l,c])=>{const u=document.createElementNS("http://www.w3.org/2000/svg","g"),p=document.createElementNS("http://www.w3.org/2000/svg","circle");return p.setAttribute("cx","0"),p.setAttribute("cy","0"),p.setAttribute("r","21"),p.setAttribute("stroke","none"),p.setAttribute("transform","translate(15, 27)"),u.appendChild(p),u.appendChild(r([["+","|"].includes(t),["+","-"].includes(e),["+","|"].includes(n),["+","-"].includes(s),["/"].includes(i),["\\"].includes(o),["/"].includes(l),["\\"].includes(c)])),u},o:([t,e,n,s,i,o,l,c])=>{const u=document.createElementNS("http://www.w3.org/2000/svg","g"),p=document.createElementNS("http://www.w3.org/2000/svg","circle");p.setAttribute("cx","0"),p.setAttribute("cy","0"),p.setAttribute("r","18"),p.setAttribute("stroke-width","6"),p.setAttribute("fill","none"),p.setAttribute("stroke","black"),p.setAttribute("transform","translate(15, 27)"),u.appendChild(p);const a=r([["+","|"].includes(t),["+","-"].includes(e),["+","|"].includes(n),["+","-"].includes(s),["/"].includes(i),["\\"].includes(o),["/"].includes(l),["\\"].includes(c)]);u.appendChild(a);const d=document.createElementNS("http://www.w3.org/2000/svg","circle");return d.setAttribute("cx","0"),d.setAttribute("cy","0"),d.setAttribute("r","15"),d.setAttribute("fill","white"),d.setAttribute("opacity","100%"),d.setAttribute("transform","translate(15, 27)"),u.appendChild(d),u},"/":t=>{const[n,s,i,o,l,c,u,p]=t,a=document.createElementNS("http://www.w3.org/2000/svg","g");if(a.appendChild(r([["|"].includes(n),!1,["|"].includes(i),!1,!0,!1,!0,!1])),"\\"==s){const t=r([!1,!1,!1,!1,!1,!1,!0,!1]);t.setAttribute("transform","translate(30 -54)"),t.setAttribute("clip-path","polygon(-3 0, 0 0, 0 54, -3 54)"),a.appendChild(t)}if("\\"==o){const t=r([!1,!1,!1,!1,!0,!1,!1,!1]);t.setAttribute("transform","translate(-30 54)"),t.setAttribute("clip-path","polygon(15 -6, 33 -6, 33 6, 15 6)"),a.appendChild(t)}if("_"==s){const n=e._(t);a.appendChild(n)}return a},"\\":t=>{const[n,s,i,o,l,c,u,p]=t,a=document.createElementNS("http://www.w3.org/2000/svg","g");if(a.appendChild(r([["|"].includes(n),!1,["|"].includes(i),!1,!1,!0,!1,!0])),"/"==o){const t=r([!1,!1,!1,!1,!1,!0,!1,!1]);t.setAttribute("transform","translate(-30 -54)"),t.setAttribute("clip-path","polygon(15 0, 30 0, 30 54, 15 54)"),a.appendChild(t)}if("/"==s){const t=r([!1,!1,!1,!1,!1,!1,!1,!0]);t.setAttribute("transform","translate(30 54)"),t.setAttribute("clip-path","polygon(-3 0, 0 0, 0 6, -3 6)"),a.appendChild(t)}if("_"==o){const n=e._(t);a.appendChild(n)}return a},"#":([t,e,n,s,i,o,l,c])=>{const u=document.createElementNS("http://www.w3.org/2000/svg","g"),p=document.createElementNS("http://www.w3.org/2000/svg","polygon");return p.setAttribute("points",[[0,0],[42,0],[42,42],[0,42]].map((([t,e])=>`${t},${e}`)).join(" ")),p.setAttribute("transform","translate(-6, 6)"),u.appendChild(p),u.appendChild(r([["+","|"].includes(t),["+","-"].includes(e),["+","|"].includes(n),["+","-"].includes(s),["/"].includes(i),["\\"].includes(o),["/"].includes(l),["\\"].includes(c)])),u},"+":([t,e,n,s,i,o,l,c])=>{const u=document.createElementNS("http://www.w3.org/2000/svg","g"),p=["*","#","-","+","~",">",".","'","`"].includes(e),a=["*","#","-","+","~","<",".","'","`"].includes(s),d=["*","#","|","+",".","`","^"].includes(t),w=["*","#","|","+","'","`","v"].includes(n),g=["/","*","#"].includes(i),b=["\\","*","#"].includes(o),A=["\\","*","#"].includes(c),h=["/","*","#"].includes(l);if(u.appendChild(r([d,p,w,a,g,b,h,A])),(a||p)&&(w||d)){const t=document.createElementNS("http://www.w3.org/2000/svg","polygon");t.setAttribute("points","0,0 6,0 6,6 0,6"),t.setAttribute("transform","translate(-3 -3) translate(15 27)"),u.appendChild(t)}if(g||A){const t=r([!1,!1,!1,!1,!1,A,g,!1]);t.setAttribute("clip-path","polygon(0 -3, 30 -3, 30 0, 0 0)"),u.appendChild(t)}if(b||h){const t=r([!1,!1,!1,!1,h,!1,!1,b]);t.setAttribute("clip-path","polygon(0 27, 15 27, 15 30, 0 30)"),u.appendChild(t)}if(h||A){const t=r([!1,!1,!1,!1,h&&b,A&&g,!1,!1]);t.setAttribute("clip-path","polygon(-3 0, 0 0, 0 54, -3 54)"),u.appendChild(t)}if(b||g){const t=r([!1,!1,!1,!1,!1,!1,g&&A,b&&h]);t.setAttribute("clip-path","polygon(15 0, 30 0, 30 54, 15 54)"),u.appendChild(t)}if(p||a){const t=r([!1,!1,!1,!1,p||h,A,g,a||b]);t.setAttribute("clip-path","polygon(-3 24, 30 24, 30 30, -3 30)"),u.appendChild(t)}return u},".":([t,e,n,s,i,o,l,c])=>{const u=document.createElementNS("http://www.w3.org/2000/svg","g");if(!("-"!=e&&"+"!=e||"|"!=n&&"'"!=n&&"`"!=n&&"+"!=n)){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 30 24\n A 18 18, 0, 0, 0, 12 42\n L 12 54\n L 18 54\n L 18 42\n A 12 12, 0, 0, 1, 30 30\n Z"),u.appendChild(t)}if(!("-"!=s&&"+"!=s||"|"!=n&&"'"!=n&&"`"!=n&&"+"!=n)){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 0 24\n A 18 18, 0, 0, 1, 18 42\n L 18 54\n L 12 54\n L 12 42\n A 12 12, 0, 0, 0, 0 30 \n Z"),u.appendChild(t)}if(!("-"!=e&&"+"!=e||"|"!=t&&"."!=t&&"+"!=t)){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 30 30\n A 18 18, 0, 0, 1, 12 12\n L 12 0\n L 18 0\n L 18 12\n A 12 12, 0, 0, 0, 30 24\n Z"),u.appendChild(t)}if(!("-"!=s&&"+"!=s||"|"!=t&&"."!=t&&"+"!=t)){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 0 30\n A 18 18, 0, 0, 0, 18 12\n L 18 0\n L 12 0\n L 12 12\n A 12 12, 0, 0, 1, 0 24\n Z"),u.appendChild(t)}if("-"==e&&"/"==i){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 30 30\n A 12 12, 0, 0, 1, 18 18\n L 18 15\n L 24 15\n L 24 18\n A 6 6, 0, 0, 0, 30 24\n Z"),u.appendChild(t);const e=r([!1,!1,!1,!1,!0,!1,!1,!1]);e.setAttribute("clip-path","polygon(15px -10px, 30px -10px, 30px 30px, 2px 15px)"),u.appendChild(e)}if("-"==e&&"\\"==c){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M -3 0\n A 60 60, 0, 0, 0, 30 30\n L 30 24\n A 60 60, 0, 0, 1, 0 -6\n Z"),u.appendChild(t)}if("-"==s&&"/"==i){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 0 30\n A 60 60, 0, 0, 0, 33 0\n L 30 -6\n A 60 60, 0, 0, 1, 0 24\n Z"),u.appendChild(t)}if("-"==s&&"\\"==c){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 0 30\n A 12 12, 0, 0, 0, 12 18\n L 12 15\n L 6 15\n L 6 18\n A 6 6, 0, 0, 1, 0 24\n Z"),u.appendChild(t);const e=r([!1,!1,!1,!1,!1,!1,!1,!0]);e.setAttribute("clip-path","polygon(-3 -3, 12 -3, 12 18, -3 18)"),u.appendChild(e)}if("|"==n&&"/"==i){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 12 54\n A 120 120, 0, 0, 1, 30 -6\n L 37 -6\n A 120 120, 0, 0, 0, 18 54\n Z"),u.appendChild(t)}if("|"==t&&"\\"==o){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 30 60\n A 120 120, 0, 0, 1, 12 0\n L 18 0\n A 120 120, 0, 0, 0, 37 60\n Z"),u.appendChild(t)}if("|"==t&&"/"==l){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 0 60\n A 120 120, 0, 0, 0, 18 0\n L 12 0\n A 120 120, 0, 0, 1, -7 60\n Z"),u.appendChild(t)}if("|"==n&&"\\"==c){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 12 54\n A 120 120, 0, 0, 0, -7 -6\n L 0 -6\n A 120 120, 0, 0, 1, 18 54\n Z"),u.appendChild(t)}if("-"==e&&"/"==l){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 0 48\n A 42 42, 0, 0, 1, 30 24\n L 30 30\n A 42 42, 0, 0, 0, 6 48\n Z"),u.appendChild(t);const e=r([!1,!1,!1,!1,!1,!1,!0,!1]);e.setAttribute("clip-path","polygon(-3 15, 12 15, 12 30, -3 30)"),u.appendChild(e)}if("-"==s&&"\\"==o){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 0 24\n A 42 42, 0, 0, 1, 30 48\n L 24 48\n A 42 42, 0, 0, 0, 0 30\n Z"),u.appendChild(t);const e=r([!1,!1,!1,!1,!1,!0,!1,!1]);e.setAttribute("clip-path","polygon(-3 15, 12 15, 21 30, -3 30)"),u.appendChild(e)}if("-"==s&&"/"==l){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 0 24\n A 12 12, 0, 0, 1, 12 39\n L 6 39\n A 6 6, 0, 0, 0, 0 30\n Z"),u.appendChild(t);const e=r([!1,!1,!1,!1,!1,!1,!0,!1]);e.setAttribute("clip-path","polygon(-3 6, 12 6, 12 30, -3 30)"),u.appendChild(e)}if("-"==e&&"\\"==o){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 30 24\n A 12 12, 0, 0, 0, 18 39\n L 24 39\n A 6 6, 0, 0, 1, 30 30 \n Z"),u.appendChild(t);const e=r([!1,!1,!1,!1,!1,!0,!1,!1]);e.setAttribute("clip-path","polygon(3 6, 18 6, 18 30, 3 30)"),u.appendChild(e)}if("/"==l&&"\\"==o){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 3 42\n A 15 15, 0, 0, 1, 27 42\n L 25 51\n A 9 9, 0, 0, 0, 5 51\n Z"),u.appendChild(t);const e=r([!1,!1,!1,!1,!1,!0,!0,!1]);e.setAttribute("clip-path","polygon(-3 15, 33 15, 33 30, -3 30)"),u.appendChild(e)}if("\\"==c&&"/"==i){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 3 12\n A 15 15, 0, 0, 0, 27 12\n L 22 9\n A 9 9, 0, 0, 1, 8 9\n Z"),u.appendChild(t);const e=r([!1,!1,!1,!1,!0,!1,!1,!0]);e.setAttribute("clip-path","polygon(-3 -3, 33 -3, 33 12, -3 12)"),u.appendChild(e)}if("/"==i&&"\\"==o){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 22 9\n A 30 30, 0, 0, 0, 22 45\n L 28 45\n A 30 30, 0, 0, 1, 28 9\n Z"),u.appendChild(t);const e=r([!1,!1,!1,!1,!0,!0,!1,!1]);e.setAttribute("clip-path","polygon(6 -3, 33 -3, 33 57, 6 57)"),u.appendChild(e)}if("\\"==c&&"/"==l){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 8 9\n A 30 30, 0, 0, 1, 8 45\n L 2 45\n A 30 30, 0, 0, 0, 2 9\n Z"),u.appendChild(t);const e=r([!1,!1,!1,!1,!1,!1,!0,!0]);e.setAttribute("clip-path","polygon(-3 -3, 9 -3, 9 57, -3 57)"),u.appendChild(e)}return u}},n={"┌":"+","┐":"+","└":"+","┘":"+","─":"-","►":">","'":".","`":".",V:"v"};for(const[t,r]of Object.entries(n))e[t]=t=>e[r](t);function r([t,e,n,r,s,i,o,l]){const c=document.createElementNS("http://www.w3.org/2000/svg","g");if(t){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1",15),t.setAttribute("y1",0),t.setAttribute("x2",15),t.setAttribute("y2",27),t.setAttribute("class","part"),c.appendChild(t)}if(e){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1",15),t.setAttribute("y1",27),t.setAttribute("x2",30),t.setAttribute("y2",27),t.setAttribute("class","part"),c.appendChild(t)}if(n){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1",15),t.setAttribute("y1",27),t.setAttribute("x2",15),t.setAttribute("y2",54),t.setAttribute("class","part"),c.appendChild(t)}if(r){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1",0),t.setAttribute("y1",27),t.setAttribute("x2",15),t.setAttribute("y2",27),t.setAttribute("class","part"),c.appendChild(t)}if(document.createElementNS("http://www.w3.org/2000/svg","polygon").setAttribute("points",[[0,0],[20.6,0],[20.6,3],[0,3]].map((([t,e])=>`${t},${e}`)).join(" ")),s){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1",30),t.setAttribute("y1",0),t.setAttribute("x2",15),t.setAttribute("y2",27),t.setAttribute("class","part"),c.appendChild(t)}if(i){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1",15),t.setAttribute("y1",27),t.setAttribute("x2",30),t.setAttribute("y2",54),t.setAttribute("class","part"),c.appendChild(t)}if(o){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1",15),t.setAttribute("y1",27),t.setAttribute("x2",0),t.setAttribute("y2",54),t.setAttribute("class","part"),c.appendChild(t)}if(l){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1",0),t.setAttribute("y1",0),t.setAttribute("x2",15),t.setAttribute("y2",27),t.setAttribute("class","part"),c.appendChild(t)}return c}function s(t,e){const n=document.createElementNS("http://www.w3.org/2000/svg","g"),r=document.createElementNS("http://www.w3.org/2000/svg","text"),s=document.createTextNode(t);return r.appendChild(s),e&&r.setAttribute("class","reserved"),r.setAttribute("transform",[[15,24]].map((([t,e])=>`translate(${t}, ${e})`)).join(" ")),n.appendChild(r),n}function i(t,[e,n]){let r=" ",s=" ",i=" ",o=" ",l=" ",c=" ",u=" ",p=" ";return n>0&&(s=t[n-1][e]||" "),e0&&(r=t[n][e-1]||" "),n>0&&e0&&(u=t[n+1][e-1]||" "),n>0&&e>0&&(p=t[n-1][e-1]||" "),[s,i,o,r,l,c,u,p]}e[">"]=([t,e,n,r,s,i,o,l])=>{const c=document.createElementNS("http://www.w3.org/2000/svg","g"),u=document.createElementNS("http://www.w3.org/2000/svg","polygon");u.setAttribute("points","0,0 42,18 0,36");let p=0;return"*"!=e&&"o"!=e&&"#"!=e||(p-=18),u.setAttribute("transform",`translate(${p} 9)`),c.appendChild(u),c},e["<"]=([t,e,n,r,s,i,o,l])=>{const c=document.createElementNS("http://www.w3.org/2000/svg","g"),u=document.createElementNS("http://www.w3.org/2000/svg","polygon");u.setAttribute("points","0,0 42,18 0,36");let p=30;return"*"!=r&&"o"!=r&&"#"!=r||(p+=18),u.setAttribute("transform",`translate(${p} 9) translate(0 36) rotate(180)`),c.appendChild(u),c},e.v=([t,e,n,s,i,o,l,c])=>{const u=document.createElementNS("http://www.w3.org/2000/svg","g"),p=document.createElementNS("http://www.w3.org/2000/svg","polygon");p.setAttribute("points","0,0 42,18 0,36");let a=36;return" "==n?a=12:"_"==n?a+=18:"*"!=n&&"o"!=n&&"#"!=n||(a-=18),"/"==i?p.setAttribute("transform","translate(-36 33) rotate(112.5, 42, 18)"):"\\"==c?p.setAttribute("transform","translate(-18 33) rotate(67.5, 42, 18)"):p.setAttribute("transform",`translate(33 ${a}) rotate(90)`),u.appendChild(p),u.appendChild(r([["|","+"].includes(t),!1,["|","+"].includes(t),!1,["/"].includes(i),!1,!1,["\\"].includes(c)])),u},e["^"]=([t,e,n,s,i,o,l,c])=>{const u=document.createElementNS("http://www.w3.org/2000/svg","g"),p=document.createElementNS("http://www.w3.org/2000/svg","polygon");p.setAttribute("points","0,0 42,18 0,36");let a=42;return"-"==t&&(a-=15),"/"==l?p.setAttribute("transform","translate(-18 -15) rotate(-67.5, 42, 18)"):"\\"==o?p.setAttribute("transform","translate(-36 -15) rotate(-112.5, 42, 18)"):p.setAttribute("transform",`translate(-3 ${a}) rotate(-90)`),u.appendChild(p),u.appendChild(r([!1,!1,["+","|"].includes(n),!1,!1,["\\"].includes(o),["/"].includes(l),!1])),u},t=function(t,n,r){const o=t.split("\n").map((t=>t.trimEnd().split("")));o.shift(),o.splice(-1);let l=0;const c=o.length;for(let t=0;tl&&(l=o[e].length);var u=document.createElementNS("http://www.w3.org/2000/svg","svg");u.setAttribute("width",30*l*n),u.setAttribute("height",54*c*n),u.setAttribute("debug",r),u.setAttribute("viewBox",`0 0 ${30*l+0} ${54*c+0}`),u.setAttribute("class","debug");var p=document.createElementNS("http://www.w3.org/2000/svg","style");return p.innerHTML='\n.diagram {\n display: block;\n}\n\n.diagram line, .diagram circle, .diagram rect {\n stroke: black;\n}\n\n.diagram line {\n stroke-width: 2;\n}\n\n.diagram circle {\n r: 3.5;\n}\n\n.diagram rect {\n width: 6px;\n height: 6px;\n}\n\n.diagram text, .glyph, .debug text {\n /** font-family: Consolas, Monaco, \'Andale Mono\', \'Ubuntu Mono\', monospace; **/\n font-family: Iosevka Fixed, monospace;\n font-size: 3em;\n text-anchor: middle;\n alignment-baseline: central;\n white-space: pre;\n}\n\n.reserved {\n fill: transparent;\n white-space: pre;\n}\n\n.debug[debug="true"] .reserved {\n fill: black;\n opacity: 0.5;\n}\n\n.debug[debug="true"] line.grid {\n stroke: black;\n stroke-width: 0.2;\n stroke-linecap: butt;\n fill: black;\n opacity: 1%;\n}\n\npolygon {\n stroke-width: 0;\n}\n\n.debug[debug="true"] polygon.inner {\n fill: black;\n stroke: black;\n opacity: 5%;\n}\n\npolygon {\n stroke: black;\n /** stroke-width: 0.2; **/\n stroke-linecap: butt;\n fill: black;\n}\n\n.debug[debug="true"] polygon,\n.debug[debug="true"] line.grid\n{\n opacity: 10%;\n}\n\n.debug[debug="true"] polygon,\n.debug[debug="true"] path,\n.debug[debug="true"] circle\n{\n opacity: 50%;\n}\n\n.debug[debug="true"] polygon {\n fill: red;\n stroke: red;\n}\n\n/**\ncircle {\n fill: black;\n}\n**/\n\n.debug[debug="true"] circle,\n.debug[debug="true"] path\n{\n opacity: 50%;\n fill: red;\n}\n\n.debug[debug="true"] circle {\n stroke: red;\n}\n\n.debug[debug="true"] .inner {\n stroke-width: 0.2;\n}\n\nline.part {\n stroke-width: 6;\n stroke-linecap: butt;\n stroke: black;\n}\n\n.debug[debug="true"] line.part {\n opacity: 50%;\n stroke: red;\n}\n\n.debug[debug="true"] line.center {\n stroke-width: 3;\n stroke-linecap: butt;\n opacity: 10%;\n stroke: black;\n}\n\ntext::selection {\n fill: black;\n background-color: #EEE;\n}\n ',u.appendChild(p),u.appendChild(function(t){const n=document.createElementNS("http://www.w3.org/2000/svg","g");for(let r=0;r ``` A comparison with related work is available [here](https://google.github.io/typograms/#related). typograms/src/browser.js000644 0000000542 14717732565012563 0ustar00000000 000000 const create=require("./typograms.js");document.addEventListener("DOMContentLoaded",(function(){for(const t of document.querySelectorAll("script[type='text/typogram']")){if(t.hasAttribute("disabled"))continue;const e=t.innerText,r=Number(t.getAttribute("zoom")||.3),n=t.hasAttribute("grid"),o=create(e,r,n);t.parentNode.insertBefore(o,t.nextSibling)}}));typograms/src/typograms.js000644 0000054302 14717732570013124 0ustar00000000 000000 (()=>{var t={686:t=>{const e={"|":([t,e,n,s,i,l,o,p])=>{const u=document.createElementNS("http://www.w3.org/2000/svg","g");if("_"==e){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1","18"),t.setAttribute("y1","51"),t.setAttribute("x2","30"),t.setAttribute("y2","51"),t.setAttribute("class","part"),u.appendChild(t)}if("_"==s){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1","0"),t.setAttribute("y1","51"),t.setAttribute("x2","12"),t.setAttribute("y2","51"),t.setAttribute("class","part"),u.appendChild(t)}if("_"==i){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1","12"),t.setAttribute("y1","-3"),t.setAttribute("x2","30"),t.setAttribute("y2","-3"),t.setAttribute("class","part"),u.appendChild(t)}if("_"==p){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1","0"),t.setAttribute("y1","-3"),t.setAttribute("x2","18"),t.setAttribute("y2","-3"),t.setAttribute("class","part"),u.appendChild(t)}return u.appendChild(r([!("/"==i&&"\\"==p),["-"].includes(e),!("/"==o&&"\\"==l),["-"].includes(s),"/"==i,"\\"==l,"/"==o,"\\"==p])),u},"-":([t,e,n,s,i,l,o,p])=>r([["|"].includes(t),!0,["|"].includes(n),!0,!1,!1,!1,!1]),"~":([t,e,n,r,s,i,l,o])=>{const p=document.createElementNS("http://www.w3.org/2000/svg","g"),u=document.createElementNS("http://www.w3.org/2000/svg","line");return u.setAttribute("x1","9"),u.setAttribute("y1","27"),u.setAttribute("x2","24"),u.setAttribute("y2","27"),u.setAttribute("class","part"),p.appendChild(u),p},_:t=>{const n=e["-"](t);return n.setAttribute("transform","translate(0 24)"),n},":":([t,e,n,r,s,i,l,o])=>{const p=document.createElementNS("http://www.w3.org/2000/svg","g"),u=document.createElementNS("http://www.w3.org/2000/svg","line");if(u.setAttribute("x1","15"),u.setAttribute("y1","0"),u.setAttribute("x2","15"),u.setAttribute("y2","60"),u.setAttribute("class","part"),u.setAttribute("style","stroke-dasharray: 15; stroke-dashoffset: 0;"),p.appendChild(u),"+"==t){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1","15"),t.setAttribute("y1","-24"),t.setAttribute("x2","15"),t.setAttribute("y2","-15"),t.setAttribute("class","part"),p.appendChild(t)}if("+"==n){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1","15"),t.setAttribute("y1","60"),t.setAttribute("x2","15"),t.setAttribute("y2","78"),t.setAttribute("class","part"),p.appendChild(t)}return p},"=":t=>{const e=document.createElementNS("http://www.w3.org/2000/svg","g"),n=document.createElementNS("http://www.w3.org/2000/svg","line");n.setAttribute("x1","0"),n.setAttribute("y1","21"),n.setAttribute("x2","30"),n.setAttribute("y2","21"),n.setAttribute("class","part"),e.appendChild(n);const r=document.createElementNS("http://www.w3.org/2000/svg","line");return r.setAttribute("x1","0"),r.setAttribute("y1","30"),r.setAttribute("x2","30"),r.setAttribute("y2","30"),r.setAttribute("class","part"),e.appendChild(r),e},"*":([t,e,n,s,i,l,o,p])=>{const u=document.createElementNS("http://www.w3.org/2000/svg","g"),c=document.createElementNS("http://www.w3.org/2000/svg","circle");return c.setAttribute("cx","0"),c.setAttribute("cy","0"),c.setAttribute("r","21"),c.setAttribute("stroke","none"),c.setAttribute("transform","translate(15, 27)"),u.appendChild(c),u.appendChild(r([["+","|"].includes(t),["+","-"].includes(e),["+","|"].includes(n),["+","-"].includes(s),["/"].includes(i),["\\"].includes(l),["/"].includes(o),["\\"].includes(p)])),u},o:([t,e,n,s,i,l,o,p])=>{const u=document.createElementNS("http://www.w3.org/2000/svg","g"),c=document.createElementNS("http://www.w3.org/2000/svg","circle");c.setAttribute("cx","0"),c.setAttribute("cy","0"),c.setAttribute("r","18"),c.setAttribute("stroke-width","6"),c.setAttribute("fill","none"),c.setAttribute("stroke","black"),c.setAttribute("transform","translate(15, 27)"),u.appendChild(c);const a=r([["+","|"].includes(t),["+","-"].includes(e),["+","|"].includes(n),["+","-"].includes(s),["/"].includes(i),["\\"].includes(l),["/"].includes(o),["\\"].includes(p)]);u.appendChild(a);const d=document.createElementNS("http://www.w3.org/2000/svg","circle");return d.setAttribute("cx","0"),d.setAttribute("cy","0"),d.setAttribute("r","15"),d.setAttribute("fill","white"),d.setAttribute("opacity","100%"),d.setAttribute("transform","translate(15, 27)"),u.appendChild(d),u},"/":t=>{const[n,s,i,l,o,p,u,c]=t,a=document.createElementNS("http://www.w3.org/2000/svg","g");if(a.appendChild(r([["|"].includes(n),!1,["|"].includes(i),!1,!0,!1,!0,!1])),"\\"==s){const t=r([!1,!1,!1,!1,!1,!1,!0,!1]);t.setAttribute("transform","translate(30 -54)"),t.setAttribute("clip-path","polygon(-3 0, 0 0, 0 54, -3 54)"),a.appendChild(t)}if("\\"==l){const t=r([!1,!1,!1,!1,!0,!1,!1,!1]);t.setAttribute("transform","translate(-30 54)"),t.setAttribute("clip-path","polygon(15 -6, 33 -6, 33 6, 15 6)"),a.appendChild(t)}if("_"==s){const n=e._(t);a.appendChild(n)}return a},"\\":t=>{const[n,s,i,l,o,p,u,c]=t,a=document.createElementNS("http://www.w3.org/2000/svg","g");if(a.appendChild(r([["|"].includes(n),!1,["|"].includes(i),!1,!1,!0,!1,!0])),"/"==l){const t=r([!1,!1,!1,!1,!1,!0,!1,!1]);t.setAttribute("transform","translate(-30 -54)"),t.setAttribute("clip-path","polygon(15 0, 30 0, 30 54, 15 54)"),a.appendChild(t)}if("/"==s){const t=r([!1,!1,!1,!1,!1,!1,!1,!0]);t.setAttribute("transform","translate(30 54)"),t.setAttribute("clip-path","polygon(-3 0, 0 0, 0 6, -3 6)"),a.appendChild(t)}if("_"==l){const n=e._(t);a.appendChild(n)}return a},"#":([t,e,n,s,i,l,o,p])=>{const u=document.createElementNS("http://www.w3.org/2000/svg","g"),c=document.createElementNS("http://www.w3.org/2000/svg","polygon");return c.setAttribute("points",[[0,0],[42,0],[42,42],[0,42]].map((([t,e])=>`${t},${e}`)).join(" ")),c.setAttribute("transform","translate(-6, 6)"),u.appendChild(c),u.appendChild(r([["+","|"].includes(t),["+","-"].includes(e),["+","|"].includes(n),["+","-"].includes(s),["/"].includes(i),["\\"].includes(l),["/"].includes(o),["\\"].includes(p)])),u},"+":([t,e,n,s,i,l,o,p])=>{const u=document.createElementNS("http://www.w3.org/2000/svg","g"),c=["*","#","-","+","~",">",".","'","`"].includes(e),a=["*","#","-","+","~","<",".","'","`"].includes(s),d=["*","#","|","+",".","`","^"].includes(t),w=["*","#","|","+","'","`","v"].includes(n),g=["/","*","#"].includes(i),b=["\\","*","#"].includes(l),A=["\\","*","#"].includes(p),h=["/","*","#"].includes(o);if(u.appendChild(r([d,c,w,a,g,b,h,A])),(a||c)&&(w||d)){const t=document.createElementNS("http://www.w3.org/2000/svg","polygon");t.setAttribute("points","0,0 6,0 6,6 0,6"),t.setAttribute("transform","translate(-3 -3) translate(15 27)"),u.appendChild(t)}if(g||A){const t=r([!1,!1,!1,!1,!1,A,g,!1]);t.setAttribute("clip-path","polygon(0 -3, 30 -3, 30 0, 0 0)"),u.appendChild(t)}if(b||h){const t=r([!1,!1,!1,!1,h,!1,!1,b]);t.setAttribute("clip-path","polygon(0 27, 15 27, 15 30, 0 30)"),u.appendChild(t)}if(h||A){const t=r([!1,!1,!1,!1,h&&b,A&&g,!1,!1]);t.setAttribute("clip-path","polygon(-3 0, 0 0, 0 54, -3 54)"),u.appendChild(t)}if(b||g){const t=r([!1,!1,!1,!1,!1,!1,g&&A,b&&h]);t.setAttribute("clip-path","polygon(15 0, 30 0, 30 54, 15 54)"),u.appendChild(t)}if(c||a){const t=r([!1,!1,!1,!1,c||h,A,g,a||b]);t.setAttribute("clip-path","polygon(-3 24, 30 24, 30 30, -3 30)"),u.appendChild(t)}return u},".":([t,e,n,s,i,l,o,p])=>{const u=document.createElementNS("http://www.w3.org/2000/svg","g");if(!("-"!=e&&"+"!=e||"|"!=n&&"'"!=n&&"`"!=n&&"+"!=n)){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 30 24\n A 18 18, 0, 0, 0, 12 42\n L 12 54\n L 18 54\n L 18 42\n A 12 12, 0, 0, 1, 30 30\n Z"),u.appendChild(t)}if(!("-"!=s&&"+"!=s||"|"!=n&&"'"!=n&&"`"!=n&&"+"!=n)){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 0 24\n A 18 18, 0, 0, 1, 18 42\n L 18 54\n L 12 54\n L 12 42\n A 12 12, 0, 0, 0, 0 30 \n Z"),u.appendChild(t)}if(!("-"!=e&&"+"!=e||"|"!=t&&"."!=t&&"+"!=t)){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 30 30\n A 18 18, 0, 0, 1, 12 12\n L 12 0\n L 18 0\n L 18 12\n A 12 12, 0, 0, 0, 30 24\n Z"),u.appendChild(t)}if(!("-"!=s&&"+"!=s||"|"!=t&&"."!=t&&"+"!=t)){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 0 30\n A 18 18, 0, 0, 0, 18 12\n L 18 0\n L 12 0\n L 12 12\n A 12 12, 0, 0, 1, 0 24\n Z"),u.appendChild(t)}if("-"==e&&"/"==i){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 30 30\n A 12 12, 0, 0, 1, 18 18\n L 18 15\n L 24 15\n L 24 18\n A 6 6, 0, 0, 0, 30 24\n Z"),u.appendChild(t);const e=r([!1,!1,!1,!1,!0,!1,!1,!1]);e.setAttribute("clip-path","polygon(15px -10px, 30px -10px, 30px 30px, 2px 15px)"),u.appendChild(e)}if("-"==e&&"\\"==p){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M -3 0\n A 60 60, 0, 0, 0, 30 30\n L 30 24\n A 60 60, 0, 0, 1, 0 -6\n Z"),u.appendChild(t)}if("-"==s&&"/"==i){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 0 30\n A 60 60, 0, 0, 0, 33 0\n L 30 -6\n A 60 60, 0, 0, 1, 0 24\n Z"),u.appendChild(t)}if("-"==s&&"\\"==p){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 0 30\n A 12 12, 0, 0, 0, 12 18\n L 12 15\n L 6 15\n L 6 18\n A 6 6, 0, 0, 1, 0 24\n Z"),u.appendChild(t);const e=r([!1,!1,!1,!1,!1,!1,!1,!0]);e.setAttribute("clip-path","polygon(-3 -3, 12 -3, 12 18, -3 18)"),u.appendChild(e)}if("|"==n&&"/"==i){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 12 54\n A 120 120, 0, 0, 1, 30 -6\n L 37 -6\n A 120 120, 0, 0, 0, 18 54\n Z"),u.appendChild(t)}if("|"==t&&"\\"==l){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 30 60\n A 120 120, 0, 0, 1, 12 0\n L 18 0\n A 120 120, 0, 0, 0, 37 60\n Z"),u.appendChild(t)}if("|"==t&&"/"==o){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 0 60\n A 120 120, 0, 0, 0, 18 0\n L 12 0\n A 120 120, 0, 0, 1, -7 60\n Z"),u.appendChild(t)}if("|"==n&&"\\"==p){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 12 54\n A 120 120, 0, 0, 0, -7 -6\n L 0 -6\n A 120 120, 0, 0, 1, 18 54\n Z"),u.appendChild(t)}if("-"==e&&"/"==o){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 0 48\n A 42 42, 0, 0, 1, 30 24\n L 30 30\n A 42 42, 0, 0, 0, 6 48\n Z"),u.appendChild(t);const e=r([!1,!1,!1,!1,!1,!1,!0,!1]);e.setAttribute("clip-path","polygon(-3 15, 12 15, 12 30, -3 30)"),u.appendChild(e)}if("-"==s&&"\\"==l){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 0 24\n A 42 42, 0, 0, 1, 30 48\n L 24 48\n A 42 42, 0, 0, 0, 0 30\n Z"),u.appendChild(t);const e=r([!1,!1,!1,!1,!1,!0,!1,!1]);e.setAttribute("clip-path","polygon(-3 15, 12 15, 21 30, -3 30)"),u.appendChild(e)}if("-"==s&&"/"==o){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 0 24\n A 12 12, 0, 0, 1, 12 39\n L 6 39\n A 6 6, 0, 0, 0, 0 30\n Z"),u.appendChild(t);const e=r([!1,!1,!1,!1,!1,!1,!0,!1]);e.setAttribute("clip-path","polygon(-3 6, 12 6, 12 30, -3 30)"),u.appendChild(e)}if("-"==e&&"\\"==l){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 30 24\n A 12 12, 0, 0, 0, 18 39\n L 24 39\n A 6 6, 0, 0, 1, 30 30 \n Z"),u.appendChild(t);const e=r([!1,!1,!1,!1,!1,!0,!1,!1]);e.setAttribute("clip-path","polygon(3 6, 18 6, 18 30, 3 30)"),u.appendChild(e)}if("/"==o&&"\\"==l){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 3 42\n A 15 15, 0, 0, 1, 27 42\n L 25 51\n A 9 9, 0, 0, 0, 5 51\n Z"),u.appendChild(t);const e=r([!1,!1,!1,!1,!1,!0,!0,!1]);e.setAttribute("clip-path","polygon(-3 15, 33 15, 33 30, -3 30)"),u.appendChild(e)}if("\\"==p&&"/"==i){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 3 12\n A 15 15, 0, 0, 0, 27 12\n L 22 9\n A 9 9, 0, 0, 1, 8 9\n Z"),u.appendChild(t);const e=r([!1,!1,!1,!1,!0,!1,!1,!0]);e.setAttribute("clip-path","polygon(-3 -3, 33 -3, 33 12, -3 12)"),u.appendChild(e)}if("/"==i&&"\\"==l){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 22 9\n A 30 30, 0, 0, 0, 22 45\n L 28 45\n A 30 30, 0, 0, 1, 28 9\n Z"),u.appendChild(t);const e=r([!1,!1,!1,!1,!0,!0,!1,!1]);e.setAttribute("clip-path","polygon(6 -3, 33 -3, 33 57, 6 57)"),u.appendChild(e)}if("\\"==p&&"/"==o){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d","\n M 8 9\n A 30 30, 0, 0, 1, 8 45\n L 2 45\n A 30 30, 0, 0, 0, 2 9\n Z"),u.appendChild(t);const e=r([!1,!1,!1,!1,!1,!1,!0,!0]);e.setAttribute("clip-path","polygon(-3 -3, 9 -3, 9 57, -3 57)"),u.appendChild(e)}return u}},n={"┌":"+","┐":"+","└":"+","┘":"+","─":"-","►":">","'":".","`":".",V:"v"};for(const[t,r]of Object.entries(n))e[t]=t=>e[r](t);function r([t,e,n,r,s,i,l,o]){const p=document.createElementNS("http://www.w3.org/2000/svg","g");if(t){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1",15),t.setAttribute("y1",0),t.setAttribute("x2",15),t.setAttribute("y2",27),t.setAttribute("class","part"),p.appendChild(t)}if(e){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1",15),t.setAttribute("y1",27),t.setAttribute("x2",30),t.setAttribute("y2",27),t.setAttribute("class","part"),p.appendChild(t)}if(n){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1",15),t.setAttribute("y1",27),t.setAttribute("x2",15),t.setAttribute("y2",54),t.setAttribute("class","part"),p.appendChild(t)}if(r){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1",0),t.setAttribute("y1",27),t.setAttribute("x2",15),t.setAttribute("y2",27),t.setAttribute("class","part"),p.appendChild(t)}if(document.createElementNS("http://www.w3.org/2000/svg","polygon").setAttribute("points",[[0,0],[20.6,0],[20.6,3],[0,3]].map((([t,e])=>`${t},${e}`)).join(" ")),s){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1",30),t.setAttribute("y1",0),t.setAttribute("x2",15),t.setAttribute("y2",27),t.setAttribute("class","part"),p.appendChild(t)}if(i){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1",15),t.setAttribute("y1",27),t.setAttribute("x2",30),t.setAttribute("y2",54),t.setAttribute("class","part"),p.appendChild(t)}if(l){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1",15),t.setAttribute("y1",27),t.setAttribute("x2",0),t.setAttribute("y2",54),t.setAttribute("class","part"),p.appendChild(t)}if(o){const t=document.createElementNS("http://www.w3.org/2000/svg","line");t.setAttribute("x1",0),t.setAttribute("y1",0),t.setAttribute("x2",15),t.setAttribute("y2",27),t.setAttribute("class","part"),p.appendChild(t)}return p}function s(t,e){const n=document.createElementNS("http://www.w3.org/2000/svg","g"),r=document.createElementNS("http://www.w3.org/2000/svg","text"),s=document.createTextNode(t);return r.appendChild(s),e&&r.setAttribute("class","reserved"),r.setAttribute("transform",[[15,24]].map((([t,e])=>`translate(${t}, ${e})`)).join(" ")),n.appendChild(r),n}function i(t,[e,n]){let r=" ",s=" ",i=" ",l=" ",o=" ",p=" ",u=" ",c=" ";return n>0&&(s=t[n-1][e]||" "),e0&&(r=t[n][e-1]||" "),n>0&&e0&&(u=t[n+1][e-1]||" "),n>0&&e>0&&(c=t[n-1][e-1]||" "),[s,i,l,r,o,p,u,c]}e[">"]=([t,e,n,r,s,i,l,o])=>{const p=document.createElementNS("http://www.w3.org/2000/svg","g"),u=document.createElementNS("http://www.w3.org/2000/svg","polygon");u.setAttribute("points","0,0 42,18 0,36");let c=0;return"*"!=e&&"o"!=e&&"#"!=e||(c-=18),u.setAttribute("transform",`translate(${c} 9)`),p.appendChild(u),p},e["<"]=([t,e,n,r,s,i,l,o])=>{const p=document.createElementNS("http://www.w3.org/2000/svg","g"),u=document.createElementNS("http://www.w3.org/2000/svg","polygon");u.setAttribute("points","0,0 42,18 0,36");let c=30;return"*"!=r&&"o"!=r&&"#"!=r||(c+=18),u.setAttribute("transform",`translate(${c} 9) translate(0 36) rotate(180)`),p.appendChild(u),p},e.v=([t,e,n,s,i,l,o,p])=>{const u=document.createElementNS("http://www.w3.org/2000/svg","g"),c=document.createElementNS("http://www.w3.org/2000/svg","polygon");c.setAttribute("points","0,0 42,18 0,36");let a=36;return" "==n?a=12:"_"==n?a+=18:"*"!=n&&"o"!=n&&"#"!=n||(a-=18),"/"==i?c.setAttribute("transform","translate(-36 33) rotate(112.5, 42, 18)"):"\\"==p?c.setAttribute("transform","translate(-18 33) rotate(67.5, 42, 18)"):c.setAttribute("transform",`translate(33 ${a}) rotate(90)`),u.appendChild(c),u.appendChild(r([["|","+"].includes(t),!1,["|","+"].includes(t),!1,["/"].includes(i),!1,!1,["\\"].includes(p)])),u},e["^"]=([t,e,n,s,i,l,o,p])=>{const u=document.createElementNS("http://www.w3.org/2000/svg","g"),c=document.createElementNS("http://www.w3.org/2000/svg","polygon");c.setAttribute("points","0,0 42,18 0,36");let a=42;return"-"==t&&(a-=15),"/"==o?c.setAttribute("transform","translate(-18 -15) rotate(-67.5, 42, 18)"):"\\"==l?c.setAttribute("transform","translate(-36 -15) rotate(-112.5, 42, 18)"):c.setAttribute("transform",`translate(-3 ${a}) rotate(-90)`),u.appendChild(c),u.appendChild(r([!1,!1,["+","|"].includes(n),!1,!1,["\\"].includes(l),["/"].includes(o),!1])),u},t.exports=function(t,n,r){const l=t.split("\n").map((t=>t.trimEnd().split("")));l.shift(),l.splice(-1);let o=0;const p=l.length;for(let t=0;to&&(o=l[e].length);var u=document.createElementNS("http://www.w3.org/2000/svg","svg");u.setAttribute("width",30*o*n),u.setAttribute("height",54*p*n),u.setAttribute("debug",r),u.setAttribute("viewBox",`0 0 ${30*o+0} ${54*p+0}`),u.setAttribute("class","debug");var c=document.createElementNS("http://www.w3.org/2000/svg","style");return c.innerHTML='\n.diagram {\n display: block;\n}\n\n.diagram line, .diagram circle, .diagram rect {\n stroke: black;\n}\n\n.diagram line {\n stroke-width: 2;\n}\n\n.diagram circle {\n r: 3.5;\n}\n\n.diagram rect {\n width: 6px;\n height: 6px;\n}\n\n.diagram text, .glyph, .debug text {\n /** font-family: Consolas, Monaco, \'Andale Mono\', \'Ubuntu Mono\', monospace; **/\n font-family: Iosevka Fixed, monospace;\n font-size: 3em;\n text-anchor: middle;\n alignment-baseline: central;\n white-space: pre;\n}\n\n.reserved {\n fill: transparent;\n white-space: pre;\n}\n\n.debug[debug="true"] .reserved {\n fill: black;\n opacity: 0.5;\n}\n\n.debug[debug="true"] line.grid {\n stroke: black;\n stroke-width: 0.2;\n stroke-linecap: butt;\n fill: black;\n opacity: 1%;\n}\n\npolygon {\n stroke-width: 0;\n}\n\n.debug[debug="true"] polygon.inner {\n fill: black;\n stroke: black;\n opacity: 5%;\n}\n\npolygon {\n stroke: black;\n /** stroke-width: 0.2; **/\n stroke-linecap: butt;\n fill: black;\n}\n\n.debug[debug="true"] polygon,\n.debug[debug="true"] line.grid\n{\n opacity: 10%;\n}\n\n.debug[debug="true"] polygon,\n.debug[debug="true"] path,\n.debug[debug="true"] circle\n{\n opacity: 50%;\n}\n\n.debug[debug="true"] polygon {\n fill: red;\n stroke: red;\n}\n\n/**\ncircle {\n fill: black;\n}\n**/\n\n.debug[debug="true"] circle,\n.debug[debug="true"] path\n{\n opacity: 50%;\n fill: red;\n}\n\n.debug[debug="true"] circle {\n stroke: red;\n}\n\n.debug[debug="true"] .inner {\n stroke-width: 0.2;\n}\n\nline.part {\n stroke-width: 6;\n stroke-linecap: butt;\n stroke: black;\n}\n\n.debug[debug="true"] line.part {\n opacity: 50%;\n stroke: red;\n}\n\n.debug[debug="true"] line.center {\n stroke-width: 3;\n stroke-linecap: butt;\n opacity: 10%;\n stroke: black;\n}\n\ntext::selection {\n fill: black;\n background-color: #EEE;\n}\n ',u.appendChild(c),u.appendChild(function(t){const n=document.createElementNS("http://www.w3.org/2000/svg","g");for(let r=0;r{it.skip("main",(()=>{console.log("hi"),console.log(create),create("o->hi")}))}));typograms/tests/typograms.js000644 0000025355 14717732565013511 0ustar00000000 000000 const assert=require("assert"),create=require("./../src/typograms.js");describe("typograms",(()=>{class t{constructor(t){this.rows=t.split("\n"),this.width=0;for(const t of this.rows)this.width=Math.max(this.width,t.length);this.height=this.rows.length}size(){return[this.width,this.height]}get(t,o){return t<0||t>=this.width||o<0||o>=this.height?void 0:t{o(1).equalsTo(1),o(new t("").size()).equalsTo([0,1]),o(new t("a").size()).equalsTo([1,1]),o(new t("ab").size()).equalsTo([2,1]),o(new t("\n").size()).equalsTo([0,2]),o(new t("a\n").size()).equalsTo([1,2]),o(new t("a\nb").size()).equalsTo([1,2]),o(new t("ab\n").size()).equalsTo([2,2]),o(new t("ab\ncd").size()).equalsTo([2,2]),o(new t("ab\ncde").size()).equalsTo([3,2]),o(new t("\n\n").size()).equalsTo([0,3]),o(new t("\na\n").size()).equalsTo([1,3])})),it("cells",(()=>{o(new t("").get(0,0)).equalsTo(void 0),o(new t("").get(-1,0)).equalsTo(void 0),o(new t("").get(0,-1)).equalsTo(void 0),o(new t("a").get(-1,0)).equalsTo(void 0),o(new t("a").get(0,-1)).equalsTo(void 0),o(new t("a").get(0,0)).equalsTo("a"),o(new t("a").get(0,1)).equalsTo(void 0),o(new t("a").get(1,0)).equalsTo(void 0),o(new t("ab").get(0,0)).equalsTo("a"),o(new t("ab").get(1,0)).equalsTo("b"),o(new t("ab").get(0,1)).equalsTo(void 0),o(new t("ab").get(2,0)).equalsTo(void 0),o(new t("ab").get(2,1)).equalsTo(void 0),o(new t("a\nb").get(0,0)).equalsTo("a"),o(new t("a\nb").get(1,0)).equalsTo(void 0),o(new t("a\nb").get(0,1)).equalsTo("b"),o(new t("a\nb").get(1,1)).equalsTo(void 0),o(new t("ab\nc").get(0,0)).equalsTo("a"),o(new t("ab\nc").get(1,0)).equalsTo("b"),o(new t("ab\nc").get(2,0)).equalsTo(void 0),o(new t("ab\nc").get(0,1)).equalsTo("c"),o(new t("ab\nc").get(1,1)).equalsTo(" "),o(new t("ab\nc").get(2,1)).equalsTo(void 0)})),it("subgrid",(()=>{o(new t("").subgrid(0,0)).equalsTo(void 0),o(new t("a").subgrid(0,0)).equalsTo([[" "," "," "],[" ","a"," "],[" "," "," "]]),o(new t("ab").subgrid(0,0)).equalsTo([[" "," "," "],[" ","a","b"],[" "," "," "]]),o(new t("ab").subgrid(1,0)).equalsTo([[" "," "," "],["a","b"," "],[" "," "," "]]),o(new t("a\nb").subgrid(0,0)).equalsTo([[" "," "," "],[" ","a"," "],[" ","b"," "]]),o(new t("a\nb").subgrid(0,1)).equalsTo([[" ","a"," "],[" ","b"," "],[" "," "," "]]),o(new t("ab\nc").subgrid(0,0)).equalsTo([[" "," "," "],[" ","a","b"],[" ","c"," "]]),o(new t("ab\nc").subgrid(1,0)).equalsTo([[" "," "," "],["a","b"," "],["c"," "," "]]),o(new t("ab\nc").subgrid(0,1)).equalsTo([[" ","a","b"],[" ","c"," "],[" "," "," "]]),o(new t("ab\nc").subgrid(1,1)).equalsTo([["a","b"," "],["c"," "," "],[" "," "," "]])})),it("*",(()=>{o(new t("*").paint(0,0)).equalsTo(["*"])})),it("o",(()=>{o(new t("o").paint(0,0)).equalsTo(["o"])})),it("#",(()=>{o(new t("#").paint(0,0)).equalsTo(["#"])})),it("|",(()=>{o(new t("|").paint(0,0)).equalsTo(["|"])})),it("-",(()=>{o(new t("-").paint(0,0)).equalsTo(["-"])})),it("/",(()=>{o(new t("/").paint(0,0)).equalsTo(["/"])})),it("\\",(()=>{o(new t("\\").paint(0,0)).equalsTo(["\\"])})),it("+",(()=>{o(new t("+").paint(0,0)).equalsTo([])})),it("cross right",(()=>{o(new t("+-").paint(0,0)).equalsTo(["╶"])})),it("cross left",(()=>{o(new t("-+").paint(1,0)).equalsTo(["╴"])})),it("cross down",(()=>{o(new t("+\n|").paint(0,0)).equalsTo(["╷"])})),it("cross up",(()=>{o(new t("|\n+").paint(0,1)).equalsTo(["╵"])})),it("cross top-right",(()=>{o(new t([" /","+ "].join("\n")).paint(0,1)).equalsTo(["/t"])})),it("cross top-left",(()=>{o(new t(["\\ "," +"].join("\n")).paint(1,1)).equalsTo(["\\t"])})),it("cross bottom-right",(()=>{o(new t(["+ "," \\"].join("\n")).paint(0,0)).equalsTo(["\\b"])})),it("cross bottom-left",(()=>{o(new t([" +","/ "].join("\n")).paint(1,0)).equalsTo(["/b"])})),it("cross top corner",(()=>{o(new t([" +","/ \\"].join("\n")).paint(1,0)).equalsTo(["\\b","/b"])})),it("cross bottom corner",(()=>{o(new t(["\\ /"," + "].join("\n")).paint(1,1)).equalsTo(["/t","\\t"])})),it("cross right corner",(()=>{o(new t([" /"," + "," \\"].join("\n")).paint(1,1)).equalsTo(["/t","\\b"])})),it("cross left corner",(()=>{o(new t(["\\"," +","/ "].join("\n")).paint(1,1)).equalsTo(["\\t","/b"])})),it("cross diagonal corner",(()=>{o(new t(["\\ /"," +","/ \\"].join("\n")).paint(1,1)).equalsTo(["/t","\\t","\\b","/b"])})),it("top-left corner",(()=>{o(new t(["+-","| "].join("\n")).paint(0,0)).equalsTo(["╶","╷"])})),it("top-right corner",(()=>{o(new t(["-+"," |"].join("\n")).paint(1,0)).equalsTo(["╴","╷"])})),it("bottom-left corner",(()=>{o(new t(["|","+-"].join("\n")).paint(0,1)).equalsTo(["╶","╵"])})),it("bottom-left corner",(()=>{o(new t([" |","-+"].join("\n")).paint(1,1)).equalsTo(["╴","╵"])})),it("top-bottom-right corner",(()=>{o(new t(["| ","+-","| "].join("\n")).paint(0,1)).equalsTo(["╶","╵","╷"])})),it("top-bottom-left corner",(()=>{o(new t([" |","-+"," |"].join("\n")).paint(1,1)).equalsTo(["╴","╵","╷"])})),it("top-bottom-right-left corner",(()=>{o(new t([" | ","-+-"," | "].join("\n")).paint(1,1)).equalsTo(["╴","╶","╵","╷"])})),it("* right",(()=>{o(new t("*-").paint(0,0)).equalsTo(["*","╶"])})),it("* left",(()=>{o(new t("-*").paint(1,0)).equalsTo(["*","╴"])})),it("* down",(()=>{o(new t("*\n|").paint(0,0)).equalsTo(["*","╷"])})),it("* up",(()=>{o(new t("|\n*").paint(0,1)).equalsTo(["*","╵"])})),it("* top-left corner",(()=>{o(new t(["*-","| "].join("\n")).paint(0,0)).equalsTo(["*","╶","╷"])})),it("* top-right corner",(()=>{o(new t(["-*"," |"].join("\n")).paint(1,0)).equalsTo(["*","╴","╷"])})),it("* bottom-left corner",(()=>{o(new t(["|","*-"].join("\n")).paint(0,1)).equalsTo(["*","╶","╵"])})),it("* bottom-left corner",(()=>{o(new t([" |","-*"].join("\n")).paint(1,1)).equalsTo(["*","╴","╵"])})),it("* top-bottom-right corner",(()=>{o(new t(["| ","*-","| "].join("\n")).paint(0,1)).equalsTo(["*","╶","╵","╷"])})),it("* top-bottom-left corner",(()=>{o(new t([" |","-*"," |"].join("\n")).paint(1,1)).equalsTo(["*","╴","╵","╷"])})),it("* top-bottom-right-left corner",(()=>{o(new t([" | ","-*-"," | "].join("\n")).paint(1,1)).equalsTo(["*","╴","╶","╵","╷"])})),it("o right",(()=>{o(new t("o-").paint(0,0)).equalsTo(["o","╶"])})),it("o left",(()=>{o(new t("-o").paint(1,0)).equalsTo(["o","╴"])})),it("o down",(()=>{o(new t("o\n|").paint(0,0)).equalsTo(["o","╷"])})),it("o up",(()=>{o(new t("|\no").paint(0,1)).equalsTo(["o","╵"])})),it("o top-left corner",(()=>{o(new t(["o-","| "].join("\n")).paint(0,0)).equalsTo(["o","╶","╷"])})),it("o top-right corner",(()=>{o(new t(["-o"," |"].join("\n")).paint(1,0)).equalsTo(["o","╴","╷"])})),it("o bottom-left corner",(()=>{o(new t(["|","o-"].join("\n")).paint(0,1)).equalsTo(["o","╶","╵"])})),it("o bottom-left corner",(()=>{o(new t([" |","-o"].join("\n")).paint(1,1)).equalsTo(["o","╴","╵"])})),it("o top-bottom-right corner",(()=>{o(new t(["| ","o-","| "].join("\n")).paint(0,1)).equalsTo(["o","╶","╵","╷"])})),it("o top-bottom-left corner",(()=>{o(new t([" |","-o"," |"].join("\n")).paint(1,1)).equalsTo(["o","╴","╵","╷"])})),it("o top-bottom-right-left corner",(()=>{o(new t([" | ","-o-"," | "].join("\n")).paint(1,1)).equalsTo(["o","╴","╶","╵","╷"])})),it("# right",(()=>{o(new t("#-").paint(0,0)).equalsTo(["#","╶"])})),it("# left",(()=>{o(new t("-#").paint(1,0)).equalsTo(["#","╴"])})),it("# down",(()=>{o(new t("#\n|").paint(0,0)).equalsTo(["#","╷"])})),it("# up",(()=>{o(new t("|\n#").paint(0,1)).equalsTo(["#","╵"])})),it("# top-left corner",(()=>{o(new t(["#-","| "].join("\n")).paint(0,0)).equalsTo(["#","╶","╷"])})),it("# top-right corner",(()=>{o(new t(["-#"," |"].join("\n")).paint(1,0)).equalsTo(["#","╴","╷"])})),it("# bottom-left corner",(()=>{o(new t(["|","#-"].join("\n")).paint(0,1)).equalsTo(["#","╶","╵"])})),it("# bottom-left corner",(()=>{o(new t([" |","-#"].join("\n")).paint(1,1)).equalsTo(["#","╴","╵"])})),it("# top-bottom-right corner",(()=>{o(new t(["| ","#-","| "].join("\n")).paint(0,1)).equalsTo(["#","╶","╵","╷"])})),it("# top-bottom-left corner",(()=>{o(new t([" |","-#"," |"].join("\n")).paint(1,1)).equalsTo(["#","╴","╵","╷"])})),it("# top-bottom-right-left corner",(()=>{o(new t([" | ","-#-"," | "].join("\n")).paint(1,1)).equalsTo(["#","╴","╶","╵","╷"])})),it("top-left corner",(()=>{o(new t([".-","| "].join("\n")).paint(0,0)).equalsTo(["╭"])})),it("top-right corner",(()=>{o(new t(["-."," |"].join("\n")).paint(1,0)).equalsTo(["╮"])})),it("bottom-left corner",(()=>{o(new t(["|",".-"].join("\n")).paint(0,1)).equalsTo(["╰"])})),it("bottom-left corner",(()=>{o(new t([" |","-."].join("\n")).paint(1,1)).equalsTo(["╯"])})),it("top-bottom-right corner",(()=>{o(new t(["| ",".-","| "].join("\n")).paint(0,1)).equalsTo(["╭","╰"])})),it("top-bottom-left corner",(()=>{o(new t([" |","-."," |"].join("\n")).paint(1,1)).equalsTo(["╮","╯"])})),it("top-bottom-right-left corner",(()=>{o(new t([" | ","-.-"," | "].join("\n")).paint(1,1)).equalsTo(["╭","╮","╰","╯"])})),it("dot cross top-right",(()=>{o(new t([" /",". "].join("\n")).paint(0,1)).equalsTo([])})),it("dot cross top-left",(()=>{o(new t(["\\ "," ."].join("\n")).paint(1,1)).equalsTo([])})),it("dot bottom-right",(()=>{o(new t([". "," \\"].join("\n")).paint(0,0)).equalsTo([])})),it("dot bottom-left",(()=>{o(new t([" .","/ "].join("\n")).paint(1,0)).equalsTo([])})),it("dot top corner",(()=>{o(new t([" .","/ \\"].join("\n")).paint(1,0)).equalsTo(["⌒b"])})),it("dot bottom corner",(()=>{o(new t(["\\ /"," . "].join("\n")).paint(1,1)).equalsTo(["⌒t"])})),it("dot right corner",(()=>{o(new t([" /"," . "," \\"].join("\n")).paint(1,1)).equalsTo(["⌒r"])})),it("cross left corner",(()=>{o(new t(["\\"," .","/ "].join("\n")).paint(1,1)).equalsTo(["⌒l"])})),it("dot diagonal corner",(()=>{o(new t(["\\ /"," .","/ \\"].join("\n")).paint(1,1)).equalsTo(["⌒b","⌒t","⌒r","⌒l"])}))}));