#11093 VC items movement like grid when its enable

pandora_console/operation/visual_console/view.php

@@ -850,9 +850,11 @@ if ($edit_capable === true) {
             size = $('#grid_size').val();
             display_grid(color,size);
             $('#grid_img').removeClass('invisible');
+            visualConsoleManager.visualConsole.updateGridSelected(true);
         } else {
             $('#div-grid').remove();
             $('#grid_img').addClass('invisible');
+            visualConsoleManager.visualConsole.updateGridSelected(false);
         }
     });
 
@@ -925,6 +927,7 @@ if ($edit_capable === true) {
                 console.error(err);
             }
         });
+        visualConsoleManager.visualConsole.updateGridSize(size);
     }
 
     // Enable/disable the maintenance mode.

visual_console_client/src/Item.ts

@@ -239,7 +239,7 @@ export function titleItem(id: number): string {
  */
 abstract class VisualConsoleItem<Props extends ItemProps> {
   // Properties of the item.
-  private itemProps: Props;
+  public itemProps: Props;
   // Metadata of the item.
   private _metadata: ItemMeta;
   // Reference to the DOM element which will contain the item.
@@ -955,8 +955,10 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
     if (!prevMeta || prevMeta.isSelected !== this.meta.isSelected) {
       if (this.meta.isSelected) {
         this.elementRef.classList.add("is-selected");
+        this.elementRef.setAttribute("id", "item-selected-move");
       } else {
         this.elementRef.classList.remove("is-selected");
+        this.elementRef.removeAttribute("id");
       }
     }
   }

visual_console_client/src/VisualConsole.ts

@@ -160,6 +160,8 @@ export interface VisualConsoleProps extends Size {
   isFavorite: boolean;
   relationLineWidth: number;
   maintenanceMode: MaintenanceModeInterface | null;
+  gridSize: number | 10;
+  gridSelected: boolean | false | false;
 }
 
 export interface MaintenanceModeInterface {
@@ -188,7 +190,9 @@ export function visualConsolePropsDecoder(
     backgroundColor,
     isFavorite,
     relationLineWidth,
-    maintenanceMode
+    maintenanceMode,
+    gridSize,
+    gridSelected
   } = data;
 
   if (id == null || isNaN(parseInt(id))) {
@@ -210,6 +214,8 @@ export function visualConsolePropsDecoder(
     isFavorite: parseBoolean(isFavorite),
     relationLineWidth: parseIntOr(relationLineWidth, 0),
     maintenanceMode: maintenanceMode,
+    gridSize: parseIntOr(gridSize, 10),
+    gridSelected: false,
     ...sizePropsDecoder(data)
   };
 }
@@ -279,6 +285,24 @@ export default class VisualConsole {
    * @param e Event object.
    */
   private handleElementMovement: (e: ItemMovedEvent) => void = e => {
+    var type = e.item.itemProps.type;
+    if (type !== 13 && type !== 21 && this.props.gridSelected === true) {
+      var gridSize = this.props.gridSize;
+      var positionX = e.newPosition.x;
+      var positionY = e.newPosition.y;
+      if (positionX % gridSize !== 0 || positionY % gridSize !== 0) {
+        var x = Math.floor(positionX / gridSize) * gridSize;
+        var y = Math.floor(positionY / gridSize) * gridSize;
+        let elemntSelected = document.getElementById(
+          "item-selected-move"
+        ) as HTMLElement;
+        elemntSelected.setAttribute(
+          "style",
+          "top:" + y + "px !important; left:" + x + "px !important"
+        );
+        return;
+      }
+    }
     // Move their relation lines.
     const itemId = e.item.props.id;
     const relations = this.getItemRelations(itemId);
@@ -1269,6 +1293,22 @@ export default class VisualConsole {
     this.containerRef.classList.add("is-editing");
   }
 
+  /**
+   * Update the gridSize.
+   */
+  public updateGridSize(gridSize: string): void {
+    this._props.gridSize = parseInt(gridSize);
+    this.props.gridSize = parseInt(gridSize);
+  }
+
+  /**
+   * Update the gridSize.
+   */
+  public updateGridSelected(gridSelected: boolean): void {
+    this._props.gridSelected = gridSelected;
+    this.props.gridSelected = gridSelected;
+  }
+
   /**
    * Select an item.
    * @param itemId Item Id.