From b8e0c2e8ec7f5b3e865b1fa12077fe5bb8bca8f6 Mon Sep 17 00:00:00 2001 From: Johnwz123 <112536096+Johnwz123@users.noreply.github.com> Date: Fri, 5 Apr 2024 10:12:54 +0800 Subject: [PATCH 1/5] Modify mobile keyboard to be scrollable --- src/commons/mobileWorkspace/MobileKeyboard.tsx | 6 +----- src/styles/_mobileworkspace.scss | 1 + 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/commons/mobileWorkspace/MobileKeyboard.tsx b/src/commons/mobileWorkspace/MobileKeyboard.tsx index 02ae5def0d..5d1ec17fc8 100644 --- a/src/commons/mobileWorkspace/MobileKeyboard.tsx +++ b/src/commons/mobileWorkspace/MobileKeyboard.tsx @@ -73,11 +73,7 @@ const MobileKeyboard: React.FC = props => { onKeyPress: handleKeyPress, baseClass: 'simple-keyboard-shortcut', layout: { - default: [ - '{ } ( ) " \' _ => ;', - '{tab} && || ! < > = ===', - '+ - * / % // {arrowleft} {arrowright}' - ] + default: ['{ } ( ) " \' _ => ; {tab} && || ! < > = === + - * / % // {arrowleft} {arrowright}'] }, buttonTheme: [ { diff --git a/src/styles/_mobileworkspace.scss b/src/styles/_mobileworkspace.scss index 82096cd671..2a8feed83c 100644 --- a/src/styles/_mobileworkspace.scss +++ b/src/styles/_mobileworkspace.scss @@ -121,6 +121,7 @@ $shadow-light: rgba(0, 0, 0, 0.2); .hg-row { height: 40px; + overflow-x: auto; .hg-button { background: $cadet-color-2; From fe22449329f21fb2d20b9e2d5f669c5949d16520 Mon Sep 17 00:00:00 2001 From: Joven Soh <34702990+JovenSoh@users.noreply.github.com> Date: Mon, 8 Apr 2024 22:02:43 +0800 Subject: [PATCH 2/5] Mobile Keyboard is now swipeable --- .../mobileWorkspace/MobileKeyboard.tsx | 91 +++++++++++++------ 1 file changed, 65 insertions(+), 26 deletions(-) diff --git a/src/commons/mobileWorkspace/MobileKeyboard.tsx b/src/commons/mobileWorkspace/MobileKeyboard.tsx index 5d1ec17fc8..7ceb618282 100644 --- a/src/commons/mobileWorkspace/MobileKeyboard.tsx +++ b/src/commons/mobileWorkspace/MobileKeyboard.tsx @@ -8,10 +8,12 @@ type Props = { }; const MobileKeyboard: React.FC = props => { - const [isKeyboardShown, setIsKeyoardShown] = React.useState(false); + const [isKeyboardShown, setIsKeyboardShown] = React.useState(false); const [buttonContent, setButtonContent] = React.useState('ᐸ'); const [keyboardPosition, setKeyboardPosition] = React.useState({ x: 0, y: 0 }); - const [selectedIndex, setSelectedIndex] = React.useState(1); + const [targetKeyboardInput, setTargetKeyboardInput] = React.useState(null); + const [lastKeyPressed, setLastKeyPressed] = React.useState(''); + const [touchStartInfo, setTouchStartInfo] = React.useState({ x: 0, y: 0, time: 0 }); const onDrag: DraggableEventHandler = ( e: DraggableEvent, @@ -31,46 +33,86 @@ const MobileKeyboard: React.FC = props => { document.getElementById('mobile-floating-toggle')!.style.setProperty('width', '42px'); document.getElementById('mobile-floating-toggle')!.style.setProperty('opacity', '0.6'); setButtonContent('ᐸ'); - setIsKeyoardShown(false); + setIsKeyboardShown(false); } else { //do showing document.getElementById('mobile-keyboard-toggle')!.style.setProperty('display', 'flex'); document.getElementById('mobile-floating-toggle')!.style.setProperty('width', '99%'); document.getElementById('mobile-floating-toggle')!.style.setProperty('opacity', '1'); setButtonContent('ᐳ'); - setIsKeyoardShown(true); + setIsKeyboardShown(true); } }; - const handleRowToggle = (event: React.MouseEvent) => { - setSelectedIndex((selectedIndex + 1) % 3); - const keyboardClass = document.getElementsByClassName('simple-keyboard-shortcut'); - Array.from(keyboardClass as HTMLCollectionOf)[0].style.top = - -selectedIndex * 45 + 'px'; - }; + const handleKeyPress = (button: string) => { + if (!props.targetKeyboardInput) { return; } - const editor = props.targetKeyboardInput; - if (button === '{arrowleft}') { + + setTargetKeyboardInput(props.targetKeyboardInput); + setLastKeyPressed(button); + }; + + const handleTouchStart = (e: React.TouchEvent) => { + // Get the touch coordinates and current time + const touch = e.touches[0]; + setTouchStartInfo({ + x: touch.clientX, + y: touch.clientY, + time: Date.now(), + }); + }; + + const handleTouchEnd = (e: React.TouchEvent) => { + // Compare the end position with the start position + const touch = e.changedTouches[0]; + const deltaX = touch.clientX - touchStartInfo.x; + const deltaY = touch.clientY - touchStartInfo.y; + const deltaTime = Date.now() - touchStartInfo.time; + + // Define thresholds for what you consider a swipe vs a tap + const swipeThreshold = 30; // pixels + const tapThresholdTime = 200; // milliseconds + + if (Math.abs(deltaX) > swipeThreshold || Math.abs(deltaY) > swipeThreshold) { + console.log('Swipe detected'); + } else if (deltaTime < tapThresholdTime) { + console.log('Tap detected'); + handleKeyRelease(); + } else { + // Handle other cases or ignore + console.log('Other touch event detected'); + } + }; + + const handleKeyRelease = () => { + if (!targetKeyboardInput) { + return; + } + + const editor = targetKeyboardInput; + + if (lastKeyPressed === '{arrowleft}') { editor.navigateLeft(); - } else if (button === '{arrowright}') { + } else if (lastKeyPressed === '{arrowright}') { editor.navigateRight(); - } else if (button === '{bksp}') { + } else if (lastKeyPressed === '{bksp}') { editor.remove('left'); - } else if (button === '{tab}') { + } else if (lastKeyPressed === '{tab}') { editor.insert('\t'); - } else if (['+', '-', '*', '/', '%', '=>', '===', '&&', '||'].includes(button)) { - editor.insert(' ' + button + ' '); + } else if (['+', '-', '*', '/', '%', '=>', '===', '&&', '||'].includes(lastKeyPressed)) { + editor.insert(' ' + lastKeyPressed + ' '); } else { - editor.insert(button); + editor.insert(lastKeyPressed); } }; const keyboardProps = { onKeyPress: handleKeyPress, + disableButtonHold: true, baseClass: 'simple-keyboard-shortcut', layout: { default: ['{ } ( ) " \' _ => ; {tab} && || ! < > = === + - * / % // {arrowleft} {arrowright}'] @@ -108,16 +150,13 @@ const MobileKeyboard: React.FC = props => {
-
+
-
:
From 72cbc731adf0ad922b7edb13b9e14c3e1e2d0b22 Mon Sep 17 00:00:00 2001 From: Johnwz123 <112536096+Johnwz123@users.noreply.github.com> Date: Tue, 9 Apr 2024 01:07:18 +0800 Subject: [PATCH 3/5] Remove mobile-keyboard-row-toggle styles --- src/styles/_mobileworkspace.scss | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/styles/_mobileworkspace.scss b/src/styles/_mobileworkspace.scss index 2a8feed83c..e592ce130d 100644 --- a/src/styles/_mobileworkspace.scss +++ b/src/styles/_mobileworkspace.scss @@ -146,12 +146,6 @@ $shadow-light: rgba(0, 0, 0, 0.2); } } } - - .mobile-keyboard-row-toggle { - width: 28px; - font-size: 28px; - padding: 0 2px 0 0; - } } #floating-dragHandle { From be6373f48b0ab642847026380e9a0fb35050b5d8 Mon Sep 17 00:00:00 2001 From: Johnwz123 <112536096+Johnwz123@users.noreply.github.com> Date: Tue, 9 Apr 2024 01:25:37 +0800 Subject: [PATCH 4/5] Fix formatting --- src/commons/mobileWorkspace/MobileKeyboard.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/commons/mobileWorkspace/MobileKeyboard.tsx b/src/commons/mobileWorkspace/MobileKeyboard.tsx index 7ceb618282..9c703d34c4 100644 --- a/src/commons/mobileWorkspace/MobileKeyboard.tsx +++ b/src/commons/mobileWorkspace/MobileKeyboard.tsx @@ -44,10 +44,7 @@ const MobileKeyboard: React.FC = props => { } }; - - const handleKeyPress = (button: string) => { - if (!props.targetKeyboardInput) { return; } @@ -62,7 +59,7 @@ const MobileKeyboard: React.FC = props => { setTouchStartInfo({ x: touch.clientX, y: touch.clientY, - time: Date.now(), + time: Date.now() }); }; From ff69e1c03459d696c7e9950c07cd7730e6b5b18b Mon Sep 17 00:00:00 2001 From: Johnwz123 <112536096+Johnwz123@users.noreply.github.com> Date: Fri, 12 Apr 2024 00:01:06 +0800 Subject: [PATCH 5/5] Remove console.log statements --- src/commons/mobileWorkspace/MobileKeyboard.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/commons/mobileWorkspace/MobileKeyboard.tsx b/src/commons/mobileWorkspace/MobileKeyboard.tsx index 9c703d34c4..eea9c2c9c8 100644 --- a/src/commons/mobileWorkspace/MobileKeyboard.tsx +++ b/src/commons/mobileWorkspace/MobileKeyboard.tsx @@ -74,14 +74,12 @@ const MobileKeyboard: React.FC = props => { const swipeThreshold = 30; // pixels const tapThresholdTime = 200; // milliseconds - if (Math.abs(deltaX) > swipeThreshold || Math.abs(deltaY) > swipeThreshold) { - console.log('Swipe detected'); - } else if (deltaTime < tapThresholdTime) { - console.log('Tap detected'); + if ( + Math.abs(deltaX) < swipeThreshold && + Math.abs(deltaY) < swipeThreshold && + deltaTime < tapThresholdTime + ) { handleKeyRelease(); - } else { - // Handle other cases or ignore - console.log('Other touch event detected'); } };