From 13be0b210eec72480d6345d2053cd073984a0876 Mon Sep 17 00:00:00 2001
From: David Evans <davidje13@users.noreply.github.com>
Date: Sun, 6 May 2018 00:54:13 +0100
Subject: [PATCH] Add new markdown styles to library [#54]

---
 web/lib/editor.js                           | 20 ++++++++++++++++++++
 web/lib/editor.min.js                       |  2 +-
 web/scripts/interface/ComponentsLibrary.mjs | 20 ++++++++++++++++++++
 3 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/web/lib/editor.js b/web/lib/editor.js
index baf4a85..e8eb470 100644
--- a/web/lib/editor.js
+++ b/web/lib/editor.js
@@ -261,6 +261,26 @@
 			preview: 'A -> B: ~strikeout~',
 			title: 'Strikeout markdown',
 		},
+		{
+			code: '<u>{text}</u>',
+			preview: 'A -> B: <u>underline</u>',
+			title: 'Underline markdown',
+		},
+		{
+			code: '<o>{text}</o>',
+			preview: 'A -> B: <o>overline</o>',
+			title: 'Overline markdown',
+		},
+		{
+			code: '<sup>{text}</sup>',
+			preview: 'A -> B: super<sup>script</sup>',
+			title: 'Superscript markdown',
+		},
+		{
+			code: '<sub>{text}</sub>',
+			preview: 'A -> B: sub<sub>script</sub>',
+			title: 'Subscript markdown',
+		},
 		{
 			code: '`{text}`',
 			preview: 'A -> B: `mono`',
diff --git a/web/lib/editor.min.js b/web/lib/editor.min.js
index 185263d..c957f97 100644
--- a/web/lib/editor.min.js
+++ b/web/lib/editor.min.js
@@ -1 +1 @@
-!function(){"use strict";function e(e){return null===e?null:e.element?e.element:e}function t(e){return e.length>0&&"\n"!==e.charAt(e.length-1)?e+"\n":e}function i(e,t){let i=0,n=0;for(;;){const s=e.indexOf("\n",i)+1;if(t<s||0===s)return{ch:t-i,line:n};i=s,++n}}function n(e,t){const i=e.toString(),n=i.indexOf(".");return-1===n||i.length-n-1<=t?i:e.toFixed(t)}function s(e,t,i){e(["split"],e=>{const n=t[0].parentNode,s=n.addEventListener,r=n.removeEventListener;n.addEventListener=((e,t)=>{"mousemove"===e||"touchmove"===e?window.addEventListener(e,t,{passive:!0}):s.call(n,e,t)}),n.removeEventListener=((e,t)=>{"mousemove"===e||"touchmove"===e?window.removeEventListener(e,t):r.call(n,e,t)});let o=null;const l=Object.assign({cursor:"vertical"===i.direction?"row-resize":"col-resize",direction:"vertical",gutterSize:0,onDragEnd:()=>{document.body.style.cursor=o,o=null},onDragStart:()=>{o=document.body.style.cursor,document.body.style.cursor=l.cursor}},i);return new e(t,l)})}var r=[{code:"{Agent1} -> {Agent2}: {Message}",title:"Simple arrow (synchronous)"},{code:"{Agent1} --\x3e {Agent2}: {Message}",title:"Arrow with dotted line (response)"},{code:"{Agent1} ->> {Agent2}: {Message}",title:"Open arrow (asynchronous)"},{code:"{Agent1} -x {Agent2}: {Message}",title:"Lost message"},{code:"{Agent1} ~> {Agent2}: {Message}",title:"Wavy line"},{code:"{Agent1} -> {Agent1}: {Message}",title:"Self-connection"},{code:"{Agent1} -> ...{id}\n...{id} -> {Agent2}: {Message}",preview:"begin A, B\nA -> ...x\n...x -> B: Message",title:"Asynchronous message"},{code:"* -> {Agent1}: {Message}",title:"Found message"},{code:"{Agent1} -> {Agent2}\n& {Agent1} -> {Agent3}: {Broadcast}",title:"Broadcast message"},{code:"{Agent1} -> +{Agent2}: {Request}\n{Agent1} <-- -{Agent2}: {Response}",title:"Request/response pair"},{code:"{Agent1} -> *{Agent2}: {Request}\n{Agent1} <-- !{Agent2}: {Response}",title:"Inline agent creation / destruction"},{code:"{Agent1} -> {Agent2}: {Request}\n{Agent1} <-- {Agent2}: {Response}\nend {Agent2}",preview:"begin A\n::\nA -> B: Request\nA <-- B: Response\nend B",title:"Agent creation / destruction"},{code:'autolabel "[<inc>] <label>"',preview:'autolabel "[<inc>] <label>"\nA -> B: Foo\nA <- B: Bar\nA -> B: Baz',title:"Numbered labels"},{code:"if {Condition1}\n  {Agent1} -> {Agent2}\nelse if {Condition2}\n  {Agent1} -> {Agent2}\nelse\n  {Agent1} -> {Agent2}\nend",preview:"begin A, B\nif Condition1\n  A -> B\nelse if Condition2\n  A -> B\nelse\n  A -> B\nend",title:"Conditional blocks"},{code:"repeat {Condition}\n  {Agent1} -> {Agent2}\nend",preview:"begin A, B\nrepeat Condition\n  A -> B\nend",title:"Repeated block"},{code:"begin reference: {Label} as {Name}\n{Agent1} -> {Name}\nend {Name}",preview:'begin A\nbegin reference: "See 1.3" as myRef\nA -> myRef\nmyRef -> A\nend myRef',title:"Reference"},{code:"begin reference over {Covered}: {Label} as {Name}\n{Agent1} -> {Name}\nend {Name}",preview:'begin A, B, C\nbegin reference over B, C: "See 1.3" as myRef\nA -> myRef\nmyRef -> A\nend myRef',title:"Reference over agents"},{code:"group {Label}\n  {Agent1} -> {Agent2}\nend",preview:"begin A, B\ngroup Label\n  A -> B\nend",title:"Group"},{code:"note over {Agent1}: {Message}",title:"Note over agent"},{code:"note over {Agent1}, {Agent2}: {Message}",title:"Note over multiple agents"},{code:"note left of {Agent1}: {Message}",title:"Note left of agent"},{code:"note right of {Agent1}: {Message}",title:"Note right of agent"},{code:"note between {Agent1}, {Agent2}: {Message}",title:"Note between agents"},{code:"{Agent1} -> {Agent2}\n& note right of {Agent2}: {Message}",title:"Inline note"},{code:"state over {Agent1}: {State}",title:"State over agent"},{code:"[ -> {Agent1}: {Message1}\n{Agent1} -> ]: {Message2}",title:"Arrows to/from the sides"},{code:"text right: {Message}",preview:'A -> B\nsimultaneously:\ntext right: "Message\\non the\\nside"',title:"Text beside the diagram"},{code:"divider space with height 10: {message}",preview:"begin A, B, C, D, E, F\ndivider space with height 30: message",title:"Vertical space divider"},{code:"divider line with height 10: {message}",preview:"begin A, B, C, D, E, F\ndivider line with height 30: message",title:"Line divider"},{code:"divider delay with height 10: {message}",preview:"begin A, B, C, D, E, F\ndivider delay with height 30: message",title:"Delay divider"},{code:"divider tear with height 10: {message}",preview:"begin A, B, C, D, E, F\ndivider tear with height 30: message",title:"Tear divider"},{code:"title {Title}",preview:"headers box\ntitle Title\nA -> B",title:"Title"},{code:"**{text}**",preview:"A -> B: **bold**",title:"Bold markdown"},{code:"_{text}_",preview:"A -> B: _italic_",title:"Italic markdown"},{code:"~{text}~",preview:"A -> B: ~strikeout~",title:"Strikeout markdown"},{code:"`{text}`",preview:"A -> B: `mono`",title:"Monospace markdown"},{code:"<red>{text}</red>",preview:"A -> B: <red>red</red>",title:"Red markdown"},{code:"<highlight>{text}</highlight>",preview:"A -> B: <highlight>highlight</highlight>",title:"Highlight markdown"},{code:"{Agent} is red",preview:"headers box\nA is red\nbegin A",title:"Red agent line"},{code:"{Agent} is a database",preview:"headers box\nA is a database\nbegin A",title:"Database indicator"},{code:"theme monospace",preview:"headers box\ntitle mono\ntheme monospace\nA -> B",title:"Monospace theme"},{code:"theme chunky",preview:"headers box\ntitle chunky\ntheme chunky\nA -> B",title:"Chunky theme"},{code:"theme sketch",preview:"headers box\ntitle sketch\ntheme sketch\nA -> B",title:"Sketch theme"},{code:"terminators cross",preview:"begin A\nterminators cross",title:"Cross terminators"},{code:"terminators fade",preview:"begin A\nterminators fade",title:"Fade terminators"},{code:"terminators bar",preview:"begin A\nterminators bar",title:"Bar terminators"},{code:"terminators box",preview:"begin A\nterminators box",title:"Box terminators"}];class o{constructor(e){this.element=e}addBefore(t=null,i=null){if(null===t)return this;if(Array.isArray(t))for(const e of t)this.addBefore(e,i);else{const n=function(e,t){return"string"==typeof e?t.createTextNode(e):"number"==typeof e?t.createTextNode(e.toString(10)):"object"==typeof e&&e.element?e.element:e}(t,this.element.ownerDocument);this.element.insertBefore(n,e(i))}return this}add(...e){return this.addBefore(e,null)}del(t=null){return null!==t&&this.element.removeChild(e(t)),this}attr(e,t){return this.element.setAttribute(e,t),this}attrs(e){for(const t in e)Object.prototype.hasOwnProperty.call(e,t)&&this.element.setAttribute(t,e[t]);return this}styles(e){for(const t in e)Object.prototype.hasOwnProperty.call(e,t)&&(this.element.style[t]=e[t]);return this}setClass(e){return this.attr("class",e)}addClass(e){const t=this.element.getAttribute("class");if(!t)return this.setClass(e);const i=t.split(" ");return i.includes(e)?this:(i.push(e),this.attr("class",i.join(" ")))}delClass(e){const t=this.element.getAttribute("class");if(!t)return this;const i=t.split(" "),n=i.indexOf(e);return-1!==n&&(i.splice(n,1),this.attr("class",i.join(" "))),this}text(e){return this.element.textContent=e,this}on(e,t,i={}){if(Array.isArray(e))for(const n of e)this.on(n,t,i);else this.element.addEventListener(e,t,i);return this}off(e,t,i={}){if(Array.isArray(e))for(const n of e)this.off(n,t,i);else this.element.removeEventListener(e,t,i);return this}val(e){return this.element.value=e,this}select(e,t=null){return this.element.selectionStart=e,this.element.selectionEnd=null===t?e:t,this}focus(){return this.element.focus(),this}focussed(){return this.element===this.element.ownerDocument.activeElement}empty(){for(;this.element.childNodes.length>0;)this.element.removeChild(this.element.lastChild);return this}attach(t){return e(t).appendChild(this.element),this}detach(){return this.element.parentNode&&this.element.parentNode.removeChild(this.element),this}}class l{constructor(e){if(!e)throw new Error("Missing document!");this.document=e,this.wrap=this.wrap.bind(this),this.el=this.el.bind(this),this.txt=this.txt.bind(this)}wrap(e){return e.element?e:new o(e)}el(e,t=null){let i=null;return i=null===t?this.document.createElement(e):this.document.createElementNS(t,e),new o(i)}txt(e=""){return this.document.createTextNode(e)}}const d=500,a=250,h=4;var c=window.SequenceDiagram;const u=window.requirejs,m={},g={},p=window.document.getElementsByTagName("meta");for(let e=0;e<p.length;++e){const t=p[e],i=t.getAttribute("name");if(i&&i.startsWith("cdn-")){const e=i.substr("cdn-".length);let n=t.getAttribute("content");n.endsWith(".mjs")?n=n.substr(0,n.length-".mjs".length):n.endsWith(".js")&&(n=n.substr(0,n.length-".js".length)),m[e]=n;const s=t.getAttribute("data-integrity");s&&(g[e]=s)}}u.config({hashes:g,onNodeCreated:(e,t,i)=>{t.hashes[i]&&(e.setAttribute("integrity",t.hashes[i]),e.setAttribute("crossorigin","anonymous"))},paths:m});window.addEventListener("load",()=>{const e=window.document.getElementById("loader"),[o]=e.getElementsByTagName("nav"),m=o.getElementsByTagName("a"),g=[];for(let e=0;e<m.length;++e)g.push({href:m[e].getAttribute("href"),label:m[e].textContent});const p=new class{constructor({sequenceDiagram:e,defaultCode:t="",localStorage:i="",library:n=[],links:s=[],require:r=null}){this.diagram=e,this.defaultCode=t,this.localStorage=i,this.library=n,this.links=s,this.minScale=1.5,this.require=r||(()=>null),this.debounced=null,this.latestSeq=null,this.renderedSeq=null,this.pngDirty=!0,this.updatingPNG=!1,this.marker=null,this._downloadSVGClick=this._downloadSVGClick.bind(this),this._downloadPNGClick=this._downloadPNGClick.bind(this),this._downloadPNGFocus=this._downloadPNGFocus.bind(this),this._downloadURLClick=this._downloadURLClick.bind(this),this._showDropStyle=this._showDropStyle.bind(this),this._hideDropStyle=this._hideDropStyle.bind(this),this.diagram.on("render",()=>{this.updateMinSize(this.diagram.getSize()),this.pngDirty=!0}).on("mouseover",e=>{this.marker&&this.marker.clear(),void 0!==e.ln&&this.code.markText&&(this.marker=this.code.markText({ch:0,line:e.ln},{ch:0,line:e.ln+1},{className:"hover",clearOnEnter:!0,inclusiveLeft:!1,inclusiveRight:!1}))}).on("mouseout",()=>{this.marker&&(this.marker.clear(),this.marker=null)}).on("click",e=>{this.marker&&(this.marker.clear(),this.marker=null),void 0!==e.ln&&this.code.setSelection&&(this.code.setSelection({ch:0,line:e.ln},{ch:0,line:e.ln+1},{bias:-1,origin:"+focus"}),this.code.focus()),this._hideURLBuilder()}).on("dblclick",e=>{this.diagram.toggleCollapsed(e.ln),this._hideURLBuilder()})}buildURLBuilder(){const e=this.dom.el("div").setClass("copied").add("Copied to Clipboard");this.urlOutput=this.dom.el("input").setClass("output").attr("readonly","readonly").on("focus",()=>{this.urlOutput.select(0,this.urlOutput.element.value.length)});const t=this.dom.el("button").setClass("copy").add("📋").attr("title","Copy to clipboard").on("click",()=>{this.urlOutput.focus().select(0,this.urlOutput.element.value.length).element.ownerDocument.execCommand("copy"),t.focus(),e.styles({display:"block",opacity:1,transition:"none"}),setTimeout(()=>e.styles({opacity:0,transition:"opacity 0.5s linear"}),1e3),setTimeout(()=>e.styles({display:"none"}),1500)});this.urlWidth=this.dom.el("input").attrs({min:0,placeholder:"auto",step:"any",type:"number"}).on("input",()=>{this.urlZoom.val("1"),this._refreshURL()}),this.urlHeight=this.dom.el("input").attrs({min:0,placeholder:"auto",step:"any",type:"number"}).on("input",()=>{this.urlZoom.val("1"),this._refreshURL()}),this.urlZoom=this.dom.el("input").attrs({min:0,step:"any",type:"number",value:1}).on("input",()=>{this.urlWidth.val(""),this.urlHeight.val(""),this._refreshURL()});const i=this.dom.el("div").setClass("config").add(this.dom.el("label").add("width ",this.urlWidth),", ",this.dom.el("label").add("height ",this.urlHeight),this.dom.el("span").setClass("or").add("or"),this.dom.el("label").add("zoom ",this.urlZoom),this.urlOutput,t,e);return this.urlBuilder=this.dom.el("div").setClass("urlbuilder").styles({display:"none"}).add(this.dom.el("div").setClass("message").add("Loading…")),this.renderService="",function(e){return"undefined"==typeof fetch?Promise.reject(new Error):fetch(e).then(e=>{if(!e.ok)throw new Error(e.statusText);return e})}("render/").then(e=>e.text()).then(e=>{let t=e.trim();t&&!t.startsWith("<svg")||(t="render/"),this.renderService=new URL(t,window.location.href).href,this.urlBuilder.empty().add(i),this._refreshURL()}).catch(()=>{this.urlBuilder.empty().add(this.dom.el("div").setClass("message").add("No online rendering service available."))}),this.urlBuilder}_refreshURL(){this.urlOutput.val(this.renderService+function(e,{height:t,width:i,zoom:s}){const r=e.split("\n").map(encodeURIComponent).filter(e=>""!==e).join("/");let o="";return Number.isNaN(i)&&Number.isNaN(t)?Number.isNaN(s)||1===s||(o+="z"+n(Math.max(s,0),4),o+="/"):(Number.isNaN(i)||(o+="w"+n(Math.max(i,0),4)),Number.isNaN(t)||(o+="h"+n(Math.max(t,0),4)),o+="/"),o+r+".svg"}(this.value(),{height:Number.parseFloat(this.urlHeight.element.value),width:Number.parseFloat(this.urlWidth.element.value),zoom:Number.parseFloat(this.urlZoom.element.value||"1")}))}_showURLBuilder(){this.builderVisible||(this.builderVisible=!0,this.urlBuilder.styles({display:"block",height:"0px",padding:"0px",width:this.optsHold.element.clientWidth+"px"}),clearTimeout(this.builderTm),this.builderTm=setTimeout(()=>{this.urlBuilder.styles({height:"150px",padding:"10px",width:"400px"}),this.optsHold.styles({"box-shadow":"10px 10px 25px 12px rgba(0,0,0,0.3)"})},0),this._refreshURL())}_hideURLBuilder(){this.builderVisible&&(this.builderVisible=!1,this.urlBuilder.styles({height:"0px",padding:"0px",width:"0px"}),this.optsHold.styles({"box-shadow":"none"}),clearTimeout(this.builderTm),this.builderTm=setTimeout(()=>{this.urlBuilder.styles({display:"none"})},200))}buildOptionsDownloads(){return this.downloadPNG=this.dom.el("a").text("Download PNG").attrs({download:"SequenceDiagram.png",href:"#"}).on(["focus","mouseover","mousedown"],this._downloadPNGFocus).on("click",this._downloadPNGClick),this.downloadSVG=this.dom.el("a").text("SVG").attrs({download:"SequenceDiagram.svg",href:"#"}).on("click",this._downloadSVGClick),this.downloadURL=this.dom.el("a").text("URL").attrs({href:"#"}).on("click",this._downloadURLClick),this.optsHold=this.dom.el("div").setClass("options downloads").add(this.downloadPNG,this.downloadSVG,this.downloadURL,this.buildURLBuilder()),this.optsHold}buildLibrary(e){const t=this.library.map(t=>{const i=this.dom.el("div").attr("title",t.title||t.code),n=this.dom.el("div").setClass("library-item").add(i).on("click",this.addCodeBlock.bind(this,t.code)).attach(e);return this.diagram.clone({code:function(e){return"headers fade\nterminators fade\n"+e.replace(/\{Agent([0-9]*)\}/g,(e,t)=>void 0===t?"A":String.fromCharCode("A".charCodeAt(0)+Number(t)-1)).replace(/[{}]/g,"")}(t.preview||t.code),container:i.element,render:!1}).on("error",(e,s)=>{window.console.warn("Failed to render preview",s),n.attr("class","library-item broken"),i.text(t.code)})});try{this.diagram.renderAll(t)}catch(e){}return e}buildViewPane(){return this.viewPaneInner=this.dom.el("div").setClass("pane-view-inner").add(this.diagram.dom()).on("click",()=>this._hideURLBuilder()),this.errorMsg=this.dom.el("div").setClass("msg-error"),this.dom.el("div").setClass("pane-view").add(this.dom.el("div").setClass("pane-view-scroller").add(this.viewPaneInner),this.errorMsg)}buildLeftPanes(){const e=this.dom.el("div").setClass("pane-side");this.code=this.dom.el("textarea").setClass("editor-simple").val(this.loadCode()||this.defaultCode).on("input",()=>this.update(!1));const t=this.dom.el("div").setClass("pane-code").add(this.code).attach(e);if(this.library.length>0){const i=this.dom.el("div").setClass("pane-library").add(this.dom.el("div").setClass("pane-library-scroller").add(this.buildLibrary(this.dom.el("div").setClass("pane-library-inner")))).attach(e);s(this.require,[t.element,i.element],{direction:"vertical",minSize:[100,5],sizes:[70,30],snapOffset:5})}return e}build(e){this.dom=new l(e.ownerDocument);const t=this.buildLeftPanes(),i=this.buildViewPane();this.container=this.dom.wrap(e).add(this.dom.el("div").setClass("pane-hold").add(t,i,this.dom.el("div").setClass("options links").add(this.links.map(e=>this.dom.el("a").attrs({href:e.href,target:"_blank"}).text(e.label))),this.buildOptionsDownloads())).on("dragover",e=>{e.preventDefault(),function(e,t){if(!e.dataTransfer.items&&0===e.dataTransfer.files.length)return[...e.dataTransfer.types].includes("Files");const i=e.dataTransfer.items||e.dataTransfer.files;return 1===i.length&&i[0].type===t}(e,"image/svg+xml")?(e.dataTransfer.dropEffect="copy",this._showDropStyle()):e.dataTransfer.dropEffect="none"}).on("dragleave",this._hideDropStyle).on("dragend",this._hideDropStyle).on("drop",e=>{e.preventDefault(),this._hideDropStyle();const t=function(e,t){const i=e.dataTransfer.items||e.dataTransfer.files;if(1!==i.length||i[0].type!==t)return null;const[n]=i;return n.getAsFile?n.getAsFile():n}(e,"image/svg+xml");t&&this.loadFile(t)}),s(this.require,[t.element,i.element],{direction:"horizontal",minSize:[10,10],sizes:[30,70],snapOffset:70}),"undefined"!=typeof window&&window.addEventListener("keydown",e=>{27===e.keyCode&&this._hideURLBuilder()}),setTimeout(this.update.bind(this),0),this._enhanceEditor()}addCodeBlock(e){const i=e.split("\n").length;if(this.code.getCursor){const n=this.code.getCursor("head"),s={ch:0,line:n.line+(n.ch>0?1:0)};this.code.replaceRange(t(e),s,null,"library"),this.code.setCursor({ch:0,line:s.line+i})}else{const i=this.value(),n=this.code.element.selectionStart,s=("\n"+i+"\n").indexOf("\n",n),r=t(i.substr(0,s))+t(e);this.code.val(r+i.substr(s)).select(r.length),this.update(!1)}this.code.focus()}updateMinSize({width:e,height:t}){this.viewPaneInner.styles({minHeight:Math.ceil(t*this.minScale)+"px",minWidth:Math.ceil(e*this.minScale)+"px"})}redrawDebounced(e,t){t<=0?this.redraw(e):(clearTimeout(this.debounced),this.latestSeq=e,this.debounced=setTimeout(()=>this.redraw(e),t))}redraw(e){clearTimeout(this.debounced),this.debounced=null,this.renderedSeq=e,this.diagram.render(e)}saveCode(e){if(this.localStorage)try{window.localStorage.setItem(this.localStorage,e)}catch(e){}}loadCode(){if(!this.localStorage)return"";try{return window.localStorage.getItem(this.localStorage)||""}catch(e){return""}}markError(e){"object"==typeof e&&e.message?this.errorMsg.text(e.message):this.errorMsg.text(e),this.errorMsg.addClass("error")}markOK(){this.errorMsg.text("").delClass("error")}value(){return this.code.getDoc?this.code.getDoc().getValue():this.code.element.value}setValue(e){if(this.code.getDoc){const t=this.code.getDoc();t.setValue(e),t.clearHistory()}else this.code.val(e);this.diagram.expandAll({render:!1}),this.update(!0),this.diagram.setHighlight(null)}loadFile(e){return function(e){return new Promise(t=>{const i=new FileReader;i.addEventListener("loadend",()=>{t(i.result)},{once:!0}),i.readAsText(e)})}(e).then(e=>{const t=this.diagram.extractCodeFromSVG(e);t&&this.setValue(t)})}update(e=!0){this._hideURLBuilder();const t=this.value();this.saveCode(t);let i=null;try{i=this.diagram.process(t)}catch(e){return void this.markError(e)}this.markOK();let n=0;if(!e&&this.renderedSeq){const e=this.renderedSeq;i.agents.length!==e.agents.length?n=d:i.stages.length!==e.stages.length&&(n=a)}this.redrawDebounced(i,n)}forceRender(){this.debounced&&(clearTimeout(this.debounced),this.redraw(this.latestSeq))}updatePNGLink(){return this.forceRender(),!(this.updatingPNG||!this.pngDirty||(this.pngDirty=!1,this.updatingPNG=!0,this.diagram.getPNG({resolution:h}).then(({url:e,latest:t})=>{t&&(this.downloadPNG.attr("href",e),this.updatingPNG=!1)}),0))}_showDropStyle(){this.container.addClass("drop-target")}_hideDropStyle(){this.container.delClass("drop-target")}_downloadPNGFocus(){this.updatePNGLink()}_downloadPNGClick(e){this.updatingPNG?e.preventDefault():this.updatePNGLink()&&e.preventDefault(),this._hideURLBuilder()}_downloadSVGClick(){this.forceRender();const e=this.diagram.getSVGSynchronous();this.downloadSVG.attr("href",e),this._hideURLBuilder()}_downloadURLClick(e){e.preventDefault(),this.builderVisible?this._hideURLBuilder():this._showURLBuilder()}_enhanceEditor(){this.require(["cm/lib/codemirror","cm/addon/hint/show-hint","cm/addon/edit/trailingspace","cm/addon/comment/comment"],e=>{this.diagram.registerCodeMirrorMode(e);const t=this.code.element.selectionStart,n=this.code.element.selectionEnd,s=this.code.element.value,r=this.code.focussed(),o=new e(this.code.element.parentNode,{extraKeys:{"Cmd-/":e=>e.toggleComment({padding:""}),"Cmd-Enter":"autocomplete","Ctrl-/":e=>e.toggleComment({padding:""}),"Ctrl-Enter":"autocomplete","Ctrl-Space":"autocomplete","Shift-Tab":e=>e.execCommand("indentLess"),Tab:e=>e.execCommand("indentMore")},globals:{themes:this.diagram.getThemeNames()},lineNumbers:!0,mode:"sequence",showTrailingSpace:!0,value:s});this.code.detach(),o.getDoc().setSelection(i(s,t),i(s,n));let l=0;o.on("keydown",(e,t)=>{l=t.keyCode}),o.on("change",(t,i)=>{if(this.update(!1),"+input"===i.origin){if(13===l)return void(l=0)}else if("complete"!==i.origin)return;e.commands.autocomplete(t,null,{completeSingle:!1})}),o.on("cursorActivity",()=>{const e=o.getCursor("from").line,t=o.getCursor("to").line;this.diagram.setHighlight(Math.min(e,t))}),r&&o.focus(),this.code=o})}}({defaultCode:'title Labyrinth\n\nBowie -> Goblin: You remind me of the babe\nGoblin -> Bowie: What babe?\nBowie -> Goblin: The babe with the power\nGoblin -> Bowie: What power?\nnote right of Bowie, Goblin: Most people get muddled here!\nBowie -> Goblin: "The power of voodoo"\nGoblin -> Bowie: "Who-do?"\nBowie -> Goblin: You do!\nGoblin -> Bowie: Do what?\nBowie -> Goblin: Remind me of the babe!\n\nBowie -> Audience: Sings\n\nterminators box\n',library:r,links:g,localStorage:"src",require:u,sequenceDiagram:new c});e.parentNode.removeChild(e),p.build(window.document.body)})}();
\ No newline at end of file
+!function(){"use strict";function e(e){return null===e?null:e.element?e.element:e}function t(e){return e.length>0&&"\n"!==e.charAt(e.length-1)?e+"\n":e}function i(e,t){let i=0,n=0;for(;;){const s=e.indexOf("\n",i)+1;if(t<s||0===s)return{ch:t-i,line:n};i=s,++n}}function n(e,t){const i=e.toString(),n=i.indexOf(".");return-1===n||i.length-n-1<=t?i:e.toFixed(t)}function s(e,t,i){e(["split"],e=>{const n=t[0].parentNode,s=n.addEventListener,r=n.removeEventListener;n.addEventListener=((e,t)=>{"mousemove"===e||"touchmove"===e?window.addEventListener(e,t,{passive:!0}):s.call(n,e,t)}),n.removeEventListener=((e,t)=>{"mousemove"===e||"touchmove"===e?window.removeEventListener(e,t):r.call(n,e,t)});let o=null;const l=Object.assign({cursor:"vertical"===i.direction?"row-resize":"col-resize",direction:"vertical",gutterSize:0,onDragEnd:()=>{document.body.style.cursor=o,o=null},onDragStart:()=>{o=document.body.style.cursor,document.body.style.cursor=l.cursor}},i);return new e(t,l)})}var r=[{code:"{Agent1} -> {Agent2}: {Message}",title:"Simple arrow (synchronous)"},{code:"{Agent1} --\x3e {Agent2}: {Message}",title:"Arrow with dotted line (response)"},{code:"{Agent1} ->> {Agent2}: {Message}",title:"Open arrow (asynchronous)"},{code:"{Agent1} -x {Agent2}: {Message}",title:"Lost message"},{code:"{Agent1} ~> {Agent2}: {Message}",title:"Wavy line"},{code:"{Agent1} -> {Agent1}: {Message}",title:"Self-connection"},{code:"{Agent1} -> ...{id}\n...{id} -> {Agent2}: {Message}",preview:"begin A, B\nA -> ...x\n...x -> B: Message",title:"Asynchronous message"},{code:"* -> {Agent1}: {Message}",title:"Found message"},{code:"{Agent1} -> {Agent2}\n& {Agent1} -> {Agent3}: {Broadcast}",title:"Broadcast message"},{code:"{Agent1} -> +{Agent2}: {Request}\n{Agent1} <-- -{Agent2}: {Response}",title:"Request/response pair"},{code:"{Agent1} -> *{Agent2}: {Request}\n{Agent1} <-- !{Agent2}: {Response}",title:"Inline agent creation / destruction"},{code:"{Agent1} -> {Agent2}: {Request}\n{Agent1} <-- {Agent2}: {Response}\nend {Agent2}",preview:"begin A\n::\nA -> B: Request\nA <-- B: Response\nend B",title:"Agent creation / destruction"},{code:'autolabel "[<inc>] <label>"',preview:'autolabel "[<inc>] <label>"\nA -> B: Foo\nA <- B: Bar\nA -> B: Baz',title:"Numbered labels"},{code:"if {Condition1}\n  {Agent1} -> {Agent2}\nelse if {Condition2}\n  {Agent1} -> {Agent2}\nelse\n  {Agent1} -> {Agent2}\nend",preview:"begin A, B\nif Condition1\n  A -> B\nelse if Condition2\n  A -> B\nelse\n  A -> B\nend",title:"Conditional blocks"},{code:"repeat {Condition}\n  {Agent1} -> {Agent2}\nend",preview:"begin A, B\nrepeat Condition\n  A -> B\nend",title:"Repeated block"},{code:"begin reference: {Label} as {Name}\n{Agent1} -> {Name}\nend {Name}",preview:'begin A\nbegin reference: "See 1.3" as myRef\nA -> myRef\nmyRef -> A\nend myRef',title:"Reference"},{code:"begin reference over {Covered}: {Label} as {Name}\n{Agent1} -> {Name}\nend {Name}",preview:'begin A, B, C\nbegin reference over B, C: "See 1.3" as myRef\nA -> myRef\nmyRef -> A\nend myRef',title:"Reference over agents"},{code:"group {Label}\n  {Agent1} -> {Agent2}\nend",preview:"begin A, B\ngroup Label\n  A -> B\nend",title:"Group"},{code:"note over {Agent1}: {Message}",title:"Note over agent"},{code:"note over {Agent1}, {Agent2}: {Message}",title:"Note over multiple agents"},{code:"note left of {Agent1}: {Message}",title:"Note left of agent"},{code:"note right of {Agent1}: {Message}",title:"Note right of agent"},{code:"note between {Agent1}, {Agent2}: {Message}",title:"Note between agents"},{code:"{Agent1} -> {Agent2}\n& note right of {Agent2}: {Message}",title:"Inline note"},{code:"state over {Agent1}: {State}",title:"State over agent"},{code:"[ -> {Agent1}: {Message1}\n{Agent1} -> ]: {Message2}",title:"Arrows to/from the sides"},{code:"text right: {Message}",preview:'A -> B\nsimultaneously:\ntext right: "Message\\non the\\nside"',title:"Text beside the diagram"},{code:"divider space with height 10: {message}",preview:"begin A, B, C, D, E, F\ndivider space with height 30: message",title:"Vertical space divider"},{code:"divider line with height 10: {message}",preview:"begin A, B, C, D, E, F\ndivider line with height 30: message",title:"Line divider"},{code:"divider delay with height 10: {message}",preview:"begin A, B, C, D, E, F\ndivider delay with height 30: message",title:"Delay divider"},{code:"divider tear with height 10: {message}",preview:"begin A, B, C, D, E, F\ndivider tear with height 30: message",title:"Tear divider"},{code:"title {Title}",preview:"headers box\ntitle Title\nA -> B",title:"Title"},{code:"**{text}**",preview:"A -> B: **bold**",title:"Bold markdown"},{code:"_{text}_",preview:"A -> B: _italic_",title:"Italic markdown"},{code:"~{text}~",preview:"A -> B: ~strikeout~",title:"Strikeout markdown"},{code:"<u>{text}</u>",preview:"A -> B: <u>underline</u>",title:"Underline markdown"},{code:"<o>{text}</o>",preview:"A -> B: <o>overline</o>",title:"Overline markdown"},{code:"<sup>{text}</sup>",preview:"A -> B: super<sup>script</sup>",title:"Superscript markdown"},{code:"<sub>{text}</sub>",preview:"A -> B: sub<sub>script</sub>",title:"Subscript markdown"},{code:"`{text}`",preview:"A -> B: `mono`",title:"Monospace markdown"},{code:"<red>{text}</red>",preview:"A -> B: <red>red</red>",title:"Red markdown"},{code:"<highlight>{text}</highlight>",preview:"A -> B: <highlight>highlight</highlight>",title:"Highlight markdown"},{code:"{Agent} is red",preview:"headers box\nA is red\nbegin A",title:"Red agent line"},{code:"{Agent} is a database",preview:"headers box\nA is a database\nbegin A",title:"Database indicator"},{code:"theme monospace",preview:"headers box\ntitle mono\ntheme monospace\nA -> B",title:"Monospace theme"},{code:"theme chunky",preview:"headers box\ntitle chunky\ntheme chunky\nA -> B",title:"Chunky theme"},{code:"theme sketch",preview:"headers box\ntitle sketch\ntheme sketch\nA -> B",title:"Sketch theme"},{code:"terminators cross",preview:"begin A\nterminators cross",title:"Cross terminators"},{code:"terminators fade",preview:"begin A\nterminators fade",title:"Fade terminators"},{code:"terminators bar",preview:"begin A\nterminators bar",title:"Bar terminators"},{code:"terminators box",preview:"begin A\nterminators box",title:"Box terminators"}];class o{constructor(e){this.element=e}addBefore(t=null,i=null){if(null===t)return this;if(Array.isArray(t))for(const e of t)this.addBefore(e,i);else{const n=function(e,t){return"string"==typeof e?t.createTextNode(e):"number"==typeof e?t.createTextNode(e.toString(10)):"object"==typeof e&&e.element?e.element:e}(t,this.element.ownerDocument);this.element.insertBefore(n,e(i))}return this}add(...e){return this.addBefore(e,null)}del(t=null){return null!==t&&this.element.removeChild(e(t)),this}attr(e,t){return this.element.setAttribute(e,t),this}attrs(e){for(const t in e)Object.prototype.hasOwnProperty.call(e,t)&&this.element.setAttribute(t,e[t]);return this}styles(e){for(const t in e)Object.prototype.hasOwnProperty.call(e,t)&&(this.element.style[t]=e[t]);return this}setClass(e){return this.attr("class",e)}addClass(e){const t=this.element.getAttribute("class");if(!t)return this.setClass(e);const i=t.split(" ");return i.includes(e)?this:(i.push(e),this.attr("class",i.join(" ")))}delClass(e){const t=this.element.getAttribute("class");if(!t)return this;const i=t.split(" "),n=i.indexOf(e);return-1!==n&&(i.splice(n,1),this.attr("class",i.join(" "))),this}text(e){return this.element.textContent=e,this}on(e,t,i={}){if(Array.isArray(e))for(const n of e)this.on(n,t,i);else this.element.addEventListener(e,t,i);return this}off(e,t,i={}){if(Array.isArray(e))for(const n of e)this.off(n,t,i);else this.element.removeEventListener(e,t,i);return this}val(e){return this.element.value=e,this}select(e,t=null){return this.element.selectionStart=e,this.element.selectionEnd=null===t?e:t,this}focus(){return this.element.focus(),this}focussed(){return this.element===this.element.ownerDocument.activeElement}empty(){for(;this.element.childNodes.length>0;)this.element.removeChild(this.element.lastChild);return this}attach(t){return e(t).appendChild(this.element),this}detach(){return this.element.parentNode&&this.element.parentNode.removeChild(this.element),this}}class l{constructor(e){if(!e)throw new Error("Missing document!");this.document=e,this.wrap=this.wrap.bind(this),this.el=this.el.bind(this),this.txt=this.txt.bind(this)}wrap(e){return e.element?e:new o(e)}el(e,t=null){let i=null;return i=null===t?this.document.createElement(e):this.document.createElementNS(t,e),new o(i)}txt(e=""){return this.document.createTextNode(e)}}const d=500,a=250,h=4;var c=window.SequenceDiagram;const u=window.requirejs,m={},g={},p=window.document.getElementsByTagName("meta");for(let e=0;e<p.length;++e){const t=p[e],i=t.getAttribute("name");if(i&&i.startsWith("cdn-")){const e=i.substr("cdn-".length);let n=t.getAttribute("content");n.endsWith(".mjs")?n=n.substr(0,n.length-".mjs".length):n.endsWith(".js")&&(n=n.substr(0,n.length-".js".length)),m[e]=n;const s=t.getAttribute("data-integrity");s&&(g[e]=s)}}u.config({hashes:g,onNodeCreated:(e,t,i)=>{t.hashes[i]&&(e.setAttribute("integrity",t.hashes[i]),e.setAttribute("crossorigin","anonymous"))},paths:m});window.addEventListener("load",()=>{const e=window.document.getElementById("loader"),[o]=e.getElementsByTagName("nav"),m=o.getElementsByTagName("a"),g=[];for(let e=0;e<m.length;++e)g.push({href:m[e].getAttribute("href"),label:m[e].textContent});const p=new class{constructor({sequenceDiagram:e,defaultCode:t="",localStorage:i="",library:n=[],links:s=[],require:r=null}){this.diagram=e,this.defaultCode=t,this.localStorage=i,this.library=n,this.links=s,this.minScale=1.5,this.require=r||(()=>null),this.debounced=null,this.latestSeq=null,this.renderedSeq=null,this.pngDirty=!0,this.updatingPNG=!1,this.marker=null,this._downloadSVGClick=this._downloadSVGClick.bind(this),this._downloadPNGClick=this._downloadPNGClick.bind(this),this._downloadPNGFocus=this._downloadPNGFocus.bind(this),this._downloadURLClick=this._downloadURLClick.bind(this),this._showDropStyle=this._showDropStyle.bind(this),this._hideDropStyle=this._hideDropStyle.bind(this),this.diagram.on("render",()=>{this.updateMinSize(this.diagram.getSize()),this.pngDirty=!0}).on("mouseover",e=>{this.marker&&this.marker.clear(),void 0!==e.ln&&this.code.markText&&(this.marker=this.code.markText({ch:0,line:e.ln},{ch:0,line:e.ln+1},{className:"hover",clearOnEnter:!0,inclusiveLeft:!1,inclusiveRight:!1}))}).on("mouseout",()=>{this.marker&&(this.marker.clear(),this.marker=null)}).on("click",e=>{this.marker&&(this.marker.clear(),this.marker=null),void 0!==e.ln&&this.code.setSelection&&(this.code.setSelection({ch:0,line:e.ln},{ch:0,line:e.ln+1},{bias:-1,origin:"+focus"}),this.code.focus()),this._hideURLBuilder()}).on("dblclick",e=>{this.diagram.toggleCollapsed(e.ln),this._hideURLBuilder()})}buildURLBuilder(){const e=this.dom.el("div").setClass("copied").add("Copied to Clipboard");this.urlOutput=this.dom.el("input").setClass("output").attr("readonly","readonly").on("focus",()=>{this.urlOutput.select(0,this.urlOutput.element.value.length)});const t=this.dom.el("button").setClass("copy").add("📋").attr("title","Copy to clipboard").on("click",()=>{this.urlOutput.focus().select(0,this.urlOutput.element.value.length).element.ownerDocument.execCommand("copy"),t.focus(),e.styles({display:"block",opacity:1,transition:"none"}),setTimeout(()=>e.styles({opacity:0,transition:"opacity 0.5s linear"}),1e3),setTimeout(()=>e.styles({display:"none"}),1500)});this.urlWidth=this.dom.el("input").attrs({min:0,placeholder:"auto",step:"any",type:"number"}).on("input",()=>{this.urlZoom.val("1"),this._refreshURL()}),this.urlHeight=this.dom.el("input").attrs({min:0,placeholder:"auto",step:"any",type:"number"}).on("input",()=>{this.urlZoom.val("1"),this._refreshURL()}),this.urlZoom=this.dom.el("input").attrs({min:0,step:"any",type:"number",value:1}).on("input",()=>{this.urlWidth.val(""),this.urlHeight.val(""),this._refreshURL()});const i=this.dom.el("div").setClass("config").add(this.dom.el("label").add("width ",this.urlWidth),", ",this.dom.el("label").add("height ",this.urlHeight),this.dom.el("span").setClass("or").add("or"),this.dom.el("label").add("zoom ",this.urlZoom),this.urlOutput,t,e);return this.urlBuilder=this.dom.el("div").setClass("urlbuilder").styles({display:"none"}).add(this.dom.el("div").setClass("message").add("Loading…")),this.renderService="",function(e){return"undefined"==typeof fetch?Promise.reject(new Error):fetch(e).then(e=>{if(!e.ok)throw new Error(e.statusText);return e})}("render/").then(e=>e.text()).then(e=>{let t=e.trim();t&&!t.startsWith("<svg")||(t="render/"),this.renderService=new URL(t,window.location.href).href,this.urlBuilder.empty().add(i),this._refreshURL()}).catch(()=>{this.urlBuilder.empty().add(this.dom.el("div").setClass("message").add("No online rendering service available."))}),this.urlBuilder}_refreshURL(){this.urlOutput.val(this.renderService+function(e,{height:t,width:i,zoom:s}){const r=e.split("\n").map(encodeURIComponent).filter(e=>""!==e).join("/");let o="";return Number.isNaN(i)&&Number.isNaN(t)?Number.isNaN(s)||1===s||(o+="z"+n(Math.max(s,0),4),o+="/"):(Number.isNaN(i)||(o+="w"+n(Math.max(i,0),4)),Number.isNaN(t)||(o+="h"+n(Math.max(t,0),4)),o+="/"),o+r+".svg"}(this.value(),{height:Number.parseFloat(this.urlHeight.element.value),width:Number.parseFloat(this.urlWidth.element.value),zoom:Number.parseFloat(this.urlZoom.element.value||"1")}))}_showURLBuilder(){this.builderVisible||(this.builderVisible=!0,this.urlBuilder.styles({display:"block",height:"0px",padding:"0px",width:this.optsHold.element.clientWidth+"px"}),clearTimeout(this.builderTm),this.builderTm=setTimeout(()=>{this.urlBuilder.styles({height:"150px",padding:"10px",width:"400px"}),this.optsHold.styles({"box-shadow":"10px 10px 25px 12px rgba(0,0,0,0.3)"})},0),this._refreshURL())}_hideURLBuilder(){this.builderVisible&&(this.builderVisible=!1,this.urlBuilder.styles({height:"0px",padding:"0px",width:"0px"}),this.optsHold.styles({"box-shadow":"none"}),clearTimeout(this.builderTm),this.builderTm=setTimeout(()=>{this.urlBuilder.styles({display:"none"})},200))}buildOptionsDownloads(){return this.downloadPNG=this.dom.el("a").text("Download PNG").attrs({download:"SequenceDiagram.png",href:"#"}).on(["focus","mouseover","mousedown"],this._downloadPNGFocus).on("click",this._downloadPNGClick),this.downloadSVG=this.dom.el("a").text("SVG").attrs({download:"SequenceDiagram.svg",href:"#"}).on("click",this._downloadSVGClick),this.downloadURL=this.dom.el("a").text("URL").attrs({href:"#"}).on("click",this._downloadURLClick),this.optsHold=this.dom.el("div").setClass("options downloads").add(this.downloadPNG,this.downloadSVG,this.downloadURL,this.buildURLBuilder()),this.optsHold}buildLibrary(e){const t=this.library.map(t=>{const i=this.dom.el("div").attr("title",t.title||t.code),n=this.dom.el("div").setClass("library-item").add(i).on("click",this.addCodeBlock.bind(this,t.code)).attach(e);return this.diagram.clone({code:function(e){return"headers fade\nterminators fade\n"+e.replace(/\{Agent([0-9]*)\}/g,(e,t)=>void 0===t?"A":String.fromCharCode("A".charCodeAt(0)+Number(t)-1)).replace(/[{}]/g,"")}(t.preview||t.code),container:i.element,render:!1}).on("error",(e,s)=>{window.console.warn("Failed to render preview",s),n.attr("class","library-item broken"),i.text(t.code)})});try{this.diagram.renderAll(t)}catch(e){}return e}buildViewPane(){return this.viewPaneInner=this.dom.el("div").setClass("pane-view-inner").add(this.diagram.dom()).on("click",()=>this._hideURLBuilder()),this.errorMsg=this.dom.el("div").setClass("msg-error"),this.dom.el("div").setClass("pane-view").add(this.dom.el("div").setClass("pane-view-scroller").add(this.viewPaneInner),this.errorMsg)}buildLeftPanes(){const e=this.dom.el("div").setClass("pane-side");this.code=this.dom.el("textarea").setClass("editor-simple").val(this.loadCode()||this.defaultCode).on("input",()=>this.update(!1));const t=this.dom.el("div").setClass("pane-code").add(this.code).attach(e);if(this.library.length>0){const i=this.dom.el("div").setClass("pane-library").add(this.dom.el("div").setClass("pane-library-scroller").add(this.buildLibrary(this.dom.el("div").setClass("pane-library-inner")))).attach(e);s(this.require,[t.element,i.element],{direction:"vertical",minSize:[100,5],sizes:[70,30],snapOffset:5})}return e}build(e){this.dom=new l(e.ownerDocument);const t=this.buildLeftPanes(),i=this.buildViewPane();this.container=this.dom.wrap(e).add(this.dom.el("div").setClass("pane-hold").add(t,i,this.dom.el("div").setClass("options links").add(this.links.map(e=>this.dom.el("a").attrs({href:e.href,target:"_blank"}).text(e.label))),this.buildOptionsDownloads())).on("dragover",e=>{e.preventDefault(),function(e,t){if(!e.dataTransfer.items&&0===e.dataTransfer.files.length)return[...e.dataTransfer.types].includes("Files");const i=e.dataTransfer.items||e.dataTransfer.files;return 1===i.length&&i[0].type===t}(e,"image/svg+xml")?(e.dataTransfer.dropEffect="copy",this._showDropStyle()):e.dataTransfer.dropEffect="none"}).on("dragleave",this._hideDropStyle).on("dragend",this._hideDropStyle).on("drop",e=>{e.preventDefault(),this._hideDropStyle();const t=function(e,t){const i=e.dataTransfer.items||e.dataTransfer.files;if(1!==i.length||i[0].type!==t)return null;const[n]=i;return n.getAsFile?n.getAsFile():n}(e,"image/svg+xml");t&&this.loadFile(t)}),s(this.require,[t.element,i.element],{direction:"horizontal",minSize:[10,10],sizes:[30,70],snapOffset:70}),"undefined"!=typeof window&&window.addEventListener("keydown",e=>{27===e.keyCode&&this._hideURLBuilder()}),setTimeout(this.update.bind(this),0),this._enhanceEditor()}addCodeBlock(e){const i=e.split("\n").length;if(this.code.getCursor){const n=this.code.getCursor("head"),s={ch:0,line:n.line+(n.ch>0?1:0)};this.code.replaceRange(t(e),s,null,"library"),this.code.setCursor({ch:0,line:s.line+i})}else{const i=this.value(),n=this.code.element.selectionStart,s=("\n"+i+"\n").indexOf("\n",n),r=t(i.substr(0,s))+t(e);this.code.val(r+i.substr(s)).select(r.length),this.update(!1)}this.code.focus()}updateMinSize({width:e,height:t}){this.viewPaneInner.styles({minHeight:Math.ceil(t*this.minScale)+"px",minWidth:Math.ceil(e*this.minScale)+"px"})}redrawDebounced(e,t){t<=0?this.redraw(e):(clearTimeout(this.debounced),this.latestSeq=e,this.debounced=setTimeout(()=>this.redraw(e),t))}redraw(e){clearTimeout(this.debounced),this.debounced=null,this.renderedSeq=e,this.diagram.render(e)}saveCode(e){if(this.localStorage)try{window.localStorage.setItem(this.localStorage,e)}catch(e){}}loadCode(){if(!this.localStorage)return"";try{return window.localStorage.getItem(this.localStorage)||""}catch(e){return""}}markError(e){"object"==typeof e&&e.message?this.errorMsg.text(e.message):this.errorMsg.text(e),this.errorMsg.addClass("error")}markOK(){this.errorMsg.text("").delClass("error")}value(){return this.code.getDoc?this.code.getDoc().getValue():this.code.element.value}setValue(e){if(this.code.getDoc){const t=this.code.getDoc();t.setValue(e),t.clearHistory()}else this.code.val(e);this.diagram.expandAll({render:!1}),this.update(!0),this.diagram.setHighlight(null)}loadFile(e){return function(e){return new Promise(t=>{const i=new FileReader;i.addEventListener("loadend",()=>{t(i.result)},{once:!0}),i.readAsText(e)})}(e).then(e=>{const t=this.diagram.extractCodeFromSVG(e);t&&this.setValue(t)})}update(e=!0){this._hideURLBuilder();const t=this.value();this.saveCode(t);let i=null;try{i=this.diagram.process(t)}catch(e){return void this.markError(e)}this.markOK();let n=0;if(!e&&this.renderedSeq){const e=this.renderedSeq;i.agents.length!==e.agents.length?n=d:i.stages.length!==e.stages.length&&(n=a)}this.redrawDebounced(i,n)}forceRender(){this.debounced&&(clearTimeout(this.debounced),this.redraw(this.latestSeq))}updatePNGLink(){return this.forceRender(),!(this.updatingPNG||!this.pngDirty||(this.pngDirty=!1,this.updatingPNG=!0,this.diagram.getPNG({resolution:h}).then(({url:e,latest:t})=>{t&&(this.downloadPNG.attr("href",e),this.updatingPNG=!1)}),0))}_showDropStyle(){this.container.addClass("drop-target")}_hideDropStyle(){this.container.delClass("drop-target")}_downloadPNGFocus(){this.updatePNGLink()}_downloadPNGClick(e){this.updatingPNG?e.preventDefault():this.updatePNGLink()&&e.preventDefault(),this._hideURLBuilder()}_downloadSVGClick(){this.forceRender();const e=this.diagram.getSVGSynchronous();this.downloadSVG.attr("href",e),this._hideURLBuilder()}_downloadURLClick(e){e.preventDefault(),this.builderVisible?this._hideURLBuilder():this._showURLBuilder()}_enhanceEditor(){this.require(["cm/lib/codemirror","cm/addon/hint/show-hint","cm/addon/edit/trailingspace","cm/addon/comment/comment"],e=>{this.diagram.registerCodeMirrorMode(e);const t=this.code.element.selectionStart,n=this.code.element.selectionEnd,s=this.code.element.value,r=this.code.focussed(),o=new e(this.code.element.parentNode,{extraKeys:{"Cmd-/":e=>e.toggleComment({padding:""}),"Cmd-Enter":"autocomplete","Ctrl-/":e=>e.toggleComment({padding:""}),"Ctrl-Enter":"autocomplete","Ctrl-Space":"autocomplete","Shift-Tab":e=>e.execCommand("indentLess"),Tab:e=>e.execCommand("indentMore")},globals:{themes:this.diagram.getThemeNames()},lineNumbers:!0,mode:"sequence",showTrailingSpace:!0,value:s});this.code.detach(),o.getDoc().setSelection(i(s,t),i(s,n));let l=0;o.on("keydown",(e,t)=>{l=t.keyCode}),o.on("change",(t,i)=>{if(this.update(!1),"+input"===i.origin){if(13===l)return void(l=0)}else if("complete"!==i.origin)return;e.commands.autocomplete(t,null,{completeSingle:!1})}),o.on("cursorActivity",()=>{const e=o.getCursor("from").line,t=o.getCursor("to").line;this.diagram.setHighlight(Math.min(e,t))}),r&&o.focus(),this.code=o})}}({defaultCode:'title Labyrinth\n\nBowie -> Goblin: You remind me of the babe\nGoblin -> Bowie: What babe?\nBowie -> Goblin: The babe with the power\nGoblin -> Bowie: What power?\nnote right of Bowie, Goblin: Most people get muddled here!\nBowie -> Goblin: "The power of voodoo"\nGoblin -> Bowie: "Who-do?"\nBowie -> Goblin: You do!\nGoblin -> Bowie: Do what?\nBowie -> Goblin: Remind me of the babe!\n\nBowie -> Audience: Sings\n\nterminators box\n',library:r,links:g,localStorage:"src",require:u,sequenceDiagram:new c});e.parentNode.removeChild(e),p.build(window.document.body)})}();
\ No newline at end of file
diff --git a/web/scripts/interface/ComponentsLibrary.mjs b/web/scripts/interface/ComponentsLibrary.mjs
index b603ab8..3567f56 100644
--- a/web/scripts/interface/ComponentsLibrary.mjs
+++ b/web/scripts/interface/ComponentsLibrary.mjs
@@ -258,6 +258,26 @@ export default [
 		preview: 'A -> B: ~strikeout~',
 		title: 'Strikeout markdown',
 	},
+	{
+		code: '<u>{text}</u>',
+		preview: 'A -> B: <u>underline</u>',
+		title: 'Underline markdown',
+	},
+	{
+		code: '<o>{text}</o>',
+		preview: 'A -> B: <o>overline</o>',
+		title: 'Overline markdown',
+	},
+	{
+		code: '<sup>{text}</sup>',
+		preview: 'A -> B: super<sup>script</sup>',
+		title: 'Superscript markdown',
+	},
+	{
+		code: '<sub>{text}</sub>',
+		preview: 'A -> B: sub<sub>script</sub>',
+		title: 'Subscript markdown',
+	},
 	{
 		code: '`{text}`',
 		preview: 'A -> B: `mono`',