From 3c96b07c9c27d328ea070b5571690d2d77ffe108 Mon Sep 17 00:00:00 2001 From: Joey Ballentine Date: Mon, 14 Mar 2022 00:56:23 -0400 Subject: [PATCH] Rename to "unreal" edge, fix for both horizontal and vertical handles --- example/src/EdgeTypes/utils.ts | 8 ++++---- example/src/Edges/index.tsx | 19 +++++------------- ...ticBezierEdge.tsx => UnrealBezierEdge.tsx} | 20 ++++++++++++------- src/components/Edges/index.ts | 2 +- src/container/EdgeRenderer/utils.ts | 4 ++-- src/container/ReactFlow/index.tsx | 4 ++-- 6 files changed, 27 insertions(+), 30 deletions(-) rename src/components/Edges/{QuarticBezierEdge.tsx => UnrealBezierEdge.tsx} (71%) diff --git a/example/src/EdgeTypes/utils.ts b/example/src/EdgeTypes/utils.ts index 22896aa0..3c679060 100644 --- a/example/src/EdgeTypes/utils.ts +++ b/example/src/EdgeTypes/utils.ts @@ -1,4 +1,4 @@ -import { Node, Edge, Position } from 'react-flow-renderer'; +import { Edge, Node, Position } from 'react-flow-renderer'; const nodeWidth = 80; const nodeGapWidth = nodeWidth * 2; @@ -9,10 +9,10 @@ const sourceTargetPositions = [ { source: Position.Right, target: Position.Left }, ]; const nodeColors = [ - ['#1e9e99', '#4cb3ac', '#6ec9c0', '#8ddfd4'], - ['#0f4c75', '#1b5d8b', '#276fa1', '#3282b8'], + ['#1e9e99', '#4cb3ac', '#6ec9c0', '#8ddfd4', '#c4fff7'], + ['#0f4c75', '#1b5d8b', '#276fa1', '#3282b8', '#4fa6e0'], ]; -const edgeTypes = ['default', 'step', 'smoothstep', 'straight']; +const edgeTypes = ['default', 'step', 'smoothstep', 'straight', 'unreal']; const offsets = [ { x: 0, diff --git a/example/src/Edges/index.tsx b/example/src/Edges/index.tsx index d6e0a83d..6d7b9b08 100644 --- a/example/src/Edges/index.tsx +++ b/example/src/Edges/index.tsx @@ -1,23 +1,12 @@ import { MouseEvent } from 'react'; - import ReactFlow, { - addEdge, - MiniMap, - Controls, - Background, - ReactFlowInstance, - EdgeTypes, - Connection, - Edge, - MarkerType, - Node, - useNodesState, - useEdgesState, + addEdge, Background, Connection, Controls, Edge, EdgeTypes, MarkerType, MiniMap, Node, ReactFlowInstance, useEdgesState, useNodesState } from 'react-flow-renderer'; - import CustomEdge from './CustomEdge'; import CustomEdge2 from './CustomEdge2'; + + const onInit = (reactFlowInstance: ReactFlowInstance) => reactFlowInstance.fitView(); const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node); const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node); @@ -26,6 +15,7 @@ const initialNodes: Node[] = [ { id: '1', type: 'input', data: { label: 'Input 1' }, position: { x: 250, y: 0 } }, { id: '2', data: { label: 'Node 2' }, position: { x: 150, y: 100 } }, { id: '2a', data: { label: 'Node 2a' }, position: { x: 0, y: 180 } }, + { id: '2b', data: { label: 'Node 2b' }, position: { x: -80, y: 100 } }, { id: '3', data: { label: 'Node 3' }, position: { x: 250, y: 200 } }, { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 300 } }, { id: '3a', data: { label: 'Node 3a' }, position: { x: 150, y: 300 } }, @@ -39,6 +29,7 @@ const initialNodes: Node[] = [ const initialEdges: Edge[] = [ { id: 'e1-2', source: '1', target: '2', label: 'bezier edge (default)', className: 'normal-edge' }, { id: 'e2-2a', source: '2', target: '2a', type: 'smoothstep', label: 'smoothstep edge' }, + { id: 'e2a-2b', source: '2a', target: '2b', type: 'unreal', label: 'unreal bezier edge', className: 'unreal-edge' }, { id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' }, { id: 'e3-4', source: '3', target: '4', type: 'straight', label: 'straight edge' }, { id: 'e3-3a', source: '3', target: '3a', type: 'straight', label: 'label only edge', style: { stroke: 'none' } }, diff --git a/src/components/Edges/QuarticBezierEdge.tsx b/src/components/Edges/UnrealBezierEdge.tsx similarity index 71% rename from src/components/Edges/QuarticBezierEdge.tsx rename to src/components/Edges/UnrealBezierEdge.tsx index 1d0a4492..c4bc04fc 100644 --- a/src/components/Edges/QuarticBezierEdge.tsx +++ b/src/components/Edges/UnrealBezierEdge.tsx @@ -14,7 +14,7 @@ interface GetBezierPathParams { curvature?: number; } -export function getQuarticBezierPath({ +export function getUnrealBezierPath({ sourceX, sourceY, sourcePosition = Position.Bottom, @@ -27,16 +27,22 @@ export function getQuarticBezierPath({ // Distance between the source and target const distanceX = sourceX - targetX; + const distanceY = sourceY - targetY; + // A scalar value to fix the curve size getting larger - const scalar = Math.min(curvature, Math.max(0, distanceX / 10000)); + const scalarX = Math.min(curvature, Math.max(0, distanceX / 10000)); + const scalarY = Math.min(curvature, Math.max(0, distanceY / 10000)); - const cX = sourceX + Math.abs(targetX - sourceX) * (curvature - scalar); - const cY = targetX - Math.abs(targetX - sourceX) * (curvature - scalar); + const hx1 = sourceX + Math.abs(targetX - sourceX) * (curvature - scalarX); + const hx2 = targetX - Math.abs(targetX - sourceX) * (curvature - scalarX); - let path = `M${sourceX},${sourceY} C${sourceX},${cY} ${targetX},${cY} ${targetX},${targetY}`; + const hy1 = sourceY + Math.abs(targetY - sourceY) * (curvature - scalarY); + const hy2 = targetY - Math.abs(targetY - sourceY) * (curvature - scalarY); + + let path = `M${sourceX},${sourceY} C${sourceX},${hy1} ${targetX},${hy2} ${targetX},${targetY}`; if (leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) { - path = `M${sourceX},${sourceY} C${cX},${sourceY} ${cX},${targetY} ${targetX},${targetY}`; + path = `M${sourceX},${sourceY} C${hx1},${sourceY} ${hx2},${targetY}, ${targetX},${targetY}`; } else if (leftAndRight.includes(targetPosition)) { path = `M${sourceX},${sourceY} Q${sourceX},${targetY} ${targetX},${targetY}`; } else if (leftAndRight.includes(sourcePosition)) { @@ -66,7 +72,7 @@ export default memo( curvature, }: EdgeProps) => { const [centerX, centerY] = getCenter({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition }); - const path = getQuarticBezierPath({ + const path = getUnrealBezierPath({ sourceX, sourceY, sourcePosition, diff --git a/src/components/Edges/index.ts b/src/components/Edges/index.ts index 508fe21e..727f889b 100644 --- a/src/components/Edges/index.ts +++ b/src/components/Edges/index.ts @@ -1,5 +1,5 @@ export { default as BezierEdge } from './BezierEdge'; -export { default as QuarticBezierEdge } from './QuarticBezierEdge'; export { default as SmoothStepEdge } from './SmoothStepEdge'; export { default as StepEdge } from './StepEdge'; export { default as StraightEdge } from './StraightEdge'; +export { default as UnrealBezierEdge } from './UnrealBezierEdge'; diff --git a/src/container/EdgeRenderer/utils.ts b/src/container/EdgeRenderer/utils.ts index 3f2e22be..c00dd6aa 100644 --- a/src/container/EdgeRenderer/utils.ts +++ b/src/container/EdgeRenderer/utils.ts @@ -1,5 +1,5 @@ import { ComponentType } from 'react'; -import { BezierEdge, QuarticBezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '../../components/Edges'; +import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, UnrealBezierEdge } from '../../components/Edges'; import wrapEdge from '../../components/Edges/wrapEdge'; import { EdgeProps, @@ -22,7 +22,7 @@ export function createEdgeTypes(edgeTypes: EdgeTypes): EdgeTypes { straight: wrapEdge((edgeTypes.bezier || StraightEdge) as ComponentType), step: wrapEdge((edgeTypes.step || StepEdge) as ComponentType), smoothstep: wrapEdge((edgeTypes.step || SmoothStepEdge) as ComponentType), - quartic: wrapEdge((edgeTypes.quartic || QuarticBezierEdge) as ComponentType), + unreal: wrapEdge((edgeTypes.unreal || UnrealBezierEdge) as ComponentType), }; const wrappedTypes = {} as EdgeTypes; diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx index 43a8734b..d5a6ea38 100644 --- a/src/container/ReactFlow/index.tsx +++ b/src/container/ReactFlow/index.tsx @@ -1,7 +1,7 @@ import cc from 'classcat'; import React, { forwardRef } from 'react'; import Attribution from '../../components/Attribution'; -import { BezierEdge, QuarticBezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '../../components/Edges'; +import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, UnrealBezierEdge } from '../../components/Edges'; import DefaultNode from '../../components/Nodes/DefaultNode'; import InputNode from '../../components/Nodes/InputNode'; import OutputNode from '../../components/Nodes/OutputNode'; @@ -40,7 +40,7 @@ const defaultEdgeTypes = { straight: StraightEdge, step: StepEdge, smoothstep: SmoothStepEdge, - quartic: QuarticBezierEdge, + unreal: UnrealBezierEdge, }; const initSnapGrid: [number, number] = [15, 15];