Blazor WebAssembly: Connecting Lines in SVG

Pic 1. Blazor Webassembly connecting lines in SVG. Connecting lines automatically change when you change the position of objects.
Pic 1. Blazor Webassembly connecting lines in SVG. Connecting lines automatically change when you change the position of objects.

What we will get in the end

Listing 1. Using of Connector component
Pic 2. Listing 1 result. The points are connected by a smooth line.
Pic 2. Listing 1 result. The points are connected by a smooth line.
  • coordinates of the start and end point,
  • direction of entry to the point: top, right, bottom, left.

Main idea

  • start point, end point,
  • start reference point and end reference point.
Pic 3. A cubic Bezier curve drawn with an SVG path element. The coordinates of the start and end points are marked in blue, the reference points are in red.
Pic 3. A cubic Bezier curve drawn with an SVG path element. The coordinates of the start and end points are marked in blue, the reference points are in red.
Pic 4. A cubic Bezier curve drawn with an SVG path element. The first reference point is lifted up.
Pic 4. A cubic Bezier curve drawn with an SVG path element. The first reference point is lifted up.

Blazor Connector component

Listing 2. Connector component.
  • the start and end points (X1, Y1; X2, Y2) (marked in blue in Pic 3) are set,
  • the reference points (c1x, c1y; c2x, c2y) (marked in red in Pic 3) need to be calculated.
  • from above,
  • from right,
  • from below,
  • from left.
Pic 5. Calculating the reference points for the left and right connection. 70 is an arbitrary coefficient, there is no sacred meaning,
Pic 5. Calculating the reference points for the left and right connection. 70 is an arbitrary coefficient, there is no sacred meaning,

Rebuilding the connecting line dynamically. OnParametersSet method

Listing 3. Connector component. Recalculation of reference points in setters. Not the best option.
Listing 4. The parameters of the Connector are changed all at once:

--

--

--

https://boyko.tech/ , https://github.com/AlexeyBoiko , https://linkedin.com/in/alexey-boyko-tech

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Using WayBack Machine Downloader

The Truth About Your Source of Truth

Setting up email receiving on AWS using SES

Very simple view-based NSTableView in Swift 5 using Model

Second Language Learning with Google Vision API

Java 8 — Date and Time Examples

How to create a no-code app using popular tools and Zapier

A summer internship in the cloud ☁

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alexey Boyko

Alexey Boyko

https://boyko.tech/ , https://github.com/AlexeyBoiko , https://linkedin.com/in/alexey-boyko-tech

More from Medium

Update: Using Vue 3 Components in ASP.NET Core without bundler

RxJS: map vs pluck vs mapTo Operator

Health check aggregator UI in microservice architecture

Migrate ASP.Net core from 5.0 to 6.0