Skip to content

Commit cc11a61

Browse files
vbakkevbakke
committed
Merge branch 'v4-dev' into v4-cf
2 parents 2103fb6 + 074d99a commit cc11a61

40 files changed

Lines changed: 259 additions & 993 deletions

‎INSTALL.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ Multi-language support is not currently planned.
123123

124124
[![Apprio Inc](https://github.com/wurstbrot/DevSecOps-MaturityModel/raw/master-old/assets/images/Apiiro_black_logo.png)](https://apiiro.com/)
125125

126-
[![Heroku (hosting)](https://github.com/wurstbrot/DevSecOps-MaturityModel/raw/master/src/assets/images/sponsors/heroku.png)](https://www.heroku.com/open-source-credit-program)
126+
[![Heroku (hosting)](https://github.com/wurstbrot/DevSecOps-MaturityModel/raw/main/src/assets/images/sponsors/heroku.png)](https://www.heroku.com/open-source-credit-program)
127127

128128
# Donations
129129

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@ Multilanguage support is not given currently and not planned.
183183
184184
[![Apprio Inc](https://github.com/wurstbrot/DevSecOps-MaturityModel/raw/master-old/assets/images/Apiiro_black_logo.png)](https://apiiro.com/)
185185
186-
[![Heroku (hosting)](https://github.com/wurstbrot/DevSecOps-MaturityModel/raw/master/src/assets/images/sponsors/heroku.png)](https://www.heroku.com/open-source-credit-program)
186+
[![Heroku (hosting)](https://github.com/wurstbrot/DevSecOps-MaturityModel/raw/main/src/assets/images/sponsors/heroku.png)](https://www.heroku.com/open-source-credit-program)
187187
188188
# Donations
189189

‎src/app/app.module.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
1+
import { NgModule } from '@angular/core';
22
import { BrowserModule } from '@angular/platform-browser';
33
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
44

@@ -22,7 +22,7 @@ import { ActivityDescriptionComponent } from './component/activity-description/a
2222
import { ActivityDescriptionPageComponent } from './pages/activity-description/activity-description-page.component';
2323
import { LoaderService } from './service/loader/data-loader.service';
2424
import { HttpClientModule } from '@angular/common/http';
25-
import { ReadmeToHtmlComponent } from './component/readme-to-html/readme-to-html.component';
25+
import { MarkdownViewerComponent } from './component/markdown-viewer/markdown-viewer.component';
2626
import { DependencyGraphComponent } from './component/dependency-graph/dependency-graph.component';
2727
import { ToStringValuePipe } from './pipe/to-string-value.pipe';
2828
import { ModalMessageComponent } from './component/modal-message/modal-message.component';
@@ -42,7 +42,7 @@ import { TeamsGroupsEditorModule } from './component/teams-groups-editor/teams-g
4242
ActivityDescriptionPageComponent,
4343
CircularHeatmapComponent,
4444
MappingComponent,
45-
ReadmeToHtmlComponent,
45+
MarkdownViewerComponent,
4646
UsageComponent,
4747
AboutUsComponent,
4848
DependencyGraphComponent,

‎src/app/component/dependency-graph/dependency-graph.component.css‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,26 @@ circle {
77
fill: none;
88
stroke: #000;
99
stroke-width: 1.5px;
10-
}
10+
}
11+
12+
.clickable {
13+
cursor: pointer;
14+
}
15+
16+
:host ::ng-deep svg.dependency-graph g .node-rect {
17+
fill: var(--node-fill);
18+
stroke: var(--node-border);
19+
stroke-width: 1.5;
20+
}
21+
22+
:host ::ng-deep svg.dependency-graph g.clickable {
23+
cursor: pointer;
24+
}
25+
26+
:host ::ng-deep svg.dependency-graph g.hovered .node-rect {
27+
fill: var(--node-hover-fill);
28+
}
29+
30+
:host ::ng-deep svg.dependency-graph g.main text {
31+
fill: var(--text-primary, inherit);
32+
}

‎src/app/component/dependency-graph/dependency-graph.component.spec.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
import { HttpClient, HttpHandler } from '@angular/common/http';
22
import { ComponentFixture, TestBed } from '@angular/core/testing';
33
import { DependencyGraphComponent } from './dependency-graph.component';
4+
import { MatDialogModule } from '@angular/material/dialog';
45

56
describe('DependencyGraphComponent', () => {
67
let component: DependencyGraphComponent;
78
let fixture: ComponentFixture<DependencyGraphComponent>;
89

910
beforeEach(async () => {
1011
await TestBed.configureTestingModule({
11-
providers: [HttpClient, HttpHandler],
1212
declarations: [DependencyGraphComponent],
13+
imports: [MatDialogModule],
14+
providers: [HttpClient, HttpHandler],
1315
}).compileComponents();
1416
});
1517

‎src/app/component/dependency-graph/dependency-graph.component.ts‎

Lines changed: 47 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -112,10 +112,10 @@ export class DependencyGraphComponent implements OnInit, OnChanges {
112112
populateGraphWithActivitiesCurrentActivityDependsOn(activity: Activity): void {
113113
if (activity.dependsOn) {
114114
let i: number = 1;
115-
for (const prececcor of activity.dependsOn) {
116-
this.addNode(prececcor, -1, i++);
115+
for (const predecessor of activity.dependsOn) {
116+
this.addNode(predecessor, -1, i++);
117117
this.graphData['links'].push({
118-
source: prececcor,
118+
source: predecessor,
119119
target: activity.name,
120120
});
121121
}
@@ -224,17 +224,20 @@ export class DependencyGraphComponent implements OnInit, OnChanges {
224224
this.activityClicked.emit(d.id);
225225
}
226226
})
227-
.on('mouseover', (event: MouseEvent, d: any) => {
228-
if (this.activityClicked.observed) {
229-
if (d.relativeLevel != 0) {
230-
d3.select(event.currentTarget as Element).style('cursor', 'pointer');
231-
} else {
232-
d3.select(event.currentTarget as Element).style('cursor', 'default');
233-
}
227+
.classed('clickable', (d: any) => this.activityClicked.observed && d.relativeLevel != 0)
228+
.classed('predecessor', (d: any) => d.relativeLevel < 0)
229+
.classed('successor', (d: any) => d.relativeLevel > 0)
230+
.classed('main', (d: any) => d.relativeLevel == 0)
231+
.style('cursor', (d: any) =>
232+
this.activityClicked.observed && d.relativeLevel != 0 ? 'pointer' : 'default'
233+
)
234+
.on('mouseover', function (_event: any, _d: any) {
235+
if (d3.select(this).classed('clickable')) {
236+
d3.select(this).classed('hovered', true);
234237
}
235238
})
236-
.on('mouseout', (event: MouseEvent, d: any) => {
237-
d3.select(event.currentTarget as Element).style('cursor', 'default');
239+
.on('mouseout', function (_event: any, _d: any) {
240+
d3.select(this).classed('hovered', false);
238241
});
239242

240243
const rectHeight = 30;
@@ -255,29 +258,47 @@ export class DependencyGraphComponent implements OnInit, OnChanges {
255258
const self = this;
256259
nodes.each(function (this: SVGGElement, d: any) {
257260
const textElem = d3.select(this).select('text').node() as SVGTextElement;
258-
let textWidth = 60; // fallback default
259-
if (textElem && textElem.getBBox) {
260-
textWidth = textElem.getBBox().width;
261+
let textWidth = 60;
262+
if (textElem) {
263+
try {
264+
textWidth = (textElem.getBBox && textElem.getBBox().width) || textWidth;
265+
} catch {
266+
textWidth =
267+
(textElem.getComputedTextLength && textElem.getComputedTextLength()) || textWidth;
268+
}
261269
}
262-
const rectWidth = textWidth + padding;
263-
d.rectWidth = rectWidth; // Store for collision force
264-
// Insert rect before text
270+
271+
const rectWidth = Math.ceil(textWidth + padding);
272+
d.rectWidth = rectWidth; // store for collision force
273+
274+
// compute fill + hover color once
275+
const fillColor =
276+
d.relativeLevel == 0
277+
? self.themeColors.mainNodeFill || 'green'
278+
: (d.relativeLevel < 0
279+
? self.themeColors.predecessorFill
280+
: self.themeColors.successorFill) || 'white';
281+
const c = d3.color(fillColor);
282+
const hoverColor = c ? c.darker(0.6).toString() : fillColor;
283+
284+
// set CSS variables on the group so global stylesheet can use them
285+
d3.select(this)
286+
.style('--node-fill', fillColor)
287+
.style('--node-hover-fill', hoverColor)
288+
.style('--node-border', self.themeColors.borderColor || 'black');
289+
290+
// Insert rect before text sized to measured text
265291
d3.select(this)
266292
.insert('rect', 'text')
293+
.attr('class', 'node-rect')
267294
.attr('x', -rectWidth / 2)
268295
.attr('y', -rectHeight / 2)
269296
.attr('width', rectWidth)
270297
.attr('height', rectHeight)
271298
.attr('rx', rectRx)
272299
.attr('ry', rectRy)
273-
.attr('fill', (d: any) => {
274-
if (d.relativeLevel == 0) return self.themeColors.mainNodeFill || 'green';
275-
let col: string | undefined =
276-
d.relativeLevel < 0 ? self.themeColors.predecessorFill : self.themeColors.successorFill;
277-
return col || 'white';
278-
})
279-
.attr('stroke', self.themeColors.borderColor || 'black')
280-
.attr('stroke-width', 1.5);
300+
.attr('stroke-width', 1.5)
301+
.attr('stroke', 'currentColor'); // stroke taken from --node-border via CSS
281302
});
282303

283304
this.simulation.nodes(this.graphData['nodes']).on('tick', () => {

src/app/component/readme-to-html/readme-to-html.component.css renamed to src/app/component/markdown-viewer/markdown-viewer.component.css

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
.main-section{
2-
/*background-color: aqua;*/
3-
padding: 30px;
2+
padding: 20px;
43
padding-top: 0px;
54
max-width: 40rem;
65
}

src/app/component/readme-to-html/readme-to-html.component.html renamed to src/app/component/markdown-viewer/markdown-viewer.component.html

File renamed without changes.

src/app/component/readme-to-html/readme-to-html.component.spec.ts renamed to src/app/component/markdown-viewer/markdown-viewer.component.spec.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
import { ComponentFixture, TestBed } from '@angular/core/testing';
22
import { HttpClientTestingModule } from '@angular/common/http/testing';
3-
import { ReadmeToHtmlComponent } from './readme-to-html.component';
3+
import { MarkdownViewerComponent } from './markdown-viewer.component';
44

5-
describe('ReadmeToHtmlComponent', () => {
6-
let component: ReadmeToHtmlComponent;
7-
let fixture: ComponentFixture<ReadmeToHtmlComponent>;
5+
describe('MarkdownViewerComponent', () => {
6+
let component: MarkdownViewerComponent;
7+
let fixture: ComponentFixture<MarkdownViewerComponent>;
88

99
beforeEach(async () => {
1010
await TestBed.configureTestingModule({
1111
imports: [HttpClientTestingModule],
12-
declarations: [ReadmeToHtmlComponent],
12+
declarations: [MarkdownViewerComponent],
1313
}).compileComponents();
1414
});
1515

1616
beforeEach(() => {
17-
fixture = TestBed.createComponent(ReadmeToHtmlComponent);
17+
fixture = TestBed.createComponent(MarkdownViewerComponent);
1818
component = fixture.componentInstance;
1919
fixture.detectChanges();
2020
});

src/app/component/readme-to-html/readme-to-html.component.ts renamed to src/app/component/markdown-viewer/markdown-viewer.component.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ import * as md from 'markdown-it';
33
import { HttpClient } from '@angular/common/http';
44

55
@Component({
6-
selector: 'app-readme-to-html',
7-
templateUrl: './readme-to-html.component.html',
8-
styleUrls: ['./readme-to-html.component.css'],
6+
selector: 'app-markdown-viewer',
7+
templateUrl: './markdown-viewer.component.html',
8+
styleUrls: ['./markdown-viewer.component.css'],
99
})
10-
export class ReadmeToHtmlComponent implements OnInit {
10+
export class MarkdownViewerComponent implements OnInit {
1111
@Input() MDFile: string = '';
1212
markdown: md = md({
1313
html: true,

0 commit comments

Comments
 (0)