diff --git a/src/Tools/_framework/Footers/MathInputKeyboard.jsx b/src/Tools/_framework/Footers/MathInputKeyboard.jsx index 26f8b42ffa..676104401e 100644 --- a/src/Tools/_framework/Footers/MathInputKeyboard.jsx +++ b/src/Tools/_framework/Footers/MathInputKeyboard.jsx @@ -7,6 +7,7 @@ import ToggleButtonGroup from '../../../_reactComponents/PanelHeaderComponents/T import VerticalDivider from '../../../_reactComponents/PanelHeaderComponents/VerticalDivider'; import { faBackspace, faArrowUp } from '@fortawesome/free-solid-svg-icons'; +import { useToast, toastType } from '../Toast'; import { useRecoilValue, useSetRecoilState } from 'recoil'; @@ -34,14 +35,22 @@ const Panel = styled.div` justify-content: center; `; -const ContainerSection = styled.div` +const SubSection = styled.div` display: flex; - flex-direction: column; + flex-direction: row; flex-wrap: no-wrap; - flex-basis: 27%; + /* flex-basis: 27%; */ flex-grow: 1; `; +const ContainerSection = styled.div` + display: grid; + flex-direction: row; + flex-wrap: no-wrap; + /* flex-basis: 27%; */ + /* flex-grow: 1; */ +`; + const ControlSection = styled.div` display: flex; flex-direction: column; @@ -57,8 +66,8 @@ const ToggleButtonSection = styled.div` const Section = styled.div` height: 160px; - min-width: 100px; - max-width: 300px; + /* min-width: 100px; */ + /* max-width: 300px; */ margin-left: auto; margin-right: auto; margin-top: auto; @@ -82,7 +91,7 @@ const LettersSection = styled.div` `; const Button = styled.button` - flex-basis: 23%; + flex-basis: 18%; height: 30px; color: var(--mainBlue); border: 2px solid var(--mainBlue); @@ -91,7 +100,16 @@ const Button = styled.button` `; const Button33 = styled.button` - flex-basis: 30%; + flex-basis: ${(props) => props.alpha ? '20%' : '28%'}; + height: 30px; + color: ${(props) => (props.alpha || props.transition) ? 'white' : 'var(--mainBlue)'}; + border: 2px solid var(--mainBlue); + border-radius: 5px; + background: ${(props) => (props.alpha || props.transition) ? 'var(--mainBlue)' : 'white'}; +`; + +const Button44 = styled.button` + flex-basis: 24%; height: 30px; color: var(--mainBlue); border: 2px solid var(--mainBlue); @@ -103,14 +121,14 @@ const White15Button = styled.button` flex-basis: 14%; margin: 1px; height: 30px; - background: var(--mainBlue); - border: none; - color: white; + background: ${(props) => props.lowercase ? 'white' :'var(--mainBlue)'}; + border: ${(props) => props.lowercase ? '2px solid var(--mainBlue)' :'none'}; + color: ${(props) => props.lowercase ? 'var(--mainBlue)' :'white'}; border-radius: 5px; `; const CursorButton = styled.button` - flex-basis: 42%; + flex-basis: 18%; height: 30px; background: var(--mainBlue); border: none; @@ -119,7 +137,7 @@ const CursorButton = styled.button` `; const DeleteButton = styled.button` - flex-basis: 90%; + flex-basis: 18%; height: 30px; background: var(--mainBlue); border: none; @@ -128,7 +146,7 @@ const DeleteButton = styled.button` `; const EnterButton = styled.button` - flex-basis: 90%; + flex-basis: 18%; height: 30px; background: var(--mainBlue); border: none; @@ -136,6 +154,16 @@ const EnterButton = styled.button` border-radius: 5px; `; +const SpaceButton = styled.button` + flex-basis: 49%; + margin: 1px; + height: 30px; + background: white; + border: 2px solid var(--mainBlue); + color: var(--mainBlue); + border-radius: 5px; +`; + const White20Button = styled.button` flex-basis: 19%; margin: 1px; @@ -147,44 +175,45 @@ const White20Button = styled.button` `; const LetterButton = styled.button` - flex-basis: 9%; + flex-basis: 9.5%; margin: 1px; height: 30px; - color: var(--mainBlue); - border: 2px solid var(--mainBlue); - background: white; + color: ${(props) => props.transition ? 'white' : 'var(--mainBlue)'}; + border: ${(props) => props.transition ? 'none' : '2px solid var(--mainBlue)'}; + background: ${(props) => props.transition ? 'var(--mainBlue)' : 'white'}; border-radius: 5px; `; export default function VirtualKeyboard() { const [toggleLetters, setToggleLetters] = useState(false); - const [toggleCase, setToggleCase] = useState(false); - const [toggleGreek, setToggleGreek] = useState(0); + const [toggleABCCase, setToggleABCCase] = useState(false); + const [toggleGreekCase, setToggleGreekCase] = useState(false); const [toggleFn, setToggleFn] = useState(0); const [toggleNumpad, setToggleNumpad] = useState(0); const callback = useRecoilValue(focusedMathField); const returncallback = useRecoilValue(focusedMathFieldReturn); const setPalletRef = useSetRecoilState(palletRef); const containerRef = useRef(null); + const addToast = useToast(); useEffect(() => { setPalletRef({ ...containerRef }); //console.log(">>> ref: ", containerRef, toggleButtonRef, functionTabRef) setToggleFn(0); - setToggleGreek(0); + // setToggleGreek(0); setToggleNumpad(0); - }, [toggleLetters, toggleCase, setPalletRef]); + }, [toggleLetters, setPalletRef]); const handleToggleLetters = () => { setToggleLetters(!toggleLetters); }; - const handleToggleCase = () => { - setToggleCase(!toggleCase); + const handleToggleABCCase = () => { + setToggleABCCase(!toggleABCCase); }; - const handleGreekToggle = (val) => { - setToggleGreek(val); + const handleToggleGreekCase = () => { + setToggleGreekCase(!toggleGreekCase); }; const handleFnToggle = (val) => { @@ -195,9 +224,9 @@ export default function VirtualKeyboard() { setToggleNumpad(val); }; - if (toggleLetters) { - if (toggleCase) { - return ( + // if (toggleLetters) { + // if (toggleCase) { + let sectionUpperABC = ( callback('write Q')}>Q @@ -219,10 +248,7 @@ export default function VirtualKeyboard() { callback('write J')}>J callback('write K')}>K callback('write L')}>L - callback('write \\tau')}> - \(\tau\) - - + callback('write Z')}>Z @@ -235,25 +261,23 @@ export default function VirtualKeyboard() { callback('keystroke Backspace')}> - 123 - callback('cmd ^')}> - \(a^b\) - - callback('write %')}>% - callback('cmd ]')}>] - callback('cmd }')} - >{`}`} - callback('write :')}>: + callback('write ,')}>, callback("write '")}>' - returncallback()}> + callback('write \\ ')}> + callback('keystroke Left')}> + \(\leftarrow\) + + callback('keystroke Right')}> + \(\rightarrow\) + + returncallback()}> Enter - + ); - } else { - return ( + // } else { + let sectionLowerABC = ( callback('write q')}>q @@ -275,10 +299,7 @@ export default function VirtualKeyboard() { callback('write j')}>j callback('write k')}>k callback('write l')}>l - callback('write \\theta')}> - \(\theta\) - - + callback('write z')}>z @@ -291,84 +312,190 @@ export default function VirtualKeyboard() { callback('keystroke Backspace')}> - 123 - callback('cmd _')}> - \(a_b\) - - callback('write !')}>! - callback('cmd [')}>[ - callback('cmd {')} - >{`{`} - callback('write ~')}>~ callback('write ,')}>, - returncallback()}> + callback("write '")}>' + callback('write \\ ')}> + callback('keystroke Left')}> + \(\leftarrow\) + + callback('keystroke Right')}> + \(\rightarrow\) + + returncallback()}> Enter - + ); - } - } else { - let sectionSet = ( + // } + // } + let sectionSymbols1 = (
- callback('write \\cup')}> - \(\cup\) - - callback('write \\cap')}> - \(\cap\) - - callback('write \\subset')}> + + + + + + + + + + + + + + + + {/* + + + + */} +
+ ); + + let sectionSymbols2 = ( +
+ + + + + + + + + + + + + + + callback('keystroke Backspace')}> + + + + {/* */} + callback('keystroke Left')}> + \(\leftarrow\) + + callback('keystroke Right')}> + \(\rightarrow\) + + returncallback()}>Enter
); + let sectionTrig1 = (
- callback('cmd \\sin')}> + callback('type sin(')}> \(\sin\) - callback('cmd \\cos')}> + callback('type cos(')}> \(\cos\) - callback('cmd \\tan')}> + callback('type tan(')}> \(\tan\) - callback('write \\sin^{-1}')}> + {callback('write \\sin^{-1}'); callback('type (')}}> {`\\(\\sin^{-1}\\)`} - callback('write \\cos^{-1}')}> + {callback('write \\cos^{-1}'); callback('type (')}}> {`\\(\\cos^{-1}\\)`} - callback('write \\tan^{-1}')}> + {callback('write \\tan^{-1}'); callback('type (')}}> {`\\(\\tan^{-1}\\)`} - callback('cmd \\sinh')}> - \(\sinh\) + callback('type ln(')}> + \(\ln\) - callback('cmd \\tanh')}> - \(\tanh\) + { + callback('write \\log_{}'); + callback('keystroke Left'); + }}> + \(\log_b\) - callback('cmd \\cosh')}> - \(\cosh\) + callback('write \\log_{10}')}> + {`\\(\\log_{10}\\)`} + + { + callback('write e^{}'); + callback('keystroke Left'); + }} + > + {`\\(e^{a}\\)`} + + { + callback('write 10^{}'); + callback('keystroke Left'); + }} + > + {`\\(10^{a}\\)`} + + {callback('write \\sqrt[]{}'); callback('keystroke Left'); callback('keystroke Left');}}> + {`\\(\\sqrt[b]{a}\\)`}
); @@ -440,6 +567,46 @@ export default function VirtualKeyboard() { ); + let sectionFx = ( +
+ callback('write \\frac{d}{dx}')}> + {`\\(\\frac{d}{dx}\\)`} + + {/* callback('write \\int')}> + \(\int\) + */} + { + callback('write \\int_{}^{}'); + callback('keystroke Left'); + callback('keystroke Left'); + }}> + {`\\(\\int_{a}^{b}\\)`} + + callback('type nPr(')}> + {`\\(\\operatorname{nPr}\\)`} + + callback('type nCr(')}> + {`\\(\\operatorname{nCr}\\)`} + + callback('write !')}>! + {callback('write \\lfloor'); callback('write \\rfloor'); callback ('keystroke Left')}}> + {`\\(\\lfloor{a}\\rfloor\\)`} + + {callback('write \\lceil'); callback('write \\rceil'); callback ('keystroke Left')}}> + {`\\(\\lceil{a}\\rceil\\)`} + + callback('keystroke Backspace')}> + + + callback('keystroke Left')}> + \(\leftarrow\) + + callback('keystroke Right')}> + \(\rightarrow\) + + returncallback()}>Enter +
+ ); let sectionGreekNone = null; @@ -552,6 +719,182 @@ export default function VirtualKeyboard() { ); + let sectionUpperGreek = ( + + + callback('write \\Phi')}> + \(\Phi\) + + callback('write \\Sigma')}> + \(\Sigma\) + + callback('write E')}>E + callback('write P')}>P + callback('write T')}>T + callback('write Y')}>Y + callback('write \\Theta')}> + \(\Theta\) + + callback('write I')}>I + callback('write O')}>O + callback('write \\Pi')}> + \(\Pi\) + + callback('write A')}>A + callback('write \\Sigma')}> + \(\Sigma\) + + callback('write \\Delta')}> + \(\Delta\) + + callback('write \\Phi')}> + \(\Phi\) + + callback('write \\Gamma')}> + \(\Gamma\) + + callback('write H')}>H + callback('write \\Xi')}> + \(\Xi\) + + callback('write K')}>K + callback('write \\Lambda')}> + \(\Lambda\) + + + + + callback('write Z')}>Z + callback('write X')}>X + callback('write \\Psi')}> + \(\Psi\) + + callback('write \\Omega')}> + \(\Delta\) + + callback('write B')}>B + callback('write N')}>N + callback('write M')}>M + callback('keystroke Backspace')}> + + + callback('write ,')}>, + callback("write '")}>' + callback('write \\ ')}> + callback('keystroke Left')}> + \(\leftarrow\) + + callback('keystroke Right')}> + \(\rightarrow\) + + returncallback()}> + Enter + + + + ); + + let sectionLowerGreek = ( + + + callback('write \\phi')}> + \(\phi\) + + callback('write \\varsigma')}> + \(\varsigma\) + + callback('write \\epsilon')}> + \(\epsilon\) + + callback('write \\rho')}> + \(\rho\) + + callback('write \\tau')}> + \(\tau\) + + callback('write \\upsilon')}> + \(\upsilon\) + + callback('write \\theta')}> + \(\theta\) + + callback('write \\iota')}> + \(\iota\) + + callback('write o')}>o + callback('write \\pi')}> + \(\pi\) + + callback('write \\alpha')}> + \(\alpha\) + + callback('write \\sigma')}> + \(\sigma\) + + callback('write \\delta')}> + \(\delta\) + + callback('write \\varphi')}> + \(\varphi\) + + callback('write \\gamma')}> + \(\gamma\) + + callback('write \\eta')}> + \(\eta\) + + callback('write \\xi')}> + \(\xi\) + + callback('write \\kappa')}> + \(\kappa\) + + callback('write \\lambda')}> + \(\lambda\) + + + + + callback('write \\zeta')}> + \(\zeta\) + + callback('write \\chi')}> + \(\chi\) + + callback('write \\psi')}> + \(\psi\) + + callback('write \\omega')}> + \(\omega\) + + callback('write \\beta')}> + \(\beta\) + + callback('write \\nu')}> + \(\nu\) + + callback('write \\mu')}> + \(\mu\) + + callback('keystroke Backspace')}> + + + callback('write ,')}>, + callback("write '")}>' + callback('write \\ ')}> + callback('keystroke Left')}> + \(\leftarrow\) + + callback('keystroke Right')}> + \(\rightarrow\) + + returncallback()}> + Enter + + + + ); + let sectionXYZ = (
+ + - - - - - - - -
); @@ -616,6 +966,9 @@ export default function VirtualKeyboard() { + @@ -628,8 +981,11 @@ export default function VirtualKeyboard() { - + - + callback('keystroke Backspace')}> + + - - + callback('keystroke Left')}> + \(\leftarrow\) + + callback('keystroke Right')}> + \(\rightarrow\) + + returncallback()}>Enter ); @@ -677,7 +1037,7 @@ export default function VirtualKeyboard() { return ( - + {/* @@ -689,46 +1049,48 @@ export default function VirtualKeyboard() { : toggleGreek === 1 ? sectionGreek2 : null} - - + */} + {/* */} - - - - + + + + + {toggleFn === 0 - ? sectionTrig1 + ? ({sectionXYZ}{section123}) : toggleFn === 1 - ? sectionTrig2 - : toggleFn === 2 - ? sectionSet - : toggleFn === 3 - ? sectionFn - : null} + ? ({sectionTrig1}{sectionFx}) + : toggleFn === 2 + ? (toggleABCCase ? sectionUpperABC : sectionLowerABC) + : toggleFn === 3 + ? (toggleGreekCase ? sectionUpperGreek : sectionLowerGreek) + : toggleFn === 4 + ? ({sectionSymbols1}{sectionSymbols2}) + : null} - + {/* */} - + {/* - - {toggleNumpad === 0 + */} + {/* {toggleNumpad === 0 ? section123 : toggleNumpad === 1 ? sectionXYZ - : null} + : null} */} - - {sectionControl} + {/* */} + {/* {sectionControl} */} ); - } // return ( // <> @@ -1011,7 +1373,7 @@ export default function VirtualKeyboard() { // transform={{ rotate: 90 }} // /> // - // + // // // ) : ( // diff --git a/src/Viewer/renderers/mathInput.jsx b/src/Viewer/renderers/mathInput.jsx index e997aba3f2..1f1ac0f84b 100644 --- a/src/Viewer/renderers/mathInput.jsx +++ b/src/Viewer/renderers/mathInput.jsx @@ -96,14 +96,18 @@ export default function MathInput(props) { return; } - if (text.split(' ')[0] == 'cmd') { - mathField.cmd(text.split(' ')[1]); - } else if (text.split(' ')[0] == 'write') { - mathField.write(text.split(' ')[1]); - } else if (text.split(' ')[0] == 'keystroke') { - mathField.keystroke(text.split(' ')[1]); - } else if (text.split(' ')[0] == 'type') { - mathField.typedText(text.split(' ')[1]); + const splitCommand = text.split(' '); + const command = splitCommand[0]; + const input = text.substring(command.length + 1); + + if (command == 'cmd') { + mathField.cmd(input); + } else if (command == 'write') { + mathField.write(input); + } else if (command == 'keystroke') { + mathField.keystroke(input); + } else if (command == 'type') { + mathField.typedText(input); } }; @@ -346,6 +350,14 @@ export default function MathInput(props) { substituteTextarea: function () { textareaRef.current = document.createElement('textarea'); textareaRef.current.disabled = SVs.disabled; + textareaRef.current.addEventListener("focusout", (e) => { + let keyboard = document.getElementById("keyboard"); + if (keyboard.contains(e.relatedTarget)) { + e.target.focus(); + } else { + // remove focus + } + }, false); return textareaRef.current; } }} //more commands go here