Skip to content

Commit fcd2a47

Browse files
kamilEfkamilEf
committed
AF-258 Edge selection docs
AF-258 Edge selection docs AF-258 Edge selection docs AF-258 Edge selection docs AF-258 Edge selection docs AF-258 Edge selection docs Edge styles proposal Formatting StrokeDashArray support + docs updates Merge branch fixes AF-258 Edge selection docs
1 parent 57771a6 commit fcd2a47

30 files changed

Lines changed: 595 additions & 77 deletions

‎apps/angular-demo/src/app/app.component.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { nodeTemplateMap } from './data/node-template';
1818
import { paletteModel } from './data/palette-model';
1919
import { ButtonEdgeComponent } from './edge-template/button-edge/button-edge.component';
2020
import { CustomPolylineEdgeComponent } from './edge-template/custom-polyline-edge/custom-polyline-edge.component';
21+
import { DashedEdgeComponent } from './edge-template/dashed-edge/dashed-edge.component';
2122
import { LabelledEdgeComponent } from './edge-template/labelled-edge/labelled-edge.component';
2223
import { PaletteComponent } from './palette/palette.component';
2324
import { ToolbarComponent } from './toolbar/toolbar.component';
@@ -37,6 +38,7 @@ export class AppComponent {
3738
['button-edge', ButtonEdgeComponent],
3839
['custom-polyline-edge', CustomPolylineEdgeComponent],
3940
['labelled-edge', LabelledEdgeComponent],
41+
['dashed-edge', DashedEdgeComponent],
4042
]);
4143

4244
config: NgDiagramConfig = {
@@ -248,6 +250,16 @@ export class AppComponent {
248250
type: 'labelled-edge',
249251
routing: 'bezier',
250252
},
253+
{
254+
id: '6',
255+
source: '11',
256+
target: '12',
257+
data: {},
258+
sourcePort: 'port-right',
259+
targetPort: 'port-left',
260+
type: 'dashed-edge',
261+
routing: 'orthogonal',
262+
},
251263
],
252264
metadata: {
253265
viewport: { x: 300, y: 0, scale: 1 },

‎apps/angular-demo/src/app/edge-template/button-edge/button-edge.component.html‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,4 @@
1-
<ng-diagram-base-edge
2-
class="custom-edge"
3-
[edge]="edge()"
4-
[routing]="'bezier'"
5-
stroke="var(--border-color)"
6-
[targetArrowhead]="'ng-diagram-arrow'"
7-
>
1+
<ng-diagram-base-edge class="custom-edge" [edge]="edge()" [routing]="'bezier'" [targetArrowhead]="'ng-diagram-arrow'">
82
<ng-diagram-base-edge-label [id]="'test-label'" [positionOnEdge]="0.4">
93
<button (mousedown)="onButtonClick()">Button</button>
104
</ng-diagram-base-edge-label>

‎apps/angular-demo/src/app/edge-template/button-edge/button-edge.component.scss‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
1-
:root {
1+
:host {
22
--border-color: red;
33
--border-color-selected: #9f0000;
44
}
55

6-
.custom-edge {
7-
&:has(.ng-diagram-edge__path.selected) {
8-
.ng-diagram-edge__path.selected {
9-
stroke: var(--border-color-selected);
10-
}
6+
ng-diagram-base-edge.custom-edge {
7+
--edge-stroke: var(--border-color);
8+
}
119

12-
button {
13-
border-color: var(--border-color-selected);
14-
}
15-
}
10+
ng-diagram-base-edge.custom-edge.selected {
11+
--edge-stroke: var(--border-color-selected);
1612

1713
button {
18-
pointer-events: all;
19-
background-color: white;
20-
border: 2px solid var(--border-color);
21-
border-radius: 4px;
22-
cursor: pointer;
14+
border-color: var(--border-color-selected);
2315
}
2416
}
17+
18+
button {
19+
pointer-events: all;
20+
background-color: white;
21+
border: 2px solid var(--border-color);
22+
border-radius: 4px;
23+
cursor: pointer;
24+
}

‎apps/angular-demo/src/app/edge-template/button-edge/button-edge.component.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';
1+
import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
22
import { BaseEdgeLabelComponent, Edge, NgDiagramBaseEdgeComponent, NgDiagramEdgeTemplate } from 'ng-diagram';
33

44
/**
@@ -14,7 +14,6 @@ import { BaseEdgeLabelComponent, Edge, NgDiagramBaseEdgeComponent, NgDiagramEdge
1414
templateUrl: './button-edge.component.html',
1515
styleUrls: ['./button-edge.component.scss'],
1616
changeDetection: ChangeDetectionStrategy.OnPush,
17-
encapsulation: ViewEncapsulation.None,
1817
imports: [NgDiagramBaseEdgeComponent, BaseEdgeLabelComponent],
1918
})
2019
export class ButtonEdgeComponent implements NgDiagramEdgeTemplate {

‎apps/angular-demo/src/app/edge-template/dashed-edge/dashed-edge.component.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
:host {
2+
--edge-stroke: #666;
3+
--edge-stroke-dasharray: 5 5;
4+
}
5+
6+
ng-diagram-base-edge.dashed-edge.selected {
7+
--edge-stroke: blue;
8+
--edge-stroke-width: 3;
9+
--edge-stroke-dasharray: 8 4;
10+
}
11+
12+
ng-diagram-base-edge.dashed-edge:hover:not(.selected) {
13+
--edge-stroke: #999;
14+
}

‎apps/angular-demo/src/app/edge-template/dashed-edge/dashed-edge.component.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
2+
import { Edge, NgDiagramBaseEdgeComponent, NgDiagramEdgeTemplate } from 'ng-diagram';
3+
4+
@Component({
5+
selector: 'app-dashed-edge',
6+
template: `<ng-diagram-base-edge [edge]="edge()" class="dashed-edge" />`,
7+
styleUrls: ['./dashed-edge.component.scss'],
8+
changeDetection: ChangeDetectionStrategy.OnPush,
9+
imports: [NgDiagramBaseEdgeComponent],
10+
})
11+
export class DashedEdgeComponent implements NgDiagramEdgeTemplate {
12+
edge = input.required<Edge>();
13+
}

‎apps/angular-demo/src/app/edge-template/labelled-edge/labelled-edge.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<ng-diagram-base-edge class="labelled-edge" [edge]="edge()" stroke="black" [targetArrowhead]="'ng-diagram-arrow'">
1+
<ng-diagram-base-edge class="labelled-edge" [edge]="edge()" [targetArrowhead]="'ng-diagram-arrow'">
22
<ng-diagram-base-edge-label [id]="'edge-label'" [positionOnEdge]="edge().data.labelPosition ?? 0.5">
33
<div class="edge-label">
44
<span>{{ edge().data['labelPosition'] || 'Label' }}</span>

‎apps/angular-demo/src/app/edge-template/labelled-edge/labelled-edge.component.scss‎

Lines changed: 15 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,19 @@
1-
.labelled-edge {
2-
.edge-label {
3-
background-color: white;
4-
border: 1px solid black;
5-
border-radius: 4px;
6-
padding: 4px 8px;
7-
font-size: 12px;
8-
font-weight: 500;
9-
color: var(--text-color);
10-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
11-
white-space: nowrap;
1+
ng-diagram-base-edge.labelled-edge {
2+
--edge-stroke: black;
3+
}
124

13-
span {
14-
display: block;
15-
}
16-
}
5+
.edge-label {
6+
background-color: white;
7+
border: 1px solid black;
8+
border-radius: 4px;
9+
padding: 4px 8px;
10+
font-size: 12px;
11+
font-weight: 500;
12+
color: var(--text-color);
13+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
14+
white-space: nowrap;
1715

18-
&.selected {
19-
.edge-label {
20-
border-color: var(--primary-color);
21-
background-color: var(--primary-light);
22-
}
16+
span {
17+
display: block;
2318
}
2419
}

‎apps/docs/src/components/angular/edges/edge-selection/custom-edge/custom-edge.astro‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
import { DiagramComponent } from './diagram.component';
3+
---
4+
5+
<DiagramComponent client:only="angular" />

‎apps/docs/src/components/angular/edges/edge-selection/custom-edge/custom-edge.component.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// Base state
2+
ng-diagram-base-edge {
3+
--edge-stroke: black;
4+
--edge-stroke-width: 2;
5+
}
6+
7+
// Selected state
8+
ng-diagram-base-edge.selected {
9+
--edge-stroke: blue;
10+
--edge-stroke-width: 3;
11+
}
12+
13+
// Hover state
14+
ng-diagram-base-edge:hover:not(.selected) {
15+
--edge-stroke: lightblue;
16+
}

0 commit comments

Comments
 (0)