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

Merge branch 'v10' into refactor/nodes-edges-state

Browse Source
This commit is contained in:
moklick
2021-10-20 10:52:11 +02:00
parent f957462eb6 11ff5ecaf8
commit a0b8aa6fcb
27 changed files with 700 additions and 365 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/container/EdgeRenderer/MarkerDefinitions.tsx
+101 -40
View File
@@ -1,52 +1,113 @@
import React, { ReactNode } from 'react';
import React, { useMemo } from 'react';
interface MarkerProps {
import { useStore } from '../../store';
import { EdgeMarker, ArrowHeadType, ReactFlowState } from '../../types';
import { getMarkerId } from '../../utils/graph';
interface MarkerProps extends EdgeMarker {
id: string;
children: ReactNode;
}
const Marker = ({ id, children }: MarkerProps) => (
<marker
className="react-flow__arrowhead"
id={id}
markerWidth="12.5"
markerHeight="12.5"
viewBox="-10 -10 20 20"
orient="auto"
refX="0"
refY="0"
>
{children}
</marker>
);
interface MarkerDefinitionsProps {
color: string;
defaultColor: string;
}
const MarkerDefinitions = ({ color }: MarkerDefinitionsProps) => {
type SymbolProps = Omit<MarkerProps, 'id' | 'type'>;
const ArrowSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
return (
<polyline
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={strokeWidth}
fill="none"
points="-5,-4 0,0 -5,4"
/>
);
};
const ArrowClosedSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
return (
<polyline
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={strokeWidth}
fill={color}
points="-5,-4 0,0 -5,4 -5,-4"
/>
);
};
const markerSymbols = {
[ArrowHeadType.Arrow]: ArrowSymbol,
[ArrowHeadType.ArrowClosed]: ArrowClosedSymbol,
};
const Marker = ({
id,
type,
color,
width = 12.5,
height = 12.5,
units = 'strokeWidth',
strokeWidth,
orient = 'auto',
}: MarkerProps) => {
const Symbol = markerSymbols[type];
return (
<marker
className="react-flow__arrowhead"
id={id}
markerUnits={units}
markerWidth={`${width}`}
markerHeight={`${height}`}
viewBox="-10 -10 20 20"
orient={orient}
refX="0"
refY="0"
>
<Symbol color={color} strokeWidth={strokeWidth} />
</marker>
);
};
const edgesSelector = (s: ReactFlowState) => s.edges;
const MarkerDefinitions = ({ defaultColor }: MarkerDefinitionsProps) => {
const edges = useStore(edgesSelector);
const markers = useMemo(() => {
const ids: string[] = [];
return edges.reduce<MarkerProps[]>((markers, edge) => {
[edge.markerStart, edge.markerEnd].forEach((marker) => {
if (marker && typeof marker === 'object') {
const markerId = getMarkerId(marker);
if (!ids.includes(markerId)) {
markers.push({ id: markerId, color: marker.color || defaultColor, ...marker });
ids.push(markerId);
}
}
});
return markers.sort((a, b) => a.id.localeCompare(b.id));
}, []);
}, [edges, defaultColor]);
return (
<defs>
<Marker id="react-flow__arrowclosed">
<polyline
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1"
fill={color}
points="-5,-4 0,0 -5,4 -5,-4"
{markers.map((marker: MarkerProps) => (
<Marker
id={marker.id}
key={marker.id}
type={marker.type}
color={marker.color}
width={marker.width}
height={marker.height}
units={marker.units}
strokeWidth={marker.strokeWidth}
orient={marker.orient}
/>
</Marker>
<Marker id="react-flow__arrow">
<polyline
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
fill="none"
points="-5,-4 0,0 -5,4"
/>
</Marker>
))}
</defs>
);
};
src/container/EdgeRenderer/index.tsx
+5 -6
View File
@@ -24,8 +24,7 @@ interface EdgeRendererProps {
connectionLineComponent?: ConnectionLineComponent;
onEdgeClick?: (event: React.MouseEvent, node: Edge) => void;
onEdgeDoubleClick?: (event: React.MouseEvent, edge: Edge) => void;
arrowHeadColor: string;
markerEndId?: string;
defaultMarkerColor: string;
onlyRenderVisibleElements: boolean;
onEdgeUpdate?: OnEdgeUpdateFunc;
onEdgeContextMenu?: (event: React.MouseEvent, edge: Edge) => void;
@@ -176,11 +175,12 @@ const Edge = memo(
labelBgPadding={edge.labelBgPadding}
labelBgBorderRadius={edge.labelBgBorderRadius}
style={edge.style}
arrowHeadType={edge.arrowHeadType}
source={edge.source}
target={edge.target}
sourceHandleId={sourceHandleId}
targetHandleId={targetHandleId}
markerEnd={edge.markerEnd}
markerStart={edge.markerStart}
sourceX={sourceX}
sourceY={sourceY}
targetX={targetX}
@@ -271,12 +271,12 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
return null;
}
const { connectionLineType, arrowHeadColor, connectionLineStyle, connectionLineComponent } = props;
const { connectionLineType, defaultMarkerColor, connectionLineStyle, connectionLineComponent } = props;
const renderConnectionLine = connectionNodeId && connectionHandleType;
return (
<svg width={width} height={height} className="react-flow__edges">
<MarkerDefinitions color={arrowHeadColor} />
<MarkerDefinitions defaultColor={defaultMarkerColor} />
<g transform={`translate(${transform[0]},${transform[1]}) scale(${transform[2]})`}>
{edges.map((edge: Edge) => {
const { sourceNode, targetNode } = getSourceTargetNodes(edge, nodes);
@@ -295,7 +295,6 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
targetNodeY={targetNode?.position.y}
targetNodeHandleBounds={targetNode?.handleBounds}
elementsSelectable={elementsSelectable}
markerEndId={props.markerEndId}
onEdgeContextMenu={props.onEdgeContextMenu}
onEdgeMouseEnter={props.onEdgeMouseEnter}
onEdgeMouseMove={props.onEdgeMouseMove}
src/container/FlowRenderer/index.tsx
+1
View File
@@ -21,6 +21,7 @@ interface FlowRendererProps
| 'arrowHeadColor'
| 'onlyRenderVisibleElements'
| 'selectNodesOnDrag'
| 'defaultMarkerColor'
> {
children: ReactNode;
}
src/container/GraphView/index.tsx
+3 -5
View File
@@ -21,7 +21,7 @@ export interface GraphViewProps extends Omit<ReactFlowProps, 'onSelectionChange'
onlyRenderVisibleElements: boolean;
defaultZoom: number;
defaultPosition: [number, number];
arrowHeadColor: string;
defaultMarkerColor: string;
selectNodesOnDrag: boolean;
}
@@ -60,8 +60,7 @@ const GraphView = ({
defaultZoom,
defaultPosition,
preventScrolling,
arrowHeadColor,
markerEndId,
defaultMarkerColor,
zoomOnScroll,
zoomOnPinch,
panOnScroll,
@@ -154,8 +153,6 @@ const GraphView = ({
connectionLineType={connectionLineType}
connectionLineStyle={connectionLineStyle}
connectionLineComponent={connectionLineComponent}
arrowHeadColor={arrowHeadColor}
markerEndId={markerEndId}
onEdgeUpdate={onEdgeUpdate}
onlyRenderVisibleElements={onlyRenderVisibleElements}
onEdgeContextMenu={onEdgeContextMenu}
@@ -165,6 +162,7 @@ const GraphView = ({
onEdgeUpdateStart={onEdgeUpdateStart}
onEdgeUpdateEnd={onEdgeUpdateEnd}
edgeUpdaterRadius={edgeUpdaterRadius}
defaultMarkerColor={defaultMarkerColor}
/>
</FlowRenderer>
);
src/container/ReactFlow/index.tsx
+3 -6
View File
@@ -114,8 +114,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
translateExtent?: TranslateExtent;
preventScrolling?: boolean;
nodeExtent?: NodeExtent;
arrowHeadColor?: string;
markerEndId?: string;
defaultMarkerColor?: string;
zoomOnScroll?: boolean;
zoomOnPinch?: boolean;
panOnScroll?: boolean;
@@ -191,8 +190,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
translateExtent,
preventScrolling = true,
nodeExtent,
arrowHeadColor = '#b1b1b7',
markerEndId,
defaultMarkerColor = '#b1b1b7',
zoomOnScroll = true,
zoomOnPinch = true,
panOnScroll = false,
@@ -255,8 +253,6 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
defaultZoom={defaultZoom}
defaultPosition={defaultPosition}
preventScrolling={preventScrolling}
arrowHeadColor={arrowHeadColor}
markerEndId={markerEndId}
zoomOnScroll={zoomOnScroll}
zoomOnPinch={zoomOnPinch}
zoomOnDoubleClick={zoomOnDoubleClick}
@@ -280,6 +276,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
onEdgeUpdateStart={onEdgeUpdateStart}
onEdgeUpdateEnd={onEdgeUpdateEnd}
edgeUpdaterRadius={edgeUpdaterRadius}
defaultMarkerColor={defaultMarkerColor}
/>
<StoreUpdater
nodes={nodes}