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

chore(edge-renderer): cleanup types

Browse Source
This commit is contained in:
moklick
2022-08-08 17:31:04 +02:00
parent 72a3700a22
commit ff79bb8f03
2 changed files with 39 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/container/EdgeRenderer/index.tsx
+37 -47
View File
@@ -1,47 +1,44 @@
import { memo, CSSProperties } from 'react'; import { memo } from 'react';
import shallow from 'zustand/shallow'; import shallow from 'zustand/shallow';
import cc from 'classcat'; import cc from 'classcat';
import { useStore } from '../../hooks/useStore'; import { useStore } from '../../hooks/useStore';
import useVisibleEdges from '../../hooks/useVisibleEdges';
import ConnectionLine from '../../components/ConnectionLine/index'; import ConnectionLine from '../../components/ConnectionLine/index';
import MarkerDefinitions from './MarkerDefinitions'; import MarkerDefinitions from './MarkerDefinitions';
import { getEdgePositions, getHandle, getNodeData } from './utils'; import { getEdgePositions, getHandle, getNodeData } from './utils';
import useVisibleEdges from '../../hooks/useVisibleEdges';
import { import { Position, Edge, ConnectionMode, ReactFlowState } from '../../types';
Position, import { GraphViewProps } from '../GraphView';
Edge,
ConnectionLineType,
ConnectionLineComponent,
ConnectionMode,
OnEdgeUpdateFunc,
HandleType,
ReactFlowState,
EdgeTypesWrapped,
} from '../../types';
interface EdgeRendererProps { interface EdgeRendererProps
edgeTypes: EdgeTypesWrapped; extends Pick<
connectionLineType: ConnectionLineType; GraphViewProps,
connectionLineStyle?: CSSProperties; | 'edgeTypes'
connectionLineComponent?: ConnectionLineComponent; | 'connectionLineType'
connectionLineContainerStyle?: CSSProperties; | 'connectionLineType'
onEdgeClick?: (event: React.MouseEvent, node: Edge) => void; | 'connectionLineStyle'
onEdgeDoubleClick?: (event: React.MouseEvent, edge: Edge) => void; | 'connectionLineComponent'
defaultMarkerColor: string; | 'connectionLineContainerStyle'
onlyRenderVisibleElements: boolean; | 'connectionLineContainerStyle'
onEdgeUpdate?: OnEdgeUpdateFunc; | 'onEdgeClick'
onEdgeContextMenu?: (event: React.MouseEvent, edge: Edge) => void; | 'onEdgeDoubleClick'
onEdgeMouseEnter?: (event: React.MouseEvent, edge: Edge) => void; | 'defaultMarkerColor'
onEdgeMouseMove?: (event: React.MouseEvent, edge: Edge) => void; | 'onlyRenderVisibleElements'
onEdgeMouseLeave?: (event: React.MouseEvent, edge: Edge) => void; | 'onEdgeUpdate'
onEdgeUpdateStart?: (event: React.MouseEvent, edge: Edge, handleType: HandleType) => void; | 'onEdgeContextMenu'
onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge, handleType: HandleType) => void; | 'onEdgeMouseEnter'
edgeUpdaterRadius?: number; | 'onEdgeMouseMove'
noPanClassName?: string; | 'onEdgeMouseLeave'
| 'onEdgeUpdateStart'
| 'onEdgeUpdateEnd'
| 'edgeUpdaterRadius'
| 'noPanClassName'
| 'elevateEdgesOnSelect'
| 'rfId'
| 'disableKeyboardA11y'
> {
elevateEdgesOnSelect: boolean; elevateEdgesOnSelect: boolean;
rfId: string;
disableKeyboardA11y: boolean;
} }
const selector = (s: ReactFlowState) => ({ const selector = (s: ReactFlowState) => ({
@@ -94,8 +91,8 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
{isMaxLevel && <MarkerDefinitions defaultColor={defaultMarkerColor} rfId={props.rfId} />} {isMaxLevel && <MarkerDefinitions defaultColor={defaultMarkerColor} rfId={props.rfId} />}
<g> <g>
{edges.map((edge: Edge) => { {edges.map((edge: Edge) => {
const [sourceNodeRect, sourceHandleBounds, sourceIsValid] = getNodeData(nodeInternals, edge.source); const [sourceNodeRect, sourceHandleBounds, sourceIsValid] = getNodeData(nodeInternals.get(edge.source)!);
const [targetNodeRect, targetHandleBounds, targetIsValid] = getNodeData(nodeInternals, edge.target); const [targetNodeRect, targetHandleBounds, targetIsValid] = getNodeData(nodeInternals.get(edge.target)!);
if (!sourceIsValid || !targetIsValid) { if (!sourceIsValid || !targetIsValid) {
return null; return null;
@@ -113,19 +110,12 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
const sourcePosition = sourceHandle?.position || Position.Bottom; const sourcePosition = sourceHandle?.position || Position.Bottom;
const targetPosition = targetHandle?.position || Position.Top; const targetPosition = targetHandle?.position || Position.Top;
if (!sourceHandle) { if (!sourceHandle || !targetHandle) {
if (process.env.NODE_ENV === 'development') { if (process.env.NODE_ENV === 'development') {
const handleType = !sourceHandle ? 'source' : 'target';
const handleId = !sourceHandle ? edge.sourceHandle : edge.targetHandle;
console.warn( console.warn(
`[React Flow]: Couldn't create edge for source handle id: ${edge.sourceHandle}; edge id: ${edge.id}. Help: https://reactflow.dev/error#800` `[React Flow]: Couldn't create edge for ${handleType} handle id: ${handleId}; edge id: ${edge.id}. Help: https://reactflow.dev/error#800`
);
}
return null;
}
if (!targetHandle) {
if (process.env.NODE_ENV === 'development') {
console.warn(
`[React Flow]: Couldn't create edge for target handle id: ${edge.targetHandle}; edge id: ${edge.id}. Help: https://reactflow.dev/error#800`
); );
} }
return null; return null;
packages/core/src/container/EdgeRenderer/utils.ts
+2 -3
View File
@@ -7,7 +7,7 @@ import {
EdgeTypesWrapped, EdgeTypesWrapped,
HandleElement, HandleElement,
NodeHandleBounds, NodeHandleBounds,
NodeInternals, Node,
Position, Position,
Rect, Rect,
Transform, Transform,
@@ -166,8 +166,7 @@ export function isEdgeVisible({
return overlappingArea > 0; return overlappingArea > 0;
} }
export function getNodeData(nodeInternals: NodeInternals, nodeId: string): [Rect, NodeHandleBounds | null, boolean] { export function getNodeData(node: Node): [Rect, NodeHandleBounds | null, boolean] {
const node = nodeInternals.get(nodeId);
const handleBounds = node?.[internalsSymbol]?.handleBounds || null; const handleBounds = node?.[internalsSymbol]?.handleBounds || null;
const isInvalid = const isInvalid =