Merge pull request #91 from taiga-family/connections

feat: added a clickable stroke for the connecting lines
taiga-family · Nov 14, 2024 · b8c0619 · b8c0619
2 parents a61c310 + fe01dff
commit b8c0619
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 8 deletions.
diff --git a/projects/ng-draw-flow/src/lib/components/connections/connection.component.less b/projects/ng-draw-flow/src/lib/components/connections/connection.component.less
@@ -6,20 +6,32 @@
     aspect-ratio: 1 / 1;
 
     .main-path {
-        z-index: 0;
         fill: none;
         stroke-width: var(--df-connection-stroke-width);
         stroke: var(--df-connection-color);
+        pointer-events: none;
+        transform: translateZ(0);
+
+        &.df-selected {
+            stroke: var(--df-connection-color-active);
+        }
+    }
+
+    .selectable-area {
+        fill: none;
+        stroke-width: var(--df-connection-selectable-area-stroke-width);
+        stroke: transparent;
         pointer-events: stroke;
+        cursor: pointer;
         transform: translateZ(0);
+        transition: stroke 0.3s;
 
         &:hover {
-            stroke: var(--df-connection-color-hover);
-            cursor: pointer;
-        }
+            stroke: var(--df-connection-selectable-area-color);
 
-        &.df-selected {
-            stroke: var(--df-connection-color-active);
+            & + .main-path {
+                stroke: var(--df-connection-color-hover);
+            }
         }
     }
 }
diff --git a/projects/ng-draw-flow/src/lib/components/connections/connection/connection.component.html b/projects/ng-draw-flow/src/lib/components/connections/connection/connection.component.html
@@ -1,8 +1,13 @@
 <svg class="connection">
     <path
         dfSelectableElement
-        class="main-path"
+        class="selectable-area"
         [attr.d]="path$ | async"
         (selectionChanged)="onSelectedChanged($event)"
     />
+    <path
+        class="main-path"
+        [attr.d]="path$ | async"
+        [class.df-selected]="selected"
+    />
 </svg>
diff --git a/projects/ng-draw-flow/src/lib/components/connections/connection/connection.component.ts b/projects/ng-draw-flow/src/lib/components/connections/connection/connection.component.ts
@@ -48,7 +48,7 @@ export class ConnectionComponent {
     private readonly connectionsService = inject(ConnectionsService);
     private readonly coordinatesService = inject(CoordinatesService);
     private readonly options = inject(DRAW_FLOW_OPTIONS);
-    private selected = false;
+    protected selected = false;
 
     @Input()
     public connection!: DfDataConnection;

diff --git a/projects/ng-draw-flow/src/lib/ng-draw-flow.component.less b/projects/ng-draw-flow/src/lib/ng-draw-flow.component.less
@@ -9,6 +9,8 @@
     --df-connection-color-hover: #336fee;
     --df-connection-color-active: #156ed4;
     --df-connection-stroke-width: 2px;
+    --df-connection-selectable-area-color: rgba(#428bf9, 0.5);
+    --df-connection-selectable-area-stroke-width: 4px;
     --df-connector-color: #156ed4;
     --df-connector-color-hover: #428bf9;
 }