From 63d1e4b218e6af6c853162e4c36e8747bf5580a0 Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 15 Sep 2020 10:12:57 +0200 Subject: [PATCH 1/2] fix(utils): export getIncomers #510 --- src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.ts b/src/index.ts index 40da9303..ddde777d 100644 --- a/src/index.ts +++ b/src/index.ts @@ -8,7 +8,7 @@ export { getBezierPath } from './components/Edges/BezierEdge'; export { getSmoothStepPath } from './components/Edges/SmoothStepEdge'; export { getMarkerEnd, getCenter as getEdgeCenter } from './components/Edges/utils'; -export { isNode, isEdge, removeElements, addEdge, getOutgoers, getConnectedEdges } from './utils/graph'; +export { isNode, isEdge, removeElements, addEdge, getOutgoers, getIncomers, getConnectedEdges } from './utils/graph'; export * from './additional-components'; export * from './types'; From 0b15211e18de2af27b3e1c7c84741fd5c8c302df Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 15 Sep 2020 11:17:06 +0200 Subject: [PATCH 2/2] refactor(edges): pass original source and target ids, cleanup #476 --- src/components/Edges/BezierEdge.tsx | 4 +- src/components/Edges/wrapEdge.tsx | 114 ++++++++++++++------------- src/container/EdgeRenderer/index.tsx | 4 +- src/container/EdgeRenderer/utils.ts | 12 +-- src/types/index.ts | 83 +++++++++++-------- 5 files changed, 116 insertions(+), 101 deletions(-) diff --git a/src/components/Edges/BezierEdge.tsx b/src/components/Edges/BezierEdge.tsx index 2c62f718..6820e98a 100644 --- a/src/components/Edges/BezierEdge.tsx +++ b/src/components/Edges/BezierEdge.tsx @@ -3,7 +3,7 @@ import React, { memo } from 'react'; import EdgeText from './EdgeText'; import { getMarkerEnd, getCenter } from './utils'; -import { EdgeBezierProps, Position } from '../../types'; +import { EdgeProps, Position } from '../../types'; interface GetBezierPathParams { sourceX: number; @@ -55,7 +55,7 @@ export default memo( style, arrowHeadType, markerEndId, - }: EdgeBezierProps) => { + }: EdgeProps) => { const [centerX, centerY] = getCenter({ sourceX, sourceY, targetX, targetY }); const path = getBezierPath({ sourceX, diff --git a/src/components/Edges/wrapEdge.tsx b/src/components/Edges/wrapEdge.tsx index 23851899..f2bba6d4 100644 --- a/src/components/Edges/wrapEdge.tsx +++ b/src/components/Edges/wrapEdge.tsx @@ -1,86 +1,80 @@ -import React, { memo, ComponentType, CSSProperties } from 'react'; +import React, { memo, useMemo, ComponentType, CSSProperties, useCallback } from 'react'; import cc from 'classcat'; import { useStoreActions } from '../../store/hooks'; -import { ElementId, Edge, EdgeCompProps } from '../../types'; +import { Edge, EdgeProps, WrapEdgeProps } from '../../types'; -interface EdgeWrapperProps { - id: ElementId; - source: ElementId; - target: ElementId; - type: any; - label?: string; - labelStyle?: CSSProperties; - labelShowBg?: boolean; - labelBgStyle?: CSSProperties; - labelBgPadding?: [number, number]; - labelBgBorderRadius?: number; - className?: string; - onClick?: (event: React.MouseEvent, edge: Edge) => void; - animated?: boolean; - selected: boolean; - elementsSelectable: boolean; - isHidden?: boolean; - data?: any; -} - -export default (EdgeComponent: ComponentType) => { +export default (EdgeComponent: ComponentType) => { const EdgeWrapper = ({ id, - source, - target, + className, type, - animated, - selected, + data, onClick, - elementsSelectable, + selected, + animated, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, - className, + style, + arrowHeadType, + source, + target, + sourceX, + sourceY, + targetX, + targetY, + sourcePosition, + targetPosition, + elementsSelectable, + markerEndId, isHidden, - data, - ...rest - }: EdgeWrapperProps) => { + }: WrapEdgeProps) => { const setSelectedElements = useStoreActions((actions) => actions.setSelectedElements); + const edgeClasses = cc(['react-flow__edge', `react-flow__edge-${type}`, className, { selected, animated }]); + + const edgeGroupStyle: CSSProperties = useMemo( + () => ({ + pointerEvents: elementsSelectable || onClick ? 'all' : 'none', + }), + [elementsSelectable, onClick] + ); + + const onEdgeClick = useCallback( + (event: React.MouseEvent): void => { + if (elementsSelectable) { + setSelectedElements({ id, source, target }); + } + + if (onClick) { + const edgeElement: Edge = { id, source, target, type }; + + if (typeof data !== 'undefined') { + edgeElement.data = data; + } + + onClick(event, edgeElement); + } + }, + [elementsSelectable, id, source, target, type, data, onClick] + ); + if (isHidden) { return null; } - const edgeClasses = cc(['react-flow__edge', `react-flow__edge-${type}`, className, { selected, animated }]); - const edgeGroupStyle: CSSProperties = { - pointerEvents: elementsSelectable || onClick ? 'all' : 'none', - }; - const onEdgeClick = (event: React.MouseEvent): void => { - if (elementsSelectable) { - setSelectedElements({ id, source, target }); - } - - if (onClick) { - const edgeElement: Edge = { id, source, target, type }; - - if (typeof data !== 'undefined') { - edgeElement.data = data; - } - - onClick(event, edgeElement); - } - }; - return ( ) => { labelBgPadding={labelBgPadding} labelBgBorderRadius={labelBgBorderRadius} data={data} - {...rest} + style={style} + arrowHeadType={arrowHeadType} + sourceX={sourceX} + sourceY={sourceY} + targetX={targetX} + targetY={targetY} + sourcePosition={sourcePosition} + targetPosition={targetPosition} + markerEndId={markerEndId} /> ); diff --git a/src/container/EdgeRenderer/index.tsx b/src/container/EdgeRenderer/index.tsx index e3de10c1..b84161a3 100644 --- a/src/container/EdgeRenderer/index.tsx +++ b/src/container/EdgeRenderer/index.tsx @@ -175,8 +175,8 @@ function renderEdge( labelBgBorderRadius={edge.labelBgBorderRadius} style={edge.style} arrowHeadType={edge.arrowHeadType} - source={sourceId} - target={targetId} + source={edge.source} + target={edge.target} sourceHandleId={sourceHandleId} targetHandleId={targetHandleId} sourceX={sourceX} diff --git a/src/container/EdgeRenderer/utils.ts b/src/container/EdgeRenderer/utils.ts index fa651b29..de194de8 100644 --- a/src/container/EdgeRenderer/utils.ts +++ b/src/container/EdgeRenderer/utils.ts @@ -3,21 +3,21 @@ import { ComponentType } from 'react'; import { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '../../components/Edges'; import wrapEdge from '../../components/Edges/wrapEdge'; -import { EdgeTypesType, EdgeCompProps } from '../../types'; +import { EdgeTypesType, EdgeProps } from '../../types'; export function createEdgeTypes(edgeTypes: EdgeTypesType): EdgeTypesType { const standardTypes: EdgeTypesType = { - default: wrapEdge((edgeTypes.default || BezierEdge) as ComponentType), - straight: wrapEdge((edgeTypes.bezier || StraightEdge) as ComponentType), - step: wrapEdge((edgeTypes.step || StepEdge) as ComponentType), - smoothstep: wrapEdge((edgeTypes.step || SmoothStepEdge) as ComponentType), + default: wrapEdge((edgeTypes.default || BezierEdge) as ComponentType), + straight: wrapEdge((edgeTypes.bezier || StraightEdge) as ComponentType), + step: wrapEdge((edgeTypes.step || StepEdge) as ComponentType), + smoothstep: wrapEdge((edgeTypes.step || SmoothStepEdge) as ComponentType), }; const wrappedTypes = {} as EdgeTypesType; const specialTypes: EdgeTypesType = Object.keys(edgeTypes) .filter((k) => !['default', 'bezier'].includes(k)) .reduce((res, key) => { - res[key] = wrapEdge((edgeTypes[key] || BezierEdge) as ComponentType); + res[key] = wrapEdge((edgeTypes[key] || BezierEdge) as ComponentType); return res; }, wrappedTypes); diff --git a/src/types/index.ts b/src/types/index.ts index 96730e61..04888665 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -89,12 +89,48 @@ export interface SelectionRect extends Rect { draw: boolean; } -export interface EdgeProps { +export interface WrapEdgeProps { id: ElementId; + className?: string; + type: string; + data?: any; + onClick?: (event: React.MouseEvent, edge: Edge) => void; + selected: boolean; + animated?: boolean; + label?: string; + labelStyle?: CSSProperties; + labelShowBg?: boolean; + labelBgStyle?: CSSProperties; + labelBgPadding?: [number, number]; + labelBgBorderRadius?: number; + style?: CSSProperties; + arrowHeadType?: ArrowHeadType; + source: ElementId; + target: ElementId; + sourceHandleId?: string; sourceX: number; sourceY: number; targetX: number; targetY: number; + sourcePosition: Position; + targetPosition: Position; + elementsSelectable?: boolean; + markerEndId?: string; + isHidden?: boolean; +} + +export interface EdgeProps { + id: ElementId; + source: ElementId; + target: ElementId; + sourceX: number; + sourceY: number; + targetX: number; + targetY: number; + selected?: boolean; + animated?: boolean; + sourcePosition: Position; + targetPosition: Position; label?: string; labelStyle?: CSSProperties; labelShowBg?: boolean; @@ -106,14 +142,19 @@ export interface EdgeProps { markerEndId?: string; data?: any; } - -export interface EdgeBezierProps extends EdgeProps { - sourcePosition: Position; - targetPosition: Position; +export interface EdgeSmoothStepProps extends EdgeProps { + borderRadius?: number; } -export interface EdgeSmoothStepProps extends EdgeBezierProps { - borderRadius?: number; +export interface EdgeTextProps { + x: number; + y: number; + label?: string; + labelStyle?: CSSProperties; + labelShowBg?: boolean; + labelBgStyle?: CSSProperties; + labelBgPadding?: [number, number]; + labelBgBorderRadius?: number; } export interface NodeProps { @@ -237,34 +278,6 @@ export interface HandleProps { className?: string; } -export interface EdgeCompProps { - id: ElementId; - source: ElementId; - target: ElementId; - type: any; - label?: string; - labelStyle?: CSSProperties; - labelShowBg?: boolean; - labelBgStyle?: CSSProperties; - labelBgPadding?: [number, number]; - labelBgBorderRadius?: number; - onClick?: (event: ReactMouseEvent, edge: Edge) => void; - animated?: boolean; - selected?: boolean; - data?: any; -} - -export interface EdgeTextProps { - x: number; - y: number; - label?: string; - labelStyle?: CSSProperties; - labelShowBg?: boolean; - labelBgStyle?: CSSProperties; - labelBgPadding?: [number, number]; - labelBgBorderRadius?: number; -} - export type NodePosUpdate = { id: ElementId; pos: XYPosition;