refactor(web): better centralizes layer-group functionality and prope…

…rties
keymanapp · Apr 5, 2024 · 9a016bb · 9a016bb
1 parent 062537b
commit 9a016bb
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 30 deletions.
diff --git a/web/src/engine/osk/src/keyboard-layout/oskLayer.ts b/web/src/engine/osk/src/keyboard-layout/oskLayer.ts
@@ -5,6 +5,7 @@ import OSKBaseKey from './oskBaseKey.js';
 import VisualKeyboard from '../visualKeyboard.js';
 
 export interface LayerLayoutParams {
+  keyboardWidth: number;
   keyboardHeight: number;
   spacebarText: string;
 }

diff --git a/web/src/engine/osk/src/keyboard-layout/oskLayerGroup.ts b/web/src/engine/osk/src/keyboard-layout/oskLayerGroup.ts
@@ -1,12 +1,10 @@
 import { ActiveLayer, type DeviceSpec, Keyboard, LayoutLayer, ActiveLayout, ButtonClasses } from '@keymanapp/keyboard-processor';
-import { ManagedPromise } from '@keymanapp/web-utils';
 
 import { InputSample } from '@keymanapp/gesture-recognizer';
 
 import { KeyElement } from '../keyElement.js';
-import OSKLayer from './oskLayer.js';
+import OSKLayer, { LayerLayoutParams } from './oskLayer.js';
 import VisualKeyboard from '../visualKeyboard.js';
-import OSKRow from './oskRow.js';
 import OSKBaseKey from './oskBaseKey.js';
 
 const NEAREST_KEY_TOUCH_MARGIN_PERCENT = 0.06;
@@ -21,6 +19,7 @@ export default class OSKLayerGroup {
   private computedHeight: number;
 
   private _activeLayerId: string = 'default';
+  private _heightPadding: number;
 
   public constructor(vkbd: VisualKeyboard, keyboard: Keyboard, formFactor: DeviceSpec.FormFactor) {
     let layout = keyboard.layout(formFactor);
@@ -71,6 +70,14 @@ export default class OSKLayerGroup {
     }
   }
 
+  public get activeLayer(): OSKLayer {
+    if(!this.activeLayerId) {
+      return null;
+    }
+
+    return this.layers[this.activeLayerId];
+  }
+
   public get activeLayerId(): string {
     return this._activeLayerId;
   }
@@ -249,8 +256,35 @@ export default class OSKLayerGroup {
     return null;
   }
 
-  public refreshLayout(computedWidth: number, computedHeight: number) {
-    this.computedWidth = computedWidth;
-    this.computedHeight = computedHeight;
+
+  public refreshLayout(vkbd: VisualKeyboard, layoutParams: LayerLayoutParams) {
+    // Set layer-group copies of relevant computed-size values; they are used by nearest-key
+    // detection.
+    this.computedWidth = layoutParams.keyboardWidth;
+    this.computedHeight = layoutParams.keyboardHeight;
+
+    // Assumption:  this styling value will not change once the keyboard and
+    // related stylesheets are loaded and applied.
+    if(this._heightPadding === undefined) {
+      // Should not trigger a new layout reflow; VisualKeyboard should have made
+      // no further DOM style changes since the last one.
+
+      // For touch-based OSK layouts, kmwosk.css may include top & bottom
+      // padding on the layer-group element.
+      const computedGroupStyle = getComputedStyle(this.element);
+
+      // parseInt('') => NaN, which is falsy; we want to fallback to zero.
+      let pt = parseInt(computedGroupStyle.paddingTop, 10) || 0;
+      let pb = parseInt(computedGroupStyle.paddingBottom, 10) || 0;
+      this._heightPadding = pt + pb;
+    }
+
+    if(this.activeLayer) {
+      this.activeLayer.refreshLayout(vkbd, layoutParams);
+    }
+  }
+
+  public get verticalPadding() {
+    return this._heightPadding ?? 0;
   }
 }
diff --git a/web/src/engine/osk/src/visualKeyboard.ts b/web/src/engine/osk/src/visualKeyboard.ts
@@ -231,11 +231,11 @@ export default class VisualKeyboard extends EventEmitter<EventMap> implements Ke
   public readonly layoutKeyboardProperties: KeyboardProperties;
 
   get layerId(): string {
-    return this._layerId;
+    return this.layerGroup?.activeLayerId ?? 'default';
   }
 
   set layerId(value: string) {
-    const changedLayer = value != this._layerId;
+    const changedLayer = value != this.layerId;
     if(!this.layerGroup.layers[value]) {
       throw new Error(`Keyboard ${this.layoutKeyboard.id} does not have a layer with id ${value}`);
     } else {
@@ -255,7 +255,7 @@ export default class VisualKeyboard extends EventEmitter<EventMap> implements Ke
   }
 
   get currentLayer(): OSKLayer {
-    return this.layerId ? this.layerGroup?.layers[this.layerId] : null;
+    return this.layerGroup?.activeLayer;
   }
 
   // Special keys (for the currently-visible layer)
@@ -811,7 +811,7 @@ export default class VisualKeyboard extends EventEmitter<EventMap> implements Ke
   get internalHeight(): ParsedLengthStyle {
     if (this.usesFixedHeightScaling) {
       // Touch OSKs may apply internal padding to prevent row cropping at the edges.
-      return ParsedLengthStyle.inPixels(this.layoutHeight.val - this.getVerticalLayerGroupPadding());
+      return ParsedLengthStyle.inPixels(this.layoutHeight.val - this.layerGroup.verticalPadding);
     } else {
       return ParsedLengthStyle.forScalar(1);
     }
@@ -1255,10 +1255,6 @@ export default class VisualKeyboard extends EventEmitter<EventMap> implements Ke
       return;
     }
 
-    // Set layer-group copies of the computed-size values; they are used by nearest-key
-    // detection.
-    this.layerGroup.refreshLayout(this._computedWidth, this._computedHeight);
-
     // Step 3: recalculate gesture parameter values
     // Skip for doc-keyboards, since they don't do gestures.
     if(!this.isStatic) {
@@ -1273,22 +1269,11 @@ export default class VisualKeyboard extends EventEmitter<EventMap> implements Ke
 
     // Step 4:  perform layout operations.
     // Needs the refreshed layout info to work correctly.
-    if(this.currentLayer) {
-      this.currentLayer.refreshLayout(this, {
-        keyboardHeight: this._computedHeight - this.getVerticalLayerGroupPadding(),
-        spacebarText: this.layoutKeyboardProperties?.displayName ?? '(System keyboard)'
-      });
-    }
-  }
-
-  private getVerticalLayerGroupPadding(): number {
-    // For touch-based OSK layouts, kmwosk.css may include top & bottom padding on the layer-group element.
-    const computedGroupStyle = getComputedStyle(this.layerGroup.element);
-
-    // parseInt('') => NaN, which is falsy; we want to fallback to zero.
-    let pt = parseInt(computedGroupStyle.paddingTop, 10) || 0;
-    let pb = parseInt(computedGroupStyle.paddingBottom, 10) || 0;
-    return pt + pb;
+    this.layerGroup.refreshLayout(this, {
+      keyboardWidth: this._computedWidth,
+      keyboardHeight: this._computedHeight - this.layerGroup.verticalPadding,
+      spacebarText: this.layoutKeyboardProperties?.displayName ?? '(System keyboard)'
+    });
   }
 
   /*private*/ computedAdjustedOskHeight(allottedHeight: number): number {