From 7d932b936c7814349e50204a7979d2d0f5b0ea73 Mon Sep 17 00:00:00 2001
From: PikachuEXE <pikachuexe@gmail.com>
Date: Thu, 23 Nov 2023 11:41:58 +0800
Subject: [PATCH] * Make tooltip auto-wrap

---
 .../components/ft-tooltip/ft-tooltip.css      | 10 ++---
 .../components/ft-tooltip/ft-tooltip.js       | 45 ++++++++++++++++++-
 .../components/ft-tooltip/ft-tooltip.vue      |  2 +
 3 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/src/renderer/components/ft-tooltip/ft-tooltip.css b/src/renderer/components/ft-tooltip/ft-tooltip.css
index 304b6f9b63e13..e0f5ba3b56fd4 100644
--- a/src/renderer/components/ft-tooltip/ft-tooltip.css
+++ b/src/renderer/components/ft-tooltip/ft-tooltip.css
@@ -93,13 +93,11 @@
 }
 
 .text.allowNewlines {
-  white-space: pre-wrap;
+  white-space: pre;
   text-align: start;
-
-  @media only screen and (min-width: 1000px) {
-    /* Enough space to NOT wrap */
-    white-space: pre;
-  }
+}
+.text.allowNewlines.wrap {
+  white-space: pre-wrap;
 }
 
 .tooltip {
diff --git a/src/renderer/components/ft-tooltip/ft-tooltip.js b/src/renderer/components/ft-tooltip/ft-tooltip.js
index 66ba1d1dd6209..bf2c5334ac5cf 100644
--- a/src/renderer/components/ft-tooltip/ft-tooltip.js
+++ b/src/renderer/components/ft-tooltip/ft-tooltip.js
@@ -2,6 +2,26 @@ import { defineComponent } from 'vue'
 
 let idCounter = 0
 
+function isOutOfViewport(el) {
+  if (el == null) { return {} }
+
+  const bounding = el.getBoundingClientRect()
+  const out = {}
+
+  out.top = bounding.top < 0
+  out.left = bounding.left < 0
+  out.bottom = bounding.bottom > (window.innerHeight || document.documentElement.clientHeight)
+  out.right = bounding.right > (window.innerWidth || document.documentElement.clientWidth)
+  out.horizontal = out.left || out.right
+  out.veritical = out.top || out.bottom
+  out.any = out.top || out.left || out.bottom || out.right
+  out.all = out.top && out.left && out.bottom && out.right
+
+  out.bounding = bounding
+
+  return out
+}
+
 export default defineComponent({
   name: 'FtTooltip',
   props: {
@@ -23,7 +43,28 @@ export default defineComponent({
     const id = `ft-tooltip-${++idCounter}`
 
     return {
-      id
+      id,
+      isTooltipOutOfViewportResult: {}
     }
-  }
+  },
+  computed: {
+    tooltipOutsideViewPort() {
+      return this.isTooltipOutOfViewportResult.horizontal
+    },
+  },
+  mounted() {
+    this.updateSizeRelatedStates()
+    window.addEventListener('resize', this.updateSizeRelatedStates)
+  },
+  destroyed() {
+    window.removeEventListener('resize', this.updateSizeRelatedStates)
+  },
+  methods: {
+    updateSizeRelatedStates() {
+      if (this.allowNewlines) {
+        // Only when newlines allowed have issue with wrapping
+        this.isTooltipOutOfViewportResult = isOutOfViewport(this.$refs.tooltip)
+      }
+    },
+  },
 })
diff --git a/src/renderer/components/ft-tooltip/ft-tooltip.vue b/src/renderer/components/ft-tooltip/ft-tooltip.vue
index 494ee5af1f98c..6996d28363094 100644
--- a/src/renderer/components/ft-tooltip/ft-tooltip.vue
+++ b/src/renderer/components/ft-tooltip/ft-tooltip.vue
@@ -9,10 +9,12 @@
     </button>
     <p
       :id="id"
+      ref="tooltip"
       class="text"
       :class="{
         [position]: true,
         allowNewlines,
+        wrap: tooltipOutsideViewPort,
       }"
       role="tooltip"
       v-text="tooltip"