Added an event handler for move events of the visual console items

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.

visual_console_client/src/Item.ts

@@ -70,6 +70,10 @@ export interface ItemRemoveEvent<Props extends ItemProps> {
   data: AnyObject;
 }
 
+export interface ItemMovedEvent extends Position {
+  item: VisualConsoleItem<ItemProps>;
+}
+
 /**
  * Extract a valid enum value from a raw label positi9on value.
  * @param labelPosition Raw value.
@@ -135,6 +139,8 @@ 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 moved events.
+  private readonly movedEventManager = new TypedEvent<ItemMovedEvent>();
   // Event manager for remove events.
   private readonly removeEventManager = new TypedEvent<
     ItemRemoveEvent<Props>
@@ -149,8 +155,8 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
     (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<Props extends ItemProps> {
     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<ItemMovedEvent>): 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.

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<ItemProps>
   >();
+  // Event manager for move events.
+  private readonly movedEventManager = new TypedEvent<ItemMovedEvent>();
   // 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<ItemClickEvent<ItemProps>>): Disposable {
+  public onItemClick(
+    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
@@ -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<ItemMovedEvent>): 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.
    */