From 8fed3897186451ed76f5d5fc8a5cc357fb1cd5ce Mon Sep 17 00:00:00 2001
From: jahorton <jahorton@sil.org>
Date: Mon, 14 Jun 2021 10:36:41 +0700
Subject: [PATCH] refactor(web): simplified calibration control flow

---
 .../src/keyboards/activeLayout.ts             | 18 +++++-----
 web/source/osk/visualKeyboard.ts              | 35 ++++---------------
 2 files changed, 17 insertions(+), 36 deletions(-)

diff --git a/common/core/web/keyboard-processor/src/keyboards/activeLayout.ts b/common/core/web/keyboard-processor/src/keyboards/activeLayout.ts
index 94636e90ec..6cdddf7d83 100644
--- a/common/core/web/keyboard-processor/src/keyboards/activeLayout.ts
+++ b/common/core/web/keyboard-processor/src/keyboards/activeLayout.ts
@@ -29,6 +29,7 @@ namespace com.keyman.keyboards {
     private baseKeyEvent: text.KeyEvent;
     isMnemonic: boolean = false;
 
+    proportionalPad: number;
     proportionalX: number;
     proportionalWidth: number;
 
@@ -286,6 +287,12 @@ namespace com.keyman.keyboards {
        * and are intended for use with layout testing (while headless) in the future.
        */
 
+      let setProportions = function(key: ActiveKey, padPc: number, keyPc: number, totalPc: number) {
+        key.proportionalPad   = padPc;
+        key.proportionalWidth = keyPc;
+        key.proportionalX     = (totalPc + padPc + (keyPc/2));
+      }
+
       // Calculate percentage-based scalings by summing defined widths and scaling each key to %.
       // Save each percentage key width as a separate member (do *not* overwrite layout specified width!)
       var keyPercent: number, padPercent: number, totalPercent=0;
@@ -296,9 +303,7 @@ namespace com.keyman.keyboards {
         keys[j]['padpc']=padPercent;
 
         // compute center's default x-coord (used in headless modes)
-        (<ActiveKey> keys[j]).proportionalX = (totalPercent + padPercent + (keyPercent/2));
-        (<ActiveKey> keys[j]).proportionalWidth = keyPercent;
-
+        setProportions(keys[j] as ActiveKey, padPercent, keyPercent, totalPercent);
         totalPercent += padPercent+keyPercent;
       }
 
@@ -314,9 +319,7 @@ namespace com.keyman.keyboards {
         keys[0]['padpc']=1-totalPercent;
 
         // compute center's default x-coord (used in headless modes)
-        (<ActiveKey> keys[0]).proportionalX = ((totalPercent - rightMargin) -  keyPercent/2);
-        (<ActiveKey> keys[0]).proportionalWidth = keyPercent;
-
+        setProportions(keys[0] as ActiveKey, padPercent, keyPercent, totalPercent);
       } else if(keys.length > 0) {
         let j=keys.length-1;
         padPercent=parseInt(keys[j]['pad'],10)/totalWidth;
@@ -325,8 +328,7 @@ namespace com.keyman.keyboards {
         keys[j]['widthpc'] = keyPercent = 1-totalPercent;
 
         // compute center's default x-coord (used in headless modes)
-        (<ActiveKey> keys[j]).proportionalX = (1 - rightMargin) - keyPercent/2;
-        (<ActiveKey> keys[j]).proportionalWidth = keyPercent;
+        setProportions(keys[j] as ActiveKey, padPercent, keyPercent, totalPercent);
       }
 
       // Add class functions to the existing layout object, allowing it to act as an ActiveLayout.
diff --git a/web/source/osk/visualKeyboard.ts b/web/source/osk/visualKeyboard.ts
index dc21b074f3..67e013ac73 100644
--- a/web/source/osk/visualKeyboard.ts
+++ b/web/source/osk/visualKeyboard.ts
@@ -868,7 +868,7 @@ namespace com.keyman.osk {
       var n: number, i: number, j: number;
       var layers: keyboards.LayoutLayer[], gDiv: HTMLDivElement;
       var rowHeight: number, rDiv: HTMLDivElement;
-      var keys: keyboards.LayoutKey[], key: keyboards.LayoutKey, rs: CSSStyleDeclaration, gs: CSSStyleDeclaration;
+      var keys: keyboards.ActiveKey[], key: keyboards.ActiveKey, rs: CSSStyleDeclaration, gs: CSSStyleDeclaration;
 
       layers=layout['layer'];
 
@@ -962,37 +962,16 @@ namespace com.keyman.osk {
             // Overwrite the previously-computed percent.
             // NB: the 'percent' suffix is historical, units are percent on desktop devices, but pixels on touch devices
             // All key widths and paddings are rounded for uniformity
-            var keyPercent: number, padPercent: number, totalPercent=0;
-            for(j=0; j<keys.length-1; j++) {
-              keyPercent = keys[j]['widthpc'] * objectWidth;
-              keys[j]['widthpc']=keyPercent;
-              padPercent = keys[j]['padpc'] * objectWidth;
-              keys[j]['padpc']=padPercent;
-
-              totalPercent += padPercent+keyPercent;
-            }
-
-            // Allow for right OSK margin (15 layout units)
-            let rightMargin = keyboards.ActiveKey.DEFAULT_RIGHT_MARGIN*objectWidth/layer.totalWidth;
-            totalPercent += rightMargin;
-
-            // If a single key, and padding is negative, add padding to right align the key
-            if(keys.length == 1 && parseInt(keys[0]['pad'],10) < 0) {
-              keyPercent = keys[0]['widthpc'] * objectWidth;
-              keys[0]['widthpc']=keyPercent;
-              totalPercent += keyPercent;
-              keys[0]['padpc']=(objectWidth-totalPercent);
-            } else if(keys.length > 0) {
-              j=keys.length-1;
-              padPercent = keys[j]['padpc'] * objectWidth;
-              keys[j]['padpc']=padPercent;
-              totalPercent += padPercent;
-              keys[j]['widthpc']= keyPercent = (objectWidth-totalPercent);
+            for(j=0; j<keys.length; j++) {
+              key = keys[j];
+              // TODO:  reinstate rounding?
+              key['widthpc'] = key.proportionalWidth * objectWidth;
+              key['padpc'] = key.proportionalPad * objectWidth;
             }
           }
 
           //Create the key square (an outer DIV) for each key element with padding, and an inner DIV for the button (btn)
-          totalPercent=0;
+          var totalPercent=0;
           for(j=0; j<keys.length; j++) {
             key=keys[j];