chore: only use Left and Right handles

allows for single-axis flows which are easier to comprehend
xiduzo · Dec 16, 2024 · 078b486 · 078b486
1 parent b1a0ec7
commit 078b486
Show file tree

Hide file tree

Showing 16 changed files with 28 additions and 35 deletions.
diff --git a/apps/electron-app/src/render/components/react-flow/nodes/Button.tsx b/apps/electron-app/src/render/components/react-flow/nodes/Button.tsx
@@ -14,10 +14,10 @@ export function Button(props: Props) {
 		<NodeContainer {...props}>
 			<Value />
 			<Settings />
-			<Handle type="source" position={Position.Right} id="active" offset={-1} />
-			<Handle type="source" position={Position.Right} id="hold" />
-			<Handle type="source" position={Position.Right} id="inactive" offset={1} />
-			<Handle type="source" position={Position.Bottom} id="change" />
+			<Handle type="source" position={Position.Right} id="active" offset={-1.5} />
+			<Handle type="source" position={Position.Right} id="hold" offset={-0.5} />
+			<Handle type="source" position={Position.Right} id="inactive" offset={0.5} />
+			<Handle type="source" position={Position.Right} id="change" offset={1.5} />
 		</NodeContainer>
 	);
 }

diff --git a/apps/electron-app/src/render/components/react-flow/nodes/Compare.tsx b/apps/electron-app/src/render/components/react-flow/nodes/Compare.tsx
@@ -18,9 +18,9 @@ export function Compare(props: Props) {
 			<Value />
 			<Settings />
 			<Handle type="target" position={Position.Left} id="check" />
-			<Handle type="source" position={Position.Right} id="true" offset={-0.5} />
-			<Handle type="source" position={Position.Right} id="false" offset={0.5} />
-			<Handle type="source" position={Position.Bottom} id="change" />
+			<Handle type="source" position={Position.Right} id="true" offset={-1} />
+			<Handle type="source" position={Position.Right} id="false" />
+			<Handle type="source" position={Position.Right} id="change" offset={1} />
 		</NodeContainer>
 	);
 }

diff --git a/apps/electron-app/src/render/components/react-flow/nodes/Counter.tsx b/apps/electron-app/src/render/components/react-flow/nodes/Counter.tsx
@@ -14,7 +14,7 @@ export function Counter(props: Props) {
 			<Handle offset={0.5} type="target" position={Position.Left} id="decrement" />
 			<Handle offset={-0.5} type="target" position={Position.Left} id="increment" />
 			<Handle type="target" position={Position.Left} id="set" offset={-1.5} />
-			<Handle type="source" position={Position.Bottom} id="change" />
+			<Handle type="source" position={Position.Right} id="change" />
 		</NodeContainer>
 	);
 }

diff --git a/apps/electron-app/src/render/components/react-flow/nodes/Figma.tsx b/apps/electron-app/src/render/components/react-flow/nodes/Figma.tsx
@@ -134,7 +134,7 @@ function FigmaHandles(props: { variable?: FigmaVariable }) {
 			{props.variable?.resolvedType === 'STRING' && (
 				<Handle type="target" position={Position.Left} id="set" />
 			)}
-			<Handle type="source" position={Position.Bottom} id="change" />
+			<Handle type="source" position={Position.Right} id="change" />
 		</>
 	);
 }

diff --git a/apps/electron-app/src/render/components/react-flow/nodes/Gate.tsx b/apps/electron-app/src/render/components/react-flow/nodes/Gate.tsx
@@ -28,9 +28,9 @@ export function Gate(props: Props) {
 					/>
 				);
 			})}
-			<Handle type="source" position={Position.Right} id="true" offset={-0.5} />
-			<Handle type="source" position={Position.Right} id="false" offset={0.5} />
-			<Handle type="source" position={Position.Bottom} id="change" />
+			<Handle type="source" position={Position.Right} id="true" offset={-1} />
+			<Handle type="source" position={Position.Right} id="false" />
+			<Handle type="source" position={Position.Right} id="change" offset={1} />
 		</NodeContainer>
 	);
 }

diff --git a/apps/electron-app/src/render/components/react-flow/nodes/Interval.tsx b/apps/electron-app/src/render/components/react-flow/nodes/Interval.tsx
@@ -14,7 +14,7 @@ export function Interval(props: Props) {
 			<Settings />
 			<Handle type="target" position={Position.Left} id="start" offset={-0.5} />
 			<Handle type="target" position={Position.Left} id="stop" offset={0.5} />
-			<Handle type="source" position={Position.Bottom} id="change" />
+			<Handle type="source" position={Position.Right} id="change" />
 		</NodeContainer>
 	);
 }

diff --git a/apps/electron-app/src/render/components/react-flow/nodes/Led.tsx b/apps/electron-app/src/render/components/react-flow/nodes/Led.tsx
@@ -32,7 +32,7 @@ export function Led(props: Props) {
 				isConnectable={isPmwPin}
 			/>
 			<Handle type="target" position={Position.Left} id="off" offset={1.5} />
-			<Handle type="source" position={Position.Bottom} id="change" />
+			<Handle type="source" position={Position.Right} id="change" />
 		</NodeContainer>
 	);
 }

diff --git a/apps/electron-app/src/render/components/react-flow/nodes/Motion.tsx b/apps/electron-app/src/render/components/react-flow/nodes/Motion.tsx
@@ -21,16 +21,10 @@ export function Motion(props: Props) {
 				position={Position.Right}
 				id="motionstart"
 				title="Motion started"
-				offset={-0.5}
+				offset={-1}
 			/>
-			<Handle
-				type="source"
-				position={Position.Right}
-				id="motionend"
-				title="Motion ended"
-				offset={0.5}
-			/>
-			<Handle type="source" position={Position.Bottom} id="change" />
+			<Handle type="source" position={Position.Right} id="motionend" title="Motion ended" />
+			<Handle type="source" position={Position.Right} id="change" offset={1} />
 		</NodeContainer>
 	);
 }

diff --git a/apps/electron-app/src/render/components/react-flow/nodes/Mqtt.tsx b/apps/electron-app/src/render/components/react-flow/nodes/Mqtt.tsx
@@ -15,13 +15,12 @@ export function Mqtt(props: Props) {
 			<Subscriber />
 			<Value />
 			<Settings />
-			{props.data.type === 'publish' && (
+			{props.data.direction === 'publish' && (
 				<Handle type="target" position={Position.Left} id="publish" />
 			)}
-			{props.data.type === 'subscribe' && (
+			{props.data.direction === 'subscribe' && (
 				<Handle type="source" position={Position.Right} id="subscribe" />
 			)}
-			<Handle type="source" position={Position.Bottom} id="change" />
 		</NodeContainer>
 	);
 }
@@ -32,7 +31,7 @@ function Subscriber() {
 	const { subscribe } = useMqtt();
 
 	useEffect(() => {
-		if (data.type !== 'subscribe') return;
+		if (data.direction !== 'subscribe') return;
 		if (!data.topic?.length) return;
 
 		const unsubFromTopic = subscribe(data.topic, (_topic, message) => {
@@ -52,7 +51,7 @@ function Subscriber() {
 		return () => {
 			unsubFromTopic?.then(unsub => unsub?.());
 		};
-	}, [id, data.topic, data.type, subscribe]);
+	}, [id, data.topic, data.direction, subscribe]);
 
 	return null;
 }

diff --git a/apps/electron-app/src/render/components/react-flow/nodes/Oscillator.tsx b/apps/electron-app/src/render/components/react-flow/nodes/Oscillator.tsx
@@ -13,7 +13,7 @@ export function Oscillator(props: Props) {
 			<Handle type="target" position={Position.Left} id="reset" offset={-1} />
 			<Handle type="target" position={Position.Left} id="start" />
 			<Handle type="target" position={Position.Left} id="stop" offset={1} />
-			<Handle type="source" position={Position.Bottom} id="change" />
+			<Handle type="source" position={Position.Right} id="change" />
 		</NodeContainer>
 	);
 }

diff --git a/apps/electron-app/src/render/components/react-flow/nodes/RGB.tsx b/apps/electron-app/src/render/components/react-flow/nodes/RGB.tsx
@@ -19,7 +19,7 @@ export function Rgb(props: Props) {
 			<Handle type="target" position={Position.Left} id="green" hint="0-255" offset={-0.5} />
 			<Handle type="target" position={Position.Left} id="blue" hint="0-255" offset={0.5} />
 			<Handle type="target" position={Position.Left} id="brightness" hint="0-100" offset={1.5} />
-			<Handle type="source" position={Position.Bottom} id="change" />
+			<Handle type="source" position={Position.Right} id="change" />
 		</NodeContainer>
 	);
 }

diff --git a/apps/electron-app/src/render/components/react-flow/nodes/Sensor.tsx b/apps/electron-app/src/render/components/react-flow/nodes/Sensor.tsx
@@ -14,7 +14,7 @@ function Sensor(props: Props) {
 		<NodeContainer {...props}>
 			<Value />
 			<Settings />
-			<Handle type="source" position={Position.Bottom} id="change" />
+			<Handle type="source" position={Position.Right} id="change" />
 		</NodeContainer>
 	);
 }

diff --git a/apps/electron-app/src/render/components/react-flow/nodes/Servo.tsx b/apps/electron-app/src/render/components/react-flow/nodes/Servo.tsx
@@ -34,7 +34,7 @@ export function Servo(props: Props) {
 					<Handle type="target" position={Position.Left} id="stop" offset={0.5} />
 				</>
 			)}
-			<Handle type="source" position={Position.Bottom} id="change" />
+			<Handle type="source" position={Position.Right} id="change" />
 		</NodeContainer>
 	);
 }

diff --git a/apps/electron-app/src/render/components/react-flow/nodes/Smooth.tsx b/apps/electron-app/src/render/components/react-flow/nodes/Smooth.tsx
@@ -10,7 +10,7 @@ export function Smooth(props: Props) {
 			<Value />
 			<Settings />
 			<Handle type="target" position={Position.Left} id="signal" offset={-0.5} />
-			<Handle type="source" position={Position.Bottom} id="change" />
+			<Handle type="source" position={Position.Right} id="change" />
 		</NodeContainer>
 	);
 }

diff --git a/apps/electron-app/src/render/components/react-flow/nodes/matrix/Matrix.tsx b/apps/electron-app/src/render/components/react-flow/nodes/matrix/Matrix.tsx
@@ -37,7 +37,7 @@ export function Matrix(props: Props) {
 				offset={-0.5}
 			/>
 			<Handle type="target" position={Position.Left} id="hide" offset={0.5} />
-			<Handle type="source" position={Position.Bottom} id="change" />
+			<Handle type="source" position={Position.Right} id="change" />
 		</NodeContainer>
 	);
 }

diff --git a/apps/nextjs-app/app/docs/contributing/nodes/page.md b/apps/nextjs-app/app/docs/contributing/nodes/page.md
@@ -49,7 +49,7 @@ export function MyNode(props: Props) {
 			<Value />
 			<Settings />
 			<Handle type="target" position={Position.Left} id="input" />
-			<Handle type="source" position={Position.Bottom} id="change" />
+			<Handle type="source" position={Position.Right} id="output" />
 		</NodeContainer>
 	);
 }