Skip to content

Commit

Permalink
feat: added Constant node
Browse files Browse the repository at this point in the history
  • Loading branch information
xiduzo committed Dec 28, 2024
1 parent 5b4071a commit 662c228
Show file tree
Hide file tree
Showing 5 changed files with 91 additions and 3 deletions.
2 changes: 2 additions & 0 deletions apps/electron-app/src/common/nodes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -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'],
};
1 change: 1 addition & 0 deletions packages/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
13 changes: 13 additions & 0 deletions packages/components/src/components/Constant.ts
Original file line number Diff line number Diff line change
@@ -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);
}
}

0 comments on commit 662c228

Please sign in to comment.