Merge branch 'next' into feat/multiple-on-selection-change

packages/react/src/components/Edges/wrapEdge.tsx

@@ -213,6 +213,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
         onKeyDown={isFocusable ? onKeyDown : undefined}
         tabIndex={isFocusable ? 0 : undefined}
         role={isFocusable ? 'button' : 'img'}
+        data-id={id}
         data-testid={`rf__edge-${id}`}
         aria-label={ariaLabel === null ? undefined : ariaLabel ? ariaLabel : `Edge from ${source} to ${target}`}
         aria-describedby={isFocusable ? `${ARIA_EDGE_DESC_KEY}-${rfId}` : undefined}

packages/react/src/components/SelectionListener/index.tsx

@@ -32,8 +32,9 @@ const SelectionListener = memo(({ onSelectionChange }: SelectionListenerProps) =
 
   useEffect(() => {
     const params = { nodes: selectedNodes, edges: selectedEdges };
+
     onSelectionChange?.(params);
-    store.getState().onSelectionChange.forEach((fn) => fn(params));
+    store.getState().onSelectionChangeHandlers.forEach((fn) => fn(params));
   }, [selectedNodes, selectedEdges, onSelectionChange]);
 
   return null;
@@ -41,12 +42,12 @@ const SelectionListener = memo(({ onSelectionChange }: SelectionListenerProps) =
 
 SelectionListener.displayName = 'SelectionListener';
 
-const changeSelector = (s: ReactFlowState) => !!s.onSelectionChange;
+const changeSelector = (s: ReactFlowState) => !!s.onSelectionChangeHandlers;
 
 function Wrapper({ onSelectionChange }: SelectionListenerProps) {
-  const storeHasSelectionChange = useStore(changeSelector);
+  const storeHasSelectionChangeHandlers = useStore(changeSelector);
 
-  if (onSelectionChange || storeHasSelectionChange) {
+  if (onSelectionChange || storeHasSelectionChangeHandlers) {
     return <SelectionListener onSelectionChange={onSelectionChange} />;
   }
 

packages/react/src/hooks/useOnSelectionChange.ts

@@ -11,11 +11,12 @@ function useOnSelectionChange({ onChange }: UseOnSelectionChangeOptions) {
   const store = useStoreApi();
 
   useEffect(() => {
-    const addedOnSelectionChange = [...store.getState().onSelectionChange, onChange];
-    store.setState({ onSelectionChange: addedOnSelectionChange });
+    const nextOnSelectionChangeHandlers = [...store.getState().onSelectionChangeHandlers, onChange];
+    store.setState({ onSelectionChangeHandlers: nextOnSelectionChangeHandlers });
+
     return () => {
-      const removedOnSelectionChange = store.getState().onSelectionChange.filter((fn) => fn !== onChange);
-      store.setState({ onSelectionChange: removedOnSelectionChange });
+      const nextHandlers = store.getState().onSelectionChangeHandlers.filter((fn) => fn !== onChange);
+      store.setState({ onSelectionChangeHandlers: nextHandlers });
     };
   }, [onChange]);
 }

packages/react/src/store/initialState.ts

@@ -92,7 +92,7 @@ const getInitialState = ({
     connectionRadius: 20,
     onError: () => null,
     isValidConnection: undefined,
-    onSelectionChange: [],
+    onSelectionChangeHandlers: [],
 
     lib: 'react',
   };

packages/react/src/types/store.ts

@@ -123,8 +123,8 @@ export type ReactFlowStore = {
   onViewportChangeStart?: OnViewportChange;
   onViewportChange?: OnViewportChange;
   onViewportChangeEnd?: OnViewportChange;
-  
-  onSelectionChange: OnSelectionChangeFunc[];
+
+  onSelectionChangeHandlers: OnSelectionChangeFunc[];
 
   ariaLiveMessage: string;
   autoPanOnConnect: boolean;

packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte

@@ -24,7 +24,6 @@
 
 <path
   d={path}
-  {id}
   class={cc(['svelte-flow__edge-path', className])}
   marker-start={markerStart}
   marker-end={markerEnd}

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

@@ -1,13 +1,7 @@
 <svelte:options immutable />
 
 <script lang="ts">
-  import {
-    createEventDispatcher,
-    onMount,
-    setContext,
-    SvelteComponent,
-    type ComponentType
-  } from 'svelte';
+  import { createEventDispatcher, setContext, SvelteComponent, type ComponentType } from 'svelte';
   import { get, writable } from 'svelte/store';
   import cc from 'classcat';
   import { errorMessages, Position, type NodeProps } from '@xyflow/system';
@@ -54,6 +48,8 @@
   const nodeType = type || 'default';
 
   let nodeRef: HTMLDivElement;
+  let prevNodeRef: HTMLDivElement;
+
   const nodeTypeValid = !!$nodeTypes[nodeType];
 
   if (!nodeTypeValid) {
@@ -109,13 +105,15 @@
   setContext('svelteflow__node_id', id);
   setContext('svelteflow__node_connectable', connectableStore);
 
-  onMount(() => {
-    resizeObserver?.observe(nodeRef);
-
-    return () => {
-      resizeObserver?.unobserve(nodeRef);
-    };
-  });
+  $: {
+    // hiding the noder removes html element is removed from the dom
+    if (nodeRef) {
+      resizeObserver?.observe(nodeRef);
+      prevNodeRef = nodeRef;
+    } else if (prevNodeRef) {
+      resizeObserver?.unobserve(prevNodeRef);
+    }
+  }
 
   function onSelectNodeHandler(event: MouseEvent | TouchEvent) {
     if (selectable && (!get(selectNodesOnDrag) || !draggable || get(nodeDragThreshold) > 0)) {