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

refactor(dev-warnings): cleanup

Browse Source
This commit is contained in:
moklick
2022-08-17 11:55:37 +02:00
parent ab14be02f4
commit 86ea34b470
9 changed files with 39 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx
View File

@@ -1,5 +1,6 @@
import { useMemo } from 'react';
import { MarkerType, EdgeMarker } from '../../types';
import { devWarn } from '../../utils';
type SymbolProps = Omit<EdgeMarker, 'type'>;
@@ -39,9 +40,7 @@ export function useMarkerSymbol(type: MarkerType) {
const symbolExists = Object.prototype.hasOwnProperty.call(MarkerSymbols, type);
if (!symbolExists) {
if (process.env.NODE_ENV === 'development') {
console.warn(`[React Flow]: Marker type "${type}" doesn't exist. Help: https://reactflow.dev/error#900`);
}
devWarn(`Marker type "${type}" doesn't exist. Help: https://reactflow.dev/error#900`);
return null;
}

14
packages/core/src/container/EdgeRenderer/index.tsx
View File

@@ -10,6 +10,7 @@ import { getEdgePositions, getHandle, getNodeData } from './utils';
import { Position, Edge, ConnectionMode, ReactFlowState } from '../../types';
import { GraphViewProps } from '../GraphView';
import { devWarn } from '../../utils';
interface EdgeRendererProps
extends Pick<
@@ -111,13 +112,12 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
const targetPosition = targetHandle?.position || Position.Top;
if (!sourceHandle || !targetHandle) {
if (process.env.NODE_ENV === 'development') {
const handleType = !sourceHandle ? 'source' : 'target';
const handleId = !sourceHandle ? edge.sourceHandle : edge.targetHandle;
console.warn(
`[React Flow]: Couldn't create edge for ${handleType} handle id: ${handleId}; edge id: ${edge.id}. Help: https://reactflow.dev/error#800`
);
}
devWarn(
`Couldn't create edge for ${!sourceHandle ? 'source' : 'target'} handle id: ${
!sourceHandle ? edge.sourceHandle : edge.targetHandle
}; edge id: ${edge.id}. Help: https://reactflow.dev/error#800`
);
return null;
}

10
packages/core/src/container/NodeRenderer/index.tsx
View File

@@ -3,7 +3,7 @@ import shallow from 'zustand/shallow';
import useVisibleNodes from '../../hooks/useVisibleNodes';
import { useStore } from '../../hooks/useStore';
import { internalsSymbol } from '../../utils';
import { devWarn, internalsSymbol } from '../../utils';
import { containerStyle } from '../../styles';
import { GraphViewProps } from '../GraphView';
import { Position, ReactFlowState, WrapNodeProps } from '../../types';
@@ -70,11 +70,9 @@ const NodeRenderer = (props: NodeRendererProps) => {
let nodeType = node.type || 'default';
if (!props.nodeTypes[nodeType]) {
if (process.env.NODE_ENV === 'development') {
console.warn(
`[React Flow]: Node type "${nodeType}" not found. Using fallback type "default". Help: https://reactflow.dev/error#300`
);
}
devWarn(
`Node type "${nodeType}" not found. Using fallback type "default". Help: https://reactflow.dev/error#300`
);
nodeType = 'default';
}

3
packages/core/src/container/NodeRenderer/utils.ts
View File

@@ -6,6 +6,7 @@ import OutputNode from '../../components/Nodes/OutputNode';
import GroupNode from '../../components/Nodes/GroupNode';
import wrapNode from '../../components/Nodes/wrapNode';
import { NodeTypes, NodeProps, NodeTypesWrapped, NodeOrigin, XYPosition } from '../../types';
import { devWarn } from '../../utils';
export type CreateNodeTypes = (nodeTypes: NodeTypes) => NodeTypesWrapped;
@@ -50,7 +51,7 @@ export const getPositionWithOrigin = ({
}
if (origin[0] < 0 || origin[1] < 0 || origin[0] > 1 || origin[1] > 1) {
console.warn('[ReactFlow]: nodeOrigin must be between 0 and 1');
devWarn('nodeOrigin must be between 0 and 1');
return { x, y };
}

5
packages/core/src/container/ReactFlow/utils.ts
View File

@@ -2,6 +2,7 @@ import { useMemo, useRef } from 'react';
import shallow from 'zustand/shallow';
import { EdgeTypes, EdgeTypesWrapped, NodeTypes, NodeTypesWrapped } from '../../types';
import { devWarn } from '../../utils';
import { CreateEdgeTypes } from '../EdgeRenderer/utils';
import { CreateNodeTypes } from '../NodeRenderer/utils';
@@ -15,8 +16,8 @@ export function useNodeOrEdgeTypes(nodeOrEdgeTypes: any, createTypes: any): any
if (process.env.NODE_ENV === 'development') {
const typeKeys = Object.keys(nodeOrEdgeTypes);
if (shallow(typesKeysRef.current, typeKeys)) {
console.warn(
"[React Flow]: It looks like you have 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. Help: https://reactflow.dev/error#200"
devWarn(
"It looks like you have 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. Help: https://reactflow.dev/error#200"
);
}

7
packages/core/src/hooks/useDrag/utils.ts
View File

@@ -1,7 +1,7 @@
import { RefObject } from 'react';
import { CoordinateExtent, Node, NodeDragItem, NodeInternals, XYPosition } from '../../types';
import { clampPosition } from '../../utils';
import { clampPosition, devWarn } from '../../utils';
export function isParentSelected(node: Node, nodeInternals: NodeInternals): boolean {
if (!node.parentNode) {
@@ -78,9 +78,8 @@ export function calcNextPosition(
]
: currentExtent;
} else {
if (process.env.NODE_ENV === 'development') {
console.warn('[React Flow]: Only child nodes can use a parent extent. Help: https://reactflow.dev/error#500');
}
devWarn('Only child nodes can use a parent extent. Help: https://reactflow.dev/error#500');
currentExtent = nodeExtent;
}
} else if (node.extent && node.parentNode) {

12
packages/core/src/hooks/useResizeHandler.ts
View File

@@ -1,7 +1,7 @@
import { useEffect, MutableRefObject } from 'react';
import { useStoreApi } from '../hooks/useStore';
import { getDimensions } from '../utils';
import { devWarn, getDimensions } from '../utils';
function useResizeHandler(rendererNode: MutableRefObject<HTMLDivElement | null>): void {
const store = useStoreApi();
@@ -16,12 +16,10 @@ function useResizeHandler(rendererNode: MutableRefObject<HTMLDivElement | null>)
const size = getDimensions(rendererNode.current);
if (process.env.NODE_ENV === 'development') {
if (size.height === 0 || size.width === 0) {
console.warn(
'[React Flow]: The React Flow parent container needs a width and a height to render the graph. Help: https://reactflow.dev/error#400'
);
}
if (size.height === 0 || size.width === 0) {
devWarn(
'The React Flow parent container needs a width and a height to render the graph. Help: https://reactflow.dev/error#400'
);
}
store.setState({ width: size.width || 500, height: size.height || 500 });

23
packages/core/src/utils/graph.ts
View File

@@ -1,7 +1,7 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { Selection as D3Selection } from 'd3';
import { boxToRect, clamp, getBoundsOfBoxes, rectToBox } from '../utils';
import { boxToRect, clamp, devWarn, getBoundsOfBoxes, rectToBox } from '../utils';
import { Node, Edge, Connection, EdgeMarkerType, Transform, XYPosition, Rect, NodeInternals } from '../types';
export const isEdge = (element: Node | Connection | Edge): element is Edge =>
@@ -60,11 +60,8 @@ const connectionExists = (edge: Edge, edges: Edge[]) => {
export const addEdge = (edgeParams: Edge | Connection, edges: Edge[]): Edge[] => {
if (!edgeParams.source || !edgeParams.target) {
if (process.env.NODE_ENV === 'development') {
console.warn(
"[React Flow]: Can't create edge. An edge needs a source and a target. Help: https://reactflow.dev/error#600"
);
}
devWarn("Can't create edge. An edge needs a source and a target. Help: https://reactflow.dev/error#600");
return edges;
}
@@ -87,22 +84,16 @@ export const addEdge = (edgeParams: Edge | Connection, edges: Edge[]): Edge[] =>
export const updateEdge = (oldEdge: Edge, newConnection: Connection, edges: Edge[]): Edge[] => {
if (!newConnection.source || !newConnection.target) {
if (process.env.NODE_ENV === 'development') {
console.warn(
"[React Flow]: Can't create a new edge. An edge needs a source and a target. Help: https://reactflow.dev/error#600"
);
}
devWarn("Can't create a new edge. An edge needs a source and a target. Help: https://reactflow.dev/error#600");
return edges;
}
const foundEdge = edges.find((e) => e.id === oldEdge.id) as Edge;
if (!foundEdge) {
if (process.env.NODE_ENV === 'development') {
console.warn(
`[React Flow]: The old edge with id=${oldEdge.id} does not exist. Help: https://reactflow.dev/error#700`
);
}
devWarn(`The old edge with id=${oldEdge.id} does not exist. Help: https://reactflow.dev/error#700`);
return edges;
}

6
packages/core/src/utils/index.ts
View File

@@ -46,3 +46,9 @@ export const internalsSymbol = Symbol.for('internals');
// used for a11y key board controls for nodes and edges
export const elementSelectionKeys = ['Enter', ' ', 'Escape'];
export const devWarn = (message: string) => {
if (process.env.NODE_ENV === 'development') {
console.warn(`[React Flow]: ${message}`);
}
};