Merge pull request #9432 from keymanapp/feat/developer/9430-default-long-press

feat(developer): add 'default' property for longpress keys

Author: mcdurdin

common/schemas/keyman-touch-layout/README.md

@@ -399,6 +399,17 @@ and `width`.
 : Number. Defines the width of the key. Not currently supported for longpress
   keys. See `key` object for details.
 
+* `default`
+
+: Boolean. Defaults to `false`. If true, this will be the default key when the
+  user longpresses the base key without moving their finger. Only one subkey
+  should be default; if multiple subkeys have the default field set, then
+  behaviour is undefined.  Given that cancel is not the preferred default
+  action for a longpress, the user can cancel the longpress default by 
+  sliding outside the 'acceptance' area -- e.g. south of the key cap, 
+  which would then unhighlight the default and indicate visually that 
+  no output would occur when they release their finger.
+
 ## `flick` object
 
 A object with a set of properties that define flick keys for given directions.
@@ -445,6 +456,9 @@ string") into the appropriate spec format.
 
 # .keyman-touch-layout version history
 
+## 2023-08-08 2.1 stable
+* Add support for default on longpress (sk) keys. Aligns with Keyman 17.0.
+
 ## 2022-06-30 2.0 stable
 * Add support for flick, multitap, hint, defaultHint. Aligns with Keyman 16.0.
 

common/schemas/keyman-touch-layout/keyman-touch-layout.spec.json

@@ -131,7 +131,8 @@
         "width": { "$ref" : "#/definitions/numeric" },
         "fontsize": { "$ref": "#/definitions/fontsize-spec" },
         "font": { "$ref": "#/definitions/font-spec" },
-        "dk": { "type": "string" }
+        "dk": { "type": "string" },
+        "default": { "type": "boolean" }
       },
       "required": ["id"],
       "additionalProperties": false

common/web/types/src/keyman-touch-layout/keyman-touch-layout-file-writer.ts

@@ -77,6 +77,7 @@ export class TouchLayoutFileWriter {
       if(Object.hasOwn(key, 'text') && key.text === '') delete key.text;
       if(Object.hasOwn(key, 'id') && <string>key.id === '') delete key.id;
       if(Object.hasOwn(key, 'hint') && (<any>key).hint === '') delete (<any>key).hint;
+      if(Object.hasOwn(key, 'default') && (<any>key).default === false) delete (<any>key).default;
     };
 
     const fixupPlatform = (platform: TouchLayoutPlatform) => {

common/web/types/src/keyman-touch-layout/keyman-touch-layout-file.ts

@@ -73,6 +73,7 @@ export interface TouchLayoutSubKey {
   sp?: TouchLayoutKeySp;
   pad?: TouchLayoutKeyPad;
   width?: TouchLayoutKeyWidth;
+  default?: boolean;  // Only used for longpress currently
 };
 
 export interface TouchLayoutFlick {

developer/src/tike/oskbuilder/TouchLayout.pas

@@ -96,6 +96,7 @@   TTouchLayoutSubKey = class(TTouchLayoutObject)
     FPad: Integer;
     FSp: Integer;
     FText: string;
+    FDefault: boolean;
     function GetSpT: TTouchKeyType;   // I4119
     procedure SetSpT(const Value: TTouchKeyType);   // I4119
   protected
@@ -113,6 +114,7 @@   TTouchLayoutSubKey = class(TTouchLayoutObject)
     property NextLayer: string read FNextLayer write FNextLayer;
     property Font: string read FFont write FFont;
     property FontSize: string read FFontSize write FFontSize;
+    property Default: boolean read FDefault write FDefault;
   end;
 
   TTouchLayoutSubKeys = class(TObjectList<TTouchLayoutSubKey>)
@@ -734,6 +736,7 @@ procedure TTouchLayoutSubKey.DoRead;
   GetValue('pad', FPad);
   GetValue('sp', FSp);
   GetValue('text', FText);
+  GetValue('default', FDefault);
 end;
 
 procedure TTouchLayoutObject.AddJSONValue(JSON: TJSONObject; const name, value: string);
@@ -760,6 +763,7 @@ procedure TTouchLayoutSubKey.DoWrite(JSON: TJSONObject);
   if FPad <> 0 then AddJSONValue(JSON, 'pad', IntToStr(FPad));
   if FSp <> 0 then AddJSONValue(JSON, 'sp', IntToStr(FSp));
   AddJSONValue(JSON, 'text', FText);
+  if FDefault then AddJSONValue(JSON, 'default', FDefault);
 end;
 
 function TTouchLayoutSubKey.GetSpT: TTouchKeyType;   // I4119

developer/src/tike/oskbuilder/TouchLayoutDefinitions.pas

@@ -36,7 +36,7 @@   TJSONDef = record
   TJSONDefArray = array of TJSONDef;
 
 const
-  SkDef: array[0..9] of TJSONDef = (
+  SkDef: array[0..10] of TJSONDef = (
     (Name: 'id'; ClassType: TJSONString; Required: True),
     (Name: 'text'; ClassType: TJSONString),
     (Name: 'sp'; ClassType: TJSONValue),
@@ -46,7 +46,8 @@   TJSONDef = record
     (Name: 'layer'; ClassType: TJSONString),
     (Name: 'nextlayer'; ClassType: TJSONString),
     (Name: 'font'; ClassType: TJSONString),
-    (Name: 'fontsize'; ClassType: TJSONString)
+    (Name: 'fontsize'; ClassType: TJSONString),
+    (Name: 'default'; ClassType: TJSONBool)
   );
 
   FlickDef: array[0..7] of TJSONDef = (

developer/src/tike/xml/layoutbuilder/builder.css

@@ -307,6 +307,19 @@ body {
   box-shadow: 0px 0px 20px rgba(100, 100, 255, 0.5);
 }
 
+.key.key-is-default {
+  border-width: 4px;
+}
+
+.key.key-is-default .id {
+  bottom: 1px;
+  right: 1px;
+}
+
+.key.key-is-default .text {
+  margin-top: -3px;
+}
+
 .row {
   clear:left;
   line-height: 1;
@@ -578,6 +591,10 @@ body:not(.text-controls-in-toolbar) input#inpSubKeyCap {
   display: none;
 }
 
+input#chkSubKeyIsDefault {
+  margin-top: 10px;
+}
+
 .key-size {
   font-family: Calibri;
   position: absolute;

developer/src/tike/xml/layoutbuilder/builder.xsl

@@ -247,6 +247,10 @@
           <label for='selSubKeyNextLayer'>Next Layer:</label>
           <select id='selSubKeyNextLayer'></select>
         </div>
+        <div class='toolbar-item'>
+          <label for='chkSubKeyIsDefault'>Default selection:</label>
+          <input id='chkSubKeyIsDefault' type='checkbox' />
+        </div>
       </div>
 
       <!-- Subkey Controls -->

developer/src/tike/xml/layoutbuilder/prepare-key.js

@@ -138,6 +138,7 @@ $(function() {
           .data('nextlayer', key.nextlayer)
           .data('layer', key.layer)
           .data('direction', key.direction) // used only by flicks
+          .data('default', key.default) // used only by longpress
           .css('width', (100 * 0.7) + 'px')
           .css('font-family', key.font)
           .css('font-size', key.fontsize);
@@ -146,6 +147,10 @@ $(function() {
           $(nkey).addClass('key-special-text');
         }
 
+        if(key.default) {
+          $(nkey).addClass('key-is-default');
+        }
+
         $('.text', nkey).text(builder.renameSpecialKey(text));
         builder.updateKeyId(nkey);
       }

developer/src/tike/xml/layoutbuilder/subkeys.js

@@ -41,7 +41,8 @@ $(function() {
           fontsize: $(key).data('fontsize'),
           nextlayer: $(key).data('nextlayer'),
           layer: $(key).data('layer'),
-          direction: $(key).data('direction')
+          direction: $(key).data('direction'),
+          default: $(key).data('default')
         });
       }
       return items;
@@ -72,6 +73,7 @@ $(function() {
     $('#selSubKeyType').val($(key).data('sp') ? $(key).data('sp') : 0);
     $('#selSubKeyNextLayer').val($(key).data('nextlayer'));
     $('#selSubKeyLayerOverride').val($(key).data('layer'));
+    $('#chkSubKeyIsDefault').prop('checked', !!$(key).data('default'));
   }
 
   const subKeyNameChange = builder.wrapChange(function () {
@@ -166,6 +168,20 @@ $(function() {
 
   $('#selSubKeyNextLayer').change(selSubKeyNextLayerChange);
 
+  const chkSubKeyIsDefaultChange = builder.wrapChange(function () {
+    // Remove default property from all subkeys
+    $('#sub-key-groups .key-is-default').removeData('default');
+    $('#sub-key-groups .key-is-default').removeClass('key-is-default');
+    if($(this).prop('checked')) {
+      // Then add it to selected key
+      builder.selectedSubKey().data('default', true);
+      builder.selectedSubKey().addClass('key-is-default');
+    }
+    builder.generateSubKeys();
+  });
+
+  $('#chkSubKeyIsDefault').change(chkSubKeyIsDefaultChange);
+
   const selSubKeyLayerOverrideChange = builder.wrapChange(function () {
     $(this).val() === '' ?
       builder.selectedSubKey().removeData('layer') :
@@ -276,6 +292,7 @@ $(function() {
       $('#subKeyToolbar *').removeAttr('disabled');
       $('#subKeyToolbar #inpSubKeyGestureType').attr('disabled', 'disabled');
       $('#sub-key-cap-unicode-toolbar-item, #sub-key-cap-toolbar-item').css('display', builder.specialCharacters[val] ? 'none' : '');
+      $('#chkSubKeyIsDefault').prop('disabled', $(key).data('type') != 'longpress');
     }
   }