feat(example): Add hidden example

* Check if node/edge is hidden before rendering

examples/Hidden/index.tsx

@@ -0,0 +1,51 @@
+import RevueFlow, { addEdge, MiniMap, Controls, Connection, Edge, Elements } from '../../src';
+import { defineComponent, ref, watchEffect } from 'vue';
+
+const initialElements: Elements = [
+  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
+  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
+  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
+  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
+  { id: 'e1-2', source: '1', target: '2' },
+  { id: 'e1-3', source: '1', target: '3' },
+  { id: 'e3-4', source: '3', target: '4' }
+] as Elements;
+
+const HiddenFlow = defineComponent({
+  setup() {
+    const elements = ref<Elements>(initialElements);
+    const isHidden = ref<boolean>(false);
+    const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value));
+
+    watchEffect(() => {
+      console.log(isHidden.value);
+      elements.value = elements.value.map((e) => {
+        e.isHidden = isHidden.value;
+        return e;
+      });
+    });
+
+    const toggle = (event) => {
+      console.log(event.target);
+      isHidden.value = event.target?.checked;
+    };
+
+    return () => (
+      <RevueFlow v-model={elements.value} onConnect={onConnect}>
+        <MiniMap />
+        <Controls />
+
+        <div style={{ position: 'absolute', left: '10px', top: '10px', zIndex: 4 }}>
+          <div>
+            <label htmlFor="ishidden">
+              isHidden
+              <input id="ishidden" type="checkbox" v-model={isHidden.value} class="revue-flow__ishidden" />
+            </label>
+          </div>
+        </div>
+      </RevueFlow>
+    );
+  }
+});
+
+export default HiddenFlow;

examples/router.ts

@@ -36,6 +36,10 @@ export const routes: RouterOptions['routes'] = [
   {
     path: '/empty',
     component: () => import('./Empty')
+  },
+  {
+    path: '/hidden',
+    component: () => import('./Hidden')
   }
 ];
 

src/components/Edges/Edge.tsx

@@ -188,7 +188,7 @@ export default defineComponent({
     const onEdgeUpdaterMouseOut = () => (updating.value = false);
 
     return () =>
-      isVisible.value && edgePositions.value ? (
+      !props.edge.isHidden && isVisible.value && edgePositions.value ? (
         <g
           class={[
             'revue-flow__edge',

src/components/Nodes/Node.tsx

@@ -178,54 +178,57 @@ export default defineComponent({
       ]);
     });
 
-    return () => (
+    return () =>
-      <DraggableCore
+      props.node.isHidden ? (
-        cancel=".nodrag"
+        ''
-        scale={store.transform[2]}
+      ) : (
-        disabled={!isDraggable.value}
+        <DraggableCore
-        grid={props.snapGrid}
+          cancel=".nodrag"
-        enableUserSelectHack={false}
+          scale={store.transform[2]}
-        onStart={onDragStart}
+          disabled={!isDraggable.value}
-        onMove={onDrag}
+          grid={props.snapGrid}
-        onStop={onDragStop}
+          enableUserSelectHack={false}
-      >
+          onStart={onDragStart}
-        <div
+          onMove={onDrag}
-          ref="nodeElement"
+          onStop={onDragStop}
-          class={[
-            'revue-flow__node',
-            `revue-flow__node-${props.node.type}`,
-            {
-              selected: selected.value,
-              selectable: isSelectable.value
-            }
-          ]}
-          style={{
-            zIndex: selected.value ? 10 : 3,
-            transform: `translate(${props.node.__rf.position.x}px,${props.node.__rf.position.y}px)`,
-            pointerEvents: isSelectable.value || isDraggable.value ? 'all' : 'none',
-            opacity: props.node.__rf.width !== null && props.node.__rf.height !== null ? 1 : 0,
-            ...props.node.style
-          }}
-          data-id={props.node.id}
-          onMouseenter={onMouseEnterHandler}
-          onMousemove={onMouseMoveHandler}
-          onMouseleave={onMouseLeaveHandler}
-          onContextmenu={onContextMenuHandler}
-          onClick={onSelectNodeHandler}
         >
-          {h(props.type, {
+          <div
-            data: props.node.data,
+            ref="nodeElement"
-            type: props.node.type,
+            class={[
-            xPos: props.node.__rf.position.x,
+              'revue-flow__node',
-            yPos: props.node.__rf.position.y,
+              `revue-flow__node-${props.node.type}`,
-            selected: selected.value,
+              {
-            isConnectable: isConnectable.value,
+                selected: selected.value,
-            sourcePosition: props.node.sourcePosition,
+                selectable: isSelectable.value
-            targetPosition: props.node.targetPosition,
+              }
-            isDragging: props.node.__rf.isDragging
+            ]}
-          })}
+            style={{
-        </div>
+              zIndex: selected.value ? 10 : 3,
-      </DraggableCore>
+              transform: `translate(${props.node.__rf.position.x}px,${props.node.__rf.position.y}px)`,
-    );
+              pointerEvents: isSelectable.value || isDraggable.value ? 'all' : 'none',
+              opacity: props.node.__rf.width !== null && props.node.__rf.height !== null ? 1 : 0,
+              ...props.node.style
+            }}
+            data-id={props.node.id}
+            onMouseenter={onMouseEnterHandler}
+            onMousemove={onMouseMoveHandler}
+            onMouseleave={onMouseLeaveHandler}
+            onContextmenu={onContextMenuHandler}
+            onClick={onSelectNodeHandler}
+          >
+            {h(props.type, {
+              data: props.node.data,
+              type: props.node.type,
+              xPos: props.node.__rf.position.x,
+              yPos: props.node.__rf.position.y,
+              selected: selected.value,
+              isConnectable: isConnectable.value,
+              sourcePosition: props.node.sourcePosition,
+              targetPosition: props.node.targetPosition,
+              isDragging: props.node.__rf.isDragging
+            })}
+          </div>
+        </DraggableCore>
+      );
   }
 });