Solution (#2366): Graph Editor: Add UI support for enumerated values

path/to/documents/DeveloperGuide/GraphEditor.md

@@ -0,0 +1,22 @@
+# Graph Editor
+
+## Enumerated Values
+
+The Graph Editor now supports enumerated values in the form of a dropdown menu. To use this feature, simply select an enumerated value from the dropdown menu.
+
+### Example
+
+To add an enumerated value to the dropdown menu, follow these steps:
+
+1. Go to the **Enumerated Values** section in the Graph Editor.
+2. Click the **Add** button to create a new enumerated value.
+3. Enter the name and value of the enumerated value.
+4. Click **Save** to save the enumerated value.
+
+### Usage
+
+To use an enumerated value in a shader, simply select it from the dropdown menu. The shader will be updated automatically.
+
+### Troubleshooting
+
+If you encounter any issues with the dropdown menu, please refer to the [Troubleshooting](#troubleshooting) section.

path/to/javascript/MaterialXView/source/dropHandling.js

@@ -0,0 +1,16 @@
+/**
+ * Handle dropdown menu events.
+ */
+export class DropHandling {
+  /**
+   * Initialize the dropdown menu.
+   * @param {HTMLSelectElement} select The dropdown menu select element.
+   */
+  static init(select) {
+    select.addEventListener('change', (event) => {
+      const value = event.target.value;
+      // Handle the selected value (e.g., update the shader generation system)
+      console.log(`Selected value: ${value}`);
+    });
+  }
+}

path/to/javascript/MaterialXView/source/helper.js

@@ -0,0 +1,31 @@
+/**
+ * Helper functions for the dropdown menu.
+ */
+export class DropdownHelper {
+  /**
+   * Get the list of enumerated values from the spec/definitions.
+   * @returns {Promise<string[]>} A promise resolving to an array of enumerated values.
+   */
+  static async getEnumeratedValues() {
+    try {
+      const response = await fetch('/spec/definitions');
+      const data = await response.json();
+      return data.enumeratedValues;
+    } catch (error) {
+      console.error('Error fetching enumerated values:', error);
+      return [];
+    }
+  }
+
+  /**
+   * Create a dropdown menu option from an enumerated value.
+   * @param {string} value The enumerated value.
+   * @returns {HTMLOptionElement} A dropdown menu option element.
+   */
+  static createOption(value) {
+    const option = document.createElement('option');
+    option.value = value;
+    option.textContent = value;
+    return option;
+  }
+}

path/to/javascript/MaterialXView/source/index.js

@@ -0,0 +1,10 @@
+import { Viewer } from './viewer.js';
+
+/**
+ * Initialize the Graph Editor.
+ */
+export function init() {
+  const viewer = new Viewer();
+  viewer.loadEnumeratedValues();
+  document.body.appendChild(viewer);
+}

path/to/javascript/MaterialXView/source/viewer.js

@@ -0,0 +1,30 @@
+import { DropdownHelper } from './helper.js';
+import { DropHandling } from './dropHandling.js';
+
+/**
+ * The Graph Editor viewer.
+ */
+export class Viewer {
+  /**
+   * Initialize the viewer.
+   */
+  constructor() {
+    this.select = document.createElement('select');
+    this.select.id = 'enumerated-values';
+    this.select.addEventListener('change', () => {
+      DropHandling.init(this.select);
+    });
+    this.appendChild(this.select);
+  }
+
+  /**
+   * Get the list of enumerated values and create dropdown menu options.
+   */
+  async loadEnumeratedValues() {
+    const values = await DropdownHelper.getEnumeratedValues();
+    values.forEach((value) => {
+      const option = DropdownHelper.createOption(value);
+      this.select.appendChild(option);
+    });
+  }
+}