[AF-247] Labels on default edges

apps/docs/src/components/angular/edges/labels/default-label/default-label.astro

@@ -0,0 +1,5 @@
+---
+import { DiagramComponent } from './diagram.component';
+---
+
+  <DiagramComponent client:only="angular" />

apps/docs/src/components/angular/edges/labels/default-label/diagram.component.ts

@@ -0,0 +1,54 @@
+// @collapse-start
+import '@angular/compiler';
+
+import { Component } from '@angular/core';
+import {
+  initializeModel,
+  NgDiagramComponent,
+  provideNgDiagram,
+} from 'ng-diagram';
+
+@Component({
+  imports: [NgDiagramComponent],
+  providers: [provideNgDiagram()],
+  template: `
+    <div class="not-content diagram">
+      <ng-diagram [model]="model" />
+    </div>
+  `,
+  styles: `
+    .diagram {
+      display: flex;
+      height: 20rem;
+    }
+  `,
+})
+// @collapse-end
+export class DiagramComponent {
+  model = initializeModel({
+    metadata: {
+      viewport: { x: 0, y: 0, scale: 0.88 },
+    },
+    nodes: [
+      {
+        id: '1',
+        position: { x: 150, y: 150 },
+        data: { label: 'Node 1' },
+        rotatable: true,
+      },
+      { id: '2', position: { x: 500, y: 150 }, data: { label: 'Node 2' } },
+    ],
+    edges: [
+      {
+        id: '1',
+        source: '1',
+        sourcePort: 'port-right',
+        targetPort: 'port-left',
+        target: '2',
+        // @mark-start
+        data: { label: 'Label' },
+        // @mark-end
+      },
+    ],
+  });
+}

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

@@ -9,9 +9,47 @@ import CodeSnippet from '@components/code-snippet/code-snippet.astro';
 
 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.
 
-## Using Labels in Edge Components
+## Using Labels in Default Edges
 
-To display a label on an edge, use the `NgDiagramBaseEdgeLabelComponent` in the implementation of your edge component:
+To display a label on an edge, you can add a `label` property to the edge's data.
+
+import DefaultLabel from '@components/angular/edges/labels/default-label/default-label.astro';
+
+<DefaultLabel />
+
+<CodeSnippet relativePath="edges/labels/default-label/diagram.component.ts" />
+
+### CSS Variables
+
+Default labels can be styled using CSS variables. You can customize these in your global styles:
+
+```scss
+ng-diagram-default-edge-label {
+  --edge-label-padding: 10px;
+  --edge-label-border-radius: 8px;
+  --edge-label-font-size: 14px;
+  --edge-label-background-color: #f3f4f6;
+  --edge-label-text-color: #1e293b;
+  --edge-label-border-width: 2px;
+  --edge-label-border-color: #334155;
+}
+```
+
+The default edge also applies different styles to labels based on the edge state (normal, hover, selected). You can customize these styles by modifying the following CSS:
+
+```scss
+ng-diagram-base-edge.default-edge:hover:not(.selected) {
+  --edge-label-border-color: #2563eb;
+}
+
+ng-diagram-base-edge.default-edge.selected {
+  --edge-label-border-color: #3b82f6;
+}
+```
+
+## Custom Labels
+
+To display a custom label on an edge, use the `NgDiagramBaseEdgeLabelComponent` in an implementation of your custom edge component:
 
 import LabeledEdge from '@components/angular/edges/custom-edges/labeled-edge/labeled-edge.astro';
 

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

@@ -11,9 +11,9 @@ import {
   signal,
   untracked,
 } from '@angular/core';
-import { EdgeLabel } from '../../../core/src';
-import { BatchResizeObserverService, FlowCoreProviderService } from '../../services';
-import { NgDiagramBaseEdgeComponent } from '../edge/base-edge/base-edge.component';
+import { EdgeLabel } from '../../../../core/src';
+import { BatchResizeObserverService, FlowCoreProviderService } from '../../../services';
+import { NgDiagramBaseEdgeComponent } from '../../edge/base-edge/base-edge.component';
 
 /**
  * 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

@@ -0,0 +1,3 @@
+<div [class.selected]="selected()" [className]="'ng-diagram-default-edge-label'">
+  <ng-content />
+</div>

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

@@ -0,0 +1,10 @@
+.ng-diagram-default-edge-label {
+  display: flex;
+  padding: var(--edge-label-padding, 10px);
+  border-radius: var(--edge-label-border-radius, 6px);
+  font-size: var(--edge-label-font-size, 12px);
+  background: var(--edge-label-background-color, var(--ngd-node-bg-primary-default));
+  color: var(--edge-label-text-color, var(--ngd-txt-primary-default));
+  border: var(--edge-label-border-width, 2px) solid var(--edge-label-border-color, var(--ngd-default-edge-stroke));
+  transition: var(--edge-label-border-transition, border-color 0.1s ease-in-out);
+}

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

@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
+import { NgDiagramBaseEdgeComponent } from '../../../../public-api';
+
+@Component({
+  selector: 'ng-diagram-default-edge-label',
+  standalone: true,
+  templateUrl: './default-edge-label.component.html',
+  styleUrl: './default-edge-label.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DefaultEdgeLabelComponent {
+  private readonly edgeComponent = inject(NgDiagramBaseEdgeComponent);
+  readonly selected = computed(() => this.edgeComponent.selected());
+}

packages/ng-diagram/projects/ng-diagram/src/lib/components/edge/base-edge/base-edge-component.spec.ts

@@ -4,7 +4,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { Edge, Point } from '../../../../core/src';
 import { FlowCoreProviderService, RendererService } from '../../../services';
 import { InputEventsRouterService } from '../../../services/input-events/input-events-router.service';
-import { NgDiagramBaseEdgeLabelComponent } from '../../edge-label/base-edge-label.component';
+import { NgDiagramBaseEdgeLabelComponent } from '../../edge-label/base-edge-label/base-edge-label.component';
 import { NgDiagramBaseEdgeComponent } from './base-edge.component';
 
 @Component({

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

@@ -1 +1,8 @@
-<ng-diagram-base-edge class="default-edge" [edge]="edge()" />
+<ng-diagram-base-edge class="default-edge" [edge]="edge()">
+  @let edgeLabel = label();
+  @if (edgeLabel) {
+    <ng-diagram-base-edge-label class="ng-diagram-default-label" [id]="'edge-label'" [positionOnEdge]="0.5">
+      <ng-diagram-default-edge-label>{{ edgeLabel }}</ng-diagram-default-edge-label>
+    </ng-diagram-base-edge-label>
+  }
+</ng-diagram-base-edge>

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

@@ -5,10 +5,12 @@ ng-diagram-base-edge.default-edge {
 
 ng-diagram-base-edge.default-edge:hover:not(.selected):not(.temporary) {
   --edge-stroke: var(--ngd-default-edge-stroke-hover);
+  --edge-label-border-color: var(--ngd-default-edge-stroke-hover);
 }
 
 ng-diagram-base-edge.default-edge.selected {
   --edge-stroke: var(--ngd-default-edge-stroke-selected);
+  --edge-label-border-color: var(--ngd-default-edge-stroke-selected);
 }
 
 ng-diagram-base-edge.default-edge.temporary {

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

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Edge } from '../../../../core/src';
 import { beforeEach, describe, expect, it } from 'vitest';
+import { Edge } from '../../../../core/src';
 import { NgDiagramBaseEdgeComponent } from '../base-edge/base-edge.component';
 import { NgDiagramDefaultEdgeComponent } from './default-edge.component';
 

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

@@ -1,15 +1,19 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { Edge } from '../../../../core/src';
 import { NgDiagramEdgeTemplate } from '../../../types';
+import { NgDiagramBaseEdgeLabelComponent } from '../../edge-label/base-edge-label/base-edge-label.component';
+import { DefaultEdgeLabelComponent } from '../../edge-label/default-edge-label/default-edge-label.component';
 import { NgDiagramBaseEdgeComponent } from '../base-edge/base-edge.component';
 
 @Component({
   selector: 'ng-diagram-default-edge',
   templateUrl: './default-edge.component.html',
   styleUrls: ['./default-edge.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgDiagramBaseEdgeComponent],
+  imports: [NgDiagramBaseEdgeComponent, NgDiagramBaseEdgeLabelComponent, DefaultEdgeLabelComponent],
 })
 export class NgDiagramDefaultEdgeComponent implements NgDiagramEdgeTemplate {
-  edge = input.required<Edge>();
+  edge = input.required<Edge<{ label?: string }>>();
+
+  label = computed(() => this.edge().data?.label);
 }

packages/ng-diagram/projects/ng-diagram/src/public-api.ts

@@ -8,7 +8,7 @@ export { NgDiagramComponent } from './lib/components/diagram/ng-diagram.componen
 export {
   BaseEdgeLabelComponent,
   NgDiagramBaseEdgeLabelComponent,
-} from './lib/components/edge-label/base-edge-label.component';
+} from './lib/components/edge-label/base-edge-label/base-edge-label.component';
 export { NgDiagramBaseEdgeComponent } from './lib/components/edge/base-edge/base-edge.component';
 export { NgDiagramNodeResizeAdornmentComponent } from './lib/components/node/resize/ng-diagram-node-resize-adornment.component';
 export { NgDiagramNodeRotateAdornmentComponent } from './lib/components/node/rotate/ng-diagram-node-rotate-adornment.component';