From 494cd52de4cbe2c17822ca71070836bb6fb3c19c Mon Sep 17 00:00:00 2001
From: Marc Durdin <marc@keyman.com>
Date: Wed, 19 Jun 2019 08:41:02 +1000
Subject: [PATCH] Fix kmw-key-square positioning and adjust findNearestKey for
 over-key situations

---
 web/source/kmwembedded.ts           |  6 ++++++
 web/source/kmwnative.ts             |  7 +++++++
 web/source/osk/visualKeyboard.ts    | 10 ++++++++--
 web/source/resources/osk/kmwosk.css | 10 ++++++++--
 4 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/web/source/kmwembedded.ts b/web/source/kmwembedded.ts
index 662350e3d9..8225b30ac1 100644
--- a/web/source/kmwembedded.ts
+++ b/web/source/kmwembedded.ts
@@ -182,6 +182,12 @@ namespace com.keyman.osk {
               break;
             }
           }
+          // Set the kmw-key-square position
+          ks=key.style;
+          ks.bottom=(bottom-pad/2)+'px';
+          ks.height=ks.minHeight=(rowHeight)+'px';
+
+          // Set the kmw-key position
           ks=key.childNodes[j].style;
           ks.bottom=rs.bottom;
           ks.height=ks.minHeight=(rowHeight-pad)+'px';
diff --git a/web/source/kmwnative.ts b/web/source/kmwnative.ts
index 2a521617b9..56e26ad594 100644
--- a/web/source/kmwnative.ts
+++ b/web/source/kmwnative.ts
@@ -445,6 +445,13 @@ namespace com.keyman.osk {
               break;
             }
           }
+
+          // Set the kmw-key-square position
+          ks=key.style;
+          ks.bottom=(bottom-pad/2)+'px';
+          ks.height=ks.minHeight=(rowHeight)+'px';
+
+          // Set the kmw-key position
           ks=key.childNodes[j].style;
           ks.bottom=rs.bottom;
           ks.height=ks.minHeight=(rowHeight-pad)+'px';
diff --git a/web/source/osk/visualKeyboard.ts b/web/source/osk/visualKeyboard.ts
index fed79d01e0..f9b3e95417 100644
--- a/web/source/osk/visualKeyboard.ts
+++ b/web/source/osk/visualKeyboard.ts
@@ -840,7 +840,7 @@ namespace com.keyman.osk {
       let keyman = com.keyman.singleton;
       
       // We need to compute the 'local', keyboard-based coordinates for the touch.
-      let kbdCoords = keyman.util.getAbsolute(this.kbdDiv);
+      let kbdCoords = keyman.util.getAbsolute(this.kbdDiv.firstChild as HTMLElement);
       let offsetCoords = {x: touch.pageX - kbdCoords.x, y: touch.pageY - kbdCoords.y};
 
       let layerGroup = this.kbdDiv.firstChild as HTMLDivElement;  // Always has proper dimensions, unlike kbdDiv itself.
@@ -1223,12 +1223,18 @@ namespace com.keyman.osk {
         }
         x1 = childNode.offsetLeft;
         x2 = x1 + childNode.offsetWidth;
-        dx =x1 - x;
+        if(x >= x1 && x <= x2) {
+          // Within the key square
+          return <KeyElement> childNode.firstChild;
+        }
+        dx = x1 - x;
         if(dx >= 0 && dx < dxMin) {
+          // To right of key
           k0 = k; dxMin = dx;
         }
         dx = x - x2;
         if(dx >= 0 && dx < dxMin) {
+          // To left of key
           k0 = k; dxMin = dx;
         }
       }
diff --git a/web/source/resources/osk/kmwosk.css b/web/source/resources/osk/kmwosk.css
index 4e4d0b36d2..fc157647eb 100644
--- a/web/source/resources/osk/kmwosk.css
+++ b/web/source/resources/osk/kmwosk.css
@@ -43,6 +43,10 @@
   transform: translateY(-50%);
 }
 
+.tablet .kmw-suggestion-text {
+  font-size: 0.75em;
+}
+
 .phone.windows .kmw-key-row{max-width:80%;}
 .phone.windows .kmw-key {position:static;}
 
@@ -74,6 +78,7 @@
   text-align: center;
   border-radius: 5px;
   border-bottom: solid 1px #8a8d90;
+  vertical-align: top;
 }
 
 .ios .kmw-suggestion-text {
@@ -113,7 +118,8 @@
   background-color: #333;
   display:inline-block;
   text-align: center;
-  border-radius: 5px
+  border-radius: 5px;
+  vertical-align: top;
 }
 
 .phone.android .kmw-suggestion-text {
@@ -130,7 +136,7 @@
 .tablet .kmw-key-row {position:fixed;width:100%;height:20%;margin:0;padding:0;border:none;overflow:hidden;}
 .tablet .kmw-key-square {position:fixed; display:inline-block; height:100%; max-height:100%; overflow:hidden; margin:0 0 0 0; z-index: 10000; padding:0 0 0 0; background-color:transparent;cursor:default; border:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}
 .tablet .kmw-key-square-ex {display:inline-block;box-sizing:border-box;margin:0 0 0 5px;z-index:10001; padding:0; background-color:transparent; cursor:default;}  
-.tablet .kmw-key {display:block;position:fixed;margin:2px;border-radius:8px;text-align:center;box-sizing:border-box;overflow:visible;
+.tablet .kmw-key {display:block;position:fixed;margin:0px;border-radius:8px;text-align:center;box-sizing:border-box;overflow:visible;
         border:solid 2px #999999;
         box-shadow: 0px -1px 1px 0px rgba(0,0,0,1) inset;
  }