From 37ea16b3d98926ff8ec23f3e130ea692ee3cdba2 Mon Sep 17 00:00:00 2001 From: jahorton Date: Wed, 4 Aug 2021 10:13:30 +0700 Subject: [PATCH] refactor(web): integration of OSKViewComponent --- web/source/osk/layouts/targetedFloatLayout.ts | 8 +-- web/source/osk/oskManager.ts | 52 ++++++++++++++----- web/source/osk/oskViewComponent.ts | 2 +- 3 files changed, 45 insertions(+), 17 deletions(-) diff --git a/web/source/osk/layouts/targetedFloatLayout.ts b/web/source/osk/layouts/targetedFloatLayout.ts index 62dabf79fa..8285972e9d 100644 --- a/web/source/osk/layouts/targetedFloatLayout.ts +++ b/web/source/osk/layouts/targetedFloatLayout.ts @@ -148,8 +148,8 @@ namespace com.keyman.osk.layouts { return; } - this.startWidth = layout.oskView.vkbd.kbdDiv.offsetWidth; - this.startHeight = layout.oskView.vkbd.kbdDiv.offsetHeight; + this.startWidth = layout.oskView.computedWidth; + this.startHeight = layout.oskView.computedHeight; let keymanweb = com.keyman.singleton; @@ -200,8 +200,8 @@ namespace com.keyman.osk.layouts { } if(layout.oskView.vkbd) { - this.startWidth = layout.oskView.vkbd.kbdDiv.offsetWidth; - this.startHeight = layout.oskView.vkbd.kbdDiv.offsetHeight; + this.startWidth = layout.oskView.computedWidth; + this.startHeight = layout.oskView.computedHeight; } layout.oskView.refreshLayout(); // Finalize the resize. layout.oskView.doResizeMove(); diff --git a/web/source/osk/oskManager.ts b/web/source/osk/oskManager.ts index b68ba13d4a..f51a15e5b6 100644 --- a/web/source/osk/oskManager.ts +++ b/web/source/osk/oskManager.ts @@ -24,8 +24,23 @@ namespace com.keyman.osk { export class OSKManager { // Important OSK elements (and container classes) _Box: HTMLDivElement; - banner: BannerManager; - vkbd: VisualKeyboard; + + headerView: OSKViewComponent; + bannerView: BannerManager; // Which implements OSKViewComponent + keyboardView: KeyboardView; // Which implements OSKViewComponent + footerView: OSKViewComponent; + + public get vkbd(): VisualKeyboard { + if(this.keyboardView instanceof VisualKeyboard) { + return this.keyboardView; + } else { + return null; + } + } + + public get banner(): BannerManager { // Maintains old reference point used by embedding apps. + return this.bannerView; + } desktopLayout: layouts.TargetedFloatLayout; @@ -125,7 +140,7 @@ namespace com.keyman.osk { this.loadCookie(); // Predictive-text hooks. - const bannerMgr = this.banner = new BannerManager(); + const bannerMgr = this.bannerView = new BannerManager(); const _this = this; // Register a listener for model change events so that we can hot-swap the banner as needed. @@ -149,8 +164,8 @@ namespace com.keyman.osk { * Description Clears OSK variables prior to exit (JMD 1.9.1 - relocation of local variables 3/9/10) */ _Unload() { - this.vkbd = null; - this.banner = null; + this.keyboardView = null; + this.bannerView = null; this._Box = null; } @@ -174,7 +189,7 @@ namespace com.keyman.osk { if(this.vkbd) { this.vkbd.shutdown(); } - this.vkbd = null; + this.keyboardView = null; // Instantly resets the OSK container, erasing / delinking the previously-loaded keyboard. this._Box.innerHTML = ''; @@ -189,6 +204,7 @@ namespace com.keyman.osk { if(util.device.formFactor == 'desktop') { layout = this.desktopLayout = new layouts.TargetedFloatLayout(); layout.attachToView(this); + this.headerView = layout.titleBar; this.desktopLayout.titleBar.setTitleFromKeyboard(activeKeyboard); this._Box.appendChild(layout.titleBar.element); } @@ -199,10 +215,9 @@ namespace com.keyman.osk { this.banner.element.style.fontSize = this.baseFontSize; } - let kbdView: KeyboardView = this._GenerateKeyboardView(activeKeyboard); + let kbdView: KeyboardView = this.keyboardView = this._GenerateKeyboardView(activeKeyboard); this._Box.appendChild(kbdView.element); if(kbdView instanceof VisualKeyboard) { - this.vkbd = kbdView; kbdView.fontSize = this.parsedBaseFontSize; } kbdView.postInsert(); @@ -211,6 +226,7 @@ namespace com.keyman.osk { if(this.desktopLayout) { if(kbdView instanceof VisualKeyboard) { this._Box.appendChild(layout.resizeBar.element); + this.footerView = layout.resizeBar; } } @@ -583,7 +599,11 @@ namespace com.keyman.osk { this.needsLayout = this.needsLayout || mutatedFlag; if(this.vkbd) { - this.vkbd.setSize(width, height - this.getBannerHeight(), pending); + let availableHeight = height - this.computeFrameHeight(); + if(this.bannerView.height > 0) { + availableHeight -= this.bannerView.height + 5; + } + this.vkbd.setSize(width, availableHeight, pending); } } @@ -839,6 +859,10 @@ namespace com.keyman.osk { } } + /* private */ computeFrameHeight(): number { + return (this.headerView?.layoutHeight.val || 0) + (this.footerView?.layoutHeight.val || 0); + } + /** * Display KMW OSK at specified position (returns nothing) * @@ -993,9 +1017,13 @@ namespace com.keyman.osk { // Step 3: perform layout operations. if(this.vkbd) { - // +5: from kmw-banner-bar's 'top' attribute. - const vkbdHeight = this.computedHeight - (this.banner.height ? this.banner.height + 5 : 0); - this.vkbd.setSize(this.computedWidth, vkbdHeight); + let availableHeight = this.computedHeight - this.computeFrameHeight(); + + // +5: from kmw-banner-bar's 'top' attribute when active + if(this.bannerView.height > 0) { + availableHeight -= this.bannerView.height + 5; + } + this.vkbd.setSize(this.computedWidth, availableHeight); this.vkbd.refreshLayout(); if(this.vkbd.usesFixedHeightScaling) { diff --git a/web/source/osk/oskViewComponent.ts b/web/source/osk/oskViewComponent.ts index 9f0f471586..faed1c6131 100644 --- a/web/source/osk/oskViewComponent.ts +++ b/web/source/osk/oskViewComponent.ts @@ -1,6 +1,6 @@ namespace com.keyman.osk { export interface OSKViewComponent { - get layoutHeight(): ParsedLengthStyle; + readonly layoutHeight: ParsedLengthStyle; refreshLayout(): void; } } \ No newline at end of file