From bc56c3ca7263172222a9101575db65b1875ec833 Mon Sep 17 00:00:00 2001
From: For-ACGN <38399410+For-ACGN@users.noreply.github.com>
Date: Sun, 26 Feb 2023 15:39:17 +0800
Subject: [PATCH] add function getTextWidth and improve showResults.

---
 javascript/tagAutocomplete.js | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/javascript/tagAutocomplete.js b/javascript/tagAutocomplete.js
index 82f02b3..e80d3bb 100644
--- a/javascript/tagAutocomplete.js
+++ b/javascript/tagAutocomplete.js
@@ -1,4 +1,4 @@
-const styleColors = {
+const styleColors = {
     "--results-bg": ["#0b0f19", "#ffffff"],
     "--results-border-color": ["#4b5563", "#e5e7eb"],
     "--results-border-width": ["1px", "1.5px"],
@@ -224,10 +224,22 @@ function isVisible(textArea) {
     let resultsDiv = gradioApp().querySelector('.autocompleteResults' + textAreaId);
     return resultsDiv.style.display === "block";
 }
+function getTextWidth(text, font) {
+  // re-use canvas object for better performance
+  var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
+  var context = canvas.getContext("2d"); 
+  context.font = font;
+  var metrics = context.measureText(text);
+  return metrics.width;
+}
 function showResults(textArea) {
     let textAreaId = getTextAreaIdentifier(textArea);
     let resultsDiv = gradioApp().querySelector('.autocompleteResults' + textAreaId);
     resultsDiv.style.display = "block";
+    let txt = textArea.value.slice(0,textArea.selectionEnd);
+    let width = getTextWidth(txt, document.fonts)*1.25;
+    let offset = width % textArea.clientWidth;
+    resultsDiv.style.left = offset+"px";
 }
 function hideResults(textArea) {
     let textAreaId = getTextAreaIdentifier(textArea);