Merge pull request #79 from taiga-family/selection

projects/demo/src/pages/examples/editor/editor.component.html

@@ -17,6 +17,7 @@
                     [formControl]="form"
                     (connectionCreated)="onConnectionCreated($event)"
                     (connectionDeleted)="onConnectionDeleted($event)"
+                    (connectionSelected)="onConnectionSelected($event)"
                     (nodeDeleted)="onNodeDeleted($event)"
                     (nodeMoved)="onNodeMoved($event)"
                     (nodeSelected)="onNodeSelected($event)"

projects/demo/src/pages/examples/editor/editor.component.ts

@@ -148,6 +148,10 @@ export default class EditorComponent {
         console.warn(event, 'onConnectionDeleted');
     }
 
+    public onConnectionSelected(event: DfDataConnection): void {
+        console.warn(event, 'onConnectionSelected');
+    }
+
     public onNodeMoved(event: DfEvent<DfDataNode>): void {
         console.warn(event, 'onNodeMoved');
     }

projects/ng-draw-flow/src/lib/components/connections/connection/connection.component.ts

@@ -45,18 +45,21 @@ export class ConnectionComponent {
     private readonly connectionsService = inject(ConnectionsService);
     private readonly coordinatesService = inject(CoordinatesService);
     private readonly options = inject(DRAW_FLOW_OPTIONS);
-    private connectionSelected = false;
+    private selected = false;
 
     @Input()
     public connection!: DfDataConnection;
 
     @Output()
     protected readonly connectionDeleted = new EventEmitter<void>();
 
+    @Output()
+    protected readonly connectionSelected = new EventEmitter<void>();
+
     @HostListener('document:keydown.delete', ['$event'])
     @HostListener('document:keydown.backspace', ['$event'])
     protected handleKeyboardEvent(event: KeyboardEvent): void {
-        if (!this.connectionSelected) {
+        if (!this.selected) {
             return;
         }
 
@@ -112,7 +115,11 @@ export class ConnectionComponent {
         );
 
     protected onSelectedChanged(selected: boolean): void {
-        this.connectionSelected = selected;
+        this.selected = selected;
+
+        if (selected) {
+            this.connectionSelected.emit();
+        }
     }
 
     private getConnectionPoint(

projects/ng-draw-flow/src/lib/components/scene/scene.component.html

@@ -1,4 +1,5 @@
 <div
+    data-not-selectable="true"
     class="scene"
     [style.height.px]="panSize"
     [style.width.px]="panSize"
@@ -16,6 +17,7 @@
         <df-connection
             [connection]="connection"
             (connectionDeleted)="onConnectionDeleted(connection)"
+            (connectionSelected)="connectionSelected.emit(connection)"
         />
     </ng-container>
 

projects/ng-draw-flow/src/lib/components/scene/scene.component.ts

@@ -67,6 +67,9 @@ export class SceneComponent implements ControlValueAccessor, OnInit {
         true,
     );
 
+    @Output()
+    protected readonly connectionSelected = new EventEmitter<DfDataConnection>();
+
     protected form: FormControl = this.fb.control({});
 
     protected isConnectionCreating$ = this.draftConnectionService.isConnectionCreating$;

projects/ng-draw-flow/src/lib/directives/selectable-element/selectable-element.directive.ts

@@ -19,6 +19,10 @@ export class SelectableElementDirective {
     protected onDocumentClick(targetElement: any): void {
         const clickedInside = this.el.nativeElement.contains(targetElement);
 
+        if (targetElement.dataset.notSelectable) {
+            return;
+        }
+
         this.setSelected(clickedInside);
     }
 

projects/ng-draw-flow/src/lib/ng-draw-flow.component.html

@@ -8,6 +8,7 @@
             [formControl]="form"
             (connectionCreated)="connectionCreated.emit($event)"
             (connectionDeleted)="onConnectionDeleted($event)"
+            (connectionSelected)="connectionSelected.emit($event)"
             (nodeDeleted)="nodeDeleted.emit($event)"
             (nodeMoved)="nodeMoved.emit($event)"
             (nodeSelected)="nodeSelected.emit($event)"

projects/ng-draw-flow/src/lib/ng-draw-flow.component.ts

@@ -80,6 +80,9 @@ export class NgDrawFlowComponent implements ControlValueAccessor, OnInit, OnDest
     @Output()
     protected readonly connectionDeleted = new EventEmitter<DfEvent<DfDataConnection>>();
 
+    @Output()
+    protected readonly connectionSelected = new EventEmitter<DfDataConnection>();
+
     @Output()
     protected readonly nodeSelected = new EventEmitter<DfDataNode>();