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,39 +53,41 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-<g
-  class="svelte-flow__edge"
-  class:animated
-  class:selected
-  data-id={id}
-  on:click={onClick}
-  aria-label={ariaLabel === null
-    ? undefined
-    : ariaLabel
-    ? ariaLabel
-    : `Edge from ${source} to ${target}`}
-  role="img"
->
-  <svelte:component
-    this={edgeComponent}
-    {id}
-    {source}
-    {target}
-    {sourceX}
-    {sourceY}
-    {targetX}
-    {targetY}
-    {sourcePosition}
-    {targetPosition}
-    {animated}
-    {selected}
-    {label}
-    {labelStyle}
-    {data}
-    {style}
-    sourceHandleId={sourceHandle}
-    targetHandleId={targetHandle}
-    markerStart={markerStartUrl}
-    markerEnd={markerEndUrl}
-  />
-</g>
+{#if !hidden}
+  <g
+    class="svelte-flow__edge"
+    class:animated
+    class:selected
+    data-id={id}
+    on:click={onClick}
+    aria-label={ariaLabel === null
+      ? undefined
+      : ariaLabel
+      ? ariaLabel
+      : `Edge from ${source} to ${target}`}
+    role="img"
+  >
+    <svelte:component
+      this={edgeComponent}
+      {id}
+      {source}
+      {target}
+      {sourceX}
+      {sourceY}
+      {targetX}
+      {targetY}
+      {sourcePosition}
+      {targetPosition}
+      {animated}
+      {selected}
+      {label}
+      {labelStyle}
+      {data}
+      {style}
+      sourceHandleId={sourceHandle}
+      targetHandleId={targetHandle}
+      markerStart={markerStartUrl}
+      markerEnd={markerEndUrl}
+    />
+  </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,48 +89,50 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<div
-  use:drag={{
-    nodeId: id,
-    isSelectable: selectable,
-    disabled: false,
-    handleSelector: undefined,
-    noDragClassName: 'nodrag',
-    store
-  }}
-  bind:this={nodeRef}
-  data-id={id}
-  class={cc(['svelte-flow__node', `svelte-flow__node-${type || 'default'}`, className])}
-  class:dragging
-  class:selected
-  class:draggable
-  class:connectable
-  class:selectable
-  class:parent={isParent}
-  style:z-index={zIndex}
-  style:transform="translate({positionOrigin?.x ?? 0}px, {positionOrigin?.y ?? 0}px)"
-  {style}
-  on:click={onSelectNodeHandler}
-  on:mouseenter={() => dispatchEvent('nodemouseenter')}
-  on:mouseleave={() => dispatchEvent('nodemouseleave')}
-  on:mousemove={() => dispatchEvent('nodemousemove')}
->
-  <svelte:component
-    this={nodeComponent}
-    {data}
-    {id}
-    {selected}
-    {sourcePosition}
-    {targetPosition}
-    {type}
-    {zIndex}
-    {dragging}
-    {dragHandle}
-    isConnectable={connectable}
-    xPos={positionAbsolute?.x ?? 0}
-    yPos={positionAbsolute?.y ?? 0}
-    on:connectstart
-    on:connect
-    on:connectend
-  />
-</div>
+{#if !hidden}
+  <div
+    use:drag={{
+      nodeId: id,
+      isSelectable: selectable,
+      disabled: false,
+      handleSelector: undefined,
+      noDragClassName: 'nodrag',
+      store
+    }}
+    bind:this={nodeRef}
+    data-id={id}
+    class={cc(['svelte-flow__node', `svelte-flow__node-${type || 'default'}`, className])}
+    class:dragging
+    class:selected
+    class:draggable
+    class:connectable
+    class:selectable
+    class:parent={isParent}
+    style:z-index={zIndex}
+    style:transform="translate({positionOrigin?.x ?? 0}px, {positionOrigin?.y ?? 0}px)"
+    {style}
+    on:click={onSelectNodeHandler}
+    on:mouseenter={() => dispatchEvent('nodemouseenter')}
+    on:mouseleave={() => dispatchEvent('nodemouseleave')}
+    on:mousemove={() => dispatchEvent('nodemousemove')}
+  >
+    <svelte:component
+      this={nodeComponent}
+      {data}
+      {id}
+      {selected}
+      {sourcePosition}
+      {targetPosition}
+      {type}
+      {zIndex}
+      {dragging}
+      {dragHandle}
+      isConnectable={connectable}
+      xPos={positionAbsolute?.x ?? 0}
+      yPos={positionAbsolute?.y ?? 0}
+      on:connectstart
+      on:connect
+      on:connectend
+    />
+  </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;