alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(edge-labels): allow React component closes #1045

Browse Source
This commit is contained in:
moklick
2021-03-29 14:21:34 +02:00
parent f5bf40dd35
commit 66e7697e45
2 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/src/Edges/index.tsx
+8 -1
View File
@@ -43,7 +43,14 @@ const initialElements: Elements = [
id: 'e5-6', id: 'e5-6',
source: '5', source: '5',
target: '6', target: '6',
label: 'styled label', label: (
<>
<tspan>i am using</tspan>
<tspan dy={10} x={0}>
{'<tspan>'}
</tspan>
</>
),
labelStyle: { fill: 'red', fontWeight: 700 }, labelStyle: { fill: 'red', fontWeight: 700 },
arrowHeadType: ArrowHeadType.Arrow, arrowHeadType: ArrowHeadType.Arrow,
}, },
src/types/index.ts
+6 -6
View File
@@ -1,4 +1,4 @@
import { CSSProperties, MouseEvent as ReactMouseEvent, HTMLAttributes } from 'react'; import { CSSProperties, MouseEvent as ReactMouseEvent, HTMLAttributes, ReactNode } from 'react';
import { Selection as D3Selection, ZoomBehavior } from 'd3'; import { Selection as D3Selection, ZoomBehavior } from 'd3';
export type ElementId = string; export type ElementId = string;
@@ -63,7 +63,7 @@ export interface Edge<T = any> {
target: ElementId; target: ElementId;
sourceHandle?: ElementId | null; sourceHandle?: ElementId | null;
targetHandle?: ElementId | null; targetHandle?: ElementId | null;
label?: string; label?: string | ReactNode;
labelStyle?: CSSProperties; labelStyle?: CSSProperties;
labelShowBg?: boolean; labelShowBg?: boolean;
labelBgStyle?: CSSProperties; labelBgStyle?: CSSProperties;
@@ -84,7 +84,7 @@ export enum BackgroundVariant {
export type HandleType = 'source' | 'target'; export type HandleType = 'source' | 'target';
export type NodeTypesType = { [key: string]: React.ReactNode }; export type NodeTypesType = { [key: string]: ReactNode };
export type EdgeTypesType = NodeTypesType; export type EdgeTypesType = NodeTypesType;
@@ -102,7 +102,7 @@ export interface WrapEdgeProps<T = any> {
onClick?: (event: React.MouseEvent, edge: Edge) => void; onClick?: (event: React.MouseEvent, edge: Edge) => void;
selected: boolean; selected: boolean;
animated?: boolean; animated?: boolean;
label?: string; label?: string | ReactNode;
labelStyle?: CSSProperties; labelStyle?: CSSProperties;
labelShowBg?: boolean; labelShowBg?: boolean;
labelBgStyle?: CSSProperties; labelBgStyle?: CSSProperties;
@@ -144,7 +144,7 @@ export interface EdgeProps<T = any> {
animated?: boolean; animated?: boolean;
sourcePosition: Position; sourcePosition: Position;
targetPosition: Position; targetPosition: Position;
label?: string; label?: string | ReactNode;
labelStyle?: CSSProperties; labelStyle?: CSSProperties;
labelShowBg?: boolean; labelShowBg?: boolean;
labelBgStyle?: CSSProperties; labelBgStyle?: CSSProperties;
@@ -164,7 +164,7 @@ export interface EdgeSmoothStepProps<T = any> extends EdgeProps<T> {
export interface EdgeTextProps extends HTMLAttributes<SVGElement> { export interface EdgeTextProps extends HTMLAttributes<SVGElement> {
x: number; x: number;
y: number; y: number;
label?: string; label?: string | ReactNode;
labelStyle?: CSSProperties; labelStyle?: CSSProperties;
labelShowBg?: boolean; labelShowBg?: boolean;
labelBgStyle?: CSSProperties; labelBgStyle?: CSSProperties;