diff --git a/visual_console_client/playground/index.html b/visual_console_client/playground/index.html index 07c6ce3c7d..63cfc5629b 100644 --- a/visual_console_client/playground/index.html +++ b/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); } diff --git a/visual_console_client/src/Item.ts b/visual_console_client/src/Item.ts index e8ea78e869..9306db96c4 100644 --- a/visual_console_client/src/Item.ts +++ b/visual_console_client/src/Item.ts @@ -121,7 +121,7 @@ abstract class VisualConsoleItem { protected readonly childElementRef: HTMLElement; // Event manager for click events. private readonly clickEventManager = new TypedEvent>(); - // Event manager for click events. + // Event manager for remove events. private readonly removeEventManager = new TypedEvent< ItemRemoveEvent >(); diff --git a/visual_console_client/src/VisualConsole.ts b/visual_console_client/src/VisualConsole.ts index 0a3b2c2ec3..261d946a19 100644 --- a/visual_console_client/src/VisualConsole.ts +++ b/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 + >(); + // 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>): 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; + } }