From ff51d7c9c357a5a7504ac5a74ffce33c11b0410f Mon Sep 17 00:00:00 2001
From: onlyexeption <ibarakov@infragistics.com>
Date: Thu, 3 Oct 2024 11:18:21 +0300
Subject: [PATCH] feat(tile-manager): implement base resizing logic

---
 .../themes/tile-manager.base.scss             | 14 +++--
 .../tile-manager/themes/tile.base.scss        | 41 +++++++++++++-
 src/components/tile-manager/tile.ts           | 56 ++++++++++++++++++-
 3 files changed, 102 insertions(+), 9 deletions(-)

diff --git a/src/components/tile-manager/themes/tile-manager.base.scss b/src/components/tile-manager/themes/tile-manager.base.scss
index 770bd22f5..633d166fe 100644
--- a/src/components/tile-manager/themes/tile-manager.base.scss
+++ b/src/components/tile-manager/themes/tile-manager.base.scss
@@ -3,9 +3,13 @@
 
 :host {
     display: grid;
-    grid-template-columns: auto auto auto;
-    grid-auto-flow: column;
-    gap: 20px;
-    width: fit-content;
-    height: fit-content;
+    grid-template-columns: repeat(auto-fit, minmax(20px, auto));
+    grid-template-rows: repeat(auto-fit, minmax(20px, auto));
+    grid-auto-columns: minmax(20px, 1fr);
+    grid-auto-rows: minmax(20px, 1fr);
+    grid-gap: 10px;
+    grid-auto-flow: dense;
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 100%;
 }
diff --git a/src/components/tile-manager/themes/tile.base.scss b/src/components/tile-manager/themes/tile.base.scss
index 6cf8d6cf1..905420bbb 100644
--- a/src/components/tile-manager/themes/tile.base.scss
+++ b/src/components/tile-manager/themes/tile.base.scss
@@ -1,9 +1,44 @@
 @use 'styles/common/component';
 @use 'styles/utilities' as *;
 
-[part='base'] {
-    width: 200px;
-    height: 200px;
+:host {
+    grid-row: span 3;
+    grid-column: span 3;
     border: 5px solid blue;
     background-color: yellow;
+    position: relative;
+    box-sizing: border-box;
+}
+
+.resize-handle {
+    position: absolute;
+    width: 15px;
+    height: 15px;
+    right: 0;
+    bottom: 0;
+    cursor: se-resize;
+    background: rgba(0, 0, 0);
+    z-index: 999;
+}
+
+.resizer {
+    position: absolute;
+    background: pink;  /* Color for visibility */
+    z-index: 10;
+}
+  
+.resizer.right {
+    top: 0;
+    right: -4px;
+    bottom: 0;
+    width: 2px;
+    cursor: ew-resize;
+}
+
+.resizer.bottom {
+    left: 0;
+    right: 0;
+    bottom: -4px;
+    height: 2px;
+    cursor: ns-resize;
 }
diff --git a/src/components/tile-manager/tile.ts b/src/components/tile-manager/tile.ts
index 6420fa7cc..7874b53ae 100644
--- a/src/components/tile-manager/tile.ts
+++ b/src/components/tile-manager/tile.ts
@@ -1,4 +1,4 @@
-import { LitElement, css, html } from 'lit';
+import { LitElement, html } from 'lit';
 
 import { registerComponent } from '../common/definitions/register.js';
 import { styles } from './themes/tile.base.css.js';
@@ -12,17 +12,71 @@ import { styles } from './themes/tile.base.css.js';
 export default class IgcTileComponent extends LitElement {
   public static readonly tagName = 'igc-tile';
   public static override styles = [styles];
+  protected activeResizer = '';
 
   /* blazorSuppress */
   public static register() {
     registerComponent(IgcTileComponent);
   }
 
+  startResize(event: MouseEvent) {
+    event.preventDefault();
+
+    if (event.target instanceof Element) {
+      this.activeResizer = event.target.classList.contains('right')
+        ? 'right'
+        : event.target.classList.contains('bottom')
+          ? 'bottom'
+          : 'handle';
+    }
+
+    this.onResizing = this.onResizing.bind(this);
+    this.stopResize = this.stopResize.bind(this);
+
+    window.addEventListener('mousemove', this.onResizing);
+    window.addEventListener('mouseup', this.stopResize);
+  }
+
+  onResizing(event: MouseEvent) {
+    const startPos = this.getBoundingClientRect();
+
+    const newWidth = event.clientX - startPos.left;
+    const newHeight = event.clientY - startPos.top;
+
+    const colSpan = Math.max(1, Math.floor(newWidth / 30));
+    const rowSpan = Math.max(1, Math.floor(newHeight / 30));
+
+    if (this.activeResizer === 'right' || this.activeResizer === 'handle') {
+      this.style.gridColumn = `span ${colSpan}`;
+    }
+
+    if (this.activeResizer === 'bottom' || this.activeResizer === 'handle') {
+      this.style.gridRow = `span ${rowSpan}`;
+    }
+  }
+
+  stopResize() {
+    window.removeEventListener('mousemove', this.onResizing);
+    window.removeEventListener('mouseup', this.stopResize);
+  }
+
   protected override render() {
     return html`
       <div part="base">
         <slot name="header"></slot>
         <slot></slot>
+        <div
+          class="resize-handle"
+          @mousedown=${this.startResize.bind(this)}
+        ></div>
+        <div
+          class="resizer right"
+          @mousedown=${this.startResize.bind(this)}
+        ></div>
+        <div
+          class="resizer bottom"
+          @mousedown=${this.startResize.bind(this)}
+        ></div>
       </div>
     `;
   }