Personalized animated Reactflow Connection Lines

My goal is to develop a personalized animated connection lines in reactflow, rather than using the default dashed line that appears when the animated: true prop is applied.

I am aware that we can customize the styling by using the following code snippet:

setEdges((eds) => [
                        ...eds,
                        {
                            source: 2,
                            targetHandle: 'bottom',
                            target: 1,
                            sourceHandle: 'top',
                            id: 1,
                            type: 'smoothstep',
                            style: { stroke: `${css}`, strokeWidth: 4 },
                        },
                    ]);

My aim is to achieve a similar effect as shown in this example using custom CSS:

https://i.sstatic.net/3qPWm.gif

javascriptcssreactjsinline-stylesreact-flow

Answer №1

Check out my customized Edge component code below. Sharing in case it helps someone else!

import { useState } from 'react';
import { getBezierPath, BaseEdge, EdgeLabelRenderer } from 'reactflow';

export default function CustomEdge({
    id,
    sourceX,
    sourceY,
    targetX,
    targetY,
    sourcePosition,
    targetPosition,
    data,
    label,
    markerEnd,
}) {
    const [edgePath, labelX, labelY] = getBezierPath({
        sourceX,
        sourceY,
        sourcePosition,
        targetX,
        targetY,
        targetPosition,
    });

    return (
        <>
            <BaseEdge path={edgePath} markerEnd={markerEnd} style={{ stroke: `${data.color1}`, strokeWidth: 4 }} />

            <EdgeLabelRenderer>
                <div
                    style={{
                        position: 'absolute',
                        transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
                        fontSize: 12,
                        backgroundColor: '#EEF0F6',
                        fill: '#EEF0F6',
                        pointerEvents: 'all',
                        padding: '4px',
                    }}
                    className="nodrag nopan"
                >
                    {label}
                </div>
            </EdgeLabelRenderer>

            <circle
                style={{ filter: `drop-shadow(3px 3px 5px ${data.color1}` }}
                r="4"
                fill={`${data.color1}`}
                className="circle"
            >
                <animateMotion dur="6s" repeatCount="indefinite" path={edgePath} />
            </circle>
        </>
    );
}

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

Customize the CSS for the column containers in Material-UI's DataGrid with the

I am facing a challenge in trying to override the CSS property position on the .MuiDataGrid-columnsContainer. Upon reviewing the information available on https://material-ui.com/api/data-grid/#css, it seems that there is a rule defined for root but not spe ...

javascriptcssreactjsmaterial-ui

encountered net::ERR_EMPTY_RESPONSE while attempting to locate a CSS file within an AngularJS directive

Every time my webpage attempts to access the css file from a directive, I encounter a net::ERR_EMPTY_RESPONSE. I have implemented door3's on-demand css feature, which allows for lazy loading of css files only when necessary. This feature works flawle ...

javascriptjqueryhtmlcssangularjs

Dealing with images on my live React application

For managing static images in my react app, I have integrated cloudinary as a CDN service. Can anyone suggest a seamless way to switch between using local image folders during development and switching to the CDN URL for production efficiently? ...

javascriptreactjscdncloudinary

Getting the value of "Page=?" from the href attribute in an HTML tag can be done using Selenium Webdriver and Java

I am looking to extract the value "page = ?" from a specific "href" tag in the HTML code below. I need this value for my Selenium WebDriver script so that my loop can iterate up to page 53. Can someone guide me on how to retrieve the "page =" value mentio ...

javajavascripthtmlselenium-webdriver

NextJS - Error: Invalid JSON format, starting with a "<" symbol at position 0

After following a tutorial on NextJS, I attempted to make some modifications. My goal was to include the data.json file on the page. However, I kept encountering the error message "Unexpected token < in JSON at position 0." I understand that I need to ...

jsonreactjsnext.js

The container in Bootstrap's CSS now appears when the navigation bar is present

Experiencing a minor issue here. I am attempting to create a layout with a navigation positioned in the top right corner, and the main content contained within a separate container below it. The problem I am facing is that the content container seems to b ...

htmlcsstwitter-bootstrap

CSS3: What is causing this issue in FireFox?

http://jsfiddle.net/tNg2B/ It's clear that there is a noticeable difference when viewing this in Chrome compared to Firefox. The ":before" and ":after" pseudo classes seem to be malfunctioning in Firefox. Is there a way to resolve this issue? Edit: ...

firefoxcss

Encountering a error with NextJS during the initial npm run dev command

My PC seems to be having issues every time I try to create a NextJS application and run it in development mode. I keep encountering this error: Error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use ...

reactjswebpacknext.js

Substituting placeholders within a docx template remains incomplete

Utilizing this specific library, I am implementing a feature to substitute placeholders within a docx template and generate multiple documents. The technologies involved are neutralino and vue for the front-end, where I have devised a method that transmits ...

javascriptvue.jsdocxneutralinojseasy-template-x

javascript / php - modify input fields according to selection change

Can anyone help me with an issue I'm facing? I want to update multiple textfields whenever a new option is selected from my dropdown menu. I've written the following code, but it's not working as expected. Can someone figure out what's ...

phpjavascriptajaxjquery

Issue Encountered While Deploying Next JS Application Utilizing Dynamic Routing

I just finished developing my Personal Blog app with Next JS, but I keep encountering an error related to Dynamic Routing whenever I run npm run-script build. Below is the code for the Dynamic Route Page: import cateogaryPage from '../../styles/cards ...

javascriptreactjsapideploymentnext.js

Choosing a particular 2D array based on another variable in jQuery and JavaScript

Within my project, I am utilizing 2D arrays to append specific divs under particular circumstances. In an effort to streamline and enhance the code, I attempted to create a variable that would determine which array to utilize based on the id of an HTML < ...

javascriptjqueryhtml

The request for JSON parsing encountered a failed attempt, resulting in an error while trying to parse the JSON

var userData = { "emailAddress": document.getElementById('emailAddress').value, "password": document.getElementById('password').value } var userDataString = JSON.stringify(userData); alert(userDataString); var url = "url"; var ...

javascriptajaxjson

Utilizing JavaScript and JSON to Retrieve Array Elements by Key Names as Indexes

I'm looking for a way to access elements in an array using unique key names instead of numerical indexes. Specifically, I'm developing a Discord bot where each server has its own settings. When a message is sent on a server, I need to retrieve th ...

javascriptarraysjsondiscord

Execute function when button is clicked in ExpressJS

I am looking to execute a function on my node server when a button on my website is clicked: What I currently have: Index.html (I have not included the entire content for simplicity) <button id="tv">tv</button> Client.js (Client side) const ...

javascriptnode.jsexpresslistener

Sending a different name for the jQuery parameter

I'm looking to select CSS settings based on the presence of a data tag. What would be the correct approach for this? var datadirection = 'left'; //default direction if( $(this).attr('data-right') ){ datadirection = 'righ ...

jquerycssfunctionparameters

Utilize Jquery to dynamically update form input in real time based on checkbox selections

I am working on a form that requires real-time calculation of GST (Goods and Services Tax) directly within the form (GST = Price/11) This functionality has been implemented with the following script. Additionally, the calculation needs to be adjust ...

javascriptjqueryhtmlformscheckbox

Why does Material-UI TableCell-root include a padding-right of 40px?

I'm intrigued by the reasoning behind this. I'm considering overriding it, but I want to ensure that I'm not undoing someone's hard work. .MuiTableCell-root { display: table-cell; padding: 14px 40px 14px 16px; font-size: 0. ...

javascriptcssreactjsmaterial-designmaterial-ui

Swap a jQuery class with another if the class for ul li is currently active

I am currently developing a form builder and I would like to customize the appearance, specifically changing the color of the text. I want the text to be white when the class is set to active, and black when the class is not active. Is there a way to achi ...

javascriptjquerycss

Adjusting the padding at the top of React Material-UI Textfield for Thai language characters

Using the library for input has been helpful, but I encountered an issue when working with Thai language. It requires additional top padding to correctly display words as Thai language contains 2 levels of vowels. For instance, a word like "ที่นั ...

reactjsmaterial-uitextfieldthai