AF-258 Edge selection docs

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

@@ -18,6 +18,7 @@ import { nodeTemplateMap } from './data/node-template';
 import { paletteModel } from './data/palette-model';
 import { ButtonEdgeComponent } from './edge-template/button-edge/button-edge.component';
 import { CustomPolylineEdgeComponent } from './edge-template/custom-polyline-edge/custom-polyline-edge.component';
+import { DashedEdgeComponent } from './edge-template/dashed-edge/dashed-edge.component';
 import { LabelledEdgeComponent } from './edge-template/labelled-edge/labelled-edge.component';
 import { PaletteComponent } from './palette/palette.component';
 import { ToolbarComponent } from './toolbar/toolbar.component';
@@ -37,6 +38,7 @@ export class AppComponent {
     ['button-edge', ButtonEdgeComponent],
     ['custom-polyline-edge', CustomPolylineEdgeComponent],
     ['labelled-edge', LabelledEdgeComponent],
+    ['dashed-edge', DashedEdgeComponent],
   ]);
 
   config: NgDiagramConfig = {
@@ -248,6 +250,16 @@ export class AppComponent {
         type: 'labelled-edge',
         routing: 'bezier',
       },
+      {
+        id: '6',
+        source: '11',
+        target: '12',
+        data: {},
+        sourcePort: 'port-right',
+        targetPort: 'port-left',
+        type: 'dashed-edge',
+        routing: 'orthogonal',
+      },
     ],
     metadata: {
       viewport: { x: 300, y: 0, scale: 1 },

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

@@ -1,10 +1,4 @@
-<ng-diagram-base-edge
-  class="custom-edge"
-  [edge]="edge()"
-  [routing]="'bezier'"
-  stroke="var(--border-color)"
-  [targetArrowhead]="'ng-diagram-arrow'"
->
+<ng-diagram-base-edge class="custom-edge" [edge]="edge()" [routing]="'bezier'" [targetArrowhead]="'ng-diagram-arrow'">
   <ng-diagram-base-edge-label [id]="'test-label'" [positionOnEdge]="0.4">
     <button (mousedown)="onButtonClick()">Button</button>
   </ng-diagram-base-edge-label>

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

@@ -1,24 +1,24 @@
-:root {
+:host {
   --border-color: red;
   --border-color-selected: #9f0000;
 }
 
-.custom-edge {
-  &:has(.ng-diagram-edge__path.selected) {
-    .ng-diagram-edge__path.selected {
-      stroke: var(--border-color-selected);
-    }
+ng-diagram-base-edge.custom-edge {
+  --edge-stroke: var(--border-color);
+}
 
-    button {
-      border-color: var(--border-color-selected);
-    }
-  }
+ng-diagram-base-edge.custom-edge.selected {
+  --edge-stroke: var(--border-color-selected);
 
   button {
-    pointer-events: all;
-    background-color: white;
-    border: 2px solid var(--border-color);
-    border-radius: 4px;
-    cursor: pointer;
+    border-color: var(--border-color-selected);
   }
 }
+
+button {
+  pointer-events: all;
+  background-color: white;
+  border: 2px solid var(--border-color);
+  border-radius: 4px;
+  cursor: pointer;
+}

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { BaseEdgeLabelComponent, Edge, NgDiagramBaseEdgeComponent, NgDiagramEdgeTemplate } from 'ng-diagram';
 
 /**
@@ -14,7 +14,6 @@ import { BaseEdgeLabelComponent, Edge, NgDiagramBaseEdgeComponent, NgDiagramEdge
   templateUrl: './button-edge.component.html',
   styleUrls: ['./button-edge.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
   imports: [NgDiagramBaseEdgeComponent, BaseEdgeLabelComponent],
 })
 export class ButtonEdgeComponent implements NgDiagramEdgeTemplate {

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

@@ -0,0 +1,14 @@
+:host {
+  --edge-stroke: #666;
+  --edge-stroke-dasharray: 5 5;
+}
+
+ng-diagram-base-edge.dashed-edge.selected {
+  --edge-stroke: blue;
+  --edge-stroke-width: 3;
+  --edge-stroke-dasharray: 8 4;
+}
+
+ng-diagram-base-edge.dashed-edge:hover:not(.selected) {
+  --edge-stroke: #999;
+}

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

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { Edge, NgDiagramBaseEdgeComponent, NgDiagramEdgeTemplate } from 'ng-diagram';
+
+@Component({
+  selector: 'app-dashed-edge',
+  template: `<ng-diagram-base-edge [edge]="edge()" class="dashed-edge" />`,
+  styleUrls: ['./dashed-edge.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgDiagramBaseEdgeComponent],
+})
+export class DashedEdgeComponent implements NgDiagramEdgeTemplate {
+  edge = input.required<Edge>();
+}

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

@@ -1,4 +1,4 @@
-<ng-diagram-base-edge class="labelled-edge" [edge]="edge()" stroke="black" [targetArrowhead]="'ng-diagram-arrow'">
+<ng-diagram-base-edge class="labelled-edge" [edge]="edge()" [targetArrowhead]="'ng-diagram-arrow'">
   <ng-diagram-base-edge-label [id]="'edge-label'" [positionOnEdge]="edge().data.labelPosition ?? 0.5">
     <div class="edge-label">
       <span>{{ edge().data['labelPosition'] || 'Label' }}</span>

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

@@ -1,24 +1,19 @@
-.labelled-edge {
-  .edge-label {
-    background-color: white;
-    border: 1px solid black;
-    border-radius: 4px;
-    padding: 4px 8px;
-    font-size: 12px;
-    font-weight: 500;
-    color: var(--text-color);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    white-space: nowrap;
+ng-diagram-base-edge.labelled-edge {
+  --edge-stroke: black;
+}
 
-    span {
-      display: block;
-    }
-  }
+.edge-label {
+  background-color: white;
+  border: 1px solid black;
+  border-radius: 4px;
+  padding: 4px 8px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-color);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  white-space: nowrap;
 
-  &.selected {
-    .edge-label {
-      border-color: var(--primary-color);
-      background-color: var(--primary-light);
-    }
+  span {
+    display: block;
   }
 }

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

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

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

@@ -0,0 +1,16 @@
+// Base state
+ng-diagram-base-edge {
+  --edge-stroke: black;
+  --edge-stroke-width: 2;
+}
+
+// Selected state
+ng-diagram-base-edge.selected {
+  --edge-stroke: blue;
+  --edge-stroke-width: 3;
+}
+
+// Hover state
+ng-diagram-base-edge:hover:not(.selected) {
+  --edge-stroke: lightblue;
+}

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

@@ -0,0 +1,15 @@
+import { Component, input } from '@angular/core';
+import {
+  NgDiagramBaseEdgeComponent,
+  type Edge,
+  type NgDiagramEdgeTemplate,
+} from 'ng-diagram';
+
+@Component({
+  template: `<ng-diagram-base-edge [edge]="edge()" />`,
+  imports: [NgDiagramBaseEdgeComponent],
+  styleUrls: ['./custom-edge.component.scss'],
+})
+export class CustomEdgeComponent implements NgDiagramEdgeTemplate {
+  edge = input.required<Edge>();
+}

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

@@ -0,0 +1,4 @@
+.diagram {
+  display: flex;
+  height: 20rem;
+}

apps/docs/src/components/angular/edges/edge-selection/custom-edge/diagram.component.ts

@@ -0,0 +1,79 @@
+import '@angular/compiler';
+
+import { Component } from '@angular/core';
+import {
+  initializeModel,
+  NgDiagramComponent,
+  NgDiagramEdgeTemplateMap,
+  provideNgDiagram,
+  type NgDiagramConfig,
+} from 'ng-diagram';
+import { CustomEdgeComponent } from './custom-edge.component';
+
+@Component({
+  imports: [NgDiagramComponent],
+  providers: [provideNgDiagram()],
+  template: `
+    <div class="not-content diagram">
+      <ng-diagram
+        [model]="model"
+        [config]="config"
+        [edgeTemplateMap]="edgeTemplateMap"
+      />
+    </div>
+  `,
+  styleUrls: ['./diagram.component.scss'],
+})
+export class DiagramComponent {
+  config = {
+    zoom: {
+      max: 3,
+    },
+  } satisfies NgDiagramConfig;
+
+  edgeTemplateMap = new NgDiagramEdgeTemplateMap([
+    ['custom', CustomEdgeComponent],
+  ]);
+
+  model = initializeModel({
+    nodes: [
+      {
+        id: '1',
+        position: { x: 10, y: 100 },
+        data: {},
+      },
+      {
+        id: '2',
+        position: { x: 270, y: 100 },
+        data: {},
+      },
+      {
+        id: '3',
+        position: { x: 530, y: 100 },
+        data: {},
+      },
+    ],
+    edges: [
+      {
+        id: '1',
+        source: '1',
+        target: '2',
+        data: {},
+        sourcePort: 'port-right',
+        targetPort: 'port-left',
+        targetArrowhead: 'ng-diagram-arrow',
+        type: 'custom',
+      },
+      {
+        id: '2',
+        source: '2',
+        target: '3',
+        data: {},
+        sourcePort: 'port-right',
+        targetPort: 'port-left',
+        targetArrowhead: 'ng-diagram-arrow',
+      },
+    ],
+    metadata: { viewport: { x: 0, y: 0, scale: 1 } },
+  });
+}

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

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

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

@@ -0,0 +1,12 @@
+// @section-start
+.custom-diagram {
+  display: flex;
+  height: 20rem;
+
+  // @mark-start:styles
+  --ngd-default-edge-stroke: black;
+  --ngd-default-edge-stroke-hover: darkgoldenrod;
+  --ngd-default-edge-stroke-selected: gold;
+  // @mark-end:styles
+}
+// @section-end

apps/docs/src/components/angular/edges/edge-selection/custom/diagram.component.ts

@@ -0,0 +1,53 @@
+import '@angular/compiler';
+import { Component } from '@angular/core';
+import {
+  initializeModel,
+  NgDiagramComponent,
+  provideNgDiagram,
+  type NgDiagramConfig,
+} from 'ng-diagram';
+
+@Component({
+  imports: [NgDiagramComponent],
+  providers: [provideNgDiagram()],
+  template: `
+    <div class="not-content custom-diagram">
+      <ng-diagram [model]="model" [config]="config" />
+    </div>
+  `,
+  styleUrls: ['./diagram.component.scss'],
+})
+export class DiagramComponent {
+  config = {
+    zoom: {
+      max: 3,
+    },
+  } satisfies NgDiagramConfig;
+
+  model = initializeModel({
+    nodes: [
+      {
+        id: '1',
+        position: { x: 100, y: 100 },
+        data: {},
+      },
+      {
+        id: '2',
+        position: { x: 400, y: 100 },
+        data: {},
+      },
+    ],
+    edges: [
+      {
+        id: '1',
+        source: '1',
+        target: '2',
+        data: {},
+        sourcePort: 'port-right',
+        targetPort: 'port-left',
+        targetArrowhead: 'ng-diagram-arrow',
+      },
+    ],
+    metadata: { viewport: { x: 0, y: 0, scale: 1 } },
+  });
+}

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

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

apps/docs/src/components/angular/edges/edge-selection/default/diagram.component.scss

@@ -0,0 +1,4 @@
+.diagram {
+  display: flex;
+  height: 20rem;
+}