fix: clearing the canvas height when the context is cleared

alifeinbinary · Aug 30, 2024 · f120b5c · f120b5c
1 parent 54c5a72
commit f120b5c
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/src/components/TextArea.tsx b/src/components/TextArea.tsx
@@ -11,6 +11,7 @@ interface TextAreaProps {
     setDecryptedText: React.Dispatch<React.SetStateAction<string>>;
     input: string;
     setInput: React.Dispatch<React.SetStateAction<string>>;
+    setOutput: React.Dispatch<React.SetStateAction<string[]>>;
     setEncryptionEnabled: React.Dispatch<React.SetStateAction<boolean>>;
     canvasRef: React.MutableRefObject<HTMLCanvasElement | null>;
     handleDecrypt: (encryptedText: string, password: string, setDecryptedText: React.Dispatch<React.SetStateAction<string>>) => void;
@@ -19,7 +20,7 @@ interface TextAreaProps {
     setSize: React.Dispatch<React.SetStateAction<number>>;
 }
 
-export const TextArea: React.FC<TextAreaProps> = ({ encryptionEnabled, password, setPassword, encryptedText, setDecryptedText, input, setInput, setEncryptionEnabled, canvasRef, handleDecrypt, decryptedText, size, setSize }) => {
+export const TextArea: React.FC<TextAreaProps> = ({ encryptionEnabled, password, setPassword, encryptedText, setDecryptedText, input, setInput, setOutput, setEncryptionEnabled, canvasRef, handleDecrypt, decryptedText, size, setSize }) => {
 
     const handleCheckboxChange = () => {
         setEncryptionEnabled(!encryptionEnabled)
@@ -95,6 +96,7 @@ export const TextArea: React.FC<TextAreaProps> = ({ encryptionEnabled, password,
                         setInput(e.target.value);
                         if (e.target.value.trim() === '') {
                             clearContx(canvasRef);
+                            setOutput([]);
                         }
                     }} maxLength={512} className="block w-full px-0 text-sm text-gray-800 bg-white border-0 dark:bg-gray-800 focus:ring-0 dark:text-white dark:placeholder-gray-400" placeholder={`${decryptedText ? decryptedText : 'Type your thoughts '}`} required ></textarea>
                 </div>

diff --git a/src/components/Translate.tsx b/src/components/Translate.tsx
@@ -103,11 +103,11 @@ const Translate: React.FC<React.CanvasHTMLAttributes<HTMLCanvasElement>> = () =>
         <div>
             <div className='flex gap-4'>
                 <div className='flex-1 w-2/3'>
-                    <TextArea encryptionEnabled={encryptionEnabled} password={password} setPassword={setPassword} encryptedText={encryptedText} setDecryptedText={setDecryptedText} input={input} setInput={setInput} setEncryptionEnabled={setEncryptionEnabled} canvasRef={canvasRef} handleDecrypt={handleDecrypt} decryptedText={decryptedText} size={size} setSize={setSize} />
+                    <TextArea encryptionEnabled={encryptionEnabled} password={password} setPassword={setPassword} encryptedText={encryptedText} setDecryptedText={setDecryptedText} input={input} setInput={setInput} setOutput={setOutput} setEncryptionEnabled={setEncryptionEnabled} canvasRef={canvasRef} handleDecrypt={handleDecrypt} decryptedText={decryptedText} size={size} setSize={setSize} />
                 </div>
                 <Dropzone setInput={setInput} setEncryptionEnabled={setEncryptionEnabled} setTextToDecrypt={setTextToDecrypt} />
             </div>
-            <canvas id="canvas" ref={canvasRef} height={canvasHeight} width={canvasWidth} className='pb-2 w-full rounded-lg bg-slate-100' />
+            <canvas id="canvas" ref={canvasRef} height={canvasHeight} width={canvasWidth} className='w-full rounded-lg bg-slate-100' />
         </div>
     );
 }