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