feat: Add snap to grid effect on layout

Signed-off-by: felix.gateru <[email protected]>
absmach · Feb 27, 2024 · 0250027 · 0250027
1 parent d34175f
commit 0250027
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 9 deletions.
diff --git a/ui/web/static/css/dashboards.css b/ui/web/static/css/dashboards.css
@@ -4,6 +4,10 @@ SPDX-License-Identifier: Apache-2.0 */
 
 .grid {
   position: relative;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+  grid-gap: 1rem;
+  padding: 1rem;
 }
 
 .item {
@@ -108,3 +112,7 @@ SPDX-License-Identifier: Apache-2.0 */
 .min-vh-50 {
   min-height: 50vh;
 }
+
+.resize-helper {
+  border: 10px dotted #000; /* Customize as needed */
+}
diff --git a/ui/web/static/js/singleDashboard.js b/ui/web/static/js/singleDashboard.js
@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 var gridClass = ".grid";
 var grid = initGrid(layout);
+const gridSize = 50;
 
 // Editable canvas is used to make the canvas editable allowing the user to add widgets and be able to move the
 // widgets around the canvas
@@ -261,9 +262,13 @@ const previousSizes = new Map();
 const resizeObserver = new ResizeObserver((entries) => {
   for (let entry of entries) {
     const { target } = entry;
+
+    let snappedWidth = Math.round(target.clientWidth / gridSize) * gridSize;
+    let snappedHeight = Math.round(target.clientHeight / gridSize) * gridSize;
+
     const previousSize = previousSizes.get(target) || {
-      width: target.clientWidth,
-      height: target.clientHeight,
+      width: snappedWidth,
+      height: snappedHeight,
     };
     const contentEl = target.querySelector(".item-content");
     const gridRightPosition = target.parentNode.getBoundingClientRect().right;
@@ -277,23 +282,23 @@ const resizeObserver = new ResizeObserver((entries) => {
       target.style.maxHeight = "none";
     }
 
-    if (widgetRightPosition < gridRightPosition - 5) {
+    if (widgetRightPosition < gridRightPosition - gridSize) {
       // Calculate the change in width and height
-      var widthChange = target.clientWidth - previousSize.width;
-      var heightChange = target.clientHeight - previousSize.height;
+      var widthChange = snappedWidth - previousSize.width;
+      var heightChange = snappedHeight - previousSize.height;
       var itemContentWidth =
         parseInt(window.getComputedStyle(contentEl).getPropertyValue("width")) + widthChange;
       var itemContentHeight =
         parseInt(window.getComputedStyle(contentEl).getPropertyValue("height")) + heightChange;
 
       // Update the previous size for the next callback
       previousSizes.set(target, {
-        width: target.clientWidth,
-        height: target.clientHeight,
+        width: snappedWidth,
+        height: snappedHeight,
       });
 
-      target.style.width = target.clientWidth + "px";
-      target.style.height = target.clientHeight + "px";
+      target.style.width = snappedWidth + "px";
+      target.style.height = snappedHeight + "px";
 
       contentEl.style.width = itemContentWidth + "px";
       contentEl.style.height = itemContentHeight + "px";

diff --git a/ui/web/templates/dashboard.html b/ui/web/templates/dashboard.html
@@ -14,6 +14,9 @@
         crossorigin="anonymous"
         referrerpolicy="no-referrer"
       ></script>
+      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
+      <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
+      <script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
     </head>
     <body>
       {{ template "navbar" . }}