Skip to content

Commit 9784d2a

Browse files
Jacek-SynergyJacek-Synergy
authored
[AF-247] Labels on default edges (#376)
1 parent d81e40e commit 9784d2a

18 files changed

Lines changed: 175 additions & 12 deletions

File tree

‎apps/docs/src/components/angular/edges/labels/default-label/default-label.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/labels/default-label/diagram.component.ts‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
// @collapse-start
2+
import '@angular/compiler';
3+
4+
import { Component } from '@angular/core';
5+
import {
6+
initializeModel,
7+
NgDiagramComponent,
8+
provideNgDiagram,
9+
} from 'ng-diagram';
10+
11+
@Component({
12+
imports: [NgDiagramComponent],
13+
providers: [provideNgDiagram()],
14+
template: `
15+
<div class="not-content diagram">
16+
<ng-diagram [model]="model" />
17+
</div>
18+
`,
19+
styles: `
20+
.diagram {
21+
display: flex;
22+
height: 20rem;
23+
}
24+
`,
25+
})
26+
// @collapse-end
27+
export class DiagramComponent {
28+
model = initializeModel({
29+
metadata: {
30+
viewport: { x: 0, y: 0, scale: 0.88 },
31+
},
32+
nodes: [
33+
{
34+
id: '1',
35+
position: { x: 150, y: 150 },
36+
data: { label: 'Node 1' },
37+
rotatable: true,
38+
},
39+
{ id: '2', position: { x: 500, y: 150 }, data: { label: 'Node 2' } },
40+
],
41+
edges: [
42+
{
43+
id: '1',
44+
source: '1',
45+
sourcePort: 'port-right',
46+
targetPort: 'port-left',
47+
target: '2',
48+
// @mark-start
49+
data: { label: 'Label' },
50+
// @mark-end
51+
},
52+
],
53+
});
54+
}

‎apps/docs/src/content/docs/guides/edges/edges.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ NgDiagram provides a default edge implementation that handles most common use ca
4242
- Automatically calculates the path between connected nodes
4343
- Supports three [built-in routing algorithms](/docs/guides/edges/routing)
4444
- Can display arrowheads at either end
45+
- Supports [labels](/docs/guides/edges/labels) for displaying text on edges
4546

4647
### Customization
4748

‎apps/docs/src/content/docs/guides/edges/labels.mdx‎

Lines changed: 58 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,65 @@ import CodeSnippet from '@components/code-snippet/code-snippet.astro';
99

1010
Labels are visual elements attached to edges that can display text, buttons, or any custom content. They automatically position themselves along the edge path and follow the edge as it moves or changes shape.
1111

12-
## Using Labels in Edge Components
12+
## Using Labels in Default Edges
1313

14-
To display a label on an edge, use the `NgDiagramBaseEdgeLabelComponent` in the implementation of your edge component:
14+
To display a label on a **default edge**, you can add a `label` property to the edge's data.
15+
16+
import DefaultLabel from '@components/angular/edges/labels/default-label/default-label.astro';
17+
18+
<DefaultLabel />
19+
20+
<CodeSnippet relativePath="edges/labels/default-label/diagram.component.ts" />
21+
22+
### CSS Variables
23+
24+
Default labels can be styled using CSS variables. You can customize these in your global styles:
25+
26+
```scss
27+
ng-diagram-default-edge-label {
28+
--edge-label-padding: 10px;
29+
--edge-label-border-radius: 8px;
30+
--edge-label-font-size: 14px;
31+
--edge-label-background-color: #f3f4f6;
32+
--edge-label-text-color: #1e293b;
33+
--edge-label-border-width: 2px;
34+
--edge-label-border-color: #334155;
35+
--edge-label-border-transition: border-color 0.1s ease-in-out;
36+
}
37+
```
38+
39+
**Available CSS variables:**
40+
41+
- `--edge-label-padding` - Label padding
42+
- `--edge-label-border-radius` - Label border radius
43+
- `--edge-label-font-size` - Label font size
44+
- `--edge-label-background-color` - Label background color
45+
- `--edge-label-text-color` - Label text color
46+
- `--edge-label-border-width` - Label border width
47+
- `--edge-label-border-color` - Label border color
48+
- `--edge-label-border-transition` - Transition for border changes
49+
50+
The default label also uses these semantic variables that map to the design system:
51+
52+
- `--ngd-default-edge-label-color` - Label text color
53+
- `--ngd-default-edge-label-background-color` - Label background color
54+
- `--ngd-default-edge-label-border-color` - Label border color
55+
56+
The default edge applies different styles to labels based on the edge state (normal, hover, selected). You can customize these styles by modifying the following CSS:
57+
58+
```scss
59+
ng-diagram-base-edge.default-edge:hover:not(.selected) {
60+
--edge-label-border-color: #2563eb;
61+
}
62+
63+
ng-diagram-base-edge.default-edge.selected {
64+
--edge-label-border-color: #3b82f6;
65+
}
66+
```
67+
68+
## Custom Labels
69+
70+
To display a custom label on an edge, use the `NgDiagramBaseEdgeLabelComponent` in an implementation of your **custom edge** component:
1571

1672
import LabeledEdge from '@components/angular/edges/custom-edges/labeled-edge/labeled-edge.astro';
1773

packages/ng-diagram/projects/ng-diagram/src/lib/components/edge-label/base-edge-label.component.html renamed to packages/ng-diagram/projects/ng-diagram/src/lib/components/edge-label/base-edge-label/base-edge-label.component.html

File renamed without changes.

packages/ng-diagram/projects/ng-diagram/src/lib/components/edge-label/base-edge-label.component.scss renamed to packages/ng-diagram/projects/ng-diagram/src/lib/components/edge-label/base-edge-label/base-edge-label.component.scss

File renamed without changes.

packages/ng-diagram/projects/ng-diagram/src/lib/components/edge-label/base-edge-label.component.ts renamed to packages/ng-diagram/projects/ng-diagram/src/lib/components/edge-label/base-edge-label/base-edge-label.component.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ import {
1111
signal,
1212
untracked,
1313
} from '@angular/core';
14-
import { EdgeLabel } from '../../../core/src';
15-
import { BatchResizeObserverService, FlowCoreProviderService } from '../../services';
16-
import { NgDiagramBaseEdgeComponent } from '../edge/base-edge/base-edge.component';
14+
import { EdgeLabel } from '../../../../core/src';
15+
import { BatchResizeObserverService, FlowCoreProviderService } from '../../../services';
16+
import { NgDiagramBaseEdgeComponent } from '../../edge/base-edge/base-edge.component';
1717

1818
/**
1919
* The `NgDiagramBaseEdgeLabelComponent` is responsible for displaying a label at a specific position along an edge.

‎packages/ng-diagram/projects/ng-diagram/src/lib/components/edge-label/default-edge-label/default-edge-label.component.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div [class.selected]="selected()" [className]="'ng-diagram-default-edge-label'">
2+
<ng-content />
3+
</div>

‎packages/ng-diagram/projects/ng-diagram/src/lib/components/edge-label/default-edge-label/default-edge-label.component.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.ng-diagram-default-edge-label {
2+
display: flex;
3+
padding: var(--edge-label-padding, 4px 8px);
4+
border-radius: var(--edge-label-border-radius, 4px);
5+
font-size: var(--edge-label-font-size, 12px);
6+
background: var(--edge-label-background-color, var(--ngd-default-edge-label-background-color));
7+
color: var(--edge-label-text-color, var(--ngd-default-edge-label-color));
8+
border: var(--edge-label-border-width, 1px) solid
9+
var(--edge-label-border-color, var(--ngd-default-edge-label-border-color));
10+
transition: var(--edge-label-border-transition, border-color 0.1s ease-in-out);
11+
}

‎packages/ng-diagram/projects/ng-diagram/src/lib/components/edge-label/default-edge-label/default-edge-label.component.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
2+
import { NgDiagramBaseEdgeComponent } from '../../../../public-api';
3+
4+
@Component({
5+
selector: 'ng-diagram-default-edge-label',
6+
standalone: true,
7+
templateUrl: './default-edge-label.component.html',
8+
styleUrl: './default-edge-label.component.scss',
9+
changeDetection: ChangeDetectionStrategy.OnPush,
10+
})
11+
export class DefaultEdgeLabelComponent {
12+
private readonly edgeComponent = inject(NgDiagramBaseEdgeComponent);
13+
readonly selected = computed(() => this.edgeComponent.selected());
14+
}

0 commit comments

Comments
 (0)