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

refactor(errors): put in constants

Browse Source
This commit is contained in:
moklick
2023-01-25 18:32:13 +01:00
parent 3b543cb015
commit 54010e7ee6
10 changed files with 43 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/components/Handle/index.tsx
+2 -3
View File
@@ -10,6 +10,7 @@ import { addEdge } from '../../utils/graph';
import { Position } from '../../types';
import type { HandleProps, Connection, ReactFlowState } from '../../types';
import { isValidHandle } from './utils';
import { errorMessages } from '../../contants';
const alwaysValid = () => true;
@@ -42,9 +43,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
const nodeId = useNodeId();
if (!nodeId) {
store
.getState()
.onError?.('010', 'Handle: No node id found. Make sure to only use a Handle inside a custom Node.');
store.getState().onError?.('010', errorMessages['010']());
return null;
}
packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx
+2 -1
View File
@@ -3,6 +3,7 @@ import { useMemo } from 'react';
import { MarkerType } from '../../types';
import type { EdgeMarker } from '../../types';
import { useStoreApi } from '../../hooks/useStore';
import { errorMessages } from '../../contants';
type SymbolProps = Omit<EdgeMarker, 'type'>;
@@ -43,7 +44,7 @@ export function useMarkerSymbol(type: MarkerType) {
const symbolExists = Object.prototype.hasOwnProperty.call(MarkerSymbols, type);
if (!symbolExists) {
store.getState().onError?.('009', `Marker type "${type}" doesn't exist.`);
store.getState().onError?.('009', errorMessages['009'](type));
return null;
}
packages/core/src/container/EdgeRenderer/index.tsx
+3 -7
View File
@@ -10,6 +10,7 @@ import { getEdgePositions, getHandle, getNodeData } from './utils';
import { GraphViewProps } from '../GraphView';
import { ConnectionMode, Position } from '../../types';
import type { Edge, ReactFlowState } from '../../types';
import { errorMessages } from '../../contants';
type EdgeRendererProps = Pick<
GraphViewProps,
@@ -98,7 +99,7 @@ const EdgeRenderer = ({
let edgeType = edge.type || 'default';
if (!edgeTypes[edgeType]) {
onError?.('003', `Edge type "${edgeType}" not found. Using fallback type "default".`);
onError?.('011', errorMessages['011'](edgeType));
edgeType = 'default';
}
@@ -115,12 +116,7 @@ const EdgeRenderer = ({
const isFocusable = !!(edge.focusable || (edgesFocusable && typeof edge.focusable === 'undefined'));
if (!sourceHandle || !targetHandle) {
onError?.(
'008',
`Couldn't create edge for ${!sourceHandle ? 'source' : 'target'} handle id: "${
!sourceHandle ? edge.sourceHandle : edge.targetHandle
}", edge id: ${edge.id}.`
);
onError?.('008', errorMessages['008'](sourceHandle, edge));
return null;
}
packages/core/src/container/NodeRenderer/index.tsx
+2 -1
View File
@@ -10,6 +10,7 @@ import { GraphViewProps } from '../GraphView';
import { getPositionWithOrigin } from './utils';
import { Position } from '../../types';
import type { ReactFlowState, WrapNodeProps } from '../../types';
import { errorMessages } from '../../contants';
type NodeRendererProps = Pick<
GraphViewProps,
@@ -77,7 +78,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
let nodeType = node.type || 'default';
if (!props.nodeTypes[nodeType]) {
onError?.('003', `Node type "${nodeType}" not found. Using fallback type "default".`);
onError?.('003', errorMessages['003'](nodeType));
nodeType = 'default';
}
packages/core/src/container/ReactFlow/utils.ts
+2 -4
View File
@@ -5,6 +5,7 @@ import { devWarn } from '../../utils';
import { CreateEdgeTypes } from '../EdgeRenderer/utils';
import { CreateNodeTypes } from '../NodeRenderer/utils';
import type { EdgeTypes, EdgeTypesWrapped, NodeTypes, NodeTypesWrapped } from '../../types';
import { errorMessages } from '../../contants';
export function useNodeOrEdgeTypes(nodeOrEdgeTypes: NodeTypes, createTypes: CreateNodeTypes): NodeTypesWrapped;
export function useNodeOrEdgeTypes(nodeOrEdgeTypes: EdgeTypes, createTypes: CreateEdgeTypes): EdgeTypesWrapped;
@@ -16,10 +17,7 @@ export function useNodeOrEdgeTypes(nodeOrEdgeTypes: any, createTypes: any): any
if (process.env.NODE_ENV === 'development') {
const typeKeys = Object.keys(nodeOrEdgeTypes);
if (shallow(typesKeysRef.current, typeKeys)) {
devWarn(
'002',
"It looks like you've created a new nodeTypes or edgeTypes object. If this wasn't on purpose please define the nodeTypes/edgeTypes outside of the component or memoize them."
);
devWarn('002', errorMessages['002']());
}
typesKeysRef.current = typeKeys;
packages/core/src/contants.ts
+20
View File
@@ -0,0 +1,20 @@
import { Edge, HandleElement } from './types';
export const errorMessages = {
'001': () =>
'[React Flow]: Seems like you have not used zustand provider as an ancestor. Help: https://reactflow.dev/error#001',
'002': () =>
"It looks like you've created a new nodeTypes or edgeTypes object. If this wasn't on purpose please define the nodeTypes/edgeTypes outside of the component or memoize them.",
'003': (nodeType: string) => `Node type "${nodeType}" not found. Using fallback type "default".`,
'004': () => 'The React Flow parent container needs a width and a height to render the graph.',
'005': () => 'Only child nodes can use a parent extent.',
'006': () => "Can't create edge. An edge needs a source and a target.",
'007': (id: string) => `The old edge with id=${id} does not exist.`,
'009': (type: string) => `Marker type "${type}" doesn't exist.`,
'008': (sourceHandle: HandleElement | null, edge: Edge) =>
`Couldn't create edge for ${!sourceHandle ? 'source' : 'target'} handle id: "${
!sourceHandle ? edge.sourceHandle : edge.targetHandle
}", edge id: ${edge.id}.`,
'010': () => 'Handle: No node id found. Make sure to only use a Handle inside a custom Node.',
'011': (edgeType: string) => `Edge type "${edgeType}" not found. Using fallback type "default".`,
};
packages/core/src/hooks/useDrag/utils.ts
+2 -1
View File
@@ -3,6 +3,7 @@ import type { RefObject } from 'react';
import { clampPosition, isNumeric } from '../../utils';
import type { CoordinateExtent, Node, NodeDragItem, NodeInternals, NodeOrigin, OnError, XYPosition } from '../../types';
import { getNodePositionWithOrigin } from '../../utils/graph';
import { errorMessages } from '../../contants';
export function isParentSelected(node: Node, nodeInternals: NodeInternals): boolean {
if (!node.parentNode) {
@@ -82,7 +83,7 @@ export function calcNextPosition(
]
: currentExtent;
} else {
onError?.('005', 'Only child nodes can use a parent extent.');
onError?.('005', errorMessages['005']());
currentExtent = nodeExtent;
}
packages/core/src/hooks/useResizeHandler.ts
+2 -3
View File
@@ -3,6 +3,7 @@ import type { MutableRefObject } from 'react';
import { useStoreApi } from '../hooks/useStore';
import { getDimensions } from '../utils';
import { errorMessages } from '../contants';
function useResizeHandler(rendererNode: MutableRefObject<HTMLDivElement | null>): void {
const store = useStoreApi();
@@ -18,9 +19,7 @@ function useResizeHandler(rendererNode: MutableRefObject<HTMLDivElement | null>)
const size = getDimensions(rendererNode.current);
if (size.height === 0 || size.width === 0) {
store
.getState()
.onError?.('004', 'The React Flow parent container needs a width and a height to render the graph.');
store.getState().onError?.('004', errorMessages['004']());
}
store.setState({ width: size.width || 500, height: size.height || 500 });
packages/core/src/hooks/useStore.ts
+4 -4
View File
@@ -3,10 +3,10 @@ import { useStore as useZustandStore } from 'zustand';
import type { StoreApi } from 'zustand';
import StoreContext from '../contexts/RFStoreContext';
import { errorMessages } from '../contants';
import type { ReactFlowState } from '../types';
const errorMessage =
'[React Flow]: Seems like you have not used zustand provider as an ancestor. Help: https://reactflow.dev/error#100';
const zustandErrorMessage = errorMessages['001']();
type ExtractState = StoreApi<ReactFlowState> extends { getState: () => infer T } ? T : never;
@@ -17,7 +17,7 @@ function useStore<StateSlice = ExtractState>(
const store = useContext(StoreContext);
if (store === null) {
throw new Error(errorMessage);
throw new Error(zustandErrorMessage);
}
return useZustandStore(store, selector, equalityFn);
@@ -27,7 +27,7 @@ const useStoreApi = () => {
const store = useContext(StoreContext);
if (store === null) {
throw new Error(errorMessage);
throw new Error(zustandErrorMessage);
}
return useMemo(
packages/core/src/utils/graph.ts
+4 -3
View File
@@ -13,6 +13,7 @@ import {
NodeInternals,
NodeOrigin,
} from '../types';
import { errorMessages } from '../contants';
export const isEdge = (element: Node | Connection | Edge): element is Edge =>
'id' in element && 'source' in element && 'target' in element;
@@ -70,7 +71,7 @@ const connectionExists = (edge: Edge, edges: Edge[]) => {
export const addEdge = (edgeParams: Edge | Connection, edges: Edge[]): Edge[] => {
if (!edgeParams.source || !edgeParams.target) {
devWarn('006', "Can't create edge. An edge needs a source and a target.");
devWarn('006', errorMessages['006']());
return edges;
}
@@ -94,7 +95,7 @@ export const addEdge = (edgeParams: Edge | Connection, edges: Edge[]): Edge[] =>
export const updateEdge = (oldEdge: Edge, newConnection: Connection, edges: Edge[]): Edge[] => {
if (!newConnection.source || !newConnection.target) {
devWarn('006', "Can't create a new edge. An edge needs a source and a target.");
devWarn('006', errorMessages['006']());
return edges;
}
@@ -102,7 +103,7 @@ export const updateEdge = (oldEdge: Edge, newConnection: Connection, edges: Edge
const foundEdge = edges.find((e) => e.id === oldEdge.id) as Edge;
if (!foundEdge) {
devWarn('007', `The old edge with id=${oldEdge.id} does not exist.`);
devWarn('007', errorMessages['007'](oldEdge.id));
return edges;
}