refactor(edges): use new edge as default, add simplebezier

2022-03-14 16:01:00 +01:00
parent 3c96b07c9c
commit b362c11851
9 changed files with 248 additions and 233 deletions
@@ -12,7 +12,7 @@ const nodeColors = [
  ['#1e9e99', '#4cb3ac', '#6ec9c0', '#8ddfd4', '#c4fff7'],
  ['#0f4c75', '#1b5d8b', '#276fa1', '#3282b8', '#4fa6e0'],
 ];
-const edgeTypes = ['default', 'step', 'smoothstep', 'straight', 'unreal'];
+const edgeTypes = ['default', 'step', 'smoothstep', 'straight', 'simplebezier'];
 const offsets = [
  {
    x: 0,
@@ -1,12 +1,22 @@
 import { MouseEvent } from 'react';
 import ReactFlow, {
-  addEdge, Background, Connection, Controls, Edge, EdgeTypes, MarkerType, MiniMap, Node, ReactFlowInstance, useEdgesState, useNodesState
+  addEdge,
+  Background,
+  Connection,
+  Controls,
+  Edge,
+  EdgeTypes,
+  MarkerType,
+  MiniMap,
+  Node,
+  Position,
+  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);
@@ -15,7 +25,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: '2b', data: { label: 'Node 2b' }, position: { x: -80, y: 100 }, targetPosition: Position.Left },
  { 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 } },
@@ -29,7 +39,13 @@ 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: 'e2a-2b',
+    source: '2a',
+    target: '2b',
+    type: 'simplebezier',
+    label: 'simple bezier 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' } },
@@ -99,7 +115,7 @@ const edgeTypes: EdgeTypes = {
 };

 const EdgesFlow = () => {
-  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [nodes, , onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
  const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));

@@ -2,7 +2,7 @@ import React, { useRef, CSSProperties } from 'react';
 import shallow from 'zustand/shallow';

 import { useStore } from '../../store';
-import { getBezierPath } from '../Edges/BezierEdge';
+import { getBezierPath } from '../Edges/SimpleBezierEdge';
 import { getSmoothStepPath } from '../Edges/SmoothStepEdge';
 import {
  HandleElement,
@@ -1,101 +1,110 @@
-import React, { memo } from 'react';
-
-import EdgeText from './EdgeText';
-import { getCenter } from './utils';
-import { EdgeProps, Position } from '../../types';
-
-interface GetBezierPathParams {
-  sourceX: number;
-  sourceY: number;
-  sourcePosition?: Position;
-  targetX: number;
-  targetY: number;
-  targetPosition?: Position;
-  centerX?: number;
-  centerY?: number;
-}
-
-export function getBezierPath({
-  sourceX,
-  sourceY,
-  sourcePosition = Position.Bottom,
-  targetX,
-  targetY,
-  targetPosition = Position.Top,
-  centerX,
-  centerY,
-}: GetBezierPathParams): string {
-  const [_centerX, _centerY] = getCenter({ sourceX, sourceY, targetX, targetY });
-  const leftAndRight = [Position.Left, Position.Right];
-
-  const cX = typeof centerX !== 'undefined' ? centerX : _centerX;
-  const cY = typeof centerY !== 'undefined' ? centerY : _centerY;
-
-  let path = `M${sourceX},${sourceY} C${sourceX},${cY} ${targetX},${cY} ${targetX},${targetY}`;
-
-  if (leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
-    path = `M${sourceX},${sourceY} C${cX},${sourceY} ${cX},${targetY} ${targetX},${targetY}`;
-  } else if (leftAndRight.includes(targetPosition)) {
-    path = `M${sourceX},${sourceY} Q${sourceX},${targetY} ${targetX},${targetY}`;
-  } else if (leftAndRight.includes(sourcePosition)) {
-    path = `M${sourceX},${sourceY} Q${targetX},${sourceY} ${targetX},${targetY}`;
-  }
-
-  return path;
-}
-
-export default memo(
-  ({
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-    sourcePosition = Position.Bottom,
-    targetPosition = Position.Top,
-    label,
-    labelStyle,
-    labelShowBg,
-    labelBgStyle,
-    labelBgPadding,
-    labelBgBorderRadius,
-    style,
-    markerEnd,
-    markerStart,
-  }: EdgeProps) => {
-    const [centerX, centerY] = getCenter({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition });
-    const path = getBezierPath({
-      sourceX,
-      sourceY,
-      sourcePosition,
-      targetX,
-      targetY,
-      targetPosition,
-    });
-
-    const text = label ? (
-      <EdgeText
-        x={centerX}
-        y={centerY}
-        label={label}
-        labelStyle={labelStyle}
-        labelShowBg={labelShowBg}
-        labelBgStyle={labelBgStyle}
-        labelBgPadding={labelBgPadding}
-        labelBgBorderRadius={labelBgBorderRadius}
-      />
-    ) : null;
-
-    return (
-      <>
-        <path
-          style={style}
-          d={path}
-          className="react-flow__edge-path"
-          markerEnd={markerEnd}
-          markerStart={markerStart}
-        />
-        {text}
-      </>
-    );
-  }
-);
+import React, { memo } from 'react';
+import { EdgeProps, Position } from '../../types';
+import EdgeText from './EdgeText';
+import { getCenter } from './utils';
+
+interface GetBezierPathParams {
+  sourceX: number;
+  sourceY: number;
+  sourcePosition?: Position;
+  targetX: number;
+  targetY: number;
+  targetPosition?: Position;
+  curvature?: number;
+}
+
+export function getBezierPath({
+  sourceX,
+  sourceY,
+  sourcePosition = Position.Bottom,
+  targetX,
+  targetY,
+  targetPosition = Position.Top,
+  curvature = 0.5,
+}: GetBezierPathParams): string {
+  const leftAndRight = [Position.Left, Position.Right];
+
+  // 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 scalarX = Math.min(curvature, Math.max(0, distanceX / 10000));
+  const scalarY = Math.min(curvature, Math.max(0, distanceY / 10000));
+
+  const hx1 = sourceX + Math.abs(targetX - sourceX) * (curvature - scalarX);
+  const hx2 = targetX - Math.abs(targetX - sourceX) * (curvature - scalarX);
+
+  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${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)) {
+    path = `M${sourceX},${sourceY} Q${targetX},${sourceY} ${targetX},${targetY}`;
+  }
+
+  return path;
+}
+
+export default memo(
+  ({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition = Position.Bottom,
+    targetPosition = Position.Top,
+    label,
+    labelStyle,
+    labelShowBg,
+    labelBgStyle,
+    labelBgPadding,
+    labelBgBorderRadius,
+    style,
+    markerEnd,
+    markerStart,
+    curvature,
+  }: EdgeProps) => {
+    const [centerX, centerY] = getCenter({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition });
+    const path = getBezierPath({
+      sourceX,
+      sourceY,
+      sourcePosition,
+      targetX,
+      targetY,
+      targetPosition,
+      curvature,
+    });
+
+    const text = label ? (
+      <EdgeText
+        x={centerX}
+        y={centerY}
+        label={label}
+        labelStyle={labelStyle}
+        labelShowBg={labelShowBg}
+        labelBgStyle={labelBgStyle}
+        labelBgPadding={labelBgPadding}
+        labelBgBorderRadius={labelBgBorderRadius}
+      />
+    ) : null;
+
+    return (
+      <>
+        <path
+          style={style}
+          d={path}
+          className="react-flow__edge-path"
+          markerEnd={markerEnd}
+          markerStart={markerStart}
+        />
+        {text}
+      </>
+    );
+  }
+);
@@ -1,111 +1,101 @@
-import React, { memo } from 'react';
-import { EdgeProps, Position } from '../../types';
-import EdgeText from './EdgeText';
-import { getCenter } from './utils';
-
-
-interface GetBezierPathParams {
-  sourceX: number;
-  sourceY: number;
-  sourcePosition?: Position;
-  targetX: number;
-  targetY: number;
-  targetPosition?: Position;
-  curvature?: number;
-}
-
-export function getUnrealBezierPath({
-  sourceX,
-  sourceY,
-  sourcePosition = Position.Bottom,
-  targetX,
-  targetY,
-  targetPosition = Position.Top,
-  curvature = 0.5
-}: GetBezierPathParams): string {
-  const leftAndRight = [Position.Left, Position.Right];
-
-  // 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 scalarX = Math.min(curvature, Math.max(0, distanceX / 10000));
-  const scalarY = Math.min(curvature, Math.max(0, distanceY / 10000));
-
-  const hx1 = sourceX + Math.abs(targetX - sourceX) * (curvature - scalarX);
-  const hx2 = targetX - Math.abs(targetX - sourceX) * (curvature - scalarX);
-
-  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${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)) {
-    path = `M${sourceX},${sourceY} Q${targetX},${sourceY} ${targetX},${targetY}`;
-  }
-
-  return path;
-}
-
-export default memo(
-  ({
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-    sourcePosition = Position.Bottom,
-    targetPosition = Position.Top,
-    label,
-    labelStyle,
-    labelShowBg,
-    labelBgStyle,
-    labelBgPadding,
-    labelBgBorderRadius,
-    style,
-    markerEnd,
-    markerStart,
-    curvature,
-  }: EdgeProps) => {
-    const [centerX, centerY] = getCenter({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition });
-    const path = getUnrealBezierPath({
-      sourceX,
-      sourceY,
-      sourcePosition,
-      targetX,
-      targetY,
-      targetPosition,
-      curvature,
-    });
-
-    const text = label ? (
-      <EdgeText
-        x={centerX}
-        y={centerY}
-        label={label}
-        labelStyle={labelStyle}
-        labelShowBg={labelShowBg}
-        labelBgStyle={labelBgStyle}
-        labelBgPadding={labelBgPadding}
-        labelBgBorderRadius={labelBgBorderRadius}
-      />
-    ) : null;
-
-    return (
-      <>
-        <path
-          style={style}
-          d={path}
-          className="react-flow__edge-path"
-          markerEnd={markerEnd}
-          markerStart={markerStart}
-        />
-        {text}
-      </>
-    );
-  }
-);
+import React, { memo } from 'react';
+
+import EdgeText from './EdgeText';
+import { getCenter } from './utils';
+import { EdgeProps, Position } from '../../types';
+
+interface GetBezierPathParams {
+  sourceX: number;
+  sourceY: number;
+  sourcePosition?: Position;
+  targetX: number;
+  targetY: number;
+  targetPosition?: Position;
+  centerX?: number;
+  centerY?: number;
+}
+
+export function getBezierPath({
+  sourceX,
+  sourceY,
+  sourcePosition = Position.Bottom,
+  targetX,
+  targetY,
+  targetPosition = Position.Top,
+  centerX,
+  centerY,
+}: GetBezierPathParams): string {
+  const [_centerX, _centerY] = getCenter({ sourceX, sourceY, targetX, targetY });
+  const leftAndRight = [Position.Left, Position.Right];
+
+  const cX = typeof centerX !== 'undefined' ? centerX : _centerX;
+  const cY = typeof centerY !== 'undefined' ? centerY : _centerY;
+
+  let path = `M${sourceX},${sourceY} C${sourceX},${cY} ${targetX},${cY} ${targetX},${targetY}`;
+
+  if (leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
+    path = `M${sourceX},${sourceY} C${cX},${sourceY} ${cX},${targetY} ${targetX},${targetY}`;
+  } else if (leftAndRight.includes(targetPosition)) {
+    path = `M${sourceX},${sourceY} Q${sourceX},${targetY} ${targetX},${targetY}`;
+  } else if (leftAndRight.includes(sourcePosition)) {
+    path = `M${sourceX},${sourceY} Q${targetX},${sourceY} ${targetX},${targetY}`;
+  }
+
+  return path;
+}
+
+export default memo(
+  ({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition = Position.Bottom,
+    targetPosition = Position.Top,
+    label,
+    labelStyle,
+    labelShowBg,
+    labelBgStyle,
+    labelBgPadding,
+    labelBgBorderRadius,
+    style,
+    markerEnd,
+    markerStart,
+  }: EdgeProps) => {
+    const [centerX, centerY] = getCenter({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition });
+    const path = getBezierPath({
+      sourceX,
+      sourceY,
+      sourcePosition,
+      targetX,
+      targetY,
+      targetPosition,
+    });
+
+    const text = label ? (
+      <EdgeText
+        x={centerX}
+        y={centerY}
+        label={label}
+        labelStyle={labelStyle}
+        labelShowBg={labelShowBg}
+        labelBgStyle={labelBgStyle}
+        labelBgPadding={labelBgPadding}
+        labelBgBorderRadius={labelBgBorderRadius}
+      />
+    ) : null;
+
+    return (
+      <>
+        <path
+          style={style}
+          d={path}
+          className="react-flow__edge-path"
+          markerEnd={markerEnd}
+          markerStart={markerStart}
+        />
+        {text}
+      </>
+    );
+  }
+);
@@ -1,5 +1,5 @@
-export { default as BezierEdge } from './BezierEdge';
+export { default as SimpleBezierEdge } from './SimpleBezierEdge';
 export { default as SmoothStepEdge } from './SmoothStepEdge';
 export { default as StepEdge } from './StepEdge';
 export { default as StraightEdge } from './StraightEdge';
-export { default as UnrealBezierEdge } from './UnrealBezierEdge';
+export { default as BezierEdge } from './BezierEdge';
@@ -1,5 +1,5 @@
 import { ComponentType } from 'react';
-import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, UnrealBezierEdge } from '../../components/Edges';
+import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } 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<EdgeProps>),
    step: wrapEdge((edgeTypes.step || StepEdge) as ComponentType<EdgeProps>),
    smoothstep: wrapEdge((edgeTypes.step || SmoothStepEdge) as ComponentType<EdgeProps>),
-    unreal: wrapEdge((edgeTypes.unreal || UnrealBezierEdge) as ComponentType<EdgeProps>),
+    simplebezier: wrapEdge((edgeTypes.simplebezier || SimpleBezierEdge) as ComponentType<EdgeProps>),
  };

  const wrappedTypes = {} as EdgeTypes;
@@ -1,7 +1,7 @@
 import cc from 'classcat';
 import React, { forwardRef } from 'react';
 import Attribution from '../../components/Attribution';
-import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, UnrealBezierEdge } from '../../components/Edges';
+import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges';
 import DefaultNode from '../../components/Nodes/DefaultNode';
 import InputNode from '../../components/Nodes/InputNode';
 import OutputNode from '../../components/Nodes/OutputNode';
@@ -10,9 +10,13 @@ import StoreUpdater from '../../components/StoreUpdater';
 import css from '../../style.css';
 import theme from '../../theme-default.css';
 import {
-  ConnectionLineType, ConnectionMode, EdgeTypes, NodeTypes, PanOnScrollMode,
+  ConnectionLineType,
+  ConnectionMode,
+  EdgeTypes,
+  NodeTypes,
+  PanOnScrollMode,
  ReactFlowProps,
-  ReactFlowRefType
+  ReactFlowRefType,
 } from '../../types';
 import { createEdgeTypes } from '../EdgeRenderer/utils';
 import GraphView from '../GraphView';
@@ -20,10 +24,6 @@ import { createNodeTypes } from '../NodeRenderer/utils';
 import injectStyle, { useNodeOrEdgeTypes } from './utils';
 import Wrapper from './Wrapper';

-
-
-
-
 if (__INJECT_STYLES__) {
  injectStyle(css as unknown as string);
  injectStyle(theme as unknown as string);
@@ -40,7 +40,7 @@ const defaultEdgeTypes = {
  straight: StraightEdge,
  step: StepEdge,
  smoothstep: SmoothStepEdge,
-  unreal: UnrealBezierEdge,
+  simplebezier: SimpleBezierEdge,
 };

 const initSnapGrid: [number, number] = [15, 15];
@@ -6,7 +6,7 @@ export { default as Handle } from './components/Handle';
 export { default as EdgeText } from './components/Edges/EdgeText';
 export { default as StraightEdge } from './components/Edges/StraightEdge';
 export { default as StepEdge } from './components/Edges/StepEdge';
-export { default as BezierEdge, getBezierPath } from './components/Edges/BezierEdge';
+export { default as BezierEdge, getBezierPath } from './components/Edges/SimpleBezierEdge';
 export { default as SmoothStepEdge, getSmoothStepPath } from './components/Edges/SmoothStepEdge';
 export * from './additional-components';