Skip to content

Commit 2821b85

Browse files
MatthboMatthbo
authored
Remove unused mermaid flavoured flow code (#63)
1 parent 3269032 commit 2821b85

19 files changed

Lines changed: 1727 additions & 1971 deletions

File tree

‎package.json‎

Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -7,51 +7,52 @@
77
"serve": "ng serve",
88
"build": "ng build frank-config-layout",
99
"test": "ng test frank-config-layout --no-watch --no-progress --browsers=ChromeHeadless",
10+
"test:browser": "ng test frank-config-layout",
1011
"test:playground": "ng test frank-config-layout-playground",
1112
"watch": "ng build frank-config-layout --watch",
1213
"watch:playground": "ng build frank-config-layout --watch"
1314
},
1415
"private": true,
1516
"dependencies": {
16-
"@angular/animations": "^21.0.8",
17-
"@angular/cdk": "^21.0.6",
18-
"@angular/common": "^21.0.8",
19-
"@angular/compiler": "^21.0.8",
20-
"@angular/core": "^21.0.8",
21-
"@angular/forms": "^21.0.8",
22-
"@angular/platform-browser": "^21.0.8",
23-
"@angular/platform-browser-dynamic": "^21.0.8",
24-
"@angular/router": "^21.0.8",
17+
"@angular/animations": "^21.1.5",
18+
"@angular/cdk": "^21.1.5",
19+
"@angular/common": "^21.1.5",
20+
"@angular/compiler": "^21.1.5",
21+
"@angular/core": "^21.1.5",
22+
"@angular/forms": "^21.1.5",
23+
"@angular/platform-browser": "^21.1.5",
24+
"@angular/platform-browser-dynamic": "^21.1.5",
25+
"@angular/router": "^21.1.5",
2526
"@rx-angular/state": "^21.0.0",
2627
"@rx-angular/template": "^21.0.0",
2728
"rxjs": "~7.8.2",
2829
"tslib": "^2.8.1",
29-
"zone.js": "~0.16.0"
30+
"zone.js": "~0.16.1"
3031
},
3132
"devDependencies": {
32-
"@angular-eslint/builder": "^21.1.0",
33-
"@angular-eslint/eslint-plugin": "^21.1.0",
34-
"@angular-eslint/eslint-plugin-template": "^21.1.0",
35-
"@angular-eslint/schematics": "^21.1.0",
36-
"@angular-eslint/template-parser": "^21.1.0",
37-
"@angular/build": "^21.0.5",
38-
"@angular/cli": "^21.0.5",
39-
"@angular/compiler-cli": "^21.0.8",
40-
"@types/jasmine": "~5.1.14",
41-
"@typescript-eslint/eslint-plugin": "^8.52.0",
42-
"@typescript-eslint/parser": "^8.52.0",
33+
"@angular-eslint/builder": "^21.2.0",
34+
"@angular-eslint/eslint-plugin": "^21.2.0",
35+
"@angular-eslint/eslint-plugin-template": "^21.2.0",
36+
"@angular-eslint/schematics": "^21.2.0",
37+
"@angular-eslint/template-parser": "^21.2.0",
38+
"@angular/build": "^21.1.5",
39+
"@angular/cli": "^21.1.5",
40+
"@angular/compiler-cli": "^21.1.5",
41+
"@types/jasmine": "~5.1.15",
42+
"@typescript-eslint/eslint-plugin": "^8.56.1",
43+
"@typescript-eslint/parser": "^8.56.1",
4344
"eslint": "^8.57.1",
4445
"eslint-config-prettier": "^9.1.2",
45-
"eslint-plugin-prettier": "^5.5.4",
46+
"eslint-plugin-prettier": "^5.5.5",
4647
"eslint-plugin-unicorn": "^55.0.0",
4748
"jasmine-core": "^5.13.0",
4849
"karma": "^6.4.4",
4950
"karma-chrome-launcher": "~3.2.0",
5051
"karma-coverage": "~2.2.1",
5152
"karma-jasmine": "~5.1.0",
5253
"karma-jasmine-html-reporter": "~2.1.0",
53-
"ng-packagr": "^21.0.1",
54-
"prettier": "^3.7.4",
54+
"ng-packagr": "^21.2.0",
55+
"prettier": "^3.8.1",
5556
"typescript": "~5.9.3"
5657
},
5758
"packageManager": "pnpm@10.28.0+sha512.05df71d1421f21399e053fde567cea34d446fa02c76571441bfc1c7956e98e363088982d940465fd34480d4d90a0668bc12362f8aa88000a64e83d0b0e47be48"

‎pnpm-lock.yaml‎

Lines changed: 1411 additions & 1676 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎projects/frank-config-layout/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@frankframework/frank-config-layout",
3-
"version": "1.2.8",
3+
"version": "1.3.0",
44
"description": "Calculate a nice layout for Frank configurations",
55
"main": "master",
66
"contributors": [

projects/frank-config-layout/src/lib/mermaid2svg.spec.ts renamed to projects/frank-config-layout/src/lib/flow2svg.spec.ts

Lines changed: 65 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
1-
import { Mermaid2svgService } from './mermaid2svg';
1+
import { Flow2svgService } from './flow2svg';
22
import { getFactoryDimensions, SvgResult } from '../public_api';
33

4-
const input = `Start("My start"):::normal
5-
N1("Node 1"):::normal
6-
N2("Node 2"):::normal
7-
N3("Node 3"):::errorOutline
8-
End("End node"):::normal
9-
Start --> |success| N1
10-
Start --> |success| N2
11-
Start --> |success| N3
12-
N1 --> |failure| End
13-
N2 --> |success| End
14-
N1 --> |success| N2
15-
N3 --> |success| End`;
4+
const input = `Start('<text>My start</text>'):::normal
5+
N1('<text>Node 1</text>'):::normal
6+
N2('<text>Node 2</text>'):::normal
7+
N3('<text>Node 3</text>'):::errorOutline
8+
End('<text>End node</text>'):::normal
9+
Start --> |<text>success</text>| N1
10+
Start --> |<text>success</text>| N2
11+
Start --> |<text>success</text>| N3
12+
N1 --> |<text>failure</text>| End
13+
N2 --> |<text>success</text>| End
14+
N1 --> |<text>success</text>| N2
15+
N3 --> |<text>success</text>| End`;
1616

17-
// In the GUI, enter the above Mermaid text. Then look at the bottom
17+
// In the GUI, enter the above Flow text. Then look at the bottom
1818
// under the heading "Static SVG". If that image looks good, copy
1919
// the text next to the static SVG here.
2020
//
@@ -24,7 +24,7 @@ N3 --> |success| End`;
2424
//
2525
const expectedSvg = `<svg class="svg" xmlns="http://www.w3.org/2000/svg"
2626
width="286" height="480" >
27-
<defs>
27+
<defs>
2828
<style>
2929
.rectangle {
3030
fill: transparent;
@@ -73,90 +73,90 @@ const expectedSvg = `<svg class="svg" xmlns="http://www.w3.org/2000/svg"
7373
<path d="M 0 0 L 4 2 L 0 4 z" />
7474
</marker>
7575
</defs>
76-
<g class="frank-flowchart-node-Start" transform="translate(78, 3)">
76+
<g class="frank-flowchart-node-Start" transform="translate(78, 3)">
7777
<rect class="rectangle"
7878
width="95"
7979
height="54"
8080
rx="5">
8181
</rect>
8282
</g>
83-
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text data-html-node=#text x="125" y="30">My start</text></g>
84-
<g class="frank-flowchart-node-N1" transform="translate(87, 123)">
83+
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text x="125" y="30">My start</text></g>
84+
<g class="frank-flowchart-node-N1" transform="translate(87, 123)">
8585
<rect class="rectangle"
8686
width="77"
8787
height="54"
8888
rx="5">
8989
</rect>
9090
</g>
91-
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text data-html-node=#text x="125" y="150">Node 1</text></g>
92-
<g class="frank-flowchart-node-N3" transform="translate(194, 123)">
91+
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text x="125" y="150">Node 1</text></g>
92+
<g class="frank-flowchart-node-N3" transform="translate(194, 123)">
9393
<rect class="rectangle errorOutline"
9494
width="77"
9595
height="54"
9696
rx="5">
9797
</rect>
9898
</g>
99-
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text data-html-node=#text x="232" y="150">Node 3</text></g>
100-
<g class="frank-flowchart-node-N2" transform="translate(15, 243)">
99+
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text x="232" y="150">Node 3</text></g>
100+
<g class="frank-flowchart-node-N2" transform="translate(15, 243)">
101101
<rect class="rectangle"
102102
width="77"
103103
height="54"
104104
rx="5">
105105
</rect>
106106
</g>
107-
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text data-html-node=#text x="53" y="270">Node 2</text></g>
108-
<g class="frank-flowchart-node-End" transform="translate(90, 363)">
107+
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text x="53" y="270">Node 2</text></g>
108+
<g class="frank-flowchart-node-End" transform="translate(90, 363)">
109109
<rect class="rectangle"
110110
width="95"
111111
height="54"
112112
rx="5">
113113
</rect>
114114
</g>
115-
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text data-html-node=#text x="137" y="390">End node</text></g>
116-
<g class="frank-flowchart-edge-Start-N1">
115+
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text x="137" y="390">End node</text></g>
116+
<g class="frank-flowchart-edge-Start-N1">
117117
<polyline class="line" points="125,56 125,123" marker-end="url(#arrow)"/>
118118
</g>
119-
<g class="frank-flowchart-edge-Start-intermediate1">
119+
<g class="frank-flowchart-edge-Start-intermediate1">
120120
<polyline class="line" points="101,56 42,150" />
121121
</g>
122-
<g class="frank-flowchart-edge-intermediate1-N2">
122+
<g class="frank-flowchart-edge-intermediate1-N2">
123123
<polyline class="line" points="42,150 34,243" marker-end="url(#arrow)"/>
124124
</g>
125-
<g class="frank-flowchart-edge-Start-N3">
125+
<g class="frank-flowchart-edge-Start-N3">
126126
<polyline class="line" points="148,56 232,123" marker-end="url(#arrow)"/>
127127
</g>
128-
<g class="frank-flowchart-edge-N1-intermediate2">
128+
<g class="frank-flowchart-edge-N1-intermediate2">
129129
<polyline class="line error" points="144,176 140,270" />
130130
</g>
131-
<g class="frank-flowchart-edge-intermediate2-End">
131+
<g class="frank-flowchart-edge-intermediate2-End">
132132
<polyline class="line error" points="140,270 137,363" marker-end="url(#arrow)"/>
133133
</g>
134-
<g class="frank-flowchart-edge-N2-End">
134+
<g class="frank-flowchart-edge-N2-End">
135135
<polyline class="line" points="53,296 113,363" marker-end="url(#arrow)"/>
136136
</g>
137-
<g class="frank-flowchart-edge-N1-N2">
137+
<g class="frank-flowchart-edge-N1-N2">
138138
<polyline class="line" points="106,176 72,243" marker-end="url(#arrow)"/>
139139
</g>
140-
<g class="frank-flowchart-edge-N3-intermediate3">
140+
<g class="frank-flowchart-edge-N3-intermediate3">
141141
<polyline class="line error" points="232,176 196,270" />
142142
</g>
143-
<g class="frank-flowchart-edge-intermediate3-End">
143+
<g class="frank-flowchart-edge-intermediate3-End">
144144
<polyline class="line error" points="196,270 160,363" marker-end="url(#arrow)"/>
145145
</g>
146-
<g text-anchor="middle" dominant-baseline="middle"><text class="label-text" x="82" y="86" font-size="10">success</text><text class="label-text" x="125" y="86" font-size="10">success</text><text class="label-text" x="186" y="86" font-size="10">success</text><text class="label-text" x="91" y="206" font-size="10">success</text><text class="label-text" x="143" y="206" font-size="10">failure</text><text class="label-text" x="221" y="206" font-size="10">success</text><text class="label-text" x="80" y="326" font-size="10">success</text></g></svg>`;
146+
<g text-anchor="middle" dominant-baseline="middle"><text class="label-text" x="82" y="86" font-size="10">success</text><text class="label-text" x="125" y="86" font-size="10">success</text><text class="label-text" x="186" y="86" font-size="10">success</text><text class="label-text" x="91" y="206" font-size="10">success</text><text class="label-text" x="143" y="206" font-size="10">failure</text><text class="label-text" x="221" y="206" font-size="10">success</text><text class="label-text" x="80" y="326" font-size="10">success</text></g></svg>`;
147147

148-
const inputMultiline = `Start("My start<br/>subtitle"):::normal
149-
N1("Node 1<br/>subtitle"):::normal
150-
N2("Node 2<br/>subtitle"):::normal
151-
N3("Node 3<br/>subtitle"):::errorOutline
152-
End("End node<br/>subtitle"):::normal
153-
Start --> |success<br/>other| N1
154-
Start --> |success<br/>other| N2
155-
Start --> |success| N3
156-
N1 --> |failure| End
157-
N2 --> |success| End
158-
N1 --> |success| N2
159-
N3 --> |success| End`;
148+
const inputMultiline = `Start('<text>My start</text><text>subtitle</text>'):::normal
149+
N1('<text>Node 1</text><text>subtitle</text>'):::normal
150+
N2('<text>Node 2</text><text>subtitle</text>'):::normal
151+
N3('<text>Node 3</text><text>subtitle</text>'):::errorOutline
152+
End('<text>End node</text><text>subtitle</text>'):::normal
153+
Start --> |<text>success</text><text>other</text>| N1
154+
Start --> |<text>success</text><text>other</text>| N2
155+
Start --> |<text>success</text>| N3
156+
N1 --> |<text>failure</text>| End
157+
N2 --> |<text>success</text>| End
158+
N1 --> |<text>success</text>| N2
159+
N3 --> |<text>success</text>| End`;
160160

161161
const expectedMultiline = `<svg class="svg" xmlns="http://www.w3.org/2000/svg"
162162
width="326" height="480" >
@@ -216,39 +216,39 @@ const expectedMultiline = `<svg class="svg" xmlns="http://www.w3.org/2000/svg"
216216
rx="5">
217217
</rect>
218218
</g>
219-
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text data-html-node=#text x="138" y="23">My start</text><text data-html-node=#text x="138" y="39">subtitle</text></g>
219+
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text x="138" y="23">My start</text><text x="138" y="39">subtitle</text></g>
220220
<g class="frank-flowchart-node-N1" transform="translate(91, 123)">
221221
<rect class="rectangle"
222222
width="95"
223223
height="54"
224224
rx="5">
225225
</rect>
226226
</g>
227-
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text data-html-node=#text x="138" y="143">Node 1</text><text data-html-node=#text x="138" y="159">subtitle</text></g>
227+
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text x="138" y="143">Node 1</text><text x="138" y="159">subtitle</text></g>
228228
<g class="frank-flowchart-node-N3" transform="translate(216, 123)">
229229
<rect class="rectangle errorOutline"
230230
width="95"
231231
height="54"
232232
rx="5">
233233
</rect>
234234
</g>
235-
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text data-html-node=#text x="263" y="143">Node 3</text><text data-html-node=#text x="263" y="159">subtitle</text></g>
235+
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text x="263" y="143">Node 3</text><text x="263" y="159">subtitle</text></g>
236236
<g class="frank-flowchart-node-N2" transform="translate(15, 243)">
237237
<rect class="rectangle"
238238
width="95"
239239
height="54"
240240
rx="5">
241241
</rect>
242242
</g>
243-
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text data-html-node=#text x="62" y="263">Node 2</text><text data-html-node=#text x="62" y="279">subtitle</text></g>
243+
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text x="62" y="263">Node 2</text><text x="62" y="279">subtitle</text></g>
244244
<g class="frank-flowchart-node-End" transform="translate(108, 363)">
245245
<rect class="rectangle"
246246
width="95"
247247
height="54"
248248
rx="5">
249249
</rect>
250250
</g>
251-
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text data-html-node=#text x="155" y="383">End node</text><text data-html-node=#text x="155" y="399">subtitle</text></g>
251+
<g class="rect-text" text-anchor="middle" dominant-baseline="middle"><text x="155" y="383">End node</text><text x="155" y="399">subtitle</text></g>
252252
<g class="frank-flowchart-edge-Start-N1">
253253
<polyline class="line" points="138,56 138,123" marker-end="url(#arrow)"/>
254254
</g>
@@ -281,30 +281,32 @@ const expectedMultiline = `<svg class="svg" xmlns="http://www.w3.org/2000/svg"
281281
</g>
282282
<g text-anchor="middle" dominant-baseline="middle"><text class="label-text" x="92" y="78" font-size="10">success</text><text class="label-text" x="92" y="94" font-size="10">other</text><text class="label-text" x="138" y="78" font-size="10">success</text><text class="label-text" x="138" y="94" font-size="10">other</text><text class="label-text" x="207" y="86" font-size="10">success</text><text class="label-text" x="101" y="206" font-size="10">success</text><text class="label-text" x="160" y="206" font-size="10">failure</text><text class="label-text" x="249" y="206" font-size="10">success</text><text class="label-text" x="93" y="326" font-size="10">success</text></g></svg>`;
283283

284-
describe('Mermaid2svg - please maintain this test using the GUI', () => {
285-
let service: Mermaid2svgService;
284+
describe('Flow2svg - please maintain this test using the GUI', () => {
285+
let service: Flow2svgService;
286286

287287
beforeEach(() => {
288288
// No need to test injection - if injection does not work then the app does not show
289-
service = new Mermaid2svgService(getFactoryDimensions());
289+
service = new Flow2svgService(getFactoryDimensions());
290290
});
291291

292292
it('Test the plain SVG', (done) => {
293-
service.mermaid2svg(input).then((svg) => {
294-
expect(svg.split('\n')).toEqual(expectedSvg!.split('\n'));
293+
service.flow2svg(input).then((svg) => {
294+
expect(svg.split('\n').map((line) => line.trim())).toEqual(expectedSvg!.split('\n').map((line) => line.trim()));
295295
done();
296296
});
297297
});
298298

299299
it('Test SVG with multiline nodes and edges', (done) => {
300-
service.mermaid2svg(inputMultiline).then((svg) => {
301-
expect(svg.split('\n')).toEqual(expectedMultiline!.split('\n'));
300+
service.flow2svg(inputMultiline).then((svg) => {
301+
expect(svg.split('\n').map((line) => line.trim())).toEqual(
302+
expectedMultiline!.split('\n').map((line) => line.trim()),
303+
);
302304
done();
303305
});
304306
});
305307

306308
it('Test with statistics', (done) => {
307-
service.mermaid2svgStatistics(input).then((statistics) => {
309+
service.flow2svgStatistics(input).then((statistics) => {
308310
expect(statistics.svg).toEqual(expectedSvg);
309311
expect(statistics.numNodes).toEqual(5);
310312
expect(statistics.numEdges).toEqual(7);
@@ -314,8 +316,8 @@ describe('Mermaid2svg - please maintain this test using the GUI', () => {
314316
});
315317

316318
it('Test that real calculation is done only once', (done) => {
317-
const first: Promise<SvgResult> = service.mermaid2svgStatistics(input);
318-
const second: Promise<string> = service.mermaid2svg(input);
319+
const first: Promise<SvgResult> = service.flow2svgStatistics(input);
320+
const second: Promise<string> = service.flow2svg(input);
319321
Promise.all([first, second]).then(() => {
320322
expect(service.numSvgCalculations).toEqual(1);
321323
expect(service.getHashes()).toHaveSize(1);

0 commit comments

Comments
 (0)