#11093 grid position recolocation after drag

pandora_console/extras/mr/65.sql

@@ -2,6 +2,10 @@ START TRANSACTION;
 
 ALTER TABLE `tlayout`
 ADD COLUMN `grid_color` VARCHAR(45) NOT NULL DEFAULT '#cccccc' AFTER `maintenance_mode`,
-ADD COLUMN `grid_size` VARCHAR(45) NOT NULL DEFAULT '10px' AFTER `grid_color`;
+ADD COLUMN `grid_size` VARCHAR(45) NOT NULL DEFAULT '10' AFTER `grid_color`;
+
+ALTER TABLE `tlayout_template`
+ADD COLUMN `grid_color` VARCHAR(45) NOT NULL DEFAULT '#cccccc' AFTER `maintenance_mode`,
+ADD COLUMN `grid_size` VARCHAR(45) NOT NULL DEFAULT '10' AFTER `grid_color`;
 
 COMMIT;

pandora_console/include/javascript/pandora_visual_console.js

@@ -252,6 +252,20 @@ function createVisualConsole(
     });
     // VC Item moved.
     visualConsole.onItemMoved(function(e) {
+      if (
+        $("input[name=grid-mode]").prop("checked") &&
+        e.item.props.type !== 13 &&
+        e.item.props.type !== 21
+      ) {
+        var gridSize = $("#grid_size").val();
+        var positionX = e.newPosition.x;
+        var positionY = e.newPosition.y;
+        if (positionX % gridSize !== 0 || positionY % gridSize !== 0) {
+          e.newPosition.x = Math.floor(positionX / gridSize) * gridSize;
+          e.newPosition.y = Math.floor(positionY / gridSize) * gridSize;
+          e.item.move(e.newPosition.x, e.newPosition.y);
+        }
+      }
       var id = e.item.props.id;
       var data = {
         x: e.newPosition.x,

pandora_console/include/rest-api/models/VisualConsole/Container.php

@@ -91,8 +91,8 @@ final class Container extends Model
             'relationLineWidth' => (int) $data['relationLineWidth'],
             'hash'              => static::extractHash($data),
             'maintenanceMode'   => static::extractMaintenanceMode($data),
-            'grid_size'         => (int) $data['grid_size'],
+            'gridSize'          => (int) $data['grid_size'],
-            'grid_color'        => (string) $data['grid_color'],
+            'gridColor'         => (string) $data['grid_color'],
         ];
     }
 

pandora_console/operation/visual_console/view.php

@@ -493,7 +493,7 @@ if ($pure === false) {
                 html_print_input_number(
                     [
                         'name'   => 'grid_size',
-                        'value'  => $visualConsoleData['grid_size'],
+                        'value'  => $visualConsoleData['gridSize'],
                         'id'     => 'grid_size',
                         'min'    => 2,
                         'max'    => 50,
@@ -506,7 +506,7 @@ if ($pure === false) {
                 __('Grid color'),
                 html_print_input_color(
                     'grid_color',
-                    $visualConsoleData['grid_color'],
+                    $visualConsoleData['gridColor'],
                     'grid_color',
                     'w100p',
                     true

pandora_console/pandoradb.sql

@@ -1701,7 +1701,7 @@ CREATE TABLE IF NOT EXISTS `tlayout` (
   `auto_adjust` INT UNSIGNED NOT NULL DEFAULT 0,
   `maintenance_mode` TEXT,
   `grid_color` VARCHAR(45) NOT NULL DEFAULT '#cccccc',
-  `grid_size` VARCHAR(45) NOT NULL DEFAULT '10px',
+  `grid_size` VARCHAR(45) NOT NULL DEFAULT '10',
   PRIMARY KEY(`id`)
 ) ENGINE=InnoDB DEFAULT CHARSET=UTF8MB4;
 
@@ -3668,6 +3668,8 @@ CREATE TABLE IF NOT EXISTS `tlayout_template` (
   `is_favourite` INT UNSIGNED NOT NULL DEFAULT 0,
   `auto_adjust` INT UNSIGNED NOT NULL DEFAULT 0,
   `maintenance_mode` TEXT,
+  `grid_color` VARCHAR(45) NOT NULL DEFAULT '#cccccc',
+  `grid_size` VARCHAR(45) NOT NULL DEFAULT '10',
   PRIMARY KEY(`id`)
 ) ENGINE=InnoDB DEFAULT CHARSET=UTF8MB4;