chore: only use Left and Right handles (#45)

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

Hide file tree

Showing 17 changed files with 29 additions and 36 deletions.
diff --git a/FEEDBACK.md b/FEEDBACK.md
@@ -1,6 +1,6 @@
 ## Some thoughts
 
-- [ ] it feels a bit unhandy that the inputs are on the left side of the node and the outputs are a the bottom. This kind of forces the program to grow in a starcase shape downwards towards the right, which forces scrolling in two directions instead of just up-down or left-right. In biggish sketches it would be more usable to have a dataflow that travel in one axis only.
+- [x] it feels a bit unhandy that the inputs are on the left side of the node and the outputs are a the bottom. This kind of forces the program to grow in a starcase shape downwards towards the right, which forces scrolling in two directions instead of just up-down or left-right. In biggish sketches it would be more usable to have a dataflow that travel in one axis only.
 - [x] for some reason to delete a node I must select it and delete it twice
 - [x] difference between the `save` and the `save & close` button in the settings pannel not very clear, what is saved? you mean apply new settings to node? or save state in file? bit unclear? could the settings be applied just 'on change' in the dialog entry?
 - [x] when I was messing around with the codebase to add a new node type I saw the app fail silently... I thought that was a javascript feature that was not possible with typescript.

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>
 	);
 }