Merge branch 'develop' into feature/4935_subgraph-title-margin-config-option

This commit is contained in:
Matheus Braga 2023-11-17 21:41:27 -03:00 committed by GitHub
commit 42ac630304
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 704 additions and 88 deletions

View File

@ -1,4 +1,22 @@
'Type: Bug / Error': ['bug/*', fix/*]
'Type: Enhancement': ['feature/*', 'feat/*']
'Type: Other': ['other/*', 'chore/*', 'test/*', 'refactor/*']
'Area: Documentation': ['docs/*']
# yaml-language-server: $schema=https://raw.githubusercontent.com/release-drafter/release-drafter/master/schema.json
autolabeler:
- label: 'Type: Bug / Error'
branch:
- '/bug\/.+/'
- '/fix\/.+/'
- label: 'Type: Enhancement'
branch:
- '/feature\/.+/'
- '/feat\/.+/'
- label: 'Type: Other'
branch:
- '/other\/.+/'
- '/chore\/.+/'
- '/test\/.+/'
- '/refactor\/.+/'
- label: 'Area: Documentation'
branch:
- '/docs\/.+/'
template: |
This field is unused, as we only use this config file for labeling PRs.

View File

@ -25,8 +25,6 @@ categories:
change-template: '- $TITLE (#$NUMBER) @$AUTHOR'
sort-by: title
sort-direction: ascending
branches:
- develop
exclude-labels:
- 'Skip changelog'
no-changes-template: 'This release contains minor changes and bugfixes.'

View File

@ -1,23 +0,0 @@
name: Validate PR Labeler Configuration
on:
push:
paths:
- .github/workflows/pr-labeler-config-validator.yml
- .github/workflows/pr-labeler.yml
- .github/pr-labeler.yml
pull_request:
paths:
- .github/workflows/pr-labeler-config-validator.yml
- .github/workflows/pr-labeler.yml
- .github/pr-labeler.yml
jobs:
pr-labeler:
runs-on: ubuntu-latest
steps:
- name: Checkout Repository
uses: actions/checkout@v4
- name: Validate Configuration
uses: Yash-Singh1/pr-labeler-config-validator@releases/v0.0.3
with:
configuration-path: .github/pr-labeler.yml

View File

@ -1,13 +1,31 @@
name: Apply labels to PR
on:
pull_request_target:
types: [opened]
# required for pr-labeler to support PRs from forks
# ===================== ⛔ ☢️ 🚫 ⚠️ Warning ⚠️ 🚫 ☢️ ⛔ =======================
# Be very careful what you put in this GitHub Action workflow file to avoid
# malicious PRs from getting access to the Mermaid-js repo.
#
# Please read the following first before reviewing/merging:
# - https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#pull_request_target
# - https://securitylab.github.com/research/github-actions-preventing-pwn-requests/
types: [opened, reopened, synchronize]
permissions:
contents: read
jobs:
pr-labeler:
runs-on: ubuntu-latest
permissions:
contents: read # read permission is required to read config file
pull-requests: write # write permission is required to label PRs
steps:
- name: Label PR
uses: TimonVS/pr-labeler-action@v4
uses: release-drafter/release-drafter@v5
with:
config-name: pr-labeler.yml
disable-autolabeler: false
disable-releaser: true
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

View File

@ -5,11 +5,19 @@ on:
branches:
- develop
permissions:
contents: read
jobs:
draft-release:
runs-on: ubuntu-latest
permissions:
contents: write # write permission is required to create a github release
pull-requests: read # required to read PR titles/labels
steps:
- name: Draft Release
uses: toolmantim/release-drafter@v5
uses: release-drafter/release-drafter@v5
with:
disable-autolabeler: true
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

View File

@ -44,6 +44,22 @@ Try Live Editor previews of future releases: <a href="https://develop.git.mermai
<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
## Table of content
<details>
<summary>Expand contents</summary>
- [About](#about)
- [Examples](#examples)
- [Release](#release)
- [Related projects](#related-projects)
- [Contributors](#contributors)
- [Security and safe diagrams](#security-and-safe-diagrams)
- [Reporting vulnerabilities](#reporting-vulnerabilities)
- [Appreciation](#appreciation)
</details>
## About
<!-- <Main description> -->

View File

@ -701,4 +701,114 @@ gitGraph TB:
{}
);
});
it('34: should render a simple gitgraph with two branches from same commit', () => {
imgSnapshotTest(
`gitGraph
commit id:"1-abcdefg"
commit id:"2-abcdefg"
branch feature-001
commit id:"3-abcdefg"
commit id:"4-abcdefg"
checkout main
branch feature-002
commit id:"5-abcdefg"
checkout feature-001
merge feature-002
`,
{}
);
});
it('35: should render a simple gitgraph with two branches from same commit | Vertical Branch', () => {
imgSnapshotTest(
`gitGraph TB:
commit id:"1-abcdefg"
commit id:"2-abcdefg"
branch feature-001
commit id:"3-abcdefg"
commit id:"4-abcdefg"
checkout main
branch feature-002
commit id:"5-abcdefg"
checkout feature-001
merge feature-002
`,
{}
);
});
it('36: should render GitGraph with branch that is not used immediately', () => {
imgSnapshotTest(
`gitGraph LR:
commit id:"1-abcdefg"
branch x
checkout main
commit id:"2-abcdefg"
checkout x
commit id:"3-abcdefg"
checkout main
merge x
`,
{}
);
});
it('37: should render GitGraph with branch that is not used immediately | Vertical Branch', () => {
imgSnapshotTest(
`gitGraph TB:
commit id:"1-abcdefg"
branch x
checkout main
commit id:"2-abcdefg"
checkout x
commit id:"3-abcdefg"
checkout main
merge x
`,
{}
);
});
it('38: should render GitGraph with branch and sub-branch neither of which used immediately', () => {
imgSnapshotTest(
`gitGraph LR:
commit id:"1-abcdefg"
branch x
checkout main
commit id:"2-abcdefg"
checkout x
commit id:"3-abcdefg"
checkout main
merge x
checkout x
branch y
checkout x
commit id:"4-abcdefg"
checkout y
commit id:"5-abcdefg"
checkout x
merge y
`,
{}
);
});
it('39: should render GitGraph with branch and sub-branch neither of which used immediately | Vertical Branch', () => {
imgSnapshotTest(
`gitGraph TB:
commit id:"1-abcdefg"
branch x
checkout main
commit id:"2-abcdefg"
checkout x
commit id:"3-abcdefg"
checkout main
merge x
checkout x
branch y
checkout x
commit id:"4-abcdefg"
checkout y
commit id:"5-abcdefg"
checkout x
merge y
`,
{}
);
});
});

View File

@ -14,30 +14,364 @@
</head>
<body>
<h1>Git diagram demo</h1>
<h1>Git graph demo</h1>
<h2>Simple "branch and merge" graph</h2>
<pre class="mermaid">
---
title: Simple Git diagram
title: Simple "branch and merge" (left-to-right)
---
gitGraph:
options
{
"nodeSpacing": 50,
"nodeRadius": 5
}
end
branch master
gitGraph LR:
commit
branch newbranch
checkout newbranch
commit
checkout main
merge newbranch
</pre>
<pre class="mermaid">
---
title: Simple "branch and merge" (top-to-bottom)
---
gitGraph TB:
commit
checkout master
branch newbranch
checkout newbranch
commit
checkout main
merge newbranch
</pre>
<h2>Continuous development graph</h2>
<pre class="mermaid">
---
title: Continuous development (left-to-right)
---
gitGraph LR:
commit
branch develop
checkout develop
commit
checkout main
merge develop
checkout develop
commit
checkout main
merge develop
</pre>
<pre class="mermaid">
---
title: Continuous development (top-to-bottom)
---
gitGraph TB:
commit
branch develop
checkout develop
commit
checkout main
merge develop
checkout develop
commit
checkout main
merge develop
</pre>
<h2>Merge feature to advanced main graph</h2>
<pre class="mermaid">
---
title: Merge feature to advanced main (left-to-right)
---
gitGraph LR:
commit
branch newbranch
checkout newbranch
commit
checkout main
commit
merge newbranch
</pre>
<pre class="mermaid">
---
title: Merge feature to advanced main (top-to-bottom)
---
gitGraph TB:
commit
branch newbranch
checkout newbranch
commit
checkout main
commit
merge newbranch
</pre>
<h2>Two-way merges</h2>
<pre class="mermaid">
---
title: Two-way merges (left-to-right)
---
gitGraph LR:
commit
branch develop
checkout develop
commit
checkout main
merge develop
commit
checkout develop
merge main
commit
checkout main
merge develop
</pre>
<pre class="mermaid">
---
title: Two-way merges (top-to-bottom)
---
gitGraph TB:
commit
branch develop
checkout develop
commit
checkout main
merge develop
commit
checkout develop
merge main
commit
checkout main
merge develop
</pre>
<h2>Cherry-pick from branch graph</h2>
<pre class="mermaid">
---
title: Cherry-pick from branch (left-to-right)
---
gitGraph LR:
commit
branch newbranch
checkout newbranch
commit id: "Pick me"
checkout main
commit
checkout newbranch
commit
checkout main
cherry-pick id: "Pick me"
</pre>
<pre class="mermaid">
---
title: Cherry-pick from branch (top-to-bottom)
---
gitGraph TB:
commit
branch newbranch
checkout newbranch
commit id: "Pick me"
checkout main
commit
checkout newbranch
commit
checkout main
cherry-pick id: "Pick me"
</pre>
<h2>Cherry-pick from main graph</h2>
<pre class="mermaid">
---
title: Cherry-pick from main (left-to-right)
---
gitGraph LR:
commit
branch develop
commit
checkout main
commit id:"A"
checkout develop
commit
cherry-pick id: "A"
</pre>
<pre class="mermaid">
---
title: Cherry-pick from main (top-to-bottom)
---
gitGraph TB:
commit
branch develop
commit
checkout main
commit id:"A"
checkout develop
commit
cherry-pick id: "A"
</pre>
<h2>Cherry-pick then merge graph</h2>
<pre class="mermaid">
---
title: Cherry-pick then merge (left-to-right)
---
gitGraph LR:
commit
branch newbranch
checkout newbranch
commit id: "Pick me"
checkout main
commit
checkout newbranch
commit
checkout main
cherry-pick id: "Pick me"
merge newbranch
</pre>
<pre class="mermaid">
---
title: Cherry-pick then merge (top-to-bottom)
---
gitGraph TB:
commit
branch newbranch
checkout newbranch
commit id: "Pick me"
checkout main
commit
checkout newbranch
commit
checkout main
cherry-pick id: "Pick me"
merge newbranch
</pre>
<h2>Merge from main onto undeveloped branch graph</h2>
<pre class="mermaid">
---
title: Merge from main onto undeveloped branch (left-to-right)
---
gitGraph LR:
commit
branch develop
commit
checkout main
commit
checkout develop
merge main
</pre>
<pre class="mermaid">
---
title: Merge from main onto undeveloped branch (top-to-bottom)
---
gitGraph TB:
commit
branch develop
commit
checkout main
commit
checkout develop
merge main
</pre>
<h2>Merge from main onto developed branch graph</h2>
<pre class="mermaid">
---
title: Merge from main onto developed branch (left-to-right)
---
gitGraph LR:
commit
branch develop
commit
checkout main
commit
checkout develop
commit
merge main
</pre>
<pre class="mermaid">
---
title: Merge from main onto developed branch (top-to-bottom)
---
gitGraph TB:
commit
branch develop
commit
checkout main
commit
checkout develop
commit
merge main
</pre>
<h2>Two branches from same commit graph</h2>
<pre class="mermaid">
---
title: Two branches from same commit (left-to-right)
---
gitGraph LR:
commit
commit
branch feature-001
commit
commit
checkout main
branch feature-002
commit
checkout feature-001
merge feature-002
</pre>
<pre class="mermaid">
---
title: Two branches from same commit (top-to-bottom)
---
gitGraph TB:
commit
commit
branch feature-001
commit
commit
checkout main
branch feature-002
commit
checkout feature-001
merge feature-002
</pre>
<h2>Three branches and a cherry-pick from each graph</h2>
<pre class="mermaid">
---
title: Three branches and a cherry-pick from each (left-to-right)
---
gitGraph LR:
commit id: "ZERO"
branch develop
commit id:"A"
checkout main
commit id:"ONE"
checkout develop
commit id:"B"
branch featureA
commit id:"FIX"
commit id: "FIX-2"
checkout main
commit id:"TWO"
cherry-pick id:"A"
commit id:"THREE"
cherry-pick id:"FIX"
checkout develop
commit id:"C"
merge featureA
</pre>
<pre class="mermaid">
---
title: Three branches and a cherry-pick from each (top-to-bottom)
---
gitGraph TB:
commit id: "ZERO"
branch develop
commit id:"A"
checkout main
commit id:"ONE"
checkout develop
commit id:"B"
branch featureA
commit id:"FIX"
commit id: "FIX-2"
checkout main
commit id:"TWO"
cherry-pick id:"A"
commit id:"THREE"
cherry-pick id:"FIX"
checkout develop
commit id:"C"
merge featureA
</pre>
<script type="module">
import mermaid from './mermaid.esm.mjs';
const ALLOWED_TAGS = [

View File

@ -164,6 +164,13 @@
end
</pre>
<pre class="mermaid">
sequenceDiagram
actor Alice
actor John
Alice-xJohn: Hello John, how are you?
John--xAlice: Great!
</pre>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({

View File

@ -4,7 +4,7 @@
"version": "10.2.4",
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"type": "module",
"packageManager": "pnpm@8.10.2",
"packageManager": "pnpm@8.10.4",
"keywords": [
"diagram",
"markdown",

View File

@ -681,3 +681,82 @@ describe('given text representing a method, ', function () {
});
});
});
describe('given text representing an attribute', () => {
describe('when the attribute has no modifiers', () => {
it('should parse the display text correctly', () => {
const str = 'name String';
const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
expect(displayDetails.displayText).toBe('name String');
expect(displayDetails.cssStyle).toBe('');
});
});
describe('when the attribute has public "+" modifier', () => {
it('should parse the display text correctly', () => {
const str = '+name String';
const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
expect(displayDetails.displayText).toBe('+name String');
expect(displayDetails.cssStyle).toBe('');
});
});
describe('when the attribute has protected "#" modifier', () => {
it('should parse the display text correctly', () => {
const str = '#name String';
const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
expect(displayDetails.displayText).toBe('#name String');
expect(displayDetails.cssStyle).toBe('');
});
});
describe('when the attribute has private "-" modifier', () => {
it('should parse the display text correctly', () => {
const str = '-name String';
const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
expect(displayDetails.displayText).toBe('-name String');
expect(displayDetails.cssStyle).toBe('');
});
});
describe('when the attribute has internal "~" modifier', () => {
it('should parse the display text correctly', () => {
const str = '~name String';
const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
expect(displayDetails.displayText).toBe('~name String');
expect(displayDetails.cssStyle).toBe('');
});
});
describe('when the attribute has static "$" modifier', () => {
it('should parse the display text correctly and apply static css style', () => {
const str = 'name String$';
const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
expect(displayDetails.displayText).toBe('name String');
expect(displayDetails.cssStyle).toBe(staticCssStyle);
});
});
describe('when the attribute has abstract "*" modifier', () => {
it('should parse the display text correctly and apply abstract css style', () => {
const str = 'name String*';
const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
expect(displayDetails.displayText).toBe('name String');
expect(displayDetails.cssStyle).toBe(abstractCssStyle);
});
});
});

View File

@ -106,7 +106,7 @@ export class ClassMember {
this.visibility = firstChar as Visibility;
}
if (lastChar.match(/[*?]/)) {
if (lastChar.match(/[$*]/)) {
potentialClassifier = lastChar;
}

View File

@ -201,6 +201,13 @@ export const updateLinkInterpolate = function (positions, interp) {
*/
export const updateLink = function (positions, style) {
positions.forEach(function (pos) {
if (pos >= edges.length) {
throw new Error(
`The index ${pos} for linkStyle is out of bounds. Valid indices for linkStyle are between 0 and ${
edges.length - 1
}. (Help: Ensure that the index is within the range of existing edges.)`
);
}
if (pos === 'default') {
edges.defaultStyle = style;
} else {

View File

@ -286,6 +286,30 @@ describe('[Style] when parsing', () => {
expect(edges[0].type).toBe('arrow_point');
});
it('should handle style definitions within number of edges', function () {
expect(() =>
flow.parser
.parse(
`graph TD
A-->B
linkStyle 1 stroke-width:1px;`
)
.toThrow(
'The index 1 for linkStyle is out of bounds. Valid indices for linkStyle are between 0 and 0. (Help: Ensure that the index is within the range of existing edges.)'
)
);
});
it('should handle style definitions within number of edges', function () {
const res = flow.parser.parse(`graph TD
A-->B
linkStyle 0 stroke-width:1px;`);
const edges = flow.parser.yy.getEdges();
expect(edges[0].style[0]).toBe('stroke-width:1px');
});
it('should handle multi-numbered style definitions with more then 1 digit in a row', function () {
const res = flow.parser.parse(
'graph TD\n' +

View File

@ -338,26 +338,34 @@ const drawCommits = (svg, commits, modifyGraph) => {
};
/**
* Detect if there are other commits between commit1's x-position and commit2's x-position on the
* same branch as commit2.
* Detect if there are commits
* between commitA's x-position
* and commitB's x-position on the
* same branch as commitA, where
* commitA isn't main
*
* @param {any} commit1
* @param {any} commit2
* @param {any} commitA
* @param {any} commitB
* @param branchToGetCurve
* @param p1
* @param p2
* @param allCommits
* @returns {boolean} If there are commits between commit1's x-position and commit2's x-position
* @returns {boolean}
* If there are commits between
* commitA's x-position
* and commitB's x-position
* on the source branch, where
* source branch is not main
* return true
*/
const hasOverlappingCommits = (commit1, commit2, allCommits) => {
// Find commits on the same branch as commit2
const keys = Object.keys(allCommits);
const overlappingComits = keys.filter((key) => {
return (
allCommits[key].branch === commit2.branch &&
allCommits[key].seq > commit1.seq &&
allCommits[key].seq < commit2.seq
);
const shouldRerouteArrow = (commitA, commitB, p1, p2, allCommits) => {
const commitBIsFurthest = dir === 'TB' ? p1.x < p2.x : p1.y < p2.y;
const branchToGetCurve = commitBIsFurthest ? commitB.branch : commitA.branch;
const isOnBranchToGetCurve = (x) => x.branch === branchToGetCurve;
const isBetweenCommits = (x) => x.seq > commitA.seq && x.seq < commitB.seq;
return Object.values(allCommits).some((commitX) => {
return isBetweenCommits(commitX) && isOnBranchToGetCurve(commitX);
});
return overlappingComits.length > 0;
};
/**
@ -388,49 +396,61 @@ const findLane = (y1, y2, depth = 0) => {
* Draw the lines between the commits. They were arrows initially.
*
* @param {any} svg
* @param {any} commit1
* @param {any} commit2
* @param {any} commitA
* @param {any} commitB
* @param {any} allCommits
*/
const drawArrow = (svg, commit1, commit2, allCommits) => {
const p1 = commitPos[commit1.id];
const p2 = commitPos[commit2.id];
const overlappingCommits = hasOverlappingCommits(commit1, commit2, allCommits);
// log.debug('drawArrow', p1, p2, overlappingCommits, commit1.id, commit2.id);
const drawArrow = (svg, commitA, commitB, allCommits) => {
const p1 = commitPos[commitA.id]; // arrowStart
const p2 = commitPos[commitB.id]; // arrowEnd
const arrowNeedsRerouting = shouldRerouteArrow(commitA, commitB, p1, p2, allCommits);
// log.debug('drawArrow', p1, p2, arrowNeedsRerouting, commitA.id, commitB.id);
// Lower-right quadrant logic; top-left is 0,0
let arc = '';
let arc2 = '';
let radius = 0;
let offset = 0;
let colorClassNum = branchPos[commit2.branch].index;
let colorClassNum = branchPos[commitB.branch].index;
let lineDef;
if (overlappingCommits) {
if (arrowNeedsRerouting) {
arc = 'A 10 10, 0, 0, 0,';
arc2 = 'A 10 10, 0, 0, 1,';
radius = 10;
offset = 10;
// Figure out the color of the arrow,arrows going down take the color from the destination branch
colorClassNum = branchPos[commit2.branch].index;
const lineY = p1.y < p2.y ? findLane(p1.y, p2.y) : findLane(p2.y, p1.y);
const lineX = p1.x < p2.x ? findLane(p1.x, p2.x) : findLane(p2.x, p1.x);
if (dir === 'TB') {
if (p1.x < p2.x) {
// Source commit is on branch position left of destination commit
// so render arrow rightward with colour of destination branch
colorClassNum = branchPos[commitB.branch].index;
lineDef = `M ${p1.x} ${p1.y} L ${lineX - radius} ${p1.y} ${arc2} ${lineX} ${
p1.y + offset
} L ${lineX} ${p2.y - radius} ${arc} ${lineX + offset} ${p2.y} L ${p2.x} ${p2.y}`;
} else {
// Source commit is on branch position right of destination commit
// so render arrow leftward with colour of source branch
colorClassNum = branchPos[commitA.branch].index;
lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc} ${lineX} ${
p1.y + offset
} L ${lineX} ${p2.y - radius} ${arc2} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`;
}
} else {
if (p1.y < p2.y) {
// Source commit is on branch positioned above destination commit
// so render arrow downward with colour of destination branch
colorClassNum = branchPos[commitB.branch].index;
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY - radius} ${arc} ${
p1.x + offset
} ${lineY} L ${p2.x - radius} ${lineY} ${arc2} ${p2.x} ${lineY + offset} L ${p2.x} ${p2.y}`;
} else {
// Source commit is on branch positioned below destination commit
// so render arrow upward with colour of source branch
colorClassNum = branchPos[commitA.branch].index;
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY + radius} ${arc2} ${
p1.x + offset
} ${lineY} L ${p2.x - radius} ${lineY} ${arc} ${p2.x} ${lineY - offset} L ${p2.x} ${p2.y}`;
@ -445,7 +465,7 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
offset = 20;
// Figure out the color of the arrow,arrows going down take the color from the destination branch
colorClassNum = branchPos[commit2.branch].index;
colorClassNum = branchPos[commitB.branch].index;
lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc2} ${p2.x} ${
p1.y + offset
@ -458,14 +478,14 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
offset = 20;
// Arrows going up take the color from the source branch
colorClassNum = branchPos[commit1.branch].index;
colorClassNum = branchPos[commitA.branch].index;
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc2} ${p1.x - offset} ${
p2.y
} L ${p2.x} ${p2.y}`;
}
if (p1.x === p2.x) {
colorClassNum = branchPos[commit1.branch].index;
colorClassNum = branchPos[commitA.branch].index;
lineDef = `M ${p1.x} ${p1.y} L ${p1.x + radius} ${p1.y} ${arc} ${p1.x + offset} ${
p2.y + radius
} L ${p2.x} ${p2.y}`;
@ -475,10 +495,8 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
arc = 'A 20 20, 0, 0, 0,';
radius = 20;
offset = 20;
// Figure out the color of the arrow,arrows going down take the color from the destination branch
colorClassNum = branchPos[commit2.branch].index;
// Arrows going up take the color from the target branch
colorClassNum = branchPos[commitB.branch].index;
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
p2.x
} ${p2.y}`;
@ -487,16 +505,15 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
arc = 'A 20 20, 0, 0, 0,';
radius = 20;
offset = 20;
// Arrows going up take the color from the source branch
colorClassNum = branchPos[commit1.branch].index;
colorClassNum = branchPos[commitA.branch].index;
lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc} ${p2.x} ${p1.y - offset} L ${
p2.x
} ${p2.y}`;
}
if (p1.y === p2.y) {
colorClassNum = branchPos[commit1.branch].index;
colorClassNum = branchPos[commitA.branch].index;
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
p2.x
} ${p2.y}`;

View File

@ -829,6 +829,11 @@ export const draw = function (_text: string, id: string, _version: string, diagO
bounds.insert(activationData.startx, verticalPos - 10, activationData.stopx, verticalPos);
}
log.debug('createdActors', createdActors);
log.debug('destroyedActors', destroyedActors);
drawActors(diagram, actors, actorKeys, false);
// Draw the messages/signals
let sequenceIndex = 1;
let sequenceIndexStep = 1;
@ -1028,14 +1033,12 @@ export const draw = function (_text: string, id: string, _version: string, diagO
}
});
log.debug('createdActors', createdActors);
log.debug('destroyedActors', destroyedActors);
drawActors(diagram, actors, actorKeys, false);
messagesToDraw.forEach((e) => drawMessage(diagram, e.messageModel, e.lineStartY, diagObj));
if (conf.mirrorActors) {
drawActors(diagram, actors, actorKeys, true);
}
backgrounds.forEach((e) => svgDraw.drawBackgroundRect(diagram, e));
fixLifeLineHeights(diagram, actors, actorKeys, conf);

View File

@ -324,7 +324,7 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) {
const center = actor.x + actor.width / 2;
const centerY = actorY + 5;
const boxpluslineGroup = elem.append('g').lower();
const boxpluslineGroup = elem.append('g');
var g = boxpluslineGroup;
if (!isFooter) {