From 978b0ab9a1f1e1735f9f4d5d4d1250969f3d6f76 Mon Sep 17 00:00:00 2001 From: Marc Durdin Date: Mon, 28 Feb 2022 10:16:50 +1100 Subject: [PATCH 1/2] fix(developer): handle paste event in touch layout editor Fixes #6077. Refactor all the text field event handlers to have consistent structure for edits, pastes and keyboard events. This fixes Ctrl+V paste as well as tidying up the relevant code. --- .../TIKE/xml/layoutbuilder/builder.js | 147 +++++++++++------- 1 file changed, 88 insertions(+), 59 deletions(-) diff --git a/windows/src/developer/TIKE/xml/layoutbuilder/builder.js b/windows/src/developer/TIKE/xml/layoutbuilder/builder.js index 6a7d457b61..5cc7e7a50f 100644 --- a/windows/src/developer/TIKE/xml/layoutbuilder/builder.js +++ b/windows/src/developer/TIKE/xml/layoutbuilder/builder.js @@ -1423,31 +1423,42 @@ $(function () { } }; - $('#inpKeyPadding').change(builder.wrapChange(function () { + const inpKeyPaddingChange = builder.wrapChange(function () { builder.selectedKey().data('pad', $(this).val()) .css('margin-left', $(this).val() + 'px'); - }, {rescale: true})); + }, {rescale: true}); - $('#inpKeyWidth').change(builder.wrapChange(function () { + $('#inpKeyPadding') + .change(inpKeyPaddingChange) + .on('paste', inpKeyPaddingChange) + .keyup(inpKeyPaddingChange); + + const inpKeyWidthChange = builder.wrapChange(function () { builder.selectedKey().data('width', $(this).val()) .css('width', parseInt($(this).val(), 10) * this.xscale + 'px'); - }, {rescale: true})); + }, {rescale: true}); - $('#inpKeyName').change(builder.wrapChange(function () { + $('#inpKeyWidth') + .change(inpKeyWidthChange) + .on('paste', inpKeyWidthChange) + .keyup(inpKeyWidthChange); + + const inpKeyNameChange = builder.wrapChange(function () { builder.selectedKey().data('id', $(this).val()); builder.updateKeyId(builder.selectedKey()); - }, {saveOnce: true})).autocomplete({ - source: builder.lookupKeyNames, - change: builder.wrapChange(function () { - builder.selectedKey().data('id', $(this).val()); - builder.updateKeyId(builder.selectedKey()); - }, {saveOnce: true}) - }).keyup(builder.wrapChange(function () { - builder.selectedKey().data('id', $(this).val()); - builder.updateKeyId(builder.selectedKey()); - }, {saveOnce: true})).blur(function () { - builder.hasSavedKeyUndo = false; - }); + }, {saveOnce: true}); + + $('#inpKeyName') + .change(inpKeyNameChange) + .autocomplete({ + source: builder.lookupKeyNames, + change: inpKeyNameChange + }) + .on('paste', inpKeyNameChange) + .keyup(inpKeyNameChange) + .blur(function () { + builder.hasSavedKeyUndo = false; + }); this.updateSelectedKeyText = function (val) { var k = builder.selectedKey(); @@ -1480,25 +1491,27 @@ $(function () { } } - $('#inpKeyCap').change(builder.wrapChange(function () { + const inpKeyCapChange = builder.wrapChange(function () { builder.updateSelectedKeyText($(this).val()); - }, {saveOnce: true})).autocomplete({ - source: builder.specialKeyNames, - change: builder.wrapChange(function () { - builder.updateSelectedKeyText($(this).val()); - }, {saveOnce: true}) - }).keyup(builder.wrapChange(function () { - builder.updateSelectedKeyText($(this).val()); - }, {saveOnce: true})).mouseup(function () { - builder.updateCharacterMap($(this).val(), false); - }).focus(function () { - builder.updateCharacterMap($(this).val(), false); - }).blur(function () { - builder.hasSavedKeyUndo = false; - }); + }, {saveOnce: true}); + $('#inpKeyCap') + .change(inpKeyCapChange) + .autocomplete({ + source: builder.specialKeyNames, + change: inpKeyCapChange + }) + .on('paste', inpKeyCapChange) + .keyup(inpKeyCapChange) + .mouseup(function () { + builder.updateCharacterMap($(this).val(), false); + }).focus(function () { + builder.updateCharacterMap($(this).val(), false); + }).blur(function () { + builder.hasSavedKeyUndo = false; + }); - $('#selKeyType').change(builder.wrapChange(function () { + const selKeyTypeChange = builder.wrapChange(function () { var sp = $(this).val(); if (sp == 0) { builder.selectedKey().removeData('sp'); @@ -1506,20 +1519,26 @@ $(function () { builder.selectedKey().data('sp', $(this).val()); } builder.formatKey(builder.selectedKey(), $(this).val()); - })); + }); - $('#selKeyNextLayer').change(builder.wrapChange(function () { + $('#selKeyType').change(selKeyTypeChange); + + const selKeyNextLayerChange = builder.wrapChange(function () { $(this).val() === '' ? builder.selectedKey().removeData('nextlayer') : builder.selectedKey().data('nextlayer', $(this).val()); - })); + }); - $('#selKeyLayerOverride').change(builder.wrapChange(function () { + $('#selKeyNextLayer').change(selKeyNextLayerChange); + + const selKeyLayerOverrideChange = builder.wrapChange(function () { $(this).val() === '' ? builder.selectedKey().removeData('layer') : builder.selectedKey().data('layer', $(this).val()); builder.updateKeyId(builder.selectedKey()); - })); + }); + + $('#selKeyLayerOverride').change(selKeyLayerOverrideChange); this.prepareKey = function () { builder.enableKeyControls(); @@ -1706,6 +1725,7 @@ $(function () { $('#inpSubKeyName') .change(subKeyNameChange) + .on('paste', subKeyNameChange) .keyup(subKeyNameChange) .autocomplete({ source: builder.lookupKeyNames, @@ -1724,37 +1744,44 @@ $(function () { builder.generateSubKeys(); }; - $('#inpSubKeyCap').change(builder.wrapChange(function () { + const inpSubKeyCapChange = builder.wrapChange(function () { builder.updateSubKeyCap($(this).val()); - }, {saveOnce: true})).autocomplete({ - source: builder.specialKeyNames, - change: builder.wrapChange(function () { - builder.updateSubKeyCap($(this).val()); - }, {saveOnce: true}) - }).keyup(builder.wrapChange(function () { - builder.updateSubKeyCap($(this).val()); - },{saveOnce: true})).mouseup(function () { - builder.updateCharacterMap($(this).val(), false); - }).focus(function () { - builder.updateCharacterMap($(this).val(), false); - }).blur(function () { - builder.hasSavedSubKeyUndo = false; - }); + }, {saveOnce: true}); - $('#selSubKeyNextLayer').change(builder.wrapChange(function () { + $('#inpSubKeyCap') + .change(inpSubKeyCapChange) + .autocomplete({ + source: builder.specialKeyNames, + change: inpSubKeyCapChange + }) + .on('paste', inpSubKeyCapChange) + .keyup(inpSubKeyCapChange) + .mouseup(function () { + builder.updateCharacterMap($(this).val(), false); + }).focus(function () { + builder.updateCharacterMap($(this).val(), false); + }).blur(function () { + builder.hasSavedSubKeyUndo = false; + }); + + const selSubKeyNextLayerChange = builder.wrapChange(function () { $(this).val() === '' ? builder.selectedSubKey().removeData('nextlayer') : builder.selectedSubKey().data('nextlayer', $(this).val()); builder.generateSubKeys(); - })); + }); - $('#selSubKeyLayerOverride').change(builder.wrapChange(function () { + $('#selSubKeyNextLayer').change(selSubKeyNextLayerChange); + + const selSubKeyLayerOverrideChange = builder.wrapChange(function () { $(this).val() === '' ? builder.selectedSubKey().removeData('layer') : builder.selectedSubKey().data('layer', $(this).val()); builder.updateKeyId(builder.selectedSubKey()); builder.generateSubKeys(); - })); + }); + + $('#selSubKeyLayerOverride').change(selSubKeyLayerOverrideChange); $('#wedgeAddSubKeyLeft').click(builder.wrapChange(function () { builder.selectSubKey(builder.addKey('before-subkey', true)); @@ -1771,7 +1798,7 @@ $(function () { builder.generateSubKeys(); })); - $('#selSubKeyType').change(builder.wrapChange(function () { + const selSubKeyTypeChange = builder.wrapChange(function () { var sp = $(this).val(), key = builder.selectedSubKey(); if (key.length == 0) return; if (sp == 0) { @@ -1781,7 +1808,9 @@ $(function () { } builder.formatKey(key, $(this).val()); builder.generateSubKeys(); - })); + }); + + $('#selSubKeyType').change(selSubKeyTypeChange); this.generate = function (display, force) { var json = JSON.stringify(KVKL, null, ' '); From 94af38675f00f1b54742e25b12bdf3c3f7d023a6 Mon Sep 17 00:00:00 2001 From: Marc Durdin Date: Mon, 28 Feb 2022 10:51:10 +1100 Subject: [PATCH 2/2] fix(developer): use oninput instead of onpaste oninput covers more cases than onpaste and keyup, and doesn't lead to marking fields dirty when e.g. Shift is pressed. --- .../TIKE/xml/layoutbuilder/builder.js | 47 ++++++++----------- 1 file changed, 19 insertions(+), 28 deletions(-) diff --git a/windows/src/developer/TIKE/xml/layoutbuilder/builder.js b/windows/src/developer/TIKE/xml/layoutbuilder/builder.js index 5cc7e7a50f..6cae305b1f 100644 --- a/windows/src/developer/TIKE/xml/layoutbuilder/builder.js +++ b/windows/src/developer/TIKE/xml/layoutbuilder/builder.js @@ -1430,8 +1430,7 @@ $(function () { $('#inpKeyPadding') .change(inpKeyPaddingChange) - .on('paste', inpKeyPaddingChange) - .keyup(inpKeyPaddingChange); + .on('input', inpKeyPaddingChange); const inpKeyWidthChange = builder.wrapChange(function () { builder.selectedKey().data('width', $(this).val()) @@ -1440,8 +1439,7 @@ $(function () { $('#inpKeyWidth') .change(inpKeyWidthChange) - .on('paste', inpKeyWidthChange) - .keyup(inpKeyWidthChange); + .on('input', inpKeyWidthChange); const inpKeyNameChange = builder.wrapChange(function () { builder.selectedKey().data('id', $(this).val()); @@ -1454,26 +1452,11 @@ $(function () { source: builder.lookupKeyNames, change: inpKeyNameChange }) - .on('paste', inpKeyNameChange) - .keyup(inpKeyNameChange) + .on('input', inpKeyNameChange) .blur(function () { builder.hasSavedKeyUndo = false; }); - this.updateSelectedKeyText = function (val) { - var k = builder.selectedKey(); - $('.text', k).text(builder.renameSpecialKey(val)); - k.data('text', val); - - if(this.specialCharacters[val]) { - k.addClass('key-special-text'); - } else { - k.removeClass('key-special-text'); - } - - builder.updateCharacterMap(val, false); - } - this.updateCharacterMap = function (val, fromSubKey) { // Update character map var src = $(fromSubKey ? '#inpSubKeyCap' : '#inpKeyCap')[0]; @@ -1491,18 +1474,28 @@ $(function () { } } - const inpKeyCapChange = builder.wrapChange(function () { - builder.updateSelectedKeyText($(this).val()); + const inpKeyCapChange = builder.wrapChange(function (e) { + const val = $(this).val(); + var k = builder.selectedKey(); + $('.text', k).text(builder.renameSpecialKey(val)); + k.data('text', val); + + if(builder.specialCharacters[val]) { + k.addClass('key-special-text'); + } else { + k.removeClass('key-special-text'); + } + + builder.updateCharacterMap(val, false); }, {saveOnce: true}); $('#inpKeyCap') + .on('input', inpKeyCapChange) .change(inpKeyCapChange) .autocomplete({ source: builder.specialKeyNames, change: inpKeyCapChange }) - .on('paste', inpKeyCapChange) - .keyup(inpKeyCapChange) .mouseup(function () { builder.updateCharacterMap($(this).val(), false); }).focus(function () { @@ -1725,8 +1718,7 @@ $(function () { $('#inpSubKeyName') .change(subKeyNameChange) - .on('paste', subKeyNameChange) - .keyup(subKeyNameChange) + .on('input', subKeyNameChange) .autocomplete({ source: builder.lookupKeyNames, change: subKeyNameChange @@ -1754,8 +1746,7 @@ $(function () { source: builder.specialKeyNames, change: inpSubKeyCapChange }) - .on('paste', inpSubKeyCapChange) - .keyup(inpSubKeyCapChange) + .on('input', inpSubKeyCapChange) .mouseup(function () { builder.updateCharacterMap($(this).val(), false); }).focus(function () {