Comments (4)
@bcakmakoglu Sorry about the late reply. So my issue is that all three of the options you provided essentially require specific scenarios. Something like isFocusable is clear and applies in every case, and matches with accessibility. However, something I'd expect to be extremely similar to isFocusable for a click action is anything but simple.
For (2), this is doable, but when you're in a tailwind environment, this now forces a css file to be defined, since there's no tailwind option to override it.
For (1) and (3), I can see the selectable option in the docs and this file
, but it doesn't seem not appear to actually remove the styling for an edge, so you still get the pointer showing up. I'm using a custom edge and you can see it still shows all the clickable aspects. Here's parts of the relevant code and a screen grab:export type TreeEdge = Edge<{
start: { x: number, y: number }
center: { x: number, y: number },
end: { x: number, y: number };
}>;
function makeEdge(left: string, right: string): TreeEdge {
return {
id: `Edge-${left || 'null'}-${right || 'null'}`,
type: CanvasEdgeTypes.CustomEdge,
source: left,
target: right,
data: {
start: { x: 0, y: 0 }, // calculated later
center: { x: 0, y: 0 }, // calculated later
end: { x: 0, y: 0 }, // calculated later
},
// animated: true, // turned this off because it was taking a ton of GPU processing
focusable: false,
selectable: false, // there's a TS error here - it isn't defined
};
}
...
const edgeTypes = useMemo(() => ({
[CanvasEdgeTypes.CustomEdge]: CustomEdge,
}), []);
<ReactFlow
nodeTypes={nodeTypes}
edgeTypes={edgeTypes}
nodes={nodes}
edges={edges}
...
export function CustomEdge(edge: TreeEdge) {
const {
id,
data,
} = edge;
if (!data) return null;
const { start, end, center } = data;
const isCurved = center.x !== -1 && center.y !== -1;
let edgePath;
if (isCurved) {
([edgePath] = getSmoothStepPath({
sourceX: start.x,
sourceY: start.y,
centerX: center.x,
centerY: center.y,
targetX: end.x,
targetY: end.y,
sourcePosition: Position.Right, // must match handles
targetPosition: Position.Left, // must match handles
borderRadius: 4,
offset: 0,
}));
} else {
([edgePath] = getStraightPath({
sourceX: start.x,
sourceY: start.y,
targetX: end.x,
targetY: end.y,
}));
}
return (
<BaseEdge id={id} path={edgePath} />
);
}
Also, seems like there is a typing issue somewhere too. I can see that selectable prop defined here:
xyflow/packages/system/src/types/edges.ts
Line 26 in 82f40b4
type DefaultEdge<T = any> = {
id: string;
type?: string;
source: string;
target: string;
sourceHandle?: string | null;
targetHandle?: string | null;
style?: CSSProperties;
animated?: boolean;
hidden?: boolean;
deletable?: boolean;
data?: T;
className?: string;
sourceNode?: Node;
targetNode?: Node;
selected?: boolean;
markerStart?: EdgeMarkerType;
markerEnd?: EdgeMarkerType;
zIndex?: number;
ariaLabel?: string;
interactionWidth?: number;
focusable?: boolean;
updatable?: EdgeUpdatable;
} & EdgeLabelOptions;
export type Edge<T = any> = DefaultEdge<T> | SmoothStepEdgeType<T> | BezierEdgeType<T>;
from xyflow.
Sorry for the confusion. edge. selectable
is a new v12 feature. I would go with the CSS solution for v11.
from xyflow.
Since there are already ways to go about this, I'm not sure if introducing another prop is really that beneficial (we already have quite a number of props available already).
- As you said, you can solve this with a custom edge
- You can use CSS to disable pointer events on edges
.react-flow__edges { pointer-events: none }
- You can set
edge.selectable
tofalse
which basically disables running any action on click (or usedefaultEdgeOptions
to set it tofalse
for just all edges by default)
What specific benefit would this new prop have from your point of view? If it's really just about "disabling" the click (though if you don't have any listener bound for it, what exactly is the reason for "disabling" it?) I feel like there are easy enough options already.
from xyflow.
@moklick thanks for the clarification! Will definitely keep a watch on that v12 release!
from xyflow.
Related Issues (20)
- Using Jest to click on handle throws "S?.elementFromPoint is not a function" error HOT 5
- when draggin a node it leave a trail
- [React Flow]: Couldn't create edge for target handle id HOT 1
- Uncaught TypeError: Cannot read properties of null (reading 'useRef') HOT 1
- No flow in sight since v11 migration HOT 8
- edge mouse enter and edge mouse leave not working HOT 4
- `addNodes` blocked by `setNodes` HOT 4
- my panel is displayed on the nodes HOT 4
- Can't create edges on react flow v12 HOT 2
- Check existing tests
- Connectionline props
- v11 nodes, edges are not displayed HOT 3
- reactflow start HOT 2
- Add provision to control speed of panning of canvas while dragging the nodes
- Flow with many lines makes dragging difficult HOT 3
- onlyRenderVisibleElements Data only appears in viewports HOT 1
- Edges unmount when nodes change HOT 1
- scrolling function, data selection outside of viewport HOT 1
- Add an initial status to connection to see if a connection is in progress
- Disable shift click event HOT 2
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 xyflow.