refactor(nodes-edges): rename isHidden to hidden
This commit is contained in:
@@ -140,7 +140,7 @@ const BasicFlow = () => {
|
|||||||
const toggleChildNodes = () => {
|
const toggleChildNodes = () => {
|
||||||
setNodes((nds) => {
|
setNodes((nds) => {
|
||||||
return nds.map((n) => {
|
return nds.map((n) => {
|
||||||
n.isHidden = !!n.parentNode && !n.isHidden;
|
n.hidden = !!n.parentNode && !n.hidden;
|
||||||
return n;
|
return n;
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -4,10 +4,10 @@ import { useEffect } from 'react';
|
|||||||
import ReactFlow, { addEdge, MiniMap, Controls, Connection, Edge, Node } from 'react-flow-renderer';
|
import ReactFlow, { addEdge, MiniMap, Controls, Connection, Edge, Node } from 'react-flow-renderer';
|
||||||
|
|
||||||
const initialNodes: Node[] = [
|
const initialNodes: Node[] = [
|
||||||
{ id: '1', type: 'input', isHidden: true, data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
|
{ id: '1', type: 'input', hidden: true, data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
|
||||||
{ id: '2', isHidden: true, data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
|
{ id: '2', hidden: true, data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
|
||||||
{ id: '3', isHidden: true, data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
|
{ id: '3', hidden: true, data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
|
||||||
{ id: '4', isHidden: true, data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
|
{ id: '4', hidden: true, data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
|
||||||
];
|
];
|
||||||
|
|
||||||
const initialEdges: Edge[] = [
|
const initialEdges: Edge[] = [
|
||||||
@@ -16,9 +16,9 @@ const initialEdges: Edge[] = [
|
|||||||
{ id: 'e3-4', source: '3', target: '4' },
|
{ id: 'e3-4', source: '3', target: '4' },
|
||||||
];
|
];
|
||||||
|
|
||||||
const setHidden = (isHidden: boolean) => (els: any[]) =>
|
const setHidden = (hidden: boolean) => (els: any[]) =>
|
||||||
els.map((e: any) => {
|
els.map((e: any) => {
|
||||||
e.isHidden = isHidden;
|
e.hidden = hidden;
|
||||||
return e;
|
return e;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -129,7 +129,7 @@ const NestedFlow = () => {
|
|||||||
const toggleChildNodes = () => {
|
const toggleChildNodes = () => {
|
||||||
setNodes((nds) => {
|
setNodes((nds) => {
|
||||||
return nds.map((n) => {
|
return nds.map((n) => {
|
||||||
n.isHidden = !!n.parentNode && !n.isHidden;
|
n.hidden = !!n.parentNode && !n.hidden;
|
||||||
return n;
|
return n;
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -52,7 +52,7 @@ const UpdateNode = () => {
|
|||||||
nds.map((n) => {
|
nds.map((n) => {
|
||||||
if (n.id === '1' || n.id === 'e1-2') {
|
if (n.id === '1' || n.id === 'e1-2') {
|
||||||
// when you update a simple type you can just update the value
|
// when you update a simple type you can just update the value
|
||||||
n.isHidden = nodeHidden;
|
n.hidden = nodeHidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
return n;
|
return n;
|
||||||
|
|||||||
@@ -84,7 +84,7 @@ const MiniMap = ({
|
|||||||
className={mapClasses}
|
className={mapClasses}
|
||||||
>
|
>
|
||||||
{Array.from(nodeInternals)
|
{Array.from(nodeInternals)
|
||||||
.filter(([_, node]) => !node.isHidden && node.width && node.height)
|
.filter(([_, node]) => !node.hidden && node.width && node.height)
|
||||||
.map(([_, node]) => {
|
.map(([_, node]) => {
|
||||||
const positionAbsolute = nodeInternals.get(node.id)?.positionAbsolute;
|
const positionAbsolute = nodeInternals.get(node.id)?.positionAbsolute;
|
||||||
|
|
||||||
|
|||||||
@@ -42,7 +42,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
|
|||||||
sourcePosition,
|
sourcePosition,
|
||||||
targetPosition,
|
targetPosition,
|
||||||
elementsSelectable,
|
elementsSelectable,
|
||||||
isHidden,
|
hidden,
|
||||||
sourceHandleId,
|
sourceHandleId,
|
||||||
targetHandleId,
|
targetHandleId,
|
||||||
handleEdgeUpdate,
|
handleEdgeUpdate,
|
||||||
@@ -204,7 +204,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
|
|||||||
const markerStartUrl = useMemo(() => `url(#${getMarkerId(markerStart)})`, [markerStart]);
|
const markerStartUrl = useMemo(() => `url(#${getMarkerId(markerStart)})`, [markerStart]);
|
||||||
const markerEndUrl = useMemo(() => `url(#${getMarkerId(markerEnd)})`, [markerEnd]);
|
const markerEndUrl = useMemo(() => `url(#${getMarkerId(markerEnd)})`, [markerEnd]);
|
||||||
|
|
||||||
if (isHidden) {
|
if (hidden) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -41,7 +41,7 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
|
|||||||
selectNodesOnDrag,
|
selectNodesOnDrag,
|
||||||
sourcePosition,
|
sourcePosition,
|
||||||
targetPosition,
|
targetPosition,
|
||||||
isHidden,
|
hidden,
|
||||||
isInitialized,
|
isInitialized,
|
||||||
snapToGrid,
|
snapToGrid,
|
||||||
snapGrid,
|
snapGrid,
|
||||||
@@ -210,7 +210,7 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
|
|||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
if (isHidden) {
|
if (hidden) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -190,7 +190,7 @@ const Edge = memo(
|
|||||||
targetPosition={targetPosition}
|
targetPosition={targetPosition}
|
||||||
elementsSelectable={elementsSelectable}
|
elementsSelectable={elementsSelectable}
|
||||||
markerEndId={markerEndId}
|
markerEndId={markerEndId}
|
||||||
isHidden={edge.isHidden}
|
hidden={edge.hidden}
|
||||||
onConnectEdge={onConnectEdge}
|
onConnectEdge={onConnectEdge}
|
||||||
handleEdgeUpdate={typeof onEdgeUpdate !== 'undefined'}
|
handleEdgeUpdate={typeof onEdgeUpdate !== 'undefined'}
|
||||||
onContextMenu={onEdgeContextMenu}
|
onContextMenu={onEdgeContextMenu}
|
||||||
|
|||||||
@@ -87,7 +87,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
|
|||||||
data={node.data}
|
data={node.data}
|
||||||
sourcePosition={node.sourcePosition}
|
sourcePosition={node.sourcePosition}
|
||||||
targetPosition={node.targetPosition}
|
targetPosition={node.targetPosition}
|
||||||
isHidden={node.isHidden}
|
hidden={node.hidden}
|
||||||
xPos={internals?.positionAbsolute?.x || 0}
|
xPos={internals?.positionAbsolute?.x || 0}
|
||||||
yPos={internals?.positionAbsolute?.y || 0}
|
yPos={internals?.positionAbsolute?.y || 0}
|
||||||
dragging={!!node.dragging}
|
dragging={!!node.dragging}
|
||||||
|
|||||||
@@ -48,7 +48,7 @@ const useZoomPanHelper = (): ZoomPanHelperFunctions => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const bounds = getRectOfNodes(options.includeHiddenNodes ? nodes : nodes.filter((node) => !node.isHidden));
|
const bounds = getRectOfNodes(options.includeHiddenNodes ? nodes : nodes.filter((node) => !node.hidden));
|
||||||
const [x, y, zoom] = getTransformForBounds(
|
const [x, y, zoom] = getTransformForBounds(
|
||||||
bounds,
|
bounds,
|
||||||
width,
|
width,
|
||||||
|
|||||||
+2
-2
@@ -21,7 +21,7 @@ export interface Edge<T = any> {
|
|||||||
labelBgBorderRadius?: number;
|
labelBgBorderRadius?: number;
|
||||||
style?: CSSProperties;
|
style?: CSSProperties;
|
||||||
animated?: boolean;
|
animated?: boolean;
|
||||||
isHidden?: boolean;
|
hidden?: boolean;
|
||||||
data?: T;
|
data?: T;
|
||||||
className?: string;
|
className?: string;
|
||||||
sourceNode?: Node;
|
sourceNode?: Node;
|
||||||
@@ -88,7 +88,7 @@ export interface WrapEdgeProps<T = any> {
|
|||||||
sourcePosition: Position;
|
sourcePosition: Position;
|
||||||
targetPosition: Position;
|
targetPosition: Position;
|
||||||
elementsSelectable?: boolean;
|
elementsSelectable?: boolean;
|
||||||
isHidden?: boolean;
|
hidden?: boolean;
|
||||||
handleEdgeUpdate: boolean;
|
handleEdgeUpdate: boolean;
|
||||||
onConnectEdge: OnConnect;
|
onConnectEdge: OnConnect;
|
||||||
onContextMenu?: EdgeMouseHandler;
|
onContextMenu?: EdgeMouseHandler;
|
||||||
|
|||||||
+2
-2
@@ -14,7 +14,7 @@ export interface Node<T = any> {
|
|||||||
className?: string;
|
className?: string;
|
||||||
targetPosition?: Position;
|
targetPosition?: Position;
|
||||||
sourcePosition?: Position;
|
sourcePosition?: Position;
|
||||||
isHidden?: boolean;
|
hidden?: boolean;
|
||||||
selected?: boolean;
|
selected?: boolean;
|
||||||
dragging?: boolean;
|
dragging?: boolean;
|
||||||
draggable?: boolean;
|
draggable?: boolean;
|
||||||
@@ -73,7 +73,7 @@ export interface WrapNodeProps<T = any> {
|
|||||||
className?: string;
|
className?: string;
|
||||||
sourcePosition?: Position;
|
sourcePosition?: Position;
|
||||||
targetPosition?: Position;
|
targetPosition?: Position;
|
||||||
isHidden?: boolean;
|
hidden?: boolean;
|
||||||
isInitialized?: boolean;
|
isInitialized?: boolean;
|
||||||
snapToGrid?: boolean;
|
snapToGrid?: boolean;
|
||||||
snapGrid?: SnapGrid;
|
snapGrid?: SnapGrid;
|
||||||
|
|||||||
Reference in New Issue
Block a user