Merge branch 'next' into fix-svelte-reset

packages/svelte/CHANGELOG.md

@@ -5,12 +5,14 @@
 ## ⚠️ Breaking changes
 
 - `useNodesData` not only returns data objects but also the type and the id of the node
+- status class names for Handle components are slightly different. It's now "connectingfrom" and "connectingto" instead of "connecting"
 
 ## Patch changes
 
 - better cursor defaults for the pane, nodes and edges
 - add `initialWidth` and `initialHeight` node attributes for specifying initial dimensions for ssr
 - always re-measure nodes when new nodes get passed
+- fix `NodeResizer` when used in combination with `nodeOrigin`
 
 ## 0.0.36
 

packages/svelte/src/lib/components/Handle/Handle.svelte

@@ -56,7 +56,8 @@
     onconnect: onConnectAction,
     onconnectstart: onConnectStartAction,
     onconnectend: onConnectEndAction,
-    flowId
+    flowId,
+    connection
   } = store;
 
   function onPointerDown(event: MouseEvent | TouchEvent) {
@@ -123,6 +124,16 @@
     prevConnections = connections ?? new Map();
   }
 
+  $: connectingFrom =
+    $connection.startHandle?.nodeId === nodeId &&
+    $connection.startHandle?.type === type &&
+    $connection.startHandle?.handleId === handleId;
+  $: connectingTo =
+    $connection.endHandle?.nodeId === nodeId &&
+    $connection.endHandle?.type === type &&
+    $connection.endHandle?.handleId === handleId;
+  $: valid = connectingTo && $connection.status === 'valid';
+
   // @todo implement connectablestart, connectableend
 </script>
 
@@ -141,6 +152,11 @@ The Handle component is the part of a node that can be used to connect nodes.
     'nodrag',
     'nopan',
     position,
+    {
+      valid,
+      connectingto: connectingTo,
+      connectingfrom: connectingFrom
+    },
     className
   ])}
   class:source={!isTarget}

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

@@ -197,7 +197,7 @@
     style:z-index={zIndex}
     style:transform="translate({positionOriginX}px, {positionOriginY}px)"
     style:visibility={initialized ? 'visible' : 'hidden'}
-    style="{inlineStyleDimensions.width} {inlineStyleDimensions.height} {style ?? ''};"
+    style="{style ?? ''};{inlineStyleDimensions.width}{inlineStyleDimensions.height}"
     on:click={onSelectNodeHandler}
     on:mouseenter={(event) => dispatch('nodemouseenter', { node, event })}
     on:mouseleave={(event) => dispatch('nodemouseleave', { node, event })}

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

@@ -35,7 +35,7 @@
   let className: $$Props['class'] = '';
   export { className as class };
 
-  const { nodeLookup, snapGrid, viewport, nodes } = useStore();
+  const { nodeLookup, snapGrid, viewport, nodes, nodeOrigin } = useStore();
 
   const contextNodeId = getContext<string>('svelteflow__node_id');
   $: id = typeof nodeId === 'string' ? nodeId : contextNodeId;
@@ -64,7 +64,8 @@
             nodeLookup: $nodeLookup,
             transform: [$viewport.x, $viewport.y, $viewport.zoom],
             snapGrid: $snapGrid ?? undefined,
-            snapToGrid: !!$snapGrid
+            snapToGrid: !!$snapGrid,
+            nodeOrigin: $nodeOrigin
           };
         },
         onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => {