diff --git a/pandora_console/include/javascript/pandora_visual_console.js b/pandora_console/include/javascript/pandora_visual_console.js index bedc6538f4..d2e197a69d 100755 --- a/pandora_console/include/javascript/pandora_visual_console.js +++ b/pandora_console/include/javascript/pandora_visual_console.js @@ -123,7 +123,7 @@ function createVisualConsole( try { visualConsole = new VisualConsole(container, props, items); // VC Item clicked. - visualConsole.onClick(function(e) { + visualConsole.onItemClick(function(e) { // Override the link to another VC if it isn't on remote console. if ( e.data && @@ -139,6 +139,14 @@ function createVisualConsole( updateVisualConsole(e.data.linkedLayoutId, updateInterval); } }); + // VC Item moved. + visualConsole.onItemMoved(function(e) { + // TODO: Run an async task to update the position here. + // TODO: Recover the previous position if the update task fails. + console.log( + "Moved item #" + e.item.props.id + " (x: " + e.x + ", y: " + e.y + ")" + ); + }); if (updateInterval != null && updateInterval > 0) { // Start an interval to update the Visual Console. diff --git a/visual_console_client/src/Item.ts b/visual_console_client/src/Item.ts index a21a8db6ce..0ce681ae23 100644 --- a/visual_console_client/src/Item.ts +++ b/visual_console_client/src/Item.ts @@ -70,6 +70,10 @@ export interface ItemRemoveEvent { data: AnyObject; } +export interface ItemMovedEvent extends Position { + item: VisualConsoleItem; +} + /** * Extract a valid enum value from a raw label positi9on value. * @param labelPosition Raw value. @@ -135,6 +139,8 @@ abstract class VisualConsoleItem { protected readonly childElementRef: HTMLElement; // Event manager for click events. private readonly clickEventManager = new TypedEvent>(); + // Event manager for moved events. + private readonly movedEventManager = new TypedEvent(); // Event manager for remove events. private readonly removeEventManager = new TypedEvent< ItemRemoveEvent @@ -149,8 +155,8 @@ abstract class VisualConsoleItem { (x: Position["x"], y: Position["y"]) => { // Save the new position to the props. this.move(x, y); - // TODO: start an async task to persist the change. - console.log("SAVED", x, y); + // Emit the movement event. + this.movedEventManager.emit({ item: this, x, y }); } ); // This property will store the function @@ -657,6 +663,22 @@ abstract class VisualConsoleItem { return disposable; } + /** + * To add an event handler to the movement of visual console elements. + * @param listener Function which is going to be executed when a linked console is moved. + */ + public onMoved(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.movedEventManager.on(listener); + this.disposables.push(disposable); + + return disposable; + } + /** * To add an event handler to the removal of the item. * @param listener Function which is going to be executed when a item is removed. diff --git a/visual_console_client/src/VisualConsole.ts b/visual_console_client/src/VisualConsole.ts index 63e46771c0..868342b44b 100644 --- a/visual_console_client/src/VisualConsole.ts +++ b/visual_console_client/src/VisualConsole.ts @@ -10,7 +10,8 @@ import Item, { ItemType, ItemProps, ItemClickEvent, - ItemRemoveEvent + ItemRemoveEvent, + ItemMovedEvent } from "./Item"; import StaticGraph, { staticGraphPropsDecoder } from "./items/StaticGraph"; import Icon, { iconPropsDecoder } from "./items/Icon"; @@ -204,6 +205,8 @@ export default class VisualConsole { private readonly clickEventManager = new TypedEvent< ItemClickEvent >(); + // Event manager for move events. + private readonly movedEventManager = new TypedEvent(); // List of references to clean the event listeners. private readonly disposables: Disposable[] = []; @@ -216,6 +219,15 @@ export default class VisualConsole { // console.log(`Clicked element #${e.data.id}`, e); }; + /** + * React to a movement on an element. + * @param e Event object. + */ + private handleElementMovement: (e: ItemMovedEvent) => void = e => { + this.movedEventManager.emit(e); + // console.log(`Moved element #${e.item.props.id}`, e); + }; + /** * Clear some element references. * @param e Event object. @@ -264,6 +276,7 @@ export default class VisualConsole { this.elementIds.push(itemInstance.props.id); // Item event handlers. itemInstance.onClick(this.handleElementClick); + itemInstance.onMoved(this.handleElementMovement); itemInstance.onRemove(this.handleElementRemove); // Add the item to the DOM. this.containerRef.append(itemInstance.elementRef); @@ -552,7 +565,9 @@ export default class VisualConsole { * 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 { + public onItemClick( + listener: Listener> + ): Disposable { /* * The '.on' function returns a function which will clean the event * listener when executed. We store all the 'dispose' functions to @@ -564,6 +579,22 @@ export default class VisualConsole { return disposable; } + /** + * Add an event handler to the movement of the visual console elements. + * @param listener Function which is going to be executed when a linked console is moved. + */ + public onItemMoved(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.movedEventManager.on(listener); + this.disposables.push(disposable); + + return disposable; + } + /** * Enable the edition mode. */