You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/components/canvas/layers/connectionLayer/ConnectionLayer.md
+26-10Lines changed: 26 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# ConnectionLayer
2
2
3
-
`ConnectionLayer`lets you create connections between blocks and anchors in your graph. It enables creating new connections through an intuitive drag and drop interface, handles the drawing of connection lines, and manages all related events.
3
+
`ConnectionLayer`manages the creation and visualization of connections between blocks and anchors in your graph. It provides an interactive drag and drop interface, customizable connection appearance, automatic selection handling, and a comprehensive event system for the entire connection lifecycle.
-**createIcon**: The icon shown when creating a connection
65
74
-**point**: The icon shown at the end of the connection
66
75
-**drawLine**: Function that defines how to draw the connection line
76
+
-**isConnectionAllowed**: Function that validates if a connection can be created from a source component
67
77
68
78
## Methods
69
79
@@ -76,49 +86,55 @@ The layer provides these events:
76
86
77
87
### connection-create-start
78
88
79
-
Fired when a user starts creating a connection.
89
+
Fired when a user initiates a connection from a block or anchor. This happens when dragging starts from a block (with Shift key) or an anchor. Preventing this event will prevent the selection of the source component.
80
90
81
91
```typescript
82
92
graph.on("connection-create-start", (event) => {
83
93
console.log('Creating connection from block', event.detail.blockId);
94
+
95
+
// If you prevent this event, the source component won't be selected
96
+
// event.preventDefault();
84
97
})
85
98
```
86
99
87
100
### connection-create-hover
88
101
89
-
Fired when hovering over a potential target while creating a connection.
102
+
Fired when the dragged connection endpoint hovers over a potential target block or anchor. Preventing this event will prevent the selection of the target component.
90
103
91
104
```typescript
92
105
graph.on("connection-create-hover", (event) => {
93
-
//Prevent connection to this target
94
-
event.preventDefault();
106
+
//If you prevent this event, the target component won't be selected
107
+
//event.preventDefault();
95
108
})
96
109
```
97
110
98
111
### connection-created
99
112
100
-
Fired when a connection is successfully created.
113
+
Fired when a connection is successfully created between two elements. By default, this adds the connection to the connectionsList in the store. Preventing this event will prevent the connection from being added to the store.
101
114
102
115
```typescript
103
116
graph.on("connection-created", (event) => {
104
117
// The connection is added to connectionsList by default
105
-
//You can prevent this:
106
-
event.preventDefault();
118
+
//If you prevent this event, the connection won't be added to the store
119
+
//event.preventDefault();
107
120
})
108
121
```
109
122
110
123
### connection-create-drop
111
124
112
-
Fired when the user drops the connection endpoint, whether or not a connection was created.
125
+
Fired when the user releases the mouse button to complete the connection process. This event fires regardless of whether a valid connection was established. Can be used for cleanup or to handle custom connection drop behavior.
0 commit comments