Comments (9)
@vaibhav-systango I've just launched version
2.0.0
of this library that exposes agetSmartEdge
function instead of factories, check the README.Looking at how the Floating Edges example was created, I think it's just a case of feeding the output of the example's
getEdgeParams
function into thegetSmartEdge
input, but I haven't tested it.
Feeding the output of getEdgeParams
into getSmartEdge
worked perfect, thanks for the note!
Attached is my working solution below:
import React, { useCallback } from "react";
import { useNodes, BezierEdge, useStore } from "reactflow";
import { getSmartEdge } from "@tisoap/react-flow-smart-edge";
import { getEdgeParams } from "./utils";
const myOptions = {
// your configuration goes here
nodePadding: 20,
gridRatio: 15,
};
export default function SmartEdgeWithButtonLabel(props: any) {
const { style, markerStart, markerEnd, source, target } = props;
const sourceNode = useStore(
useCallback((store) => store.nodeInternals.get(source), [source])
);
const targetNode = useStore(
useCallback((store) => store.nodeInternals.get(target), [target])
);
const nodes = useNodes();
const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(
sourceNode,
targetNode
);
const getSmartEdgeResponse = getSmartEdge({
sourcePosition: sourcePos,
targetPosition: targetPos,
sourceX: sx,
sourceY: sy,
targetX: tx,
targetY: ty,
nodes,
// Pass down options in the getSmartEdge object
options: myOptions,
});
// If the value returned is null, it means "getSmartEdge" was unable to find
// a valid path, and you should do something else instead
if (getSmartEdgeResponse === null) {
return <BezierEdge {...props} />;
}
const { svgPathString } = getSmartEdgeResponse;
return (
<>
<path
style={style}
className="react-flow__edge-path"
d={svgPathString}
markerEnd={markerEnd}
markerStart={markerStart}
/>
</>
);
}
from react-flow-smart-edge.
@vaibhav-systango I've just launched version 2.0.0
of this library that exposes a getSmartEdge
function instead of factories, check the README.
Looking at how the Floating Edges example was created, I think it's just a case of feeding the output of the example's getEdgeParams
function into the getSmartEdge
input, but I haven't tested it.
from react-flow-smart-edge.
Hey @AnhHuy02 , could you expand more on the problem you're experiencing? From the screenshot you shared it looks like everything is correct: for the edge at the top of "Strategist" node to connect to the bottom of "generating" node it needs to take this path to avoid intersections. Maybe you meant to connect bottom -> top
instead of top -> bottom
to create a straight line?
from react-flow-smart-edge.
Yes.
But can you add a Floating Edge from React Flow documentation with Smart Edge feature? It will be cool to see the diagram.
https://reactflow.dev/examples/floating-edges
from react-flow-smart-edge.
I see, so you'd like to see an "smart" equivalent of of React Flow's floating edge. I'm not sure if it would be possible, but I'll add to the backlog and leave this issue open
from react-flow-smart-edge.
any luck on this @tisoap @AnhHuy02
from react-flow-smart-edge.
@vaibhav-systango Didn't started working on this yet
from react-flow-smart-edge.
it'll be a great help if we can do this, can you guide me the direction incase you're keeping occupied I can try some approach for this. It'll be the coolest to have smart floating edges feature @tisoap @AnhHuy02
from react-flow-smart-edge.
This doesn't seem to help @tisoap
from react-flow-smart-edge.
Related Issues (20)
- Create templates for new issues
- Update Sponsor Badge
- Diagram becomes unresponsive with large data HOT 7
- Add draggable point to smart edge HOT 4
- Update to be compatible with React Flow 11 HOT 5
- In version 3.0 Beta - Edge between 2 nodes goes away if the nodes are close to each other HOT 3
- Props that are generated when you start dragging new connection are missing for <StepEdge /> in react flow v11 HOT 2
- Make edges not overlap each other HOT 1
- Connection line appears broken when using specific grid snapping HOT 3
- Connection line appears broken when using specific grid snapping HOT 1
- Demo page/Storybook is no longer working HOT 2
- Smart Edge Not Considering nodes inside a group. HOT 2
- Edges not starting/ending on XY coords HOT 1
- Bending of edge from source HOT 4
- Edge labels getting overlapped HOT 6
- Add SmoothStepPath HOT 3
- edgeCenterX and edgeCenterY sometimes aren't calculated properly! HOT 1
- Option to propagate exceptions outside of getSmartEdge HOT 2
- engine warning when installing latest version HOT 2
- Add helper function for EdgeTypes and Options
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-flow-smart-edge.