fix(nodes/edges): handle hidden attribute closes #3387

examples/svelte/src/routes/overview/+page.svelte

@@ -9,7 +9,9 @@
 		Panel,
 		SelectionMode,
 		type NodeTypes,
-		type EdgeTypes
+		type EdgeTypes,
+		type Node,
+		type Edge
 	} from '@xyflow/svelte';
 
 	import CustomNode from './CustomNode.svelte';
@@ -25,7 +27,7 @@
 		custom: CustomEdge
 	};
 
-	const nodes = writable([
+	const nodes = writable<Node[]>([
 		{
 			id: '1',
 			type: 'input',
@@ -74,7 +76,7 @@
 		}
 	]);
 
-	const edges = writable([
+	const edges = writable<Edge[]>([
 		{
 			id: '1-2',
 			type: 'default',

packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte

@@ -4,7 +4,7 @@
 
   import { useStore } from '$lib/store';
   import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
-  import type { EdgeLayouted, EdgeProps } from '$lib/types';
+  import type { EdgeLayouted } from '$lib/types';
 
   type $$Props = EdgeLayouted;
 
@@ -18,6 +18,7 @@
   export let animated: $$Props['animated'] = false;
   export let selected: $$Props['selected'] = false;
   export let selectable: $$Props['selectable'] = true;
+  export let hidden: $$Props['hidden'] = false;
   export let label: $$Props['label'] = undefined;
   export let labelStyle: $$Props['labelStyle'] = undefined;
   export let markerStart: $$Props['markerStart'] = undefined;
@@ -52,7 +53,8 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-<g
+{#if !hidden}
+  <g
     class="svelte-flow__edge"
     class:animated
     class:selected
@@ -64,7 +66,7 @@
       ? ariaLabel
       : `Edge from ${source} to ${target}`}
     role="img"
->
+  >
     <svelte:component
       this={edgeComponent}
       {id}
@@ -87,4 +89,5 @@
       markerStart={markerStartUrl}
       markerEnd={markerEndUrl}
     />
-</g>
+  </g>
+{/if}

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -23,6 +23,7 @@
   export let draggable: NodeWrapperProps['draggable'] = undefined;
   export let selectable: NodeWrapperProps['selectable'] = undefined;
   export let connectable: NodeWrapperProps['connectable'] = true;
+  export let hidden: NodeWrapperProps['hidden'] = false;
   export let dragging: boolean = false;
   export let resizeObserver: NodeWrapperProps['resizeObserver'] = null;
   export let style: NodeWrapperProps['style'] = undefined;
@@ -79,6 +80,8 @@
       addSelectedNodes([id]);
     }
 
+    // @todo: support multiselection
+
     dispatchEvent('nodeclick');
   }
   // @todo: add selectable state
@@ -86,7 +89,8 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<div
+{#if !hidden}
+  <div
     use:drag={{
       nodeId: id,
       isSelectable: selectable,
@@ -111,7 +115,7 @@
     on:mouseenter={() => dispatchEvent('nodemouseenter')}
     on:mouseleave={() => dispatchEvent('nodemouseleave')}
     on:mousemove={() => dispatchEvent('nodemousemove')}
->
+  >
     <svelte:component
       this={nodeComponent}
       {data}
@@ -130,4 +134,5 @@
       on:connect
       on:connectend
     />
-</div>
+  </div>
+{/if}

packages/svelte/src/lib/components/NodeWrapper/types.ts

@@ -19,6 +19,7 @@ export type NodeWrapperProps = Pick<
   | 'sourcePosition'
   | 'targetPosition'
   | 'dragHandle'
+  | 'hidden'
 > & {
   positionOrigin?: XYPosition;
   'on:nodeclick'?: (event: MouseEvent) => void;

packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte

@@ -43,6 +43,7 @@
       id={node.id}
       data={node.data}
       selected={!!node.selected}
+      hidden={!!node.hidden}
       draggable={!!(node.draggable || ($nodesDraggable && typeof node.draggable === 'undefined'))}
       selectable={!!(
         node.selectable ||

packages/svelte/src/lib/types/edges.ts

@@ -68,6 +68,7 @@ export type EdgeLayouted = Pick<
   | 'sourceHandle'
   | 'targetHandle'
   | 'ariaLabel'
+  | 'hidden'
 > &
   EdgePosition & {
     sourceHandleId?: string | null;