feat(elements): add isHidden option

src/additional-components/MiniMap/index.tsx

@@ -63,9 +63,11 @@ const MiniMap = ({
       style={style}
       className={mapClasses}
     >
-      {nodes.map((node) => (
-        <MiniMapNode key={node.id} node={node} color={nodeColorFunc(node)} borderRadius={nodeBorderRadius} />
-      ))}
+      {nodes
+        .filter((node) => !node.isHidden)
+        .map((node) => (
+          <MiniMapNode key={node.id} node={node} color={nodeColorFunc(node)} borderRadius={nodeBorderRadius} />
+        ))}
       <path
         className="react-flow__minimap-mask"
         d={`M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width - offset * 2}z

src/components/Edges/wrapEdge.tsx

@@ -18,6 +18,7 @@ interface EdgeWrapperProps {
   animated?: boolean;
   selected: boolean;
   elementsSelectable: boolean;
+  isHidden?: boolean;
 }
 
 export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
@@ -36,9 +37,15 @@ export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
       labelShowBg,
       labelBgStyle,
       className,
+      isHidden,
       ...rest
     }: EdgeWrapperProps) => {
       const setSelectedElements = useStoreActions((a) => a.setSelectedElements);
+
+      if (isHidden) {
+        return null;
+      }
+
       const edgeClasses = cc(['react-flow__edge', `react-flow__edge-${type}`, className, { selected, animated }]);
       const edgeGroupStyle: CSSProperties = {
         pointerEvents: elementsSelectable ? 'all' : 'none',

src/components/Nodes/wrapNode.tsx

@@ -184,6 +184,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
       selectNodesOnDrag,
       sourcePosition,
       targetPosition,
+      isHidden,
     }: WrapNodeProps) => {
       const updateNodeDimensions = useStoreActions((a) => a.updateNodeDimensions);
       const setSelectedElements = useStoreActions((a) => a.setSelectedElements);
@@ -243,13 +244,6 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
         return noop;
       }, [isSelectable, isDraggable, id, type]);
 
-      const nodeStyle: CSSProperties = {
-        zIndex: selected ? 10 : 3,
-        transform: `translate(${xPos}px,${yPos}px)`,
-        pointerEvents: isSelectable || isDraggable ? 'all' : 'none',
-        ...style,
-      };
-
       useEffect(() => {
         if (nodeElement.current) {
           updateNodeDimensions({ id, nodeElement: nodeElement.current });
@@ -271,6 +265,17 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
 
         return;
       }, [id]);
+      console.log(isHidden);
+      if (isHidden) {
+        return null;
+      }
+
+      const nodeStyle: CSSProperties = {
+        zIndex: selected ? 10 : 3,
+        transform: `translate(${xPos}px,${yPos}px)`,
+        pointerEvents: isSelectable || isDraggable ? 'all' : 'none',
+        ...style,
+      };
 
       return (
         <DraggableCore

src/container/EdgeRenderer/index.tsx

@@ -187,6 +187,7 @@ function renderEdge(
       targetPosition={targetPosition}
       elementsSelectable={elementsSelectable}
       markerEndId={props.markerEndId}
+      isHidden={edge.isHidden}
     />
   );
 }

src/container/NodeRenderer/index.tsx

@@ -59,6 +59,7 @@ function renderNode(
       sourcePosition={node.sourcePosition}
       targetPosition={node.targetPosition}
       selectNodesOnDrag={props.selectNodesOnDrag}
+      isHidden={node.isHidden}
     />
   );
 }

src/hooks/useElementUpdater.ts

@@ -29,6 +29,7 @@ const useElementUpdater = (elements: Elements): void => {
           : existingNode.style;
 
         const className = existingNode.className === propNode.className ? existingNode.className : propNode.className;
+        const isHidden = existingNode.isHidden === propNode.isHidden ? existingNode.isHidden : propNode.isHidden;
 
         const positionChanged =
           existingNode.position.x !== propNode.position.x || existingNode.position.y !== propNode.position.y;
@@ -54,6 +55,10 @@ const useElementUpdater = (elements: Elements): void => {
           nodeProps.className = className;
         }
 
+        if (typeof isHidden !== 'undefined') {
+          nodeProps.isHidden = isHidden;
+        }
+
         return nodeProps;
       }
 

src/types/index.ts

@@ -40,6 +40,7 @@ export interface Node {
   className?: string;
   targetPosition?: Position;
   sourcePosition?: Position;
+  isHidden?: boolean;
 }
 
 export enum ArrowHeadType {
@@ -59,6 +60,7 @@ export interface Edge {
   style?: CSSProperties;
   animated?: boolean;
   arrowHeadType?: ArrowHeadType;
+  isHidden?: boolean;
 }
 
 export enum BackgroundVariant {
@@ -151,6 +153,7 @@ export interface WrapNodeProps {
   className?: string;
   sourcePosition?: Position;
   targetPosition?: Position;
+  isHidden?: boolean;
 }
 
 export type FitViewParams = {