Fixed to adjust message position if it is placed outside the Grid. (#418

)

* Fixed to adjust message position if the is is placed outside the Grid.

* update

.vscode/settings.json

@@ -7,7 +7,7 @@
         "vue"
     ],
     "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": true
+        "source.fixAll.eslint": "explicit"
     },
     "[markdown]": {
         "editor.formatOnSave": true,

packages/cheetah-grid/.vscode/settings.json

@@ -1,8 +1,8 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.fixAll.stylelint": true,
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit"
   },
   "editor.codeActionsOnSaveTimeout": 10000,
 }

packages/cheetah-grid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cheetah-grid",
-  "version": "1.13.1",
+  "version": "1.13.2",
   "description": "Cheetah Grid is a high performance grid engine that works on canvas",
   "keywords": [
     "spreadsheet",

packages/cheetah-grid/src/js/columns/message/internal/MessageElement.ts

@@ -6,6 +6,7 @@ const CLASSNAME = "cheetah-grid__message-element";
 const MESSAGE_CLASSNAME = `${CLASSNAME}__message`;
 const HIDDEN_CLASSNAME = `${CLASSNAME}--hidden`;
 const SHOWN_CLASSNAME = `${CLASSNAME}--shown`;
+const LEFT_DIFF_CSS_PROP_NAME = "--cheetah-grid-message-element-left-diff";
 
 function createMessageDomElement(): HTMLElement {
   require("@/columns/message/internal/MessageElement.css");
@@ -55,6 +56,8 @@ export class MessageElement {
       rootElement.classList.remove(HIDDEN_CLASSNAME);
 
       messageElement.textContent = message.message;
+
+      this._adjustStyle(grid, col, row);
     } else {
       this._detach();
     }
@@ -92,31 +95,31 @@ export class MessageElement {
         grid.getCellRange(col, frozenRowCount - 1)
       );
       if (top < frozenRect.bottom) {
-        return false; //範囲外
+        return false; // Outside the rectangle.
       }
     } else {
       if (top < 0) {
-        return false; //範囲外
+        return false; // Outside the rectangle.
       }
     }
     if (col >= frozenColCount && frozenColCount > 0) {
       const { rect: frozenRect } = grid.getAttachCellsArea(
         grid.getCellRange(frozenColCount - 1, row)
       );
       if (left < frozenRect.right) {
-        return false; //範囲外
+        return false; // Outside the rectangle.
       }
     } else {
       if (left < 0) {
-        return false; //範囲外
+        return false; // Outside the rectangle.
       }
     }
     const { offsetHeight, offsetWidth } = element;
     if (offsetHeight < top) {
-      return false; //範囲外
+      return false; // Outside the rectangle.
     }
     if (offsetWidth < left) {
-      return false; //範囲外
+      return false; // Outside the rectangle.
     }
 
     rootElement.style.top = `${top.toFixed()}px`;
@@ -127,4 +130,34 @@ export class MessageElement {
     }
     return true;
   }
+  /**
+   * If the message is placed outside the Grid, adjust its position.
+   */
+  _adjustStyle<T>(grid: ListGridAPI<T>, col: number, row: number): void {
+    const rootElement = this._rootElement;
+    const element = grid.getElement();
+
+    const messageRect = rootElement.getBoundingClientRect();
+    const elementRect = element.getBoundingClientRect();
+
+    let messageLeft = messageRect.left;
+    if (elementRect.right < messageRect.right) {
+      const overflow = messageRect.right - elementRect.right;
+      messageLeft -= overflow;
+    }
+    if (messageLeft < elementRect.left) {
+      messageLeft = elementRect.left;
+    }
+
+    if (messageLeft !== messageRect.left) {
+      const diff = messageRect.left - messageLeft;
+      const { rect } = grid.getAttachCellsArea(grid.getCellRange(col, row));
+      rootElement.style.left = `${(rect.left - diff).toFixed()}px`;
+
+      const diffCss = `${diff.toFixed()}px`;
+      rootElement.style.setProperty(LEFT_DIFF_CSS_PROP_NAME, diffCss);
+    } else {
+      rootElement.style.removeProperty(LEFT_DIFF_CSS_PROP_NAME);
+    }
+  }
 }

packages/vue-cheetah-grid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-cheetah-grid",
-  "version": "1.13.1",
+  "version": "1.13.2",
   "description": "Cheetah Grid for Vue.js",
   "main": "lib/index.js",
   "unpkg": "dist/vueCheetahGrid.js",