diff --git a/lib/sequence-diagram.js b/lib/sequence-diagram.js index dfc0239..db9e863 100644 --- a/lib/sequence-diagram.js +++ b/lib/sequence-diagram.js @@ -3382,13 +3382,16 @@ define('svg/SVGUtilities',[],() => { return document.createTextNode(text); } - function make(type, attrs = {}) { + function make(type, attrs = {}, children = []) { const o = document.createElementNS(NS, type); - for(let k in attrs) { + for(const k in attrs) { if(attrs.hasOwnProperty(k)) { o.setAttribute(k, attrs[k]); } } + for(const c of children) { + o.appendChild(c); + } return o; } @@ -3429,7 +3432,7 @@ define('svg/SVGTextBlock',['./SVGUtilities'], (svg) => { } function merge(state, newState) { - for(let k in state) { + for(const k in state) { if(state.hasOwnProperty(k)) { if(newState[k] !== null && newState[k] !== undefined) { state[k] = newState[k]; @@ -3445,8 +3448,7 @@ define('svg/SVGTextBlock',['./SVGUtilities'], (svg) => { formattedLine.forEach(({text, attrs}) => { const textNode = svg.makeText(text); if(attrs) { - const span = svg.make('tspan', attrs); - span.appendChild(textNode); + const span = svg.make('tspan', attrs, [textNode]); node.appendChild(span); } else { node.appendChild(textNode); @@ -3775,32 +3777,30 @@ define('svg/SVGShapes',[ } function renderNote(attrs, flickAttrs, position) { - const g = svg.make('g'); const x0 = position.x; const x1 = position.x + position.width; const y0 = position.y; const y1 = position.y + position.height; const flick = 7; - g.appendChild(svg.make('polygon', Object.assign({ - 'points': ( - x0 + ' ' + y0 + ' ' + - (x1 - flick) + ' ' + y0 + ' ' + - x1 + ' ' + (y0 + flick) + ' ' + - x1 + ' ' + y1 + ' ' + - x0 + ' ' + y1 - ), - }, attrs))); - - g.appendChild(svg.make('polyline', Object.assign({ - 'points': ( - (x1 - flick) + ' ' + y0 + ' ' + - (x1 - flick) + ' ' + (y0 + flick) + ' ' + - x1 + ' ' + (y0 + flick) - ), - }, flickAttrs))); - - return g; + return svg.make('g', {}, [ + svg.make('polygon', Object.assign({ + 'points': ( + x0 + ' ' + y0 + ' ' + + (x1 - flick) + ' ' + y0 + ' ' + + x1 + ' ' + (y0 + flick) + ' ' + + x1 + ' ' + y1 + ' ' + + x0 + ' ' + y1 + ), + }, attrs)), + svg.make('polyline', Object.assign({ + 'points': ( + (x1 - flick) + ' ' + y0 + ' ' + + (x1 - flick) + ' ' + (y0 + flick) + ' ' + + x1 + ' ' + (y0 + flick) + ), + }, flickAttrs)), + ]); } function calculateAnchor(x, attrs, padding) { @@ -3938,8 +3938,6 @@ define('sequence/components/BaseComponent',[],() => { primaryY, fillLayer, blockLayer, - shapeLayer, - labelLayer, theme, agentInfos, textSizer, @@ -4049,7 +4047,7 @@ define('sequence/components/Block',[ padding: config.section.label.padding, boxAttrs: {'fill': '#000000'}, labelAttrs: config.section.label.labelAttrs, - boxLayer: env.maskLayer, + boxLayer: env.lineMaskLayer, labelLayer: clickable, SVGTextBlockClass: env.SVGTextBlockClass, }); @@ -4165,7 +4163,7 @@ define('sequence/components/Block',[ env.fillLayer.appendChild(shapes.fill); } if(shapes.mask) { - env.maskLayer.appendChild(shapes.mask); + env.lineMaskLayer.appendChild(shapes.mask); } return env.primaryY + config.margin.bottom + env.theme.actionMargin; @@ -4243,8 +4241,10 @@ define('sequence/components/Parallel',[ const originalMakeRegion = env.makeRegion; let bottomY = 0; stage.stages.forEach((subStage) => { - env.makeRegion = (o, stageOverride = null) => { - return originalMakeRegion(o, stageOverride || subStage); + env.makeRegion = (options = {}) => { + return originalMakeRegion(Object.assign({ + stageOverride: subStage, + }, options)); }; const component = env.components.get(subStage.type); @@ -4341,30 +4341,30 @@ define('sequence/components/AgentCap',[ render(y, {x, formattedLabel}, env) { const config = env.theme.agentCap.box; const clickable = env.makeRegion(); - const {width, height} = SVGShapes.renderBoxedText(formattedLabel, { + const text = SVGShapes.renderBoxedText(formattedLabel, { x, y, padding: config.padding, boxAttrs: config.boxAttrs, boxRenderer: config.boxRenderer, labelAttrs: config.labelAttrs, - boxLayer: env.shapeLayer, + boxLayer: clickable, labelLayer: clickable, SVGTextBlockClass: env.SVGTextBlockClass, }); clickable.insertBefore(svg.make('rect', { - 'x': x - width / 2, + 'x': x - text.width / 2, 'y': y, - 'width': width, - 'height': height, + 'width': text.width, + 'height': text.height, 'fill': 'transparent', 'class': 'outline', - }), clickable.firstChild); + }), text.label.firstLine()); return { lineTop: 0, - lineBottom: height, - height, + lineBottom: text.height, + height: text.height, }; } } @@ -4388,9 +4388,10 @@ define('sequence/components/AgentCap',[ const config = env.theme.agentCap.cross; const d = config.size / 2; - env.shapeLayer.appendChild(config.render({x, y: y + d, radius: d})); + const clickable = env.makeRegion(); - env.makeRegion().appendChild(svg.make('rect', { + clickable.appendChild(config.render({x, y: y + d, radius: d})); + clickable.appendChild(svg.make('rect', { 'x': x - d, 'y': y, 'width': d * 2, @@ -4438,14 +4439,14 @@ define('sequence/components/AgentCap',[ ); const height = barCfg.height; - env.shapeLayer.appendChild(barCfg.render({ + const clickable = env.makeRegion(); + clickable.appendChild(barCfg.render({ x: x - width / 2, y, width, height, })); - - env.makeRegion().appendChild(svg.make('rect', { + clickable.appendChild(svg.make('rect', { 'x': x - width / 2, 'y': y, 'width': width, @@ -4481,24 +4482,24 @@ define('sequence/components/AgentCap',[ const ratio = config.height / (config.height + config.extend); const gradID = env.addDef(isBegin ? 'FadeIn' : 'FadeOut', () => { - const grad = svg.make('linearGradient', { + return svg.make('linearGradient', { 'x1': '0%', 'y1': isBegin ? '100%' : '0%', 'x2': '0%', 'y2': isBegin ? '0%' : '100%', - }); - grad.appendChild(svg.make('stop', { - 'offset': '0%', - 'stop-color': '#FFFFFF', - })); - grad.appendChild(svg.make('stop', { - 'offset': (100 * ratio).toFixed(3) + '%', - 'stop-color': '#000000', - })); - return grad; + }, [ + svg.make('stop', { + 'offset': '0%', + 'stop-color': '#FFFFFF', + }), + svg.make('stop', { + 'offset': (100 * ratio).toFixed(3) + '%', + 'stop-color': '#000000', + }), + ]); }); - env.maskLayer.appendChild(svg.make('rect', { + env.lineMaskLayer.appendChild(svg.make('rect', { 'x': x - config.width / 2, 'y': y - (isBegin ? config.extend : 0), 'width': config.width, @@ -4849,7 +4850,7 @@ define('sequence/components/Connect',[ array.mergeSets(env.momentaryAgentIDs, agentIDs); } - renderRevArrowLine({x1, y1, x2, y2, xR}, options, env) { + renderRevArrowLine({x1, y1, x2, y2, xR}, options, env, clickable) { const config = env.theme.connect; const line = config.line[options.line]; const lArrow = ARROWHEADS[options.left]; @@ -4865,14 +4866,14 @@ define('sequence/components/Connect',[ xR, rad: config.loopbackRadius, }); - env.shapeLayer.appendChild(rendered.shape); + clickable.appendChild(rendered.shape); - lArrow.render(env.shapeLayer, env.theme, { + lArrow.render(clickable, env.theme, { x: rendered.p1.x - dx1, y: rendered.p1.y, }, {dx: 1, dy: 0}); - rArrow.render(env.shapeLayer, env.theme, { + rArrow.render(clickable, env.theme, { x: rendered.p2.x - dx2, y: rendered.p2.y, }, {dx: 1, dy: 0}); @@ -4906,7 +4907,7 @@ define('sequence/components/Connect',[ padding: config.mask.padding, boxAttrs: {'fill': '#000000'}, labelAttrs: config.label.loopbackAttrs, - boxLayer: env.maskLayer, + boxLayer: env.lineMaskLayer, labelLayer: clickable, SVGTextBlockClass: env.SVGTextBlockClass, }); @@ -4928,7 +4929,7 @@ define('sequence/components/Connect',[ x2: to.x + to.currentMaxRad, y2: env.primaryY, xR, - }, options, env); + }, options, env, clickable); const raise = Math.max(height, lArrow.height(env.theme) / 2); const arrowDip = rArrow.height(env.theme) / 2; @@ -4949,7 +4950,7 @@ define('sequence/components/Connect',[ ); } - renderArrowLine({x1, y1, x2, y2}, options, env) { + renderArrowLine({x1, y1, x2, y2}, options, env, clickable) { const config = env.theme.connect; const line = config.line[options.line]; const lArrow = ARROWHEADS[options.left]; @@ -4970,13 +4971,13 @@ define('sequence/components/Connect',[ x2: x2 - d2 * dx, y2: y2 - d2 * dy, }); - env.shapeLayer.appendChild(rendered.shape); + clickable.appendChild(rendered.shape); const p1 = {x: rendered.p1.x - d1 * dx, y: rendered.p1.y - d1 * dy}; const p2 = {x: rendered.p2.x + d2 * dx, y: rendered.p2.y + d2 * dy}; - lArrow.render(env.shapeLayer, env.theme, p1, {dx, dy}); - rArrow.render(env.shapeLayer, env.theme, p2, {dx: -dx, dy: -dy}); + lArrow.render(clickable, env.theme, p1, {dx, dy}); + rArrow.render(clickable, env.theme, p2, {dx: -dx, dy: -dy}); return { p1, @@ -4986,20 +4987,20 @@ define('sequence/components/Connect',[ }; } - renderVirtualSources(from, to, renderedLine, env) { + renderVirtualSources({from, to, rendered}, env, clickable) { const config = env.theme.connect.source; if(from.isVirtualSource) { - env.shapeLayer.appendChild(config.render({ - x: renderedLine.p1.x - config.radius, - y: renderedLine.p1.y, + clickable.appendChild(config.render({ + x: rendered.p1.x - config.radius, + y: rendered.p1.y, radius: config.radius, })); } if(to.isVirtualSource) { - env.shapeLayer.appendChild(config.render({ - x: renderedLine.p2.x + config.radius, - y: renderedLine.p2.y, + clickable.appendChild(config.render({ + x: rendered.p2.x + config.radius, + y: rendered.p2.y, radius: config.radius, })); } @@ -5032,7 +5033,7 @@ define('sequence/components/Connect',[ padding: config.mask.padding, boxAttrs, labelAttrs: config.label.attrs, - boxLayer: env.maskLayer, + boxLayer: env.lineMaskLayer, labelLayer, SVGTextBlockClass: env.SVGTextBlockClass, }); @@ -5060,7 +5061,7 @@ define('sequence/components/Connect',[ y1: yBegin, x2, y2: env.primaryY, - }, options, env); + }, options, env, clickable); const arrowSpread = Math.max( rendered.lArrow.height(env.theme), @@ -5069,7 +5070,7 @@ define('sequence/components/Connect',[ const lift = Math.max(height, arrowSpread); - this.renderVirtualSources(from, to, rendered, env); + this.renderVirtualSources({from, to, rendered}, env, clickable); clickable.appendChild(svg.make('path', { 'd': ( @@ -5287,13 +5288,6 @@ define('sequence/components/Note',['./BaseComponent', 'svg/SVGUtilities'], (Base break; } - env.shapeLayer.appendChild(config.boxRenderer({ - x: x0, - y: env.topY + config.margin.top, - width: x1 - x0, - height: fullH, - })); - clickable.insertBefore(svg.make('rect', { 'x': x0, 'y': env.topY + config.margin.top, @@ -5303,6 +5297,13 @@ define('sequence/components/Note',['./BaseComponent', 'svg/SVGUtilities'], (Base 'class': 'outline', }), clickable.firstChild); + clickable.insertBefore(config.boxRenderer({ + x: x0, + y: env.topY + config.margin.top, + width: x1 - x0, + height: fullH, + }), clickable.firstChild); + return ( env.topY + config.margin.top + @@ -5507,7 +5508,7 @@ define('sequence/components/Divider',[ const left = env.agentInfos.get('['); const right = env.agentInfos.get(']'); - const clickable = env.makeRegion(); + const clickable = env.makeRegion({unmasked: true}); let labelWidth = 0; let labelHeight = 0; @@ -5531,7 +5532,7 @@ define('sequence/components/Divider',[ padding: config.padding, boxAttrs: {'fill': '#000000'}, labelAttrs: config.labelAttrs, - boxLayer: env.maskLayer, + boxLayer: env.fullMaskLayer, labelLayer: clickable, SVGTextBlockClass: env.SVGTextBlockClass, }); @@ -5551,7 +5552,7 @@ define('sequence/components/Divider',[ clickable.insertBefore(shape, clickable.firstChild); } if(mask) { - env.maskLayer.appendChild(mask); + env.fullMaskLayer.appendChild(mask); } clickable.insertBefore(svg.make('rect', { 'x': left.x - config.extend, @@ -5683,9 +5684,7 @@ define('sequence/Renderer',[ buildMetadata() { this.metaCode = svg.makeText(); - const metadata = svg.make('metadata'); - metadata.appendChild(this.metaCode); - return metadata; + return svg.make('metadata', {}, [this.metaCode]); } buildStaticElements() { @@ -5693,26 +5692,37 @@ define('sequence/Renderer',[ this.themeDefs = svg.make('defs'); this.defs = svg.make('defs'); - this.mask = svg.make('mask', { + this.fullMask = svg.make('mask', { + 'id': this.namespace + 'FullMask', + 'maskUnits': 'userSpaceOnUse', + }); + this.lineMask = svg.make('mask', { 'id': this.namespace + 'LineMask', 'maskUnits': 'userSpaceOnUse', }); - this.maskReveal = svg.make('rect', {'fill': '#FFFFFF'}); + this.fullMaskReveal = svg.make('rect', {'fill': '#FFFFFF'}); + this.lineMaskReveal = svg.make('rect', {'fill': '#FFFFFF'}); this.backgroundFills = svg.make('g'); this.agentLines = svg.make('g', { 'mask': 'url(#' + this.namespace + 'LineMask)', }); this.blocks = svg.make('g'); - this.actionShapes = svg.make('g'); - this.actionLabels = svg.make('g'); + this.shapes = svg.make('g'); + this.unmaskedShapes = svg.make('g'); this.base.appendChild(this.buildMetadata()); this.base.appendChild(this.themeDefs); this.base.appendChild(this.defs); this.base.appendChild(this.backgroundFills); - this.base.appendChild(this.agentLines); - this.base.appendChild(this.blocks); - this.base.appendChild(this.actionShapes); - this.base.appendChild(this.actionLabels); + this.base.appendChild( + svg.make('g', { + 'mask': 'url(#' + this.namespace + 'FullMask)', + }, [ + this.agentLines, + this.blocks, + this.shapes, + ]) + ); + this.base.appendChild(this.unmaskedShapes); this.title = new this.SVGTextBlockClass(this.base); this.sizer = new this.SVGTextBlockClass.SizeTester(this.base); @@ -5893,10 +5903,11 @@ define('sequence/Renderer',[ this.trigger('mouseout'); }; - const makeRegion = (o, stageOverride = null) => { - if(!o) { - o = svg.make('g'); - } + const makeRegion = ({ + stageOverride = null, + unmasked = false, + } = {}) => { + const o = svg.make('g'); const targetStage = (stageOverride || stage); this.addHighlightObject(targetStage.ln, o); o.setAttribute('class', 'region'); @@ -5907,7 +5918,7 @@ define('sequence/Renderer',[ o.addEventListener('click', () => { this.trigger('click', [targetStage]); }); - this.actionLabels.appendChild(o); + (unmasked ? this.unmaskedShapes : this.shapes).appendChild(o); return o; }; @@ -5916,9 +5927,8 @@ define('sequence/Renderer',[ primaryY: topY + topShift, fillLayer: this.backgroundFills, blockLayer: this.blocks, - shapeLayer: this.actionShapes, - labelLayer: this.actionLabels, - maskLayer: this.mask, + fullMaskLayer: this.fullMask, + lineMaskLayer: this.lineMask, theme: this.theme, agentInfos: this.agentInfos, textSizer: this.sizer, @@ -6020,10 +6030,15 @@ define('sequence/Renderer',[ this.width = x1 - x0; this.height = y1 - y0; - this.maskReveal.setAttribute('x', x0); - this.maskReveal.setAttribute('y', y0); - this.maskReveal.setAttribute('width', this.width); - this.maskReveal.setAttribute('height', this.height); + this.fullMaskReveal.setAttribute('x', x0); + this.fullMaskReveal.setAttribute('y', y0); + this.fullMaskReveal.setAttribute('width', this.width); + this.fullMaskReveal.setAttribute('height', this.height); + + this.lineMaskReveal.setAttribute('x', x0); + this.lineMaskReveal.setAttribute('y', y0); + this.lineMaskReveal.setAttribute('width', this.width); + this.lineMaskReveal.setAttribute('height', this.height); this.base.setAttribute('viewBox', ( x0 + ' ' + y0 + ' ' + @@ -6048,14 +6063,17 @@ define('sequence/Renderer',[ this.highlights.clear(); this.currentHighlight = -1; svg.empty(this.defs); - svg.empty(this.mask); + svg.empty(this.fullMask); + svg.empty(this.lineMask); svg.empty(this.backgroundFills); svg.empty(this.agentLines); svg.empty(this.blocks); - svg.empty(this.actionShapes); - svg.empty(this.actionLabels); - this.mask.appendChild(this.maskReveal); - this.defs.appendChild(this.mask); + svg.empty(this.shapes); + svg.empty(this.unmaskedShapes); + this.fullMask.appendChild(this.fullMaskReveal); + this.lineMask.appendChild(this.lineMaskReveal); + this.defs.appendChild(this.fullMask); + this.defs.appendChild(this.lineMask); this._resetState(); } @@ -6515,7 +6533,7 @@ define('sequence/themes/BaseTheme',[ return o; } const r = {}; - for(let k in o) { + for(const k in o) { if(o.hasOwnProperty(k)) { r[k] = deepCopy(o[k]); } @@ -6720,21 +6738,22 @@ define('sequence/themes/BaseTheme',[ let shape = null; const yPos = y + height / 2; if(labelWidth > 0) { - shape = svg.make('g'); - shape.appendChild(svg.make('line', Object.assign({ - 'x1': x, - 'y1': yPos, - 'x2': x + (width - labelWidth) / 2, - 'y2': yPos, - 'fill': 'none', - }, lineAttrs))); - shape.appendChild(svg.make('line', Object.assign({ - 'x1': x + (width + labelWidth) / 2, - 'y1': yPos, - 'x2': x + width, - 'y2': yPos, - 'fill': 'none', - }, lineAttrs))); + shape = svg.make('g', {}, [ + svg.make('line', Object.assign({ + 'x1': x, + 'y1': yPos, + 'x2': x + (width - labelWidth) / 2, + 'y2': yPos, + 'fill': 'none', + }, lineAttrs)), + svg.make('line', Object.assign({ + 'x1': x + (width + labelWidth) / 2, + 'y1': yPos, + 'x2': x + width, + 'y2': yPos, + 'fill': 'none', + }, lineAttrs)), + ]); } else { shape = svg.make('line', Object.assign({ 'x1': x, @@ -6770,40 +6789,38 @@ define('sequence/themes/BaseTheme',[ ) => { const maskGradID = env.addDef('tear-grad', () => { const px = 100 / width; - const grad = svg.make('linearGradient'); - grad.appendChild(svg.make('stop', { - 'offset': (fadeBegin * px) + '%', - 'stop-color': '#000000', - })); - grad.appendChild(svg.make('stop', { - 'offset': ((fadeBegin + fadeSize) * px) + '%', - 'stop-color': '#FFFFFF', - })); - grad.appendChild(svg.make('stop', { - 'offset': (100 - (fadeBegin + fadeSize) * px) + '%', - 'stop-color': '#FFFFFF', - })); - grad.appendChild(svg.make('stop', { - 'offset': (100 - fadeBegin * px) + '%', - 'stop-color': '#000000', - })); - return grad; + return svg.make('linearGradient', {}, [ + svg.make('stop', { + 'offset': (fadeBegin * px) + '%', + 'stop-color': '#000000', + }), + svg.make('stop', { + 'offset': ((fadeBegin + fadeSize) * px) + '%', + 'stop-color': '#FFFFFF', + }), + svg.make('stop', { + 'offset': (100 - (fadeBegin + fadeSize) * px) + '%', + 'stop-color': '#FFFFFF', + }), + svg.make('stop', { + 'offset': (100 - fadeBegin * px) + '%', + 'stop-color': '#000000', + }), + ]); }); const shapeMask = svg.make('mask', { 'maskUnits': 'userSpaceOnUse', - }); + }, [ + svg.make('rect', { + 'x': x, + 'y': y - 5, + 'width': width, + 'height': height + 10, + 'fill': 'url(#' + maskGradID + ')', + }), + ]); const shapeMaskID = env.addDef(shapeMask); - const shape = svg.make('g', { - 'mask': 'url(#' + shapeMaskID + ')', - }); - shapeMask.appendChild(svg.make('rect', { - 'x': x, - 'y': y - 5, - 'width': width, - 'height': height + 10, - 'fill': 'url(#' + maskGradID + ')', - })); if(labelWidth > 0) { shapeMask.appendChild(svg.make('rect', { 'x': x + (width - labelWidth) / 2, @@ -6827,10 +6844,15 @@ define('sequence/themes/BaseTheme',[ const pathTop = new SVGShapes.PatternedLine(pattern) .move(x, y) .line(x + width, y); - shape.appendChild(svg.make('path', Object.assign({ - 'd': pathTop.asPath(), - 'fill': 'none', - }, lineAttrs))); + + const shape = svg.make('g', { + 'mask': 'url(#' + shapeMaskID + ')', + }, [ + svg.make('path', Object.assign({ + 'd': pathTop.asPath(), + 'fill': 'none', + }, lineAttrs)), + ]); if(height > 0) { const pathBase = new SVGShapes.PatternedLine(pattern) @@ -9070,40 +9092,40 @@ define('sequence/themes/Sketch',[ {var1: 0, move: false} ); - const g = svg.make('g'); - g.appendChild(svg.make('path', Object.assign({ - 'd': ( - lT.nodes + - lF.nodes + - lR.nodes + - lB.nodes + - lL.nodes - ), - 'fill': '#FFFFFF', - }, PENCIL.normal))); - g.appendChild(svg.make('path', Object.assign({ - 'd': lF1.nodes + lF2.nodes, - 'fill': 'none', - }, PENCIL.normal))); - - return g; + return svg.make('g', {}, [ + svg.make('path', Object.assign({ + 'd': ( + lT.nodes + + lF.nodes + + lR.nodes + + lB.nodes + + lL.nodes + ), + 'fill': '#FFFFFF', + }, PENCIL.normal)), + svg.make('path', Object.assign({ + 'd': lF1.nodes + lF2.nodes, + 'fill': 'none', + }, PENCIL.normal)), + ]); } renderLineDivider({x, y, labelWidth, width, height}) { let shape = null; const yPos = y + height / 2; if(labelWidth > 0) { - shape = svg.make('g'); - shape.appendChild(this.renderLine( - {x, y: yPos}, - {x: x + (width - labelWidth) / 2, y: yPos}, - {} - )); - shape.appendChild(this.renderLine( - {x: x + (width + labelWidth) / 2, y: yPos}, - {x: x + width, y: yPos}, - {} - )); + shape = svg.make('g', {}, [ + this.renderLine( + {x, y: yPos}, + {x: x + (width - labelWidth) / 2, y: yPos}, + {} + ), + this.renderLine( + {x: x + (width + labelWidth) / 2, y: yPos}, + {x: x + width, y: yPos}, + {} + ), + ]); } else { shape = this.renderLine( {x, y: yPos}, @@ -9307,19 +9329,16 @@ define('sequence/themes/Sketch',[ const line = l1.nodes + l2.nodes; - const g = svg.make('g'); - - g.appendChild(svg.make('path', { - 'd': line + 'L' + x + ' ' + y, - 'fill': '#FFFFFF', - })); - - g.appendChild(svg.make('path', Object.assign({ - 'd': line, - 'fill': '#FFFFFF', - }, PENCIL.normal))); - - return g; + return svg.make('g', {}, [ + svg.make('path', { + 'd': line + 'L' + x + ' ' + y, + 'fill': '#FFFFFF', + }), + svg.make('path', Object.assign({ + 'd': line, + 'fill': '#FFFFFF', + }, PENCIL.normal)), + ]); } renderSeparator({x1, y1, x2, y2}) { diff --git a/lib/sequence-diagram.min.js b/lib/sequence-diagram.min.js index ad74b03..9b06016 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,A=[],v=typeof n;if(i=i||e,k=d(i),"undefined"===v||"function"===v){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:"