Visual Console Refactor: added a click event handler for elements to the vc container

Former-commit-id: f90902eabeecda6d8dda05603f1e143935c45cf0

visual_console_client/playground/index.html

@@ -299,6 +299,10 @@
       try {
         var visualConsole = new VisualConsole(container, props, items);
         console.log(visualConsole);
+
+        visualConsole.onClick(function(e) {
+          console.log("[CLICK]", e);
+        });
       } catch (error) {
         console.log("ERROR", error.message);
       }

visual_console_client/src/Item.ts

@@ -121,7 +121,7 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
   protected readonly childElementRef: HTMLElement;
   // Event manager for click events.
   private readonly clickEventManager = new TypedEvent<ItemClickEvent<Props>>();
-  // Event manager for click events.
+  // Event manager for remove events.
   private readonly removeEventManager = new TypedEvent<
     ItemRemoveEvent<Props>
   >();

visual_console_client/src/VisualConsole.ts

@@ -5,7 +5,7 @@ import {
   parseIntOr,
   notEmptyStringOr
 } from "./lib";
-import Item, { ItemType, ItemProps } from "./Item";
+import Item, { ItemType, ItemProps, ItemClickEvent } from "./Item";
 import StaticGraph, { staticGraphPropsDecoder } from "./items/StaticGraph";
 import Icon, { iconPropsDecoder } from "./items/Icon";
 import ColorCloud, { colorCloudPropsDecoder } from "./items/ColorCloud";
@@ -19,6 +19,7 @@ import EventsHistory, {
   eventsHistoryPropsDecoder
 } from "./items/EventsHistory";
 import Percentile, { percentilePropsDecoder } from "./items/Percentile";
+import TypedEvent, { Disposable, Listener } from "./TypedEvent";
 
 // Base properties.
 export interface VisualConsoleProps extends Size {
@@ -135,6 +136,12 @@ export default class VisualConsole {
   private relations: {
     [key: string]: Line | null;
   } = {};
+  // Event manager for click events.
+  private readonly clickEventManager = new TypedEvent<
+    ItemClickEvent<ItemProps>
+  >();
+  // List of references to clean the event listeners.
+  private readonly disposables: Disposable[] = [];
 
   public constructor(
     container: HTMLElement,
@@ -172,9 +179,10 @@ export default class VisualConsole {
         this.elementsById[itemInstance.props.id] = itemInstance;
         this.elementIds.push(itemInstance.props.id);
         // Item event handlers.
-        itemInstance.onClick(e =>
-          console.log(`Clicked element #${e.data.id}`, e)
-        );
+        itemInstance.onClick(e => {
+          this.clickEventManager.emit(e);
+          // console.log(`Clicked element #${e.data.id}`, e);
+        });
         itemInstance.onRemove(e => {
           // TODO: Remove the element from the list and its relations.
         });
@@ -287,6 +295,7 @@ export default class VisualConsole {
    * To remove the event listeners and the elements from the DOM.
    */
   public remove(): void {
+    this.disposables.forEach(d => d.dispose()); // Arrow function.
     this.elements.forEach(e => e.remove()); // Arrow function.
     this.elementsById = {};
     this.elementIds = [];
@@ -360,4 +369,20 @@ export default class VisualConsole {
 
     return line;
   }
+
+  /**
+   * Add an event handler to the click of the linked visual console elements.
+   * @param listener Function which is going to be executed when a linked console is clicked.
+   */
+  public onClick(listener: Listener<ItemClickEvent<ItemProps>>): Disposable {
+    /*
+     * The '.on' function returns a function which will clean the event
+     * listener when executed. We store all the 'dispose' functions to
+     * call them when the item should be cleared.
+     */
+    const disposable = this.clickEventManager.on(listener);
+    this.disposables.push(disposable);
+
+    return disposable;
+  }
 }