feat: added Constant node

apps/electron-app/src/common/nodes.ts

@@ -20,11 +20,13 @@ import { Trigger } from '../render/components/react-flow/nodes/Trigger';
 import { Gate } from '../render/components/react-flow/nodes/Gate';
 import { Delay } from '../render/components/react-flow/nodes/Delay';
 import { Calculate } from '../render/components/react-flow/nodes/Calculate';
+import { Constant } from '../render/components/react-flow/nodes/Constant';
 
 export const NODE_TYPES: Record<string, (props: any) => JSX.Element> = {
 	Button: Button,
 	Calculate: Calculate,
 	Compare: Compare,
+	Constant: Constant,
 	Counter: Counter,
 	Delay: Delay,
 	Figma: Figma,

apps/electron-app/src/render/components/react-flow/nodes/Calculate.tsx

@@ -2,17 +2,37 @@ import { CalculateData } from '@microflow/components';
 import { BaseNode, NodeContainer, useNodeData, useNodeSettings } from './Node';
 import { Handle } from './Handle';
 import { Position } from '@xyflow/react';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { Icons } from '@ui/index';
 
 export function Calculate(props: Props) {
+	const [first, second] = useMemo(() => {
+		switch (props.data.function) {
+			case 'add':
+				return ['first addend', 'second addend'];
+			case 'subtract':
+				return ['minuend', 'subtrahend'];
+			case 'multiply':
+				return ['first factor', 'second factor'];
+			case 'divide':
+				return ['dividend', 'divisor'];
+			case 'modulo':
+				return ['dividend', 'divisor'];
+			case 'max':
+				return ['first operand', 'second operand'];
+			case 'min':
+				return ['first operand', 'second operand'];
+			default:
+				return ['first', 'second'];
+		}
+	}, [props.data.function]);
 	return (
 		<NodeContainer {...props}>
 			<Value />
 			<Settings />
 
-			<Handle type="target" position={Position.Left} id="1" offset={-0.5} />
-			<Handle type="target" position={Position.Left} id="2" offset={0.5} />
+			<Handle type="target" position={Position.Left} id="1" title={first} offset={-0.5} />
+			<Handle type="target" position={Position.Left} id="2" title={second} offset={0.5} />
 			<Handle type="source" position={Position.Right} id="change" />
 		</NodeContainer>
 	);

apps/electron-app/src/render/components/react-flow/nodes/Constant.tsx

@@ -0,0 +1,52 @@
+import { ConstantData } from '@microflow/components';
+import { BaseNode, NodeContainer, useNodeData, useNodeSettings } from './Node';
+import { useEffect } from 'react';
+import { Handle } from './Handle';
+import { Position } from '@xyflow/react';
+
+const numberFormat = new Intl.NumberFormat();
+
+export function Constant(props: Props) {
+	return (
+		<NodeContainer {...props}>
+			<Value />
+			<Settings />
+			<Handle type="source" position={Position.Right} id="output" />
+		</NodeContainer>
+	);
+}
+
+function Value() {
+	const data = useNodeData<ConstantData>();
+
+	return <section className="text-4xl tabular-nums">{numberFormat.format(data.value)}</section>;
+}
+
+function Settings() {
+	const { pane, settings } = useNodeSettings<ConstantData>();
+
+	useEffect(() => {
+		if (!pane) return;
+
+		const valueBinding = pane.addBinding(settings, 'value', {
+			index: 0,
+			type: 'number',
+		});
+
+		return () => {
+			valueBinding.dispose();
+		};
+	}, [pane]);
+
+	return null;
+}
+
+type Props = BaseNode<ConstantData>;
+Constant.defaultProps = {
+	data: {
+		value: 4,
+		group: 'flow',
+		tags: ['generator'],
+		label: 'Constant',
+	} satisfies Props['data'],
+};

packages/components/index.ts

@@ -2,6 +2,7 @@ export { Board } from 'johnny-five';
 export * from './src/components/Button';
 export * from './src/components/Calculate';
 export * from './src/components/Compare';
+export * from './src/components/Constant';
 export * from './src/components/Counter';
 export * from './src/components/Delay';
 export * from './src/components/Figma';

packages/components/src/components/Constant.ts

@@ -0,0 +1,13 @@
+import { BaseComponent, BaseComponentData } from './BaseComponent';
+
+export type ConstantValueType = number;
+
+export type ConstantData = {
+	value: number;
+};
+
+export class Constant extends BaseComponent<ConstantValueType> {
+	constructor(data: BaseComponentData & ConstantData) {
+		super(data, data.value);
+	}
+}