Develop a line using botbuilder

Good day. I'm currently working on a vue js component that will function as a botbuilder. The main goal is to manipulate the cards displayed on the screen and establish links between them to define the flow of actions. Here's an image for reference:

https://i.sstatic.net/GRG7F.png

I'm facing a challenge in creating a dynamic arrow connecting the icon next to the text "First Step". Could anyone provide me with some guidance on how I can achieve this without the use of canvas? Below is a snippet of the code I have been working on:

<div>
<q-card class="card-wrapper flex cursor-pointer" :style="{ top: currentCardPos.y + 'px', left: currentCardPos.x + 'px' }" 
:class="{ dragging }" @mousedown="startDrag" @mousemove="drag" @mouseup="stopDrag">
  <div class="flex  q-ma-md justify-start">
    <div>
      <q-btn round color="primary" class="bg-green" icon="mdi-play" />
    </div>
    <div class="q-ml-md flex items-center">
      <span class="fontStyle">Initial Step</span>
    </div>
  </div>
  <div class="flex justify-center full-width">
    <div class="q-pa-sm">
      <span class="text-body1 fontStyleBody">The flow starts with this step.
      Click to add one of the optional triggers.</span>
    </div>
  </div>
  <div class="flex justify-center full-width">
      <q-btn flat label="Add Trigger" class="borderStyle"/>
  </div>
  <div class="flex justify-end full-width q-my-md">
    <span class="text-body1 fontStyleBody q-mr-md">The first step</span>
    <div class="icon-container"  style="position: relative;">
      <q-icon name="circle" size="20px" @click="startLine" @mousemove="dragLine" @mouseup="stopLine" class="text-primary cursor-pointer text-grey-8" />

      <div :style="{ left: startX + 'px', top: startY + 'px', width: lineLength + 'px', transform: 'rotate(' + lineAngle + 'rad)' }" class="line" v-show="isDragging"></div>
    </div>
</div>

Css

   <style>
.card-wrapper {
  border-radius: 8%;
  position: absolute;
  width: 20vw;
  user-select: none;
}
.card-wrapper:hover {
  border: solid 2px #0bcb6b;
}
.icon-container {
  position: absolute;
  bottom: 12px;
  right: -10px;
}

.fontStyle {
  font-weight: 500;
  line-height: 32px;
  color: #5a677d;
}
.fontStyleBody {
  font-weight: 400;
  line-height: 1em;
  color: #5a677d;
}
.borderStyle {
  width: 15vw; 
  height: 7vh; 
  border: dashed 0.1em #c9c9c9;
}
.line {
  position: absolute;
  pointer-events: none;
  height: 10px;
  background-color: black;
  z-index: 1;
  top: 10px; /* positioning adjustment */
  left: 20px; /* positioning adjustment */
}

</style>

I attempted creating a div element to serve as the connecting line but couldn't achieve the desired effect. My objective is to replicate something similar to the image shown below:

https://i.sstatic.net/3fWf4.png

Is it feasible to accomplish this using solely css, javascript, and html effortlessly? I prefer to avoid using libraries as they are often paid solutions.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

`Evaluating and contrasting information within a jQuery iteration`

Recently, I encountered an issue with a dynamically built table on my page that contains editable data fields. Here is an example snippet of the table structure: <tr> <td class="identifier">1</td> <td class="c1&q ...

Learn how to toggle a specific div by clicking on an image generated from an ngFor loop in Angular version 11

One issue I am facing is that I have multiple sections containing image info and details. When I click on a specific image, the corresponding details should toggle. Everything works fine, however, if I click on another image without closing the previous ...

Retrieve a Vue Component by utilizing a personalized rendering method for a Contentful embedded entry

Currently experimenting with Contentful, encountering some issues with the Rich text content field. To customize the rendering of this block and incorporate assets and linked references in Rich text content, I am utilizing the modules '@contentful/ri ...

The loading of charts and animations is sluggish on mobile devices

My Chart.js chart starts with 0 values and updates upon clicking submit to load data from an external database. While this works efficiently on a computer browser, the load time is significantly longer when accessing the page on a mobile device. It takes a ...

The issue of calling the store() function on null in Laravel with Nuxt

I'm encountering an issue with saving data in Laravel from my Nuxt Application. I successfully created data using Postman, but for some reason it's not working here. Controller $book = Book::create([ 'name' => $request ...

How to read a text file in JavaScript line by line

Coding Challenge: <script src="../scripts/jquery-3.1.0.min.js"></script> <script> $(document).ready(function(){ $('#test').click(function(){ var txtFile = '../data/mail.txt'; var file ...

utilizing dropzone.js to pass an index and invoke a function

While everything seems to be functioning correctly, there is a notable issue that I am facing. When I upload an image to my Dropzone instance, I want the file name of that image to be added to the cards array under imageInfo. The challenge lies in figurin ...

Rotate arrows by 90 degrees instead of 180 degrees in Bootstrap 5 Accordion

I have customized a Bootstrap 5 Accordion according to the guide provided at https://getbootstrap.com/docs/5.0/components/accordion/. The default behavior rotates the arrows 180 degrees when an item is opened, changing from 'v' to '^'. ...

Create a variety of charts using the same data object in Highcharts

Is it possible to display two (or three) different charts on the same page using Highcharts without creating separate div elements and only utilizing one object? I have created a screenshot to illustrate my question: You can view the code example on JSFi ...

Inline styles are effective, but external stylesheets are not functioning properly (see JsFiddle for reference)

http://jsfiddle.net/xw0vvo9e/4/ Trying to specify a background color for the navBar. In the provided jsfiddle, the CSS includes: div .navBar { width: 100%; height: 45px; background-color: #FF0000; top: 0px; position: fixed; } However, the background ...

Ways to apply background to a div element

I attempted to place an image as the background of a div, but it seems to have vanished! I would like the background image to cover the entire page. Thank you for your assistance. <!DOCTYPE html> <html> <head> <title></title& ...

Django informing me that the template is not found

Why am I getting a "template does not exist" error in Django? I'm trying to navigate from film_detail.html to film_report.html by clicking on the "report" button... views.py class FilmReport(LoginRequiredMixin, UpdateView): model = Report fi ...

A step-by-step guide on connecting an event listener to the search input of Mapbox GL Geocoder in a Vue application

I've encountered a challenge trying to add an event listener to the Mapbox GL Geocoder search input within a Vue application. It appears to be a straightforward task, but I'm facing difficulties. My objective is to implement a functionality simi ...

Arranging the list items in a perfectly straight vertical line

Concern: I'm struggling with alignment issues on my website. I have country flags displayed using display:inline;. The issue arises when the number next to the flag exceeds single digits (e.g., 10 or more) as it affects the alignment due to the consi ...

Is it possible for style sheets to malfunction due to the presence of the TITLE attribute on <link> tags?

We are currently involved in the process of upgrading an outdated corporate intranet. The challenge is that our users primarily rely on IE8 and IE9, while most of our sites were designed to function with compatibility for browsers between IE5 - IE9. While ...

Problem with jQuery offset: SWF position remains unaffected

I attempted to create a code that would position an SWF file on top of an HTML button using jQuery's offset function to determine the coordinates. However, despite my efforts, the SWF does not appear to move as intended. var offset = $("#button").off ...

Customizing Column Background Color with AngularJS

https://i.sstatic.net/OHFFF.png My current webapp highlights the day of the week on a table for the current day and the day two weeks from now. However, I'm facing an issue with adjusting the highlight if either of these days falls on a holiday. Curr ...

Dynamically Allocating Page Heights

I am tasked with creating an ASP.NET MVC page that will display a template of controls. The controls will be retrieved from an XML file. One issue I am facing is that the number of controls is not fixed, so the page height needs to be dynamic. Our site has ...

Is it possible for a mobile device to play .ogg videos?

Currently, I am setting up a server to stream videos using HTML. So far, I have tested playing both .mp4 and .ogg video formats on my computer successfully. However, when I attempted to play the same videos on a mobile device, only the .mp4 file showed u ...

Error in Vue Vuelidate appearing when form is submitted with empty data property

I have been working on some basic validation for required fields and minimum length. The problem arises when I submit a network request for data insertion, the validation works perfectly fine. However, after the network call, if I try to make my text fie ...