Merge pull request #395 from Lemoncode/feature/#394-keyboard-fix

Feature/#394 keyboard fix
Lemoncode · Sep 23, 2024 · cdee7a8 · cdee7a8
2 parents 9b9d9e1 + 3e00011
commit cdee7a8
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 5 deletions.
diff --git a/src/pods/canvas/use-keyboard-displacement.tsx b/src/pods/canvas/use-keyboard-displacement.tsx
@@ -2,6 +2,15 @@ import { useEffect } from 'react';
 import { useCanvasContext } from '@/core/providers';
 import { Coord } from '@/core/model';
 
+const arrowKeys = {
+  arrowUp: 'ArrowUp',
+  arrowDown: 'ArrowDown',
+  arrowLeft: 'ArrowLeft',
+  arrowRight: 'ArrowRight',
+};
+
+const isArrowKey = (key: string) => Object.values(arrowKeys).includes(key);
+
 export const useKeyboardDisplacement = () => {
   const { selectionInfo, updateShapePosition, isInlineEditing } =
     useCanvasContext();
@@ -32,33 +41,35 @@ export const useKeyboardDisplacement = () => {
         return;
       }
 
-      event.preventDefault();
+      if (isArrowKey(event.key)) {
+        event.preventDefault();
+      }
 
       if (selectionInfo.selectedShapesIds.length === 0) {
         return;
       }
 
       const step = event.shiftKey ? 25 : 2; // If shift is pressed, move faster
       switch (event.key) {
-        case 'ArrowUp':
+        case arrowKeys.arrowUp:
           updateShapeCollectionPosition(selectionInfo.selectedShapesIds, {
             x: 0,
             y: -step,
           });
           break;
-        case 'ArrowDown':
+        case arrowKeys.arrowDown:
           updateShapeCollectionPosition(selectionInfo.selectedShapesIds, {
             x: 0,
             y: step,
           });
           break;
-        case 'ArrowLeft':
+        case arrowKeys.arrowLeft:
           updateShapeCollectionPosition(selectionInfo.selectedShapesIds, {
             x: -step,
             y: 0,
           });
           break;
-        case 'ArrowRight':
+        case arrowKeys.arrowRight:
           updateShapeCollectionPosition(selectionInfo.selectedShapesIds, {
             x: step,
             y: 0,

diff --git a/src/pods/properties/components/icon-selector/modal/icon-modal.tsx b/src/pods/properties/components/icon-selector/modal/icon-modal.tsx
@@ -5,6 +5,8 @@ import { useIconModal } from './use-icon-modal.hook';
 import { IconModalSearchBar } from './components/searchbar.component';
 import { IconModalCategories } from './components/categories.component';
 import { IconList } from './components/icon-list.component';
+import { useEffect } from 'react';
+import { useCanvasContext } from '@/core/providers';
 
 interface IconModalProps {
   actualIcon: IconInfo;
@@ -13,6 +15,7 @@ interface IconModalProps {
 
 export const IconModal: React.FC<IconModalProps> = props => {
   const { actualIcon, onChange } = props;
+  const { setIsInlineEditing } = useCanvasContext();
   const { closeModal } = useModalDialogContext();
 
   const {
@@ -33,6 +36,14 @@ export const IconModal: React.FC<IconModalProps> = props => {
     closeModal();
   };
 
+  useEffect(() => {
+    setIsInlineEditing(true);
+
+    return () => {
+      setIsInlineEditing(false);
+    };
+  }, []);
+
   return (
     <div className={classes.container}>
       <h2 className={classes.title}>Choose your icon</h2>