From 5283c511e9e008070c75aaf39f3475ca9575f81a Mon Sep 17 00:00:00 2001 From: David Evans Date: Sat, 27 Jan 2018 16:55:48 +0000 Subject: [PATCH] Convert self-connections into asynchronous connections for better rendering [#43] --- lib/sequence-diagram.js | 95 +++++++++++---- lib/sequence-diagram.min.js | 2 +- library.htm | 13 ++ scripts/sequence/Generator.js | 29 +++++ scripts/sequence/Generator_spec.js | 120 ++++++++++--------- scripts/sequence/Renderer.js | 2 +- scripts/sequence/components/AgentCap.js | 10 +- scripts/sequence/components/BaseComponent.js | 9 +- scripts/sequence/components/Block.js | 2 +- scripts/sequence/components/Connect.js | 36 ++++-- scripts/sequence/components/Divider.js | 2 +- scripts/sequence/components/Note.js | 2 +- scripts/sequence/components/Parallel.js | 3 +- scripts/tester/jshintRunner.js | 2 +- styles/editor.css | 6 +- styles/library.css | 2 +- 16 files changed, 223 insertions(+), 112 deletions(-) diff --git a/lib/sequence-diagram.js b/lib/sequence-diagram.js index 692da92..07c40c4 100644 --- a/lib/sequence-diagram.js +++ b/lib/sequence-diagram.js @@ -3112,7 +3112,36 @@ define('sequence/Generator',['core/ArrayUtilities'], (array) => { ]; } + _isSelfConnect(agents) { + const gAgents = agents.map(this.toGAgent); + const expandedGAgents = this.expandGroupedGAgentConnection(gAgents); + if(expandedGAgents[0].id !== expandedGAgents[1].id) { + return false; + } + if(expandedGAgents.some((gAgent) => gAgent.isVirtualSource)) { + return false; + } + return true; + } + handleConnect({agents, label, options}) { + if(this._isSelfConnect(agents)) { + const tag = {}; + this.handleConnectDelayBegin({ + agent: agents[0], + tag, + options, + ln: 0, + }); + this.handleConnectDelayEnd({ + agent: agents[1], + tag, + label, + options, + }); + return; + } + let {flags, gAgents} = this._handlePartialConnect(agents); gAgents = this.expandGroupedGAgentConnection(gAgents); @@ -3922,13 +3951,18 @@ define('sequence/components/BaseComponent',[],() => { } BaseComponent.cleanRenderPreResult = ({ - topShift = 0, agentIDs = [], + topShift = 0, + y = null, asynchronousY = null, } = {}, currentY = null) => { + if(y !== null && currentY !== null) { + topShift = Math.max(topShift, y - currentY); + } return { - topShift, agentIDs, + topShift, + y, asynchronousY: (asynchronousY !== null) ? asynchronousY : currentY, }; }; @@ -4025,7 +4059,7 @@ define('sequence/components/Block',[ 'width': agentInfoR.x - agentInfoL.x, 'height': labelHeight, 'fill': 'transparent', - 'class': 'vis', + 'class': 'outline', }), clickable.firstChild); if(!first) { @@ -4157,8 +4191,9 @@ define('sequence/components/Parallel',[ function mergeResults(a, b) { array.mergeSets(a.agentIDs, b.agentIDs); return { - topShift: Math.max(a.topShift, b.topShift), agentIDs: a.agentIDs, + topShift: Math.max(a.topShift, b.topShift), + y: nullableMax(a.y, b.y), asynchronousY: nullableMax(a.asynchronousY, b.asynchronousY), }; } @@ -4309,7 +4344,7 @@ define('sequence/components/AgentCap',[ 'width': width, 'height': height, 'fill': 'transparent', - 'class': 'vis', + 'class': 'outline', }), clickable.firstChild); return { @@ -4347,7 +4382,7 @@ define('sequence/components/AgentCap',[ 'width': d * 2, 'height': d * 2, 'fill': 'transparent', - 'class': 'vis', + 'class': 'outline', })); return { @@ -4402,7 +4437,7 @@ define('sequence/components/AgentCap',[ 'width': width, 'height': height, 'fill': 'transparent', - 'class': 'vis', + 'class': 'outline', })); return { @@ -4463,7 +4498,7 @@ define('sequence/components/AgentCap',[ 'width': config.width, 'height': config.height, 'fill': 'transparent', - 'class': 'vis', + 'class': 'outline', })); return { @@ -4498,7 +4533,7 @@ define('sequence/components/AgentCap',[ 'width': w, 'height': config.height, 'fill': 'transparent', - 'class': 'vis', + 'class': 'outline', })); return { @@ -4872,16 +4907,12 @@ define('sequence/components/Connect',[ to.x + to.currentMaxRad + rArrow.width(env.theme), xL + labelW ); - const y2 = Math.max( - yBegin + config.loopbackRadius * 2, - env.primaryY - ); this.renderRevArrowLine({ x1: from.x + from.currentMaxRad, y1: yBegin, x2: to.x + to.currentMaxRad, - y2, + y2: env.primaryY, xR, }, options, env); @@ -4892,12 +4923,16 @@ define('sequence/components/Connect',[ 'x': from.x, 'y': yBegin - raise, 'width': xR + config.loopbackRadius - from.x, - 'height': raise + y2 - yBegin + arrowDip, + 'height': raise + env.primaryY - yBegin + arrowDip, 'fill': 'transparent', - 'class': 'vis', + 'class': 'outline', }), clickable.firstChild); - return y2 + Math.max(arrowDip, 0) + env.theme.actionMargin; + return ( + env.primaryY + + Math.max(arrowDip, 0) + + env.theme.actionMargin + ); } renderArrowLine({x1, y1, x2, y2}, options, env) { @@ -5031,7 +5066,7 @@ define('sequence/components/Connect',[ 'Z' ), 'fill': 'transparent', - 'class': 'vis', + 'class': 'outline', })); this.renderSimpleLabel(label, { @@ -5122,11 +5157,21 @@ define('sequence/components/Connect',[ separation() {} renderPre({tag}, env) { + const config = env.theme.connect; + const dc = env.state.delayedConnections; - const beginStage = dc.get(tag).stage; - return Object.assign(super.renderPre(beginStage, env), { - agentIDs: [beginStage.agentIDs[1]], - }); + const begin = dc.get(tag); + const beginStage = begin.stage; + const agentIDs = [beginStage.agentIDs[1]]; + + if(beginStage.agentIDs[0] === beginStage.agentIDs[1]) { + return { + agentIDs, + y: begin.y + config.loopbackRadius * 2, + }; + } + + return Object.assign(super.renderPre(beginStage, env), {agentIDs}); } render({tag}, env) { @@ -5241,7 +5286,7 @@ define('sequence/components/Note',['./BaseComponent', 'svg/SVGUtilities'], (Base 'width': x1 - x0, 'height': fullH, 'fill': 'transparent', - 'class': 'vis', + 'class': 'outline', }), clickable.firstChild); return ( @@ -5500,7 +5545,7 @@ define('sequence/components/Divider',[ 'width': right.x - left.x + config.extend * 2, 'height': fullHeight, 'fill': 'transparent', - 'class': 'vis', + 'class': 'outline', }), clickable.firstChild); return env.primaryY + fullHeight + env.theme.actionMargin; @@ -5815,7 +5860,7 @@ define('sequence/Renderer',[ }; const component = this.components.get(stage.type); const result = component.renderPre(stage, envPre); - const {topShift, agentIDs, asynchronousY} = + const {agentIDs, topShift, asynchronousY} = BaseComponent.cleanRenderPreResult(result, this.currentY); const topY = this.checkAgentRange(agentIDs, asynchronousY); diff --git a/lib/sequence-diagram.min.js b/lib/sequence-diagram.min.js index 561d372..5dce7f3 100644 --- a/lib/sequence-diagram.min.js +++ b/lib/sequence-diagram.min.js @@ -1 +1 @@ -!function(){var e,t,n;!function(r){function s(e,t){return x.call(e,t)}function i(e,t){var n,r,s,i,a,o,l,h,d,g,c,u=t&&t.split("/"),p=b.map,f=p&&p["*"]||{};if(e){for(a=(e=e.split("/")).length-1,b.nodeIdCompat&&w.test(e[a])&&(e[a]=e[a].replace(w,"")),"."===e[0].charAt(0)&&u&&(e=u.slice(0,u.length-1).concat(e)),d=0;d0&&(e.splice(d-1,2),d-=2)}e=e.join("/")}if((u||f)&&p){for(d=(n=e.split("/")).length;d>0;d-=1){if(r=n.slice(0,d).join("/"),u)for(g=u.length;g>0;g-=1)if((s=p[u.slice(0,g).join("/")])&&(s=s[r])){i=s,o=d;break}if(i)break;!l&&f&&f[r]&&(l=f[r],h=d)}!i&&l&&(i=l,o=h),i&&(n.splice(0,o,i),e=n.join("/"))}return e}function a(e,t){return function(){var n=k.call(arguments,0);return"string"!=typeof n[0]&&1===n.length&&n.push(null),c.apply(r,n.concat([e,t]))}}function o(e){return function(t){f[e]=t}}function l(e){if(s(m,e)){var t=m[e];delete m[e],y[e]=!0,g.apply(r,t)}if(!s(f,e)&&!s(y,e))throw new Error("No "+e);return f[e]}function h(e){var t,n=e?e.indexOf("!"):-1;return n>-1&&(t=e.substring(0,n),e=e.substring(n+1,e.length)),[t,e]}function d(e){return e?h(e):[]}var g,c,u,p,f={},m={},b={},y={},x=Object.prototype.hasOwnProperty,k=[].slice,w=/\.js$/;u=function(e,t){var n,r=h(e),s=r[0],a=t[1];return e=r[1],s&&(n=l(s=i(s,a))),s?e=n&&n.normalize?n.normalize(e,function(e){return function(t){return i(t,e)}}(a)):i(e,a):(s=(r=h(e=i(e,a)))[0],e=r[1],s&&(n=l(s))),{f:s?s+"!"+e:e,n:e,pr:s,p:n}},p={require:function(e){return a(e)},exports:function(e){var t=f[e];return void 0!==t?t:f[e]={}},module:function(e){return{id:e,uri:"",exports:f[e],config:function(e){return function(){return b&&b.config&&b.config[e]||{}}}(e)}}},g=function(e,t,n,i){var h,g,c,b,x,k,w,v=[],A=typeof n;if(i=i||e,k=d(i),"undefined"===A||"function"===A){for(t=!t.length&&n.length?["require","exports","module"]:t,x=0;x{"use strict";return class{constructor(){this.listeners=new Map,this.forwards=new Set}addEventListener(e,t){const n=this.listeners.get(e);n?n.push(t):this.listeners.set(e,[t])}removeEventListener(e,t){const n=this.listeners.get(e);if(!n)return;const r=n.indexOf(t);-1!==r&&n.splice(r,1)}countEventListeners(e){return(this.listeners.get(e)||[]).length}removeAllEventListeners(e){e?this.listeners.delete(e):this.listeners.clear()}addEventForwarding(e){this.forwards.add(e)}removeEventForwarding(e){this.forwards.delete(e)}removeAllEventForwardings(){this.forwards.clear()}trigger(e,t=[]){(this.listeners.get(e)||[]).forEach(e=>e.apply(null,t)),this.forwards.forEach(n=>n.trigger(e,t))}}}),n("core/ArrayUtilities",[],()=>{"use strict";function e(e,t,n=null){if(null===n)return e.indexOf(t);for(let r=0;r=e.length)return void s.push(r.slice());const i=e[n];if(!Array.isArray(i))return r.push(i),t(e,n+1,r,s),void r.pop();for(let a=0;a{n.push(...t(e))}),n}}}),n("sequence/CodeMirrorMode",["core/ArrayUtilities"],e=>{"use strict";function t(e,t){return e.v===t.v&&e.prefix===t.prefix&&e.suffix===t.suffix&&e.q===t.q}function n(t,n,r){let s=r.suggest;return Array.isArray(s)||(s=[s]),e.flatMap(s,e=>!0===e?[function(e,t){return Object.keys(t.then).length>0?{v:e,suffix:" ",q:!1}:{v:e,suffix:"\n",q:!1}}(n,r)]:"object"==typeof e?e.known?t["known"+e.known]||[]:[e]:"string"==typeof e&&e?[{v:e,q:""===n}]:[])}function r(r,s){const i=[],a=e.last(s);return Object.keys(a.then).forEach(o=>{let l=a.then[o];"number"==typeof l&&(l=s[s.length-l-1]),e.mergeSets(i,n(r,o,l),t)}),i}function s(n,r,s,{suggest:i,override:a}){let o=null;"object"==typeof i&&i.known&&(o=i.known),r.type&&o!==r.type&&(a&&(r.type=a),e.mergeSets(n["known"+r.type],[{v:r.value,suffix:" ",q:!0}],t),r.type="",r.value=""),o&&(r.type=o,r.value&&(r.value+=s.s),r.value+=s.v)}function i(t,n,i){const a={type:"",value:""};let l=i;const h=[l];return t.line.forEach((n,i)=>{i===t.line.length-1&&(t.completions=r(t,h));const d=n.q?"":n.v;let g=l.then[d];void 0===g?(g=l.then[""],t.isVar=!0):t.isVar=n.q,"number"==typeof g?h.length-=g:h.push(g||o),l=e.last(h),s(t,a,n,l)}),n&&s(t,a,null,{}),t.nextCompletions=r(t,h),t.valid=Boolean(l.then["\n"])||0===Object.keys(l.then).length,l.type}function a(e){const t=e.baseToken||{};return{value:t.v||"",quoted:t.q||!1}}const o={type:"error line-error",then:{"":0}},l=(()=>{function e(e,t){return{type:"string",suggest:t,then:Object.assign({"":0},e)}}function t(e){return{type:"variable",suggest:{known:"Agent"},then:Object.assign({},e,{"":0,",":{type:"operator",suggest:!0,then:{"":1}}})}}function n(e){return{type:"keyword",suggest:[e+" of ",e+": "],then:{of:{type:"keyword",suggest:!0,then:{"":d}},":":{type:"operator",suggest:!0,then:{"":a}},"":d}}}function r(e,t){const n={type:"operator",suggest:!0,then:{"+":o,"-":o,"*":o,"!":o,"":e}};return{"+":{type:"operator",suggest:!0,then:{"+":o,"-":o,"*":n,"!":o,"":e}},"-":{type:"operator",suggest:!0,then:{"+":o,"-":o,"*":n,"!":{type:"operator",then:{"+":o,"-":o,"*":o,"!":o,"":e}},"":e}},"*":{type:"operator",suggest:!0,then:Object.assign({"+":n,"-":n,"*":o,"!":o,"":e},t)},"!":n,"":e}}const s={type:"",suggest:"\n",then:{}},i={type:"",then:{}},a=e({"\n":s}),l={type:"variable",suggest:{known:"Agent"},then:{"":0,"\n":s,",":{type:"operator",suggest:!0,then:{"":1}},as:{type:"keyword",suggest:!0,then:{"":{type:"variable",suggest:{known:"Agent"},then:{"":0,",":{type:"operator",suggest:!0,then:{"":3}},"\n":s}}}}}},h={type:"operator",suggest:!0,then:{"":a,"\n":i}},d=t({":":h}),g={type:"variable",suggest:{known:"Agent"},then:{"":0,",":{type:"operator",suggest:!0,then:{"":d}},":":o}},c={type:"variable",suggest:{known:"Agent"},then:{"":0,",":o,":":h}},u={type:"variable",suggest:{known:"Agent"},then:{"":0,":":{type:"operator",suggest:!0,then:{"":a,"\n":i}},"\n":s}},p={":":{type:"operator",suggest:!0,then:{"":e({as:{type:"keyword",suggest:!0,then:{"":{type:"variable",suggest:{known:"Agent"},then:{"":0,"\n":s}}}}})}}},f={type:"keyword",suggest:!0,then:Object.assign({over:{type:"keyword",suggest:!0,then:{"":t(p)}}},p)},m={"\n":s,":":{type:"operator",suggest:!0,then:{"":a,"\n":i}},with:{type:"keyword",suggest:["with height "],then:{height:{type:"keyword",suggest:!0,then:{"":{type:"number",suggest:["6 ","30 "],then:{"\n":s,":":{type:"operator",suggest:!0,then:{"":a,"\n":i}}}}}}}}},b={title:{type:"keyword",suggest:!0,then:{"":a}},theme:{type:"keyword",suggest:!0,then:{"":{type:"string",suggest:{global:"themes",suffix:"\n"},then:{"":0,"\n":s}}}},headers:{type:"keyword",suggest:!0,then:{none:{type:"keyword",suggest:!0,then:{}},cross:{type:"keyword",suggest:!0,then:{}},box:{type:"keyword",suggest:!0,then:{}},fade:{type:"keyword",suggest:!0,then:{}},bar:{type:"keyword",suggest:!0,then:{}}}},terminators:{type:"keyword",suggest:!0,then:{none:{type:"keyword",suggest:!0,then:{}},cross:{type:"keyword",suggest:!0,then:{}},box:{type:"keyword",suggest:!0,then:{}},fade:{type:"keyword",suggest:!0,then:{}},bar:{type:"keyword",suggest:!0,then:{}}}},divider:{type:"keyword",suggest:!0,then:Object.assign({line:{type:"keyword",suggest:!0,then:m},space:{type:"keyword",suggest:!0,then:m},delay:{type:"keyword",suggest:!0,then:m},tear:{type:"keyword",suggest:!0,then:m}},m)},define:{type:"keyword",suggest:!0,then:{"":l,as:o}},begin:{type:"keyword",suggest:!0,then:{"":l,reference:f,as:o}},end:{type:"keyword",suggest:!0,then:{"":l,as:o,"\n":s}},if:{type:"keyword",suggest:!0,then:{"":a,":":{type:"operator",suggest:!0,then:{"":a}},"\n":s}},else:{type:"keyword",suggest:["else\n","else if: "],then:{if:{type:"keyword",suggest:"if: ",then:{"":a,":":{type:"operator",suggest:!0,then:{"":a}}}},"\n":s}},repeat:{type:"keyword",suggest:!0,then:{"":a,":":{type:"operator",suggest:!0,then:{"":a}},"\n":s}},note:{type:"keyword",suggest:!0,then:{over:{type:"keyword",suggest:!0,then:{"":d}},left:n("left"),right:n("right"),between:{type:"keyword",suggest:!0,then:{"":g}}}},state:{type:"keyword",suggest:"state over ",then:{over:{type:"keyword",suggest:!0,then:{"":c}}}},text:{type:"keyword",suggest:!0,then:{left:n("left"),right:n("right")}},autolabel:{type:"keyword",suggest:!0,then:{off:{type:"keyword",suggest:!0,then:{}},"":e({"\n":s},[{v:"