From 66068c0871b905bb38a45d8d0070f9a82bb6f442 Mon Sep 17 00:00:00 2001
From: 1998-felix <felix.gateru@gmail.com>
Date: Mon, 18 Mar 2024 17:51:58 +0300
Subject: [PATCH] feat: Make grid visible on resizing

Signed-off-by: 1998-felix <felix.gateru@gmail.com>
---
 ui/web/static/css/dashboards.css |  2 +-
 ui/web/static/js/dashboard.js    | 13 ++++++++-----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/ui/web/static/css/dashboards.css b/ui/web/static/css/dashboards.css
index a5b12521..7ed3ff1e 100644
--- a/ui/web/static/css/dashboards.css
+++ b/ui/web/static/css/dashboards.css
@@ -11,7 +11,7 @@ SPDX-License-Identifier: Apache-2.0 */
 }
 
 .grid-editable {
-  background-size: 25px 25px;
+  background-size: 10px 10px;
   background-image: linear-gradient(to right, lightgrey 1px, transparent 1px),
     linear-gradient(to bottom, lightgrey 1px, transparent 1px);
   background-position: 5px 5px;
diff --git a/ui/web/static/js/dashboard.js b/ui/web/static/js/dashboard.js
index e96e217f..8dfabe5f 100644
--- a/ui/web/static/js/dashboard.js
+++ b/ui/web/static/js/dashboard.js
@@ -1,9 +1,8 @@
 // Copyright (c) Abstract Machines
 // SPDX-License-Identifier: Apache-2.0
 const gridClass = ".grid";
-const editableGridClass = ".grid-editable";
 var grid = initGrid(layout);
-const gridSize = 25;
+const gridSize = 20;
 const previousSizes = new Map();
 let isResizing = false;
 let currentFinalizeResizeFunction = null;
@@ -137,13 +136,11 @@ function loadLayout(savedLayout) {
 // widgets around the canvas
 function editableCanvas() {
   removeNoWidgetPlaceholder();
-  let ltgrid = document.querySelector(".grid");
-  ltgrid.classList.add("grid-editable");
   try {
     if (grid) {
       grid.destroy(true);
     }
-    grid = new Muuri(editableGridClass, {
+    grid = new Muuri(gridClass, {
       dragEnabled: true,
       dragHandle: ".item-content",
     });
@@ -196,6 +193,8 @@ const resizeObserver = new ResizeObserver((entries) => {
       width: target.clientWidth,
       height: target.clientHeight,
     };
+    let ltgrid = document.querySelector(".grid");
+    ltgrid.classList.add("grid-editable");
     const contentEl = target.querySelector(".item-content");
     const gridRightPosition = target.parentNode.getBoundingClientRect().right;
     const widgetRightPosition = target.getBoundingClientRect().right;
@@ -203,6 +202,8 @@ const resizeObserver = new ResizeObserver((entries) => {
     if (isOverflowing) {
       target.style.maxWidth = target.clientWidth + "px";
       target.style.maxHeight = target.clientHeight + "px";
+      grid.refreshItems();
+      grid.layout(true);
     } else {
       target.style.maxWidth = "none";
       target.style.maxHeight = "none";
@@ -281,6 +282,8 @@ function snapToGrid(target, entry) {
   resizeWidgetContent(target, entry, itemContentWidth, itemContentHeight);
   document.removeEventListener("mouseup", currentFinalizeResizeFunction);
   isResizing = false;
+  let ltgrid = document.querySelector(".grid");
+  ltgrid.classList.remove("grid-editable");
 }
 
 function resizeWidgetContent(target, entry, itemContentWidth, itemContentHeight) {