Skip to content

Commit 983fba7

Browse files
fiorsaoirsefiorsaoirse
committed
Added EdgeDefs container, changed the story
1 parent 932692b commit 983fba7

4 files changed

Lines changed: 101 additions & 94 deletions

File tree

‎src/extensions/react-flow/edges/EdgeDefaultV12.tsx‎

Lines changed: 1 addition & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ export const EdgeDefaultV12 = memo(
8282
<EdgeLabelRenderer>
8383
<div
8484
style={{
85+
position: "absolute",
8586
transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
8687
...labelStyle,
8788
...(labelShowBg
@@ -102,33 +103,6 @@ export const EdgeDefaultV12 = memo(
102103

103104
return (
104105
<>
105-
<svg style={{ position: "absolute", top: 0, left: 0 }}>
106-
<defs>
107-
<marker
108-
id="arrow-closed"
109-
viewBox="-10 -10 20 20"
110-
markerWidth="10"
111-
markerHeight="10"
112-
refX="0"
113-
refY="0"
114-
orient="auto"
115-
>
116-
<path d="M-4,-4 L4,0 L-4,4 Z" fill="currentColor" />
117-
</marker>
118-
<marker
119-
id="arrow-closed-reverse"
120-
viewBox="-10 -10 20 20"
121-
markerWidth="10"
122-
markerHeight="10"
123-
refX="0"
124-
refY="0"
125-
orient="auto-start-reverse"
126-
>
127-
<path d="M-4,-4 L4,0 L-4,4 Z" fill="currentColor" />
128-
</marker>
129-
</defs>
130-
</svg>
131-
132106
<g
133107
{...edgeSvgProps}
134108
className={edgeDefaultUtils.createEdgeDefaultClassName({ intent }, edgeSvgProps?.className ?? "")}

‎src/extensions/react-flow/edges/EdgeDefs.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from "react";
2+
3+
export const EdgeDefs = React.memo(() => (
4+
<svg style={{ position: "absolute", top: 0, left: 0 }}>
5+
<defs>
6+
<marker
7+
id="arrow-closed"
8+
viewBox="-10 -10 20 20"
9+
markerWidth="10"
10+
markerHeight="10"
11+
refX="0"
12+
refY="0"
13+
orient="auto"
14+
>
15+
<path d="M-4,-4 L4,0 L-4,4 Z" fill="currentColor" />
16+
</marker>
17+
<marker
18+
id="arrow-closed-reverse"
19+
viewBox="-10 -10 20 20"
20+
markerWidth="10"
21+
markerHeight="10"
22+
refX="0"
23+
refY="0"
24+
orient="auto-start-reverse"
25+
>
26+
<path d="M-4,-4 L4,0 L-4,4 Z" fill="currentColor" />
27+
</marker>
28+
</defs>
29+
</svg>
30+
));

‎src/extensions/react-flow/edges/stories/EdgeDefaultV12.stories.tsx‎

Lines changed: 68 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import React, { useCallback, useMemo, useState } from "react";
1+
import React, { useCallback, useState } from "react";
22
import { Meta, StoryFn } from "@storybook/react";
3-
import { Edge, Node, Position, ReactFlow } from "@xyflow/react";
3+
import { addEdge, Edge, OnConnect, Position, ReactFlow, useEdgesState, useNodesState } from "@xyflow/react";
44

55
import { NodeDefaultV12 } from "../../nodes/NodeDefaultV12";
66
import { EdgeDefaultV12, EdgeDefaultV12DataProps as EdgeData } from "../EdgeDefaultV12";
7+
import { EdgeDefs } from "../EdgeDefs";
78

89
import { EdgeLabel, EdgeLabelObject } from "./../../../../../index";
910

@@ -30,67 +31,66 @@ export default {
3031
const EdgeDefault = (args: Edge) => {
3132
const [reactflowInstance, setReactflowInstance] = useState(null);
3233

33-
const [nodes, edges] = useMemo<[Node[], Edge[]]>(() => {
34-
return [
35-
[
36-
{
37-
id: args.source,
38-
type: "default",
39-
data: {
40-
label: "Default source",
41-
content: "Example content.",
42-
minimalShape: "none",
43-
handles: [
44-
{
45-
id: args.source,
46-
type: "source",
47-
tooltip: "this is a source handle",
48-
position: Position.Right,
49-
onClick: (params) => {
50-
// eslint-disable-next-line no-console
51-
console.log("onClick source", params);
52-
},
53-
},
54-
],
34+
const [nodes, , onNodesChange] = useNodesState([
35+
{
36+
id: args.source,
37+
type: "default",
38+
data: {
39+
label: "Default source",
40+
content: "Example content.",
41+
minimalShape: "none",
42+
handles: [
43+
{
44+
id: args.source,
45+
type: "source",
46+
tooltip: "this is a source handle",
47+
position: Position.Left,
48+
onClick: (params) => {
49+
// eslint-disable-next-line no-console
50+
console.log("onClick source", params);
51+
},
5552
},
56-
position: { x: 50, y: 0 },
57-
},
58-
{
59-
id: args.target,
60-
type: "default",
61-
data: {
62-
label: "Default target",
63-
content: "Example content.",
64-
minimalShape: "none",
65-
handles: [
66-
{
67-
id: args.target,
68-
type: "target",
69-
tooltip: "this is a target handle",
70-
position: Position.Left,
71-
onClick: (params) => {
72-
// eslint-disable-next-line no-console
73-
console.log("onClick target", params);
74-
},
75-
},
76-
],
53+
],
54+
},
55+
position: { x: 50, y: 0 },
56+
},
57+
{
58+
id: args.target,
59+
type: "default",
60+
data: {
61+
label: "Default target",
62+
content: "Example content.",
63+
minimalShape: "none",
64+
handles: [
65+
{
66+
id: args.target,
67+
type: "target",
68+
tooltip: "this is a target handle",
69+
position: Position.Right,
70+
onClick: (params) => {
71+
// eslint-disable-next-line no-console
72+
console.log("onClick target", params);
73+
},
7774
},
78-
position: { x: 300, y: 0 },
79-
},
80-
] as Node[],
81-
[
82-
{
83-
...args,
84-
sourceX: 150,
85-
sourceY: 0,
86-
targetX: 250,
87-
targetY: 0,
88-
sourcePosition: Position.Right,
89-
targetPosition: Position.Left,
90-
},
91-
],
92-
];
93-
}, [args]);
75+
],
76+
},
77+
position: { x: 300, y: 0 },
78+
},
79+
]);
80+
81+
const [edges, setEdges, onEdgesChange] = useEdgesState([
82+
{
83+
...args,
84+
// sourceX: 150,
85+
// sourceY: 0,
86+
// targetX: 250,
87+
// targetY: 0,
88+
sourcePosition: Position.Left,
89+
targetPosition: Position.Right,
90+
},
91+
]);
92+
93+
const onConnect: OnConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), []);
9494

9595
const onLoad = useCallback(
9696
(rfi) => {
@@ -103,12 +103,17 @@ const EdgeDefault = (args: Edge) => {
103103

104104
return (
105105
<div style={{ width: "1000px", height: "800px" }}>
106+
<EdgeDefs />
106107
<ReactFlow
107-
defaultNodes={nodes}
108-
defaultEdges={edges}
108+
nodes={nodes}
109+
edges={edges}
109110
onLoad={onLoad}
110111
edgeTypes={edgeTypes}
111112
nodeTypes={nodeTypes}
113+
onNodesChange={onNodesChange}
114+
onEdgesChange={onEdgesChange}
115+
onConnect={onConnect}
116+
fitView
112117
/>
113118
</div>
114119
);

‎src/extensions/react-flow/nodes/NodeContent.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -274,9 +274,8 @@ const addHandles = (
274274
nodeStyle: any,
275275
flowVersion: any = "legacy"
276276
) => {
277-
console.log("AddHandles:", handles);
278-
279-
return handles[position].map((handle: any, idx: any) => {
277+
return handles[position].map((handle: HandleDefaultProps, idx: number) => {
278+
// FIXME: remove? orig v12 change: return handles[position].map((handle: any, idx: any) => {
280279
const { style = {}, ...otherHandleProps } = handle;
281280
const styleAdditions: { [key: string]: string } = {
282281
color: nodeStyle.borderColor ?? undefined,
@@ -567,7 +566,6 @@ export function NodeContent<CONTENT_PROPS = any>({
567566
}ms`,
568567
} as React.CSSProperties)
569568
: {};
570-
console.log("Handles:", handles);
571569

572570
const nodeContent = (
573571
<>

0 commit comments

Comments
 (0)