From efa4806912fb86e7e4da9b4a252e2ce70af38bc2 Mon Sep 17 00:00:00 2001
From: "Joshua A. Horton" <joshua_horton@sil.org>
Date: Mon, 23 Oct 2023 10:12:19 +0700
Subject: [PATCH] feat(web): multitap + longpress styling statically
 positioned, flick part may scroll

---
 .../src/keyboard-layout/gesturePreviewHost.ts | 13 ++++++----
 web/src/resources/osk/kmwosk.css              | 24 ++++++++++---------
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/web/src/engine/osk/src/keyboard-layout/gesturePreviewHost.ts b/web/src/engine/osk/src/keyboard-layout/gesturePreviewHost.ts
index b50cf9470f..1d686fe1d1 100644
--- a/web/src/engine/osk/src/keyboard-layout/gesturePreviewHost.ts
+++ b/web/src/engine/osk/src/keyboard-layout/gesturePreviewHost.ts
@@ -40,8 +40,11 @@ export class GesturePreviewHost {
 
     base.style.pointerEvents='none';
 
-    // Should probably just be the base element at this point...
-    // Ah well, only figured this out after experimentation.
+    // We want this to be distinct from the base element so that we can scroll it;
+    // this matters greatly for doing flick things.
+    //
+    // Note:  should probably put multitap style & longpress subkey bit one layer up;
+    // it looks REALLY odd when the multitap style scrolls.
     const previewImgContainer = this.previewImgContainer = document.createElement('div');
     this.previewImgContainer.id = 'kmw-preview-img-container';
 
@@ -56,7 +59,7 @@ export class GesturePreviewHost {
     this.mtStyling = DEMO_ALL || keySpec.multitap;
     if(this.mtStyling) {
       // Shifts the layout to provide a rough multitap visualization
-      this.previewImgContainer.className = 'kmw-multitap-preview'; // to indicate multitap presence.
+      base.classList.add('kmw-multitap-preview'); // to indicate multitap presence.
     }
 
     this.div.appendChild(this.previewImgContainer);
@@ -131,14 +134,14 @@ export class GesturePreviewHost {
       let xAdjustment = DEMO_ALL || keySpec.multitap ? 3 : 0;
       skIcon.style.marginRight = `-${xAdjustment}px`;
 
-      previewImgContainer.appendChild(skIcon);
+      base.appendChild(skIcon);
     }
   }
 
   // These may not exist like this longterm.
   private clearMultitap() {
     if(this.mtStyling) {
-      this.previewImgContainer.classList.add('multitap-clear');
+      this.div.classList.add('multitap-clear');
     }
   }
 
diff --git a/web/src/resources/osk/kmwosk.css b/web/src/resources/osk/kmwosk.css
index a81e99084d..06fe29e51f 100644
--- a/web/src/resources/osk/kmwosk.css
+++ b/web/src/resources/osk/kmwosk.css
@@ -344,12 +344,14 @@ body div.kmw-key-shift-on span.kmw-key-text {font-family:SpecialOSK !important;f
 
 #kmw-gesture-preview {
   position: absolute;
-  height: 100%;
-  width: 100%;
   display: block;
   z-index: 1;
-  top: 0;
-  left: 0;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  /* Clip anything that 'scrolls' past the preview's boundaries.*/
+  overflow: hidden;
   /* Hides the base key entirely; this prevents artifacting should positioning vary a bit. */
   background-color: inherit;
 }
@@ -375,15 +377,15 @@ body div.kmw-key-shift-on span.kmw-key-text {font-family:SpecialOSK !important;f
 
 #kmw-preview-img-container {
   position: absolute;
-  top: 0px;
-  left: 0px;
-  right: 0px;
-  bottom: 0px;
 
-  transition: 0.5s linear all;
+  /* Facilitates scrolling animation to match a flick */
+  height: 100%;
+  width: 100%;
+
+  transition: 0.5s linear border;
 }
 
-#kmw-preview-img-container.kmw-multitap-preview {
+#kmw-gesture-preview.kmw-multitap-preview {
   position: absolute;
   margin-top: 1px;
   margin-left: 1px;
@@ -393,7 +395,7 @@ body div.kmw-key-shift-on span.kmw-key-text {font-family:SpecialOSK !important;f
   border-bottom: 2px darkgray dotted;
 }
 
-#kmw-preview-img-container.kmw-multitap-preview.multitap-clear {
+#kmw-gesture-preview.kmw-multitap-preview.multitap-clear {
   /* Because on some devices, 1px border may not equal 1px positioning!
    * Use of full transparency removes the (visual) border but keeps
    * altered positioning intact, avoiding any animation thereof.