fix(react): re-measure nodes correctly

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

@@ -101,12 +101,12 @@ export function EdgeWrapper({
   );
 
   const markerStartUrl = useMemo(
-    () => (edge.markerStart ? `url(#${getMarkerId(edge.markerStart, rfId)})` : undefined),
+    () => (edge.markerStart ? `url('#${getMarkerId(edge.markerStart, rfId)}')` : undefined),
     [edge.markerStart, rfId]
   );
 
   const markerEndUrl = useMemo(
-    () => (edge.markerEnd ? `url(#${getMarkerId(edge.markerEnd, rfId)})` : undefined),
+    () => (edge.markerEnd ? `url('#${getMarkerId(edge.markerEnd, rfId)}')` : undefined),
     [edge.markerEnd, rfId]
   );
 

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

@@ -84,22 +84,28 @@ export function NodeWrapper({
   const computedWidth = node.computed?.width;
   const computedHeight = node.computed?.height;
   const initialized = (!!computedWidth && !!computedHeight) || (!!width && !!height);
+  const hasHandleBounds = !!node[internalsSymbol]?.handleBounds;
 
   const moveSelectedNodes = useMoveSelectedNodes();
 
+  useEffect(() => {
+    return () => {
+      if (nodeRef.current) {
+        resizeObserver?.unobserve(nodeRef.current);
+      }
+    };
+  }, []);
+
   useEffect(() => {
     if (nodeRef.current && !node.hidden) {
       const currNode = nodeRef.current;
 
-      if (!initialized) {
-        resizeObserver?.observe(currNode);
-      } else {
+      if (!initialized || !hasHandleBounds) {
         resizeObserver?.unobserve(currNode);
+        resizeObserver?.observe(currNode);
       }
-
-      return () => resizeObserver?.unobserve(currNode);
     }
-  }, [node.hidden, initialized]);
+  }, [node.hidden, initialized, hasHandleBounds]);
 
   useEffect(() => {
     // when the user programmatically changes the source or handle position, we re-initialize the node

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

@@ -9,7 +9,7 @@ import { infiniteExtent, type CoordinateExtent } from '@xyflow/system';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import type { Node, Edge, ReactFlowState, ReactFlowProps, FitViewOptions } from '../../types';
-import { initNodeOrigin } from '../../container/ReactFlow';
+import { defaultNodeOrigin } from '../../container/ReactFlow/init-values';
 
 // these fields exist in the global store and we need to keep them up to date
 const reactFlowFieldsToTrack = [
@@ -84,6 +84,19 @@ const selector = (s: ReactFlowState) => ({
   setDefaultNodesAndEdges: s.setDefaultNodesAndEdges,
 });
 
+const initPrevValues = {
+  // these are values that are also passed directly to other components
+  // than the StoreUpdater. We can reduce the number of setStore calls
+  // by setting the same values here as prev fields.
+  translateExtent: infiniteExtent,
+  nodeOrigin: defaultNodeOrigin,
+  minZoom: 0.5,
+  maxZoom: 2,
+  elementsSelectable: true,
+  noPanClassName: 'nopan',
+  rfId: '1',
+};
+
 export function StoreUpdater(props: StoreUpdaterProps) {
   const {
     setNodes,
@@ -99,23 +112,15 @@ export function StoreUpdater(props: StoreUpdaterProps) {
 
   useEffect(() => {
     setDefaultNodesAndEdges(props.defaultNodes, props.defaultEdges);
+
     return () => {
+      // when we reset the store we also need to reset the previous fields
+      previousFields.current = initPrevValues;
       reset();
     };
   }, []);
 
-  const previousFields = useRef<Partial<StoreUpdaterProps>>({
-    // these are values that are also passed directly to other components
-    // than the StoreUpdater. We can reduce the number of setStore calls
-    // by setting the same values here as prev fields.
-    translateExtent: infiniteExtent,
-    nodeOrigin: initNodeOrigin,
-    minZoom: 0.5,
-    maxZoom: 2,
-    elementsSelectable: true,
-    noPanClassName: 'nopan',
-    rfId: '1',
-  });
+  const previousFields = useRef<Partial<StoreUpdaterProps>>(initPrevValues);
 
   useEffect(
     () => {