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

refactor(boolean-props): omit is prefix

Browse Source
This commit is contained in:
moklick
2021-11-09 12:35:21 +01:00
parent 050bb3130f
commit a79e953ab3
13 changed files with 66 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/src/Stress/index.tsx
+1 -8
View File
@@ -55,14 +55,7 @@ const StressFlow = () => {
}, []);
return (
<ReactFlow
onlyRenderVisibleElements
nodes={nodes}
edges={edges}
onLoad={onLoad}
onConnect={onConnect}
onNodesChange={onNodesChange}
>
<ReactFlow nodes={nodes} edges={edges} onLoad={onLoad} onConnect={onConnect} onNodesChange={onNodesChange}>
<MiniMap />
<Controls />
<Background />
src/components/Edges/wrapEdge.tsx
+3 -3
View File
@@ -24,7 +24,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
data,
onClick,
onEdgeDoubleClick,
isSelected,
selected,
animated,
label,
labelStyle,
@@ -70,7 +70,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
'react-flow__edge',
`react-flow__edge-${type}`,
className,
{ selected: isSelected, animated, inactive, updating },
{ selected, animated, inactive, updating },
]);
const edgeElement = useMemo<Edge>(() => {
@@ -222,7 +222,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
id={id}
source={source}
target={target}
isSelected={isSelected}
selected={selected}
animated={animated}
label={label}
labelStyle={labelStyle}
src/components/Nodes/wrapNode.tsx
+21 -22
View File
@@ -23,7 +23,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
scale,
xPos,
yPos,
isSelected,
selected,
onClick,
onMouseEnter,
onMouseMove,
@@ -45,7 +45,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
isInitialized,
snapToGrid,
snapGrid,
isDragging,
dragging,
resizeObserver,
dragHandle,
zIndex,
@@ -74,7 +74,6 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
...style,
}),
[
isSelected,
xPos,
yPos,
isSelectable,
@@ -91,28 +90,28 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
);
const onMouseEnterHandler = useMemo(() => {
if (!onMouseEnter || isDragging) {
if (!onMouseEnter || dragging) {
return;
}
return (event: MouseEvent) => onMouseEnter(event, node);
}, [onMouseEnter, isDragging, node]);
}, [onMouseEnter, dragging, node]);
const onMouseMoveHandler = useMemo(() => {
if (!onMouseMove || isDragging) {
if (!onMouseMove || dragging) {
return;
}
return (event: MouseEvent) => onMouseMove(event, node);
}, [onMouseMove, isDragging, node]);
}, [onMouseMove, dragging, node]);
const onMouseLeaveHandler = useMemo(() => {
if (!onMouseLeave || isDragging) {
if (!onMouseLeave || dragging) {
return;
}
return (event: MouseEvent) => onMouseLeave(event, node);
}, [onMouseLeave, isDragging, node]);
}, [onMouseLeave, dragging, node]);
const onContextMenuHandler = useMemo(() => {
if (!onContextMenu) {
@@ -128,7 +127,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
if (isSelectable) {
unsetNodesSelection();
if (!isSelected) {
if (!selected) {
addSelectedElements([node]);
}
}
@@ -136,7 +135,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
onClick?.(event, node);
}
},
[isSelectable, isSelected, isDraggable, onClick, node]
[isSelectable, selected, isDraggable, onClick, node]
);
const onDragStart = useCallback(
@@ -146,15 +145,15 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
if (selectNodesOnDrag && isSelectable) {
unsetNodesSelection();
if (!isSelected) {
if (!selected) {
addSelectedElements([node]);
}
} else if (!selectNodesOnDrag && !isSelected && isSelectable) {
} else if (!selectNodesOnDrag && !selected && isSelectable) {
unselectNodesAndEdges();
unsetNodesSelection();
}
},
[node, isSelected, selectNodesOnDrag, isSelectable, onNodeDragStart]
[node, selected, selectNodesOnDrag, isSelectable, onNodeDragStart]
);
const onDrag = useCallback(
@@ -166,7 +165,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
onNodeDrag(event as MouseEvent, node);
}
updateNodePosition({ id, isDragging: true, diff: { x: draggableData.deltaX, y: draggableData.deltaY } });
updateNodePosition({ id, dragging: true, diff: { x: draggableData.deltaX, y: draggableData.deltaY } });
},
[id, node, onNodeDrag]
);
@@ -175,8 +174,8 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
(event: DraggableEvent) => {
// onDragStop also gets called when user just clicks on a node.
// Because of that we set dragging to true inside the onDrag handler and handle the click here
if (!isDragging) {
if (isSelectable && !selectNodesOnDrag && !isSelected) {
if (!dragging) {
if (isSelectable && !selectNodesOnDrag && !selected) {
addSelectedElements([node]);
}
@@ -187,12 +186,12 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
updateNodePosition({
id: node.id,
isDragging: false,
dragging: false,
});
onNodeDragStop?.(event as MouseEvent, node);
},
[node, isSelectable, selectNodesOnDrag, onClick, onNodeDragStop, isDragging, isSelected]
[node, isSelectable, selectNodesOnDrag, onClick, onNodeDragStop, dragging, selected]
);
const onNodeDoubleClickHandler = useCallback(
@@ -226,7 +225,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
`react-flow__node-${type}`,
className,
{
selected: isSelected,
selected,
selectable: isSelectable,
parent: isParent,
},
@@ -264,11 +263,11 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
type={type}
xPos={xPos}
yPos={yPos}
isSelected={isSelected}
selected={selected}
isConnectable={isConnectable}
sourcePosition={sourcePosition}
targetPosition={targetPosition}
isDragging={isDragging}
dragging={dragging}
dragHandle={dragHandle}
zIndex={zIndex}
/>
src/components/NodesSelection/index.tsx
+3 -3
View File
@@ -20,7 +20,7 @@ const selector = (s: ReactFlowState) => ({
transform: s.transform,
selectedNodesBbox: s.selectedNodesBbox,
selectionActive: s.selectionActive,
selectedNodes: s.nodes.filter((n) => n.isSelected),
selectedNodes: s.nodes.filter((n) => n.selected),
snapToGrid: s.snapToGrid,
snapGrid: s.snapGrid,
updateNodePosition: s.updateNodePosition,
@@ -74,7 +74,7 @@ export default ({
x: data.deltaX,
y: data.deltaY,
},
isDragging: true,
dragging: true,
});
},
[onSelectionDrag, selectedNodes, updateNodePosition]
@@ -83,7 +83,7 @@ export default ({
const onStop = useCallback(
(event: MouseEvent) => {
updateNodePosition({
isDragging: false,
dragging: false,
});
onSelectionDragStop?.(event, selectedNodes);
src/components/SelectionListener/index.tsx
+2 -2
View File
@@ -9,8 +9,8 @@ interface SelectionListenerProps {
}
const selectedElementsSelector = (s: ReactFlowState) => ({
selectedNodes: s.nodes.filter((n) => n.isSelected),
selectedEdges: s.edges.filter((e) => e.isSelected),
selectedNodes: s.nodes.filter((n) => n.selected),
selectedEdges: s.edges.filter((e) => e.selected),
});
// This is just a helper component for calling the onSelectionChange listener.
src/container/EdgeRenderer/index.tsx
+1 -1
View File
@@ -167,7 +167,7 @@ const Edge = memo(
type={edgeType}
data={edge.data}
onClick={onEdgeClick}
isSelected={!!edge.isSelected}
selected={!!edge.selected}
animated={edge.animated}
label={edge.label}
labelStyle={edge.labelStyle}
src/container/NodeRenderer/index.tsx
+2 -2
View File
@@ -85,7 +85,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
isHidden={node.isHidden}
xPos={internals?.positionAbsolute?.x || 0}
yPos={internals?.positionAbsolute?.y || 0}
isDragging={node.isDragging}
dragging={node.dragging}
isInitialized={isInitialized}
snapGrid={snapGrid}
snapToGrid={snapToGrid}
@@ -100,7 +100,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
onNodeDrag={props.onNodeDrag}
onNodeDragStop={props.onNodeDragStop}
scale={scale}
isSelected={!!node.isSelected}
selected={!!node.selected}
isDraggable={isDraggable}
isSelectable={isSelectable}
isConnectable={isConnectable}
src/hooks/useGlobalKeyHandler.ts
+2 -2
View File
@@ -29,8 +29,8 @@ export default ({ deleteKeyCode, multiSelectionKeyCode }: HookParams): void => {
useEffect(() => {
const { nodes, edges } = store.getState();
const selectedNodes = nodes.filter((n) => n.isSelected);
const selectedEdges = edges.filter((e) => e.isSelected);
const selectedNodes = nodes.filter((n) => n.selected);
const selectedEdges = edges.filter((e) => e.selected);
if (deleteKeyPressed && (selectedNodes || selectedEdges)) {
const connectedEdges = getConnectedEdges(selectedNodes, edges);
src/store/index.ts
+9 -9
View File
@@ -32,10 +32,10 @@ import { createNodeInternals } from './utils';
const { Provider, useStore, useStoreApi } = createContext<ReactFlowState>();
const createNodeOrEdgeSelectionChange = (isSelected: boolean) => (item: Node | Edge) => ({
const createNodeOrEdgeSelectionChange = (selected: boolean) => (item: Node | Edge) => ({
id: item.id,
type: 'select',
isSelected,
selected,
});
const createStore = () =>
@@ -141,11 +141,11 @@ const createStore = () =>
onNodesChange?.(nodesToChange);
},
updateNodePosition: ({ id, diff, isDragging }: NodeDiffUpdate) => {
updateNodePosition: ({ id, diff, dragging }: NodeDiffUpdate) => {
const { onNodesChange, nodes, nodeExtent, nodeInternals } = get();
if (onNodesChange) {
const matchingNodes = nodes.filter((n) => !!(n.isSelected || n.id === id));
const matchingNodes = nodes.filter((n) => !!(n.selected || n.id === id));
if (matchingNodes?.length) {
onNodesChange(
@@ -153,7 +153,7 @@ const createStore = () =>
const change: NodeDimensionChange = {
id: node.id,
type: 'dimensions',
isDragging: !!isDragging,
dragging: !!dragging,
};
if (diff) {
@@ -231,7 +231,7 @@ const createStore = () =>
},
unsetUserSelection: () => {
const { userSelectionRect, nodes } = get();
const selectedNodes = nodes.filter((node) => node.isSelected);
const selectedNodes = nodes.filter((node) => node.selected);
const stateUpdate = {
selectionActive: false,
@@ -281,7 +281,7 @@ const createStore = () =>
const { nodes, edges, onNodesChange, onEdgesChange } = get();
const nodesToUnselect = nodes.map((n) => {
n.isSelected = false;
n.selected = false;
return createNodeOrEdgeSelectionChange(false)(n);
}) as NodeChange[];
const edgesToUnselect = edges.map(createNodeOrEdgeSelectionChange(false)) as EdgeChange[];
@@ -322,8 +322,8 @@ const createStore = () =>
resetSelectedElements: () => {
const { nodes, edges, onNodesChange, onEdgesChange } = get();
const nodesToUnselect = nodes.filter((e) => e.isSelected).map(createNodeOrEdgeSelectionChange(false));
const edgesToUnselect = edges.filter((e) => e.isSelected).map(createNodeOrEdgeSelectionChange(false));
const nodesToUnselect = nodes.filter((e) => e.selected).map(createNodeOrEdgeSelectionChange(false));
const edgesToUnselect = edges.filter((e) => e.selected).map(createNodeOrEdgeSelectionChange(false));
if (nodesToUnselect.length) {
onNodesChange?.(nodesToUnselect as NodeChange[]);
src/store/utils.ts
+3 -3
View File
@@ -44,7 +44,7 @@ export function createNodeInternals(nodes: Node[], nodeInternals: NodeInternals)
height: node.height || null,
position: node.position,
positionAbsolute: node.position,
z: node.isDragging || node.isSelected ? 1000 : node.zIndex || 0,
z: node.dragging || node.selected ? 1000 : node.zIndex || 0,
};
if (node.parentNode) {
internals.parentNode = node.parentNode;
@@ -57,7 +57,7 @@ export function createNodeInternals(nodes: Node[], nodeInternals: NodeInternals)
const updatedInternals: NodeInternalsItem = nextNodeInternals.get(node.id)!;
if (node.parentNode || parentNodes[node.id]) {
let startingZ = updatedInternals.z;
let startingZ = updatedInternals.z || 0;
if (!startingZ) {
if (parentNodes[node.id] && node.parentNode) {
@@ -69,7 +69,7 @@ export function createNodeInternals(nodes: Node[], nodeInternals: NodeInternals)
const { x, y, z } = calculateXYZPosition(node, nextNodeInternals, parentNodes, {
...node.position,
z: startingZ as number,
z: startingZ,
});
updatedInternals.positionAbsolute = {
src/types/index.ts
+14 -14
View File
@@ -15,13 +15,13 @@ export type NodeDimensionChange = {
dimensions?: Dimensions;
position?: XYPosition;
handleBounds?: NodeHandleBounds;
isDragging?: boolean;
dragging?: boolean;
};
export type NodeSelectionChange = {
id: string;
type: 'select';
isSelected: boolean;
selected: boolean;
};
export type NodeRemoveChange = {
id: string;
@@ -74,8 +74,8 @@ export interface Node<T = any> {
targetPosition?: Position;
sourcePosition?: Position;
isHidden?: boolean;
isSelected?: boolean;
isDragging?: boolean;
selected?: boolean;
dragging?: boolean;
draggable?: boolean;
selectable?: boolean;
connectable?: boolean;
@@ -124,7 +124,7 @@ export interface Edge<T = any> {
className?: string;
sourceNode?: Node;
targetNode?: Node;
isSelected?: boolean;
selected?: boolean;
markerStart?: EdgeMarkerType;
markerEnd?: EdgeMarkerType;
}
@@ -153,7 +153,7 @@ export interface WrapEdgeProps<T = any> {
data?: T;
onClick?: (event: React.MouseEvent, edge: Edge) => void;
onEdgeDoubleClick?: (event: React.MouseEvent, edge: Edge) => void;
isSelected: boolean;
selected: boolean;
animated?: boolean;
label?: string | ReactNode;
labelStyle?: CSSProperties;
@@ -195,7 +195,7 @@ export interface EdgeProps<T = any> {
sourceY: number;
targetX: number;
targetY: number;
isSelected?: boolean;
selected?: boolean;
animated?: boolean;
sourcePosition: Position;
targetPosition: Position;
@@ -231,13 +231,13 @@ export interface NodeProps<T = any> {
id: ElementId;
type: string;
data: T;
isSelected: boolean;
selected: boolean;
isConnectable: boolean;
xPos?: number;
yPos?: number;
targetPosition?: Position;
sourcePosition?: Position;
isDragging?: boolean;
dragging?: boolean;
dragHandle?: string;
zIndex?: number;
}
@@ -246,7 +246,7 @@ export interface NodeComponentProps<T = any> {
id: ElementId;
type: string;
data: T;
isSelected?: boolean;
selected?: boolean;
isConnectable: boolean;
transform?: Transform;
xPos?: number;
@@ -263,7 +263,7 @@ export interface NodeComponentProps<T = any> {
onNodeDrag?: (node: Node) => void;
onNodeDragStop?: (node: Node) => void;
style?: CSSProperties;
isDragging?: boolean;
dragging?: boolean;
dragHandle?: string;
zIndex?: number;
}
@@ -272,7 +272,7 @@ export interface WrapNodeProps<T = any> {
id: ElementId;
type: string;
data: T;
isSelected: boolean;
selected: boolean;
scale: number;
xPos: number;
yPos: number;
@@ -299,7 +299,7 @@ export interface WrapNodeProps<T = any> {
isInitialized?: boolean;
snapToGrid?: boolean;
snapGrid?: SnapGrid;
isDragging?: boolean;
dragging?: boolean;
resizeObserver: ResizeObserver | null;
dragHandle?: string;
zIndex: number;
@@ -410,7 +410,7 @@ export type NodePosUpdate = {
export type NodeDiffUpdate = {
id?: ElementId;
diff?: XYPosition;
isDragging?: boolean;
dragging?: boolean;
};
export type FlowTransform = {
src/utils/changes.ts
+3 -3
View File
@@ -9,7 +9,7 @@ function applyChanges(changes: NodeChange[] | EdgeChange[], elements: any[]): an
if (currentChange) {
switch (currentChange.type) {
case 'select': {
res.push({ ...item, isSelected: currentChange.isSelected });
res.push({ ...item, selected: currentChange.selected });
return res;
}
case 'dimensions': {
@@ -24,8 +24,8 @@ function applyChanges(changes: NodeChange[] | EdgeChange[], elements: any[]): an
updateItem.position = currentChange.position;
}
if (typeof currentChange.isDragging !== 'undefined') {
updateItem.isDragging = currentChange.isDragging;
if (typeof currentChange.dragging !== 'undefined') {
updateItem.dragging = currentChange.dragging;
}
res.push(updateItem);
src/utils/graph.ts
+2 -2
View File
@@ -149,7 +149,7 @@ export const getNodesInside = (
height: rect.height / tScale,
});
return nodes.filter(({ selectable = true, position, width, height, isDragging }) => {
return nodes.filter(({ selectable = true, position, width, height, dragging }) => {
if (excludeNonSelectableNodes && !selectable) {
return false;
}
@@ -164,7 +164,7 @@ export const getNodesInside = (
typeof height === 'undefined' ||
width === null ||
height === null ||
isDragging
dragging
) {
// nodes are initialized with width and height = null
return true;