Visual Console Refactor: improvements into the item

Former-commit-id: abd99add5ae7d791ebee12b717b4e5b8a440d25c

visual_console/src/Item.ts

@@ -180,7 +180,7 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
     // From this point, things which rely on this.props can access to the changes.
 
     // Check if we should re-render.
-    if (this.shouldBeUpdated(newProps)) this.render(prevProps);
+    if (this.shouldBeUpdated(prevProps, newProps)) this.render(prevProps);
   }
 
   /**
@@ -191,11 +191,12 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
    *
    * Override this function to perform a different comparision depending on the item needs.
    *
+   * @param prevProps
    * @param newProps
    * @return Whether the difference is meaningful enough to perform DOM changes or not.
    */
-  protected shouldBeUpdated(newProps: Props): boolean {
+  protected shouldBeUpdated(prevProps: Props, newProps: Props): boolean {
-    return this.props !== newProps;
+    return prevProps !== newProps;
   }
 
   /**
@@ -204,18 +205,12 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
    */
   public render(prevProps: Props | null = null): void {
     // Move box.
-    if (!prevProps || prevProps.x !== this.props.x) {
+    if (!prevProps || this.positionChanged(prevProps, this.props)) {
-      this.elementRef.style.left = `${this.props.x}px`;
+      this.moveElement(this.props.x, this.props.y);
-    }
-    if (!prevProps || prevProps.y !== this.props.y) {
-      this.elementRef.style.top = `${this.props.y}px`;
     }
     // Resize box.
-    if (!prevProps || prevProps.width !== this.props.width) {
+    if (!prevProps || this.sizeChanged(prevProps, this.props)) {
-      this.elementRef.style.width = `${this.props.width}px`;
+      this.resizeElement(this.props.width, this.props.height);
-    }
-    if (!prevProps || prevProps.height !== this.props.height) {
-      this.elementRef.style.height = `${this.props.height}px`;
     }
 
     this.childElementRef.innerHTML = this.createDomElement().innerHTML;
@@ -234,37 +229,80 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
   }
 
   /**
-   * To move the item.
+   * Compare the previous and the new position and return
+   * a boolean value in case the position changed.
+   * @param prevPosition
+   * @param newPosition
+   * @return Whether the position changed or not.
+   */
+  protected positionChanged(
+    prevPosition: Position,
+    newPosition: Position
+  ): boolean {
+    return prevPosition.x !== newPosition.x || prevPosition.y !== newPosition.y;
+  }
+
+  /**
+   * Move the DOM container.
    * @param x Horizontal axis position.
    * @param y Vertical axis position.
    */
-  public move(x: number, y: number): void {
+  protected moveElement(x: number, y: number): void {
-    // Compare position.
-    if (x === this.props.x && y === this.props.y) return;
-    // Update position. Change itemProps instead of props to avoid re-render.
-    this.itemProps.x = x;
-    this.itemProps.y = y;
-    // Move element.
     this.elementRef.style.left = `${x}px`;
     this.elementRef.style.top = `${y}px`;
   }
 
   /**
-   * To resize the item.
+   * Update the position into the properties and move the DOM container.
-   * @param width Width.
+   * @param x Horizontal axis position.
-   * @param height Height.
+   * @param y Vertical axis position.
    */
-  public resize(width: number, height: number): void {
+  public move(x: number, y: number): void {
-    // Compare size.
+    this.moveElement(x, y);
-    if (width === this.props.width && height === this.props.height) return;
+    this.itemProps = {
-    // Update size. Change itemProps instead of props to avoid re-render.
+      ...this.props, // Object spread: http://es6-features.org/#SpreadOperator
-    this.itemProps.width = width;
+      x,
-    this.itemProps.height = height;
+      y
-    // Resize element.
+    };
+  }
+
+  /**
+   * Compare the previous and the new size and return
+   * a boolean value in case the size changed.
+   * @param prevSize
+   * @param newSize
+   * @return Whether the size changed or not.
+   */
+  protected sizeChanged(prevSize: Size, newSize: Size): boolean {
+    return (
+      prevSize.width !== newSize.width || prevSize.height !== newSize.height
+    );
+  }
+
+  /**
+   * Resize the DOM container.
+   * @param width
+   * @param height
+   */
+  protected resizeElement(width: number, height: number): void {
     this.elementRef.style.width = `${width}px`;
     this.elementRef.style.height = `${height}px`;
   }
 
+  /**
+   * Update the size into the properties and resize the DOM container.
+   * @param width
+   * @param height
+   */
+  public resize(width: number, height: number): void {
+    this.resizeElement(width, height);
+    this.itemProps = {
+      ...this.props, // Object spread: http://es6-features.org/#SpreadOperator
+      width,
+      height
+    };
+  }
+
   /**
    * To 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.