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.