Assuming I have a few different connection types, how can I change the line color when creating a new line?

[bstaley]

Hello,

I have a few different types of inputs and outputs. They have different symbols like squares, circles and triangles, which each have their own color. This is an indication to the user which items can be connected. Is there a way, when dragging to link a new connection, that I can specify the color for the 'f-connection-for-create'?

Thanks so much!

[bstaley]

After reading through this libraries code I came across (dragStart) and (dragEnd) from f-flow. After wiring dragStart and logging it I noticed it was emitting events for creating connections. For anyone who comes across this, here is how I solved it.

First off you should note that in order to include meta data with my inputs/outputs, like the type of sockets they are, I just prefixed the Id with <type>|<id>. I don't know if there is an easier way to do this but it's working for now.

In my flow host class I have

dragStarted(event: FDragStartedEvent) {
    if (event.fData && event.fEventType === 'create-connection') {
      this.connectionType = event.fData.fOutputOrOutletId.split('|')[0];
    }
  }

Then in my flow host template I have

<f-flow>
  (fDragStarted)="dragStarted($event)"
  [class]="connectionType"
</f-flow>

Then in my sass file I just set up the stroke to override like so (note the <type> is the connection type)

:host ::ng-deep {
  .<type> .f-connection-for-create .f-connection-path,
  f-connection.<type> .f-connection-path {
    stroke: #49454F;
  }
}

I'm in the process of evaluating libs for a node graph builder and would have loved some response from the owner, even "You should have a look at dragStart, but I understand life gets busy. Anyway, I hope this helps someone in the future.

[siarheihuzarevich]

Hi! Thanks for digging into it and sharing your solution — this is exactly how it was intended to work 🙂

The fDragStarted event is designed to emit fData with information about the connection being created, so you can customize things like the connection type or styling. Using a prefix in fOutputId is a perfectly fine approach, especially if you want to avoid additional metadata structures.

I’m planning to add an example for dynamic connection coloring to the documentation in the future.

If you have any ideas or suggestions for improving the API — feel free to share! 👋