feat(elements): add isHidden option

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