From 816206ed334dc826e27b8b2cab5fb9bc961e5c43 Mon Sep 17 00:00:00 2001 From: David Evans Date: Sun, 22 Apr 2018 19:17:31 +0100 Subject: [PATCH] Improve consistency of SVGs generated, and fix non-BMP unicode exports from VirtualDocument --- editor-dev.htm | 2 +- index.html | 2 +- lib/sequence-diagram-web.js | 23 ++++++++---- lib/sequence-diagram-web.min.js | 2 +- lib/sequence-diagram.js | 35 +++++++++++++------ library.htm | 2 +- readme-images.htm | 2 +- scripts/core/documents/VirtualDocument.mjs | 12 +++++-- .../core/documents/VirtualDocument_spec.mjs | 11 ++++-- scripts/sequence/parser/MarkdownParser.mjs | 19 +++++++--- .../sequence/parser/MarkdownParser_spec.mjs | 27 ++++++++++++++ scripts/sequence/themes/Sketch.mjs | 4 +-- scripts/svg/SVGTextBlock_spec.mjs | 10 ++++++ 13 files changed, 117 insertions(+), 34 deletions(-) diff --git a/editor-dev.htm b/editor-dev.htm index 73a1d41..1b7f633 100644 --- a/editor-dev.htm +++ b/editor-dev.htm @@ -7,7 +7,7 @@ script-src 'self' https://cdnjs.cloudflare.com https://unpkg.com; style-src 'self' https://cdnjs.cloudflare.com - 'sha256-ru2GY2rXeOf7PQX5LzK3ckNo21FCDUoRc2f3i0QcD1g=' + 'sha256-s7UPtBgvov5WNF9C1DlTZDpqwLgEmfiWha5a5p/Zn7E=' ; font-src 'self' data:; img-src 'self' blob:; diff --git a/index.html b/index.html index a039543..edfb9d6 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ script-src 'self' https://cdnjs.cloudflare.com https://unpkg.com; style-src 'self' https://cdnjs.cloudflare.com - 'sha256-ru2GY2rXeOf7PQX5LzK3ckNo21FCDUoRc2f3i0QcD1g=' + 'sha256-s7UPtBgvov5WNF9C1DlTZDpqwLgEmfiWha5a5p/Zn7E=' ; font-src 'self' data:; img-src 'self' blob:; diff --git a/lib/sequence-diagram-web.js b/lib/sequence-diagram-web.js index 7b4f0d6..d561beb 100644 --- a/lib/sequence-diagram-web.js +++ b/lib/sequence-diagram-web.js @@ -4022,6 +4022,14 @@ return attrs; } + function shrinkWhitespace(text) { + return text.replace(/[\f\n\r\t\v ]+/g, ' '); + } + + function trimCollapsible(text) { + return text.replace(/^[\f\n\r\t\v ]+|[\f\n\r\t\v ]+$/g, ''); + } + function parseMarkdown(text) { if(!text) { return []; @@ -4030,13 +4038,14 @@ const active = STYLES.map(() => false); let activeCount = 0; let attrs = null; - const lines = text.split('\n'); + const lines = trimCollapsible(text).split('\n'); const result = []; lines.forEach((line) => { + const ln = shrinkWhitespace(trimCollapsible(line)); const parts = []; let p = 0; for(;;) { - const {styleIndex, start, end} = findNext(line, p, active); + const {styleIndex, start, end} = findNext(ln, p, active); if(styleIndex === -1) { break; } @@ -4048,13 +4057,13 @@ ++ activeCount; } if(start > p) { - parts.push({attrs, text: line.substring(p, start)}); + parts.push({attrs, text: ln.substring(p, start)}); } attrs = combineAttrs(activeCount, active); p = end; } - if(p < line.length) { - parts.push({attrs, text: line.substr(p)}); + if(p < ln.length) { + parts.push({attrs, text: ln.substr(p)}); } result.push(parts); }); @@ -8456,7 +8465,7 @@ /* eslint-disable max-lines */ const FONT$3 = Handlee.name; - const FONT_FAMILY = '\'' + FONT$3 + '\',cursive'; + const FONT_FAMILY = FONT$3 + ',cursive'; const LINE_HEIGHT$3 = 1.5; const MAX_CHAOS = 5; @@ -8824,7 +8833,7 @@ // Font must be embedded for exporting as SVG / PNG style.text( '@font-face{' + - 'font-family:"' + Handlee.name + '";' + + 'font-family:' + Handlee.name + ';' + 'src:url("data:font/woff2;base64,' + Handlee.woff2 + '");' + '}' ); diff --git a/lib/sequence-diagram-web.min.js b/lib/sequence-diagram-web.min.js index 9cbf5a0..92a233e 100644 --- a/lib/sequence-diagram-web.min.js +++ b/lib/sequence-diagram-web.min.js @@ -1 +1 @@ -!function(){"use strict";function t(t,e,n=null){if(null===n)return t.indexOf(e);for(let s=0;s=t.length)return void s.push(n.slice());const r=t[e];if(!Array.isArray(r))return n.push(r),i(t,e+1,n,s),void n.pop();for(let a=0;a{n.push(...e(t))}),n}function o(t,e){const n=Ct[t.type];return!(!n||t.type!==e.type)&&!n.check.some(n=>t[n]!==e[n])}function h(t,n){Ct[t.type].merge.forEach(s=>{e(t[s],n[s])})}function l(t,e){for(let n=0;n{for(let s=0;st);return n.forEach(t=>{const s=Ct[t];s&&n.every(e=>t===e||s.siblings.has(e))&&e.add(t)}),e}function c(t,e,n,s){l(s,s=>{if(!t.has(s.type)||!e.has(s.type))return!1;for(let t=0;t{"agent begin"===t.type&&(t.mode=e,n=!0)}),n}return!1}function p(t,e,n,r=null){s(t,e,St.equals),s(t,n,St.equals);let i=0,a=t.length;if(r){const e=r.map(e=>St.indexOf(t,e)).filter(t=>-1!==t);i=e.reduce((t,e)=>Math.min(t,e),t.length),a=e.reduce((t,e)=>Math.max(t,e),i)+1}return t.splice(i,0,e),t.splice(a+1,0,n),{indexL:i,indexR:a+1}}function f(t,e=[]){return{type:"string",suggest:e,then:Object.assign({"":0},t)}}function m(t,e){return t.v===e.v&&t.prefix===e.prefix&&t.suffix===e.suffix&&t.q===e.q}function b(t,e,n){return a(n.suggest||[""],s=>{if("object"==typeof s)return s.known?t["known"+s.known]||[]:[s];if(""===s)return[function(t,e){return Object.keys(e.then).length>0?{q:!1,suffix:" ",v:t}:{q:!1,suffix:"\n",v:t}}(e,n)];if("string"==typeof s)return[{q:""===e,v:s}];throw new Error("Invalid suggestion type "+s)})}function y(t,n){const s=[],i=r(n);return Object.keys(i.then).forEach(r=>{let a=i.then[r];"number"==typeof a&&(a=n[n.length-a-1]),e(s,b(t,r,a),m)}),s}function x(t,n,s,r){const i=function(t){for(const e of t)if("object"==typeof e&&e.known)return e.known;return null}(r.suggest||[""]);n.type&&i!==n.type&&(!function(t,n,s){e(t["known"+n],[{q:!0,suffix:" ",v:s}],m)}(t,r.override||n.type,n.value),n.value=""),i&&(n.value=function(t,e){return t+(t?e.s:"")+e.v}(n.value,s)),n.type=i}function k(t,e,n){const s={type:"",value:""};let i=n;const a=[i];return t.line.forEach((e,n)=>{n===t.line.length-1&&(t.completions=y(t,a));const o=e.q?"":e.v;let h=i.then[o];void 0===h?(h=i.then[""],t.isVar=!0):t.isVar=e.q,"number"==typeof h?a.length-=h:a.push(h||zt),i=r(a),x(t,s,e,i)}),e&&x(t,s,null,{}),t.nextCompletions=y(t,a),t.valid=Boolean(i.then["\n"])||0===Object.keys(i.then).length,i.type}function w(t){const e=t.baseToken||{};return{quoted:e.q||!1,value:e.v||""}}function v(t,e,n){return e.lastIndex=n,e.exec(t)}function A(t,e,n){return n?function(t,e,n){if(n.escape){const s=v(t,n.escape,e);if(s)return{appendSpace:"",appendValue:n.escapeWith(s),end:!1,newBlock:null,skip:s[0].length}}const s=v(t,n.end,e);return s?{appendSpace:"",appendValue:n.includeEnd?s[0]:"",end:!0,newBlock:null,skip:s[0].length}:{appendSpace:"",appendValue:t[e],end:!1,newBlock:null,skip:1}}(t,e,n):function(t,e){for(let n=0;n"}function R(t,e,n){const s=" "+t+" ";let r=-1,i=s.length,a=0;return Ut.forEach(({begin:t,end:o},h)=>{const l=n[h]?o:t;l.lastIndex=e;const d=l.exec(s);d&&(d.indexa)&&(r=h,i=d.index,a=l.lastIndex)}),{end:a-1,start:i,styleIndex:r}}function C(t,e){if(!t)return null;const n={};return e.forEach((t,e)=>{t&&Object.assign(n,Ut[e].attrs)}),n}function I(t){if(!t)return[];const e=Ut.map(()=>!1);let n=0,s=null;const r=[];return t.split("\n").forEach(t=>{const i=[];let a=0;for(;;){const{styleIndex:r,start:o,end:h}=R(t,a,e);if(-1===r)break;e[r]?(e[r]=!1,--n):(e[r]=!0,++n),o>a&&i.push({attrs:s,text:t.substring(a,o)}),s=C(n,e),a=h}a=a&&!i){let n=t[e];throw n||(n={b:r(t).e}),E("Missing agent name",n)}return{name:D(t,e,a),alias:D(t,a+1,n)}}(t,h,n,{enableAlias:i,allowBlankName:l});return{name:d,alias:g,flags:d?a:o}}function B(t,e,n,s){const r=[];let i=-1;for(let a=e;a{const r=t.get(e);(null===n||r.indexs.index)&&(s=r)}),{left:n.id,right:s.id}}function j(t=null,e=null){return null===t?e:null===e?t:Math.max(t,e)}function q(t,n){return e(t.agentIDs,n.agentIDs),{agentIDs:t.agentIDs,asynchronousY:j(t.asynchronousY,n.asynchronousY),topShift:Math.max(t.topShift,n.topShift),y:j(t.y,n.y)}}function Y(t){return null===t?null:t.element?t.element:t}function U(t,e,n){if(!Array.isArray(n))throw new Error("Invalid formatted text line: "+n);n.forEach(({text:n,attrs:s})=>{s?e.add(t.el("tspan").attrs(s).add(n)):e.add(n)})}function W(t,e){let n=null,s=null;return e.forEach(e=>{const r=t.get(e);(null===n||r.indexs.index)&&(s=r)}),{left:n.id,right:s.id}}function X(t,e){return t.v===e.v&&t.prefix===e.prefix&&t.suffix===e.suffix&&t.q===e.q}function Q(t,e,n){const s=t.getLine(e),r={squash:{ch:n,line:e},word:{ch:n,line:e}};return n>0&&" "===s[n-1]&&(nn.after.includes(s[n-2])&&r.word.ch--,r.squash.ch--),r}function J(t,e,n){const s=function({v:t,q:e,prefix:n="",suffix:s=""},r){const i=r||!rn.test(t)?r:'"';return n+(i&&e?i+t.replace(an,"\\$&")+i:t)+s}(t,n),r=t.q?e.fromVar:e.fromKey;return"\n"===s?{className:"pick-virtual",displayFrom:null,displayText:"",from:r.squash,text:"\n",to:e.to.squash}:{className:null,displayFrom:r.word,displayText:s.trim(),from:nn.start.test(s)?r.squash:r.word,text:s,to:nn.end.test(s)?e.to.squash:e.to.word}}function Z({global:t,prefix:e="",suffix:n=""},s){const r=s[t];return r?r.map(t=>({prefix:e,q:!0,suffix:n,v:t})):[]}function K(t,n,s){let r=null;return r=t.ch>0&&n.state.line.length>0?n.state.completions.slice():n.state.beginCompletions.concat(n.state.knownAgent),function(t,n={}){for(let s=0;s=e.ch){n.length=t+1;break}return n}(t,n),i=r(s)||t.getTokenAt(n),a=function(t,e){let n="",s=0,r=0;t.forEach(t=>{t.state.isVar?(n+=t.string,r=t.end):(n="",s=t.end)}),r>e.ch&&(n=n.substr(0,e.ch-s));const i=en.exec(n);n=i[2];let a="";return sn.test(n)&&(a=n.charAt(0),n=n.substr(1)),{from:s+i[1].length,partial:n,quote:a,valid:r>=s}}(s,n),o=function(t,e){let n=t.string;t.end>e.ch&&(n=n.substr(0,e.ch-t.start));const s=en.exec(n);return{from:t.start+s[1].length,partial:s[2],valid:!0}}(i,n),h=K(n,i,t.options.globals),l={fromKey:Q(t,n.line,o.from),fromVar:Q(t,n.line,a.from),to:function(t,e,n){const s={squash:{ch:n,line:e},word:{ch:n,line:e}};return" "===t.getLine(e)[n]&&s.squash.ch++,s}(t,n.line,i.end)};let d=null;const g=h.filter(t=>(t.q||!a.quote)&&function(t,e){return e.valid&&t.startsWith(e.partial)}(t.v,t.q?a:o)).map(t=>e.completeSingle||t.v!==(t.q?a:o).partial?J(t,l,a.quote):(d=t,null)).filter(t=>null!==t);return d&&g.length>0&&g.unshift(J(d,l,a.quote)),{from:function(t,e){let n=null;return t.forEach(({displayFrom:t})=>{t&&(!n||t.line>n.line||t.line===n.line&&t.ch>n.ch)&&(n=t)}),n||e.word}(g,l.fromKey),list:g,to:l.to.word}}function $(t,e="sequence"){const n=t||window.CodeMirror;n.defineMode(e,()=>dn),n.registerHelper("hint",e,_)}function tt(t){const e=(new DOMParser).parseFromString(t,"image/svg+xml").querySelector("metadata");return e?e.textContent:""}function et(t){function e(t,e){n.push(e)}const n=[];if(t.forEach(t=>{t.addEventListener("error",e),t.optimisedRenderPreReflow()}),t.forEach(t=>{t.optimisedRenderReflow()}),t.forEach(t=>{t.optimisedRenderPostReflow(),t.removeEventListener("error",e)}),n.length>0)throw n}function nt(t,e=null,n={}){if("svg"===t.tagName)return null;const s=function(t){return{interactive:function(t){return void 0!==t&&"false"!==t}(t.dataset.sdInteractive),namespace:t.dataset.sdNamespace||null}}(t),r=new gn(null===e?t.textContent:e,Object.assign(s,n)),i=r.dom(),a=t.attributes;for(let t=0;tnt(t,s,e));return!1!==r.render&&et(n),n}return nt(t,s,r)}class rt{constructor(t,e){Array.isArray(e)?this.deltas=e:this.deltas=[0,2*-e/3,-e,2*-e/3,0,2*e/3,e,2*e/3],this.partWidth=t/this.deltas.length}getDelta(t){return this.deltas[t%this.deltas.length]}}class it{constructor(t){this.svg=t}reset(){}addDefs(){}getBlock(t){return this.blocks[t]||this.blocks[""]}getNote(t){return this.notes[t]||this.notes[""]}getDivider(t){return this.dividers[t]||this.dividers[""]}optionsAttributes(t,e){return function(t,e){const n=Object.assign({},t[""]);return e.forEach(e=>{Object.assign(n,t[e]||{})}),n}(t,e)}renderAgentLine({className:t,options:e,width:n,x:s,y0:r,y1:i}){const a=this.optionsAttributes(this.agentLineAttrs,e);return n>0?this.svg.box(a,{height:i-r,width:n,x:s-n/2,y:r}).addClass(t):this.svg.line(a,{x1:s,x2:s,y1:r,y2:i}).addClass(t)}renderArrowHead(t,{dir:e,height:n,width:s,x:r,y:i}){const a=s*e.dx,o=s*e.dy,h=.5*n*e.dx,l=.5*-n*e.dy;return this.svg.el("none"===t.fill?"polyline":"polygon").attr("points",r+a-l+" "+(i+o-h)+" "+r+" "+i+" "+(r+a+l)+" "+(i+o+h)).attrs(t)}renderTag(t,{height:e,width:n,x:s,y:r}){const{rx:i,ry:a}=t,o=s+n,h=r+e,l="M"+o+" "+r+"L"+o+" "+(h-a)+"L"+(o-i)+" "+h+"L"+s+" "+h,d=this.svg.el("g");return"none"!==t.fill&&d.add(this.svg.el("path").attr("d",l+"L"+s+" "+r).attrs(t).attr("stroke","none")),"none"!==t.stroke&&d.add(this.svg.el("path").attr("d",l).attrs(t).attr("fill","none")),d}renderDB(t,e){const n=t["db-z"];return this.svg.el("g").add(this.svg.box({rx:e.width/2,ry:n},e).attrs(t),this.svg.el("path").attr("d","M"+e.x+" "+(e.y+n)+"a"+e.width/2+" "+n+" 0 0 0 "+e.width+" 0").attrs(t).attr("fill","none"))}renderRef(t,e){return{fill:this.svg.box(t,e).attrs({stroke:"none"}),mask:this.svg.box(t,e).attrs({fill:"#000000",stroke:"none"}),shape:this.svg.box(t,e).attrs({fill:"none"})}}renderFlatConnect(t,e,{x1:n,y1:s,x2:r,y2:i}){return{p1:{x:n,y:s},p2:{x:r,y:i},shape:this.svg.el("path").attr("d",this.svg.patternedLine(t).move(n,s).line(r,i).cap().asPath()).attrs(e)}}renderRevConnect(t,e,{rad:n,x1:s,x2:r,xR:i,y1:a,y2:o}){const h=(o-a)/2,l=this.svg.patternedLine(t).move(s,a).line(i,a);return n0?this.svg.el("g").add(this.svg.line({fill:"none"},{x1:r,x2:r+(s-n)/2,y1:o,y2:o}).attrs(t),this.svg.line({fill:"none"},{x1:r+(s+n)/2,x2:r+s,y1:o,y2:o}).attrs(t)):this.svg.line({fill:"none"},{x1:r,x2:r+s,y1:o,y2:o}).attrs(t),{shape:a}}renderDelayDivider({dotSize:t,gapSize:e},{height:n,width:s,x:r,y:i}){const a=this.svg.el("g");for(let o=0;o+e<=n;o+=t+e)a.add(this.svg.box({fill:"#000000"},{height:e,width:s,x:r,y:i+o}));return{mask:a}}renderTearDivider({fadeBegin:t,fadeSize:e,lineAttrs:n,pattern:s,zigHeight:r,zigWidth:i},{env:a,height:o,labelHeight:h,labelWidth:l,width:d,x:g,y:c}){const u=a.addDef("tear-grad",()=>{const n=100/d;return this.svg.linearGradient({},[{offset:t*n+"%","stop-color":"#000000"},{offset:(t+e)*n+"%","stop-color":"#FFFFFF"},{offset:100-(t+e)*n+"%","stop-color":"#FFFFFF"},{offset:100-t*n+"%","stop-color":"#000000"}])}),p=this.svg.el("mask").attr("maskUnits","userSpaceOnUse").add(this.svg.box({fill:"url(#"+u+")"},{height:o+10,width:d,x:g,y:c-5})),f=a.addDef(p);l>0&&p.add(this.svg.box({fill:"#000000",rx:2,ry:2},{height:h+2,width:l,x:g+(d-l)/2,y:c+(o-h)/2-1}));const m=s||new rt(i,[r,-r]);let b=null;const y=this.svg.patternedLine(m).move(g,c).line(g+d,c),x=this.svg.el("g").attr("mask","url(#"+f+")").add(this.svg.el("path").attrs({d:y.asPath(),fill:"none"}).attrs(n));if(o>0){const t=this.svg.patternedLine(m).move(g,c+o).line(g+d,c+o);x.add(this.svg.el("path").attrs({d:t.asPath(),fill:"none"}).attrs(n)),y.line(t.x,t.y,{patterned:!1}).cap(),y.points.push(...t.points.reverse()),b=this.svg.el("path").attrs({d:y.asPath(),fill:"#000000"})}return{mask:b,shape:x}}}const at="sans-serif",ot=new rt(6,.5),ht={"font-family":at,"font-size":8,"line-height":1.3},lt={"font-family":at,"font-size":8,"line-height":1.3,"text-anchor":"middle"};class dt extends it{constructor(t){super(t);const e={padding:{top:3,bottom:2},tag:{padding:{top:1,left:3,right:3,bottom:0},boxRenderer:this.renderTag.bind(this,{fill:"#FFFFFF",stroke:"#000000","stroke-width":1,rx:2,ry:2}),labelAttrs:{"font-family":at,"font-weight":"bold","font-size":9,"line-height":1.3,"text-anchor":"left"}},label:{minHeight:4,padding:{top:1,left:5,right:3,bottom:1},labelAttrs:{"font-family":at,"font-size":8,"line-height":1.3,"text-anchor":"left"}}};Object.assign(this,{titleMargin:10,outerMargin:5,agentMargin:10,actionMargin:10,minActionMargin:3,agentLineHighlightRadius:4,agentCap:{box:{padding:{top:5,left:10,right:10,bottom:5},arrowBottom:12.8,boxAttrs:{fill:"#FFFFFF",stroke:"#000000","stroke-width":1},labelAttrs:{"font-family":at,"font-size":12,"line-height":1.3,"text-anchor":"middle"}},database:{padding:{top:12,left:10,right:10,bottom:3},arrowBottom:12.8,boxRenderer:this.renderDB.bind(this,{fill:"#FFFFFF",stroke:"#000000","stroke-width":1,"db-z":5}),labelAttrs:{"font-family":at,"font-size":12,"line-height":1.3,"text-anchor":"middle"}},cross:{size:20,render:t.crossFactory({fill:"none",stroke:"#000000","stroke-width":1})},bar:{height:4,render:t.boxFactory({fill:"#000000",stroke:"#000000","stroke-width":1})},fade:{width:5,height:6,extend:1},none:{height:10}},connect:{loopbackRadius:6,line:{solid:{attrs:{fill:"none",stroke:"#000000","stroke-width":1},renderFlat:this.renderFlatConnect.bind(this,null),renderRev:this.renderRevConnect.bind(this,null)},dash:{attrs:{fill:"none",stroke:"#000000","stroke-width":1,"stroke-dasharray":"4, 2"},renderFlat:this.renderFlatConnect.bind(this,null),renderRev:this.renderRevConnect.bind(this,null)},wave:{attrs:{fill:"none",stroke:"#000000","stroke-width":1,"stroke-linejoin":"round","stroke-linecap":"round"},renderFlat:this.renderFlatConnect.bind(this,ot),renderRev:this.renderRevConnect.bind(this,ot)}},arrow:{single:{width:5,height:10,render:this.renderArrowHead.bind(this),attrs:{fill:"#000000","stroke-width":0,"stroke-linejoin":"miter"}},double:{width:4,height:6,render:this.renderArrowHead.bind(this),attrs:{fill:"none",stroke:"#000000","stroke-width":1,"stroke-linejoin":"miter"}},cross:{short:7,radius:3,render:t.crossFactory({fill:"none",stroke:"#000000","stroke-width":1})}},label:{padding:6,margin:{top:2,bottom:1},attrs:{"font-family":at,"font-size":8,"line-height":1.3,"text-anchor":"middle"},loopbackAttrs:{"font-family":at,"font-size":8,"line-height":1.3}},source:{radius:2,render:t.circleFactory({fill:"#000000",stroke:"#000000","stroke-width":1})},mask:{padding:{top:0,left:3,right:3,bottom:1}}},titleAttrs:{"font-family":at,"font-size":20,"line-height":1.3,"text-anchor":"middle",class:"title"},agentLineAttrs:{"":{fill:"none",stroke:"#000000","stroke-width":1},red:{stroke:"#CC0000"}},blocks:{ref:{margin:{top:0,bottom:0},boxRenderer:this.renderRef.bind(this,{fill:"#FFFFFF",stroke:"#000000","stroke-width":1.5,rx:2,ry:2}),section:e},"":{margin:{top:0,bottom:0},boxRenderer:t.boxFactory({fill:"none",stroke:"#000000","stroke-width":1.5,rx:2,ry:2}),collapsedBoxRenderer:this.renderRef.bind(this,{fill:"#FFFFFF",stroke:"#000000","stroke-width":1.5,rx:2,ry:2}),section:e,sepRenderer:t.lineFactory({stroke:"#000000","stroke-width":1.5,"stroke-dasharray":"4, 2"})}},notes:{text:{margin:{top:0,left:2,right:2,bottom:0},padding:{top:2,left:2,right:2,bottom:2},overlap:{left:10,right:10},boxRenderer:t.boxFactory({fill:"#FFFFFF"}),labelAttrs:ht},note:{margin:{top:0,left:5,right:5,bottom:0},padding:{top:5,left:5,right:10,bottom:5},overlap:{left:10,right:10},boxRenderer:t.noteFactory({fill:"#FFFFFF",stroke:"#000000","stroke-width":1},{fill:"none",stroke:"#000000","stroke-width":1}),labelAttrs:ht},state:{margin:{top:0,left:5,right:5,bottom:0},padding:{top:7,left:7,right:7,bottom:7},overlap:{left:10,right:10},boxRenderer:t.boxFactory({fill:"#FFFFFF",stroke:"#000000","stroke-width":1,rx:10,ry:10}),labelAttrs:ht}},dividers:{"":{labelAttrs:lt,padding:{top:2,left:5,right:5,bottom:2},extend:0,margin:0,render:()=>({})},line:{labelAttrs:lt,padding:{top:2,left:5,right:5,bottom:2},extend:10,margin:0,render:this.renderLineDivider.bind(this,{lineAttrs:{stroke:"#000000"}})},delay:{labelAttrs:lt,padding:{top:2,left:5,right:5,bottom:2},extend:0,margin:0,render:this.renderDelayDivider.bind(this,{dotSize:1,gapSize:2})},tear:{labelAttrs:lt,padding:{top:2,left:5,right:5,bottom:2},extend:10,margin:10,render:this.renderTearDivider.bind(this,{fadeBegin:5,fadeSize:10,zigWidth:6,zigHeight:1,lineAttrs:{stroke:"#000000"}})}}})}}class gt{constructor(){this.name="basic"}build(t){return new dt(t)}}const ct="sans-serif",ut=new rt(10,1),pt={"font-family":ct,"font-size":8,"line-height":1.3},ft={"font-family":ct,"font-size":8,"line-height":1.3,"text-anchor":"middle"};class mt extends it{constructor(t){super(t);const e={padding:{top:3,bottom:4},tag:{padding:{top:2,left:5,right:5,bottom:1},boxRenderer:this.renderTag.bind(this,{fill:"#FFFFFF",stroke:"#000000","stroke-width":2,rx:3,ry:3}),labelAttrs:{"font-family":ct,"font-weight":"bold","font-size":9,"line-height":1.3,"text-anchor":"left"}},label:{minHeight:5,padding:{top:2,left:5,right:3,bottom:1},labelAttrs:{"font-family":ct,"font-size":8,"line-height":1.3,"text-anchor":"left"}}};Object.assign(this,{titleMargin:12,outerMargin:5,agentMargin:8,actionMargin:5,minActionMargin:5,agentLineHighlightRadius:4,agentCap:{box:{padding:{top:1,left:3,right:3,bottom:1},arrowBottom:11.1,boxAttrs:{fill:"#FFFFFF",stroke:"#000000","stroke-width":3,rx:4,ry:4},labelAttrs:{"font-family":ct,"font-weight":"bold","font-size":14,"line-height":1.3,"text-anchor":"middle"}},database:{padding:{top:4,left:3,right:3,bottom:0},arrowBottom:11.1,boxRenderer:this.renderDB.bind(this,{fill:"#FFFFFF",stroke:"#000000","stroke-width":3,"db-z":2}),labelAttrs:{"font-family":ct,"font-weight":"bold","font-size":14,"line-height":1.3,"text-anchor":"middle"}},cross:{size:20,render:t.crossFactory({fill:"none",stroke:"#000000","stroke-width":3,"stroke-linecap":"round"})},bar:{height:4,render:t.boxFactory({fill:"#000000",stroke:"#000000","stroke-width":3,rx:2,ry:2})},fade:{width:5,height:10,extend:1},none:{height:10}},connect:{loopbackRadius:8,line:{solid:{attrs:{fill:"none",stroke:"#000000","stroke-width":3},renderFlat:this.renderFlatConnect.bind(this,null),renderRev:this.renderRevConnect.bind(this,null)},dash:{attrs:{fill:"none",stroke:"#000000","stroke-width":3,"stroke-dasharray":"10, 4"},renderFlat:this.renderFlatConnect.bind(this,null),renderRev:this.renderRevConnect.bind(this,null)},wave:{attrs:{fill:"none",stroke:"#000000","stroke-width":3,"stroke-linejoin":"round","stroke-linecap":"round"},renderFlat:this.renderFlatConnect.bind(this,ut),renderRev:this.renderRevConnect.bind(this,ut)}},arrow:{single:{width:10,height:12,render:this.renderArrowHead.bind(this),attrs:{fill:"#000000",stroke:"#000000","stroke-width":3,"stroke-linejoin":"round"}},double:{width:10,height:12,render:this.renderArrowHead.bind(this),attrs:{fill:"none",stroke:"#000000","stroke-width":3,"stroke-linejoin":"round","stroke-linecap":"round"}},cross:{short:10,radius:5,render:t.crossFactory({fill:"none",stroke:"#000000","stroke-width":3,"stroke-linejoin":"round","stroke-linecap":"round"})}},label:{padding:7,margin:{top:2,bottom:3},attrs:{"font-family":ct,"font-size":8,"line-height":1.3,"text-anchor":"middle"},loopbackAttrs:{"font-family":ct,"font-size":8,"line-height":1.3}},source:{radius:5,render:t.circleFactory({fill:"#000000",stroke:"#000000","stroke-width":3})},mask:{padding:{top:1,left:5,right:5,bottom:3}}},titleAttrs:{"font-family":ct,"font-weight":"bolder","font-size":20,"line-height":1.3,"text-anchor":"middle",class:"title"},agentLineAttrs:{"":{fill:"none",stroke:"#000000","stroke-width":3},red:{stroke:"#DD0000"}},blocks:{ref:{margin:{top:0,bottom:0},boxRenderer:this.renderRef.bind(this,{fill:"#FFFFFF",stroke:"#000000","stroke-width":4,rx:5,ry:5}),section:e},"":{margin:{top:0,bottom:0},boxRenderer:t.boxFactory({fill:"none",stroke:"#000000","stroke-width":4,rx:5,ry:5}),collapsedBoxRenderer:this.renderRef.bind(this,{fill:"#FFFFFF",stroke:"#000000","stroke-width":4,rx:5,ry:5}),section:e,sepRenderer:t.lineFactory({stroke:"#000000","stroke-width":2,"stroke-dasharray":"5, 3"})}},notes:{text:{margin:{top:0,left:2,right:2,bottom:0},padding:{top:2,left:2,right:2,bottom:2},overlap:{left:10,right:10},boxRenderer:t.boxFactory({fill:"#FFFFFF"}),labelAttrs:pt},note:{margin:{top:0,left:5,right:5,bottom:0},padding:{top:3,left:3,right:10,bottom:3},overlap:{left:10,right:10},boxRenderer:t.noteFactory({fill:"#FFFFFF",stroke:"#000000","stroke-width":2,"stroke-linejoin":"round"},{fill:"none",stroke:"#000000","stroke-width":1}),labelAttrs:pt},state:{margin:{top:0,left:5,right:5,bottom:0},padding:{top:5,left:7,right:7,bottom:5},overlap:{left:10,right:10},boxRenderer:t.boxFactory({fill:"#FFFFFF",stroke:"#000000","stroke-width":3,rx:10,ry:10}),labelAttrs:pt}},dividers:{"":{labelAttrs:ft,padding:{top:2,left:5,right:5,bottom:2},extend:0,margin:0,render:()=>({})},line:{labelAttrs:ft,padding:{top:2,left:5,right:5,bottom:2},extend:10,margin:0,render:this.renderLineDivider.bind(this,{lineAttrs:{stroke:"#000000","stroke-width":2,"stroke-linecap":"round"}})},delay:{labelAttrs:ft,padding:{top:2,left:5,right:5,bottom:2},extend:0,margin:0,render:this.renderDelayDivider.bind(this,{dotSize:3,gapSize:3})},tear:{labelAttrs:ft,padding:{top:2,left:5,right:5,bottom:2},extend:10,margin:10,render:this.renderTearDivider.bind(this,{fadeBegin:5,fadeSize:10,zigWidth:6,zigHeight:1,lineAttrs:{stroke:"#000000","stroke-width":2,"stroke-linejoin":"round"}})}}})}}class bt{constructor(){this.name="chunky"}build(t){return new mt(t)}}class yt{constructor(){this.listeners=new Map,this.forwards=new Set}addEventListener(t,e){const n=this.listeners.get(t);n?n.push(e):this.listeners.set(t,[e])}removeEventListener(t,e){const n=this.listeners.get(t);if(!n)return;const s=n.indexOf(e);-1!==s&&n.splice(s,1)}on(t,e){return this.addEventListener(t,e),this}off(t,e){return this.removeEventListener(t,e),this}countEventListeners(t){return(this.listeners.get(t)||[]).length}removeAllEventListeners(t){t?this.listeners.delete(t):this.listeners.clear()}addEventForwarding(t){this.forwards.add(t)}removeEventForwarding(t){this.forwards.delete(t)}removeAllEventForwardings(){this.forwards.clear()}trigger(t,e=[]){(this.listeners.get(t)||[]).forEach(t=>t(...e)),this.forwards.forEach(n=>n.trigger(t,e))}}const xt="undefined"==typeof window,kt=!xt&&/^((?!chrome|android).)*safari/i.test(window.navigator.userAgent),wt=!xt&&void 0!==window.InstallTrigger;class vt{constructor(){this.latestSVG=null,this.latestInternalSVG=null,this.canvas=null,this.context=null,this.indexPNG=0,this.latestPNGIndex=0,this.latestPNG=null}getSVGContent(t){let e=t.dom().outerHTML;return e=e.replace(/^{this.canvas.width=s,this.canvas.height=r,this.context.drawImage(i,0,0,s,r),a&&document.body.removeChild(a),n(this.canvas)};i.addEventListener("load",()=>{a?setTimeout(o,50):o()},{once:!0}),i.src=this.getSVGURL(t)}getPNGBlob(t,e,n){this.getCanvas(t,e,t=>{t.toBlob(n,"image/png")})}getPNGURL(t,e,n){++this.indexPNG;const s=this.indexPNG;this.getPNGBlob(t,e,t=>{const e=URL.createObjectURL(t);s>=this.latestPNGIndex?(this.latestPNG&&URL.revokeObjectURL(this.latestPNG),this.latestPNG=e,this.latestPNGIndex=s,n(e,!0)):(n(e,!1),URL.revokeObjectURL(e))})}}class At{constructor({visible:t=!1,locked:e=!1,blocked:n=!1,highlighted:s=!1,group:r=null,covered:i=!1}={}){this.visible=t,this.locked=e,this.blocked=n,this.highlighted=s,this.group=r,this.covered=i}}At.LOCKED=new At({locked:!0}),At.DEFAULT=new At;const Ft={equals:(t,e)=>t.name===e.name,hasFlag:(t,e=!0)=>n=>n.flags.includes(t)===e},St={addNearby:(e,n,s,r)=>{const i=t(e,n,St.equals);-1===i?e.push(s):e.splice(i+r,0,s)},equals:(t,e)=>t.id===e.id,hasIntersection:(e,n)=>(function(e,n,s=null){for(let r=0;rt(e,n,St.equals),make:(t,{anchorRight:e=!1,isVirtualSource:n=!1}={})=>({anchorRight:e,id:t,isVirtualSource:n,options:[]})},Mt={"note left":[St.make("[")],"note over":[St.make("["),St.make("]")],"note right":[St.make("]")]},Rt=["[","]"],Ct={"agent begin":{check:["mode"],merge:["agentIDs"],siblings:new Set(["agent highlight"])},"agent end":{check:["mode"],merge:["agentIDs"],siblings:new Set(["agent highlight"])},"agent highlight":{check:["highlighted"],merge:["agentIDs"],siblings:new Set(["agent begin","agent end"])}};class It{constructor(){this.agentStates=new Map,this.agentAliases=new Map,this.activeGroups=new Map,this.gAgents=[],this.labelPattern=null,this.nextID=0,this.nesting=[],this.markers=new Set,this.currentSection=null,this.currentNest=null,this.stageHandlers={"agent begin":this.handleAgentBegin.bind(this),"agent define":this.handleAgentDefine.bind(this),"agent end":this.handleAgentEnd.bind(this),"agent options":this.handleAgentOptions.bind(this),async:this.handleAsync.bind(this),"block begin":this.handleBlockBegin.bind(this),"block end":this.handleBlockEnd.bind(this),"block split":this.handleBlockSplit.bind(this),connect:this.handleConnect.bind(this),"connect-delay-begin":this.handleConnectDelayBegin.bind(this),"connect-delay-end":this.handleConnectDelayEnd.bind(this),divider:this.handleDivider.bind(this),"group begin":this.handleGroupBegin.bind(this),"label pattern":this.handleLabelPattern.bind(this),mark:this.handleMark.bind(this),"note between":this.handleNote.bind(this),"note left":this.handleNote.bind(this),"note over":this.handleNote.bind(this),"note right":this.handleNote.bind(this)},this.expandGroupedGAgent=this.expandGroupedGAgent.bind(this),this.handleStage=this.handleStage.bind(this),this.toGAgent=this.toGAgent.bind(this),this.endGroup=this.endGroup.bind(this)}_aliasInUse(t){const e=this.agentAliases.get(t);return!(!e||e===t)||this.gAgents.some(e=>e.id===t)}toGAgent({name:t,alias:e,flags:n}){if(e){if(this.agentAliases.has(t))throw new Error("Cannot alias "+t+"; it is already an alias");if(this._aliasInUse(e))throw new Error("Cannot use "+e+" as an alias; it is already in use");this.agentAliases.set(e,t)}return St.make(this.agentAliases.get(t)||t,{isVirtualSource:n.includes("source")})}addStage(t,e=!0){t&&(void 0===t.ln&&(t.ln=this.latestLine),this.currentSection.stages.push(t),e&&(this.currentNest.hasContent=!0))}addParallelStages(t){const e=t.filter(t=>Boolean(t));0!==e.length&&(1!==e.length?(e.forEach(t=>{void 0===t.ln&&(t.ln=this.latestLine)}),this.addStage({stages:e,type:"parallel"})):this.addStage(e[0]))}defineGAgents(t){e(this.currentNest.gAgents,t.filter(t=>!Rt.includes(t.id)),St.equals),e(this.gAgents,t,St.equals)}getGAgentState(t){return this.agentStates.get(t.id)||At.DEFAULT}updateGAgentState(t,e){const n=this.agentStates.get(t.id);n?Object.assign(n,e):this.agentStates.set(t.id,new At(e))}replaceGAgentState(t,e){this.agentStates.set(t.id,e)}validateGAgents(t,{allowGrouped:e=!1,allowCovered:n=!1,allowVirtual:s=!1}={}){t.forEach(t=>{const r=this.getGAgentState(t),i=t.id;if(function(t){return t.blocked&&null===t.group}(r))throw new Error("Duplicate agent name: "+i);if(!n&&r.covered)throw new Error("Agent "+i+" is hidden behind group");if(!e&&null!==r.group)throw new Error("Agent "+i+" is in a group");if(!s&&t.isVirtualSource)throw new Error("Cannot use message source here");if(function(t){return t.startsWith("__")}(i))throw new Error(i+" is a reserved name")})}setGAgentVis(t,e,n,s=!1){const r=new Set,i=t.filter(t=>{if(r.has(t.id))return!1;r.add(t.id);const n=this.getGAgentState(t);if(n.locked||n.blocked){if(s)throw new Error("Cannot begin/end agent: "+t.id);return!1}return n.visible!==e});return 0===i.length?null:(i.forEach(t=>{this.updateGAgentState(t,{visible:e})}),this.defineGAgents(i),{agentIDs:i.map(t=>t.id),mode:n,type:e?"agent begin":"agent end"})}setGAgentHighlight(t,e,n=!1){const s=t.filter(t=>{const s=this.getGAgentState(t);if(s.locked||s.blocked){if(n)throw new Error("Cannot highlight agent: "+t.id);return!1}return s.visible&&s.highlighted!==e});return 0===s.length?null:(s.forEach(t=>{this.updateGAgentState(t,{highlighted:e})}),{agentIDs:s.map(t=>t.id),highlighted:e,type:"agent highlight"})}_makeSection(t,e){return{delayedConnections:new Map,header:t,stages:e}}_checkSectionEnd(){const t=this.currentSection.delayedConnections;if(t.size>0){const e=t.values().next().value;throw new Error('Unused delayed connection "'+e.tag+'" at line '+(e.ln+1))}}beginNested(t,{tag:e,label:n,name:s,ln:r}){const i=St.make(s+"[",{anchorRight:!0}),a=St.make(s+"]"),o=[i,a],h=[];return this.currentSection=this._makeSection({blockType:t,canHide:!0,label:this.textFormatter(n),left:i.id,ln:r,right:a.id,tag:this.textFormatter(e),type:"block begin"},h),this.currentNest={blockType:t,gAgents:o,hasContent:!1,leftGAgent:i,rightGAgent:a,sections:[this.currentSection]},this.replaceGAgentState(i,At.LOCKED),this.replaceGAgentState(a,At.LOCKED),this.nesting.push(this.currentNest),{stages:h}}nextBlockName(){const t="__BLOCK"+this.nextID;return++this.nextID,t}nextVirtualAgentName(){const t="__"+this.nextID;return++this.nextID,t}handleBlockBegin({ln:t,blockType:e,tag:n,label:s}){this.beginNested(e,{label:s,ln:t,name:this.nextBlockName(),tag:n})}handleBlockSplit({ln:t,blockType:e,tag:n,label:s}){if("if"!==this.currentNest.blockType)throw new Error('Invalid block nesting ("else" inside '+this.currentNest.blockType+")");this._checkSectionEnd(),this.currentSection=this._makeSection({blockType:e,label:this.textFormatter(s),left:this.currentNest.leftGAgent.id,ln:t,right:this.currentNest.rightGAgent.id,tag:this.textFormatter(n),type:"block split"},[]),this.currentNest.sections.push(this.currentSection)}handleBlockEnd(){if(this.nesting.length<=1)throw new Error('Invalid block nesting (too many "end"s)');this._checkSectionEnd();const t=this.nesting.pop();if(this.currentNest=r(this.nesting),this.currentSection=r(this.currentNest.sections),!t.hasContent)throw new Error("Empty block");this.defineGAgents(t.gAgents),p(this.gAgents,t.leftGAgent,t.rightGAgent,t.gAgents),t.sections.forEach(t=>{this.currentSection.stages.push(t.header),this.currentSection.stages.push(...t.stages)}),this.addStage({left:t.leftGAgent.id,right:t.rightGAgent.id,type:"block end"})}makeGroupDetails(t,e){const s=t.map(this.toGAgent);if(this.validateGAgents(s),this.agentStates.has(e))throw new Error("Duplicate agent name: "+e);const r=this.nextBlockName(),i=St.make(r+"[",{anchorRight:!0}),a=St.make(r+"]");this.replaceGAgentState(i,At.LOCKED),this.replaceGAgentState(a,At.LOCKED),this.updateGAgentState(St.make(e),{blocked:!0,group:e}),this.defineGAgents([...s,i,a]);const{indexL:o,indexR:h}=p(this.gAgents,i,a,s),l=[],d=s.slice();for(let t=o+1;t{this.updateGAgentState(t,{group:r})}),i.gAgentsCovered.forEach(t=>{this.updateGAgentState(t,{covered:!0})}),this.activeGroups.set(r,i),this.addStage(this.setGAgentVis(i.gAgents,!0,"box")),this.addStage({blockType:e,canHide:!1,label:this.textFormatter(s),left:i.leftGAgent.id,right:i.rightGAgent.id,tag:this.textFormatter(n),type:"block begin"})}endGroup({name:t}){const e=this.activeGroups.get(t);return e?(this.activeGroups.delete(t),e.gAgentsContained.forEach(t=>{this.updateGAgentState(t,{group:null})}),e.gAgentsCovered.forEach(t=>{this.updateGAgentState(t,{covered:!1})}),this.updateGAgentState(St.make(t),{group:null}),{left:e.leftGAgent.id,right:e.rightGAgent.id,type:"block end"}):null}handleMark({name:t}){this.markers.add(t),this.addStage({name:t,type:"mark"},!1)}handleDivider({mode:t,height:e,label:n}){this.addStage({formattedLabel:this.textFormatter(n),height:e,mode:t,type:"divider"},!1)}handleAsync({target:t}){if(""!==t&&!this.markers.has(t))throw new Error("Unknown marker: "+t);this.addStage({target:t,type:"async"},!1)}handleLabelPattern({pattern:t}){this.labelPattern=t.slice();for(let t=0;t{"string"==typeof t?e+=t:void 0!==t.token?e+=n[t.token]:void 0!==t.current&&(e+=t.current.toFixed(t.dp),t.current+=t.inc)}),e}expandGroupedGAgent(t){const{group:e}=this.getGAgentState(t);if(!e)return[t];const n=this.activeGroups.get(e);return[n.leftGAgent,n.rightGAgent]}expandGroupedGAgentConnection(t){const e=this.expandGroupedGAgent(t[0]),n=this.expandGroupedGAgent(t[1]);let s=St.indexOf(this.gAgents,e[0]),i=St.indexOf(this.gAgents,n[0]);return-1===s&&(s=e[0].isVirtualSource?-1:this.gAgents.length),-1===i&&(i=this.gAgents.length),s===i?[r(e),r(n)]:s!t.isVirtualSource));const s=t.filter(Ft.hasFlag("begin",!1)).map(this.toGAgent).filter(t=>!t.isVirtualSource);return this.addStage(this.setGAgentVis(s,!0,"box")),{flags:e,gAgents:n}}_makeConnectParallelStages(t,e){return[this.setGAgentVis(t.beginGAgents,!0,"box",!0),this.setGAgentHighlight(t.startGAgents,!0,!0),e,this.setGAgentHighlight(t.stopGAgents,!1,!0),this.setGAgentVis(t.endGAgents,!1,"cross",!0)]}_isSelfConnect(t){const e=t.map(this.toGAgent),n=this.expandGroupedGAgentConnection(e);return n[0].id===n[1].id&&!n.some(t=>t.isVirtualSource)}handleConnect({agents:t,label:e,options:n}){if(this._isSelfConnect(t)){const s={};return this.handleConnectDelayBegin({agent:t[0],ln:0,options:n,tag:s}),void this.handleConnectDelayEnd({agent:t[1],label:e,options:n,tag:s})}let{flags:s,gAgents:r}=this._handlePartialConnect(t);r=this.expandGroupedGAgentConnection(r);const i={agentIDs:(r=this.expandVirtualSourceAgents(r)).map(t=>t.id),label:this.textFormatter(this.applyLabelPattern(e)),options:n,type:"connect"};this.addParallelStages(this._makeConnectParallelStages(s,i))}handleConnectDelayBegin({agent:t,tag:e,options:n,ln:s}){const r=this.currentSection.delayedConnections;if(r.has(e))throw new Error('Duplicate delayed connection "'+e+'"');const{flags:i,gAgents:a}=this._handlePartialConnect([t]),o=this.nextVirtualAgentName(),h={agentIDs:null,label:null,options:n,tag:o,type:"connect-delay-begin"};r.set(e,{connectStage:h,gAgents:a,ln:s,tag:e,uniqueTag:o}),this.addParallelStages(this._makeConnectParallelStages(i,h))}handleConnectDelayEnd({agent:t,tag:e,label:n,options:s}){const r=this.currentSection.delayedConnections,i=r.get(e);if(!i)throw new Error('Unknown delayed connection "'+e+'"');let{flags:a,gAgents:o}=this._handlePartialConnect([t]);o=this.expandGroupedGAgentConnection([...i.gAgents,...o]),o=this.expandVirtualSourceAgents(o);let h=i.connectStage.options;if(h.line!==s.line)throw new Error("Mismatched delayed connection arrows");s.right&&(h=Object.assign({},h,{right:s.right})),Object.assign(i.connectStage,{agentIDs:o.map(t=>t.id),label:this.textFormatter(this.applyLabelPattern(n)),options:h});const l={tag:i.uniqueTag,type:"connect-delay-end"};this.addParallelStages(this._makeConnectParallelStages(a,l)),r.delete(e)}handleNote({type:t,agents:e,mode:n,label:s}){let r=null;r=0===e.length?Mt[t]||[]:e.map(this.toGAgent),this.validateGAgents(r,{allowGrouped:!0});const i=(r=a(r,this.expandGroupedGAgent)).map(t=>t.id),o=new Set(i).size;if("note between"===t&&o<2)throw new Error("note between requires at least 2 agents");this.addStage(this.setGAgentVis(r,!0,"box")),this.defineGAgents(r),this.addStage({agentIDs:i,label:this.textFormatter(s),mode:n,type:t})}handleAgentDefine({agents:t}){const n=t.map(this.toGAgent);this.validateGAgents(n,{allowCovered:!0,allowGrouped:!0}),e(this.gAgents,n,St.equals)}handleAgentOptions({agent:t,options:n}){const s=this.toGAgent(t),r=[s];this.validateGAgents(r,{allowCovered:!0,allowGrouped:!0}),e(this.gAgents,r,St.equals),this.gAgents.filter(({id:t})=>t===s.id).forEach(t=>{e(t.options,n)})}handleAgentBegin({agents:t,mode:e}){const n=t.map(this.toGAgent);this.validateGAgents(n),this.addStage(this.setGAgentVis(n,!0,e,!0))}handleAgentEnd({agents:t,mode:e}){const n=t.filter(t=>this.activeGroups.has(t.name)),s=t.filter(t=>!this.activeGroups.has(t.name)).map(this.toGAgent);this.validateGAgents(s),this.addParallelStages([this.setGAgentHighlight(s,!1),this.setGAgentVis(s,!1,e,!0),...n.map(this.endGroup)])}handleStage(t){this.latestLine=t.ln;try{const e=this.stageHandlers[t.type];if(!e)throw new Error("Unknown command: "+t.type);e(t)}catch(e){if("object"==typeof e&&e.message)throw e.message+=" at line "+(t.ln+1),e}}_reset(){this.agentStates.clear(),this.markers.clear(),this.agentAliases.clear(),this.activeGroups.clear(),this.gAgents.length=0,this.nextID=0,this.nesting.length=0,this.labelPattern=[{token:"label"}]}_finalise(t){p(this.gAgents,this.currentNest.leftGAgent,this.currentNest.rightGAgent),function(t){let e=[],n=new Set;for(let s=0;s{t.formattedLabel=this.textFormatter(t.id)})}generate({stages:t,meta:e={}}){this._reset(),this.textFormatter=e.textFormatter;const n=this.beginNested("global",{label:"",ln:0,name:"",tag:""});if(t.forEach(this.handleStage),1!==this.nesting.length)throw new Error("Unterminated section at line "+(this.currentSection.header.ln+1));if(this.activeGroups.size>0)throw new Error("Unterminated group");this._checkSectionEnd();const s=e.terminators||"none";return this.addParallelStages([this.setGAgentHighlight(this.gAgents,!1),this.setGAgentVis(this.gAgents,!1,s)]),this._finalise(n),function(t,e){for(let n=0;n({})},line:{labelAttrs:Lt,padding:{top:2,left:5,right:5,bottom:2},extend:8,margin:0,render:this.renderLineDivider.bind(this,{lineAttrs:{stroke:"#000000"}})},delay:{labelAttrs:Lt,padding:{top:2,left:5,right:5,bottom:2},extend:0,margin:0,render:this.renderDelayDivider.bind(this,{dotSize:2,gapSize:2})},tear:{labelAttrs:Lt,padding:{top:2,left:5,right:5,bottom:2},extend:8,margin:8,render:this.renderTearDivider.bind(this,{fadeBegin:4,fadeSize:4,zigWidth:4,zigHeight:1,lineAttrs:{stroke:"#000000"}})}}})}}class Ot{constructor(){this.name="monospace"}build(t){return new Nt(t)}}const zt={type:"error line-error",suggest:[],then:{"":0}},Bt=["database","red"],Tt=(()=>{function t(t,e=1){return{type:"variable",suggest:[{known:"Agent"}],then:Object.assign({},t,{"":0,",":{type:"operator",then:{"":e}}})}}function e(t){return{type:"keyword",suggest:[t+" of ",t+": "],then:{of:{type:"keyword",then:{"":h}},":":{type:"operator",then:{"":i}},"":h}}}function n({exit:t,sourceExit:e,blankExit:n}){const s={type:"operator",then:{"+":zt,"-":zt,"*":zt,"!":zt,"":t}};return{"+":{type:"operator",then:{"+":zt,"-":zt,"*":s,"!":zt,"":t}},"-":{type:"operator",then:{"+":zt,"-":zt,"*":s,"!":{type:"operator",then:{"+":zt,"-":zt,"*":zt,"!":zt,"":t}},"":t}},"*":{type:"operator",then:Object.assign({"+":s,"-":s,"*":zt,"!":zt,"":t},e||t)},"!":s,"":n||t}}const s={type:"",suggest:["\n"],then:{}},r={type:"",suggest:[],then:{}},i=f({"\n":s}),a={type:"operator",then:{"":i,"\n":r}},o=t({"\n":s,as:{type:"keyword",then:{"":{type:"variable",suggest:[{known:"Agent"}],then:{"":0,",":{type:"operator",then:{"":3}},"\n":s}}}}}),h=t({":":a}),l={type:"variable",suggest:[{known:"Agent"}],then:{"":0,":":{type:"operator",then:{"":i,"\n":r}},"\n":s}},d={":":{type:"operator",then:{"":f({as:{type:"keyword",then:{"":{type:"variable",suggest:[{known:"Agent"}],then:{"":0,"\n":s}}}}})}}},g={type:"keyword",then:Object.assign({over:{type:"keyword",then:{"":t(d)}}},d)},c={"\n":s,":":{type:"operator",then:{"":i,"\n":r}},with:{type:"keyword",suggest:["with height "],then:{height:{type:"keyword",then:{"":{type:"number",suggest:["6 ","30 "],then:{"\n":s,":":{type:"operator",then:{"":i,"\n":r}}}}}}}}},u=function(t,e,n){const s=Object.assign({},n);return e.forEach(e=>{s[e]={type:t,then:n}}),s}("keyword",["a","an"],function(t,e,n){const s={},r=Object.assign({},n);return e.forEach(e=>{s[e]={type:t,then:r},r[e]=0}),s}("keyword",Bt,{"\n":s})),p={type:"keyword",then:{"":i,":":{type:"operator",then:{"":i}},"\n":s}},m={title:{type:"keyword",then:{"":i}},theme:{type:"keyword",then:{"":{type:"string",suggest:[{global:"themes",suffix:"\n"}],then:{"":0,"\n":s}}}},headers:{type:"keyword",then:{none:{type:"keyword",then:{}},cross:{type:"keyword",then:{}},box:{type:"keyword",then:{}},fade:{type:"keyword",then:{}},bar:{type:"keyword",then:{}}}},terminators:{type:"keyword",then:{none:{type:"keyword",then:{}},cross:{type:"keyword",then:{}},box:{type:"keyword",then:{}},fade:{type:"keyword",then:{}},bar:{type:"keyword",then:{}}}},divider:{type:"keyword",then:Object.assign({line:{type:"keyword",then:c},space:{type:"keyword",then:c},delay:{type:"keyword",then:c},tear:{type:"keyword",then:c}},c)},define:{type:"keyword",then:{"":o,as:zt}},begin:{type:"keyword",then:{"":o,reference:g,as:zt}},end:{type:"keyword",then:{"":o,as:zt,"\n":s}},if:p,else:{type:"keyword",suggest:["else\n","else if: "],then:{if:{type:"keyword",suggest:["if: "],then:{"":i,":":{type:"operator",then:{"":i}}}},"\n":s}},repeat:p,group:p,note:{type:"keyword",then:{over:{type:"keyword",then:{"":h}},left:e("left"),right:e("right"),between:{type:"keyword",then:{"":t({":":zt},h)}}}},state:{type:"keyword",suggest:["state over "],then:{over:{type:"keyword",then:{"":{type:"variable",suggest:[{known:"Agent"}],then:{"":0,",":zt,":":a}}}}}},text:{type:"keyword",then:{left:e("left"),right:e("right")}},autolabel:{type:"keyword",then:{off:{type:"keyword",then:{}},"":f({"\n":s},[{v:"
'); + expect(o.outerHTML).toEqual('
'); }); it('includes all children', () => { @@ -258,5 +258,12 @@ describe('VirtualDocument', () => { expect(o.outerHTML).toEqual('
a<b>c
'); }); + + it('escapes non-BMP unicode characters', () => { + const o = doc.createElement('div'); + o.appendChild(doc.createTextNode('\uD83D\uDE02')); + + expect(o.outerHTML).toEqual('
😂
'); + }); }); }); diff --git a/scripts/sequence/parser/MarkdownParser.mjs b/scripts/sequence/parser/MarkdownParser.mjs index c5c2699..eebad91 100644 --- a/scripts/sequence/parser/MarkdownParser.mjs +++ b/scripts/sequence/parser/MarkdownParser.mjs @@ -62,6 +62,14 @@ function combineAttrs(activeCount, active) { return attrs; } +function shrinkWhitespace(text) { + return text.replace(/[\f\n\r\t\v ]+/g, ' '); +} + +function trimCollapsible(text) { + return text.replace(/^[\f\n\r\t\v ]+|[\f\n\r\t\v ]+$/g, ''); +} + export default function parseMarkdown(text) { if(!text) { return []; @@ -70,13 +78,14 @@ export default function parseMarkdown(text) { const active = STYLES.map(() => false); let activeCount = 0; let attrs = null; - const lines = text.split('\n'); + const lines = trimCollapsible(text).split('\n'); const result = []; lines.forEach((line) => { + const ln = shrinkWhitespace(trimCollapsible(line)); const parts = []; let p = 0; for(;;) { - const {styleIndex, start, end} = findNext(line, p, active); + const {styleIndex, start, end} = findNext(ln, p, active); if(styleIndex === -1) { break; } @@ -88,13 +97,13 @@ export default function parseMarkdown(text) { ++ activeCount; } if(start > p) { - parts.push({attrs, text: line.substring(p, start)}); + parts.push({attrs, text: ln.substring(p, start)}); } attrs = combineAttrs(activeCount, active); p = end; } - if(p < line.length) { - parts.push({attrs, text: line.substr(p)}); + if(p < ln.length) { + parts.push({attrs, text: ln.substr(p)}); } result.push(parts); }); diff --git a/scripts/sequence/parser/MarkdownParser_spec.mjs b/scripts/sequence/parser/MarkdownParser_spec.mjs index 742f3e3..5784b0d 100644 --- a/scripts/sequence/parser/MarkdownParser_spec.mjs +++ b/scripts/sequence/parser/MarkdownParser_spec.mjs @@ -24,6 +24,33 @@ describe('Markdown Parser', () => { ]); }); + it('trims leading and trailing whitespace', () => { + const formatted = parser(' a \n \u00A0b \n '); + + expect(formatted).toEqual([ + [{attrs: null, text: 'a'}], + [{attrs: null, text: '\u00A0b'}], + ]); + }); + + it('replaces sequences of whitespace with a single space', () => { + const formatted = parser('abc \t \v def'); + + expect(formatted).toEqual([ + [{attrs: null, text: 'abc def'}], + ]); + }); + + it('maintains internal blank lines', () => { + const formatted = parser('abc\n\ndef'); + + expect(formatted).toEqual([ + [{attrs: null, text: 'abc'}], + [], + [{attrs: null, text: 'def'}], + ]); + }); + it('recognises bold styling', () => { const formatted = parser('a **b** c __d__ e'); diff --git a/scripts/sequence/themes/Sketch.mjs b/scripts/sequence/themes/Sketch.mjs index 328804c..57721ff 100644 --- a/scripts/sequence/themes/Sketch.mjs +++ b/scripts/sequence/themes/Sketch.mjs @@ -6,7 +6,7 @@ import Handlee from '../../fonts/HandleeFontData.mjs'; import Random from '../../core/Random.mjs'; const FONT = Handlee.name; -const FONT_FAMILY = '\'' + FONT + '\',cursive'; +const FONT_FAMILY = FONT + ',cursive'; const LINE_HEIGHT = 1.5; const MAX_CHAOS = 5; @@ -374,7 +374,7 @@ export default class SketchTheme extends BaseTheme { // Font must be embedded for exporting as SVG / PNG style.text( '@font-face{' + - 'font-family:"' + Handlee.name + '";' + + 'font-family:' + Handlee.name + ';' + 'src:url("data:font/woff2;base64,' + Handlee.woff2 + '");' + '}' ); diff --git a/scripts/svg/SVGTextBlock_spec.mjs b/scripts/svg/SVGTextBlock_spec.mjs index 2f2b628..21d526a 100644 --- a/scripts/svg/SVGTextBlock_spec.mjs +++ b/scripts/svg/SVGTextBlock_spec.mjs @@ -66,6 +66,16 @@ describe('SVGTextBlock', () => { expect(hold.childNodes[1].innerHTML).toEqual('bar'); }); + it('renders with tspans if the formatting changes', () => { + block.set({formatted: [[ + {text: 'foo'}, + {attrs: {zig: 'zag'}, text: 'bar'}, + ]]}); + + expect(hold.childNodes[0].innerHTML) + .toEqual('foobar'); + }); + it('re-uses text nodes when possible, adding more if needed', () => { block.set({formatted: [[{text: 'foo'}], [{text: 'bar'}]]}); const [line0, line1] = hold.childNodes;