fixed some more stuff

examples/svelte/src/routes/examples/drag-n-drop/Flow.svelte

@@ -13,7 +13,7 @@
 
 	import '@xyflow/svelte/dist/style.css';
 
-	const nodes = writable([
+	const nodes = writable<Node[]>([
 		{
 			id: '1',
 			type: 'input',
@@ -63,6 +63,7 @@
 	};
 
 	const onDrop = (event: DragEvent) => {
+		console.log(event);
 		event.preventDefault();
 
 		if (!event.dataTransfer) {
@@ -81,7 +82,8 @@
 			data: { label: `${type} node` }
 		};
 
-		nodes.update((nds) => nds.concat(newNode));
+		$nodes.push(newNode);
+		$nodes = $nodes;
 	};
 
 	$: {

examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte

@@ -11,6 +11,7 @@
 	type $$Props = NodeProps;
 
 	export let id: $$Props['id'];
+	$$restProps;
 
 	const connections = useHandleConnections({
 		nodeId: id,

examples/svelte/src/routes/examples/usenodesdata/TextNode.svelte

@@ -7,6 +7,7 @@
 	export let data: $$Props['data'];
 
 	const { updateNodeData } = useSvelteFlow();
+	$$restProps;
 </script>
 
 <div class="custom">

examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte

@@ -12,6 +12,8 @@
 	type $$Props = NodeProps;
 
 	export let id: $$Props['id'];
+	export let data: $$Props['data'];
+	$$restProps;
 
 	const { updateNodeData } = useSvelteFlow();
 	const connections = useHandleConnections({
@@ -22,8 +24,12 @@
 	$: nodeData = useNodesData<MyNode>($connections[0]?.source);
 	$: textNode = isTextNode($nodeData) ? $nodeData : null;
 
+	$: console.log(textNode?.data, data);
+
 	$: {
-		updateNodeData(id, { text: textNode?.data.text.toUpperCase() || '' });
+		const input = textNode?.data.text.toUpperCase() ?? '';
+		updateNodeData(id, { text: input });
+		console.log('updatedNodeData with', input);
 	}
 </script>
 

packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte

@@ -20,8 +20,6 @@
   $: selectedNodes = $nodes.filter((n) => n.selected);
   $: bounds = getNodesBounds(selectedNodes);
 
-  $: console.log($nodes);
-
   function onContextMenu(event: MouseEvent | TouchEvent) {
     dispatch('selectioncontextmenu', { nodes: selectedNodes, event });
   }

packages/svelte/src/lib/hooks/useNodesData.ts

@@ -29,7 +29,7 @@ export function useNodesData(nodeIds: any): any {
     const _nodeIds = isArrayOfIds ? nodeIds : [nodeIds];
 
     for (const nodeId of _nodeIds) {
-      const node = nodeLookup.get(nodeId);
+      const node = nodeLookup.get(nodeId)?.internals.userNode;
       if (node) {
         nextNodesData.push({
           id: node.id,

packages/svelte/src/lib/hooks/useSvelteFlow.ts

@@ -256,17 +256,28 @@ export function useSvelteFlow(): {
     nodeUpdate: Partial<Node> | ((node: Node) => Partial<Node>),
     options: { replace: boolean } = { replace: false }
   ) => {
-    nodes.update((nds) =>
+    const node = get(nodeLookup).get(id)?.internals.userNode;
-      nds.map((node) => {
-        if (node.id === id) {
-          const nextNode = typeof nodeUpdate === 'function' ? nodeUpdate(node as Node) : nodeUpdate;
 
-          return options.replace && isNode(nextNode) ? nextNode : { ...node, ...nextNode };
+    if (!node) {
-        }
+      return;
+    }
 
-        return node;
+    const nextNode = typeof nodeUpdate === 'function' ? nodeUpdate(node as Node) : nodeUpdate;
-      })
+
-    );
+    if (options.replace) {
+      nodes.update((nds) =>
+        nds.map((node) => {
+          if (node.id === id) {
+            return isNode(nextNode) ? nextNode : { ...node, ...nextNode };
+          }
+
+          return node;
+        })
+      );
+    } else {
+      Object.assign(node, nextNode);
+      nodes.update((nds) => nds);
+    }
   };
 
   return {
@@ -448,13 +459,21 @@ export function useSvelteFlow(): {
     },
     updateNode,
     updateNodeData: (id, dataUpdate, options) => {
-      updateNode(id, (node) => {
+      const node = get(nodeLookup).get(id)?.internals.userNode;
-        const nextData = typeof dataUpdate === 'function' ? dataUpdate(node) : dataUpdate;
 
-        return options?.replace
+      if (!node) {
-          ? { ...node, data: nextData }
+        return;
-          : { ...node, data: { ...node.data, ...nextData } };
+      }
-      });
+
+      const nextData = typeof dataUpdate === 'function' ? dataUpdate(node) : dataUpdate;
+
+      if (options?.replace) {
+        node.data = nextData;
+      } else {
+        node.data = { ...node.data, ...nextData };
+      }
+
+      nodes.update((nds) => nds);
     },
     viewport
   };

packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte

@@ -69,7 +69,7 @@
           };
         },
         onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => {
-          const node = $nodeLookup.get(id);
+          const node = $nodeLookup.get(id)?.internals.userNode;
           if (node) {
             node.height = change.isHeightChange ? change.height : node.height;
             node.width = change.isWidthChange ? change.width : node.width;
@@ -79,7 +79,7 @@
                 : node.position;
 
             for (const childChange of childChanges) {
-              const childNode = $nodeLookup.get(childChange.id);
+              const childNode = $nodeLookup.get(childChange.id)?.internals.userNode;
               if (childNode) {
                 childNode.position = childChange.position;
               }

packages/svelte/src/lib/store/index.ts

@@ -65,20 +65,17 @@ export function createStore({
     const nodeLookup = get(store.nodeLookup);
 
     for (const nodeDragItem of nodeDragItems) {
-      const node = nodeLookup.get(nodeDragItem.id);
+      const node = nodeLookup.get(nodeDragItem.id)?.internals.userNode;
 
       if (!node) {
         continue;
       }
 
-      const userNode = node.internals.userNode;
+      node.position = nodeDragItem.position;
-      userNode.position = nodeDragItem.position;
+      node.dragging = dragging;
-      userNode.dragging = dragging;
-      // node.internals.positionAbsolute = nodeDragItem.internals.positionAbsolute;
     }
 
     store.nodes.set(get(store.nodes));
-    //$nodes = $nodes
   };
 
   function updateNodeDimensions(updates: Map<string, NodeDimensionUpdate>) {
@@ -111,11 +108,13 @@ export function createStore({
       }
 
       switch (nodeUpdate.type) {
-        case 'dimensions':
+        case 'dimensions': {
+          const measured = { ...node.measured, ...nodeUpdate.dimensions };
           node.width = nodeUpdate.dimensions?.width ?? node.width;
           node.height = nodeUpdate.dimensions?.height ?? node.height;
-          // TODO: do we need measured here?
+          node.measured = measured;
           break;
+        }
         case 'position':
           node.position = nodeUpdate.position ?? node.position;
           break;