With this commit, the GUIAdapter now correctly binds UI controls to commands using the newly introduced GUICommandRegistry. This improves the modularity and extensibility of the system by replacing the old CommandFactory with a more centralized approach to command registration.

jurra · jurra · commit 7a6fa4ef9c5a · 2025-02-19T15:58:44.000+01:00
Key changes:
- Introduced `GUICommandRegistry` in `settings.js` to globally register commands before GUI initialization.
- Updated `GUIAdapter` to receive `GUICommandRegistry` as a dependency instead of instantiating its own factory.
- `bindUIControls()` now logs available commands and correctly binds them to UI elements.
- Removed outdated `Command.js` and `CommandFactory.js`, which are now replaced by `GUICommandRegistry`.
- Updated `GUIAdapter.test.js` to inject `GUICommandRegistry` for better test isolation.

This refactor ensures that commands are managed in a consistent manner across the application, allowing new commands to be added globally without modifying `GUIAdapter` directly.
diff --git a/src/config/settings.js b/src/config/settings.js
@@ -6,6 +6,9 @@ import { ResistorRenderer } from '../gui/renderers/ResistorRenderer.js';
 import { WireRenderer } from '../gui/renderers/WireRenderer.js';
 import { generateId } from '../utils/idGenerator.js';
 import { Properties } from '../domain/valueObjects/Properties.js';
+import { GUICommandRegistry } from "../gui/commands/GUICommandRegistry.js";
+import { AddElementCommand } from "../gui/commands/AddElementCommand.js";
+
 
 // Ensure elements are registered once
 if (ElementRegistry.getTypes().length === 0) {
@@ -21,10 +24,19 @@ if (ElementRegistry.getTypes().length === 0) {
 
 console.log(" ElementRegistry after registration:", ElementRegistry.getTypes());
 
+// ✅ Register commands globally before GUI initialization
+GUICommandRegistry.register("addElement", (circuitService, circuitRenderer, elementRegistry, elementType) =>
+    new AddElementCommand(circuitService, circuitRenderer, elementRegistry, elementType)
+);
+
+console.log("✅ Commands registered:", GUICommandRegistry.getTypes());
+console.log("✅ Commands:", GUICommandRegistry._registry);
+console.log("✅ Command name:", GUICommandRegistry.get("addElement"));
+
 // Configure RendererFactory
 const rendererFactory = new RendererFactory();
 rendererFactory.register('resistor', ResistorRenderer);
 rendererFactory.register('wire', WireRenderer);
 
-export { ElementRegistry, rendererFactory };
+export { ElementRegistry, rendererFactory, GUICommandRegistry };
 export default ElementRegistry; // Add default export
diff --git a/src/gui/adapters/GUIAdapter.js b/src/gui/adapters/GUIAdapter.js
@@ -1,5 +1,4 @@
 import { CircuitRenderer } from "../renderers/CircuitRenderer.js";
-import { CommandFactory } from "../commands/CommandFactory.js";
 import { CommandHistory } from "../commands/CommandHistory.js";
 
 /**
@@ -44,15 +43,16 @@ export class GUIAdapter {
      * @param {CircuitService} circuitService - The service managing circuit logic.
      * @param {Object} elementRegistry - The registry of circuit elements.
      * @param {RendererFactory} rendererFactory - The factory for creating element renderers.
+     * @param {GUICommandRegistry} commandFactory - The factory for creating commands.
      */
-    constructor(canvas, circuitService, elementRegistry, rendererFactory, commandFactory) {
+    constructor(canvas, circuitService, elementRegistry, rendererFactory, guiCommandRegistry) {
         this.canvas = canvas;
         this.circuitService = circuitService;
         this.elementRegistry = elementRegistry;
         this.circuitRenderer = new CircuitRenderer(canvas, circuitService, rendererFactory);
-        this.commandFactory = commandFactory;
+        this.guiCommandRegistry = guiCommandRegistry;
         
-        this.commandFactory = new CommandFactory(circuitService, this.circuitRenderer, elementRegistry);
+        // this.commandFactory = new GUICommandFactory(circuitService, this.circuitRenderer, elementRegistry);
         this.commandHistory = new CommandHistory();
     }
 
@@ -61,14 +61,43 @@ export class GUIAdapter {
      * Instead of directly modifying circuit state, this now delegates execution to CommandFactory.
      */
     bindUIControls() {
-        this.commandFactory.commands.forEach((createCommand, name) => {
-            const button = document.getElementById(`button-${name}`);
+        console.log("🔍 Binding UI controls in GUIAdapter...");
+        console.log("Commands available:", this.guiCommandRegistry.getTypes());
+
+        this.elementRegistry.getTypes().forEach((elementType) => {
+            const buttonName = `add${elementType}`;  // Format should match HTML IDs
+            console.log(`🔍 Searching for button: ${buttonName}`);
+
+            const button = document.getElementById(buttonName);
             if (button) {
-                button.addEventListener("click", () => createCommand().execute());
+                console.log(`✅ Found button: ${button.id}, binding addElement command for ${elementType}`);
+
+                button.addEventListener("click", () => {
+                    console.log(`🛠 Executing addElement command for: ${elementType}`);
+
+                    // Retrieve the correct command with the element type
+                    const command = this.guiCommandRegistry.get(
+                        "addElement",
+                        // this,  // Pass GUIAdapter
+                        this.circuitService,
+                        this.circuitRenderer,
+                        this.elementRegistry,
+                        elementType
+                    );
+
+                    if (command) {
+                        command.execute();
+                        console.log(`✅ Command 'addElement' executed for ${elementType}`);
+                    } else {
+                        console.warn(`⚠️ Command 'addElement' not found for ${elementType}`);
+                    }
+                });
+            } else {
+                console.warn(`⚠️ Button for adding ${elementType} not found`);
             }
         });
-}
-    /**
+    }
+        /**
      * Executes a command by retrieving it from the CommandFactory and executing via CommandHistory.
      * @param {string} commandName - The name of the command to execute.
      * @param {...any} args - Arguments to pass to the command.
diff --git a/src/gui/commands/AddElementCommand.js b/src/gui/commands/AddElementCommand.js
@@ -1,4 +1,5 @@
 import { GUICommand } from "./GUICommand.js";
+import { Position } from "../../domain/valueObjects/Position.js";
 
 /**
  * Command to add an element to the circuit.
@@ -14,7 +15,7 @@ export class AddElementCommand extends GUICommand {
     }
 
     execute() {
-        console.log(`Executing AddElementCommand for ${this.elementType}`);
+        console.log("Executing AddElementCommand for:", this.elementType);
 
         // Retrieve the factory function for the element
         const factory = this.elementRegistry.get(this.elementType);
diff --git a/src/gui/commands/Command.js b/src/gui/commands/Command.js
diff --git a/src/gui/commands/CommandFactory.js b/src/gui/commands/CommandFactory.js
diff --git a/src/gui/commands/GUICommandRegistry.js b/src/gui/commands/GUICommandRegistry.js
@@ -0,0 +1,51 @@
+class GUICommandRegistryClass {
+    constructor() {
+        if (!GUICommandRegistryClass.instance) {
+            this._registry = new Map();
+            GUICommandRegistryClass.instance = this;
+        }
+        else {
+            this._registry = GUICommandRegistryClass.instance._registry;  // Ensure continuity
+        }
+        return GUICommandRegistryClass.instance;
+    }
+
+    /**
+     * Registers a command by name.
+     * @param {string} name - The command name.
+     * @param {Function} commandFactory - A factory function returning a command instance.
+     */
+    register(name, commandFactory) {
+        if (this._registry.has(name)) {
+            throw new Error(`Command "${name}" is already registered.`);
+        }
+        this._registry.set(name, commandFactory);
+    }
+
+    /**
+     * Retrieves a command by name.
+     * @param {string} name - The command name.
+     * @returns {Command} - The command instance.
+     */
+    get(name, ...args) {
+        if (!this._registry.has(name)) {
+            console.warn(`Command "${name}" not found.`);
+            return null;
+        }
+        console.log(`Calling ${name} with arguments:`, args);
+        return this._registry.get(name)(...args);
+    }
+
+    /**
+     * Returns all registered command names.
+     * @returns {string[]} - List of registered command names.
+     */
+    getTypes() {
+        return [...this._registry.keys()];
+    }
+}
+
+// Create a Singleton Instance
+const GUICommandRegistry = new GUICommandRegistryClass();
+Object.freeze( GUICommandRegistry );
+export { GUICommandRegistry };
diff --git a/src/gui/main.js b/src/gui/main.js
@@ -1,18 +1,21 @@
 import { Circuit } from '../domain/aggregates/Circuit.js';
 import { CircuitService } from '../application/CircuitService.js';
 import { GUIAdapter } from './adapters/GUIAdapter.js';
-import { ElementRegistry, rendererFactory }   from '../config/settings.js'; // Assuming ElementRegistry is configured in settings.js
+import { ElementRegistry, rendererFactory, GUICommandRegistry  }   from '../config/settings.js'; // Assuming ElementRegistry is configured in settings.js
+import document from 'document'; // Assuming document is a global object
 
 // Set up the circuit and services
 const circuit = new Circuit();
 const circuitService = new CircuitService(circuit, ElementRegistry);
 
 console.log('ElementRegistry:', ElementRegistry);
 console.log('rendererFactory:', rendererFactory);
+console.log('GUICommandRegistry:', GUICommandRegistry);
 
 // Get the canvas from the DOM
 const canvas = document.getElementById('circuitCanvas');
+console.log('Canvas:', canvas);
 
 // Create and initialize the GUI Adapter
-const guiAdapter = new GUIAdapter(canvas, circuitService, ElementRegistry, rendererFactory);
+const guiAdapter = new GUIAdapter(canvas, circuitService, ElementRegistry, rendererFactory, GUICommandRegistry);
 guiAdapter.initialize();
diff --git a/src/utils/EventEmitter.js b/src/utils/EventEmitter.js
@@ -0,0 +1,87 @@
+/**
+ * @file EventEmitter.js
+ * @description 
+ * A lightweight event system for managing and broadcasting events within the application.
+ * This class serves as a simplified alternative to Node.js' `EventEmitter`, designed
+ * to work seamlessly in both **browser** and **Node.js** environments.
+ * 
+ *  **Role in the QuCat Circuit Generator:**
+ * - Used by `CircuitService` to emit events when elements are added, deleted, or modified.
+ * - Enables **event-driven UI updates** in `GUIAdapter`, allowing the frontend to react to changes.
+ * - Provides a **decoupled** way to manage event-driven communication across modules.
+ * 
+ *  **Example Usage:**
+ * ```js
+ * const emitter = new EventEmitter();
+ * emitter.on("elementAdded", (element) => console.log("New element:", element));
+ * emitter.emit("elementAdded", { id: "R1", type: "resistor" });
+ * ```
+ */
+
+export class EventEmitter {
+    /**
+     * Constructs a new EventEmitter instance.
+     * Manages a collection of event listeners.
+     */
+    constructor() {
+        /** 
+         * Stores registered event callbacks.
+         * @type {Object.<string, Function[]>}
+         */
+        this.events = {};
+    }
+
+    /**
+     * Registers a new listener for the given event.
+     * 
+     * @param {string} event - The name of the event.
+     * @param {Function} callback - The function to execute when the event is emitted.
+     * 
+     * @example
+     * ```js
+     * emitter.on("update", () => console.log("Circuit updated"));
+     * ```
+     */
+    on(event, callback) {
+        if (!this.events[event]) {
+            this.events[event] = [];
+        }
+        this.events[event].push(callback);
+    }
+
+    /**
+     * Removes a specific listener from an event.
+     * 
+     * @param {string} event - The event name.
+     * @param {Function} callback - The function to remove from the listener list.
+     * 
+     * @example
+     * ```js
+     * const handler = () => console.log("Circuit updated");
+     * emitter.on("update", handler);
+     * emitter.off("update", handler); // Removes the listener
+     * ```
+     */
+    off(event, callback) {
+        if (this.events[event]) {
+            this.events[event] = this.events[event].filter(cb => cb !== callback);
+        }
+    }
+
+    /**
+     * Emits an event, triggering all registered callbacks for that event.
+     * 
+     * @param {string} event - The event name.
+     * @param {*} [data] - Optional data to pass to the event listeners.
+     * 
+     * @example
+     * ```js
+     * emitter.emit("elementAdded", { id: "R1", type: "resistor" });
+     * ```
+     */
+    emit(event, data) {
+        if (this.events[event]) {
+            this.events[event].forEach(callback => callback(data));
+        }
+    }
+}
diff --git a/tests/gui/GUIAdapter.test.js b/tests/gui/GUIAdapter.test.js
@@ -6,21 +6,18 @@ import { GUIAdapter } from '../../src/gui/adapters/GUIAdapter.js';
 import { Circuit } from '../../src/domain/aggregates/Circuit.js';
 import { CircuitService } from '../../src/application/CircuitService.js';
 import { RendererFactory } from '../../src/gui/renderers/RendererFactory.js';
-import { ElementRegistry, rendererFactory } from '../../src/config/settings.js';
+import { ElementRegistry, rendererFactory, GUICommandRegistry } from '../../src/config/settings.js';
 
 
 describe('GUIAdapter Tests', () => {
     let canvas;
     let guiAdapter;
 
-    console.log("🔍 ElementRegistry before test:", ElementRegistry.getTypes());
-
     beforeEach(() => {
-        console.log("🔍 ElementRegistry before test:", ElementRegistry.getTypes());
         setupJsdom();
     
         // Add required buttons to the DOM
-        ['addResistor', 'addWire'].forEach((id) => {
+        ['addResistor', 'addWire', 'addMockElement'].forEach((id) => {
             const button = document.createElement('button');
             button.id = id;
             document.body.appendChild(button);
@@ -47,7 +44,7 @@ describe('GUIAdapter Tests', () => {
 
         const circuit = new Circuit();
         const circuitService = new CircuitService(circuit, ElementRegistry);
-        guiAdapter = new GUIAdapter(canvas, circuitService, ElementRegistry, rendererFactory);
+        guiAdapter = new GUIAdapter(canvas, circuitService, ElementRegistry, rendererFactory, GUICommandRegistry);
     });
     
     it('should initialize without errors', () => {
