diff --git a/example/src/Basic/index.tsx b/example/src/Basic/index.tsx index 0184971e..2335443f 100644 --- a/example/src/Basic/index.tsx +++ b/example/src/Basic/index.tsx @@ -140,7 +140,7 @@ const BasicFlow = () => { const toggleChildNodes = () => { setNodes((nds) => { return nds.map((n) => { - n.isHidden = !!n.parentNode && !n.isHidden; + n.hidden = !!n.parentNode && !n.hidden; return n; }); }); diff --git a/example/src/Hidden/index.tsx b/example/src/Hidden/index.tsx index b0249310..4ac8eaa4 100644 --- a/example/src/Hidden/index.tsx +++ b/example/src/Hidden/index.tsx @@ -4,10 +4,10 @@ import { useEffect } from 'react'; import ReactFlow, { addEdge, MiniMap, Controls, Connection, Edge, Node } from 'react-flow-renderer'; const initialNodes: Node[] = [ - { id: '1', type: 'input', isHidden: true, data: { label: 'Node 1' }, position: { x: 250, y: 5 } }, - { id: '2', isHidden: true, data: { label: 'Node 2' }, position: { x: 100, y: 100 } }, - { id: '3', isHidden: true, data: { label: 'Node 3' }, position: { x: 400, y: 100 } }, - { id: '4', isHidden: true, data: { label: 'Node 4' }, position: { x: 400, y: 200 } }, + { id: '1', type: 'input', hidden: true, data: { label: 'Node 1' }, position: { x: 250, y: 5 } }, + { id: '2', hidden: true, data: { label: 'Node 2' }, position: { x: 100, y: 100 } }, + { id: '3', hidden: true, data: { label: 'Node 3' }, position: { x: 400, y: 100 } }, + { id: '4', hidden: true, data: { label: 'Node 4' }, position: { x: 400, y: 200 } }, ]; const initialEdges: Edge[] = [ @@ -16,9 +16,9 @@ const initialEdges: Edge[] = [ { id: 'e3-4', source: '3', target: '4' }, ]; -const setHidden = (isHidden: boolean) => (els: any[]) => +const setHidden = (hidden: boolean) => (els: any[]) => els.map((e: any) => { - e.isHidden = isHidden; + e.hidden = hidden; return e; }); diff --git a/example/src/NestedNodes/index.tsx b/example/src/NestedNodes/index.tsx index 232578e0..ed445a64 100644 --- a/example/src/NestedNodes/index.tsx +++ b/example/src/NestedNodes/index.tsx @@ -129,7 +129,7 @@ const NestedFlow = () => { const toggleChildNodes = () => { setNodes((nds) => { return nds.map((n) => { - n.isHidden = !!n.parentNode && !n.isHidden; + n.hidden = !!n.parentNode && !n.hidden; return n; }); }); diff --git a/example/src/UpdateNode/index.tsx b/example/src/UpdateNode/index.tsx index 8a4269aa..e38babad 100644 --- a/example/src/UpdateNode/index.tsx +++ b/example/src/UpdateNode/index.tsx @@ -52,7 +52,7 @@ const UpdateNode = () => { nds.map((n) => { if (n.id === '1' || n.id === 'e1-2') { // when you update a simple type you can just update the value - n.isHidden = nodeHidden; + n.hidden = nodeHidden; } return n; diff --git a/src/additional-components/MiniMap/index.tsx b/src/additional-components/MiniMap/index.tsx index bf5d7e02..174caf4f 100644 --- a/src/additional-components/MiniMap/index.tsx +++ b/src/additional-components/MiniMap/index.tsx @@ -84,7 +84,7 @@ const MiniMap = ({ className={mapClasses} > {Array.from(nodeInternals) - .filter(([_, node]) => !node.isHidden && node.width && node.height) + .filter(([_, node]) => !node.hidden && node.width && node.height) .map(([_, node]) => { const positionAbsolute = nodeInternals.get(node.id)?.positionAbsolute; diff --git a/src/components/Edges/wrapEdge.tsx b/src/components/Edges/wrapEdge.tsx index eadf55f8..a89eb28e 100644 --- a/src/components/Edges/wrapEdge.tsx +++ b/src/components/Edges/wrapEdge.tsx @@ -42,7 +42,7 @@ export default (EdgeComponent: ComponentType) => { sourcePosition, targetPosition, elementsSelectable, - isHidden, + hidden, sourceHandleId, targetHandleId, handleEdgeUpdate, @@ -204,7 +204,7 @@ export default (EdgeComponent: ComponentType) => { const markerStartUrl = useMemo(() => `url(#${getMarkerId(markerStart)})`, [markerStart]); const markerEndUrl = useMemo(() => `url(#${getMarkerId(markerEnd)})`, [markerEnd]); - if (isHidden) { + if (hidden) { return null; } diff --git a/src/components/Nodes/wrapNode.tsx b/src/components/Nodes/wrapNode.tsx index deccc17b..15c0e7c1 100644 --- a/src/components/Nodes/wrapNode.tsx +++ b/src/components/Nodes/wrapNode.tsx @@ -41,7 +41,7 @@ export default (NodeComponent: ComponentType) => { selectNodesOnDrag, sourcePosition, targetPosition, - isHidden, + hidden, isInitialized, snapToGrid, snapGrid, @@ -210,7 +210,7 @@ export default (NodeComponent: ComponentType) => { } }, []); - if (isHidden) { + if (hidden) { return null; } diff --git a/src/container/EdgeRenderer/index.tsx b/src/container/EdgeRenderer/index.tsx index 7d6329fc..a970d5b6 100644 --- a/src/container/EdgeRenderer/index.tsx +++ b/src/container/EdgeRenderer/index.tsx @@ -190,7 +190,7 @@ const Edge = memo( targetPosition={targetPosition} elementsSelectable={elementsSelectable} markerEndId={markerEndId} - isHidden={edge.isHidden} + hidden={edge.hidden} onConnectEdge={onConnectEdge} handleEdgeUpdate={typeof onEdgeUpdate !== 'undefined'} onContextMenu={onEdgeContextMenu} diff --git a/src/container/NodeRenderer/index.tsx b/src/container/NodeRenderer/index.tsx index 8a093d6e..2dee0dd5 100644 --- a/src/container/NodeRenderer/index.tsx +++ b/src/container/NodeRenderer/index.tsx @@ -87,7 +87,7 @@ const NodeRenderer = (props: NodeRendererProps) => { data={node.data} sourcePosition={node.sourcePosition} targetPosition={node.targetPosition} - isHidden={node.isHidden} + hidden={node.hidden} xPos={internals?.positionAbsolute?.x || 0} yPos={internals?.positionAbsolute?.y || 0} dragging={!!node.dragging} diff --git a/src/hooks/useZoomPanHelper.ts b/src/hooks/useZoomPanHelper.ts index 7ba41095..735ef4b6 100644 --- a/src/hooks/useZoomPanHelper.ts +++ b/src/hooks/useZoomPanHelper.ts @@ -48,7 +48,7 @@ const useZoomPanHelper = (): ZoomPanHelperFunctions => { 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( bounds, width, diff --git a/src/types/edges.ts b/src/types/edges.ts index 7e7f1875..21ea21e2 100644 --- a/src/types/edges.ts +++ b/src/types/edges.ts @@ -21,7 +21,7 @@ export interface Edge { labelBgBorderRadius?: number; style?: CSSProperties; animated?: boolean; - isHidden?: boolean; + hidden?: boolean; data?: T; className?: string; sourceNode?: Node; @@ -88,7 +88,7 @@ export interface WrapEdgeProps { sourcePosition: Position; targetPosition: Position; elementsSelectable?: boolean; - isHidden?: boolean; + hidden?: boolean; handleEdgeUpdate: boolean; onConnectEdge: OnConnect; onContextMenu?: EdgeMouseHandler; diff --git a/src/types/nodes.ts b/src/types/nodes.ts index 60d052bc..fe11ef48 100644 --- a/src/types/nodes.ts +++ b/src/types/nodes.ts @@ -14,7 +14,7 @@ export interface Node { className?: string; targetPosition?: Position; sourcePosition?: Position; - isHidden?: boolean; + hidden?: boolean; selected?: boolean; dragging?: boolean; draggable?: boolean; @@ -73,7 +73,7 @@ export interface WrapNodeProps { className?: string; sourcePosition?: Position; targetPosition?: Position; - isHidden?: boolean; + hidden?: boolean; isInitialized?: boolean; snapToGrid?: boolean; snapGrid?: SnapGrid;