From 193f49cf878fe8ed73c35ffe8fc1b6a1934635b1 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 14 Aug 2023 16:31:37 +0200 Subject: [PATCH] refactor(on-error): use onError for node and edge type creation --- .../react/src/container/EdgeRenderer/index.tsx | 4 ++-- .../react/src/container/GraphView/index.tsx | 16 +++++++++++----- .../{ReactFlow => GraphView}/utils.ts | 6 ++++-- .../react/src/container/NodeRenderer/index.tsx | 7 ++++--- .../react/src/container/ReactFlow/index.tsx | 18 +++--------------- 5 files changed, 24 insertions(+), 27 deletions(-) rename packages/react/src/container/{ReactFlow => GraphView}/utils.ts (83%) diff --git a/packages/react/src/container/EdgeRenderer/index.tsx b/packages/react/src/container/EdgeRenderer/index.tsx index f23a1b67..858d7a5c 100644 --- a/packages/react/src/container/EdgeRenderer/index.tsx +++ b/packages/react/src/container/EdgeRenderer/index.tsx @@ -7,11 +7,10 @@ import { useStore } from '../../hooks/useStore'; import useVisibleEdges from '../../hooks/useVisibleEdges'; import MarkerDefinitions from './MarkerDefinitions'; import { GraphViewProps } from '../GraphView'; -import type { ReactFlowState } from '../../types'; +import type { EdgeTypesWrapped, ReactFlowState } from '../../types'; type EdgeRendererProps = Pick< GraphViewProps, - | 'edgeTypes' | 'onEdgeClick' | 'onEdgeDoubleClick' | 'defaultMarkerColor' @@ -29,6 +28,7 @@ type EdgeRendererProps = Pick< | 'rfId' | 'disableKeyboardA11y' > & { + edgeTypes: EdgeTypesWrapped; elevateEdgesOnSelect: boolean; children: ReactNode; }; diff --git a/packages/react/src/container/GraphView/index.tsx b/packages/react/src/container/GraphView/index.tsx index 47e94b3b..21460275 100644 --- a/packages/react/src/container/GraphView/index.tsx +++ b/packages/react/src/container/GraphView/index.tsx @@ -6,7 +6,10 @@ import EdgeRenderer from '../EdgeRenderer'; import ViewportWrapper from '../Viewport'; import useOnInitHandler from '../../hooks/useOnInitHandler'; import ConnectionLine from '../../components/ConnectionLine'; -import type { EdgeTypesWrapped, NodeTypesWrapped, ReactFlowProps } from '../../types'; +import type { NodeTypesWrapped, ReactFlowProps } from '../../types'; +import { createNodeTypes } from '../NodeRenderer/utils'; +import { createEdgeTypes } from '../EdgeRenderer/utils'; +import { useNodeOrEdgeTypes } from './utils'; export type GraphViewProps = Omit< ReactFlowProps, @@ -15,6 +18,8 @@ export type GraphViewProps = Omit< Required< Pick< ReactFlowProps, + | 'nodeTypes' + | 'edgeTypes' | 'selectionKeyCode' | 'deleteKeyCode' | 'multiSelectionKeyCode' @@ -33,8 +38,6 @@ export type GraphViewProps = Omit< | 'nodeOrigin' > > & { - nodeTypes: NodeTypesWrapped; - edgeTypes: EdgeTypesWrapped; rfId: string; }; @@ -102,6 +105,9 @@ const GraphView = ({ nodeExtent, rfId, }: GraphViewProps) => { + const nodeTypesWrapped = useNodeOrEdgeTypes(nodeTypes, createNodeTypes); + const edgeTypesWrapped = useNodeOrEdgeTypes(edgeTypes, createEdgeTypes); + useOnInitHandler(onInit); return ( @@ -142,7 +148,7 @@ const GraphView = ({ > (null); + const store = useStoreApi(); const typesParsed = useMemo(() => { if (process.env.NODE_ENV === 'development') { const typeKeys = Object.keys(nodeOrEdgeTypes); if (shallow(typesKeysRef.current, typeKeys)) { - devWarn('002', errorMessages['error002']()); + store.getState().onError?.('002', errorMessages['error002']()); } typesKeysRef.current = typeKeys; diff --git a/packages/react/src/container/NodeRenderer/index.tsx b/packages/react/src/container/NodeRenderer/index.tsx index 66b9de29..f09f6563 100644 --- a/packages/react/src/container/NodeRenderer/index.tsx +++ b/packages/react/src/container/NodeRenderer/index.tsx @@ -6,11 +6,10 @@ import useVisibleNodes from '../../hooks/useVisibleNodes'; import { useStore } from '../../hooks/useStore'; import { containerStyle } from '../../styles'; import { GraphViewProps } from '../GraphView'; -import type { ReactFlowState, WrapNodeProps } from '../../types'; +import type { NodeTypesWrapped, ReactFlowState, WrapNodeProps } from '../../types'; type NodeRendererProps = Pick< GraphViewProps, - | 'nodeTypes' | 'onNodeClick' | 'onNodeDoubleClick' | 'onNodeMouseEnter' @@ -24,7 +23,9 @@ type NodeRendererProps = Pick< | 'disableKeyboardA11y' | 'nodeOrigin' | 'nodeExtent' ->; +> & { + nodeTypes: NodeTypesWrapped; +}; const selector = (s: ReactFlowState) => ({ nodesDraggable: s.nodesDraggable, diff --git a/packages/react/src/container/ReactFlow/index.tsx b/packages/react/src/container/ReactFlow/index.tsx index 4eb910a1..5bc47f04 100644 --- a/packages/react/src/container/ReactFlow/index.tsx +++ b/packages/react/src/container/ReactFlow/index.tsx @@ -20,19 +20,9 @@ import GroupNode from '../../components/Nodes/GroupNode'; import SelectionListener from '../../components/SelectionListener'; import StoreUpdater from '../../components/StoreUpdater'; import A11yDescriptions from '../../components/A11yDescriptions'; -import { createEdgeTypes } from '../EdgeRenderer/utils'; -import { createNodeTypes } from '../NodeRenderer/utils'; import GraphView from '../GraphView'; import Wrapper from './Wrapper'; -import { useNodeOrEdgeTypes } from './utils'; -import type { - EdgeTypes, - EdgeTypesWrapped, - NodeTypes, - NodeTypesWrapped, - ReactFlowProps, - ReactFlowRefType, -} from '../../types'; +import type { EdgeTypes, NodeTypes, ReactFlowProps, ReactFlowRefType } from '../../types'; const defaultNodeTypes: NodeTypes = { input: InputNode, @@ -177,8 +167,6 @@ const ReactFlow = forwardRef( }, ref ) => { - const nodeTypesWrapped = useNodeOrEdgeTypes(nodeTypes, createNodeTypes) as NodeTypesWrapped; - const edgeTypesWrapped = useNodeOrEdgeTypes(edgeTypes, createEdgeTypes) as EdgeTypesWrapped; const rfId = id || '1'; return ( @@ -200,8 +188,8 @@ const ReactFlow = forwardRef( onNodeMouseLeave={onNodeMouseLeave} onNodeContextMenu={onNodeContextMenu} onNodeDoubleClick={onNodeDoubleClick} - nodeTypes={nodeTypesWrapped} - edgeTypes={edgeTypesWrapped} + nodeTypes={nodeTypes} + edgeTypes={edgeTypes} connectionLineType={connectionLineType} connectionLineStyle={connectionLineStyle} connectionLineComponent={connectionLineComponent}