From 50b05728b7bd4bc4b4c4a2dc654736e8ea8a0196 Mon Sep 17 00:00:00 2001
From: Alejandro Gallardo Escobar <alejandro.gallardo@artica.es>
Date: Tue, 18 Jun 2019 18:08:52 +0200
Subject: [PATCH] Limited the vc item resizement to its container

---
 visual_console_client/src/lib/index.ts | 47 +++++++++++++++++++++++---
 1 file changed, 42 insertions(+), 5 deletions(-)

diff --git a/visual_console_client/src/lib/index.ts b/visual_console_client/src/lib/index.ts
index eaad5bbab6..69b58d3732 100644
--- a/visual_console_client/src/lib/index.ts
+++ b/visual_console_client/src/lib/index.ts
@@ -571,10 +571,15 @@ export function addResizementListener(
   element: HTMLElement,
   onResized: (x: Position["x"], y: Position["y"]) => void
 ): Function {
+  const minWidth = 15;
+  const minHeight = 15;
+
   const resizeDraggable = document.createElement("div");
   resizeDraggable.className = "resize-draggable";
   element.appendChild(resizeDraggable);
 
+  // Container of the resizable element.
+  const container = element.parentElement as HTMLElement;
   // Store the initial draggable state.
   const isDraggable = element.draggable;
   // Init the coordinates.
@@ -584,6 +589,18 @@ export function addResizementListener(
   let lastMouseY: Position["y"] = 0;
   let mouseElementOffsetX: Position["x"] = 0;
   let mouseElementOffsetY: Position["y"] = 0;
+  // Init the bounds.
+  let containerBounds = container.getBoundingClientRect();
+  let containerOffset = getOffset(container);
+  let containerTop = containerOffset.top;
+  let containerBottom = containerTop + containerBounds.height;
+  let containerLeft = containerOffset.left;
+  let containerRight = containerLeft + containerBounds.width;
+  let elementOffset = getOffset(element);
+  let elementTop = elementOffset.top;
+  let elementLeft = elementOffset.left;
+  let borderWidth = window.getComputedStyle(element).borderWidth || "0";
+  let borderFix = Number.parseInt(borderWidth);
 
   // Will run onResized 32ms after its last execution.
   const debouncedResizement = debounce(
@@ -601,11 +618,20 @@ export function addResizementListener(
     let width = lastWidth + (e.pageX - lastMouseX);
     let height = lastHeight + (e.pageY - lastMouseY);
 
-    // TODO: Document.
-
-    // Minimum value.
-    if (width <= 0) width = 10;
-    if (height <= 0) height = 10;
+    if (width < minWidth) {
+      // Minimum value.
+      width = minWidth;
+    } else if (width + elementLeft - borderFix / 2 >= containerRight) {
+      // Limit the size to the container.
+      width = containerRight - elementLeft;
+    }
+    if (height < minHeight) {
+      // Minimum value.
+      height = minHeight;
+    } else if (height + elementTop - borderFix / 2 >= containerBottom) {
+      // Limit the size to the container.
+      height = containerBottom - elementTop;
+    }
 
     // Run the movement events.
     throttledResizement(width, height);
@@ -653,6 +679,17 @@ export function addResizementListener(
     mouseElementOffsetX = e.offsetX;
     mouseElementOffsetY = e.offsetY;
 
+    // Initialize the bounds.
+    containerBounds = container.getBoundingClientRect();
+    containerOffset = getOffset(container);
+    containerTop = containerOffset.top;
+    containerBottom = containerTop + containerBounds.height;
+    containerLeft = containerOffset.left;
+    containerRight = containerLeft + containerBounds.width;
+    elementOffset = getOffset(element);
+    elementTop = elementOffset.top;
+    elementLeft = elementOffset.left;
+
     // Listen to the mouse movement.
     document.addEventListener("mousemove", handleResize);
     // Listen to the moment when the mouse click is not pressed anymore.