refactor(Debug): renamed to Monitor

removed string output as it is the same as the raw output

FEEDBACK.md

@@ -7,11 +7,12 @@
 
 ## Nodes
 - [x] If..Else is strangely named because technically you cannot do an Else with it, only an If. :) Maybe this node could be called **Compare**?
-- [ ] Would be awesome if Debug could "autorange"  :) and maybe instead of **Debug** it could be called **Plot** or **Graph**?
+- [ ] Would be awesome if Debug could "autorange"  :)
+    - [x] and maybe instead of **Debug** it could be called **Plot** or **Graph**?
 
 Nodes that would be nice to have:
-- [ ] **Trigger** node, that outputs a 1 when a specific threshold is reached, with configurable options to *trigger on* `increasing values` or `decreasing values`
-- [ ] **Smooth** node that makes an analog input less noisy
+- [x] **Trigger** node, that outputs a 1 when a specific threshold is reached, with configurable options to *trigger on* `increasing values` or `decreasing values`
+- [x] **Smooth** node that makes an analog input less noisy
 - [ ] **Math** node that can take two inputs and perform an operation on them `add`, `substract`, `multiply`, `divide`, `modulo`
 - [ ] **Constant** node that takes a value and never changes (for example if you want to divide all incoming signals by 2, you create a node with a constant = 2 and a math node)
 - [ ] **Delay** node, gives output only after `xyz` milliseconds after receiving input

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

@@ -14,7 +14,7 @@ import { DEFAULT_MATRIX_DATA, Matrix } from '../render/components/react-flow/nod
 import { DEFAULT_MOTION_DATA, Motion } from '../render/components/react-flow/nodes/Motion';
 import { DEFAULT_MQTT_DATA, Mqtt } from '../render/components/react-flow/nodes/Mqtt';
 import { DEFAULT_NOTE_DATA, Note } from '../render/components/react-flow/nodes/Note';
-import { DEFAULT_DEBUG_DATA, Debug } from '../render/components/react-flow/nodes/Debug';
+import { DEFAULT_MONITOR_DATA, Monitor } from '../render/components/react-flow/nodes/Monitor';
 import { DEFAULT_PIEZO_DATA, Piezo } from '../render/components/react-flow/nodes/piezo/Piezo';
 import { DEFAULT_RANGE_MAP_DATA, RangeMap } from '../render/components/react-flow/nodes/RangeMap';
 import { DEFAULT_SENSOR_DATA, Sensor } from '../render/components/react-flow/nodes/Sensor';
@@ -26,7 +26,7 @@ export const NODE_TYPES = {
 	And: And,
 	Button: Button,
 	Counter: Counter,
-	Debug: Debug,
+	Monitor: Monitor,
 	Figma: Figma,
 	Compare: Compare,
 	Interval: Interval,
@@ -52,7 +52,7 @@ export const DEFAULT_NODE_DATA = new Map<NodeType | string, Record<string, any>>
 DEFAULT_NODE_DATA.set('And', DEFAULT_AND_DATA);
 DEFAULT_NODE_DATA.set('Button', DEFAULT_BUTTON_DATA);
 DEFAULT_NODE_DATA.set('Counter', DEFAULT_COUNTER_DATA);
-DEFAULT_NODE_DATA.set('Debug', DEFAULT_DEBUG_DATA);
+DEFAULT_NODE_DATA.set('Monitor', DEFAULT_MONITOR_DATA);
 DEFAULT_NODE_DATA.set('Figma', DEFAULT_FIGMA_DATA);
 DEFAULT_NODE_DATA.set('Compare', DEFAULT_COMPARE_DATA);
 DEFAULT_NODE_DATA.set('Interval', DEFAULT_INTERVAL_DATA);

apps/electron-app/src/render/components/react-flow/nodes/Debug.tsx → apps/electron-app/src/render/components/react-flow/nodes/Monitor.tsx

@@ -1,13 +1,13 @@
 import { Position } from '@xyflow/react';
 import { Handle } from './Handle';
 import { BaseNode, NodeContainer, useNode, useNodeSettingsPane } from './Node';
-import type { DebugValueType, DebugData } from '@microflow/components';
+import type { DebugValueType, MonitorData } from '@microflow/components';
 import { useNodeValue } from '../../../stores/node-data';
 import { useEffect, useMemo, useRef } from 'react';
 import { Pane } from '@ui/index';
 import { BindingApi } from '@tweakpane/core';
 
-export function Debug(props: Props) {
+export function Monitor(props: Props) {
 	return (
 		<NodeContainer {...props}>
 			<Value />
@@ -18,18 +18,16 @@ export function Debug(props: Props) {
 }
 
 function Value() {
-	const { id, data } = useNode<DebugData>();
+	const { id, data } = useNode<MonitorData>();
 	const value = useNodeValue<DebugValueType>(id, 0);
 
 	const container = useRef<HTMLDivElement>(null);
 	const display = useRef({ value });
 
 	const bindingConfig = useMemo(() => {
 		switch (data.type) {
-			case 'object':
+			case 'raw':
 				return { rows: data.rows, multiline: true };
-			case 'string':
-				return { bufferSize: data.bufferSize };
 			case 'graph':
 			default:
 				return { ...data.range, view: 'graph' };
@@ -44,12 +42,9 @@ function Value() {
 
 	useEffect(() => {
 		switch (data.type) {
-			case 'object':
+			case 'raw':
 				display.current.value = JSON.stringify(value, null, 2);
 				break;
-			case 'string':
-				display.current.value = String(value);
-				break;
 			case 'graph':
 			default:
 				display.current.value = Number(value);
@@ -83,7 +78,7 @@ function Value() {
 }
 
 function Settings() {
-	const { pane, settings } = useNodeSettingsPane<DebugData>();
+	const { pane, settings } = useNodeSettingsPane<MonitorData>();
 
 	useEffect(() => {
 		if (!pane) return;
@@ -95,16 +90,7 @@ function Settings() {
 			optionsBinding?.dispose();
 
 			switch (settings.type) {
-				case 'string':
-					settings.bufferSize = settings.bufferSize || 10;
-					optionsBinding = pane.addBinding(settings, 'bufferSize', {
-						label: 'size',
-						index: 1,
-						min: 1,
-						step: 1,
-					});
-					break;
-				case 'object':
+				case 'raw':
 					settings.rows = 5;
 					optionsBinding = pane.addBinding(settings, 'rows', {
 						label: 'size',
@@ -132,8 +118,7 @@ function Settings() {
 				view: 'list',
 				options: [
 					{ value: 'graph', text: 'graph' },
-					{ value: 'string', text: 'string' },
-					{ value: 'object', text: 'object' },
+					{ value: 'raw', text: 'raw' },
 				],
 			})
 			.on('change', () => {
@@ -150,9 +135,9 @@ function Settings() {
 	return null;
 }
 
-type Props = BaseNode<DebugData, DebugValueType>;
-export const DEFAULT_DEBUG_DATA: Props['data'] = {
-	label: 'Debug',
+type Props = BaseNode<MonitorData, DebugValueType>;
+export const DEFAULT_MONITOR_DATA: Props['data'] = {
+	label: 'Monitor',
 	type: 'graph',
 	range: { min: 0, max: 1023 },
 };

apps/electron-app/src/render/providers/NewNodeProvider.tsx

@@ -75,8 +75,8 @@ export const NewNodeCommandDialog = memo(function NewNodeCommandDialog() {
 							<Badge variant="outline">Transformation</Badge>
 						</CommandShortcut>
 					</CommandItem>
-					<CommandItem onSelect={selectNode('Debug')}>
-						Debug
+					<CommandItem onSelect={selectNode('Monitor')}>
+						Monitor
 						<CommandShortcut className="space-x-1">
 							<Badge variant="outline">Output</Badge>
 						</CommandShortcut>

packages/components/index.ts

@@ -3,14 +3,14 @@ export * from './src/components/And';
 export * from './src/components/Button';
 export * from './src/components/Compare';
 export * from './src/components/Counter';
-export * from './src/components/Debug';
 export * from './src/components/Figma';
 export * from './src/components/Interval';
 export * from './src/components/Oscillator';
 export * from './src/components/Trigger';
 export * from './src/components/Smooth';
 export * from './src/components/Led';
 export * from './src/components/Matrix';
+export * from './src/components/Monitor';
 export * from './src/components/Motion';
 export * from './src/components/Mqtt';
 export * from './src/components/Piezo';

packages/components/src/components/Monitor.ts

@@ -0,0 +1,28 @@
+import { BaseComponent, BaseComponentOptions } from './BaseComponent';
+
+export type DebugValueType = unknown;
+
+type GraphData = {
+	type: 'graph';
+	range: { min: number; max: number };
+};
+
+type RawData = {
+	type: 'raw';
+	multiline: true;
+	rows: number;
+};
+
+export type MonitorData = GraphData | RawData;
+
+type MonitorOptions = BaseComponentOptions & MonitorData;
+
+export class Monitor extends BaseComponent<DebugValueType> {
+	constructor(options: MonitorOptions) {
+		super(options, 0);
+	}
+
+	debug(value: unknown) {
+		this.value = value;
+	}
+}