Merge branch 'next' into fix-svelte-reset

examples/react/src/examples/NodeResizer/index.tsx

@@ -50,7 +50,9 @@ const initialNodes: Node[] = [
       maxHeight: 200,
     },
     position: { x: 0, y: 60 },
-    style: { ...nodeStyle, width: 100, height: 80 },
+    width: 100,
+    height: 80,
+    style: { ...nodeStyle },
   },
   {
     id: '1b',
@@ -64,9 +66,9 @@ const initialNodes: Node[] = [
       maxHeight: 400,
     },
     position: { x: 250, y: 0 },
+    width: 174,
+    height: 123,
     style: {
-      width: 174,
-      height: 123,
       ...nodeStyle,
     },
   },
@@ -75,7 +77,9 @@ const initialNodes: Node[] = [
     type: 'customResizer',
     data: { label: 'custom resize icon' },
     position: { x: 0, y: 200 },
-    style: { width: 100, height: 60, ...nodeStyle },
+    width: 100,
+    height: 60,
+    style: { ...nodeStyle },
   },
   {
     id: '3',
@@ -94,7 +98,8 @@ const initialNodes: Node[] = [
       keepAspectRatio: true,
     },
     position: { x: 400, y: 200 },
-    style: { ...nodeStyle, height: 50 },
+    height: 50,
+    style: { ...nodeStyle },
   },
   {
     id: '4',
@@ -121,7 +126,9 @@ const initialNodes: Node[] = [
     type: 'defaultResizer',
     data: { label: 'Parent', keepAspectRatio: true },
     position: { x: 700, y: 0 },
-    style: { ...nodeStyle, width: 300, height: 400 },
+    width: 300,
+    height: 400,
+    style: { ...nodeStyle },
   },
   {
     id: '5a',
@@ -132,7 +139,9 @@ const initialNodes: Node[] = [
     position: { x: 50, y: 50 },
     parentNode: '5',
     extent: 'parent',
-    style: { ...nodeStyle, width: 50, height: 100 },
+    width: 50,
+    height: 100,
+    style: { ...nodeStyle },
   },
   {
     id: '5b',

examples/react/src/examples/TouchDevice/index.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { ReactFlow, Node, Edge, useNodesState, useEdgesState, Position, Connection, addEdge } from '@xyflow/react';
 
-import styles from './touch-device.module.css';
+import './touch-device.css';
 
 const initialNodes: Node[] = [
   {
@@ -42,7 +42,7 @@ const TouchDeviceFlow = () => {
       onConnectEnd={onConnectEnd}
       onClickConnectStart={onClickConnectStart}
       onClickConnectEnd={onClickConnectEnd}
-      className={styles.flow}
+      className="touch-flow"
     />
   );
 };

examples/react/src/examples/TouchDevice/touch-device.css

@@ -0,0 +1,27 @@
+.react-flow.touch-flow .react-flow__handle {
+  width: 20px;
+  height: 20px;
+  border-radius: 3px;
+  background-color: #9f7aea;
+}
+
+.touch-flow .react-flow__handle-right {
+  --translate: translate(50%, -50%);
+}
+
+.touch-flow .react-flow__handle-left {
+  --translate: translate(-50%, -50%);
+}
+
+@keyframes bounce {
+  0% {
+    transform: var(--translate) scale(1);
+  }
+  50% {
+    transform: var(--translate) scale(1.1);
+  }
+}
+
+.react-flow.touch-flow .react-flow__handle.clickconnecting {
+  animation: bounce 1600ms infinite ease-in;
+}

examples/react/src/examples/TouchDevice/touch-device.module.css

@@ -1,19 +0,0 @@
-.flow :global .react-flow__handle {
-  width: 20px;
-  height: 20px;
-  border-radius: 3px;
-  background-color: #9f7aea;
-}
-
-.flow :global .react-flow__handle.connecting {
-  animation: bounce 1600ms infinite ease-out;
-}
-
-@keyframes bounce {
-  0% {
-    transform: translate(0, -50%) scale(1);
-  }
-  50% {
-    transform: translate(0, -50%) scale(1.1);
-  }
-}

examples/react/src/examples/Validation/validation.module.css

@@ -24,10 +24,14 @@
   background: #fff;
 }
 
-.validationflow :global .connecting {
+.validationflow :global .connectingto {
   background: #ff6060;
 }
 
+.validationflow :global .react-flow__node-custominput .connectingfrom {
+  background: #55dd99;
+}
+
 .validationflow :global .valid {
   background: #55dd99;
 }

examples/svelte/src/routes/examples/node-resizer/+page.svelte

@@ -111,9 +111,10 @@
 		{
 			id: '5a',
 			type: 'defaultResizer',
-			data: { label: 'Child' },
+			data: { label: 'Child with extent parent' },
 			position: { x: 50, y: 50 },
 			parentNode: '5',
+			extent: 'parent',
 			style: nodeStyle
 		},
 		{
@@ -137,6 +138,7 @@
 	maxZoom={5}
 	snapGrid={snapToGrid ? [10, 10] : undefined}
 	fitView
+	nodeOrigin={[0.5, 0.5]}
 >
 	<Controls />
 	<Panel position="bottom-right">

examples/svelte/src/routes/examples/validation/style.css

@@ -1,7 +1,11 @@
-.svelte-flow__handle.connecting {
+.svelte-flow__handle.connectingto {
 	background: #ff6060;
 }
 
+.svelte-flow__handle.connectingfrom {
+	background: #55dd99;
+}
+
 .svelte-flow__handle.valid {
 	background: #55dd99;
 }