Implemented 'Random' node with number, string, and boolean generation capabilities

scar17off · scar17off · commit 60eec1ff5461 · 2024-10-30T01:21:02.000+02:00
diff --git a/src/CodeGenerator.js b/src/CodeGenerator.js
@@ -151,6 +151,38 @@ class CodeGenerator {
       case 'If':
         this.handleIfNode(node);
         break;
+      case 'Random':
+        const randomType = node.properties.type || 'number';
+        const resultVar = this.getUniqueVariableName('randomResult');
+        
+        switch (randomType) {
+          case 'number':
+            const min = parseFloat(node.properties.min) || 1;
+            const max = parseFloat(node.properties.max) || 100;
+            this.addLine(`const ${resultVar} = Math.floor(Math.random() * (${max} - ${min} + 1)) + ${min};`);
+            break;
+            
+          case 'string':
+            const length = parseInt(node.properties.length) || 10;
+            const charset = node.properties.charset || 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
+            this.addLine(`let ${resultVar} = '';`);
+            this.addLine(`for (let i = 0; i < ${length}; i++) {`);
+            this.indentLevel++;
+            this.addLine(`${resultVar} += ${JSON.stringify(charset)}[Math.floor(Math.random() * ${charset.length})];`);
+            this.indentLevel--;
+            this.addLine(`}`);
+            break;
+            
+          case 'boolean':
+            const probability = parseFloat(node.properties.probability) || 50;
+            this.addLine(`const ${resultVar} = Math.random() * 100 < ${probability};`);
+            break;
+          default:
+            this.addLine(`// Unknown random type: ${node.properties.type}`);
+        }
+        
+        this.nodeOutputs.set(node.id, resultVar);
+        break;
       default:
         this.addLine(`// TODO: Implement ${node.type}`);
     }
diff --git a/src/VisualScripting.js b/src/VisualScripting.js
@@ -227,7 +227,7 @@ const VisualScripting = () => {
 
   const findClickedPort = (x, y) => {
     const PORT_WIDTH = 6;  // Width of the gray arrow
-    const PORT_HEIGHT = 10; // Height of the gray arrow 
+    const PORT_HEIGHT = 10; // Height of the gray arrow
     const PORT_OFFSET = 5;  // Distance from node border
     const SCALE_MULTIPLIER = 1.5; // Scale multiplier for hit detection
 
diff --git a/src/components/GraphInspector.js b/src/components/GraphInspector.js
@@ -19,6 +19,15 @@ const GraphInspector = ({
   const node = selectedNodes[0];
   const nodeType = nodeTypes[node.type];
 
+  // Helper function to determine if a property should be visible
+  const isPropertyVisible = (property) => {
+    if (property.visible === undefined) return true;
+    if (typeof property.visible === 'function') {
+      return property.visible(node.properties);
+    }
+    return property.visible;
+  };
+
   return (
     <div className={`${styles.container} ${config.isDarkTheme ? styles.containerDark : styles.containerLight}`}>
       {/* Header */}
@@ -48,29 +57,31 @@ const GraphInspector = ({
             Properties
           </div>
           {nodeType.properties.map(prop => (
-            <div key={prop.name} className={styles.propertyContainer}>
-              <label className={`${styles.propertyLabel} ${config.isDarkTheme ? styles.propertyLabelDark : styles.propertyLabelLight}`}>
-                {prop.name}
-              </label>
-              {prop.type === 'select' ? (
-                <select
-                  value={node.properties[prop.name] || prop.default}
-                  onChange={(e) => updateNodeProperty(prop.name, e.target.value)}
-                  className={`${styles.input} ${config.isDarkTheme ? styles.inputDark : styles.inputLight}`}
-                >
-                  {prop.options.map(option => (
-                    <option key={option} value={option}>{option}</option>
-                  ))}
-                </select>
-              ) : (
-                <input
-                  type={prop.type === 'number' ? 'number' : 'text'}
-                  value={node.properties[prop.name] || prop.default}
-                  onChange={(e) => updateNodeProperty(prop.name, e.target.value)}
-                  className={`${styles.input} ${config.isDarkTheme ? styles.inputDark : styles.inputLight}`}
-                />
-              )}
-            </div>
+            isPropertyVisible(prop) && (
+              <div key={prop.name} className={styles.propertyContainer}>
+                <label className={`${styles.propertyLabel} ${config.isDarkTheme ? styles.propertyLabelDark : styles.propertyLabelLight}`}>
+                  {prop.name}
+                </label>
+                {prop.type === 'select' ? (
+                  <select
+                    value={node.properties[prop.name] || prop.default}
+                    onChange={(e) => updateNodeProperty(prop.name, e.target.value)}
+                    className={`${styles.input} ${config.isDarkTheme ? styles.inputDark : styles.inputLight}`}
+                  >
+                    {prop.options.map(option => (
+                      <option key={option} value={option}>{option}</option>
+                    ))}
+                  </select>
+                ) : (
+                  <input
+                    type={prop.type === 'number' ? 'number' : 'text'}
+                    value={node.properties[prop.name] || prop.default}
+                    onChange={(e) => updateNodeProperty(prop.name, e.target.value)}
+                    className={`${styles.input} ${config.isDarkTheme ? styles.inputDark : styles.inputLight}`}
+                  />
+                )}
+              </div>
+            )
           ))}
         </div>
       )}
diff --git a/src/components/MenuBar.js b/src/components/MenuBar.js
@@ -71,7 +71,8 @@ const MenuBar = ({
               {menu === 'Help' && [
                 <button key="example1" onClick={() => handleMenuItemClick('loadExample', 'example1')} className={`${styles.menuItemButton} ${styles[theme]}`}>Example 1: Hello World</button>,
                 <button key="example2" onClick={() => handleMenuItemClick('loadExample', 'example2')} className={`${styles.menuItemButton} ${styles[theme]}`}>Example 2: Basic Math</button>,
-                <button key="example3" onClick={() => handleMenuItemClick('loadExample', 'example3')} className={`${styles.menuItemButton} ${styles[theme]}`}>Example 3: If Statement</button>
+                <button key="example3" onClick={() => handleMenuItemClick('loadExample', 'example3')} className={`${styles.menuItemButton} ${styles[theme]}`}>Example 3: If Statement</button>,
+                <button key="example4" onClick={() => handleMenuItemClick('loadExample', 'example4')} className={`${styles.menuItemButton} ${styles[theme]}`}>Example 4: Random Number</button>
               ]}
             </div>
           )}
diff --git a/src/engine/Renderer.js b/src/engine/Renderer.js
@@ -54,7 +54,13 @@ class Renderer {
 
     const inputsHeight = nodeType.inputs.length * 20;
     const outputsHeight = nodeType.outputs.length * 20;
-    const propertiesHeight = (nodeType.properties?.length || 0) * 20;
+    const propertiesHeight = nodeType.properties ? nodeType.properties.reduce((height, prop) => {
+      const isVisible = prop.visible === undefined || 
+        (typeof prop.visible === 'function' ? 
+          prop.visible(node.properties) : 
+          prop.visible);
+      return height + (isVisible ? 20 : 0);
+    }, 0) : 0;
 
     const width = Math.max(200, titleWidth + 20, ...descriptionLines.map(line => ctx.measureText(line).width + 20));
     const height = 35 + descriptionHeight + Math.max(inputsHeight, outputsHeight) + propertiesHeight;
@@ -316,10 +322,18 @@ class Renderer {
         ctx.font = '12px Arial';
 
         nodeType.properties.forEach((prop, index) => {
-          let displayValue = node.properties[prop.name] !== undefined ? node.properties[prop.name] : prop.default;
-          const text = `${prop.name}: ${displayValue}`;
-          currentHeight += 20;
-          ctx.fillText(text, node.x + 10, node.y + currentHeight);
+          // Check if property should be visible
+          const isVisible = prop.visible === undefined || 
+            (typeof prop.visible === 'function' ? 
+              prop.visible(node.properties) : 
+              prop.visible);
+
+          if (isVisible) {
+            let displayValue = node.properties[prop.name] !== undefined ? node.properties[prop.name] : prop.default;
+            const text = `${prop.name}: ${displayValue}`;
+            currentHeight += 20;
+            ctx.fillText(text, node.x + 10, node.y + currentHeight);
+          }
         });
       }
     });
diff --git a/src/examples.js b/src/examples.js
@@ -42,6 +42,19 @@ const examples = {
       { start: { nodeId: 4, isInput: false, index: 0 }, end: { nodeId: 5, isInput: true, index: 0 } },
       { start: { nodeId: 4, isInput: false, index: 1 }, end: { nodeId: 6, isInput: true, index: 0 } }
     ]
+  },
+  example4: {
+    nodes: [
+      { id: 1, type: 'OnStart', x: 100, y: 100, properties: {} },
+      { id: 2, type: 'Random', x: 350, y: 100, properties: { min: '1', max: '100', type: 'number', probability: '50', charset: 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789', length: '10' } },
+      { id: 3, type: 'Variable', x: 600, y: 100, properties: { name: 'randomNum', type: 'number', initialValue: '0' } },
+      { id: 4, type: 'Log', x: 850, y: 100, properties: { message: '', logType: 'log' } },
+    ],
+    edges: [
+      { start: { nodeId: 1, isInput: false, index: 0 }, end: { nodeId: 2, isInput: true, index: 0 } },
+      { start: { nodeId: 2, isInput: false, index: 0 }, end: { nodeId: 3, isInput: true, index: 0 } },
+      { start: { nodeId: 3, isInput: false, index: 1 }, end: { nodeId: 4, isInput: true, index: 0 } },
+    ]
   }
 };
 
diff --git a/src/nodeDefinitions.js b/src/nodeDefinitions.js
@@ -230,12 +230,62 @@ export const nodeTypes = {
     properties: [
       { name: 'operator', type: 'select', options: ['==', '===', '!=', '!==', '>', '<', '>=', '<='], default: '==' }
     ]
+  },
+  Random: {
+    color: '#9C27B0',
+    inputs: [
+      { type: 'control', name: 'In' }
+    ],
+    outputs: [
+      { type: 'control', name: 'Out' },
+      { type: 'data', name: 'Result' }
+    ],
+    description: 'Generates random values of different types',
+    properties: [
+      { 
+        name: 'type', 
+        type: 'select', 
+        options: ['number', 'string', 'boolean'], 
+        default: 'number',
+        visible: true 
+      },
+      { 
+        name: 'min', 
+        type: 'number', 
+        default: 1,
+        visible: (props) => props.type === 'number'
+      },
+      { 
+        name: 'max', 
+        type: 'number', 
+        default: 100,
+        visible: (props) => props.type === 'number'
+      },
+      { 
+        name: 'length', 
+        type: 'number', 
+        default: 10,
+        visible: (props) => props.type === 'string'
+      },
+      { 
+        name: 'charset', 
+        type: 'string', 
+        default: 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789',
+        visible: (props) => props.type === 'string'
+      },
+      { 
+        name: 'probability', 
+        type: 'number', 
+        default: 50,
+        visible: (props) => props.type === 'boolean'
+      }
+    ]
   }
 };
 
 export const nodeGroups = {
   "Control Flow": ["OnStart", "If", "Condition", "WhileLoop", "ForLoop"],
-  "Data Manipulation": ["Variable", "MathOperation", "ArrayOperation", "ObjectOperation", "JSONParse", "JSONStringify"],
+  "Data Manipulation": ["Variable", "MathOperation", "ArrayOperation", "ObjectOperation", "JSONParse", "JSONStringify", "Random"],
   "Functions": ["Function"],
   "Input/Output": ["Log", "HttpRequest"],
   "Encoding": ["Base64Encode", "Base64Decode"]
