`Development`: Enhance appearance of required interface connector

[minrows]

Checklist

• [x] I added multiple screenshots/screencasts of my UI changes

Motivation and Context

• When an interface had multiple connectors, there used to be overlapping segments among the marker
• This PR fixes that issue and the marker of the required connector is adjusted accordingly based on the number of connectors connected to an interface, without any overlapping segments.

Description

Implemented logic, for the case of :

• 1 connector, marker takes 50% (is semi-circle)
• 2 connectors: if connectors are opposite of each other, it takes ~40% percent each if not, it takes ~25% each (is a quarter circle)
• more than 2 connectors, marker takes ~25% percent each (is a quarter circle)

Steps for Testing

In local machine

1. Clone the repo
2. Checkout to branch enhancement/required-interface-connectors
3. Start the application by executing yarn install followed by yarn start command
4. Select Component Diagram in Diagram Type menu
5. Insert and connect a Component and Interface to the canvas
6. Change the association to required interface and observe that its layout changes based on the number of connectors connected to an interface (as illustrated in screenshot section)

Screenshots

Before

After